Open rlaphoenix opened 3 weeks ago
This would be a very handy feature. I currently have it implemented as follows:
/* double-click-fullscreen.js */ import { useMediaDispatch, useMediaSelector, MediaActionTypes } from "media-chrome/react/media-store" export default function useDoubleClickFullscreen() { /** * An onClick handler to enter/exit fullscreen on double-click. */ const dispatch = useMediaDispatch() const isFullscreen = useMediaSelector(state => state.mediaIsFullscreen) return e => { if (e.detail === 2) { const type = isFullscreen ? MediaActionTypes.MEDIA_EXIT_FULLSCREEN_REQUEST : MediaActionTypes.MEDIA_ENTER_FULLSCREEN_REQUEST dispatch({ type }) } } }
/* where <video> is */ <video ref={el => { ref.current = el mediaRef(el) }} autoPlay crossOrigin="anonymous" slot="media" onClick={useDoubleClickFullscreen()} /*...*/
If your <video> already has an onClick handler, then just include it in that and rework the hook to be able to pass the event variable into it.
<video>
This would be a very handy feature. I currently have it implemented as follows:
If your
<video>
already has an onClick handler, then just include it in that and rework the hook to be able to pass the event variable into it.