add button to change lyrics layout

src/renderer/index.js

@@ -132,6 +132,7 @@ const app = new Vue({
             resultsSocial: {},
             limit: 10
         },
+        fullscreenLyrics: false,
         playerLCD: {
             playbackDuration: 0,
             desiredDuration: 0,
@@ -321,6 +322,7 @@ const app = new Vue({
             });
         },
         modularUITest(val = false) {
+            this.fullscreenLyrics = val;
             if (val) {
                 document.querySelector("#app-main").classList.add("modular-fs")
             } else {

src/renderer/style.less

@@ -1557,6 +1557,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-size: 26px;
 }
 
+.lyric-footer {
+  bottom: 0;
+  height: 50px;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
+  opacity: 1;
+  background: rgba(30, 30, 30, 0.8);
+  justify-content: center;
+  align-items: center;
+  display: none;
+  transition: opacity 0.1s var(--appleEase);
+}
+
+.lyric-body:hover + .lyric-footer, .lyric-footer:hover {
+  display: flex; 
+}
+
+.modular-fs .app-drawer .lyric-footer {
+  background: rgba(30, 30, 30, 0.3);
+  display: flex;
+  opacity: 0.3;
+}
+
+.modular-fs .app-drawer .lyric-footer:hover {
+  opacity: 1;
+}
+ 
 .lyric-line {
   --bgSpeed: 1s;
   appearance: none;
@@ -1645,6 +1673,34 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   filter: contrast(0.5);
 }
 
+.lyric-footer {
+  bottom: 0;
+  height: 50px;
+  width: 100%;
+  position: absolute;
+  z-index: 1000;
+  opacity: 1;
+  background: rgba(30, 30, 30, 0.8);
+  justify-content: center;
+  align-items: center;
+  display: none;
+  transition: opacity 0.1s var(--appleEase);
+}
+
+.lyric-body:hover + .lyric-footer, .lyric-footer:hover {
+  display: flex; 
+}
+
+.modular-fs .app-drawer .lyric-footer {
+  background: rgba(30, 30, 30, 0.3);
+  display: flex;
+  opacity: 0.3;
+}
+
+.modular-fs .app-drawer .lyric-footer:hover {
+  opacity: 1;
+}
+
 @keyframes lyricWaitingLine {
   0% {
     opacity: 0.25;

src/renderer/views/main.ejs

@@ -447,9 +447,12 @@
                 </div>
                 <transition name="drawertransition">
                     <div class="app-drawer" v-if="drawer.open">
-                        <div class="bgArtworkMaterial"></div>
+                            <div class="bgArtworkMaterial"></div>
-                        <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
+                            <lyrics-view v-if="drawer.panel == 'lyrics'" :time="lyriccurrenttime" :lyrics="lyrics"
-                                     :richlyrics="richlyrics"></lyrics-view>
+                                        :richlyrics="richlyrics"></lyrics-view>
+                            <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
+                                <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ? "Default View":'Fullscreen View'}}</button> 
+                            </div>     
                         <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
                     </div>
                 </transition>