feat(xgplayer): 修改旋转全屏的实现

bytedance · Jul 24, 2023 · 4935b57 · 4935b57
1 parent b66df52
commit 4935b57
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/fixtures/xgplayer/index.html b/fixtures/xgplayer/index.html
@@ -6,14 +6,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-    <!-- <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
+    <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
   <script>
     var ua = navigator.userAgent.toLowerCase()
     console.log('ua', ua, (ua.indexOf('mobile') > -1 || ua.indexOf('ipad') > -1) && location.href.indexOf('vconsole=1') > -1)
     if ((ua.indexOf('mobile') > -1 || ua.indexOf('ipad') > -1) && location.href.indexOf('vconsole=1') > -1) {
       var vConsole = new window.VConsole();
     }
-  </script> -->
+  </script>
     <style>
       .pannel {
         margin: 20px 0;
@@ -90,5 +90,10 @@ <h4>log info:</h4>
     </div>
     <script></script>
     <script type="module" defer src="./index.js"></script>
+    <script>
+      // window.onload = function(){
+      //   window.initPlayer()
+      // }
+    </script>
   </body>
 </html>
diff --git a/fixtures/xgplayer/index.js b/fixtures/xgplayer/index.js
@@ -4,6 +4,7 @@ import Player, { SimplePlayer } from '../../packages/xgplayer/src/index'
 import { TextTrack } from '../../packages/xgplayer/src/index'
 import { I18N } from '../../packages/xgplayer/src'
 // import DynamicBg from '../../packages/xgplayer/src/plugins/dynamicBg'
+console.log('vconsole')
 window.POS = {
   "h": 0.40625,
   "y": 0.1899999976158142
@@ -54,6 +55,9 @@ function init(index = 0, config = {}) {
     //   // mode: 'normal',
     //   // initShow: true
     // },
+    fullscreen: {
+      rotateFullscreen: true
+    },
     progress: {
       // root: document.getElementById('controls0')
     },
@@ -298,7 +302,7 @@ window.clearLog = clearLog
 window.addLog = addLog
 window.playNext = playNext
 window.destroy = destroy
-window.init = init
+window.initPlayer = init
 window.createDot = (index) => {
   const player = window[`player${index}`]
   const time = parseInt(Math.random(1) * player.duration, 10)

diff --git a/packages/xgplayer/src/player.js b/packages/xgplayer/src/player.js
@@ -1523,6 +1523,9 @@ class Player extends MediaProxy {
     this.isRotateFullscreen = true
     this.fullscreen = true
     this.setRotateDeg(90)
+    console.log('>>>getRotateFullscreen', `innerWidth: ${window.innerWidth} innerHeight:${window.innerHeight} clientWidth:${ window.screen.width}  availHeight:${window.screen.availHeight}  offsetHeight:${document.body.offsetHeight} ${window.innerHeight / window.screen.height}`)
+    this._rootStyle = this.root.getAttribute('style')
+    this.root.style.width = `${window.innerHeight}px`
     this.emit(Events.FULLSCREEN_CHANGE, true)
   }
 
@@ -1545,6 +1548,10 @@ class Player extends MediaProxy {
     this.fullscreen = false
     this.setRotateDeg(0)
     this.emit(Events.FULLSCREEN_CHANGE, false)
+    if (this._rootStyle) {
+      this.root.style.style = this._rootStyle
+      this._rootStyle = false
+    }
   }
 
   setRotateDeg (deg) {

diff --git a/packages/xgplayer/src/style/common.scss b/packages/xgplayer/src/style/common.scss
@@ -39,9 +39,9 @@
     height: 100%;
     transform: rotate(0);
   }
-  &.xgplayer-mobile {
-    width: 90%;
-  }
+  // &.xgplayer-mobile {
+  //   width: 90%;
+  // }
   .xgplayer-mobile {
     video {
       z-index: -1;
@@ -118,9 +118,9 @@
     transform-origin: top left;
     transform: rotate(90deg);
     z-index: 9999;
-    &.xgplayer-mobile {
-      width: 90vh;
-    }
+    // &.xgplayer-mobile {
+    //   width: 90vh;
+    // }
     &.xgplayer-mobile video {
       z-index: -1;
     }