Merge branch 'tapframe:main' into feature/ani-skip

ios/KSPlayerView.swift

@@ -25,6 +25,7 @@ class KSPlayerView: UIView {
     @objc var onEnd: RCTDirectEventBlock?
     @objc var onError: RCTDirectEventBlock?
     @objc var onBufferingProgress: RCTDirectEventBlock?
+    @objc var onExitFullscreen: RCTDirectEventBlock?
     
     // Property setters that React Native will call
     @objc var source: NSDictionary? {
@@ -315,6 +316,22 @@ class KSPlayerView: UIView {
         }
     }   
 
+    override var keyCommands: [UIKeyCommand]? {
+        return [
+            UIKeyCommand(
+                input: UIKeyCommand.inputEscape,
+                modifierFlags: [],
+                action: #selector(handleEscapeKey),
+                discoverabilityTitle: "Exit Fullscreen"
+            )
+        ]
+    }
+
+    @objc func handleEscapeKey() {
+        print("KSPlayerView: ESC pressed")
+        sendEvent("onExitFullscreen", [:])
+    }
+
     func setVolume(_ volume: Float) {
         currentVolume = volume
         playerView.playerLayer?.player.playbackVolume = volume
@@ -979,3 +996,8 @@ extension KSPlayerView {
     }
 }
 
+extension IOSVideoPlayerView {
+    @objc func handleEscapeKey() {
+        self.next?.perform(#selector(handleEscapeKey))
+    }
+}

src/i18n/locales/ar.json

@@ -601,6 +601,7 @@
         "arabic": "العربية",
         "spanish": "الإسبانية",
         "french": "الفرنسية",
+        "italian": "الإيطالية",
         "account": "الحساب",
         "content_discovery": "المحتوى والاكتشاف",
         "appearance": "المظهر",
@@ -1192,5 +1193,35 @@
         "repo_format_hint": "التنسيق: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
         "cancel": "إلغاء",
         "add": "إضافة"
+    },
+    "theme": {
+        "title": "سمات التطبيق",
+        "select_theme": "اختر السمة",
+        "create_custom": "إنشاء سمة مخصصة",
+        "options": "خيارات",
+        "use_dominant_color": "استخدام اللون المهيمن من العمل الفني",
+        "categories": {
+            "all": "كل السمات",
+            "dark": "سمات داكنة",
+            "colorful": "ملونة",
+            "custom": "سماتي"
+        },
+        "editor": {
+            "theme_name_placeholder": "اسم السمة",
+            "save": "حفظ",
+            "primary": "أساسي",
+            "secondary": "ثانوي",
+            "background": "خلفية",
+            "invalid_name_title": "اسم غير صالح",
+            "invalid_name_msg": "يرجى إدخال اسم سمة صالح"
+        },
+        "alerts": {
+            "delete_title": "حذف السمة",
+            "delete_msg": "هل أنت متأكد أنك تريد حذف \"{{name}}\"؟",
+            "ok": "حسناً",
+            "delete": "حذف",
+            "cancel": "إلغاء",
+            "back": "إعدادات"
+        }
     }
 }

src/i18n/locales/en.json

@@ -601,6 +601,7 @@
         "arabic": "Arabic",
         "spanish": "Spanish",
         "french": "French",
+        "italian": "Italian",
         "account": "Account",
         "content_discovery": "Content & Discovery",
         "appearance": "Appearance",
@@ -1192,5 +1193,35 @@
         "repo_format_hint": "Format: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
         "cancel": "Cancel",
         "add": "Add"
+    },
+    "theme": {
+        "title": "App Themes",
+        "select_theme": "SELECT THEME",
+        "create_custom": "Create Custom Theme",
+        "options": "OPTIONS",
+        "use_dominant_color": "Use Dominant Color from Artwork",
+        "categories": {
+            "all": "All Themes",
+            "dark": "Dark Themes",
+            "colorful": "Colorful",
+            "custom": "My Themes"
+        },
+        "editor": {
+            "theme_name_placeholder": "Theme name",
+            "save": "Save",
+            "primary": "Primary",
+            "secondary": "Secondary",
+            "background": "Background",
+            "invalid_name_title": "Invalid Name",
+            "invalid_name_msg": "Please enter a valid theme name"
+        },
+        "alerts": {
+            "delete_title": "Delete Theme",
+            "delete_msg": "Are you sure you want to delete \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Delete",
+            "cancel": "Cancel",
+            "back": "Settings"
+        }
     }
 }

src/i18n/locales/es.json

@@ -601,6 +601,7 @@
         "arabic": "Árabe",
         "spanish": "Español",
         "french": "Francés",
+        "italian": "Italiano",
         "account": "Cuenta",
         "content_discovery": "Contenido y descubrimiento",
         "appearance": "Apariencia",
