vidply 1.2.0 → 1.2.3

package/src/utils/TrackLabelUtils.ts

@@ -1,52 +1,52 @@
-import { i18n } from '../i18n/i18n.js';
-
-/**
- * Derive a human-readable label for a TextTrack when the source manifest
- * (DASH AdaptationSet, HLS rendition, etc.) didn't provide one. dash.js
- * falls back to the AdaptationSet @id (typically a digit like "2", "3")
- * when no <Label> child element is present, which surfaces as cryptic
- * "2"/"3" entries in the captions menu.
- *
- * dash.js 5.x additionally derives the label as `element.id ?? element.lang`.
- * When neither is present in the MPD, the value is JS `null`, and the
- * browser's TextTrack API stringifies it to the literal "null". We treat
- * "null"/"undefined" (any casing) as placeholders too, and fall back to a
- * localized language name via Intl.DisplayNames.
- */
-export function deriveTrackLabel(
-    rawLabel: string | null | undefined,
-    language: string | null | undefined,
-    fallbackKey = 'player.captions'
-): string {
-    const cleanLabel = (rawLabel ?? '').trim();
-    const cleanLang = (language ?? '').trim();
-
-    const looksLikePlaceholder =
-        cleanLabel === '' ||
-        /^\d+$/.test(cleanLabel) ||
-        /^(null|undefined)$/i.test(cleanLabel);
-    if (!looksLikePlaceholder) {
-        return cleanLabel;
-    }
-
-    const cleanLangIsUsable =
-        cleanLang !== '' && !/^(null|undefined)$/i.test(cleanLang);
-
-    if (cleanLangIsUsable) {
-        try {
-            // Use endonyms: each language shown in its own name
-            // ("English", "Deutsch") rather than translated into the UI
-            // language ("Englisch", "Deutsch").
-            const displayNames = new Intl.DisplayNames([cleanLang, 'en'], { type: 'language' });
-            const name = displayNames.of(cleanLang);
-            if (name && name.toLowerCase() !== cleanLang.toLowerCase()) {
-                return name;
-            }
-        } catch {
-            // Intl.DisplayNames may be unavailable — fall through to the code.
-        }
-        return cleanLang.toUpperCase();
-    }
-
-    return i18n.t(fallbackKey);
-}
+import { i18n } from '../i18n/i18n.js';
+
+/**
+ * Derive a human-readable label for a TextTrack when the source manifest
+ * (DASH AdaptationSet, HLS rendition, etc.) didn't provide one. dash.js
+ * falls back to the AdaptationSet @id (typically a digit like "2", "3")
+ * when no <Label> child element is present, which surfaces as cryptic
+ * "2"/"3" entries in the captions menu.
+ *
+ * dash.js 5.x additionally derives the label as `element.id ?? element.lang`.
+ * When neither is present in the MPD, the value is JS `null`, and the
+ * browser's TextTrack API stringifies it to the literal "null". We treat
+ * "null"/"undefined" (any casing) as placeholders too, and fall back to a
+ * localized language name via Intl.DisplayNames.
+ */
+export function deriveTrackLabel(
+    rawLabel: string | null | undefined,
+    language: string | null | undefined,
+    fallbackKey = 'player.captions'
+): string {
+    const cleanLabel = (rawLabel ?? '').trim();
+    const cleanLang = (language ?? '').trim();
+
+    const looksLikePlaceholder =
+        cleanLabel === '' ||
+        /^\d+$/.test(cleanLabel) ||
+        /^(null|undefined)$/i.test(cleanLabel);
+    if (!looksLikePlaceholder) {
+        return cleanLabel;
+    }
+
+    const cleanLangIsUsable =
+        cleanLang !== '' && !/^(null|undefined)$/i.test(cleanLang);
+
+    if (cleanLangIsUsable) {
+        try {
+            // Use endonyms: each language shown in its own name
+            // ("English", "Deutsch") rather than translated into the UI
+            // language ("Englisch", "Deutsch").
+            const displayNames = new Intl.DisplayNames([cleanLang, 'en'], { type: 'language' });
+            const name = displayNames.of(cleanLang);
+            if (name && name.toLowerCase() !== cleanLang.toLowerCase()) {
+                return name;
+            }
+        } catch {
+            // Intl.DisplayNames may be unavailable — fall through to the code.
+        }
+        return cleanLang.toUpperCase();
+    }
+
+    return i18n.t(fallbackKey);
+}

