Merge branch 'fix_pip' into 'xgplayer-2'

fix(xgplayer): 修复ios下pip和全屏冲突问题 See merge request toutiao-fe-arch/xgplayer!41
djun · Oct 13, 2021 · 0f45993 · 0f45993
2 parents c8450bf + 6cd1187
commit 0f45993
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 12 deletions.
diff --git a/packages/xgplayer/src/controls/fullscreen.js b/packages/xgplayer/src/controls/fullscreen.js
@@ -1,12 +1,12 @@
-import { hasClass, addClass, removeClass } from '../utils/util'
+import { hasClass, addClass, removeClass, PresentationMode, checkWebkitSetPresentationMode } from '../utils/util'
 
 let fullscreen = function () {
   let player = this
   let root = player.root
 
   function onFullscreenBtnClick () {
-    if(player.config.rotateFullscreen) {
-      if(hasClass(root, 'xgplayer-rotate-fullscreen')) {
+    if (player.config.rotateFullscreen) {
+      if (hasClass(root, 'xgplayer-rotate-fullscreen')) {
         player.exitRotateFullscreen()
       } else {
         player.getRotateFullscreen()
@@ -30,29 +30,45 @@ let fullscreen = function () {
       removeClass(root, 'xgplayer-is-fullscreen')
       player.emit('exitFullscreen')
     }
-    if(player.danmu && typeof player.danmu.resize === 'function') {
+    if (player.danmu && typeof player.danmu.resize === 'function') {
       player.danmu.resize()
     }
   };
   ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(item => {
     document.addEventListener(item, onFullscreenChange)
   })
 
-  player.video.addEventListener("webkitbeginfullscreen", function(){
+  player.video.addEventListener('webkitbeginfullscreen', function () {
     addClass(root, 'xgplayer-is-fullscreen')
     player.emit('requestFullscreen')
   })
 
-  player.video.addEventListener("webkitendfullscreen", function(){
+  player.video.addEventListener('webkitendfullscreen', function () {
     removeClass(root, 'xgplayer-is-fullscreen')
     player.emit('exitFullscreen')
   })
 
+  function onWebkitpresentationmodechanged (e) {
+    const mode = player.video.webkitPresentationMode
+    // 非全屏模式 退出全屏
+    if (mode !== PresentationMode.FULLSCREEN) {
+      removeClass(root, 'xgplayer-is-fullscreen')
+      player.emit('exitFullscreen')
+    }
+  }
+
+  checkWebkitSetPresentationMode(player.video) &&
+  player.video.addEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
+
   function onDestroy () {
     player.off('fullscreenBtnClick', onFullscreenBtnClick);
     ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(item => {
       document.removeEventListener(item, onFullscreenChange)
     })
+
+    checkWebkitSetPresentationMode(player.video) &&
+    player.video.removeEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
+
     player.off('destroy', onDestroy)
   }
   player.once('destroy', onDestroy)
@@ -126,4 +142,4 @@ let fullscreen = function () {
 export default {
   name: 'fullscreen',
   method: fullscreen
-}
+}
diff --git a/packages/xgplayer/src/controls/pip.js b/packages/xgplayer/src/controls/pip.js
@@ -1,30 +1,50 @@
+
+import { PresentationMode, checkWebkitSetPresentationMode } from '../utils/util'
+
 let pip = function () {
   let player = this
   function onPipBtnClick () {
     if (player.video !== document.pictureInPictureElement) {
-      player.video.requestPictureInPicture();
+      player.video.requestPictureInPicture()
     } else {
-      document.exitPictureInPicture();
+      document.exitPictureInPicture()
     }
   }
   player.on('pipBtnClick', onPipBtnClick)
 
-  player.video.addEventListener("enterpictureinpicture", function(pipWindow){
+  const onWebkitpresentationmodechanged = (e) => {
+    const mode = player.video.webkitPresentationMode
+    this.pMode = mode
+    if (mode === PresentationMode.PIP) {
+      // 进入pip模式
+      player.emit('requestPictureInPicture', e.pictureInPictureWindow)
+    } else if (mode === PresentationMode.INLINE) {
+      // 退出pip，进去inline模式
+      player.emit('exitPictureInPicture')
+    }
+  }
+
+  player.video.addEventListener('enterpictureinpicture', function (pipWindow) {
     player.emit('requestPictureInPicture', pipWindow)
   })
 
-  player.video.addEventListener("leavepictureinpicture", function(){
+  player.video.addEventListener('leavepictureinpicture', function () {
     player.emit('exitPictureInPicture')
   })
 
+  checkWebkitSetPresentationMode(player.video) &&
+  player.video.addEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
+
   function onDestroy () {
     player.off('pipBtnClick', onPipBtnClick)
     player.off('destroy', onDestroy)
+    checkWebkitSetPresentationMode(player.video) &&
+    player.video.removeEventListener('webkitpresentationmodechanged', onWebkitpresentationmodechanged)
   }
   player.once('destroy', onDestroy)
 }
 
 export default {
   name: 'pip',
   method: pip
-}
+}
diff --git a/packages/xgplayer/src/utils/util.js b/packages/xgplayer/src/utils/util.js
@@ -340,8 +340,19 @@ export function setStyle(elem, name, value) {
   }
 }
 
+export const PresentationMode = {
+  PIP: 'picture-in-picture',
+  INLINE: 'inline',
+  FULLSCREEN: 'fullscreen'
+}
+
+export function checkWebkitSetPresentationMode (video) {
+  return typeof video.webkitSetPresentationMode === 'function'
+}
+
 export const util = {
   createDom, hasClass, addClass, removeClass, toggleClass, findDom, padStart, format, event, typeOf, 
   deepCopy, getBgImage, copyDom, setInterval: _setInterval, clearInterval: _clearInterval, createImgBtn, isWeiXin, isUc, computeWatchDur,
   offInDestroy, on, once, getBuffered2, checkIsBrowser, setStyle
 }
+