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/control/fullscreen.js

@@ -1,3 +1,4 @@
+import screenfull from '../libs/screenfull';
 import { append, tooltip, setStyle } from '../utils';
 
 export default function fullscreen(option) {
@@ -15,8 +16,8 @@ export default function fullscreen(option) {
                 art.fullscreen = !art.fullscreen;
             });
 
-            art.on('fullscreen', (value) => {
-                if (value) {
+            screenfull.on('change', () => {
+                if (art.fullscreen) {
                     tooltip($control, i18n.get('Exit Fullscreen'));
                     setStyle($fullscreenOn, 'display', 'none');
                     setStyle($fullscreenOff, 'display', 'inline-flex');

packages/artplayer/src/control/setting.js

@@ -11,6 +11,7 @@ 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

@@ -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);

packages/artplayer/src/style/bottom.less

@@ -36,8 +36,9 @@
                     display: flex;
                     align-items: center;
                     position: relative;
-                    height: 50%;
+                    height: 100%;
                     width: 100%;
+                    border-radius: 5px;
                     transition: all 0.2s ease;
                     background: rgba(255, 255, 255, 0.2);
 
@@ -50,6 +51,7 @@
                         bottom: 0;
                         height: 100%;
                         width: 0;
+                        border-radius: 3px;
                         background: rgba(255, 255, 255, 0.4);
                     }
 
@@ -62,6 +64,7 @@
                         bottom: 0;
                         height: 100%;
                         width: 0;
+                        border-radius: 3px;
                     }
 
                     .art-progress-highlight {
@@ -81,7 +84,7 @@
                             top: 0;
                             width: 7px;
                             height: 100%;
-                            background: #fff;
+                            background: rgba(255, 255, 255, 0.75);
                             pointer-events: auto;
                         }
                     }
@@ -131,10 +134,12 @@
             .art-control-thumbnails {
                 display: none;
                 position: absolute;
-                bottom: 8px;
+                bottom: 10px;
                 left: 0;
+                border-radius: 3px;
                 pointer-events: none;
                 background-color: rgba(0, 0, 0, 0.7);
+                box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
             }
 
             .art-control-loop {
@@ -190,7 +195,7 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                opacity: 0.9;
+                opacity: 0.75;
                 font-size: 12px;
                 min-height: 36px;
                 min-width: 36px;
@@ -198,6 +203,7 @@
                 text-align: center;
                 cursor: pointer;
                 white-space: nowrap;
+                transition: opacity 0.1s ease-in-out;
                 .art-icon {
                     display: flex;
                     align-items: center;
@@ -205,6 +211,11 @@
                     float: left;
                     height: 36px;
                     width: 36px;
+                    transform: scale(1);
+                    transition: transform 0.2s ease-in-out;
+                    &:active {
+                        transform: scale(0.85);
+                    }
                 }
                 &:hover {
                     opacity: 1;
@@ -291,7 +302,6 @@
 
         &:hover {
             .art-progress .art-control-progress .art-control-progress-inner {
-                height: 100%;
                 .art-progress-indicator {
                     transform: scale(1, 1);
                     visibility: visible;

packages/artplayer/src/style/setting.less

@@ -3,8 +3,8 @@
         display: none;
         position: absolute;
         z-index: 90;
-        right: 10px;
-        bottom: 50px;
+        left: 0;
+        bottom: 60px;
         height: auto;
         overflow: auto;
         font-size: 13px;

packages/artplayer/src/utils/component.js

@@ -122,6 +122,10 @@ export default class Component {
         append($list, list);
         append($ref, $list);
 
+        if (this.art.option.backdrop) {
+            addClass($list, 'art-backdrop-filter');
+        }
+
         const setLeft = () => {
             const left = getStyle($ref, 'width') / 2 - getStyle($list, 'width') / 2;
             $list.style.left = `${left}px`;