Merge pull request #21 from ghost-vk/master

Add iOS Safari Fullscreen support
LarchLiu · Mar 3, 2022 · 8e1bc84 · 8e1bc84
2 parents 7368ec6 + bddfe94
commit 8e1bc84
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/src/dashboard/fullscreen.vue b/src/dashboard/fullscreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!disable" class="vue-core-video-player-control">
+  <div class="vue-core-video-player-control">
     <div v-if="!fullscreen" class="btn-control btn-fullscreen" @click="enterFullscreen">
       <svg xmlns="http://www.w3.org/2000/svg" width="28" height="20" viewBox="0 0 28 20"><g fill="#fff"><g data-name="6 7"><g data-name="4 1"><path data-name="7" d="M16 0h10v2H16z"/><path data-name="8" d="M26 0h2v6h-2z"/></g><g data-name="5 1"><path data-name="9" d="M18 18h10v2H18z"/><path data-name="10" d="M26 14h2v6h-2z"/></g></g><g data-name="6 8"><g data-name="4 1"><path data-name="7" d="M12 20H2v-2h10z"/><path data-name="8" d="M2 20H0v-6h2z"/></g><g data-name="5 1"><path data-name="9" d="M10 2H0V0h10z"/><path data-name="10" d="M2 6H0V0h2z"/></g></g></g></svg>
       <div class="tips">{{$tvvp('dashboard.btn.fullscreen')}}</div>
@@ -14,7 +14,6 @@
 <script>
 // import EVENTS from '../constants/EVENTS'
 import coreMixins from '../mixins'
-import { isMobile, isApple } from '../helper/util'
 import { inject } from 'vue'
 
 export default {
@@ -31,11 +30,6 @@ export default {
   },
   created () {
     this._playerKey = this.playerKey
-  },
-  data () {
-    return {
-      disable: (isMobile && isApple)
-    }
   }
 }
 </script>

diff --git a/src/mixins.js b/src/mixins.js
@@ -2,6 +2,7 @@ import ee from 'event-emitter'
 import EVENTS from './constants/EVENTS'
 import * as types from './helper/type'
 import { addClass, removeClass, registerFullScreenChangeListener, registerResizeListener } from './helper/dom'
+import { isMobile, isApple } from './helper/util'
 // import eventBus from './helper/eve'
 // import { getVideoCore } from './core'
 const _ee = ee()
@@ -61,11 +62,15 @@ const mixins = {
         el.webkitRequestFullscreen()
       } else if (el.requestFullScreen) {
         el.requestFullscreen()
+      } else if (isMobile && isApple && el.firstChild?.webkitEnterFullscreen) {
+        el.firstChild.webkitEnterFullscreen()
       }
       this.fullscreen = true
     },
     cancelFullscreen () {
-      if (document.mozCancelFullScreen) {
+      if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen()
+      } else if (document.mozCancelFullScreen) {
         document.mozCancelFullScreen()
       } else if (document.webkitCancelFullScreen) {
         document.webkitCancelFullScreen()
@@ -75,7 +80,7 @@ const mixins = {
       this.fullscreen = false
     },
     getFullscreen () {
-      return (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)
+      return (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement && !document.webkitDisplayingFullscreen)
     },
     on (event, callback) {
       let eventId