I have a ref that contains a method that turns window into full screen. However, this method name changes depending the browser:
const setFullscreen = () => {
if (!elRef.current) return;
elRef.current
.requestFullscreen() // webkitRequestFullScreen on Safari
.then(() => {
setIsFullscreen(document[getBrowserFullScreenElementProp()] != null);
})
.catch(() => {
setIsFullscreen(false);
});
};
As you can see, Safari uses webkitRequestFullscreen, so the above code doesn't work in Safari.
How can I make the code work keeping it DRY? Found something similar here (link) but it won't help keeping it DRY.
I was thinking in something like:
const requestFullScreen = elRef.current.requestFullscreen || elRef.current.webkitRequestFullscreen;
requestFullScreen().then .... more
However this doesn't invoke the method in neither of the browsers.
Probably You need to bind method to the target before calling it:
const requestFullScreen = (elRef.current.requestFullscreen || elRef.current.webkitRequestFullscreen).bind(elRef.current);
requestFullScreen().then .... more
You can also add the failsafe with || () => {} at the end to not crash when both requestFullscreen and webkitRequestFullscreen do not exist:
const requestFullScreen = (elRef.current.requestFullscreen || elRef.current.webkitRequestFullscreen || () => {}).bind(elRef.current);
requestFullScreen().then .... more