870 lines
25 KiB
TypeScript
870 lines
25 KiB
TypeScript
import React, { useState, useRef, useCallback } from 'react';
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
View,
|
|
Image,
|
|
TouchableOpacity,
|
|
ActivityIndicator,
|
|
} from 'react-native';
|
|
import ViewShot from 'react-native-view-shot';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
|
|
import {
|
|
faPrint,
|
|
faDownload,
|
|
faPlus,
|
|
faRotateLeft,
|
|
faRightFromBracket,
|
|
faFaceGrinStars,
|
|
faBorderAll,
|
|
} from '@fortawesome/free-solid-svg-icons';
|
|
import { THEME } from '../styles/theme';
|
|
import { printImageLocal } from '../services/printer';
|
|
import { saveToGallery } from '../services/storage';
|
|
import { logger } from '../services/logger';
|
|
import DraggableSticker, { StickerData } from '../components/DraggableSticker';
|
|
import StickerTray from '../components/StickerTray';
|
|
import FrameOverlay from '../components/FrameOverlay';
|
|
import FramePicker from '../components/FramePicker';
|
|
import { FRAMES } from '../data/frames';
|
|
|
|
interface PreviewScreenProps {
|
|
photoUris: string[];
|
|
printerIp: string;
|
|
onRetakeLast: () => void;
|
|
onAddAnother: () => void;
|
|
onReset: () => void;
|
|
// Frame settings
|
|
frameMode: 'off' | 'always' | 'available';
|
|
initialFrameId: string | null;
|
|
availableFrameIds: string[];
|
|
// Date overlay settings
|
|
dateOverlay: 'off' | 'date' | 'datetime';
|
|
dateOverlayPosition: string;
|
|
// Event text
|
|
eventText: string;
|
|
}
|
|
|
|
type CollageLayout = 'single' | 'strip' | 'grid' | 'duo';
|
|
|
|
export default function PreviewScreen({
|
|
photoUris,
|
|
printerIp,
|
|
onRetakeLast,
|
|
onAddAnother,
|
|
onReset,
|
|
frameMode,
|
|
initialFrameId,
|
|
availableFrameIds,
|
|
dateOverlay,
|
|
dateOverlayPosition,
|
|
eventText,
|
|
}: PreviewScreenProps) {
|
|
const [layout, setLayout] = useState<CollageLayout>('single');
|
|
const [isProcessing, setIsProcessing] = useState<boolean>(false);
|
|
const [statusMessage, setStatusMessage] = useState<string>('');
|
|
|
|
// Sticker state
|
|
const [stickers, setStickers] = useState<StickerData[]>([]);
|
|
const [selectedStickerId, setSelectedStickerId] = useState<string | null>(null);
|
|
const [showStickerTray, setShowStickerTray] = useState<boolean>(false);
|
|
|
|
React.useEffect(() => {
|
|
logger.log(`PreviewScreen mounted with ${photoUris.length} photos.`);
|
|
if (photoUris.length > 0) {
|
|
logger.log(`PreviewScreen currentPhoto: ${photoUris[photoUris.length - 1]}`);
|
|
} else {
|
|
logger.log(`[WARNING] PreviewScreen mounted but photoUris is empty!`);
|
|
}
|
|
return () => {
|
|
logger.log('PreviewScreen unmounting.');
|
|
};
|
|
}, [photoUris]);
|
|
|
|
// Idle Timer state
|
|
const idleTimerRef = useRef<any>(null);
|
|
|
|
// Frame state
|
|
const [selectedFrameId, setSelectedFrameId] = useState<string | null>(
|
|
frameMode === 'always' ? initialFrameId : null
|
|
);
|
|
|
|
const viewShotRef = useRef<any>(null);
|
|
|
|
const currentPhoto = photoUris[photoUris.length - 1];
|
|
|
|
// Get the active frame asset
|
|
const activeFrame = selectedFrameId && photoUris.length === 1
|
|
? FRAMES.find((f) => f.id === selectedFrameId)
|
|
: null;
|
|
|
|
// Format date/time for overlays and stickers
|
|
const formatDate = useCallback((mode: 'date' | 'datetime'): string => {
|
|
const now = new Date();
|
|
const date = now.toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
});
|
|
if (mode === 'datetime') {
|
|
const time = now.toLocaleTimeString('de-DE', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
});
|
|
return `${date} ${time}`;
|
|
}
|
|
return date;
|
|
}, []);
|
|
|
|
// Get date overlay position styles
|
|
const getDatePositionStyle = () => {
|
|
switch (dateOverlayPosition) {
|
|
case 'bottom-left':
|
|
return { bottom: 12, left: 12 };
|
|
case 'top-right':
|
|
return { top: 12, right: 12 };
|
|
case 'top-left':
|
|
return { top: 12, left: 12 };
|
|
case 'bottom-center':
|
|
return { bottom: 12, left: 0, right: 0, alignItems: 'center' as const };
|
|
case 'bottom-right':
|
|
default:
|
|
return { bottom: 12, right: 12 };
|
|
}
|
|
};
|
|
|
|
// ── Sticker handlers ──
|
|
const addSticker = useCallback((type: 'emoji' | 'text', content: string) => {
|
|
const newSticker: StickerData = {
|
|
id: `sticker_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
|
|
type,
|
|
content,
|
|
x: 100 + Math.random() * 40 - 20,
|
|
y: 100 + Math.random() * 40 - 20,
|
|
scale: 1,
|
|
rotation: 0,
|
|
};
|
|
setStickers((prev) => [...prev, newSticker]);
|
|
setSelectedStickerId(newSticker.id);
|
|
}, []);
|
|
|
|
const handleAddEmoji = useCallback((emoji: string) => {
|
|
addSticker('emoji', emoji);
|
|
}, [addSticker]);
|
|
|
|
const handleAddDateSticker = useCallback((format: 'date' | 'datetime') => {
|
|
addSticker('text', formatDate(format));
|
|
}, [addSticker, formatDate]);
|
|
|
|
const handleAddEventSticker = useCallback(() => {
|
|
const date = formatDate('date');
|
|
addSticker('text', `${eventText} • ${date}`);
|
|
}, [addSticker, formatDate, eventText]);
|
|
|
|
const handleStickerSelect = useCallback((id: string) => {
|
|
setSelectedStickerId((prev) => (prev === id ? null : id));
|
|
}, []);
|
|
|
|
const handleStickerDelete = useCallback((id: string) => {
|
|
setStickers((prev) => prev.filter((s) => s.id !== id));
|
|
setSelectedStickerId(null);
|
|
}, []);
|
|
|
|
const handleStickerUpdate = useCallback((id: string, updates: Partial<StickerData>) => {
|
|
setStickers((prev) =>
|
|
prev.map((s) => (s.id === id ? { ...s, ...updates } : s))
|
|
);
|
|
}, []);
|
|
|
|
// Deselect stickers when tapping the photo area
|
|
const handleCanvasPress = useCallback(() => {
|
|
setSelectedStickerId(null);
|
|
}, []);
|
|
|
|
// ── Capture the final image ──
|
|
const captureComposite = async () => {
|
|
try {
|
|
if (viewShotRef.current) {
|
|
return await viewShotRef.current.capture();
|
|
}
|
|
return currentPhoto;
|
|
} catch (e) {
|
|
console.error('Failed to capture composite:', e);
|
|
return currentPhoto;
|
|
}
|
|
};
|
|
|
|
// Triggers the view capture and the print job
|
|
const handlePrint = async () => {
|
|
setIsProcessing(true);
|
|
setStatusMessage('Dein Foto wird vorbereitet...');
|
|
try {
|
|
setStatusMessage('Bild wird generiert...');
|
|
const printUri = await captureComposite();
|
|
|
|
setStatusMessage('Druckauftrag wird an Drucker gesendet...');
|
|
await printImageLocal(printUri, {
|
|
ipAddress: printerIp,
|
|
jobName: 'Schnappix Fotobox',
|
|
});
|
|
|
|
setStatusMessage('Wird in Galerie gespeichert...');
|
|
await saveToGallery(printUri);
|
|
|
|
setStatusMessage('Druck erfolgreich! Viel Spaß! 🎉');
|
|
setTimeout(() => {
|
|
setIsProcessing(false);
|
|
onReset();
|
|
}, 2000);
|
|
} catch (error: any) {
|
|
console.error('Printing failed:', error);
|
|
alert('Fehler: ' + error.message);
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
// Saves to gallery without printing
|
|
const handleSaveOnly = async () => {
|
|
setIsProcessing(true);
|
|
setStatusMessage('Bild wird generiert...');
|
|
try {
|
|
const saveUri = await captureComposite();
|
|
|
|
setStatusMessage('Wird in Galerie gespeichert...');
|
|
await saveToGallery(saveUri);
|
|
|
|
setStatusMessage('Erfolgreich gespeichert!');
|
|
setTimeout(() => {
|
|
setIsProcessing(false);
|
|
onReset();
|
|
}, 1500);
|
|
} catch (error: any) {
|
|
console.error('Saving failed:', error);
|
|
alert('Fehler: ' + error.message);
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
// Auto-save and exit
|
|
const handleExit = useCallback(async () => {
|
|
if (stickers.length === 0 && layout === 'single' && !activeFrame && dateOverlay === 'off') {
|
|
onReset();
|
|
return;
|
|
}
|
|
|
|
setIsProcessing(true);
|
|
setStatusMessage('Wird gespeichert...');
|
|
try {
|
|
const capturedUri = await captureComposite();
|
|
await saveToGallery(capturedUri);
|
|
setStatusMessage('Erfolgreich gespeichert!');
|
|
setTimeout(() => {
|
|
setIsProcessing(false);
|
|
onReset();
|
|
}, 1000);
|
|
} catch (error) {
|
|
console.error('Auto-saving on exit failed:', error);
|
|
setIsProcessing(false);
|
|
onReset();
|
|
}
|
|
}, [stickers, layout, activeFrame, dateOverlay, onReset]);
|
|
|
|
// Idle timer logic
|
|
const resetIdleTimer = useCallback(() => {
|
|
if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
|
|
idleTimerRef.current = setTimeout(() => {
|
|
handleExit();
|
|
}, 60000);
|
|
}, [handleExit]);
|
|
|
|
useEffect(() => {
|
|
resetIdleTimer();
|
|
return () => {
|
|
if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
|
|
};
|
|
}, [resetIdleTimer]);
|
|
|
|
const handleRetakeClick = async () => {
|
|
if (stickers.length > 0 || layout !== 'single' || activeFrame || dateOverlay !== 'off') {
|
|
setIsProcessing(true);
|
|
setStatusMessage('Wird vor dem Wiederholen gespeichert...');
|
|
try {
|
|
const capturedUri = await captureComposite();
|
|
await saveToGallery(capturedUri);
|
|
} catch (error) {
|
|
console.error('Auto-saving before retake failed:', error);
|
|
}
|
|
setIsProcessing(false);
|
|
}
|
|
onRetakeLast();
|
|
};
|
|
|
|
// ── Render the collage ──
|
|
const renderCollageView = () => {
|
|
switch (layout) {
|
|
case 'strip':
|
|
return (
|
|
<View style={[styles.collageCanvas, styles.stripCanvas]}>
|
|
<View style={styles.stripContent}>
|
|
{photoUris.slice(-3).map((uri, idx) => (
|
|
<Image key={idx} source={{ uri }} style={styles.stripImage} />
|
|
))}
|
|
</View>
|
|
<View style={styles.collageFooter}>
|
|
<Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
|
|
<Text style={styles.collageFooterDate}>{new Date().toLocaleDateString('de-DE')}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
case 'grid':
|
|
return (
|
|
<View style={[styles.collageCanvas, styles.gridCanvas]}>
|
|
<View style={styles.gridContainer}>
|
|
{photoUris.slice(-4).map((uri, idx) => (
|
|
<Image key={idx} source={{ uri }} style={styles.gridImage} />
|
|
))}
|
|
</View>
|
|
<View style={styles.collageFooter}>
|
|
<Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
case 'duo':
|
|
return (
|
|
<View style={[styles.collageCanvas, styles.duoCanvas]}>
|
|
<View style={styles.duoContainer}>
|
|
{photoUris.slice(-2).map((uri, idx) => (
|
|
<Image key={idx} source={{ uri }} style={styles.duoImage} />
|
|
))}
|
|
</View>
|
|
<View style={styles.collageFooter}>
|
|
<Text style={styles.collageFooterText}>SCHNAPPIX FOTOBOX</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
default:
|
|
return (
|
|
<View style={styles.singleCanvas}>
|
|
<Image source={{ uri: currentPhoto }} style={styles.singleImage} />
|
|
</View>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={styles.container}
|
|
onTouchStart={resetIdleTimer}
|
|
>
|
|
{/* Left panel: Preview Canvas */}
|
|
<TouchableOpacity
|
|
style={styles.previewPanel}
|
|
activeOpacity={1}
|
|
onPress={handleCanvasPress}
|
|
>
|
|
<ViewShot
|
|
ref={viewShotRef}
|
|
options={{ format: 'jpg', quality: 0.95 }}
|
|
style={styles.viewShotContainer}
|
|
>
|
|
{renderCollageView()}
|
|
|
|
{/* Frame Overlay */}
|
|
{activeFrame && <FrameOverlay frameAsset={activeFrame.asset} />}
|
|
|
|
{/* Date/Time Overlay */}
|
|
{dateOverlay !== 'off' && (
|
|
<View style={[styles.dateOverlay, getDatePositionStyle()]} pointerEvents="none">
|
|
<Text style={styles.dateOverlayText}>
|
|
{formatDate(dateOverlay)}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Stickers */}
|
|
{stickers.map((sticker) => (
|
|
<DraggableSticker
|
|
key={sticker.id}
|
|
sticker={sticker}
|
|
isSelected={selectedStickerId === sticker.id}
|
|
onSelect={handleStickerSelect}
|
|
onDelete={handleStickerDelete}
|
|
onUpdate={handleStickerUpdate}
|
|
/>
|
|
))}
|
|
</ViewShot>
|
|
|
|
{/* Sticker Tray (outside ViewShot — not captured) */}
|
|
{showStickerTray && (
|
|
<StickerTray
|
|
onAddEmoji={handleAddEmoji}
|
|
onAddDateSticker={handleAddDateSticker}
|
|
onAddEventSticker={handleAddEventSticker}
|
|
onClose={() => setShowStickerTray(false)}
|
|
eventText={eventText}
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
|
|
{/* Right panel: Controls */}
|
|
<View style={styles.controlPanel}>
|
|
<Text style={styles.header}>WÄHLE DEINEN STIL</Text>
|
|
|
|
{/* Layout Selection */}
|
|
<View style={styles.layoutSelector}>
|
|
<TouchableOpacity
|
|
style={[styles.layoutBtn, layout === 'single' && styles.layoutBtnActive]}
|
|
onPress={() => setLayout('single')}
|
|
>
|
|
<Text style={styles.layoutBtnText}>Einzelbild</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.layoutBtn,
|
|
photoUris.length < 2 && styles.layoutBtnDisabled,
|
|
layout === 'duo' && styles.layoutBtnActive,
|
|
]}
|
|
disabled={photoUris.length < 2}
|
|
onPress={() => setLayout('duo')}
|
|
>
|
|
<Text style={styles.layoutBtnText}>Duo (2)</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.layoutBtn,
|
|
photoUris.length < 3 && styles.layoutBtnDisabled,
|
|
layout === 'strip' && styles.layoutBtnActive,
|
|
]}
|
|
disabled={photoUris.length < 3}
|
|
onPress={() => setLayout('strip')}
|
|
>
|
|
<Text style={styles.layoutBtnText}>Streifen (3)</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
styles.layoutBtn,
|
|
photoUris.length < 4 && styles.layoutBtnDisabled,
|
|
layout === 'grid' && styles.layoutBtnActive,
|
|
]}
|
|
disabled={photoUris.length < 4}
|
|
onPress={() => setLayout('grid')}
|
|
>
|
|
<Text style={styles.layoutBtnText}>Raster (4)</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<Text style={styles.photosCountText}>
|
|
Aufgenommene Fotos: {photoUris.length} / 4
|
|
</Text>
|
|
|
|
{/* Editing Tools Row */}
|
|
<View style={styles.editToolsRow}>
|
|
<TouchableOpacity
|
|
style={[styles.editToolBtn, showStickerTray && styles.editToolBtnActive]}
|
|
onPress={() => setShowStickerTray(!showStickerTray)}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faFaceGrinStars}
|
|
size={16}
|
|
color={showStickerTray ? THEME.colors.text : THEME.colors.accent}
|
|
/>
|
|
<Text style={[styles.editToolText, showStickerTray && styles.editToolTextActive]}>
|
|
Sticker
|
|
</Text>
|
|
</TouchableOpacity>
|
|
|
|
{frameMode === 'available' && photoUris.length === 1 && (
|
|
<TouchableOpacity
|
|
style={[styles.editToolBtn, selectedFrameId !== null && styles.editToolBtnActive]}
|
|
onPress={() => {
|
|
if (selectedFrameId !== null) {
|
|
setSelectedFrameId(null);
|
|
}
|
|
// FramePicker is shown below
|
|
}}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faBorderAll}
|
|
size={16}
|
|
color={selectedFrameId !== null ? THEME.colors.text : THEME.colors.accent}
|
|
/>
|
|
<Text style={[styles.editToolText, selectedFrameId !== null && styles.editToolTextActive]}>
|
|
Rahmen
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</View>
|
|
|
|
{/* Frame Picker (when mode = available and only 1 photo) */}
|
|
{frameMode === 'available' && photoUris.length === 1 && (
|
|
<FramePicker
|
|
selectedFrameId={selectedFrameId}
|
|
onSelectFrame={setSelectedFrameId}
|
|
availableFrameIds={availableFrameIds}
|
|
/>
|
|
)}
|
|
|
|
{/* Action Buttons */}
|
|
<View style={styles.actions}>
|
|
<TouchableOpacity style={[styles.actionBtn, styles.printBtn]} onPress={handlePrint} activeOpacity={0.8}>
|
|
<LinearGradient
|
|
colors={THEME.gradient.primary}
|
|
start={{ x: 0, y: 0.5 }}
|
|
end={{ x: 1, y: 0.5 }}
|
|
style={styles.printGradient}
|
|
>
|
|
<FontAwesomeIcon icon={faPrint} size={18} color={THEME.colors.text} style={{ marginRight: 8 }} />
|
|
<Text style={styles.actionBtnText}>JETZT DRUCKEN</Text>
|
|
</LinearGradient>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={[styles.actionBtn, styles.saveBtn]} onPress={handleSaveOnly}>
|
|
<FontAwesomeIcon icon={faDownload} size={16} color={THEME.colors.accent} style={{ marginRight: 8 }} />
|
|
<Text style={[styles.actionBtnText, { color: THEME.colors.accent }]}>Nur auf Tablet speichern</Text>
|
|
</TouchableOpacity>
|
|
|
|
{photoUris.length < 4 && (
|
|
<TouchableOpacity style={[styles.actionBtn, styles.addBtn]} onPress={onAddAnother}>
|
|
<FontAwesomeIcon icon={faPlus} size={16} color={THEME.colors.text} style={{ marginRight: 8 }} />
|
|
<Text style={styles.actionBtnText}>Weiteres Foto aufnehmen</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
<View style={styles.rowActions}>
|
|
<TouchableOpacity style={[styles.smallBtn, styles.retakeBtn]} onPress={handleRetakeClick}>
|
|
<FontAwesomeIcon icon={faRotateLeft} size={14} color={THEME.colors.error} style={{ marginRight: 6 }} />
|
|
<Text style={[styles.smallBtnText, { color: THEME.colors.error }]}>Wiederholen</Text>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={[styles.smallBtn, styles.resetBtn]} onPress={handleExit}>
|
|
<FontAwesomeIcon icon={faRightFromBracket} size={14} color={THEME.colors.textMuted} style={{ marginRight: 6 }} />
|
|
<Text style={styles.smallBtnText}>Beenden</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Loading Overlay */}
|
|
{isProcessing && (
|
|
<View style={styles.loadingOverlay}>
|
|
<View style={styles.loadingBox}>
|
|
<ActivityIndicator size="large" color={THEME.colors.primary} />
|
|
<Text style={styles.loadingText}>{statusMessage}</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
backgroundColor: THEME.colors.background,
|
|
},
|
|
previewPanel: {
|
|
flex: 1.2,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: THEME.spacing.md,
|
|
backgroundColor: '#030308',
|
|
},
|
|
viewShotContainer: {
|
|
width: 480,
|
|
height: 320,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
controlPanel: {
|
|
flex: 0.8,
|
|
backgroundColor: THEME.colors.surface,
|
|
padding: THEME.spacing.xl,
|
|
justifyContent: 'center',
|
|
borderLeftWidth: 1,
|
|
borderColor: THEME.colors.border,
|
|
},
|
|
header: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
color: THEME.colors.text,
|
|
textAlign: 'center',
|
|
marginBottom: THEME.spacing.md,
|
|
letterSpacing: 2,
|
|
textShadowColor: THEME.colors.cyanGlow,
|
|
textShadowOffset: { width: 0, height: 0 },
|
|
textShadowRadius: 12,
|
|
},
|
|
layoutSelector: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
marginBottom: THEME.spacing.md,
|
|
},
|
|
layoutBtn: {
|
|
flex: 1,
|
|
paddingVertical: THEME.spacing.sm,
|
|
backgroundColor: THEME.colors.surfaceSecondary,
|
|
borderWidth: 1,
|
|
borderColor: THEME.colors.border,
|
|
borderRadius: THEME.borderRadius.sm,
|
|
alignItems: 'center',
|
|
marginHorizontal: 3,
|
|
},
|
|
layoutBtnActive: {
|
|
backgroundColor: THEME.colors.accent,
|
|
borderColor: THEME.colors.accent,
|
|
shadowColor: THEME.colors.accent,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 8,
|
|
elevation: 4,
|
|
},
|
|
layoutBtnDisabled: {
|
|
opacity: 0.3,
|
|
},
|
|
layoutBtnText: {
|
|
color: THEME.colors.text,
|
|
fontSize: 12,
|
|
fontWeight: 'bold',
|
|
},
|
|
photosCountText: {
|
|
fontSize: 14,
|
|
color: THEME.colors.textMuted,
|
|
textAlign: 'center',
|
|
marginBottom: THEME.spacing.sm,
|
|
},
|
|
editToolsRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
gap: 10,
|
|
marginBottom: THEME.spacing.md,
|
|
},
|
|
editToolBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 6,
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 14,
|
|
borderRadius: THEME.borderRadius.round,
|
|
borderWidth: 1,
|
|
borderColor: THEME.colors.border,
|
|
backgroundColor: THEME.colors.surfaceSecondary,
|
|
},
|
|
editToolBtnActive: {
|
|
backgroundColor: THEME.colors.accent,
|
|
borderColor: THEME.colors.accent,
|
|
},
|
|
editToolText: {
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
color: THEME.colors.accent,
|
|
},
|
|
editToolTextActive: {
|
|
color: THEME.colors.text,
|
|
},
|
|
actions: {
|
|
width: '100%',
|
|
},
|
|
actionBtn: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
paddingVertical: THEME.spacing.md,
|
|
borderRadius: THEME.borderRadius.md,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginBottom: THEME.spacing.md,
|
|
},
|
|
printBtn: {
|
|
overflow: 'hidden',
|
|
shadowColor: THEME.colors.gradientGlow,
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 14,
|
|
elevation: 8,
|
|
},
|
|
printGradient: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: THEME.spacing.md,
|
|
width: '100%',
|
|
},
|
|
saveBtn: {
|
|
backgroundColor: 'transparent',
|
|
borderWidth: 1,
|
|
borderColor: THEME.colors.border,
|
|
},
|
|
addBtn: {
|
|
backgroundColor: THEME.colors.accentDark,
|
|
},
|
|
actionBtnText: {
|
|
color: THEME.colors.text,
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
letterSpacing: 1,
|
|
},
|
|
rowActions: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
marginTop: THEME.spacing.sm,
|
|
},
|
|
smallBtn: {
|
|
flex: 0.48,
|
|
flexDirection: 'row',
|
|
paddingVertical: THEME.spacing.sm,
|
|
borderRadius: THEME.borderRadius.sm,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderWidth: 1,
|
|
},
|
|
retakeBtn: {
|
|
borderColor: THEME.colors.error,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
resetBtn: {
|
|
borderColor: THEME.colors.border,
|
|
backgroundColor: 'transparent',
|
|
},
|
|
smallBtnText: {
|
|
color: THEME.colors.textMuted,
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
// ── Photo Canvases ──
|
|
singleCanvas: {
|
|
width: 480,
|
|
height: 320,
|
|
backgroundColor: '#fff',
|
|
padding: 0,
|
|
shadowColor: THEME.colors.gradientGlow,
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.35,
|
|
shadowRadius: 18,
|
|
elevation: 5,
|
|
},
|
|
singleImage: {
|
|
width: '100%',
|
|
height: '100%',
|
|
resizeMode: 'cover',
|
|
},
|
|
collageCanvas: {
|
|
width: 480,
|
|
height: 320,
|
|
backgroundColor: '#ffffff',
|
|
padding: 12,
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
},
|
|
collageFooter: {
|
|
height: 35,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
borderTopWidth: 0.5,
|
|
borderTopColor: '#e0e0e0',
|
|
marginTop: 6,
|
|
},
|
|
collageFooterText: {
|
|
fontSize: 10,
|
|
fontWeight: 'bold',
|
|
color: '#333333',
|
|
letterSpacing: 2,
|
|
},
|
|
collageFooterDate: {
|
|
fontSize: 8,
|
|
color: '#666666',
|
|
},
|
|
stripCanvas: {},
|
|
stripContent: {
|
|
flex: 1,
|
|
width: '100%',
|
|
justifyContent: 'space-between',
|
|
},
|
|
stripImage: {
|
|
width: '100%',
|
|
height: '31%',
|
|
resizeMode: 'cover',
|
|
borderRadius: 2,
|
|
},
|
|
gridCanvas: {},
|
|
gridContainer: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
alignContent: 'space-between',
|
|
width: '100%',
|
|
},
|
|
gridImage: {
|
|
width: '49%',
|
|
height: '49%',
|
|
resizeMode: 'cover',
|
|
borderRadius: 2,
|
|
},
|
|
duoCanvas: {},
|
|
duoContainer: {
|
|
flex: 1,
|
|
width: '100%',
|
|
justifyContent: 'space-between',
|
|
},
|
|
duoImage: {
|
|
width: '100%',
|
|
height: '49%',
|
|
resizeMode: 'cover',
|
|
borderRadius: 2,
|
|
},
|
|
// ── Date Overlay ──
|
|
dateOverlay: {
|
|
position: 'absolute',
|
|
zIndex: 60,
|
|
},
|
|
dateOverlayText: {
|
|
fontSize: 11,
|
|
fontWeight: 'bold',
|
|
color: '#FFFFFF',
|
|
textShadowColor: 'rgba(0, 0, 0, 0.8)',
|
|
textShadowOffset: { width: 1, height: 1 },
|
|
textShadowRadius: 3,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.35)',
|
|
paddingVertical: 2,
|
|
paddingHorizontal: 6,
|
|
borderRadius: 3,
|
|
},
|
|
// ── Loading ──
|
|
loadingOverlay: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
backgroundColor: THEME.colors.overlay,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
zIndex: 999,
|
|
},
|
|
loadingBox: {
|
|
backgroundColor: THEME.colors.surfaceSecondary,
|
|
padding: THEME.spacing.xl,
|
|
borderRadius: THEME.borderRadius.md,
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
borderColor: THEME.colors.border,
|
|
shadowColor: THEME.colors.gradientGlow,
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.35,
|
|
shadowRadius: 20,
|
|
elevation: 10,
|
|
},
|
|
loadingText: {
|
|
color: THEME.colors.text,
|
|
fontSize: 16,
|
|
fontWeight: 'bold',
|
|
marginTop: THEME.spacing.md,
|
|
},
|
|
});
|