Merge pull request #548 from YuRiJinX/window-rotate

feat: window rotate
chiflix · Mar 30, 2019 · a4f1a43 · a4f1a43
2 parents 46a504c + 02222e1
commit a4f1a43
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 8 deletions.
diff --git a/src/renderer/components/PlayingView.vue b/src/renderer/components/PlayingView.vue
@@ -28,6 +28,7 @@ export default {
     },
   },
   mounted() {
+    this.$store.dispatch('initWindowRotate');
     this.$electron.ipcRenderer.send('callMainWindowMethod', 'setMinimumSize', [320, 180]);
     videodata.checkTick();
     videodata.onTick = this.onUpdateTick;

diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue
@@ -93,6 +93,7 @@ export default {
       }
       this.lastPlayedTime = 0;
       this.$bus.$emit('video-loaded');
+      this.changeWindowRotate(this.winAngle);
       this.changeWindowSize();
     },
     onAudioTrack(event) {
@@ -106,10 +107,12 @@ export default {
         window.screen.availWidth, window.screen.availHeight,
       ];
       if (this.videoExisted) {
+        const videoSize = this.winAngle === 0 || this.winAngle === 180 ?
+          [this.videoWidth, this.videoHeight] : [this.videoHeight, this.videoWidth];
         newSize = this.calculateWindowSize(
           [320, 180],
           this.winSize,
-          [this.videoWidth, this.videoHeight],
+          videoSize,
           true,
           getWindowRect().slice(2, 4),
         );
@@ -133,6 +136,33 @@ export default {
       this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', rect.slice(0, 2));
       this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [rect.slice(2, 4)[0] / rect.slice(2, 4)[1]]);
     },
+    changeWindowRotate(val) {
+      switch (val) {
+        case 90:
+        case 270:
+          if (!this.isFullScreen) {
+            requestAnimationFrame(() => {
+              this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${this.ratio}, ${this.ratio})`);
+            });
+          } else {
+            requestAnimationFrame(() => {
+              const newWidth = window.screen.height;
+              const newHeight = newWidth / this.ratio;
+              const scale1 = newWidth / window.screen.width;
+              const scale2 = newHeight / window.screen.height;
+              this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${scale1}, ${scale2})`);
+            });
+          }
+          break;
+        case 0:
+        case 180:
+          requestAnimationFrame(() => {
+            this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg)`);
+          });
+          break;
+        default: break;
+      }
+    },
     async saveScreenshot(videoPath) {
       const { videoElement } = this;
       const canvas = this.$refs.thumbnailCanvas;
@@ -180,7 +210,7 @@ export default {
   computed: {
     ...mapGetters([
       'originSrc', 'convertedSrc', 'volume', 'muted', 'rate', 'paused', 'duration', 'ratio', 'currentAudioTrackId', 'enabledSecondarySub',
-      'winSize', 'winPos', 'isFullScreen', 'winHeight', 'chosenStyle', 'chosenSize', 'nextVideo', 'loop', 'playinglistRate', 'playingList']),
+      'winSize', 'winPos', 'winAngle', 'isFullScreen', 'winWidth', 'winHeight', 'chosenStyle', 'chosenSize', 'nextVideo', 'loop', 'playinglistRate', 'playingList']),
     ...mapGetters({
       videoWidth: 'intrinsicWidth',
       videoHeight: 'intrinsicHeight',
@@ -191,6 +221,9 @@ export default {
     this.updatePlayinglistRate({ oldDir: '', newDir: path.dirname(this.originSrc), playingList: this.playingList });
   },
   watch: {
+    winAngle(val) {
+      this.changeWindowRotate(val);
+    },
     originSrc(val, oldVal) {
       this.saveScreenshot(oldVal);
       this.$bus.$emit('show-speedlabel');
@@ -215,10 +248,89 @@ export default {
     });
     this.videoElement = this.$refs.videoCanvas.videoElement();
     this.$bus.$on('toggle-fullscreen', () => {
-      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [!this.isFullScreen]);
-      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [this.ratio]);
+      if (!this.isFullScreen) {
+        if (this.winAngle === 90 || this.winAngle === 270) {
+          requestAnimationFrame(() => {
+            const newWidth = window.screen.height;
+            const newHeight = newWidth / this.ratio;
+            const scale1 = newWidth / window.screen.width;
+            const scale2 = newHeight / window.screen.height;
+            this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${scale1}, ${scale2})`);
+          });
+        }
+        this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [true]);
+      } else {
+        this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [false]);
+        let newSize = [];
+        const windowRect = [
+          window.screen.availLeft, window.screen.availTop,
+          window.screen.availWidth, window.screen.availHeight,
+        ];
+        if (this.winAngle === 90 || this.winAngle === 270) {
+          this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${this.ratio}, ${this.ratio})`);
+          newSize = this.calculateWindowSize(
+            [320, 180],
+            windowRect.slice(2, 4),
+            [this.videoHeight, this.videoWidth],
+          );
+        } else {
+          this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg)`);
+          newSize = this.calculateWindowSize(
+            [320, 180],
+            windowRect.slice(2, 4),
+            [this.videoWidth, this.videoHeight],
+          );
+        }
+        const newPosition = this.calculateWindowPosition(
+          this.winPos.concat(this.winSize),
+          windowRect,
+          newSize,
+        );
+        this.controlWindowRect(newPosition.concat(newSize));
+      }
       this.$ga.event('app', 'toggle-fullscreen');
     });
