@slidev-react/client 0.2.5

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

@@ -0,0 +1,358 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
+import {
+  buildShortcutHelpSections,
+  createShortcutHelpTriggerState,
+  isShortcutHelpOpenKey,
+  registerShortcutHelpKeyDown,
+  registerShortcutHelpKeyUp,
+} from "../navigation/keyboardShortcuts";
+import { useIdleCursor } from "./useIdleCursor";
+import { isTypingElement } from "../browser";
+import {
+  parsePersistedPresenterCursorMode,
+  parsePersistedPresenterSidebarWidth,
+  parsePersistedPresenterStageScale,
+  PRESENTER_CURSOR_MODE_STORAGE_KEY,
+  PRESENTER_SIDEBAR_WIDTH_STORAGE_KEY,
+  PRESENTER_STAGE_SCALE_STORAGE_KEY,
+} from "./persistence";
+
+const PRESENTER_SIDEBAR_WIDTH_MIN = 280;
+const PRESENTER_SIDEBAR_WIDTH_MAX = 420;
+const PRESENTER_STAGE_MIN_WIDTH = 720;
+const PRESENTER_DIVIDER_WIDTH = 10;
+const PRESENTER_DESKTOP_BREAKPOINT = 1024;
+
+export type PresenterCursorMode = "always" | "idle-hide";
+
+export type PresenterOverlay =
+  | "quick-overview"
+  | "notes-overview"
+  | "timeline-preview"
+  | "shortcuts-help"
+  | null;
+
+function readInitialStageScale() {
+  try {
+    return parsePersistedPresenterStageScale(
+      window.localStorage.getItem(PRESENTER_STAGE_SCALE_STORAGE_KEY),
+    ) ?? 1;
+  } catch {
+    return 1;
+  }
+}
+
+function readInitialCursorMode(): PresenterCursorMode {
+  try {
+    return (
+      parsePersistedPresenterCursorMode(
+        window.localStorage.getItem(PRESENTER_CURSOR_MODE_STORAGE_KEY),
+      ) ?? "always"
+    );
+  } catch {
+    return "always";
+  }
+}
+
+function clampPresenterSidebarWidth(value: number, containerWidth: number) {
+  const maxWidth = Math.min(
+    PRESENTER_SIDEBAR_WIDTH_MAX,
+    Math.max(
+      PRESENTER_SIDEBAR_WIDTH_MIN,
+      containerWidth - PRESENTER_STAGE_MIN_WIDTH - PRESENTER_DIVIDER_WIDTH,
+    ),
+  );
+
+  return Math.min(Math.max(Math.round(value), PRESENTER_SIDEBAR_WIDTH_MIN), maxWidth);
+}
+
+function readInitialSidebarWidth() {
+  try {
+    const parsedValue = parsePersistedPresenterSidebarWidth(
+      window.localStorage.getItem(PRESENTER_SIDEBAR_WIDTH_STORAGE_KEY),
+    );
+    if (parsedValue !== null) return clampPresenterSidebarWidth(parsedValue, window.innerWidth);
+  } catch {
+    // Ignore storage read failures.
+  }
+
+  return clampPresenterSidebarWidth(window.innerWidth * 0.23, window.innerWidth);
+}
+
+export function usePresenterChromeRuntime({
+  canControl,
+  canOpenOverview,
+  isPresenterRole,
+}: {
+  canControl: boolean;
+  canOpenOverview: boolean;
+  isPresenterRole: boolean;
+}) {
+  const [activeOverlay, setActiveOverlay] = useState<PresenterOverlay>(null);
+  const [stageScale, setStageScale] = useState(readInitialStageScale);
+  const [cursorMode, setCursorMode] = useState<PresenterCursorMode>(readInitialCursorMode);
+  const [sidebarWidth, setSidebarWidth] = useState(readInitialSidebarWidth);
+  const [isWidePresenterLayout, setIsWidePresenterLayout] = useState(
+    () => window.innerWidth >= PRESENTER_DESKTOP_BREAKPOINT,
+  );
+  const [isResizingSidebar, setIsResizingSidebar] = useState(false);
+  const shortcutHelpTriggerRef = useRef(createShortcutHelpTriggerState());
+  const presenterLayoutRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(PRESENTER_STAGE_SCALE_STORAGE_KEY, String(stageScale));
+    } catch {
+      // Ignore storage write failures.
+    }
+  }, [stageScale]);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(PRESENTER_CURSOR_MODE_STORAGE_KEY, cursorMode);
+    } catch {
+      // Ignore storage write failures.
+    }
+  }, [cursorMode]);
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(PRESENTER_SIDEBAR_WIDTH_STORAGE_KEY, String(sidebarWidth));
+    } catch {
+      // Ignore storage write failures.
+    }
+  }, [sidebarWidth]);
+
+  useEffect(() => {
+    const updatePresenterLayoutMode = () => {
+      setIsWidePresenterLayout(window.innerWidth >= PRESENTER_DESKTOP_BREAKPOINT);
+
+      const containerWidth =
+        presenterLayoutRef.current?.getBoundingClientRect().width ?? window.innerWidth;
+      setSidebarWidth((currentWidth) => clampPresenterSidebarWidth(currentWidth, containerWidth));
+    };
+
+    updatePresenterLayoutMode();
+    window.addEventListener("resize", updatePresenterLayoutMode);
+    return () => window.removeEventListener("resize", updatePresenterLayoutMode);
+  }, []);
+
+  const setSidebarWidthFromPointer = useCallback((clientX: number) => {
+    const bounds = presenterLayoutRef.current?.getBoundingClientRect();
+    if (!bounds) return;
+
+    const nextWidth = clampPresenterSidebarWidth(bounds.right - clientX, bounds.width);
+    setSidebarWidth((currentWidth) => (currentWidth === nextWidth ? currentWidth : nextWidth));
+  }, []);
+
+  useEffect(() => {
+    if (!isResizingSidebar) return;
+
+    const handlePointerMove = (event: PointerEvent) => {
+      setSidebarWidthFromPointer(event.clientX);
+    };
+
+    const handlePointerUp = () => {
+      setIsResizingSidebar(false);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizingSidebar, setSidebarWidthFromPointer]);
+
+  const handleSidebarResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (event.button !== 0) return;
+
+      event.preventDefault();
+      setSidebarWidthFromPointer(event.clientX);
+      setIsResizingSidebar(true);
+    },
+    [setSidebarWidthFromPointer],
+  );
+
+  const handleSidebarResizeKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLDivElement>) => {
+      if (!isWidePresenterLayout) return;
+
+      let delta = 0;
+      if (event.key === "ArrowLeft") delta = 16;
+      if (event.key === "ArrowRight") delta = -16;
+      if (event.key === "Home") delta = PRESENTER_SIDEBAR_WIDTH_MIN - sidebarWidth;
+      if (event.key === "End") delta = PRESENTER_SIDEBAR_WIDTH_MAX - sidebarWidth;
+      if (!delta) return;
+
+      event.preventDefault();
+      const containerWidth =
+        presenterLayoutRef.current?.getBoundingClientRect().width ?? window.innerWidth;
+      setSidebarWidth((currentWidth) =>
+        clampPresenterSidebarWidth(currentWidth + delta, containerWidth),
+      );
+    },
+    [isWidePresenterLayout, sidebarWidth],
+  );
+
+  const toggleOverlay = useCallback((overlay: Exclude<PresenterOverlay, null>) => {
+    setActiveOverlay((value) => (value === overlay ? null : overlay));
+  }, []);
+
+  const closeOverlay = useCallback(() => {
+    setActiveOverlay(null);
+  }, []);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (isTypingElement(event.target)) return;
+
+      if (!event.repeat) {
+        shortcutHelpTriggerRef.current = registerShortcutHelpKeyDown(
+          shortcutHelpTriggerRef.current,
+          event.key,
+        );
+      }
+
+      const key = event.key.toLowerCase();
+
+      if (
+        isShortcutHelpOpenKey({
+          key: event.key,
+          shiftKey: event.shiftKey,
+          metaKey: event.metaKey,
+          ctrlKey: event.ctrlKey,
+          altKey: event.altKey,
+        })
+      ) {
+        event.preventDefault();
+        toggleOverlay("shortcuts-help");
+        return;
+      }
+
+      if (key === "o") {
+        if (!canOpenOverview) return;
+
+        event.preventDefault();
+        toggleOverlay("quick-overview");
+        return;
+      }
+
+      if (key === "n") {
+        if (!canControl) return;
+
+        event.preventDefault();
+        toggleOverlay("notes-overview");
+        return;
+      }
+
+      if (key === "escape") closeOverlay();
+    };
+
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (isTypingElement(event.target)) return;
+
+      const result = registerShortcutHelpKeyUp(
+        shortcutHelpTriggerRef.current,
+        event.key,
+        Date.now(),
+      );
+      shortcutHelpTriggerRef.current = result.nextState;
+
+      if (!result.shouldToggle) return;
+
+      toggleOverlay("shortcuts-help");
+    };
+
+    const onBlur = () => {
+      shortcutHelpTriggerRef.current = createShortcutHelpTriggerState();
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, [canControl, canOpenOverview, closeOverlay, toggleOverlay]);
+
+  const handleStageScaleChange = useCallback((value: number) => {
+    setStageScale(parsePersistedPresenterStageScale(String(value)) ?? 1);
+  }, []);
+
+  const handleCursorModeChange = useCallback((value: PresenterCursorMode) => {
+    setCursorMode(parsePersistedPresenterCursorMode(value) ?? "always");
+  }, []);
+
+  const presenterLayoutStyle = useMemo(
+    () =>
+      isWidePresenterLayout
+        ? {
+            gridTemplateColumns: `minmax(0, 1fr) ${PRESENTER_DIVIDER_WIDTH}px ${sidebarWidth}px`,
+          }
+        : undefined,
+    [isWidePresenterLayout, sidebarWidth],
+  );
+
+  const shortcutHelpSections = useMemo(
+    () =>
+      buildShortcutHelpSections({
+        canControl,
+        canOpenOverview,
+      }),
+    [canControl, canOpenOverview],
+  );
+
+  const hideCursor = useIdleCursor({
+    enabled: isPresenterRole && canControl && cursorMode === "idle-hide",
+  });
+
+  return {
+    activeOverlay,
+    stageScale,
+    cursorMode,
+    hideCursor,
+    presenterLayoutRef,
+    presenterLayoutStyle,
+    isResizingSidebar,
+    overviewOpen: activeOverlay === "quick-overview",
+    notesOverviewOpen: activeOverlay === "notes-overview",
+    shortcutsHelpOpen: activeOverlay === "shortcuts-help",
+    timelinePreviewOpen: activeOverlay === "timeline-preview",
+    shortcutHelpSections,
+    handleStageScaleChange,
+    handleCursorModeChange,
+    handleSidebarResizeStart,
+    handleSidebarResizeKeyDown,
+    setActiveOverlay,
+    toggleOverview: () => {
+      if (!canOpenOverview) return;
+
+      toggleOverlay("quick-overview");
+    },
+    toggleNotes: () => {
+      if (!canControl) return;
+
+      toggleOverlay("notes-overview");
+    },
+    toggleShortcuts: () => toggleOverlay("shortcuts-help"),
+    toggleTimelinePreview: () => toggleOverlay("timeline-preview"),
+    closeOverlay,
+  };
+}

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

