Feature/minimize to tray (#21)

* wip: hide to tray/hide icon * Double click listener * Added tray settings * Use path.join to show icons on linux * Fixed closing buttons and updated build config * 512x512 for Mac OS * Title Consistency * feat: finish implementing minimize to tray Co-authored-by: Marco van Poortvliet <Marc0tjevp@gmail.com> Co-authored-by: Marco van Poortvliet <marco.van.poortvliet@blink.nl>
LISTEN-moe · Apr 4, 2020 · b18980d · b18980d
1 parent 8d44324
commit b18980d
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 33 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -65,6 +65,12 @@ export default {
 		},
 		alwaysOnTop() {
 			return this.$store.state.alwaysOnTop;
+		},
+		hideFromTaskbar() {
+			return this.$store.state.hideFromTaskbar;
+		},
+		minimizeToTray() {
+			return this.$store.state.minimizeToTray;
 		}
 	},
 	watch: {
@@ -100,6 +106,8 @@ export default {
 		};
 
 		ipcRenderer.send('settingsChange', ['alwaysOnTop', this.alwaysOnTop]);
+		ipcRenderer.send('settingsChange', ['hideFromTaskbar', this.hideFromTaskbar]);
+		ipcRenderer.send('settingsChange', ['minimizeToTray', this.minimizeToTray]);
 		ipcRenderer.on('login', (_, { token, user }) => {
 			this.$store.dispatch('login', { token, user });
 		});
@@ -109,6 +117,7 @@ export default {
 			if (option === 'smallAlbumArt' && value) electronWindow.setSize(electronWindow.getBounds().width, 80, true);
 			else if (option === 'smallAlbumArt' && !value) electronWindow.setSize(electronWindow.getBounds().width, 230, true);
 			else if (option === 'alwaysOnTop') electronWindow.setAlwaysOnTop(value);
+			else if (option === 'hideFromTaskbar') electronWindow.setSkipTaskbar(value);
 			this.$store.dispatch('setState', { option, value });
 		});
 	}

diff --git a/src/background.js b/src/background.js
@@ -2,6 +2,7 @@ import { app, protocol, BrowserWindow, shell, ipcMain } from 'electron';
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
 const isDevelopment = process.env.NODE_ENV !== 'production';
 import Store from './electron-store';
+import { join } from 'path';
 
 const { Client } = require('discord-rpc');
 const rpc = new Client({ transport: 'ipc' });
@@ -10,6 +11,7 @@ const rpc = new Client({ transport: 'ipc' });
 let win;
 let loginModal;
 let settingsModal;
