Localize app to German, implement auto-save to gallery, always-on camera stream, fix expo-media-library and expo-file-system deprecation/compile errors

src/screens/AdminScreen.tsx

@@ -53,42 +53,42 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
         if (success) {
           setKioskActive(true);
           Alert.alert(
-            'Kiosk Mode Started',
+            'Kiosk-Modus gestartet',
             isDeviceOwner
-              ? 'True Kiosk Mode active. System navigation buttons are completely locked.'
-              : 'Screen Pinning initiated. Accept the OS prompt to lock the screen.'
+              ? 'Echter Kiosk-Modus aktiv. Die System-Navigationsleiste ist vollständig gesperrt.'
+              : 'Bildschirmheftung (Screen Pinning) gestartet. Bitte bestätige das Systemfenster, um den Bildschirm zu sperren.'
           );
         } else {
-          Alert.alert('Error', 'Failed to start Kiosk Mode.');
+          Alert.alert('Fehler', 'Kiosk-Modus konnte nicht gestartet werden.');
         }
       } else {
         const success = KioskMode.stopKiosk();
         if (success) {
           setKioskActive(false);
-          Alert.alert('Kiosk Mode Stopped', 'System navigation buttons are unlocked.');
+          Alert.alert('Kiosk-Modus beendet', 'Die Navigationstasten des Systems sind wieder freigegeben.');
         } else {
-          Alert.alert('Error', 'Failed to stop Kiosk Mode.');
+          Alert.alert('Fehler', 'Kiosk-Modus konnte nicht beendet werden.');
         }
       }
     } catch (e: any) {
-      Alert.alert('Native Error', e.message || 'Kiosk module error');
+      Alert.alert('Nativer Fehler', e.message || 'Fehler im Kiosk-Modul');
     }
   };
 
   const handleSave = async () => {
     const duration = parseInt(countdown, 10);
     if (isNaN(duration) || duration < 1 || duration > 30) {
-      Alert.alert('Invalid Input', 'Countdown duration must be a number between 1 and 30 seconds.');
+      Alert.alert('Ungültige Eingabe', 'Die Countdown-Dauer muss eine Zahl zwischen 1 und 30 Sekunden sein.');
       return;
     }
 
     if (!printerIp.trim()) {
-      Alert.alert('Invalid Input', 'Printer IP address cannot be empty.');
+      Alert.alert('Ungültige Eingabe', 'Die Drucker-IP-Adresse darf nicht leer sein.');
       return;
     }
 
     if (!password.trim() || password.length < 4) {
-      Alert.alert('Invalid Input', 'Admin password must be at least 4 digits.');
+      Alert.alert('Ungültige Eingabe', 'Das Admin-Passwort muss mindestens 4 Ziffern lang sein.');
       return;
     }
 
@@ -102,33 +102,33 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
     try {
       await saveSettings(updated);
       onSave(updated);
-      Alert.alert('Success', 'Settings saved successfully!');
+      Alert.alert('Erfolg', 'Einstellungen erfolgreich gespeichert!');
     } catch (e) {
-      Alert.alert('Error', 'Failed to save settings to disk.');
+      Alert.alert('Fehler', 'Einstellungen konnten nicht gespeichert werden.');
     }
   };
 
   return (
     <View style={styles.container}>
       <View style={styles.headerRow}>
-        <Text style={styles.title}>SCHNAPPIX SETTINGS</Text>
+        <Text style={styles.title}>SCHNAPPIX EINSTELLUNGEN</Text>
         <TouchableOpacity style={styles.closeBtn} onPress={onClose}>
-          <Text style={styles.closeBtnText}>Back to Booth</Text>
+          <Text style={styles.closeBtnText}>Zurück zur Fotobox</Text>
         </TouchableOpacity>
       </View>
 
       <ScrollView contentContainerStyle={styles.scrollContent}>
         {/* Printer Configurations */}
         <View style={styles.card}>
-          <Text style={styles.cardTitle}>Printer Configuration</Text>
+          <Text style={styles.cardTitle}>Drucker-Konfiguration</Text>
           <Text style={styles.cardDesc}>
-            Configure the local IP address of your Wi-Fi connected Canon CP1300 printer.
+            Konfiguriere die lokale IP-Adresse deines über WLAN verbundenen Canon CP1300 Druckers.
           </Text>
           <View style={styles.inputGroup}>
-            <Text style={styles.label}>Printer IP Address</Text>
+            <Text style={styles.label}>Drucker IP-Adresse</Text>
             <TextInput
               style={styles.input}
-              placeholder="e.g. 192.168.1.100"
+              placeholder="z.B. 192.168.1.100"
               placeholderTextColor={THEME.colors.textMuted}
               value={printerIp}
               onChangeText={setPrinterIp}
@@ -139,12 +139,12 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
 
         {/* Booth Behavior */}
         <View style={styles.card}>
-          <Text style={styles.cardTitle}>Photo Booth Behavior</Text>
+          <Text style={styles.cardTitle}>Fotobox-Verhalten</Text>
           <View style={styles.inputGroup}>
-            <Text style={styles.label}>Countdown Duration (seconds)</Text>
+            <Text style={styles.label}>Countdown-Dauer (Sekunden)</Text>
             <TextInput
               style={styles.input}
-              placeholder="Default: 3"
+              placeholder="Standard: 3"
               placeholderTextColor={THEME.colors.textMuted}
               value={countdown}
               onChangeText={setCountdown}
@@ -152,10 +152,10 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
             />
           </View>
           <View style={styles.inputGroup}>
-            <Text style={styles.label}>Admin Panel Password</Text>
+            <Text style={styles.label}>Admin-Passwort</Text>
             <TextInput
               style={styles.input}
-              placeholder="Default: 1234"
+              placeholder="Standard: 1234"
               placeholderTextColor={THEME.colors.textMuted}
               secureTextEntry
               value={password}
@@ -167,33 +167,33 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
 
         {/* Security & Kiosk Mode */}
         <View style={styles.card}>
-          <Text style={styles.cardTitle}>Kiosk Mode & Security</Text>
+          <Text style={styles.cardTitle}>Kiosk-Modus & Sicherheit</Text>
           <Text style={styles.cardDesc}>
-            Lock the screen to prevent guests from closing the app or opening system settings.
+            Sperre den Bildschirm, um zu verhindern, dass Gäste die App schließen oder auf die Systemeinstellungen zugreifen.
           </Text>
           
           <View style={styles.statusRow}>
-            <Text style={styles.statusLabel}>Kiosk Mode State:</Text>
+            <Text style={styles.statusLabel}>Kiosk-Modus Status:</Text>
             <Text style={[styles.statusValue, kioskActive ? styles.statusActive : styles.statusInactive]}>
-              {kioskActive ? 'LOCKED 🔒' : 'UNLOCKED 🔓'}
+              {kioskActive ? 'GESPERRT 🔒' : 'ENTSPERRT 🔓'}
             </Text>
           </View>
 
           <View style={styles.statusRow}>
-            <Text style={styles.statusLabel}>Device Owner Mode:</Text>
+            <Text style={styles.statusLabel}>Device-Owner-Modus:</Text>
             <Text style={[styles.statusValue, isDeviceOwner ? styles.statusActive : styles.statusWarning]}>
-              {isDeviceOwner ? 'ACTIVE (True Lock) ✅' : 'INACTIVE (Screen Pinning Fallback) ⚠️'}
+              {isDeviceOwner ? 'AKTIV (Echte Sperre) ✅' : 'INAKTIV (Screen Pinning Fallback) ⚠️'}
             </Text>
           </View>
           
           {!isDeviceOwner && (
             <Text style={styles.kioskWarningText}>
-              Note: To enable True Lock task mode without prompt bypasses, make the app device owner using ADB.
+              Hinweis: Um den echten Lock-Task-Modus ohne Bestätigungsaufforderung zu aktivieren, mache die App mittels ADB zum Device Owner.
             </Text>
           )}
 
           <View style={styles.toggleRow}>
-            <Text style={styles.toggleLabel}>Lock Screen (Kiosk Mode)</Text>
+            <Text style={styles.toggleLabel}>Bildschirm sperren (Kiosk-Modus)</Text>
             <Switch
               value={kioskActive}
               onValueChange={handleKioskToggle}
@@ -204,7 +204,7 @@ export default function AdminScreen({ currentSettings, onSave, onClose }: AdminS
         </View>
 
         <TouchableOpacity style={styles.saveBtn} onPress={handleSave}>
-          <Text style={styles.saveBtnText}>SAVE SETTINGS</Text>
+          <Text style={styles.saveBtnText}>EINSTELLUNGEN SPEICHERN</Text>
         </TouchableOpacity>
       </ScrollView>
     </View>

src/screens/CameraScreen.tsx

@@ -1,23 +1,50 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { StyleSheet, Text, View, TouchableOpacity, Platform } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Platform,
+  Modal,
+  TextInput,
+  TouchableWithoutFeedback,
+} from 'react-native';
 import { CameraView, useCameraPermissions } from 'expo-camera';
-import * as FileSystem from 'expo-file-system';
+import * as FileSystem from 'expo-file-system/legacy';
 import { THEME } from '../styles/theme';
 import { UsbCameraView, UsbCameraRef } from '../../modules/usb-camera';
+import { saveToGallery } from '../services/storage';
 
 interface CameraScreenProps {
   countdownDuration: number;
   onPhotoCaptured: (uri: string) => void;
   onCancel: () => void;
+  isIdle?: boolean;
+  onStartBooth?: () => void;
+  onNavigateToAdmin?: () => void;
+  adminPassword?: string;
 }
 
-export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCancel }: CameraScreenProps) {
+export default function CameraScreen({
+  countdownDuration,
+  onPhotoCaptured,
+  onCancel,
+  isIdle = false,
+  onStartBooth,
+  onNavigateToAdmin,
+  adminPassword = '1234',
+}: CameraScreenProps) {
   const [permission, requestPermission] = useCameraPermissions();
   const [isUsbConnected, setIsUsbConnected] = useState<boolean>(false);
   const [countdown, setCountdown] = useState<number | string>('');
   const [isCapturing, setIsCapturing] = useState<boolean>(false);
   const [hasStarted, setHasStarted] = useState<boolean>(false);
 
+  // Admin Modal States
+  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
+  const [enteredPassword, setEnteredPassword] = useState('');
+  const [errorText, setErrorText] = useState('');
+
   const usbCameraRef = useRef<UsbCameraRef>(null);
   const expoCameraRef = useRef<any>(null);
 
@@ -28,10 +55,9 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
     }
   }, [permission]);
 
