@bendyline/docblocks-react 2.6.2 → 2.7.0

package/dist/SpeechToolbarControl-UZQKGQWD.js

@@ -0,0 +1,434 @@
+import {
+  useSpeechStatus
+} from "./chunk-VO2JYYQZ.js";
+import {
+  hasDocumentNarration,
+  planSpeech,
+  useGenerateNarration
+} from "./chunk-I44HKDQX.js";
+import {
+  AutoPlayGate,
+  ProgressivePlayer
+} from "./chunk-2IYBBFQX.js";
+import {
+  useMenuKeyboard
+} from "./chunk-MRUK56JS.js";
+import {
+  Dialog
+} from "./chunk-56KO2LYN.js";
+
+// src/Speech/SpeechToolbarControl.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useEditorContext as useEditorContext2 } from "@bendyline/squisq-editor-react";
+import {
+  hostSupports,
+  maybeGetDocBlocksHost
+} from "@bendyline/docblocks/host";
+
+// src/Speech/GenerateNarrationDialog.tsx
+import { useEditorContext } from "@bendyline/squisq-editor-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function formatDuration(seconds) {
+  const whole = Math.round(seconds);
+  const minutes = Math.floor(whole / 60);
+  const rest = whole % 60;
+  return minutes > 0 ? `${minutes} min ${rest} s` : `${rest} s`;
+}
+function GenerateNarrationDialog({ speech, onClose }) {
+  const { markdownSource } = useEditorContext();
+  const narration = useGenerateNarration(speech);
+  const { state } = narration;
+  const busy = state.phase === "generating" || state.phase === "saving";
+  const replacing = hasDocumentNarration(markdownSource);
+  const close = () => {
+    if (busy) narration.cancel();
+    onClose();
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      title: "Generate narration",
+      onClose: close,
+      closeOnBackdrop: !busy,
+      className: "db-speech-narration-dialog",
+      footer: state.phase === "done" ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, children: "Done" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: close, children: busy ? "Stop" : "Cancel" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: busy || !narration.available,
+            onClick: () => narration.generate(),
+            children: replacing ? "Replace narration" : "Generate"
+          }
+        )
+      ] }),
+      children: state.phase === "done" ? /* @__PURE__ */ jsxs("p", { role: "status", children: [
+        "Added ",
+        formatDuration(state.durationSec),
+        " of narration. Play mode and video export now follow it, section by section."
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("p", { className: "db-speech-narration-intro", children: "DocBlocks reads the document aloud with your narration voice and saves the audio beside it, timed to each section. Change the voice and speed in Settings." }),
+        replacing && /* @__PURE__ */ jsx("p", { className: "db-speech-narration-warning", role: "note", children: "This document already has narration. Generating replaces it; the old audio file stays in the document\u2019s folder." }),
+        state.phase === "generating" && /* @__PURE__ */ jsxs("div", { className: "db-settings-ai-download-progress", role: "status", children: [
+          /* @__PURE__ */ jsx("progress", { max: state.total, value: state.done, "aria-label": "Narration progress" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Generating part ",
+            Math.min(state.done + 1, state.total),
+            " of ",
+            state.total,
+            "\u2026"
+          ] })
+        ] }),
+        state.phase === "saving" && /* @__PURE__ */ jsx("p", { role: "status", children: "Saving the narration\u2026" }),
+        state.phase === "error" && /* @__PURE__ */ jsx("p", { className: "db-settings-ai-error", role: "alert", children: state.message })
+      ] })
+    }
+  );
+}
+
+// src/Speech/useReadAloud.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useReadAloud(speech) {
+  const [state, setState] = useState({ phase: "idle" });
+  const session = useRef(null);
+  const stop = useCallback(() => {
+    const current = session.current;
+    session.current = null;
+    if (current) {
+      current.cancelled = true;
+      current.handle?.cancel();
+      current.player.dispose();
+    }
+    setState({ phase: "idle" });
+  }, []);
+  useEffect(() => stop, [stop]);
+  const start = useCallback(
+    (markdown) => {
+      const synthesize = speech?.synthesize;
+      if (!synthesize) return;
+      stop();
+      const onChange = (snapshot) => {
+        const current2 = session.current;
+        if (!current2 || current2.player !== player) return;
+        if (snapshot.complete && !snapshot.isPlaying && snapshot.currentTime >= snapshot.bufferedDuration - 0.05) {
+          session.current = null;
+          player.dispose();
+          setState({ phase: "idle" });
+          return;
+        }
+        const segment = snapshot.currentChunk === null ? 0 : current2.chunkSegments[snapshot.currentChunk] ?? 0;
+        setState({
+          phase: "reading",
+          playing: snapshot.isPlaying,
+          waiting: snapshot.waitingForAudio,
+          segment,
+          segments: current2.segments.length
+        });
+      };
+      const player = ProgressivePlayer.create(onChange);
+      if (!player) {
+        setState({ phase: "error", message: "Audio playback is not available." });
+        return;
+      }
+      player.prime();
+      const current = {
+        player,
+        chunkSegments: [],
+        segments: [],
+        handle: null,
+        cancelled: false,
+        userPaused: false
+      };
+      session.current = current;
+      setState({ phase: "loading" });
+      void (async () => {
+        const plan = await planSpeech(markdown);
+        if (current.cancelled) return;
+        current.segments = plan.segments;
+        if (plan.segments.length === 0) {
+          stop();
+          setState({ phase: "error", message: "There is nothing to read aloud." });
+          return;
+        }
+        const totalCharacters = plan.segments.reduce((sum, s) => sum + s.text.length, 0);
+        const gate = new AutoPlayGate();
+        let spokenCharacters = 0;
+        let chunkIndex = 0;
+        for (const [segmentIndex, segment] of plan.segments.entries()) {
+          if (current.cancelled) return;
+          const handle = synthesize({ text: segment.text }, (event) => {
+            if (current.cancelled || event.kind !== "chunk") return;
+            current.chunkSegments[chunkIndex] = segmentIndex;
+            player.append({ ...event.chunk, index: chunkIndex });
+            chunkIndex += 1;
+            const snapshot = player.snapshot();
+            const progress = {
+              completedCharacters: spokenCharacters + event.chunk.textEnd,
+              totalCharacters
+            };
+            if (!snapshot.isPlaying && !current.userPaused && gate.ready(snapshot, progress, performance.now())) {
+              void player.play();
+            }
+          });
+          current.handle = handle;
+          const result = await handle.done;
+          if (current.cancelled) return;
+          if (!result.ok) {
+            stop();
+            setState({ phase: "error", message: result.error.message });
+            return;
+          }
+          spokenCharacters += segment.text.length;
+        }
+        current.handle = null;
+        player.finish();
+        if (!player.snapshot().isPlaying && !current.userPaused) void player.play();
+      })().catch((error) => {
+        if (current.cancelled) return;
+        stop();
+        setState({
+          phase: "error",
+          message: error instanceof Error ? error.message : "Reading aloud failed."
+        });
+      });
+    },
+    [speech, stop]
+  );
+  const pause = useCallback(() => {
+    const current = session.current;
+    if (!current) return;
+    current.userPaused = true;
+    current.player.pause();
+  }, []);
+  const resume = useCallback(() => {
+    const current = session.current;
+    if (!current) return;
+    current.userPaused = false;
+    void current.player.play();
+  }, []);
+  return { state, start, pause, resume, stop };
+}
+
+// src/Speech/SpeechToolbarControl.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function useSpeechMenuCommands(readAloud, readCurrent) {
+  const { dictation } = useEditorContext2();
+  const latest = useRef2({ dictation, readAloud, readCurrent });
+  latest.current = { dictation, readAloud, readCurrent };
+  useEffect2(() => {
+    const host = maybeGetDocBlocksHost();
+    if (!hostSupports("menuCommands") || !host?.onMenuCommand) return;
+    return host.onMenuCommand((command) => {
+      const { dictation: control, readAloud: reader, readCurrent: read } = latest.current;
+      if (command === "edit:toggleDictation") control?.toggle();
+      if (command === "edit:readAloud" && reader) {
+        if (reader.state.phase === "idle" || reader.state.phase === "error") read();
+        else reader.stop();
+      }
+    });
+  }, []);
+}
+function SpeechMenuBridge() {
+  useSpeechMenuCommands(null, () => void 0);
+  return null;
+}
+function SpeechToolbarControl({
+  speech,
+  onOpenSettings,
+  readOnly = false
+}) {
+  const { editorMode, getSelection, markdownSource, selectionVersion, activeView } = useEditorContext2();
+  const status = useSpeechStatus(speech);
+  const readAloud = useReadAloud(speech);
+  const [menuOpen, setMenuOpen] = useState2(false);
+  const [narrationOpen, setNarrationOpen] = useState2(false);
+  const rootRef = useRef2(null);
+  const { menuRef, triggerRef, handleMenuKeyDown, handleTriggerKeyDown, closeMenu } = useMenuKeyboard(menuOpen, setMenuOpen);
+  const sourceRef = useRef2(markdownSource);
+  sourceRef.current = markdownSource;
+  void activeView;
+  void selectionVersion;
+  const selection = getSelection();
+  const hasSelection = Boolean(selection && !selection.empty && selection.text.trim());
+  const readCurrent = () => {
+    const current = getSelection();
+    const text = current && !current.empty && current.text.trim() ? current.text : sourceRef.current;
+    readAloud.start(text);
+  };
+  useSpeechMenuCommands(readAloud, readCurrent);
+  useEffect2(() => {
+    if (!menuOpen) return;
+    const onPointerDown = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) setMenuOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [menuOpen]);
+  if (editorMode !== "markdown" || !speech.synthesize) return null;
+  const ttsReady = status?.tts.state === "ready";
+  const { state } = readAloud;
+  const active = state.phase === "loading" || state.phase === "reading";
+  return /* @__PURE__ */ jsxs2("div", { className: "db-toolbar-menu db-speech-toolbar", ref: rootRef, children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        className: `squisq-toolbar-button${active ? " squisq-toolbar-button--active" : ""}`,
+        onClick: () => setMenuOpen((open) => !open),
+        onKeyDown: handleTriggerKeyDown,
+        "aria-label": "Speech",
+        "aria-haspopup": "menu",
+        "aria-expanded": menuOpen,
+        "data-tooltip": "Speech",
+        children: /* @__PURE__ */ jsx2(SpeakerGlyph, {})
+      }
+    ),
+    active && /* @__PURE__ */ jsxs2("div", { className: "db-speech-transport", role: "group", "aria-label": "Reading aloud", children: [
+      state.phase === "reading" && state.playing ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "squisq-toolbar-button",
+          "aria-label": "Pause reading",
+          "data-tooltip": "Pause",
+          onClick: () => readAloud.pause(),
+          children: /* @__PURE__ */ jsx2(PauseGlyph, {})
+        }
+      ) : /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "squisq-toolbar-button",
+          "aria-label": "Resume reading",
+          "data-tooltip": "Resume",
+          disabled: state.phase !== "reading",
+          onClick: () => readAloud.resume(),
+          children: /* @__PURE__ */ jsx2(PlayGlyph, {})
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: "squisq-toolbar-button",
+          "aria-label": "Stop reading",
+          "data-tooltip": "Stop",
+          onClick: () => readAloud.stop(),
+          children: /* @__PURE__ */ jsx2(StopGlyph, {})
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { className: "db-speech-transport-label", role: "status", "aria-live": "polite", children: state.phase === "loading" ? "Preparing voice\u2026" : state.waiting ? "Generating\u2026" : `${state.segment + 1} / ${state.segments}` })
+    ] }),
+    menuOpen && /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: menuRef,
+        className: "db-toolbar-menu-dropdown db-speech-toolbar-menu",
+        role: "menu",
+        "aria-label": "Speech",
+        onKeyDown: handleMenuKeyDown,
+        children: [
+          status && !ttsReady && /* @__PURE__ */ jsx2("div", { className: "db-ai-toolbar-status", role: "status", children: status.tts.reason ?? "Narration is not ready." }),
+          active ? /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              className: "db-toolbar-menu-item",
+              onClick: () => {
+                closeMenu(false);
+                readAloud.stop();
+              },
+              children: "Stop reading"
+            }
+          ) : /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              className: "db-toolbar-menu-item",
+              disabled: !ttsReady,
+              onClick: () => {
+                closeMenu(false);
+                readCurrent();
+              },
+              children: hasSelection ? "Read selection aloud" : "Read aloud"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              className: "db-toolbar-menu-item",
+              disabled: !ttsReady || readOnly,
+              onClick: () => {
+                closeMenu(false);
+                setNarrationOpen(true);
+              },
+              children: "Generate narration\u2026"
+            }
+          ),
+          status && status.tts.state === "download-required" && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              className: "db-toolbar-menu-item",
+              onClick: () => {
+                closeMenu(false);
+                onOpenSettings();
+              },
+              children: "Download voices\u2026"
+            }
+          ),
+          state.phase === "error" && /* @__PURE__ */ jsx2("div", { className: "db-ai-toolbar-status db-settings-ai-error", role: "alert", children: state.message })
+        ]
+      }
+    ),
+    narrationOpen && /* @__PURE__ */ jsx2(GenerateNarrationDialog, { speech, onClose: () => setNarrationOpen(false) })
+  ] });
+}
+function Glyph({ children }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      viewBox: "0 0 18 18",
+      width: "18",
+      height: "18",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.35",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+function SpeakerGlyph() {
+  return /* @__PURE__ */ jsxs2(Glyph, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M3 7h2.5L9 4v10l-3.5-3H3z" }),
+    /* @__PURE__ */ jsx2("path", { d: "M11.5 6.5a3.5 3.5 0 0 1 0 5" }),
+    /* @__PURE__ */ jsx2("path", { d: "M13.5 4.5a6.4 6.4 0 0 1 0 9" })
+  ] });
+}
+function PlayGlyph() {
+  return /* @__PURE__ */ jsx2(Glyph, { children: /* @__PURE__ */ jsx2("path", { d: "M6 4.5v9l7-4.5z" }) });
+}
+function PauseGlyph() {
+  return /* @__PURE__ */ jsx2(Glyph, { children: /* @__PURE__ */ jsx2("path", { d: "M6.5 4.5v9M11.5 4.5v9" }) });
+}
+function StopGlyph() {
+  return /* @__PURE__ */ jsx2(Glyph, { children: /* @__PURE__ */ jsx2("rect", { x: "5", y: "5", width: "8", height: "8", rx: "1" }) });
+}
+export {
+  SpeechMenuBridge,
+  SpeechToolbarControl
+};