add settings

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

@@ -618,6 +618,62 @@ var art = new Artplayer({
 });
 ```
 
+## settings
+
+-   Type: `Array`
+-   Default: `[]`
+
+Initialize custom setting panel
+
+| Property  | Type                | Description                                                   |
+| --------- | ------------------- | ------------------------------------------------------------- |
+| `disable` | `Boolean`           | Whether to disable the component                              |
+| `name`    | `String`            | The unique name of the component, used to mark the class name |
+| `index`   | `Number`            | Component index, priority for display                         |
+| `html`    | `String`、`Element` | DOM element of the component                                  |
+| `style`   | `Object`            | Component style object                                        |
+| `click`   | `Function`          | Component click event                                         |
+| `mounted` | `Function`          | Triggered after the component is mounted                      |
+| `tooltip` | `String`            | Prompt text of the component                                  |
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            disable: false,
+            name: 'button',
+            index: 10,
+            html: 'Custom button1',
+            tooltip: 'Custom button1',
+            style: {
+                color: 'red',
+            },
+            click: function () {
+                console.log('You clicked custom button 1');
+            },
+            mounted: function () {
+                console.log('Custom button mounting is complete 1');
+            },
+        },
+        {
+            html: 'Custom button2',
+            tooltip: 'Custom button2',
+            style: {
+                color: 'green',
+            },
+            click: function () {
+                console.log('You clicked custom button 2');
+            },
+        },
+    ],
+});
+```
+
 ## contextmenu
 
 -   Type: `Array`

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

@@ -618,6 +618,62 @@ var art = new Artplayer({
 });
 ```
 
+## settings
+
+-   类型: `Array`
+-   默认: `[]`
+
+初始化自定义的设置面板
+
+| 属性      | 类型                | 描述                       |
+| --------- | ------------------- | -------------------------- |
+| `disable` | `Boolean`           | 是否禁用组件               |
+| `name`    | `String`            | 组件唯一名称，用于标记类名 |
+| `index`   | `Number`            | 组件索引，用于显示的优先级 |
+| `html`    | `String`、`Element` | 组件的 DOM 元素            |
+| `style`   | `Object`            | 组件样式对象               |
+| `click`   | `Function`          | 组件点击事件               |
+| `mounted` | `Function`          | 组件挂载后触发             |
+| `tooltip` | `String`            | 组件的提示文本             |
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            disable: false,
+            name: 'button',
+            index: 10,
+            html: '自定义按钮',
+            tooltip: '自定义按钮的提示1',
+            style: {
+                color: 'red',
+            },
+            click: function () {
+                console.log('你点击了自定义按钮1');
+            },
+            mounted: function () {
+                console.log('自定义按钮挂载完成1');
+            },
+        },
+        {
+            html: '自定义按钮2',
+            tooltip: '自定义按钮的提示2',
+            style: {
+                color: 'green',
+            },
+            click: function () {
+                console.log('你点击了自定义按钮2');
+            },
+        },
+    ],
+});
+```
+
 ## contextmenu
 
 -   类型: `Array`

packages/artplayer-document/docs/zh-cn/Questions/Handle single component.md

@@ -50,13 +50,13 @@ art.on('ready', () => {
         }
     });
 
-    // Use the query method to get the DOM element of the component
+    // 使用查询 query 获取组件的DOM元素
     var $layer1 = art.query('.art-layer-layer1');
     var $contextmenu1 = art.query('.art-contextmenu-contextmenu1');
     var $control1 = art.query('.art-control-control1');
     var $setting1 = art.query('.art-setting-setting1');
 
-    // Recommended use the name to get the DOM element of the component
+    // 推荐使用 name 获取组件的DOM元素
     var $layer1 = art.layers['layer1'];
     var $contextmenu1 = art.contextmenu['contextmenu1'];
     var $control1 = art.controls['control1'];

packages/artplayer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "artplayer",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "expose": "Artplayer",
   "description": "ArtPlayer.js is a modern and full featured HTML5 video player",
   "main": "dist/artplayer.js",

packages/artplayer/src/index.js

@@ -138,6 +138,7 @@ export default class Artplayer extends Emitter {
             layers: [],
             contextmenu: [],
             controls: [],
+            settings: [],
             quality: [],
             highlight: [],
             plugins: [],

packages/artplayer/src/scheme/index.js

@@ -65,6 +65,7 @@ export default {
     whitelist: [`${s}|${f}|${r}`],
     layers: [component],
     contextmenu: [component],
+    settings: [component],
     controls: [
         {
             ...component,

packages/artplayer/src/setting/index.js

@@ -20,8 +20,8 @@ export default class Setting extends Component {
 
         if (option.setting) {
             art.once('ready', () => {
-                proxy($setting, 'click', e => {
+                proxy($setting, 'click', (event) => {
-                    if (e.target === $setting) {
+                    if (event.target === $setting) {
                         this.show = false;
                     }
                 });
@@ -53,6 +53,10 @@ export default class Setting extends Component {
                         name: 'playbackRate',
                     }),
                 );
+
+                option.settings.forEach((item) => {
+                    this.add(item);
+                });
             });
 
             art.on('blur', () => {

packages/artplayer/types/artplayer.d.ts

@@ -53,6 +53,7 @@ export default class Artplayer {
         layers?: Component[];
         contextmenu?: Component[];
         controls?: Component[];
+        settings?: Component[];
         quality?: {
             default?: boolean;
             html: string;