-  // 2. Check if a USB camera is connected. 
-  // We can query the USB module or attempt to check every second in the background.
+  // 2. Check if a USB camera is connected.
   useEffect(() => {
-    let checkInterval: NodeJS.Timeout;
+    let checkInterval: any;
     if (Platform.OS === 'android') {
       const checkConnection = async () => {
         try {
@@ -40,12 +66,10 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
             setIsUsbConnected(connected);
           }
         } catch (e) {
-          // If native view manager is not loaded or errors, fallback to false
           setIsUsbConnected(false);
         }
       };
 
-      // Check initially and run an interval
       checkConnection();
       checkInterval = setInterval(checkConnection, 2000);
     }
@@ -55,13 +79,19 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
     };
   }, []);
 
-  // 3. Start the countdown on screen load
+  // 3. Start the countdown on screen load (only when NOT idle)
   useEffect(() => {
-    let timer: NodeJS.Timeout;
+    if (isIdle) {
+      setHasStarted(false);
+      return;
+    }
+
+    let timer: any;
     let count = countdownDuration;
 
     setCountdown(count);
     setHasStarted(true);
+    setIsCapturing(false);
 
     const runTimer = () => {
       if (count > 1) {
@@ -69,7 +99,7 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
         setCountdown(count);
         timer = setTimeout(runTimer, 1000);
       } else if (count === 1) {
-        setCountdown('Cheese! 📸');
+        setCountdown('Bitte lächeln! 📸');
         setIsCapturing(true);
         timer = setTimeout(() => {
           capture();
@@ -82,7 +112,7 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
     return () => {
       if (timer) clearTimeout(timer);
     };
-  }, [countdownDuration]);
+  }, [countdownDuration, isIdle]);
 
   // 4. Capture photo function
   const capture = async () => {
@@ -94,6 +124,15 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
         // USB Camera Capture
         console.log('Capturing from USB Camera...');
         const path = await usbCameraRef.current.takePicture(tempUri);
+        
+        // Auto-save individual photo directly to gallery
+        try {
+          await saveToGallery(path);
+          console.log('Auto-saved USB capture to gallery');
+        } catch (e) {
+          console.error('Failed to auto-save USB capture:', e);
+        }
+
         onPhotoCaptured(path);
       } else {
         // Fallback Camera Capture
@@ -103,22 +142,47 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
             quality: 0.95,
             skipProcessing: false,
           });
+
+          // Auto-save individual photo directly to gallery
+          try {
+            await saveToGallery(photo.uri);
+            console.log('Auto-saved fallback capture to gallery');
+          } catch (e) {
+            console.error('Failed to auto-save fallback capture:', e);
+          }
+
           onPhotoCaptured(photo.uri);
         } else {
-          throw new Error('Camera ref is not available.');
+          throw new Error('Kamera-Referenz ist nicht verfügbar.');
         }
       }
     } catch (error: any) {
       console.error('Capture failed:', error);
-      alert('Failed to capture photo: ' + error.message);
+      alert('Fehler beim Aufnehmen des Fotos: ' + error.message);
       onCancel();
     }
   };
 
