@instructure/studio-player 1.3.1 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,7 @@ var y = (n, e, t) => Qw(n, typeof e != "symbol" ? e + "" : e, t), cl = (n, e, t)
7
7
  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);
8
8
  import { jsx as N, Fragment as zw, jsxs as Jr } from "react/jsx-runtime";
9
9
  import * as $ from "react";
10
- 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";
10
+ 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-DxqRtIco.js";
11
11
  const li = Symbol(0);
12
12
  let mh = !1, $l = !1, Qe = null, Qn = null, Ae = null, ye = 0, jn = [], $u = {};
13
13
  const nT = () => {
@@ -2992,7 +2992,7 @@ class G$ {
2992
2992
  return "audio";
2993
2993
  }
2994
2994
  async load(e) {
2995
- return new (await import("./vidstack-audio-Bq1pJf-F.js")).AudioProvider(this.target, e);
2995
+ return new (await import("./vidstack-audio-Bd4Zsj4O.js")).AudioProvider(this.target, e);
2996
2996
  }
2997
2997
  }
2998
2998
  class Du {
@@ -3007,7 +3007,7 @@ class Du {
3007
3007
  return "video";
3008
3008
  }
3009
3009
  async load(e) {
3010
- return new (await import("./vidstack-video-CqIaj_35.js")).VideoProvider(this.target, e);
3010
+ return new (await import("./vidstack-video-DpYthusy.js")).VideoProvider(this.target, e);
3011
3011
  }
3012
3012
  }
3013
3013
  const Mh = class Mh extends Du {
@@ -3019,7 +3019,7 @@ const Mh = class Mh extends Du {
3019
3019
  return Mh.supported && ca(t);
3020
3020
  }
3021
3021
  async load(t) {
3022
- return new (await import("./vidstack-hls-BytcbBHn.js")).HLSProvider(this.target, t);
3022
+ return new (await import("./vidstack-hls-DVErTQIN.js")).HLSProvider(this.target, t);
3023
3023
  }
3024
3024
  };
3025
3025
  y(Mh, "supported", Mu());
@@ -3843,7 +3843,7 @@ const qh = class qh extends Du {
3843
3843
  return qh.supported && Lu(t);
3844
3844
  }
3845
3845
  async load(t) {
3846
- return new (await import("./vidstack-dash-Bi8vMZlt.js")).DASHProvider(this.target, t);
3846
+ return new (await import("./vidstack-dash-D7xlwNJ9.js")).DASHProvider(this.target, t);
3847
3847
  }
3848
3848
  };
3849
3849
  y(qh, "supported", FT());
@@ -3869,10 +3869,10 @@ class av {
3869
3869
  return "video";
3870
3870
  }
3871
3871
  async load(e) {
3872
- return new (await import("./vidstack-vimeo-B9SDrle5.js").then((t) => t.p)).VimeoProvider(this.target, e);
3872
+ return new (await import("./vidstack-vimeo-Z3RDzI6N.js").then((t) => t.p)).VimeoProvider(this.target, e);
3873
3873
  }
3874
3874
  async loadPoster(e, t, i) {
3875
- const { resolveVimeoVideoId: r, getVimeoVideoInfo: o } = await import("./vidstack-vimeo-B9SDrle5.js").then((d) => d.u);
3875
+ const { resolveVimeoVideoId: r, getVimeoVideoInfo: o } = await import("./vidstack-vimeo-Z3RDzI6N.js").then((d) => d.u);
3876
3876
  if (!R(e.src)) return null;
3877
3877
  const { videoId: h, hash: l } = r(e.src);
3878
3878
  return h ? o(h, i, l).then((d) => d ? d.poster : null) : null;
@@ -3903,10 +3903,10 @@ class ov {
3903
3903
  return "video";
3904
3904
  }
3905
3905
  async load(e) {
3906
- return new (await import("./vidstack-youtube-Dgmpq-MT.js").then((t) => t.p)).YouTubeProvider(this.target, e);
3906
+ return new (await import("./vidstack-youtube-y1PQLbV7.js").then((t) => t.p)).YouTubeProvider(this.target, e);
3907
3907
  }
3908
3908
  async loadPoster(e, t, i) {
3909
- const { findYouTubePoster: r, resolveYouTubeVideoId: o } = await import("./vidstack-youtube-Dgmpq-MT.js").then((l) => l.u), h = R(e.src) && o(e.src);
3909
+ const { findYouTubePoster: r, resolveYouTubeVideoId: o } = await import("./vidstack-youtube-y1PQLbV7.js").then((l) => l.u), h = R(e.src) && o(e.src);
3910
3910
  return h ? r(h, i) : null;
3911
3911
  }
3912
3912
  }
@@ -9541,7 +9541,7 @@ class Mk {
9541
9541
  async load(e) {
9542
9542
  if (!s(this, Rs))
9543
9543
  throw Error("[vidstack] google cast player was not initialized");
9544
- return new (await import("./vidstack-google-cast-D3ys_R-E.js").then((t) => t.p)).GoogleCastProvider(s(this, Rs), e);
9544
+ return new (await import("./vidstack-google-cast-DxqRtIco.js").then((t) => t.p)).GoogleCastProvider(s(this, Rs), e);
9545
9545
  }
9546
9546
  }