@@ -1192,5 +1193,35 @@
         "repo_format_hint": "Formato: https://raw.githubusercontent.com/usuario/repo/rama",
         "cancel": "Cancelar",
         "add": "Añadir"
+    },
+    "theme": {
+        "title": "Temas de la App",
+        "select_theme": "SELECCIONAR TEMA",
+        "create_custom": "Crear Tema Personalizado",
+        "options": "OPCIONES",
+        "use_dominant_color": "Usar Color Dominante del Arte",
+        "categories": {
+            "all": "Todos los Temas",
+            "dark": "Temas Oscuros",
+            "colorful": "Coloridos",
+            "custom": "Mis Temas"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nombre del tema",
+            "save": "Guardar",
+            "primary": "Primario",
+            "secondary": "Secundario",
+            "background": "Fondo",
+            "invalid_name_title": "Nombre Inválido",
+            "invalid_name_msg": "Por favor ingresa un nombre válido"
+        },
+        "alerts": {
+            "delete_title": "Eliminar Tema",
+            "delete_msg": "¿Estás seguro de que quieres eliminar \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Eliminar",
+            "cancel": "Cancelar",
+            "back": "Ajustes"
+        }
     }
 }

src/i18n/locales/fr.json

@@ -601,6 +601,7 @@
         "arabic": "Arabe",
         "spanish": "Espagnol",
         "french": "Français",
+        "italian": "Italien",
         "account": "Compte",
         "content_discovery": "Contenu et découverte",
         "appearance": "Apparence",
@@ -1192,5 +1193,35 @@
         "repo_format_hint": "Format : https://raw.githubusercontent.com/utilisateur/repo/refs/heads/branche",
         "cancel": "Annuler",
         "add": "Ajouter"
+    },
+    "theme": {
+        "title": "Thèmes de l'App",
+        "select_theme": "SÉLECTIONNER UN THÈME",
+        "create_custom": "Créer un Thème Personnalisé",
+        "options": "OPTIONS",
+        "use_dominant_color": "Utiliser la Couleur Dominante de l'Image",
+        "categories": {
+            "all": "Tous les Thèmes",
+            "dark": "Thèmes Sombres",
+            "colorful": "Colorés",
+            "custom": "Mes Thèmes"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nom du thème",
+            "save": "Enregistrer",
+            "primary": "Primaire",
+            "secondary": "Secondaire",
+            "background": "Arrière-plan",
+            "invalid_name_title": "Nom Invalide",
+            "invalid_name_msg": "Veuillez entrer un nom de thème valide"
+        },
+        "alerts": {
+            "delete_title": "Supprimer le Thème",
+            "delete_msg": "Êtes-vous sûr de vouloir supprimer \"{{name}}\" ?",
+            "ok": "OK",
+            "delete": "Supprimer",
+            "cancel": "Annuler",
+            "back": "Paramètres"
+        }
     }
 }

src/i18n/locales/pt.json

@@ -579,6 +579,7 @@
         "arabic": "Árabe",
         "spanish": "Espanhol",
         "french": "Francês",
+        "italian": "Italiano",
         "account": "Conta",
         "content_discovery": "Conteúdo e Descoberta",
         "appearance": "Aparência",
@@ -1158,5 +1159,35 @@
         "repo_format_hint": "Formato: https://raw.githubusercontent.com/username/repo/refs/heads/branch",
         "cancel": "Cancelar",
         "add": "Adicionar"
+    },
+    "theme": {
+        "title": "Temas do App",
+        "select_theme": "SELECIONAR TEMA",
+        "create_custom": "Criar Tema Personalizado",
+        "options": "OPÇÕES",
+        "use_dominant_color": "Usar Cor Dominante da Arte",
+        "categories": {
+            "all": "Todos os Temas",
+            "dark": "Temas Escuros",
+            "colorful": "Coloridos",
+            "custom": "Meus Temas"
+        },
+        "editor": {
+            "theme_name_placeholder": "Nome do tema",
+            "save": "Salvar",
+            "primary": "Primário",
+            "secondary": "Secundário",
+            "background": "Fundo",
+            "invalid_name_title": "Nome Inválido",
+            "invalid_name_msg": "Por favor insira um nome válido"
+        },
+        "alerts": {
+            "delete_title": "Excluir Tema",
+            "delete_msg": "Tem certeza que deseja excluir \"{{name}}\"?",
+            "ok": "OK",
+            "delete": "Excluir",
+            "cancel": "Cancelar",
+            "back": "Configurações"
+        }
     }
 }

src/i18n/resources.ts

@@ -3,6 +3,7 @@ import pt from './locales/pt.json';
 import ar from './locales/ar.json';
 import es from './locales/es.json';
 import fr from './locales/fr.json';
