Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-03-11 17:45:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

First Time Welcome Localization Patch

Browse source
This commit is contained in:
cyberalby2 2026-03-06 21:26:46 +01:00
parent d1732bbfcd
commit 54254b3ce1
3 changed files with 103 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

178
src/components/FirstTimeWelcome.tsx
View file

@ -1,10 +1,10 @@
import React from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Dimensions,
View,
Text,
StyleSheet,
TouchableOpacity,
Dimensions,
} from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
@ -12,95 +12,103 @@ import Animated, { FadeInDown } from 'react-native-reanimated';
import { useTheme } from '../contexts/ThemeContext';
import { NavigationProp, useNavigation } from '@react-navigation/native';
import { RootStackParamList } from '../navigation/AppNavigator';
import { useTranslation } from 'react-i18next';
const { width } = Dimensions.get('window');
const FirstTimeWelcome = () => {
const { currentTheme } = useTheme();
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
const { currentTheme } = useTheme();
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
const { t } = useTranslation();
return (
<Animated.View
entering={FadeInDown.delay(200).duration(600)}
style={[
styles.container,
{ backgroundColor: currentTheme.colors.elevation1 },
]}
>
<LinearGradient
colors={[currentTheme.colors.primary, currentTheme.colors.secondary]}
style={styles.iconContainer}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<MaterialIcons name="explore" size={40} color="white" />
</LinearGradient>
return (
<Animated.View
entering={FadeInDown.delay(200).duration(600)}
style={[styles.container, { backgroundColor: currentTheme.colors.elevation1 }]}
>
<LinearGradient
colors={[currentTheme.colors.primary, currentTheme.colors.secondary]}
style={styles.iconContainer}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<MaterialIcons name="explore" size={40} color="white" />
</LinearGradient>
<Text style={[styles.title, { color: currentTheme.colors.highEmphasis }]}>
{t('first_time_welcome.welcome_msg')}
</Text>
<Text style={[styles.title, { color: currentTheme.colors.highEmphasis }]}>
Welcome to Nuvio!
</Text>
<Text style={[styles.description, { color: currentTheme.colors.mediumEmphasis }]}>
To get started, install some addons to access content from various sources.
</Text>
<Text
style={[styles.description, { color: currentTheme.colors.mediumEmphasis }]}
>
{t('first_time_welcome.get_started')}
</Text>
<TouchableOpacity
style={[styles.button, { backgroundColor: currentTheme.colors.primary }]}
onPress={() => navigation.navigate('Addons')}
>
<MaterialIcons name="extension" size={20} color="white" />
<Text style={styles.buttonText}>Install Addons</Text>
</TouchableOpacity>
</Animated.View>
);
<TouchableOpacity
style={[styles.button, { backgroundColor: currentTheme.colors.primary }]}
onPress={() => navigation.navigate('Addons')}
>
<MaterialIcons name="extension" size={20} color="white" />
<Text style={styles.buttonText}>
{t('first_time_welcome.install_addons')}
</Text>
</TouchableOpacity>
</Animated.View>
);
};
const styles = StyleSheet.create({
container: {
margin: 16,
padding: 24,
borderRadius: 16,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
iconContainer: {
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 16,
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 8,
textAlign: 'center',
},
description: {
fontSize: 14,
textAlign: 'center',
lineHeight: 20,
marginBottom: 20,
maxWidth: width * 0.7,
},
button: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 12,
paddingHorizontal: 20,
borderRadius: 25,
gap: 8,
},
buttonText: {
color: 'white',
fontSize: 14,
fontWeight: '600',
},
container: {
margin: 16,
padding: 24,
borderRadius: 16,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
iconContainer: {
width: 80,
height: 80,
borderRadius: 40,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 16,
},
title: {
fontSize: 20,
fontWeight: 'bold',
marginBottom: 8,
textAlign: 'center',
},
description: {
fontSize: 14,
textAlign: 'center',
lineHeight: 20,
marginBottom: 20,
maxWidth: width * 0.7,
},
button: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 12,
paddingHorizontal: 20,
borderRadius: 25,
gap: 8,
},
buttonText: {
color: 'white',
fontSize: 14,
fontWeight: '600',
},
});
export default FirstTimeWelcome;
export default FirstTimeWelcome;

5
src/i18n/locales/en.json
View file

@ -1509,6 +1509,11 @@
"tried_url": "Tried: {{url}}",
"provider_logs": "Provider Logs",
"no_logs_captured": "No logs captured."
},
"first_time_welcome": {
"welcome_msg": "Welcome to Nuvio!",
"get_started": "To get started, install some addons to access content from various sources.",
"install_addons": "Install Addons"
}
}
}

5
src/i18n/locales/it.json
View file

@ -1509,6 +1509,11 @@
"tried_url": "Provato: {{url}}",
"provider_logs": "Log Provider",
"no_logs_captured": "Nessun log catturato."
},
"first_time_welcome": {
"welcome_msg": "Benvenuto su Nuvio!",
"get_started": "Per iniziare, installa addons per accedere ai contenuti da varie fonti",
"install_addons": "Installa Addon"
}
}
}