Revert "feat: initialize TV support"

This reverts commit 8e57607.

Author: lil-nusnus

android/app/src/main/AndroidManifest.xml

@@ -7,16 +7,11 @@
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE_DATA_SYNC" />
     <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
 
-    <!-- Android TV Support -->
-    <uses-feature android:name="android.software.leanback" android:required="false" />
-    <uses-feature android:name="android.hardware.touchscreen" android:required="false" />
-
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
-      android:banner="@drawable/tv_banner"
       android:allowBackup="false"
       android:theme="@style/AppTheme"
       android:usesCleartextTraffic="${usesCleartextTraffic}"
@@ -33,11 +28,6 @@
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
-        <!-- Android TV Leanback Launcher -->
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
-        </intent-filter>
       </activity>
 
       <!-- FileProvider for APK installation -->

android/app/src/main/res/drawable/tv_banner.xml

@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React from 'react';
 import {
   View,
   Text,
@@ -16,42 +16,21 @@ import {
   accessibilityRoles,
   getContentDescription,
 } from '../utils/accessibility';
-import {isTV, TV_FOCUS_BORDER_COLOR} from '../utils/tv';
-import TVFocusable from './TVFocusable';
 
 interface ContentCardProps {
   item: Movie | TVShow;
   onPress: (item: Movie | TVShow) => void;
   size?: 'small' | 'medium' | 'large';
   style?: ViewStyle;
-  hasTVPreferredFocus?: boolean;
-  onFocus?: () => void;
-  onBlur?: () => void;
 }
 
 const ContentCard: React.FC<ContentCardProps> = ({
   item,
   onPress,
   size = 'medium',
   style,
-  hasTVPreferredFocus = false,
-  onFocus,
-  onBlur,
 }) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const cardDimensions = isTV
-    ? {width: getCardDimensions(size).width * 1.2, height: getCardDimensions(size).height * 1.2}
-    : getCardDimensions(size);
-
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    onFocus?.();
-  }, [onFocus]);
-
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    onBlur?.();
-  }, [onBlur]);
+  const cardDimensions = getCardDimensions(size);
   const imageUrl = item.poster_path
     ? `${TMDB_CONFIG.IMAGE_BASE_URL}${item.poster_path}`
     : '';
