From cc6c3d9d293c8c47db8e3743bc48448091f0084f Mon Sep 17 00:00:00 2001 From: tapframe Date: Sun, 10 Aug 2025 14:12:28 +0530 Subject: [PATCH] minor changes --- src/components/metadata/SeriesContent.tsx | 5 ++-- src/hooks/useSettings.ts | 10 ++++++++ src/screens/MetadataScreen.tsx | 21 +++++++-------- src/screens/ThemeScreen.tsx | 31 +++++++++++++++++++++++ 4 files changed, 54 insertions(+), 13 deletions(-) diff --git a/src/components/metadata/SeriesContent.tsx b/src/components/metadata/SeriesContent.tsx index a11bba2d..21e1106c 100644 --- a/src/components/metadata/SeriesContent.tsx +++ b/src/components/metadata/SeriesContent.tsx @@ -340,7 +340,6 @@ export const SeriesContent: React.FC = ({ 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', diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index 6c7650b1..71786a02 100644 --- a/src/hooks/useSettings.ts +++ b/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'; diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx index 6e6131d9..ca330e40 100644 --- a/src/screens/MetadataScreen.tsx +++ b/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(() => { diff --git a/src/screens/ThemeScreen.tsx b/src/screens/ThemeScreen.tsx index 0f1e909d..53daeb77 100644 --- a/src/screens/ThemeScreen.tsx +++ b/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>(); const insets = useSafeAreaInsets(); + const { settings, updateSetting } = useSettings(); const [isEditMode, setIsEditMode] = useState(false); const [editingTheme, setEditingTheme] = useState(null); @@ -524,6 +526,22 @@ const ThemeScreen: React.FC = () => { Create Custom Theme + + + OPTIONS + + + + + Use Dominant Color from Artwork + + updateSetting('useDominantBackgroundColor', value)} + trackColor={{ false: '#767577', true: currentTheme.colors.primary }} + thumbColor={Platform.OS === 'android' ? currentTheme.colors.primary : '#f4f3f4'} + /> + ); @@ -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: {