refactor(slideshow): watermark look lives only in global settings (+ size)

The watermark look (logo / position / opacity / style) was configurable in three places — the global Settings tab, the per-event-type preset, and the per-event card. Consolidate it to ONE: the global Settings -> Slideshow tab. Per-event and per-event-type now carry only the watermark MODE (inherit / on / off) — the override structure — and render with the global look. - New global "Size (% of screen)" control (slideshow_watermark_size, vmin-based) so the logo can be scaled; resolved server-side into the watermark payload and applied to the kiosk <img>. - Backend slideshowSettings resolves the whole look from app_settings always; per-event show_watermark only toggles enabled. adminEvents PATCH + type-preset seeding no longer accept/seed per-event look fields; unused enums removed. - Frontend SlideshowStyle drops the look fields (mode only); SlideshowStyleFields watermark section is a single mode select with a "configured under Settings" hint; SlideshowSettingsCard + Event type cleaned up. - en/de: watermarkSizeLabel + watermarkModeHint. (events.show_watermark_{source,position,opacity,style} columns from migration 138 are left in place but inert — the look is global now.)
2026-06-20 10:46:27 +02:00
parent 69367b45be
commit 0166dc9658
13 changed files with 61 additions and 145 deletions
@@ -26,6 +26,7 @@ const DEFAULTS: SlideshowGlobalDefaults = {
  slideshow_watermark_position: 'bottom-right',
  slideshow_watermark_opacity: 60,
  slideshow_watermark_style: 'white',
+  slideshow_watermark_size: 12,
 };

 const inputClass =
@@ -47,6 +48,7 @@ export const SlideshowGlobalDefaultsCard: React.FC = () => {
        slideshow_watermark_position: s.slideshow_watermark_position ?? DEFAULTS.slideshow_watermark_position,
        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,
      });
    }).catch(() => { /* keep defaults */ });
    return () => { cancelled = true; };
@@ -142,6 +144,18 @@ export const SlideshowGlobalDefaultsCard: React.FC = () => {
                ))}
              </select>
            </div>
+            <div>
+              <label className={labelClass}>{t('slideshow.watermarkSizeLabel', 'Size (% of screen)')}</label>
+              <input
+                type="number"
+                min={3}
+                max={40}
+                step={1}
+                value={val.slideshow_watermark_size}
+                onChange={(e) => setVal({ ...val, slideshow_watermark_size: Math.min(40, Math.max(3, parseInt(e.target.value, 10) || 12)) })}
+                className={inputClass}
+              />
+            </div>
            </div>
          </div>
        )}
