添加旋转和翻转设置

packages/artplayer/src/events/hoverInit.js

@@ -8,7 +8,6 @@ export default function hoverInit(art, events) {
     },
     () => {
       $player.classList.remove('artplayer-hover');
-      $player.classList.remove('artplayer-hide-cursor');
       art.emit('hoverleave');
     }
   );

packages/artplayer/src/events/mousemoveInit.js

@@ -11,6 +11,11 @@ export default function mousemoveInitInit(art, events) {
     }
   }, 5000);
 
+  art.on('hoverleave', () => {
+    hideCursor.clearTimeout();
+    $player.classList.remove('artplayer-hide-cursor');
+  });
+
   events.proxy($player, 'mousemove', () => {
     $player.classList.remove('artplayer-hide-cursor');
     art.controls.show();

packages/artplayer/src/i18n.js

@@ -9,6 +9,10 @@ let i18nMap = {
     'Pause': '暂停',
     'Rate': '速度',
     'Mute': '静音',
+    'Rotate': '旋转',
+    'Flip': '翻转',
+    'Horizontal': '水平',
+    'Vertical': '垂直',
     'Reconnect': '重新连接',
     'Hide subtitle': '隐藏字幕',
     'Show subtitle': '显示字幕',
@@ -25,9 +29,6 @@ let i18nMap = {
     'Exit fullscreen': '退出全屏',
     'Web fullscreen': '网页全屏',
     'Exit web fullscreen': '退出网页全屏',
-    'Common': '常规',
-    'Hide setting': '隐藏设置',
-    'Show setting': '显示设置',
     'Mini player': '迷你播放器'
   },
   'zh-tw': {
@@ -40,6 +41,10 @@ let i18nMap = {
     'Pause': '暫停',
     'Rate': '速度',
     'Mute': '靜音',
+    'Rotate': '旋轉',
+    'Flip': '翻轉',
+    'Horizontal': '水平',
+    'Vertical': '垂直',
     'Reconnect': '重新連接',
     'Hide subtitle': '隱藏字幕',
     'Show subtitle': '顯示字幕',
@@ -56,9 +61,6 @@ let i18nMap = {
     'Exit fullscreen': '退出全屏',
     'Web fullscreen': '網頁全屏',
     'Exit web fullscreen': '退出網頁全屏',
-    'Common': '常規',
-    'Hide setting': '隱藏設置',
-    'Show setting': '顯示設置',
     'Mini player': '迷你播放器'
   }
 };

packages/artplayer/src/player/flipMix.js

@@ -0,0 +1,17 @@
+import { errorHandle } from '../utils';
+
+export default function flipMix(art, player) {
+  Object.defineProperty(player, 'flip', {
+    value: dir => {
+      const dirList = ['horizontal', 'vertical'];
+      errorHandle(dirList.includes(dir), `The 'angle' need to be one of '[horizontal, vertical]', but got ${dir}`);
+      art.refs.$player.dataset.flip = dir;
+    }
+  });
+
+  Object.defineProperty(player, 'flipRemove', {
+    value: () => {
+      delete art.refs.$player.dataset.flip;
+    }
+  });
+}

packages/artplayer/src/player/index.js

@@ -18,6 +18,8 @@ import pipMix from './pipMix';
 import loadedMix from './loadedMix';
 import playedMix from './playedMix';
 import autoSizeMix from './autoSizeMix';
+import rotateMix from './rotateMix';
+import flipMix from './flipMix';
 
 export default class Player {
   constructor(art) {
@@ -41,5 +43,7 @@ export default class Player {
     loadedMix(art, this);
     playedMix(art, this);
     autoSizeMix(art, this);
+    rotateMix(art, this);
+    flipMix(art, this);
   }
 }

packages/artplayer/src/player/rotateMix.js

@@ -0,0 +1,17 @@
+import { errorHandle } from '../utils';
+
+export default function rotateMix(art, player) {
+  Object.defineProperty(player, 'rotate', {
+    value: angle => {
+      const angleList = [0, 90, 180, 270];
+      errorHandle(angleList.includes(angle), `The 'angle' need to be one of '[0, 90, 180, 270]', but got ${angle}`);
+      art.refs.$player.dataset.rotate = angle;
+    }
+  });
+
+  Object.defineProperty(player, 'rotateRemove', {
+    value: () => {
+      delete art.refs.$player.dataset.rotate;
+    }
+  });
+}

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');
+      }
+    });
+  }
+}

packages/artplayer/src/style/flip.scss

@@ -0,0 +1,13 @@
+.artplayer-video-player {
+    &[data-flip] {
+        //
+    }
+
+    &[data-flip="horizontal"] {
+        //
+    }
+
+    &[data-flip="vertical"] {
+        //
+    }
+}

packages/artplayer/src/style/index.js

@@ -14,3 +14,5 @@ import './aspectRatio.scss';
 import './fullscreenWeb.scss';
 import './pip.scss';
 import './autoSize.scss';
+import './flip.scss';
+import './rotate.scss';

packages/artplayer/src/style/rotate.scss

@@ -0,0 +1,21 @@
+.artplayer-video-player {
+    &[data-rotate] {
+        //
+    }
+
+    &[data-rotate="0"] {
+        //
+    }
+
+    &[data-rotate="90"] {
+        //
+    }
+
+    &[data-rotate="180"] {
+        //
+    }
+
+    &[data-rotate="270"] {
+        //
+    }
+}

packages/artplayer/src/style/setting.scss

@@ -50,5 +50,21 @@
                 cursor: pointer;
             }
         }
+
+        .art-setting-btn {
+            display: inline-block;
+            padding: 2px 5px;
+            min-width: 50px;
+            text-align: center;
+            color: #fff;
+            border: 1px solid #fff;
+            margin-right: 10px;
+            border-radius: 3px;
+            cursor: pointer;
+
+            &:hover, &.current {
+                background: #fff;
+            }
+        }
     }
 }