feat: click blank space in player jump to the lyrics page #158

src/components/Player.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class="player">
+  <div class="player" @click="toggleLyrics">
-    <div class="progress-bar" :class="{ nyancat: settings.nyancatStyle }">
+    <div
+      class="progress-bar"
+      :class="{ nyancat: settings.nyancatStyle }"
+      @click.stop
+    >
       <vue-slider
         v-model="progress"
         :min="0"
@@ -17,6 +21,7 @@
     </div>
     <div class="controls">
       <div class="playing">
+        <div class="container" @click.stop>
           <img
             :src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
             @click="goToAlbum"
@@ -52,7 +57,11 @@
             </button-icon>
           </div>
         </div>
+        <div class="blank"></div>
+      </div>
       <div class="middle-control-buttons">
+        <div class="blank"></div>
+        <div class="container" @click.stop>
           <button-icon @click.native="previous" :title="$t('player.previous')"
             ><svg-icon icon-class="previous"
           /></button-icon>
@@ -67,7 +76,11 @@
             ><svg-icon icon-class="next"
           /></button-icon>
         </div>
+        <div class="blank"></div>
+      </div>
       <div class="right-control-buttons">
+        <div class="blank"></div>
+        <div class="container" @click.stop>
           <button-icon
             @click.native="goToNextTracksPage"
             :title="$t('player.nextUp')"
@@ -83,7 +96,10 @@
             @click.native="repeat"
             :class="{ active: player.repeatMode !== 'off' }"
           >
-          <svg-icon icon-class="repeat" v-show="player.repeatMode !== 'one'" />
+            <svg-icon
+              icon-class="repeat"
+              v-show="player.repeatMode !== 'one'"
+            />
             <svg-icon
               icon-class="repeat-1"
               v-show="player.repeatMode === 'one'"
@@ -119,12 +135,13 @@
           </div>
         </div>
       </div>
+    </div>
 
     <button-icon
       class="lyrics-button"
       title="Lyrics"
       style="margin-left: 12px"
-      @click.native="toggleLyrics"
+      @click.native.stop="toggleLyrics"
       ><svg-icon icon-class="arrow-up"
     /></button-icon>
   </div>
@@ -205,10 +222,8 @@ export default {
     },
     shuffle() {
       this.player.shuffle = !this.player.shuffle;
-      console.log(this.player);
     },
     repeat() {
-      console.log(this.player.repeatMode);
       if (this.player.repeatMode === "on") {
         this.player.repeatMode = "one";
       } else if (this.player.repeatMode === "one") {
@@ -305,10 +320,9 @@ export default {
 }
 
 .controls {
-  flex: 1;
+  display: grid;
-  display: flex;
+  grid-template-columns: repeat(3, 1fr);
-  justify-content: flex;
+  height: 100%;
-  align-items: center;
   padding: {
     right: 10vw;
     left: 10vw;
@@ -321,8 +335,15 @@ export default {
   }
 }
 
+.blank {
+  flex-grow: 1;
+}
+
 .playing {
-  flex: 1;
+  display: flex;
+}
+
+.playing .container {
   display: flex;
   align-items: center;
   img {
@@ -373,6 +394,10 @@ export default {
 }
 
 .middle-control-buttons {
+  display: flex;
+}
+
+.middle-control-buttons .container {
   flex: 1;
   display: flex;
   justify-content: center;
@@ -389,8 +414,12 @@ export default {
     }
   }
 }
+
 .right-control-buttons {
-  flex: 1;
+  display: flex;
+}
+
+.right-control-buttons .container {
   display: flex;
   justify-content: flex-end;
   align-items: center;