@instructure/studio-player 1.0.0 → 1.0.1

package/dist/studio-player.es.js

@@ -5,8 +5,8 @@ import { jsx as n, jsxs as l, Fragment as X } from "react/jsx-runtime";
 import { createContext as we, useContext as ye, useState as k, useCallback as p, useEffect as Z, useMemo as D, useRef as z, forwardRef as ft } from "react";
 import { u as V, s as ge, a as b, b as de, i as _t, T as Ct, C as gt, c as bt, d as vt, e as wt, P as yt, F as kt, f as ce, g as be, t as G, v as se, h as Lt, j as xt, k as Mt, l as Pt, M as Nt, m as It } from "./vidstack-CRo1u9eU.js";
 import { n as Zi } from "./vidstack-CRo1u9eU.js";
-import { initReactI18next as Et, useTranslation as f } from "react-i18next";
-import St from "i18next";
+import { initReactI18next as St, useTranslation as f } from "react-i18next";
+import Et from "i18next";
 import Tt from "i18next-resources-to-backend";
 import { useFloating as me, autoUpdate as he, shift as ke, offset as Le, arrow as xe, useListNavigation as ze, useDismiss as Me, useInteractions as Pe, FloatingFocusManager as Ne, FloatingArrow as Ie, useMergeRefs as $e, detectOverflow as At } from "@floating-ui/react";
 const Vt = (e, t, o) => {
@@ -22,7 +22,7 @@ const Vt = (e, t, o) => {
     );
   });
 };
