@crewlethq/ui 0.23.0 → 0.25.0

package/dist/chunk-HONZQ4UR.js

@@ -0,0 +1,107 @@
+import { SlideStage } from './chunk-KNLJL3VP.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenterView-T2C6ZZ3N.css';
+import { useRef, useState, useEffect } from 'react';
+import { ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  current: (position, total, title) => `Slide ${position} of ${total}, ${title}`,
+  next: (title) => `Next, ${title}`,
+  end: "End of the deck",
+  notes: "Speaker notes",
+  noNotes: "No notes for this slide.",
+  timer: "Time presenting",
+  pause: "Pause",
+  resume: "Resume",
+  reset: "Reset",
+  previous: "Previous slide",
+  forward: "Next slide",
+  position: (position, total) => `${position} of ${total}`
+};
+function formatStopwatch(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function PresenterView({
+  current,
+  currentTitle,
+  next,
+  nextTitle = "",
+  notes,
+  position,
+  total,
+  onNext,
+  onPrevious,
+  now = Date.now,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const clock = useRef(now);
+  clock.current = now;
+  const [banked, setBanked] = useState(0);
+  const [runningSince, setRunningSince] = useState(() => now());
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    if (runningSince === null) return void 0;
+    const id = setInterval(() => setTick((t) => t + 1), 1e3);
+    return () => clearInterval(id);
+  }, [runningSince]);
+  const elapsed = banked + (runningSince === null ? 0 : clock.current() - runningSince);
+  const pause = () => {
+    if (runningSince === null) {
+      setRunningSince(clock.current());
+    } else {
+      setBanked(elapsed);
+      setRunningSince(null);
+    }
+  };
+  const reset = () => {
+    setBanked(0);
+    setRunningSince(runningSince === null ? null : clock.current());
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-presenter", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__main", children: [
+      /* @__PURE__ */ jsx(SlideStage, { label: text.current(position, total, currentTitle), fit: "contain", children: current }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__controls", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: text.previous,
+            icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
+            onClick: onPrevious,
+            disabledReason: position <= 1 ? text.previous : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-presenter__position", "aria-live": "polite", children: text.position(position, total) }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: text.forward,
+            icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+            onClick: onNext,
+            disabledReason: position >= total ? text.end : void 0
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("aside", { className: "crewlet-presenter__side", children: [
+      /* @__PURE__ */ jsx("div", { className: "crewlet-presenter__next", children: next ? /* @__PURE__ */ jsx(SlideStage, { label: text.next(nextTitle), children: next }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__end", children: text.end }) }),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__timer", children: [
+        /* @__PURE__ */ jsx("span", { role: "timer", "aria-label": text.timer, className: "crewlet-presenter__elapsed", children: formatStopwatch(elapsed) }),
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: pause, children: runningSince === null ? text.resume : text.pause }),
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: reset, children: text.reset })
+      ] }),
+      /* @__PURE__ */ jsx("section", { className: "crewlet-presenter__notes", "aria-label": text.notes, children: notes ? /* @__PURE__ */ jsx("p", { children: notes }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__empty", children: text.noNotes }) })
+    ] })
+  ] });
+}
+
+export { PresenterView, formatStopwatch };

package/dist/{chunk-5PSXBL73.js → chunk-HVIX5ECM.js}

@@ -1,4 +1,4 @@
-import { useRoving, tabStop } from './chunk-CBOICT64.js';
+import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Avatar } from './chunk-5OM447RW.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY } from '@crewlethq/icons/characters';