highsoft-ui 1.0.165 → 1.0.166

package/CLAUDE.md

@@ -563,14 +563,14 @@ Sutro-inspired media player with a brand-accent scrubber, floating volume, auto-
   transcript={<HistoryTranscript />}
 />
 ```
-- **`src`** (or **`sources`**): self-hosted URL, or a YouTube/Vimeo link (auto-detected)
+- **`src`** (or **`sources`**): self-hosted URL, or a YouTube/Vimeo link (auto-detected). Privacy-enhanced `youtube-nocookie.com` URLs (what the Highcharts docs use for GDPR) are detected as YouTube and the embed keeps the nocookie host rather than downgrading to `youtube.com`.
 - **`poster`, `muted`, `autoPlay`, `loop`, `playsInline`, `preload`**: standard video props (`autoPlay` needs `muted`)
 - **`aspectRatio`** (default `'16 / 9'`), **`radius`** (default `16`)
 - **`accentGradient`**: scrubber/volume fill — defaults to the brand color; accepts any CSS color or gradient
 - **`tracks`**: WebVTT text tracks (`{ src, srclang, label, kind?, default? }`) for self-hosted video. Adds a CC toggle that cycles `captions`/`subtitles` tracks; `descriptions` tracks are loaded for assistive tech but skipped by the toggle. Ignored for YouTube/Vimeo — provider embeds render their own captions.
 - **`transcript`** (+ **`transcriptTitle`**, default `'Transcript'`): any React content, docked as a panel below the player and toggled from the control bar
 - Keyboard: space/`k` play, `f` fullscreen, `m` mute, `c` captions, `t` transcript, arrows seek; forwards a ref to the underlying `<video>`
-- **Accessibility:** labelled `role="region"` (with an `sr-only` name); scrubber + volume are `role="slider"` with `aria-valuemin/max/now/valuetext`; mute exposes `aria-pressed`; decorative layers are `aria-hidden`; controls respect `prefers-reduced-motion`.
+- **Accessibility:** labelled `role="region"` (with an `sr-only` name); scrubber + volume are `role="slider"` with `aria-valuemin/max/now/valuetext`; mute exposes `aria-pressed`; decorative layers are `aria-hidden`; controls respect `prefers-reduced-motion`. A nocookie source gets the same custom control bar as any YouTube source, so keyboard shortcuts, ARIA and focus handling are unchanged; only the embed host differs.
   - Captions satisfy WCAG 1.2.2 and the transcript 1.2.3 / 1.2.8. The CC button exposes `aria-pressed` and the transcript button `aria-expanded` + `aria-controls`; the panel is a labelled `role="region"`. Active toggles are marked by *both* a background wash and an accent-tinted glyph, so the state never rests on color alone.
   - **Cue styling is deliberately left to the browser.** Users' OS/browser caption preferences (macOS Accessibility → Captions, `chrome://settings/captions`) are user-origin styles that beat author CSS at any priority — authoring a cue background/box either doubles up with or fights that layer. Only `font-family`/`line-height` are set. Cue *position* is ours: the overlay animates up while the chrome is visible and back down when it idles (WebKit/Blink via the text-track container pseudo, Firefox via `VTTCue.line`).
   - The collapsed transcript panel is `inert`, so it stays out of the tab order and the AT tree; its reveal animates on the motion tokens and collapses to an instant toggle under `prefers-reduced-motion`.

package/dist/components/VideoPlayer/useMediaEngine.js

@@ -2,40 +2,43 @@ import { useCallback as e, useEffect as t, useRef as n, useState as r } from "re
 //#region lib/components/VideoPlayer/useMediaEngine.ts
 var i = (e) => Math.max(0, Math.min(1, e));
 function a(e, t) {
-	return !e || t ? "file" : /(?:youtube\.com|youtu\.be)/i.test(e) ? "youtube" : /vimeo\.com/i.test(e) ? "vimeo" : "file";
+	return !e || t ? "file" : /(?:youtube(?:-nocookie)?\.com|youtu\.be)/i.test(e) ? "youtube" : /vimeo\.com/i.test(e) ? "vimeo" : "file";
 }
 function o(e) {
+	return e && /youtube-nocookie\.com/i.test(e) ? "https://www.youtube-nocookie.com" : void 0;
+}
+function s(e) {
 	let t = e.match(/(?:youtu\.be\/|[?&]v=|\/embed\/|\/shorts\/)([\w-]{11})/);
 	return t ? t[1] : e;
 }
