feat(settings): General-first layout + lightbox video playback toggles

Reorder the Settings sections so General is the top and default section instead
of AI Workspace. Add two persisted settings under a new "Video playback" group:
- Autoplay in lightbox (default on)
- Start muted (default off)

VideoPlayer reads these when a video opens — autoplaying only when enabled and
starting muted when enabled, otherwise falling back to the session's last-used
mute state. Settings apply to the next opened video, not the current one.
This commit is contained in:
2026-06-21 14:39:41 +01:00
parent 3db95a4489
commit 5870205047
3 changed files with 72 additions and 7 deletions
+13 -5
View File
@@ -1,5 +1,6 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { useGalleryStore } from "../store";
const SPEED_OPTIONS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2];
const CONTROLS_HIDE_DELAY_MS = 2500;
@@ -57,7 +58,9 @@ export function VideoPlayer({ src }: { src: string }) {
const [duration, setDuration] = useState(0);
const [buffered, setBuffered] = useState<BufferedRange[]>([]);
const [volume, setVolume] = useState(persistedVolume);
const [muted, setMuted] = useState(persistedMuted);
const [muted, setMuted] = useState(
() => useGalleryStore.getState().lightboxAutoMute || persistedMuted,
);
const [playbackRate, setPlaybackRate] = useState(1);
const [loop, setLoop] = useState(false);
const [fullscreen, setFullscreen] = useState(false);
@@ -89,11 +92,16 @@ export function VideoPlayer({ src }: { src: string }) {
useEffect(() => {
const video = videoRef.current;
if (!video) return;
// Read playback prefs fresh for each opened video — not reactive, so a
// settings change applies to the next video rather than the current one.
const { lightboxAutoplay, lightboxAutoMute } = useGalleryStore.getState();
const startMuted = lightboxAutoMute || persistedMuted;
video.volume = persistedVolume;
video.muted = persistedMuted;
// Autoplay; if the webview blocks it the catch leaves us paused with
// controls visible, which is a fine fallback.
video.play().catch(() => {});
video.muted = startMuted;
setMuted(startMuted);
// Autoplay when enabled; if the webview blocks it the catch leaves us paused
// with controls visible, which is a fine fallback.
if (lightboxAutoplay) video.play().catch(() => {});
}, [src]);
const readBuffered = useCallback(() => {