@vectoriox/iox-ui 5.37.0 → 5.39.0

package/fesm2022/vectoriox-iox-ui-media-core.mjs

@@ -0,0 +1,571 @@
+import { ConsentCategory, hasConsent, CONSENT_COOKIE_NAME, decode, setCategoryDecision, encode, cookieAttributes } from '@vectoriox/iox-ui/consent-core';
+
+/**
+ * VIDEO (CC3 — complex-components plan §7b, board 5). A LEAF type with two sources:
+ * - an uploaded FILE renders as a real `<video>` (poster, `preload="metadata"`, captions, controls);
+ * - a YouTube / Vimeo address is ALWAYS a FACADE (D5): the studio's poster and a play button named after the video,
+ *   behind the site's consent gate (Marketing). The player's `<iframe>` exists only after a click AND a grant —
+ *   never in the server's HTML, never on the builder canvas.
+ *
+ * `planVideo(node, consent)` is the ONE decision — the only code that knows the URL shapes, the embed hosts and the
+ * consent category. Both engine paths and the canvas render from it (`videoInnerHtml`), and the runtime
+ * (`video-runtime.ts`) builds the player's address from the same plan.
+ */
+const VIDEO_NODE_TYPE = 'Video';
+var VideoSource;
+(function (VideoSource) {
+    VideoSource["File"] = "file";
+    VideoSource["YouTube"] = "youtube";
+    VideoSource["Vimeo"] = "vimeo";
+})(VideoSource || (VideoSource = {}));
+var VideoMode;
+(function (VideoMode) {
+    /** In the page, with the player's controls. */
+    VideoMode["Inline"] = "inline";
+    /** Muted, looped, no controls, an always-visible pause button (WCAG 2.2.2) — an uploaded file only. */
+    VideoMode["Background"] = "background";
+})(VideoMode || (VideoMode = {}));
+/** The node's traits (Bindings ▸ Media · Behaviour · Accessibility · Privacy). */
+var VideoTrait;
+(function (VideoTrait) {
+    /** Not `source`: across the builder `source` names a DATA source (a Repeater's, a Slider's). */
+    VideoTrait["Source"] = "videoSource";
+    VideoTrait["Src"] = "src";
+    VideoTrait["Poster"] = "poster";
+    VideoTrait["Mode"] = "mode";
+    VideoTrait["Autoplay"] = "autoplay";
+    VideoTrait["Title"] = "title";
+    VideoTrait["Captions"] = "captions";
+    VideoTrait["CaptionsLang"] = "captionsLang";
+    VideoTrait["Consent"] = "consentCategory";
+})(VideoTrait || (VideoTrait = {}));
+/** What a plan renders. */
+var VideoKind;
+(function (VideoKind) {
+    /** An uploaded file: a real `<video>`. */
+    VideoKind["File"] = "file";
+    /** YouTube / Vimeo: poster + play, the player loaded on a click after consent. */
+    VideoKind["Facade"] = "facade";
+    /** No address yet: the poster blank (DS3) and nothing to play. */
+    VideoKind["Empty"] = "empty";
+})(VideoKind || (VideoKind = {}));
+const VIDEO_PROVIDER_LABEL = {
+    [VideoSource.YouTube]: 'YouTube',
+    [VideoSource.Vimeo]: 'Vimeo',
+};
+/** Who the visitor's IP address and cookies go to, named in the consent prompt. */
+const VIDEO_PROVIDER_COMPANY = {
+    [VideoSource.YouTube]: 'Google',
+    [VideoSource.Vimeo]: 'Vimeo',
+};
+/** The two hosts a player ever loads from — youtube-nocookie and Vimeo's player (with Do Not Track). */
+const VIDEO_EMBED_ORIGINS = ['https://www.youtube-nocookie.com', 'https://player.vimeo.com'];
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
+const VIMEO_ID = /^\d{6,12}$/;
+const VIMEO_HASH = /^[0-9a-f]{6,20}$/i;
+const YOUTUBE_HOSTS = new Set(['youtube.com', 'www.youtube.com', 'm.youtube.com', 'music.youtube.com', 'youtube-nocookie.com', 'www.youtube-nocookie.com']);
+const YOUTUBE_SHORT_HOSTS = new Set(['youtu.be', 'www.youtu.be']);
+const YOUTUBE_PATH_PREFIXES = ['embed', 'shorts', 'live', 'v'];
+const VIMEO_HOSTS = new Set(['vimeo.com', 'www.vimeo.com', 'player.vimeo.com']);
+function toUrl(raw) {
+    const text = raw.trim();
+    if (!text)
+        return null;
+    try {
+        return new URL(/^[a-z][a-z0-9+.-]*:\/\//i.test(text) ? text : `https://${text}`);
+    }
+    catch {
+        return null;
+    }
+}
+function parseYouTube(url) {
+    const host = url.hostname.toLowerCase();
+    const segments = url.pathname.split('/').filter(Boolean);
+    let id = null;
+    if (YOUTUBE_SHORT_HOSTS.has(host))
+        id = segments[0] ?? null;
+    else if (YOUTUBE_HOSTS.has(host)) {
+        if (segments[0] === 'watch')
+            id = url.searchParams.get('v');
+        else if (YOUTUBE_PATH_PREFIXES.includes(segments[0] ?? ''))
+            id = segments[1] ?? null;
+    }
+    else
+        return null;
+    return id && YOUTUBE_ID.test(id) ? { source: VideoSource.YouTube, id } : null;
+}
+function parseVimeo(url) {
+    if (!VIMEO_HOSTS.has(url.hostname.toLowerCase()))
+        return null;
+    const segments = url.pathname.split('/').filter(Boolean);
+    // player.vimeo.com/video/<id>, vimeo.com/<id>[/<hash>], vimeo.com/channels/<c>/<id>, vimeo.com/groups/<g>/videos/<id>
+    const index = segments.findIndex(s => VIMEO_ID.test(s));
+    if (index < 0)
+        return null;
+    const id = segments[index];
+    const hash = url.searchParams.get('h') ?? segments[index + 1];
+    return { source: VideoSource.Vimeo, id, ...(hash && VIMEO_HASH.test(hash) ? { hash } : {}) };
+}
+/** The embed a pasted address names — a YouTube or Vimeo watch, share, embed or short link — or null. */
+function parseVideoUrl(raw) {
+    const url = typeof raw === 'string' ? toUrl(raw) : null;
+    if (!url || !/^https?:$/.test(url.protocol))
+        return null;
+    return parseYouTube(url) ?? parseVimeo(url);
+}
+/** The source a node plays: its declared source when it is one, else what its address is. */
+function videoSourceOf(src, declared) {
+    if (declared === VideoSource.YouTube || declared === VideoSource.Vimeo || declared === VideoSource.File)
+        return declared;
+    return parseVideoUrl(typeof src === 'string' ? src : '')?.source ?? VideoSource.File;
+}
+/** The player's address — loaded only after a click and a grant. Autoplays (the visitor just pressed play). */
+function videoEmbedUrl(ref) {
+    if (ref.source === VideoSource.YouTube) {
+        return `https://www.youtube-nocookie.com/embed/${encodeURIComponent(ref.id)}?autoplay=1&rel=0&playsinline=1`;
+    }
+    return `https://player.vimeo.com/video/${encodeURIComponent(ref.id)}?autoplay=1&dnt=1${ref.hash ? `&h=${encodeURIComponent(ref.hash)}` : ''}`;
+}
+function videoThumbnailRequest(ref) {
+    if (ref.source === VideoSource.YouTube) {
+        return { kind: 'image', url: `https://i.ytimg.com/vi/${encodeURIComponent(ref.id)}/hqdefault.jpg`, imageHosts: ['i.ytimg.com'] };
+    }
+    const page = `https://vimeo.com/${ref.id}${ref.hash ? `/${ref.hash}` : ''}`;
+    return { kind: 'oembed', url: `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(page)}&width=1280`, imageHosts: ['i.vimeocdn.com'] };
+}
+/** A stored poster's object name — one per video, so fetching it again overwrites rather than piles up. */
+function videoPosterFileName(ref) {
+    return `video-poster-${ref.source}-${ref.id}.jpg`;
+}
+/** A content value of a Video node, saved (`props`) or builder (`traits[].default`) shape. */
+function videoProp(node, name) {
+    if (!node)
+        return undefined;
+    if (node.props && Object.prototype.hasOwnProperty.call(node.props, name))
+        return node.props[name];
+    return node.traits?.find(t => t?.name === name)?.default;
+}
+const str = (v) => (typeof v === 'string' ? v.trim() : '');
+const truthy = (v) => v === true || v === 'true';
+/** The consent category an embed waits for — Marketing by default (D5); an uploaded file waits for none. */
+function videoConsentCategory(node, source = videoSourceOf(videoProp(node, VideoTrait.Src), videoProp(node, VideoTrait.Source))) {
+    if (source === VideoSource.File)
+        return null;
+    const declared = videoProp(node, VideoTrait.Consent);
+    return declared === ConsentCategory.Analytics ? ConsentCategory.Analytics : ConsentCategory.Marketing;
+}
+/**
+ * The ONE decision for a Video node and a visitor's consent (null = none recorded — the server always passes null,
+ * so its HTML is always the facade). A poster that is a provider's thumbnail URL is dropped: the poster is the
+ * studio's own image (or the thumbnail the server fetched and stored for it), never a request to a third party.
+ */
+function planVideo(node, consent) {
+    const rawSrc = str(videoProp(node, VideoTrait.Src));
+    const source = videoSourceOf(rawSrc, videoProp(node, VideoTrait.Source));
+    const ref = source === VideoSource.File ? null : parseVideoUrl(rawSrc);
+    const background = source === VideoSource.File && videoProp(node, VideoTrait.Mode) === VideoMode.Background;
+    const consentCategory = videoConsentCategory(node, source);
+    const granted = consentCategory ? hasConsent(consent, consentCategory) : true;
+    const kind = source === VideoSource.File ? (rawSrc ? VideoKind.File : VideoKind.Empty) : (ref ? VideoKind.Facade : VideoKind.Empty);
+    const poster = str(videoProp(node, VideoTrait.Poster));
+    return {
+        kind,
+        source,
+        ref,
+        src: source === VideoSource.File ? rawSrc : '',
+        poster: isThirdPartyPoster(poster) ? '' : poster,
+        title: str(videoProp(node, VideoTrait.Title)),
+        mode: background ? VideoMode.Background : VideoMode.Inline,
+        background,
+        autoplay: background || (source === VideoSource.File && truthy(videoProp(node, VideoTrait.Autoplay))),
+        muted: background || truthy(videoProp(node, VideoTrait.Autoplay)),
+        loop: background,
+        controls: !background,
+        captions: background ? '' : str(videoProp(node, VideoTrait.Captions)),
+        captionsLang: str(videoProp(node, VideoTrait.CaptionsLang)) || 'en',
+        consentCategory,
+        granted,
+        embedUrl: kind === VideoKind.Facade && granted && ref ? videoEmbedUrl(ref) : null,
+        providerLabel: ref ? VIDEO_PROVIDER_LABEL[ref.source] : '',
+    };
+}
+const THIRD_PARTY_POSTER_HOSTS = ['ytimg.com', 'youtube.com', 'vimeocdn.com', 'vimeo.com', 'googleusercontent.com'];
+/** A poster served by the video's provider — a request to a third party before consent, so it never renders. */
+function isThirdPartyPoster(url) {
+    const parsed = url ? toUrl(url) : null;
+    if (!parsed || !/^https?:$/.test(parsed.protocol))
+        return false;
+    const host = parsed.hostname.toLowerCase();
+    return THIRD_PARTY_POSTER_HOSTS.some(h => host === h || host.endsWith(`.${h}`));
+}
+const VIDEO_WORDS = {
+    en: {
+        play: (title, provider) => (provider ? `Play: ${title} (${provider})` : `Play: ${title}`),
+        playUntitled: provider => (provider ? `Play video (${provider})` : 'Play video'),
+        pauseBackground: 'Pause background video',
+        playBackground: 'Play background video',
+        promptLabel: 'This video needs your permission',
+        promptLead: provider => `This video is hosted by ${provider}.`,
+        promptBody: company => `Playing it lets ${company} set cookies and see your IP address. Nothing has loaded yet.`,
+        promptCompactLead: provider => `Plays from ${provider},`,
+        promptCompactBody: 'which sets cookies and sees your IP address. Nothing has loaded yet.',
+        allow: 'Allow and play',
+        settings: 'Privacy settings',
+    },
+    he: {
+        play: (title, provider) => (provider ? `הפעלה: ${title} (${provider})` : `הפעלה: ${title}`),
+        playUntitled: provider => (provider ? `הפעלת הסרטון (${provider})` : 'הפעלת הסרטון'),
+        pauseBackground: 'השהיית סרטון הרקע',
+        playBackground: 'הפעלת סרטון הרקע',
+        promptLabel: 'הסרטון הזה צריך את רשותך',
+        promptLead: provider => `הסרטון מתארח ב-${provider}.`,
+        promptBody: company => `ההפעלה מאפשרת ל-${company} להגדיר קובצי Cookie ולראות את כתובת ה-IP שלך. עדיין לא נטען דבר.`,
+        promptCompactLead: provider => `מתנגן מ-${provider},`,
+        promptCompactBody: 'שמגדיר קובצי Cookie ורואה את כתובת ה-IP שלך. עדיין לא נטען דבר.',
+        allow: 'לאשר ולהפעיל',
+        settings: 'הגדרות פרטיות',
+    },
+};
+/** The words for a page language (`he`, `he-IL` → Hebrew; anything else → English). */
+function videoWords(lang) {
+    return (lang ?? '').toLowerCase().startsWith('he') ? VIDEO_WORDS.he : VIDEO_WORDS.en;
+}
+/** The play button's accessible name. */
+function videoPlayLabel(plan, words = VIDEO_WORDS.en) {
+    return plan.title ? words.play(plan.title, plan.providerLabel) : words.playUntitled(plan.providerLabel);
+}
+// ── markup (one builder for both engine paths and the canvas) ────────────────────────────────────────
+var VideoClass;
+(function (VideoClass) {
+    VideoClass["Root"] = "iox-video";
+    VideoClass["Poster"] = "iox-video__poster";
+    VideoClass["Play"] = "iox-video__play";
+    VideoClass["Badge"] = "iox-video__badge";
+    VideoClass["Media"] = "iox-video__media";
+    VideoClass["Frame"] = "iox-video__frame";
+    VideoClass["Toggle"] = "iox-video__toggle";
+    VideoClass["Consent"] = "iox-video__consent";
+    VideoClass["ConsentText"] = "iox-video__consent-text";
+    /** The prompt's text on a wide player / on a narrow one (a container query shows one). */
+    VideoClass["ConsentWide"] = "iox-video__consent-wide";
+    VideoClass["ConsentCompact"] = "iox-video__consent-compact";
+    VideoClass["ConsentRow"] = "iox-video__consent-row";
+    VideoClass["Allow"] = "iox-video__allow";
+    VideoClass["Settings"] = "iox-video__settings";
+})(VideoClass || (VideoClass = {}));
+var VideoAttribute;
+(function (VideoAttribute) {
+    /** On the node element: its kind (`file` · `facade` · `empty`) — what the runtime attaches to. */
+    VideoAttribute["Root"] = "data-iox-video";
+    VideoAttribute["Source"] = "data-iox-video-source";
+    VideoAttribute["Id"] = "data-iox-video-id";
+    VideoAttribute["Hash"] = "data-iox-video-hash";
+    VideoAttribute["Mode"] = "data-iox-video-mode";
+    VideoAttribute["Autoplay"] = "data-iox-video-autoplay";
+    VideoAttribute["Consent"] = "data-iox-video-consent";
+    VideoAttribute["Title"] = "data-iox-video-title";
+    /** The poster is the token blank (no image): the shared CSS fills it with `surface-2`. */
+    VideoAttribute["PosterEmpty"] = "data-iox-video-poster-empty";
+    /** The player is loaded (after the click and the grant). */
+    VideoAttribute["Playing"] = "data-iox-video-playing";
+    /** The consent prompt is showing. */
+    VideoAttribute["Asking"] = "data-iox-video-asking";
+})(VideoAttribute || (VideoAttribute = {}));
+var VideoIcon;
+(function (VideoIcon) {
+    VideoIcon["Play"] = "ph-fill ph-play";
+    VideoIcon["Pause"] = "ph-fill ph-pause";
+})(VideoIcon || (VideoIcon = {}));
+/** The attributes the node's own element carries (both engine paths, the canvas). */
+function videoRootAttributes(plan) {
+    const attrs = { [VideoAttribute.Root]: plan.kind, [VideoAttribute.Source]: plan.source };
+    if (plan.ref) {
+        attrs[VideoAttribute.Id] = plan.ref.id;
+        if (plan.ref.hash)
+            attrs[VideoAttribute.Hash] = plan.ref.hash;
+    }
+    if (plan.background)
+        attrs[VideoAttribute.Mode] = VideoMode.Background;
+    if (plan.autoplay)
+        attrs[VideoAttribute.Autoplay] = '';
+    if (plan.consentCategory)
+        attrs[VideoAttribute.Consent] = plan.consentCategory;
+    if (plan.title)
+        attrs[VideoAttribute.Title] = plan.title;
+    if (!plan.poster)
+        attrs[VideoAttribute.PosterEmpty] = '';
+    return attrs;
+}
+const iconHtml = (cls) => `<i class="${cls}" aria-hidden="true"></i>`;
+/** The element's inner markup. The server's HTML for a facade holds no `<iframe>` and requests nothing from
+ *  the provider: only the studio's poster, the play button and the (hidden) consent prompt. */
+function videoInnerHtml(plan, options) {
+    const { esc } = options;
+    const words = options.words ?? VIDEO_WORDS.en;
+    const poster = plan.poster ? `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}" alt="" loading="lazy" decoding="async">` : '';
+    const label = esc(videoPlayLabel(plan, words));
+    const playSpan = `<span class="${VideoClass.Play}" aria-hidden="true">${iconHtml(VideoIcon.Play)}</span>`;
+    const badge = plan.providerLabel ? `<span class="${VideoClass.Badge}">${iconHtml(VideoIcon.Play)}${esc(plan.providerLabel)}</span>` : '';
+    if (options.canvas || plan.kind === VideoKind.Empty) {
+        return `${poster}${plan.kind === VideoKind.Empty && !options.canvas ? '' : playSpan}${badge}`;
+    }
+    if (plan.kind === VideoKind.File) {
+        const media = [
+            `<video class="${VideoClass.Media}" src="${esc(plan.src)}" preload="metadata" playsinline`,
+            plan.poster ? ` poster="${esc(plan.poster)}"` : '',
+            // A captions file is fetched with CORS (a <track> from another origin loads only so): the studio's bucket
+            // answers CORS for every object, the video included.
+            plan.captions ? ' crossorigin="anonymous"' : '',
+            plan.controls ? ' controls' : '',
+            plan.muted ? ' muted' : '',
+            plan.loop ? ' loop' : '',
+            plan.background ? ' aria-hidden="true" tabindex="-1"' : (plan.title ? ` aria-label="${esc(plan.title)}"` : ''),
+            '>',
+            plan.captions ? `<track kind="captions" src="${esc(plan.captions)}" srclang="${esc(plan.captionsLang)}" label="${esc(plan.captionsLang)}" default>` : '',
+            '</video>',
+        ].join('');
+        if (plan.background) {
+            // Rendered paused (the server cannot know the visitor's motion setting): the runtime starts it when motion
+            // is allowed and turns this into the PAUSE button. Always visible (WCAG 2.2.2).
+            return `${media}<button type="button" class="${VideoClass.Toggle}" aria-label="${esc(words.playBackground)}" aria-pressed="true">${iconHtml(VideoIcon.Play)}</button>`;
+        }
+        return `${media}<button type="button" class="${VideoClass.Play}" aria-label="${label}">${iconHtml(VideoIcon.Play)}</button>`;
+    }
+    const company = plan.ref ? VIDEO_PROVIDER_COMPANY[plan.ref.source] : '';
+    const prompt = `<div class="${VideoClass.Consent}" role="group" aria-label="${esc(words.promptLabel)}" hidden>` +
+        `<p class="${VideoClass.ConsentText} ${VideoClass.ConsentWide}"><b>${esc(words.promptLead(plan.providerLabel))}</b> ${esc(words.promptBody(company))}</p>` +
+        `<p class="${VideoClass.ConsentText} ${VideoClass.ConsentCompact}"><b>${esc(words.promptCompactLead(plan.providerLabel))}</b> ${esc(words.promptCompactBody)}</p>` +
+        `<div class="${VideoClass.ConsentRow}">` +
+        `<button type="button" class="${VideoClass.Allow}">${esc(words.allow)}</button>` +
+        `<button type="button" class="${VideoClass.Settings}">${esc(words.settings)}</button>` +
+        `</div></div>`;
+    return `${poster}<button type="button" class="${VideoClass.Play}" aria-label="${label}">${iconHtml(VideoIcon.Play)}</button>${badge}${prompt}`;
+}
+/** Serialise attributes for a string renderer (a present boolean attribute is written bare). */
+function serializeVideoAttributes(attrs, esc) {
+    return Object.entries(attrs).map(([name, value]) => (value === '' ? ` ${name}` : ` ${name}="${esc(value)}"`)).join('');
+}
+
+/**
+ * The Video's RUNTIME (CC3, board 5) — DOM only, ONE copy for both engine paths (the component path attaches it from
+ * its component, the string path from the page's interaction service; `attachVideoAt` is idempotent). It reads the
+ * markup `videoInnerHtml` writes. The builder canvas never attaches it (the canvas shows the poster only).
+ *
+ * - FACADE: play → the visitor's consent grants the category → the player's `<iframe>` replaces the poster, focused,
+ *   autoplaying (the visitor just pressed play). Not granted → the consent prompt: "Allow and play" grants the
+ *   category in the site's ONE consent record (the banner and its preferences read the same cookie) and plays;
+ *   "Privacy settings" opens the site's own preferences dialog.
+ * - FILE: the play button starts the `<video>`; muted autoplay only when motion is allowed.
+ * - BACKGROUND: muted and looped; it plays only when motion is allowed (never under reduced motion), and its
+ *   pause button is always there (WCAG 2.2.2).
+ */
+/** Ask the page to record a category the visitor granted (cancelable: the site's consent service handles it). */
+const CONSENT_GRANT_EVENT = 'iox-consent-grant';
+/** Ask the page to open its consent preferences (cancelable: handled = a dialog opened). */
+const CONSENT_PREFERENCES_EVENT = 'iox-consent-preferences';
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+const RUNTIME_KEY = '__ioxVideo';
+const IFRAME_ALLOW = 'autoplay; encrypted-media; picture-in-picture; fullscreen';
+/** The cookie the consent record lives in, read from a document. */
+function readConsentRecord(doc) {
+    const raw = (doc.cookie ?? '').split('; ').find(c => c.startsWith(`${CONSENT_COOKIE_NAME}=`));
+    return decode(raw ? decodeURIComponent(raw.slice(CONSENT_COOKIE_NAME.length + 1)) : null);
+}
+/**
+ * The default transport: the page's own consent service answers the events (the engine records the decision, tells
+ * Consent Mode, re-syncs the banner's switches); a page with no such service (the admin's Preview) records the cookie
+ * itself, through the same consent-core decision, so the record is the same shape either way.
+ */
+function documentConsentTransport(doc) {
+    return {
+        read: () => readConsentRecord(doc),
+        grant: category => {
+            const event = new CustomEvent(CONSENT_GRANT_EVENT, { detail: { category }, cancelable: true });
+            doc.dispatchEvent(event);
+            if (event.defaultPrevented)
+                return;
+            const previous = readConsentRecord(doc);
+            const anonymousId = previous?.anonymousId ?? randomId();
+            const decision = setCategoryDecision(previous, category, true, anonymousId, previous?.policyVersion ?? '1');
+            const secure = doc.location?.protocol === 'https:';
+            doc.cookie = `${CONSENT_COOKIE_NAME}=${encodeURIComponent(encode(decision))}; ${cookieAttributes(12, secure)}`;
+        },
+        openPreferences: () => {
+            const event = new CustomEvent(CONSENT_PREFERENCES_EVENT, { cancelable: true });
+            doc.dispatchEvent(event);
+            return event.defaultPrevented;
+        },
+    };
+}
+function randomId() {
+    const c = globalThis.crypto;
+    return c?.randomUUID ? c.randomUUID() : Math.random().toString(36).slice(2);
+}
+/** The embed a facade root names (its provider, id and hash attributes). */
+function videoRefOf(root) {
+    const source = root.getAttribute(VideoAttribute.Source);
+    const id = root.getAttribute(VideoAttribute.Id);
+    if ((source !== VideoSource.YouTube && source !== VideoSource.Vimeo) || !id)
+        return null;
+    const hash = root.getAttribute(VideoAttribute.Hash);
+    return { source, id, ...(hash ? { hash } : {}) };
+}
+class VideoRuntime {
+    constructor(root, options = {}) {
+        this.root = root;
+        this.cleanups = [];
+        this.doc = root.ownerDocument;
+        this.consent = options.consent ?? documentConsentTransport(this.doc);
+        const view = this.doc.defaultView;
+        this.reduced = options.reducedMotion ?? (() => !!view?.matchMedia?.(REDUCED_MOTION)?.matches);
+        this.words = options.words ?? videoWords(this.doc.documentElement?.getAttribute('lang'));
+        const kind = root.getAttribute(VideoAttribute.Root);
+        if (kind === VideoKind.Facade)
+            this.attachFacade();
+        else if (kind === VideoKind.File)
+            this.attachFile();
+    }
+    destroy() {
+        this.cleanups.splice(0).forEach(fn => fn());
+        delete this.root[RUNTIME_KEY];
+    }
+    /** The category a facade waits for (Marketing unless the node named another). */
+    get category() {
+        const declared = this.root.getAttribute(VideoAttribute.Consent);
+        return declared === ConsentCategory.Analytics ? ConsentCategory.Analytics : ConsentCategory.Marketing;
+    }
+    on(el, type, fn) {
+        if (!el)
+            return;
+        el.addEventListener(type, fn);
+        this.cleanups.push(() => el.removeEventListener(type, fn));
+    }
+    // ── facade ────────────────────────────────────────────────────────────────────────────────────
+    attachFacade() {
+        const play = this.root.querySelector(`button.${VideoClass.Play}`);
+        const allow = this.root.querySelector(`.${VideoClass.Allow}`);
+        const settings = this.root.querySelector(`.${VideoClass.Settings}`);
+        this.on(play, 'click', () => this.requestPlay());
+        this.on(allow, 'click', () => {
+            this.consent.grant(this.category);
+            this.loadPlayer();
+        });
+        this.on(settings, 'click', () => { this.consent.openPreferences(); });
+    }
+    /** Play pressed: the player when the category is granted, else the consent prompt. */
+    requestPlay() {
+        if (hasConsent(this.consent.read(), this.category)) {
+            this.loadPlayer();
+            return;
+        }
+        const prompt = this.root.querySelector(`.${VideoClass.Consent}`);
+        if (!prompt)
+            return;
+        prompt.hidden = false;
+        this.root.setAttribute(VideoAttribute.Asking, '');
+        const play = this.root.querySelector(`button.${VideoClass.Play}`);
+        if (play)
+            play.hidden = true;
+        this.root.querySelector(`.${VideoClass.Allow}`)?.focus();
+    }
+    /** The player — created only now, after the click and the grant. */
+    loadPlayer() {
+        const ref = videoRefOf(this.root);
+        if (!ref || this.root.hasAttribute(VideoAttribute.Playing))
+            return;
+        const frame = this.doc.createElement('iframe');
+        frame.className = VideoClass.Frame;
+        frame.src = videoEmbedUrl(ref);
+        frame.title = this.root.getAttribute(VideoAttribute.Title) || this.words.playUntitled(VIDEO_PROVIDER_LABEL[ref.source]);
+        frame.setAttribute('allow', IFRAME_ALLOW);
+        frame.setAttribute('allowfullscreen', '');
+        frame.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
+        this.root.replaceChildren(frame);
+        this.root.removeAttribute(VideoAttribute.Asking);
+        this.root.setAttribute(VideoAttribute.Playing, '');
+        frame.focus();
+    }
+    // ── uploaded file ─────────────────────────────────────────────────────────────────────────────
+    attachFile() {
+        const video = this.root.querySelector(`video.${VideoClass.Media}`);
+        if (!video)
+            return;
+        if (this.root.getAttribute(VideoAttribute.Mode) === VideoMode.Background) {
+            this.attachBackground(video);
+            return;
+        }
+        const play = this.root.querySelector(`button.${VideoClass.Play}`);
+        const hidePlay = () => { if (play)
+            play.hidden = true; };
+        this.on(play, 'click', () => { hidePlay(); void video.play()?.catch?.(() => undefined); video.focus(); });
+        this.on(video, 'play', hidePlay);
+        // Autoplay (muted) only while motion is allowed — never under reduced motion.
+        if (this.root.hasAttribute(VideoAttribute.Autoplay) && !this.reduced()) {
+            video.muted = true;
+            void video.play()?.catch?.(() => undefined);
+        }
+    }
+    attachBackground(video) {
+        const toggle = this.root.querySelector(`.${VideoClass.Toggle}`);
+        video.muted = true;
+        const sync = () => {
+            const paused = video.paused;
+            if (!toggle)
+                return;
+            toggle.setAttribute('aria-pressed', paused ? 'true' : 'false');
+            toggle.setAttribute('aria-label', paused ? this.words.playBackground : this.words.pauseBackground);
+            const icon = toggle.querySelector('i');
+            if (icon)
+                icon.className = paused ? VideoIcon.Play : VideoIcon.Pause;
+        };
+        this.on(video, 'play', sync);
+        this.on(video, 'pause', sync);
+        this.on(toggle, 'click', () => {
+            if (video.paused)
+                void video.play()?.catch?.(() => undefined);
+            else
+                video.pause();
+            sync();
+        });
+        // It moves only when motion is allowed; under reduced motion it rests on its poster, paused.
+        if (!this.reduced())
+            void video.play()?.catch?.(() => sync());
+        sync();
+    }
+}
+/** Run the video at `el` (a `[data-iox-video]` element) once; null when it is not one or already runs. */
+function attachVideoAt(el, options = {}) {
+    if (!el?.hasAttribute?.(VideoAttribute.Root))
+        return null;
+    const host = el;
+    if (host[RUNTIME_KEY])
+        return null;
+    const runtime = new VideoRuntime(el, options);
+    host[RUNTIME_KEY] = runtime;
+    return runtime;
+}
+/** Every video under `container` that is not running yet (the string path's globals and pages). */
+function attachVideos(container, options = {}) {
+    return Array.from(container.querySelectorAll(`[${VideoAttribute.Root}]`))
+        .map(el => attachVideoAt(el, options))
+        .filter((r) => !!r);
+}
+/** The runtime already running at `el`, if any. */
+function videoRuntimeOf(el) {
+    return el?.[RUNTIME_KEY] ?? null;
+}
+
+/**
+ * @vectoriox/iox-ui/media-core — media decisions shared by the builder, both engine paths and iox-cms (CC3).
+ * FRAMEWORK-FREE: `planVideo` is the one place that knows a YouTube / Vimeo address, the player's host and the consent
+ * category a facade waits for; the runtime is DOM-only. iox-cms reads `parseVideoUrl` / `videoThumbnailRequest` to
+ * fetch and store an embed's poster (the visitor never asks the provider for it).
+ * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CONSENT_GRANT_EVENT, CONSENT_PREFERENCES_EVENT, VIDEO_EMBED_ORIGINS, VIDEO_NODE_TYPE, VIDEO_PROVIDER_COMPANY, VIDEO_PROVIDER_LABEL, VIDEO_WORDS, VideoAttribute, VideoClass, VideoIcon, VideoKind, VideoMode, VideoRuntime, VideoSource, VideoTrait, attachVideoAt, attachVideos, documentConsentTransport, isThirdPartyPoster, parseVideoUrl, planVideo, readConsentRecord, serializeVideoAttributes, videoConsentCategory, videoEmbedUrl, videoInnerHtml, videoPlayLabel, videoPosterFileName, videoProp, videoRefOf, videoRootAttributes, videoRuntimeOf, videoSourceOf, videoThumbnailRequest, videoWords };
+//# sourceMappingURL=vectoriox-iox-ui-media-core.mjs.map