@@ -28,18 +28,12 @@ export interface SlideshowSettingsCardProps {
  eventId: number;
  slug: string;
  isArchived?: boolean;
-  /** The event's own hero logo, previewed for the 'event' watermark source. */
-  eventLogoUrl?: string | null;
  initial: {
    show_share_token?: string | null;
    show_interval_ms?: number;
    show_transition?: string;
    show_transition_ms?: number;
    show_watermark?: boolean | null;
-    show_watermark_source?: string;
-    show_watermark_position?: string;
-    show_watermark_opacity?: number;
-    show_watermark_style?: string;
    show_colorfilter?: string;
  };
  onChanged?: () => void;
@@ -57,16 +51,12 @@ 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),
-    watermark_source: (initial.show_watermark_source as SlideshowStyle['watermark_source']) ?? DEFAULT_SLIDESHOW_STYLE.watermark_source,
-    watermark_position: (initial.show_watermark_position as SlideshowStyle['watermark_position']) ?? DEFAULT_SLIDESHOW_STYLE.watermark_position,
-    watermark_opacity: initial.show_watermark_opacity ?? DEFAULT_SLIDESHOW_STYLE.watermark_opacity,
-    watermark_style: (initial.show_watermark_style as SlideshowStyle['watermark_style']) ?? DEFAULT_SLIDESHOW_STYLE.watermark_style,
    colorfilter: (initial.show_colorfilter as SlideshowStyle['colorfilter']) ?? DEFAULT_SLIDESHOW_STYLE.colorfilter,
  };
 }

 export const SlideshowSettingsCard: React.FC<SlideshowSettingsCardProps> = ({
-  eventId, slug, isArchived, eventLogoUrl, initial, onChanged,
+  eventId, slug, isArchived, initial, onChanged,
 }) => {
  const { t } = useTranslation();

@@ -135,12 +125,9 @@ export const SlideshowSettingsCard: React.FC<SlideshowSettingsCardProps> = ({
        show_interval_ms: style.interval_ms,
        show_transition: style.transition,
        show_transition_ms: style.transition_ms,
-        // Tri-state → null (inherit global) / true / false.
+        // 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_watermark_source: style.watermark_source,
-        show_watermark_position: style.watermark_position,
-        show_watermark_opacity: style.watermark_opacity,
-        show_watermark_style: style.watermark_style,
        show_colorfilter: style.colorfilter,
      });
      toast.success(t('slideshow.settingsSaved', 'Slideshow settings saved'));
@@ -221,7 +208,7 @@ export const SlideshowSettingsCard: React.FC<SlideshowSettingsCardProps> = ({

            {/* Live style settings */}
            <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
-              <SlideshowStyleFields value={style} onChange={setStyle} eventLogoUrl={eventLogoUrl} />
+              <SlideshowStyleFields value={style} onChange={setStyle} />
            </div>
            <p className="text-xs text-neutral-500 dark:text-neutral-400">
              {t('slideshow.liveHint', 'Changes apply to a running slideshow within a few seconds — no need to regenerate the link.')}
@@ -14,18 +14,13 @@ import { useTranslation } from 'react-i18next';
 import {
  SLIDESHOW_TRANSITIONS,
  SLIDESHOW_COLORFILTERS,
-  SLIDESHOW_WATERMARK_POSITIONS,
  SLIDESHOW_WATERMARK_MODES,
-  SLIDESHOW_WATERMARK_STYLES,
  type SlideshowStyle,
 } from '../../services/slideshow.service';
-import { WatermarkSourcePicker } from './WatermarkSourcePicker';

 export interface SlideshowStyleFieldsProps {
  value: SlideshowStyle;
  onChange: (next: SlideshowStyle) => void;
-  /** Per-event hero logo, previewed for the 'event' watermark source. */
-  eventLogoUrl?: string | null;
 }

 const inputClass =
@@ -34,7 +29,7 @@ const labelClass = 'block text-sm font-medium text-neutral-700 dark:text-neutral

 const titleCase = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);

-export const SlideshowStyleFields: React.FC<SlideshowStyleFieldsProps> = ({ value, onChange, eventLogoUrl }) => {
+export const SlideshowStyleFields: React.FC<SlideshowStyleFieldsProps> = ({ value, onChange }) => {
  const { t } = useTranslation();
  const set = (patch: Partial<SlideshowStyle>) => onChange({ ...value, ...patch });

@@ -97,7 +92,8 @@ export const SlideshowStyleFields: React.FC<SlideshowStyleFieldsProps> = ({ valu
        </select>
      </div>

-      {/* Watermark */}
+      {/* Watermark — MODE only. The look (logo/position/opacity/style/size)
+          lives in Settings → Slideshow, so it isn't duplicated here. */}
      <div className="pt-2 border-t border-neutral-200 dark:border-neutral-700">
        <label className={labelClass}>{t('slideshow.watermarkToggle', 'Logo watermark')}</label>
        <select
@@ -112,63 +108,8 @@ export const SlideshowStyleFields: React.FC<SlideshowStyleFieldsProps> = ({ valu
          ))}
        </select>
        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">
-          {t('slideshow.watermarkDescription', 'Overlay a white, semi-transparent logo in a corner (like a TV station ident).')}
+          {t('slideshow.watermarkModeHint', 'The logo, position, opacity, style and size are configured under Settings → Slideshow.')}
        </p>
-
-        {value.watermark === 'on' && (
-          <div className="mt-3 space-y-3">
-            <div>
-              <label className={labelClass}>{t('slideshow.watermarkSourceLabel', 'Logo')}</label>
-              <WatermarkSourcePicker
-                value={value.watermark_source}
-                onChange={(s) => set({ watermark_source: s })}
-                eventLogoUrl={eventLogoUrl}
-              />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-            <div>
-              <label className={labelClass}>{t('slideshow.watermarkPositionLabel', 'Position')}</label>
-              <select
-                value={value.watermark_position}
-                onChange={(e) => set({ watermark_position: e.target.value as SlideshowStyle['watermark_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={value.watermark_opacity}
-                onChange={(e) => set({ watermark_opacity: Math.min(100, Math.max(0, parseInt(e.target.value, 10) || 0)) })}
-                className={inputClass}
-              />
-            </div>
-            <div>
-              <label className={labelClass}>{t('slideshow.watermarkStyleLabel', 'Logo style')}</label>
-              <select
-                value={value.watermark_style}
-                onChange={(e) => set({ watermark_style: e.target.value as SlideshowStyle['watermark_style'] })}
-                className={inputClass}
-              >
-                {SLIDESHOW_WATERMARK_STYLES.map((st) => (
-                  <option key={st} value={st}>
-                    {t(`slideshow.watermarkStyle.${st}`, st === 'original' ? 'Original colors' : 'White')}
-                  </option>
-                ))}
-              </select>
-            </div>
-            </div>
-          </div>
-        )}
      </div>
    </div>
  );
@@ -3195,6 +3195,8 @@
    },
    "watermarkOpacityLabel": "Deckkraft (%)",
    "watermarkStyleLabel": "Logo-Darstellung",
+    "watermarkSizeLabel": "Größe (% des Bildschirms)",
+    "watermarkModeHint": "Logo, Position, Deckkraft, Darstellung und Größe werden unter Einstellungen → Diashow konfiguriert.",
    "watermarkStyle": {
      "white": "Weiß (einfärben)",
      "original": "Originalfarben"
@@ -3219,6 +3219,8 @@
    },
    "watermarkOpacityLabel": "Opacity (%)",
    "watermarkStyleLabel": "Logo style",
+    "watermarkSizeLabel": "Size (% of screen)",
+    "watermarkModeHint": "The logo, position, opacity, style and size are configured under Settings → Slideshow.",
    "watermarkStyle": {
      "white": "White (recolor)",
      "original": "Original colors"
@@ -2166,17 +2166,12 @@ export const EventDetailsPage: React.FC = () => {
            eventId={event.id}
            slug={event.slug}
            isArchived={event.is_archived}
-            eventLogoUrl={event.hero_logo_url}
            initial={{
              show_share_token: event.show_share_token,
              show_interval_ms: event.show_interval_ms,
              show_transition: event.show_transition,
              show_transition_ms: event.show_transition_ms,
              show_watermark: event.show_watermark,
-              show_watermark_source: event.show_watermark_source,
-              show_watermark_position: event.show_watermark_position,
-              show_watermark_opacity: event.show_watermark_opacity,
-              show_watermark_style: event.show_watermark_style,
              show_colorfilter: event.show_colorfilter,
            }}
            onChanged={() => refetchEvent()}
@@ -423,8 +423,10 @@ export function SlideshowPage() {
                ...watermarkCorner(settings.watermark!.position),
                width: 'auto',
                height: 'auto',
-                maxWidth: '16vw',
-                maxHeight: '14vh',
+                // Size = % of the viewport's shorter side (vmin), so the logo
+                // scales the same on any screen. Configured globally.
+                maxWidth: `${settings.watermark!.size ?? 12}vmin`,
+                maxHeight: `${settings.watermark!.size ?? 12}vmin`,
                opacity: Math.min(1, Math.max(0, (settings.watermark!.opacity ?? 60) / 100)),
                // 'white' recolors the logo white (dark/transparent marks); 'original'
                // leaves a boxed/colored logo as-is so it doesn't become a white blob.
@@ -157,10 +157,6 @@ export const eventsService = {
      show_transition?: string;
      show_transition_ms?: number;
      show_watermark?: boolean | null;
-      show_watermark_source?: string;
-      show_watermark_position?: string;
-      show_watermark_opacity?: number;
-      show_watermark_style?: string;
      show_colorfilter?: string;
    }
  ): Promise<Record<string, unknown>> {
@@ -23,15 +23,15 @@ export const SLIDESHOW_WATERMARK_POSITIONS: SlideshowWatermarkPosition[] = ['top
 // Canonical editable style shape, shared by the per-event card and the
 // per-event-type preset editor. The per-event-type `slideshow_preset` JSON
 // uses exactly these keys; the per-event API maps them to `show_*` columns.
+//
+// NOTE: the watermark LOOK (logo/position/opacity/style/size) lives ONLY in the
+// global Settings → Slideshow tab — it is not duplicated here. Per-event/type
+// carry just the `watermark` MODE (inherit/on/off), i.e. the override structure.
 export interface SlideshowStyle {
  interval_ms: number;
  transition: SlideshowTransition;
  transition_ms: number;
  watermark: SlideshowWatermarkMode;
-  watermark_source: SlideshowWatermarkSource;
-  watermark_position: SlideshowWatermarkPosition;
-  watermark_opacity: number;
-  watermark_style: SlideshowWatermarkStyle;
  colorfilter: SlideshowColorFilter;
 }

@@ -40,21 +40,20 @@ export const DEFAULT_SLIDESHOW_STYLE: SlideshowStyle = {
  transition: 'crossfade',
  transition_ms: 800,
  watermark: 'inherit',
-  watermark_source: 'logo',
-  watermark_position: 'bottom-right',
-  watermark_opacity: 60,
-  watermark_style: 'white',
  colorfilter: 'none',
 };

-// Global slideshow defaults (admin Settings → Slideshow). The per-event
-// watermark mode 'inherit' falls back to these.
+// Global slideshow defaults (admin Settings → Slideshow). The single source of
+// truth for the watermark look; the per-event watermark mode 'inherit'/'on'
+// renders with exactly these.
 export interface SlideshowGlobalDefaults {
  slideshow_watermark_enabled: boolean;
  slideshow_watermark_source: SlideshowWatermarkSource;
  slideshow_watermark_position: SlideshowWatermarkPosition;
  slideshow_watermark_opacity: number;
  slideshow_watermark_style: SlideshowWatermarkStyle;
+  // Logo size as a % of the viewport's shorter side.
+  slideshow_watermark_size: number;
 }

 // Resolved watermark the kiosk renders (logo URL already resolved server-side).
@@ -63,6 +62,7 @@ export interface SlideshowWatermark {
  position: SlideshowWatermarkPosition;
  opacity: number;
  style: SlideshowWatermarkStyle;
+  size: number;
 }

 export interface SlideshowSettings {
@@ -74,11 +74,9 @@ export interface Event {
  show_interval_ms?: number;
  show_transition?: 'crossfade' | 'cut' | 'slide' | 'kenburns' | 'dipwhite' | 'dipblack';
  show_transition_ms?: number;
-  show_watermark?: boolean;
-  show_watermark_source?: 'branding' | 'event';
-  show_watermark_position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-  show_watermark_opacity?: number;
-  show_watermark_style?: 'white' | 'original';
+  // Watermark MODE only (null=inherit global / true / false). The look lives
+  // globally in Settings → Slideshow, not per event.
+  show_watermark?: boolean | null;
  show_colorfilter?: 'none' | 'bw' | 'sepia' | 'warm' | 'cool' | 'vignette';
  // Default photo sort order
  default_photo_sort?: string;