添加旋转和翻转设置

packages/artplayer/src/setting/common.js

@@ -1,14 +0,0 @@
-import { append } from '../utils';
-
-export default class Common {
-  constructor(option) {
-    this.option = option;
-  }
-
-  apply(art, $setting) {
-    this.art = art;
-    this.$header = $setting.querySelector('.art-setting-header');
-    this.$body = $setting.querySelector('.art-setting-body');
-    append(this.$body, '———— 先占坑，暂无设置 ————');
-  }
-}

packages/artplayer/src/setting/flip.js

@@ -0,0 +1,27 @@
+import { append, inverseClass } from '../utils';
+
+export default class Flip {
+  constructor(option) {
+    this.option = option;
+  }
+
+  apply(art, $setting) {
+    const { i18n, events: { proxy }, player } = art;
+    this.$header = $setting.querySelector('.art-setting-header');
+    this.$body = append($setting, `
+      <div class="art-setting-body">
+        <span class="art-setting-btn" data-flip="horizontal">${i18n.get('Horizontal')}</span>
+        <span class="art-setting-btn" data-flip="vertical">${i18n.get('Vertical')}</span>
+      </div>
+    `);
+
+    proxy(this.$body, 'click', event => {
+      const { target } = event;
+      const { flip } = target.dataset;
+      if (flip) {
+        player.flip(flip);
+        inverseClass(target, 'current');
+      }
+    });
+  }
+}

packages/artplayer/src/setting/index.js

@@ -1,5 +1,6 @@
 import { setStyle, append, insertByIndex } from '../utils';
-import Common from './common';
+import Rotate from './rotate';
+import Flip from './flip';
 
 let id = 0;
 export default class Setting {
@@ -19,12 +20,19 @@ export default class Setting {
       this.hide();
     });
 
-    this.add(new Common({
-      name: 'common',
-      title: 'Common',
+    this.add(new Rotate({
+      name: 'rotate',
+      title: 'Rotate',
       disable: false,
       index: 10
     }));
+
+    this.add(new Flip({
+      name: 'flip',
+      title: 'Flip',
+      disable: false,
+      index: 20
+    }));
   }
 
   add(setting, callback) {
@@ -46,18 +54,16 @@ export default class Setting {
   }
 
   show() {
-    const { refs: { $setting }, i18n, notice } = this.art;
+    const { refs: { $setting } } = this.art;
     setStyle($setting, 'display', 'flex');
     this.state = true;
-    notice.show(i18n.get('Show setting'));
     this.art.emit('setting:show', $setting);
   }
 
   hide() {
-    const { refs: { $setting }, i18n, notice } = this.art;
+    const { refs: { $setting } } = this.art;
     setStyle($setting, 'display', 'none');
     this.state = false;
-    notice.show(i18n.get('Hide setting'));
     this.art.emit('setting:hide', $setting);
   }
 

packages/artplayer/src/setting/rotate.js

@@ -0,0 +1,29 @@
+import { append, inverseClass } from '../utils';
+
+export default class Rotate {
+  constructor(option) {
+    this.option = option;
+  }
+
+  apply(art, $setting) {
+    const { events: { proxy }, player } = art;
+    this.$header = $setting.querySelector('.art-setting-header');
+    this.$body = append($setting, `
+      <div class="art-setting-body">
+        <span class="art-setting-btn" data-rotate="0">0°</span>
+        <span class="art-setting-btn" data-rotate="90">90°</span>
+        <span class="art-setting-btn" data-rotate="180">180°</span>
+        <span class="art-setting-btn" data-rotate="270">270°</span>
+      </div>
+    `);
+
+    proxy(this.$body, 'click', event => {
+      const { target } = event;
+      const { rotate } = target.dataset;
+      if (rotate) {
+        player.rotate(Number(rotate));
+        inverseClass(target, 'current');
+      }
+    });
+  }
+}