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(
}}
>