+    this.$bus.$on('to-fullscreen', () => {
+      if (this.winAngle === 90 || this.winAngle === 270) {
+        requestAnimationFrame(() => {
+          const newWidth = window.screen.height;
+          const newHeight = newWidth / this.ratio;
+          const scale1 = newWidth / window.screen.width;
+          const scale2 = newHeight / window.screen.height;
+          this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${scale1}, ${scale2})`);
+        });
+      }
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [true]);
+    });
+    this.$bus.$on('off-fullscreen', () => {
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [false]);
+      let newSize = [];
+      const windowRect = [
+        window.screen.availLeft, window.screen.availTop,
+        window.screen.availWidth, window.screen.availHeight,
+      ];
+      if (this.winAngle === 90 || this.winAngle === 270) {
+        this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${this.ratio}, ${this.ratio})`);
+        newSize = this.calculateWindowSize(
+          [320, 180],
+          windowRect.slice(2, 4),
+          [this.videoHeight, this.videoWidth],
+        );
+      } else {
+        this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg)`);
+        newSize = this.calculateWindowSize(
+          [320, 180],
+          windowRect.slice(2, 4),
+          [this.videoWidth, this.videoHeight],
+        );
+      }
+      const newPosition = this.calculateWindowPosition(
+        this.winPos.concat(this.winSize),
+        windowRect,
+        newSize,
+      );
+      this.controlWindowRect(newPosition.concat(newSize));
+    });
     this.$bus.$on('toggle-muted', () => {
       this.toggleMute();
     });

diff --git a/src/renderer/locales/lang/ar.json b/src/renderer/locales/lang/ar.json
@@ -89,6 +89,7 @@
 		"playback": {
 			"backwardL": "خطوة الى الوراء - 60s",
 			"backwardS": "خطوة الى الوراء - 5S",
+      "windowRotate": "تدوير 90 درجة",
 			"captureScreen": "التقاط الشاشة",
 			"captureVideoClip": "التقاط الفيديو كليب",
 			"decreasePlaybackSpeed": "تقليل سرعة التشغيل",

diff --git a/src/renderer/locales/lang/en.json b/src/renderer/locales/lang/en.json
@@ -89,6 +89,7 @@
 		"playback": {
 			"backwardL": "Step Backward -60s",
 			"backwardS": "Step Backward -5s",
+      "windowRotate": "Rotate 90° Clockwise",
 			"captureScreen": "Capture Screen",
 			"captureVideoClip": "Capture Video Clip",
 			"decreasePlaybackSpeed": "Decrease Playback Speed",

diff --git a/src/renderer/locales/lang/es.json b/src/renderer/locales/lang/es.json
@@ -89,6 +89,7 @@
 		"playback": {
 			"backwardL": "Paso atrás -60s",
 			"backwardS": "Paso hacia atrás -5s",
+      "windowRotate": "Girar 90 °",
 			"captureScreen": "Captura de pantalla",
 			"captureVideoClip": "Captura de video clip",
 			"decreasePlaybackSpeed": "Disminuir la velocidad de reproducción",

diff --git a/src/renderer/locales/lang/ja.json b/src/renderer/locales/lang/ja.json
@@ -89,6 +89,7 @@
 		"playback": {
 			"backwardL": "戻る -60s",
 			"backwardS": "戻る -5s",
+      "windowRotate": "90° 回転",
 			"captureScreen": "スクリンショット",
 			"captureVideoClip": "トリム",
 			"decreasePlaybackSpeed": "再生速度の低下",

diff --git a/src/renderer/locales/lang/ko.json b/src/renderer/locales/lang/ko.json
@@ -89,6 +89,7 @@
 		"playback": {
 			"backwardL": "단계 뒤로 -60 년대",
 			"backwardS": "스텝 뒤로 -5s",
+      "windowRotate": "90도 회전",
 			"captureScreen": "화면 캡처",
 			"captureVideoClip": "비디오 클립 캡처",
 			"decreasePlaybackSpeed": "재생 속도 감소",

diff --git a/src/renderer/locales/lang/zhCN.json b/src/renderer/locales/lang/zhCN.json
@@ -88,7 +88,8 @@
 		},
 		"playback": {
 			"backwardL": "后退 -60s",
-			"backwardS": "后退 -5s",
+      "backwardS": "后退 -5s",
+      "windowRotate": "旋转 90°",      
 			"captureScreen": "截图",
 			"captureVideoClip": "截取视频片段",
 			"decreasePlaybackSpeed": "减缓播放速度",

diff --git a/src/renderer/locales/lang/zhTW.json b/src/renderer/locales/lang/zhTW.json
@@ -88,7 +88,8 @@
 		},
 		"playback": {
 			"backwardL": "後退 -60s",
-			"backwardS": "後退 -5s",
+      "backwardS": "後退 -5s",
+      "windowRotate": "旋轉 90°",      
 			"captureScreen": "截圖",
 			"captureVideoClip": "截取視頻片段",
 			"decreasePlaybackSpeed": "減緩播放速度",

diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -129,7 +129,7 @@ new Vue({
     };
   },
   computed: {
-    ...mapGetters(['volume', 'muted', 'intrinsicWidth', 'intrinsicHeight', 'ratio', 'winWidth', 'winPos', 'winSize', 'chosenStyle', 'chosenSize', 'mediaHash', 'subtitleList', 'enabledSecondarySub',
+    ...mapGetters(['volume', 'muted', 'intrinsicWidth', 'intrinsicHeight', 'ratio', 'winAngle', 'winWidth', 'winHeight', 'winPos', 'winSize', 'chosenStyle', 'chosenSize', 'mediaHash', 'subtitleList', 'enabledSecondarySub',
       'currentFirstSubtitleId', 'currentSecondSubtitleId', 'audioTrackList', 'isFullScreen', 'paused', 'singleCycle', 'isFocused', 'originSrc', 'defaultDir', 'ableToPushCurrentSubtitle', 'displayLanguage', 'calculatedNoSub', 'sizePercent']),
     updateFullScreen() {
       if (this.isFullScreen) {
@@ -475,7 +475,14 @@ new Vue({
                 this.$store.dispatch(videoActions.CHANGE_RATE, 1);
               },
             },
-            /** */
+            { type: 'separator' },
+            {
+              label: this.$t('msg.playback.windowRotate'),
+              id: 'windowRotate',
+              click: () => {
+                this.windowRotate();
+              },
+            },
             { type: 'separator' },
             {
               label: this.$t('msg.playback.singleCycle'),
@@ -1124,6 +1131,31 @@ new Vue({
       this.$electron.remote.Menu.getApplicationMenu()?.clear();
       await this.createMenu();
     },
+    windowRotate() {
+      this.$store.dispatch('windowRotate90Deg');
+      if (this.isFullScreen) return;
+      let newSize = [];
+      const windowRect = [
+        window.screen.availLeft, window.screen.availTop,
+        window.screen.availWidth, window.screen.availHeight,
+      ];
+      const videoSize = (this.winAngle === 90 || this.winAngle === 270) ?
+        [this.intrinsicHeight, this.intrinsicWidth] : [this.intrinsicWidth, this.intrinsicHeight];
+      newSize = this.calculateWindowSize(
+        [320, 180],
+        windowRect.slice(2, 4),
+        videoSize,
+      );
+      const newPosition = this.calculateWindowPosition(
+        this.winPos.concat(this.winSize),
+        windowRect,
+        newSize,
+      );
+      const rect = newPosition.concat(newSize);
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [rect.slice(2, 4)[0] / rect.slice(2, 4)[1]]);
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setSize', rect.slice(2, 4));
+      this.$electron.ipcRenderer.send('callMainWindowMethod', 'setPosition', rect.slice(0, 2));
+    },
     changeWindowSize(key) {
       if (!this.originSrc || key === this.sizePercent) {
         return;

diff --git a/src/renderer/store/modules/Window.js b/src/renderer/store/modules/Window.js
@@ -2,6 +2,7 @@ const state = {
   windowSize: [0, 0],
   windowMinimumSize: [0, 0],
   windowPosition: [0, 0],
+  windowAngle: 0,
   isFullScreen: false,
   isFocused: true,
   isMaximized: false,
@@ -17,6 +18,7 @@ const getters = {
   winPosX: state => state.windowPosition[0],
   winPosY: state => state.windowPosition[1],
   winPos: state => state.windowPosition,
+  winAngle: state => state.windowAngle,
   isFullScreen: state => state.isFullScreen,
   isFocused: state => state.isFocused,
   isMaximized: state => state.isMaximized,
@@ -49,12 +51,21 @@ const mutations = {
   sizePercentUpdate(state, payload) {
     state.sizePercent = payload;
   },
+  windowAngle(state, payload) {
+    state.windowAngle = payload;
+  },
 };
 
 const actions = {
   updateSizePercent({ commit }, delta) {
     commit('sizePercentUpdate', delta);
   },
+  windowRotate90Deg({ commit, state }) {
+    (state.windowAngle + 90) === 360 ? commit('windowAngle', 0) : commit('windowAngle', state.windowAngle + 90);
+  },
+  initWindowRotate({ commit }) {
+    commit('windowAngle', 0);
+  },
 };
 
 export default {