feat(index): add isPictureInPictureAvailable in return object

DawChihLiou · Aug 30, 2020 · 4c6f3c7 · 4c6f3c7
1 parent b0dd44a
commit 4c6f3c7
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@ function VideoPlayer() {
   const videoRef = useRef(null)
   const {
     isPictureInPictureActive,
+    isPictureInPictureAvailable,
     togglePictureInPicture,
   } = usePictureInPicture(videoRef)
 
@@ -46,9 +47,13 @@ function VideoPlayer() {
       <video ref={videoRef} autoPlay muted controls loop width="100%">
         <source src="video-sample.mp4" />
       </video>
-      <button onClick={() => togglePictureInPicture(!isPictureInPictureActive)}>
-        {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
-      </button>
+      {isPictureInPictureAvailable && (
+        <button
+          onClick={() => togglePictureInPicture(!isPictureInPictureActive)}
+        >
+          {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
+        </button>
+      )}
     </div>
   )
 }
@@ -59,6 +64,7 @@ function VideoPlayer() {
 ```ts
 const {
   isPictureInPictureActive,
+  isPictureInPictureAvailable,
   togglePictureInPicture,
 } = usePictureInPicture(videoRef, options)
 ```
@@ -71,6 +77,7 @@ const {
 ### Return Values
 
 - `isPictureInPictureActive = false`: `boolean` that signals whether picture in picture mode is active or inactive
+- `isPictureInPictureAvailable`: `boolean` that signals whether picture in picture mode is supported and enabled
 - `togglePictureInPicture(isActive: boolean) => void`: function that provide you toggle picture in picture mode
 
 ### Options (Optional)

diff --git a/example/public/DOC.md b/example/public/DOC.md
@@ -36,6 +36,7 @@ function VideoPlayer() {
   const videoRef = useRef(null)
   const {
     isPictureInPictureActive,
+    isPictureInPictureAvailable,
     togglePictureInPicture,
   } = usePictureInPicture(videoRef)
 
@@ -44,9 +45,13 @@ function VideoPlayer() {
       <video ref={videoRef} autoPlay muted controls loop width="100%">
         <source src="video-sample.mp4" />
       </video>
-      <button onClick={() => togglePictureInPicture(!isPictureInPictureActive)}>
-        {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
-      </button>
+      {isPictureInPictureAvailable && (
+        <button
+          onClick={() => togglePictureInPicture(!isPictureInPictureActive)}
+        >
+          {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
+        </button>
+      )}
     </div>
   )
 }
@@ -57,6 +62,7 @@ function VideoPlayer() {
 ```ts
 const {
   isPictureInPictureActive,
+  isPictureInPictureAvailable,
   togglePictureInPicture,
 } = usePictureInPicture(videoRef, options)
 ```
@@ -69,6 +75,7 @@ const {
 ### Return Values
 
 - `isPictureInPictureActive = false`: `boolean` that signals whether picture in picture mode is active or inactive
+- `isPictureInPictureAvailable`: `boolean` that signals whether picture in picture mode is supported and enabled
 - `togglePictureInPicture(isActive: boolean) => void`: function that provide you toggle picture in picture mode
 
 ### Options (Optional)

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -24,15 +24,15 @@ const App = () => {
   const videoRef = useRef<ExtendedHTMLVideoElement | null>(null)
   const {
     isPictureInPictureActive,
+    isPictureInPictureAvailable,
     togglePictureInPicture,
   } = usePictureInPicture(videoRef, {
     onEnterPictureInPicture: (e) => console.log('enter picture in picture', e),
     onLeavePictureInPicture: (e) => console.log('leave picture in picture', e),
   })
-
   const handleClick = () => togglePictureInPicture(!isPictureInPictureActive)
-
   const [markdown, setMarkdown] = useState<string>()
+
   useEffect(() => {
     fetchMarkdown(setMarkdown)
   }, [])
@@ -59,9 +59,17 @@ const App = () => {
           <source src="video-sample.mp4" />
         </video>
         <div className="action-row">
-          <button onClick={handleClick} className="control-button">
-            {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
-          </button>
+          {isPictureInPictureAvailable && (
+            <button onClick={handleClick} className="control-button">
+              {isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in
+              Picture
+            </button>
+          )}
+          {!isPictureInPictureAvailable && (
+            <p>
+              Picture in Picture feature API is not available in your browser.
+            </p>
+          )}
         </div>
         <ReactMarkdown source={markdown} renderers={{ code: CodeBlock }} />
       </div>

diff --git a/src/index.ts b/src/index.ts
@@ -14,17 +14,22 @@ export default function usePictureInPicture(
   videoRef: VideoRefType,
   options?: usePictureInPictureOptions
 ): usePictureInPictureReturnType {
-  const [isPictureInPictureActive, togglePictureInPicture] = useState<boolean>(
-    false
-  )
-
   const {
     onEnterPictureInPicture,
     onLeavePictureInPicture,
     onRequestPictureInPictureError,
     onExitPictureInPictureError,
   } = options || {}
 
+  const [isPictureInPictureActive, togglePictureInPicture] = useState<boolean>(
+    false
+  )
+
+  const [
+    isPictureInPictureAvailable,
+    setIsPictureInPictureAvailable,
+  ] = useState<boolean>(false)
+
   useEffect(() => {
     handlePictureInPicture(
       videoRef,
@@ -43,6 +48,13 @@ export default function usePictureInPicture(
     if (videoRef.current === null) {
       return
     }
+
+    setIsPictureInPictureAvailable(
+      (isWebkitPictureInPictureSupported(videoRef.current) ||
+        isPictureInPictureSupported()) &&
+        !isPictureInPictureDisabled(videoRef.current)
+    )
+
     if (
       onEnterPictureInPicture &&
       typeof onEnterPictureInPicture === 'function'
@@ -87,7 +99,11 @@ export default function usePictureInPicture(
     }
   }, [])
 
-  return { isPictureInPictureActive, togglePictureInPicture }
+  return {
+    isPictureInPictureActive,
+    isPictureInPictureAvailable,
+    togglePictureInPicture,
+  }
 }
 
 async function handlePictureInPicture(

diff --git a/src/types.ts b/src/types.ts
@@ -48,5 +48,6 @@ export interface usePictureInPictureOptions {
 
 export interface usePictureInPictureReturnType {
   isPictureInPictureActive: boolean
+  isPictureInPictureAvailable: boolean
   togglePictureInPicture: Dispatch<SetStateAction<boolean>>
 }