@instructure/studio-player 0.3.0 → 0.3.1

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './StudioPlayer/StudioPlayer';
 export * from './types';
 export * from './constants';
+export { useMediaState, useMediaStore } from '@vidstack/react';

package/dist/studio-player.es.js

@@ -4,6 +4,7 @@ var N = (e, n, o) => Ue(e, typeof n != "symbol" ? n + "" : n, o);
 import { jsx as t, jsxs as a, Fragment as te } from "react/jsx-runtime";
 import { createContext as ne, useContext as oe, useState as P, useCallback as f, useEffect as H, useMemo as I, useRef as ie } from "react";
 import { useMediaPlayer as B, Spinner as J, useMediaRemote as Q, useMediaState as p, isTrackCaptionKind as qe, Track as Ge, Captions as We, usePlaybackRateOptions as je, useCaptionOptions as Qe, useVideoQualityOptions as Ye, useMediaStore as ge, Poster as Xe, FullscreenButton as Je, Time as ue, TimeSlider as z, VolumeSlider as q, MediaPlayer as et, MediaProvider as tt } from "@vidstack/react";
+import { useMediaState as Vi, useMediaStore as Hi } from "@vidstack/react";
 import { initReactI18next as nt, useTranslation as C } from "react-i18next";
 import ot from "i18next";
 import it from "i18next-resources-to-backend";
@@ -84,7 +85,7 @@ function ut({
   };
   return /* @__PURE__ */ t(Pe.Provider, { value: b, children: v });
 }
