soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cluster guest v2 capture controls

Browse Source
This commit is contained in:
Codex Agent
2026-02-03 21:49:23 +01:00
parent c6a7f31ea0
commit 7980980bed
2 changed files with 75 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/guest-v2/components/AppShell.tsx
View File

@@ -129,27 +129,29 @@ export default function AppShell({ children }: AppShellProps) {
</YStack> </YStack>
{showFab ? ( {showFab ? (
<> <>
<Button {isUploadRoute ? null : (
size="$3" <Button
circular size="$3"
position="fixed" circular
bottom={28} position="fixed"
left="calc(50% - 84px)" bottom={28}
zIndex={1100} left="calc(50% - 84px)"
backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'} zIndex={1100}
borderWidth={1} backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'} borderWidth={1}
onPress={goTo('/')} borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }} onPress={goTo('/')}
> style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
<Home size={16} color={actionIconColor} /> >
</Button> <Home size={16} color={actionIconColor} />
</Button>
)}
<FloatingActionButton <FloatingActionButton
onPress={goTo('/upload')} onPress={goTo('/upload')}
hidden={isUploadRoute} hidden={isUploadRoute}
/> />
<Button <Button
size="$4" size="$5"
circular circular
position="fixed" position="fixed"
bottom={28} bottom={28}
@@ -158,12 +160,12 @@ export default function AppShell({ children }: AppShellProps) {
backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'} backgroundColor={isDark ? 'rgba(12, 16, 32, 0.75)' : 'rgba(255, 255, 255, 0.9)'}
borderWidth={1} borderWidth={1}
borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'} borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.12)'}
width={54} width={72}
height={54} height={72}
onPress={openCompass} onPress={openCompass}
style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }} style={{ boxShadow: isDark ? '0 10px 20px rgba(2, 6, 23, 0.45)' : '0 8px 16px rgba(15, 23, 42, 0.14)' }}
> >
<Menu size={18} color={actionIconColor} /> <Menu size={24} color={actionIconColor} />
</Button> </Button>
</> </>
) : null} ) : null}

99
resources/js/guest-v2/screens/UploadScreen.tsx
View File

@@ -500,61 +500,70 @@ export default function UploadScreen() {
/> />
)} )}
{cameraState === 'ready' && !previewUrl ? ( {cameraState === 'ready' && !previewUrl ? (
<XStack <YStack
position="absolute" position="absolute"
bottom="$4" bottom="$4"
left="$4" left="$4"
right="$4" right="$4"
alignItems="center" alignItems="center"
justifyContent="space-between"
> >
<Button <XStack
size="$3" gap="$2"
circular alignItems="center"
backgroundColor={flashPreferred ? '$primary' : mutedButton} justifyContent="center"
borderWidth={1} padding="$2"
borderColor={flashPreferred ? 'rgba(255,255,255,0.25)' : mutedButtonBorder}
onPress={handleToggleFlash}
disabled={facingMode !== 'environment'}
style={{ boxShadow: accessoryShadow }}
aria-label={t('upload.controls.toggleFlash', 'Toggle flash')}
>
{flashPreferred ? (
<Zap size={18} color="#FFFFFF" />
) : (
<ZapOff size={18} color={iconColor} />
)}
</Button>
<Button
size="$5"
circular
backgroundColor="$primary"
onPress={handleCapture}
width={90}
height={90}
borderRadius={999} borderRadius={999}
shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
shadowOpacity={0.5}
shadowRadius={22}
shadowOffset={{ width: 0, height: 10 }}
style={{ boxShadow: fabShadow }}
aria-label={t('upload.captureButton', 'Capture')}
>
<Camera size={34} color="#FFFFFF" />
</Button>
<Button
size="$3"
circular
backgroundColor={mutedButton}
borderWidth={1} borderWidth={1}
borderColor={mutedButtonBorder} borderColor={isDark ? 'rgba(255,255,255,0.16)' : 'rgba(15,23,42,0.14)'}
onPress={handleSwitchCamera} backgroundColor={isDark ? 'rgba(12, 16, 32, 0.6)' : 'rgba(255, 255, 255, 0.8)'}
style={{ boxShadow: accessoryShadow }} style={{ boxShadow: accessoryShadow }}
aria-label={t('upload.controls.switchCamera', 'Switch camera')}
> >
<RefreshCcw size={18} color={iconColor} /> <Button
</Button> size="$3"
</XStack> circular
backgroundColor={flashPreferred ? '$primary' : mutedButton}
borderWidth={1}
borderColor={flashPreferred ? 'rgba(255,255,255,0.25)' : mutedButtonBorder}
onPress={handleToggleFlash}
disabled={facingMode !== 'environment'}
aria-label={t('upload.controls.toggleFlash', 'Toggle flash')}
>
{flashPreferred ? (
<Zap size={20} color="#FFFFFF" />
) : (
<ZapOff size={20} color={iconColor} />
)}
</Button>
<Button
size="$5"
circular
backgroundColor="$primary"
onPress={handleCapture}
width={98}
height={98}
borderRadius={999}
shadowColor={isDark ? 'rgba(255, 79, 216, 0.5)' : 'rgba(15, 23, 42, 0.2)'}
shadowOpacity={0.5}
shadowRadius={24}
shadowOffset={{ width: 0, height: 12 }}
style={{ boxShadow: fabShadow }}
aria-label={t('upload.captureButton', 'Capture')}
>
<Camera size={40} color="#FFFFFF" />
</Button>
<Button
size="$3"
circular
backgroundColor={mutedButton}
borderWidth={1}
borderColor={mutedButtonBorder}
onPress={handleSwitchCamera}
aria-label={t('upload.controls.switchCamera', 'Switch camera')}
>
<RefreshCcw size={20} color={iconColor} />
</Button>
</XStack>
</YStack>
) : null} ) : null}
{(cameraState === 'ready' || cameraState === 'starting' || cameraState === 'preview') ? ( {(cameraState === 'ready' || cameraState === 'starting' || cameraState === 'preview') ? (
<Button <Button