minor changes

src/components/metadata/SeriesContent.tsx

@@ -340,7 +340,6 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
         key={episode.id}
         style={[
           styles.episodeCardVertical, 
-          isTablet && styles.episodeCardVerticalTablet, 
           { backgroundColor: currentTheme.colors.elevation2 }
         ]}
         onPress={() => onSelectEpisode(episode)}
@@ -749,10 +748,10 @@ const styles = StyleSheet.create({
     height: 120,
   },
   episodeCardVerticalTablet: {
-    width: '47%',
+    width: '100%',
     flexDirection: 'row',
     height: 140,
-    marginBottom: 0,
+    marginBottom: 16,
   },
   episodeImageContainer: {
     position: 'relative',

src/hooks/useSettings.ts

@@ -58,6 +58,11 @@ export interface AppSettings {
   // Theme settings
   themeId: string;
   customThemes: CustomThemeDef[];
+  useDominantBackgroundColor: boolean;
+  // Home screen poster customization
+  posterSize: 'small' | 'medium' | 'large'; // Predefined sizes
+  posterBorderRadius: number; // 0-20 range for border radius
+  postersPerRow: number; // 3-6 range for number of posters per row
 }
 
 export const DEFAULT_SETTINGS: AppSettings = {
@@ -91,6 +96,11 @@ export const DEFAULT_SETTINGS: AppSettings = {
   // Theme defaults
   themeId: 'default',
   customThemes: [],
+  useDominantBackgroundColor: true,
+  // Home screen poster defaults
+  posterSize: 'medium',
+  posterBorderRadius: 12,
+  postersPerRow: 4,
 };
 
 const SETTINGS_STORAGE_KEY = 'app_settings';

src/screens/MetadataScreen.tsx

@@ -33,6 +33,7 @@ import Animated, {
   runOnUI,
   Easing,
   interpolateColor,
+  withSpring,
 } from 'react-native-reanimated';
 import { RouteProp } from '@react-navigation/native';
 import { NavigationProp } from '@react-navigation/native';
@@ -127,7 +128,7 @@ const MetadataScreen: React.FC = () => {
   const hasAnimatedInitialColorRef = useRef(false);
   useEffect(() => {
     const base = currentTheme.colors.darkBackground;
-    const target = (dominantColor && dominantColor !== '#1a1a1a' && dominantColor !== null)
+    const target = (settings.useDominantBackgroundColor && dominantColor && dominantColor !== '#1a1a1a' && dominantColor !== null)
       ? dominantColor
       : base;
 
@@ -136,9 +137,9 @@ const MetadataScreen: React.FC = () => {
       bgFromColor.value = base as any;
       bgToColor.value = target as any;
       bgProgress.value = 0;
-      bgProgress.value = withTiming(1, {
-        duration: 420,
-        easing: Easing.bezier(0.16, 1, 0.3, 1),
+      bgProgress.value = withSpring(1, {
+        damping: 30,
+        stiffness: 90,
       });
       hasAnimatedInitialColorRef.current = true;
       return;
@@ -155,12 +156,12 @@ const MetadataScreen: React.FC = () => {
       bgFromColor.value = current as any;
       bgToColor.value = target as any;
       bgProgress.value = 0;
-      bgProgress.value = withTiming(1, {
-        duration: 380,
-        easing: Easing.bezier(0.2, 0, 0, 1),
+      bgProgress.value = withSpring(1, {
+        damping: 30,
+        stiffness: 90,
       });
     })();
-  }, [dominantColor, currentTheme.colors.darkBackground]);
+  }, [dominantColor, currentTheme.colors.darkBackground, settings.useDominantBackgroundColor]);
   
   // Create an animated style for the background color
   const animatedBackgroundStyle = useAnimatedStyle(() => {
@@ -174,11 +175,11 @@ const MetadataScreen: React.FC = () => {
   
   // For compatibility with existing code, maintain the static value as well
   const dynamicBackgroundColor = useMemo(() => {
-    if (dominantColor && dominantColor !== '#1a1a1a' && dominantColor !== null && dominantColor !== currentTheme.colors.darkBackground) {
+    if (settings.useDominantBackgroundColor && dominantColor && dominantColor !== '#1a1a1a' && dominantColor !== null && dominantColor !== currentTheme.colors.darkBackground) {
       return dominantColor;
     }
     return currentTheme.colors.darkBackground;
-  }, [dominantColor, currentTheme.colors.darkBackground]);
+  }, [dominantColor, currentTheme.colors.darkBackground, settings.useDominantBackgroundColor]);
 
   // Debug logging for color extraction timing
   useEffect(() => {

src/screens/ThemeScreen.tsx

@@ -21,6 +21,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { colors } from '../styles/colors';
 import { useTheme, Theme, DEFAULT_THEMES } from '../contexts/ThemeContext';
 import { RootStackParamList } from '../navigation/AppNavigator';
+import { useSettings } from '../hooks/useSettings';
 
 const { width } = Dimensions.get('window');
 
@@ -311,6 +312,7 @@ const ThemeScreen: React.FC = () => {
   } = useTheme();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const insets = useSafeAreaInsets();
+  const { settings, updateSetting } = useSettings();
   
   const [isEditMode, setIsEditMode] = useState(false);
   const [editingTheme, setEditingTheme] = useState<Theme | null>(null);
@@ -524,6 +526,22 @@ const ThemeScreen: React.FC = () => {
           <MaterialIcons name="add" size={20} color="#FFFFFF" />
           <Text style={styles.createButtonText}>Create Custom Theme</Text>
         </TouchableOpacity>
+
+        <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted, marginTop: 24 }]}>
+          OPTIONS
+        </Text>
+
+        <View style={styles.optionRow}>
+          <Text style={[styles.optionLabel, { color: currentTheme.colors.text }]}>
+            Use Dominant Color from Artwork
+          </Text>
+          <Switch
+            value={settings.useDominantBackgroundColor}
+            onValueChange={(value) => updateSetting('useDominantBackgroundColor', value)}
+            trackColor={{ false: '#767577', true: currentTheme.colors.primary }}
+            thumbColor={Platform.OS === 'android' ? currentTheme.colors.primary : '#f4f3f4'}
+          />
+        </View>
       </ScrollView>
     </View>
   );
@@ -669,6 +687,19 @@ const styles = StyleSheet.create({
     fontSize: 14,
     marginLeft: 8,
   },
+  optionRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    borderRadius: 10,
+    marginBottom: 12,
+  },
+  optionLabel: {
+    fontSize: 14,
+  },
   
   // Editor styles
   editorContainer: {