feat(slideshow): guest-scannable share-link QR overlay (#848)

* feat(slideshow): guest-scannable share-link QR overlay (#837) - Global settings (Settings → Slideshow): slideshow_qr_enabled/position/ opacity/size — same option shape and cascade as the watermark. - Per-event tri-state show_qr (migration 163): NULL inherits the global, true/false force on/off; editable in the per-event slideshow card. - State endpoint ships the QR as a PNG data URI (cached per share URL — the 3s projector poll never re-encodes), so the kiosk needs no QR lib and no extra authenticated request. - Kiosk renders the QR in a white padded corner box so it stays scannable on any photo. - i18n: en + de (the slideshow namespace has no other locales yet). * fix(slideshow): persist per-event QR override, show QR on empty shows, bound the QR cache (codex review of #848) - OverviewTab never passed event.show_qr into the settings card (and the Event type lacked the field), so a stored true/false override always displayed as 'inherit' and the next save silently reset it to NULL. - The QR overlay was nested inside the photos.length > 0 branch — an empty or category-filtered live gallery showed only 'Waiting for photos', exactly when 'scan to add the first photos' matters most. Now rendered for any running show. - slideshowQrCache: insertion-order eviction at 50 entries — rotated tokens and past events no longer accumulate base64 PNGs forever. * fix(slideshow): derive the QR origin from the kiosk request when the base is loopback (codex review of #848, round 2) With the compose-default FRONTEND_URL=http://localhost:3000 (or no base configured) the overlay QR sent scanning phones to their own localhost. The state poll comes from the kiosk browser itself, so its Host header + protocol (trust proxy is configured) are exactly the public origin guests can reach — used whenever the configured base is missing or loopback. Mirrors the ?origin= fallback #847 uses for the admin-side QR downloads. * fix(slideshow): kiosk passes its origin for the QR fallback (codex review of #848, round 3) req.get('host') is not the browser origin behind the standard proxies — frontend/nginx.conf forwards $host with the port stripped, so a compose LAN deployment on :3000 encoded port 80. The kiosk now sends window.location.origin with the session/state calls (validated server-side, same pattern as #847's admin downloads); the Host-derived origin remains as second fallback. * fix(slideshow): reject loopback kiosk origins, throttle QR regeneration per event (codex review of #848, confirmation round) - A loopback window.location.origin from the kiosk is no more guest-reachable than the loopback base it would replace — rejected; when no reachable URL remains the overlay is suppressed entirely (no QR beats a QR that sends phones to their own localhost). New test pins the suppression. - The QR cache is keyed by event id with a 60s regeneration throttle: the origin is caller-influenced when the base is loopback, so URL-keyed caching let a slideshow-link holder force a fresh QRCode.toDataURL per request via unique origins — a cheap CPU exhaustion path. Encode rate is now bounded per event regardless of input. QR margin also raised to the 4-module spec quiet zone, matching #847. * fix(slideshow): never serve a mismatched cached QR + single-flight encoding (codex review of #848, final round) - A slideshow-token holder could poison the projector's QR: an attacker-origin entry cached per event was served to the legitimate kiosk for the rest of the throttle window. A cached artifact is now only served when its URL matches the request; mismatches inside the window suppress the overlay briefly instead of showing foreign content. - Cold-cache stampede closed: concurrent polls share one in-flight encode promise instead of each scheduling a 512px render. Rejected from the same round (false positive, verified empirically): the loopback regex claim — /^https?:\/\/(localhost|127\.)/ matches 'http://localhost:3000' and '127.0.0.1:port' just fine (no trailing slash required), and the suppression test runs green.
2026-07-19 22:36:03 +02:00
parent 60cdd07085
commit e8dad4b40d
16 changed files with 379 additions and 6 deletions
@@ -38,6 +38,10 @@ const DEFAULTS: SlideshowGlobalDefaults = {
  slideshow_watermark_opacity: 60,
  slideshow_watermark_style: 'white',
  slideshow_watermark_size: 12,
+  slideshow_qr_enabled: false,
+  slideshow_qr_position: 'bottom-left',
+  slideshow_qr_opacity: 90,
+  slideshow_qr_size: 14,
 };

 const inputClass =
@@ -65,6 +69,10 @@ export const SlideshowGlobalDefaultsCard: React.FC = () => {
        slideshow_watermark_opacity: s.slideshow_watermark_opacity ?? DEFAULTS.slideshow_watermark_opacity,
        slideshow_watermark_style: s.slideshow_watermark_style ?? DEFAULTS.slideshow_watermark_style,
        slideshow_watermark_size: s.slideshow_watermark_size ?? DEFAULTS.slideshow_watermark_size,
+        slideshow_qr_enabled: s.slideshow_qr_enabled ?? DEFAULTS.slideshow_qr_enabled,
+        slideshow_qr_position: s.slideshow_qr_position ?? DEFAULTS.slideshow_qr_position,
+        slideshow_qr_opacity: s.slideshow_qr_opacity ?? DEFAULTS.slideshow_qr_opacity,
+        slideshow_qr_size: s.slideshow_qr_size ?? DEFAULTS.slideshow_qr_size,
      });
    }).catch(() => { /* keep defaults */ });
    return () => { cancelled = true; };
