added download queue

69b916f5 · SpinShare · edefd63d · 69b916f5 · 69b916f5 · 69b916f5
Commit 69b916f5 authored Apr 30, 2020 by SpinShare
10 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -5007,16 +5007,6 @@
        "extract-zip": "^1.6.7"
      }
    },
-    "electron-dl": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/electron-dl/-/electron-dl-3.0.0.tgz",
-      "integrity": "sha512-TeBRv+vQgNVLGf/XLV4EYfYIBMI4TQcw84aDlM8xEm/1Lgxux3PUXDzaingivf+6jMvRojXSRPTHmiWI/6LrqQ==",
-      "requires": {
-        "ext-name": "^5.0.0",
-        "pupa": "^2.0.1",
-        "unused-filename": "^2.1.0"
-      }
-    },
    "electron-download": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/electron-download/-/electron-download-4.1.1.tgz",
@@ -5056,6 +5046,11 @@
        }
      }
    },
+    "electron-download-manager": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/electron-download-manager/-/electron-download-manager-2.1.2.tgz",
+      "integrity": "sha512-9v8aeMVZTX69NjEveKlKfTlJY74twpKktTXrmDI+UcQHZg7FtwuqxWw0ZNrjtVAOBcVNKzwG4ekn44B+xhz1tg=="
+    },
    "electron-publish": {
      "version": "21.2.0",
      "resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-21.2.0.tgz",
@@ -5224,11 +5219,6 @@
        "is-symbol": "^1.0.2"
      }
    },
-    "escape-goat": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
-      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q=="
-    },
    "escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -5447,23 +5437,6 @@
        }
      }
    },
-    "ext-list": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
-      "integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
-      "requires": {
-        "mime-db": "^1.28.0"
-      }
-    },
-    "ext-name": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ext-name/-/ext-name-5.0.0.tgz",
-      "integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
-      "requires": {
-        "ext-list": "^2.0.0",
-        "sort-keys-length": "^1.0.0"
-      }
-    },
    "extend": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -7586,7 +7559,8 @@
    "is-plain-obj": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+      "dev": true
    },
    "is-plain-object": {
      "version": "2.0.4",
@@ -8384,7 +8358,8 @@
    "mime-db": {
      "version": "1.43.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-      "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ=="
+      "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
+      "dev": true
    },
    "mime-types": {
      "version": "2.1.26",
@@ -8560,11 +8535,6 @@
        "minimist": "^1.2.5"
      }
    },
-    "modify-filename": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modify-filename/-/modify-filename-1.1.0.tgz",
-      "integrity": "sha1-mi3sg4Bvuy2XXyK+7IWcoms5OqE="
-    },
    "move-concurrently": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10274,14 +10244,6 @@
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
      "dev": true
    },
-    "pupa": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.0.1.tgz",
-      "integrity": "sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==",
-      "requires": {
-        "escape-goat": "^2.0.0"
-      }
-    },
    "q": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -11437,18 +11399,11 @@
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+      "dev": true,
      "requires": {
        "is-plain-obj": "^1.0.0"
      }
    },
-    "sort-keys-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sort-keys-length/-/sort-keys-length-1.0.1.tgz",
-      "integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
-      "requires": {
-        "sort-keys": "^1.0.0"
-      }
-    },
    "source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -12567,22 +12522,6 @@
        }
      }
    },
-    "unused-filename": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/unused-filename/-/unused-filename-2.1.0.tgz",
-      "integrity": "sha512-BMiNwJbuWmqCpAM1FqxCTD7lXF97AvfQC8Kr/DIeA6VtvhJaMDupZ82+inbjl5yVP44PcxOuCSxye1QMS0wZyg==",
-      "requires": {
-        "modify-filename": "^1.1.0",
-        "path-exists": "^4.0.0"
-      },
-      "dependencies": {
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
-        }
-      }
-    },
    "unzip-crx": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/unzip-crx/-/unzip-crx-0.2.0.tgz",

