add keyboard shortcuts (LeftArrow and RightArrow) to move slides in presentation mode

[disberd]

Thanks to @fonsp for showing me the React way

When in presentation mode, using the Left and Right arrow will allow to move slides back and forward.
This functionality is not triggered when the active element is a cell input or any other element within the notebook that you might want to interact with using arrows.

Also added some experimental functionality to detect full screen and prompt for activating (or deactivating) presentation mode:

a33b92f1-63ba-461f-b1c2-ddb6b87484ae.mp4

There are some caveats to the current automatic detection of full screen:

• It does not work on chrome if the browser zoom level is not 100%
  • This is because chrome does not the update the screen.height as a function of the zoom and there does not seem to be a nice way to make it work reliably
• The popup does not disappear if clicking outside of it (this is caused by source_element = null in the open_popup function. @fonsp is there a better way/source_element to handle this?

[github-actions]

Try this Pull Request!

Open Julia and type:

julia> import Pkg
julia> Pkg.activate(temp=true)
julia> Pkg.add(url="https://github.com/disberd/Pluto.jl", rev="presentation_keyboard_shortcuts")
julia> using Pluto

[disberd]

Maybe is better to add a keyboard shortcut for presentation mode and avoid the automatic full screen detection? So the user that wants to present can explicitly do so (without having to open the developer console) using a shortcut and also manually trigger fullscreen.

Any thoughts on this @fonsp?

[pankgeorg]

Maybe is better to add a keyboard shortcut for presentation mode and avoid the automatic full screen detection? So the user that wants to present can explicitly do so (without having to open the developer console) using a shortcut and also manually trigger fullscreen.

I would agree to avoid fullscreen detection. Let's try using the official API or avoid it altogether.

Also since we're adding shortcuts, may I also suggest:

• Page Up / Down (= ⬅️➡️)
• Escape (exit presentation mode)
• Space (= ➡️)

[disberd]

Thanks for the feedback @pankgeorg.

I will implement the additional shortcuts and remove the full screen detection. Unfortunately the fullscreen API was my first attempt but it only works reliably when full-screen is triggered programmatically (on windows F11 seems to be handled by OS so it does not trigger the event from the fullScreen API).

Regaring a short-cut to manually enter presentation mode, you got any suggestion on what key combination to use?
something F5 related would make it similar to powerpoint, but I think F5 behavior might be already something else in many use cases...

[fonsp]

Looks good @disberd ! What's left to finish this PR?

[disberd]

@fonsp what is your view on the activation method? In case we ditch full screen detection do you have suggestions on which key combination to use for triggering presentation mode?

[fonsp]

Let's merge the keyboard shortcuts and discuss the activation in a Discussion? I also think detection based on viewport height or the Fullscreen API are not working great, even though that would be very nice to use.

[disberd]

@fonsp OK, I'll clean up the code in the next days to remove the automatic full-screen detection

[disberd]

@fonsp this should be ready to go (removed the full screen detection and added shortcuts suggested by @pankgeorg)

[fonsp]

woohooo

look forward to the next react PR @disberd!

[fonsp]

the fullscreen detection was well implemented btw (with usestate and useeffect etc), just tricky with all the platforms behaving differently