-function E() {
+function A() {
   const e = oe(Pe);
   if (!e)
     throw new Error(
@@ -103,7 +104,7 @@ const dt = "_annotation-overlay_1kxzn_1", mt = {
   };
 };
 function pt({ annotations: e }) {
-  const n = B(), o = g(), i = E(), [s, c] = P(
+  const n = B(), o = g(), i = A(), [s, c] = P(
     null
   ), r = f(
     (m) => {
@@ -216,7 +217,7 @@ function xt({ captions: e }) {
     ) : null
   ] });
 }
-const R = [0.5, 0.75, 1, 1.25, 1.5, 2], Lt = [0.5, 1, 2, 3, 4], Se = 5, Nt = (e) => {
+const V = [0.5, 0.75, 1, 1.25, 1.5, 2], Lt = [0.5, 1, 2, 3, 4], Se = 5, Nt = (e) => {
   const [, n] = P({});
   return I(() => {
     let o = [];
@@ -261,7 +262,7 @@ const R = [0.5, 0.75, 1, 1.25, 1.5, 2], Lt = [0.5, 1, 2, 3, 4], Se = 5, Nt = (e)
       i.clear();
     };
   }, [o, i, e]), i;
-}, It = "_comments-overlay_1puzm_1", St = "_comments-container_1puzm_10", Tt = "_comment_1puzm_1", Et = "_comment-text_1puzm_47", At = "_comment-author-avatar_1puzm_70", Rt = "_comment-author-name_1puzm_89", V = {
+}, It = "_comments-overlay_1puzm_1", St = "_comments-container_1puzm_10", Tt = "_comment_1puzm_1", Et = "_comment-text_1puzm_47", At = "_comment-author-avatar_1puzm_70", Rt = "_comment-author-name_1puzm_89", E = {
   "comments-overlay": "_comments-overlay_1puzm_1",
   commentsOverlay: It,
   "comments-container": "_comments-container_1puzm_10",
@@ -275,20 +276,20 @@ const R = [0.5, 0.75, 1, 1.25, 1.5, 2], Lt = [0.5, 1, 2, 3, 4], Se = 5, Nt = (e)
   commentAuthorName: Rt
 };
 function Vt({ comment: e }) {
-  return /* @__PURE__ */ a("div", { className: V.comment, onClick: () => {
+  return e.render ? e.render(e, E) : /* @__PURE__ */ a("div", { className: E.comment, onClick: () => {
     var n;
     return (n = e.onClick) == null ? void 0 : n.call(e, e);
   }, children: [
     /* @__PURE__ */ t(
       "img",
       {
-        className: V.commentAuthorAvatar,
+        className: E.commentAuthorAvatar,
         src: e.user.avatar,
         alt: e.user.name
       }
     ),
-    /* @__PURE__ */ t("span", { className: V.commentText, children: e.text }),
-    /* @__PURE__ */ t("span", { className: V.commentAuthorName, children: e.user.name })
+    /* @__PURE__ */ t("span", { className: E.commentText, children: e.text }),
+    /* @__PURE__ */ t("span", { className: E.commentAuthorName, children: e.user.name })
   ] });
 }
 const Ht = 5;
@@ -297,15 +298,15 @@ function Bt({ comments: e }) {
   return e.length > 0 && n.state.commentsEnabled ? /* @__PURE__ */ t(
     "div",
     {
-      className: V.commentsOverlay,
+      className: E.commentsOverlay,
       style: {
         flexDirection: n.state.captionPositionOnTop && i ? "column-reverse" : "column"
       },
-      children: /* @__PURE__ */ t("div", { className: V.commentsContainer, children: i ? s.slice(-4) : s })
+      children: /* @__PURE__ */ t("div", { className: E.commentsContainer, children: i ? s.slice(-4) : s })
     }
   ) : null;
 }
-const Ot = "_root_1x28e_1", Ft = "_left-controls_1x28e_28", zt = "_right-controls_1x28e_34", Zt = "_indicators_1x28e_40", Kt = "_normal-timeline_1x28e_49", Dt = "_compact-timeline_1x28e_55", A = {
+const Ot = "_root_1x28e_1", Ft = "_left-controls_1x28e_28", zt = "_right-controls_1x28e_34", Zt = "_indicators_1x28e_40", Kt = "_normal-timeline_1x28e_49", Dt = "_compact-timeline_1x28e_55", R = {
   root: Ot,
   "left-controls": "_left-controls_1x28e_28",
   leftControls: Ft,
@@ -325,15 +326,15 @@ function $t({
   const i = B();
   return H(() => {
     i && (i.remoteControl.pauseControls(), n && (n.current = i));
-  }, [i, n]), /* @__PURE__ */ a("div", { "data-darkmode": e, className: A.root, children: [
-    /* @__PURE__ */ t(pe, { className: A.normalTimeline }),
-    /* @__PURE__ */ a("div", { className: A.leftControls, children: [
+  }, [i, n]), /* @__PURE__ */ a("div", { "data-darkmode": e, className: R.root, children: [
+    /* @__PURE__ */ t(pe, { className: R.normalTimeline }),
+    /* @__PURE__ */ a("div", { className: R.leftControls, children: [
       /* @__PURE__ */ t(fo, {}),
       /* @__PURE__ */ t(vi, {})
     ] }),
-    /* @__PURE__ */ t("div", { className: A.indicators, children: /* @__PURE__ */ t(Io, {}) }),
-    /* @__PURE__ */ t(pe, { className: A.compactTimeline }),
-    /* @__PURE__ */ a("div", { className: A.rightControls, children: [
+    /* @__PURE__ */ t("div", { className: R.indicators, children: /* @__PURE__ */ t(Io, {}) }),
+    /* @__PURE__ */ t(pe, { className: R.compactTimeline }),
+    /* @__PURE__ */ a("div", { className: R.rightControls, children: [
       o && /* @__PURE__ */ t(yt, {}),
       /* @__PURE__ */ t(zn, {}),
       /* @__PURE__ */ t(no, {})
@@ -459,7 +460,7 @@ function se({
 }
 const dn = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e, children: /* @__PURE__ */ t("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1 0V12.7489H5.44V18L10.5007 12.7489H16.582V0H1ZM2 1H15.58V11.7339H9.98655L6.52667 15.25V11.7339H2V1ZM5.24963 5.35011H12.3323V4.24835H5.24963V5.35011ZM5.24963 8.18462H9.50067V7.08285H5.24963V8.18462Z", fill: "currentColor" }) });
 function mn() {
-  const { t: e } = C(), n = E(), o = g();
+  const { t: e } = C(), n = A(), o = g();
   return !n.forceComments && n.hasComments ? /* @__PURE__ */ t(
     se,
     {
@@ -587,7 +588,7 @@ const Y = (e) => /* @__PURE__ */ t("svg", { width: 18, height: 18, viewBox: "0 0
 };
 function Pn() {
   const e = L(), n = je({
-    rates: R,
+    rates: V,
     normalLabel: "1x"
   }), { t: o } = C(), i = O();
   return /* @__PURE__ */ a(
@@ -1045,7 +1046,7 @@ const Xn = (e) => /* @__PURE__ */ t("svg", { width: 24, height: 24, viewBox: "0
   fullScreenButton: eo
 };
 function no() {
-  const e = p("fullscreen"), n = B(), o = g(), i = E(), { t: s } = C();
+  const e = p("fullscreen"), n = B(), o = g(), i = A(), { t: s } = C();
   return i.hideFullScreen ? null : /* @__PURE__ */ t(
     "button",
     {
@@ -1452,7 +1453,7 @@ function ai(e, n, o, i) {
   }
 }
 function ci() {
-  const e = Q(), n = p("duration"), o = E(), i = I(() => [
+  const e = Q(), n = p("duration"), o = A(), i = I(() => [
     ...ii(
       o.annotations,
       o.onAnnotationClick
@@ -1462,7 +1463,7 @@ function ci() {
   return /* @__PURE__ */ t("div", { className: u.pins, children: i });
 }
 function ri() {
-  const e = p("duration"), n = E(), o = g();
+  const e = p("duration"), n = A(), o = g();
   return n.hasComments && o.state.commentsEnabled ? /* @__PURE__ */ t("div", { className: u.commentMarkers, children: n.comments.map((i) => {
     const s = Math.min(
       Math.abs(e - i.timestamp),
@@ -1482,7 +1483,7 @@ function ri() {
   }) }) : null;
 }
 function li({ currentTime: e, position: n }) {
-  const [o, i] = P(!1), s = E(), c = f(() => s.interactiveMenuElements.length > 0 ? i((b) => !b) : s.onInteractivePinClick(e), [
+  const [o, i] = P(!1), s = A(), c = f(() => s.interactiveMenuElements.length > 0 ? i((b) => !b) : s.onInteractivePinClick(e), [
     s.interactiveMenuElements,
     s.onInteractivePinClick,
     e
@@ -1614,7 +1615,7 @@ function di() {
 }
 const mi = `${u.progress} ${u.trackInner}`, hi = `${u.trackFill} ${u.trackInner}`;
 function pe({ className: e }) {
-  const n = g(), { hasAnnotations: o, hasQuizmarkers: i, interactive: s } = E(), c = e ? `${u.timelineWrapper} ${e}` : u.timelineWrapper;
+  const n = g(), { hasAnnotations: o, hasQuizmarkers: i, interactive: s } = A(), c = e ? `${u.timelineWrapper} ${e}` : u.timelineWrapper;
   return /* @__PURE__ */ a("div", { className: c, children: [
     s ? /* @__PURE__ */ t(di, {}) : null,
     s || o || i ? /* @__PURE__ */ t(ci, {}) : null,
@@ -1711,8 +1712,8 @@ const _e = {
   decreasePlaybackRate: {
     keys: ["a"],
     onKeyUp({ event: e, player: n, remote: o }) {
-      const s = R.indexOf(n.playbackRate) - 1;
-      s >= 0 && (o.changePlaybackRate(R[s]), n.$state.lastKeyboardAction.set({
+      const s = V.indexOf(n.playbackRate) - 1;
+      s >= 0 && (o.changePlaybackRate(V[s]), n.$state.lastKeyboardAction.set({
         action: "decreasePlaybackRate",
         event: e
       }));
@@ -1721,8 +1722,8 @@ const _e = {
   increasePlaybackRate: {
     keys: ["d"],
     onKeyUp({ event: e, player: n, remote: o }) {
-      const s = R.indexOf(n.playbackRate) + 1;
-      s < R.length && (o.changePlaybackRate(R[s]), n.$state.lastKeyboardAction.set({
+      const s = V.indexOf(n.playbackRate) + 1;
+      s < V.length && (o.changePlaybackRate(V[s]), n.$state.lastKeyboardAction.set({
         action: "increasePlaybackRate",
         event: e
       }));
@@ -2045,6 +2046,8 @@ function Ei({
 export {
   Lt as CAPTION_FONT_SIZE_MULTIPLIERS,
   Se as COMMENT_DURATION,
-  R as PLAYBACK_RATES,
-  Ei as StudioPlayer
+  V as PLAYBACK_RATES,
+  Ei as StudioPlayer,
+  Vi as useMediaState,
+  Hi as useMediaStore
 };

package/dist/types.d.ts

@@ -15,6 +15,7 @@ export type Comment = {
         avatar?: string;
     };
     onClick?: (comment: Comment) => void;
+    render?: (comment: Comment, styles: Record<string, string>) => React.ReactNode;
 };
 export type Annotation = {
     id: string;

package/package.json

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