@mango-iiif/av 0.0.1 → 0.0.3

package/README.md

@@ -27,11 +27,17 @@ media.config = {
     supplementalFiles: true,
   },
   controls: {
+    navigation: false,
+    autoAdvance: false,
     captions: true,
     playbackRate: true,
     pictureInPicture: true,
     fullscreen: true,
   },
+  audioArt: {
+    transcript: true,
+    visualizer: 'waveform',
+  },
   resume: { enabled: true },
 };
 

package/dist/annotations.d.ts

@@ -1,5 +1,5 @@
-import { A as AVControllerElement } from './controller-element-BOKM9v2S.js';
-import { i as AVPlayerEventMap } from './controller-DLy38ais.js';
+import { A as AVControllerElement } from './controller-element-BY0157ve.js';
+import { k as AVPlayerEventMap } from './controller-BLA8XNsG.js';
 
 declare class MangoAVAnnotationsElement extends AVControllerElement {
     #private;

package/dist/annotations.js

@@ -1,10 +1,10 @@
 import {
   MangoAVAnnotationsElement,
   defineMangoAVAnnotations
-} from "./chunk-IFTSCRCU.js";
+} from "./chunk-NH6PEDNF.js";
 import "./chunk-CDLYT3KB.js";
-import "./chunk-JXUHKKIX.js";
-import "./chunk-R4OUWZ3R.js";
+import "./chunk-HM72GHCH.js";
+import "./chunk-EV6YN7WV.js";
 
 // src/annotations.ts
 if (typeof window !== "undefined" && "customElements" in window) defineMangoAVAnnotations();

package/dist/chapters.d.ts

@@ -1,5 +1,5 @@
-import { A as AVControllerElement } from './controller-element-BOKM9v2S.js';
-import { i as AVPlayerEventMap } from './controller-DLy38ais.js';
+import { A as AVControllerElement } from './controller-element-BY0157ve.js';
+import { k as AVPlayerEventMap } from './controller-BLA8XNsG.js';
 
 declare class MangoAVChaptersElement extends AVControllerElement {
     #private;

package/dist/chapters.js

@@ -1,9 +1,9 @@
 import {
   MangoAVChaptersElement,
   defineMangoAVChapters
-} from "./chunk-YH6DS7J6.js";
-import "./chunk-JXUHKKIX.js";
-import "./chunk-R4OUWZ3R.js";
+} from "./chunk-U3H552X2.js";
+import "./chunk-HM72GHCH.js";
+import "./chunk-EV6YN7WV.js";
 
 // src/chapters.ts
 if (typeof window !== "undefined" && "customElements" in window) defineMangoAVChapters();

package/dist/chunk-6JIJRMNE.js

