@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/video-player.js

@@ -0,0 +1,770 @@
+// ../blu-grid/docs/scripts/modules/qr-encoder.js
+import { global } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/common.js
+import { global as global2, runtime, state, register } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/rich.js
+import { global as global3, runtime as runtime2, state as state2, register as register2 } from "./kernel.js";
+var shared = /* @__PURE__ */ state2("rich", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
+function el(tag, cls, value) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (value !== void 0) n.textContent = value;
+  return n;
+}
+function attr(n, k, v) {
+  n.setAttribute(k, String(v));
+  return n;
+}
+function url(v) {
+  if (!v) return "";
+  var u = new URL(String(v), document.baseURI);
+  if (!/^https?:$/.test(u.protocol) && u.protocol !== "blob:") throw Error("Use an HTTP(S), relative or blob URL.");
+  return u.href;
+}
+function ratio(v) {
+  return /^\s*\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?\s*$/.test(v || "") ? v : "4 / 3";
+}
+function on(s, n, e, fn) {
+  n.addEventListener(e, fn);
+  s.cleanup.push(function() {
+    n.removeEventListener(e, fn);
+  });
+}
+function emit(s, name) {
+  if (s.dead || !s.events[name]) return;
+  try {
+    Promise.resolve(s.events[name].apply(null, Array.prototype.slice.call(arguments, 2))).catch(function(e) {
+      report(s, e);
+    });
+  } catch (e) {
+    report(s, e);
+  }
+}
+function report(s, e) {
+  var message = e ? e.message || String(e) : "";
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && message !== s.lastError) {
+    s.lastError = message;
+    if (s.events.Error) try {
+      s.events.Error(message);
+    } catch (_) {
+    }
+  }
+}
+function destroy(key) {
+  var s = shared.instances.get(key);
+  if (!s || s.destroying) return;
+  s.destroying = true;
+  if (s.beforeDestroy) s.beforeDestroy();
+  s.dead = true;
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.pause) s.pause();
+  if (s.modal) runtime2.Modal.destroy(s.uid + "-modal");
+  if (s.observer) s.observer.disconnect();
+  if (s.resize) s.resize.disconnect();
+  if (s.frame) cancelAnimationFrame(s.frame);
+  Object.keys(s.slots).forEach(function(k) {
+    s.host.append(s.slots[k]);
+  });
+  s.root.remove();
+  if (s.modal) s.modal.remove();
+  if (s.host._bluRichOwner === key) delete s.host._bluRichOwner;
+  shared.instances.delete(key);
+}
+function define(kind, slug, init, update) {
+  return { sync: function(id, options, events, key) {
+    var host = document.getElementById(id);
+    if (!host) return "Component host was not found.";
+    key = key || id;
+    var s = shared.instances.get(key);
+    if (s && (s.host !== host || s.kind !== kind)) {
+      destroy(key);
+      s = null;
+    }
+    if (host._bluRichOwner && host._bluRichOwner !== key) destroy(host._bluRichOwner);
+    if (!s) {
+      s = { host, key, kind, uid: "blu-rich-" + ++shared.serial, cleanup: [], slots: {}, events: {}, options: {} };
+      Array.from(host.children).forEach(function(n) {
+        var match = n.className && String(n.className).match(/blu-common-slot--(\w+)/);
+        if (match) s.slots[match[1]] = n;
+      });
+      s.root = el("div", "blu-rich blu-" + slug);
+      s.body = el("div", "blu-rich-body");
+      s.error = attr(el("p", "blu-rich-error"), "role", "alert");
+      s.error.hidden = true;
+      s.root.append(s.body, s.error);
+      host.append(s.root);
+      shared.instances.set(key, s);
+      s.fresh = true;
+    }
+    host._bluRichOwner = key;
+    s.options = options || {};
+    s.events = events || {};
+    var preview = host.nextElementSibling;
+    if (preview && preview.classList.contains("blu-component-preview")) preview.hidden = true;
+    if (s.options.AccessibleLabel) {
+      attr(s.root, "aria-label", s.options.AccessibleLabel);
+      attr(s.root, "role", "group");
+    } else {
+      s.root.removeAttribute("aria-label");
+      s.root.removeAttribute("role");
+    }
+    try {
+      if (s.fresh) {
+        init(s);
+        s.fresh = false;
+      }
+      update(s);
+      report(s, null);
+      return "";
+    } catch (e) {
+      report(s, e);
+      return e.message || String(e);
+    }
+  }, destroy };
+}
+function videoPosition(n) {
+  return Number.isFinite(n.currentTime) ? Math.max(0, n.currentTime) : 0;
+}
+function videoActivityReset(s) {
+  s.activity = { session: typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(36) + "-" + Math.random().toString(36).slice(2), sequence: 0, mediaId: String(s.options.MediaId || ""), position: videoPosition(s.video), clock: performance.now(), playing: false, seeking: false, rate: s.video.playbackRate || 1, segments: [], flushedAt: performance.now() };
+}
+function videoActivitySample(s) {
+  var a = s.activity, n = s.video;
+  if (!a) return;
+  var now = performance.now(), position = videoPosition(n), delta = position - a.position, elapsed = Math.max(0, (now - a.clock) / 1e3);
+  if (a.playing && !a.seeking && !n.seeking && delta > 0 && delta <= elapsed * Math.max(a.rate, n.playbackRate || 1) + 0.75) {
+    var last = a.segments[a.segments.length - 1];
+    if (last && Math.abs(last.EndSeconds - a.position) < 0.02) last.EndSeconds = position;
+    else a.segments.push({ StartSeconds: a.position, EndSeconds: position });
+  }
+  a.position = position;
+  a.clock = now;
+  a.rate = n.playbackRate || 1;
+}
+function videoActivityFlush(s, reason, sample) {
+  if (s.dead || !s.activity) return;
+  if (sample !== false) videoActivitySample(s);
+  var a = s.activity, n = s.video;
+  var payload = { Version: 1, SessionId: a.session, Sequence: ++a.sequence, MediaId: a.mediaId, Reason: reason, PositionSeconds: videoPosition(n), DurationSeconds: Number.isFinite(n.duration) ? Math.max(0, n.duration) : 0, Segments: a.segments.map(function(r) {
+    return { StartSeconds: Number(r.StartSeconds.toFixed(3)), EndSeconds: Number(r.EndSeconds.toFixed(3)) };
+  }) };
+  a.segments = [];
+  a.flushedAt = performance.now();
+  emit(s, "ViewingActivity", JSON.stringify(payload));
+  return payload;
+}
+function videoActivity(s) {
+  var n = s.video;
+  videoActivityReset(s);
+  on(s, n, "play", function() {
+    videoActivitySample(s);
+    s.activity.playing = true;
+  });
+  on(s, n, "pause", function() {
+    if (s.suppressActivityPause) {
+      s.suppressActivityPause = false;
+      s.activity.playing = false;
+      return;
+    }
+    videoActivityFlush(s, n.ended ? "Ended" : "Paused");
+    s.activity.playing = false;
+    s.activity.endedSent = n.ended;
+  });
+  on(s, n, "ended", function() {
+    if (!s.activity.endedSent) videoActivityFlush(s, "Ended");
+    s.activity.playing = false;
+    s.activity.endedSent = false;
+  });
+  on(s, n, "seeking", function() {
+    if (!s.activity.seeking) videoActivityFlush(s, "Seek", false);
+    s.activity.seeking = true;
+    s.activity.position = videoPosition(n);
+    s.activity.clock = performance.now();
+  });
+  on(s, n, "seeked", function() {
+    s.activity.seeking = false;
+    s.activity.position = videoPosition(n);
+    s.activity.clock = performance.now();
+    s.activity.playing = !n.paused && !n.ended;
+  });
+  on(s, n, "ratechange", function() {
+    videoActivitySample(s);
+  });
+  on(s, n, "timeupdate", function() {
+    videoActivitySample(s);
+    if (s.activity.segments.length && (performance.now() - s.activity.flushedAt >= 15e3 || s.activity.segments.length >= 100)) videoActivityFlush(s, "Progress", false);
+  });
+  on(s, document, "visibilitychange", function() {
+    if (document.visibilityState === "hidden") videoActivityFlush(s, "Hidden");
+  });
+  s.beforeDestroy = function() {
+    videoActivityFlush(s, "Destroy");
+    videoExitPictureInPicture(s);
+  };
+}
+function videoHeatmapRows(raw) {
+  var rows = typeof raw === "string" ? JSON.parse(raw || "[]") : raw || [];
+  if (!Array.isArray(rows) || rows.length > 500) throw Error("ViewingHeatmap supports up to 500 time ranges.");
+  var end = 0;
+  return rows.map(function(r) {
+    if (!r || !Number.isFinite(r.StartSeconds) || !Number.isFinite(r.EndSeconds) || !Number.isFinite(r.Views) || r.StartSeconds < end || r.StartSeconds < 0 || r.EndSeconds <= r.StartSeconds || r.Views < 0) throw Error("ViewingHeatmap needs ordered, non-overlapping ranges with finite StartSeconds, EndSeconds and nonnegative Views.");
+    end = r.EndSeconds;
+    return { StartSeconds: r.StartSeconds, EndSeconds: r.EndSeconds, Views: r.Views };
+  });
+}
+function videoHeatmap(s) {
+  if (!s.heatmap) return;
+  var duration = s.video.duration, rows = s.heatmapRows || [], max = rows.reduce(function(m, r) {
+    return Math.max(m, r.Views);
+  }, 0), show = !!s.options.ShowViewingHeatmap && Number.isFinite(duration) && duration > 0 && rows.length > 0 && max > 0;
+  s.heatmap.style.display = show ? "" : "none";
+  s.seekHint.hidden = !show;
+  attr(s.videoFrame, "data-heatmap", show);
+  s.heatmapMax = max;
+  if (!show) {
+    s.timeline.removeAttribute("aria-describedby");
+    return;
+  }
+  attr(s.timeline, "aria-describedby", s.heatmapDescription.id);
+  s.heatmapDescription.textContent = "Viewing activity supplied by the application. Taller areas were viewed more often.";
+  var signature = JSON.stringify([duration, rows]);
+  if (signature === s.heatmapSignature) return;
+  s.heatmapSignature = signature;
+  var points = [[0, 42]], lastEnd = 0;
+  rows.forEach(function(r) {
+    var start = Math.min(duration, r.StartSeconds) / duration * 1e3, end = Math.min(duration, r.EndSeconds) / duration * 1e3;
+    if (end <= start) return;
+    if (start > lastEnd) {
+      points.push([lastEnd, 42], [start, 42]);
+    }
+    points.push([(start + end) / 2, 42 - r.Views / max * 36]);
+    lastEnd = end;
+  });
+  points.push([lastEnd, 42], [1e3, 42]);
+  var path = "M0 44 L" + points[0].join(" ");
+  for (var i = 1; i < points.length; i++) {
+    var previous = points[i - 1], current = points[i], middle = (previous[0] + current[0]) / 2;
+    path += " C" + middle + " " + previous[1] + " " + middle + " " + current[1] + " " + current.join(" ");
+  }
+  attr(s.heatmapPath, "d", path + " L1000 44 Z");
+}
+function videoHeatmapHint(s, position) {
+  var duration = s.video.duration;
+  if (!Number.isFinite(duration) || duration <= 0) return;
+  position = Math.max(0, Math.min(duration, position));
+  var row = (s.heatmapRows || []).find(function(r) {
+    return position >= r.StartSeconds && position < r.EndSeconds;
+  });
+  s.seekHint.textContent = videoTime(position) + (row && row.Views === s.heatmapMax ? " \xB7 Most viewed" : "");
+  s.seekHint.style.left = Math.max(8, Math.min(92, position / duration * 100)) + "%";
+}
+function videoPictureInPictureAvailable(s) {
+  return s.options.AllowPictureInPicture !== false && !!document.pictureInPictureEnabled && typeof s.video.requestPictureInPicture === "function" && !s.video.disablePictureInPicture;
+}
+function videoExitPictureInPicture(s) {
+  if (document.pictureInPictureElement === s.video && document.exitPictureInPicture) {
+    var p = document.exitPictureInPicture();
+    if (p) p.catch(function() {
+    });
+  }
+}
+function videoPictureInPictureMessage(error, exiting) {
+  if (exiting) return "The browser could not close the floating window. Use the close control on that window to return to this player.";
+  switch (error && error.name) {
+    case "NotSupportedError":
+      return "This browser or app cannot open a floating video window, or picture-in-picture is disabled in its settings. Restarting playback will not enable it. Open this page in a browser that supports picture-in-picture, or keep watching here.";
+    case "SecurityError":
+      return "Picture-in-picture is blocked by this page\u2019s permissions policy. Restarting playback will not change that. If this player is embedded, the host page must allow picture-in-picture.";
+    case "NotAllowedError":
+      return "The browser requires a direct click on the picture-in-picture button. Click it in the player to open a floating window; restarting playback is not required.";
+    case "InvalidStateError":
+      return "The browser cannot use this video for picture-in-picture yet. Wait for a video frame to load. If it still fails, this source may have no usable video track or picture-in-picture may be disabled.";
+    default:
+      return "The browser could not open a floating video window and did not provide a specific cause. Keep watching here, or open this page in a browser that supports picture-in-picture.";
+  }
+}
+function videoClearPictureInPictureNotice(s) {
+  if (s.pipNotice) s.pipNotice.hidden = true;
+}
+function videoPictureInPicture(s) {
+  if (!videoPictureInPictureAvailable(s) || s.pipPending) return;
+  var exiting = document.pictureInPictureElement === s.video, source = s.source;
+  function failed(e) {
+    if (s.dead || s.source !== source) return;
+    var message = videoPictureInPictureMessage(e, exiting);
+    s.pipNoticeTitle.textContent = exiting ? "Picture-in-picture is still open" : "Picture-in-picture unavailable";
+    s.pipNoticeText.textContent = message;
+    s.pipNotice.hidden = false;
+    emit(s, "Error", message);
+  }
+  function finished() {
+    s.pipPending = false;
+    if (!s.dead) videoControlsState(s);
+  }
+  videoClearPictureInPictureNotice(s);
+  s.pipPending = true;
+  videoControlsState(s);
+  try {
+    var p = exiting ? document.exitPictureInPicture() : s.video.requestPictureInPicture();
+    Promise.resolve(p).then(function() {
+      if (!s.dead && s.source === source) videoClearPictureInPictureNotice(s);
+    }, failed).then(finished, finished);
+  } catch (e) {
+    failed(e);
+    finished();
+  }
+}
+function video(s, parent) {
+  var n = el("video", "blu-video-player__media");
+  n.controls = true;
+  n.playsInline = true;
+  n.preload = "none";
+  parent.append(n);
+  s.video = n;
+  videoActivity(s);
+  s.pause = function() {
+    if (s.isVideoOpen) {
+      videoActivityFlush(s, "Closed");
+      s.isVideoOpen = false;
+      s.suppressActivityPause = !n.paused;
+      videoExitPictureInPicture(s);
+    }
+    n.pause();
+  };
+  ["play", "pause", "ended"].forEach(function(e) {
+    on(s, n, e, function() {
+      emit(s, "PlaybackChanged", e === "play" ? "Playing" : e === "pause" ? "Paused" : "Ended");
+    });
+  });
+  on(s, n, "error", function() {
+    if (n.currentSrc) report(s, Error("The video could not be loaded. Check the media URL and response format."));
+  });
+}
+function videoOptions(s) {
+  var o = s.options, n = s.video, source = url(o.SourceUrl), captions = url(o.CaptionsUrl), corsChanged = !!captions !== !!s.captions;
+  if (captions) n.crossOrigin = "anonymous";
+  else n.removeAttribute("crossorigin");
+  if (s.source !== source || corsChanged || s.activity.mediaId !== String(o.MediaId || "")) {
+    if (s.source) videoActivityFlush(s, "SourceChanged");
+    s.suppressActivityPause = !n.paused;
+    n.pause();
+    videoExitPictureInPicture(s);
+    videoClearPictureInPictureNotice(s);
+    videoActivityReset(s);
+    s.source = source;
+    if (source) n.src = source;
+    else n.removeAttribute("src");
+    n.load();
+  }
+  n.poster = url(o.PosterUrl);
+  n.loop = !!o.IsLooping;
+  if (s.muted !== o.IsMuted) {
+    n.muted = !!o.IsMuted;
+    s.muted = o.IsMuted;
+  }
+  attr(n, "aria-label", o.Title || "Video");
+  n.style.aspectRatio = ratio(o.AspectRatio || "16 / 9");
+  if (s.captions !== captions || s.language !== o.CaptionLanguage) {
+    n.querySelectorAll("track").forEach(function(t) {
+      t.remove();
+    });
+    s.captionFailed = false;
+    if (captions) {
+      var track = el("track");
+      track.kind = "captions";
+      track.src = captions;
+      track.srclang = o.CaptionLanguage || "en";
+      track.label = "Captions";
+      track.default = true;
+      n.append(track);
+      on(s, track, "load", function() {
+        if (track.parentNode === n) videoControlsState(s);
+      });
+      on(s, track, "error", function() {
+        if (track.parentNode !== n) return;
+        s.captionFailed = true;
+        videoControlsState(s);
+        report(s, Error("Captions could not be loaded. Check the caption URL and cross-origin permissions."));
+      });
+    }
+    s.captions = captions;
+    s.language = o.CaptionLanguage;
+  }
+}
+function videoTime(value) {
+  value = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+  var hours = Math.floor(value / 3600), minutes = Math.floor(value % 3600 / 60), seconds = String(value % 60).padStart(2, "0");
+  return hours ? hours + ":" + String(minutes).padStart(2, "0") + ":" + seconds : minutes + ":" + seconds;
+}
+function videoIcon(name) {
+  var paths = { play: "M8 5 19 12 8 19Z", pause: "M8 5V19M16 5V19", volume: "M11 5 6 9H3V15H6L11 19ZM15 8Q20 12 15 16M18 5Q26 12 18 19", muted: "M11 5 6 9H3V15H6L11 19ZM16 9 22 15M22 9 16 15", fullscreen: "M8 3H3V8M16 3H21V8M21 16V21H16M8 21H3V16", exit: "M3 8H8V3M16 3V8H21M21 16H16V21M8 21V16H3", captions: "M3 5H21V19H3ZM10 9H6V15H10M18 9H14V15H18", pip: "M3 5H21V19H3ZM12 11H19V17H12Z" };
+  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"), path = document.createElementNS(svg.namespaceURI, "path");
+  attr(svg, "viewBox", "0 0 24 24");
+  attr(svg, "aria-hidden", "true");
+  attr(svg, "focusable", "false");
+  attr(path, "d", paths[name]);
+  attr(path, "fill", name === "play" ? "currentColor" : "none");
+  attr(path, "stroke", "currentColor");
+  attr(path, "stroke-width", "1.8");
+  attr(path, "stroke-linecap", "round");
+  attr(path, "stroke-linejoin", "round");
+  svg.append(path);
+  return svg;
+}
+function videoButton(s, label, icon, action, cls) {
+  var n = el("button", "blu-video-player__button " + (cls || ""));
+  n.type = "button";
+  attr(n, "aria-label", label);
+  n.title = label;
+  if (icon) n.append(videoIcon(icon));
+  else n.textContent = label;
+  on(s, n, "click", action);
+  return n;
+}
+function videoPlay(s) {
+  var n = s.video;
+  if (!s.source) return;
+  if (!n.paused) {
+    n.pause();
+    return;
+  }
+  if (n.ended) n.currentTime = 0;
+  report(s, null);
+  var pending = n.play();
+  if (pending) pending.catch(function(e) {
+    if (!s.dead && e.name !== "AbortError") report(s, Error("Playback could not start. Check the video source and try again."));
+  });
+}
+function videoSeek(s, time) {
+  var n = s.video;
+  if (Number.isFinite(n.duration) && n.duration > 0) {
+    videoActivitySample(s);
+    n.currentTime = Math.max(0, Math.min(n.duration, time));
+    videoControlsState(s);
+  }
+}
+function videoFullscreen(s) {
+  var n = s.video, frame = s.videoFrame, promise;
+  try {
+    if (document.fullscreenElement === frame) promise = document.exitFullscreen();
+    else if (frame.requestFullscreen && document.fullscreenEnabled) promise = frame.requestFullscreen();
+    else if (n.webkitEnterFullscreen) n.webkitEnterFullscreen();
+    if (promise) promise.catch(function() {
+      if (!s.dead) report(s, Error("Fullscreen is unavailable in this browser or embedded page."));
+    });
+  } catch (e) {
+    report(s, e);
+  }
+}
+function videoControlsState(s) {
+  if (s.dead || !s.videoControls) return;
+  var n = s.video, ready = Number.isFinite(n.duration) && n.duration > 0, playing = !n.paused && !n.ended, label = n.ended ? "Replay video" : playing ? "Pause video" : "Play video";
+  s.pauseGlass.hidden = playing || s.options.ShowPauseGlass === false;
+  if (s.playLabel !== label) {
+    s.playLabel = label;
+    attr(s.playButton, "aria-label", label);
+    s.playButton.title = label;
+    s.playButton.replaceChildren(videoIcon(playing ? "pause" : "play"));
+    attr(s.bigPlay, "aria-label", label);
+    s.bigPlay.title = label;
+  }
+  var moveFocus = document.activeElement === s.bigPlay;
+  s.bigPlay.hidden = playing || !!n.error || !s.source;
+  s.playButton.disabled = !s.source || !!n.error;
+  if (moveFocus && s.bigPlay.hidden && !s.playButton.disabled) s.playButton.focus();
+  s.timeline.disabled = !ready;
+  s.timeline.max = String(ready ? n.duration : 1);
+  s.timeline.value = String(ready ? n.currentTime : 0);
+  attr(s.timeline, "aria-valuetext", videoTime(n.currentTime) + " of " + videoTime(n.duration));
+  s.timeline.style.setProperty("--blu-video-progress", (ready ? n.currentTime / n.duration * 100 : 0) + "%");
+  s.time.textContent = videoTime(n.currentTime) + " / " + (n.duration === Infinity ? "Live" : videoTime(n.duration));
+  var muted = n.muted || n.volume === 0, volumeLabel = muted ? "Unmute video" : "Mute video";
+  if (s.volumeLabel !== volumeLabel) {
+    s.volumeLabel = volumeLabel;
+    attr(s.muteButton, "aria-label", volumeLabel);
+    s.muteButton.title = volumeLabel;
+    s.muteButton.replaceChildren(videoIcon(muted ? "muted" : "volume"));
+  }
+  s.volume.value = String(muted ? 0 : n.volume);
+  attr(s.volume, "aria-valuetext", Math.round((muted ? 0 : n.volume) * 100) + "%");
+  s.volume.style.setProperty("--blu-video-progress", (muted ? 0 : n.volume * 100) + "%");
+  var track = n.textTracks[0], hasCaptions = !!s.options.CaptionsUrl;
+  s.captionsButton.hidden = !hasCaptions;
+  s.captionsButton.disabled = !track || s.captionFailed;
+  attr(s.captionsButton, "aria-pressed", !!track && track.mode === "showing");
+  var full = document.fullscreenElement === s.videoFrame;
+  attr(s.fullButton, "aria-label", full ? "Exit fullscreen" : "Enter fullscreen");
+  s.fullButton.title = full ? "Exit fullscreen" : "Enter fullscreen";
+  s.pipButton.hidden = !videoPictureInPictureAvailable(s);
+  s.pipButton.disabled = !!s.pipPending || n.readyState < 2;
+  var pip = document.pictureInPictureElement === n;
+  attr(s.pipButton, "aria-pressed", pip);
+  attr(s.pipButton, "aria-label", pip ? "Exit picture-in-picture" : "Picture-in-picture");
+  s.pipButton.title = pip ? "Exit picture-in-picture" : "Picture-in-picture";
+  videoHeatmap(s);
+  s.speedButton.textContent = n.playbackRate + "\xD7";
+  s.speedChoices.forEach(function(b) {
+    attr(b, "aria-pressed", Number(b.dataset.rate) === n.playbackRate);
+  });
+}
+function videoControls(s, parent) {
+  var n = s.video;
+  s.videoFrame = attr(el("div", "blu-rich blu-video-player blu-video-player__frame"), "role", "group");
+  s.videoFrame.tabIndex = 0;
+  s.videoFrame.id = s.uid + "-player";
+  (parent || s.body).append(s.videoFrame);
+  s.stage = el("div", "blu-video-player__stage");
+  s.videoFrame.append(s.stage);
+  s.stage.append(n);
+  s.pauseGlass = attr(el("div", "blu-video-player__pause-glass"), "aria-hidden", "true");
+  s.stage.append(s.pauseGlass);
+  s.titleNode = el("div", "blu-video-player__title");
+  s.stage.append(s.titleNode);
+  s.bigPlay = videoButton(s, "Play video", "play", function() {
+    videoPlay(s);
+  }, "blu-video-player__big-play");
+  s.stage.append(s.bigPlay);
+  s.videoStatus = attr(el("span", "blu-video-player__status"), "role", "status");
+  s.videoStatus.hidden = true;
+  s.stage.append(s.videoStatus);
+  s.videoControls = el("div", "blu-video-player__controls");
+  s.videoFrame.append(s.videoControls);
+  s.timeline = attr(el("input", "blu-video-player__range blu-video-player__timeline"), "aria-label", "Video position");
+  s.timeline.type = "range";
+  s.timeline.min = 0;
+  s.timeline.max = 1;
+  s.timeline.step = 0.1;
+  s.timeline.value = 0;
+  s.timeline.disabled = true;
+  s.seekWrap = el("div", "blu-video-player__seek");
+  s.videoControls.append(s.seekWrap);
+  s.heatmap = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  attr(s.heatmap, "class", "blu-video-player__heatmap");
+  attr(s.heatmap, "viewBox", "0 0 1000 44");
+  attr(s.heatmap, "preserveAspectRatio", "none");
+  attr(s.heatmap, "aria-hidden", "true");
+  s.heatmap.style.display = "none";
+  s.heatmapPath = document.createElementNS(s.heatmap.namespaceURI, "path");
+  s.heatmap.append(s.heatmapPath);
+  s.seekHint = el("span", "blu-video-player__seek-hint");
+  attr(s.seekHint, "aria-hidden", "true");
+  s.seekHint.hidden = true;
+  s.heatmapDescription = el("span", "blu-video-player__sr");
+  s.heatmapDescription.id = s.uid + "-viewing-description";
+  s.seekWrap.append(s.heatmap, s.seekHint, s.heatmapDescription, s.timeline);
+  on(s, s.seekWrap, "pointermove", function(e) {
+    var r = s.timeline.getBoundingClientRect();
+    videoHeatmapHint(s, (e.clientX - r.left) / r.width * n.duration);
+  });
+  on(s, s.timeline, "focus", function() {
+    videoHeatmapHint(s, n.currentTime);
+  });
+  on(s, s.timeline, "input", function() {
+    videoHeatmapHint(s, Number(s.timeline.value));
+  });
+  var row = el("div", "blu-video-player__row");
+  s.videoControls.append(row);
+  s.playButton = videoButton(s, "Play video", "play", function() {
+    videoPlay(s);
+  }, "blu-video-player__primary");
+  s.muteButton = videoButton(s, "Mute video", "volume", function() {
+    var wasMuted = n.muted || n.volume === 0;
+    if (n.volume === 0) n.volume = s.lastVolume || 1;
+    else s.lastVolume = n.volume;
+    n.muted = !wasMuted;
+  });
+  s.volume = attr(el("input", "blu-video-player__range blu-video-player__volume"), "aria-label", "Volume");
+  s.volume.type = "range";
+  s.volume.min = 0;
+  s.volume.max = 1;
+  s.volume.step = 0.05;
+  s.volume.value = 1;
+  s.time = el("span", "blu-video-player__time", "0:00 / 0:00");
+  attr(s.time, "aria-live", "off");
+  var spacer = el("span", "blu-video-player__spacer");
+  s.captionsButton = videoButton(s, "Captions", "captions", function() {
+    var t = n.textTracks[0];
+    if (t) t.mode = t.mode === "showing" ? "hidden" : "showing";
+    videoControlsState(s);
+  });
+  attr(s.captionsButton, "aria-pressed", "false");
+  s.speedWrap = el("div", "blu-video-player__speed");
+  s.speedButton = videoButton(s, "Playback speed", null, function() {
+    s.speedPanel.hidden = !s.speedPanel.hidden;
+    attr(s.speedButton, "aria-expanded", !s.speedPanel.hidden);
+  });
+  attr(s.speedButton, "aria-label", "Playback speed");
+  attr(s.speedButton, "aria-expanded", "false");
+  s.speedPanel = attr(el("div", "blu-video-player__speed-panel"), "role", "group");
+  s.speedPanel.id = s.uid + "-speed";
+  attr(s.speedPanel, "aria-label", "Playback speed");
+  attr(s.speedButton, "aria-controls", s.speedPanel.id);
+  s.speedPanel.hidden = true;
+  s.speedPanel.append(el("span", "blu-video-player__speed-label", "Playback speed"));
+  s.speedChoices = [0.5, 0.75, 1, 1.25, 1.5, 2].map(function(rate) {
+    var b = videoButton(s, rate === 1 ? "Normal" : rate + "\xD7", null, function() {
+      n.playbackRate = rate;
+      s.speedPanel.hidden = true;
+      attr(s.speedButton, "aria-expanded", "false");
+      s.speedButton.focus();
+      videoControlsState(s);
+    });
+    b.dataset.rate = rate;
+    s.speedPanel.append(b);
+    return b;
+  });
+  s.speedWrap.append(s.speedButton, s.speedPanel);
+  s.fullButton = videoButton(s, "Enter fullscreen", "fullscreen", function() {
+    videoFullscreen(s);
+  });
+  s.fullButton.hidden = !(document.fullscreenEnabled && s.videoFrame.requestFullscreen) && !n.webkitEnterFullscreen;
+  s.pipButton = videoButton(s, "Picture-in-picture", "pip", function() {
+    videoPictureInPicture(s);
+  });
+  row.append(s.playButton, s.muteButton, s.volume, s.time, spacer, s.captionsButton, s.speedWrap, s.pipButton, s.fullButton);
+  s.pipNotice = el("div", "blu-video-player__notice");
+  s.pipNotice.hidden = true;
+  var noticeIcon = el("span", "blu-video-player__notice-icon");
+  noticeIcon.append(videoIcon("pip"));
+  var noticeCopy = attr(el("div", "blu-video-player__notice-copy"), "role", "status");
+  attr(noticeCopy, "aria-atomic", "true");
+  s.pipNoticeTitle = el("strong");
+  s.pipNoticeText = el("p");
+  noticeCopy.append(s.pipNoticeTitle, s.pipNoticeText);
+  var dismiss = videoButton(s, "Dismiss picture-in-picture message", null, function() {
+    videoClearPictureInPictureNotice(s);
+    s.pipButton.focus();
+  }, "blu-video-player__notice-dismiss");
+  dismiss.textContent = "\xD7";
+  s.pipNotice.append(noticeIcon, noticeCopy, dismiss);
+  s.videoFrame.append(s.pipNotice);
+  n.controls = false;
+  n.preload = s.kind === "VideoLightbox" ? "none" : "metadata";
+  attr(n, "tabindex", "-1");
+  on(s, s.timeline, "input", function() {
+    videoSeek(s, Number(s.timeline.value));
+  });
+  on(s, s.volume, "input", function() {
+    n.volume = Number(s.volume.value);
+    n.muted = n.volume === 0;
+  });
+  on(s, n, "click", function() {
+    videoPlay(s);
+  });
+  ["play", "pause", "ended", "timeupdate", "durationchange", "loadedmetadata", "loadeddata", "enterpictureinpicture", "leavepictureinpicture", "volumechange", "ratechange", "emptied", "error"].forEach(function(e) {
+    on(s, n, e, function() {
+      videoControlsState(s);
+    });
+  });
+  ["waiting", "seeking", "loadstart"].forEach(function(e) {
+    on(s, n, e, function() {
+      s.videoStatus.textContent = "Loading video\u2026";
+      s.videoStatus.hidden = !s.source;
+    });
+  });
+  ["playing", "canplay", "seeked", "pause", "error", "emptied"].forEach(function(e) {
+    on(s, n, e, function() {
+      s.videoStatus.hidden = true;
+    });
+  });
+  on(s, n.textTracks, "change", function() {
+    videoControlsState(s);
+  });
+  on(s, n.textTracks, "addtrack", function() {
+    videoControlsState(s);
+  });
+  on(s, document, "fullscreenchange", function() {
+    videoControlsState(s);
+  });
+  on(s, document, "pointerdown", function(e) {
+    if (!s.speedWrap.contains(e.target)) {
+      s.speedPanel.hidden = true;
+      attr(s.speedButton, "aria-expanded", "false");
+    }
+  });
+  on(s, s.speedWrap, "focusout", function(e) {
+    if (!s.speedWrap.contains(e.relatedTarget)) {
+      s.speedPanel.hidden = true;
+      attr(s.speedButton, "aria-expanded", "false");
+    }
+  });
+  on(s, s.videoFrame, "keydown", function(e) {
+    if (e.key === "Escape" && !s.speedPanel.hidden) {
+      e.preventDefault();
+      e.stopPropagation();
+      s.speedPanel.hidden = true;
+      attr(s.speedButton, "aria-expanded", "false");
+      s.speedButton.focus();
+      return;
+    }
+    if (e.target !== s.videoFrame || e.altKey || e.ctrlKey || e.metaKey) return;
+    if (e.key === " " || e.key === "k") {
+      e.preventDefault();
+      videoPlay(s);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      videoSeek(s, n.currentTime + (e.key === "ArrowLeft" ? -5 : 5));
+    } else if (e.key === "m") {
+      e.preventDefault();
+      n.muted = !n.muted;
+    } else if (e.key === "f") {
+      e.preventDefault();
+      videoFullscreen(s);
+    }
+  });
+  attr(s.videoFrame, "aria-keyshortcuts", "Space k ArrowLeft ArrowRight m f");
+}
+function videoControlTheme(s) {
+  var value = String(s.options.ControlColor || "Primary"), key = value.toLowerCase(), theme = /^(default|primary|secondary|success|processing|warning|error|danger|magenta|red|volcano|orange|gold|lime|green|cyan|blue|geekblue|purple)$/.test(key), hex = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value);
+  if (!theme && !hex) throw Error("ControlColor must be a ComponentColor name or a #RGB/#RRGGBB color.");
+  var accent = theme ? "var(--bluui-color-" + key + "-solid,var(--bluui-color-primary-solid,#4f46e5))" : value, text = theme ? "var(--bluui-color-" + key + "-text," + accent + ")" : value, contrast = "var(--bluui-color-" + key + "-contrast,#fff)", soft = theme ? "var(--bluui-color-" + key + "-soft,var(--bluui-surface-muted,#f1f5f9))" : "color-mix(in srgb, " + value + " 14%, var(--bluui-surface,#fff))";
+  if (hex) {
+    var digits = value.slice(1);
+    if (digits.length === 3) digits = digits.split("").map(function(c) {
+      return c + c;
+    }).join("");
+    var rgb = [0, 2, 4].map(function(i) {
+      var c = parseInt(digits.slice(i, i + 2), 16) / 255;
+      return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    contrast = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2] > 0.179 ? "#000" : "#fff";
+  }
+  [s.root, s.videoFrame, s.player].forEach(function(n) {
+    if (!n) return;
+    n.style.setProperty("--blu-video-accent", accent);
+    n.style.setProperty("--blu-video-control-text", text);
+    n.style.setProperty("--blu-video-contrast", contrast);
+    n.style.setProperty("--blu-video-soft", soft);
+  });
+}
+function videoPlayerOptions(s) {
+  videoControlTheme(s);
+  var raw = s.options.ViewingHeatmapJson || "[]";
+  if (raw !== s.heatmapRaw) {
+    s.heatmapRows = videoHeatmapRows(raw);
+    s.heatmapRaw = raw;
+  }
+  videoOptions(s);
+  s.titleNode.textContent = s.options.Title || "";
+  s.titleNode.hidden = !s.options.Title;
+  attr(s.videoFrame, "aria-label", s.options.Title || "Video player");
+  attr(s.videoFrame, "data-rounded", !!s.options.IsRounded);
+  videoControlsState(s);
+}
+function installVideoPlayer() {
+  return register2("VideoPlayer", () => define("VideoPlayer", "video-player", function(s) {
+    video(s, s.body);
+    videoControls(s);
+  }, function(s) {
+    videoPlayerOptions(s);
+  }));
+}
+export {
+  installVideoPlayer
+};