+let minimizeToTray;
 
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]);
 async function createWindow() {
@@ -24,8 +26,9 @@ async function createWindow() {
 	const pos = store.get('windowPosition');
 
 	win = new BrowserWindow({
-		title: 'LISTEN.MOE - Desktop App',
-		icon: 'public/logo.png',
+		title: 'LISTEN.moe',
+		// eslint-disable-next-line no-undef
+		icon: join(__static, 'logo.png'),
 		width: size[0],
 		minWidth: 400,
 		height: 80,
@@ -48,13 +51,25 @@ async function createWindow() {
 		win.loadURL('app://./index.html');
 	}
 
-	// win.webContents.openDevTools();
-
 	win.once('ready-to-show', () => {
 		win.show();
 		win.focus();
 	});
 
+	win.on('minimize', event => {
+		if (!minimizeToTray) return;
+		event.preventDefault();
+		win.hide();
+	});
+
+	ipcMain.on('show-tray', () => {
+		win.show();
+		win.focus();
+	});
+
+	ipcMain.on('hide-tray', () => win.hide());
+	ipcMain.on('exit-tray', () => app.quit());
+
 	win.on('closed', () => {
 		win = null;
 	});
@@ -87,7 +102,9 @@ async function createWindow() {
 
 		loginModal = new BrowserWindow({
 			width: 350,
-			height: 500,
+			height: 400,
+			// eslint-disable-next-line no-undef
+			icon: join(__static, 'logo.png'),
 			frame: false,
 			transparent: true,
 			parent: win,
@@ -113,7 +130,9 @@ async function createWindow() {
 
 		settingsModal = new BrowserWindow({
 			width: 500,
-			height: 595,
+			height: 760,
+			// eslint-disable-next-line no-undef
+			icon: join(__static, 'logo.png'),
 			frame: false,
 			transparent: true,
 			parent: win,
@@ -140,7 +159,10 @@ async function createWindow() {
 		win.webContents.send('login', arg);
 		if (settingsModal) settingsModal.webContents.send('login', arg);
 	});
-	ipcMain.on('settingsChange', (_, arg) => win.webContents.send('playerOptionsChange', arg));
+	ipcMain.on('settingsChange', (_, arg) => {
+		if (arg[0] === 'minimizeToTray') minimizeToTray = arg[1];
+		win.webContents.send('playerOptionsChange', arg);
+	});
 }
 
 // Disable hardware acceleration on Linux for transparent background

diff --git a/src/components/login/index.vue b/src/components/login/index.vue
@@ -1,12 +1,24 @@
 <style lang="scss" scoped>
 	@import "@/assets/styles/_colors.scss";
 
+	.card {	min-height: unset !important; }
+
+	button { width: unset !important;}
+
+	.closeContainer {
+		top: 30px !important;
+		right: 25px !important;
+	}
+
+	.mfa .closeContainer {
+		top: 60px !important;
+	}
+
 	.card .card-body {
 		input, button { -webkit-app-region: no-drag; }
 		overflow: hidden;
 		min-width: 20rem;
 		text-align: center;
-
 		&.mfa input { text-align: center }
 	}
 

diff --git a/src/components/player/index.vue b/src/components/player/index.vue
@@ -152,16 +152,19 @@
 				z-index: 9;
 				transition: opacity .3s ease-in-out;
 				opacity: .75;
-				// opacity: 0;
-				// pointer-events: none;
 			}
 
-			/*
-			&:hover .settingsIcon {
-				opacity: 1;
-				pointer-events: auto;
+			.hideIcon {
+				position: absolute;
+				top: 0;
+				right: 1.2rem;
+				margin: 0;
+				transform: scale3d(0.5, 0.5, 1) !important;
+				z-index: 9;
+				transition: opacity .3s ease-in-out;
+				opacity: .75;
 			}
-			*/
+
 		}
 
 		.favoriteButton {
@@ -246,6 +249,10 @@
 			<Budicon class="settingsIcon"
 				icon="settings"
 				@click.native.stop.prevent="openSettings" />
+			<Budicon v-if="minimizeToTray"
+				class="hideIcon"
+				icon="cross"
+				@click.native.stop.prevent="hideWindow" />
 			<canvas ref="canvas" />
 			<div class="sliderContainer"
 				:class="{ active: isVolumeSliderOpen }">
@@ -387,6 +394,9 @@ export default {
 		websocket() {
 			return this.$store.state.websocket;
 		},
+		hideFromTaskbar() {
+			return this.$store.state.hideFromTaskbar;
+		},
 		currentRequester() {
 			if (this.websocket && this.websocket.requester) {
 				return {
@@ -472,6 +482,9 @@ export default {
 		},
 		smallAlbumArt() {
 			return this.$store.state.smallAlbumArt;
+		},
+		minimizeToTray() {
+			return this.$store.state.minimizeToTray;
 		}
 	},
 	watch: {
@@ -499,6 +512,8 @@ export default {
 
 		this.buildTray();
 
+		this.tray.on('double-click', () => ipcRenderer.send('show-tray'));
+
 		MUSIC_VISUALS = {
 			start: () => {
 				if (!this.$refs.canvas) return;
@@ -529,8 +544,17 @@ export default {
 		openSettings() {
 			ipcRenderer.send('settingsModal');
 		},
+		hideWindow() {
+			ipcRenderer.send('hide-tray');
+		},
 		buildMenu() {
 			const menu = new Menu();
+      menu.append(new MenuItem(
+				{
+					label: 'Open LISTEN.moe',
+					click: () => ipcRenderer.send('show-tray')
+				}
+			));
 			menu.append(new MenuItem(
 				{
 					label: this.playing ? 'Pause' : 'Play',
@@ -550,7 +574,6 @@ export default {
 					}
 				}
 			));
-			menu.append(new MenuItem({ type: 'separator' }));
 			menu.append(new MenuItem(
 				{
 					label: this.loggedIn ? 'Logout' : 'Login',
@@ -567,8 +590,8 @@ export default {
 			menu.append(new MenuItem({ type: 'separator' }));
 			menu.append(new MenuItem(
 				{
-					label: 'Exit',
-					click: () => app.quit()
+					label: 'Quit',
+					click: () => ipcRenderer.send('exit-tray')
 				}
 			));
 
@@ -690,6 +713,7 @@ export default {
 		},
 		buildTray() {
 			if (!this.tray) this.tray = new Tray(join(__static, 'logo-trans.png'));
+			this.tray.setToolTip('LISTEN.moe')
 			this.tray.setContextMenu(this.buildMenu());
 		}
 	}

diff --git a/src/components/settings/index.vue b/src/components/settings/index.vue
@@ -10,21 +10,35 @@
 	.card {
 		-webkit-app-region: drag;
 		overflow: hidden !important;
+		min-height: 100%;
 
 		.card-body {
 			overflow: hidden !important;
+			max-height: unset !important;
 
-			button { -webkit-app-region: no-drag; }
+			button {
+				-webkit-app-region: no-drag;
+				width: 100%
+			}
 
 			.buttonContainer {
 				margin-bottom: 5px;
 				margin-right: 5px;
+				min-width: 80%;
 			}
 
-			.closeButton {
+			.closeContainer {
 				display: block;
-				margin: 0 auto;
-				margin-top: 2rem;
+				position: fixed;
+				top: 10px;
+				right: 10px;
+			}
+
+			.loggedInButton {
+				width: 100%;
+
+				button { width: 80%; }
+
 			}
 
 			a {
@@ -52,6 +66,12 @@
 				<Toggle :active="alwaysOnTop"
 					@clicked="setOption('alwaysOnTop')">Always on top</Toggle>
 
+				<h1 class="title">Tray settings</h1>
+				<Toggle :active="hideFromTaskbar"
+					@clicked="setOption('hideFromTaskbar')">Hide from taskbar</Toggle>
+				<Toggle :active="minimizeToTray"
+					@clicked="setOption('minimizeToTray')">Minimize to tray</Toggle>
+
 				<h1 class="title">Theme & Layout</h1>
 				<Toggle :active="enableGaps"
 					@clicked="setOption('enableGaps')">Enable gaps</Toggle>
@@ -65,12 +85,14 @@
 					target="_blank">
 					Logged in as {{ user.displayName }}
 				</a>
-				<button v-if="!loggedIn"
-					class="primary light"
-					@click.stop.prevent="login">Login</button>
-				<button v-else
-					class="primary light"
-					@click.stop.prevent="logout">Logout</button>
+				<div class="loggedInButton">
+					<button v-if="!loggedIn"
+						class="primary light"
+						@click.stop.prevent="login">Login</button>
+					<button v-else
+						class="primary light"
+						@click.stop.prevent="logout">Logout</button>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -108,6 +130,12 @@ export default {
 		},
 		alwaysOnTop() {
 			return this.$store.state.alwaysOnTop;
+		},
+		hideFromTaskbar() {
+			return this.$store.state.hideFromTaskbar;
+		},
+		minimizeToTray() {
+			return this.$store.state.minimizeToTray;
 		}
 	},
 	mounted() {

diff --git a/src/store.js b/src/store.js
@@ -16,7 +16,9 @@ export default new Store({
 		eventStarts: true,
 		enableGaps: true,
 		smallAlbumArt: false,
-		alwaysOnTop: true
+		alwaysOnTop: true,
+		hideFromTaskbar: false,
+		minimizeToTray: true
 	},
 	mutations: {
 		loggedIn(state, payload) {
@@ -82,6 +84,12 @@ export default new Store({
 		},
 		alwaysOnTop(state, payload) {
 			state.alwaysOnTop = payload;
+		},
+		hideFromTaskbar(state, payload) {
+			state.hideFromTaskbar = payload;
+		},
+		minimizeToTray(state, payload) {
+			state.minimizeToTray = payload;
 		}
 	},
 	actions: {
@@ -100,7 +108,7 @@ export default new Store({
 			localStorage.setItem(option, value);
 		},
 		setInitialState({ dispatch }) {
-			const whatToPopulate = ['preferRomaji', 'eventStarts', 'enableGaps', 'smallAlbumArt', 'alwaysOnTop'];
+			const whatToPopulate = ['preferRomaji', 'eventStarts', 'enableGaps', 'smallAlbumArt', 'alwaysOnTop', 'hideFromTaskbar', 'minimizeToTray'];
 
 			for (const key of whatToPopulate) {
 				const storageValue = localStorage.getItem(key);