add settings

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 => {
-                    if (e.target === $setting) {
+                proxy($setting, 'click', (event) => {
+                    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;