+import it from './locales/it.json';
 
 export const resources = {
     en: { translation: en },
@@ -10,4 +11,5 @@ export const resources = {
     ar: { translation: ar },
     es: { translation: es },
     fr: { translation: fr },
+    it: { translation: it },
 };

src/screens/SettingsScreen.tsx

@@ -605,6 +605,7 @@ const SettingsScreen: React.FC = () => {
                         i18n.language === 'ar' ? t('settings.arabic') :
                           i18n.language === 'es' ? t('settings.spanish') :
                             i18n.language === 'fr' ? t('settings.french') :
+                              i18n.language === 'it' ? t('settings.italian') :
                                 t('settings.english')
                     }
                     icon="globe"
@@ -964,6 +965,28 @@ const SettingsScreen: React.FC = () => {
                 <Feather name="check" size={20} color={currentTheme.colors.primary} />
               )}
             </TouchableOpacity>
+
+            <TouchableOpacity
+              style={[
+                styles.languageOption,
+                i18n.language === 'it' && { backgroundColor: currentTheme.colors.primary + '20' }
+              ]}
+              onPress={() => {
+                i18n.changeLanguage('it');
+                languageSheetRef.current?.close();
+              }}
+            >
+              <Text style={[
+                styles.languageText,
+                { color: currentTheme.colors.highEmphasis },
+                i18n.language === 'it' && { color: currentTheme.colors.primary, fontWeight: 'bold' }
+              ]}>
+                {t('settings.italian')}
+              </Text>
+              {i18n.language === 'it' && (
+                <Feather name="check" size={20} color={currentTheme.colors.primary} />
+              )}
+            </TouchableOpacity>
           </ScrollView>
         </BottomSheetView>
       </BottomSheetModal>

src/screens/ThemeScreen.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   View,
   Text,
