Custom keyboard shortcuts

[beepsoft]

Is it possible to define custom keyboard shortcuts for navigating left, right, play/pause video, etc?

My current workaround is to define a custom plugin so that I have access to useEvents(), handle keyboard events and then call publish(ACTION_NEXT), publish(ACTION_PREV) and the like.

Is there a better solution? Even with this plugin approach I couldn't find a way to add keyboard shortcuts for video play/pause.

[igordanchenko]

Hi there!

While there is no dedicated feature for defining custom shortcuts, it sounds like you are on the right track here. However, instead of the useEvents hook, I'd suggest using useController hook's prev, next and subscribeSensors methods.

Can you give me an example for the custom prev / next shortcuts? (just trying to understand the use case here)

As to the video slides playback, I can look into exposing video plugin ref with play, pause methods. Is that what you are looking for? By the way, what kind of keyboard shortcut are you looking to implement for video playback?

[igordanchenko]

Thank you for providing the additional details. Custom plugin is definitely the right approach in your case. Here is the implementation you can use for the time being.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-200-zqqj8k?file=%2Fsrc%2FNavigation.tsx

[beepsoft]

This is great, thank you @igordanchenko!

One thing: how can I pass props to NavigationComponent from the App component? I want to make the shortcuts configurable but defaulting to this 7-9 combo.

[igordanchenko]

You can add your own custom lightbox prop.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-200-8r5tx8?file=%2Fsrc%2FNavigation.tsx

[beepsoft]

Thank you so much! Authoring modules doesn't seem trivial. It would be great to have some description about them in the docs. Anyways, amazing how much yarl can be extended and customized, thanks for your work and help!

[igordanchenko]

There are some minimal examples in the documentation showing how to create a plugin with custom module - https://yet-another-react-lightbox.com/advanced

Please feel free to propose edits to make the documentation more clear. PRs are always welcome 🤝