From 85592142af1615af4f08d5b60031f80b73f46860 Mon Sep 17 00:00:00 2001 From: Shi Liang Date: Fri, 21 May 2021 17:15:30 +0800 Subject: [PATCH] =?UTF-8?q?feat.=20OSD=20Lyrics=20|=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=A1=8C=E9=9D=A2=E6=AD=8C=E8=AF=8D=E5=8A=9F=E8=83=BD=20(#685)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add OSD Lyrics * tidy files * fix OSDLyrics: last line of lyrics not showing, performance * tidy files * make user can resize the lyrics window * Fix bug of initial window size * Fix: 1. auto resize osdlyrics window after packaging; 2. lyric parser problem with %; * tidy files --- public/osdlyrics.html | 239 ++++++++++++++++++++++++++++++++ src/assets/icons/osd-lyrics.svg | 23 +++ src/background.js | 109 ++++++++++++++- src/components/Player.vue | 21 +++ src/electron/ipcMain.js | 10 +- src/electron/menu.js | 3 +- src/locale/lang/en.js | 1 + src/locale/lang/tr.js | 1 + src/locale/lang/zh-CN.js | 1 + src/utils/lyrics.js | 2 +- 10 files changed, 405 insertions(+), 5 deletions(-) create mode 100644 public/osdlyrics.html create mode 100644 src/assets/icons/osd-lyrics.svg diff --git a/public/osdlyrics.html b/public/osdlyrics.html new file mode 100644 index 0000000..f45c577 --- /dev/null +++ b/public/osdlyrics.html @@ -0,0 +1,239 @@ + + + + + + + OSD Lyrics + + + + +
YesPlayMusic
+ + + \ No newline at end of file diff --git a/src/assets/icons/osd-lyrics.svg b/src/assets/icons/osd-lyrics.svg new file mode 100644 index 0000000..b388642 --- /dev/null +++ b/src/assets/icons/osd-lyrics.svg @@ -0,0 +1,23 @@ + + + + + + diff --git a/src/background.js b/src/background.js index 2525632..1bda288 100644 --- a/src/background.js +++ b/src/background.js @@ -25,6 +25,7 @@ import Store from 'electron-store'; class Background { constructor() { this.window = null; + this.osdlyrics = null; this.tray = null; this.store = new Store({ windowWidth: { @@ -152,6 +153,71 @@ class Background { } } + createOSDWindow() { + this.osdlyrics = new BrowserWindow({ + x: this.store.get('osdlyrics.x-pos') || 0, + y: this.store.get('osdlyrics.y-pos') || 0, + width: this.store.get('osdlyrics.width') || 840, + height: this.store.get('osdlyrics.height') || 110, + title: 'OSD Lyrics', + transparent: true, + frame: false, + webPreferences: { + webSecurity: false, + nodeIntegration: true, + enableRemoteModule: true, + contextIsolation: false, + }, + }); + this.osdlyrics.setAlwaysOnTop(true, 'screen'); + + if (process.env.WEBPACK_DEV_SERVER_URL) { + // Load the url of the dev server if in development mode + this.osdlyrics.loadURL( + process.env.WEBPACK_DEV_SERVER_URL + '/osdlyrics.html' + ); + if (!process.env.IS_TEST) this.osdlyrics.webContents.openDevTools(); + } else { + this.osdlyrics.loadURL('http://localhost:27232/osdlyrics.html'); + } + } + + initOSDLyrics() { + const osdState = this.store.get('osdlyrics.show') || false; + if (osdState) { + this.showOSDLyrics(); + } + } + + toggleOSDLyrics() { + const osdState = this.store.get('osdlyrics.show') || false; + if (osdState) { + this.hideOSDLyrics(); + } else { + this.showOSDLyrics(); + } + } + + showOSDLyrics() { + this.store.set('osdlyrics.show', true); + if (!this.osdlyrics) { + this.createOSDWindow(); + this.handleOSDEvents(); + } + } + + hideOSDLyrics() { + this.store.set('osdlyrics.show', false); + if (this.osdlyrics) { + this.osdlyrics.close(); + } + } + + resizeOSDLyrics(height) { + const width = this.store.get('osdlyrics.width') || 840; + this.osdlyrics.setSize(width, height); + } + checkForUpdates() { autoUpdater.checkForUpdatesAndNotify(); @@ -179,6 +245,30 @@ class Background { }); } + handleOSDEvents() { + this.osdlyrics.once('ready-to-show', () => { + console.log('OSD ready-to-show event'); + this.osdlyrics.show(); + }); + + this.osdlyrics.on('closed', e => { + console.log('OSD close event'); + this.osdlyrics = null; + }); + + this.osdlyrics.on('resized', () => { + let { height, width } = this.osdlyrics.getBounds(); + this.store.set('osdlyrics.width', width); + this.store.set('osdlyrics.height', height); + }); + + this.osdlyrics.on('moved', () => { + var pos = this.osdlyrics.getPosition(); + this.store.set('osdlyrics.x-pos', pos[0]); + this.store.set('osdlyrics.y-pos', pos[1]); + }); + } + handleWindowEvents() { this.window.once('ready-to-show', () => { console.log('windows ready-to-show event'); @@ -253,8 +343,17 @@ class Background { this.createWindow(); this.handleWindowEvents(); + this.initOSDLyrics(); + // init ipcMain - initIpcMain(this.window, this.store); + initIpcMain( + this.window, + { + resizeOSDLyrics: height => this.resizeOSDLyrics(height), + toggleOSDLyrics: () => this.toggleOSDLyrics(), + }, + this.store + ); // set proxy const proxyRules = this.store.get('proxy'); @@ -268,7 +367,13 @@ class Background { this.checkForUpdates(); // create menu - createMenu(this.window); + createMenu(this.window, { + openDevTools: () => { + if (this.osdlyrics) { + this.osdlyrics.webContents.openDevTools(); + } + }, + }); // create tray if ( diff --git a/src/components/Player.vue b/src/components/Player.vue index 7bd601c..3241bfa 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -95,6 +95,15 @@
+