ui changes
This commit is contained in:
tapframe
parent
93221b9760
commit
569d50f25b
2 changed files with 52 additions and 38 deletions
|
|
@ -16,6 +16,7 @@ import FastImage from '@d11/react-native-fast-image';
|
|||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { TMDBService } from '../services/tmdbService';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const BACKDROP_WIDTH = width * 0.9;
|
||||
|
|
@ -40,6 +41,7 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
const route = useRoute();
|
||||
const navigation = useNavigation();
|
||||
const { tmdbId, type, title } = route.params as RouteParams;
|
||||
const { currentTheme } = useTheme();
|
||||
|
||||
const [backdrops, setBackdrops] = useState<BackdropItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
|
@ -108,7 +110,9 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
try {
|
||||
await AsyncStorage.setItem(SELECTED_BACKDROP_KEY, JSON.stringify(backdrop));
|
||||
setSelectedBackdrop(backdrop);
|
||||
Alert.alert('Success', 'Custom backdrop set successfully!');
|
||||
Alert.alert('Success', 'Custom backdrop set successfully!', [
|
||||
{ text: 'OK', onPress: () => navigation.goBack() }
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Failed to save selected backdrop:', error);
|
||||
Alert.alert('Error', 'Failed to save backdrop');
|
||||
|
|
@ -119,7 +123,9 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
try {
|
||||
await AsyncStorage.removeItem(SELECTED_BACKDROP_KEY);
|
||||
setSelectedBackdrop(null);
|
||||
Alert.alert('Success', 'Custom backdrop reset to default!');
|
||||
Alert.alert('Success', 'Custom backdrop reset to default!', [
|
||||
{ text: 'OK', onPress: () => navigation.goBack() }
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Failed to reset selected backdrop:', error);
|
||||
Alert.alert('Error', 'Failed to reset backdrop');
|
||||
|
|
@ -152,14 +158,14 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
/>
|
||||
{isSelected && (
|
||||
<View style={styles.selectedIndicator}>
|
||||
<MaterialIcons name="check-circle" size={24} color="#fff" />
|
||||
<MaterialIcons name="check-circle" size={24} color={currentTheme.colors.highEmphasis} />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.backdropInfo}>
|
||||
<Text style={styles.backdropResolution}>
|
||||
<Text style={[styles.backdropResolution, { color: currentTheme.colors.highEmphasis }]}>
|
||||
{item.width} × {item.height}
|
||||
</Text>
|
||||
<Text style={styles.backdropAspect}>
|
||||
<Text style={[styles.backdropAspect, { color: currentTheme.colors.highEmphasis }]}>
|
||||
{item.aspect_ratio.toFixed(2)}:1
|
||||
</Text>
|
||||
</View>
|
||||
|
|
@ -173,13 +179,13 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
style={styles.backButton}
|
||||
onPress={() => navigation.goBack()}
|
||||
>
|
||||
<MaterialIcons name="arrow-back" size={24} color="#fff" />
|
||||
<MaterialIcons name="arrow-back" size={24} color={currentTheme.colors.highEmphasis} />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.titleContainer}>
|
||||
<Text style={styles.title} numberOfLines={1}>
|
||||
<Text style={[styles.title, { color: currentTheme.colors.highEmphasis }]} numberOfLines={1}>
|
||||
{title}
|
||||
</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
<Text style={[styles.subtitle, { color: currentTheme.colors.textMuted }]}>
|
||||
{backdrops.length} Backdrop{backdrops.length !== 1 ? 's' : ''}
|
||||
</Text>
|
||||
</View>
|
||||
|
|
@ -197,7 +203,7 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
);
|
||||
}}
|
||||
>
|
||||
<MaterialIcons name="refresh" size={24} color="#fff" />
|
||||
<MaterialIcons name="refresh" size={24} color={currentTheme.colors.highEmphasis} />
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
|
|
@ -209,8 +215,8 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
<StatusBar translucent backgroundColor="transparent" barStyle="light-content" />
|
||||
{renderHeader()}
|
||||
<View style={styles.loadingContainer}>
|
||||
<ActivityIndicator size="large" color="#fff" />
|
||||
<Text style={styles.loadingText}>Loading backdrops...</Text>
|
||||
<ActivityIndicator size="large" color={currentTheme.colors.primary} />
|
||||
<Text style={[styles.loadingText, { color: currentTheme.colors.textMuted }]}>Loading backdrops...</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
|
|
@ -222,8 +228,8 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
<StatusBar translucent backgroundColor="transparent" barStyle="light-content" />
|
||||
{renderHeader()}
|
||||
<View style={styles.errorContainer}>
|
||||
<MaterialIcons name="image-not-supported" size={64} color="rgba(255,255,255,0.5)" />
|
||||
<Text style={styles.errorText}>
|
||||
<MaterialIcons name="image-not-supported" size={64} color={currentTheme.colors.textMuted} />
|
||||
<Text style={[styles.errorText, { color: currentTheme.colors.textMuted }]}>
|
||||
{error || 'No backdrops available'}
|
||||
</Text>
|
||||
</View>
|
||||
|
|
@ -238,7 +244,7 @@ const BackdropGalleryScreen: React.FC = () => {
|
|||
|
||||
{/* Explanatory note */}
|
||||
<View style={styles.noteContainer}>
|
||||
<Text style={styles.noteText}>
|
||||
<Text style={[styles.noteText, { color: currentTheme.colors.textMuted }]}>
|
||||
Long press any backdrop to set it as your default for metadata screens and player loading overlay.
|
||||
</Text>
|
||||
</View>
|
||||
|
|
@ -277,12 +283,10 @@ const styles = StyleSheet.create({
|
|||
title: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
color: '#fff',
|
||||
marginBottom: 2,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
listContainer: {
|
||||
padding: 16,
|
||||
|
|
@ -307,12 +311,10 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
backdropResolution: {
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
opacity: 0.8,
|
||||
},
|
||||
backdropAspect: {
|
||||
fontSize: 12,
|
||||
color: '#fff',
|
||||
opacity: 0.8,
|
||||
},
|
||||
selectedIndicator: {
|
||||
|
|
@ -337,7 +339,6 @@ const styles = StyleSheet.create({
|
|||
},
|
||||
noteText: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
textAlign: 'center',
|
||||
lineHeight: 16,
|
||||
},
|
||||
|
|
@ -349,7 +350,6 @@ const styles = StyleSheet.create({
|
|||
loadingText: {
|
||||
marginTop: 12,
|
||||
fontSize: 16,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
errorContainer: {
|
||||
flex: 1,
|
||||
|
|
@ -360,7 +360,6 @@ const styles = StyleSheet.create({
|
|||
errorText: {
|
||||
marginTop: 16,
|
||||
fontSize: 16,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -109,15 +109,17 @@ const MetadataScreen: React.FC = () => {
|
|||
console.log('MetadataScreen: commentBottomSheetVisible changed to:', commentBottomSheetVisible);
|
||||
}, [commentBottomSheetVisible]);
|
||||
|
||||
// Load custom backdrop on mount
|
||||
useEffect(() => {
|
||||
const loadCustomBackdrop = async () => {
|
||||
const backdropUrl = await getSelectedBackdropUrl('original');
|
||||
setCustomBackdropUrl(backdropUrl);
|
||||
};
|
||||
// Load custom backdrop when screen comes into focus (for instant updates when returning from gallery)
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
const loadCustomBackdrop = async () => {
|
||||
const backdropUrl = await getSelectedBackdropUrl('original');
|
||||
setCustomBackdropUrl(backdropUrl);
|
||||
};
|
||||
|
||||
loadCustomBackdrop();
|
||||
}, []);
|
||||
loadCustomBackdrop();
|
||||
}, [])
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
console.log('MetadataScreen: selectedComment changed to:', selectedComment?.id);
|
||||
|
|
@ -1009,20 +1011,19 @@ const MetadataScreen: React.FC = () => {
|
|||
</View>
|
||||
)}
|
||||
|
||||
{/* Backdrop Gallery section - shown after details for movies/TV when TMDB ID is available */}
|
||||
{shouldLoadSecondaryData && metadata?.tmdbId && (
|
||||
{/* Backdrop Gallery section - shown after movie details for movies when TMDB ID is available */}
|
||||
{shouldLoadSecondaryData && Object.keys(groupedEpisodes).length === 0 && metadata?.tmdbId && (
|
||||
<View style={styles.backdropGalleryContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.backdropGalleryButton}
|
||||
onPress={() => navigation.navigate('BackdropGallery' as any, {
|
||||
tmdbId: metadata.tmdbId,
|
||||
type: Object.keys(groupedEpisodes).length > 0 ? 'tv' : 'movie',
|
||||
type: 'movie',
|
||||
title: metadata.name || 'Gallery'
|
||||
})}
|
||||
>
|
||||
<MaterialIcons name="photo-library" size={24} color="#fff" />
|
||||
<Text style={styles.backdropGalleryText}>Backdrop Gallery</Text>
|
||||
<MaterialIcons name="chevron-right" size={24} color="#fff" />
|
||||
<Text style={[styles.backdropGalleryText, { color: currentTheme.colors.highEmphasis }]}>Backdrop Gallery</Text>
|
||||
<MaterialIcons name="chevron-right" size={24} color={currentTheme.colors.highEmphasis} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
|
@ -1135,6 +1136,23 @@ const MetadataScreen: React.FC = () => {
|
|||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* Backdrop Gallery section - shown after show details for TV shows when TMDB ID is available */}
|
||||
{shouldLoadSecondaryData && Object.keys(groupedEpisodes).length > 0 && metadata?.tmdbId && (
|
||||
<View style={styles.backdropGalleryContainer}>
|
||||
<TouchableOpacity
|
||||
style={styles.backdropGalleryButton}
|
||||
onPress={() => navigation.navigate('BackdropGallery' as any, {
|
||||
tmdbId: metadata.tmdbId,
|
||||
type: 'tv',
|
||||
title: metadata.name || 'Gallery'
|
||||
})}
|
||||
>
|
||||
<Text style={[styles.backdropGalleryText, { color: currentTheme.colors.highEmphasis }]}>Backdrop Gallery</Text>
|
||||
<MaterialIcons name="chevron-right" size={24} color={currentTheme.colors.highEmphasis} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</Animated.View>
|
||||
</Animated.ScrollView>
|
||||
</>
|
||||
|
|
@ -1361,7 +1379,6 @@ const styles = StyleSheet.create({
|
|||
backdropGalleryButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 20,
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
|
|
@ -1373,8 +1390,6 @@ const styles = StyleSheet.create({
|
|||
flex: 1,
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: '#fff',
|
||||
marginLeft: 12,
|
||||
opacity: 0.9,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue