Refactor Artplayer class to remove unnecessary CSS transformations in setting.less

docs/uncompiled/artplayer/index.js

@@ -242,7 +242,7 @@ class Artplayer extends (0, _emitterDefault.default) {
         return "development";
     }
     static get build() {
-        return "2024-10-20 23:51:17";
+        return "2024-10-21 10:25:12";
     }
     static get config() {
         return 0, _configDefault.default;
@@ -910,7 +910,6 @@ parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "def", ()=>def);
 parcelHelpers.export(exports, "has", ()=>has);
 parcelHelpers.export(exports, "get", ()=>get);
-parcelHelpers.export(exports, "isGetter", ()=>isGetter);
 parcelHelpers.export(exports, "mergeDeep", ()=>mergeDeep);
 const def = Object.defineProperty;
 const { hasOwnProperty } = Object.prototype;
@@ -920,10 +919,6 @@ function has(obj, name) {
 function get(obj, name) {
     return Object.getOwnPropertyDescriptor(obj, name);
 }
-function isGetter(obj, prop) {
-    const descriptor = Object.getOwnPropertyDescriptor(obj, prop);
-    return descriptor !== undefined && typeof descriptor.get === "function";
-}
 function mergeDeep(...objects) {
     const isObject = (item)=>item && typeof item === "object" && !Array.isArray(item);
     return objects.reduce((prev, obj)=>{
@@ -4611,10 +4606,20 @@ class Setting extends (0, _componentDefault.default) {
         if (option.subtitleOffset) result.push((0, _subtitleOffsetDefault.default)(this.art));
         return result;
     }
-    static select(item, value, tooltip) {
-        if (item.$tooltip && tooltip) item.$tooltip.innerText = tooltip;
-        const element = item.selector.find((element)=>element.$item?.dataset?.value === value);
-        if (element?.$item) (0, _utils.inverseClass)(element.$item, "art-current");
+    traverse(callback, option = this.option) {
+        for(let index = 0; index < option.length; index++){
+            const item = option[index];
+            callback(item);
+            if (item.selector?.length) this.traverse.call(this, callback, item.selector);
+        }
+    }
+    check(target) {
+        target.$parent.tooltip = target.html;
+        this.traverse((item)=>{
+            item.default = item === target;
+            if (item.default && item.$item) (0, _utils.inverseClass)(item.$item, "art-current");
+        }, target.$option);
+        this.render(target.$parents);
     }
     format(option = this.option, parent, parents, names = []) {
         for(let index = 0; index < option.length; index++){
@@ -4645,15 +4650,12 @@ class Setting extends (0, _componentDefault.default) {
         }
         this.option = option;
     }
-    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;
-            }
-        }
+    find(name = "") {
+        let result = null;
+        this.traverse((item)=>{
+            if (item.name === name) result = item;
+        });
+        return result;
     }
     resize() {
         const { controls, constructor: { SETTING_WIDTH, SETTING_ITEM_HEIGHT }, template: { $player, $setting } } = this.art;
@@ -4746,7 +4748,7 @@ class Setting extends (0, _componentDefault.default) {
                 (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?.length) (0, _utils.append)($icon, item.icon || icons.config);
                 else (0, _utils.append)($icon, icons.check);
                 break;
             default:
@@ -4867,7 +4869,7 @@ class Setting extends (0, _componentDefault.default) {
                 }
                 break;
             case "selector":
-                if (item.selector && item.selector.length) {
+                if (item.selector?.length) {
                     const $state = (0, _utils.createElement)("div");
                     (0, _utils.addClass)($state, "art-setting-item-right-icon");
                     (0, _utils.append)($state, icons.arrowRight);
@@ -4907,18 +4909,10 @@ class Setting extends (0, _componentDefault.default) {
             case "selector":
                 {
                     const event = proxy($item, "click", async (event)=>{
-                        if (item.selector && item.selector.length) this.render(item.selector);
+                        if (item.selector?.length) this.render(item.selector);
                         else {
-                            (0, _utils.inverseClass)($item, "art-current");
-                            for(let index = 0; index < item.$option.length; index++){
-                                const element = item.$option[index];
-                                if (!(0, _utils.isGetter)(element, "default")) element.default = element === item;
-                            }
-                            if (item.$parents) this.render(item.$parents);
-                            if (item.$parent && item.$parent.onSelect) {
-                                const result = await item.$parent.onSelect.call(this.art, item, $item, event);
-                                if (item.$parent.$tooltip) item.$parent.$tooltip.innerHTML = result;
-                            }
+                            this.check(item);
+                            if (item.$parent.onSelect) item.$parent.tooltip = await item.$parent.onSelect.call(this.art, item, $item, event);
                         }
                     });
                     item.$events.push(event);
@@ -4934,7 +4928,7 @@ class Setting extends (0, _componentDefault.default) {
         });
         if (isUpdate) (0, _utils.replaceElement)($item, oldItem);
         else (0, _utils.append)($panel, $item);
-        if (item.mounted) item.mounted.call(this.art, item.$item, item);
+        if (item.mounted) setTimeout(()=>item.mounted.call(this.art, item.$item, item), 0);
     }
     render(option = this.option) {
         this.active = option;
@@ -4959,59 +4953,53 @@ exports.default = Setting;
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "default", ()=>flip);
-var _ = require("./");
-var _Default = parcelHelpers.interopDefault(_);
 var _utils = require("../utils");
 function flip(art) {
     const { i18n, icons, constructor: { SETTING_ITEM_WIDTH, FLIP } } = art;
     function getI18n(value) {
         return i18n.get((0, _utils.capitalize)(value));
     }
-    function update(item) {
-        const tooltip = getI18n(art.flip);
-        (0, _Default.default).select(item, art.flip, tooltip);
+    function update() {
+        const target = art.setting.find(`flip-${art.flip}`);
+        art.setting.check(target);
     }
     return {
         width: SETTING_ITEM_WIDTH,
         name: "flip",
         html: i18n.get("Video Flip"),
-        tooltip: i18n.get((0, _utils.capitalize)(art.flip)),
+        tooltip: getI18n(art.flip),
         icon: icons.flip,
         selector: FLIP.map((item)=>{
             return {
                 value: item,
-                name: `aspect-ratio-${item}`,
-                get default () {
-                    return item === art.flip;
-                },
-                html: i18n.get((0, _utils.capitalize)(item))
+                name: `flip-${item}`,
+                default: item === art.flip,
+                html: getI18n(item)
             };
         }),
         onSelect (item) {
             art.flip = item.value;
             return item.html;
         },
-        mounted: (_, item)=>{
-            update(item);
-            art.on("flip", ()=>update(item));
+        mounted: ()=>{
+            update();
+            art.on("flip", ()=>update());
         }
     };
 }
 
-},{"../utils":"jmgNb","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6","./":"e5Aaq"}],"9hfUt":[function(require,module,exports) {
+},{"../utils":"jmgNb","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"9hfUt":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "default", ()=>aspectRatio);
-var _ = require("./");
-var _Default = parcelHelpers.interopDefault(_);
 function aspectRatio(art) {
     const { i18n, icons, constructor: { SETTING_ITEM_WIDTH, ASPECT_RATIO } } = art;
     function getI18n(value) {
         return value === "default" ? i18n.get("Default") : value;
     }
-    function update(item) {
-        const tooltip = getI18n(art.aspectRatio);
-        (0, _Default.default).select(item, art.aspectRatio, tooltip);
+    function update() {
+        const target = art.setting.find(`aspect-ratio-${art.aspectRatio}`);
+        art.setting.check(target);
     }
     return {
         width: SETTING_ITEM_WIDTH,
@@ -5023,9 +5011,7 @@ function aspectRatio(art) {
             return {
                 value: item,
                 name: `aspect-ratio-${item}`,
-                get default () {
-                    return item === art.aspectRatio;
-                },
+                default: item === art.aspectRatio,
                 html: getI18n(item)
             };
         }),
@@ -5033,27 +5019,25 @@ function aspectRatio(art) {
             art.aspectRatio = item.value;
             return item.html;
         },
-        mounted: (_, item)=>{
-            update(item);
-            art.on("aspectRatio", ()=>update(item));
+        mounted: ()=>{
+            update();
+            art.on("aspectRatio", ()=>update());
         }
     };
 }
 
-},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6","./":"e5Aaq"}],"8RIYy":[function(require,module,exports) {
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"8RIYy":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "default", ()=>playbackRate);
-var _ = require("./");
-var _Default = parcelHelpers.interopDefault(_);
 function playbackRate(art) {
     const { i18n, icons, constructor: { SETTING_ITEM_WIDTH, PLAYBACK_RATE } } = art;
     function getI18n(value) {
         return value === 1.0 ? i18n.get("Normal") : value.toFixed(1);
     }
-    function update(item) {
-        const tooltip = getI18n(art.playbackRate);
-        (0, _Default.default).select(item, art.playbackRate, tooltip);
+    function update() {
+        const target = art.setting.find(`playback-rate-${art.playbackRate}`);
+        art.setting.check(target);
     }
     return {
         width: SETTING_ITEM_WIDTH,
@@ -5064,10 +5048,8 @@ function playbackRate(art) {
         selector: PLAYBACK_RATE.map((item)=>{
             return {
                 value: item,
-                name: `aspect-ratio-${item}`,
-                get default () {
-                    return item === art.playbackRate;
-                },
+                name: `playback-rate-${item}`,
+                default: item === art.playbackRate,
                 html: getI18n(item)
             };
         }),
@@ -5075,14 +5057,14 @@ function playbackRate(art) {
             art.playbackRate = item.value;
             return item.html;
         },
-        mounted: (_, item)=>{
-            update(item);
-            art.on("video:ratechange", ()=>update(item));
+        mounted: ()=>{
+            update();
+            art.on("video:ratechange", ()=>update());
         }
     };
 }
 
-},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6","./":"e5Aaq"}],"aVPfi":[function(require,module,exports) {
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"aVPfi":[function(require,module,exports) {
 var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
 parcelHelpers.defineInteropFlag(exports);
 parcelHelpers.export(exports, "default", ()=>subtitleOffset);