@instructure/studio-player 1.2.3 → 1.3.0

package/dist/{vidstack-youtube-y0agPfx8.js → vidstack-youtube-Dgmpq-MT.js}

@@ -1,56 +1,57 @@
-var G = Object.defineProperty;
-var z = (a) => {
+var Q = Object.defineProperty;
+var B = (a) => {
   throw TypeError(a);
 };
-var H = (a, o, e) => o in a ? G(a, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[o] = e;
-var w = (a, o, e) => H(a, typeof o != "symbol" ? o + "" : o, e), E = (a, o, e) => o.has(a) || z("Cannot " + e);
-var s = (a, o, e) => (E(a, o, "read from private field"), e ? e.call(a) : o.get(a)), p = (a, o, e) => o.has(a) ? z("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, e), l = (a, o, e, t) => (E(a, o, "write to private field"), t ? t.call(a, e) : o.set(a, e), e), r = (a, o, e) => (E(a, o, "access private method"), e);
-import { E as Q, d as W, x as X, p as Z, y as ee, a as te, J as se, z as ie, Y as k, K as ae, M as _, T as j, O as ne } from "./vidstack-VlpmInuO.js";
-const oe = /(?:youtu\.be|youtube|youtube\.com|youtube-nocookie\.com)(?:\/shorts)?\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|)((?:\w|-){11})/, C = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
-function B(a) {
+var W = (a, o, e) => o in a ? Q(a, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[o] = e;
+var w = (a, o, e) => W(a, typeof o != "symbol" ? o + "" : o, e), E = (a, o, e) => o.has(a) || B("Cannot " + e);
+var s = (a, o, e) => (E(a, o, "read from private field"), e ? e.call(a) : o.get(a)), p = (a, o, e) => o.has(a) ? B("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, e), l = (a, o, e, t) => (E(a, o, "write to private field"), t ? t.call(a, e) : o.set(a, e), e), r = (a, o, e) => (E(a, o, "access private method"), e);
+import { E as X, d as Z, x as ee, p as te, y as se, a as ie, J as ae, z as ne, Y as k, K as oe, M as _, T as j, O as re } from "./vidstack-B8iikcPv.js";
+const ue = /(?:youtu\.be|youtube|youtube\.com|youtube-nocookie\.com)(?:\/shorts)?\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|)((?:\w|-){11})/, Y = /* @__PURE__ */ new Map(), V = /* @__PURE__ */ new Map();
+function F(a) {
   var o;
-  return (o = a.match(oe)) == null ? void 0 : o[1];
+  return (o = a.match(ue)) == null ? void 0 : o[1];
 }
-async function re(a, o) {
-  if (C.has(a)) return C.get(a);
-  if (R.has(a)) return R.get(a);
+async function de(a, o) {
+  if (Y.has(a)) return Y.get(a);
+  if (V.has(a)) return V.get(a);
   const e = new Promise(async (t) => {
     const u = ["maxresdefault", "sddefault", "hqdefault"];
-    for (const h of u)
-      for (const d of [!0, !1]) {
-        const c = ue(a, h, d);
+    for (const d of u)
+      for (const h of [!0, !1]) {
+        const c = he(a, d, h);
         if ((await fetch(c, {
           mode: "no-cors",
           signal: o.signal
         })).status < 400) {
-          C.set(a, c), t(c);
+          Y.set(a, c), t(c);
           return;
         }
       }
-  }).catch(() => "").finally(() => R.delete(a));
-  return R.set(a, e), e;
+  }).catch(() => "").finally(() => V.delete(a));
+  return V.set(a, e), e;
 }
-function ue(a, o, e) {
+function he(a, o, e) {
   return `https://i.ytimg.com/${e ? "vi_webp" : "vi"}/${a}/${o}.${e ? "webp" : "jpg"}`;
 }
-const ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  findYouTubePoster: re,
-  resolveYouTubeVideoId: B
+  findYouTubePoster: de,
+  resolveYouTubeVideoId: F
 }, Symbol.toStringTag, { value: "Module" }));
-var n, g, P, S, v, b, y, M, i, he, ce, F, U, m, L, I, J, Y, V, N, q, D, $, K;
-class de extends Q {
+var n, b, P, S, O, T, g, y, R, i, le, pe, U, L, m, I, J, N, D, C, q, K, x, M, A;
+class ce extends X {
   constructor(e, t) {
     super(e);
     p(this, i);
     w(this, "$$PROVIDER_TYPE", "YOUTUBE");
-    w(this, "scope", W());
+    w(this, "scope", Z());
     p(this, n);
-    p(this, g, X(""));
+    p(this, b, ee(""));
     p(this, P, -1);
     p(this, S, null);
-    p(this, v, -1);
-    p(this, b, !1);
+    p(this, O, null);
+    p(this, T, -1);
+    p(this, g, !1);
     p(this, y, /* @__PURE__ */ new Map());
     /**
      * Sets the player's interface language. The parameter value is an ISO 639-1 two-letter
@@ -84,7 +85,7 @@ class de extends Q {
      *
      * @defaultValue `undefined`
      */
-    p(this, M);
+    p(this, R);
     l(this, n, t);
   }
   /**
@@ -94,7 +95,7 @@ class de extends Q {
    * @defaultValue `undefined`
    */
   set encryptedPayload(e) {
-    l(this, M, e);
+    l(this, R, e);
   }
   get currentSrc() {
     return s(this, S);
@@ -103,16 +104,16 @@ class de extends Q {
     return "youtube";
   }
   get videoId() {
-    return s(this, g).call(this);
+    return s(this, b).call(this);
   }
   preconnect() {
-    Z(this.getOrigin());
+    te(this.getOrigin());
   }
   setup() {
-    super.setup(), ee(r(this, i, F).bind(this)), s(this, n).notify("provider-setup", this);
+    super.setup(), se(r(this, i, U).bind(this)), s(this, n).notify("provider-setup", this);
   }
   destroy() {
-    r(this, i, D).call(this);
+    r(this, i, x).call(this);
     const e = "provider destroyed";
     for (const t of s(this, y).values())
       for (const { reject: u } of t) u(e);
@@ -137,12 +138,12 @@ class de extends Q {
     r(this, i, m).call(this, "setPlaybackRate", e);
   }
   async loadSource(e) {
-    if (!te(e.src)) {
-      l(this, S, null), s(this, g).set("");
+    if (!ie(e.src)) {
+      l(this, S, null), s(this, b).set("");
       return;
     }
-    const t = B(e.src);
-    s(this, g).set(t ?? ""), l(this, S, e);
+    const t = F(e.src);
+    s(this, b).set(t ?? ""), l(this, S, e);
   }
   getOrigin() {
     switch (!0) {
@@ -155,145 +156,144 @@ class de extends Q {
     }
   }
   buildParams() {
-    const { keyDisabled: e } = s(this, n).$props, { muted: t, playsInline: u, nativeControls: h } = s(this, n).$state, d = h();
+    const { keyDisabled: e } = s(this, n).$props, { muted: t, playsInline: u, nativeControls: d } = s(this, n).$state, h = d();
     return {
       rel: 0,
       autoplay: 0,
-      cc_lang_pref: this.language,
-      cc_load_policy: d ? 1 : void 0,
       color: this.color,
-      controls: d ? 1 : 0,
-      disablekb: !d || e() ? 1 : 0,
+      cc_load_policy: 1,
+      controls: h ? 1 : 0,
+      disablekb: !h || e() ? 1 : 0,
       enablejsapi: 1,
       fs: 1,
       hl: this.language,
-      iv_load_policy: d ? 1 : 3,
+      iv_load_policy: h ? 1 : 3,
       mute: t() ? 1 : 0,
       playsinline: u() ? 1 : 0,
-      videoId: s(this, g).call(this),
-      embed_config: r(this, i, U).call(this)
+      videoId: s(this, b).call(this),
+      embed_config: r(this, i, L).call(this)
     };
   }
   onLoad() {
     window.setTimeout(() => this.postMessage({ event: "listening" }), 100);
   }
   onMessage({ info: e }, t) {
-    var c;
+    var c, $;
     if (!e) return;
-    const { title: u, intrinsicDuration: h, playbackRate: d } = s(this, n).$state;
-    if (ae(e.videoData) && e.videoData.title !== u() && s(this, n).notify("title-change", e.videoData.title, t), _(e.duration) && e.duration !== h()) {
+    const { title: u, intrinsicDuration: d, playbackRate: h } = s(this, n).$state;
+    if (oe(e.videoData) && e.videoData.title !== u() && s(this, n).notify("title-change", e.videoData.title, t), (c = e.namespaces) != null && c.includes("captions") && e.captions && s(this, O) === null && (l(this, O, e.captions.tracklist), s(this, n).notify("loaded-metadata")), _(e.duration) && e.duration !== d()) {
       if (_(e.videoLoadedFraction)) {
-        const f = ((c = e.progressState) == null ? void 0 : c.loaded) ?? e.videoLoadedFraction * e.duration, T = new j(0, e.duration);
-        r(this, i, Y).call(this, f, T, t);
+        const f = (($ = e.progressState) == null ? void 0 : $.loaded) ?? e.videoLoadedFraction * e.duration, v = new j(0, e.duration);
+        r(this, i, D).call(this, f, v, t);
       }
       s(this, n).notify("duration-change", e.duration, t);
     }
-    if (_(e.playbackRate) && e.playbackRate !== d() && s(this, n).notify("rate-change", e.playbackRate, t), e.progressState) {
-      const { current: f, seekableStart: T, seekableEnd: O, loaded: A, duration: x } = e.progressState;
-      r(this, i, J).call(this, f, t), r(this, i, Y).call(this, A, new j(T, O), t), x !== h() && s(this, n).notify("duration-change", x, t);
+    if (_(e.playbackRate) && e.playbackRate !== h() && s(this, n).notify("rate-change", e.playbackRate, t), e.progressState) {
+      const { current: f, seekableStart: v, seekableEnd: G, loaded: H, duration: z } = e.progressState;
+      r(this, i, N).call(this, f, t), r(this, i, D).call(this, H, new j(v, G), t), z !== d() && s(this, n).notify("duration-change", z, t);
     }
-    if (_(e.volume) && ne(e.muted) && !s(this, b)) {
+    if (_(e.volume) && re(e.muted) && !s(this, g)) {
       const f = {
         muted: e.muted,
         volume: e.volume / 100
       };
       s(this, n).notify("volume-change", f, t);
     }
-    _(e.playerState) && e.playerState !== s(this, P) && r(this, i, q).call(this, e.playerState, t);
+    _(e.playerState) && e.playerState !== s(this, P) && r(this, i, K).call(this, e.playerState, t);
   }
 }
-n = new WeakMap(), g = new WeakMap(), P = new WeakMap(), S = new WeakMap(), v = new WeakMap(), b = new WeakMap(), y = new WeakMap(), M = new WeakMap(), i = new WeakSet(), he = function(e) {
+n = new WeakMap(), b = new WeakMap(), P = new WeakMap(), S = new WeakMap(), O = new WeakMap(), T = new WeakMap(), g = new WeakMap(), y = new WeakMap(), R = new WeakMap(), i = new WeakSet(), le = function(e) {
   var t;
-  (t = r(this, i, $).call(this, "playVideo")) == null || t.reject(e);
-}, ce = function(e) {
+  (t = r(this, i, M).call(this, "playVideo")) == null || t.reject(e);
+}, pe = function(e) {
   var t;
-  (t = r(this, i, $).call(this, "pauseVideo")) == null || t.reject(e);
-}, F = function() {
-  r(this, i, D).call(this);
-  const e = s(this, g).call(this);
+  (t = r(this, i, M).call(this, "pauseVideo")) == null || t.reject(e);
+}, U = function() {
+  r(this, i, x).call(this);
+  const e = s(this, b).call(this);
   if (!e) {
     this.src.set("");
     return;
   }
   this.src.set(`${this.getOrigin()}/embed/${e}`), s(this, n).notify("load-start");
-}, U = function() {
-  const e = s(this, M);
-  if (!se(e))
-    return JSON.stringify({ enc: e });
+}, L = function() {
+  const e = s(this, R);
+  if (!ae(e))
+    return JSON.stringify({ enc: e, hideTitle: !0 });
 }, m = function(e, t) {
-  let u = ie(), h = s(this, y).get(e);
-  return h || s(this, y).set(e, h = []), h.push(u), this.postMessage({
+  let u = ne(), d = s(this, y).get(e);
+  return d || s(this, y).set(e, d = []), d.push(u), this.postMessage({
     event: "command",
     func: e,
     args: t ? [t] : void 0
   }), u.promise;
-}, L = function(e) {
-  s(this, n).notify("loaded-metadata"), s(this, n).notify("loaded-data"), s(this, n).delegate.ready(void 0, e);
 }, I = function(e) {
+  s(this, n).notify("loaded-data"), s(this, n).delegate.ready(void 0, e);
+}, J = function(e) {
   var t;
-  (t = r(this, i, $).call(this, "pauseVideo")) == null || t.resolve(), s(this, n).notify("pause", void 0, e);
-}, J = function(e, t) {
-  const { duration: u, realCurrentTime: h } = s(this, n).$state, d = s(this, P) === k.Ended, c = d ? u() : e;
-  s(this, n).notify("time-change", c, t), !d && Math.abs(c - h()) > 1 && s(this, n).notify("seeking", c, t);
-}, Y = function(e, t, u) {
-  const h = {
+  (t = r(this, i, M).call(this, "pauseVideo")) == null || t.resolve(), s(this, n).notify("pause", void 0, e);
+}, N = function(e, t) {
+  const { duration: u, realCurrentTime: d } = s(this, n).$state, h = s(this, P) === k.Ended, c = h ? u() : e;
+  s(this, n).notify("time-change", c, t), !h && Math.abs(c - d()) > 1 && s(this, n).notify("seeking", c, t);
+}, D = function(e, t, u) {
+  const d = {
     buffered: new j(0, e),
     seekable: t
   };
-  s(this, n).notify("progress", h, u);
-  const { seeking: d, realCurrentTime: c } = s(this, n).$state;
-  d() && e > c() && r(this, i, V).call(this, u);
-}, V = function(e) {
+  s(this, n).notify("progress", d, u);
+  const { seeking: h, realCurrentTime: c } = s(this, n).$state;
+  h() && e > c() && r(this, i, C).call(this, u);
+}, C = function(e) {
   const { paused: t, realCurrentTime: u } = s(this, n).$state;
-  window.clearTimeout(s(this, v)), l(this, v, window.setTimeout(
+  window.clearTimeout(s(this, T)), l(this, T, window.setTimeout(
     () => {
-      s(this, n).notify("seeked", u(), e), l(this, v, -1);
+      s(this, n).notify("seeked", u(), e), l(this, T, -1);
     },
     t() ? 100 : 0
   ));
-}, N = function(e) {
+}, q = function(e) {
   const { seeking: t } = s(this, n).$state;
-  t() && r(this, i, V).call(this, e), s(this, n).notify("pause", void 0, e), s(this, n).notify("end", void 0, e);
-}, q = function(e, t) {
-  var O;
-  const { paused: u, seeking: h } = s(this, n).$state, d = e === k.Playing, c = e === k.Buffering, f = r(this, i, K).call(this, "playVideo"), T = u() && (c || d);
-  if (c && s(this, n).notify("waiting", void 0, t), h() && d && r(this, i, V).call(this, t), s(this, b) && d) {
-    this.pause(), l(this, b, !1), this.setMuted(s(this, n).$state.muted());
+  t() && r(this, i, C).call(this, e), s(this, n).notify("pause", void 0, e), s(this, n).notify("end", void 0, e);
+}, K = function(e, t) {
+  var v;
+  const { paused: u, seeking: d } = s(this, n).$state, h = e === k.Playing, c = e === k.Buffering, $ = r(this, i, A).call(this, "playVideo"), f = u() && (c || h);
+  if (c && s(this, n).notify("waiting", void 0, t), d() && h && r(this, i, C).call(this, t), s(this, g) && h) {
+    this.pause(), l(this, g, !1), this.setMuted(s(this, n).$state.muted());
     return;
   }
-  if (!f && T) {
-    l(this, b, !0), this.setMuted(!0);
+  if (!$ && f) {
+    l(this, g, !0), this.setMuted(!0);
     return;
   }
-  switch (T && ((O = r(this, i, $).call(this, "playVideo")) == null || O.resolve(), s(this, n).notify("play", void 0, t)), e) {
+  switch (f && ((v = r(this, i, M).call(this, "playVideo")) == null || v.resolve(), s(this, n).notify("play", void 0, t)), e) {
     case k.Cued:
-      r(this, i, L).call(this, t);
+      r(this, i, I).call(this, t);
       break;
     case k.Playing:
       s(this, n).notify("playing", void 0, t);
       break;
     case k.Paused:
-      r(this, i, I).call(this, t);
+      r(this, i, J).call(this, t);
       break;
     case k.Ended:
-      r(this, i, N).call(this, t);
+      r(this, i, q).call(this, t);
       break;
   }
   l(this, P, e);
-}, D = function() {
-  l(this, P, -1), l(this, v, -1), l(this, b, !1);
-}, $ = function(e) {
+}, x = function() {
+  l(this, P, -1), l(this, T, -1), l(this, g, !1);
+}, M = function(e) {
   var t;
   return (t = s(this, y).get(e)) == null ? void 0 : t.shift();
-}, K = function(e) {
+}, A = function(e) {
   var t;
   return !!((t = s(this, y).get(e)) != null && t.length);
 };
-const fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  YouTubeProvider: de
+  YouTubeProvider: ce
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  fe as p,
-  ye as u
+  be as p,
+  me as u
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/studio-player",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": false,
   "description": "Next generation media player for Instructure",
   "module": "./dist/studio-player.es.js",
@@ -66,10 +66,12 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.3",
+    "@nanostores/react": "^1.0.0",
     "clsx": "^2.1.1",
     "dashjs": "4.7.4",
     "i18next": "^24.2.1",
     "i18next-resources-to-backend": "^1.2.1",
+    "nanostores": "^1.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.4.0"