+  const handleSettingsTap = () => {
+    setEnteredPassword('');
+    setErrorText('');
+    setPasswordModalVisible(true);
+  };
+
+  const handlePasswordSubmit = () => {
+    if (enteredPassword === adminPassword) {
+      setPasswordModalVisible(false);
+      onNavigateToAdmin?.();
+    } else {
+      setErrorText('Falsches Passwort');
+      setEnteredPassword('');
+    }
+  };
+
   if (!permission) {
     return (
       <View style={styles.container}>
-        <Text style={styles.infoText}>Loading permissions...</Text>
+        <Text style={styles.infoText}>Berechtigungen werden geladen...</Text>
       </View>
     );
   }
@@ -126,20 +190,124 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
   if (!permission.granted && !isUsbConnected) {
     return (
       <View style={styles.container}>
-        <Text style={styles.infoText}>We need your permission to show the camera</Text>
+        <Text style={styles.infoText}>Wir benötigen deine Erlaubnis, um die Kamera anzuzeigen</Text>
         <TouchableOpacity style={styles.btn} onPress={requestPermission}>
-          <Text style={styles.btnText}>Grant Permission</Text>
+          <Text style={styles.btnText}>Erlaubnis erteilen</Text>
         </TouchableOpacity>
         <TouchableOpacity style={[styles.btn, styles.cancelBtn]} onPress={onCancel}>
-          <Text style={styles.btnText}>Go Back</Text>
+          <Text style={styles.btnText}>Zurück</Text>
         </TouchableOpacity>
       </View>
     );
   }
 
