1.1.18 - imagine useful commit messages

.gitignore

@@ -7,3 +7,6 @@ app/client/node_modules/
 electron_dist/
 freezer-*.tgz
 translations.zip
+package-lock.json
+app/package-lock.json
+app/client/package-lock.json

app/background.js

@@ -2,7 +2,7 @@ const {app, BrowserWindow, ipcMain, Tray, Menu, session, dialog, shell, nativeTh
 const {createServer} = require('./src/server');
 const path = require('path');
 const arg = require('arg');
-const { exit } = require('process');
+const { exit, platform } = require('process');
 const packageJson = require('./package.json');
 const chalk = require('chalk');
 const {Settings} = require('./src/settings');
@@ -174,6 +174,10 @@ if (!singleInstanceLock) {
 
 //Create window
 app.on('ready', async () => {
+    //No mac
+    if (platform == 'darwin')
+        process.exit(-1);
+
     await startServer();
     //Server mode
     if (args['--server']) return;

app/client/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@mdi/font": "^5.9.55",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "roboto-fontface": "*",
     "vue": "^2.6.12",
     "vue-esc": "^3.0.1",

app/client/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div :class='{"enable-bgi": $root.settings.backgroundImage}'>
   <v-app v-esc='closePlayer'>
 
     <v-system-bar 
@@ -18,7 +18,14 @@
     </v-system-bar>
 
     <!-- Fullscreen player overlay -->
-    <v-overlay :value='showPlayer' opacity='1.00' z-index="100">
+    <v-overlay 
+      :dark='!$root.settings.lightTheme' 
+      :light='$root.settings.lightTheme' :value='showPlayer' 
+      :opacity='$root.settings.backgroundImage ? 0.0 : 1.0' 
+      z-index="100"
+      :color='$root.settings.lightTheme ? "#ffffff" : "#212121"'>
+      
+      <img :src='backgroundSrc' class='wallpaper-overlay' v-if='$root.settings.backgroundImage'>
       <FullscreenPlayer @close='closePlayer' @volumeChange='volume = $root.volume'></FullscreenPlayer>
     </v-overlay>
 
@@ -149,7 +156,7 @@
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar app dense color='#1e1e1e'>
+    <v-app-bar app dense :color='$root.settings.lightTheme ? null : "#1e1e1e"'>
 
       <v-btn icon @click='previous'>
         <v-icon>mdi-arrow-left</v-icon>
@@ -172,6 +179,7 @@
         :loading='searchLoading'
         @keyup='search'
         ref='searchBar'
+        :background-color='$root.settings.lightTheme ? "#ffffff00" : "#00000000"'
         v-model='searchQuery'
         :search-input.sync='searchInput'
         :items='suggestions'
@@ -182,13 +190,13 @@
     
     <!-- Main -->
     <v-main>
+      <img :src='backgroundSrc' class='wallpaper' v-if='$root.settings.backgroundImage'>
       <v-container 
         class='overflow-y-auto' 
         fluid
         style='height: calc(100vh - 140px);'>
-
         <keep-alive include='Search,PlaylistPage,HomeScreen,DeezerPage'>
-          <router-view></router-view>
+          <router-view class='router-wiev'></router-view>
         </keep-alive>
       </v-container>
     </v-main>
@@ -297,6 +305,10 @@
 .v-navigation-drawer__content {
   overflow-y: hidden !important;
 }
+.enable-bgi {
+  @import 'styles/bg-image.scss';
+}
+
 </style>
 <style lang='scss' scoped>
 .seekbar {
@@ -312,6 +324,22 @@
 .topbarbutton {
   -webkit-app-region: no-drag;
 }
+.wallpaper {
+  width: 100vw;
+  height: 100vh;
+  top: -48px;
+  left: -56px;
+  z-index: -100;
+  position: absolute;
+  object-fit: fill;
+}
+.wallpaper-overlay {
+  width: 100vw;
+  height: 100vh;
+  z-index: -100;
+  position: absolute;
+  object-fit: fill;
+}
 </style>
 
 <script>
@@ -451,6 +479,12 @@ export default {
       if (p > 100)
         p = 100;
       return Math.round(p);
+    },
+    //Get background src
+    backgroundSrc() {
+      if (this.$root.settings.backgroundImage && this.$root.settings.backgroundImage.startsWith("http"))
+        return this.$root.settings.backgroundImage;
+      return process.env.NODE_ENV === 'development' ? "http://localhost:10069/background" : "/background";
     }
   },
   async mounted() {

app/client/src/components/LibraryAlbums.vue

@@ -25,7 +25,7 @@
             dense
             :label='$t("Search")'
             solo
-            class='mx-2 mt-1'
+            class='mx-2'
             v-model='searchQuery'
         ></v-text-field>
     </div>

app/client/src/components/LibraryArtists.vue

@@ -25,7 +25,7 @@
             dense
             :label='$t("Search")'
             solo
-            class='mx-2 mt-1'
+            class='mx-2'
             v-model='searchQuery'
         ></v-text-field>
     </div>

app/client/src/components/LibraryPlaylists.vue

@@ -27,7 +27,7 @@
             dense
             :label='$t("Search")'
             solo
-            class='mx-2 mt-1'
+            class='mx-2'
             v-model='searchQuery'
         ></v-text-field>
     </div>

app/client/src/components/LibraryTracks.vue

@@ -19,7 +19,7 @@
             dense
             :label='$t("Search")'
             solo
-            class='mx-2 mt-1'
+            class='mx-2'
             v-model='searchQuery'
         ></v-text-field>
     </div>

app/client/src/components/Lyrics.vue

@@ -9,7 +9,7 @@
         v-for='(lyric, index) in lyrics.lyrics' 
         :key='lyric.offset' 
         class='my-6 mx-4 pa-2 rounded' 
-        :class='{"grey darken-3": playingNow(index)}'
+        :class='{"grey darken-3": (playingNow(index) && !$root.settings.lightTheme), "grey lighten-1": (playingNow(index) && $root.settings.lightTheme)}'
         @click='seekTo(index)'>
             <span 
             class='my-8'

app/client/src/js/vuetify.js

@@ -11,6 +11,6 @@ export default new Vuetify({
         dark: true,
         options: {
             customProperties: true
-        }
+        },
     }
 });

app/client/src/main.js

@@ -11,7 +11,7 @@ import i18n from './js/i18n';
 let ipcRenderer;
 //Axios
 let axiosInstance = axios.create({
-    baseURL: `${window.location.origin}`,
+    baseURL: process.env.NODE_ENV === 'development' ? "http://localhost:10069" : `${window.location.origin}`,
     timeout: 16000,
     responseType: 'json'
 });
@@ -53,7 +53,7 @@ Vue.prototype.$filesize = (bytes) => {
 
 //Sockets
 Vue.use(new VueSocketIO({
-    connection: window.location.toString(),
+    connection: process.env.NODE_ENV === 'development' ? "http://localhost:10069" : window.location.toString(),
     options: {path: '/socket'}
 }));
 
@@ -236,7 +236,7 @@ new Vue({
             this.playbackInfo = playbackInfo;
 
             //Stream URL
-            let url = `${window.location.origin}${this.playbackInfo.url}`;
+            let url = `${process.env.NODE_ENV === 'development' ? "http://localhost:10069" : window.location.origin}${this.playbackInfo.url}`;
             //Cancel loading
             this.loaders--;
             if (this.loaders > 0) {
@@ -424,7 +424,7 @@ new Vue({
                 if (this.gapless.promise) resolve();
             }
             this.gapless.info = info
-            this.gapless.audio = new Audio(`${window.location.origin}${info.url}`);
+            this.gapless.audio = new Audio(`${process.env.NODE_ENV === 'development' ? "http://localhost:10069" : window.location.origin}${info.url}`);
             this.gapless.audio.volume = 0.00;
             this.gapless.audio.preload = 'auto';
             this.gapless.crossfade = false;
@@ -526,6 +526,9 @@ new Vue({
         let res = await this.$axios.get('/settings');
         this.settings = res.data;
         this.$vuetify.theme.themes.dark.primary = this.settings.primaryColor;
+        this.$vuetify.theme.themes.light.primary = this.settings.primaryColor;
+        if (this.settings.lightTheme)
+            this.$vuetify.theme.dark = false;
         i18n.locale = this.settings.language;
         this.volume = this.settings.volume;
 

app/client/src/views/AlbumPage.vue

@@ -10,7 +10,7 @@
         ></v-img>
         
         <div class='pl-4'>
-            <v-overlay absolute :value="loading" z-index="3" opacity='0.9'>
+            <v-overlay absolute :value="loading" z-index="3" opacity='0'>
                 <v-progress-circular indeterminate></v-progress-circular>
             </v-overlay>
             <h1>{{album.title}}</h1>

app/client/src/views/ArtistPage.vue

@@ -11,7 +11,7 @@
         ></v-img>
         
         <div class='pl-4'>
-            <v-overlay absolute :value="loading" z-index="3" opacity='0.9'>
+            <v-overlay absolute :value="loading" z-index="3" opacity='0'>
                 <v-progress-circular indeterminate></v-progress-circular>
             </v-overlay>
             <h1>{{artist.name}}</h1>

app/client/src/views/FullscreenPlayer.vue

@@ -39,6 +39,7 @@
                             :value='position'
                             ref='seeker'
                             class='seekbar'
+                            color='primary'
                             hide-details>
                         </v-slider>
                     </v-col>
@@ -108,6 +109,7 @@
                             step='0.01'
                             v-model='$root.volume'
                             class='px-8'
+                            color='primary'
                             style='padding-top: 2px;'
                             @change='updateVolume'
                             @click:prepend='$root.toggleMute()'

app/client/src/views/PlaylistPage.vue

@@ -10,7 +10,7 @@
         ></v-img>
         
         <div class='pl-4'>
-            <v-overlay absolute :value="loading" z-index="3" opacity='0.9'>
+            <v-overlay absolute :value="loading" z-index="3" opacity='0'>
                 <v-progress-circular indeterminate></v-progress-circular>
             </v-overlay>
             <h1>

app/client/src/views/Settings.vue

@@ -135,6 +135,19 @@
             :items='languageNames'
             @change='updateLanguage'
         ></v-select>
+        <!-- Light theme -->
+        <v-list-item>
+            <v-list-item-action>
+                <v-checkbox 
+                    v-model='$root.settings.lightTheme' 
+                    class='pl-2'
+                    @change='$vuetify.theme.dark = !$root.settings.lightTheme'
+                ></v-checkbox>
+            </v-list-item-action>
+            <v-list-item-content>
+                <v-list-item-title>{{$t("Light theme")}}</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
         <!-- Primary color -->
         <v-list-item @click='colorPicker = true'>
             <v-list-item-avatar>

app/client/styles/bg-image.scss

@@ -0,0 +1,56 @@
+.theme--dark.v-tabs > .v-tabs-bar {
+    background-color: #00000000 !important;
+    backdrop-filter: blur(16px); 
+}
+.theme--dark.v-list  {
+    background-color: #00000000 !important;
+}
+.theme--light.v-list {
+    background-color: #ffffff00 !important;
+}
+.theme--dark.v-application {
+    background-color: #000000aa !important;
+}
+.theme--light.v-application {
+    background-color: #ffffff00 !important;
+}
+.v-list-item {
+    background-color: #00000000;
+}
+.v-list {
+    background-color: #000000aa !important;
+}
+.v-item-group {
+    background-color: #00000000 !important;
+    backdrop-filter: blur(16px);
+}
+.v-card {
+    background-color: #00000000 !important;
+    backdrop-filter: blur(16px);
+}
+.v-navigation-drawer {
+    background-color: #00000000 !important;
+}
+.theme--dark.v-navigation-drawer--is-mouseover {
+    background-color: #12121277 !important;
+    backdrop-filter: blur(16px);
+}
+.theme--light.v-navigation-drawer--is-mouseover {
+    background-color: #ffffff66 !important;
+    backdrop-filter: blur(16px);
+}
+.v-toolbar {
+    background-color: #00000000 !important;
+}
+.v-navigation-drawer--mini-variant {
+    background-color: #00000000 !important;
+}
+.v-footer {
+    background-color: #00000000 !important;
+}
+.theme--dark.v-select-list div {
+    background-color: #212121;
+}
+.theme--light.v-select-list div {
+    background-color: #ffffff;
+}

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "freezer",
   "private": true,
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "",
   "main": "background.js",
   "scripts": {
@@ -16,6 +16,7 @@
     "chalk": "^4.1.0",
     "cheerio": "^1.0.0-rc.5",
     "compare-versions": "^3.6.0",
+    "cors": "^2.8.5",
     "discord-rpc": "^3.1.4",
     "express": "^4.17.1",
     "lastfmapi": "^0.1.1",

app/src/server.js

@@ -1,4 +1,5 @@
 const express = require('express');
+const cors = require('cors');
 const path = require('path');
 const packageJson = require('../package.json');
 const fs = require('fs');
@@ -11,7 +12,6 @@ const {Track, Album, Artist, Playlist, DeezerProfile, SearchResults, DeezerLibra
 const {DownloadManager} = require('./downloads');
 const {Integrations} = require('./integrations');
 const {Importer} = require('./importer');
-const { url } = require('inspector');
 
 let settings;
 let deezer;
@@ -24,6 +24,7 @@ let sockets = [];
 const app = express();
 app.use(express.json({limit: '50mb'}));
 app.use(express.static(path.join(__dirname, '../client', 'dist')));
+app.use(cors({origin: 'http://localhost:8080'}));
 //Server
 const server = require('http').createServer(app);
 const io = require('socket.io').listen(server, {
@@ -632,6 +633,15 @@ app.get('/updates', async (req, res) => {
     }
 });
 
+//Background image
+app.get('/background', async (req, res) => {
+    //Missing
+    if (!settings.backgroundImage && !fs.existsSync(settings.backgroundImage)) {
+        return res.status(404).end();
+    }
+    res.sendFile(path.resolve(settings.backgroundImage));
+});
+
 //Redirect to index on unknown path
 app.all('*', (req, res) => {
     res.redirect('/');

app/src/settings.js

@@ -44,6 +44,10 @@ class Settings {
         this.contentLanguage = 'en';
         this.contentCountry = 'US';
         this.sidebarOpen = false;
+
+        //Has to be local path
+        this.backgroundImage = null;
+        this.lightTheme = false;
     }
 
     //Based on electorn app.getPath
@@ -121,7 +125,7 @@ class Settings {
             await fs.promises.mkdir(Settings.getDir(), {recursive: true});
         } catch (_) {}
 
-        await fs.promises.writeFile(Settings.getPath(), JSON.stringify(this), 'utf-8');
+        await fs.promises.writeFile(Settings.getPath(), JSON.stringify(this, null, 2), 'utf-8');
     }
 
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "freezer",
   "private": true,
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "Freezer PC",
   "scripts": {
     "pack": "electron-builder --dir",
@@ -47,7 +47,9 @@
     },
     "linux": {
       "target": [
-        "AppImage", "deb", "tar.gz"
+        "AppImage",
+        "deb",
+        "tar.gz"
       ],
       "category": "audio",
       "icon": "build/iconset",
@@ -62,7 +64,15 @@
       }
     },
     "deb": {
-      "depends": ["libssl-dev", "gconf2", "gconf-service", "libnotify4", "libappindicator1", "libxtst6", "libnss3"]
+      "depends": [
+        "libssl-dev",
+        "gconf2",
+        "gconf-service",
+        "libnotify4",
+        "libappindicator1",
+        "libxtst6",
+        "libnss3"
+      ]
     }
   }
 }