@@ -67,35 +46,23 @@ const ContentCard: React.FC<ContentCardProps> = ({
   const contentDescription = getContentDescription(item);
 
   return (
-    <TVFocusable
-      style={[
-        styles.container,
-        {width: cardDimensions.width},
-        style,
-        isFocused && styles.focusedContainer,
-      ]}
+    <TouchableOpacity
+      style={[styles.container, {width: cardDimensions.width}, style]}
       onPress={() => onPress(item)}
       activeOpacity={0.8}
       accessible={true}
       accessibilityRole={accessibilityRoles.button}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHints.contentCard}
-      hasTVPreferredFocus={hasTVPreferredFocus}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      showFocusBorder={false}>
-      <View style={[
-        styles.imageContainer,
-        cardDimensions,
-        isFocused && styles.focusedImage,
-      ]}>
+      accessibilityValue={{text: contentDescription}}>
+      <View style={[styles.imageContainer, cardDimensions]}>
         <OptimizedImage
           uri={imageUrl}
           style={[styles.image, cardDimensions] as any}
           fallbackText="No Image"
           showLoadingIndicator={true}
         />
-        {rating !== undefined && rating > 0 && (
+        {rating > 0 && (
           <View
             style={styles.ratingContainer}
             accessible={true}
@@ -108,10 +75,7 @@ const ContentCard: React.FC<ContentCardProps> = ({
       {size !== 'small' && (
         <View style={styles.titleContainer}>
           <Text
-            style={[
-              styles.title,
-              isFocused && styles.focusedTitle,
-            ]}
+            style={styles.title}
             numberOfLines={2}
             ellipsizeMode="tail"
             accessible={true}
@@ -120,29 +84,20 @@ const ContentCard: React.FC<ContentCardProps> = ({
           </Text>
         </View>
       )}
-    </TVFocusable>
+    </TouchableOpacity>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     marginRight: spacing.sm,
   },
-  focusedContainer: {
-    zIndex: 10,
-  },
   imageContainer: {
     borderRadius: spacing.sm,
     overflow: 'hidden',
     backgroundColor: COLORS.NETFLIX_DARK_GRAY,
     position: 'relative',
   },
-  focusedImage: {
-    borderWidth: 3,
-    borderColor: TV_FOCUS_BORDER_COLOR,
-    borderRadius: spacing.sm + 2,
-    transform: [{scale: 1.05}],
-  },
   image: {
     borderRadius: spacing.sm,
   },
@@ -171,10 +126,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     lineHeight: typography.caption * 1.2,
   },
-  focusedTitle: {
-    color: TV_FOCUS_BORDER_COLOR,
-    fontWeight: 'bold',
-  },
 });
 
 export {ContentCard};

src/components/ContentCard.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useRef, useState} from 'react';
+import React, {useCallback} from 'react';
 import {
   View,
   Text,
@@ -11,7 +11,6 @@ import {COLORS} from '../utils/constants';
 import {ContentCard} from './ContentCard';
 import {getCardDimensions, spacing, typography} from '../utils/responsive';
 import {accessibilityRoles} from '../utils/accessibility';
-import {isTV} from '../utils/tv';
 
 interface HorizontalScrollListProps {
   title: string;
@@ -22,8 +21,6 @@ interface HorizontalScrollListProps {
   onEndReached?: () => void;
   hasMore?: boolean;
   loadingMore?: boolean;
-  hasTVPreferredFocus?: boolean;
-  sectionIndex?: number;
 }
 
 const HorizontalScrollList: React.FC<HorizontalScrollListProps> = ({
@@ -35,32 +32,9 @@ const HorizontalScrollList: React.FC<HorizontalScrollListProps> = ({
   onEndReached,
   hasMore = false,
   loadingMore = false,
-  hasTVPreferredFocus = false,
-  sectionIndex = 0,
 }) => {
-  const flatListRef = useRef<FlatList>(null);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-
-  const handleItemFocus = useCallback((index: number) => {
-    setFocusedIndex(index);
-    // Scroll to focused item on TV
-    if (isTV && flatListRef.current) {
-      flatListRef.current.scrollToIndex({
-        index,
-        animated: true,
-        viewPosition: 0.3,
-      });
-    }
-  }, []);
-
-  const renderItem = ({item, index}: {item: Movie | TVShow; index: number}) => (
-    <ContentCard
-      item={item}
-      onPress={onItemPress}
-      size={cardSize}
-      hasTVPreferredFocus={hasTVPreferredFocus && index === 0}
-      onFocus={() => handleItemFocus(index)}
-    />
+  const renderItem = ({item}: {item: Movie | TVShow}) => (
+    <ContentCard item={item} onPress={onItemPress} size={cardSize} />
   );
 
   const renderLoadingItem = () => (
@@ -126,21 +100,17 @@ const HorizontalScrollList: React.FC<HorizontalScrollListProps> = ({
         </View>
       ) : (
         <FlatList
-          ref={flatListRef}
           data={data}
           renderItem={renderItem}
           keyExtractor={keyExtractor}
           horizontal
           showsHorizontalScrollIndicator={false}
-          contentContainerStyle={[
-            styles.listContainer,
-            isTV && styles.tvListContainer,
-          ]}
+          contentContainerStyle={styles.listContainer}
           getItemLayout={getItemLayout}
-          initialNumToRender={isTV ? 6 : 3}
-          maxToRenderPerBatch={isTV ? 8 : 5}
-          windowSize={isTV ? 7 : 5}
-          removeClippedSubviews={!isTV}
+          initialNumToRender={3}
+          maxToRenderPerBatch={5}
+          windowSize={5}
+          removeClippedSubviews={true}
           updateCellsBatchingPeriod={50}
           ListEmptyComponent={renderEmptyComponent}
           decelerationRate="normal"
@@ -184,10 +154,6 @@ const styles = StyleSheet.create({
   listContainer: {
     paddingHorizontal: spacing.md,
   },
-  tvListContainer: {
-    paddingHorizontal: spacing.lg,
-    paddingVertical: spacing.sm,
-  },
   loadingContainer: {
     flexDirection: 'row',
     paddingHorizontal: spacing.md,

src/components/HorizontalScrollList.tsx

@@ -2,4 +2,3 @@ export { useVideoProgress } from './useVideoProgress';
 export { useSubtitles } from './useSubtitles';
 export { useFullscreen } from './useFullscreen';
 export { useControlsVisibility } from './useControlsVisibility';
-export { useTVRemote } from './useTVRemote';