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="progress-bar" :class="{ nyancat: settings.nyancatStyle }">
+  <div class="player" @click="toggleLyrics">
+    <div
+      class="progress-bar"
+      :class="{ nyancat: settings.nyancatStyle }"
+      @click.stop
+    >
       <vue-slider
         v-model="progress"
         :min="0"
@@ -17,104 +21,117 @@
     </div>
     <div class="controls">
       <div class="playing">
-        <img
-          :src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
-          @click="goToAlbum"
-        />
-        <div class="track-info" :title="audioSource">
-          <div class="name" @click="goToList">
-            {{ currentTrack.name }}
+        <div class="container" @click.stop>
+          <img
+            :src="currentTrack.al && currentTrack.al.picUrl | resizeImage(224)"
+            @click="goToAlbum"
+          />
+          <div class="track-info" :title="audioSource">
+            <div class="name" @click="goToList">
+              {{ currentTrack.name }}
+            </div>
+            <div class="artist">
+              <span
+                v-for="(ar, index) in currentTrack.ar"
+                :key="ar.id"
+                @click="goToArtist(ar.id)"
+              >
+                <span class="ar">{{ ar.name }}</span
+                ><span v-if="index !== currentTrack.ar.length - 1">, </span>
+              </span>
+            </div>
           </div>
-          <div class="artist">
-            <span
-              v-for="(ar, index) in currentTrack.ar"
-              :key="ar.id"
-              @click="goToArtist(ar.id)"
+          <div class="like-button">
+            <button-icon
+              @click.native="likeCurrentSong"
+              :title="$t('player.like')"
             >
-              <span class="ar">{{ ar.name }}</span
-              ><span v-if="index !== currentTrack.ar.length - 1">, </span>
-            </span>
+              <svg-icon
+                icon-class="heart"
+                v-show="!liked.songs.includes(currentTrack.id)"
+              ></svg-icon>
+              <svg-icon
+                icon-class="heart-solid"
+                v-show="liked.songs.includes(currentTrack.id)"
+              ></svg-icon>
+            </button-icon>
           </div>
         </div>
-        <div class="like-button">
+        <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>
           <button-icon
-            @click.native="likeCurrentSong"
-            :title="$t('player.like')"
+            class="play"
+            @click.native="play"
+            :title="$t(player.playing ? 'player.pause' : 'player.play')"
           >
-            <svg-icon
-              icon-class="heart"
-              v-show="!liked.songs.includes(currentTrack.id)"
-            ></svg-icon>
-            <svg-icon
-              icon-class="heart-solid"
-              v-show="liked.songs.includes(currentTrack.id)"
-            ></svg-icon>
-          </button-icon>
+            <svg-icon :iconClass="player.playing ? 'pause' : 'play'"
+          /></button-icon>
+          <button-icon @click.native="next" :title="$t('player.next')"
+            ><svg-icon icon-class="next"
+          /></button-icon>
         </div>
-      </div>
-      <div class="middle-control-buttons">
-        <button-icon @click.native="previous" :title="$t('player.previous')"
-          ><svg-icon icon-class="previous"
-        /></button-icon>
-        <button-icon
-          class="play"
-          @click.native="play"
-          :title="$t(player.playing ? 'player.pause' : 'player.play')"
-        >
-          <svg-icon :iconClass="player.playing ? 'pause' : 'play'"
-        /></button-icon>
-        <button-icon @click.native="next" :title="$t('player.next')"
-          ><svg-icon icon-class="next"
-        /></button-icon>
+        <div class="blank"></div>
       </div>
       <div class="right-control-buttons">
-        <button-icon
-          @click.native="goToNextTracksPage"
-          :title="$t('player.nextUp')"
-          :class="{ active: this.$route.name === 'next' }"
-          ><svg-icon icon-class="list"
-        /></button-icon>
-        <button-icon
-          :title="
-            player.repeatMode === 'one'
-              ? $t('player.repeatTrack')
-              : $t('player.repeat')
-          "
-          @click.native="repeat"
-          :class="{ active: player.repeatMode !== 'off' }"
-        >
-          <svg-icon icon-class="repeat" v-show="player.repeatMode !== 'one'" />
-          <svg-icon
-            icon-class="repeat-1"
-            v-show="player.repeatMode === 'one'"
-          />
-        </button-icon>
-        <button-icon
-          @click.native="shuffle"
-          :class="{ active: player.shuffle }"
-          :title="$t('player.shuffle')"
-          ><svg-icon icon-class="shuffle"
-        /></button-icon>
-        <div class="volume-control">
-          <button-icon :title="$t('player.mute')" @click.native="player.mute">
-            <svg-icon icon-class="volume" v-show="volume > 0.5" />
-            <svg-icon icon-class="volume-mute" v-show="volume === 0" />
+        <div class="blank"></div>
+        <div class="container" @click.stop>
+          <button-icon
+            @click.native="goToNextTracksPage"
+            :title="$t('player.nextUp')"
+            :class="{ active: this.$route.name === 'next' }"
+            ><svg-icon icon-class="list"
+          /></button-icon>
+          <button-icon
+            :title="
+              player.repeatMode === 'one'
+                ? $t('player.repeatTrack')
+                : $t('player.repeat')
+            "
+            @click.native="repeat"
+            :class="{ active: player.repeatMode !== 'off' }"
+          >
             <svg-icon
-              icon-class="volume-half"
-              v-show="volume <= 0.5 && volume !== 0"
+              icon-class="repeat"
+              v-show="player.repeatMode !== 'one'"
+            />
+            <svg-icon
+              icon-class="repeat-1"
+              v-show="player.repeatMode === 'one'"
             />
           </button-icon>
-          <div class="volume-bar">
-            <vue-slider
-              v-model="volume"
-              :min="0"
-              :max="1"
-              :interval="0.01"
-              :drag-on-click="true"
-              :duration="0"
-              :tooltip="`none`"
-              :dotSize="12"
-            ></vue-slider>
+          <button-icon
+            @click.native="shuffle"
+            :class="{ active: player.shuffle }"
+            :title="$t('player.shuffle')"
+            ><svg-icon icon-class="shuffle"
+          /></button-icon>
+          <div class="volume-control">
+            <button-icon :title="$t('player.mute')" @click.native="player.mute">
+              <svg-icon icon-class="volume" v-show="volume > 0.5" />
+              <svg-icon icon-class="volume-mute" v-show="volume === 0" />
+              <svg-icon
+                icon-class="volume-half"
+                v-show="volume <= 0.5 && volume !== 0"
+              />
+            </button-icon>
+            <div class="volume-bar">
+              <vue-slider
+                v-model="volume"
+                :min="0"
+                :max="1"
+                :interval="0.01"
+                :drag-on-click="true"
+                :duration="0"
+                :tooltip="`none`"
+                :dotSize="12"
+              ></vue-slider>
+            </div>
           </div>
         </div>
       </div>
@@ -124,7 +141,7 @@
       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: flex;
-  justify-content: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  height: 100%;
   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;