@@ -256,6 +264,69 @@ export const SlideshowGlobalDefaultsCard: React.FC = () => {
        )}
        </div>

+        {/* Share-link QR overlay (#837) */}
+        <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
+        <label className="flex items-start gap-2">
+          <input
+            type="checkbox"
+            className="mt-1 w-4 h-4 text-accent border-neutral-300 dark:border-neutral-600 rounded focus:ring-primary-500"
+            checked={val.slideshow_qr_enabled}
+            onChange={(e) => setVal({ ...val, slideshow_qr_enabled: e.target.checked })}
+          />
+          <div>
+            <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              {t('slideshow.qrToggle', 'Gallery QR code')}
+            </span>
+            <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
+              {t('slideshow.qrDescription', 'Show the gallery link as a QR code so guests can scan it straight off the screen.')}
+            </p>
+          </div>
+        </label>
+
+        {val.slideshow_qr_enabled && (
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-3">
+            <div>
+              <label className={labelClass}>{t('slideshow.watermarkPositionLabel', 'Position')}</label>
+              <select
+                value={val.slideshow_qr_position}
+                onChange={(e) => setVal({ ...val, slideshow_qr_position: e.target.value as SlideshowGlobalDefaults['slideshow_qr_position'] })}
+                className={inputClass}
+              >
+                {SLIDESHOW_WATERMARK_POSITIONS.map((pos) => (
+                  <option key={pos} value={pos}>
+                    {t(`slideshow.watermarkPosition.${pos}`, pos)}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className={labelClass}>{t('slideshow.watermarkOpacityLabel', 'Opacity (%)')}</label>
+              <input
+                type="number"
+                min={0}
+                max={100}
+                step={5}
+                value={val.slideshow_qr_opacity}
+                onChange={(e) => setVal({ ...val, slideshow_qr_opacity: Math.min(100, Math.max(0, parseInt(e.target.value, 10) || 0)) })}
+                className={inputClass}
+              />
+            </div>
+            <div>
+              <label className={labelClass}>{t('slideshow.watermarkSizeLabel', 'Size (% of screen)')}</label>
+              <input
+                type="number"
+                min={5}
+                max={40}
+                step={1}
+                value={val.slideshow_qr_size}
+                onChange={(e) => setVal({ ...val, slideshow_qr_size: Math.min(40, Math.max(5, parseInt(e.target.value, 10) || 14)) })}
+                className={inputClass}
+              />
+            </div>
+          </div>
+        )}
+        </div>
+
        <Button variant="outline" size="md" leftIcon={<Save className="w-4 h-4" />} onClick={save} isLoading={saving}>
          {t('common.save', 'Save')}
        </Button>
@@ -36,6 +36,7 @@ export interface SlideshowSettingsCardProps {
    show_transition?: string;
    show_transition_ms?: number;
    show_watermark?: boolean | null;
+    show_qr?: boolean | null;
    show_colorfilter?: string;
    show_order?: string;
    show_category_id?: number | null;
@@ -55,6 +56,7 @@ function styleFromInitial(initial: SlideshowSettingsCardProps['initial']): Slide
    transition: (initial.show_transition as SlideshowStyle['transition']) ?? DEFAULT_SLIDESHOW_STYLE.transition,
    transition_ms: initial.show_transition_ms ?? DEFAULT_SLIDESHOW_STYLE.transition_ms,
    watermark: watermarkMode(initial.show_watermark),
+    qr: watermarkMode(initial.show_qr),
    colorfilter: (initial.show_colorfilter as SlideshowStyle['colorfilter']) ?? DEFAULT_SLIDESHOW_STYLE.colorfilter,
    order: (initial.show_order as SlideshowStyle['order']) ?? DEFAULT_SLIDESHOW_STYLE.order,
    category_id: initial.show_category_id ?? null,
@@ -142,6 +144,7 @@ export const SlideshowSettingsCard: React.FC<SlideshowSettingsCardProps> = ({
        // Tri-state → null (inherit global) / true / false. The watermark LOOK
        // is global-only (Settings → Slideshow); we only send the mode here.
        show_watermark: style.watermark === 'inherit' ? null : style.watermark === 'on',
+        show_qr: style.qr === 'inherit' ? null : style.qr === 'on',
        show_colorfilter: style.colorfilter,
        show_order: style.order,
        show_category_id: style.category_id,
@@ -149,6 +149,25 @@ export const SlideshowStyleFields: React.FC<SlideshowStyleFieldsProps> = ({ valu
          {t('slideshow.watermarkModeHint', 'The logo, position, opacity, style and size are configured under Settings → Slideshow.')}
        </p>
      </div>
+
+      {/* QR overlay (#837) — MODE only, same pattern as the watermark. */}
+      <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
+        <label className={labelClass}>{t('slideshow.qrToggle', 'Gallery QR code')}</label>
+        <select
+          value={value.qr}
+          onChange={(e) => set({ qr: e.target.value as SlideshowStyle['qr'] })}
+          className={inputClass}
+        >
+          {SLIDESHOW_WATERMARK_MODES.map((m) => (
+            <option key={m} value={m}>
+              {t(`slideshow.watermarkMode.${m}`, m === 'inherit' ? 'Use global default' : m === 'on' ? 'On' : 'Off')}
+            </option>
+          ))}
+        </select>
+        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
+          {t('slideshow.qrModeHint', 'Position, size and opacity are configured under Settings → Slideshow.')}
+        </p>
+      </div>
    </div>
  );
 };
@@ -3524,6 +3524,9 @@
    "categoryLabel": "Nur Kategorie zeigen",
    "categoryAll": "Alle Fotos",
    "watermarkToggle": "Logo-Wasserzeichen anzeigen",
+    "qrToggle": "Galerie-QR-Code",
+    "qrDescription": "Zeigt den Galerie-Link als QR-Code, damit Gäste ihn direkt vom Bildschirm scannen können.",
+    "qrModeHint": "Position, Größe und Deckkraft werden unter Einstellungen → Slideshow konfiguriert.",
    "watermarkDescription": "Blendet ein weißes, halbtransparentes Logo in einer Ecke ein (wie ein Senderlogo im TV).",
    "watermarkSourceLabel": "Logo",
    "watermarkSource": {
@@ -3676,6 +3676,9 @@
    "categoryLabel": "Show only category",
    "categoryAll": "All photos",
    "watermarkToggle": "Show logo watermark",
+    "qrToggle": "Gallery QR code",
+    "qrDescription": "Show the gallery link as a QR code so guests can scan it straight off the screen.",
+    "qrModeHint": "Position, size and opacity are configured under Settings → Slideshow.",
    "watermarkDescription": "Overlay a white, semi-transparent logo in a corner (like a TV station ident).",
    "watermarkSourceLabel": "Logo",
    "watermarkSource": {
@@ -126,6 +126,7 @@ export const OverviewTab: React.FC<OverviewTabProps> = ({
            show_transition: event.show_transition,
            show_transition_ms: event.show_transition_ms,
            show_watermark: event.show_watermark,
+            show_qr: event.show_qr,
            show_colorfilter: event.show_colorfilter,
          }}
          onChanged={() => refetchEvent()}
@@ -16,6 +16,7 @@ const DEFAULT_SETTINGS: SlideshowSettings = {
  order: 'chronological',
  fit: 'cover',
  watermark: null,
+  qr: null,
 };

 // How often the running show re-checks settings + photo count (tiny payload).
@@ -227,6 +228,7 @@ export function SlideshowPage() {
          colorfilter: state.colorfilter,
          fit: state.fit,
          watermark: state.watermark,
+          qr: state.qr,
        };
        if (JSON.stringify(next) !== JSON.stringify({
          interval_ms: prev.interval_ms,
@@ -235,6 +237,7 @@ export function SlideshowPage() {
          colorfilter: prev.colorfilter,
          fit: prev.fit,
          watermark: prev.watermark,
+          qr: prev.qr,
        })) {
          setSettings(next);
        }
@@ -452,9 +455,34 @@ export function SlideshowPage() {
              }}
            />
          )}
+
        </>
      )}

+      {/* Share-link QR overlay (#837): guests scan the gallery straight off
+          the beamer. White padding box keeps the code scannable on any photo.
+          Rendered OUTSIDE the photos-gate so an empty/awaiting slideshow still
+          shows the code — the "scan to add the first photos" case (codex
+          review of #848). */}
+      {phase === 'running' && settings.qr && (
+        <img
+          src={settings.qr.data_url}
+          alt=""
+          draggable={false}
+          style={{
+            position: 'absolute',
+            ...watermarkCorner(settings.qr.position),
+            width: `${settings.qr.size ?? 14}vmin`,
+            height: `${settings.qr.size ?? 14}vmin`,
+            opacity: Math.min(1, Math.max(0, (settings.qr.opacity ?? 90) / 100)),
+            background: '#ffffff',
+            padding: '0.6vmin',
+            borderRadius: '1vmin',
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+
      {phase === 'ended' && (
        <div
          style={{
@@ -157,6 +157,7 @@ export const eventsService = {
      show_transition?: string;
      show_transition_ms?: number;
      show_watermark?: boolean | null;
+      show_qr?: boolean | null;
      show_colorfilter?: string;
      show_order?: string;
      show_category_id?: number | null;
@@ -39,6 +39,8 @@ export interface SlideshowStyle {
  transition: SlideshowTransition;
  transition_ms: number;
  watermark: SlideshowWatermarkMode;
+  // QR overlay mode (#837) — same tri-state semantics as the watermark.
+  qr: SlideshowWatermarkMode;
  colorfilter: SlideshowColorFilter;
  // Play order + optional category filter (#202). category_id null = all photos.
  order: SlideshowOrder;
@@ -50,6 +52,7 @@ export const DEFAULT_SLIDESHOW_STYLE: SlideshowStyle = {
  transition: 'crossfade',
  transition_ms: 800,
  watermark: 'inherit',
+  qr: 'inherit',
  colorfilter: 'none',
  order: 'chronological',
  category_id: null,
@@ -73,6 +76,11 @@ export interface SlideshowGlobalDefaults {
  slideshow_watermark_style: SlideshowWatermarkStyle;
  // Logo size as a % of the viewport's shorter side.
  slideshow_watermark_size: number;
+  // QR overlay defaults (#837) — same option shape as the watermark.
+  slideshow_qr_enabled: boolean;
+  slideshow_qr_position: SlideshowWatermarkPosition;
+  slideshow_qr_opacity: number;
+  slideshow_qr_size: number;
 }

 // Resolved watermark the kiosk renders (logo URL already resolved server-side).
@@ -84,6 +92,15 @@ export interface SlideshowWatermark {
  size: number;
 }

+// Resolved QR overlay (#837) — the share-link QR ships as a data URI, so the
+// kiosk needs no QR library and no extra authenticated request.
+export interface SlideshowQr {
+  data_url: string;
+  position: SlideshowWatermarkPosition;
+  opacity: number;
+  size: number;
+}
+
 export interface SlideshowSettings {
  interval_ms: number;
  transition: SlideshowTransition;
@@ -95,6 +112,7 @@ export interface SlideshowSettings {
  order: SlideshowOrder;
  fit: SlideshowFit;
  watermark: SlideshowWatermark | null;
+  qr: SlideshowQr | null;
 }

 export interface SlideshowSession {
@@ -122,12 +140,20 @@ export const slideshowService = {
  // session token + current settings/count. Throws 404 if the link is
  // disabled, rotated, or the gallery isn't live.
  async getSession(slug: string, token: string): Promise<SlideshowSession> {
-    const response = await api.get<SlideshowSession>(`/gallery/${slug}/show/${token}/session`);
+    // origin: the kiosk's own reachable URL — the backend prefers it for the
+    // QR overlay when the configured base is missing/loopback (#848 review;
+    // the proxy strips the port from the Host header, so it can't be
+    // derived server-side).
+    const response = await api.get<SlideshowSession>(`/gallery/${slug}/show/${token}/session`, {
+      params: { origin: window.location.origin },
+    });
    return response.data;
  },

  async getState(slug: string, token: string): Promise<SlideshowState> {
-    const response = await api.get<SlideshowState>(`/gallery/${slug}/show/${token}/state`);
+    const response = await api.get<SlideshowState>(`/gallery/${slug}/show/${token}/state`, {
+      params: { origin: window.location.origin },
+    });
    return response.data;
  },
 };
@@ -77,6 +77,8 @@ export interface Event {
  // Watermark MODE only (null=inherit global / true / false). The look lives
  // globally in Settings → Slideshow, not per event.
  show_watermark?: boolean | null;
+  // QR overlay MODE (#837) — same tri-state semantics as show_watermark.
+  show_qr?: boolean | null;
  show_colorfilter?: 'none' | 'bw' | 'sepia' | 'warm' | 'cool' | 'vignette';
  // Default photo sort order
  default_photo_sort?: string;