@@ -0,0 +1,218 @@
+import {
+  escapeHtml
+} from "./chunk-EV6YN7WV.js";
+
+// src/components/media-chrome.ts
+var registration;
+var languageRegistrations = /* @__PURE__ */ new Map();
+var loadLanguage = (language) => {
+  const normalized = language.toLowerCase();
+  const code = normalized === "zh-cn" || normalized === "zh-tw" ? normalized : normalized.split("-")[0] ?? normalized;
+  if (languageRegistrations.has(code)) return languageRegistrations.get(code);
+  const pending = (() => {
+    switch (code) {
+      case "de":
+        return import("media-chrome/lang/de");
+      case "es":
+        return import("media-chrome/lang/es");
+      case "fr":
+        return import("media-chrome/lang/fr");
+      case "pt":
+        return import("media-chrome/lang/pt");
+      case "zh-cn":
+        return import("media-chrome/lang/zh-CN");
+      case "zh-tw":
+        return import("media-chrome/lang/zh-TW");
+      default:
+        return void 0;
+    }
+  })();
+  if (pending) languageRegistrations.set(code, pending);
+  return pending;
+};
+var ensureMediaChrome = async (language) => {
+  if (language) await loadLanguage(language);
+  registration ??= import("media-chrome");
+  await registration;
+};
+
+// src/components/audio-art.ts
+var audioArtTranscriptHtml = (label, cues, enabled) => {
+  if (!enabled || cues.length === 0) return `<span class="audio-art-title">${escapeHtml(label)}</span>`;
+  return `<div class="audio-art-transcript" aria-live="polite" aria-label="${escapeHtml(label)}">
+    ${cues.map((cue) => `<div class="audio-art-cue" data-audio-cue data-start="${cue.start ?? ""}" data-end="${cue.end ?? cue.start ?? ""}">${cue.speaker ? `<span class="audio-art-speaker">${escapeHtml(cue.speaker)}</span>` : ""}<span>${escapeHtml(cue.text)}</span></div>`).join("")}
+  </div>`;
+};
+var resolveAudioVisualizerMode = (value) => value === true ? "pulse" : value || void 0;
+var audioArtContentHtml = (label, cues, transcriptEnabled, visualizerMode) => `<div class="audio-art-text">${audioArtTranscriptHtml(label, cues, transcriptEnabled)}</div>${visualizerMode === "waveform" || visualizerMode === "spectrum" ? `<canvas class="audio-art-visualizer-canvas" aria-hidden="true"></canvas>` : ""}`;
+var syncAudioArtTranscript = (root, time, instant = false) => {
+  const cues = [...root.querySelectorAll("[data-audio-cue]")];
+  if (cues.length === 0) return;
+  const transcript = root.querySelector(".audio-art-transcript");
+  if (instant && transcript) {
+    transcript.classList.add("seeking");
+    requestAnimationFrame(() => transcript.classList.remove("seeking"));
+  }
+  let activeIndex = cues.findIndex((cue) => {
+    const start = Number(cue.dataset.start);
+    const end = Number(cue.dataset.end);
+    return Number.isFinite(start) && time >= start && (!Number.isFinite(end) || time < end);
+  });
+  if (activeIndex < 0) {
+    for (let index = cues.length - 1; index >= 0; index -= 1) {
+      const cue = cues[index];
+      if (cue && Number.isFinite(Number(cue.dataset.start)) && time >= Number(cue.dataset.start)) {
+        activeIndex = index;
+        break;
+      }
+    }
+  }
+  if (activeIndex < 0) activeIndex = 0;
+  cues.forEach((cue, index) => {
+    const offset = index - activeIndex;
+    cue.classList.toggle("active", offset === 0);
+    cue.classList.toggle("adjacent", Math.abs(offset) === 1);
+    cue.toggleAttribute("aria-hidden", offset !== 0);
+    cue.style.opacity = offset === 0 ? "1" : Math.abs(offset) === 1 ? ".2" : "0";
+    cue.style.transform = `translateY(calc(-50% + ${offset * 4.25}rem))`;
+    cue.style.visibility = Math.abs(offset) <= 1 ? "visible" : "hidden";
+  });
+};
+var AudioArtVisualizer = class {
+  #token = 0;
+  #context;
+  #source;
+  #analyzer;
+  #frame = 0;
+  #level = 0;
+  connect(media, art, mode) {
+    this.disconnect();
+    const token = ++this.#token;
+    if (typeof AudioContext === "undefined") return;
+    try {
+      if (token !== this.#token || !media.isConnected || !art.isConnected) return;
+      const context = new AudioContext();
+      const source = context.createMediaElementSource(media);
+      const analyzer = context.createAnalyser();
+      analyzer.fftSize = 512;
+      analyzer.smoothingTimeConstant = 0.95;
+      source.connect(context.destination);
+      source.connect(analyzer);
+      this.#context = context;
+      this.#source = source;
+      this.#analyzer = analyzer;
+      const samples = new Uint8Array(analyzer.fftSize);
+      const frequencies = new Uint8Array(analyzer.frequencyBinCount);
+      const canvas = art.querySelector(".audio-art-visualizer-canvas");
+      const canvasContext = canvas?.getContext("2d");
+      const reducedMotion = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const resizeCanvas = () => {
+        if (!canvas || !canvasContext) return;
+        const scale = Math.min(2, devicePixelRatio || 1);
+        const width = Math.max(1, Math.round(art.clientWidth * scale));
+        const height = Math.max(1, Math.round(art.clientHeight * scale));
+        if (canvas.width !== width || canvas.height !== height) {
+          canvas.width = width;
+          canvas.height = height;
+        }
+        canvasContext.setTransform(scale, 0, 0, scale, 0, 0);
+      };
+      const drawWaveform = (strength) => {
+        if (!canvas || !canvasContext) return;
+        resizeCanvas();
+        const width = art.clientWidth;
+        const height = art.clientHeight;
+        canvasContext.clearRect(0, 0, width, height);
+        if (strength === 0) return;
+        const accent = getComputedStyle(art).getPropertyValue("--mango-av-accent").trim() || "#5b3fd6";
+        canvasContext.globalAlpha = Math.min(0.7, 0.18 + strength / 100);
+        canvasContext.strokeStyle = accent;
+        canvasContext.lineWidth = 1.5;
+        canvasContext.beginPath();
+        const amplitude = reducedMotion ? 0 : Math.min(height * 0.16, 5 + this.#level * height * 0.12);
+        for (let index = 0; index < samples.length; index += 1) {
+          const x = index / (samples.length - 1) * width;
+          const sample = (samples[index] - 128) / 128;
+          const y = height * 0.72 + sample * amplitude;
+          if (index === 0) canvasContext.moveTo(x, y);
+          else canvasContext.lineTo(x, y);
+        }
+        canvasContext.stroke();
+        canvasContext.globalAlpha = 1;
+      };
+      const drawSpectrum = (strength) => {
+        if (!canvas || !canvasContext) return;
+        resizeCanvas();
+        const width = art.clientWidth;
+        const height = art.clientHeight;
+        canvasContext.clearRect(0, 0, width, height);
+        if (strength === 0) return;
+        analyzer.getByteFrequencyData(frequencies);
+        const accent = getComputedStyle(art).getPropertyValue("--mango-av-accent").trim() || "#5b3fd6";
+        const barCount = 24;
+        const gap = 3;
+        const barWidth = Math.max(1, (width - gap * (barCount - 1)) / barCount);
+        canvasContext.fillStyle = accent;
+        canvasContext.globalAlpha = reducedMotion ? 0.2 : Math.min(0.55, 0.15 + strength / 120);
+        for (let index = 0; index < barCount; index += 1) {
+          const frequencyIndex = Math.floor((index / barCount) ** 1.7 * frequencies.length * 0.7);
+          const energy = reducedMotion ? 0.08 : (frequencies[frequencyIndex] ?? 0) / 255;
+          const barHeight = Math.max(1, energy * height * 0.32);
+          canvasContext.fillRect(index * (barWidth + gap), height - barHeight, barWidth, barHeight);
+        }
+        canvasContext.globalAlpha = 1;
+      };
+      const draw = () => {
+        if (token !== this.#token) return;
+        analyzer.getByteTimeDomainData(samples);
+        let sum = 0;
+        for (const sample of samples) {
+          const normalized = (sample - 128) / 128;
+          sum += normalized * normalized;
+        }
+        const rms = Math.sqrt(sum / samples.length);
+        const target = media.paused || rms < 0.012 ? 0 : Math.min(1, (rms - 0.012) * 5);
+        this.#level += (target - this.#level) * (target > this.#level ? 0.1 : 0.04);
+        if (target === 0 && this.#level < 0.01) this.#level = 0;
+        const strength = reducedMotion ? this.#level * 18 : this.#level === 0 ? 0 : Math.min(52, 12 + this.#level * 40);
+        art.style.setProperty("--mango-av-wave-rise", `${(8 - (reducedMotion ? 0 : this.#level * 6)).toFixed(2)}%`);
+        art.style.setProperty("--mango-av-wave-strength", `${strength.toFixed(1)}%`);
+        art.style.setProperty("--mango-av-wave-mid-strength", `${(strength * 0.45).toFixed(1)}%`);
+        art.style.setProperty("--mango-av-wave-edge-strength", `${(strength * 0.18).toFixed(1)}%`);
+        if (mode === "waveform") drawWaveform(strength);
+        else if (mode === "spectrum") drawSpectrum(strength);
+        this.#frame = requestAnimationFrame(draw);
+      };
+      draw();
+      const resume = () => void context.resume();
+      media.addEventListener("play", resume, { once: true });
+      if (!media.paused) resume();
+    } catch {
+      this.disconnect();
+    }
+  }
+  disconnect() {
+    this.#token += 1;
+    if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(this.#frame);
+    this.#frame = 0;
+    this.#level = 0;
+    try {
+      this.#source?.disconnect();
+    } catch {
+    }
+    if (this.#context && this.#context.state !== "closed") void this.#context.close();
+    this.#analyzer = void 0;
+    this.#source = void 0;
+    this.#context = void 0;
+  }
+};
+
+export {
+  ensureMediaChrome,
+  audioArtTranscriptHtml,
+  resolveAudioVisualizerMode,
+  audioArtContentHtml,
+  syncAudioArtTranscript,
+  AudioArtVisualizer
+};
+//# sourceMappingURL=chunk-6JIJRMNE.js.map

package/dist/chunk-6JIJRMNE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/media-chrome.ts","../src/components/audio-art.ts"],"sourcesContent":["let registration: Promise<unknown> | undefined;\nconst languageRegistrations = new Map<string, Promise<unknown>>();\n\nconst loadLanguage = (language: string): Promise<unknown> | undefined => {\n  const normalized = language.toLowerCase();\n  const code = normalized === 'zh-cn' || normalized === 'zh-tw'\n    ? normalized\n    : normalized.split('-')[0] ?? normalized;\n  if (languageRegistrations.has(code)) return languageRegistrations.get(code);\n  const pending = (() => {\n    switch (code) {\n      case 'de': return import('media-chrome/lang/de');\n      case 'es': return import('media-chrome/lang/es');\n      case 'fr': return import('media-chrome/lang/fr');\n      case 'pt': return import('media-chrome/lang/pt');\n      case 'zh-cn': return import('media-chrome/lang/zh-CN');\n      case 'zh-tw': return import('media-chrome/lang/zh-TW');\n      default: return undefined;\n    }\n  })();\n  if (pending) languageRegistrations.set(code, pending);\n  return pending;\n};\n\nexport const ensureMediaChrome = async (language?: string): Promise<void> => {\n  if (language) await loadLanguage(language);\n  registration ??= import('media-chrome');\n  await registration;\n};\n","import type { AVAudioVisualizerMode, TranscriptCue } from '../types';\nimport { escapeHtml } from '../utils';\n\nexport const audioArtTranscriptHtml = (label: string, cues: TranscriptCue[], enabled: boolean): string => {\n  if (!enabled || cues.length === 0) return `<span class=\"audio-art-title\">${escapeHtml(label)}</span>`;\n  return `<div class=\"audio-art-transcript\" aria-live=\"polite\" aria-label=\"${escapeHtml(label)}\">\n    ${cues.map((cue) => `<div class=\"audio-art-cue\" data-audio-cue data-start=\"${cue.start ?? ''}\" data-end=\"${cue.end ?? cue.start ?? ''}\">${cue.speaker ? `<span class=\"audio-art-speaker\">${escapeHtml(cue.speaker)}</span>` : ''}<span>${escapeHtml(cue.text)}</span></div>`).join('')}\n  </div>`;\n};\n\nexport const resolveAudioVisualizerMode = (\n  value: boolean | AVAudioVisualizerMode | undefined,\n): AVAudioVisualizerMode | undefined => value === true ? 'pulse' : value || undefined;\n\nexport const audioArtContentHtml = (\n  label: string,\n  cues: TranscriptCue[],\n  transcriptEnabled: boolean,\n  visualizerMode?: AVAudioVisualizerMode,\n): string => `<div class=\"audio-art-text\">${audioArtTranscriptHtml(label, cues, transcriptEnabled)}</div>${visualizerMode === 'waveform' || visualizerMode === 'spectrum' ? `<canvas class=\"audio-art-visualizer-canvas\" aria-hidden=\"true\"></canvas>` : ''}`;\n\nexport const syncAudioArtTranscript = (root: ParentNode, time: number, instant = false): void => {\n  const cues = [...root.querySelectorAll<HTMLElement>('[data-audio-cue]')];\n  if (cues.length === 0) return;\n  const transcript = root.querySelector<HTMLElement>('.audio-art-transcript');\n  if (instant && transcript) {\n    transcript.classList.add('seeking');\n    requestAnimationFrame(() => transcript.classList.remove('seeking'));\n  }\n\n  let activeIndex = cues.findIndex((cue) => {\n    const start = Number(cue.dataset.start);\n    const end = Number(cue.dataset.end);\n    return Number.isFinite(start) && time >= start && (!Number.isFinite(end) || time < end);\n  });\n  if (activeIndex < 0) {\n    for (let index = cues.length - 1; index >= 0; index -= 1) {\n      const cue = cues[index];\n      if (cue && Number.isFinite(Number(cue.dataset.start)) && time >= Number(cue.dataset.start)) {\n        activeIndex = index;\n        break;\n      }\n    }\n  }\n  if (activeIndex < 0) activeIndex = 0;\n\n  cues.forEach((cue, index) => {\n    const offset = index - activeIndex;\n    cue.classList.toggle('active', offset === 0);\n    cue.classList.toggle('adjacent', Math.abs(offset) === 1);\n    cue.toggleAttribute('aria-hidden', offset !== 0);\n    cue.style.opacity = offset === 0 ? '1' : Math.abs(offset) === 1 ? '.2' : '0';\n    cue.style.transform = `translateY(calc(-50% + ${offset * 4.25}rem))`;\n    cue.style.visibility = Math.abs(offset) <= 1 ? 'visible' : 'hidden';\n  });\n};\n\nexport class AudioArtVisualizer {\n  #token = 0;\n  #context: AudioContext | undefined;\n  #source: MediaElementAudioSourceNode | undefined;\n  #analyzer: AnalyserNode | undefined;\n  #frame = 0;\n  #level = 0;\n\n  connect(media: HTMLMediaElement, art: HTMLElement, mode: AVAudioVisualizerMode): void {\n    this.disconnect();\n    const token = ++this.#token;\n    if (typeof AudioContext === 'undefined') return;\n\n    try {\n      if (token !== this.#token || !media.isConnected || !art.isConnected) return;\n      const context = new AudioContext();\n      const source = context.createMediaElementSource(media);\n      const analyzer = context.createAnalyser();\n      analyzer.fftSize = 512;\n      analyzer.smoothingTimeConstant = .95;\n      source.connect(context.destination);\n      source.connect(analyzer);\n      this.#context = context;\n      this.#source = source;\n      this.#analyzer = analyzer;\n      const samples = new Uint8Array(analyzer.fftSize);\n      const frequencies = new Uint8Array(analyzer.frequencyBinCount);\n      const canvas = art.querySelector<HTMLCanvasElement>('.audio-art-visualizer-canvas');\n      const canvasContext = canvas?.getContext('2d');\n      const reducedMotion = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n      const resizeCanvas = () => {\n        if (!canvas || !canvasContext) return;\n        const scale = Math.min(2, devicePixelRatio || 1);\n        const width = Math.max(1, Math.round(art.clientWidth * scale));\n        const height = Math.max(1, Math.round(art.clientHeight * scale));\n        if (canvas.width !== width || canvas.height !== height) {\n          canvas.width = width;\n          canvas.height = height;\n        }\n        canvasContext.setTransform(scale, 0, 0, scale, 0, 0);\n      };\n      const drawWaveform = (strength: number) => {\n        if (!canvas || !canvasContext) return;\n        resizeCanvas();\n        const width = art.clientWidth;\n        const height = art.clientHeight;\n        canvasContext.clearRect(0, 0, width, height);\n        if (strength === 0) return;\n        const accent = getComputedStyle(art).getPropertyValue('--mango-av-accent').trim() || '#5b3fd6';\n        canvasContext.globalAlpha = Math.min(.7, .18 + strength / 100);\n        canvasContext.strokeStyle = accent;\n        canvasContext.lineWidth = 1.5;\n        canvasContext.beginPath();\n        const amplitude = reducedMotion ? 0 : Math.min(height * .16, 5 + this.#level * height * .12);\n        for (let index = 0; index < samples.length; index += 1) {\n          const x = (index / (samples.length - 1)) * width;\n          const sample = (samples[index]! - 128) / 128;\n          const y = height * .72 + sample * amplitude;\n          if (index === 0) canvasContext.moveTo(x, y);\n          else canvasContext.lineTo(x, y);\n        }\n        canvasContext.stroke();\n        canvasContext.globalAlpha = 1;\n      };\n      const drawSpectrum = (strength: number) => {\n        if (!canvas || !canvasContext) return;\n        resizeCanvas();\n        const width = art.clientWidth;\n        const height = art.clientHeight;\n        canvasContext.clearRect(0, 0, width, height);\n        if (strength === 0) return;\n        analyzer.getByteFrequencyData(frequencies);\n        const accent = getComputedStyle(art).getPropertyValue('--mango-av-accent').trim() || '#5b3fd6';\n        const barCount = 24;\n        const gap = 3;\n        const barWidth = Math.max(1, (width - gap * (barCount - 1)) / barCount);\n        canvasContext.fillStyle = accent;\n        canvasContext.globalAlpha = reducedMotion ? .2 : Math.min(.55, .15 + strength / 120);\n        for (let index = 0; index < barCount; index += 1) {\n          const frequencyIndex = Math.floor((index / barCount) ** 1.7 * frequencies.length * .7);\n          const energy = reducedMotion ? .08 : (frequencies[frequencyIndex] ?? 0) / 255;\n          const barHeight = Math.max(1, energy * height * .32);\n          canvasContext.fillRect(index * (barWidth + gap), height - barHeight, barWidth, barHeight);\n        }\n        canvasContext.globalAlpha = 1;\n      };\n      const draw = () => {\n        if (token !== this.#token) return;\n        analyzer.getByteTimeDomainData(samples);\n        let sum = 0;\n        for (const sample of samples) {\n          const normalized = (sample - 128) / 128;\n          sum += normalized * normalized;\n        }\n        const rms = Math.sqrt(sum / samples.length);\n        const target = media.paused || rms < .012 ? 0 : Math.min(1, (rms - .012) * 5);\n        this.#level += (target - this.#level) * (target > this.#level ? .1 : .04);\n        if (target === 0 && this.#level < .01) this.#level = 0;\n        const strength = reducedMotion\n          ? this.#level * 18\n          : this.#level === 0 ? 0 : Math.min(52, 12 + this.#level * 40);\n        art.style.setProperty('--mango-av-wave-rise', `${(8 - (reducedMotion ? 0 : this.#level * 6)).toFixed(2)}%`);\n        art.style.setProperty('--mango-av-wave-strength', `${strength.toFixed(1)}%`);\n        art.style.setProperty('--mango-av-wave-mid-strength', `${(strength * .45).toFixed(1)}%`);\n        art.style.setProperty('--mango-av-wave-edge-strength', `${(strength * .18).toFixed(1)}%`);\n        if (mode === 'waveform') drawWaveform(strength);\n        else if (mode === 'spectrum') drawSpectrum(strength);\n        this.#frame = requestAnimationFrame(draw);\n      };\n      draw();\n      const resume = () => void context.resume();\n      media.addEventListener('play', resume, { once: true });\n      if (!media.paused) resume();\n    } catch {\n      this.disconnect();\n    }\n  }\n\n  disconnect(): void {\n    this.#token += 1;\n    if (typeof cancelAnimationFrame !== 'undefined') cancelAnimationFrame(this.#frame);\n    this.#frame = 0;\n    this.#level = 0;\n    try { this.#source?.disconnect(); } catch { /* Already disconnected. */ }\n    if (this.#context && this.#context.state !== 'closed') void this.#context.close();\n    this.#analyzer = undefined;\n    this.#source = undefined;\n    this.#context = undefined;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-3LLEY7MA.js → chunk-AZFOTEAO.js}

@@ -1,6 +1,6 @@
 import {
   parseTime
-} from "./chunk-R4OUWZ3R.js";
+} from "./chunk-EV6YN7WV.js";
 
 // src/transcript.ts
 var stripMarkup = (value) => value.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').trim();
@@ -123,4 +123,4 @@ export {
   parseTranscript,
   loadTranscript
 };
-//# sourceMappingURL=chunk-3LLEY7MA.js.map
+//# sourceMappingURL=chunk-AZFOTEAO.js.map

package/dist/{chunk-GX7UU6V4.js → chunk-CSE4GIHB.js}

@@ -1,19 +1,24 @@
 import {
-  ensureMediaChrome
-} from "./chunk-NTHMZZYJ.js";
+  AudioArtVisualizer,
+  audioArtContentHtml,
+  audioArtTranscriptHtml,
+  ensureMediaChrome,
+  resolveAudioVisualizerMode,
+  syncAudioArtTranscript
+} from "./chunk-6JIJRMNE.js";
 import {
   playFromInteraction
 } from "./chunk-CDLYT3KB.js";
 import {
   loadTranscript
-} from "./chunk-3LLEY7MA.js";
+} from "./chunk-AZFOTEAO.js";
 import {
   AVPlayerController,
   escapeHtml,
   formatString,
   formatTime,
   resolveStrings
-} from "./chunk-R4OUWZ3R.js";
+} from "./chunk-EV6YN7WV.js";
 
 // src/components/mango-av-media.ts
 var HTMLElementBase = globalThis.HTMLElement ?? class {
@@ -65,15 +70,24 @@ var styles = `
   .header h2 { font-size: 1.15rem; margin: 0; }
   .header p { color: var(--mango-av-muted); margin: .35rem 0 0; }
   .layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, var(--mango-av-panel-width)); }
-  .player-column { background: #08080a; min-width: 0; position: relative; }
+  .player-column { align-self: start; background: #08080a; min-width: 0; position: relative; }
   media-controller { display: block; width: 100%; }
   media-controller:not([audio]) { aspect-ratio: var(--mango-av-player-aspect-ratio); }
   video, hls-video { display: block; height: 100%; object-fit: contain; width: 100%; }
   audio { width: 100%; }
   media-control-bar { width: 100%; }
-  .audio-art { align-items: center; aspect-ratio: 16 / 7; background: linear-gradient(135deg, var(--mango-av-accent), #111); color: white; display: flex; justify-content: center; padding: 2rem; text-align: center; }
+  .audio-art { --mango-av-wave-edge-strength: 0%; --mango-av-wave-mid-strength: 0%; --mango-av-wave-rise: 8%; --mango-av-wave-strength: 0%; align-items: center; aspect-ratio: 16 / 7; background: linear-gradient(#09080d, #111019); color: white; display: flex; justify-content: center; overflow: hidden; padding: 2rem; position: relative; text-align: center; }
+  .audio-art.visualizer--pulse { background: radial-gradient(ellipse 140% 72% at 50% calc(100% + var(--mango-av-wave-rise)), color-mix(in srgb, var(--mango-av-accent) var(--mango-av-wave-strength), transparent) 0%, color-mix(in srgb, var(--mango-av-accent) var(--mango-av-wave-mid-strength), transparent) 40%, color-mix(in srgb, var(--mango-av-accent) var(--mango-av-wave-edge-strength), transparent) 62%, transparent 78%), linear-gradient(#09080d, #111019); }
+  .audio-art-text { display: contents; }
+  .audio-art-visualizer-canvas { height: 100%; inset: 0; pointer-events: none; position: absolute; width: 100%; }
   .audio-art img { height: 100%; inset: 0; object-fit: contain; position: absolute; width: 100%; }
-  .audio-art span { font-size: clamp(1.1rem, 3vw, 2rem); font-weight: 700; }
+  .audio-art-title { font-size: clamp(1.1rem, 3vw, 2rem); font-weight: 700; position: relative; z-index: 1; }
+  .audio-art-transcript { height: 100%; inset: 0; overflow: hidden; position: absolute; z-index: 1; }
+  .audio-art-cue { align-items: center; display: flex; flex-direction: column; font-size: clamp(.7rem, 1.3vw, .875rem); font-weight: 550; gap: .15rem; left: 12%; line-height: 1.35; position: absolute; right: 12%; top: 50%; transition: opacity 360ms ease, transform 480ms cubic-bezier(.22, 1, .36, 1); }
+  .audio-art-transcript.seeking .audio-art-cue { transition: none; }
+  .audio-art-cue.active { font-size: clamp(.78rem, 1.5vw, 1rem); font-weight: 650; }
+  .audio-art-cue > span:last-child { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
+  .audio-art-speaker { font-size: .7em; letter-spacing: .04em; text-transform: uppercase; }
   .player-toolbar { align-items: center; background: #151518; color: #fff; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; padding: .55rem .7rem; }
   .player-toolbar button, .player-toolbar select { background: #29292e; border: 1px solid #44444a; border-radius: .35rem; color: white; padding: .4rem .55rem; }
   .player-toolbar .group { align-items: center; display: flex; gap: .45rem; }
@@ -89,7 +103,9 @@ var styles = `
   .empty { color: var(--mango-av-muted); font-style: italic; }
   .chapter-list, .annotation-list, .cue-list, .file-list { list-style: none; margin: 0; padding: 0; }
   .chapter-list .chapter-list { border-left: 1px solid var(--mango-av-border); margin-left: .8rem; padding-left: .55rem; }
+  .chapter { margin-block: .3rem; }
   .chapter button, .annotation button, .cue button { background: transparent; border: 0; border-radius: .35rem; color: inherit; display: grid; gap: .15rem; padding: .5rem; text-align: left; width: 100%; }
+  .chapter button { border-radius: 0; }
   .chapter button:hover, .annotation button:hover, .cue button:hover { background: var(--mango-av-surface); }
   .chapter button.active, .annotation button.active, .cue button.active { background: color-mix(in srgb, var(--mango-av-accent) 14%, transparent); box-shadow: inset 3px 0 var(--mango-av-accent); }
   .time { color: var(--mango-av-muted); font-size: .78rem; }
@@ -155,6 +171,7 @@ var MangoAVMediaElement = class extends HTMLElementBase {
   #loadingToken = 0;
   #resolvedSourceUrl;
   #sourceToken = 0;
+  #visualizer = new AudioArtVisualizer();
   constructor() {
     super();
     this.#root = this.attachShadow({ mode: "open" });
@@ -186,6 +203,8 @@ var MangoAVMediaElement = class extends HTMLElementBase {
           if (this.#activePanel === "annotations") this.#renderPanelOnly();
         } else if (type === "av-timeupdate") {
           this.#syncTimedContent();
+        } else if (type === "av-seek") {
+          this.#syncTimedContent(event.detail.to, true);
         }
         this.dispatchEvent(new CustomEvent(type, {
           detail: event.detail,
@@ -222,6 +241,7 @@ var MangoAVMediaElement = class extends HTMLElementBase {
     if (source !== void 0) void this.load(source);
   }
   disconnectedCallback() {
+    this.#visualizer.disconnect();
     this.player.destroy();
   }
   attributeChangedCallback(name, oldValue, newValue) {
@@ -263,6 +283,7 @@ var MangoAVMediaElement = class extends HTMLElementBase {
     }
   }
   #render() {
+    this.#visualizer.disconnect();
     const state = this.player.state;
     const manifest = state.manifest;
     const canvas = this.player.canvas;
@@ -278,7 +299,13 @@ var MangoAVMediaElement = class extends HTMLElementBase {
     </div>`;
     this.#bindInteractions();
     const media = this.#root.querySelector("video, audio, hls-video");
-    if (media) this.player.attachMedia(media);
+    if (media) {
+      this.player.attachMedia(media);
+      const art = this.#root.querySelector(".audio-art.visualizer");
+      const visualizerMode = resolveAudioVisualizerMode(this.player.config.audioArt.visualizer);
+      if (art && media instanceof HTMLAudioElement && visualizerMode) this.#visualizer.connect(media, art, visualizerMode);
+    }
+    this.#syncTimedContent();
   }
   #renderReady(manifest, canvas, kind) {
     const source = this.player.source;
@@ -293,13 +320,17 @@ var MangoAVMediaElement = class extends HTMLElementBase {
       panels.supplementalFiles ? ["files", ui.files] : void 0
     ].filter((value) => Boolean(value));
     const showPanel = this.#activePanel !== "none" && panelTabs.length > 0;
+    const showSourceSelector = controls.sourceSelector && canvas.sources.length > 1;
+    const showDownload = controls.download && canvas.rendering.length > 0;
+    const showPlayerToolbar = controls.navigation || controls.autoAdvance || showSourceSelector || showDownload;
+    const visualizerMode = resolveAudioVisualizerMode(this.player.config.audioArt.visualizer);
     return `
       ${this.#resumeTime !== void 0 ? `<div class="resume">${escapeHtml(formatString(ui.resumePrompt, { time: formatTime(this.#resumeTime) }))} <button type="button" data-action="resume">${escapeHtml(ui.resume)}</button><button type="button" data-action="dismiss-resume">${escapeHtml(ui.startOver)}</button></div>` : ""}
       <div class="layout" ${showPanel ? "" : 'style="grid-template-columns: 1fr"'}>
         <section class="player-column" aria-label="${escapeHtml(ui.mediaPlayer)}">
           <slot name="before-player"></slot>
           <media-controller ${kind === "audio" ? "audio" : ""} ${this.#mediaChromeLanguage()}>
-            ${kind === "audio" ? `<div class="audio-art"><span>${escapeHtml(canvas.label)}</span></div>` : ""}
+            ${kind === "audio" ? `<div class="audio-art ${visualizerMode ? `visualizer visualizer--${visualizerMode}` : ""}">${audioArtContentHtml(canvas.label, this.#transcriptCues, Boolean(this.player.config.audioArt.transcript), visualizerMode)}</div>` : ""}
             ${source ? this.#mediaHtml(canvas, source.kind) : `<div class="audio-art"><span>${escapeHtml(ui.noPlayableMedia)}</span></div>`}
             <slot name="player-overlay"></slot>
             <slot name="controls">
@@ -319,17 +350,17 @@ var MangoAVMediaElement = class extends HTMLElementBase {
             </slot>
           </media-controller>
           ${this.#searchMarkersHtml()}
-          <div class="player-toolbar">
-            <div class="group">
+          ${showPlayerToolbar ? `<div class="player-toolbar">
+            ${controls.navigation ? `<div class="group">
               <button type="button" data-action="previous" ${canvas.index === 0 ? "disabled" : ""} aria-label="${escapeHtml(ui.previousSection)}">\u2190 ${escapeHtml(ui.previous)}</button>
               <button type="button" data-action="next" ${canvas.index === manifest.canvases.length - 1 && !this.player.state.repeat ? "disabled" : ""} aria-label="${escapeHtml(ui.nextSection)}">${escapeHtml(ui.next)} \u2192</button>
-            </div>
-            <div class="group">
-              ${controls.sourceSelector && canvas.sources.length > 1 ? `<label><span class="sr-only">${escapeHtml(ui.mediaSource)}</span><select data-action="source">${canvas.sources.map((item, index) => `<option value="${index}" ${index === this.player.state.sourceIndex ? "selected" : ""}>${escapeHtml(item.label ?? item.format ?? formatString(ui.sourceNumber, { number: index + 1 }))}</option>`).join("")}</select></label>` : ""}
-              ${controls.download && canvas.rendering.length > 0 ? `<label><span class="sr-only">${escapeHtml(ui.downloadMediaFile)}</span><select data-action="download"><option value="">${escapeHtml(ui.download)}\u2026</option>${canvas.rendering.map((file) => `<option value="${escapeHtml(file.id)}" data-filename="${escapeHtml(file.filename ?? "")}">${escapeHtml(file.label)}</option>`).join("")}</select></label>` : ""}
-              <label><input type="checkbox" data-action="auto-advance" ${this.player.state.autoAdvance ? "checked" : ""}> ${escapeHtml(ui.autoAdvance)}</label>
-            </div>
-          </div>
+            </div>` : ""}
+            ${showSourceSelector || showDownload || controls.autoAdvance ? `<div class="group">
+              ${showSourceSelector ? `<label><span class="sr-only">${escapeHtml(ui.mediaSource)}</span><select data-action="source">${canvas.sources.map((item, index) => `<option value="${index}" ${index === this.player.state.sourceIndex ? "selected" : ""}>${escapeHtml(item.label ?? item.format ?? formatString(ui.sourceNumber, { number: index + 1 }))}</option>`).join("")}</select></label>` : ""}
+              ${showDownload ? `<label><span class="sr-only">${escapeHtml(ui.downloadMediaFile)}</span><select data-action="download"><option value="">${escapeHtml(ui.download)}\u2026</option>${canvas.rendering.map((file) => `<option value="${escapeHtml(file.id)}" data-filename="${escapeHtml(file.filename ?? "")}">${escapeHtml(file.label)}</option>`).join("")}</select></label>` : ""}
+              ${controls.autoAdvance ? `<label><input type="checkbox" data-action="auto-advance" ${this.player.state.autoAdvance ? "checked" : ""}> ${escapeHtml(ui.autoAdvance)}</label>` : ""}
+            </div>` : ""}
+          </div>` : ""}
           <slot name="after-player"></slot>
         </section>
         ${showPanel ? `<aside class="panel">
@@ -495,6 +526,7 @@ var MangoAVMediaElement = class extends HTMLElementBase {
       const cues = await loadTranscript(resource, transcriptOptions);
       if (token !== this.#loadingToken) return;
       this.#transcriptCues = cues;
+      this.#renderAudioArt();
       if (this.#activePanel === "transcript") this.#renderPanelOnly();
     } catch (cause) {
       if (token !== this.#loadingToken) return;
@@ -518,8 +550,8 @@ var MangoAVMediaElement = class extends HTMLElementBase {
       this.dispatchEvent(new CustomEvent("av-error", { detail: { error }, bubbles: true, composed: true }));
     }
   }
-  #syncTimedContent() {
-    const time = this.player.state.currentTime;
+  #syncTimedContent(time = this.player.state.currentTime, instant = false) {
+    syncAudioArtTranscript(this.#root, time, instant);
     const rows = this.#root.querySelectorAll("[data-start][data-end]");
     let active;
     rows.forEach((row) => {
@@ -533,6 +565,14 @@ var MangoAVMediaElement = class extends HTMLElementBase {
       active.scrollIntoView({ block: "nearest", behavior: "smooth" });
     }
   }
+  #renderAudioArt() {
+    const art = this.#root.querySelector(".audio-art");
+    const canvas = this.player.canvas;
+    if (!art || !canvas || this.player.source?.kind !== "audio") return;
+    const text = art.querySelector(".audio-art-text");
+    if (text) text.innerHTML = audioArtTranscriptHtml(canvas.label, this.#transcriptCues, Boolean(this.player.config.audioArt.transcript));
+    syncAudioArtTranscript(art, this.player.state.currentTime);
+  }
 };
 var defineMangoAVMedia = (tagName = "mango-av-media") => {
   if (typeof customElements === "undefined") return MangoAVMediaElement;
@@ -544,4 +584,4 @@ export {
   MangoAVMediaElement,
   defineMangoAVMedia
 };
-//# sourceMappingURL=chunk-GX7UU6V4.js.map
+//# sourceMappingURL=chunk-CSE4GIHB.js.map