+  const renderContent = () => {
+    if (isIdle) {
+      // Home Overlay (frosty glass box on top of the camera stream)
+      return (
+        <TouchableWithoutFeedback onPress={onStartBooth}>
+          <View style={styles.idleOverlayContainer}>
+            {/* Settings button in the top-right corner */}
+            <TouchableOpacity
+              style={styles.settingsButton}
+              onPress={handleSettingsTap}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.settingsIcon}>⚙️</Text>
+            </TouchableOpacity>
+
+            <View style={styles.welcomeBox}>
+              <Text style={styles.logo}>SCHNAPPIX</Text>
+              <Text style={styles.welcomeTitle}>Willkommen zu unserer Feier!</Text>
+              
+              <View style={styles.divider} />
+              
+              <View style={styles.startButton}>
+                <Text style={styles.startButtonText}>ZUM STARTEN ÜBERALL TIPPEN</Text>
+              </View>
+              
+              <Text style={styles.welcomeFooter}>Fotos machen • Collage erstellen • Sofort drucken</Text>
+            </View>
+
+            {/* Password Prompt Modal */}
+            <Modal
+              visible={passwordModalVisible}
+              transparent={true}
+              animationType="fade"
+              onRequestClose={() => setPasswordModalVisible(false)}
+            >
+              <View style={styles.modalOverlay}>
+                <View style={styles.modalContent}>
+                  <Text style={styles.modalTitle}>Admin-Zugang</Text>
+                  <Text style={styles.modalSub}>Passwort eingeben, um Einstellungen zu öffnen</Text>
+                  
+                  <TextInput
+                    style={styles.input}
+                    secureTextEntry
+                    placeholder="Passwort"
+                    placeholderTextColor={THEME.colors.textMuted}
+                    value={enteredPassword}
+                    onChangeText={setEnteredPassword}
+                    keyboardType="numeric"
+                    autoFocus
+                  />
+
+                  {errorText ? <Text style={styles.error}>{errorText}</Text> : null}
+
+                  <View style={styles.modalButtons}>
+                    <TouchableOpacity
+                      style={[styles.button, styles.cancelButton]}
+                      onPress={() => setPasswordModalVisible(false)}
+                    >
+                      <Text style={styles.buttonText}>Abbrechen</Text>
+                    </TouchableOpacity>
+                    <TouchableOpacity
+                      style={[styles.button, styles.confirmButton]}
+                      onPress={handlePasswordSubmit}
+                    >
+                      <Text style={styles.buttonText}>Öffnen</Text>
+                    </TouchableOpacity>
+                  </View>
+                </View>
+              </View>
+            </Modal>
+          </View>
+        </TouchableWithoutFeedback>
+      );
+    }
+
+    // Capture Mode overlays (Countdown and Cancel button)
+    return (
+      <View style={styles.captureOverlayContainer} pointerEvents="box-none">
+        {/* Source indicator */}
+        <View style={styles.hudContainer}>
+          <Text style={styles.cameraSourceIndicator}>
+            Kamera: {isUsbConnected ? 'Externe USB-Kamera' : 'Tablet-Frontkamera (Fallback)'}
+          </Text>
+        </View>
+
+        {/* Countdown overlay */}
+        {hasStarted && (
+          <View style={styles.countdownOverlay} pointerEvents="none">
+            <View style={styles.countdownBox}>
+              <Text style={styles.countdownText}>{countdown}</Text>
+            </View>
+          </View>
+        )}
+
+        {/* Cancel Button */}
+        {!isCapturing && (
+          <TouchableOpacity style={styles.backButton} onPress={onCancel}>
+            <Text style={styles.backButtonText}>ABBRECHEN</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
   return (
     <View style={styles.container}>
-      {/* Camera Preview Area */}
+      {/* Camera Preview Background */}
       <View style={styles.previewContainer}>
         {Platform.OS === 'android' && isUsbConnected ? (
           <UsbCameraView ref={usbCameraRef} style={styles.cameraPreview} />
@@ -152,28 +320,8 @@ export default function CameraScreen({ countdownDuration, onPhotoCaptured, onCan
         )}
       </View>
 
-      {/* Camera Info HUD */}
-      <View style={styles.hudContainer}>
-        <Text style={styles.cameraSourceIndicator}>
-          Source: {isUsbConnected ? 'External USB Camera' : 'Front Tablet Camera (Fallback)'}
-        </Text>
-      </View>
-
-      {/* Countdown overlay */}
-      {hasStarted && (
-        <View style={styles.overlay}>
-          <View style={styles.countdownBox}>
-            <Text style={styles.countdownText}>{countdown}</Text>
-          </View>
-        </View>
-      )}
-
-      {/* Cancel Button */}
-      {!isCapturing && (
-        <TouchableOpacity style={styles.backButton} onPress={onCancel}>
-          <Text style={styles.backButtonText}>CANCEL</Text>
-        </TouchableOpacity>
-      )}
+      {/* Render UI controls/overlays on top */}
+      {renderContent()}
     </View>
   );
 }
@@ -182,32 +330,119 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#000',
-    justifyContent: 'center',
-    alignItems: 'center',
   },
   previewContainer: {
     width: '100%',
     height: '100%',
     position: 'absolute',
+    top: 0,
+    left: 0,
   },
   cameraPreview: {
     width: '100%',
     height: '100%',
   },
+  idleOverlayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+  },
+  captureOverlayContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  settingsButton: {
+    position: 'absolute',
+    top: 24,
+    right: 24,
+    width: 50,
+    height: 50,
+    borderRadius: THEME.borderRadius.round,
+    backgroundColor: 'rgba(30, 30, 35, 0.75)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999,
+  },
+  settingsIcon: {
+    fontSize: 24,
+    color: THEME.colors.text,
+  },
+  welcomeBox: {
+    alignItems: 'center',
+    padding: THEME.spacing.xl,
+    borderRadius: THEME.borderRadius.lg,
+    backgroundColor: 'rgba(18, 18, 20, 0.8)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.15)',
+    width: '60%',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.3,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  logo: {
+    fontSize: 54,
+    fontWeight: '900',
+    color: THEME.colors.primary,
+    letterSpacing: 8,
+    marginBottom: THEME.spacing.sm,
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 4,
+  },
+  welcomeTitle: {
+    fontSize: 22,
+    color: THEME.colors.text,
+    textAlign: 'center',
+    marginBottom: THEME.spacing.lg,
+    letterSpacing: 1,
+  },
+  divider: {
+    width: 60,
+    height: 3,
+    backgroundColor: THEME.colors.accent,
+    marginBottom: THEME.spacing.xl,
+    borderRadius: THEME.borderRadius.sm,
+  },
+  startButton: {
+    paddingVertical: THEME.spacing.md,
+    paddingHorizontal: THEME.spacing.xl,
+    backgroundColor: THEME.colors.primary,
+    borderRadius: THEME.borderRadius.round,
+    marginBottom: THEME.spacing.xl,
+  },
+  startButtonText: {
+    color: THEME.colors.text,
+    fontSize: 18,
+    fontWeight: 'bold',
+    letterSpacing: 2,
+  },
+  welcomeFooter: {
+    fontSize: 14,
+    color: THEME.colors.textMuted,
+    letterSpacing: 1,
+  },
   hudContainer: {
     position: 'absolute',
     bottom: 20,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
     paddingVertical: THEME.spacing.xs,
     paddingHorizontal: THEME.spacing.md,
     borderRadius: THEME.borderRadius.sm,
+    borderWidth: 0.5,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
   },
   cameraSourceIndicator: {
     color: THEME.colors.text,
     fontSize: 14,
     fontWeight: 'bold',
   },
-  overlay: {
+  countdownOverlay: {
     position: 'absolute',
     top: 0,
     left: 0,
@@ -215,37 +450,39 @@ const styles = StyleSheet.create({
     bottom: 0,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.2)',
   },
   countdownBox: {
-    backgroundColor: THEME.colors.glassBackground,
+    backgroundColor: 'rgba(20, 20, 25, 0.85)',
     paddingVertical: THEME.spacing.xl,
     paddingHorizontal: THEME.spacing.xxl,
     borderRadius: THEME.borderRadius.lg,
     borderWidth: 1,
-    borderColor: THEME.colors.border,
+    borderColor: 'rgba(255, 255, 255, 0.15)',
     minWidth: 180,
     alignItems: 'center',
     justifyContent: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.4,
+    shadowRadius: 15,
+    elevation: 8,
   },
   countdownText: {
-    fontSize: 72,
+    fontSize: 64,
     fontWeight: '900',
     color: THEME.colors.text,
-    textShadowColor: 'rgba(0, 0, 0, 0.75)',
-    textShadowOffset: { width: -1, height: 1 },
-    textShadowRadius: 10,
+    textAlign: 'center',
   },
   backButton: {
     position: 'absolute',
     top: 24,
     left: 24,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backgroundColor: 'rgba(30, 30, 35, 0.75)',
     paddingVertical: THEME.spacing.sm,
     paddingHorizontal: THEME.spacing.lg,
     borderRadius: THEME.borderRadius.round,
     borderWidth: 1,
-    borderColor: THEME.colors.border,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
   },
   backButtonText: {
     color: THEME.colors.text,
@@ -277,4 +514,81 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: 'bold',
   },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: THEME.colors.overlay,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: 340,
+    padding: THEME.spacing.lg,
+    borderRadius: THEME.borderRadius.md,
+    backgroundColor: THEME.colors.surfaceSecondary,
+    borderWidth: 1,
+    borderColor: THEME.colors.border,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.4,
+    shadowRadius: 15,
+    elevation: 10,
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: THEME.colors.text,
+    marginBottom: THEME.spacing.xs,
+  },
+  modalSub: {
+    fontSize: 13,
+    color: THEME.colors.textMuted,
+    marginBottom: THEME.spacing.md,
+    textAlign: 'center',
+  },
+  input: {
+    width: '100%',
+    height: 50,
+    backgroundColor: THEME.colors.surface,
+    borderColor: THEME.colors.border,
+    borderWidth: 1,
+    borderRadius: THEME.borderRadius.sm,
+    color: THEME.colors.text,
+    paddingHorizontal: THEME.spacing.md,
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: THEME.spacing.sm,
+  },
+  error: {
+    color: THEME.colors.error,
+    fontSize: 14,
+    marginBottom: THEME.spacing.sm,
+  },
+  modalButtons: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    marginTop: THEME.spacing.sm,
+  },
+  button: {
+    flex: 1,
+    height: 45,
+    borderRadius: THEME.borderRadius.sm,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: THEME.spacing.xs,
+  },
+  cancelButton: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: THEME.colors.border,
+  },
+  confirmButton: {
+    backgroundColor: THEME.colors.primary,
+  },
+  buttonText: {
+    color: THEME.colors.text,
+    fontSize: 16,
+    fontWeight: '600',
+  },
 });

