muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.83k stars 76 forks source link

Ability to double-click to go fullscreen #1020

Open rlaphoenix opened 3 weeks ago

rlaphoenix commented 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.