Refactor Setting class to update range values

docs/assets/example/index.js

@@ -84,7 +84,7 @@ var art = new Artplayer({
             tooltip: '5x',
             range: [5, 1, 10, 0.1],
             onRange: function (item) {
-                return item.range + 'x';
+                return item.range[0] + 'x';
             },
         },
     ],

docs/assets/example/setting.test.js

@@ -67,7 +67,7 @@ var art = new Artplayer({
             tooltip: '5x',
             range: [5, 1, 10, 0.1],
             onRange: function (item) {
-                return item.range + 'x';
+                return item.range[0] + 'x';
             },
             mounted: function (...args) {
                 console.info(args);
@@ -77,12 +77,12 @@ var art = new Artplayer({
 }, 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.resize();
+    await sleep(1000);
     art.setting.remove('aspect-ratio');
     try {
         art.setting.remove('aspect-ratio2');
@@ -96,7 +96,16 @@ var art = new Artplayer({
         range: [5, -11, 11, 1],
     });
     await sleep(1000);
-    art.setting.find('subtitle-offset').$range.value = -11;
+    art.setting.find('subtitle-offset').range = [0, -0, 10, 1];
+    await sleep(1000);
+    art.setting.update({
+        name: 'subtitle-offset2',
+        html: 'new offset 2',
+        range: [5, -11, 11, 1],
+        onChange(item) {
+            return item.range[0] + 's';
+        },
+    });
     await sleep(1000);
     art.setting.update({
         name: 'flip',
@@ -105,6 +114,8 @@ var art = new Artplayer({
         switch: false,
     });
     await sleep(1000);
+    art.setting.find('flip').switch = true;
+    await sleep(1000);
     art.setting.update({
         name: 'flip2',
         html: 'new flip2',

docs/uncompiled/artplayer/index.js

@@ -4731,10 +4731,10 @@ class Setting extends (0, _componentDefault.default) {
         switch(type){
             case "switch":
             case "range":
-                (0, _utils.append)($icon, 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, 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:
@@ -4794,20 +4794,22 @@ class Setting extends (0, _componentDefault.default) {
         switch(type){
             case "switch":
                 {
-                    const $state = (0, _utils.createElement)("div");
-                    (0, _utils.addClass)($state, "art-setting-item-right-icon");
-                    const $switchOn = (0, _utils.append)($state, icons.switchOn);
-                    const $switchOff = (0, _utils.append)($state, icons.switchOff);
+                    const $switch = (0, _utils.createElement)("div");
+                    (0, _utils.addClass)($switch, "art-setting-item-right-icon");
+                    const $switchOn = (0, _utils.append)($switch, icons.switchOn);
+                    const $switchOff = (0, _utils.append)($switch, icons.switchOff);
                     (0, _utils.setStyle)(item.switch ? $switchOff : $switchOn, "display", "none");
-                    (0, _utils.append)($right, $state);
-                    item.$switch = item.switch;
+                    (0, _utils.append)($right, $switch);
+                    (0, _utils.def)(item, "$switch", {
+                        configurable: true,
+                        get: ()=>$switch
+                    });
+                    let $switchValue = item.switch;
                     (0, _utils.def)(item, "switch", {
                         configurable: true,
-                        get () {
-                            return item.$switch;
-                        },
+                        get: ()=>$switchValue,
                         set (value) {
-                            item.$switch = value;
+                            $switchValue = value;
                             if (value) {
                                 (0, _utils.setStyle)($switchOff, "display", "none");
                                 (0, _utils.setStyle)($switchOn, "display", null);
@@ -4824,16 +4826,32 @@ 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];
                     $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", {
                         configurable: true,
                         get: ()=>$range
                     });
+                    let $rangeValue = [
+                        ...item.range
+                    ];
+                    (0, _utils.def)(item, "range", {
+                        configurable: true,
+                        get: ()=>$rangeValue,
+                        set (value) {
+                            $rangeValue = [
+                                ...value
+                            ];
+                            $range.value = value[0];
+                            $range.min = value[1];
+                            $range.max = value[2];
+                            $range.step = value[3];
+                        }
+                    });
                 }
                 break;
             case "selector":
@@ -4860,12 +4878,14 @@ class Setting extends (0, _componentDefault.default) {
                 if (item.$range) {
                     if (item.onRange) {
                         const event = proxy(item.$range, "change", async (event)=>{
+                            item.range[0] = item.$range.valueAsNumber;
                             item.tooltip = await item.onRange.call(this.art, item, $item, event);
                         });
                         item.$events.push(event);
                     }
                     if (item.onChange) {
                         const event = proxy(item.$range, "input", async (event)=>{
+                            item.range[0] = item.$range.valueAsNumber;
                             item.tooltip = await item.onChange.call(this.art, item, $item, event);
                         });
                         item.$events.push(event);
@@ -5068,8 +5088,8 @@ function subtitleOffset(art) {
             0.1
         ],
         onChange (item) {
-            art.subtitleOffset = item.$range.valueAsNumber;
-            return item.$range.valueAsNumber + "s";
+            art.subtitleOffset = item.range[0];
+            return item.range[0] + "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/index.js

@@ -118,8 +118,10 @@ export default class Setting extends Component {
                     get: () => true,
                 });
             }
+
             this.format(item.selector || [], item, option, names);
         }
+
         this.option = option;
     }
 
@@ -257,11 +259,11 @@ export default class Setting extends Component {
         switch (type) {
             case 'switch':
             case 'range':
-                append($icon, item.icon ?? icons.config);
+                append($icon, item.icon || icons.config);
                 break;
             case 'selector':
                 if (item.selector && item.selector.length) {
-                    append($icon, item.icon ?? icons.config);
+                    append($icon, item.icon || icons.config);
                 } else {
                     append($icon, icons.check);
                 }
@@ -332,21 +334,24 @@ export default class Setting extends Component {
 
         switch (type) {
             case 'switch': {
-                const $state = createElement('div');
-                addClass($state, 'art-setting-item-right-icon');
-                const $switchOn = append($state, icons.switchOn);
-                const $switchOff = append($state, icons.switchOff);
+                const $switch = createElement('div');
+                addClass($switch, 'art-setting-item-right-icon');
+                const $switchOn = append($switch, icons.switchOn);
+                const $switchOff = append($switch, icons.switchOff);
                 setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
-                append($right, $state);
+                append($right, $switch);
 
-                item.$switch = item.switch;
+                def(item, '$switch', {
+                    configurable: true,
+                    get: () => $switch,
+                });
+
+                let $switchValue = item.switch;
                 def(item, 'switch', {
                     configurable: true,
-                    get() {
-                        return item.$switch;
-                    },
+                    get: () => $switchValue,
                     set(value) {
-                        item.$switch = value;
+                        $switchValue = value;
                         if (value) {
                             setStyle($switchOff, 'display', 'none');
                             setStyle($switchOn, 'display', null);
@@ -363,10 +368,10 @@ 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];
                     $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);
 
@@ -374,6 +379,19 @@ export default class Setting extends Component {
                         configurable: true,
                         get: () => $range,
                     });
+
+                    let $rangeValue = [...item.range];
+                    def(item, 'range', {
+                        configurable: true,
+                        get: () => $rangeValue,
+                        set(value) {
+                            $rangeValue = [...value];
+                            $range.value = value[0];
+                            $range.min = value[1];
+                            $range.max = value[2];
+                            $range.step = value[3];
+                        },
+                    });
                 }
                 break;
             case 'selector':
@@ -402,6 +420,7 @@ export default class Setting extends Component {
                 if (item.$range) {
                     if (item.onRange) {
                         const event = proxy(item.$range, 'change', async (event) => {
+                            item.range[0] = item.$range.valueAsNumber;
                             item.tooltip = await item.onRange.call(this.art, item, $item, event);
                         });
                         item.$events.push(event);
@@ -409,6 +428,7 @@ export default class Setting extends Component {
 
                     if (item.onChange) {
                         const event = proxy(item.$range, 'input', async (event) => {
+                            item.range[0] = item.$range.valueAsNumber;
                             item.tooltip = await item.onChange.call(this.art, item, $item, event);
                         });
                         item.$events.push(event);

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.valueAsNumber;
-            return item.$range.valueAsNumber + 's';
+            art.subtitleOffset = item.range[0];
+            return item.range[0] + 's';
         },
     };
 }