--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
-    "electron-dl": "^3.0.0",
+    "electron-download-manager": "^2.1.2",
    "glob": "^7.1.6",
    "ncp": "^2.0.0",
    "rimraf": "^3.0.2",

--- a/src/App.vue
+++ b/src/App.vue
 <template>
-    <div id="app">
+    <div id="app" tabindex="-1" v-on:keydown.esc="closeOverlays()">
        <main>
-            <Navigation />
+            <Navigation v-bind:downloadQueueCount="downloadQueue.length" v-bind:downloadOverlayShown="showDownloadOverlay" />
            <router-view />
        </main>
-        <ContextMenu>
+        <ContextMenu></ContextMenu>
-        </ContextMenu>
-        <UpdateOverlay v-if="showUpdateOverlay" v-bind:isAvailable="isUpdateAvailable"></UpdateOverlay>
+        <transition name="fade">
+            <UpdateOverlay v-if="showUpdateOverlay" v-bind:isAvailable="isUpdateAvailable"></UpdateOverlay>
+        </transition>
+        <transition name="slideDownloadOverlay">
+            <DownloadOverlay v-if="showDownloadOverlay" v-bind:downloadQueue="downloadQueue"></DownloadOverlay>
+        </transition>
    </div>
 </template>
 <script>
-    import { remote } from 'electron';
+    import { remote, ipcRenderer } from 'electron';
    const { app, dialog } = remote;
    import fs from 'fs';
    import glob from 'glob';
    import path from 'path';
+    import ncp from 'ncp';
    import UserSettings from '@/modules/module.usersettings.js';
    import SSAPI from '@/modules/module.api.js';
+    import SRXD from '@/modules/module.srxd.js';
    import Navigation from '@/components/Navigation/Navigation.vue';
    import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';
    import UpdateOverlay from '@/components/Overlays/UpdateOverlay.vue';
+    import DownloadOverlay from '@/components/Overlays/DownloadOverlay.vue';
    export default {
        name: 'App',
        components: {
            Navigation,
            ContextMenu,
-            UpdateOverlay
+            UpdateOverlay,
+            DownloadOverlay
        },
        data: function() {
            return {
                downloadQueue: [],
+                downloadQueueProcessing: false,
                showUpdateOverlay: false,
+                showDownloadOverlay: false,
                isUpdateAvailable: false
            }
        },
@@ -45,6 +56,15 @@
            this.$root.$on('download', (url) => {
                this.addToQueue(url);
            });
+            this.$root.$on('showDownloadOverlay', () => {
+                this.$data.showDownloadOverlay = true;
+            });
+            this.$root.$on('toggleDownloadOverlay', () => {
+                this.$data.showDownloadOverlay = !this.$data.showDownloadOverlay;
+            });
+            this.$root.$on('hideDownloadOverlay', () => {
+                this.$data.showDownloadOverlay = false;
+            });
            this.$root.$on('showUpdateOverlay', (isAvailable) => {
                this.$data.showUpdateOverlay = true;
@@ -63,17 +83,69 @@
                    this.$data.isUpdateAvailable = true;
                }
            });
