pregress handling for artists

src/components/Player.vue

@@ -145,9 +145,9 @@ export default {
 
       this.pushHistoryItem();
 
-      if (this.selectedTrack.parent.progress) {
+      if (this.currentTrackParent.progress) {
-        this.skipToSecond(this.selectedTrack.parent.progress.progress);
+        this.skipToSecond(this.currentTrackParent.progress.progress);
-        this.selectedTrack.parent.progress = undefined;
+        this.currentTrackParent.progress = undefined;
       } else {
         // Try to fix SAFARI
         this.audio.play();
@@ -275,7 +275,7 @@ export default {
       this.progress = this.audio.currentTime;
       let item = {
         id: this.selectedTrack._id,
-        parentId: this.selectedTrack.parent._id,
+        parentId: this.currentTrackParent._id,
         type: "track",
         progress: Math.round(this.progress)
       }

src/components/dialogs/ArtistViewer.vue

@@ -1,24 +1,10 @@
 <template>
-  <DialogBase
+  <DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
-    ref="dialogWindow"
-    id="dialogWindow"
-    :title="selectedArtist.name"
-    @canceled="closed"
-    :showFooter="false"
-    :showFullscreenButton="true"
-    :disableXscroll="true"
-    :disableYscroll="true"
-  >
     <div id="artistViewer">
       <div id="header" class="flex-column">
         <div id="background" :style="coverBackground" />
-        <awesome-icon
+        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
-          icon="star"
+        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
-          size="2x"
-          class="favourite ma4"
-          :class="{ active: isFavourite }"
-          @click="toggleFavourite"
-        />
         <h1 @dblclick="dblclick">
           {{ selectedArtist.name }}
         </h1>
@@ -28,41 +14,20 @@
           <b>{{ artist_duration }}</b>
         </span>
         <div id="albumList" class="flex-row showOnMobilePortrait">
-          <AlbumItem
+          <AlbumItem class="ma" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
-            class="ma"
-            :class="{ playing: playingAlbumId == album._id }"
-            v-for="album in selectedArtist.albums"
-            :key="album._id"
-            :item="album"
-            @click="scrollToAlbum(album)"
-            @dblclick="playAlbum(album)"
-          />
         </div>
         <div id="navigation" class="flex-row center ma-top">
           <div class="flex-row grow"></div>
           <div class="flex-row">
-            <button
+            <button @click="gotoPrevArtist" class="primary ma4" :title="prevArtist.name" :disabled="!prevArtist._id">
-              @click="gotoPrevArtist"
-              class="primary ma4"
-              :title="prevArtist.name"
-              :disabled="!prevArtist._id"
-            >
               <awesome-icon icon="angle-left" class="ma4" />
             </button>
-            <button
+            <button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id">
-              @click="gotoNextArtist"
-              class="primary ma4"
-              :title="nextArtist.name"
-              :disabled="!nextArtist._id"
-            >
               <awesome-icon icon="angle-right" class="ma4" />
             </button>
           </div>
           <div class="flex-row grow right center">
-            <DropDown
+            <DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile">
-              v-if="$store.getters['user/isAdministrator']"
-              class="hideOnMobile"
-            >
               <button class="flat pa8-left pa8-right">
                 <awesome-icon icon="ellipsis-v" />
               </button>
@@ -86,23 +51,9 @@
       </div>
       <div class="flex-row overflow-y">
         <div id="albumList" class="flex-column hideOnMobilePortrait">
-          <AlbumItem
+          <AlbumItem class="ma-top ma-left ma-right" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" :id="album._id" :ref="album._id" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
-            class="ma-top ma-left ma-right"
-            :class="{ playing: playingAlbumId == album._id }"
-            v-for="album in selectedArtist.albums"
-            :key="album._id"
-            :item="album"
-            :id="album._id"
-            :ref="album._id"
-            @click="scrollToAlbum(album)"
-            @dblclick="playAlbum(album)"
-          />
         </div>
-        <ul
+        <ul id="trackList" class="tracks" :class="{ playing: selectedTrack._id != null }">
-          id="trackList"
-          class="tracks"
-          :class="{ playing: selectedTrack._id != null }"
-        >
           <li v-for="track in selectedArtist.tracks" :key="track._id">
             <TrackItem :track="track" :ref="track._id" />
           </li>
@@ -143,6 +94,14 @@ export default {
         }
       }
     },
+    playProgress() {
+      let track = this.selectedArtist.tracks.find(
+        (f) => f._id == this.selectedArtist.progress.id
+      );
+      if (track) {
+        this.$store.dispatch("tracks/play", track);
+      }
+    },
     gotoNextArtist() {
       this.$store.dispatch("artists/gotoNextArtist");
     },
@@ -194,6 +153,10 @@ export default {
     uploadNewCover() {
       this.$store.dispatch("artists/uploadNewCover", this.selectedArtist);
     },
+    loadUserProgress() {
+      if (this.selectedTrack.parent._id != this.selectedArtist._id)
+        this.$store.dispatch("user/getProgress", this.selectedArtist);
+    }
   },
   computed: {
     ...mapGetters({
@@ -266,6 +229,7 @@ export default {
           this.$refs.dialogWindow.open();
           window.addEventListener("keydown", this.keydownListener);
         }
+        this.loadUserProgress();
         this.gotoTrack();
       } else {
         if (this.$refs.dialogWindow.visible) {
@@ -289,6 +253,7 @@ export default {
   flex-direction: column;
   overflow: hidden;
 }
+
 h1,
 #stats {
   z-index: 1;
@@ -297,33 +262,40 @@ h1,
   color: var(--white);
   text-shadow: 0 1px 2px black;
 }
+
 #artistImage {
   width: 512px;
   max-height: 256px;
 }
+
 #header {
   position: relative;
   background-color: black;
   width: 760px;
   max-width: 100%;
 }
+
 #albumList {
   z-index: 1;
   overflow-y: auto;
   background-color: var(--white);
 }
+
 #albumList::-webkit-scrollbar {
   display: none;
 }
+
 #albumList .album:last-child {
   margin-bottom: 12px;
 }
+
 #navigation {
   z-index: 2;
   background-color: #ffffff40;
   border-top: 1px solid #ffffff20;
   border-bottom: 1px solid #00000020;
 }
+
 #trackList {
   z-index: 1;
   background-color: var(--white);
@@ -338,12 +310,15 @@ h1,
   width: initial;
   height: initial;
 }
+
 .dialog-body button {
   color: var(--darkgray);
 }
+
 .container {
   flex-grow: 0;
 }
+
 @media (max-width: 480px) {
   #albumList {
     background-color: initial;
@@ -353,19 +328,21 @@ h1,
   }
 }
 
-@media (max-width: 480px), (max-height: 480px) {
+@media (max-width: 480px),
+(max-height: 480px) {
   #artistViewer {
     height: initial;
   }
+
   #trackList {
     width: initial;
     height: initial;
   }
+
   #header {
     width: initial;
   }
 }
 
-@media (max-height: 480px) {
+@media (max-height: 480px) {}
-}
 </style>