@@ -171,7 +172,8 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
   setAlertActions,
   setAlertVisible
 }) => {
-  const [themeName, setThemeName] = useState('Custom Theme');
+    const { t } = useTranslation();
+    const [themeName, setThemeName] = useState(t('theme.editor.theme_name_placeholder') || 'Custom Theme');
     const [selectedColorKey, setSelectedColorKey] = useState<ColorKey>('primary');
     const [themeColors, setThemeColors] = useState({
       primary: initialColors.primary,
@@ -188,12 +190,16 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
 
     const handleSave = () => {
       if (!themeName.trim()) {
-      setAlertTitle('Invalid Name');
+        if (!themeName.trim()) {
-      setAlertMessage('Please enter a valid theme name');
+          setAlertTitle(t('theme.editor.invalid_name_title'));
+          setAlertMessage(t('theme.editor.invalid_name_msg'));
           setAlertActions([{ label: 'OK', onPress: () => { } }]);
           setAlertVisible(true);
           return;
         }
+        setAlertVisible(true);
+        return;
+      }
       onSave({
         ...themeColors,
         name: themeName
@@ -252,14 +258,14 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
             style={styles.editorTitleInput}
             value={themeName}
             onChangeText={setThemeName}
-          placeholder="Theme name"
+            placeholder={t('theme.editor.theme_name_placeholder')}
             placeholderTextColor="rgba(255,255,255,0.5)"
           />
           <TouchableOpacity
             style={styles.editorSaveButton}
             onPress={handleSave}
           >
-          <Text style={styles.saveButtonText}>Save</Text>
+            <Text style={styles.saveButtonText}>{t('theme.editor.save')}</Text>
           </TouchableOpacity>
         </View>
 
@@ -276,7 +282,7 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
                 ]}
                 onPress={() => setSelectedColorKey('primary')}
               >
-              <Text style={styles.colorButtonText}>Primary</Text>
+                <Text style={styles.colorButtonText}>{t('theme.editor.primary')}</Text>
               </TouchableOpacity>
 
               <TouchableOpacity
@@ -287,7 +293,7 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
                 ]}
                 onPress={() => setSelectedColorKey('secondary')}
               >
-              <Text style={styles.colorButtonText}>Secondary</Text>
+                <Text style={styles.colorButtonText}>{t('theme.editor.secondary')}</Text>
               </TouchableOpacity>
 
               <TouchableOpacity
@@ -298,7 +304,7 @@ const ThemeColorEditor: React.FC<ThemeColorEditorProps & {
                 ]}
                 onPress={() => setSelectedColorKey('darkBackground')}
               >
-              <Text style={styles.colorButtonText}>Background</Text>
+                <Text style={styles.colorButtonText}>{t('theme.editor.background')}</Text>
               </TouchableOpacity>
             </View>
           </View>
@@ -327,6 +333,7 @@ const ThemeScreen: React.FC = () => {
     updateCustomTheme,
     deleteCustomTheme
   } = useTheme();
+  const { t } = useTranslation();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const insets = useSafeAreaInsets();
   const { settings, updateSetting } = useSettings();
@@ -336,6 +343,14 @@ const ThemeScreen: React.FC = () => {
     ? ANDROID_STATUSBAR_HEIGHT + 8
     : 8;
 
+  // Theme categories for organization
+  const THEME_CATEGORIES = [
+    { id: 'all', name: t('theme.categories.all') },
+    { id: 'dark', name: t('theme.categories.dark') },
+    { id: 'colorful', name: t('theme.categories.colorful') },
+    { id: 'custom', name: t('theme.categories.custom') },
+  ];
+
   const [isEditMode, setIsEditMode] = useState(false);
   const [editingTheme, setEditingTheme] = useState<Theme | null>(null);
   const [activeFilter, setActiveFilter] = useState('all');
@@ -398,18 +413,18 @@ const ThemeScreen: React.FC = () => {
   }, []);
 
   const handleDeleteTheme = useCallback((theme: Theme) => {
-    setAlertTitle('Delete Theme');
+    setAlertTitle(t('theme.alerts.delete_title'));
-    setAlertMessage(`Are you sure you want to delete "${theme.name}"?`);
+    setAlertMessage(t('theme.alerts.delete_msg', { name: theme.name }));
     setAlertActions([
-      { label: 'Cancel', style: { color: '#888' }, onPress: () => {} },
+      { label: t('theme.alerts.cancel'), style: { color: '#888' }, onPress: () => { } },
       {
-        label: 'Delete',
+        label: t('theme.alerts.delete'),
         style: { color: currentTheme.colors.error },
         onPress: () => deleteCustomTheme(theme.id),
       },
     ]);
     setAlertVisible(true);
-  }, [deleteCustomTheme, currentTheme.colors.error]);
+  }, [deleteCustomTheme, currentTheme.colors.error, t]);
 
   const handleCreateTheme = useCallback(() => {
     setEditingTheme(null);
@@ -432,7 +447,7 @@ const ThemeScreen: React.FC = () => {
     } else {
       // Create new theme
       addCustomTheme({
-        name: themeData.name || 'Custom Theme',
+        name: themeData.name || t('theme.create_custom'),
         colors: {
           ...currentTheme.colors,
           primary: themeData.primary,
@@ -467,8 +482,8 @@ const ThemeScreen: React.FC = () => {
   const ThemeColorEditorWithAlert = (props: any) => {
     const handleSave = (themeName: string, themeColors: any, onSave: any) => {
       if (!themeName.trim()) {
-        setAlertTitle('Invalid Name');
+        setAlertTitle(t('theme.editor.invalid_name_title'));
-        setAlertMessage('Please enter a valid theme name');
+        setAlertMessage(t('theme.editor.invalid_name_msg'));
         setAlertActions([{ label: 'OK', onPress: () => { } }]);
         setAlertVisible(true);
         return false;
@@ -541,7 +556,7 @@ const ThemeScreen: React.FC = () => {
         >
           <MaterialIcons name="arrow-back" size={24} color={currentTheme.colors.text} />
           <Text style={[styles.backText, { color: currentTheme.colors.text }]}>
-            Settings
+            {t('theme.alerts.back') || t('settings.app_settings_label').split(' ')[0] || 'Settings'}
           </Text>
         </TouchableOpacity>
 
@@ -551,7 +566,7 @@ const ThemeScreen: React.FC = () => {
       </View>
 
       <Text style={[styles.headerTitle, { color: currentTheme.colors.text }]}>
-        App Themes
+        {t('theme.title')}
       </Text>
 
       {/* Category filter */}
@@ -579,7 +594,7 @@ const ThemeScreen: React.FC = () => {
         showsVerticalScrollIndicator={false}
       >
         <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted }]}>
-          SELECT THEME
+          {t('theme.select_theme')}
         </Text>
 
         <View style={styles.themeGrid}>
@@ -604,16 +619,16 @@ const ThemeScreen: React.FC = () => {
           onPress={handleCreateTheme}
         >
           <MaterialIcons name="add" size={20} color="#FFFFFF" />
-          <Text style={styles.createButtonText}>Create Custom Theme</Text>
+          <Text style={styles.createButtonText}>{t('theme.create_custom')}</Text>
         </TouchableOpacity>
 
         <Text style={[styles.sectionTitle, { color: currentTheme.colors.textMuted, marginTop: 24 }]}>
-          OPTIONS
+          {t('theme.options')}
         </Text>
 
         <View style={styles.optionRow}>
           <Text style={[styles.optionLabel, { color: currentTheme.colors.text }]}>
-            Use Dominant Color from Artwork
+            {t('theme.use_dominant_color')}
           </Text>
           <Switch
             value={settings.useDominantBackgroundColor}