archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-18 14:06:52 +00:00
Code Issues Projects Releases Wiki Activity

fix: consistent refs in useFullscreen hook

Browse Source
This commit is contained in:
Va Da 2019-03-30 09:24:54 +01:00 committed by GitHub
commit dc85499696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/__stories__/useFullscreen.story.tsx
View File

@ -7,7 +7,10 @@ const Demo = () => {
const [show, toggle] = useToggle(false);
const ref = React.useRef(null)
const videoRef = React.useRef(null)
const isFullScreen = useFullscreen(ref, show, {onClose: () => toggle(false)});
const isFullScreen = useFullscreen(ref, show, {
onClose: () => toggle(false),
video: videoRef
});
const controls = (
<div style={{background: 'white', padding: '20px'}}>

24
src/useFullscreen.ts
View File

@ -2,7 +2,7 @@ import {useLayoutEffect, RefObject, useState} from 'react';
import screenfull from 'screenfull';
export interface FullScreenOptions {
video?: HTMLVideoElement;
video?: RefObject<HTMLVideoElement>;
onClose?: (error?: Error) => void;
}
@ -17,7 +17,7 @@ const useFullscreen = (ref: RefObject<Element>, on: boolean, options: FullScreen
if (!ref.current) return;
const onWebkitEndFullscreen = () => {
video!.removeEventListener('webkitendfullscreen', onWebkitEndFullscreen);
video!.current!.removeEventListener('webkitendfullscreen', onWebkitEndFullscreen);
onClose();
};
@ -40,15 +40,13 @@ const useFullscreen = (ref: RefObject<Element>, on: boolean, options: FullScreen
setIsFullscreen(false);
}
screenfull.on('change', onChange);
} else if (video && video.current && video.current.webkitEnterFullscreen) {
video.current.webkitEnterFullscreen();
video.current.addEventListener('webkitendfullscreen', onWebkitEndFullscreen);
setIsFullscreen(true);
} else {
if (video && video.webkitEnterFullscreen) {
video.webkitEnterFullscreen();
video.addEventListener('webkitendfullscreen', onWebkitEndFullscreen);
setIsFullscreen(true);
} else {
onClose();
setIsFullscreen(false);
}
onClose();
setIsFullscreen(false);
}
return () => {
@ -58,9 +56,9 @@ const useFullscreen = (ref: RefObject<Element>, on: boolean, options: FullScreen
screenfull.off('change', onChange);
screenfull.exit();
} catch {}
} else if (video && video.webkitExitFullscreen) {
video.removeEventListener('webkitendfullscreen', onWebkitEndFullscreen);
video.webkitExitFullscreen();
} else if (video && video.current && video.current.webkitExitFullscreen) {
video.current.removeEventListener('webkitendfullscreen', onWebkitEndFullscreen);
video.current.webkitExitFullscreen();
}
}
}, [ref.current, video, on]);