From e2f0a21bd97f18e8ea2a9417fbd784c686c773ba Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Tue, 26 Mar 2019 17:11:04 +0800 Subject: [PATCH 01/11] feat(index): support bookmark --- .../components/PlayingView/VideoCanvas.vue | 1 + src/renderer/helpers/index.js | 20 ++++++++++++++++++- 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue index edd7c14660..de7b3bf3d7 100644 --- a/src/renderer/components/PlayingView/VideoCanvas.vue +++ b/src/renderer/components/PlayingView/VideoCanvas.vue @@ -261,6 +261,7 @@ export default { .then(this.saveSubtitleStyle) .then(this.savePlaybackStates) .then(() => { + this.stopAccessing(); this.asyncTasksDone = true; window.close(); }) diff --git a/src/renderer/helpers/index.js b/src/renderer/helpers/index.js index d81847a11c..7083b9d2af 100644 --- a/src/renderer/helpers/index.js +++ b/src/renderer/helpers/index.js @@ -3,6 +3,8 @@ import fs, { promises as fsPromises } from 'fs'; import crypto from 'crypto'; import lolex from 'lolex'; import { times } from 'lodash'; +import asyncStorage from '@/helpers/asyncStorage'; +import syncStorage from '@/helpers/syncStorage'; import infoDB from '@/helpers/infoDB'; import { getValidVideoExtensions, getValidVideoRegex } from '@/../shared/utils'; import { FILE_NON_EXIST, EMPTY_FOLDER, OPEN_FAILED, ADD_NO_VIDEO } from '@/../shared/notificationcodes'; @@ -20,6 +22,7 @@ export default { infoDB, sagi: Sagi, showingPopupDialog: false, + stopAccessing: null, }; }, methods: { @@ -170,7 +173,13 @@ export default { this.showingPopupDialog = false; if (process.mas && bookmarks?.length > 0) { // TODO: put bookmarks to database - console.log(bookmarks); + asyncStorage.get('bookmark').then((mapObj) => { + const temp = {}; + files.forEach((file, i) => { + temp[file] = bookmarks[i]; + }); + asyncStorage.set('bookmark', { ...mapObj, ...temp }); + }); } if (files) { // if selected files contain folders only, then call openFolder() @@ -342,6 +351,15 @@ export default { async playFile(vidPath) { const originPath = vidPath; let mediaQuickHash; + if (process.mas) { + if (typeof this.stopAccessing === 'function') this.stopAccessing(); + const bookmarkObj = syncStorage.getSync('bookmark'); + if (bookmarkObj.hasOwnProperty(vidPath)) { + const { app } = remote; + const bookmark = bookmarkObj[vidPath]; + app.startAccessingSecurityScopedResource(bookmark); + } + } try { mediaQuickHash = await this.mediaQuickHash(originPath); } catch (err) { From 29885bcdb180a45620393b84e731c34731695f40 Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Tue, 26 Mar 2019 17:11:38 +0800 Subject: [PATCH 02/11] Revert "feat(index): support bookmark" This reverts commit e2f0a21bd97f18e8ea2a9417fbd784c686c773ba. --- .../components/PlayingView/VideoCanvas.vue | 1 - src/renderer/helpers/index.js | 20 +------------------ 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue index de7b3bf3d7..edd7c14660 100644 --- a/src/renderer/components/PlayingView/VideoCanvas.vue +++ b/src/renderer/components/PlayingView/VideoCanvas.vue @@ -261,7 +261,6 @@ export default { .then(this.saveSubtitleStyle) .then(this.savePlaybackStates) .then(() => { - this.stopAccessing(); this.asyncTasksDone = true; window.close(); }) diff --git a/src/renderer/helpers/index.js b/src/renderer/helpers/index.js index 7083b9d2af..d81847a11c 100644 --- a/src/renderer/helpers/index.js +++ b/src/renderer/helpers/index.js @@ -3,8 +3,6 @@ import fs, { promises as fsPromises } from 'fs'; import crypto from 'crypto'; import lolex from 'lolex'; import { times } from 'lodash'; -import asyncStorage from '@/helpers/asyncStorage'; -import syncStorage from '@/helpers/syncStorage'; import infoDB from '@/helpers/infoDB'; import { getValidVideoExtensions, getValidVideoRegex } from '@/../shared/utils'; import { FILE_NON_EXIST, EMPTY_FOLDER, OPEN_FAILED, ADD_NO_VIDEO } from '@/../shared/notificationcodes'; @@ -22,7 +20,6 @@ export default { infoDB, sagi: Sagi, showingPopupDialog: false, - stopAccessing: null, }; }, methods: { @@ -173,13 +170,7 @@ export default { this.showingPopupDialog = false; if (process.mas && bookmarks?.length > 0) { // TODO: put bookmarks to database - asyncStorage.get('bookmark').then((mapObj) => { - const temp = {}; - files.forEach((file, i) => { - temp[file] = bookmarks[i]; - }); - asyncStorage.set('bookmark', { ...mapObj, ...temp }); - }); + console.log(bookmarks); } if (files) { // if selected files contain folders only, then call openFolder() @@ -351,15 +342,6 @@ export default { async playFile(vidPath) { const originPath = vidPath; let mediaQuickHash; - if (process.mas) { - if (typeof this.stopAccessing === 'function') this.stopAccessing(); - const bookmarkObj = syncStorage.getSync('bookmark'); - if (bookmarkObj.hasOwnProperty(vidPath)) { - const { app } = remote; - const bookmark = bookmarkObj[vidPath]; - app.startAccessingSecurityScopedResource(bookmark); - } - } try { mediaQuickHash = await this.mediaQuickHash(originPath); } catch (err) { From 517d9213b4c60e5fc094c0d9f99b9126f19c0ec3 Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Fri, 29 Mar 2019 17:34:14 +0800 Subject: [PATCH 03/11] feat(window): basic rotate done --- .../components/PlayingView/VideoCanvas.vue | 9 ++++- src/renderer/main.js | 36 +++++++++++++++++-- src/renderer/store/modules/Window.js | 8 +++++ 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue index edd7c14660..443b9bec57 100644 --- a/src/renderer/components/PlayingView/VideoCanvas.vue +++ b/src/renderer/components/PlayingView/VideoCanvas.vue @@ -4,6 +4,10 @@ class="video"> { + // this.$refs.videoCanvas.$el.style.setProperty('transform', 'rotate(0deg)'); + }); window.onbeforeunload = (e) => { if (!this.asyncTasksDone) { this.saveScreenshot(this.originSrc) diff --git a/src/renderer/main.js b/src/renderer/main.js index 67c91cfb50..b9edc27a5e 100644 --- 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,15 @@ new Vue({ this.$store.dispatch(videoActions.CHANGE_RATE, 1); }, }, - /** */ + { type: 'separator' }, + { + label: this.$t('msg.playback.windowRotate'), + id: 'windowRotate', + accelerator: 'CmdOrCtrl+L', + click: () => { + this.windowRotate(); + }, + }, { type: 'separator' }, { label: this.$t('msg.playback.singleCycle'), @@ -1124,6 +1132,30 @@ new Vue({ this.$electron.remote.Menu.getApplicationMenu()?.clear(); await this.createMenu(); }, + windowRotate() { + this.$store.dispatch('windowRotate90Deg'); + 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 index cca98b61a6..ffc3f14b4c 100644 --- 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,18 @@ 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); + }, }; export default { From 3b795074dcaea7cbc44f9f86386942f8788bab7a Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Fri, 29 Mar 2019 17:38:47 +0800 Subject: [PATCH 04/11] feat(window): full screen is done --- src/renderer/components/PlayingView/VideoCanvas.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue index 443b9bec57..7fe1d11f17 100644 --- a/src/renderer/components/PlayingView/VideoCanvas.vue +++ b/src/renderer/components/PlayingView/VideoCanvas.vue @@ -5,7 +5,7 @@ Date: Sat, 30 Mar 2019 00:07:27 +0800 Subject: [PATCH 05/11] feat(videocanvas): more further --- .../components/PlayingView/VideoCanvas.vue | 38 ++++++++++++++----- src/renderer/locales/lang/zhCN.json | 1 + 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue index 7fe1d11f17..330f893934 100644 --- a/src/renderer/components/PlayingView/VideoCanvas.vue +++ b/src/renderer/components/PlayingView/VideoCanvas.vue @@ -4,10 +4,6 @@ class="video"> { + this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${this.ratio}, ${this.ratio})`); + }); + } else { + requestAnimationFrame(() => { + const newWidth = this.winHeight; + const newHeight = newWidth / this.ratio; + const scale1 = newWidth / this.winWidth; + const scale2 = newHeight / this.winHeight; + 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; + } + }, originSrc(val, oldVal) { this.saveScreenshot(oldVal); this.$bus.$emit('show-speedlabel'); @@ -259,9 +282,6 @@ export default { this.maskBackground = 'rgba(255, 255, 255, 0)'; this.$ga.event('app', 'drop'); }); - this.$bus.$on('rotate', () => { - // this.$refs.videoCanvas.$el.style.setProperty('transform', 'rotate(0deg)'); - }); window.onbeforeunload = (e) => { if (!this.asyncTasksDone) { this.saveScreenshot(this.originSrc) diff --git a/src/renderer/locales/lang/zhCN.json b/src/renderer/locales/lang/zhCN.json index 6012d892bd..3e30d7e507 100644 --- a/src/renderer/locales/lang/zhCN.json +++ b/src/renderer/locales/lang/zhCN.json @@ -24,6 +24,7 @@ "backwardS": "后退 -5s", "forwardL": "前进 +60s", "backwardL": "后退 -60s", + "windowRotate": "画面旋转", "singleCycle": "循环单个文件" }, "audio": { From eba372de0b8ad54dc645977b420ffc43ae1116c8 Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Sat, 30 Mar 2019 02:58:13 +0800 Subject: [PATCH 06/11] feat(videocanvas): basic version --- .../components/PlayingView/VideoCanvas.vue | 46 +++++++++++++++++-- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue index 330f893934..87d121286b 100644 --- a/src/renderer/components/PlayingView/VideoCanvas.vue +++ b/src/renderer/components/PlayingView/VideoCanvas.vue @@ -179,8 +179,8 @@ export default { }, computed: { ...mapGetters([ - 'originSrc', 'convertedSrc', 'intrinsicHeight', 'intrinsicWidth', 'volume', 'muted', 'rate', 'paused', 'duration', 'ratio', 'currentAudioTrackId', 'enabledSecondarySub', - 'winSize', 'winPos', 'winAngle', 'isFullScreen', 'winAngle', 'winWidth', 'winHeight', 'chosenStyle', 'chosenSize', 'nextVideo', 'loop', 'playinglistRate', 'playingList']), + 'originSrc', 'convertedSrc', 'volume', 'muted', 'rate', 'paused', 'duration', 'ratio', 'currentAudioTrackId', 'enabledSecondarySub', + 'winSize', 'winPos', 'winAngle', 'isFullScreen', 'winWidth', 'winHeight', 'chosenStyle', 'chosenSize', 'nextVideo', 'loop', 'playinglistRate', 'playingList']), ...mapGetters({ videoWidth: 'intrinsicWidth', videoHeight: 'intrinsicHeight', @@ -218,6 +218,46 @@ export default { default: break; } }, + isFullScreen(val) { + if (val) { + if (this.winAngle === 90 || this.winAngle === 270) { + const newWidth = window.screen.height; + const newHeight = newWidth / this.ratio; + const scale1 = newWidth / this.winWidth; + const scale2 = newHeight / this.winHeight; + requestAnimationFrame(() => { + this.$refs.videoCanvas.$el.style.setProperty('transform', `rotate(${this.winAngle}deg) scale(${scale1}, ${scale2})`); + }); + } + } else { + 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)); + } + }, originSrc(val, oldVal) { this.saveScreenshot(oldVal); this.$bus.$emit('show-speedlabel'); @@ -243,7 +283,7 @@ 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.winAngle === 0) this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [this.ratio]); this.$ga.event('app', 'toggle-fullscreen'); }); this.$bus.$on('toggle-muted', () => { From 323a1d15aec60ea6f631af49a81e2f344831645c Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Sat, 30 Mar 2019 03:26:03 +0800 Subject: [PATCH 07/11] feat(perf): improve performance --- .../components/PlayingView/VideoCanvas.vue | 111 ++++++++++++------ src/renderer/main.js | 1 + 2 files changed, 76 insertions(+), 36 deletions(-) diff --git a/src/renderer/components/PlayingView/VideoCanvas.vue b/src/renderer/components/PlayingView/VideoCanvas.vue index 87d121286b..3c66e8c5b6 100644 --- a/src/renderer/components/PlayingView/VideoCanvas.vue +++ b/src/renderer/components/PlayingView/VideoCanvas.vue @@ -201,10 +201,10 @@ export default { }); } else { requestAnimationFrame(() => { - const newWidth = this.winHeight; + const newWidth = window.screen.height; const newHeight = newWidth / this.ratio; - const scale1 = newWidth / this.winWidth; - const scale2 = newHeight / this.winHeight; + 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})`); }); } @@ -218,18 +218,43 @@ export default { default: break; } }, - isFullScreen(val) { - if (val) { + originSrc(val, oldVal) { + this.saveScreenshot(oldVal); + this.$bus.$emit('show-speedlabel'); + this.videoConfigInitialize({ + audioTrackList: [], + }); + this.play(); + this.updatePlayinglistRate({ + oldDir: path.dirname(oldVal), newDir: path.dirname(val), playingList: this.playingList, + }); + this.playinglistRate.forEach((item) => { + if (item.dirPath === path.dirname(val)) { + this.$store.dispatch(videoActions.CHANGE_RATE, item.rate); + this.nowRate = item.rate; + } + }); + }, + }, + mounted() { + this.$electron.ipcRenderer.on('quit', () => { + this.quit = true; + }); + this.videoElement = this.$refs.videoCanvas.videoElement(); + this.$bus.$on('toggle-fullscreen', () => { + if (!this.isFullScreen) { if (this.winAngle === 90 || this.winAngle === 270) { - const newWidth = window.screen.height; - const newHeight = newWidth / this.ratio; - const scale1 = newWidth / this.winWidth; - const scale2 = newHeight / this.winHeight; 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, @@ -257,35 +282,49 @@ export default { ); this.controlWindowRect(newPosition.concat(newSize)); } - }, - originSrc(val, oldVal) { - this.saveScreenshot(oldVal); - this.$bus.$emit('show-speedlabel'); - this.videoConfigInitialize({ - audioTrackList: [], - }); - this.play(); - this.updatePlayinglistRate({ - oldDir: path.dirname(oldVal), newDir: path.dirname(val), playingList: this.playingList, - }); - this.playinglistRate.forEach((item) => { - if (item.dirPath === path.dirname(val)) { - this.$store.dispatch(videoActions.CHANGE_RATE, item.rate); - this.nowRate = item.rate; - } - }); - }, - }, - mounted() { - this.$electron.ipcRenderer.on('quit', () => { - this.quit = true; - }); - this.videoElement = this.$refs.videoCanvas.videoElement(); - this.$bus.$on('toggle-fullscreen', () => { - this.$electron.ipcRenderer.send('callMainWindowMethod', 'setFullScreen', [!this.isFullScreen]); - if (this.winAngle === 0) this.$electron.ipcRenderer.send('callMainWindowMethod', 'setAspectRatio', [this.ratio]); 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/main.js b/src/renderer/main.js index b9edc27a5e..9fc4712ca3 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -1134,6 +1134,7 @@ new Vue({ }, windowRotate() { this.$store.dispatch('windowRotate90Deg'); + if (this.isFullScreen) return; let newSize = []; const windowRect = [ window.screen.availLeft, window.screen.availTop, From 42dad14bcabc7df62641b65ad295e7ec31eadfd1 Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Sat, 30 Mar 2019 03:26:55 +0800 Subject: [PATCH 08/11] feat(main.js): delete shortcut --- src/renderer/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/renderer/main.js b/src/renderer/main.js index 9fc4712ca3..c1b7b3d46b 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -479,7 +479,6 @@ new Vue({ { label: this.$t('msg.playback.windowRotate'), id: 'windowRotate', - accelerator: 'CmdOrCtrl+L', click: () => { this.windowRotate(); }, From 8f7bc2b48e532238b2e4e07e9b7997c541debdfb Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Sat, 30 Mar 2019 03:28:20 +0800 Subject: [PATCH 09/11] feat(language): add en --- src/renderer/locales/lang/en.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/renderer/locales/lang/en.json b/src/renderer/locales/lang/en.json index 82644aed4e..bdd01fa24d 100644 --- a/src/renderer/locales/lang/en.json +++ b/src/renderer/locales/lang/en.json @@ -24,6 +24,7 @@ "backwardS": "Step Backward -5s", "forwardL": "Step Forward +60s", "backwardL": "Step Backward -60s", + "windowRotate": "Rotate 90° Clockwise", "singleCycle": "Repeat One" }, "audio": { From 1cedb935bc56482d1fa3ce912642771bf6d62405 Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Sat, 30 Mar 2019 03:41:57 +0800 Subject: [PATCH 10/11] feat(window): remember the angle till the window closed --- src/renderer/components/PlayingView.vue | 1 + .../components/PlayingView/VideoCanvas.vue | 58 ++++++++++--------- src/renderer/store/modules/Window.js | 3 + 3 files changed, 36 insertions(+), 26 deletions(-) diff --git a/src/renderer/components/PlayingView.vue b/src/renderer/components/PlayingView.vue index cc8bcb96d8..bc2bfe16f8 100644 --- 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 index 3c66e8c5b6..5c2b846bd7 100644 --- 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; @@ -192,31 +222,7 @@ export default { }, watch: { winAngle(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; - } + this.changeWindowRotate(val); }, originSrc(val, oldVal) { this.saveScreenshot(oldVal); diff --git a/src/renderer/store/modules/Window.js b/src/renderer/store/modules/Window.js index ffc3f14b4c..dab6061276 100644 --- a/src/renderer/store/modules/Window.js +++ b/src/renderer/store/modules/Window.js @@ -63,6 +63,9 @@ const actions = { windowRotate90Deg({ commit, state }) { (state.windowAngle + 90) === 360 ? commit('windowAngle', 0) : commit('windowAngle', state.windowAngle + 90); }, + initWindowRotate({ commit }) { + commit('windowAngle', 0); + }, }; export default { From 69936a55d28d7f74d153a08cf889ec330ffe9bb7 Mon Sep 17 00:00:00 2001 From: YuRiJin <875830716@qq.com> Date: Sat, 30 Mar 2019 15:13:28 +0800 Subject: [PATCH 11/11] feat(language): add more languages --- src/renderer/locales/lang/ja.json | 1 + src/renderer/locales/lang/zhCN.json | 2 +- src/renderer/locales/lang/zhTW.json | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/renderer/locales/lang/ja.json b/src/renderer/locales/lang/ja.json index 16e1fd3b35..e2adf37aa3 100644 --- a/src/renderer/locales/lang/ja.json +++ b/src/renderer/locales/lang/ja.json @@ -24,6 +24,7 @@ "backwardS": "戻る -5s", "forwardL": "進む +60s", "backwardL": "戻る -60s", + "windowRotate": "90° 回転", "singleCycle": "リピート" }, "audio": { diff --git a/src/renderer/locales/lang/zhCN.json b/src/renderer/locales/lang/zhCN.json index 3e30d7e507..22546de3df 100644 --- a/src/renderer/locales/lang/zhCN.json +++ b/src/renderer/locales/lang/zhCN.json @@ -24,7 +24,7 @@ "backwardS": "后退 -5s", "forwardL": "前进 +60s", "backwardL": "后退 -60s", - "windowRotate": "画面旋转", + "windowRotate": "旋转 90°", "singleCycle": "循环单个文件" }, "audio": { diff --git a/src/renderer/locales/lang/zhTW.json b/src/renderer/locales/lang/zhTW.json index 03094f86c5..6f7d7dd54d 100644 --- a/src/renderer/locales/lang/zhTW.json +++ b/src/renderer/locales/lang/zhTW.json @@ -24,6 +24,7 @@ "backwardS": "後退 -5s", "forwardL": "前進 +60s", "backwardL": "後退 -60s", + "windowRotate": "旋轉 90°", "singleCycle": "循環單個文件" }, "audio": {