update

packages/artplayer-document/docs/zh-cn/Questions/Create button in the controls.md

@@ -0,0 +1,25 @@
+---
+title: 在控制栏添加按钮
+sidebar_position: 2
+---
+
+有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 `bootstrap`
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: '<button type="button">Click Me!</button>',
+            click: function (_, event) {
+                // 第二个参数是事件对象
+                event.target.innerText = 'You Clicked';
+            },
+        },
+    ],
+});
+```

packages/artplayer-document/docs/zh-cn/Questions/Create selector in the controls.md

@@ -3,7 +3,7 @@ title: 在控制栏添加列表
 sidebar_position: 1
 ---
 
-有时你需要在控制栏自定义下拉列表，那么你可以在添加控件的时候使用 `selector` 和 `onSelect` 属性
+有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 `selector` 和 `onSelect` 属性
 
 <div className="run-code">▶ Run Code</div>
 
@@ -17,20 +17,19 @@ var art = new Artplayer({
             html: 'Subtitle 01',
             selector: [
                 {
-                    html: '<span>Subtitle 01</span>',
+                    html: '<span style="color:red">Subtitle 01</span>',
                     url: '/assets/sample/subtitle.srt?id=1',
                 },
                 {
-                    html: '<span>Subtitle 02</span>',
+                    html: '<span style="color:yellow">Subtitle 02</span>',
                     url: '/assets/sample/subtitle.srt?id=2',
                 },
             ],
-            onSelect: function (item) {
+            onSelect: function (item, $dom) {
                 art.subtitle.switch(item.url, {
-                    name: item.html,
+                    name: $dom.innerText,
                 });
 
-                // 你可以返回一个字符串，用于替换被选择的文案
                 return '你点击了' + item.html;
             },
         },

packages/artplayer/src/utils/component.js

@@ -115,19 +115,18 @@ export default class Component {
         proxy($list, 'click', (event) => {
             const path = event.composedPath() || [];
             const $item = path.find((item) => hasClass(item, 'art-selector-item'));
-            if ($item) {
-                const index = Number($item.dataset.index);
-                const find = option.selector[index] || {};
-                $value.innerText = $item.innerText;
-                if (option.onSelect) {
-                    const result = option.onSelect.call(this.art, find);
-                    if (typeof result === 'string') {
-                        $value.innerHTML = result;
-                    }
+            if (!$item) return;
+            const index = Number($item.dataset.index);
+            const find = option.selector[index] || {};
+            $value.innerText = $item.innerText;
+            if (option.onSelect) {
+                const result = option.onSelect.call(this.art, find, $item);
+                if (typeof result === 'string') {
+                    $value.innerHTML = result;
                 }
-                setLeft();
-                this.art.emit('selector', find);
             }
+            setLeft();
+            this.art.emit('selector', find, $item);
         });
     }
 }