@bendyline/squisq-react 2.2.0 → 2.3.1

package/dist/chunk-NWZQGZIJ.js

@@ -0,0 +1,675 @@
+import {
+  useResourcePolicy
+} from "./chunk-LR3AIGDD.js";
+
+// src/hooks/useMediaSchedule.ts
+import { useMemo } from "react";
+function useMediaSchedule(schedule, currentTime) {
+  const activeIds = useMemo(() => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const c of schedule) {
+      if (currentTime >= c.absoluteStart && currentTime < c.absoluteEnd) ids.add(c.id);
+    }
+    return ids;
+  }, [schedule, currentTime]);
+  return { renderClips: schedule, activeIds };
+}
+
+// src/hooks/useAudioSync.ts
+import { useState, useEffect, useRef, useCallback } from "react";
+import { fetchResourceBytes, isResourceUrlAllowed } from "@bendyline/squisq/markdown";
+
+// src/hooks/AudioController.ts
+function calculateSegmentTiming(segments) {
+  if (!segments?.length) {
+    return { segmentStarts: [], totalDuration: 0 };
+  }
+  let time = 0;
+  const segmentStarts = segments.map((seg) => {
+    const start = time;
+    time += seg.duration;
+    return start;
+  });
+  return { segmentStarts, totalDuration: time };
+}
+function findSegmentAtTime(time, segments, segmentStarts) {
+  if (!segments?.length) {
+    return { segmentIndex: 0, segmentStart: 0 };
+  }
+  let segmentIndex = 0;
+  let segmentStart = 0;
+  for (let i = 0; i < segments.length; i++) {
+    const segEnd = segmentStarts[i] + segments[i].duration;
+    if (time < segEnd) {
+      segmentIndex = i;
+      segmentStart = segmentStarts[i];
+      break;
+    }
+    if (i === segments.length - 1) {
+      segmentIndex = i;
+      segmentStart = segmentStarts[i];
+    }
+  }
+  return { segmentIndex, segmentStart };
+}
+
+// src/hooks/useAudioSync.ts
+var SEEK_COMPLETION_TIMEOUT_MS = 15e3;
+var UNLOADABLE_MESSAGE = "Audio could not be loaded. Check that the media file is available.";
+function resolveAudioUrl(src, basePath) {
+  if (!src || /^(?:[a-z][a-z0-9+.-]*:|\/\/|\/)/i.test(src)) return src;
+  if (!basePath) return src;
+  return `${basePath.replace(/\/$/, "")}/${src.replace(/^\//, "")}`;
+}
+function useAudioSync(audioRef, audioTrack, basePath = "", enabled = true, mode = "media") {
+  const resourcePolicy = useResourcePolicy();
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentSegment, setCurrentSegment] = useState(0);
+  const [isEnded, setIsEnded] = useState(false);
+  const [isAudioReady, setIsAudioReady] = useState(false);
+  const [totalDuration, setTotalDuration] = useState(0);
+  const [isAvailable, setIsAvailable] = useState(true);
+  const [unavailableMessage, setUnavailableMessage] = useState();
+  const segmentStarts = useRef([]);
+  const pendingSeekTime = useRef(null);
+  const pendingSeekCompletion = useRef(null);
+  const shouldPlayAfterLoad = useRef(false);
+  const blobUrls = useRef(/* @__PURE__ */ new Map());
+  const loadingPromises = useRef(/* @__PURE__ */ new Map());
+  const abortControllers = useRef(/* @__PURE__ */ new Set());
+  const loadGeneration = useRef(0);
+  const activeSegmentSrc = useRef(void 0);
+  activeSegmentSrc.current = audioTrack?.segments[currentSegment]?.src;
+  const boundSource = useRef(null);
+  const currentSegmentRef = useRef(0);
+  currentSegmentRef.current = currentSegment;
+  const fallbackMode = useRef(false);
+  useEffect(() => {
+    loadGeneration.current += 1;
+    pendingSeekTime.current = null;
+    pendingSeekCompletion.current?.();
+    pendingSeekCompletion.current = null;
+    shouldPlayAfterLoad.current = false;
+    fallbackMode.current = false;
+    boundSource.current = null;
+    setCurrentTime(0);
+    setCurrentSegment(0);
+    setIsPlaying(false);
+    setIsEnded(false);
+    setIsAudioReady(false);
+    setIsAvailable(true);
+    setUnavailableMessage(void 0);
+    if (!enabled || !audioTrack?.segments) {
+      segmentStarts.current = [];
+      setTotalDuration(0);
+      return;
+    }
+    const timing = calculateSegmentTiming(audioTrack.segments);
+    segmentStarts.current = timing.segmentStarts;
+    setTotalDuration(timing.totalDuration);
+    if (mode === "synthetic") setIsAudioReady(true);
+  }, [audioTrack, enabled, mode]);
+  const preloadAudio = useCallback(
+    async (src) => {
+      const audioUrl = resolveAudioUrl(src, basePath);
+      if (!isResourceUrlAllowed(audioUrl, resourcePolicy)) return "";
+      if (blobUrls.current.has(src)) {
+        const cached = blobUrls.current.get(src);
+        blobUrls.current.delete(src);
+        blobUrls.current.set(src, cached);
+        return cached;
+      }
+      if (loadingPromises.current.has(src)) {
+        return loadingPromises.current.get(src);
+      }
+      const controller = new AbortController();
+      abortControllers.current.add(controller);
+      const generation = loadGeneration.current;
+      const loadPromise = (async () => {
+        try {
+          const resource = await fetchResourceBytes(audioUrl, {
+            policy: resourcePolicy,
+            signal: controller.signal,
+            contentTypePrefixes: ["audio/", "video/", "application/octet-stream"]
+          });
+          const blob = new Blob([resource.bytes.slice().buffer], {
+            type: resource.contentType || "application/octet-stream"
+          });
+          const blobUrl = URL.createObjectURL(blob);
+          if (controller.signal.aborted || generation !== loadGeneration.current) {
+            URL.revokeObjectURL(blobUrl);
+            return audioUrl;
+          }
+          blobUrls.current.set(src, blobUrl);
+          while (blobUrls.current.size > 2) {
+            const oldest = [...blobUrls.current.entries()].find(([key]) => key !== activeSegmentSrc.current) ?? blobUrls.current.entries().next().value;
+            if (!oldest) break;
+            blobUrls.current.delete(oldest[0]);
+            URL.revokeObjectURL(oldest[1]);
+          }
+          return blobUrl;
+        } catch {
+          return "";
+        }
+      })();
+      loadingPromises.current.set(src, loadPromise);
+      void loadPromise.then(() => {
+        abortControllers.current.delete(controller);
+        if (loadingPromises.current.get(src) === loadPromise) {
+          loadingPromises.current.delete(src);
+        }
+      });
+      return loadPromise;
+    },
+    [basePath, resourcePolicy]
+  );
+  useEffect(() => {
+    if (!enabled || !audioTrack?.segments) return;
+    const currentBlobUrls = blobUrls.current;
+    const currentAbortControllers = abortControllers.current;
+    const currentLoadingPromises = loadingPromises.current;
+    return () => {
+      loadGeneration.current += 1;
+      currentAbortControllers.forEach((controller) => controller.abort());
+      currentAbortControllers.clear();
+      currentLoadingPromises.clear();
+      currentBlobUrls.forEach((url) => {
+        URL.revokeObjectURL(url);
+      });
+      currentBlobUrls.clear();
+    };
+  }, [audioTrack, preloadAudio, enabled]);
+  useEffect(() => {
+    if (!enabled || mode === "synthetic") return;
+    const segment = audioTrack?.segments[currentSegment];
+    if (segment) void preloadAudio(segment.src);
+  }, [audioTrack, currentSegment, enabled, mode, preloadAudio]);
+  useEffect(() => {
+    if (!enabled || mode === "synthetic") return;
+    const audio = audioRef.current;
+    if (!audio) return;
+    const handleTimeUpdate = () => {
+      if (fallbackMode.current) return;
+      const segmentStart = segmentStarts.current[currentSegment] || 0;
+      const overallTime = segmentStart + audio.currentTime;
+      setCurrentTime(overallTime);
+    };
+    const handlePlay = () => {
+      setIsPlaying(true);
+    };
+    const handlePause = () => setIsPlaying(false);
+    const handleError = () => {
+      setIsAudioReady(true);
+      setIsPlaying(false);
+      setIsAvailable(false);
+      setUnavailableMessage(UNLOADABLE_MESSAGE);
+      shouldPlayAfterLoad.current = false;
+      if (pendingSeekTime.current !== null) {
+        setCurrentTime(pendingSeekTime.current);
+        pendingSeekTime.current = null;
+      }
+      pendingSeekCompletion.current?.();
+      pendingSeekCompletion.current = null;
+    };
+    const handleEnded = () => {
+      if (audioTrack && currentSegment < audioTrack.segments.length - 1) {
+        shouldPlayAfterLoad.current = true;
+        setCurrentSegment((prev) => prev + 1);
+      } else {
+        setIsEnded(true);
+        setIsPlaying(false);
+      }
+    };
+    audio.addEventListener("timeupdate", handleTimeUpdate);
+    audio.addEventListener("play", handlePlay);
+    audio.addEventListener("pause", handlePause);
+    audio.addEventListener("ended", handleEnded);
+    audio.addEventListener("error", handleError);
+    return () => {
+      audio.removeEventListener("timeupdate", handleTimeUpdate);
+      audio.removeEventListener("play", handlePlay);
+      audio.removeEventListener("pause", handlePause);
+      audio.removeEventListener("ended", handleEnded);
+      audio.removeEventListener("error", handleError);
+    };
+  }, [audioRef, currentSegment, audioTrack, enabled, mode]);
+  useEffect(() => {
+    if (!enabled || mode === "synthetic") return;
+    const audio = audioRef.current;
+    if (!audio || !audioTrack?.segments) return;
+    const segment = audioTrack.segments[currentSegment];
+    if (!segment) return;
+    const applyPendingSeek = () => {
+      if (pendingSeekTime.current !== null) {
+        const segmentStart = segmentStarts.current[currentSegment] || 0;
+        const segmentTime = pendingSeekTime.current - segmentStart;
+        audio.currentTime = Math.max(0, segmentTime);
+        setCurrentTime(pendingSeekTime.current);
+        pendingSeekTime.current = null;
+        pendingSeekCompletion.current?.();
+        pendingSeekCompletion.current = null;
+      }
+      if (shouldPlayAfterLoad.current) {
+        audio.play().catch((error) => {
+          setIsPlaying(false);
+          if (!(error instanceof Error && error.name === "NotAllowedError")) {
+            setIsAvailable(false);
+            setUnavailableMessage(
+              "Audio playback failed. Check that the media file is supported and available."
+            );
+          }
+        });
+        shouldPlayAfterLoad.current = false;
+      }
+    };
+    const currentSrc = audio.src;
+    const bound = boundSource.current;
+    const isSameSource = !!currentSrc && bound?.key === segment.src && bound.url === currentSrc;
+    let cancelled = false;
+    let handleCanPlay = null;
+    if (!isSameSource) {
+      const loadAndPlay = async () => {
+        const blobUrl = await preloadAudio(segment.src);
+        if (cancelled) return;
+        if (!blobUrl) {
+          audio.removeAttribute("src");
+          audio.load();
+          boundSource.current = null;
+          shouldPlayAfterLoad.current = false;
+          setIsAudioReady(true);
+          setIsPlaying(false);
+          setIsAvailable(false);
+          setUnavailableMessage(UNLOADABLE_MESSAGE);
+          if (pendingSeekTime.current !== null) {
+            setCurrentTime(pendingSeekTime.current);
+            pendingSeekTime.current = null;
+          }
+          pendingSeekCompletion.current?.();
+          pendingSeekCompletion.current = null;
+          return;
+        }
+        handleCanPlay = () => {
+          if (cancelled) return;
+          setIsAudioReady(true);
+          applyPendingSeek();
+          if (handleCanPlay) audio.removeEventListener("canplay", handleCanPlay);
+        };
+        audio.addEventListener("canplay", handleCanPlay);
+        audio.src = blobUrl;
+        boundSource.current = { key: segment.src, url: audio.src };
+        audio.load();
+        await Promise.resolve();
+        if (audio.readyState >= 3) {
+          if (handleCanPlay) audio.removeEventListener("canplay", handleCanPlay);
+          setIsAudioReady(true);
+          applyPendingSeek();
+        }
+      };
+      void loadAndPlay();
+    } else {
+      applyPendingSeek();
+    }
+    return () => {
+      cancelled = true;
+      if (handleCanPlay) audio.removeEventListener("canplay", handleCanPlay);
+    };
+  }, [audioRef, currentSegment, audioTrack, preloadAudio, enabled, mode]);
+  const seekTo = useCallback(
+    async (time) => {
+      const audio = audioRef.current;
+      if (!audioTrack?.segments) return;
+      const clampedTime = totalDuration > 0 ? Math.max(0, Math.min(time, totalDuration)) : Math.max(0, time);
+      const starts = segmentStarts.current.length === audioTrack.segments.length ? segmentStarts.current : calculateSegmentTiming(audioTrack.segments).segmentStarts;
+      const { segmentIndex, segmentStart } = findSegmentAtTime(
+        clampedTime,
+        audioTrack.segments,
+        starts
+      );
+      const wasPlaying = mode === "synthetic" ? isPlaying : !audio?.paused;
+      setIsEnded(false);
+      if (!audio && mode === "media") {
+        setCurrentSegment(segmentIndex);
+        setCurrentTime(clampedTime);
+        return;
+      }
+      if (segmentIndex !== currentSegmentRef.current) {
+        pendingSeekTime.current = clampedTime;
+        shouldPlayAfterLoad.current = wasPlaying;
+        const completion = new Promise((resolve) => {
+          pendingSeekCompletion.current?.();
+          let settled = false;
+          const settle = () => {
+            if (settled) return;
+            settled = true;
+            clearTimeout(timer);
+            if (pendingSeekCompletion.current === settle) pendingSeekCompletion.current = null;
+            resolve();
+          };
+          const timer = setTimeout(settle, SEEK_COMPLETION_TIMEOUT_MS);
+          pendingSeekCompletion.current = settle;
+        });
+        setCurrentSegment(segmentIndex);
+        if (mode === "synthetic") {
+          setCurrentTime(clampedTime);
+          pendingSeekTime.current = null;
+          pendingSeekCompletion.current?.();
+          pendingSeekCompletion.current = null;
+        }
+        await completion;
+      } else {
+        const segmentTime = clampedTime - segmentStart;
+        if (audio && mode === "media") audio.currentTime = Math.max(0, segmentTime);
+        setCurrentTime(clampedTime);
+      }
+    },
+    [audioRef, audioTrack, isPlaying, mode, totalDuration]
+  );
+  const play = useCallback(async () => {
+    if (mode === "synthetic") {
+      fallbackMode.current = true;
+      setIsPlaying(true);
+      return;
+    }
+    const audio = audioRef.current;
+    if (audio) {
+      if (isEnded) {
+        await seekTo(0);
+      }
+      try {
+        await audio.play();
+        fallbackMode.current = false;
+        setIsAvailable(true);
+        setUnavailableMessage(void 0);
+      } catch (error) {
+        fallbackMode.current = false;
+        setIsPlaying(false);
+        const name = error instanceof Error ? error.name : "";
+        if (name !== "NotAllowedError") {
+          setIsAvailable(false);
+          setUnavailableMessage(
+            "Audio playback failed. Check that the media file is supported and available."
+          );
+        }
+      }
+    }
+  }, [audioRef, isEnded, mode, seekTo]);
+  const pause = useCallback(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.pause();
+    }
+    setIsPlaying(false);
+  }, [audioRef]);
+  const toggle = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio && mode === "media") return;
+    if (!isPlaying) {
+      play();
+    } else {
+      pause();
+    }
+  }, [audioRef, isPlaying, mode, play, pause]);
+  const skipToSegment = useCallback(
+    (index) => {
+      if (!audioTrack?.segments || index < 0 || index >= audioTrack.segments.length) {
+        return;
+      }
+      setCurrentSegment(index);
+      setIsEnded(false);
+    },
+    [audioTrack]
+  );
+  const restart = useCallback(async () => {
+    await seekTo(0);
+    await play();
+  }, [seekTo, play]);
+  useEffect(() => {
+    if (!isPlaying || !fallbackMode.current || !totalDuration) return;
+    let lastTime = performance.now();
+    let raf;
+    const tick = (now) => {
+      if (!fallbackMode.current) return;
+      const dt = (now - lastTime) / 1e3;
+      lastTime = now;
+      setCurrentTime((prev) => {
+        const next = prev + dt;
+        if (next >= totalDuration) {
+          fallbackMode.current = false;
+          setIsEnded(true);
+          setIsPlaying(false);
+          return totalDuration;
+        }
+        return next;
+      });
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [isPlaying, totalDuration]);
+  return {
+    // State
+    currentTime,
+    isPlaying,
+    currentSegment,
+    totalDuration,
+    isEnded,
+    isReady: isAudioReady,
+    isAvailable,
+    unavailableMessage,
+    // Actions
+    play,
+    pause: async () => pause(),
+    toggle: async () => toggle(),
+    seekTo,
+    skipToSegment: async (index) => skipToSegment(index),
+    restart
+  };
+}
+
+// src/hooks/useDocPlayback.ts
+import { useMemo as useMemo2, useCallback as useCallback2, useRef as useRef2 } from "react";
+import {
+  DEFAULT_THEME,
+  getBlockAtTime,
+  resolveBlockTransition,
+  resolveTransitionDuration
+} from "@bendyline/squisq/schemas";
+import {
+  expandDocBlocks,
+  flattenRenderableBlocks,
+  isTemplateBlock,
+  resolvePersistentLayers,
+  VIEWPORT_PRESETS
+} from "@bendyline/squisq/doc";
+function useDocPlayback(script, currentTime, options = {}) {
+  const { viewport = VIEWPORT_PRESETS.landscape, theme, onSeek } = options;
+  const blocks = useMemo2(() => {
+    if (!script?.blocks) {
+      return [];
+    }
+    const hasChildren = script.blocks.some((b) => b.children && b.children.length > 0);
+    const flatBlocks = hasChildren ? flattenRenderableBlocks(script.blocks) : script.blocks;
+    const hasTemplates = flatBlocks.some(isTemplateBlock);
+    const resolvedTheme = theme ?? DEFAULT_THEME;
+    const persistentLayers = resolvePersistentLayers(
+      { persistentLayers: script.persistentLayers },
+      resolvedTheme
+    );
+    if (hasTemplates) {
+      const audioSegments = script.audio?.segments?.map((seg) => ({
+        startTime: seg.startTime,
+        duration: seg.duration
+      }));
+      const expanded = expandDocBlocks(flatBlocks, {
+        audioSegments,
+        viewport,
+        persistentLayers,
+        theme,
+        // Custom (user-defined) templates inlined into the doc's
+        // frontmatter — see CustomTemplates.ts. Merged onto the
+        // built-in registry so blocks annotated with `{[myhero]}`
+        // resolve through the user's design.
+        customTemplates: script.customTemplates
+      });
+      return expanded;
+    }
+    return flatBlocks.map((block, index) => {
+      const transition = resolveBlockTransition(block, resolvedTheme, index);
+      return transition !== block.transition ? { ...block, transition } : block;
+    });
+  }, [
+    script?.blocks,
+    script?.audio?.segments,
+    script?.persistentLayers,
+    script?.customTemplates,
+    viewport,
+    theme
+  ]);
+  const currentBlock = useMemo2(() => getBlockAtTime(blocks, currentTime), [blocks, currentTime]);
+  const currentBlockIndex = useMemo2(
+    () => currentBlock ? blocks.indexOf(currentBlock) : -1,
+    [blocks, currentBlock]
+  );
+  const blockTime = useMemo2(() => {
+    if (!currentBlock) return 0;
+    return Math.max(0, currentTime - currentBlock.startTime);
+  }, [currentBlock, currentTime]);
+  const blockProgress = useMemo2(() => {
+    if (!currentBlock || currentBlock.duration === 0) return 0;
+    return Math.min(1, blockTime / currentBlock.duration);
+  }, [currentBlock, blockTime]);
+  const docProgress = useMemo2(() => {
+    if (!script || script.duration === 0) return 0;
+    return Math.min(1, currentTime / script.duration);
+  }, [script, currentTime]);
+  const outgoingBlockRef = useRef2(null);
+  const activeBlockIdRef = useRef2(null);
+  const lastRenderedBlockRef = useRef2(null);
+  const suppressOutgoingTargetRef = useRef2(null);
+  const suppressOutgoingForNextBlock = useCallback2((blockId) => {
+    if (activeBlockIdRef.current === blockId) {
+      outgoingBlockRef.current = null;
+      suppressOutgoingTargetRef.current = null;
+      return;
+    }
+    suppressOutgoingTargetRef.current = blockId;
+  }, []);
+  if (currentBlock && currentBlock.id !== activeBlockIdRef.current) {
+    const suppressOutgoing = suppressOutgoingTargetRef.current === currentBlock.id;
+    outgoingBlockRef.current = suppressOutgoing ? null : lastRenderedBlockRef.current;
+    suppressOutgoingTargetRef.current = null;
+    activeBlockIdRef.current = currentBlock.id;
+  }
+  lastRenderedBlockRef.current = currentBlock;
+  const transitionDuration = currentBlock?.transition ? resolveTransitionDuration(currentBlock.transition) : 0;
+  const isEntering = !!currentBlock && transitionDuration > 0 && blockTime < transitionDuration;
+  const outgoingBlock = outgoingBlockRef.current;
+  const isExiting = isEntering && outgoingBlock != null && outgoingBlock.id !== currentBlock?.id;
+  const previousBlock = isExiting ? outgoingBlock : null;
+  const goToBlock = useCallback2(
+    (index) => {
+      if (!script || index < 0 || index >= blocks.length) return;
+      const targetBlock = blocks[index];
+      if (targetBlock) {
+        onSeek?.(targetBlock.startTime);
+      }
+    },
+    [script, blocks, onSeek]
+  );
+  const nextBlock = useCallback2(() => {
+    if (currentBlockIndex < blocks.length - 1) {
+      return goToBlock(currentBlockIndex + 1);
+    }
+  }, [currentBlockIndex, blocks.length, goToBlock]);
+  const prevBlock = useCallback2(() => {
+    if (currentBlockIndex > 0) {
+      return goToBlock(currentBlockIndex - 1);
+    }
+  }, [currentBlockIndex, goToBlock]);
+  return {
+    currentBlock,
+    currentBlockIndex,
+    previousBlock,
+    isEntering,
+    isExiting,
+    blockTime,
+    blockProgress,
+    docProgress,
+    nextBlock,
+    prevBlock,
+    goToBlock,
+    suppressOutgoingForNextBlock,
+    /** Expanded blocks (templates converted to full blocks with layers) */
+    blocks
+  };
+}
+
+// src/hooks/useViewportOrientation.ts
+import { useState as useState2, useEffect as useEffect2, useMemo as useMemo3 } from "react";
+import {
+  VIEWPORT_PRESETS as VIEWPORT_PRESETS2
+} from "@bendyline/squisq/doc";
+function getOrientationFromWindow(width, height) {
+  const ratio = width / height;
+  if (ratio > 1.2) {
+    return "landscape";
+  } else if (ratio < 0.83) {
+    return "portrait";
+  } else {
+    return "square";
+  }
+}
+function getViewportForOrientation(orientation) {
+  switch (orientation) {
+    case "portrait":
+      return VIEWPORT_PRESETS2.portrait;
+    case "square":
+      return VIEWPORT_PRESETS2.square;
+    case "landscape":
+    default:
+      return VIEWPORT_PRESETS2.landscape;
+  }
+}
+function useViewportOrientation() {
+  const [windowSize, setWindowSize] = useState2(() => ({
+    width: typeof window !== "undefined" ? window.innerWidth : 1920,
+    height: typeof window !== "undefined" ? window.innerHeight : 1080
+  }));
+  useEffect2(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    let timeoutId;
+    const debouncedResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(handleResize, 100);
+    };
+    window.addEventListener("resize", debouncedResize);
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  const orientation = useMemo3(
+    () => getOrientationFromWindow(windowSize.width, windowSize.height),
+    [windowSize.width, windowSize.height]
+  );
+  const viewport = useMemo3(() => getViewportForOrientation(orientation), [orientation]);
+  return {
+    viewport,
+    orientation,
+    windowSize
+  };
+}
+
+export {
+  useMediaSchedule,
+  useAudioSync,
+  useDocPlayback,
+  useViewportOrientation
+};