feat(xgplayer): 修复position异常问题

bytedance · Jul 21, 2023 · b66df52 · b66df52
1 parent c4d5200
commit b66df52
Showing 1 changed file with 13 additions and 17 deletions.
diff --git a/packages/xgplayer/src/player.js b/packages/xgplayer/src/player.js
@@ -212,8 +212,8 @@ class Player extends MediaProxy {
       y: 0,
       h: -1, // 高度占比
       w: -1, // 宽度占比
-      vy: -1, // 画面在y方向的偏移
-      vx: -1 // 画面在x方向的偏移
+      vy: 0, // 画面在y方向的偏移
+      vx: 0 // 画面在x方向的偏移
     }
 
     /**
@@ -1979,32 +1979,28 @@ class Player extends MediaProxy {
     let offsetX = 0
     let scale = 1
     const _t = Math.abs(rotate / 90)
+    const { root, innerContainer } = this
+    const width = root.offsetWidth
+    const height = innerContainer ? innerContainer.offsetHeight : root.offsetHeight
+    let rHeight = height
+    let rWidth = width
     if (_t % 2 === 0) {
       scale = h > 0 ? 100 / h : (w > 0 ? 100 / w : 1)
       _pos.scale = scale
       offsetY = vy > 0 ? (100 - h) / 2 - vy : 0
       _pos.y = _t === 2 ? 0 - offsetY : offsetY
       offsetX = vx > 0 ? (100 - w) / 2 - vx : 0
       _pos.x = _t === 2 ? 0 - offsetX : offsetX
-      this.media.style.width = '100%'
-      this.media.style.height = '100%'
+      this.media.style.width = `${rWidth}px`
+      this.media.style.height = `${rHeight}px`
     } else if (_t % 2 === 1) {
-      const { root, innerContainer } = this
-      const width = root.offsetWidth
-      const height = innerContainer ? innerContainer.offsetHeight : root.offsetHeight
-      const pi1 = width / height * 100
-      const rWidth = height
-      const rHeight = width
+      rWidth = height
+      rHeight = width
       const offset = height - width
       offsetX = -offset / 2 / rWidth * 100
-      _pos.x = _t === 3 ? offsetX + vy : offsetX - vy
+      _pos.x = _t === 3 ? offsetX + vy / 2 : offsetX - vy / 2
       offsetY = offset / 2 / rHeight * 100
-      _pos.y = _t === 3 ? offsetY + vx : offsetY - vx
-      if (this.videoPos.pi < pi1) {
-        scale = rWidth / this.videoPos.pi * 100 / rHeight
-      } else {
-        scale = rHeight * this.videoPos.pi / 100 / rWidth
-      }
+      _pos.y = _t === 3 ? offsetY + vx / 2 : offsetY - vx / 2
       _pos.scale = scale
       this.media.style.width = `${rWidth}px`
       this.media.style.height = `${rHeight}px`