[Feature] Add keyboard shortcuts for next _slide_ / previous _slide_

[mathieucaroff]

The current shortcuts (left) and (right) only switch to the next or previous Step, which can be e.g. a text fading in.

Description

When there are a lot of steps in slides, navigating the deck can be quite slow.

Proposal

Add a pair of keyboard shortcuts for switching to the next or previous slide. I would suggest to pick one among:

• A1. Arrow Up (back) and Arrow Down (next)
• A2. PageUp (back) and PageDown (next)

Links / References

• https://formidable.com/open-source/spectacle/docs/presenting-controls

Further ideas

• B. While we are at it, we might want to add shortcuts to go to the first or last slide of the deck. I would suggest to use the keys "Home" and "End".
• C. Further, I find the navigation dots are quite small. I believe it would make navigation easier if all of the navigation bar was clickable, and not just each small dot: Each click would be mapped to the closest dot.

[oliviertassinari]

Agree, see slidevjs/slidev#126 for why.

[oliviertassinari]

The workaround I used:

diff --git a/src/App.tsx b/src/App.tsx
index 6c61dcf..781508c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { styled, css } from '@pigment-css/react';
 import { Template } from './Template';
 import { Backdrop } from './Backdrop';
@@ -14,7 +15,10 @@ import {
   Notes,
   UnorderedList,
   ListItem,
+  DeckContext,
+  useMousetrap,
 } from 'spectacle';
 import { rawTheme } from '../rawTheme';

 // Slides
@@ -77,9 +81,24 @@ const transition = {
   },
 };

+function KeyboardShortcut() {
+  const deckContext = React.useContext(DeckContext);
+
+  useMousetrap(
+    {
+      pageup: deckContext.stepBackward,
+      pagedown: deckContext.stepForward,
+    },
+    [],
+  );
+
+  return null;
+}
+
 export default function Presentation() {
   return (
     <Deck theme={spectacleTheme} transition={transition} template={<Template />}>
+      <KeyboardShortcut />
       <Slide>
         <Slide1 />
         <Notes>
@@ -604,7 +623,7 @@ https://github.com/styled-components/styled-components/issues/4025
           8m45s
         </Notes>
       </Slide>

[adorfman10]

I am also interested in this feature!

@oliviertassinari - Your workaround is great for the default view, but it does not seem to work with the presenter mode. Any thoughts or recommendations for this?

[oliviertassinari]

@adorfman10 I don't recall having issues. What I used in the end: https://github.com/oliviertassinari/react-conf-2024-pigment-css/blob/29bd3f567a0b8473221f23c00ad12616ef8d495e/src/App.tsx#L105.

[adorfman10]

Everything works as expected in the default mode.

It seems to be out of sync for me in presenter mode. Pressing the custom key listeners (in my case, up and down arrows) advances the bottom preview slide, but does not advance the top active slide. Since the top active slide does not advance, the sync feature with the default mode also does not advance.

When I press right or left in presenter mode, everything comes back into sync.

I started to look into the source code to see if I could figure out what the difference was but nothing immediately stood out to me. Please let me know if you have any suggestions.

Here is the code I am running:

import React, { useContext } from 'react';
import { createRoot } from 'react-dom/client';
import { Deck, DefaultTemplate, Slide, FlexBox, Heading, SpectacleLogo, useMousetrap, DeckContext } from 'spectacle'

const KeyboardListener = () => {
  const { stepBackward, stepForward } = useContext(DeckContext)
  useMousetrap(
    {
      up: stepBackward,
      down: stepForward
    },
    []
  )
  return null
}

const Presentation = () => (
  <Deck template={() => <DefaultTemplate />}>
    <KeyboardListener />
    <Slide>
      <FlexBox height="100%">
        <Heading fontSize="h2">1</Heading>
        <SpectacleLogo size={300} />
      </FlexBox>
    </Slide>
    <Slide>
      <FlexBox height="100%">
        <Heading fontSize="h2">2</Heading>
        <SpectacleLogo size={300} />
      </FlexBox>
    </Slide>
    <Slide>
      <FlexBox height="100%">
        <Heading fontSize="h2">3</Heading>
        <SpectacleLogo size={300} />
      </FlexBox>
    </Slide>
    <Slide>
      <FlexBox height="100%">
        <Heading fontSize="h2">4</Heading>
        <SpectacleLogo size={300} />
      </FlexBox>
    </Slide>
  </Deck>
);

createRoot(document.getElementById('app')!).render(<Presentation />);

Here are some screenshots of my experience in presenter mode:

First and Second slide of the deck. Initial view in presenter mode

Press the down arrow. This advances the bottom preview slide, but does not advance the top active slide.

Press the down arrow again. This advances the bottom preview slide again.

Press the right arrow. This advances the top active slide to slide 2 and returns the bottom preview slide to show slide 3 properly.