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/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',