remove updateStyle

packages/artplayer/src/control/setting.js

@@ -11,7 +11,6 @@ export default function setting(option) {
 
             proxy($control, 'click', () => {
                 art.setting.toggle = true;
-                art.setting.updateStyle();
             });
 
             art.on('setting', (value) => {

packages/artplayer/src/setting/index.js

@@ -353,31 +353,6 @@ export default class Setting extends Component {
         return $item;
     }
 
-    updateStyle(width) {
-        const {
-            controls,
-            constructor,
-            template: { $player, $setting },
-        } = this.art;
-
-        if (controls.setting) {
-            const settingWidth = width || constructor.SETTING_WIDTH;
-            const { left: controlLeft, width: controlWidth } = controls.setting.getBoundingClientRect();
-            const { left: playerLeft, width: playerWidth } = $player.getBoundingClientRect();
-            const settingLeft = controlLeft - playerLeft + controlWidth / 2 - settingWidth / 2;
-            if (settingLeft + settingWidth > playerWidth) {
-                setStyle($setting, 'left', 'auto');
-                setStyle($setting, 'right', '10px');
-            } else {
-                setStyle($setting, 'left', `${settingLeft}px`);
-                setStyle($setting, 'right', 'auto');
-            }
-        } else {
-            setStyle($setting, 'left', 'auto');
-            setStyle($setting, 'right', '10px');
-        }
-    }
-
     init(option, width) {
         const { constructor } = this.art;
 
@@ -386,7 +361,6 @@ export default class Setting extends Component {
             inverseClass($panel, 'art-current');
             setStyle(this.$parent, 'width', `${$panel.dataset.width}px`);
             setStyle(this.$parent, 'height', `${$panel.dataset.height}px`);
-            this.updateStyle(Number($panel.dataset.width));
         } else {
             const $panel = createElement('div');
             addClass($panel, 'art-setting-panel');
@@ -414,7 +388,6 @@ export default class Setting extends Component {
             inverseClass($panel, 'art-current');
             setStyle(this.$parent, 'width', `${$panel.dataset.width}px`);
             setStyle(this.$parent, 'height', `${$panel.dataset.height}px`);
-            this.updateStyle(Number($panel.dataset.width));
 
             if (option[0] && option[0].$parentItem && option[0].$parentItem.mounted) {
                 option[0].$parentItem.mounted.call(this.art, $panel, option[0].$parentItem);

packages/artplayer/src/style/bottom.less

@@ -8,7 +8,7 @@
         gap: var(--art-bottom-gap);
         bottom: var(--art-bottom-offset);
         height: var(--art-bottom-height);
-        padding: 0 10px;
+        padding: 0 var(--art-bottom-padding);
         opacity: 0;
         pointer-events: none;
         transition: all var(--art-duration) ease;

packages/artplayer/src/style/plugins.less

@@ -23,7 +23,7 @@
         gap: 10px;
         align-items: center;
         position: absolute;
-        left: 10px;
+        left: var(--art-bottom-padding);
         border-radius: 3px;
         padding: 10px;
         line-height: 1;

packages/artplayer/src/style/setting.less

@@ -4,7 +4,7 @@
         flex-direction: column;
         position: absolute;
         z-index: 90;
-        left: 0;
+        right: var(--art-bottom-padding);
         overflow: hidden;
         border-radius: 3px;
         bottom: var(--art-control-height);

packages/artplayer/src/style/variables.less

@@ -10,6 +10,7 @@
     --art-bottom-height: 100px;
     --art-bottom-offset: -20px;
     --art-bottom-gap: 5px;
+    --art-bottom-padding: 10px;
     --art-progress-height: 6px;
     --art-highlight-width: 8px;
     --art-loop-width: 2px;