-St.use(Et).use(
+Et.use(St).use(
   Tt(
     (e) => Vt(/* @__PURE__ */ Object.assign({ "./locales/ar.json": () => import("./ar-VCVxJm7K.js"), "./locales/ca.json": () => import("./ca-BEBt24QP.js"), "./locales/cy.json": () => import("./cy-YaAJqNQl.js"), "./locales/da-x-k12.json": () => import("./da-x-k12-lQy2NFaK.js"), "./locales/da.json": () => import("./da-BZWhI2Xn.js"), "./locales/de.json": () => import("./de-BUvRwMD6.js"), "./locales/en-AU-x-unimelb.json": () => import("./en-AU-x-unimelb-CMl3c1a0.js"), "./locales/en-GB-x-ukhe.json": () => import("./en-GB-x-ukhe-oT9RNDTK.js"), "./locales/en.json": () => import("./en-DwAikWk3.js"), "./locales/en_AU.json": () => import("./en_AU-CvZ7peTk.js"), "./locales/en_CY.json": () => import("./en_CY-BG8Pm72U.js"), "./locales/en_GB.json": () => import("./en_GB-CA_2B3N6.js"), "./locales/es.json": () => import("./es-CsXsddFr.js"), "./locales/es_ES.json": () => import("./es_ES-D71hU2MM.js"), "./locales/fi.json": () => import("./fi-D2HqteTW.js"), "./locales/fr.json": () => import("./fr-BAEJ5gcO.js"), "./locales/fr_CA.json": () => import("./fr_CA-BKv7vpJe.js"), "./locales/ga.json": () => import("./ga-COMvYqPH.js"), "./locales/hi.json": () => import("./hi-BejTYLRj.js"), "./locales/ht.json": () => import("./ht-BeM6QStZ.js"), "./locales/id.json": () => import("./id-NJzBnSib.js"), "./locales/is.json": () => import("./is-Cv47H4ey.js"), "./locales/it.json": () => import("./it-B6LzBKYz.js"), "./locales/ja.json": () => import("./ja-BV_3G5Hd.js"), "./locales/kl.json": () => import("./kl-CBFEKDWH.js"), "./locales/mi.json": () => import("./mi-BRHT5aP1.js"), "./locales/ms.json": () => import("./ms-D7bYcHUm.js"), "./locales/nb-x-k12.json": () => import("./nb-x-k12-8GMfCmMo.js"), "./locales/nb.json": () => import("./nb-DyTI7Ts1.js"), "./locales/nl.json": () => import("./nl-DBSxFMy9.js"), "./locales/pl.json": () => import("./pl-DUdYRh1Y.js"), "./locales/pt.json": () => import("./pt-DkTHNOHF.js"), "./locales/pt_BR.json": () => import("./pt_BR-DZZGbQIg.js"), "./locales/ru.json": () => import("./ru-Bxl9NL5w.js"), "./locales/sl.json": () => import("./sl-D2hOGCNb.js"), "./locales/sv-x-k12.json": () => import("./sv-x-k12-B7c2_4ik.js"), "./locales/sv.json": () => import("./sv-Bic7JSI_.js"), "./locales/th.json": () => import("./th-hFDNyurj.js"), "./locales/vi.json": () => import("./vi-Dz6NuOdc.js"), "./locales/zh-Hans.json": () => import("./zh-Hans-DKg6WKbe.js"), "./locales/zh-Hant.json": () => import("./zh-Hant-ZHDw_Y-L.js"), "./locales/zh.json": () => import("./zh-C7jcyKYp.js"), "./locales/zh_HK.json": () => import("./zh_HK-C2PlZhAG.js") }), `./locales/${e}.json`, 3)
   )
@@ -70,9 +70,9 @@ function Ht({
   forceComments: I,
   disableCaptionSettings: h,
   disableStorage: g,
-  captionOffsetOverride: S,
+  captionOffsetOverride: E,
   disableInteractivePinRanges: P,
-  onQuizMarkerShow: E,
+  onQuizMarkerShow: S,
   onCaptionsDelete: O,
   controlsLayout: R,
   startAt: B
@@ -98,9 +98,9 @@ function Ht({
     forceComments: I,
     disableCaptionSettings: h,
     disableStorage: g,
-    captionOffsetOverride: S,
+    captionOffsetOverride: E,
     disableInteractivePinRanges: P,
-    onQuizMarkerShow: E,
+    onQuizMarkerShow: S,
     onCaptionsDelete: O,
     controlsLayout: R,
     startAt: B
@@ -187,7 +187,7 @@ const Ut = [
   "ArrowRight",
   "Escape"
 ];
-function Ee(e, t = !1, o = !0) {
+function Se(e, t = !1, o = !0) {
   Z(() => {
     if (!o)
       return;
@@ -215,7 +215,7 @@ function Ee(e, t = !1, o = !0) {
 }
 function qt(e) {
   const t = D(() => ({ Escape: e }), [e]);
-  return Ee(t);
+  return Se(t);
 }
 const Qe = (e) => /* @__PURE__ */ n("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ n("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.94968 7.74766L3.99993 2.79791L2.79785 3.99999L7.7476 8.94974L2.79785 13.8995L3.99993 15.1016L8.94968 10.1518L13.8994 15.1016L15.1015 13.8995L10.1518 8.94974L15.1015 3.99999L13.8994 2.79791L8.94968 7.74766Z", fill: "currentColor" }) }), Gt = "_controls-overlay_151j5_1", Qt = "_keyboard-shortcuts-overlay_151j5_11", Wt = "_screen-reader-content_151j5_76", Yt = "_controls-button_151j5_90", Xt = "_keyboard-shortcuts-button_151j5_106", Jt = "_kebab-menu-button_151j5_116", en = "_kebab-menu_151j5_116", tn = "_kebab-menu-item_151j5_145", nn = "_close-button_151j5_184", on = "_arrow_151j5_198", A = {
   "controls-overlay": "_controls-overlay_151j5_1",
@@ -413,7 +413,7 @@ function mn() {
         ...I(),
         children: [
           a.kebabMenuElements.map(
-            ({ id: S, text: P, icon: E, onClick: O }, R) => /* @__PURE__ */ l(
+            ({ id: E, text: P, icon: S, onClick: O }, R) => /* @__PURE__ */ l(
               "button",
               {
                 tabIndex: o === R ? 0 : -1,
@@ -425,15 +425,15 @@ function mn() {
                 },
                 ...h({
                   onClick: () => {
-                    O(S), t(!1);
+                    O(E), t(!1);
                   }
                 }),
                 children: [
-                  dn(E) ? E : un[E],
+                  dn(S) ? S : un[S],
                   P
                 ]
               },
-              S
+              E
             )
           ),
           /* @__PURE__ */ n(
@@ -468,7 +468,7 @@ function pn() {
         type: "button",
         className: `${A.controlsButton} ${A.keyboardShortcutsButton}`,
         onClick: u,
-        tabIndex: s.state.interactionsDisabled ? -1 : 0,
+        inert: s.state.interactionsDisabled ? "true" : void 0,
         children: /* @__PURE__ */ n(hn, {})
       }
     ),
@@ -596,7 +596,7 @@ const Y = [0.5, 0.75, 1, 1.25, 1.5, 2], bn = [0.5, 1, 2, 3, 4], vn = 5, wn = (e)
       i.clear();
     };
   }, [o, i, e]), i;
-}, Ln = "_comments-overlay_bymws_1", xn = "_comments-container_bymws_10", Mn = "_kebab_bymws_20", Pn = "_comment_bymws_1", Nn = "_comment-text_bymws_51", In = "_comment-author-avatar_bymws_71", En = "_comment-author-name_bymws_95", K = {
+}, Ln = "_comments-overlay_bymws_1", xn = "_comments-container_bymws_10", Mn = "_kebab_bymws_20", Pn = "_comment_bymws_1", Nn = "_comment-text_bymws_51", In = "_comment-author-avatar_bymws_71", Sn = "_comment-author-name_bymws_95", K = {
   "comments-overlay": "_comments-overlay_bymws_1",
   commentsOverlay: Ln,
   "comments-container": "_comments-container_bymws_10",
@@ -608,9 +608,9 @@ const Y = [0.5, 0.75, 1, 1.25, 1.5, 2], bn = [0.5, 1, 2, 3, 4], vn = 5, wn = (e)
   "comment-author-avatar": "_comment-author-avatar_bymws_71",
   commentAuthorAvatar: In,
   "comment-author-name": "_comment-author-name_bymws_95",
-  commentAuthorName: En
+  commentAuthorName: Sn
 };
-function Sn({ comment: e }) {
+function En({ comment: e }) {
   return e.render ? e.render(e, K) : /* @__PURE__ */ l("div", { className: K.comment, onClick: () => {
     var t;
     return (t = e.onClick) == null ? void 0 : t.call(e, e);
@@ -632,7 +632,7 @@ function An({
   comments: e,
   isKebabMenuVisible: t
 }) {
-  const o = v(), i = kn(e, Tn), s = !!b("textTrack"), a = i.map((r) => /* @__PURE__ */ n(Sn, { comment: r }, r.id));
+  const o = v(), i = kn(e, Tn), s = !!b("textTrack"), a = i.map((r) => /* @__PURE__ */ n(En, { comment: r }, r.id));
   return e.length > 0 && o.state.commentsEnabled ? /* @__PURE__ */ n(
     "div",
     {
@@ -810,7 +810,7 @@ const to = (e) => /* @__PURE__ */ n("svg", { width: 24, height: 24, viewBox: "0
   "menu-icon": "_menu-icon_7nhpo_82",
   menuIcon: lo
 };
-function Se({
+function Ee({
   label: e,
   checked: t = !1,
   onClick: o,
@@ -837,7 +837,7 @@ const co = (e) => /* @__PURE__ */ n("svg", { width: 18, height: 18, viewBox: "0
 function uo() {
   const { t: e } = f(), t = y(), o = v();
   return !t.forceComments && t.hasComments ? /* @__PURE__ */ n(
-    Se,
+    Ee,
     {
       Icon: co,
       label: e("COMMENTS"),
@@ -922,7 +922,7 @@ function Co() {
 function go() {
   const { t: e } = f(), t = v();
   return /* @__PURE__ */ n(
-    Se,
+    Ee,
     {
       label: e("ON_TOP"),
       onClick: t.toggleCaptionPositionOnTop,
@@ -933,7 +933,7 @@ function go() {
 function bo() {
   const { t: e } = f(), t = v();
   return /* @__PURE__ */ n(
-    Se,
+    Ee,
     {
       label: e("INVERT_COLORS"),
       onClick: t.toggleCaptionsInvertColors,
@@ -1083,7 +1083,7 @@ function Po(e, t) {
     }),
     [e]
   );
-  return Ee(i, !0, t), o;
+  return Se(i, !0, t), o;
 }
 const nt = we(null), No = {
   main: mo,
@@ -1103,11 +1103,11 @@ const nt = we(null), No = {
     };
   }
 };
-function Eo() {
+function So() {
   const e = v(), [t, o] = k(["main"]), [i, s] = k(!1), a = p(() => {
     s(!i), o(["main"]), e.setGlobalKeysDisabled(!i);
   }, [i]), r = p((P) => {
-    o((E) => E.concat(P));
+    o((S) => S.concat(P));
   }, []), c = p(() => {
     o((P) => P.length > 1 ? P.slice(0, -1) : P);
   }, []), u = p(() => {
@@ -1121,11 +1121,11 @@ function Eo() {
   }), M = Me(w, { escapeKey: !1 }), { getReferenceProps: L, getFloatingProps: I } = Pe([M]), h = D(
     () => ({ setPage: r, back: c, backToMain: u, toggle: a }),
     [r, c, u, a]
-  ), g = Po(h, i), S = $e([_.setFloating, g]);
+  ), g = Po(h, i), E = $e([_.setFloating, g]);
   return {
     Page: d,
     open: i,
-    floatingRef: S,
+    floatingRef: E,
     referenceRef: _.setReference,
     floatingStyles: C,
     context: w,
@@ -1139,7 +1139,7 @@ function Eo() {
     contextValue: h
   };
 }
-function So() {
+function Eo() {
   const {
     Page: e,
     context: t,
@@ -1150,7 +1150,7 @@ function So() {
     floatingRef: r,
     referenceRef: c,
     contextValue: u
-  } = Eo(), { t: d } = f();
+  } = So(), { t: d } = f();
   return /* @__PURE__ */ l(X, { children: [
     /* @__PURE__ */ n(
       "button",
@@ -1388,7 +1388,7 @@ function f1() {
     /* @__PURE__ */ n(ce, { type: "duration" })
   ] });
 }
-const _1 = "_comment-markers_1i9t2_1", C1 = "_comment-marker_1i9t2_1", g1 = "_timeline-wrapper_1i9t2_23", b1 = "_timeline-wrapper-compact_1i9t2_24", v1 = "_track_1i9t2_33", w1 = "_thumb_1i9t2_46", y1 = "_root_1i9t2_60", k1 = "_track-inner_1i9t2_90", L1 = "_progress_1i9t2_96", x1 = "_track-fill_1i9t2_102", M1 = "_pins_1i9t2_119", P1 = "_pin-button_1i9t2_128", N1 = "_annotation-pin_1i9t2_153", I1 = "_quiz-pin_1i9t2_162", E1 = "_annotation-pin-child_1i9t2_171", S1 = "_quiz-pin-child_1i9t2_175", T1 = "_interactive-pin-container_1i9t2_180", A1 = "_interactive-pin-wrapper_1i9t2_187", V1 = "_interactive-pin-icon_1i9t2_193", R1 = "_interactive-pin_1i9t2_180", H1 = "_bg_1i9t2_207", O1 = "_symbol_1i9t2_211", B1 = "_interactive-pin-button_1i9t2_216", F1 = "_interactive-pin-menu_1i9t2_242", D1 = "_interactive-pin-menu-item_1i9t2_262", Z1 = "_arrow_1i9t2_283", j1 = "_tooltip_1i9t2_287", K1 = "_tooltip-arrow_1i9t2_296", m = {
+const _1 = "_comment-markers_1i9t2_1", C1 = "_comment-marker_1i9t2_1", g1 = "_timeline-wrapper_1i9t2_23", b1 = "_timeline-wrapper-compact_1i9t2_24", v1 = "_track_1i9t2_33", w1 = "_thumb_1i9t2_46", y1 = "_root_1i9t2_60", k1 = "_track-inner_1i9t2_90", L1 = "_progress_1i9t2_96", x1 = "_track-fill_1i9t2_102", M1 = "_pins_1i9t2_119", P1 = "_pin-button_1i9t2_128", N1 = "_annotation-pin_1i9t2_153", I1 = "_quiz-pin_1i9t2_162", S1 = "_annotation-pin-child_1i9t2_171", E1 = "_quiz-pin-child_1i9t2_175", T1 = "_interactive-pin-container_1i9t2_180", A1 = "_interactive-pin-wrapper_1i9t2_187", V1 = "_interactive-pin-icon_1i9t2_193", R1 = "_interactive-pin_1i9t2_180", H1 = "_bg_1i9t2_207", O1 = "_symbol_1i9t2_211", B1 = "_interactive-pin-button_1i9t2_216", F1 = "_interactive-pin-menu_1i9t2_242", D1 = "_interactive-pin-menu-item_1i9t2_262", Z1 = "_arrow_1i9t2_283", j1 = "_tooltip_1i9t2_287", K1 = "_tooltip-arrow_1i9t2_296", m = {
   "comment-markers": "_comment-markers_1i9t2_1",
   commentMarkers: _1,
   "comment-marker": "_comment-marker_1i9t2_1",
@@ -1413,9 +1413,9 @@ const _1 = "_comment-markers_1i9t2_1", C1 = "_comment-marker_1i9t2_1", g1 = "_ti
   "quiz-pin": "_quiz-pin_1i9t2_162",
   quizPin: I1,
   "annotation-pin-child": "_annotation-pin-child_1i9t2_171",
-  annotationPinChild: E1,
+  annotationPinChild: S1,
   "quiz-pin-child": "_quiz-pin-child_1i9t2_175",
-  quizPinChild: S1,
+  quizPinChild: E1,
   "interactive-pin-container": "_interactive-pin-container_1i9t2_180",
   interactivePinContainer: T1,
   "interactive-pin-wrapper": "_interactive-pin-wrapper_1i9t2_187",
@@ -1475,7 +1475,7 @@ const z1 = ft(function({ currentTime: t, position: o }, i) {
     onNavigate: c,
     loop: !0,
     openOnArrowKeyDown: !1
-  }), { getReferenceProps: S, getFloatingProps: P, getItemProps: E } = Pe(
+  }), { getReferenceProps: E, getFloatingProps: P, getItemProps: S } = Pe(
     [h, g]
   ), O = $e([w.setReference, i]), { t: R } = f(), B = be(t);
   return /* @__PURE__ */ l(X, { children: [
@@ -1490,7 +1490,7 @@ const z1 = ft(function({ currentTime: t, position: o }, i) {
         className: m.interactivePinButton,
         ref: O,
         style: { left: `${o}%` },
-        ...S({
+        ...E({
           onClick: _
         }),
         children: /* @__PURE__ */ l(
@@ -1552,7 +1552,7 @@ const z1 = ft(function({ currentTime: t, position: o }, i) {
                   I.current[ee] = ne;
                 },
                 tabIndex: r === ee ? 0 : -1,
-                ...E({
+                ...S({
                   onClick: () => {
                     _e(j, t), a(!1), d.setGlobalKeysDisabled(!1);
                   }
@@ -1607,7 +1607,7 @@ const z1 = ft(function({ currentTime: t, position: o }, i) {
       t.current = !1;
     }
   }), []);
-  return Ee(o), { focusCallback: p((s) => {
+  return Se(o), { focusCallback: p((s) => {
     s && (s.addEventListener("focus", () => {
       e.current = !0;
     }), s.addEventListener("blur", () => {
@@ -2287,7 +2287,7 @@ function Li({
   controlsLayout: o,
   showCaptionsButton: i
 }) {
-  const s = V(), a = v(), { hasAnnotations: r, hasQuizmarkers: c, interactive: u } = y();
+  const s = V(), a = v(), { hasAnnotations: r, hasQuizmarkers: c, interactive: u } = y(), d = a.state.interactionsDisabled || a.state.isKeyboardShortcutsOpen;
   return ki(), Z(() => {
     s && (s.remoteControl.pauseControls(), t && (typeof t == "function" ? t(s) : t.current = s));
   }, [s, t]), /* @__PURE__ */ l(
@@ -2298,6 +2298,7 @@ function Li({
         [W.normal]: o === "normal",
         [W.compact]: o === "compact"
       }),
+      inert: d ? "true" : void 0,
       children: [
         o === "normal" ? /* @__PURE__ */ l(
           Ze,
@@ -2326,7 +2327,7 @@ function Li({
         ) : null,
         /* @__PURE__ */ l("div", { className: W.rightControls, children: [
           i && /* @__PURE__ */ n(fn, {}),
-          /* @__PURE__ */ n(So, {}),
+          /* @__PURE__ */ n(Eo, {}),
           /* @__PURE__ */ n(Uo, {})
         ] })
       ]
@@ -2397,9 +2398,9 @@ function Bi({
   onCaptionsDelete: I,
   interactiveMenuElements: h = [],
   kebabMenuElements: g = [],
-  darkMode: S = !1,
+  darkMode: E = !1,
   autoLoadCaptionSrc: P = "",
-  forceComments: E = !1,
+  forceComments: S = !1,
   disableCaptionSettings: O = !1,
   disableStorage: R = !1,
   startAt: B,
@@ -2411,7 +2412,7 @@ function Bi({
 }) {
   const { contextValue: Ce, shortcuts: ct, storage: ut } = hi(
     a,
-    E,
+    S,
     O,
     B
   ), { i18n: Ve } = f();
@@ -2437,8 +2438,8 @@ function Bi({
       onInteractivePinClick: L,
       interactiveMenuElements: h,
       kebabMenuElements: g,
-      darkMode: S,
-      forceComments: E,
+      darkMode: E,
+      forceComments: S,
       disableCaptionSettings: O,
       disableStorage: R,
       captionOffsetOverride: fe,
@@ -2450,7 +2451,7 @@ function Bi({
       children: /* @__PURE__ */ n(Rt, { contextValue: Ce, children: /* @__PURE__ */ l(
         Nt,
         {
-          "data-version": "1.0.0",
+          "data-version": "1.0.1",
           crossOrigin: j,
           storage: R ? null : ut,
           title: e,
@@ -2481,7 +2482,7 @@ function Bi({
             /* @__PURE__ */ n(
               Li,
               {
-                darkMode: S,
+                darkMode: E,
                 playerRef: t,
                 showCaptionsButton: !O,
                 controlsLayout: ne

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/studio-player",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "description": "Next generation media player for Instructure",
   "module": "./dist/studio-player.es.js",