update

packages/artplayer/src/setting/aspectRatio.js

@@ -6,6 +6,7 @@ export default function aspectRatio(art) {
         items: ['default', '4:3', '16:9'].map((item) => {
             return {
                 html: item === 'default' ? i18n.get('Default') : item,
+                current: item === 'default',
                 click() {
                     art.aspectRatio = item;
                 },

packages/artplayer/src/setting/flip.js

@@ -13,6 +13,7 @@ export default function playbackRate(art) {
         items: Object.keys(keys).map((key) => {
             return {
                 html: i18n.get(keys[key]),
+                current: key === 'normal',
                 click() {
                     art.flip = key;
                 },

packages/artplayer/src/setting/index.js

@@ -35,9 +35,22 @@ export default class Setting extends Component {
         this.name = 'setting';
         this.$parent = $setting;
         this.events = [];
+        this.option = [];
 
         if (option.setting) {
-            this.option = makeRecursion([playbackRate(art), aspectRatio(art), flip(art)]);
+            if (option.playbackRate) {
+                this.option.push(playbackRate(art));
+            }
+
+            if (option.aspectRatio) {
+                this.option.push(aspectRatio(art));
+            }
+
+            if (option.flip) {
+                this.option.push(flip(art));
+            }
+
+            this.option = makeRecursion(this.option);
 
             art.once('ready', () => {
                 this.init(this.option);
@@ -51,18 +64,18 @@ export default class Setting extends Component {
     }
 
     creatItem(item, option) {
-        const { icons } = this.art;
-        const hasItems = item.items && item.items.length;
-
         const $item = document.createElement('div');
+        const $left = append($item, `<div class="art-setting-item-left"></div>`);
+        const $right = append($item, `<div class="art-setting-item-right"></div>`);
+
+        const { icons } = this.art;
         addClass($item, 'art-setting-item');
+        const hasItems = item.items && item.items.length;
 
         if (item.current && !hasItems) {
             addClass($item, 'art-current');
         }
 
-        const $left = append($item, `<div class="art-setting-item-left"></div>`);
-
         if (item.goBack) {
             append($left, icons.arrowLeft);
             addClass($item, 'art-setting-item-back');
@@ -76,8 +89,6 @@ export default class Setting extends Component {
 
         append($left, item.html);
 
-        const $right = append($item, `<div class="art-setting-item-right"></div>`);
-
         if (hasItems && !item.goBack) {
             append($right, icons.arrowRight);
         }
@@ -107,8 +118,8 @@ export default class Setting extends Component {
         return $item;
     }
 
-    add(item) {
-        this.option.push(item);
+    add(callback) {
+        this.option.push(callback(this.art));
         this.option = makeRecursion(this.option);
         this.init(this.option);
     }

packages/artplayer/src/setting/playbackRate.js

@@ -6,6 +6,7 @@ export default function playbackRate(art) {
         items: [0.25, 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0].map((item) => {
             return {
                 html: item === 1.0 ? i18n.get('Normal') : item,
+                current: item === 1.0,
                 click() {
                     art.playbackRate = item;
                 },