Aliyundrive (#436)

* init

* init

* add example

* add initControl

* add initControl

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* update style

* build all

* build all

* update style

packages/artplayer/src/setting/index.js

@@ -9,6 +9,7 @@ import {
     append,
     addClass,
     setStyle,
+    isMobile,
     inverseClass,
     createElement,
     includeFromEvent,
@@ -342,6 +343,25 @@ export default class Setting extends Component {
         return $item;
     }
 
+    updateStyle(width) {
+        const {
+            controls,
+            constructor,
+            template: { $player, $setting },
+        } = this.art;
+
+        if (controls.setting && !isMobile) {
+            const { left: controlLeft, width: controlWidth } = controls.setting.getBoundingClientRect();
+            const { left: playerlLeft } = $player.getBoundingClientRect();
+            const settingLeft = controlLeft - playerlLeft + controlWidth / 2 - (width || constructor.SETTING_WIDTH) / 2;
+            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;
 
@@ -350,6 +370,7 @@ 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');
@@ -377,6 +398,7 @@ 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);