update

packages/artplayer/src/icons/arrow-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 32 32" width="100%"><path d="M 19.41,20.09 14.83,15.5 19.41,10.91 18,9.5 l -6,6 6,6 z" fill="#fff" /></svg>

packages/artplayer/src/icons/index.js

@@ -10,6 +10,7 @@ import screenshot from './screenshot.svg';
 import setting from './setting.svg';
 import fullscreen from './fullscreen.svg';
 import fullscreenWeb from './fullscreen-web.svg';
+import arrowLeft from './arrow-left.svg';
 import arrowRight from './arrow-right.svg';
 import pip from './pip.svg';
 
@@ -27,6 +28,7 @@ export default class Icons {
             setting,
             fullscreen,
             fullscreenWeb,
+            arrowLeft,
             arrowRight,
             pip,
             ...art.option.icons,

packages/artplayer/src/setting/index.js

@@ -1,28 +1,23 @@
 import Component from '../utils/component';
-import { append, addClass } from '../utils/dom';
-
+import { append, addClass, setStyle } from '../utils/dom';
 import playbackRate from './playbackRate';
 
 export default class Setting extends Component {
     constructor(art) {
         super(art);
 
-        this.art = art;
-        this.name = 'setting';
-
         const {
             option,
             template: { $setting },
         } = art;
 
+        this.art = art;
+        this.name = 'setting';
         this.$parent = $setting;
-
         this.events = [];
-        this.parentItem = null;
-        this.parentList = [];
 
         if (option.setting) {
-            this.option = [playbackRate(art), playbackRate(art), playbackRate(art)];
+            this.option = this.makeRecursion([playbackRate(art), playbackRate(art), playbackRate(art)]);
 
             art.once('ready', () => {
                 this.init(this.option);
@@ -35,26 +30,27 @@ export default class Setting extends Component {
         }
     }
 
-    creatItme(item, option) {
-        const { icons } = this.art;
-
+    creatItem(item) {
         const $item = document.createElement('div');
         addClass($item, 'art-setting-item');
         append($item, `<div class="art-setting-item-left">${item.html}</div>`);
         const $right = append($item, `<div class="art-setting-item-right"></div>`);
+        const hasItems = item.items && item.items.length;
 
-        if (item.items && item.items.length) {
-            append($right, icons.arrowRight);
+        if (hasItems) {
+            append($right, this.art.icons.arrowRight);
         }
 
         const callback = (event) => {
             if (typeof item.click === 'function') {
                 item.click.call(this, event);
             }
-            if (item.items && item.items.length) {
-                this.parentItem = item;
-                this.parentList = option;
+
+            if (hasItems) {
                 this.init(item.items);
+                if (item.width) {
+                    setStyle(this.$parent, 'width', `${item.width}px`);
+                }
             }
         };
 
@@ -64,6 +60,16 @@ export default class Setting extends Component {
         return $item;
     }
 
+    makeRecursion(option) {
+        return option;
+    }
+
+    add(item) {
+        this.option.push(item);
+        this.option = this.makeRecursion(this.option);
+        this.init(this.option);
+    }
+
     init(option) {
         for (let index = 0; index < this.events.length; index++) {
             this.events[index]();
@@ -71,19 +77,11 @@ export default class Setting extends Component {
 
         this.events = [];
         this.$parent.innerHTML = '';
-
-        if (this.parentList === this.option) {
-            this.parentItem = null;
-            this.parentList = [];
-        }
-
-        if (this.parentItem) {
-            //
-        }
+        setStyle(this.$parent, 'width', '200px');
 
         for (let index = 0; index < option.length; index++) {
             const item = option[index];
-            const $item = this.creatItme(item, option);
+            const $item = this.creatItem(item);
             append(this.$parent, $item);
         }
     }

packages/artplayer/src/setting/playbackRate.js

@@ -10,6 +10,7 @@ export default function playbackRate(art) {
                 click: () => console.log(1),
             },
             {
+                width: 150,
                 html: '222',
                 click: () => console.log(2),
                 items: [

packages/artplayer/src/style/setting.scss

@@ -5,7 +5,7 @@
         position: absolute;
         z-index: 90;
         right: 10px;
-        bottom: 60px;
+        bottom: 50px;
         width: 200px;
         max-height: 300px;
         overflow: auto;
@@ -14,6 +14,20 @@
         background-color: rgba(0, 0, 0, 0.9);
         transition: all 0.1s ease;
 
+        .art-setting-item-header {
+            display: flex;
+            align-items: center;
+            height: 35px;
+            line-height: 1;
+            padding-left: 5px;
+            cursor: pointer;
+
+            .art-icon {
+                width: 30px;
+                height: 30px;
+            }
+        }
+
         .art-setting-item {
             display: flex;
             justify-content: space-between;