add minimize to tray

src/main/plugins/minimizeToTray.ts

@@ -0,0 +1,149 @@
+import * as electron from 'electron';
+import * as path from 'path';
+
+
+export default class MinimizeToTray {
+    /**
+     * Private variables for interaction in plugins
+     */
+    private _win: any;
+    private _app: any;
+    private _store: any;
+    private _tray: any;
+
+    /**
+     * Base Plugin Details (Eventually implemented into a GUI in settings)
+     */
+    public name: string = 'Minimize to tray';
+    public description: string = 'Allow Cider to minimize to tray';
+    public version: string = '1.0.0';
+    public author: string = 'vapormusic';
+
+    constructor(app: any, store: any) {
+        this._app = app;
+        this._store = store;
+    }
+
+    private SetContextMenu(visibility : any) {
+        let self = this
+        if (visibility) {
+            this._tray.setContextMenu(electron.Menu.buildFromTemplate([
+                // {
+                //     label: 'Check for Updates',
+                //     click: function () {
+                //         app.ame.utils.checkForUpdates(true)
+                //     }
+                // },
+                {
+                    label: 'Minimize to Tray',
+                    click: function () {
+                        if (typeof self._win.hide === 'function') {
+                            self._win.hide();
+                            self.SetContextMenu(false);
+                        }
+                    }
+                },
+                {
+                    label: 'Quit',
+                    click: function () {
+                        self._app.quit();
+                    }
+                }
+            ]));
+        } else {
+            this._tray.setContextMenu(electron.Menu.buildFromTemplate([
+                // {
+                //     label: 'Check for Updates',
+                //     click: function () {
+                //         this._app.ame.utils.checkForUpdates(true)
+                //     }
+                // },
+                {
+                    label: `Show ${electron.app.getName()}`,
+                    click: function () {
+                        if (typeof self._win.show === 'function') {
+                            self._win.show();
+                            self.SetContextMenu(true);
+                        }
+                    }
+                },
+                {
+                    label: 'Quit',
+                    click: function () {
+                        self._app.quit();
+                    }
+                }
+            ]));
+        }
+        return true
+
+    }
+
+    /**
+     * Runs on app ready
+     */
+    onReady(win: any): void {
+        this._win = win;
+        const winTray = electron.nativeImage.createFromPath(path.join(__dirname, `../../resources/icons/icon.ico`)).resize({
+            width: 32,
+            height: 32
+        })
+        const macTray = electron.nativeImage.createFromPath(path.join(__dirname, `../../resources/icons/icon.png`)).resize({
+            width: 20,
+            height: 20
+        })
+        const linuxTray = electron.nativeImage.createFromPath(path.join(__dirname, `../../resources/icons/icon.png`)).resize({
+            width: 32,
+            height: 32
+        })
+        let trayIcon : any ;
+        if (process.platform === "win32") {
+            trayIcon = winTray
+        } else if (process.platform === "linux") {
+            trayIcon = linuxTray
+        } else if (process.platform === "darwin") {
+            trayIcon = macTray
+        }
+
+        this._tray = new electron.Tray(trayIcon)
+        this._tray.setToolTip(this._app.getName());
+        this.SetContextMenu(true);
+
+        this._tray.on('double-click', () => {
+            if (typeof this._win.show === 'function') {
+                if (this._win.isVisible()) {
+                    this._win.focus()
+                } else {
+                    this._win.show()
+                }
+            }
+        }) 
+        electron.ipcMain.on("minimizeTray", (event, value) => {
+            // listen for close event
+            this._win.hide();
+            this.SetContextMenu(false);
+        });   
+    }
+
+    /**
+     * Runs on app stop
+     */
+    onBeforeQuit(): void {
+
+    }
+
+    /**
+     * Runs on playback State Change
+     * @param attributes Music Attributes (attributes.state = current state)
+     */
+    onPlaybackStateDidChange(attributes: object): void {
+    }
+
+    /**
+     * Runs on song change
+     * @param attributes Music Attributes
+     */
+    onNowPlayingItemDidChange(attributes: object): void {
+    }
+
+}

src/renderer/index.js

@@ -3419,6 +3419,23 @@ const app = new Vue({
                 document.getElementsByClassName('song-name')[0].classList.add('marquee');
                 document.getElementsByClassName('song-name')[1].classList.add('marquee-after');
             } 
+        },
+        closeWindow(){
+            switch (app.cfg.general.close_behavior) {
+                case 0:
+                case '0':
+                    ipcRenderer.send('close');
+                    break;
+                case 1:    
+                case '1':
+                    ipcRenderer.send('minimize');
+                    break;
+                case 2:
+                case '2':
+                    ipcRenderer.send('minimizeTray');
+                    break;    
+
+            }
         }
     }  
     

src/renderer/views/main.ejs

@@ -41,7 +41,7 @@
                 <div class="app-chrome--left">
                     <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left'">
                         <div class="window-controls">
-                            <div class="close" @click="ipcRenderer.send('close')"></div>
+                            <div class="close" @click="closeWindow()"></div>
                             <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
                             <div class="minmax restore" v-if="chrome.maximized"
                                  @click="ipcRenderer.send('maximize')">
@@ -174,7 +174,7 @@
                                  @click="ipcRenderer.send('maximize')">
                             </div>
                             <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
-                            <div class="close" @click="ipcRenderer.send('close')"></div>
+                            <div class="close" @click="closeWindow()"></div>
                         </div>
                     </div>
                 </div>

src/renderer/views/pages/settings.ejs

@@ -529,6 +529,18 @@
                     </select>
                 </div>
             </div>
+            <div class="md-option-line">
+                <div class="md-option-segment">
+                    Close Button Behavior
+                </div>
+                <div class="md-option-segment md-option-segment_auto">
+                    <select class="md-select" v-model="app.cfg.general.close_behavior">
+                        <option value='0'>Quit Cider</option>
+                        <option value='1'>Minimize to taskbar</option>
+                        <option value='2'>Minimize to system tray</option>
+                    </select>
+                </div>
+            </div>
         </div>
             <div style="opacity: 0.5; pointer-events: none">
                 <div class="md-option-header">
@@ -581,18 +593,6 @@
                         </select>
                     </div>
                 </div>
-                <div class="md-option-line">
-                    <div class="md-option-segment">
-                        Close Button Behavior
-                    </div>
-                    <div class="md-option-segment md-option-segment_auto">
-                        <select class="md-select">
-                            <option value='0'>Minimize to system tray</option>
-                            <option value='1'>Minimize to taskbar ? dock</option>
-                            <option value='2'>Quit Cider</option>
-                        </select>
-                    </div>
-                </div>
                 <div class="md-option-line">
                     <div class="md-option-segment">
                         Open Cider on Startup