starting electron store, improvements to add to playlist

src/main/cider-base.js

@@ -5,6 +5,83 @@ const express = require("express");
 const path = require("path");
 const windowStateKeeper = require("electron-window-state");
 const os = require('os');
+const Store = require("electron-store");
+const store = new Store();
+
+const schema = {
+    "general": {
+        "close_behavior": {
+            type: "number",
+            default: 0
+        },
+        "startup_behavior": {
+            type: "number",
+            default: 0
+        },
+        "discord_rpc": {
+            type: "number",
+            default: 1
+        },
+    },
+    "behavior": {
+        "hw_acceleration": {
+            type: "number",
+            default: 0 // 0 = default, 1 = webgpu, 2 = gpu disabled
+        }
+    },
+    "audio": {
+        "quality": {
+            type: "string",
+            default: "extreme",
+        },
+        "seamless_audio": {
+            type: "boolean",
+            default: true,
+        }
+    },
+    "visual": {
+        "theme": {
+            type: "string",
+            default: ""
+        },
+        "scrollbars": {
+            type: "number",
+            default: 0
+        },
+        "refresh_rate": {
+            type: "number",
+            default: 0
+        },
+        "animated_artwork": {
+            type: "number",
+            default: 0 // 0 = always, 1 = limited, 2 = never
+        }
+    },
+    "lyrics": {
+        "enable_mxm": {
+            type: "boolean",
+            default: false
+        },
+        "mxm_language": {
+            type: "string",
+            default: "en"
+        }
+    },
+    "lastfm": {
+        "enabled": {
+            type: "boolean",
+            default: false
+        },
+        "scrobble_after": {
+            type: "number",
+            default: 30
+        },
+        "auth_token": {
+            type: "string",
+            default: ""
+        }
+    }
+}
 
 // Analytics for debugging.
 const ElectronSentry = require("@sentry/electron");

src/renderer/style.less

