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.)
This commit is contained in:
Luca
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user