9547
9547
  Rs = new WeakMap(), Yt = new WeakSet(), _w = async function(e) {
@@ -1,8 +1,8 @@
1
1
  var o = Object.defineProperty;
2
2
  var a = (i, e, t) => e in i ? o(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
3
3
  var r = (i, e, t) => a(i, typeof e != "symbol" ? e + "" : e, t);
4
- import { s as p, H as d } from "./vidstack-B8iikcPv.js";
5
- import { H as u } from "./vidstack-html-BpBnqulz.js";
4
+ import { s as p, H as d } from "./vidstack-CX-SWm4x.js";
5
+ import { H as u } from "./vidstack-html-B5QcGPQk.js";
6
6
  class n extends u {
7
7
  constructor(t, s) {
8
8
  super(t, s);
@@ -5,8 +5,8 @@ var u = (e) => {
5
5
  var g = (e, s, t) => s in e ? S(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
6
6
  var h = (e, s, t) => g(e, typeof s != "symbol" ? s + "" : s, t), d = (e, s, t) => s.has(e) || u("Cannot " + t);
7
7
  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);
8
- import { D as f, i as m, a as l, p as y, b as D, c as x } from "./vidstack-B8iikcPv.js";
9
- import { VideoProvider as v } from "./vidstack-video-CqIaj_35.js";
8
+ import { D as f, i as m, a as l, p as y, b as D, c as x } from "./vidstack-CX-SWm4x.js";
9
+ import { VideoProvider as v } from "./vidstack-video-DpYthusy.js";
10
10
  const $ = "https://cdn.jsdelivr.net";
11
11
  var c, r, o;
12
12
  class b extends v {
@@ -5,7 +5,7 @@ var U = (r) => {
5
5
  var ct = (r, t, s) => t in r ? ht(r, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[t] = s;
6
6
  var _ = (r, t, s) => ct(r, typeof t != "symbol" ? t + "" : t, s), D = (r, t, s) => t.has(r) || U("Cannot " + s);
7
7
  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);
8
- 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";
8
+ 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-CX-SWm4x.js";
9
9
  function Tt() {
10
10
  return "https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1";
11
11
  }
@@ -5,8 +5,8 @@ var u = (e) => {
5
5
  var g = (e, s, t) => s in e ? S(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
6
6
  var a = (e, s, t) => g(e, typeof s != "symbol" ? s + "" : s, t), d = (e, s, t) => s.has(e) || u("Cannot " + t);
7
7
  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);
8
- import { g as f, h as m, a as l, p as y, j as L, c as x } from "./vidstack-B8iikcPv.js";
9
- import { VideoProvider as v } from "./vidstack-video-CqIaj_35.js";
8
+ import { g as f, h as m, a as l, p as y, j as L, c as x } from "./vidstack-CX-SWm4x.js";
9
+ import { VideoProvider as v } from "./vidstack-video-DpYthusy.js";
10
10
  const $ = "https://cdn.jsdelivr.net";
11
11
  var c, r, o;
12
12
  class j extends v {
@@ -6,7 +6,7 @@ var p = (i, e, t) => e in i ? l(i, e, { enumerable: !0, configurable: !0, writab
6
6
  var d = (i, e, t) => p(i, typeof e != "symbol" ? e + "" : e, t), S = (i, e, t) => e.has(i) || m("Cannot " + t);
7
7
  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);
8
8
  var n = (i, e, t) => (S(i, e, "access private method"), t);
9
- 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";
9
+ 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-CX-SWm4x.js";
10
10
  var r, u;
11
11
  class g {
12
12
  constructor(e, t) {
@@ -1,8 +1,8 @@
1
1
  var n = Object.defineProperty;
2
2
  var o = (s, t, e) => t in s ? n(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
3
3
  var i = (s, t, e) => o(s, typeof t != "symbol" ? t + "" : t, e);
4
- 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";
5
- import { H as v } from "./vidstack-html-BpBnqulz.js";
4
+ 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-CX-SWm4x.js";
5
+ import { H as v } from "./vidstack-html-B5QcGPQk.js";
6
6
  class m extends v {
7
7
  constructor(e, r) {
8
8
  super(e, r);
@@ -5,7 +5,7 @@ var W = (a) => {
5
5
  var ke = (a, c, e) => c in a ? me(a, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[c] = e;
6
6
  var b = (a, c, e) => ke(a, typeof c != "symbol" ? c + "" : c, e), j = (a, c, e) => c.has(a) || W("Cannot " + e);
7
7
  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);
8
- 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";
8
+ 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-CX-SWm4x.js";
9
9
  const Ve = /(?:https:\/\/)?(?:player\.)?vimeo(?:\.com)?\/(?:video\/)?(\d+)(?:(?:\?hash=|\?h=|\/)(.*))?/, O = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map();
10
10
  function K(a) {
11
11
  const c = a.match(Ve);
@@ -1,57 +1,57 @@
1
1
  var Q = Object.defineProperty;
2
- var B = (a) => {
2
+ var z = (a) => {
3
3
  throw TypeError(a);
4
4
  };
5
- var W = (a, o, e) => o in a ? Q(a, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[o] = e;
6
- var w = (a, o, e) => W(a, typeof o != "symbol" ? o + "" : o, e), E = (a, o, e) => o.has(a) || B("Cannot " + e);
7
- 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);
8
- 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";
9
- 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();
10
- function F(a) {
11
- var o;
12
- return (o = a.match(ue)) == null ? void 0 : o[1];
5
+ var W = (a, n, e) => n in a ? Q(a, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[n] = e;
6
+ var m = (a, n, e) => W(a, typeof n != "symbol" ? n + "" : n, e), E = (a, n, e) => n.has(a) || z("Cannot " + e);
7
+ var s = (a, n, e) => (E(a, n, "read from private field"), e ? e.call(a) : n.get(a)), p = (a, n, e) => n.has(a) ? z("Cannot add the same private member more than once") : n instanceof WeakSet ? n.add(a) : n.set(a, e), c = (a, n, e, t) => (E(a, n, "write to private field"), t ? t.call(a, e) : n.set(a, e), e), r = (a, n, e) => (E(a, n, "access private method"), e);
8
+ import { E as X, d as Z, x as ee, p as te, y as se, a as ie, J as ae, z as oe, Y as k, K as ne, M as _, T as j, O as re } from "./vidstack-CX-SWm4x.js";
9
+ const ue = /(?:youtu\.be|youtube|youtube\.com|youtube-nocookie\.com)(?:\/shorts)?\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=|)((?:\w|-){11})/, Y = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
10
+ function B(a) {
11
+ var n;
12
+ return (n = a.match(ue)) == null ? void 0 : n[1];
13
13
  }
14
- async function de(a, o) {
14
+ async function de(a, n) {
15
15
  if (Y.has(a)) return Y.get(a);
16
- if (V.has(a)) return V.get(a);
16
+ if (R.has(a)) return R.get(a);
17
17
  const e = new Promise(async (t) => {
18
18
  const u = ["maxresdefault", "sddefault", "hqdefault"];
19
19
  for (const d of u)
20
20
  for (const h of [!0, !1]) {
21
- const c = he(a, d, h);
22
- if ((await fetch(c, {
21
+ const l = he(a, d, h);
22
+ if ((await fetch(l, {
23
23
  mode: "no-cors",
24
- signal: o.signal
24
+ signal: n.signal
25
25
  })).status < 400) {
26
- Y.set(a, c), t(c);
26
+ Y.set(a, l), t(l);
27
27
  return;
28
28
  }
29
29
  }
30
- }).catch(() => "").finally(() => V.delete(a));
31
- return V.set(a, e), e;
30
+ }).catch(() => "").finally(() => R.delete(a));
31
+ return R.set(a, e), e;
32
32
  }
33
- function he(a, o, e) {
34
- return `https://i.ytimg.com/${e ? "vi_webp" : "vi"}/${a}/${o}.${e ? "webp" : "jpg"}`;
33
+ function he(a, n, e) {
34
+ return `https://i.ytimg.com/${e ? "vi_webp" : "vi"}/${a}/${n}.${e ? "webp" : "jpg"}`;
35
35
  }
36
36
  const me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
37
37
  __proto__: null,
38
38
  findYouTubePoster: de,
39
- resolveYouTubeVideoId: F
39
+ resolveYouTubeVideoId: B
40
40
  }, Symbol.toStringTag, { value: "Module" }));
41
- 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;
42
- class ce extends X {
41
+ var o, g, P, S, C, T, w, y, O, i, ce, pe, F, U, b, I, J, N, D, V, q, K, L, M, A;
42
+ class le extends X {
43
43
  constructor(e, t) {
44
44
  super(e);
45
45
  p(this, i);
46
- w(this, "$$PROVIDER_TYPE", "YOUTUBE");
47
- w(this, "scope", Z());
48
- p(this, n);
49
- p(this, b, ee(""));
46
+ m(this, "$$PROVIDER_TYPE", "YOUTUBE");
47
+ m(this, "scope", Z());
48
+ p(this, o);
49
+ p(this, g, ee(""));
50
50
  p(this, P, -1);
51
51
  p(this, S, null);
52
- p(this, O, null);
52
+ p(this, C, null);
53
53
  p(this, T, -1);
54
- p(this, g, !1);
54
+ p(this, w, !1);
55
55
  p(this, y, /* @__PURE__ */ new Map());
56
56
  /**
57
57
  * Sets the player's interface language. The parameter value is an ISO 639-1 two-letter
@@ -64,29 +64,33 @@ class ce extends X {
64
64
  *
65
65
  * @defaultValue 'en'
66
66
  */
67
- w(this, "language", "en");
68
- w(this, "color", "red");
67
+ m(this, "language", "en");
68
+ m(this, "color", "red");
69
69
  /**
70
70
  * Whether cookies should be enabled on the embed. This is turned off by default to be
71
71
  * GDPR-compliant.
72
72
  *
73
73
  * @defaultValue `false`
74
74
  */
75
- w(this, "cookies", !1);
75
+ m(this, "cookies", !1);
76
76
  /**
77
77
  * Whether the embed should use YouTube Education. This is turned off by default.
78
78
  *
79
79
  * @defaultValue `false`
80
80
  */
81
- w(this, "education", !1);
81
+ m(this, "education", !1);
82
+ /**
83
+ * Whether the YouTube captions should be auto loaded
84
+ */
85
+ m(this, "autoLoadCaptions", !1);
82
86
  /**
83
87
  * The encrypted payload to use for the embed. This is mandatory for YouTube Education
84
88
  * to work as expected.
85
89
  *
86
90
  * @defaultValue `undefined`
87
91
  */
88
- p(this, R);
89
- l(this, n, t);
92
+ p(this, O);
93
+ c(this, o, t);
90
94
  }
91
95
  /**
92
96
  * Set the encrypted payload to use for the embed. It must be encrypted according to YouTube dev guide.
@@ -95,7 +99,7 @@ class ce extends X {
95
99
  * @defaultValue `undefined`
96
100
  */
97
101
  set encryptedPayload(e) {
98
- l(this, R, e);
102
+ c(this, O, e);
99
103
  }
100
104
  get currentSrc() {
101
105
  return s(this, S);
@@ -104,46 +108,46 @@ class ce extends X {
104
108
  return "youtube";
105
109
  }
106
110
  get videoId() {
107
- return s(this, b).call(this);
111
+ return s(this, g).call(this);
108
112
  }
109
113
  preconnect() {
110
114
  te(this.getOrigin());
111
115
  }
112
116
  setup() {
113
- super.setup(), se(r(this, i, U).bind(this)), s(this, n).notify("provider-setup", this);
117
+ super.setup(), se(r(this, i, F).bind(this)), s(this, o).notify("provider-setup", this);
114
118
  }
115
119
  destroy() {
116
- r(this, i, x).call(this);
120
+ r(this, i, L).call(this);
117
121
  const e = "provider destroyed";
118
122
  for (const t of s(this, y).values())
119
123
  for (const { reject: u } of t) u(e);
120
124
  s(this, y).clear();
121
125
  }
122
126
  async play() {
123
- return r(this, i, m).call(this, "playVideo");
127
+ return r(this, i, b).call(this, "playVideo");
124
128
  }
125
129
  async pause() {
126
- return r(this, i, m).call(this, "pauseVideo");
130
+ return r(this, i, b).call(this, "pauseVideo");
127
131
  }
128
132
  setMuted(e) {
129
- e ? r(this, i, m).call(this, "mute") : r(this, i, m).call(this, "unMute");
133
+ e ? r(this, i, b).call(this, "mute") : r(this, i, b).call(this, "unMute");
130
134
  }
131
135
  setCurrentTime(e) {
132
- r(this, i, m).call(this, "seekTo", e), s(this, n).notify("seeking", e);
136
+ r(this, i, b).call(this, "seekTo", e), s(this, o).notify("seeking", e);
133
137
  }
134
138
  setVolume(e) {
135
- r(this, i, m).call(this, "setVolume", e * 100);
139
+ r(this, i, b).call(this, "setVolume", e * 100);
136
140
  }
137
141
  setPlaybackRate(e) {
138
- r(this, i, m).call(this, "setPlaybackRate", e);
142
+ r(this, i, b).call(this, "setPlaybackRate", e);
139
143
  }
140
144
  async loadSource(e) {
141
145
  if (!ie(e.src)) {
142
- l(this, S, null), s(this, b).set("");
146
+ c(this, S, null), s(this, g).set("");
143
147
  return;
144
148
  }
145
- const t = F(e.src);
146
- s(this, b).set(t ?? ""), l(this, S, e);
149
+ const t = B(e.src);
150
+ s(this, g).set(t ?? ""), c(this, S, e);
147
151
  }
148
152
  getOrigin() {
149
153
  switch (!0) {
@@ -156,12 +160,12 @@ class ce extends X {
156
160
  }
157
161
  }
158
162
  buildParams() {
159
- const { keyDisabled: e } = s(this, n).$props, { muted: t, playsInline: u, nativeControls: d } = s(this, n).$state, h = d();
163
+ const { keyDisabled: e } = s(this, o).$props, { muted: t, playsInline: u, nativeControls: d } = s(this, o).$state, h = d();
160
164
  return {
161
165
  rel: 0,
162
166
  autoplay: 0,
163
167
  color: this.color,
164
- cc_load_policy: 1,
168
+ cc_load_policy: this.autoLoadCaptions ? 1 : void 0,
165
169
  controls: h ? 1 : 0,
166
170
  disablekb: !h || e() ? 1 : 0,
167
171
  enablejsapi: 1,
@@ -170,107 +174,107 @@ class ce extends X {
170
174
  iv_load_policy: h ? 1 : 3,
171
175
  mute: t() ? 1 : 0,
172
176
  playsinline: u() ? 1 : 0,
173
- videoId: s(this, b).call(this),
174
- embed_config: r(this, i, L).call(this)
177
+ videoId: s(this, g).call(this),
178
+ embed_config: r(this, i, U).call(this)
175
179
  };
176
180
  }
177
181
  onLoad() {
178
182
  window.setTimeout(() => this.postMessage({ event: "listening" }), 100);
179
183
  }
180
184
  onMessage({ info: e }, t) {
181
- var c, $;
185
+ var l, $;
182
186
  if (!e) return;
183
- const { title: u, intrinsicDuration: d, playbackRate: h } = s(this, n).$state;
184
- 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()) {
187
+ const { title: u, intrinsicDuration: d, playbackRate: h } = s(this, o).$state;
188
+ if (ne(e.videoData) && e.videoData.title !== u() && s(this, o).notify("title-change", e.videoData.title, t), (l = e.namespaces) != null && l.includes("captions") && e.captions && s(this, C) === null && (c(this, C, e.captions.tracklist), s(this, o).notify("loaded-metadata")), _(e.duration) && e.duration !== d()) {
185
189
  if (_(e.videoLoadedFraction)) {
186
190
  const f = (($ = e.progressState) == null ? void 0 : $.loaded) ?? e.videoLoadedFraction * e.duration, v = new j(0, e.duration);
187
191
  r(this, i, D).call(this, f, v, t);
188
192
  }
189
- s(this, n).notify("duration-change", e.duration, t);
193
+ s(this, o).notify("duration-change", e.duration, t);
190
194
  }
191
- if (_(e.playbackRate) && e.playbackRate !== h() && s(this, n).notify("rate-change", e.playbackRate, t), e.progressState) {
192
- const { current: f, seekableStart: v, seekableEnd: G, loaded: H, duration: z } = e.progressState;
193
- 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);
195
+ if (_(e.playbackRate) && e.playbackRate !== h() && s(this, o).notify("rate-change", e.playbackRate, t), e.progressState) {
196
+ const { current: f, seekableStart: v, seekableEnd: G, loaded: H, duration: x } = e.progressState;
197
+ r(this, i, N).call(this, f, t), r(this, i, D).call(this, H, new j(v, G), t), x !== d() && s(this, o).notify("duration-change", x, t);
194
198
  }
195
- if (_(e.volume) && re(e.muted) && !s(this, g)) {
199
+ if (_(e.volume) && re(e.muted) && !s(this, w)) {
196
200
  const f = {
197
201
  muted: e.muted,
198
202
  volume: e.volume / 100
199
203
  };
200
- s(this, n).notify("volume-change", f, t);
204
+ s(this, o).notify("volume-change", f, t);
201
205
  }
202
206
  _(e.playerState) && e.playerState !== s(this, P) && r(this, i, K).call(this, e.playerState, t);
203
207
  }
204
208
  }
205
- 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) {
209
+ o = new WeakMap(), g = new WeakMap(), P = new WeakMap(), S = new WeakMap(), C = new WeakMap(), T = new WeakMap(), w = new WeakMap(), y = new WeakMap(), O = new WeakMap(), i = new WeakSet(), ce = function(e) {
206
210
  var t;
207
211
  (t = r(this, i, M).call(this, "playVideo")) == null || t.reject(e);
208
212
  }, pe = function(e) {
209
213
  var t;
210
214
  (t = r(this, i, M).call(this, "pauseVideo")) == null || t.reject(e);
211
- }, U = function() {
212
- r(this, i, x).call(this);
213
- const e = s(this, b).call(this);
215
+ }, F = function() {
216
+ r(this, i, L).call(this);
217
+ const e = s(this, g).call(this);
214
218
  if (!e) {
215
219
  this.src.set("");
216
220
  return;
217
221
  }
218
- this.src.set(`${this.getOrigin()}/embed/${e}`), s(this, n).notify("load-start");
219
- }, L = function() {
220
- const e = s(this, R);
222
+ this.src.set(`${this.getOrigin()}/embed/${e}`), s(this, o).notify("load-start");
223
+ }, U = function() {
224
+ const e = s(this, O);
221
225
  if (!ae(e))
222
226
  return JSON.stringify({ enc: e, hideTitle: !0 });
223
- }, m = function(e, t) {
224
- let u = ne(), d = s(this, y).get(e);
227
+ }, b = function(e, t) {
228
+ let u = oe(), d = s(this, y).get(e);
225
229
  return d || s(this, y).set(e, d = []), d.push(u), this.postMessage({
226
230
  event: "command",
227
231
  func: e,
228
232
  args: t ? [t] : void 0
229
233
  }), u.promise;
230
234
  }, I = function(e) {
231
- s(this, n).notify("loaded-data"), s(this, n).delegate.ready(void 0, e);
235
+ s(this, o).notify("loaded-data"), s(this, o).delegate.ready(void 0, e);
232
236
  }, J = function(e) {
233
237
  var t;
234
- (t = r(this, i, M).call(this, "pauseVideo")) == null || t.resolve(), s(this, n).notify("pause", void 0, e);
238
+ (t = r(this, i, M).call(this, "pauseVideo")) == null || t.resolve(), s(this, o).notify("pause", void 0, e);
235
239
  }, N = function(e, t) {
236
- const { duration: u, realCurrentTime: d } = s(this, n).$state, h = s(this, P) === k.Ended, c = h ? u() : e;
237
- s(this, n).notify("time-change", c, t), !h && Math.abs(c - d()) > 1 && s(this, n).notify("seeking", c, t);
240
+ const { duration: u, realCurrentTime: d } = s(this, o).$state, h = s(this, P) === k.Ended, l = h ? u() : e;
241
+ s(this, o).notify("time-change", l, t), !h && Math.abs(l - d()) > 1 && s(this, o).notify("seeking", l, t);
238
242
  }, D = function(e, t, u) {
239
243
  const d = {
240
244
  buffered: new j(0, e),
241
245
  seekable: t
242
246
  };
243
- s(this, n).notify("progress", d, u);
244
- const { seeking: h, realCurrentTime: c } = s(this, n).$state;
245
- h() && e > c() && r(this, i, C).call(this, u);
246
- }, C = function(e) {
247
- const { paused: t, realCurrentTime: u } = s(this, n).$state;
248
- window.clearTimeout(s(this, T)), l(this, T, window.setTimeout(
247
+ s(this, o).notify("progress", d, u);
248
+ const { seeking: h, realCurrentTime: l } = s(this, o).$state;
249
+ h() && e > l() && r(this, i, V).call(this, u);
250
+ }, V = function(e) {
251
+ const { paused: t, realCurrentTime: u } = s(this, o).$state;
252
+ window.clearTimeout(s(this, T)), c(this, T, window.setTimeout(
249
253
  () => {
250
- s(this, n).notify("seeked", u(), e), l(this, T, -1);
254
+ s(this, o).notify("seeked", u(), e), c(this, T, -1);
251
255
  },
252
256
  t() ? 100 : 0
253
257
  ));
254
258
  }, q = function(e) {
255
- const { seeking: t } = s(this, n).$state;
256
- t() && r(this, i, C).call(this, e), s(this, n).notify("pause", void 0, e), s(this, n).notify("end", void 0, e);
259
+ const { seeking: t } = s(this, o).$state;
260
+ t() && r(this, i, V).call(this, e), s(this, o).notify("pause", void 0, e), s(this, o).notify("end", void 0, e);
257
261
  }, K = function(e, t) {
258
262
  var v;
259
- 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);
260
- if (c && s(this, n).notify("waiting", void 0, t), d() && h && r(this, i, C).call(this, t), s(this, g) && h) {
261
- this.pause(), l(this, g, !1), this.setMuted(s(this, n).$state.muted());
263
+ const { paused: u, seeking: d } = s(this, o).$state, h = e === k.Playing, l = e === k.Buffering, $ = r(this, i, A).call(this, "playVideo"), f = u() && (l || h);
264
+ if (l && s(this, o).notify("waiting", void 0, t), d() && h && r(this, i, V).call(this, t), s(this, w) && h) {
265
+ this.pause(), c(this, w, !1), this.setMuted(s(this, o).$state.muted());
262
266
  return;
263
267
  }
264
268
  if (!$ && f) {
265
- l(this, g, !0), this.setMuted(!0);
269
+ c(this, w, !0), this.setMuted(!0);
266
270
  return;
267
271
  }
268
- switch (f && ((v = r(this, i, M).call(this, "playVideo")) == null || v.resolve(), s(this, n).notify("play", void 0, t)), e) {
272
+ switch (f && ((v = r(this, i, M).call(this, "playVideo")) == null || v.resolve(), s(this, o).notify("play", void 0, t)), e) {
269
273
  case k.Cued:
270
274
  r(this, i, I).call(this, t);
271
275
  break;
272
276
  case k.Playing:
273
- s(this, n).notify("playing", void 0, t);
277
+ s(this, o).notify("playing", void 0, t);
274
278
  break;
275
279
  case k.Paused:
276
280
  r(this, i, J).call(this, t);
@@ -279,9 +283,9 @@ n = new WeakMap(), b = new WeakMap(), P = new WeakMap(), S = new WeakMap(), O =
279
283
  r(this, i, q).call(this, t);
280
284
  break;
281
285
  }
282
- l(this, P, e);
283
- }, x = function() {
284
- l(this, P, -1), l(this, T, -1), l(this, g, !1);
286
+ c(this, P, e);
287
+ }, L = function() {
288
+ c(this, P, -1), c(this, T, -1), c(this, w, !1);
285
289
  }, M = function(e) {
286
290
  var t;
287
291
  return (t = s(this, y).get(e)) == null ? void 0 : t.shift();
@@ -291,7 +295,7 @@ n = new WeakMap(), b = new WeakMap(), P = new WeakMap(), S = new WeakMap(), O =
291
295
  };
292
296
  const be = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
293
297
  __proto__: null,
294
- YouTubeProvider: ce
298
+ YouTubeProvider: le
295
299
  }, Symbol.toStringTag, { value: "Module" }));
296
300
  export {
297
301
  be as p,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/studio-player",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
4
4
  "private": false,
5
5
  "description": "Next generation media player for Instructure",
6
6
  "module": "./dist/studio-player.es.js",
@@ -1 +0,0 @@
1
- ._annotation-overlay_1kxzn_1{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-user-select:none;user-select:none;z-index:1;background-color:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center}._media-buffering-indicator_1fwjr_1{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;z-index:1;background-color:#00000080;transition:opacity .2s ease}[data-media-player][data-buffering] ._media-buffering-spinner_1fwjr_17{pointer-events:none;animation:_media-buffering-spin_1fwjr_17 1s linear infinite}._media-buffering-track_1fwjr_22{color:#f5f5f5;opacity:.25}._media-buffering-track-fill_1fwjr_27{color:var(--media-brand, #f5f5f5);opacity:.75}[data-media-player][data-buffering] ._media-buffering-indicator_1fwjr_1{opacity:1}@keyframes _media-buffering-spin_1fwjr_17{to{transform:rotate(360deg)}}._controls-overlay_1hs9n_1{display:flex;position:absolute;gap:.5rem;padding:1rem;top:0;right:0;bottom:0;left:0;justify-content:end;pointer-events:none}._keyboard-shortcuts-overlay_1hs9n_11{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#000000b3;color:#fff;padding:1.5rem;-webkit-user-select:none;user-select:none;overflow-y:auto;display:flex;flex-direction:column;align-items:center;z-index:1}._keyboard-shortcuts-overlay_1hs9n_11 header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}:is(._keyboard-shortcuts-overlay_1hs9n_11 header) h2{font-size:1rem;font-weight:500;margin:0}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_1hs9n_11 header) h2{font-size:1.5rem}}._keyboard-shortcuts-overlay_1hs9n_11 table{width:100%;max-width:54rem;padding:0;border-collapse:collapse}@container player (width > 400px) and (height > 300px){._keyboard-shortcuts-overlay_1hs9n_11 table{padding:2rem}}:is(._keyboard-shortcuts-overlay_1hs9n_11 table) tr{border-bottom:1px solid rgba(232 234 236 / .2)}:is(._keyboard-shortcuts-overlay_1hs9n_11 table) tbody tr:last-child{border-bottom:none}:is(._keyboard-shortcuts-overlay_1hs9n_11 table) th,:is(._keyboard-shortcuts-overlay_1hs9n_11 table) td{text-align:left;font-size:.75rem;line-height:1.5}@container player (width > 400px) and (height > 300px){:is(._keyboard-shortcuts-overlay_1hs9n_11 table) th,:is(._keyboard-shortcuts-overlay_1hs9n_11 table) td{font-size:.875rem}}@container player (width >= 720px) and (height > 300px){:is(._keyboard-shortcuts-overlay_1hs9n_11 table) th,:is(._keyboard-shortcuts-overlay_1hs9n_11 table) td{font-size:1rem}}._keyboard-shortcuts-overlay_1hs9n_11 ._screen-reader-content_1hs9n_76{width:.0625rem;height:.0625rem;margin:-.0625rem;padding:0;position:absolute;top:0;inset-inline-start:0;overflow:hidden;clip:rect(0 0 0 0);border:0}._controls-button_1hs9n_90{width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-2);border:1px solid #d7dade;background:var(--controls-layout-bg-color)}._controls-button_1hs9n_90:focus-visible{outline:var(--focus-ring)}._keyboard-shortcuts-button_1hs9n_106{opacity:0;margin-right:auto}._keyboard-shortcuts-button_1hs9n_106:focus-visible{opacity:1;pointer-events:auto}._kebab-menu-button_1hs9n_116{opacity:1;pointer-events:auto;transition:opacity;transition-duration:0s;transition-timing-function:linear;transition-delay:0s;cursor:pointer;color:inherit}._kebab-menu-button_1hs9n_116 svg{flex-shrink:0}._kebab-menu-button_1hs9n_116:hover{background-color:var(--media-button-icon-hover-color, #e0e0e0)}._kebab-menu_1hs9n_116{display:flex;flex-direction:column;min-width:200px;pointer-events:auto;background-color:var(--settings-menu-bg-color, white);border-radius:var(--radius-2);padding-top:.25rem;padding-bottom:.25rem;z-index:1000;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._kebab-menu-item_1hs9n_150{font-family:inherit;font-size:1rem;height:36px;text-rendering:geometricprecision;display:flex;align-items:center;gap:.5rem;padding:0 11px;border:none;outline:none;background-color:transparent;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._kebab-menu-item_1hs9n_150:hover,._kebab-menu-item_1hs9n_150:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}[data-media-player][data-playing]:not([data-hover]) ._kebab-menu-button_1hs9n_116:not(:focus-visible,[aria-expanded=true]),[data-media-player][data-fullscreen][data-playing]:not([data-controls]) ._kebab-menu-button_1hs9n_116:not(:focus-visible,[aria-expanded=true]){opacity:0;transition-duration:.2s}._close-button_1hs9n_189{background-color:transparent;border:none;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0;width:2.25rem;height:2.25rem}._arrow_1hs9n_203{fill:#fff}._captions_guhpx_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:var(--captions-flex-direction, column);align-items:center;padding:var(--spacing-3);transition:padding-bottom .1s ease-in-out;transition-delay:.3s}[data-fullscreen][data-controls]:not(:has([data-pins])) ._captions_guhpx_1{transition-delay:0s;padding-bottom:calc(var(--spacing-3) + var(--captions-fullscreen-offset))}._captions_guhpx_1[aria-hidden=true]{display:none}._captions_guhpx_1 [data-part=cue]{color:var(--captions-color, white);text-align:center;max-width:50ch;line-height:1.5;font-size:calc(clamp(.875rem,4cqh,2rem) * var(--captions-font-size-multiplier, 1));padding:0 var(--spacing-2);background-color:var(--captions-background-color, rgba(22 22 22 / .75));border-radius:var(--radius-2);white-space:pre-wrap}._comments-overlay_z1669_1{position:absolute;top:0;right:0;bottom:0;left:0;padding:var(--spacing-3);display:flex;align-items:end;pointer-events:none;transition:padding .1s ease-in-out;transition-delay:0s}._comments-container_z1669_12{display:flex;flex-direction:column;gap:.25rem;width:15rem;margin-right:3.4375rem}@container player (width >= 460px){._comments-container_z1669_12{width:23.4375rem}}@media (hover: none) and (orientation: portrait) and (max-width: 720px){[data-fullscreen] ._comments-overlay_z1669_1{justify-content:end}}[data-fullscreen][data-controls]:not(:has([data-pins])) ._comments-overlay_z1669_1{padding-bottom:calc(var(--spacing-3) + var(--comments-fullscreen-offset));transition-delay:.3s}._comment_z1669_1{display:grid;grid-template-areas:"avatar text";grid-template-columns:auto 1fr;align-items:center;padding:var(--spacing-1);gap:var(--spacing-1);border-radius:var(--radius-2);background-color:var(--comments-background-color);cursor:pointer;border:1px solid #666;pointer-events:auto}@container player (height > 540px){._comment_z1669_1{grid-template-areas:"text text" "avatar name"}}._comment-text_z1669_55{grid-area:text;color:var(--comments-color);font-size:var(--comments-font-size-small);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;-webkit-user-select:none;user-select:none}@container player (height >= 400px){._comment-text_z1669_55{-webkit-line-clamp:2;line-clamp:2;font-size:var(--comments-font-size-large)}}._comment-author-avatar_z1669_75{grid-area:avatar;box-sizing:border-box;display:inline-block;object-fit:cover;width:var(--comments-avatar-size-xss);height:var(--comments-avatar-size-xss);border-radius:50%;-webkit-user-select:none;user-select:none;pointer-events:none;background-color:#fff;contain:paint}@container player (height >= 400px){._comment-author-avatar_z1669_75{width:var(--comments-avatar-size-s);height:var(--comments-avatar-size-s)}}@container player (height > 540px){._comment-author-avatar_z1669_75{width:var(--comments-avatar-size-xs);height:var(--comments-avatar-size-xs)}}._comment-author-name_z1669_99{grid-area:name;color:var(--comments-author-color);font-size:var(--comments-font-size-large);font-weight:700;line-height:1.5;display:none}@container player (height > 540px){._comment-author-name_z1669_99{display:inline}}._settings-menu_1iutx_1{display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem;background-color:var(--settings-menu-bg-color, white);padding-top:.25rem;padding-bottom:.25rem;border-radius:var(--radius-2);width:294px;z-index:1000;overflow:auto;max-height:80%;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._settings-menu_1iutx_1:focus-visible{outline:2px solid var(--settings-menu-focus-color, #0078d4)}@container player (width > 400px) and (height > 300px){._settings-menu_1iutx_1{font-size:1rem;line-height:1.5rem}}@container player (height <= 300px){._settings-menu_1iutx_1{max-height:calc(100% - 56px)}}@container player (width < 300px){._settings-menu_1iutx_1{max-width:calc(100% - 8px)}}._menu-heading_1iutx_37{display:block;margin:0 var(--spacing-2);padding-top:var(--spacing-2);padding-bottom:.5625rem;border-bottom:.0625rem solid #c7cdd1;font-weight:700}._check-icon_1iutx_48,._trash-icon_1iutx_49{width:1.25rem;height:1.25rem}._check-icon_1iutx_48{visibility:hidden}._trash-icon_1iutx_49{color:var(--warning-color)}._menu-item-multiline-label-wrapper_1iutx_62{display:flex;flex-direction:column;text-align:start}._menu-item-secondary-label_1iutx_68{display:block;color:var(--secondary-text-color);font-size:.875rem}._menu-item-label_1iutx_74{display:block}._menu-item_1iutx_62{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;padding:6px 11px;gap:var(--spacing-2);cursor:pointer;font-size:inherit;line-height:inherit;font-family:inherit;color:inherit}._menu-item_1iutx_62:hover,._menu-item_1iutx_62:focus-visible{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}:is(._menu-item_1iutx_62:hover,._menu-item_1iutx_62:focus-visible) ._trash-icon_1iutx_49{color:var(--settings-media-hover-color)}._menu-item_1iutx_62[aria-checked=true] ._check-icon_1iutx_48{visibility:visible}._menu-item_1iutx_62:hover ._menu-item-secondary-label_1iutx_68{color:var(--secondary-text-hover-color)}._menu-back-button_1iutx_115{display:flex;align-items:center;gap:var(--spacing-1);padding:6px 11px;color:var(--settings-submenu-color, #2d3b45);font-size:inherit;line-height:inherit;font-family:inherit;cursor:pointer;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._menu-back-button_1iutx_115:hover,._menu-back-button_1iutx_115:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._arrow_1iutx_141{fill:#fff}._menu-hint_1wiu5_1{color:var(--settings-media-submenu-hint-color, #9ea6ad)}._menu-button_1wiu5_5{position:relative;display:flex;align-items:center;width:100%;gap:var(--spacing-1);padding:.375rem .6875rem;color:var(--settings-submenu-color, #2d3b45);font-size:inherit;line-height:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit}._menu-button_1wiu5_5:hover,._menu-button_1wiu5_5:focus{color:var(--settings-media-hover-color, white);background-color:var(--settings-media-hover-bg-color, rgb(43 122 188))}._menu-button_1wiu5_5:hover ._menu-hint_1wiu5_1,._menu-button_1wiu5_5:focus ._menu-hint_1wiu5_1{color:var(--settings-media-hover-color, white)}._menu-label_1wiu5_37{flex-grow:1;text-align:left}._menu-icon_1wiu5_42{width:1.125rem;height:1.125rem}._switch-track_7nhpo_1{position:relative;background-color:#e8e8e8;width:2.625rem;height:1.75rem;border-radius:.875rem;will-change:background-color;transition:background-color .2s;box-shadow:#d7dade 0 0 0 .0625rem inset;margin:-.25rem 0}@container player (width > 400px) and (height > 300px){._switch-track_7nhpo_1{margin:-.125rem 0}}._switch-thumb_7nhpo_17{background-color:#fff;width:1.5rem;height:1.5rem;border-radius:.75rem;transform:translate(.125rem,.125rem);box-shadow:#e8eaec 0 0 0 .0625rem inset;will-change:transform;transition:transform .2s;display:flex;align-items:center;justify-content:center}._switch-icon_7nhpo_31{width:.875rem;height:.875rem;color:var(--settings-submenu-color)}._switch-body_7nhpo_37{display:flex;align-items:center;border:none;background-color:transparent;text-align:left;font-family:inherit;gap:var(--spacing-1);padding:.375rem .6875rem;color:var(--settings-submenu-color);font-size:inherit;line-height:inherit;cursor:pointer;outline:none;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._switch-body_7nhpo_37[aria-checked=true] ._switch-track_7nhpo_1{background-color:#03893d}._switch-body_7nhpo_37[aria-checked=true] ._switch-icon_7nhpo_31{color:#03893d}._switch-body_7nhpo_37[aria-checked=true] ._switch-thumb_7nhpo_17{transform:translate(1rem,.125rem)}._switch-body_7nhpo_37:hover,._switch-body_7nhpo_37:focus-visible{color:var(--settings-media-hover-color);background-color:var(--settings-media-hover-bg-color)}[aria-checked=true]:is(._switch-body_7nhpo_37:hover,._switch-body_7nhpo_37:focus-visible) ._switch-track_7nhpo_1{background-color:#e8e8e8}._switch-label_7nhpo_78{flex-grow:1}._menu-icon_7nhpo_82{width:1.125rem;height:1.125rem}._feedback-overlay_14jdq_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;padding:var(--spacing-4);flex-direction:column;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;pointer-events:none}._feedback-message_14jdq_14{font-weight:300;position:absolute;top:10%;display:flex;justify-content:center;align-items:center;padding:var(--spacing-2);background-color:var(--feedback-message-bg-color, black);color:var(--feedback-message-color, white);border-radius:var(--radius-2);font-size:1rem;line-height:1.5;opacity:.75}._feedback-icon_14jdq_30{box-sizing:border-box;display:inline-flex;color:var(--feedback-icon-color, white);padding:var(--spacing-3);width:4.5rem;height:4.5rem;background-color:var(--feedback-icon-bg-color, black);border-radius:var(--radius-rounded);animation:_feedback-icon-animation_14jdq_1 .2s linear;animation-fill-mode:forwards;will-change:transform,opacity}._feedback-icon_14jdq_30:has(.right){align-self:end}._feedback-icon_14jdq_30:has(.left){align-self:start}._feedback-icon_14jdq_30>svg{width:100%;height:100%}@keyframes _feedback-icon-animation_14jdq_1{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:.5}}@media (max-width: 425px){[data-fullscreen] ._full-screen-button_1xm32_2{display:none}}[data-media-player][data-view-type=audio] ._full-screen-button_1xm32_2{display:none}._gestures-container_1fn3b_1{display:contents}._gesture_1fn3b_1{position:absolute;top:0;right:0;bottom:0;left:0}[data-fullscreen] ._gesture_1fn3b_1{top:3.625rem}button._play-pause-button_vj8da_1{border:none;background:none}@keyframes _appear_13a1y_1{0%{width:0;margin-left:0}to{width:400px;margin-left:1.5rem}}._studio-player-sidebar_13a1y_13{width:400px;margin-left:1.5rem;display:flex;align-items:center;justify-content:center;overflow-y:auto;border-radius:var(--radius-3);border:1px solid var(--sidebar-border-color);background:var(--settings-menu-bg-color);animation:_appear_13a1y_1 .3s ease-out;transition:width .3s ease-out,margin-left .3s ease-out}._studio-player-sidebar_13a1y_13[data-open=false]{width:0;margin-left:0}._small-layout-overlay_cmaq3_1{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;visibility:hidden;align-items:center;justify-content:center}@container player (max-width: 425px){._small-layout-overlay_cmaq3_1{visibility:visible}}._small-layout-button_cmaq3_14{width:5rem;height:5rem;background-color:#1616164d;display:flex;align-items:center;justify-content:center;border-radius:50%}._small-layout-icon-play_cmaq3_24,._small-layout-icon-pause_cmaq3_30{width:3rem;height:3rem;color:#fff}._small-layout-timestamp_cmaq3_36{position:absolute;left:0;bottom:0;margin:.5rem;display:flex;background:#000c;color:#fff;padding:.375rem .75rem;border-radius:var(--radius-2)}._full-screen-close-icon_cmaq3_49{display:none}[data-fullscreen] ._full-screen-close-icon_cmaq3_49{background-color:transparent;border:none;display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;padding:1.25rem;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none}[data-fullscreen][data-playing] ._full-screen-close-icon_cmaq3_49,[data-media-player][data-playing] ._small-layout-button_cmaq3_14,[data-media-player][data-playing] ._small-layout-timestamp_cmaq3_36{animation:_fade-out_cmaq3_1 1s;animation-delay:.5s;animation-fill-mode:forwards}@keyframes _fade-out_cmaq3_1{0%{opacity:1}to{opacity:0}}._time-indicator_1uygf_1{display:flex;color:#586874;-webkit-user-select:none;user-select:none}[data-fullscreen] ._time-indicator_1uygf_1,[data-darkmode=true] ._time-indicator_1uygf_1{color:#fff}._comment-markers_2yz4f_1{display:flex;position:relative;width:100%;height:.375rem;-webkit-user-select:none;user-select:none;pointer-events:none;margin-top:.375rem}._comment-marker_2yz4f_1{position:absolute;height:100%;width:.375rem;background-color:var(--comments-indicator-color);border-radius:50%}[data-darkmode=true] ._comment-marker_2yz4f_1,[data-fullscreen] ._comment-marker_2yz4f_1{background-color:var(--comments-indicator-color-darkmode)}._timeline-wrapper_2yz4f_24,._timeline-wrapper-compact_2yz4f_25{position:relative;display:flex;flex-direction:column;align-items:center;grid-area:slider}._timeline-wrapper_2yz4f_24{padding:0 var(--spacing-1)}._timeline-wrapper-compact_2yz4f_25{padding:0 var(--spacing-3)}._timeline-wrapper-compact_2yz4f_25:has(._comment-markers_2yz4f_1){margin-top:-.375rem}._timeline-wrapper-compact_2yz4f_25 ._comment-markers_2yz4f_1{margin-top:0}@container player (width > 400px) and (height > 300px){._timeline-wrapper-compact_2yz4f_25{padding:0 var(--spacing-3)}}._track_2yz4f_53{width:100%;height:.25rem;will-change:height;position:relative;background-color:var(--timeline-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_2yz4f_66{position:absolute;width:1.125rem;height:1.125rem;background-color:var(--timeline-thumb-color, #2b7abc);border-radius:var(--radius-rounded);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._root_2yz4f_80{display:inline-flex;width:100%;height:1.25rem;position:relative;align-items:center;contain:layout style;outline:none;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._root_2yz4f_80[data-active] ._track_2yz4f_53{border-radius:var(--radius-2);height:.625rem}._root_2yz4f_80[data-focus] ._track_2yz4f_53{outline:var(--focus-ring);outline-offset:1px;border-radius:2px}._root_2yz4f_80[data-active] ._thumb_2yz4f_66{opacity:1}._track-inner_2yz4f_110{position:absolute;will-change:width;height:100%}._progress_2yz4f_116{z-index:0;width:var(--slider-progress, 0%);background-color:var(--timeline-track-progress-bg-color, #adb2b6)}._track-fill_2yz4f_122{z-index:1;width:var(--slider-fill, 0%);background-color:var(--timeline-track-fill-bg-color, #2b7abc)}:is([data-fullscreen] ._root_2yz4f_80,[data-darkmode=true] ._root_2yz4f_80) ._track_2yz4f_53{background-color:#333}:is([data-fullscreen] ._root_2yz4f_80,[data-darkmode=true] ._root_2yz4f_80) ._progress_2yz4f_116{background-color:#666}._pins_2yz4f_139{display:flex;position:relative;height:2rem;width:100%;-webkit-user-select:none;user-select:none;margin-top:.25rem}._pin-button_2yz4f_148{display:flex;background-color:transparent;border:none;padding:0;position:absolute;transform:translate(-50%);cursor:pointer;transition:transform .2s ease-out;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}._pin-button_2yz4f_148:hover,._pin-button_2yz4f_148:focus-visible{transform:translate(-50%) scale(1.25);z-index:1}._pin-button_2yz4f_148:focus-visible{outline:var(--focus-ring);border-radius:var(--radius-2)}._annotation-pin_2yz4f_174{fill:var(--pin-color-1);stroke:var(--pin-color-2)}._annotation-pin_2yz4f_174:focus-visible{outline:var(--focus-ring)}._quiz-pin_2yz4f_183{fill:var(--pin-color-2);stroke:var(--controls-layout-bg-color)}._quiz-pin_2yz4f_183:focus-visible{outline:var(--focus-ring)}._annotation-pin-child_2yz4f_192{fill:var(--pin-color-3)}._quiz-pin-child_2yz4f_196{fill:#fff;font-size:.875rem}._interactive-pin-container_2yz4f_201{position:absolute;top:0;right:0;bottom:0;left:0;padding:0 var(--spacing-2);pointer-events:none}._interactive-pin-wrapper_2yz4f_208{position:relative;width:100%;height:100%}._interactive-pin-icon_2yz4f_214{transform-box:fill-box;transform-origin:center;transition:transform .2s ease-out}._interactive-pin-icon_2yz4f_214[data-open=true]{transform:rotate(45deg)}._interactive-pin_2yz4f_201{filter:drop-shadow(0 3px 6px rgba(0 0 0 / .16)) drop-shadow(0 3px 6px rgba(0 0 0 / .1))}._interactive-pin_2yz4f_201>._bg_2yz4f_228{fill:var(--timeline-thumb-color)}._interactive-pin_2yz4f_201>._symbol_2yz4f_232{stroke:var(--controls-layout-bg-color)}._interactive-pin-button_2yz4f_237{position:absolute;cursor:pointer;transform:translate(-50%);background-color:transparent;border:none;padding:0;display:flex;touch-action:manipulation;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;pointer-events:auto;top:-8px}:is(._interactive-pin-button_2yz4f_237:hover,._interactive-pin-button_2yz4f_237:focus-visible) ._interactive-pin_2yz4f_201>._bg_2yz4f_228{fill:#225f92}._interactive-pin-button_2yz4f_237:focus-visible{outline:var(--focus-ring);border-radius:var(--radius-2)}._interactive-pin-menu_2yz4f_266{box-sizing:border-box;display:flex;flex-direction:column;gap:.25rem;background-color:var(--settings-menu-bg-color, white);padding:.75rem .5rem;border-radius:var(--radius-2);width:200px;z-index:1000;pointer-events:auto;filter:drop-shadow(0 .125rem .1875rem rgba(0 0 0 / .5))}._interactive-pin-menu_2yz4f_266:focus-visible{outline:var(--focus-ring)}._interactive-pin-menu-item_2yz4f_287{-webkit-user-select:none;user-select:none;font-family:inherit;font-size:1rem;text-rendering:geometricprecision;display:flex;align-items:center;gap:.25rem;color:var(--pin-color-3);padding:.375rem .625rem;border-radius:var(--radius-2);border:1px solid #d7dade;background-color:var(--pin-color-1);cursor:pointer}._interactive-pin-menu-item_2yz4f_287:hover{background-color:#e8eaec}._interactive-pin-menu-item_2yz4f_287:focus-visible{outline:var(--focus-ring)}._arrow_2yz4f_313{fill:#fff}._tooltip_2yz4f_317{background-color:var(--tooltip-bg-color);color:#fff;padding:.375rem .75rem;border-radius:var(--radius-2);font-size:.875rem;pointer-events:none}._tooltip-arrow_2yz4f_326{fill:var(--tooltip-bg-color)}._wrapper_trdhg_1{display:flex;align-items:center}._track_trdhg_6{width:100%;height:.25rem;will-change:height;background-color:var(--volume-track-bg-color, #ccd0d2);border-radius:var(--radius-1);contain:strict;transition:height .15s,border-radius .15s}._thumb_trdhg_18{position:absolute;width:.875rem;height:.875rem;background-color:var(--volume-thumb-bg-color, #2d3b45);border-radius:var(--radius-rounded);cursor:pointer;opacity:0;transform:translate(-50%) translateZ(0);transition:opacity .15s ease-in;left:var(--slider-fill);will-change:left}._track-fill_trdhg_32{width:var(--slider-fill, 0%);will-change:width;height:100%;background-color:var(--volume-track-fill-bg-color, #2d3b45)}:is([data-fullscreen],[data-darkmode=true]) ._track_trdhg_6{background-color:#666}:is([data-fullscreen],[data-darkmode=true]) ._track-fill_trdhg_32,:is([data-fullscreen],[data-darkmode=true]) ._thumb_trdhg_18{background-color:#f5f5f5}._root_trdhg_51{display:inline-flex;height:1.25rem;align-items:center;contain:layout style;cursor:pointer;user-select:none;touch-action:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;width:0;will-change:width,margin;transition:all .15s;box-sizing:border-box}@media (max-width: 425px) and (hover: none){._root_trdhg_51{display:none}}._root_trdhg_51[data-active] ._track_trdhg_6{border-radius:.125rem;height:.3125rem}._root_trdhg_51[data-focus]{outline:none}._root_trdhg_51[data-focus] ._track_trdhg_6{outline:var(--focus-ring);outline-offset:1px;border-radius:2px}._root_trdhg_51[data-active] ._thumb_trdhg_18{opacity:1}._wrapper_trdhg_1:hover [data-media-volume-slider],[data-media-volume-slider][data-active]{margin-left:.5rem;width:4rem}._root_narhv_1{background-color:var(--controls-layout-bg-color, #f5f5f5);padding:var(--controls-layout-padding-small);box-sizing:border-box;display:grid;align-items:center;border-bottom-left-radius:var(--radius-3);border-bottom-right-radius:var(--radius-3)}@container player (width > 400px) and (height > 300px){._root_narhv_1{padding:var(--controls-layout-padding-medium)}}[data-fullscreen] ._root_narhv_1{border-bottom-left-radius:0;border-bottom-right-radius:0}._normal_narhv_22{grid-template-columns:auto 1fr auto;grid-template-areas:"slider slider slider" "left-controls indicators right-controls"}@container player (width > 400px) and (height > 300px){._normal_narhv_22{padding-top:0}}._compact_narhv_33{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"left-controls slider right-controls"}@container player (width > 425px){._compact_narhv_33{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"left-controls indicators slider right-controls"}}[data-fullscreen] ._root_narhv_1,._root_narhv_1[data-darkmode=true]{background-color:#000;padding:var(--controls-layout-padding-large)}[data-fullscreen] ._root_narhv_1[data-controls-layout=normal]{padding-top:var(--controls-layout-padding-small)}[data-fullscreen] ._root_narhv_1:not(:has([data-pins])){position:fixed;bottom:0;width:100%;opacity:0;transition:opacity .3s ease-in-out}[data-fullscreen][data-controls] ._root_narhv_1,[data-fullscreen]:has([role=dialog]) ._root_narhv_1{opacity:1}._left-controls_narhv_66{display:flex;grid-area:left-controls}@container player (width > 400px) and (height > 300px){._left-controls_narhv_66{gap:.5rem}}._right-controls_narhv_75{display:flex;grid-area:right-controls}@container player (width > 400px) and (height > 300px){._right-controls_narhv_75{gap:.5rem}}._indicators_narhv_84{grid-area:indicators;font-size:1rem;overflow:hidden;display:none;margin-left:.25rem}@container player (width > 425px){._indicators_narhv_84{display:block}}@container (height > 300px){._indicators_narhv_84{margin-left:1rem}}.studio-player-main-layout{--volume-track-bg-color: #ccd0d2;--volume-track-fill-bg-color: #2d3b45;--volume-thumb-bg-color: #2d3b45;--feedback-message-bg-color: black;--feedback-message-color: white;--feedback-icon-color: white;--feedback-icon-bg-color: black;--timeline-track-bg-color: #ccd0d2;--timeline-track-progress-bg-color: #adb2b6;--timeline-track-fill-bg-color: #2b7abc;--timeline-progress-bg-color: #adb2b6;--timeline-thumb-color: #2b7abc;--settings-menu-bg-color: white;--settings-submenu-color: #2d3b45;--settings-media-hover-color: white;--settings-media-hover-bg-color: rgb(43 122 188);--settings-media-submenu-hint-color: var(--settings-submenu-color);--captions-background-color: rgba(22 22 22 / .75);--captions-color: white;--comments-background-color: rgba(0 0 0 / .8);--comments-color: white;--comments-font-size-small: .75rem;--comments-font-size-normal: .875rem;--comments-font-size-large: 1rem;--comments-author-color: white;--comments-indicator-color: #64707a;--comments-indicator-color-darkmode: #868686;--comments-avatar-size-xss: 1.25rem;--comments-avatar-size-xs: 1.875rem;--comments-avatar-size-s: 2.5rem;--controls-layout-bg-color: #f5f5f5;--controls-layout-padding-small: .25rem;--controls-layout-padding-medium: .5rem;--controls-layout-padding-large: .75rem;--sidebar-border-color: #d7dade;--media-button-icon-color: #2d3b45;--media-button-icon-hover-color: #e0e0e0;--focus-outline-color: #2b7abc;--spacing-1: .5rem;--spacing-2: .625rem;--spacing-3: 1rem;--spacing-4: 2rem;--radius-1: .0625rem;--radius-2: .25rem;--radius-3: .625rem;--radius-rounded: 50%;--media-button-area-size-small: 2rem;--media-button-area-size-medium: 2.5rem;--media-button-icon-size-small: 1rem;--media-button-icon-size-medium: 1.25rem;--action-buttons-color: #0374b5;--action-buttons-hover-color: #235f93;--action-buttons-border-color: #025483;--warning-color: #e62429;--pin-color-1: #f2f4f4;--pin-color-2: #586874;--pin-color-3: #273540;--pin-light-color: #9ea6ad;--tooltip-bg-color: #334451;--focus-ring: 2px solid var(--focus-outline-color);--secondary-text-color: #586874;--secondary-text-hover-color: #F2F4F4;display:flex;height:100%}[data-media-player]{outline:none;position:relative;font-family:Lato,sans-serif;display:grid;container:player / size;width:100%;height:100%;grid-template-rows:1fr auto;overflow:hidden}[data-media-player]:focus-visible{outline:var(--focus-ring)}[data-media-provider]{display:flex;position:relative;background-color:#000;contain:paint;border-top-left-radius:var(--radius-3);border-top-right-radius:var(--radius-3)}[data-media-provider] video,[data-media-provider] iframe{width:100%;height:100%;object-fit:contain;position:absolute}[data-fullscreen] [data-media-provider]{border-top-left-radius:0;border-top-right-radius:0}.audio-layout-wrapper{display:flex;align-items:center;justify-content:center;position:relative;background-color:var(--controls-layout-bg-color);width:100%;border-top-left-radius:var(--radius-3);border-top-right-radius:var(--radius-3)}.controls-button{background-color:transparent;border:none;border-radius:var(--radius-2);cursor:pointer;margin:0;display:flex;align-items:center;justify-content:center;transition:background-color .2s;width:var(--media-button-area-size-small);height:var(--media-button-area-size-small)}.controls-button[data-hover],.controls-button:hover{background-color:var(--media-button-icon-hover-color, #e0e0e0)}.controls-button:focus-visible,.controls-button[data-focus]{outline:var(--focus-ring)}.controls-button-icon{color:var(--media-button-icon-color);min-width:var(--media-button-icon-size-small);min-height:var(--media-button-icon-size-small)}@container player (width > 400px) and (height > 300px){.controls-button-icon{min-width:var(--media-button-icon-size-medium);min-height:var(--media-button-icon-size-medium)}}[data-fullscreen] .controls-button{width:var(--media-button-area-size-medium);height:var(--media-button-area-size-medium)}[data-fullscreen]:not([data-controls]){cursor:none}:is([data-fullscreen],[data-darkmode=true]) .controls-button-icon{color:#fff}:is([data-fullscreen],[data-darkmode=true]) .controls-button[data-hover],:is([data-fullscreen],[data-darkmode=true]) .controls-button:hover{background-color:#ffffff26}.icon-rotate{transition:transform .2s ease-out}.controls-button[aria-expanded=true] .icon-rotate{transform:rotate(60deg);transition:transform .1s ease-in}.vds-blocker{top:0;right:0;bottom:0;left:0;position:absolute;pointer-events:none}