Refactor Setting class to update and append items

docs/assets/example/setting.test.js

@@ -0,0 +1,125 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+    settings: [
+        {
+            width: 200,
+            html: 'Subtitle',
+            tooltip: 'Bilingual',
+            icon: '<img width="22" heigth="22" src="/assets/img/subtitle.svg">',
+            selector: [
+                {
+                    html: 'Display',
+                    tooltip: 'Show',
+                    switch: true,
+                    onSwitch: function (item) {
+                        item.tooltip = item.switch ? 'Hide' : 'Show';
+                        art.subtitle.show = !item.switch;
+                        return !item.switch;
+                    },
+                },
+                {
+                    default: true,
+                    html: 'Bilingual',
+                    url: '/assets/sample/subtitle.srt',
+                },
+                {
+                    html: 'Chinese',
+                    url: '/assets/sample/subtitle.cn.srt',
+                },
+                {
+                    html: 'Japanese',
+                    url: '/assets/sample/subtitle.jp.srt',
+                },
+            ],
+            onSelect: function (item) {
+                art.subtitle.switch(item.url, {
+                    name: item.html,
+                });
+                return item.html;
+            },
+            mounted: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'Switcher',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            tooltip: 'OFF',
+            switch: false,
+            onSwitch: function (item) {
+                item.tooltip = item.switch ? 'OFF' : 'ON';
+                console.info('You clicked on the custom switch', item.switch);
+                return !item.switch;
+            },
+            mounted: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'Slider',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            tooltip: '5x',
+            range: [5, 1, 10, 0.1],
+            onRange: function (item) {
+                return item.range + 'x';
+            },
+            mounted: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+}, async () => {
+    const { sleep } = Artplayer.utils;
+    art.setting.show = true;
+    await sleep(100);
+    art.setting.resize();
+    console.log(art.setting.builtin);
+    console.log(art.setting.find('aspect-ratio'));
+    console.log(art.setting.find('aspect-ratio2'));
+    await sleep(1000);
+    art.setting.remove('aspect-ratio');
+    try {
+        art.setting.remove('aspect-ratio2');
+    } catch (error) {
+        console.log(error.message);
+    }
+    await sleep(1000);
+    art.setting.update({
+        name: 'subtitle-offset',
+        html: 'new offset',
+        range: [5, -11, 11, 1],
+    });
+    await sleep(1000);
+    art.setting.find('subtitle-offset').$range.value = -11;
+    await sleep(1000);
+    art.setting.update({
+        name: 'flip',
+        html: 'new flip',
+        tooltip: 'OFF',
+        switch: false,
+    });
+    await sleep(1000);
+    art.setting.update({
+        name: 'flip2',
+        html: 'new flip2',
+        tooltip: 'OFF',
+        switch: true,
+    });
+    await sleep(1000);
+    try {
+        art.setting.add({
+            name: 'flip2',
+            html: 'new flip2',
+            tooltip: 'OFF',
+            switch: true,
+        });
+    } catch (error) {
+        console.log(error.message);
+    }
+});

docs/uncompiled/artplayer/index.js