src/screens/HomeScreen.tsx

@@ -32,7 +32,7 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =
       setPasswordModalVisible(false);
       onNavigateToAdmin();
     } else {
-      setErrorText('Incorrect Password');
+      setErrorText('Falsches Passwort');
       setEnteredPassword('');
     }
   };
@@ -51,15 +51,15 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =
 
         <View style={styles.content}>
           <Text style={styles.logo}>SCHNAPPIX</Text>
-          <Text style={styles.title}>Welcome to our celebration!</Text>
+          <Text style={styles.title}>Willkommen zu unserer Feier!</Text>
           
           <View style={styles.divider} />
           
           <View style={styles.startButton}>
-            <Text style={styles.startButtonText}>TAP ANYWHERE TO START</Text>
+            <Text style={styles.startButtonText}>ZUM STARTEN ÜBERALL TIPPEN</Text>
           </View>
           
-          <Text style={styles.footer}>Take photos • Create a collage • Print instantly</Text>
+          <Text style={styles.footer}>Fotos machen • Collage erstellen • Sofort drucken</Text>
         </View>
 
         {/* Password Prompt Modal */}
@@ -71,13 +71,13 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =
         >
           <View style={styles.modalOverlay}>
             <View style={styles.modalContent}>
-              <Text style={styles.modalTitle}>Admin Access</Text>
-              <Text style={styles.modalSub}>Enter password to open settings</Text>
+              <Text style={styles.modalTitle}>Admin-Zugang</Text>
+              <Text style={styles.modalSub}>Passwort eingeben, um Einstellungen zu öffnen</Text>
               
               <TextInput
                 style={styles.input}
                 secureTextEntry
