@scalemule/nextjs 0.1.18 → 0.1.20

package/dist/index.mjs

@@ -7784,6 +7784,7 @@ function ScaleMuleProvider({
       photo: baseClient.photo,
       video: baseClient.video,
       audio: baseClient.audio,
+      tts: baseClient.tts,
       mediaPolicy: effectiveMediaPolicy,
       user,
       setUser: handleSetUser,
@@ -9172,7 +9173,7 @@ function useAudio() {
           return null;
         }
         try {
-          const details = await client.get(`/v1/audios/${audioId}`);
+          const details = await client.get(`/v1/audio/${audioId}`);
           if (details.status === "ready" && details.url) {
             return details.url;
           }
@@ -9234,7 +9235,7 @@ function useAudio() {
       const enriched = await Promise.all(
         audioFiles.map(async (file) => {
           try {
-            const details = await client.get(`/v1/audios/${file.id}`);
+            const details = await client.get(`/v1/audio/${file.id}`);
             return {
               audio_id: details.id,
               file_id: file.id,
@@ -9270,7 +9271,7 @@ function useAudio() {
       setError(null);
       try {
         const [audioDeleteResult, storageDeleteResult] = await Promise.allSettled([
-          client.delete(`/v1/audios/${fileId}`),
+          client.delete(`/v1/audio/${fileId}`),
           client.delete(`/v1/storage/files/${fileId}`)
         ]);
         if (storageDeleteResult.status === "rejected" && !isNotFoundError(storageDeleteResult.reason)) {
@@ -9297,6 +9298,63 @@ function useAudio() {
     loading
   };
 }
+var DEFAULT_POLL_INTERVAL_MS = 2e3;
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["ready", "failed"]);
+function useTtsJob(jobId, options) {
+  const { tts } = useScaleMule();
+  const [job, setJob] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const refresh = useCallback(async () => {
+    if (!jobId) {
+      setJob(null);
+      return null;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await tts.getJob(jobId);
+      if (!result) {
+        const apiError = { code: "tts_job_error", message: "Failed to load TTS job", status: 500 };
+        setError(apiError);
+        return null;
+      }
+      if (result.error || !result.data) {
+        const apiError = result.error ?? { code: "tts_job_error", message: "Failed to load TTS job", status: 500 };
+        setError(apiError);
+        return null;
+      }
+      setJob(result.data);
+      return result.data;
+    } finally {
+      setLoading(false);
+    }
+  }, [jobId, tts]);
+  useEffect(() => {
+    if (!jobId || options?.enabled === false) {
+      setJob(null);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    let timeoutId = null;
+    const poll = async () => {
+      const next = await refresh();
+      if (cancelled || !next || TERMINAL_STATUSES.has(next.status)) {
+        return;
+      }
+      timeoutId = window.setTimeout(poll, options?.pollIntervalMs ?? DEFAULT_POLL_INTERVAL_MS);
+    };
+    poll();
+    return () => {
+      cancelled = true;
+      if (timeoutId != null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [jobId, options?.enabled, options?.pollIntervalMs, refresh]);
+  return { job, loading, error, refresh };
+}
 function useMedia() {
   const { storage, photo, video, audio, mediaPolicy: providerDefaultPolicy } = useScaleMule();
   const [uploading, setUploading] = useState(false);
@@ -11210,6 +11268,230 @@ function FeedbackWidget(props) {
     ) })
   ] });
 }
+var SPEEDS = [1, 1.25, 1.5, 2];
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds <= 0) {
+    return "0:00";
+  }
+  const wholeSeconds = Math.floor(seconds);
+  const minutes = Math.floor(wholeSeconds / 60);
+  const remainder = wholeSeconds % 60;
+  return `${minutes}:${remainder.toString().padStart(2, "0")}`;
+}
+function getNextSpeed(currentSpeed) {
+  const currentIndex = SPEEDS.findIndex((speed) => speed === currentSpeed);
+  if (currentIndex === -1) {
+    return SPEEDS[0];
+  }
+  return SPEEDS[(currentIndex + 1) % SPEEDS.length];
+}
+function NarrationPlayer({
+  audio,
+  className,
+  providerLabel = "ScaleMule",
+  narrationLabel = "AI-Narrated",
+  refreshing = false,
+  onRefresh,
+  onPlaybackError
+}) {
+  const audioRef = useRef(null);
+  const scrubRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(audio.duration_ms ? audio.duration_ms / 1e3 : 0);
+  const [speed, setSpeed] = useState(1.5);
+  const peaks = useMemo(() => {
+    if (!Array.isArray(audio.waveform_peaks)) {
+      return [];
+    }
+    const sampled = audio.waveform_peaks.filter((_, index) => index % 3 === 0).slice(0, 220);
+    return sampled.length > 0 ? sampled : audio.waveform_peaks.slice(0, 220);
+  }, [audio.waveform_peaks]);
+  useEffect(() => {
+    const element = audioRef.current;
+    if (!element) return;
+    setCurrentTime(0);
+    setPlaying(false);
+    element.pause();
+    element.currentTime = 0;
+  }, [audio.url]);
+  useEffect(() => {
+    const element = audioRef.current;
+    if (!element) return;
+    element.playbackRate = speed;
+    element.preservesPitch = true;
+  }, [speed]);
+  function togglePlayback() {
+    const element = audioRef.current;
+    if (!element) return;
+    if (element.paused) {
+      element.play().catch(() => {
+        setPlaying(false);
+        onPlaybackError?.();
+      });
+      return;
+    }
+    element.pause();
+  }
+  function seekTo(clientX) {
+    const element = audioRef.current;
+    const scrubber = scrubRef.current;
+    if (!element || !scrubber || !duration) return;
+    const bounds = scrubber.getBoundingClientRect();
+    const ratio = Math.max(0, Math.min(1, (clientX - bounds.left) / bounds.width));
+    const nextTime = ratio * duration;
+    element.currentTime = nextTime;
+    setCurrentTime(nextTime);
+  }
+  const progress = duration > 0 ? Math.min(1, currentTime / duration) : 0;
+  const expiresLabel = audio.expires_at ? new Date(audio.expires_at).toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit"
+  }) : null;
+  if (!audio.url) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "rounded-[1.75rem] border border-slate-200/80 bg-[linear-gradient(180deg,#f8fbff_0%,#edf4ff_100%)] p-4 text-slate-900 shadow-[0_22px_70px_rgba(4,12,24,0.28)] " + (className ?? ""),
+      children: [
+        /* @__PURE__ */ jsx(
+          "audio",
+          {
+            ref: audioRef,
+            src: audio.url ?? void 0,
+            preload: "metadata",
+            onLoadedMetadata: (event) => {
+              setDuration(event.currentTarget.duration || 0);
+            },
+            onTimeUpdate: (event) => {
+              setCurrentTime(event.currentTarget.currentTime);
+            },
+            onPlay: () => setPlaying(true),
+            onPause: () => setPlaying(false),
+            onEnded: () => setPlaying(false),
+            onError: () => onPlaybackError?.()
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-center", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: togglePlayback,
+              "aria-label": playing ? "Pause narration" : "Play narration",
+              className: "flex h-[4.5rem] w-[4.5rem] shrink-0 items-center justify-center rounded-full bg-slate-950 text-white shadow-[0_10px_28px_rgba(15,23,42,0.25)] transition hover:bg-slate-800",
+              children: playing ? /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-7 w-7 fill-current", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("rect", { x: "6", y: "5", width: "4", height: "14", rx: "1.2" }),
+                /* @__PURE__ */ jsx("rect", { x: "14", y: "5", width: "4", height: "14", rx: "1.2" })
+              ] }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "ml-1 h-7 w-7 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7 5.2c0-1.02 1.12-1.65 2-.98l10.2 7.78a1.24 1.24 0 0 1 0 1.98L9 21.76c-.88.67-2-.04-2-1.08V5.2Z" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-[0.8rem] font-medium text-slate-500", children: [
+              /* @__PURE__ */ jsx("span", { children: formatTime(currentTime / speed) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-100 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.24em] text-blue-700", children: narrationLabel }),
+                /* @__PURE__ */ jsx("span", { children: formatTime(duration / speed) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: scrubRef,
+                role: "slider",
+                "aria-label": "Narration progress",
+                "aria-valuemin": 0,
+                "aria-valuemax": Math.max(1, Math.floor(duration)),
+                "aria-valuenow": Math.floor(currentTime),
+                tabIndex: 0,
+                onClick: (event) => {
+                  seekTo(event.clientX);
+                },
+                className: "relative mt-4 h-12 cursor-pointer overflow-hidden rounded-[1rem] bg-slate-200/90 px-1",
+                children: peaks.length > 0 ? /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: `0 0 ${peaks.length} 40`,
+                    preserveAspectRatio: "none",
+                    className: "pointer-events-none absolute inset-0 h-full w-full",
+                    children: peaks.map((peak, index) => {
+                      const height = Math.max(2, Math.round(Math.abs(peak) * 34));
+                      const y = (40 - height) / 2;
+                      const filled = index / peaks.length < progress;
+                      return /* @__PURE__ */ jsx(
+                        "rect",
+                        {
+                          x: index,
+                          y,
+                          width: 0.82,
+                          height,
+                          rx: 0.4,
+                          className: filled ? "fill-blue-600" : "fill-blue-300"
+                        },
+                        `${audio.id}-${index}`
+                      );
+                    })
+                  }
+                ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-slate-200/90" }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "absolute inset-y-0 left-0 bg-blue-600",
+                      style: { width: `${progress * 100}%` }
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-2 text-[0.72rem] font-medium text-slate-500", children: [
+              /* @__PURE__ */ jsxs("span", { className: "rounded-full border border-slate-200 bg-white/85 px-3 py-1 text-slate-700", children: [
+                "Provider: ",
+                providerLabel
+              ] }),
+              duration > 0 && /* @__PURE__ */ jsxs("span", { className: "rounded-full border border-slate-200 bg-white/65 px-3 py-1", children: [
+                "Length ",
+                formatTime(duration / speed)
+              ] }),
+              expiresLabel && /* @__PURE__ */ jsxs("span", { className: "rounded-full border border-slate-200 bg-white/65 px-3 py-1", children: [
+                "Expires ",
+                expiresLabel
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2 self-start md:self-center", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setSpeed((currentSpeed) => getNextSpeed(currentSpeed));
+                },
+                className: "rounded-full border border-slate-300 bg-white/90 px-4 py-2 text-base font-semibold text-slate-700 shadow-sm hover:bg-white",
+                children: [
+                  speed,
+                  "\xD7"
+                ]
+              }
+            ),
+            onRefresh && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onRefresh,
+                disabled: refreshing,
+                className: "rounded-full border border-slate-300 bg-white/75 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-white disabled:cursor-not-allowed disabled:opacity-60",
+                children: refreshing ? "Refreshing\u2026" : "Refresh"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 
 // src/validation.ts
 var phoneCountries = [
@@ -11502,4 +11784,4 @@ function createSafeLogger(prefix) {
   };
 }
 
-export { FeedbackWidget, ScaleMuleApiError, ScaleMuleClient2 as ScaleMuleClient, ScaleMuleMedia, ScaleMuleProvider, composePhone, createClient, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useUser, validateForm, validators };
+export { FeedbackWidget, NarrationPlayer, ScaleMuleApiError, ScaleMuleClient2 as ScaleMuleClient, ScaleMuleMedia, ScaleMuleProvider, composePhone, createClient, createSafeLogger, normalizePhone, phoneCountries, sanitizeForLog, useAnalytics, useAudio, useAuth, useBilling, useContent, useFeatureFlags, useFeedback, useFileStatus, useMedia, useMoney, useMoneyClient, usePushNotifications, useRealtime, useScaleMule, useScaleMuleClient, useShare, useTtsJob, useUser, validateForm, validators };