@gpichot/spectacle-deck 1.11.0 → 1.12.0

package/RemoteControllerShortcut.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Registers keyboard shortcuts for presentation remote controllers:
+ * - PageDown / PageUp: next / previous (standard step-by-step navigation)
+ * - VolumeUp / VolumeDown: next / previous slide (skipping steps)
+ */
+export declare function RemoteControllerShortcut(): any;

package/index.cjs

@@ -62,9 +62,9 @@ __export(src_exports, {
   noneTransition: () => noneTransition,
   resolveTransition: () => resolveTransition
 });
-var import_react17 = require("@mdx-js/react");
-var import_react18 = __toESM(require("react"));
-var import_spectacle12 = require("spectacle");
+var import_react18 = require("@mdx-js/react");
+var import_react19 = __toESM(require("react"));
+var import_spectacle13 = require("spectacle");
 var import_styled_components20 = require("styled-components");
 
 // src/colors.ts
@@ -1613,16 +1613,63 @@ var layouts_default = {
   twoColumn: TwoColumnLayout
 };
 
-// src/SkipStepsShortcut.tsx
+// src/RemoteControllerShortcut.tsx
 var import_react9 = require("react");
 var import_spectacle6 = require("spectacle");
-function SkipStepsShortcut() {
+function RemoteControllerShortcut() {
   const {
     skipTo,
     activeView: { slideIndex },
     slideCount
   } = (0, import_react9.useContext)(import_spectacle6.DeckContext);
   (0, import_spectacle6.useMousetrap)(
+    {
+      pagedown: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })
+        );
+      },
+      pageup: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true })
+        );
+      }
+    },
+    [slideIndex, slideCount]
+  );
+  (0, import_react9.useEffect)(() => {
+    function handleKeyDown(e) {
+      if (e.key === "AudioVolumeUp") {
+        e.preventDefault();
+        if (slideIndex < slideCount - 1) {
+          skipTo({ slideIndex: slideIndex + 1, stepIndex: 0 });
+        }
+      } else if (e.key === "AudioVolumeDown") {
+        e.preventDefault();
+        if (slideIndex > 0) {
+          skipTo({
+            slideIndex: slideIndex - 1,
+            stepIndex: null
+          });
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [slideIndex, slideCount, skipTo]);
+  return null;
+}
+
+// src/SkipStepsShortcut.tsx
+var import_react10 = require("react");
+var import_spectacle7 = require("spectacle");
+function SkipStepsShortcut() {
+  const {
+    skipTo,
+    activeView: { slideIndex },
+    slideCount
+  } = (0, import_react10.useContext)(import_spectacle7.DeckContext);
+  (0, import_spectacle7.useMousetrap)(
     {
       "shift+right": () => {
         if (slideIndex < slideCount - 1) {
@@ -1664,7 +1711,7 @@ function SlideWrapper({
 }
 
 // src/template.tsx
-var import_spectacle7 = require("spectacle");
+var import_spectacle8 = require("spectacle");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var template = ({
   slideNumber,
@@ -1672,7 +1719,7 @@ var template = ({
 }) => {
   const percentage = slideNumber / numberOfSlides * 100;
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_spectacle7.Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_spectacle7.FullScreen, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_spectacle8.Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_spectacle8.FullScreen, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { width: "100%", height: "4px", background: "#ffffff11" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       {
@@ -1716,7 +1763,7 @@ var theme_default = {
 };
 
 // src/transitions.ts
-var import_spectacle8 = require("spectacle");
+var import_spectacle9 = require("spectacle");
 var dropTransition = {
   from: { transform: "translateY(-100%)", opacity: 0 },
   enter: { transform: "translateY(0%)", opacity: 1 },
@@ -1728,8 +1775,8 @@ var noneTransition = {
   leave: { opacity: 0 }
 };
 var transitionMap = {
-  fade: import_spectacle8.fadeTransition,
-  slide: import_spectacle8.slideTransition,
+  fade: import_spectacle9.fadeTransition,
+  slide: import_spectacle9.slideTransition,
   drop: dropTransition,
   none: noneTransition
 };
@@ -1745,11 +1792,11 @@ __reExport(src_exports, require("spectacle"));
 var import_web = require("@react-spring/web");
 
 // src/components/animations/useInView.ts
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 function useInView() {
-  const ref = import_react10.default.useRef(null);
-  const [isInView, setIsInView] = import_react10.default.useState(false);
-  import_react10.default.useEffect(() => {
+  const ref = import_react11.default.useRef(null);
+  const [isInView, setIsInView] = import_react11.default.useState(false);
+  import_react11.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1947,7 +1994,7 @@ function Spotlight({
 
 // src/components/animations/StaggerChildren.tsx
 var import_web5 = require("@react-spring/web");
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function StaggerChildren({
   children,
@@ -1958,7 +2005,7 @@ function StaggerChildren({
   distance = 20
 }) {
   const [ref, isInView] = useInView();
-  const items = import_react11.default.Children.toArray(children);
+  const items = import_react12.default.Children.toArray(children);
   const translateMap = {
     up: `translateY(${distance}px)`,
     down: `translateY(-${distance}px)`,
@@ -1979,14 +2026,14 @@ function StaggerChildren({
 }
 
 // src/components/animations/TypeWriter.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 function extractText(node) {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
   if (!node) return "";
   if (Array.isArray(node)) return node.map(extractText).join("");
-  if (import_react12.default.isValidElement(node)) {
+  if (import_react13.default.isValidElement(node)) {
     const props = node.props;
     return extractText(props.children);
   }
@@ -2000,9 +2047,9 @@ function TypeWriter({
 }) {
   const text = extractText(children);
   const [ref, isInView] = useInView();
-  const [displayed, setDisplayed] = import_react12.default.useState("");
-  const [done, setDone] = import_react12.default.useState(false);
-  import_react12.default.useEffect(() => {
+  const [displayed, setDisplayed] = import_react13.default.useState("");
+  const [done, setDone] = import_react13.default.useState(false);
+  import_react13.default.useEffect(() => {
     if (!isInView) return;
     let index = 0;
     setDisplayed("");
@@ -2101,7 +2148,7 @@ function DocItem({ label, link }) {
 }
 
 // src/components/FilePane.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function FilePane({
   name,
@@ -2110,7 +2157,7 @@ function FilePane({
   minWidth,
   ...divProps
 }) {
-  const content = import_react13.default.isValidElement(children) ? import_react13.default.cloneElement(children, {
+  const content = import_react14.default.isValidElement(children) ? import_react14.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -2124,8 +2171,8 @@ FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
 var import_web6 = require("@react-spring/web");
-var import_react14 = __toESM(require("react"));
-var import_spectacle9 = require("spectacle");
+var import_react15 = __toESM(require("react"));
+var import_spectacle10 = require("spectacle");
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var Container = import_styled_components15.default.div`
@@ -2136,18 +2183,18 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react14.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_spectacle9.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  const items = import_react15.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_spectacle10.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Container,
     {
       style: {
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!import_react14.default.isValidElement(item)) {
+        if (!import_react15.default.isValidElement(item)) {
           return item;
         }
-        return import_react14.default.cloneElement(item, {
+        return import_react15.default.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -2285,14 +2332,14 @@ function IconBox({
 
 // src/components/ItemsColumn.tsx
 var import_web7 = require("@react-spring/web");
-var import_react15 = __toESM(require("react"));
-var import_spectacle10 = require("spectacle");
+var import_react16 = __toESM(require("react"));
+var import_spectacle11 = require("spectacle");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react15.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_spectacle10.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  const childrenArray = import_react16.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_spectacle11.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       style: {
@@ -2307,7 +2354,7 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!import_react15.default.isValidElement(child)) {
+        if (!import_react16.default.isValidElement(child)) {
           return child;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
@@ -2333,8 +2380,8 @@ function ItemColumnWrapper({
 
 // src/components/Timeline.tsx
 var import_web8 = require("@react-spring/web");
-var import_react16 = __toESM(require("react"));
-var import_spectacle11 = require("spectacle");
+var import_react17 = __toESM(require("react"));
+var import_spectacle12 = require("spectacle");
 var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/Timeline.styled.tsx
@@ -2408,13 +2455,13 @@ var style = {
 };
 function Timeline(props) {
   const { activeIndex, ...rest } = props;
-  const children = import_react16.default.Children.toArray(rest.children);
+  const children = import_react17.default.Children.toArray(rest.children);
   if (activeIndex != null) {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ...rest, style: { ...style, ...rest.style }, children: children.map((child, index) => {
-      if (!import_react16.default.isValidElement(child)) {
+      if (!import_react17.default.isValidElement(child)) {
         return child;
       }
-      return import_react16.default.cloneElement(child, {
+      return import_react17.default.cloneElement(child, {
         // @ts-expect-error cloning
         isPhantom: activeIndex < index,
         isLast: activeIndex === index
@@ -2422,7 +2469,7 @@ function Timeline(props) {
     }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    import_spectacle11.Stepper,
+    import_spectacle12.Stepper,
     {
       ...rest,
       values: children,
@@ -2430,10 +2477,10 @@ function Timeline(props) {
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!import_react16.default.isValidElement(child)) {
+          if (!import_react17.default.isValidElement(child)) {
             return child;
           }
-          return import_react16.default.cloneElement(child, {
+          return import_react17.default.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -2529,10 +2576,10 @@ function Deck({
   layouts: layouts2 = layouts_default,
   transition
 }) {
-  import_react18.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = import_react18.default.useMemo(() => {
+  const mergedTheme = import_react19.default.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2543,7 +2590,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = import_react18.default.useMemo(() => {
+  const GlobalStyle = import_react19.default.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return import_styled_components20.createGlobalStyle`
       :root {
@@ -2552,22 +2599,23 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react18.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react17.MDXProvider, { components: componentsMap2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react19.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react18.MDXProvider, { components: componentsMap2, children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(GlobalStyle, {}),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-      import_spectacle12.Deck,
+      import_spectacle13.Deck,
       {
         theme: mergedTheme,
         template,
         transition: resolveTransition(transition),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SkipStepsShortcut, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RemoteControllerShortcut, {}),
           deck.slides.map((slide, i) => {
             var _a;
             const Component = slide.slideComponent;
             const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
             const slideTransition2 = resolveTransition(slideTransitionName);
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_spectacle12.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, {}) }, i);
+            return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_spectacle13.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, {}) }, i);
           })
         ]
       }

package/index.mjs

@@ -1554,16 +1554,63 @@ var layouts_default = {
   twoColumn: TwoColumnLayout
 };
 
-// src/SkipStepsShortcut.tsx
-import { useContext as useContext2 } from "react";
+// src/RemoteControllerShortcut.tsx
+import { useContext as useContext2, useEffect } from "react";
 import { DeckContext as DeckContext2, useMousetrap } from "spectacle";
-function SkipStepsShortcut() {
+function RemoteControllerShortcut() {
   const {
     skipTo,
     activeView: { slideIndex },
     slideCount
   } = useContext2(DeckContext2);
   useMousetrap(
+    {
+      pagedown: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true })
+        );
+      },
+      pageup: () => {
+        document.dispatchEvent(
+          new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true })
+        );
+      }
+    },
+    [slideIndex, slideCount]
+  );
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === "AudioVolumeUp") {
+        e.preventDefault();
+        if (slideIndex < slideCount - 1) {
+          skipTo({ slideIndex: slideIndex + 1, stepIndex: 0 });
+        }
+      } else if (e.key === "AudioVolumeDown") {
+        e.preventDefault();
+        if (slideIndex > 0) {
+          skipTo({
+            slideIndex: slideIndex - 1,
+            stepIndex: null
+          });
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [slideIndex, slideCount, skipTo]);
+  return null;
+}
+
+// src/SkipStepsShortcut.tsx
+import { useContext as useContext3 } from "react";
+import { DeckContext as DeckContext3, useMousetrap as useMousetrap2 } from "spectacle";
+function SkipStepsShortcut() {
+  const {
+    skipTo,
+    activeView: { slideIndex },
+    slideCount
+  } = useContext3(DeckContext3);
+  useMousetrap2(
     {
       "shift+right": () => {
         if (slideIndex < slideCount - 1) {
@@ -2506,6 +2553,7 @@ function Deck({
         transition: resolveTransition(transition),
         children: [
           /* @__PURE__ */ jsx34(SkipStepsShortcut, {}),
+          /* @__PURE__ */ jsx34(RemoteControllerShortcut, {}),
           deck.slides.map((slide, i) => {
             var _a;
             const Component = slide.slideComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpichot/spectacle-deck",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",