feat: Add getRect function to utils and update player and control modules to use it

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { setStyles, includeFromEvent, isMobile } from '../utils';
+import { setStyles, includeFromEvent, isMobile, getRect } from '../utils';
 import Component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
@@ -86,8 +86,8 @@ export default class Contextmenu extends Component {
 
             const mouseX = event.clientX;
             const mouseY = event.clientY;
-            const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = $player.getBoundingClientRect();
-            const { height: mHeight, width: mWidth } = $contextmenu.getBoundingClientRect();
+            const { height: cHeight, width: cWidth, left: cLeft, top: cTop } = getRect($player);
+            const { height: mHeight, width: mWidth } = getRect($contextmenu);
             let menuLeft = mouseX - cLeft;
             let menuTop = mouseY - cTop;
 

packages/artplayer/src/control/progress.js

@@ -1,8 +1,8 @@
-import { query, clamp, append, setStyle, secondToTime, includeFromEvent, isMobile } from '../utils';
+import { query, clamp, append, setStyle, secondToTime, includeFromEvent, isMobile, getRect } from '../utils';
 
 export function getPosFromEvent(art, event) {
     const { $progress } = art.template;
-    const { left } = $progress.getBoundingClientRect();
+    const { left } = getRect($progress);
     const eventLeft = isMobile ? event.touches[0].clientX : event.clientX;
     const width = clamp(eventLeft - left, 0, $progress.clientWidth);
     const second = (width / $progress.clientWidth) * art.duration;

packages/artplayer/src/control/volume.js

@@ -1,4 +1,4 @@
-import { append, setStyle, isMobile } from '../utils';
+import { append, setStyle, isMobile, getRect } from '../utils';
 
 export default function volume(option) {
     return (art) => ({
@@ -17,7 +17,7 @@ export default function volume(option) {
             const $indicator = append($slider, `<div class="art-volume-indicator"></div>`);
 
             function getVolumeFromEvent(event) {
-                const { top, height } = $slider.getBoundingClientRect();
+                const { top, height } = getRect($slider);
                 return 1 - (event.clientY - top) / height;
             }
 

packages/artplayer/src/player/autoSizeMix.js

@@ -1,4 +1,4 @@
-import { setStyle, def } from '../utils';
+import { setStyle, def, getRect } from '../utils';
 
 export default function resizeMix(art) {
     const { $container, $player, $video } = art.template;
@@ -6,7 +6,7 @@ export default function resizeMix(art) {
     def(art, 'autoSize', {
         value() {
             const { videoWidth, videoHeight } = $video;
-            const { width, height } = $container.getBoundingClientRect();
+            const { width, height } = getRect($container);
             const videoRatio = videoWidth / videoHeight;
             const containerRatio = width / height;
             if (containerRatio > videoRatio) {

packages/artplayer/src/player/miniMix.js

@@ -1,4 +1,4 @@
-import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport, createElement } from '../utils';
+import { append, setStyle, addClass, removeClass, hasClass, def, isInViewport, createElement, getRect } from '../utils';
 
 export default function miniMix(art) {
     const {
@@ -77,7 +77,7 @@ export default function miniMix(art) {
                 if (isDroging) {
                     isDroging = false;
                     removeClass($mini, 'art-mini-droging');
-                    const rect = $mini.getBoundingClientRect();
+                    const rect = getRect($mini);
                     storage.set('left', rect.left);
                     storage.set('top', rect.top);
                     setStyle($mini, 'left', `${rect.left}px`);
@@ -92,7 +92,7 @@ export default function miniMix(art) {
 
     function initMini() {
         const { $mini } = art.template;
-        const rect = $mini.getBoundingClientRect();
+        const rect = getRect($mini);
         const top = window.innerHeight - rect.height - 50;
         const left = window.innerWidth - rect.width - 50;
         storage.set('top', top);

packages/artplayer/src/player/rectMix.js

@@ -1,9 +1,9 @@
-import { def } from '../utils';
+import { def, getRect } from '../utils';
 
 export default function rectMix(art) {
     def(art, 'rect', {
         get: () => {
-            return art.template.$player.getBoundingClientRect();
+            return getRect(art.template.$player);
         },
     });
 

packages/artplayer/src/setting/index.js

@@ -8,6 +8,7 @@ import {
     def,
     has,
     append,
+    getRect,
     addClass,
     setStyle,
     isMobile,
@@ -399,8 +400,8 @@ export default class Setting extends Component {
 
         if (controls.setting && !isMobile) {
             const settingWidth = width || constructor.SETTING_WIDTH;
-            const { left: controlLeft, width: controlWidth } = controls.setting.getBoundingClientRect();
-            const { left: playerLeft, width: playerWidth } = $player.getBoundingClientRect();
+            const { left: controlLeft, width: controlWidth } = getRect(controls.setting);
+            const { left: playerLeft, width: playerWidth } = getRect($player);
             const settingLeft = controlLeft - playerLeft + controlWidth / 2 - settingWidth / 2;
             if (settingLeft + settingWidth > playerWidth) {
                 setStyle($setting, 'left', null);

packages/artplayer/src/utils/dom.js

@@ -113,3 +113,7 @@ export function supportsFlex() {
     div.style.display = 'flex';
     return div.style.display === 'flex';
 }
+
+export function getRect(el) {
+    return el.getBoundingClientRect();
+}