fix: 🐛 修复rotate插件，在video设置maxWidth时，样式计算错误的问题

bytedance · Dec 23, 2024 · ba3b749 · ba3b749
1 parent c53061c
commit ba3b749
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/packages/xgplayer/src/player.js b/packages/xgplayer/src/player.js
@@ -2109,17 +2109,21 @@ class Player extends MediaProxy {
     const { root, innerContainer } = this
     const width = root.offsetWidth
     const height = innerContainer ? innerContainer.offsetHeight : root.offsetHeight
+    const styles = {}
     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 = `${rWidth}px`
-      this.media.style.height = `${rHeight}px`
+      styles.width = `${rWidth}px`
+      styles.height = `${rHeight}px`
+      styles.maxWidth = ''
+      styles.maxHeight = ''
     } else if (_t % 2 === 1) {
       rWidth = height
       rHeight = width
@@ -2129,12 +2133,18 @@ class Player extends MediaProxy {
       offsetY = offset / 2 / rHeight * 100
       _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`
+      styles.width = `${rWidth}px`
+      styles.maxWidth = `${rWidth}px`
+      styles.height = `${rHeight}px`
+      styles.maxHeight = `${rHeight}px`
     }
     const formStyle = Util.getTransformStyle(_pos, this.media.style.transform || this.media.style.webkitTransform)
-    this.media.style.transform = formStyle
-    this.media.style.webkitTransform = formStyle
+    styles.transform = formStyle
+    styles.webkitTransform = formStyle
+
+    Object.keys(styles).map(key => {
+      this.media.style[key] = styles[key]
+    })
   }
 
   /**