@slidev-react/client 0.2.5

package/src/features/presentation/presenter/presentationSyncBridge.ts

@@ -0,0 +1,82 @@
+import type { DrawStroke } from "../draw/DrawProvider";
+import type { PresentationCursorState, PresentationSharedState } from "../types";
+
+export interface LocalPresentationSyncState {
+  page: number;
+  cue: number;
+  cueTotal: number;
+  timer: number;
+  cursor: PresentationCursorState | null;
+  drawings: Record<string, DrawStroke[]>;
+  drawingsRevision: number;
+}
+
+export interface RemotePresentationPatchEffects {
+  remoteTimer?: number;
+  remoteCursor?: PresentationCursorState | null;
+  slideClicks?: {
+    slideId: string;
+    clicks: number;
+  };
+  slideClicksTotal?: {
+    slideId: string;
+    clicksTotal: number;
+  };
+  remoteDrawings?: {
+    revision: number;
+    strokesBySlideId: Record<string, DrawStroke[]>;
+  };
+}
+
+export function buildPresentationSharedState(
+  localState: LocalPresentationSyncState,
+): PresentationSharedState {
+  return {
+    ...localState,
+    lastUpdate: 0,
+  };
+}
+
+export function mapRemotePresentationPatch({
+  patch,
+  remotePage,
+  currentPage,
+  resolveSlideId,
+}: {
+  patch: Partial<PresentationSharedState>;
+  remotePage: number;
+  currentPage: number;
+  resolveSlideId: (index: number) => string | null;
+}): RemotePresentationPatchEffects {
+  const remoteSlideId = resolveSlideId(remotePage);
+  const effects: RemotePresentationPatchEffects = {};
+
+  if (typeof patch.timer === "number") effects.remoteTimer = patch.timer;
+
+  if ("cursor" in patch) {
+    effects.remoteCursor = remotePage === currentPage ? (patch.cursor ?? null) : null;
+  }
+
+  if (remoteSlideId && typeof patch.cueTotal === "number") {
+    effects.slideClicksTotal = {
+      slideId: remoteSlideId,
+      clicksTotal: patch.cueTotal,
+    };
+  }
+
+  if (remoteSlideId && typeof patch.cue === "number") {
+    effects.slideClicks = {
+      slideId: remoteSlideId,
+      clicks: patch.cue,
+    };
+  }
+
+  if (patch.drawings) {
+    effects.remoteDrawings = {
+      revision: typeof patch.drawingsRevision === "number" ? patch.drawingsRevision : Date.now(),
+      strokesBySlideId: patch.drawings,
+    };
+  }
+
+  return effects;
+}

package/src/features/presentation/presenter/stage.ts

@@ -0,0 +1,15 @@
+import type { SlidesViewport } from "@slidev-react/core/slides/viewport";
+
+export const OVERVIEW_STAGE_WIDTH = 320;
+
+export function resolveOverviewStageMetrics(viewport: SlidesViewport) {
+  const stageWidth = viewport.width;
+  const stageHeight = viewport.height;
+
+  return {
+    stageWidth,
+    stageHeight,
+    overviewStageHeight: Math.round((OVERVIEW_STAGE_WIDTH * stageHeight) / stageWidth),
+    overviewStageScale: OVERVIEW_STAGE_WIDTH / stageWidth,
+  };
+}

package/src/features/presentation/presenter/types.ts

@@ -0,0 +1,30 @@
+import type { LayoutName } from "@slidev-react/core/slides/layout";
+import type { SlideComponent } from "@slidev-react/core/slides/slide";
+import type { SlidesViewport } from "@slidev-react/core/slides/viewport";
+import type { TransitionName } from "@slidev-react/core/slides/transition";
+
+export interface CompiledSlide {
+  id: string;
+  component: SlideComponent;
+  meta: {
+    title?: string;
+    layout?: LayoutName;
+    class?: string;
+    background?: string;
+    transition?: TransitionName;
+    clicks?: number;
+    notes?: string;
+    src?: string;
+  };
+}
+
+/**
+ * Deck-wide visual configuration that flows through the presenter component tree.
+ * Groups the repeatedly passed `slides*` props to reduce prop drilling.
+ */
+export interface SlidesConfig {
+  slidesViewport: SlidesViewport;
+  slidesLayout?: LayoutName;
+  slidesBackground?: string;
+  slidesTransition?: TransitionName;
+}