-                placeholder="Enter password"
+                placeholder="Passwort eingeben"
                 placeholderTextColor={THEME.colors.textMuted}
                 value={enteredPassword}
                 onChangeText={setEnteredPassword}
@@ -92,13 +92,13 @@ export default function HomeScreen({ onStart, onNavigateToAdmin, adminPassword =
                   style={[styles.button, styles.cancelButton]}
                   onPress={() => setPasswordModalVisible(false)}
                 >
-                  <Text style={styles.buttonText}>Cancel</Text>
+                  <Text style={styles.buttonText}>Abbrechen</Text>
                 </TouchableOpacity>
                 <TouchableOpacity
                   style={[styles.button, styles.confirmButton]}
                   onPress={handlePasswordSubmit}
                 >
-                  <Text style={styles.buttonText}>Open</Text>
+                  <Text style={styles.buttonText}>Öffnen</Text>
                 </TouchableOpacity>
               </View>
             </View>

src/screens/PreviewScreen.tsx

@@ -41,36 +41,36 @@ export default function PreviewScreen({
   // Triggers the view capture and the print job
   const handlePrint = async () => {
     setIsProcessing(true);
-    setStatusMessage('Preparing your photo...');
+    setStatusMessage('Dein Foto wird vorbereitet...');
     try {
       let printUri = currentPhoto;
 
       // If we are printing a collage layout, capture the ViewShot container
       if (layout !== 'single') {
-        setStatusMessage('Generating collage...');
+        setStatusMessage('Collage wird generiert...');
         const capturedUri = await viewShotRef.current.capture();
         printUri = capturedUri;
       }
 
-      setStatusMessage('Sending print job to printer...');
+      setStatusMessage('Druckauftrag wird an Drucker gesendet...');
       // 1. Silent Print via IPP
       await printImageLocal(printUri, {
         ipAddress: printerIp,
-        jobName: 'Schnappix Photo Booth',
+        jobName: 'Schnappix Fotobox',
       });
 
-      setStatusMessage('Saving to tablet library...');
+      setStatusMessage('Wird in Galerie gespeichert...');
       // 2. Save permanently to DCIM/Schnappix
       await saveToGallery(printUri);
 
-      setStatusMessage('Print successful! Enjoy!');
+      setStatusMessage('Druck erfolgreich! Viel Spaß! 🎉');
       setTimeout(() => {
         setIsProcessing(false);
         onReset(); // Go back to Home Screen
       }, 2000);
     } catch (error: any) {
       console.error('Printing failed:', error);
-      alert('Error: ' + error.message);
+      alert('Fehler: ' + error.message);
       setIsProcessing(false);
     }
   };
@@ -78,7 +78,7 @@ export default function PreviewScreen({
   // Saves to gallery without printing
   const handleSaveOnly = async () => {
     setIsProcessing(true);
-    setStatusMessage('Generating image...');
+    setStatusMessage('Bild wird generiert...');
     try {
       let saveUri = currentPhoto;
 
@@ -87,21 +87,46 @@ export default function PreviewScreen({
         saveUri = capturedUri;
       }
 
-      setStatusMessage('Saving to tablet library...');
+      setStatusMessage('Wird in Galerie gespeichert...');
       await saveToGallery(saveUri);
 
-      setStatusMessage('Saved successfully!');
+      setStatusMessage('Erfolgreich gespeichert!');
       setTimeout(() => {
         setIsProcessing(false);
         onReset();
       }, 1500);
     } catch (error: any) {
       console.error('Saving failed:', error);
-      alert('Error: ' + error.message);
+      alert('Fehler: ' + error.message);
       setIsProcessing(false);
     }
   };
 
+  // Auto-save collage and exit
+  const handleExit = async () => {
+    // If layout is single, it has already been auto-saved to gallery right when captured
+    if (layout === 'single') {
+      onReset();
+      return;
+    }
+
+    setIsProcessing(true);
+    setStatusMessage('Collage wird gespeichert...');
+    try {
+      const capturedUri = await viewShotRef.current.capture();
+      await saveToGallery(capturedUri);
+      setStatusMessage('Erfolgreich gespeichert!');
+      setTimeout(() => {
+        setIsProcessing(false);
+        onReset();
+      }, 1000);
+    } catch (error) {
+      console.error('Auto-saving collage on exit failed:', error);
+      setIsProcessing(false);
+      onReset();
+    }
+  };
+
   // Render the selected collage inside the capture container
   const renderCollageView = () => {
     switch (layout) {
@@ -114,8 +139,8 @@ export default function PreviewScreen({
               ))}
             </View>
             <View style={styles.collageFooter}>
-              <Text style={styles.collageFooterText}>SCHNAPPIX PHOTO BOOTH</Text>
-              <Text style={styles.collageFooterDate}>{new Date().toLocaleDateString()}</Text>
+              <Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
+              <Text style={styles.collageFooterDate}>{new Date().toLocaleDateString('de-DE')}</Text>
             </View>
           </View>
         );
@@ -128,7 +153,7 @@ export default function PreviewScreen({
               ))}
             </View>
             <View style={styles.collageFooter}>
-              <Text style={styles.collageFooterText}>SCHNAPPIX PHOTO BOOTH</Text>
+              <Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
             </View>
           </View>
         );
@@ -141,7 +166,7 @@ export default function PreviewScreen({
               ))}
             </View>
             <View style={styles.collageFooter}>
-              <Text style={styles.collageFooterText}>SCHNAPPIX PHOTO BOOTH</Text>
+              <Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
             </View>
           </View>
         );
@@ -174,7 +199,7 @@ export default function PreviewScreen({
 
       {/* Right panel: Controls */}
       <View style={styles.controlPanel}>
-        <Text style={styles.header}>CHOOSE YOUR STYLE</Text>
+        <Text style={styles.header}>WÄHLE DEINEN STIL</Text>
         
         {/* Layout Selection */}
         <View style={styles.layoutSelector}>
@@ -182,7 +207,7 @@ export default function PreviewScreen({
             style={[styles.layoutBtn, layout === 'single' && styles.layoutBtnActive]}
             onPress={() => setLayout('single')}
           >
-            <Text style={styles.layoutBtnText}>Single</Text>
+            <Text style={styles.layoutBtnText}>Einzelbild</Text>
           </TouchableOpacity>
 
           <TouchableOpacity
@@ -206,7 +231,7 @@ export default function PreviewScreen({
             disabled={photoUris.length < 3}
             onPress={() => setLayout('strip')}
           >
-            <Text style={styles.layoutBtnText}>Strip (3)</Text>
+            <Text style={styles.layoutBtnText}>Streifen (3)</Text>
           </TouchableOpacity>
 
           <TouchableOpacity
@@ -218,37 +243,37 @@ export default function PreviewScreen({
             disabled={photoUris.length < 4}
             onPress={() => setLayout('grid')}
           >
-            <Text style={styles.layoutBtnText}>Grid (4)</Text>
+            <Text style={styles.layoutBtnText}>Raster (4)</Text>
           </TouchableOpacity>
         </View>
 
         <Text style={styles.photosCountText}>
-          Photos Captured: {photoUris.length} / 4
+          Aufgenommene Fotos: {photoUris.length} / 4
         </Text>
 
         {/* Action Buttons */}
         <View style={styles.actions}>
           <TouchableOpacity style={[styles.actionBtn, styles.printBtn]} onPress={handlePrint}>
-            <Text style={styles.actionBtnText}>PRINT NOW 🖨️</Text>
+            <Text style={styles.actionBtnText}>JETZT DRUCKEN 🖨️</Text>
           </TouchableOpacity>
 
           <TouchableOpacity style={[styles.actionBtn, styles.saveBtn]} onPress={handleSaveOnly}>
-            <Text style={styles.actionBtnText}>Save to Tablet Only 💾</Text>
+            <Text style={styles.actionBtnText}>Nur auf Tablet speichern 💾</Text>
           </TouchableOpacity>
 
           {photoUris.length < 4 && (
             <TouchableOpacity style={[styles.actionBtn, styles.addBtn]} onPress={onAddAnother}>
-              <Text style={styles.actionBtnText}>+ Add Another Photo</Text>
+              <Text style={styles.actionBtnText}>+ Weiteres Foto aufnehmen</Text>
             </TouchableOpacity>
           )}
 
           <View style={styles.rowActions}>
             <TouchableOpacity style={[styles.smallBtn, styles.retakeBtn]} onPress={onRetakeLast}>
-              <Text style={styles.smallBtnText}>Retake Last</Text>
+              <Text style={styles.smallBtnText}>Letztes wiederholen</Text>
             </TouchableOpacity>
 
-            <TouchableOpacity style={[styles.smallBtn, styles.resetBtn]} onPress={onReset}>
-              <Text style={styles.smallBtnText}>Exit</Text>
+            <TouchableOpacity style={[styles.smallBtn, styles.resetBtn]} onPress={handleExit}>
+              <Text style={styles.smallBtnText}>Beenden</Text>
             </TouchableOpacity>
           </View>
         </View>
@@ -281,7 +306,6 @@ const styles = StyleSheet.create({
     backgroundColor: '#050507',
   },
   viewShotContainer: {
-    // 3:2 ratio aspect layout matching Canon Selphy postcard paper
     width: 320,
     height: 480,
     justifyContent: 'center',
@@ -389,7 +413,6 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '600',
   },
-  // Collage Canvas Layouts (3:2 ratio aspect - width 320, height 480)
   singleCanvas: {
     width: 320,
     height: 480,
@@ -433,7 +456,6 @@ const styles = StyleSheet.create({
     fontSize: 8,
     color: '#666666',
   },
-  // Strip (3 images vertical)
   stripCanvas: {},
   stripContent: {
     flex: 1,
@@ -446,7 +468,6 @@ const styles = StyleSheet.create({
     resizeMode: 'cover',
     borderRadius: 2,
   },
-  // Grid (4 images 2x2)
   gridCanvas: {},
   gridContainer: {
     flex: 1,
@@ -462,7 +483,6 @@ const styles = StyleSheet.create({
     resizeMode: 'cover',
     borderRadius: 2,
   },
-  // Duo (2 images side by side or stacked)
   duoCanvas: {},
   duoContainer: {
     flex: 1,
@@ -475,7 +495,6 @@ const styles = StyleSheet.create({
     resizeMode: 'cover',
     borderRadius: 2,
   },
-  // Loading overlay
   loadingOverlay: {
     position: 'absolute',
     top: 0,

src/services/printer.ts

@@ -1,6 +1,6 @@
 import ipp from 'ipp-encoder';
 import { Buffer } from 'buffer';
-import * as FileSystem from 'expo-file-system';
+import * as FileSystem from 'expo-file-system/legacy';
 
 export interface PrintOptions {
   ipAddress: string;
@@ -19,7 +19,7 @@ export async function printImageLocal(imageUri: string, options: PrintOptions):
   const { ipAddress, jobName = 'Schnappix Photo', username = 'Schnappix Kiosk' } = options;
 
   if (!ipAddress) {
-    throw new Error('Printer IP address is required.');
+    throw new Error('Drucker-IP-Adresse ist erforderlich.');
   }
 
   // 1. Read the image file from local storage as Base64 and convert to binary Buffer
@@ -69,7 +69,7 @@ export async function printImageLocal(imageUri: string, options: PrintOptions):
   });
 
   if (!response.ok) {
-    throw new Error(`Printer responded with HTTP status ${response.status}: ${response.statusText}`);
+    throw new Error(`Drucker antwortete mit HTTP-Status ${response.status}: ${response.statusText}`);
   }
 
   // 6. Read and decode the response from the printer to verify success
@@ -82,7 +82,7 @@ export async function printImageLocal(imageUri: string, options: PrintOptions):
     
     // IPP success status is 0x0000 (successful-ok)
     if (statusCode !== 0x0000) {
-      throw new Error(`Printer returned IPP error code: 0x${statusCode.toString(16)}`);
+      throw new Error(`Drucker lieferte IPP-Fehlercode: 0x${statusCode.toString(16)}`);
     }
     console.log('Silent print job accepted successfully!');
   } catch (e: any) {

src/services/settings.ts

@@ -1,4 +1,4 @@
-import * as FileSystem from 'expo-file-system';
+import * as FileSystem from 'expo-file-system/legacy';
 
 export interface AppSettings {
   countdownDuration: number; // in seconds

src/services/storage.ts

@@ -1,4 +1,4 @@
-import * as MediaLibrary from 'expo-media-library';
+import * as MediaLibrary from 'expo-media-library/legacy';
 import { Platform } from 'react-native';
 
 const ALBUM_NAME = 'Schnappix';

src/types/ipp-encoder.d.ts

@@ -0,0 +1 @@
+declare module 'ipp-encoder';