update

packages/artplayer-document/docs/zh-cn/Questions/1.User Registration.md

@@ -1,4 +0,0 @@
----
-title: 用户创建
-sidebar_position: 1
----

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

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

packages/artplayer/src/utils/component.js

@@ -96,31 +96,37 @@ export default class Component {
         $ref.innerText = '';
         append($ref, $value);
 
-        const list = option.selector.map((item) => `<div class="art-selector-item">${item.name}</div>`).join('');
+        const list = option.selector
+            .map((item, index) => `<div class="art-selector-item" data-index="${index}">${item.html}</div>`)
+            .join('');
         const $list = document.createElement('div');
         addClass($list, 'art-selector-list');
         append($list, list);
         append($ref, $list);
 
         const setLeft = () => {
-            $list.style.left = `-${getStyle($list, 'width') / 2 - getStyle($ref, 'width') / 2}px`;
+            const left = getStyle($ref, 'width') / 2 - getStyle($list, 'width') / 2;
+            console.log(getStyle($list, 'width'), getStyle($ref, 'width'));
+            $list.style.left = `${left}px`;
         };
 
         hover($ref, setLeft);
 
-        proxy($ref, 'click', (event) => {
-            if (hasClass(event.target, 'art-selector-item')) {
-                const name = event.target.innerText;
-                if ($value.innerText === name) return;
-                const find = option.selector.find((item) => item.name === name);
-                $value.innerText = name;
-                setLeft();
-                if (find) {
-                    if (option.onSelect) {
-                        option.onSelect.call(this.art, find);
+        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;
                     }
-                    this.art.emit('selector', find);
                 }
+                setLeft();
+                this.art.emit('selector', find);
             }
         });
     }