fix(useFullscreen): browser support, close vitest-dev#287

chaii3 · Jan 13, 2021 · bdc2005 · bdc2005
1 parent 4bff96f
commit bdc2005
Showing 1 changed file with 81 additions and 4 deletions.
diff --git a/packages/core/useFullscreen/index.ts b/packages/core/useFullscreen/index.ts
@@ -4,6 +4,61 @@ import { MaybeRef } from '@vueuse/shared'
 import { ref } from 'vue-demi'
 import { ConfigurableDocument, defaultDocument } from '../_configurable'
 
+type FunctionMap = [
+  'requestFullscreen',
+  'exitFullscreen',
+  'fullscreenElement',
+  'fullscreenEnabled',
+  'fullscreenchange',
+  'fullscreenerror',
+]
+
+// from: https://github.com/sindresorhus/screenfull.js/blob/master/src/screenfull.js
+const functionsMap: FunctionMap[] = [
+  [
+    'requestFullscreen',
+    'exitFullscreen',
+    'fullscreenElement',
+    'fullscreenEnabled',
+    'fullscreenchange',
+    'fullscreenerror',
+  ],
+  // New WebKit
+  [
+    'webkitRequestFullscreen',
+    'webkitExitFullscreen',
+    'webkitFullscreenElement',
+    'webkitFullscreenEnabled',
+    'webkitfullscreenchange',
+    'webkitfullscreenerror',
+  ],
+  // Old WebKit
+  [
+    'webkitRequestFullScreen',
+    'webkitCancelFullScreen',
+    'webkitCurrentFullScreenElement',
+    'webkitCancelFullScreen',
+    'webkitfullscreenchange',
+    'webkitfullscreenerror',
+  ],
+  [
+    'mozRequestFullScreen',
+    'mozCancelFullScreen',
+    'mozFullScreenElement',
+    'mozFullScreenEnabled',
+    'mozfullscreenchange',
+    'mozfullscreenerror',
+  ],
+  [
+    'msRequestFullscreen',
+    'msExitFullscreen',
+    'msFullscreenElement',
+    'msFullscreenEnabled',
+    'MSFullscreenChange',
+    'MSFullscreenError',
+  ],
+] as any
+
 /**
  * Reactive Fullscreen API.
  *
@@ -18,19 +73,40 @@ export function useFullscreen(
   const { document = defaultDocument } = options
   const targetRef = ref(target || document?.querySelector('html'))
   const isFullscreen = ref(false)
+  let isSupported = false
+
+  let map: FunctionMap
+
+  if (!document) {
+    isSupported = false
+  }
+  else {
+    for (const m of functionsMap) {
+      if (m[1] in document) {
+        map = m
+        isSupported = true
+        break
+      }
+    }
+  }
 
   async function exit() {
-    if (document?.fullscreenElement)
-      await document.exitFullscreen()
+    if (!isSupported)
+      return
+    if (document?.[map[2]]) // fullscreenElement
+      await document[map[1]]() // exit
 
     isFullscreen.value = false
   }
 
   async function enter() {
-    exit()
+    if (!isSupported)
+      return
+
+    await exit()
 
     if (targetRef.value) {
-      await targetRef.value.requestFullscreen()
+      await targetRef.value![map[0]]() // requestFullScreen
       isFullscreen.value = true
     }
   }
@@ -43,6 +119,7 @@ export function useFullscreen(
   }
 
   return {
+    isSupported,
     isFullscreen,
     enter,
     exit,