+            ipcRenderer.on("download-complete", (event, downloadItem) => {
+                let srxdControl = new SRXD();
+                let userSettings = new UserSettings();
+                srxdControl.extractBackup(downloadItem.downloadPath, path.basename(downloadItem.downloadPath)).then((extractResult) => {
+                    if(extractResult) {
+                        this.installBackup(extractResult, userSettings.get('gameDirectory')).then((result) => {
+                            this.$data.downloadQueueProcessing = false;
+                            console.log("Queue Remaining: " + this.$data.downloadQueue.length);
+                            this.$data.downloadQueue.splice(this.$data.downloadQueue.findIndex(function(i) {
+                                return i.id === downloadItem.id;
+                            }), 1);
+                            if(this.$data.downloadQueue.length > 0) {
+                                this.processQueue();
+                            }
+                        }).catch(error => {
+                            console.error(error);
+                        });
+                    } else {
+                        console.error("Backup could not be loaded!");
+                    }
+                }).catch(error => {
+                    console.error(error);
+                });
+            });
        },
        methods: {
            addToQueue: function(url) {
                this.$data.downloadQueue.push(url);
-                console.log("Added " + url + " to queue");
+                if(!this.$data.downloadQueueProcessing) {
-            }
+                    this.processQueue();
-        },
+                }
-        watch: {
+            },
-            downloadQueue: function(queue) {
+            processQueue: function() {
-                console.log("Downloading first item");
+                this.$data.downloadQueueProcessing = true;
-                console.log(this.$data.downloadQueue);
+                if(this.$data.downloadQueue.length > 0) {
+                    let downloadItem = this.$data.downloadQueue[0];
+                    ipcRenderer.send("download", {
+                        queueItem: downloadItem
+                    });
+                }
+            },
+            closeOverlays: function() {
+                this.$data.showUpdateOverlay = false;
+                this.$data.showDownloadOverlay = false;
+            },
+            installBackup: async function(backupLocation, gameDirLocation) {
+                await ncp(backupLocation, gameDirLocation, function(error) {
+                    if(error) {
+                        console.error(error);
+                        console.error("Couldn't copy backup!");
+                        return true;
+                    }
+                    console.log("Copied Backup!");
+                });
+                return true;
            }
        }
    }
@@ -108,6 +180,10 @@
    ::-webkit-scrollbar-thumb {
        background: #fff;
    }
+    a {  text-decoration: none; }
+    #app:focus {
+        outline: none;
+    }
    main {
        display: grid;
        margin-left: 60px;
@@ -154,4 +230,17 @@
            }
        }
    }
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity .2s;
+    }
+    .fade-enter, .fade-leave-to {
+        opacity: 0;
+    }
+    .slideDownloadOverlay-enter-active, .slideDownloadOverlay-leave-active {
+        transform: translateX(0px);
+        transition: transform .5s;
+    }
+    .slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to {
+        transform: translateX(-400px);
+    }
 </style>
--- a/src/background.js
+++ b/src/background.js
 const { app, protocol, BrowserWindow, ipcMain } = require('electron');
-const { download } = require('electron-dl');
+const DownloadManager = require("electron-download-manager");
 const { createProtocol } = require('vue-cli-plugin-electron-builder/lib');
 const isDevelopment = process.env.NODE_ENV !== 'production';
@@ -7,6 +7,10 @@ let win;
 let deeplinkingUrl;
 let deeplinkingType;
+DownloadManager.register({
+    downloadFolder: app.getPath("temp")
+});
 protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }]);
 protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }]);
 protocol.registerSchemesAsPrivileged([{scheme: 'app', privileges: { secure: true, standard: true } }]);
@@ -68,8 +72,20 @@ if (isDevelopment) {
  }
 }
