diff --git a/components/ItemContent.tv.tsx b/components/ItemContent.tv.tsx index d2f8ff1e..ae806f31 100644 --- a/components/ItemContent.tv.tsx +++ b/components/ItemContent.tv.tsx @@ -184,10 +184,6 @@ export const ItemContentTV: React.FC = React.memo( null, ); - // State for last option button ref (used for upward focus guide from cast) - const [_lastOptionButtonRef, setLastOptionButtonRef] = - useState(null); - // Get available audio tracks const audioTracks = useMemo(() => { const streams = selectedOptions?.mediaSource?.MediaStreams?.filter( @@ -442,25 +438,6 @@ export const ItemContentTV: React.FC = React.memo( return `${api.basePath}/Items/${item.SeriesId}/Images/Thumb?fillHeight=700&quality=80`; }, [api, item]); - // Determine which option button is the last one (for focus guide targeting) - const lastOptionButton = useMemo(() => { - const hasSubtitleOption = - subtitleStreams.length > 0 || - selectedOptions?.subtitleIndex !== undefined; - const hasAudioOption = audioTracks.length > 0; - const hasMediaSourceOption = mediaSources.length > 1; - - if (hasSubtitleOption) return "subtitle"; - if (hasAudioOption) return "audio"; - if (hasMediaSourceOption) return "mediaSource"; - return "quality"; - }, [ - subtitleStreams.length, - selectedOptions?.subtitleIndex, - audioTracks.length, - mediaSources.length, - ]); - // Navigation handlers const handleActorPress = useCallback( (personId: string) => { @@ -658,21 +635,17 @@ export const ItemContentTV: React.FC = React.memo( {/* Playback options */} {/* Quality selector */} showOptions({ title: t("item_card.quality"), @@ -685,13 +658,9 @@ export const ItemContentTV: React.FC = React.memo( {/* Media source selector (only if multiple sources) */} {mediaSources.length > 1 && ( showOptions({ title: t("item_card.video"), @@ -705,13 +674,9 @@ export const ItemContentTV: React.FC = React.memo( {/* Audio selector */} {audioTracks.length > 0 && ( showOptions({ title: t("item_card.audio"), @@ -726,13 +691,9 @@ export const ItemContentTV: React.FC = React.memo( {(subtitleStreams.length > 0 || selectedOptions?.subtitleIndex !== undefined) && ( showSubtitleModal({ item, diff --git a/components/tv/TVOptionButton.tsx b/components/tv/TVOptionButton.tsx index 41359561..562bd634 100644 --- a/components/tv/TVOptionButton.tsx +++ b/components/tv/TVOptionButton.tsx @@ -10,10 +10,11 @@ export interface TVOptionButtonProps { value: string; onPress: () => void; hasTVPreferredFocus?: boolean; + maxWidth?: number; } export const TVOptionButton = React.forwardRef( - ({ label, value, onPress, hasTVPreferredFocus }, ref) => { + ({ label, value, onPress, hasTVPreferredFocus, maxWidth }, ref) => { const typography = useScaledTVTypography(); const { focused, handleFocus, handleBlur, animatedStyle } = useTVFocusAnimation({ scaleAmount: 1.02, duration: 120 }); @@ -47,12 +48,14 @@ export const TVOptionButton = React.forwardRef( flexDirection: "row", alignItems: "center", gap: 8, + maxWidth, }} > {label} @@ -62,6 +65,7 @@ export const TVOptionButton = React.forwardRef( fontSize: typography.callout, color: "#000", fontWeight: "500", + flexShrink: 1, }} numberOfLines={1} > @@ -75,6 +79,7 @@ export const TVOptionButton = React.forwardRef( style={{ borderRadius: 8, overflow: "hidden", + maxWidth, }} > ( style={{ fontSize: typography.callout, color: "#bbb", + flexShrink: 0, }} > {label} @@ -100,6 +106,7 @@ export const TVOptionButton = React.forwardRef( fontSize: typography.callout, color: "#E5E7EB", fontWeight: "500", + flexShrink: 1, }} numberOfLines={1} >