diff --git a/components/ItemContent.tv.tsx b/components/ItemContent.tv.tsx index 17b525be..4611c979 100644 --- a/components/ItemContent.tv.tsx +++ b/components/ItemContent.tv.tsx @@ -57,84 +57,81 @@ interface ItemContentTVProps { } // Focusable button component for TV with Apple TV-style animations -const TVFocusableButton = React.forwardRef< - View, - { - onPress: () => void; - children: React.ReactNode; - hasTVPreferredFocus?: boolean; - style?: any; - variant?: "primary" | "secondary"; - } ->( - ( - { onPress, children, hasTVPreferredFocus, style, variant = "primary" }, - ref, - ) => { - const [focused, setFocused] = useState(false); - const scale = useRef(new Animated.Value(1)).current; +const TVFocusableButton: React.FC<{ + onPress: () => void; + children: React.ReactNode; + hasTVPreferredFocus?: boolean; + style?: any; + variant?: "primary" | "secondary"; +}> = ({ + onPress, + children, + hasTVPreferredFocus, + style, + variant = "primary", +}) => { + const [focused, setFocused] = useState(false); + const scale = useRef(new Animated.Value(1)).current; - const animateTo = (v: number) => - Animated.timing(scale, { - toValue: v, - duration: 150, - easing: Easing.out(Easing.quad), - useNativeDriver: true, - }).start(); + const animateTo = (v: number) => + Animated.timing(scale, { + toValue: v, + duration: 150, + easing: Easing.out(Easing.quad), + useNativeDriver: true, + }).start(); - const isPrimary = variant === "primary"; + const isPrimary = variant === "primary"; - return ( - { - setFocused(true); - animateTo(1.05); - }} - onBlur={() => { - setFocused(false); - animateTo(1); - }} - hasTVPreferredFocus={hasTVPreferredFocus} + return ( + { + setFocused(true); + animateTo(1.05); + }} + onBlur={() => { + setFocused(false); + animateTo(1); + }} + hasTVPreferredFocus={hasTVPreferredFocus} + > + - - - {children} - - - - ); - }, -); + {children} + + + + ); +}; // Info row component for metadata display const _InfoRow: React.FC<{ label: string; value: string }> = ({ @@ -633,9 +630,6 @@ export const ItemContentTV: React.FC = React.memo( SelectedOptions | undefined >(undefined); - // Ref for programmatic focus on play button - const playButtonRef = useRef(null); - const { defaultAudioIndex, defaultBitrate, @@ -663,16 +657,6 @@ export const ItemContentTV: React.FC = React.memo( defaultMediaSource, ]); - // Programmatically focus play button after content renders - useEffect(() => { - if (selectedOptions && playButtonRef.current) { - const timer = setTimeout(() => { - (playButtonRef.current as any)?.requestTVFocus?.(); - }, 50); - return () => clearTimeout(timer); - } - }, [selectedOptions]); - const handlePlay = () => { if (!item || !selectedOptions) return; @@ -1086,7 +1070,6 @@ export const ItemContentTV: React.FC = React.memo( }} >