stagebook 0.1.0 → 0.3.0

package/dist/components/index.d.cts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { b as DiscussionType, i as MetadataType, C as Condition } from '../evaluateConditions-DzlC6fez.cjs';
-export { al as MediaPlayer, am as MediaPlayerProps, V as VideoEvent } from '../evaluateConditions-DzlC6fez.cjs';
+import { b as DiscussionType, i as MetadataType, C as Condition } from '../evaluateConditions-fqWC3Vz2.cjs';
+export { al as MediaPlayer, am as MediaPlayerProps, V as VideoEvent } from '../evaluateConditions-fqWC3Vz2.cjs';
 import 'zod';
 
 interface StagebookContext {
-    resolve(reference: string, position?: string): unknown[];
+    get(key: string, scope?: string): unknown[];
     save(key: string, value: unknown, scope?: "player" | "shared"): void;
     getElapsedTime(): number;
     submit(): void;
@@ -27,11 +27,14 @@ interface StagebookContext {
         onComplete: (results: unknown) => void;
     }) => React$1.ReactNode;
 }
+interface InternalStagebookContext extends StagebookContext {
+    resolve(reference: string, position?: string): unknown[];
+}
 declare function StagebookProvider({ value, children, }: {
     value: StagebookContext;
     children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function useStagebookContext(): StagebookContext;
+declare function useStagebookContext(): InternalStagebookContext;
 declare function useResolve(reference: string, position?: string): unknown[];
 declare function useSave(): StagebookContext["save"];
 declare function useElapsedTime(): number;

package/dist/components/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { b as DiscussionType, i as MetadataType, C as Condition } from '../evaluateConditions-DzlC6fez.js';
-export { al as MediaPlayer, am as MediaPlayerProps, V as VideoEvent } from '../evaluateConditions-DzlC6fez.js';
+import { b as DiscussionType, i as MetadataType, C as Condition } from '../evaluateConditions-fqWC3Vz2.js';
+export { al as MediaPlayer, am as MediaPlayerProps, V as VideoEvent } from '../evaluateConditions-fqWC3Vz2.js';
 import 'zod';
 
 interface StagebookContext {
-    resolve(reference: string, position?: string): unknown[];
+    get(key: string, scope?: string): unknown[];
     save(key: string, value: unknown, scope?: "player" | "shared"): void;
     getElapsedTime(): number;
     submit(): void;
@@ -27,11 +27,14 @@ interface StagebookContext {
         onComplete: (results: unknown) => void;
     }) => React$1.ReactNode;
 }
+interface InternalStagebookContext extends StagebookContext {
+    resolve(reference: string, position?: string): unknown[];
+}
 declare function StagebookProvider({ value, children, }: {
     value: StagebookContext;
     children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function useStagebookContext(): StagebookContext;
+declare function useStagebookContext(): InternalStagebookContext;
 declare function useResolve(reference: string, position?: string): unknown[];
 declare function useSave(): StagebookContext["save"];
 declare function useElapsedTime(): number;

package/dist/components/index.js

@@ -1,18 +1,41 @@
 import {
   computeWatchedRanges,
   evaluateCondition,
+  getNestedValueByPath,
+  getReferenceKeyAndPath,
   promptFileSchema
-} from "../chunk-SSOMQ3BK.js";
+} from "../chunk-2J4CDBDM.js";
 
 // src/components/StagebookProvider.tsx
-import { createContext, useContext, useState, useEffect } from "react";
+import React, { createContext, useContext, useState, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
-var StagebookReactContext = createContext(null);
+var StagebookReactContext = createContext(
+  null
+);
 function StagebookProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx(StagebookReactContext.Provider, { value, children });
+  const resolve = React.useCallback(
+    (reference, position) => {
+      let referenceKey;
+      let path;
+      try {
+        ({ referenceKey, path } = getReferenceKeyAndPath(reference));
+      } catch {
+        console.error(`Invalid reference: "${reference}"`);
+        return [];
+      }
+      const rawValues = value.get(referenceKey, position);
+      return rawValues.map((v) => getNestedValueByPath(v, path)).filter((v) => v !== void 0);
+    },
+    [value]
+  );
+  const internal = React.useMemo(
+    () => ({ ...value, resolve }),
+    [value, resolve]
+  );
+  return /* @__PURE__ */ jsx(StagebookReactContext.Provider, { value: internal, children });
 }
 function useStagebookContext() {
   const ctx = useContext(StagebookReactContext);
@@ -38,9 +61,15 @@ function useElapsedTime() {
 function useTextContent(path) {
   const { getTextContent } = useStagebookContext();
   const [data, setData] = useState(void 0);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(void 0);
   useEffect(() => {
+    if (!path) {
+      setData(void 0);
+      setError(void 0);
+      setIsLoading(false);
+      return;
+    }
     let cancelled = false;
     setIsLoading(true);
     setError(void 0);
@@ -1316,16 +1345,21 @@ function MediaPlayer({
   stopAt,
   allowScrubOutsideBounds = false,
   stepDuration = 1,
+  playback,
   controls
 }) {
   const youtubeVideoId = isYouTubeURL(url);
   const saveKey = `mediaPlayer_${name}`;
+  const hasAnyControls = controls !== void 0 && (controls.playPause || controls.seek || controls.step || controls.speed);
+  const effectivePlayback = playback ?? (hasAnyControls || syncToStageTime ? "manual" : "once");
   if (!youtubeVideoId && !isSafeURL(url)) {
     return /* @__PURE__ */ jsx13("div", { "data-testid": "mediaPlayer", role: "alert", children: "Invalid media URL" });
   }
   const eventsRef = useRef4([]);
   const videoRef = useRef4(null);
+  const autoplayAttemptedRef = useRef4(false);
   const [isPaused, setIsPaused] = useState4(true);
+  const [showPlayOnce, setShowPlayOnce] = useState4(false);
   const [isHovered, setIsHovered] = useState4(false);
   const [currentTime, setCurrentTime] = useState4(0);
   const [duration, setDuration] = useState4(0);
@@ -1336,6 +1370,8 @@ function MediaPlayer({
   const [loadError, setLoadError] = useState4(null);
   useEffect7(() => {
     setLoadError(null);
+    autoplayAttemptedRef.current = false;
+    setShowPlayOnce(false);
   }, [url]);
   const [ytHandle, setYtHandle] = useState4(null);
   const scrubWasPlayingRef = useRef4(false);
@@ -1512,6 +1548,17 @@ function MediaPlayer({
       videoRef.current.currentTime = startAt;
     }
   }, []);
+  useEffect7(() => {
+    if (effectivePlayback !== "once") return;
+    if (autoplayAttemptedRef.current) return;
+    const v = videoRef.current;
+    if (!v) return;
+    if (duration === 0) return;
+    autoplayAttemptedRef.current = true;
+    void v.play().catch(() => {
+      setShowPlayOnce(true);
+    });
+  }, [effectivePlayback, duration]);
   const recordEvent = useCallback3(
     (type, videoTime, extra) => {
       const event = {
@@ -1671,6 +1718,7 @@ function MediaPlayer({
   }, [playbackRate, recordEvent]);
   const handleKeyDown = useCallback3(
     (e) => {
+      if (effectivePlayback === "once") return;
       if (ytHandle) {
         switch (e.key) {
           case " ":
@@ -1773,7 +1821,13 @@ function MediaPlayer({
           break;
       }
     },
-    [seek, stepDuration, playbackRate, enterFastScrubForward]
+    [
+      effectivePlayback,
+      seek,
+      stepDuration,
+      playbackRate,
+      enterFastScrubForward
+    ]
   );
   const handleKeyUp = useCallback3(
     (e) => {
@@ -2161,10 +2215,86 @@ function MediaPlayer({
                   },
                   children: /* @__PURE__ */ jsx13(HTML5Controls, { ...html5ControlsProps })
                 }
+              ),
+              showPlayOnce && /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": "mediaPlayer-playOnce",
+                  "aria-label": "Play video",
+                  onClick: () => {
+                    setShowPlayOnce(false);
+                    const v = videoRef.current;
+                    if (!v) {
+                      setShowPlayOnce(true);
+                      return;
+                    }
+                    void v.play().catch(() => {
+                      setShowPlayOnce(true);
+                    });
+                  },
+                  style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    background: "rgba(0,0,0,0.6)",
+                    border: "none",
+                    borderRadius: "50%",
+                    width: 64,
+                    height: 64,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "#fff"
+                  },
+                  children: /* @__PURE__ */ jsx13(
+                    "svg",
+                    {
+                      width: 32,
+                      height: 32,
+                      viewBox: "0 0 24 24",
+                      fill: "currentColor",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx13("polygon", { points: "6,3 20,12 6,21" })
+                    }
+                  )
+                }
               )
             ]
           }
         ),
+        !playVideo && showPlayOnce && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            "data-testid": "mediaPlayer-playOnce",
+            "aria-label": "Play audio",
+            onClick: () => {
+              setShowPlayOnce(false);
+              const v = videoRef.current;
+              if (!v) {
+                setShowPlayOnce(true);
+                return;
+              }
+              void v.play().catch(() => {
+                setShowPlayOnce(true);
+              });
+            },
+            style: {
+              background: "rgba(28,28,30,0.96)",
+              border: "1px solid rgba(255,255,255,0.2)",
+              borderRadius: "0.5rem",
+              padding: "0.75rem 1.5rem",
+              cursor: "pointer",
+              color: "#fff",
+              fontSize: "0.875rem",
+              fontWeight: 500
+            },
+            children: "Play"
+          }
+        ),
         !playVideo && controlsVisible && !loadError && /* @__PURE__ */ jsx13(
           "div",
           {
@@ -5387,7 +5517,10 @@ function Element({ element, onSubmit, stageDuration }) {
     case "prompt": {
       if (promptError) {
         return /* @__PURE__ */ jsxs21("p", { style: { color: "#dc2626", fontSize: "0.875rem" }, children: [
-          "Error loading prompt: ",
+          "Error loading prompt",
+          element.file ? ` "${element.file}"` : "",
+          ":",
+          " ",
           promptError.message
         ] });
       }
@@ -5404,7 +5537,10 @@ function Element({ element, onSubmit, stageDuration }) {
               fontSize: "0.875rem"
             },
             children: [
-              "Error parsing prompt: ",
+              "Error parsing prompt",
+              element.file ? ` "${element.file}"` : "",
+              ":",
+              " ",
               parsed.error.issues[0]?.message
             ]
           }
@@ -5477,6 +5613,7 @@ function Element({ element, onSubmit, stageDuration }) {
           stopAt: element.stopAt,
           allowScrubOutsideBounds: element.allowScrubOutsideBounds,
           stepDuration: element.stepDuration,
+          playback: element.playback,
           controls: element.controls
         }
       );