Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-24 10:03:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor LogoSourceSettings UI for clarity and consistency

Browse source 
Simplify text descriptions and improve layout in the LogoSourceSettings component for better user understanding. Adjust styling properties for various elements, including padding, font sizes, and margins, to create a more cohesive and visually appealing interface. Ensure that fallback messaging is clear and concise, enhancing overall user experience.
This commit is contained in:
tapframe 2025-05-03 19:53:41 +05:30
parent 612bb5a0d0
commit 4e73409d01
1 changed files with 72 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
src/screens/LogoSourceSettings.tsx
View file

@ -481,8 +481,7 @@ const LogoSourceSettings = () => {
{/* Description */} {/* Description */}
<View style={styles.descriptionContainer}> <View style={styles.descriptionContainer}>
<Text style={styles.description}> <Text style={styles.description}>
Choose the primary source for content logos and background images. This affects the appearance Choose the primary source for content logos and backgrounds.
of titles in the metadata screen.
</Text> </Text>
</View> </View>
@ -539,8 +538,7 @@ const LogoSourceSettings = () => {
</View> </View>
<Text style={styles.optionDescription}> <Text style={styles.optionDescription}>
Prioritizes high-quality title logos from the Metahub image repository. High-quality logos from Metahub. Best for popular titles.
Offers good coverage for popular titles.
</Text> </Text>
<View style={styles.exampleContainer}> <View style={styles.exampleContainer}>
@ -567,8 +565,7 @@ const LogoSourceSettings = () => {
</View> </View>
<Text style={styles.optionDescription}> <Text style={styles.optionDescription}>
Uses logos from The Movie Database. Often includes more localized and newer logos, Logos from TMDB. Offers localized options and better coverage for recent content.
with better coverage for recent content.
</Text> </Text>
<View style={styles.exampleContainer}> <View style={styles.exampleContainer}>
@ -582,7 +579,7 @@ const LogoSourceSettings = () => {
<View style={styles.languageSelectorContainer}> <View style={styles.languageSelectorContainer}>
<Text style={styles.languageSelectorTitle}>Logo Language</Text> <Text style={styles.languageSelectorTitle}>Logo Language</Text>
<Text style={styles.languageSelectorDescription}> <Text style={styles.languageSelectorDescription}>
Select your preferred language for TMDB logos. This affects all content when TMDB is used as the logo source. Select your preferred language for TMDB logos.
</Text> </Text>
<ScrollView <ScrollView
horizontal horizontal
@ -615,7 +612,7 @@ const LogoSourceSettings = () => {
))} ))}
</ScrollView> </ScrollView>
<Text style={styles.noteText}> <Text style={styles.noteText}>
Note: Not all titles have logos in all languages. If a logo isn't available in your preferred language, English will be used as a fallback. If unavailable in preferred language, English will be used as fallback.
</Text> </Text>
</View> </View>
)} )}
@ -625,8 +622,7 @@ const LogoSourceSettings = () => {
{/* Additional Info */} {/* Additional Info */}
<View style={styles.infoBox}> <View style={styles.infoBox}>
<Text style={styles.infoText}> <Text style={styles.infoText}>
If a logo is not available from your preferred source, the app will automatically fall back to the other source. Unavailable logos will fall back to the alternate source, or display text if none found.
If no logo is found, the title text will be shown instead.
</Text> </Text>
</View> </View>
</ScrollView> </ScrollView>
@ -643,70 +639,70 @@ const LogoSourceSettings = () => {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 16, paddingHorizontal: 12,
height: 56, height: 48,
backgroundColor: colors.elevation2, backgroundColor: colors.elevation2,
}, },
backButton: { backButton: {
width: 40, width: 36,
height: 40, height: 36,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
headerTitle: { headerTitle: {
color: colors.white, color: colors.white,
fontSize: 20, fontSize: 18,
fontWeight: '600', fontWeight: '600',
}, },
headerRight: { headerRight: {
width: 40, width: 36,
}, },
scrollView: { scrollView: {
flex: 1, flex: 1,
}, },
descriptionContainer: { descriptionContainer: {
padding: 16, padding: 12,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: 'rgba(255,255,255,0.1)', borderBottomColor: 'rgba(255,255,255,0.1)',
}, },
description: { description: {
color: colors.text, color: colors.text,
fontSize: 16, fontSize: 14,
lineHeight: 24, lineHeight: 20,
}, },
showSelectorContainer: { showSelectorContainer: {
padding: 16, padding: 12,
paddingBottom: 8, paddingBottom: 6,
}, },
selectorLabel: { selectorLabel: {
color: colors.text, color: colors.text,
fontSize: 16, fontSize: 14,
marginBottom: 12, marginBottom: 8,
}, },
showsScrollContent: { showsScrollContent: {
paddingRight: 16, paddingRight: 16,
}, },
showItem: { showItem: {
paddingHorizontal: 16, paddingHorizontal: 12,
paddingVertical: 8, paddingVertical: 6,
backgroundColor: colors.elevation2, backgroundColor: colors.elevation2,
borderRadius: 20, borderRadius: 16,
marginRight: 8, marginRight: 6,
borderWidth: 1, borderWidth: 1,
borderColor: 'transparent', borderColor: 'transparent',
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 1 }, shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1, shadowOpacity: 0.1,
shadowRadius: 2, shadowRadius: 1,
elevation: 1, elevation: 1,
}, },
selectedShowItem: { selectedShowItem: {
borderColor: colors.primary, borderColor: colors.primary,
backgroundColor: colors.elevation3, backgroundColor: colors.elevation3,
shadowColor: colors.primary, shadowColor: colors.primary,
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2, shadowOpacity: 0.2,
shadowRadius: 3, shadowRadius: 2,
elevation: 2, elevation: 2,
}, },
showItemText: { showItemText: {
@ -718,16 +714,16 @@ const LogoSourceSettings = () => {
fontWeight: '600', fontWeight: '600',
}, },
optionsContainer: { optionsContainer: {
padding: 16, padding: 10,
gap: 16, gap: 10,
}, },
optionCard: { optionCard: {
backgroundColor: colors.elevation2, backgroundColor: colors.elevation2,
borderRadius: 12, borderRadius: 8,
padding: 16, padding: 12,
borderWidth: 2, borderWidth: 2,
borderColor: 'transparent', borderColor: 'transparent',
marginBottom: 12, marginBottom: 8,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2, shadowOpacity: 0.2,
@ -744,26 +740,26 @@ const LogoSourceSettings = () => {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginBottom: 8, marginBottom: 6,
}, },
optionTitle: { optionTitle: {
color: colors.white, color: colors.white,
fontSize: 18, fontSize: 16,
fontWeight: '600', fontWeight: '600',
}, },
optionDescription: { optionDescription: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 14, fontSize: 13,
lineHeight: 20, lineHeight: 18,
marginBottom: 16, marginBottom: 10,
}, },
exampleContainer: { exampleContainer: {
marginTop: 8, marginTop: 4,
}, },
exampleLabel: { exampleLabel: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 14, fontSize: 13,
marginBottom: 8, marginBottom: 4,
}, },
exampleImage: { exampleImage: {
height: 60, height: 60,
@ -776,58 +772,58 @@ const LogoSourceSettings = () => {
alignItems: 'center', alignItems: 'center',
}, },
infoBox: { infoBox: {
margin: 16, margin: 10,
padding: 16, padding: 10,
backgroundColor: 'rgba(255,255,255,0.05)', backgroundColor: 'rgba(255,255,255,0.05)',
borderRadius: 8, borderRadius: 6,
borderLeftWidth: 4, borderLeftWidth: 3,
borderLeftColor: colors.primary, borderLeftColor: colors.primary,
}, },
infoText: { infoText: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 14, fontSize: 12,
lineHeight: 20, lineHeight: 18,
}, },
logoSourceLabel: { logoSourceLabel: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 12, fontSize: 11,
marginTop: 4, marginTop: 2,
}, },
languageSelectorContainer: { languageSelectorContainer: {
marginTop: 16, marginTop: 10,
padding: 12, padding: 10,
backgroundColor: 'rgba(255,255,255,0.05)', backgroundColor: 'rgba(255,255,255,0.05)',
borderRadius: 8, borderRadius: 6,
}, },
languageSelectorTitle: { languageSelectorTitle: {
color: colors.white, color: colors.white,
fontSize: 16, fontSize: 14,
fontWeight: '600', fontWeight: '600',
marginBottom: 8, marginBottom: 4,
}, },
languageSelectorDescription: { languageSelectorDescription: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 14, fontSize: 12,
lineHeight: 20, lineHeight: 18,
marginBottom: 12, marginBottom: 8,
}, },
languageSelectorLabel: { languageSelectorLabel: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 13, fontSize: 12,
marginBottom: 8, marginBottom: 6,
}, },
languageScrollContent: { languageScrollContent: {
paddingVertical: 4, paddingVertical: 2,
}, },
languageItem: { languageItem: {
paddingHorizontal: 12, paddingHorizontal: 10,
paddingVertical: 8, paddingVertical: 6,
backgroundColor: colors.elevation1, backgroundColor: colors.elevation1,
borderRadius: 16, borderRadius: 12,
marginRight: 8, marginRight: 6,
borderWidth: 1, borderWidth: 1,
borderColor: colors.elevation3, borderColor: colors.elevation3,
marginVertical: 2, marginVertical: 1,
shadowColor: '#000', shadowColor: '#000',
shadowOffset: { width: 0, height: 1 }, shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.1, shadowOpacity: 0.1,
@ -838,14 +834,14 @@ const LogoSourceSettings = () => {
backgroundColor: colors.primary, backgroundColor: colors.primary,
borderColor: colors.primary, borderColor: colors.primary,
shadowColor: colors.primary, shadowColor: colors.primary,
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.2, shadowOpacity: 0.2,
shadowRadius: 2, shadowRadius: 1,
elevation: 2, elevation: 2,
}, },
languageItemText: { languageItemText: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 13, fontSize: 12,
fontWeight: '600', fontWeight: '600',
}, },
selectedLanguageItemText: { selectedLanguageItemText: {
@ -853,14 +849,14 @@ const LogoSourceSettings = () => {
}, },
noteText: { noteText: {
color: colors.mediumEmphasis, color: colors.mediumEmphasis,
fontSize: 12, fontSize: 11,
marginTop: 12, marginTop: 8,
fontStyle: 'italic', fontStyle: 'italic',
}, },
bannerContainer: { bannerContainer: {
height: 120, height: 90,
width: '100%', width: '100%',
borderRadius: 8, borderRadius: 6,
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
}, },
@ -874,9 +870,9 @@ const LogoSourceSettings = () => {
logoOverBanner: { logoOverBanner: {
position: 'absolute', position: 'absolute',
width: '80%', width: '80%',
height: '80%', height: '75%',
alignSelf: 'center', alignSelf: 'center',
top: '10%', top: '12.5%',
}, },
noLogoContainer: { noLogoContainer: {
position: 'absolute', position: 'absolute',