Merge branch 'upcoming' of https://github.com/ciderapp/Cider into upcoming

src/renderer/style.less

@@ -2139,7 +2139,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .md-btn {
-  background: rgba(100, 100, 100, 0.5);
+  background: rgb(100 100 100 / 25%);
   padding: 8px 14px;
   border-radius: 6px;
   font-size: 14px;
@@ -2161,8 +2161,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   &.md-btn-primary {
-    background: var(--keyColor);
+    background: rgb(255 43 82 / 50%);
     color: white;
+    border: 1px solid rgb(220 53 69 / 25%);
+    border-top: 1px solid rgb(220 53 69 / 50%);
   }
 
   &:hover {
@@ -2230,11 +2232,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   padding: 6px;
   border-radius: 6px;
   border: 1px solid rgba(200, 200, 200, 0.1);
+  border-top: 1px solid rgba(100, 100, 100, 0.5);
   font-family: inherit;
   font-size: 14px;
   background: rgba(100, 100, 100, 0.25);
-  color: #c8c8c8;
+  color: #eee;
-  font-weight: 500;
 
   option {
     font-size: 1em;

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

@@ -1,18 +1,15 @@
 <script type="text/x-template" id="add-to-playlist">
     <template>
-        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.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">{{app.getLz('action.addToLibrary')}}</div>
+                    <div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
                     <button class="close-btn" @click="app.resetState()"></button>
                 </div>
                 <div class="modal-content">
-                    <button class="playlist-item" 
+                    <sidebar-playlist :playlist-select="playlistSelect" v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
-                    :class="{ focused: playlist.id == focused }"
+                    </sidebar-playlist>
-                    @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 0;">
@@ -61,6 +58,11 @@
             })
         },
         methods: {
+            playlistSelect(playlist) {
+                if(playlist.type != "library-playlist-folders") {
+                    this.addToPlaylist(playlist.id)
+                }
+            },
             addToPlaylist(id) {
                 app.addSelectedToPlaylist(id)
             },

src/renderer/views/components/mediaitem-artwork.ejs

@@ -1,11 +1,10 @@
 <script type="text/x-template" id="mediaitem-artwork">
-    <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"
+    <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url">
-         v-observe-visibility="{callback: visibilityChanged}">
         <img :src="app.getMediaItemArtwork(url, size, width)"
-             decoding="async" loading="lazy"
+             decoding="async"
              :style="{background: bgcolor}"
              class="mediaitem-artwork--img">
-        <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
+        <div v-if="video && getVideoPriority()" class="animatedartwork-view-box">
             <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
         </div>
     </div>
@@ -93,9 +92,6 @@
                     width: this.size + 'px',
                     height: this.size + 'px'
                 };
-            },
-            visibilityChanged: function (isVisible, entry) {
-                this.isVisible = isVisible
             }
         }
     });

src/renderer/views/components/sidebar-playlist.ejs

@@ -7,7 +7,7 @@
                 @dragover="dragOver"
                 @drop="onDrop"
                 :href="item.href"
-                @click='item.type != "library-playlist-folders" ? openPlaylist(item) : getPlaylistChildren(item)'>
+                @click='clickEvent()'>
             <template v-if="!renaming">
                 <div class="sidebar-icon" v-html="icon"></div> {{ item.attributes.name }}
             </template>
@@ -15,7 +15,7 @@
         </button>
         <div class="folder-body" v-if="item.type === 'library-playlist-folders' && folderOpened">
             <template v-if="children.length != 0">
-                <sidebar-playlist v-for="item in children" :item="item" :key="item.id"></sidebar-playlist>
+                <sidebar-playlist v-for="item in children" :playlist-select="playlistSelect" :item="item" :key="item.id"></sidebar-playlist>
             </template>
             <template v-else>
                 <div class="spinner"></div>
@@ -31,6 +31,10 @@
             item: {
                 type: Object,
                 required: true
+            },
+            playlistSelect: {
+                type: Function,
+                required: false
             }
         },
         data: function () {
@@ -50,6 +54,17 @@
             }
         },
         methods: {
+            clickEvent() {
+                if(this.item.type != "library-playlist-folders") {
+                    if(this.playlistSelect) {
+                        this.playlistSelect(this.item)
+                    }else{
+                        this.openPlaylist(this.item)
+                    }
+                }else{
+                    this.getPlaylistChildren(this.item)
+                }
+            },
             rename() {
                 this.renaming = false
 

src/renderer/views/pages/cider-playlist.ejs

@@ -62,11 +62,11 @@
                                 </div>
                             </template>
                             <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
-                                <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
                                         @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                         {{app.getLz('term.play')}}
                                 </button>
-                                <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                                <button class="md-btn md-btn-primary md-btn-icon" style="min-width: 100px;"
                                         @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                         {{app.getLz('term.shuffle')}}
                                 </button>
@@ -98,11 +98,11 @@
                     </div>
                     <div class="col-auto flex-center">
                         <div>
-                            <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                            <button class="md-btn md-btn-primary  md-btn-icon" style="min-width: 100px;"
                                     @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
                                     {{app.getLz('term.play')}}
                             </button>
-                            <button class="md-btn md-btn-icon" style="min-width: 100px;"
+                            <button class="md-btn md-btn-primary  md-btn-icon" style="min-width: 100px;"
                                     @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
                                     {{app.getLz('term.shuffle')}}
                             </button>

src/renderer/views/pages/settings.ejs

@@ -40,9 +40,10 @@
                     <div class="md-option-segment">
                         {{$root.getLz('term.equalizer')}}
                     </div>
-                    <div class="md-option-segment md-btn md-option-segment_auto">
+                    <div class="md-option-segment md-option-segment_auto">
-                        <label class="list-button list-element"
+                        <button class="md-btn" onclick="app.modals.equalizer = true">
-                        onclick="app.modals.equalizer = true">{{$root.getLz('term.equalizer')}}</label>
+                            {{$root.getLz('term.equalizer')}}
+                        </button>
                     </div>
                 </div>
                 <div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
@@ -475,9 +476,11 @@
                 <div class="md-option-segment">
                     {{$root.getLz('settings.option.connectivity.lastfmScrobble')}}
                 </div>
-                <div class="md-option-segment md-btn md-option-segment_auto">
+                <div class="md-option-segment md-option-segment_auto">
-                    <label class="list-button list-element" id="lfmConnect" ref="lfmConnect"
+                    <button class="md-btn" id="lfmConnect" ref="lfmConnect"
-                    onclick="app.LastFMAuthenticate()">{{$root.getLz('term.connect')}}</label>
+                            onclick="app.LastFMAuthenticate()">
+                        {{$root.getLz('term.connect')}}
+                    </button>
                 </div>
             </div>
             <div class="md-option-line" v-show ="app.cfg.lastfm.enabled">