Tengo una referencia que contiene un método que convierte la ventana en pantalla completa. Sin embargo, el nombre de este método cambia según el navegador:
const setFullscreen = () => { if (!elRef.current) return; elRef.current .requestFullscreen() // webkitRequestFullScreen on Safari .then(() => { setIsFullscreen(document[getBrowserFullScreenElementProp()] != null); }) .catch(() => { setIsFullscreen(false); }); }; Como puede ver, Safari usa webkitRequestFullscreen , por lo que el código anterior no funciona en Safari.
¿Cómo puedo hacer que el código funcione manteniéndolo DRY ? Encontré algo similar aquí ( enlace ) pero no ayudará a mantenerlo SECO.
Estaba pensando en algo como:
const requestFullScreen = elRef.current.requestFullscreen || elRef.current.webkitRequestFullscreen; requestFullScreen().then .... moreSin embargo, esto no invoca el método en ninguno de los navegadores.
Probablemente necesite vincular el método al objetivo antes de llamarlo:
const requestFullScreen = (elRef.current.requestFullscreen || elRef.current.webkitRequestFullscreen).bind(elRef.current); requestFullScreen().then .... more También puede agregar el mecanismo de seguridad con || () => {} al final para no fallar cuando requestFullscreen y webkitRequestFullscreen no existen:
const requestFullScreen = (elRef.current.requestFullscreen || elRef.current.webkitRequestFullscreen || () => {}).bind(elRef.current); requestFullScreen().then .... more