fix bug and refactory player component

src/App.vue

@@ -11,11 +11,14 @@
     </v-navigation-drawer><!-- app drawer -->
 
     <!-- app navbar -->
-    <app-navbar @toggleAppDrawer="toggleAppDrawer"/><!-- app navbar -->
+    <app-navbar
+      @toggleAppDrawer="toggleAppDrawer"
+    /><!-- app navbar -->
 
     <!-- main section -->
     <v-content>
-      <v-scroll-x-transition mode="out-in">
+
+      <v-scroll-x-transition mode="out-in"><!-- transitions -->
 
           <!-- router -->
           <router-view
@@ -40,7 +43,6 @@ import Player from './components/Player/index'
 export default {
   name: 'App',
   components: {
-    // appDrawer,
     appNavbar,
     AppDrawer,
     Player

src/components/Player/CoverImage.vue

@@ -0,0 +1,77 @@
+<template>
+  <v-col
+      :cols="layout?12:3"
+    >
+    <v-img
+      @click="$emit('toggleLayout')"
+      v-if="currentTrack"
+      class="my-1 pa-0 mx-auto cover-round"
+      :class="[paused ? '' : 'cover-rotation' , layout ? 'cover-disk' : '']"
+      :src="httpToHttps(currentTrack.al.picUrl)+'?param=400y400'"
+      :max-width="layout ? 400 : 94"
+      :max-height="layout ? 400 : 94"
+      contain
+    >
+    </v-img>
+    <v-img
+      @click="$emit('toggleLayout')"
+      v-else
+      class="my-1 pa-0 mx-auto"
+      src="../../assets/default_cover.png"
+      :max-width="layout ? 400 : 94"
+      :max-height="layout ? 400 : 94"
+      contain
+    >
+    </v-img>
+  </v-col>
+</template>
+
+<script>
+import { httpToHttps } from '../../utils/helper'
+export default {
+  props: {
+    currentTrack: {
+      type: Object
+    },
+    layout: {
+      type: Boolean
+    },
+    paused: {
+      type: Boolean
+    }
+  },
+  data () {
+    return {
+      httpToHttps
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cover-round{
+  /*  position: relative; */
+  border-radius: 50%;
+}
+.cover-disk::after{
+  content: '';
+    position: absolute;
+    border-radius: 50%;
+    top: -2%;
+    left: -2%;
+    width: 104%;
+    height: 104%;
+    border: 20px solid black;
+}
+.cover-rotation{
+  animation: rotation 15s infinite linear;
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/Player/index.vue

@@ -48,34 +48,14 @@
       </v-btn><!-- drawer down button -->
 
       <!-- cover image section -->
-      <v-col
-        :cols="layout?12:3"
+      <CoverImage
+        :currentTrack="getMusicDetailsList[currentTrack]"
+        :layout="layout"
         v-show="tab === 0"
-      >
-        <v-img
-          @click="toggleLayout"
-          v-if="getMusicDetailsList[currentTrack]"
-          class="my-1 pa-0 mx-auto cover-round"
-          :class="[paused ? '' : 'cover-rotation' , layout ? 'cover-disk' : '']"
-          :src="httpToHttps(this.getMusicDetailsList[this.currentTrack].al.picUrl)+'?param=400y400'"
-          :max-width="layout ? 400 : 94"
-          :max-height="layout ? 400 : 94"
-          contain
-        >
-        </v-img>
-        <v-img
-          @click="toggleLayout"
-          v-else
-          class="my-1 pa-0 mx-auto"
-          src="../../assets/default_cover.png"
-          :max-width="layout ? 400 : 94"
-          :max-height="layout ? 400 : 94"
-          contain
-        >
-        </v-img>
-      </v-col>
+        @toggleLayout="toggleLayout"
+        :paused="paused"
+      /><!-- cover image section -->
 
-      <!-- information and controllers section -->
       <v-col
         :align-self="layout?'end':'center'"
         class="pl-1 pl-sm-5 text-center"
@@ -83,55 +63,59 @@
         :class="layout ? 'mb-4' : ''"
         v-show="tab === 0"
       >
-        <MusicInfo
-          :track=getMusicDetailsList[currentTrack]
-        />
-        <v-row
-          no-gutters
-          align="center"
-          align-content="center"
-          justify="center"
-          class="mt-1 mt-sm-0 mb-0"
-        >
-          <v-slider
-            class="mt-1"
-            v-if="getMusicUrlsListById.length > 0"
-            dense
-            v-model="currentTimeComputed"
-            min="0"
-            :max="duration"
-            color="primary"
-            height="3"
-            background-color="secondary"
-            hide-details
-            @click="sliderClick()"
-          ></v-slider>
-          <v-slider
-            class="mt-1"
-            disabled
-            dense
-            v-else
-            v-model="currentTime"
-            min="0"
-            max="100"
-            color="primary"
-            height="3"
-            background-color="secondary"
-            hide-details
-          ></v-slider>
-          <div class="caption">
-            {{ currentTimeAndDurationLabel }}
-          </div>
-        </v-row>
+        <!-- information and controllers section -->
+        <v-col class="ma-0 pa-0">
+          <MusicInfo
+            :track=getMusicDetailsList[currentTrack]
+          />
+          <v-row
+            no-gutters
+            align="center"
+            align-content="center"
+            justify="center"
+            class="mt-1 mt-sm-0 mb-0"
+          >
+            <v-slider
+              class="mt-1"
+              v-if="getMusicUrlsListById.length > 0"
+              dense
+              v-model="currentTimeComputed"
+              min="0"
+              :max="duration"
+              color="primary"
+              height="3"
+              background-color="secondary"
+              hide-details
+              @click="sliderClick()"
+            ></v-slider>
+            <v-slider
+              class="mt-1"
+              disabled
+              dense
+              v-else
+              v-model="currentTime"
+              min="0"
+              max="100"
+              color="primary"
+              height="3"
+              background-color="secondary"
+              hide-details
+            ></v-slider>
+            <div class="caption">
+              {{ currentTimeAndDurationLabel }}
+            </div>
+          </v-row>
+        </v-col><!-- information and controllers section -->
 
         <!-- buttons section -->
         <ControlButtons
           :layout=layout
           :music=getMusicUrlsListById
           @togglePlaying=togglePlaying
-        />
+        /><!-- buttons section -->
+
       </v-col>
-      <!-- Play List Tab -->
+      <!-- page tabs -->
       <v-col v-if="tab === 1" class="scrollY" cols="12">
         <TabPlaylist/>
       </v-col>
@@ -144,7 +128,7 @@
       <v-col v-if="tab === 4" class="scrollY" cols="12">
         <TabDownload/>
       </v-col>
-    </v-row>
+    </v-row><!-- player -->
 
     <!-- bottom navigation -->
     <PlayerBottomNav
@@ -152,7 +136,7 @@
       @switchTab = "switchTab"
       @toggleLayout = "toggleLayout"
       @toggleVolumeMute=toggleVolumeMute
-    />
+    /><!-- bottom navigation -->
 
   </v-footer>
 </template>
@@ -165,18 +149,16 @@ import { mdiEjectOutline, mdiChevronDown } from '@mdi/js'
 
 import ControlButtons from './ControlButtons'
 import MusicInfo from './MusicInfo'
+import CoverImage from './CoverImage'
 
 import PlayerBottomNav from './BottomNav'
-// import TabPlaylist from './TabPlaylist'
-// import TabDownload from './TabDownload'
-// import TabMessage from './TabMessage'
-// import TabLyric from './TabLyric'
 
 export default {
   components: {
     ControlButtons,
     MusicInfo,
     PlayerBottomNav,
+    CoverImage,
     TabPlaylist: () => import(/* webpackPrefetch: true */ './TabPlaylist'),
     TabDownload: () => import(/* webpackPrefetch: true */ './TabDownload'),
     TabMessage: () => import(/* webpackPrefetch: true */ './TabMessage'),
@@ -326,23 +308,6 @@ export default {
 .full-height-player{
   height:calc(100vh - 112px);
 }
-.cover-round{
-  // position: relative;
-  border-radius: 50%;
-}
-.cover-disk::after{
-  content: '';
-    position: absolute;
-    border-radius: 50%;
-    top: -2%;
-    left: -2%;
-    width: 104%;
-    height: 104%;
-    border: 20px solid black;
-}
-.cover-rotation{
-  animation: rotation 15s infinite linear;
-}
 .eject-button{
   position: absolute;
   top: -17px;
@@ -351,14 +316,5 @@ export default {
 .scrollY{
   overflow:auto;
     height:calc(100vh - 160px);
-
-}
-@keyframes rotation {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
 </style>

src/store/index.js

@@ -47,7 +47,7 @@ export default new Vuex.Store({
     setPlayListByTagName (state, tagName) {
       state.playLists = []
       getPlayListByTagName(tagName).then(res => {
-        console.log(res)
+        // console.log(res)
         state.playLists = res
       })
     },

src/views/TopPlayLists.vue

@@ -10,7 +10,9 @@
 
       <!-- Loading progress bar -->
       <loading :loading='getPlayLists.length === 0'/>
-       <v-expansion-panels v-show="getPlayLists.length">
+
+      <!-- music types tag expension panel -->
+      <v-expansion-panels v-show="getPlayLists.length" focusable>
         <v-expansion-panel
         >
           <v-expansion-panel-header>
@@ -18,7 +20,7 @@
           </v-expansion-panel-header>
           <v-expansion-panel-content>
             <v-chip
-            v-ripple
+              v-ripple
               color="primary"
               class="mx-1 my-2 cursor-pointer"
               v-for="(tag, i) in getAllPlayListTags"
@@ -29,7 +31,8 @@
             </v-chip>
           </v-expansion-panel-content>
         </v-expansion-panel>
-      </v-expansion-panels>
+      </v-expansion-panels><!-- music types tag expension panel -->
+
       <!-- main container -->
       <v-container fluid class="py-0 px-1 pa-sm-2 pt-sm-0">
         <v-row dense>
@@ -50,7 +53,7 @@
           </v-col><!-- the list -->
 
         </v-row>
-      </v-container>
+      </v-container><!-- main container -->
 
     </v-col>
   </v-container>
@@ -73,11 +76,8 @@ export default {
     })
   },
   mounted () {
-    console.log(this.$route)
-
     const query = this.$route.query.tag
     if (query) {
-      console.log('tag search', query)
       this.$store.commit('setPlayListByTagName', query)
     } else {
       this.$store.commit('setPlayLists')