update docs

packages/artplayer-document/docs/en/Questions/How_to_add_setting_panel.mdx

@@ -3,6 +3,8 @@ title: How to add setting panel
 sidebar_position: 6
 ---
 
+## Add selector list
+
 Settings panels are similar to a collection of list selections, and support multi-layer nested
 
 | Property   | Type                | Description              |
@@ -41,8 +43,8 @@ var art = new Artplayer({
                     url: '/assets/sample/subtitle.srt?id=2',
                 },
             ],
-            onSelect: function(item, $dom) {
-                console.info(item, $dom);
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
                 art.subtitle.url = item.url;
 
                 // Change the tooltip
@@ -68,8 +70,8 @@ var art = new Artplayer({
                     url: '/assets/sample/video.mp4?id=360',
                 },
             ],
-            onSelect: function(item, $dom) {
-                console.info(item, $dom);
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
                 art.switchQuality(item.url, item.html);
 
                 // Change the tooltip
@@ -106,3 +108,67 @@ var art = new Artplayer({
     ],
 });
 ```
+
+## Add switch button
+
+| Property   | Type                | Description              |
+| ---------- | ------------------- | ------------------------ |
+| `html`     | `String`、`Element` | DOM elements of selector |
+| `icon`     | `String`、`Element` | Icon of selector         |
+| `switch`   | `Boolean`           | Button default state     |
+| `onSwitch` | `Function`          | Button toggle event      |
+
+<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: 'PIP Mode',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+
+                // Change the switch state
+                return nextState;
+            },
+        },
+        {
+            html: 'Use with selector',
+            width: 200,
+            selector: [
+                {
+                    default: true,
+                    html: 'Setting 01',
+                },
+                {
+                    html: 'Setting 02',
+                },
+                {
+                    html: 'Setting 03',
+                    switch: false,
+                    onSwitch: function (item, $dom, event) {
+                        return !item.switch;
+                    },
+                },
+                {
+                    html: 'Setting 04',
+                    switch: true,
+                    onSwitch: function (item, $dom, event) {
+                        return !item.switch;
+                    },
+                },
+            ],
+        },
+    ],
+});
+```

packages/artplayer-document/docs/zh-cn/Questions/How_to_add_setting_panel.mdx

@@ -3,6 +3,8 @@ title: 怎么添加设置面板
 sidebar_position: 6
 ---
 
+## 添加选择列表
+
 设置面板类似于列表选择的集合，而且支持多层嵌套
 
 | 属性       | 类型                | 描述            |
@@ -41,8 +43,8 @@ var art = new Artplayer({
                     url: '/assets/sample/subtitle.srt?id=2',
                 },
             ],
-            onSelect: function(item, $dom) {
-                console.info(item, $dom);
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
                 art.subtitle.url = item.url;
 
                 // 改变提示文本
@@ -68,8 +70,8 @@ var art = new Artplayer({
                     url: '/assets/sample/video.mp4?id=360',
                 },
             ],
-            onSelect: function(item, $dom) {
-                console.info(item, $dom);
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
                 art.switchQuality(item.url, item.html);
 
                 // 改变提示文本
@@ -106,3 +108,69 @@ var art = new Artplayer({
     ],
 });
 ```
+
+## 添加切换按钮
+
+设置面板类似于列表选择的集合，而且支持多层嵌套
+
+| 属性       | 类型                | 描述            |
+| ---------- | ------------------- | --------------- |
+| `html`     | `String`、`Element` | 元素的 DOM 元素 |
+| `icon`     | `String`、`Element` | 元素的图标      |
+| `switch`   | `Boolean`           | 按钮默认状态    |
+| `onSwitch` | `Function`          | 按钮切换事件    |
+
+<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: '画中画模式',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+
+                // 改变按钮状态
+                return nextState;
+            },
+        },
+        {
+            html: '和列表组合',
+            width: 200,
+            selector: [
+                {
+                    default: true,
+                    html: '设置 01',
+                },
+                {
+                    html: '设置 02',
+                },
+                {
+                    html: '设置 03',
+                    switch: false,
+                    onSwitch: function (item, $dom, event) {
+                        return !item.switch;
+                    },
+                },
+                {
+                    html: '设置 04',
+                    switch: true,
+                    onSwitch: function (item, $dom, event) {
+                        return !item.switch;
+                    },
+                },
+            ],
+        },
+    ],
+});
+```

packages/artplayer/package.json

@@ -1,7 +1,7 @@
 {
     "license": "MIT",
     "name": "artplayer",
-    "version": "4.3.23",
+    "version": "4.3.24",
     "main": "dist/artplayer.js",
     "types": "types/artplayer.d.ts",
     "homepage": "https://artplayer.org",

packages/artplayer/src/icons/switch-off.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#ffffff" d="M687.814 197.137H336.186c-175.814 0-319.67 141.708-319.67 314.88s143.856 314.846 319.67 314.846h351.612c175.83 0 319.686-141.675 319.686-314.846s-143.856-314.88-319.67-314.88zM335.591 756.57c-135.085 0-244.57-109.502-244.57-244.554 0-135.07 109.485-244.555 244.57-244.555 135.053 0 244.538 109.486 244.538 244.555 0 135.052-109.485 244.554-244.538 244.554z" />
+<svg class="icon" width="26" height="26" viewBox="0 0 1740 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#ffffff" d="M511.8976 1024h670.5152c282.4192-0.4096 511.1808-229.4784 511.1808-511.8976 0-282.4192-228.7616-511.488-511.1808-511.8976H511.8976C229.4784 0.6144 0.7168 229.6832 0.7168 512.1024c0 282.4192 228.7616 511.488 511.1808 511.8976zM511.3344 48.64A464.5888 464.5888 0 1 1 48.0256 513.024 463.872 463.872 0 0 1 511.3344 48.4352V48.64z" />
 </svg>

packages/artplayer/src/icons/switch-on.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg class="icon" width="200px" height="120.05px" viewBox="0 0 1706 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#ffffff" d="M1053.866667 827.733333c170.666667 0 311.466667-136.533333 311.466666-307.2S1224.533333 213.333333 1053.866667 213.333333h-396.8C482.133333 213.333333 341.333333 349.866667 341.333333 520.533333s140.8 307.2 311.466667 307.2h401.066667zM1049.6 256c145.066667 0 264.533333 119.466667 264.533333 264.533333s-119.466667 264.533333-264.533333 264.533334-264.533333-119.466667-264.533333-264.533334S904.533333 256 1049.6 256z"  />
+<svg class="icon" width="26" height="26" viewBox="0 0 1664 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path fill="#648FFC" d="M1152 0H512a512 512 0 0 0 0 1024h640a512 512 0 0 0 0-1024z m0 960a448 448 0 1 1 448-448 448 448 0 0 1-448 448z"  />
 </svg>

packages/artplayer/src/setting/index.js

@@ -240,22 +240,63 @@ export default class Setting extends Component {
         append($icon, item.icon || icons.config);
         append($left, $icon);
 
+        item._$icon = $icon;
+
+        def(item, 'icon', {
+            get() {
+                return $icon.innerHTML;
+            },
+            set(value) {
+                if (typeof value === 'string' || typeof value === 'number') {
+                    $icon.innerHTML = value;
+                }
+            },
+        });
+
         const $html = document.createElement('div');
         addClass($html, 'art-setting-item-left-text');
         append($html, item.html || '');
         append($left, $html);
+        item._$html = $html;
+
+        def(item, 'html', {
+            get() {
+                return $html.innerHTML;
+            },
+            set(value) {
+                if (typeof value === 'string' || typeof value === 'number') {
+                    $html.innerHTML = value;
+                }
+            },
+        });
 
         const $switch = document.createElement('div');
-        addClass($switch, 'art-setting-item-right-switch');
-        append($switch, item.switch ? icons.switchOn : icons.switchOff);
+        addClass($switch, 'art-setting-item-right-icon');
+        const $switchOn = append($switch, icons.switchOn);
+        const $switchOff = append($switch, icons.switchOff);
+        setStyle(item.switch ? $switchOff : $switchOn, 'display', 'none');
         append($right, $switch);
+        item._$switch = item.switch;
+
+        def(item, 'switch', {
+            get() {
+                return item._$switch;
+            },
+            set(value) {
+                item._$switch = value;
+                if (value) {
+                    setStyle($switchOff, 'display', 'none');
+                    setStyle($switchOn, 'display', null);
+                } else {
+                    setStyle($switchOff, 'display', null);
+                    setStyle($switchOn, 'display', 'none');
+                }
+            },
+        });
 
         const event = proxy($item, 'click', async (event) => {
             if (item.onSwitch) {
-                const result = await item.onSwitch.call(this.art, item, $item, event);
-                item.switch = result;
-                $switch.innerHTML = '';
-                append($switch, result ? icons.switchOn : icons.switchOff);
+                item.switch = await item.onSwitch.call(this.art, item, $item, event);
             }
         });
 

packages/artplayer/src/style/setting.less

@@ -84,7 +84,6 @@
                         justify-content: center;
                         align-items: center;
                         height: 24px;
-                        width: 24px;
                     }
                 }
             }