@@ -1528,7 +1528,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.3);
   z-index: 9999;
   .modal-window {
     background: #333;
@@ -1536,11 +1536,24 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     box-shadow: var(--mediaItemShadow-Shadow);
     display:flex;
     flex-flow: column;
-
     max-height: 500px;
     max-width: 360px;
     background: #121212;
     width: 100%;
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      pointer-events: none;
+      box-shadow: var(--mediaItemShadow);
+      z-index: 1;
+      border-radius: inherit;
+    }
 
     .modal-header {
       width:100%;
@@ -1562,9 +1575,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .modal-window {
     max-height: 600px;
     max-width: 400px;
-    background: #121212;
+    background: rgb(18 18 18 / 90%);
     overflow: hidden;
-
+    backdrop-filter: blur(16px) saturate(180%);
+    
     .modal-header {
       padding: 16px;
       position:relative;
@@ -1601,19 +1615,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     .playlist-item {
       appearance: none;
       border: 0px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
       text-align: left;
       width: 100%;
       margin: 0;
-      display: block;
+      display: flex;
-      background: rgba(200, 200, 200, 0.02);
+      background: rgba(32, 32, 32, 0.46);
       color: #eee;
       font-family: inherit;
       font-size: 0.98em;
-      padding: 12px 12px;
+      padding: 6px 12px;
+      align-items: center;
+      flex-flow: row;
+
+      .icon {
+        pointer-events: none;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 6px;
+      }
+
+      .name {
+
+      }
 
       &:hover {
-        background: rgb(200 200 200 / 4%);
+        background: var(--selected);
       }
 
       &:active {
@@ -2759,6 +2788,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 /* Cider */
 
 /* Transitions */
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
+}
+
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+  transform: scale(1.10);
+}
+
 .wpfade-enter-active,
 .wpfade-leave-active {
   transition: opacity .1s var(--appleEase);

src/renderer/views/components/add-to-playlist.ejs

@@ -1,11 +1,19 @@
 <script type="text/x-template" id="add-to-playlist">
     <template>
-        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()">
+        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
             <div class="modal-window">
                 <div class="modal-header">
                     <div class="modal-title">Add to Playlist</div>
                     <button class="close-btn" @click="app.resetState()"></button>
                 </div>
+                <div class="modal-content">
+                    <button class="playlist-item" 
+                    :class="{ focused: playlist.id == focused }"
+                    @click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
+                    <div class="icon"><%- include("../svg/playlist.svg") %></div>
+                    <div class="name">{{ playlist.attributes.name }}</div>
+                </button>
+                </div>
                 <div class="modal-search">
                     <div class="search-input-container" style="width:100%;margin: 16px 0px;">
                         <div class="search-input--icon"></div>
@@ -17,11 +25,7 @@
                                v-model="searchQuery"
                                @input="search()"
                                class="search-input">
-                    </div>                </div>
+                    </div>                
-                <div class="modal-content">
-                    <button class="playlist-item" 
-                    :class="{ focused: playlist.id == focused }"
-                    @click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">{{ playlist.attributes.name }}</button>
                 </div>
             </div>
         </div>
@@ -47,9 +51,9 @@
         mounted() {
             this.search()
             this.$refs.searchInput.focus()
-            this.$refs.searchInput.addEventListener('keydown', (e)=>{
+            this.$refs.searchInput.addEventListener('keydown', (e) => {
-                if(e.keyCode == 13){
+                if (e.keyCode == 13) {
-                    if(this.focused != "") {
+                    if (this.focused != "") {
                         this.addToPlaylist(this.focused)
                     }
                 }
@@ -67,7 +71,7 @@
                     this.playlistSorted = this.playlists.filter(playlist => {
                         return playlist.attributes.name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1
                     })
-                    if(this.playlistSorted.length == 1) {
+                    if (this.playlistSorted.length == 1) {
                         this.focused = this.playlistSorted[0].id
                     }
                 }

src/renderer/views/main.ejs

@@ -428,7 +428,7 @@
     <transition name="wpfade">
         <div class="bg-artwork--placeholder" v-else></div>
     </transition>
-    <transition name="wpfade">
+    <transition name="modal">
         <add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
     </transition>
     <div id="apple-music-video-container">
@@ -458,17 +458,9 @@
     </div>
 </div>
 
+
+<!-- Media Item Artwork-->
 <%- include("components/mediaitem-artwork"); %>
-
-<!-- Generic Collection of MediaItems -->
-<script type="text/x-template" id="collection-view-generic">
-    <template>
-        <div class="content-inner">
-
-        </div>
-    </template>
-</script>
-
 <!-- Browse -->
 <%- include('pages/browse') %>
 

src/renderer/views/svg/playlist.svg

@@ -0,0 +1 @@
+<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M682.666667 222.72V725.333333c0 2.56-0.213333 4.992-0.64 7.424A149.333333 149.333333 0 1 1 597.333333 611.712V170.666667a42.666667 42.666667 0 0 1 51.029334-41.813334l213.333333 42.666667A42.666667 42.666667 0 0 1 896 213.333333v170.666667a42.666667 42.666667 0 0 1-51.029333 41.813333l-74.368-14.848a42.666667 42.666667 0 1 1 16.725333-83.669333l23.338667 4.693333V248.32l-128-25.6zM533.333333 810.666667a64 64 0 1 0 0-128 64 64 0 0 0 0 128zM170.666667 341.333333a42.666667 42.666667 0 1 1 0-85.333333h298.666666a42.666667 42.666667 0 0 1 0 85.333333H170.666667z m0 170.666667a42.666667 42.666667 0 0 1 0-85.333333h298.666666a42.666667 42.666667 0 0 1 0 85.333333H170.666667z m0 170.666667a42.666667 42.666667 0 0 1 0-85.333334h128a42.666667 42.666667 0 0 1 0 85.333334H170.666667z"  /></svg>