@@ -0,0 +1,226 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import type { DrawStroke } from "../draw/DrawProvider"
+import { usePresentationSync } from "../usePresentationSync"
+import { usePresentationRecorder } from "../usePresentationRecorder"
+import type {
+  PresentationCursorState,
+  PresentationSharedState,
+  PresentationSyncMode,
+} from "../types"
+import type { PresentationSession } from "../session"
+import { buildPresentationSharedState, mapRemotePresentationPatch } from "./presentationSyncBridge"
+import type { CompiledSlide } from "./types"
+import type { PresentationFlowRuntime } from "./usePresentationFlowRuntime"
+
+export interface PresenterSessionState {
+  followPresenter: boolean
+  localCursor: PresentationCursorState | null
+  remoteCursor: PresentationCursorState | null
+  remotePageIndex: number | null
+  localTimer: number
+  remoteTimer: number
+  drawings: Record<string, DrawStroke[]>
+  remoteDrawings: {
+    revision: number
+    strokesBySlideId: Record<string, DrawStroke[]>
+  } | null
+  sync: ReturnType<typeof usePresentationSync>
+  recorder: ReturnType<typeof usePresentationRecorder>
+  onStrokesChange: (nextStrokes: Record<string, DrawStroke[]>) => void
+  setLocalCursor: (cursor: PresentationCursorState | null) => void
+  setRemoteCursor: (cursor: PresentationCursorState | null) => void
+  detachFromPresenter: () => void
+}
+
+export function usePresenterSessionState({
+  slides,
+  session,
+  navigation,
+  flow,
+  canControl,
+  slidesExportFilename,
+  slidesTitle,
+}: {
+  slides: CompiledSlide[]
+  session: PresentationSession
+  navigation: { currentIndex: number; total: number; goTo: (index: number) => void }
+  flow: PresentationFlowRuntime
+  canControl: boolean
+  slidesExportFilename?: string
+  slidesTitle?: string
+}): PresenterSessionState {
+  const [followPresenter, setFollowPresenter] = useState(session.role === "viewer")
+  const [localCursor, setLocalCursor] = useState<PresentationCursorState | null>(null)
+  const [remoteCursor, setRemoteCursor] = useState<PresentationCursorState | null>(null)
+  const [remotePageIndex, setRemotePageIndex] = useState<number | null>(null)
+  const [localTimer, setLocalTimer] = useState(0)
+  const [remoteTimer, setRemoteTimer] = useState(0)
+  const [drawings, setDrawings] = useState<Record<string, DrawStroke[]>>({})
+  const [drawingsRevision, setDrawingsRevision] = useState(0)
+  const [remoteDrawings, setRemoteDrawings] = useState<{
+    revision: number
+    strokesBySlideId: Record<string, DrawStroke[]>
+  } | null>(null)
+  const drawingsSyncFrameRef = useRef<number | null>(null)
+  const currentIndexRef = useRef(navigation.currentIndex)
+
+  useEffect(() => {
+    currentIndexRef.current = navigation.currentIndex
+  }, [navigation.currentIndex])
+
+  useEffect(() => {
+    setFollowPresenter(session.role === "viewer")
+  }, [session.role, session.sessionId])
+
+  useEffect(() => {
+    setRemotePageIndex(navigation.currentIndex)
+  }, [session.role, session.sessionId])
+
+  const scheduleDrawingsSync = useCallback(() => {
+    if (drawingsSyncFrameRef.current !== null) return
+
+    drawingsSyncFrameRef.current = window.requestAnimationFrame(() => {
+      drawingsSyncFrameRef.current = null
+      setDrawingsRevision((revision) => revision + 1)
+    })
+  }, [])
+
+  const onStrokesChange = useCallback(
+    (nextStrokes: Record<string, DrawStroke[]>) => {
+      setDrawings(nextStrokes)
+
+      if (!canControl) return
+
+      scheduleDrawingsSync()
+    },
+    [canControl, scheduleDrawingsSync],
+  )
+
+  const localSharedState = useMemo<PresentationSharedState>(
+    () =>
+      buildPresentationSharedState({
+        page: navigation.currentIndex,
+        cue: flow.currentClicks,
+        cueTotal: flow.currentClicksTotal,
+        timer: localTimer,
+        cursor: localCursor,
+        drawings,
+        drawingsRevision,
+      }),
+    [
+      flow.currentClicks,
+      flow.currentClicksTotal,
+      drawings,
+      drawingsRevision,
+      localCursor,
+      localTimer,
+      navigation.currentIndex,
+    ],
+  )
+
+  const sync = usePresentationSync({
+    session,
+    currentIndex: navigation.currentIndex,
+    total: navigation.total,
+    goTo: navigation.goTo,
+    followRemotePage: followPresenter,
+    localState: localSharedState,
+    onRemoteState: (patch, remotePage) => {
+      setRemotePageIndex(remotePage)
+      const effects = mapRemotePresentationPatch({
+        patch,
+        remotePage,
+        currentPage: currentIndexRef.current,
+        resolveSlideId: (index) => slides[index]?.id ?? null,
+      })
+
+      if (typeof effects.remoteTimer === "number") setRemoteTimer(effects.remoteTimer)
+
+      if ("remoteCursor" in effects) setRemoteCursor(effects.remoteCursor ?? null)
+
+      if (effects.slideClicksTotal)
+        flow.setSlideClicksTotal(
+          effects.slideClicksTotal.slideId,
+          effects.slideClicksTotal.clicksTotal,
+        )
+
+      if (effects.slideClicks)
+        flow.setSlideClicks(effects.slideClicks.slideId, effects.slideClicks.clicks)
+
+      if (effects.remoteDrawings) setRemoteDrawings(effects.remoteDrawings)
+    },
+  })
+
+  const recorder = usePresentationRecorder({
+    enabled: canControl,
+    exportFilename: slidesExportFilename,
+    slidesTitle,
+  })
+
+  const detachFromPresenter = useCallback(() => {
+    if (session.role !== "viewer") return
+
+    setFollowPresenter(false)
+  }, [session.role])
+
+  // Timer effect
+  useEffect(() => {
+    if (!canControl) {
+      setLocalTimer(0)
+      return
+    }
+
+    const startedAt = Date.now()
+    setLocalTimer(0)
+    const intervalId = window.setInterval(() => {
+      setLocalTimer(Math.floor((Date.now() - startedAt) / 1000))
+    }, 1000)
+
+    return () => {
+      window.clearInterval(intervalId)
+    }
+  }, [canControl, session.sessionId])
+
+  // Reset state on role change
+  useEffect(() => {
+    if (canControl) {
+      setRemoteCursor(null)
+      setRemoteTimer(0)
+      setRemoteDrawings(null)
+    } else {
+      setLocalCursor(null)
+    }
+  }, [canControl])
+
+  // Clear remote cursor when page changes
+  useEffect(() => {
+    if (remotePageIndex === navigation.currentIndex) return
+
+    setRemoteCursor(null)
+  }, [navigation.currentIndex, remotePageIndex])
+
+  // Cleanup animations on unmount
+  useEffect(() => {
+    return () => {
+      if (drawingsSyncFrameRef.current !== null)
+        window.cancelAnimationFrame(drawingsSyncFrameRef.current)
+    }
+  }, [])
+
+  return {
+    followPresenter,
+    localCursor,
+    remoteCursor,
+    remotePageIndex,
+    localTimer,
+    remoteTimer,
+    drawings,
+    remoteDrawings,
+    sync,
+    recorder,
+    onStrokesChange,
+    setLocalCursor,
+    setRemoteCursor,
+    detachFromPresenter,
+  }
+}

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

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+function isWakeLockSupported() {
+  return (
+    typeof navigator !== "undefined" &&
+    "wakeLock" in navigator &&
+    typeof navigator.wakeLock?.request === "function"
+  );
+}
+
+export function useWakeLock() {
+  const sentinelRef = useRef<WakeLockSentinel | null>(null);
+  const [requested, setRequested] = useState(false);
+  const [active, setActive] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const release = useCallback(async () => {
+    setRequested(false);
+    setError(null);
+
+    const sentinel = sentinelRef.current;
+    sentinelRef.current = null;
+
+    if (!sentinel) {
+      setActive(false);
+      return;
+    }
+
+    try {
+      await sentinel.release();
+    } catch (releaseError) {
+      setError(releaseError instanceof Error ? releaseError.message : String(releaseError));
+    } finally {
+      setActive(false);
+    }
+  }, []);
+
+  const request = useCallback(async () => {
+    setRequested(true);
+    setError(null);
+
+    if (!isWakeLockSupported()) {
+      setActive(false);
+      setError("Wake lock is not supported in this browser.");
+      return;
+    }
+
+    try {
+      const sentinel = await navigator.wakeLock!.request("screen");
+      sentinelRef.current = sentinel;
+      setActive(!sentinel.released);
+
+      sentinel.addEventListener(
+        "release",
+        () => {
+          setActive(false);
+          sentinelRef.current = null;
+        },
+        { once: true },
+      );
+    } catch (requestError) {
+      setActive(false);
+      setError(requestError instanceof Error ? requestError.message : String(requestError));
+    }
+  }, []);
+
+  const toggle = useCallback(async () => {
+    if (requested || active) {
+      await release();
+      return;
+    }
+
+    await request();
+  }, [active, release, request, requested]);
+
+  useEffect(() => {
+    if (!requested || typeof document === "undefined") return;
+
+    const onVisibilityChange = () => {
+      if (document.visibilityState !== "visible") return;
+      if (!requested || sentinelRef.current) return;
+      void request();
+    };
+
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [request, requested]);
+
+  useEffect(() => {
+    return () => {
+      const sentinel = sentinelRef.current;
+      sentinelRef.current = null;
+      if (sentinel) void sentinel.release();
+    };
+  }, []);
+
+  return {
+    supported: isWakeLockSupported(),
+    requested,
+    active,
+    error,
+    request,
+    release,
+    toggle,
+  };
+}
+
+export type WakeLockRuntime = ReturnType<typeof useWakeLock>;