@instructure/studio-player 1.2.4 → 1.3.0

package/dist/types.d.ts

@@ -1,10 +1,12 @@
 import { ReactSVGElement } from 'react';
 export type { VideoMimeType, MediaRemoteControl, MediaPlayerInstance, MediaCrossOrigin, } from '@vidstack/react';
+export type CaptionSourceType = 'youtube' | 'standard';
 export type CaptionMetaData = {
-    src: string;
+    src?: string;
     label: string;
     language: string;
     type: 'vtt' | 'srt';
+    sourceType?: CaptionSourceType;
 };
 export type CaptionOffsetOverride = {
     top: string;

package/dist/{vidstack-DFQqpjQI.js → vidstack-B8iikcPv.js}

@@ -7,7 +7,7 @@ var y = (n, e, t) => Qw(n, typeof e != "symbol" ? e + "" : e, t), cl = (n, e, t)
 var s = (n, e, t) => (cl(n, e, "read from private field"), t ? t.call(n) : e.get(n)), c = (n, e, t) => e.has(n) ? zu("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), u = (n, e, t, i) => (cl(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), a = (n, e, t) => (cl(n, e, "access private method"), t);
 import { jsx as N, Fragment as zw, jsxs as Jr } from "react/jsx-runtime";
 import * as $ from "react";
-import { g as Yw, a as Xw, i as Yu, h as Jw, b as Zw, c as tT, d as eT, e as iT, f as sT } from "./vidstack-google-cast-DsFCd0_r.js";
+import { g as Yw, a as Xw, i as Yu, h as Jw, b as Zw, c as tT, d as eT, e as iT, f as sT } from "./vidstack-google-cast-D3ys_R-E.js";
 const li = Symbol(0);
 let mh = !1, $l = !1, Qe = null, Qn = null, Ae = null, ye = 0, jn = [], $u = {};
 const nT = () => {
@@ -1058,6 +1058,7 @@ class Ns extends Gd {
     y(this, "language", "");
     y(this, "kind");
     y(this, "default", !1);
+    y(this, "sourceType");
     c(this, Ca, !1);
     c(this, Si, 0);
     c(this, Xs, "disabled");
@@ -2808,10 +2809,7 @@ nr = new WeakMap(), Ci = new WeakMap(), Oa = new WeakMap(), rr = new WeakMap(),
   }, i));
 }, Nl = function(t, i) {
   var r;
-  this.$state.controlsVisible() !== t && (this.$state.controlsVisible.set(t), !t && document.activeElement && ((r = this.el) != null && r.contains(document.activeElement)) && (u(this, rs, document.activeElement), requestAnimationFrame(() => {
-    var o;
-    (o = this.el) == null || o.focus({ preventScroll: !0 });
-  })), this.dispatch("controls-change", {
+  this.$state.controlsVisible() !== t && (this.$state.controlsVisible.set(t), !t && document.activeElement && ((r = this.el) != null && r.contains(document.activeElement)) && u(this, rs, document.activeElement), this.dispatch("controls-change", {
     detail: t,
     trigger: i
   }));
@@ -2994,7 +2992,7 @@ class G$ {
     return "audio";
   }
   async load(e) {
-    return new (await import("./vidstack-audio-C8BDTOBT.js")).AudioProvider(this.target, e);
+    return new (await import("./vidstack-audio-Bq1pJf-F.js")).AudioProvider(this.target, e);
   }
 }
 class Du {
@@ -3009,7 +3007,7 @@ class Du {
     return "video";
   }
   async load(e) {
-    return new (await import("./vidstack-video-detMAOO-.js")).VideoProvider(this.target, e);
+    return new (await import("./vidstack-video-CqIaj_35.js")).VideoProvider(this.target, e);
   }
 }
 const Mh = class Mh extends Du {
@@ -3021,7 +3019,7 @@ const Mh = class Mh extends Du {
     return Mh.supported && ca(t);
   }
   async load(t) {
-    return new (await import("./vidstack-hls-DOGlQvLk.js")).HLSProvider(this.target, t);
+    return new (await import("./vidstack-hls-BytcbBHn.js")).HLSProvider(this.target, t);
   }
 };
 y(Mh, "supported", Mu());
@@ -3845,7 +3843,7 @@ const qh = class qh extends Du {
     return qh.supported && Lu(t);
   }
   async load(t) {
-    return new (await import("./vidstack-dash-CcyKz4DV.js")).DASHProvider(this.target, t);
+    return new (await import("./vidstack-dash-Bi8vMZlt.js")).DASHProvider(this.target, t);
   }
 };
 y(qh, "supported", FT());
@@ -3871,10 +3869,10 @@ class av {
     return "video";
   }
   async load(e) {
-    return new (await import("./vidstack-vimeo-BIMDkpy7.js").then((t) => t.p)).VimeoProvider(this.target, e);
+    return new (await import("./vidstack-vimeo-B9SDrle5.js").then((t) => t.p)).VimeoProvider(this.target, e);
   }
   async loadPoster(e, t, i) {
-    const { resolveVimeoVideoId: r, getVimeoVideoInfo: o } = await import("./vidstack-vimeo-BIMDkpy7.js").then((d) => d.u);
+    const { resolveVimeoVideoId: r, getVimeoVideoInfo: o } = await import("./vidstack-vimeo-B9SDrle5.js").then((d) => d.u);
     if (!R(e.src)) return null;
     const { videoId: h, hash: l } = r(e.src);
     return h ? o(h, i, l).then((d) => d ? d.poster : null) : null;
@@ -3905,10 +3903,10 @@ class ov {
     return "video";
   }
   async load(e) {
-    return new (await import("./vidstack-youtube-ICZwIt3U.js").then((t) => t.p)).YouTubeProvider(this.target, e);
+    return new (await import("./vidstack-youtube-Dgmpq-MT.js").then((t) => t.p)).YouTubeProvider(this.target, e);
   }
   async loadPoster(e, t, i) {
-    const { findYouTubePoster: r, resolveYouTubeVideoId: o } = await import("./vidstack-youtube-ICZwIt3U.js").then((l) => l.u), h = R(e.src) && o(e.src);
+    const { findYouTubePoster: r, resolveYouTubeVideoId: o } = await import("./vidstack-youtube-Dgmpq-MT.js").then((l) => l.u), h = R(e.src) && o(e.src);
     return h ? r(h, i) : null;
   }
 }
@@ -9543,7 +9541,7 @@ class Mk {
   async load(e) {
     if (!s(this, Rs))
       throw Error("[vidstack] google cast player was not initialized");
-    return new (await import("./vidstack-google-cast-DsFCd0_r.js").then((t) => t.p)).GoogleCastProvider(s(this, Rs), e);
+    return new (await import("./vidstack-google-cast-D3ys_R-E.js").then((t) => t.p)).GoogleCastProvider(s(this, Rs), e);
   }
 }
 Rs = new WeakMap(), Yt = new WeakSet(), _w = async function(e) {

package/dist/{vidstack-audio-C8BDTOBT.js → vidstack-audio-Bq1pJf-F.js}

@@ -1,8 +1,8 @@
 var o = Object.defineProperty;
 var a = (i, e, t) => e in i ? o(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
 var r = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
-import { s as p, H as d } from "./vidstack-DFQqpjQI.js";
-import { H as u } from "./vidstack-html-C4pIs4NF.js";
+import { s as p, H as d } from "./vidstack-B8iikcPv.js";
+import { H as u } from "./vidstack-html-BpBnqulz.js";
 class n extends u {
   constructor(t, s) {
     super(t, s);

package/dist/{vidstack-dash-CcyKz4DV.js → vidstack-dash-Bi8vMZlt.js}

@@ -5,8 +5,8 @@ var u = (e) => {
 var g = (e, s, t) => s in e ? S(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
 var h = (e, s, t) => g(e, typeof s != "symbol" ? s + "" : s, t), d = (e, s, t) => s.has(e) || u("Cannot " + t);
 var i = (e, s, t) => (d(e, s, "read from private field"), t ? t.call(e) : s.get(e)), a = (e, s, t) => s.has(e) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), p = (e, s, t, n) => (d(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
-import { D as f, i as m, a as l, p as y, b as D, c as x } from "./vidstack-DFQqpjQI.js";
-import { VideoProvider as v } from "./vidstack-video-detMAOO-.js";
+import { D as f, i as m, a as l, p as y, b as D, c as x } from "./vidstack-B8iikcPv.js";
+import { VideoProvider as v } from "./vidstack-video-CqIaj_35.js";
 const $ = "https://cdn.jsdelivr.net";
 var c, r, o;
 class b extends v {

package/dist/{vidstack-google-cast-DsFCd0_r.js → vidstack-google-cast-D3ys_R-E.js}

@@ -5,7 +5,7 @@ var U = (r) => {
 var ct = (r, t, s) => t in r ? ht(r, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[t] = s;
 var _ = (r, t, s) => ct(r, typeof t != "symbol" ? t + "" : t, s), D = (r, t, s) => t.has(r) || U("Cannot " + s);
 var e = (r, t, s) => (D(r, t, "read from private field"), s ? s.call(r) : t.get(r)), d = (r, t, s) => t.has(r) ? U("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, s), u = (r, t, s, n) => (D(r, t, "write to private field"), n ? n.call(r, s) : t.set(r, s), s), a = (r, t, s) => (D(r, t, "access private method"), s);
-import { l as ut, d as dt, T as E, R as lt, G as ft, k as F, o as mt, e as x, c as I, f as gt } from "./vidstack-DFQqpjQI.js";
+import { l as ut, d as dt, T as E, R as lt, G as ft, k as F, o as mt, e as x, c as I, f as gt } from "./vidstack-B8iikcPv.js";
 function Tt() {
   return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
 }

package/dist/{vidstack-hls-DOGlQvLk.js → vidstack-hls-BytcbBHn.js}

@@ -5,8 +5,8 @@ var u = (e) => {
 var g = (e, s, t) => s in e ? S(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
 var a = (e, s, t) => g(e, typeof s != "symbol" ? s + "" : s, t), d = (e, s, t) => s.has(e) || u("Cannot " + t);
 var i = (e, s, t) => (d(e, s, "read from private field"), t ? t.call(e) : s.get(e)), h = (e, s, t) => s.has(e) ? u("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), p = (e, s, t, n) => (d(e, s, "write to private field"), n ? n.call(e, t) : s.set(e, t), t);
-import { g as f, h as m, a as l, p as y, j as L, c as x } from "./vidstack-DFQqpjQI.js";
-import { VideoProvider as v } from "./vidstack-video-detMAOO-.js";
+import { g as f, h as m, a as l, p as y, j as L, c as x } from "./vidstack-B8iikcPv.js";
+import { VideoProvider as v } from "./vidstack-video-CqIaj_35.js";
 const $ = "https://cdn.jsdelivr.net";
 var c, r, o;
 class j extends v {

package/dist/{vidstack-html-C4pIs4NF.js → vidstack-html-BpBnqulz.js}

@@ -6,7 +6,7 @@ var p = (i, e, t) => e in i ? l(i, e, { enumerable: !0, configurable: !0, writab
 var d = (i, e, t) => p(i, typeof e != "symbol" ? e + "" : e, t), S = (i, e, t) => e.has(i) || m("Cannot " + t);
 var h = (i, e, t) => e.has(i) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t);
 var n = (i, e, t) => (S(i, e, "access private method"), t);
-import { A as y, d as v, m as f, N as T, o as b, n as c, q as $, a as M } from "./vidstack-DFQqpjQI.js";
+import { A as y, d as v, m as f, N as T, o as b, n as c, q as $, a as M } from "./vidstack-B8iikcPv.js";
 var r, u;
 class g {
   constructor(e, t) {

package/dist/{vidstack-video-detMAOO-.js → vidstack-video-CqIaj_35.js}

@@ -1,8 +1,8 @@
 var n = Object.defineProperty;
 var o = (s, t, e) => t in s ? n(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
 var i = (s, t, e) => o(s, typeof t != "symbol" ? t + "" : t, e);
-import { s as c, H as u, r as P, V as p, F as d, P as h, t as l, u as f, v as V, w as y, o as I } from "./vidstack-DFQqpjQI.js";
-import { H as v } from "./vidstack-html-C4pIs4NF.js";
+import { s as c, H as u, r as P, V as p, F as d, P as h, t as l, u as f, v as V, w as y, o as I } from "./vidstack-B8iikcPv.js";
+import { H as v } from "./vidstack-html-BpBnqulz.js";
 class m extends v {
   constructor(e, r) {
     super(e, r);

package/dist/{vidstack-vimeo-BIMDkpy7.js → vidstack-vimeo-B9SDrle5.js}

@@ -5,7 +5,7 @@ var W = (a) => {
 var ke = (a, c, e) => c in a ? me(a, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[c] = e;
 var b = (a, c, e) => ke(a, typeof c != "symbol" ? c + "" : c, e), j = (a, c, e) => c.has(a) || W("Cannot " + e);
 var s = (a, c, e) => (j(a, c, "read from private field"), e ? e.call(a) : c.get(a)), d = (a, c, e) => c.has(a) ? W("Cannot add the same private member more than once") : c instanceof WeakSet ? c.add(a) : c.set(a, e), f = (a, c, e, t) => (j(a, c, "write to private field"), t ? t.call(a, e) : c.set(a, e), e), h = (a, c, e) => (j(a, c, "access private method"), e);
-import { E as ve, d as we, x as Y, T as g, R as Te, p as Pe, y as x, c as A, a as Ce, z as G, L as M, l as $e, B as ge, C as Ee, I as Re, Q as J } from "./vidstack-DFQqpjQI.js";
+import { E as ve, d as we, x as Y, T as g, R as Te, p as Pe, y as x, c as A, a as Ce, z as G, L as M, l as $e, B as ge, C as Ee, I as Re, Q as J } from "./vidstack-B8iikcPv.js";
 const Ve = /(?:https:\/\/)?(?:player\.)?vimeo(?:\.com)?\/(?:video\/)?(\d+)(?:(?:\?hash=|\?h=|\/)(.*))?/, O = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
 function K(a) {
   const c = a.match(Ve);

package/dist/{vidstack-youtube-ICZwIt3U.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-DFQqpjQI.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.4",
+  "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"