@@ -4577,7 +4577,6 @@ class Setting extends (0, _componentDefault.default) {
         this.id = 0;
         this.active = null;
         this.cache = new Map();
-        this.symbol = Symbol("setting");
         this.option = [
             ...this.builtin,
             ...option.settings
@@ -4614,11 +4613,11 @@ class Setting extends (0, _componentDefault.default) {
     format(option = this.option, parent, parents, names = []) {
         for(let index = 0; index < option.length; index++){
             const item = option[index];
+            if (item?.name) {
+                (0, _utils.errorHandle)(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
+                names.push(item.name);
+            } else item.name = `setting-${this.id++}`;
             if (!item.$formatted) {
-                if (item?.name) {
-                    (0, _utils.errorHandle)(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
-                    names.push(item.name);
-                } else item.name = `setting-${this.id++}`;
                 (0, _utils.def)(item, "$parent", {
                     get: ()=>parent
                 });
@@ -4676,6 +4675,7 @@ class Setting extends (0, _componentDefault.default) {
         item.$option.splice(index, 1);
         for(let index = 0; index < item.$events.length; index++)item.$events[index]();
         if (item.$item) (0, _utils.remove)(item.$item);
+        item.$events.length = 0;
         this.render();
     }
     update(target) {
@@ -4685,7 +4685,7 @@ class Setting extends (0, _componentDefault.default) {
             this.format();
             this.creatItem(item, true);
             this.render();
-        } else this.add(item);
+        } else this.add(target);
     }
     add(item, option = this.option) {
         option.push(item);
@@ -4722,8 +4722,8 @@ class Setting extends (0, _componentDefault.default) {
         const $item = (0, _utils.createElement)("div");
         (0, _utils.addClass)($item, "art-setting-item");
         (0, _utils.setStyle)($item, "height", `${constructor.SETTING_ITEM_HEIGHT}px`);
-        if ((0, _utils.isStringOrNumber)(item.name)) $item.dataset.name = item.name;
-        if ((0, _utils.isStringOrNumber)(item.value)) $item.dataset.value = item.value;
+        $item.dataset.name = item.name || "";
+        $item.dataset.value = item.value || "";
         const $left = (0, _utils.append)($item, '<div class="art-setting-item-left"></div>');
         const $right = (0, _utils.append)($item, '<div class="art-setting-item-right"></div>');
         const $icon = (0, _utils.createElement)("div");
@@ -4731,10 +4731,10 @@ class Setting extends (0, _componentDefault.default) {
         switch(type){
             case "switch":
             case "range":
-                (0, _utils.append)($icon, (0, _utils.isStringOrNumber)(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
+                (0, _utils.append)($icon, item.icon ?? icons.config);
                 break;
             case "selector":
-                if (item.selector && item.selector.length) (0, _utils.append)($icon, (0, _utils.isStringOrNumber)(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
+                if (item.selector && item.selector.length) (0, _utils.append)($icon, item.icon ?? icons.config);
                 else (0, _utils.append)($icon, icons.check);
                 break;
             default:
@@ -4742,6 +4742,7 @@ class Setting extends (0, _componentDefault.default) {
         }
         (0, _utils.append)($left, $icon);
         (0, _utils.def)(item, "$icon", {
+            configurable: true,
             get: ()=>$icon
         });
         (0, _utils.def)(item, "icon", {
@@ -4750,7 +4751,8 @@ class Setting extends (0, _componentDefault.default) {
                 return $icon.innerHTML;
             },
             set (value) {
-                if ((0, _utils.isStringOrNumber)(value)) $icon.innerHTML = value;
+                $icon.innerHTML = "";
+                (0, _utils.append)($icon, value);
             }
         });
         const $html = (0, _utils.createElement)("div");
@@ -4758,6 +4760,7 @@ class Setting extends (0, _componentDefault.default) {
         (0, _utils.append)($html, item.html || "");
         (0, _utils.append)($left, $html);
         (0, _utils.def)(item, "$html", {
+            configurable: true,
             get: ()=>$html
         });
         (0, _utils.def)(item, "html", {
@@ -4766,7 +4769,8 @@ class Setting extends (0, _componentDefault.default) {
                 return $html.innerHTML;
             },
             set (value) {
-                if ((0, _utils.isStringOrNumber)(value)) $html.innerHTML = value;
+                $html.innerHTML = "";
+                (0, _utils.append)($html, value);
             }
         });
         const $tooltip = (0, _utils.createElement)("div");
@@ -4774,6 +4778,7 @@ class Setting extends (0, _componentDefault.default) {
         (0, _utils.append)($tooltip, item.tooltip || "");
         (0, _utils.append)($right, $tooltip);
         (0, _utils.def)(item, "$tooltip", {
+            configurable: true,
             get: ()=>$tooltip
         });
         (0, _utils.def)(item, "tooltip", {
@@ -4782,7 +4787,8 @@ class Setting extends (0, _componentDefault.default) {
                 return $tooltip.innerHTML;
             },
             set (value) {
-                if ((0, _utils.isStringOrNumber)(value)) $tooltip.innerHTML = value;
+                $tooltip.innerHTML = "";
+                (0, _utils.append)($tooltip, value);
             }
         });
         switch(type){
@@ -4818,23 +4824,15 @@ class Setting extends (0, _componentDefault.default) {
                     const $state = (0, _utils.createElement)("div");
                     (0, _utils.addClass)($state, "art-setting-item-right-icon");
                     const $range = (0, _utils.append)($state, '<input type="range">');
-                    $range.value = item.range[0] || 0;
-                    $range.min = item.range[1] || 0;
-                    $range.max = item.range[2] || 10;
-                    $range.step = item.range[3] || 1;
+                    $range.min = item.range[1];
+                    $range.max = item.range[2];
+                    $range.step = item.range[3];
+                    $range.value = item.range[0];
                     (0, _utils.addClass)($range, "art-setting-range");
                     (0, _utils.append)($right, $state);
                     (0, _utils.def)(item, "$range", {
-                        get: ()=>$range
-                    });
-                    (0, _utils.def)(item, "range", {
                         configurable: true,
-                        get () {
-                            return $range.valueAsNumber;
-                        },
-                        set (value) {
-                            $range.value = Number(value);
-                        }
+                        get: ()=>$range
                     });
                 }
                 break;
@@ -4898,10 +4896,8 @@ class Setting extends (0, _componentDefault.default) {
             default:
                 break;
         }
-        (0, _utils.def)($item, this.symbol, {
-            get: ()=>item
-        });
         (0, _utils.def)(item, "$item", {
+            configurable: true,
             get: ()=>$item
         });
         if (isUpdate) (0, _utils.replaceElement)($item, oldItem);
@@ -4922,7 +4918,7 @@ class Setting extends (0, _componentDefault.default) {
             (0, _utils.inverseClass)($panel, "art-current");
             for(let index = 0; index < option.length; index++){
                 const item = option[index];
-                if (item.mounted) item.mounted.call(this.art, $panel, item);
+                if (item.mounted) item.mounted.call(this.art, item.$item, item);
             }
         }
         this.resize();
@@ -4937,9 +4933,9 @@ parcelHelpers.export(exports, "default", ()=>flip);
 var _utils = require("../utils");
 function flip(art) {
     const { i18n, icons, constructor: { SETTING_ITEM_WIDTH, FLIP } } = art;
-    function update($panel, $tooltip, value) {
+    function update($item, $tooltip, value) {
         if ($tooltip) $tooltip.innerText = i18n.get((0, _utils.capitalize)(value));
-        const $current = (0, _utils.queryAll)(".art-setting-item", $panel).find((item)=>item.dataset.value === value);
+        const $current = (0, _utils.queryAll)(".art-setting-item", $item).find((item)=>item.dataset.value === value);
         if ($current) (0, _utils.inverseClass)($current, "art-current");
     }
     return {
@@ -4960,10 +4956,10 @@ function flip(art) {
             art.flip = item.value;
             return item.html;
         },
-        mounted: ($panel, item)=>{
-            update($panel, item.$tooltip, art.flip);
+        mounted: ($item, item)=>{
+            update($item, item.$tooltip, art.flip);
             art.on("flip", ()=>{
-                update($panel, item.$tooltip, art.flip);
+                update($item, item.$tooltip, art.flip);
             });
         }
     };
@@ -4979,9 +4975,9 @@ function aspectRatio(art) {
     function getI18n(value) {
         return value === "default" ? i18n.get("Default") : value;
     }
-    function update($panel, $tooltip, value) {
+    function update($item, $tooltip, value) {
         if ($tooltip) $tooltip.innerText = getI18n(value);
-        const $current = (0, _utils.queryAll)(".art-setting-item", $panel).find((item)=>item.dataset.value === value);
+        const $current = (0, _utils.queryAll)(".art-setting-item", $item).find((item)=>item.dataset.value === value);
         if ($current) (0, _utils.inverseClass)($current, "art-current");
     }
     return {
@@ -5002,10 +4998,10 @@ function aspectRatio(art) {
             art.aspectRatio = item.value;
             return item.html;
         },
-        mounted: ($panel, item)=>{
-            update($panel, item.$tooltip, art.aspectRatio);
+        mounted: ($item, item)=>{
+            update($item, item.$tooltip, art.aspectRatio);
             art.on("aspectRatio", ()=>{
-                update($panel, item.$tooltip, art.aspectRatio);
+                update($item, item.$tooltip, art.aspectRatio);
             });
         }
     };
@@ -5021,9 +5017,9 @@ function playbackRate(art) {
     function getI18n(value) {
         return value === 1.0 ? i18n.get("Normal") : value.toFixed(1);
     }
-    function update($panel, $tooltip, value) {
+    function update($item, $tooltip, value) {
         if ($tooltip) $tooltip.innerText = getI18n(value);
-        const $current = (0, _utils.queryAll)(".art-setting-item", $panel).find((item)=>Number(item.dataset.value) === value);
+        const $current = (0, _utils.queryAll)(".art-setting-item", $item).find((item)=>Number(item.dataset.value) === value);
         if ($current) (0, _utils.inverseClass)($current, "art-current");
     }
     return {
@@ -5044,10 +5040,10 @@ function playbackRate(art) {
             art.playbackRate = item.value;
             return item.html;
         },
-        mounted: ($panel, item)=>{
-            update($panel, item.$tooltip, art.playbackRate);
+        mounted: ($item, item)=>{
+            update($item, item.$tooltip, art.playbackRate);
             art.on("video:ratechange", ()=>{
-                update($panel, item.$tooltip, art.playbackRate);
+                update($item, item.$tooltip, art.playbackRate);
             });
         }
     };
@@ -5072,8 +5068,8 @@ function subtitleOffset(art) {
             0.1
         ],
         onChange (item) {
-            art.subtitleOffset = item.range;
-            return item.range + "s";
+            art.subtitleOffset = item.$range.valueAsNumber;
+            return item.$range.valueAsNumber + "s";
         }
     };
 }

docs/uncompiled/artplayer/index.js.map

@@ -1 +1 @@
-{"mappings":"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 truncated
+{"mappings":"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 truncated

packages/artplayer/src/setting/aspectRatio.js

@@ -11,9 +11,9 @@ export default function aspectRatio(art) {
         return value === 'default' ? i18n.get('Default') : value;
     }
 
-    function update($panel, $tooltip, value) {
+    function update($item, $tooltip, value) {
         if ($tooltip) $tooltip.innerText = getI18n(value);
-        const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
+        const $current = queryAll('.art-setting-item', $item).find((item) => item.dataset.value === value);
         if ($current) inverseClass($current, 'art-current');
     }
 
@@ -35,10 +35,10 @@ export default function aspectRatio(art) {
             art.aspectRatio = item.value;
             return item.html;
         },
-        mounted: ($panel, item) => {
-            update($panel, item.$tooltip, art.aspectRatio);
+        mounted: ($item, item) => {
+            update($item, item.$tooltip, art.aspectRatio);
             art.on('aspectRatio', () => {
-                update($panel, item.$tooltip, art.aspectRatio);
+                update($item, item.$tooltip, art.aspectRatio);
             });
         },
     };

packages/artplayer/src/setting/flip.js

@@ -7,9 +7,9 @@ export default function flip(art) {
         constructor: { SETTING_ITEM_WIDTH, FLIP },
     } = art;
 
-    function update($panel, $tooltip, value) {
+    function update($item, $tooltip, value) {
         if ($tooltip) $tooltip.innerText = i18n.get(capitalize(value));
-        const $current = queryAll('.art-setting-item', $panel).find((item) => item.dataset.value === value);
+        const $current = queryAll('.art-setting-item', $item).find((item) => item.dataset.value === value);
         if ($current) inverseClass($current, 'art-current');
     }
 
@@ -31,10 +31,10 @@ export default function flip(art) {
             art.flip = item.value;
             return item.html;
         },
-        mounted: ($panel, item) => {
-            update($panel, item.$tooltip, art.flip);
+        mounted: ($item, item) => {
+            update($item, item.$tooltip, art.flip);
             art.on('flip', () => {
-                update($panel, item.$tooltip, art.flip);
+                update($item, item.$tooltip, art.flip);
             });
         },
     };

packages/artplayer/src/setting/index.js

@@ -36,7 +36,6 @@ export default class Setting extends Component {
         this.id = 0;
         this.active = null;
         this.cache = new Map();
-        this.symbol = Symbol('setting');
         this.option = [...this.builtin, ...option.settings];
 
         if (option.setting) {
@@ -89,14 +88,15 @@ export default class Setting extends Component {
     format(option = this.option, parent, parents, names = []) {
         for (let index = 0; index < option.length; index++) {
             const item = option[index];
-            if (!item.$formatted) {
-                if (item?.name) {
-                    errorHandle(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
-                    names.push(item.name);
-                } else {
-                    item.name = `setting-${this.id++}`;
-                }
 
+            if (item?.name) {
+                errorHandle(!names.includes(item.name), `The [${item.name}] is already exist in [setting]`);
+                names.push(item.name);
+            } else {
+                item.name = `setting-${this.id++}`;
+            }
+
+            if (!item.$formatted) {
                 def(item, '$parent', {
                     get: () => parent,
                 });
@@ -176,6 +176,7 @@ export default class Setting extends Component {
         if (item.$item) {
             remove(item.$item);
         }
+        item.$events.length = 0;
         this.render();
     }
 
@@ -187,7 +188,7 @@ export default class Setting extends Component {
             this.creatItem(item, true);
             this.render();
         } else {
-            this.add(item);
+            this.add(target);
         }
     }
 
@@ -244,13 +245,8 @@ export default class Setting extends Component {
         addClass($item, 'art-setting-item');
         setStyle($item, 'height', `${constructor.SETTING_ITEM_HEIGHT}px`);
 
-        if (isStringOrNumber(item.name)) {
-            $item.dataset.name = item.name;
-        }
-
-        if (isStringOrNumber(item.value)) {
-            $item.dataset.value = item.value;
-        }
+        $item.dataset.name = item.name || '';
+        $item.dataset.value = item.value || '';
 
         const $left = append($item, '<div class="art-setting-item-left"></div>');
         const $right = append($item, '<div class="art-setting-item-right"></div>');
@@ -261,14 +257,11 @@ export default class Setting extends Component {
         switch (type) {
             case 'switch':
             case 'range':
-                append($icon, isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config);
+                append($icon, item.icon ?? icons.config);
                 break;
             case 'selector':
                 if (item.selector && item.selector.length) {
-                    append(
-                        $icon,
-                        isStringOrNumber(item.icon) || item.icon instanceof Element ? item.icon : icons.config,
-                    );
+                    append($icon, item.icon ?? icons.config);
                 } else {
                     append($icon, icons.check);
                 }
@@ -280,6 +273,7 @@ export default class Setting extends Component {
         append($left, $icon);
 
         def(item, '$icon', {
+            configurable: true,
             get: () => $icon,
         });
 
@@ -289,9 +283,8 @@ export default class Setting extends Component {
                 return $icon.innerHTML;
             },
             set(value) {
-                if (isStringOrNumber(value)) {
-                    $icon.innerHTML = value;
-                }
+                $icon.innerHTML = '';
+                append($icon, value);
             },
         });
 
@@ -301,6 +294,7 @@ export default class Setting extends Component {
         append($left, $html);
 
         def(item, '$html', {
+            configurable: true,
             get: () => $html,
         });
 
@@ -310,9 +304,8 @@ export default class Setting extends Component {
                 return $html.innerHTML;
             },
             set(value) {
-                if (isStringOrNumber(value)) {
-                    $html.innerHTML = value;
-                }
+                $html.innerHTML = '';
+                append($html, value);
             },
         });
 
@@ -322,6 +315,7 @@ export default class Setting extends Component {
         append($right, $tooltip);
 
         def(item, '$tooltip', {
+            configurable: true,
             get: () => $tooltip,
         });
 
@@ -331,9 +325,8 @@ export default class Setting extends Component {
                 return $tooltip.innerHTML;
             },
             set(value) {
-                if (isStringOrNumber(value)) {
-                    $tooltip.innerHTML = value;
-                }
+                $tooltip.innerHTML = '';
+                append($tooltip, value);
             },
         });
 
@@ -345,8 +338,8 @@ export default class Setting extends Component {
                 const $switchOff = append($state, icons.switchOff);
                 setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
                 append($right, $state);
-                item.$switch = item.switch;
 
+                item.$switch = item.switch;
                 def(item, 'switch', {
                     configurable: true,
                     get() {
@@ -370,25 +363,16 @@ export default class Setting extends Component {
                     const $state = createElement('div');
                     addClass($state, 'art-setting-item-right-icon');
                     const $range = append($state, '<input type="range">');
-                    $range.value = item.range[0] || 0;
-                    $range.min = item.range[1] || 0;
-                    $range.max = item.range[2] || 10;
-                    $range.step = item.range[3] || 1;
+                    $range.min = item.range[1];
+                    $range.max = item.range[2];
+                    $range.step = item.range[3];
+                    $range.value = item.range[0];
                     addClass($range, 'art-setting-range');
                     append($right, $state);
 
                     def(item, '$range', {
-                        get: () => $range,
-                    });
-
-                    def(item, 'range', {
                         configurable: true,
-                        get() {
-                            return $range.valueAsNumber;
-                        },
-                        set(value) {
-                            $range.value = Number(value);
-                        },
+                        get: () => $range,
                     });
                 }
                 break;
@@ -469,11 +453,8 @@ export default class Setting extends Component {
                 break;
         }
 
-        def($item, this.symbol, {
-            get: () => item,
-        });
-
         def(item, '$item', {
+            configurable: true,
             get: () => $item,
         });
 
@@ -508,7 +489,7 @@ export default class Setting extends Component {
             for (let index = 0; index < option.length; index++) {
                 const item = option[index];
                 if (item.mounted) {
-                    item.mounted.call(this.art, $panel, item);
+                    item.mounted.call(this.art, item.$item, item);
                 }
             }
         }

packages/artplayer/src/setting/playbackRate.js

@@ -11,9 +11,9 @@ export default function playbackRate(art) {
         return value === 1.0 ? i18n.get('Normal') : value.toFixed(1);
     }
 
-    function update($panel, $tooltip, value) {
+    function update($item, $tooltip, value) {
         if ($tooltip) $tooltip.innerText = getI18n(value);
-        const $current = queryAll('.art-setting-item', $panel).find((item) => Number(item.dataset.value) === value);
+        const $current = queryAll('.art-setting-item', $item).find((item) => Number(item.dataset.value) === value);
         if ($current) inverseClass($current, 'art-current');
     }
 
@@ -35,10 +35,10 @@ export default function playbackRate(art) {
             art.playbackRate = item.value;
             return item.html;
         },
-        mounted: ($panel, item) => {
-            update($panel, item.$tooltip, art.playbackRate);
+        mounted: ($item, item) => {
+            update($item, item.$tooltip, art.playbackRate);
             art.on('video:ratechange', () => {
-                update($panel, item.$tooltip, art.playbackRate);
+                update($item, item.$tooltip, art.playbackRate);
             });
         },
     };

packages/artplayer/src/setting/subtitleOffset.js

@@ -9,8 +9,8 @@ export default function subtitleOffset(art) {
         tooltip: '0s',
         range: [0, -5, 5, 0.1],
         onChange(item) {
-            art.subtitleOffset = item.range;
-            return item.range + 's';
+            art.subtitleOffset = item.$range.valueAsNumber;
+            return item.$range.valueAsNumber + 's';
         },
     };
 }