add queue to fs

src/renderer/index.js

@@ -591,7 +591,7 @@ const app = new Vue({
                 app.getCurrentArtURL();
                 app.getNowPlayingArtwork(42);
                 app.getNowPlayingArtworkBG(32);
-                app.loadLyrics()
+                app.loadLyrics();
 
                 // Playback Notifications
                 if ((app.platform === "darwin" || app.platform === "linux") && !document.hasFocus() && a.artistName && a.artwork && a.name) {

src/renderer/style.less

@@ -3567,21 +3567,72 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     flex-grow: 1;
   }
 
+  .playback-button--small.active {
+    background-color: rgba(200, 200, 200, 0.1);
+  }
+
   .right-col{
     height: 50vh;
   }
 
   .lyrics-col{
-    margin-top: 25vh;
+
     width: 60vh;
     height: 50vh;
 
-    ::-webkit-scrollbar {
-      display: none;
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
     }
 
-    &:hover ::-webkit-scrollbar {
-      display: unset;
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+  } 
+
+  .queue-col{
+
+    width: 60vh;
+    height: 50vh;
+
+    ::-webkit-scrollbar-thumb {
+      box-shadow: unset;
+    }
+
+    &:hover ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
+    }
+  } 
+  
+  .tab-toggles{
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 15vh;
+    height: 5vh;
+    justify-content: space-evenly;
+    
+    .queue {
+      background-image: url("./assets/list.svg") ;
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+    
+    .lyrics {
+      background-image: url("./assets/quote-right.svg") ;
+      padding: 0.5vh;
+      width: 2.5vh;
+      height: 2.5vh;
+      background-origin: content-box;
+      background-repeat: no-repeat;
+    }
+
+    .active {
+      background-color: rgba(200, 200, 200, 0.7);
+      border-radius: 3px;
     }
   }
 

src/renderer/views/components/fullscreen.ejs

@@ -79,15 +79,23 @@
                     <div>Name</div>
                     <div>Name</div>
                 </div> -->
-                <div class="lyrics-col">
-                    <lyrics-view :yoffset="10" :time="time" :lyrics="lyrics"
+                <div class="lyrics-col" v-if="tabMode == 'lyrics'">
+                    <lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
                     :richlyrics="richlyrics"></lyrics-view>
-                <div>
+                </div>
+                <div class="queue-col" v-if="tabMode == 'queue'">    
+                    <cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>    
+                </div>
             </div>
         </div>
-
-
+        <div class="tab-toggles">
+            <div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = 'lyrics'"></div>
+            <div class="queue"  :class="{active: tabMode == 'queue'}" @click="tabMode = 'queue'"></div>
+        </div> 
     </div>
+ 
+
+
 </script>
 
 <script>
@@ -99,21 +107,22 @@
                 required: false
             },
             lyrics: {
-                type:  Array,
+                type: Array,
                 required: false
             },
             richlyrics: {
-                type:  Array,
+                type: Array,
                 required: false
             },
             image: {
                 type: String,
                 required: false
-            }
+            },
         },
-        data: function(){
+        data: function () {
             return {
-                app : this.$root,
+                app: this.$root,
+                tabMode: "lyrics",
             }
         },
         methods: {

src/renderer/views/svg/list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg>

src/renderer/views/svg/quote-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path fill="white" d="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z"/></svg>