-function s(e) {
+function c(e) {
 	let t = e.match(/vimeo\.com\/(?:video\/)?(\d+)/);
 	return t ? t[1] : e;
 }
-function c(e, t) {
-	if (e === "youtube" && t) return `https://i.ytimg.com/vi/${o(t)}/hqdefault.jpg`;
+function l(e, t) {
+	if (e === "youtube" && t) return `https://i.ytimg.com/vi/${s(t)}/hqdefault.jpg`;
 }
-var l = null;
-function u() {
+var u = null;
+function d() {
 	let e = window;
-	return e.YT?.Player ? Promise.resolve(e.YT) : l || (l = new Promise((t) => {
+	return e.YT?.Player ? Promise.resolve(e.YT) : u || (u = new Promise((t) => {
 		let n = e.onYouTubeIframeAPIReady;
 		e.onYouTubeIframeAPIReady = () => {
 			n?.(), t(e.YT);
 		};
 		let r = document.createElement("script");
 		r.src = "https://www.youtube.com/iframe_api", document.head.appendChild(r);
-	}), l);
+	}), u);
 }
-var d = null;
-function f() {
+var f = null;
+function p() {
 	let e = window;
-	return e.Vimeo?.Player ? Promise.resolve(e.Vimeo) : d || (d = new Promise((e, t) => {
+	return e.Vimeo?.Player ? Promise.resolve(e.Vimeo) : f || (f = new Promise((e, t) => {
 		let n = document.createElement("script");
 		n.src = "https://player.vimeo.com/api/player.js", n.onload = () => e(window.Vimeo), n.onerror = t, document.head.appendChild(n);
-	}), d);
+	}), f);
 }
-var p = (e) => ({
+var m = (e) => ({
 	ready: !1,
 	playing: !1,
 	ended: !1,
@@ -45,34 +48,34 @@ var p = (e) => ({
 	volume: +!e,
 	muted: e
 });
-function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
-	let [h, g] = r(() => p(l)), _ = n(1), v = e((e) => {
-		e.volume != null && e.volume > 0 && (_.current = e.volume), g((t) => ({
+function h({ provider: a, src: l, muted: u, autoPlay: f, loop: h }) {
+	let [g, _] = r(() => m(u)), v = n(1), y = e((e) => {
+		e.volume != null && e.volume > 0 && (v.current = e.volume), _((t) => ({
 			...t,
 			...e
 		}));
-	}, []), y = n(h);
-	y.current = h;
-	let b = n({
-		muted: l,
-		autoPlay: d,
-		loop: m
+	}, []), b = n(g);
+	b.current = g;
+	let x = n({
+		muted: u,
+		autoPlay: f,
+		loop: h
 	});
-	b.current = {
-		muted: l,
-		autoPlay: d,
-		loop: m
+	x.current = {
+		muted: u,
+		autoPlay: f,
+		loop: h
 	};
-	let x = n(!1), S = n(null), C = n(null), w = n(null), T = e((e) => {
-		C.current = e;
-	}, []), E = e((e) => {
+	let S = n(!1), C = n(null), w = n(null), T = n(null), E = e((e) => {
 		w.current = e;
+	}, []), D = e((e) => {
+		T.current = e;
 	}, []);
 	return t(() => {
 		if (a !== "file") return;
-		let e = C.current;
+		let e = w.current;
 		if (!e) return;
-		S.current = {
+		C.current = {
 			play: () => void e.play().catch(() => {}),
 			pause: () => e.pause(),
 			seek: (t) => {
@@ -85,41 +88,42 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 				e.muted = t, !t && e.volume === 0 && (e.volume = 1);
 			}
 		};
-		let t = () => v({
+		let t = () => y({
 			playing: !0,
 			ended: !1
-		}), n = () => v({ playing: !1 }), r = () => v({
+		}), n = () => y({ playing: !1 }), r = () => y({
 			playing: !1,
 			ended: !0
 		}), o = () => {
 			let t = e.buffered;
-			v({
-				...x.current ? {} : { currentTime: e.currentTime },
+			y({
+				...S.current ? {} : { currentTime: e.currentTime },
 				buffered: t.length && e.duration ? i(t.end(t.length - 1) / e.duration) : 0
 			});
-		}, s = () => v({ duration: Number.isFinite(e.duration) ? e.duration : 0 }), c = () => v({
+		}, s = () => y({ duration: Number.isFinite(e.duration) ? e.duration : 0 }), c = () => y({
 			volume: e.muted ? 0 : e.volume,
 			muted: e.muted || e.volume === 0
 		});
-		return e.addEventListener("play", t), e.addEventListener("pause", n), e.addEventListener("ended", r), e.addEventListener("timeupdate", o), e.addEventListener("progress", o), e.addEventListener("durationchange", s), e.addEventListener("loadedmetadata", s), e.addEventListener("volumechange", c), v({
+		return e.addEventListener("play", t), e.addEventListener("pause", n), e.addEventListener("ended", r), e.addEventListener("timeupdate", o), e.addEventListener("progress", o), e.addEventListener("durationchange", s), e.addEventListener("loadedmetadata", s), e.addEventListener("volumechange", c), y({
 			ready: !0,
 			muted: e.muted,
 			volume: e.muted ? 0 : e.volume
 		}), () => {
-			e.removeEventListener("play", t), e.removeEventListener("pause", n), e.removeEventListener("ended", r), e.removeEventListener("timeupdate", o), e.removeEventListener("progress", o), e.removeEventListener("durationchange", s), e.removeEventListener("loadedmetadata", s), e.removeEventListener("volumechange", c), S.current = null;
+			e.removeEventListener("play", t), e.removeEventListener("pause", n), e.removeEventListener("ended", r), e.removeEventListener("timeupdate", o), e.removeEventListener("progress", o), e.removeEventListener("durationchange", s), e.removeEventListener("loadedmetadata", s), e.removeEventListener("volumechange", c), C.current = null;
 		};
-	}, [a, v]), t(() => {
-		if (a !== "youtube" || !c) return;
-		let e = w.current;
+	}, [a, y]), t(() => {
+		if (a !== "youtube" || !l) return;
+		let e = T.current;
 		if (!e) return;
-		let t = null, n, r = !1, { muted: i, autoPlay: s, loop: l } = b.current, d = o(c);
-		return u().then((a) => {
+		let t = null, n, r = !1, { muted: i, autoPlay: c, loop: u } = x.current, f = s(l), p = o(l);
+		return d().then((a) => {
 			if (r) return;
 			let o = document.createElement("div");
 			e.appendChild(o), t = new a.Player(o, {
-				videoId: d,
+				videoId: f,
 				width: "100%",
 				height: "100%",
+				...p ? { host: p } : {},
 				playerVars: {
 					controls: 0,
 					modestbranding: 1,
@@ -127,15 +131,15 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 					playsinline: 1,
 					iv_load_policy: 3,
 					fs: 0,
-					autoplay: +!!s,
+					autoplay: +!!c,
 					mute: +!!i,
-					loop: +!!l,
-					...l ? { playlist: d } : {}
+					loop: +!!u,
+					...u ? { playlist: f } : {}
 				},
 				events: {
 					onReady: (e) => {
 						let r = e.target;
-						i && r.mute(), S.current = {
+						i && r.mute(), C.current = {
 							play: () => r.playVideo(),
 							pause: () => r.pauseVideo(),
 							seek: (e) => r.seekTo(e, !0),
@@ -143,14 +147,14 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 								e === 0 ? r.mute() : (r.unMute(), r.setVolume(e * 100));
 							},
 							setMuted: (e) => e ? r.mute() : r.unMute()
-						}, v({
+						}, y({
 							ready: !0,
 							duration: r.getDuration() || 0,
 							muted: r.isMuted(),
 							volume: r.isMuted() ? 0 : r.getVolume() / 100
 						}), n = window.setInterval(() => {
-							t && v({
-								...x.current ? {} : { currentTime: t.getCurrentTime() || 0 },
+							t && y({
+								...S.current ? {} : { currentTime: t.getCurrentTime() || 0 },
 								duration: t.getDuration() || 0,
 								buffered: t.getVideoLoadedFraction() || 0,
 								muted: t.isMuted(),
@@ -159,10 +163,10 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 						}, 250);
 					},
 					onStateChange: (e) => {
-						e.data === 1 ? v({
+						e.data === 1 ? y({
 							playing: !0,
 							ended: !1
-						}) : e.data === 2 ? v({ playing: !1 }) : e.data === 0 && v({
+						}) : e.data === 2 ? y({ playing: !1 }) : e.data === 0 && y({
 							playing: !1,
 							ended: !0
 						});
@@ -170,7 +174,7 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 				}
 			});
 		}), () => {
-			r = !0, window.clearInterval(n), S.current = null;
+			r = !0, window.clearInterval(n), C.current = null;
 			try {
 				t?.destroy();
 			} catch {}
@@ -178,27 +182,27 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 		};
 	}, [
 		a,
-		c,
-		v
+		l,
+		y
 	]), t(() => {
-		if (a !== "vimeo" || !c) return;
-		let e = w.current;
+		if (a !== "vimeo" || !l) return;
+		let e = T.current;
 		if (!e) return;
-		let t = null, n = !1, { muted: r, autoPlay: o, loop: l } = b.current;
-		return f().then((a) => {
+		let t = null, n = !1, { muted: r, autoPlay: o, loop: s } = x.current;
+		return p().then((a) => {
 			if (n) return;
 			t = new a.Player(e, {
-				id: s(c),
+				id: c(l),
 				controls: !1,
 				autoplay: o,
 				muted: r,
-				loop: l,
+				loop: s,
 				playsinline: !0,
 				responsive: !1,
 				width: e.clientWidth || void 0
 			});
 			let u = t;
-			S.current = {
+			C.current = {
 				play: () => void u.play().catch(() => {}),
 				pause: () => void u.pause().catch(() => {}),
 				seek: (e) => void u.setCurrentTime(e).catch(() => {}),
@@ -207,29 +211,29 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 				},
 				setMuted: (e) => void u.setMuted(e)
 			}, u.ready().then(async () => {
-				v({
+				y({
 					ready: !0,
 					duration: await u.getDuration().catch(() => 0),
 					muted: r,
 					volume: +!r
 				});
-			}), u.on("play", () => v({
+			}), u.on("play", () => y({
 				playing: !0,
 				ended: !1
-			})), u.on("pause", () => v({ playing: !1 })), u.on("ended", () => v({
+			})), u.on("pause", () => y({ playing: !1 })), u.on("ended", () => y({
 				playing: !1,
 				ended: !0
 			})), u.on("timeupdate", (e) => {
-				v({
-					...x.current ? {} : { currentTime: e.seconds },
+				y({
+					...S.current ? {} : { currentTime: e.seconds },
 					duration: e.duration
 				});
-			}), u.on("progress", (e) => v({ buffered: i(e.percent) })), u.on("volumechange", (e) => v({
+			}), u.on("progress", (e) => y({ buffered: i(e.percent) })), u.on("volumechange", (e) => y({
 				volume: e.volume,
 				muted: e.volume === 0
 			}));
 		}), () => {
-			n = !0, S.current = null;
+			n = !0, C.current = null;
 			try {
 				t?.destroy();
 			} catch {}
@@ -237,42 +241,42 @@ function m({ provider: a, src: c, muted: l, autoPlay: d, loop: m }) {
 		};
 	}, [
 		a,
-		c,
-		v
+		l,
+		y
 	]), {
-		state: h,
-		videoRef: T,
-		mountRef: E,
+		state: g,
+		videoRef: E,
+		mountRef: D,
 		toggle: e(() => {
-			y.current.playing ? S.current?.pause() : S.current?.play();
+			b.current.playing ? C.current?.pause() : C.current?.play();
 		}, []),
 		seekFraction: e((e) => {
-			let t = y.current.duration;
+			let t = b.current.duration;
 			if (!t) return;
 			let n = i(e) * t;
-			v({ currentTime: n }), S.current?.seek(n);
-		}, [v]),
+			y({ currentTime: n }), C.current?.seek(n);
+		}, [y]),
 		seekBy: e((e) => {
-			let { currentTime: t, duration: n } = y.current;
+			let { currentTime: t, duration: n } = b.current;
 			if (!n) return;
 			let r = Math.max(0, Math.min(n, t + e));
-			v({ currentTime: r }), S.current?.seek(r);
-		}, [v]),
+			y({ currentTime: r }), C.current?.seek(r);
+		}, [y]),
 		setVolume: e((e) => {
 			let t = i(e);
-			t > 0 && (_.current = t), S.current?.setVolume(t);
+			t > 0 && (v.current = t), C.current?.setVolume(t);
 		}, []),
 		toggleMute: e(() => {
-			let e = y.current, t = e.muted || e.volume === 0;
-			t && e.volume === 0 && S.current?.setVolume(_.current), S.current?.setMuted(!t);
+			let e = b.current, t = e.muted || e.volume === 0;
+			t && e.volume === 0 && C.current?.setVolume(v.current), C.current?.setMuted(!t);
 		}, []),
 		beginSeek: e(() => {
-			x.current = !0;
+			S.current = !0;
 		}, []),
 		endSeek: e(() => {
-			x.current = !1;
+			S.current = !1;
 		}, [])
 	};
 }
 //#endregion
-export { a as detectProvider, c as providerPosterUrl, m as useMediaEngine };
+export { a as detectProvider, l as providerPosterUrl, h as useMediaEngine, o as youtubeEmbedHost };

package/dist/lib/components/VideoPlayer/useMediaEngine.d.ts

@@ -13,6 +13,12 @@ export interface MediaState {
     muted: boolean;
 }
 export declare function detectProvider(src?: string, hasSources?: boolean): MediaProvider;
+/**
+ * Sources served from youtube-nocookie.com opted into YouTube's
+ * privacy-enhanced mode; keep that domain for the embed rather than
+ * downgrading to youtube.com.
+ */
+export declare function youtubeEmbedHost(src?: string): string | undefined;
 /**
  * An unbranded still frame for a provider's start screen, used to mask the
  * embed's own (branded) poster before playback begins. YouTube exposes a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "highsoft-ui",
-  "version": "1.0.165",
+  "version": "1.0.166",
   "description": "Highsoft UI",
   "type": "module",
   "repository": {