-ipcMain.on("download", (event, info) => {
+ipcMain.on("download", (event, ipcData) => {
-  console.log("Download Request Received");
+    console.log("Download: " + ipcData.queueItem.title);
-  download(BrowserWindow.getFocusedWindow(), info.url, info.properties)
-      .then(dl => win.webContents.send("download-complete", dl.getSavePath()));
+    DownloadManager.download({url: ipcData.queueItem.downloadPath}, (error, dlInfo) => {
+        if (error) {
+            console.log(error);
+            return;
+        }
+        let downloadItem = {
+            id: ipcData.queueItem.id,
+            downloadPath: dlInfo.filePath
+        }
+        win.webContents.send("download-complete", downloadItem);
+    });
 });
\ No newline at end of file
--- a/src/components/Navigation/Navigation.vue
+++ b/src/components/Navigation/Navigation.vue
@@ -9,6 +9,10 @@
        <nav>
            <div v-on:click="openExternal('steam://run/1058830');" class="item"><i class="mdi mdi-play-outline"></i></div>
+            <div v-on:click="showDownloadOverlay();" :class="'item ' + (downloadOverlayShown ? 'router-link-active' : '')">
+                <i class="mdi mdi-download-outline"></i>
+                <span class="badge" v-show="downloadQueueCount > 0">{{ downloadQueueCount }}</span>
+            </div>
            <router-link to="/settings" class="item"><i class="mdi mdi-cog-outline"></i></router-link>
        </nav>
    </aside>
@@ -20,7 +24,14 @@
    export default {
        name: 'Navigation',
+        props: [
+            'downloadQueueCount',
+            'downloadOverlayShown'
+        ],
        methods: {
+            showDownloadOverlay: function() {
+                this.$root.$emit('toggleDownloadOverlay');
+            },
            openExternal: function(url) {
                shell.openExternal(url);
            }
@@ -30,9 +41,10 @@
 <style scoped lang="less">
    aside {
-        background: rgba(255,255,255,0.1);
+        background: #383C3F;
        display: grid;
        position: fixed;
+        z-index: 50;
        top: 0px;
        left: 0px;
        bottom: 0px;
@@ -41,8 +53,8 @@
        & .item, & .external-item {
            width: 60px;
            height: 60px;
-            opacity: 0.4;
            display: flex;
+            position: relative;
            justify-content: center;
            align-items: center;
            background: transparent;
@@ -50,16 +62,54 @@
            transition: 0.2s ease opacity, 0.2s ease background;
            &:hover {
-                opacity: 1;
                cursor: pointer;
+                & .mdi {
+                    opacity: 1;
+                }
            }
            &.router-link-active {
                opacity: 1;
-                background: linear-gradient(135deg, #fd2f85, #7a34ec);
+                &:before {
+                    transition: 0.2s ease-in-out opacity;
+                    opacity: 1;
+                }
+                & .mdi {
+                    opacity: 1;
+                }
            }
            & .mdi {
                font-size: 22px;
+                opacity: 0.4;
+                position: relative;
+                z-index: 2;
+            }
+            & .badge {
+                position: absolute;
+                z-index: 3;
+                bottom: 5px;
+                right: 5px;
+                font-size: 12px;
+                font-weight: bold;
+                padding: 2px 6px;
+                border-radius: 5px;
+                background: rgba(255,255,255,0.2);
+            }
+            &:before {
+                content: "";
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                bottom: 0px;
+                right: 0px;
+                background: linear-gradient(135deg, #fd2f85, #7a34ec);
+                opacity: 0;
+                z-index: 0;
            }
        }
    }

--- a/src/components/Overlays/DownloadOverlay.vue
+++ b/src/components/Overlays/DownloadOverlay.vue
+<template>
+    <div class="download-overlay">
+        <header>
+            <div class="title">
+                Download Queue
+            </div>
+            <div class="icon" v-on:click="close()">
+                <i class="mdi mdi-close"></i>
+            </div>
+        </header>
+        <div class="download-list">
+            <div class="download-item" v-for="item in downloadQueue">
+                <div class="cover" :style="'background-image: url(' + item.cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'"></div>
+                <div class="meta">
+                    <div class="title">{{ item.title }}</div>
+                    <div class="artist">{{ item.artist }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { remote } from 'electron';
+    const { shell } = remote;
+    export default {
+        name: 'DownloadOverlay',
+        props: [
+            'downloadQueue'
+        ],
+        data: function() {
+            return {
+                showUpdateOverlay: false,
+                showDownloadManager: false,
+                isUpdateAvailable: false
+            }
+        },
+        methods: {
+            close() {
+                this.$root.$emit('hideDownloadOverlay');
+            }
+        }
+    }
+</script>
+<style scoped lang="less">
+    .download-overlay {
+        position: fixed;
+        z-index: 10;
+        top: 0px;
+        bottom: 0px;
+        left: 60px;
+        width: 400px;
+        background: #383C3F;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        grid-gap: 15px;
+        box-shadow: 4px 0px 16px rgba(0,0,0,0.3);
+        & header {
+            padding: 25px;
+            padding-bottom: 0px;
+            display: grid;
+            grid-template-columns: 1fr auto;
+            grid-gap: 15px;
+            & .title {
+                align-self: center;
+                letter-spacing: 0.25em;
+                font-size: 14px;
+                font-weight: bold;
+                text-transform: uppercase;
+            }
+            & .icon {
+                font-size: 22px;
+                transition: 0.2s ease-in-out opacity;
+                &:hover {
+                    opacity: 0.6;
+                    cursor: pointer;
+                }
+            }
+        }
+        & .download-list {
+            overflow-y: auto;
+            padding: 0px 25px;
+            margin-bottom: 25px;
+            & .download-item {
+                display: grid;
+                grid-template-columns: 50px 1fr;
+                grid-gap: 10px;
+                background: rgba(255,255,255,0.1);
+                margin-bottom: 5px;
+                padding: 10px;
+                border-radius: 5px;
+                & .cover {
+                    width: 50px;
+                    height: 50px;
+                    background-position: center;
+                    background-size: cover;
+                    border-radius: 5px;
+                }
+                & .meta {
+                    align-self: center;
+                    overflow: hidden;
+                    & .title {
+                        font-weight: bold;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+                    & .artist {
+                        margin-top: 5px;
+                        opacity: 0.6;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+    }
+</style>
--- a/src/components/Song/SongItem.vue
+++ b/src/components/Song/SongItem.vue
 <template>
-    <router-link :to="{ name: 'SongDetail', params: { id: id } }" class="song-item" v-on:contextmenu="showContextMenu($event)">
+    <div class="song-item" v-on:contextmenu="showContextMenu($event)">
-        <div class="song-cover" :style="'background-image: url(' + cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'">
+        <router-link :to="{ name: 'SongDetail', params: { id: id } }">
-            <div class="song-charter-info">
+                <div class="song-cover" :style="'background-image: url(' + cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'">
-                <div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ charter }}</span></div>
+                    <div class="song-charter-info">
-            </div>
+                        <div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ charter }}</span></div>
-        </div>
+                    </div>
-        <div class="song-metadata">
+                </div>
-            <div class="song-title">{{ title }}</div>
+                <div class="song-metadata">
-            <div class="song-artist">{{ artist }}</div>
+                    <div class="song-title">{{ title }}</div>
-            <div class="song-difficulties">
+                    <div class="song-artist">{{ artist }}</div>
-                <img src="@/assets/img/difficultyEasy.svg" :class="hasEasyDifficulty ? 'active' : ''" />
+                    <div class="song-difficulties">
-                <img src="@/assets/img/difficultyNormal.svg" :class="hasNormalDifficulty ? 'active' : ''" />
+                        <img src="@/assets/img/difficultyEasy.svg" :class="hasEasyDifficulty ? 'active' : ''" />
-                <img src="@/assets/img/difficultyHard.svg" :class="hasHardDifficulty ? 'active' : ''" />
+                        <img src="@/assets/img/difficultyNormal.svg" :class="hasNormalDifficulty ? 'active' : ''" />
-                <img src="@/assets/img/difficultyExtreme.svg" :class="hasExtremeDifficulty ? 'active' : ''" />
+                        <img src="@/assets/img/difficultyHard.svg" :class="hasHardDifficulty ? 'active' : ''" />
-                <img src="@/assets/img/difficultyXD.svg" :class="hasXDDifficulty ? 'active' : ''" />
+                        <img src="@/assets/img/difficultyExtreme.svg" :class="hasExtremeDifficulty ? 'active' : ''" />
-            </div>
+                        <img src="@/assets/img/difficultyXD.svg" :class="hasXDDifficulty ? 'active' : ''" />
-        </div>
+                    </div>
-    </router-link>
+                </div>
+        </router-link>
+    </div>
 </template>
 <script>
@@ -48,14 +50,19 @@
        },
        methods: {
            showContextMenu: function(e) {
+                e.preventDefault();
                this.$root.$emit('showContextMenu', {
                    x: e.pageX,
                    y: e.pageY,
                    items: [
-                        { icon: "eye", title: "Open", method: () => { alert('TODO') } },
+                        { icon: "eye", title: "Open", method: () => { this.$router.push({ name: 'SongDetail', params: { id: this.$props.id } }) } },
                        { icon: "link", title: "Copy Link", method: () => { clipboard.writeText('https://spinsha.re/song/' + this.$props.id) } },
-                        { icon: "download", title: "Download", method: () => { this.$root.$emit('download', this.$props.zip); } }
+                        { icon: "download", title: "Download", method: () => { this.download(); } }
                    ]});
+            },
+            download: function() {
+                this.$root.$emit('download', {id: this.$props.id, cover: this.$props.cover, title: this.$props.title, artist: this.$props.artist, downloadPath: this.$props.zip});
            }
        }
    }
@@ -67,8 +74,6 @@
        transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
        overflow: hidden;
        border-radius: 6px;
-        color: #fff;
-        text-decoration: none;
        & .song-cover {
            background: rgba(255,255,255,0.1);
@@ -80,6 +85,8 @@
            & .song-charter {
                position: absolute;
+                color: #fff;
+                text-decoration: none;
                top: 0px;
                left: 0px;
                right: 0px;
@@ -114,6 +121,8 @@
        & .song-metadata {
            padding: 15px;
+            color: #fff;
+            text-decoration: none;
            & .song-title {
                font-weight: bold;

--- a/src/modules/module.srxd.js
+++ b/src/modules/module.srxd.js
@@ -4,6 +4,7 @@ const path = require('path');
 const rimraf = require('rimraf');
 const unzipper = require('unzipper');
 const uniqid = require('uniqid');
+const { app } = require('electron').remote;
 const UserSettings = require('./module.usersettings');
 class SRXD {
@@ -25,14 +26,12 @@ class SRXD {
        console.log("Extracting Backup.");
-        this.backupLocation = path.join(tempDirLocation, "extract-" + uniqid());
+        this.backupLocation = path.join(app.getPath('temp'), "extract-" + uniqid());
        console.info(this.backupLocation);
        // Unzip to temp/CustomSpeens/Song
        await fs.createReadStream(filePath).pipe(unzipper.Extract({ path: this.backupLocation })).promise();
-        console.log("Loading Backup.");
        // Find SRTB & OGG files
        let srtbFilesInBackupLocation = this.getFilesFromPath(this.backupLocation, ".srtb");
@@ -157,7 +156,6 @@ class SRXD {
                }
                catch(err){}
        });
-        RefreshLibrary();
    }
 }

--- a/src/views/Library.vue
+++ b/src/views/Library.vue
@@ -53,7 +53,6 @@
            this.$on('delete', (file) => {
                this.$data.showDeleteOverlay = true;
                this.$data.deleteFiles = this.getConnectedFiles(file);
-                console.log(this.$data.deleteFiles);
            });
            this.$on('deleteDeny', () => {
                this.$data.showDeleteOverlay = false;
@@ -97,7 +96,7 @@
                            isSpinShare: songSpinShareReference
                        };
-                        this.$data.librarySongs.push(librarySong)
+                        this.$data.librarySongs.push(librarySong);
                    });
                });
            },

--- a/src/views/SongDetail.vue
+++ b/src/views/SongDetail.vue
@@ -100,7 +100,7 @@
        },
        methods: {
            AddToQueue: function() {
+                this.$root.$emit('download', {id: this.$data.id, cover: this.$data.cover, title: this.$data.title, artist: this.$data.artist, downloadPath: this.$data.downloadPath});
            },
            PlayPreview: function() {