update

docs/assets/example/index.js

@@ -31,16 +31,16 @@ var art = new Artplayer({
         {
             html: 'Custom setting',
             width: 250,
-            children: [
+            selector: [
                 {
                     html: 'Custom setting 01',
-                    click: function () {
+                    onSelect: function () {
                         console.info('You clicked on the custom setting 01');
                     },
                 },
                 {
                     html: 'Custom setting 02',
-                    click: function () {
+                    onSelect: function () {
                         console.info('You clicked on the custom setting 02');
                     },
                 },

docs/assets/ts/artplayer.d.ts

@@ -92,9 +92,14 @@ type SettingOption = {
     current?: boolean;
 
     /**
-     * Html string or html element of component
+     * Custom selector list, use in controls
      */
-    children?: SettingOption[];
+    selector?: SettingOption[];
+
+    /**
+     * When selector item click, use in controls
+     */
+    onSelect?(selector: Selector, element: HTMLElement): void;
 };
 
 type Component = {

docs/uncompiled/artplayer.js

@@ -4280,11 +4280,11 @@
     return {
       width: 150,
       html: i18n.get('Video Flip'),
-      children: Object.keys(keys).map(function (key) {
+      selector: Object.keys(keys).map(function (key) {
         return {
           html: i18n.get(keys[key]),
           current: key === 'normal',
-          click: function click() {
+          onSelect: function onSelect() {
             art.flip = key;
           }
         };
@@ -4299,11 +4299,11 @@
       width: 150,
       html: i18n.get('Aspect Ratio'),
       icon: icons.aspectRatio,
-      children: ['default', '4:3', '16:9'].map(function (item) {
+      selector: ['default', '4:3', '16:9'].map(function (item) {
         return {
           html: item === 'default' ? i18n.get('Default') : item,
           current: item === 'default',
-          click: function click() {
+          onSelect: function onSelect() {
             art.aspectRatio = item;
           }
         };
@@ -4318,11 +4318,11 @@
       width: 150,
       html: i18n.get('Play Speed'),
       icon: icons.playbackRate,
-      children: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map(function (item) {
+      selector: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map(function (item) {
         return {
           html: item === 1.0 ? i18n.get('Normal') : item,
           current: item === 1.0,
-          click: function click() {
+          onSelect: function onSelect() {
             art.playbackRate = item;
           }
         };
@@ -4337,11 +4337,11 @@
       width: 150,
       html: i18n.get('Subtitle Offset'),
       icon: icons.subtitle,
-      children: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map(function (item) {
+      selector: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map(function (item) {
         return {
           html: item === 0 ? i18n.get('Normal') : item,
           current: item === 0,
-          click: function click() {
+          onSelect: function onSelect() {
             art.subtitleOffset = item;
           }
         };
@@ -4357,13 +4357,13 @@
     for (var index = 0; index < option.length; index++) {
       var item = option[index];
 
-      if (!item.back && item.children) {
+      if (!item.back && item.selector) {
-        item.children.unshift({
+        item.selector.unshift({
           html: item.html,
-          children: option,
+          selector: option,
           back: true
         });
-        makeRecursion(item.children);
+        makeRecursion(item.selector);
       }
     }
 
@@ -4444,7 +4444,7 @@
             icons = _this$art.icons,
             proxy = _this$art.events.proxy;
         var $item = document.createElement('div');
-        var hasChildren = item.children && item.children.length;
+        var hasChildren = item.selector && item.selector.length;
         var $left = append($item, "<div class=\"art-setting-item-left\"></div>");
         var $right = append($item, "<div class=\"art-setting-item-right\"></div>");
         addClass($item, 'art-setting-item');
@@ -4470,12 +4470,12 @@
         }
 
         proxy($item, 'click', function (event) {
-          if (typeof item.click === 'function') {
+          if (typeof item.onSelect === 'function') {
-            item.click.call(_this2.art, _this2, event);
+            item.onSelect.call(_this2.art, _this2, event);
           }
 
           if (hasChildren) {
-            _this2.init(item.children);
+            _this2.init(item.selector);
 
             setStyle(_this2.$parent, 'width', "".concat(item.width || _this2.width, "px"));
           } else {

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/subtitleOffsetMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/vLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrMix.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/subtitleOffsetMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/vLine truncated

packages/artplayer-document/docs/en/Options.md

@@ -550,7 +550,7 @@ var art = new Artplayer({
 -   Type: `Array`
 -   Default: `[]`
 
-Initialize custom setting panel, please visit [How to add setting](/document/Questions/)
+Initialize custom setting panel, please visit [How to add setting panel](/document/en/Questions/How%20to%20add%20setting%20panel)
 
 <div className="run-code">▶ Run Code</div>
 
@@ -562,7 +562,24 @@ var art = new Artplayer({
     settings: [
         {
             html: 'Custom setting 01',
-            items: [
+            children: [
+                {
+                    html: 'Submenu 01',
+                    click: function() {
+                        console.log('You click on the submenu 01');
+                    }
+                },
+                {
+                    html: 'Submenu 02',
+                    click: function() {
+                        console.log('You click on the submenu 02');
+                    }
+                },
+            ]
+        },
+        {
+            html: 'Custom setting 02',
+            children: [
                 {
                     html: 'Submenu 01',
                     click: function() {

packages/artplayer-document/docs/en/Questions/How to add setting panel.md

@@ -0,0 +1,4 @@
+---
+title: How to add setting panel
+sidebar_position: 6
+---

packages/artplayer-document/docs/en/Questions/How to add setting.md

@@ -1,4 +0,0 @@
----
-title: How to add setting
-sidebar_position: 6
----

packages/artplayer-document/docs/zh-cn/Options.md

@@ -550,7 +550,7 @@ var art = new Artplayer({
 -   类型: `Array`
 -   默认: `[]`
 
-初始化自定义的设置面板，更多信息请访问 [怎么添加设置面板](/document/zh-cn/Questions/)
+初始化自定义的设置面板，更多信息请访问 [怎么添加设置面板](/document/zh-cn/Questions/How%20to%20add%20setting%20panel)
 
 <div className="run-code">▶ Run Code</div>
 
@@ -562,7 +562,24 @@ var art = new Artplayer({
     settings: [
         {
             html: '自定义设置01',
-            items: [
+            children: [
+                {
+                    html: '子菜单01',
+                    click: function() {
+                        console.log('你点击了子菜单01');
+                    }
+                },
+                {
+                    html: '子菜单02',
+                    click: function() {
+                        console.log('你点击了子菜单01');
+                    }
+                },
+            ]
+        },
+        {
+            html: '自定义设置02',
+            children: [
                 {
                     html: '子菜单01',
                     click: function() {

packages/artplayer-document/docs/zh-cn/Questions/How to add setting panel.md

@@ -0,0 +1,44 @@
+---
+title: 怎么添加设置面板
+sidebar_position: 6
+---
+
+设置面板类似于列表选择的集合，而且支持多层嵌套
+
+### 切换字幕
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+
+                art.subtitle.url = item.url;
+                
+                return '你点击了 ' + item.html;
+            },
+        },
+    ],
+});
+```

packages/artplayer-document/docs/zh-cn/Questions/How to add setting.md

@@ -1,4 +0,0 @@
----
-title: 怎么添加设置面板
-sidebar_position: 6
----

packages/artplayer-document/docs/zh-cn/Questions/var.js

@@ -1,65 +0,0 @@
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://artplayer.org/assets/sample/video.mp4',
-    muted: true,
-    autoSize: true,
-    autoplay: true,
-    ads: [
-        {
-            url: '/assets/sample/test1.mp4'
-        },
-        {
-            url: '/assets/sample/test2.webm'
-        },
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '跳过广告',
-            click: function () {
-                art.ads.end();
-            },
-        },
-    ],
-    layers: [
-        {
-            html: '跳过广告',
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-            click: function () {
-                art.ads.end();
-            },
-        },
-    ],
-});
-
-// 当每个视频广告播放时触发
-art.on('ads:start', function(item) {
-    console.info('广告开始播放: ' + item.url);
-});
-
-// 当全部视频广告播放完成
-art.on('ads:end', function() {
-    console.info('广告已经结束');
-});
-
-// 当前广告的下标
-console.info(art.ads.index);
-
-// 广告是否已经结束
-console.info(art.ads.isEnd);
-
-// 广告是否正在播放
-console.info(art.ads.playing);
-
-// 上一个广告的对象
-console.info(art.ads.prev);
-
-// 当前广告的对象
-console.info(art.ads.current);
-
-// 下一个广告的对象
-console.info(art.ads.next);

packages/artplayer-plugin-danmuku/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artplayer-plugin-danmuku",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "expose": "artplayerPluginDanmuku",
   "description": "Danmuku plugin for ArtPlayer",
   "main": "dist/artplayer-plugin-danmuku.js",

packages/artplayer/src/setting/aspectRatio.js

@@ -5,11 +5,11 @@ export default function aspectRatio(art) {
         width: 150,
         html: i18n.get('Aspect Ratio'),
         icon: icons.aspectRatio,
-        children: ['default', '4:3', '16:9'].map((item) => {
+        selector: ['default', '4:3', '16:9'].map((item) => {
             return {
                 html: item === 'default' ? i18n.get('Default') : item,
                 current: item === 'default',
-                click() {
+                onSelect() {
                     art.aspectRatio = item;
                 },
             };

packages/artplayer/src/setting/flip.js

@@ -10,11 +10,11 @@ export default function playbackRate(art) {
     return {
         width: 150,
         html: i18n.get('Video Flip'),
-        children: Object.keys(keys).map((key) => {
+        selector: Object.keys(keys).map((key) => {
             return {
                 html: i18n.get(keys[key]),
                 current: key === 'normal',
-                click() {
+                onSelect() {
                     art.flip = key;
                 },
             };

packages/artplayer/src/setting/index.js

@@ -8,13 +8,13 @@ import { append, addClass, setStyle, inverseClass, includeFromEvent } from '../u
 function makeRecursion(option) {
     for (let index = 0; index < option.length; index++) {
         const item = option[index];
-        if (!item.back && item.children) {
+        if (!item.back && item.selector) {
-            item.children.unshift({
+            item.selector.unshift({
                 html: item.html,
-                children: option,
+                selector: option,
                 back: true,
             });
-            makeRecursion(item.children);
+            makeRecursion(item.selector);
         }
     }
     return option;
@@ -90,7 +90,7 @@ export default class Setting extends Component {
         } = this.art;
 
         const $item = document.createElement('div');
-        const hasChildren = item.children && item.children.length;
+        const hasChildren = item.selector && item.selector.length;
 
         const $left = append($item, `<div class="art-setting-item-left"></div>`);
         const $right = append($item, `<div class="art-setting-item-right"></div>`);
@@ -116,12 +116,12 @@ export default class Setting extends Component {
         }
 
         proxy($item, 'click', (event) => {
-            if (typeof item.click === 'function') {
+            if (typeof item.onSelect === 'function') {
-                item.click.call(this.art, this, event);
+                item.onSelect.call(this.art, this, event);
             }
 
             if (hasChildren) {
-                this.init(item.children);
+                this.init(item.selector);
                 setStyle(this.$parent, 'width', `${item.width || this.width}px`);
             } else {
                 inverseClass($item, 'art-current');

packages/artplayer/src/setting/playbackRate.js

@@ -5,11 +5,11 @@ export default function playbackRate(art) {
         width: 150,
         html: i18n.get('Play Speed'),
         icon: icons.playbackRate,
-        children: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((item) => {
+        selector: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((item) => {
             return {
                 html: item === 1.0 ? i18n.get('Normal') : item,
                 current: item === 1.0,
-                click() {
+                onSelect() {
                     art.playbackRate = item;
                 },
             };

packages/artplayer/src/setting/subtitleOffset.js

@@ -5,11 +5,11 @@ export default function subtitleOffset(art) {
         width: 150,
         html: i18n.get('Subtitle Offset'),
         icon: icons.subtitle,
-        children: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
+        selector: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
             return {
                 html: item === 0 ? i18n.get('Normal') : item,
                 current: item === 0,
-                click() {
+                onSelect() {
                     art.subtitleOffset = item;
                 },
             };

packages/artplayer/types/artplayer.d.ts

@@ -92,9 +92,14 @@ type SettingOption = {
     current?: boolean;
 
     /**
-     * Html string or html element of component
+     * Custom selector list, use in controls
      */
-    children?: SettingOption[];
+    selector?: SettingOption[];
+
+    /**
+     * When selector item click, use in controls
+     */
+    onSelect?(selector: Selector, element: HTMLElement): void;
 };
 
 type Component = {