package/src/utils/UrlSafe.ts

@@ -1,69 +1,69 @@
-/**
- * URL sanitisation helpers for values that flow into `<video>.poster`
- * attributes or CSS `url(...)` declarations.
- *
- * Both helpers used to live as file-local functions inside `Player.ts`,
- * which meant `PlaylistManager` interpolated raw `track.poster` values
- * into `backgroundImage` without any validation. They now live here so
- * every consumer of untrusted poster/artwork URLs can share the same
- * allow-list + CSS escape.
- */
-
-/**
- * Validate a poster/artwork URL before interpolating it into a CSS
- * `url(...)` value or assigning it to `<video>.poster`. Allows `https:`,
- * `http:`, `data:image/<png|jpeg|webp|gif|svg+xml>;...`, root-relative
- * paths starting with `/`, and same-origin relative paths.
- *
- * Returns `null` for anything suspicious — callers must check for null
- * and fall back to a safe default (e.g. skip setting `backgroundImage`).
- */
-export function sanitizePosterUrl(input: unknown): string | null {
-  if (typeof input !== 'string' || input.length === 0 || input.length > 4096) {
-    return null;
-  }
-  const trimmed = input.trim();
-  if (!trimmed) return null;
-  // Whitespace, quotes, angle brackets and backslashes would let a
-  // crafted value break out of a CSS declaration or HTML attribute.
-  if (/[\s"'<>\\]/.test(trimmed)) return null;
-
-  if (trimmed.startsWith('/') || trimmed.startsWith('./') || trimmed.startsWith('../')) {
-    return trimmed;
-  }
-  try {
-    const url = new URL(trimmed, typeof window !== 'undefined' ? window.location.href : 'http://localhost/');
-    if (url.protocol === 'https:' || url.protocol === 'http:') {
-      return url.href;
-    }
-    if (url.protocol === 'data:' && /^data:image\/(png|jpeg|jpg|webp|gif|svg\+xml);/i.test(trimmed)) {
-      return trimmed;
-    }
-  } catch {
-    return null;
-  }
-  return null;
-}
-
-/**
- * CSS-escape an already-validated URL for safe interpolation into a
- * `url(...)` value. Defense in depth alongside {@link sanitizePosterUrl}:
- * even if the URL slipped through, the CSS parser cannot leave the
- * `url()` context because `"`, `(`, `)` and `\` are all escaped.
- */
-export function cssEscapeUrl(url: string): string {
-  return url.replace(/["()\\]/g, (m) => `\\${m}`);
-}
-
-/**
- * Convenience wrapper: given an unknown input, return a CSS
- * `url("escaped-safe-url")` string ready to assign to
- * `element.style.backgroundImage`, or `null` if the input is unsafe
- * (so the caller can leave the current background untouched instead
- * of clearing it).
- */
-export function toCssBackgroundImage(input: unknown): string | null {
-  const safe = sanitizePosterUrl(input);
-  if (!safe) return null;
-  return `url("${cssEscapeUrl(safe)}")`;
-}
+/**
+ * URL sanitisation helpers for values that flow into `<video>.poster`
+ * attributes or CSS `url(...)` declarations.
+ *
+ * Both helpers used to live as file-local functions inside `Player.ts`,
+ * which meant `PlaylistManager` interpolated raw `track.poster` values
+ * into `backgroundImage` without any validation. They now live here so
+ * every consumer of untrusted poster/artwork URLs can share the same
+ * allow-list + CSS escape.
+ */
+
+/**
+ * Validate a poster/artwork URL before interpolating it into a CSS
+ * `url(...)` value or assigning it to `<video>.poster`. Allows `https:`,
+ * `http:`, `data:image/<png|jpeg|webp|gif|svg+xml>;...`, root-relative
+ * paths starting with `/`, and same-origin relative paths.
+ *
+ * Returns `null` for anything suspicious — callers must check for null
+ * and fall back to a safe default (e.g. skip setting `backgroundImage`).
+ */
+export function sanitizePosterUrl(input: unknown): string | null {
+  if (typeof input !== 'string' || input.length === 0 || input.length > 4096) {
+    return null;
+  }
+  const trimmed = input.trim();
+  if (!trimmed) return null;
+  // Whitespace, quotes, angle brackets and backslashes would let a
+  // crafted value break out of a CSS declaration or HTML attribute.
+  if (/[\s"'<>\\]/.test(trimmed)) return null;
+
+  if (trimmed.startsWith('/') || trimmed.startsWith('./') || trimmed.startsWith('../')) {
+    return trimmed;
+  }
+  try {
+    const url = new URL(trimmed, typeof window !== 'undefined' ? window.location.href : 'http://localhost/');
+    if (url.protocol === 'https:' || url.protocol === 'http:') {
+      return url.href;
+    }
+    if (url.protocol === 'data:' && /^data:image\/(png|jpeg|jpg|webp|gif|svg\+xml);/i.test(trimmed)) {
+      return trimmed;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+/**
+ * CSS-escape an already-validated URL for safe interpolation into a
+ * `url(...)` value. Defense in depth alongside {@link sanitizePosterUrl}:
+ * even if the URL slipped through, the CSS parser cannot leave the
+ * `url()` context because `"`, `(`, `)` and `\` are all escaped.
+ */
+export function cssEscapeUrl(url: string): string {
+  return url.replace(/["()\\]/g, (m) => `\\${m}`);
+}
+
+/**
+ * Convenience wrapper: given an unknown input, return a CSS
+ * `url("escaped-safe-url")` string ready to assign to
+ * `element.style.backgroundImage`, or `null` if the input is unsafe
+ * (so the caller can leave the current background untouched instead
+ * of clearing it).
+ */
+export function toCssBackgroundImage(input: unknown): string | null {
+  const safe = sanitizePosterUrl(input);
+  if (!safe) return null;
+  return `url("${cssEscapeUrl(safe)}")`;
+}

package/src/utils/VideoFrameCapture.ts

@@ -1,114 +1,114 @@
-export interface CaptureFrameOptions {
-  restoreState?: boolean;
-  quality?: number;
-  maxWidth?: number;
-  maxHeight?: number;
-}
-
-export async function captureVideoFrame(
-  video: HTMLVideoElement | null,
-  time: number,
-  options: CaptureFrameOptions = {}
-): Promise<string | null> {
-  if (!video || video.tagName !== 'VIDEO') {
-    return null;
-  }
-
-  const { restoreState = true, quality = 0.9, maxWidth, maxHeight } = options;
-
-  const wasPlaying = !video.paused;
-  const originalTime = video.currentTime;
-  const originalMuted = video.muted;
-
-  if (restoreState) {
-    video.muted = true;
-  }
-
-  return new Promise<string | null>((resolve) => {
-    const captureFrame = () => {
-      try {
-        let width = video.videoWidth || 640;
-        let height = video.videoHeight || 360;
-
-        if (maxWidth && width > maxWidth) {
-          const ratio = maxWidth / width;
-          width = maxWidth;
-          height = Math.round(height * ratio);
-        }
-        if (maxHeight && height > maxHeight) {
-          const ratio = maxHeight / height;
-          height = maxHeight;
-          width = Math.round(width * ratio);
-        }
-
-        const canvas = document.createElement('canvas');
-        canvas.width = width;
-        canvas.height = height;
-
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-          resolve(null);
-          return;
-        }
-        ctx.drawImage(video, 0, 0, width, height);
-
-        const dataURL = canvas.toDataURL('image/jpeg', quality);
-
-        if (restoreState) {
-          video.currentTime = originalTime;
-          video.muted = originalMuted;
-          if (wasPlaying && !video.paused) {
-            // Autoplay can be rejected by browser policy. We log at debug
-            // level so the noise doesn't reach production consoles, but
-            // unexpected errors are still observable.
-            video.play().catch((e: unknown) => {
-              if (typeof console !== 'undefined' && console.debug) {
-                console.debug('[VidPly] preview play() rejected:', e);
-              }
-            });
-          }
-        }
-
-        resolve(dataURL);
-      } catch (e) {
-        if (typeof console !== 'undefined' && console.debug) {
-          console.debug('[VidPly] frame capture failed:', e);
-        }
-        if (restoreState) {
-          video.currentTime = originalTime;
-          video.muted = originalMuted;
-          if (wasPlaying && !video.paused) {
-            video.play().catch((err: unknown) => {
-              if (typeof console !== 'undefined' && console.debug) {
-                console.debug('[VidPly] preview play() rejected:', err);
-              }
-            });
-          }
-        }
-        resolve(null);
-      }
-    };
-
-    const onSeeked = () => {
-      video.removeEventListener('seeked', onSeeked);
-      requestAnimationFrame(() => {
-        requestAnimationFrame(captureFrame);
-      });
-    };
-
-    const timeDiff = Math.abs(video.currentTime - time);
-    if (timeDiff < 0.1 && video.readyState >= 2) {
-      captureFrame();
-    } else if (video.readyState >= 1) {
-      video.addEventListener('seeked', onSeeked);
-      video.currentTime = time;
-    } else {
-      const onLoadedMetadata = () => {
-        video.removeEventListener('loadedmetadata', onLoadedMetadata);
-        video.addEventListener('seeked', onSeeked);
-        video.currentTime = time;
-      };
-      video.addEventListener('loadedmetadata', onLoadedMetadata);
-    }
-  });
-}
+export interface CaptureFrameOptions {
+  restoreState?: boolean;
+  quality?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+}
+
+export async function captureVideoFrame(
+  video: HTMLVideoElement | null,
+  time: number,
+  options: CaptureFrameOptions = {}
+): Promise<string | null> {
+  if (!video || video.tagName !== 'VIDEO') {
+    return null;
+  }
+
+  const { restoreState = true, quality = 0.9, maxWidth, maxHeight } = options;
+
+  const wasPlaying = !video.paused;
+  const originalTime = video.currentTime;
+  const originalMuted = video.muted;
+
+  if (restoreState) {
+    video.muted = true;
+  }
+
+  return new Promise<string | null>((resolve) => {
+    const captureFrame = () => {
+      try {
+        let width = video.videoWidth || 640;
+        let height = video.videoHeight || 360;
+
+        if (maxWidth && width > maxWidth) {
+          const ratio = maxWidth / width;
+          width = maxWidth;
+          height = Math.round(height * ratio);
+        }
+        if (maxHeight && height > maxHeight) {
+          const ratio = maxHeight / height;
+          height = maxHeight;
+          width = Math.round(width * ratio);
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          resolve(null);
+          return;
+        }
+        ctx.drawImage(video, 0, 0, width, height);
+
+        const dataURL = canvas.toDataURL('image/jpeg', quality);
+
+        if (restoreState) {
+          video.currentTime = originalTime;
+          video.muted = originalMuted;
+          if (wasPlaying && !video.paused) {
+            // Autoplay can be rejected by browser policy. We log at debug
+            // level so the noise doesn't reach production consoles, but
+            // unexpected errors are still observable.
+            video.play().catch((e: unknown) => {
+              if (typeof console !== 'undefined' && console.debug) {
+                console.debug('[VidPly] preview play() rejected:', e);
+              }
+            });
+          }
+        }
+
+        resolve(dataURL);
+      } catch (e) {
+        if (typeof console !== 'undefined' && console.debug) {
+          console.debug('[VidPly] frame capture failed:', e);
+        }
+        if (restoreState) {
+          video.currentTime = originalTime;
+          video.muted = originalMuted;
+          if (wasPlaying && !video.paused) {
+            video.play().catch((err: unknown) => {
+              if (typeof console !== 'undefined' && console.debug) {
+                console.debug('[VidPly] preview play() rejected:', err);
+              }
+            });
+          }
+        }
+        resolve(null);
+      }
+    };
+
+    const onSeeked = () => {
+      video.removeEventListener('seeked', onSeeked);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(captureFrame);
+      });
+    };
+
+    const timeDiff = Math.abs(video.currentTime - time);
+    if (timeDiff < 0.1 && video.readyState >= 2) {
+      captureFrame();
+    } else if (video.readyState >= 1) {
+      video.addEventListener('seeked', onSeeked);
+      video.currentTime = time;
+    } else {
+      const onLoadedMetadata = () => {
+        video.removeEventListener('loadedmetadata', onLoadedMetadata);
+        video.addEventListener('seeked', onSeeked);
+        video.currentTime = time;
+      };
+      video.addEventListener('loadedmetadata', onLoadedMetadata);
+    }
+  });
+}