From 5b18e1d5a7184515de0c929d734250f56479b325 Mon Sep 17 00:00:00 2001
From: Ward Oosterlijnck <wardoosterlijnck@gmail.com>
Date: Sat, 30 Mar 2019 16:23:51 +1100
Subject: [PATCH 1/2] Fix video ref in useFullscreen demo

---
 src/__stories__/useFullscreen.story.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/__stories__/useFullscreen.story.tsx b/src/__stories__/useFullscreen.story.tsx
index bc55e401..488432f5 100644
--- a/src/__stories__/useFullscreen.story.tsx
+++ b/src/__stories__/useFullscreen.story.tsx
@@ -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.current
+  });
 
   const controls = (
     <div style={{background: 'white', padding: '20px'}}>

From f5aa7a33d9d37d338085cca6f5083612fdf592ab Mon Sep 17 00:00:00 2001
From: Ward Oosterlijnck <wardoosterlijnck@gmail.com>
Date: Sat, 30 Mar 2019 16:26:00 +1100
Subject: [PATCH 2/2] useFullscreen expect video ref instead of video element

---
 src/__stories__/useFullscreen.story.tsx |  2 +-
 src/useFullscreen.ts                    | 24 +++++++++++-------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/__stories__/useFullscreen.story.tsx b/src/__stories__/useFullscreen.story.tsx
index 488432f5..dcfab63b 100644
--- a/src/__stories__/useFullscreen.story.tsx
+++ b/src/__stories__/useFullscreen.story.tsx
@@ -9,7 +9,7 @@ const Demo = () => {
   const videoRef = React.useRef(null)
   const isFullScreen = useFullscreen(ref, show, {
     onClose: () => toggle(false),
-    video: videoRef.current
+    video: videoRef
   });
 
   const controls = (
diff --git a/src/useFullscreen.ts b/src/useFullscreen.ts
index cd5c21d6..b6c91424 100644
--- a/src/useFullscreen.ts
+++ b/src/useFullscreen.ts
@@ -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]);