V5 (#509)

* update artplayer.d.ts

* update variables.less

* update artplayerPluginControl

* build:all

* update docs

* update docs

* update docs

* Update layers.md

* update index.js

* update docs

* update docs

packages/artplayer/src/index.js

@@ -33,10 +33,7 @@ export default class Artplayer extends Emitter {
         this.id = ++id;
 
         const mergeOption = utils.mergeDeep(Artplayer.option, option);
-
-        if (option.container instanceof Element) {
-            mergeOption.container = option.container;
-        }
+        mergeOption.container = option.container;
 
         this.option = validator(mergeOption, scheme);
 

packages/artplayer/src/setting/aspectRatio.js

@@ -19,12 +19,14 @@ export default function aspectRatio(art) {
 
     return {
         width: SETTING_ITEM_WIDTH,
+        name: 'aspect-ratio',
         html: i18n.get('Aspect Ratio'),
         icon: icons.aspectRatio,
         tooltip: getI18n(art.aspectRatio),
         selector: ASPECT_RATIO.map((item) => {
             return {
                 value: item,
+                name: `aspect-ratio-${item}`,
                 default: item === art.aspectRatio,
                 html: getI18n(item),
             };

packages/artplayer/src/setting/flip.js

@@ -15,12 +15,14 @@ export default function flip(art) {
 
     return {
         width: SETTING_ITEM_WIDTH,
+        name: 'flip',
         html: i18n.get('Video Flip'),
         tooltip: i18n.get(capitalize(art.flip)),
         icon: icons.flip,
         selector: FLIP.map((item) => {
             return {
                 value: item,
+                name: `aspect-ratio-${item}`,
                 default: item === art.flip,
                 html: i18n.get(capitalize(item)),
             };

packages/artplayer/src/setting/index.js

@@ -3,6 +3,7 @@ import aspectRatio from './aspectRatio';
 import playbackRate from './playbackRate';
 import subtitleOffset from './subtitleOffset';
 import Component from '../utils/component';
+import { errorHandle } from '../utils/error';
 import {
     def,
     has,
@@ -10,7 +11,6 @@ import {
     addClass,
     setStyle,
     isMobile,
-    mergeDeep,
     inverseClass,
     createElement,
     includeFromEvent,
@@ -35,7 +35,7 @@ export default class Setting extends Component {
         this.cache = new Map();
 
         if (option.setting) {
-            this.update(option.settings);
+            this.init();
 
             art.on('blur', () => {
                 if (this.show) {
@@ -88,7 +88,15 @@ export default class Setting extends Component {
         return result;
     }
 
-    remove() {
+    init() {
+        const { option } = this.art;
+        const mergeSettings = [...this.defaultSettings, ...option.settings];
+        this.option = Setting.makeRecursion(mergeSettings);
+        this.destroy();
+        this.render(this.option);
+    }
+
+    destroy() {
         for (let index = 0; index < this.events.length; index++) {
             this.art.events.remove(this.events[index]);
         }
@@ -97,20 +105,46 @@ export default class Setting extends Component {
         this.cache = new Map();
     }
 
-    update(settings) {
-        this.remove();
-        const settingsCopy = settings.map((item) => mergeDeep({}, item));
-        const mergeSettings = [...this.defaultSettings, ...settingsCopy];
-        this.option = Setting.makeRecursion(mergeSettings);
+    find(name = '', option = this.option) {
+        for (let index = 0; index < option.length; index++) {
+            const item = option[index];
+            if (item.name === name) {
+                return item;
+            } else {
+                const result = this.find(name, item.selector || []);
+                if (result) return result;
+            }
+        }
+    }
+
+    remove(name) {
+        const item = this.find(name);
+        errorHandle(item, `Can't find [${name}] from the [setting]`);
+        const parent = item.$parentItem?.selector || this.option;
+        parent.splice(parent.indexOf(item), 1);
+        this.option = Setting.makeRecursion(this.option);
+        this.destroy();
         this.render(this.option);
         return this.option;
     }
 
+    update(setting) {
+        const item = this.find(setting.name);
+        if (item) {
+            Object.assign(item, setting);
+            this.option = Setting.makeRecursion(this.option);
+            this.destroy();
+            this.render(this.option);
+        } else {
+            this.add(setting);
+        }
+        return this.option;
+    }
+
     add(setting) {
-        this.remove();
-        const settingCopy = mergeDeep({}, setting);
-        this.option.push(settingCopy);
+        this.option.push(setting);
         this.option = Setting.makeRecursion(this.option);
+        this.destroy();
         this.render(this.option);
         return this.option;
     }

packages/artplayer/src/setting/playbackRate.js

@@ -19,12 +19,14 @@ export default function playbackRate(art) {
 
     return {
         width: SETTING_ITEM_WIDTH,
+        name: 'playback-rate',
         html: i18n.get('Play Speed'),
         tooltip: getI18n(art.playbackRate),
         icon: icons.playbackRate,
         selector: PLAYBACK_RATE.map((item) => {
             return {
                 value: item,
+                name: `aspect-ratio-${item}`,
                 default: item === art.playbackRate,
                 html: getI18n(item),
             };

packages/artplayer/src/setting/subtitleOffset.js

@@ -3,6 +3,7 @@ export default function subtitleOffset(art) {
 
     return {
         width: constructor.SETTING_ITEM_WIDTH,
+        name: 'subtitle-offset',
         html: i18n.get('Subtitle Offset'),
         icon: icons.subtitle,
         tooltip: '0s',

packages/artplayer/src/style/artplayer.less

@@ -10,7 +10,6 @@
     direction: ltr;
     font-size: 14px;
     line-height: 1.3;
-    overflow: hidden;
     user-select: none;
     box-sizing: border-box;
     color: var(--art-font-color);

packages/artplayer/src/style/bottom.less

@@ -1,24 +1,24 @@
 .art-video-player {
     .art-bottom {
         .art-full(60);
-        top: auto;
         display: flex;
         flex-direction: column;
         justify-content: end;
         opacity: 0;
+        overflow: hidden;
         pointer-events: none;
         gap: var(--art-bottom-gap);
-        bottom: var(--art-bottom-offset);
-        height: var(--art-bottom-height);
         padding: 0 var(--art-padding);
+        transform: translateY(var(--art-bottom-offset));
         transition: all var(--art-transition-duration) ease;
+        background-size: 100% var(--art-bottom-height);
         .art-bottom-gradient();
     }
 
     &.art-control-show,
     &.art-hover {
         .art-bottom {
-            bottom: 0;
+            transform: translateY(0);
             opacity: 1;
         }
     }

packages/artplayer/src/style/fullscreenWeb.less

@@ -1,4 +1,3 @@
 .art-fullscreen-web {
     .art-full(var(--art-fullscreen-web-index), fixed);
-    overflow: visible;
 }

packages/artplayer/src/style/variables.less

@@ -14,7 +14,7 @@
     --art-state-size: 80px;
     --art-state-opacity: 0.8;
     --art-bottom-height: 100px;
-    --art-bottom-offset: -20px;
+    --art-bottom-offset: 20px;
     --art-bottom-gap: 5px;
     --art-highlight-width: 8px;
     --art-highlight-color: rgba(255, 255, 255, 0.5);