Refactor Setting class to fix state loss issue, update range callback return type, and remove isStringOrNumber utility function

packages/artplayer-vitepress/docs/component/setting.md

@@ -208,7 +208,7 @@ var art = new Artplayer({
             range: [5, 1, 10, 1],
             onChange: function (item, $dom, event) {
                 console.info(item, $dom, event);
-                return item.range + 'x';
+                return item.range[0] + 'x';
             },
         },
     ],

packages/artplayer/src/setting/index.js

@@ -17,7 +17,6 @@ import {
     createElement,
     replaceElement,
     includeFromEvent,
-    isStringOrNumber,
 } from '../utils';
 
 export default class Setting extends Component {
@@ -455,7 +454,7 @@ export default class Setting extends Component {
 
                             if (item.$parent && item.$parent.onSelect) {
                                 const result = await item.$parent.onSelect.call(this.art, item, $item, event);
-                                if (item.$parent.$tooltip && isStringOrNumber(result)) {
+                                if (item.$parent.$tooltip) {
                                     item.$parent.$tooltip.innerHTML = result;
                                 }
                             }

packages/artplayer/src/utils/component.js

@@ -10,7 +10,6 @@ import {
     inverseClass,
     createElement,
 } from './dom';
-import { isStringOrNumber } from './format';
 import { errorHandle } from './error';
 import validator from 'option-validator';
 import { ComponentOption } from '../scheme';
@@ -143,10 +142,7 @@ export default class Component {
             const find = option.selector[index] || {};
             $value.innerText = $item.innerText;
             if (option.onSelect) {
-                const result = await option.onSelect.call(this.art, find, $item, event);
-                if (isStringOrNumber(result)) {
-                    $value.innerHTML = result;
-                }
+                $value.innerHTML = await option.onSelect.call(this.art, find, $item, event);
             }
             setLeft();
         });

packages/artplayer/src/utils/format.js

@@ -6,10 +6,6 @@ export function capitalize(str) {
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export function isStringOrNumber(val) {
-    return ['string', 'number'].includes(typeof val);
-}
-
 export function secondToTime(second) {
     if (!second) return '00:00';
     const add0 = (num) => (num < 10 ? `0${num}` : String(num));

packages/artplayer/types/setting.d.ts

@@ -4,13 +4,17 @@ type Props<T> = {
     html: string;
     icon: string;
     tooltip: string;
+    $item: HTMLDivElement;
     $icon: HTMLDivElement;
     $html: HTMLDivElement;
     $tooltip: HTMLDivElement;
-    $switch: boolean;
+    $switch: HTMLDivElement;
     $range: HTMLInputElement;
-    $parentItem: Setting;
-    $parentList: Setting[];
+    $parent: Setting;
+    $parents: Setting[];
+    $option: Setting[];
+    $events: Function[];
+    $formatted: boolean;
 } & Omit<T, 'html' | 'icon' | 'tooltip'>;
 
 export type SettingOption = Props<Setting>;

packages/artplayer/types/utils.d.ts

@@ -49,7 +49,6 @@ export type Utils = {
     secondToTime(second: number): string;
     escape(str: string): string;
     capitalize(str: string): string;
-    isStringOrNumber(val: any): boolean;
     getIcon(key: string, html: string | HTMLElement): HTMLElement;
     supportsFlex(): boolean;
     setStyleText(element: HTMLElement, text: string): void;