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.
This commit is contained in:
Paul Nothaft
@@ -99,7 +99,12 @@ describe('public Live Slideshow routes', () => {
|
||||
await setFlag(db, 'slideshow', true);
|
||||
});
|
||||
|
||||
const stateUrl = (token = TOKEN) => `/api/gallery/${SLUG}/show/${token}/state`;
|
||||
// QR overlay: supertest's Host is loopback, and a loopback base is now
|
||||
// suppressed rather than encoded — the kiosk passes its reachable
|
||||
// window.location.origin, so the QR tests do the same.
|
||||
const KIOSK_ORIGIN = 'https://gallery.example.com';
|
||||
const stateUrl = (token = TOKEN) => `/api/gallery/${SLUG}/show/${token}/state?origin=${encodeURIComponent(KIOSK_ORIGIN)}`;
|
||||
const stateUrlNoOrigin = (token = TOKEN) => `/api/gallery/${SLUG}/show/${token}/state`;
|
||||
|
||||
describe('resolveSlideshow guards', () => {
|
||||
it('200 + per-event display settings on a live link', async () => {
|
||||
@@ -228,6 +233,58 @@ describe('public Live Slideshow routes', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('slideshowSettings — QR overlay cascade (#837)', () => {
|
||||
async function enableGlobalQr() {
|
||||
await setSetting(db, 'slideshow_qr_enabled', true);
|
||||
await setSetting(db, 'slideshow_qr_position', 'top-right');
|
||||
await setSetting(db, 'slideshow_qr_opacity', 80);
|
||||
await setSetting(db, 'slideshow_qr_size', 18);
|
||||
}
|
||||
|
||||
it('inherits the global QR overlay when show_qr is NULL', async () => {
|
||||
await insertEvent(db, { show_qr: null });
|
||||
await enableGlobalQr();
|
||||
const res = await request(app).get(stateUrl());
|
||||
expect(res.body.qr).toMatchObject({
|
||||
position: 'top-right',
|
||||
opacity: 80,
|
||||
size: 18,
|
||||
});
|
||||
// Share-link QR ships as a PNG data URI — no client QR lib needed.
|
||||
expect(res.body.qr.data_url).toMatch(/^data:image\/png;base64,/);
|
||||
});
|
||||
|
||||
it('is null by default (global off, no override)', async () => {
|
||||
await insertEvent(db, { show_qr: null });
|
||||
const res = await request(app).get(stateUrl());
|
||||
expect(res.body.qr).toBeNull();
|
||||
});
|
||||
|
||||
it('per-event OFF override hides the QR even when the global is on', async () => {
|
||||
await insertEvent(db, { show_qr: 0 });
|
||||
await enableGlobalQr();
|
||||
const res = await request(app).get(stateUrl());
|
||||
expect(res.body.qr).toBeNull();
|
||||
});
|
||||
|
||||
it('per-event ON override shows the QR even when the global is off', async () => {
|
||||
await insertEvent(db, { show_qr: 1 });
|
||||
const res = await request(app).get(stateUrl());
|
||||
expect(res.body.qr).not.toBeNull();
|
||||
expect(res.body.qr.data_url).toMatch(/^data:image\/png;base64,/);
|
||||
// Look falls back to the global defaults.
|
||||
expect(res.body.qr.position).toBe('bottom-left');
|
||||
});
|
||||
|
||||
it('suppresses the QR when no guest-reachable origin exists (loopback base, no kiosk origin)', async () => {
|
||||
await insertEvent(db, { show_qr: 1 });
|
||||
const res = await request(app).get(stateUrlNoOrigin());
|
||||
// Encoding localhost would send scanning phones to THEIR localhost —
|
||||
// no QR beats a broken QR (codex review of #848, confirmation round).
|
||||
expect(res.body.qr).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('display-only token guards (#646 review concern 1)', () => {
|
||||
// Mint a real slideshow JWT, then prove it is denied on the
|
||||
// download / upload / feedback routes (display-only contract).
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* #837 — per-event override for the live-slideshow QR overlay.
|
||||
* Mirrors show_watermark: NULL = inherit the global slideshow_qr_enabled
|
||||
* setting, true/false force the overlay on/off for this event.
|
||||
*/
|
||||
exports.up = async function up(knex) {
|
||||
const has = await knex.schema.hasColumn('events', 'show_qr');
|
||||
if (!has) {
|
||||
await knex.schema.alterTable('events', (t) => {
|
||||
t.boolean('show_qr').nullable().defaultTo(null);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
exports.down = async function down(knex) {
|
||||
const has = await knex.schema.hasColumn('events', 'show_qr');
|
||||
if (has) {
|
||||
await knex.schema.alterTable('events', (t) => {
|
||||
t.dropColumn('show_qr');
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -105,6 +105,7 @@ module.exports = (router) => {
|
||||
body('show_transition').optional().isIn(SLIDESHOW_TRANSITIONS),
|
||||
body('show_transition_ms').optional().isInt({ min: 100, max: 5000 }),
|
||||
body('show_watermark').optional({ nullable: true }),
|
||||
body('show_qr').optional({ nullable: true }),
|
||||
body('show_colorfilter').optional().isIn(SLIDESHOW_COLORFILTERS),
|
||||
body('show_order').optional().isIn(SLIDESHOW_ORDERS),
|
||||
body('show_category_id').optional({ nullable: true }).isInt({ min: 1 })
|
||||
@@ -131,6 +132,12 @@ module.exports = (router) => {
|
||||
? null
|
||||
: formatBoolean(parseBooleanInput(req.body.show_watermark, false));
|
||||
}
|
||||
// QR overlay (#837) — same tri-state semantics as show_watermark.
|
||||
if (req.body.show_qr !== undefined) {
|
||||
updates.show_qr = req.body.show_qr === null
|
||||
? null
|
||||
: formatBoolean(parseBooleanInput(req.body.show_qr, false));
|
||||
}
|
||||
if (req.body.show_colorfilter !== undefined) updates.show_colorfilter = req.body.show_colorfilter;
|
||||
if (req.body.show_order !== undefined) updates.show_order = req.body.show_order;
|
||||
// Category filter (#202). null clears it (all photos). A non-null id must
|
||||
@@ -160,6 +167,7 @@ module.exports = (router) => {
|
||||
show_transition: updates.show_transition ?? event.show_transition ?? 'crossfade',
|
||||
show_transition_ms: updates.show_transition_ms ?? event.show_transition_ms ?? 800,
|
||||
show_watermark: updates.show_watermark ?? event.show_watermark ?? null,
|
||||
show_qr: 'show_qr' in updates ? updates.show_qr : (event.show_qr ?? null),
|
||||
show_colorfilter: updates.show_colorfilter ?? event.show_colorfilter ?? 'none',
|
||||
show_order: updates.show_order ?? event.show_order ?? 'chronological',
|
||||
show_category_id: 'show_category_id' in updates ? updates.show_category_id : (event.show_category_id ?? null)
|
||||
|
||||
@@ -383,6 +383,21 @@ router.put('/slideshow', adminAuth, requirePermission('settings.edit'), async (r
|
||||
const n = Math.min(40, Math.max(3, Math.round(Number(req.body.slideshow_watermark_size) || 12)));
|
||||
push('slideshow_watermark_size', n);
|
||||
}
|
||||
// QR overlay (#837) — same option shape as the watermark.
|
||||
if (has('slideshow_qr_enabled')) push('slideshow_qr_enabled', !!req.body.slideshow_qr_enabled);
|
||||
if (has('slideshow_qr_position')) {
|
||||
const allowed = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
||||
const v = allowed.includes(req.body.slideshow_qr_position) ? req.body.slideshow_qr_position : 'bottom-left';
|
||||
push('slideshow_qr_position', v);
|
||||
}
|
||||
if (has('slideshow_qr_opacity')) {
|
||||
const n = Math.min(100, Math.max(0, Math.round(Number(req.body.slideshow_qr_opacity) || 0)));
|
||||
push('slideshow_qr_opacity', n);
|
||||
}
|
||||
if (has('slideshow_qr_size')) {
|
||||
const n = Math.min(40, Math.max(5, Math.round(Number(req.body.slideshow_qr_size) || 14)));
|
||||
push('slideshow_qr_size', n);
|
||||
}
|
||||
|
||||
for (const u of updates) {
|
||||
await upsertAppSetting(u.setting_key, u.setting_value, u.setting_type);
|
||||
|
||||
@@ -305,7 +305,7 @@ async function resolveSlideshow(slug, token) {
|
||||
// watermark (a white, semi-transparent corner logo). The logo URL is resolved
|
||||
// from the chosen source so the kiosk renders it without knowing about
|
||||
// branding/event internals; null url = nothing to overlay.
|
||||
async function slideshowSettings(event) {
|
||||
async function slideshowSettings(event, req) {
|
||||
// The global look/fit (Settings → Slideshow) + branding logo URLs come from a
|
||||
// short-TTL cached bundle so a 3s projector poll doesn't re-fire ~10 settings
|
||||
// reads each time (PR #646 review, concern 2).
|
||||
@@ -342,6 +342,26 @@ async function slideshowSettings(event) {
|
||||
};
|
||||
}
|
||||
}
|
||||
// QR overlay (#837): like the watermark, the LOOK is global-only and the
|
||||
// per-event `show_qr` tri-state (NULL = inherit) decides visibility. The QR
|
||||
// encodes the gallery share URL and ships as a data URI so the public
|
||||
// slideshow client needs no QR library and no extra authenticated endpoint.
|
||||
const qrOverride = event.show_qr;
|
||||
const qrInherit = (qrOverride === null || qrOverride === undefined);
|
||||
const qrEnabled = qrInherit ? g.qr_enabled : (qrOverride === true || qrOverride === 1 || qrOverride === '1');
|
||||
let qr = null;
|
||||
if (qrEnabled) {
|
||||
const dataUrl = await slideshowQrDataUrl(event, req);
|
||||
if (dataUrl) {
|
||||
qr = {
|
||||
data_url: dataUrl,
|
||||
position: g.qr_position,
|
||||
opacity: g.qr_opacity,
|
||||
size: g.qr_size,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
interval_ms: event.show_interval_ms || 5000,
|
||||
transition: event.show_transition || 'crossfade',
|
||||
@@ -352,9 +372,93 @@ async function slideshowSettings(event) {
|
||||
order: event.show_order || 'chronological',
|
||||
fit: g.fit,
|
||||
watermark,
|
||||
qr,
|
||||
};
|
||||
}
|
||||
|
||||
// The state endpoint is polled every ~3s per projector — cache the generated
|
||||
// QR data URI per share URL instead of re-encoding on every poll. Bounded:
|
||||
// entries live for past events / rotated tokens too, so without eviction the
|
||||
// map would grow with every share URL ever displayed (codex review of #848).
|
||||
// Insertion-order eviction is enough — concurrently-shown events stay hot.
|
||||
const SLIDESHOW_QR_CACHE_MAX = 50;
|
||||
// Keyed by event id (NOT by URL): the origin is caller-influenced when the
|
||||
// configured base is loopback, so URL-keyed caching would let a slideshow
|
||||
// -link holder force a fresh QRCode.toDataURL per request with unique
|
||||
// origins — a cheap CPU-exhaustion path (codex review of #848,
|
||||
// confirmation round). Per-event entries + a regeneration throttle bound
|
||||
// the encode rate regardless of what the caller sends.
|
||||
const SLIDESHOW_QR_REGEN_MS = 60_000;
|
||||
const slideshowQrCache = new Map(); // eventId -> { url, dataUrl, at }
|
||||
// Localhost/relative guard (codex review of #848): with the compose-default
|
||||
// FRONTEND_URL=http://localhost:3000 (or none configured) the QR would send
|
||||
// scanning phones to THEIR localhost. The state poll comes from the kiosk
|
||||
// browser itself, so its Host header + protocol are exactly the public
|
||||
// origin guests can reach — prefer that whenever the configured base is
|
||||
// missing or loopback. trust proxy is configured, so req.protocol respects
|
||||
// X-Forwarded-Proto behind the standard reverse-proxy setups.
|
||||
const QR_LOCAL_BASE_RE = /^https?:\/\/(localhost|127\.|0\.0\.0\.0|\[::1\])/i;
|
||||
const QR_ORIGIN_RE = /^https?:\/\/[^\s/]+$/i;
|
||||
async function slideshowQrDataUrl(event, req) {
|
||||
try {
|
||||
const shareToken = getEventShareToken(event);
|
||||
if (!shareToken) return null;
|
||||
let { shareUrl, sharePath } = await buildShareLinkVariants({ slug: event.slug, shareToken });
|
||||
if (!/^https?:\/\//i.test(shareUrl) || QR_LOCAL_BASE_RE.test(shareUrl)) {
|
||||
// Prefer the kiosk's own window.location.origin (?origin=, validated):
|
||||
// req.get('host') is NOT the browser origin behind the standard
|
||||
// proxies — frontend/nginx.conf forwards $host (port stripped), so a
|
||||
// compose LAN deployment on :3000 would encode port 80. A LOOPBACK
|
||||
// kiosk origin is rejected too: it is no more guest-reachable than
|
||||
// the loopback base it would replace (codex review of #848).
|
||||
const rawOrigin = req?.query?.origin;
|
||||
const queryOrigin = typeof rawOrigin === 'string' && QR_ORIGIN_RE.test(rawOrigin) && !QR_LOCAL_BASE_RE.test(rawOrigin)
|
||||
? rawOrigin.replace(/\/$/, '')
|
||||
: null;
|
||||
const host = req && req.get ? req.get('host') : null;
|
||||
const hostOrigin = host ? `${req.protocol}://${host}` : null;
|
||||
if (queryOrigin) shareUrl = `${queryOrigin}${sharePath}`;
|
||||
else if (hostOrigin && !QR_LOCAL_BASE_RE.test(hostOrigin)) shareUrl = `${hostOrigin}${sharePath}`;
|
||||
// Still loopback/relative → no reachable URL exists; suppress the
|
||||
// overlay rather than encode a QR that sends phones to localhost.
|
||||
else return null;
|
||||
}
|
||||
|
||||
const cached = slideshowQrCache.get(event.id);
|
||||
if (cached && cached.url === shareUrl) return cached.dataUrl;
|
||||
// URL differs from the cached one: NEVER serve the mismatched artifact —
|
||||
// a slideshow-token holder could otherwise poison the projector's QR
|
||||
// with an attacker origin for a whole throttle window (codex review of
|
||||
// #848, final round). Inside the window the overlay is briefly
|
||||
// suppressed instead; regeneration stays bounded per event.
|
||||
if (cached && Date.now() - cached.at < SLIDESHOW_QR_REGEN_MS) {
|
||||
return cached.pending ? cached.dataUrl : null;
|
||||
}
|
||||
// Single-flight: concurrent polls on a cold cache must not each
|
||||
// schedule their own 512px encode — reserve the entry with a shared
|
||||
// promise before awaiting.
|
||||
if (cached && cached.pending && cached.url === shareUrl) return cached.pending;
|
||||
const QRCode = require('qrcode');
|
||||
const entry = { url: shareUrl, dataUrl: null, at: Date.now(), pending: null };
|
||||
entry.pending = QRCode.toDataURL(shareUrl, { width: 512, margin: 4 }).then((dataUrl) => {
|
||||
entry.dataUrl = dataUrl;
|
||||
entry.pending = null;
|
||||
return dataUrl;
|
||||
}).catch((e) => {
|
||||
slideshowQrCache.delete(event.id);
|
||||
throw e;
|
||||
});
|
||||
if (!slideshowQrCache.has(event.id) && slideshowQrCache.size >= SLIDESHOW_QR_CACHE_MAX) {
|
||||
slideshowQrCache.delete(slideshowQrCache.keys().next().value);
|
||||
}
|
||||
slideshowQrCache.set(event.id, entry);
|
||||
return await entry.pending;
|
||||
} catch (e) {
|
||||
logger.error('Slideshow QR generation failed:', e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Open a slideshow session: validate the token and mint a short-lived gallery
|
||||
// JWT scoped to `accessLevel:'slideshow'` (treated as a guest by the photo /
|
||||
// image endpoints → visible photos only, no client-only/hidden). The page
|
||||
@@ -391,7 +495,7 @@ router.get('/:slug/show/:token/session', handleAsync(async (req, res) => {
|
||||
event_type: event.event_type,
|
||||
color_theme: event.color_theme
|
||||
},
|
||||
settings: await slideshowSettings(event),
|
||||
settings: await slideshowSettings(event, req),
|
||||
photo_count: parseInt(count, 10) || 0,
|
||||
expires_at: event.expires_at || null
|
||||
});
|
||||
@@ -411,7 +515,7 @@ router.get('/:slug/show/:token/state', handleAsync(async (req, res) => {
|
||||
const [{ count }] = await slideshowPhotosQuery(event.id, event.show_category_id).count('* as count');
|
||||
|
||||
res.json({
|
||||
...(await slideshowSettings(event)),
|
||||
...(await slideshowSettings(event, req)),
|
||||
photo_count: parseInt(count, 10) || 0,
|
||||
expires_at: event.expires_at || null
|
||||
});
|
||||
|
||||
@@ -21,6 +21,7 @@ async function getSlideshowGlobals() {
|
||||
const [
|
||||
enabled, source, position, opacity, style, size, fit,
|
||||
logo, logoDark, favicon,
|
||||
qrEnabled, qrPosition, qrOpacity, qrSize,
|
||||
] = await Promise.all([
|
||||
getAppSetting('slideshow_watermark_enabled', false),
|
||||
getAppSetting('slideshow_watermark_source', 'logo'),
|
||||
@@ -32,6 +33,11 @@ async function getSlideshowGlobals() {
|
||||
getAppSetting('branding_logo_url', null),
|
||||
getAppSetting('branding_logo_url_dark', null),
|
||||
getAppSetting('branding_favicon_url', null),
|
||||
// QR overlay (#837) — guests scan the gallery link straight off the beamer.
|
||||
getAppSetting('slideshow_qr_enabled', false),
|
||||
getAppSetting('slideshow_qr_position', 'bottom-left'),
|
||||
getAppSetting('slideshow_qr_opacity', 90),
|
||||
getAppSetting('slideshow_qr_size', 14),
|
||||
]);
|
||||
|
||||
const val = {
|
||||
@@ -45,6 +51,10 @@ async function getSlideshowGlobals() {
|
||||
branding_logo_url: logo || null,
|
||||
branding_logo_url_dark: logoDark || null,
|
||||
branding_favicon_url: favicon || null,
|
||||
qr_enabled: qrEnabled === true,
|
||||
qr_position: qrPosition || 'bottom-left',
|
||||
qr_opacity: qrOpacity ?? 90,
|
||||
qr_size: qrSize ?? 14,
|
||||
};
|
||||
cache = { at: now, val };
|
||||
return val;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user