package/src/features/presentation/presenter/useFullscreen.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useState } from "react";
+
+function isFullscreenSupported() {
+  return (
+    typeof document !== "undefined" &&
+    typeof document.documentElement.requestFullscreen === "function"
+  );
+}
+
+export function useFullscreen() {
+  const [active, setActive] = useState(
+    () => typeof document !== "undefined" && document.fullscreenElement !== null,
+  );
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const onFullscreenChange = () => {
+      setActive(document.fullscreenElement !== null);
+    };
+
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+    };
+  }, []);
+
+  const enter = useCallback(async () => {
+    if (!isFullscreenSupported()) return;
+    await document.documentElement.requestFullscreen();
+  }, []);
+
+  const exit = useCallback(async () => {
+    if (typeof document === "undefined" || !document.fullscreenElement) return;
+    await document.exitFullscreen();
+  }, []);
+
+  const toggle = useCallback(async () => {
+    if (typeof document === "undefined") return;
+
+    if (document.fullscreenElement) {
+      await exit();
+      return;
+    }
+
+    await enter();
+  }, [enter, exit]);
+
+  return {
+    supported: isFullscreenSupported(),
+    active,
+    enter,
+    exit,
+    toggle,
+  };
+}
+
+export type FullscreenRuntime = ReturnType<typeof useFullscreen>;

package/src/features/presentation/presenter/useIdleCursor.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+
+export function useIdleCursor({ enabled, idleMs = 2500 }: { enabled: boolean; idleMs?: number }) {
+  const [hidden, setHidden] = useState(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setHidden(false);
+      return;
+    }
+
+    let idleTimer = window.setTimeout(() => {
+      setHidden(true);
+    }, idleMs);
+
+    const markActive = () => {
+      setHidden(false);
+      window.clearTimeout(idleTimer);
+      idleTimer = window.setTimeout(() => {
+        setHidden(true);
+      }, idleMs);
+    };
+
+    window.addEventListener("pointermove", markActive, { passive: true });
+    window.addEventListener("pointerdown", markActive, { passive: true });
+    window.addEventListener("keydown", markActive);
+
+    return () => {
+      window.clearTimeout(idleTimer);
+      window.removeEventListener("pointermove", markActive);
+      window.removeEventListener("pointerdown", markActive);
+      window.removeEventListener("keydown", markActive);
+    };
+  }, [enabled, idleMs]);
+
+  return hidden;
+}

package/src/features/presentation/presenter/usePresentationFlowRuntime.ts

@@ -0,0 +1,238 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { resolveCueTotal } from "@slidev-react/core/presentation/flow/cue";
+import {
+  canAdvanceFlow,
+  canRetreatFlow,
+  clampCueIndex,
+  resolveAdvanceFlow,
+  resolveRetreatFlow,
+} from "@slidev-react/core/presentation/flow/navigation";
+import { type RevealContextValue } from "../reveal/RevealContext";
+import type { CompiledSlide } from "./types";
+
+interface SlidesNavigationLike {
+  currentIndex: number;
+  total: number;
+  goTo: (index: number) => void;
+}
+
+function resolveMaxCueStep(stepCounts: Map<number, number> | undefined) {
+  if (!stepCounts || stepCounts.size === 0) return 0;
+
+  let max = 0;
+  for (const step of stepCounts.keys()) {
+    if (step > max) max = step;
+  }
+
+  return max;
+}
+
+export function usePresentationFlowRuntime({
+  slides,
+  navigation,
+}: {
+  slides: CompiledSlide[];
+  navigation: SlidesNavigationLike;
+}) {
+  const currentSlide = slides[navigation.currentIndex];
+  const revealStepCountsRef = useRef<Record<string, Map<number, number>>>({});
+  const [clicksBySlideId, setClicksBySlideId] = useState<Record<string, number>>({});
+  const [clicksTotalBySlideId, setClicksTotalBySlideId] = useState<Record<string, number>>({});
+  const clicksBySlideIdRef = useRef(clicksBySlideId);
+  const clicksTotalBySlideIdRef = useRef(clicksTotalBySlideId);
+  const slideClicksConfig = useMemo(
+    () =>
+      Object.fromEntries(
+        slides.map((slide) => [slide.id, slide.meta.clicks ?? 0] as const),
+      ) as Record<string, number>,
+    [slides],
+  );
+
+  useEffect(() => {
+    clicksBySlideIdRef.current = clicksBySlideId;
+  }, [clicksBySlideId]);
+
+  useEffect(() => {
+    clicksTotalBySlideIdRef.current = clicksTotalBySlideId;
+  }, [clicksTotalBySlideId]);
+
+  const setSlideClicks = useCallback(
+    (slideId: string, next: number) => {
+      setClicksBySlideId((prev) => {
+        const total = resolveCueTotal({
+          configuredCues: slideClicksConfig[slideId],
+          detectedCues: clicksTotalBySlideIdRef.current[slideId],
+        });
+        const clamped = clampCueIndex(next, total);
+        if ((prev[slideId] ?? 0) === clamped) return prev;
+
+        const updated = {
+          ...prev,
+          [slideId]: clamped,
+        };
+        clicksBySlideIdRef.current = updated;
+        return updated;
+      });
+    },
+    [slideClicksConfig],
+  );
+
+  const setSlideClicksTotal = useCallback(
+    (slideId: string, nextTotal: number) => {
+      const safeTotal = resolveCueTotal({
+        configuredCues: slideClicksConfig[slideId],
+        detectedCues: nextTotal,
+      });
+
+      setClicksTotalBySlideId((prev) => {
+        if (prev[slideId] === safeTotal) return prev;
+
+        const updated = {
+          ...prev,
+          [slideId]: safeTotal,
+        };
+        clicksTotalBySlideIdRef.current = updated;
+        return updated;
+      });
+
+      setClicksBySlideId((prev) => {
+        const clamped = clampCueIndex(prev[slideId] ?? 0, safeTotal);
+        if ((prev[slideId] ?? 0) === clamped) return prev;
+
+        const updated = {
+          ...prev,
+          [slideId]: clamped,
+        };
+        clicksBySlideIdRef.current = updated;
+        return updated;
+      });
+    },
+    [slideClicksConfig],
+  );
+
+  const registerRevealStep = useCallback(
+    (step: number) => {
+      const slideId = currentSlide.id;
+      const normalizedStep = Math.max(Math.floor(step), 1);
+      const slideSteps = revealStepCountsRef.current[slideId] ?? new Map<number, number>();
+      revealStepCountsRef.current[slideId] = slideSteps;
+      slideSteps.set(normalizedStep, (slideSteps.get(normalizedStep) ?? 0) + 1);
+      setSlideClicksTotal(slideId, resolveMaxCueStep(slideSteps));
+
+      return () => {
+        const steps = revealStepCountsRef.current[slideId];
+        if (!steps) return;
+
+        const nextCount = (steps.get(normalizedStep) ?? 1) - 1;
+        if (nextCount <= 0) steps.delete(normalizedStep);
+        else steps.set(normalizedStep, nextCount);
+
+        if (steps.size === 0) delete revealStepCountsRef.current[slideId];
+
+        setSlideClicksTotal(slideId, resolveMaxCueStep(steps));
+      };
+    },
+    [currentSlide.id, setSlideClicksTotal],
+  );
+
+  const currentClicks = clicksBySlideId[currentSlide.id] ?? 0;
+  const currentClicksTotal = resolveCueTotal({
+    configuredCues: currentSlide.meta.clicks,
+    detectedCues: clicksTotalBySlideId[currentSlide.id],
+  });
+
+  const goToSlideAtStart = useCallback(
+    (index: number) => {
+      const targetSlide = slides[index];
+      if (!targetSlide) return;
+
+      setSlideClicks(targetSlide.id, 0);
+      navigation.goTo(index);
+    },
+    [navigation, setSlideClicks, slides],
+  );
+
+  const advanceReveal = useCallback(() => {
+    const nextState = resolveAdvanceFlow({
+      currentCueIndex: currentClicks,
+      currentCueTotal: currentClicksTotal,
+      currentPageIndex: navigation.currentIndex,
+      totalPages: navigation.total,
+    });
+    if (!nextState) return;
+
+    const targetSlide = slides[nextState.pageIndex];
+    if (!targetSlide) return;
+
+    setSlideClicks(targetSlide.id, nextState.cueIndex);
+    if (nextState.pageIndex !== navigation.currentIndex) navigation.goTo(nextState.pageIndex);
+  }, [currentClicks, currentClicksTotal, navigation, setSlideClicks, slides]);
+
+  const retreatReveal = useCallback(() => {
+    const previousSlideId = slides[navigation.currentIndex - 1]?.id ?? "";
+    const nextState = resolveRetreatFlow({
+      currentCueIndex: currentClicks,
+      currentPageIndex: navigation.currentIndex,
+      previousCueIndex: clicksBySlideIdRef.current[previousSlideId],
+      previousCueTotal: resolveCueTotal({
+        configuredCues: slideClicksConfig[previousSlideId],
+        detectedCues: clicksTotalBySlideIdRef.current[previousSlideId],
+      }),
+    });
+    if (!nextState) return;
+
+    const targetSlide = slides[nextState.pageIndex];
+    if (!targetSlide) return;
+
+    setSlideClicks(targetSlide.id, nextState.cueIndex);
+    if (nextState.pageIndex !== navigation.currentIndex) navigation.goTo(nextState.pageIndex);
+  }, [currentClicks, navigation, setSlideClicks, slideClicksConfig, slides]);
+
+  const revealContextValue = useMemo<RevealContextValue>(
+    () => ({
+      slideId: currentSlide.id,
+      clicks: currentClicks,
+      clicksTotal: currentClicksTotal,
+      setClicks: (next) => setSlideClicks(currentSlide.id, next),
+      registerStep: registerRevealStep,
+      advance: advanceReveal,
+      retreat: retreatReveal,
+      canAdvance: canAdvanceFlow({
+        currentCueIndex: currentClicks,
+        currentCueTotal: currentClicksTotal,
+        currentPageIndex: navigation.currentIndex,
+        totalPages: navigation.total,
+      }),
+      canRetreat: canRetreatFlow({
+        currentCueIndex: currentClicks,
+        currentPageIndex: navigation.currentIndex,
+      }),
+    }),
+    [
+      advanceReveal,
+      currentClicks,
+      currentClicksTotal,
+      currentSlide.id,
+      navigation.currentIndex,
+      navigation.total,
+      registerRevealStep,
+      retreatReveal,
+      setSlideClicks,
+    ],
+  );
+
+  return {
+    currentClicks,
+    currentClicksTotal,
+    canPrev: revealContextValue.canRetreat,
+    canNext: revealContextValue.canAdvance,
+    revealContextValue,
+    setSlideClicks,
+    setSlideClicksTotal,
+    goToSlideAtStart,
+    advanceReveal,
+    retreatReveal,
+  }
+}
+
+export type PresentationFlowRuntime = ReturnType<typeof usePresentationFlowRuntime>