From ec9c9858f63b6a959b86419a2d1b974496275df6 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Mon, 18 Sep 2023 16:54:28 +0200
Subject: [PATCH 1/8] create and handle interval

---
 src/components/Player.vue | 105 +++++++++++---------------------------
 1 file changed, 29 insertions(+), 76 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index d5c8eff..01e1d44 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,26 +1,9 @@
 <template>
-  <div
-    id="player"
-    class="flex-column"
-    v-show="selectedTrack._id || selectedRadio._id"
-  >
-    <input
-      type="range"
-      id="slider"
-      min="0"
-      max="100"
-      step="0.1"
-      v-model="selectedTrack.percent"
-      @change="slideChanged"
-    />
+  <div id="player" class="flex-column" v-show="selectedTrack._id || selectedRadio._id">
+    <input type="range" id="slider" min="0" max="100" step="0.1" v-model="selectedTrack.percent" @change="slideChanged" />
     <div id="playerBar" class="flex-row">
       <div class="flex-row grow">
-        <img
-          class="cover pointer"
-          :src="cover"
-          :title="selectedTrack.parent.title"
-          @click="gotoContainer"
-        />
+        <img class="cover pointer" :src="cover" :title="selectedTrack.parent.title" @click="gotoContainer" />
         <div v-if="selectedTrack._id" class="flex-column">
           <b>{{ selectedTrack.title }}</b>
           from
@@ -28,21 +11,9 @@
         </div>
       </div>
       <div id="playerControls" class="flex-row center">
-        <button
-          @click="switchShuffle"
-          title="Shuffle mode"
-          v-if="selectedTrack._id"
-        >
-          <img
-            src="static/icons/media-shuffle-dark.svg"
-            v-show="$store.getters['player/shuffle']"
-            class="small"
-          />
-          <img
-            src="static/icons/media-consecutive-dark.svg"
-            v-show="$store.getters['player/shuffle'] == false"
-            class="small"
-          />
+        <button @click="switchShuffle" title="Shuffle mode" v-if="selectedTrack._id">
+          <img src="static/icons/media-shuffle-dark.svg" v-show="$store.getters['player/shuffle']" class="small" />
+          <img src="static/icons/media-consecutive-dark.svg" v-show="$store.getters['player/shuffle'] == false" class="small" />
         </button>
         <button @click="prevTrack" title="Back" v-if="selectedTrack._id">
           <awesome-icon icon="backward" />
@@ -54,46 +25,17 @@
         <button @click="nextTrack" title="Forward" v-if="selectedTrack._id">
           <awesome-icon icon="forward" />
         </button>
-        <button
-          @click="switchRepeatType"
-          title="Repeat mode"
-          v-if="selectedTrack._id"
-        >
-          <img
-            src="static/icons/media-repeat-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'all'"
-          />
-          <img
-            src="static/icons/media-repeat-song-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'one'"
-          />
-          <img
-            src="static/icons/media-no-repeat-dark.svg"
-            class="small"
-            v-show="$store.getters['player/repeatType'] == 'none'"
-          />
+        <button @click="switchRepeatType" title="Repeat mode" v-if="selectedTrack._id">
+          <img src="static/icons/media-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'all'" />
+          <img src="static/icons/media-repeat-song-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'one'" />
+          <img src="static/icons/media-no-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'none'" />
         </button>
       </div>
-      <div
-        class="flex-row ma-right hideOnMobilePortrait grow right"
-        v-show="selectedTrack.title"
-      >
+      <div class="flex-row ma-right hideOnMobilePortrait grow right" v-show="selectedTrack.title">
         {{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}
       </div>
     </div>
-    <audio
-      preload="auto"
-      ref="audioControl"
-      type="audio/mpeg"
-      @ended="nextTrack"
-      @canplay="play"
-      @playing="playing"
-      @durationchange="durationChanged"
-      @timeupdate="timeUpdate"
-      src
-    ></audio>
+    <audio preload="auto" ref="audioControl" type="audio/mpeg" @ended="nextTrack" @canplay="play" @playing="playing" @durationchange="durationChanged" @timeupdate="timeUpdate" src></audio>
   </div>
 </template>
 
@@ -105,7 +47,8 @@ export default {
       audio: {},
       duration: 0,
       progress: 0,
-      interval: 0,
+      intervalProgress: 0,
+      intervalHistory: 0,
       preConvert: false,
     };
   },
@@ -121,7 +64,6 @@ export default {
     play() {
       this.audio.play();
     },
-
     pause() {
       if (!this.audio.paused) {
         this.audio.pause();
@@ -131,11 +73,17 @@ export default {
       this.duration = this.audio.duration;
     },
     playing() {
-      window.clearInterval(this.interval);
-      this.interval = setInterval(() => {
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalHistory);
+
+      this.intervalProgress = setInterval(() => {
         this.progress = this.audio.currentTime;
         this.selectedTrack.percent = (100 / this.duration) * this.progress;
       }, 500);
+
+      this.intervalHistory = setInterval(() => {
+        console.log(this.selectedTrack);
+      }, 10000);
     },
     audioReset() {
       this.audio.pause();
@@ -238,7 +186,8 @@ export default {
       }
     },
     reset() {
-      window.clearInterval(this.interval);
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalHistory);
       if (!this.audio.paused) {
         this.audio.pause();
       }
@@ -409,17 +358,21 @@ export default {
   z-index: 1001;
   box-shadow: 0 0px 4px var(--shadow);
 }
+
 #player .cover {
   width: 52px;
   margin-right: 4px;
 }
+
 #playerBar {
   overflow: hidden;
   max-height: 52px;
 }
-#playerBar > div {
+
+#playerBar>div {
   align-items: center;
 }
+
 #playerControls button {
   display: flex;
   padding: 4px 12px;
-- 
2.45.2


From 8248073a4d45886767e67a3b0ed24e1e8c289fca Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Mon, 18 Sep 2023 17:41:42 +0200
Subject: [PATCH 2/8] prepare the intervals

---
 src/components/Player.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 01e1d44..fbbbd8f 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -65,9 +65,12 @@ export default {
       this.audio.play();
     },
     pause() {
-      if (!this.audio.paused) {
-        this.audio.pause();
-      }
+      this.audio.pause();
+
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalHistory);
+
+      this.progress = this.audio.currentTime;
     },
     durationChanged() {
       this.duration = this.audio.duration;
@@ -180,7 +183,7 @@ export default {
         return;
       }
       if (!this.audio.paused) {
-        this.audio.pause();
+        this.pause();
       } else if (this.audio.src != "") {
         this.audio.play();
       }
-- 
2.45.2


From 239b538c4b418933403e3b1b3cf92ffeb92527f9 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 19 Sep 2023 01:56:09 +0200
Subject: [PATCH 3/8] added first functions

---
 public/config.json                     |  4 +-
 src/components/Player.vue              | 47 +++++++++++---
 src/components/dialogs/AlbumViewer.vue | 87 +++++++++++++-------------
 src/store/modules/user/actions.js      | 17 +++++
 4 files changed, 100 insertions(+), 55 deletions(-)

diff --git a/public/config.json b/public/config.json
index a3b7d4a..f966bb7 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,5 +1,5 @@
 {
-  "backend_de": "http://localhost:31204",
-  "backend_dev": "https://webplay.rocks",
+  "backend_dev": "http://localhost:31204",
+  "backend_de": "https://webplay.rocks",
   "backend": "https://webplay.rocks"
 }
\ No newline at end of file
diff --git a/src/components/Player.vue b/src/components/Player.vue
index fbbbd8f..5053261 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -48,7 +48,7 @@ export default {
       duration: 0,
       progress: 0,
       intervalProgress: 0,
-      intervalHistory: 0,
+      intervalState: 0,
       preConvert: false,
     };
   },
@@ -68,25 +68,27 @@ export default {
       this.audio.pause();
 
       window.clearInterval(this.intervalProgress);
-      window.clearInterval(this.intervalHistory);
+      window.clearInterval(this.intervalState);
 
-      this.progress = this.audio.currentTime;
+      this.pushState();
     },
     durationChanged() {
       this.duration = this.audio.duration;
     },
     playing() {
       window.clearInterval(this.intervalProgress);
-      window.clearInterval(this.intervalHistory);
+      window.clearInterval(this.intervalState);
 
       this.intervalProgress = setInterval(() => {
         this.progress = this.audio.currentTime;
         this.selectedTrack.percent = (100 / this.duration) * this.progress;
       }, 500);
 
-      this.intervalHistory = setInterval(() => {
-        console.log(this.selectedTrack);
-      }, 10000);
+      if (this.currentUser._id) {
+        this.intervalState = setInterval(() => {
+          this.pushState();
+        }, 10000);
+      }
     },
     audioReset() {
       this.audio.pause();
@@ -107,6 +109,14 @@ export default {
         this.audio.play();
       }
     },
+    skipToSecond(second) {
+      let was_paused = this.audio.paused;
+      this.audio.pause();
+      this.audio.currentTime = second;
+      if (!was_paused) {
+        this.audio.play();
+      }
+    },
     playRadio(radio) {
       this.$store.commit("tracks/resetSelectedTrack");
       this.audio.pause();
@@ -135,8 +145,12 @@ export default {
 
       this.pushHistoryItem();
 
-      // Try to fix SAFARI
-      this.audio.play();
+      if (this.selectedTrack.parent.progress) {
+        this.skipToSecond(this.selectedTrack.parent.progress.progress);
+      } else {
+        // Try to fix SAFARI
+        this.audio.play();
+      }
     },
     pushHistoryItem() {
       if (!this.currentUser._id) {
@@ -190,7 +204,7 @@ export default {
     },
     reset() {
       window.clearInterval(this.intervalProgress);
-      window.clearInterval(this.intervalHistory);
+      window.clearInterval(this.intervalState);
       if (!this.audio.paused) {
         this.audio.pause();
       }
@@ -251,6 +265,19 @@ export default {
       }
       this.$store.dispatch("user/savePlayerSettings");
     },
+    pushState() {
+      if (!this.currentUser._id) {
+        return;
+      }
+      this.progress = this.audio.currentTime;
+      let item = {
+        id: this.selectedTrack._id,
+        parentId: this.selectedTrack.parent._id,
+        type: "track",
+        progress: Math.round(this.progress)
+      }
+      this.$store.dispatch("user/saveProgress", item);
+    },
     timeUpdate(event) {
       let percent = (event.target.currentTime / event.target.duration) * 100;
       if (percent > 10 && !this.preConvert) {
diff --git a/src/components/dialogs/AlbumViewer.vue b/src/components/dialogs/AlbumViewer.vue
index 487f0c7..0e84074 100644
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -1,25 +1,12 @@
 <template>
-  <DialogBase
-    ref="dialogWindow"
-    :title="album_title"
-    @canceled="closed"
-    :showFooter="false"
-    :disableXscroll="true"
-    :disableYscroll="true"
-  >
+  <DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
     <div id="albumViewer" class="flex-row">
       <div id="header" class="flex-column">
         <div id="background" :style="coverBackground" />
         <div class="grow z1 center flex-column">
           <img class="glow ma24" :src="cover" @dblclick="dblclick" />
         </div>
-        <awesome-icon
-          icon="star"
-          size="2x"
-          class="favourite ma4"
-          :class="{ active: isFavourite }"
-          @click="toggleFavourite"
-        />
+        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
         <div id="stats" class="flex-row z1">
           <DropDown v-if="$store.getters['user/isAdministrator']">
             <button class="flat center" :title="visibility_text">
@@ -27,11 +14,7 @@
             </button>
             <template v-slot:dropdown-content>
               <div>
-                <button
-                  v-for="(item, i) in $store.state.system.lists.visibility"
-                  :key="i"
-                  @click="setVisibility(item)"
-                >
+                <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
                   <awesome-icon :icon="getVisibilityIcon(item)" />{{
                     getVisibilityText(item)
                   }}
@@ -40,10 +23,7 @@
                 <button v-if="!selectedAlbum.share._id" @click="shareEnable">
                   <awesome-icon icon="share" />Share this album
                 </button>
-                <button
-                  v-if="selectedAlbum.share._id"
-                  @click="addShareUrlToClipboard"
-                >
+                <button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
                   <awesome-icon icon="clipboard" />Copy url into clipboard
                 </button>
                 <button v-if="selectedAlbum.share._id" @click="shareDisable">
@@ -61,8 +41,7 @@
                 }}</b>
                 <br />
                 <span v-if="album_year">
-                  from year <b>{{ album_year }}</b> </span
-                ><br />
+                  from year <b>{{ album_year }}</b> </span><br />
                 <b>{{ album_tracks.length }}</b> Tracks with a duration of
                 <b>{{ album_duration }}</b>
               </span>
@@ -89,6 +68,7 @@
           </DropDown>
         </div>
       </div>
+      <p v-if="selectedAlbum.progress" @click="playProgress">Progress</p>
 
       <ul id="trackList" class="tracks">
         <li v-for="track in selectedAlbum.tracks" :key="track._id">
@@ -156,6 +136,14 @@ export default {
         }
       }
     },
+    playProgress() {
+      let track = this.selectedAlbum.tracks.find(
+        (f) => f._id == this.selectedAlbum.progress.id
+      );
+      if (track) {
+        this.$store.dispatch("tracks/play", track);
+      }
+    },
     closed() {
       if (
         (window.history.state.back &&
@@ -201,19 +189,19 @@ export default {
       return visibility == "global"
         ? "globe"
         : visibility == "instance"
-        ? "server"
-        : visibility == "hidden"
-        ? "eye-slash"
-        : "user";
+          ? "server"
+          : visibility == "hidden"
+            ? "eye-slash"
+            : "user";
     },
     getVisibilityText(visibility) {
       return visibility == "global"
         ? "Global"
         : visibility == "instance"
-        ? "On this server"
-        : visibility == "hidden"
-        ? "Hide this Album"
-        : "Only for me";
+          ? "On this server"
+          : visibility == "hidden"
+            ? "Hide this Album"
+            : "Only for me";
     },
     selectAlbum(album) {
       this.$store.dispatch("albums/selectAlbum", album);
@@ -228,6 +216,9 @@ export default {
     shareDisable() {
       this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
     },
+    loadUserProgress() {
+      this.$store.dispatch("user/getProgress", this.selectedAlbum);
+    }
   },
   computed: {
     ...mapGetters({
@@ -287,19 +278,19 @@ export default {
       return this.selectedAlbum.visibility == "global"
         ? "globe"
         : this.selectedAlbum.visibility == "instance"
-        ? "server"
-        : this.selectedAlbum.visibility == "hidden"
-        ? "eye-slash"
-        : "user";
+          ? "server"
+          : this.selectedAlbum.visibility == "hidden"
+            ? "eye-slash"
+            : "user";
     },
     visibility_text() {
       return this.selectedAlbum.visibility == "global"
         ? "Visible for the whole world"
         : this.selectedAlbum.visibility == "instance"
-        ? "Visible on this instance"
-        : this.selectedAlbum.visibility == "hidden"
-        ? "Hidden for all users"
-        : "Visible only for me";
+          ? "Visible on this instance"
+          : this.selectedAlbum.visibility == "hidden"
+            ? "Hidden for all users"
+            : "Visible only for me";
     },
     isFavourite() {
       return (
@@ -318,6 +309,7 @@ export default {
           this.$refs.dialogWindow.open();
           window.addEventListener("keydown", this.keydownListener);
         }
+        this.loadUserProgress();
         this.gotoTrack();
       } else {
         if (this.$refs.dialogWindow.visible) {
@@ -339,14 +331,17 @@ export default {
   height: 366px;
   width: 640px;
 }
+
 #header {
   position: relative;
   background-color: black;
 }
+
 #header img {
   align-self: center;
   width: 256px;
 }
+
 #stats {
   z-index: 2;
   align-items: center;
@@ -357,10 +352,12 @@ export default {
   border-top: 1px solid #ffffff20;
   border-bottom: 1px solid #00000020;
 }
+
 .dropdown-activator button {
   width: 32px;
   height: 32px;
 }
+
 #trackList {
   background-color: var(--white);
   z-index: 1;
@@ -370,15 +367,19 @@ export default {
   #header {
     width: 100%;
   }
+
   #albumViewer {
     flex-direction: column;
   }
 }
-@media (max-width: 480px), (max-height: 480px) {
+
+@media (max-width: 480px),
+(max-height: 480px) {
   #albumViewer {
     width: 100%;
     height: 100%;
   }
+
   #trackList {
     height: initial;
     flex-grow: 1;
diff --git a/src/store/modules/user/actions.js b/src/store/modules/user/actions.js
index 696e818..121949e 100644
--- a/src/store/modules/user/actions.js
+++ b/src/store/modules/user/actions.js
@@ -80,6 +80,23 @@ export default {
         context.commit("setHistory", res.data);
       });
   },
+  saveProgress(context, item) {
+    if (context.state._id == -1) {
+      return;
+    }
+    axios.post(context.rootGetters.server + "/api/user/progress", item, context.rootGetters.headers);
+  },
+  getProgress(context, parent) {
+    if (context.state._id == -1) {
+      return;
+    }
+
+    axios
+      .get(context.rootGetters.server + "/api/user/progress/" + parent._id, context.rootGetters.headers)
+      .then((res) => {
+        parent.progress = res.data;
+      });
+  },
   savePlayerSettings(context) {
     let body = {
       repeat: context.rootGetters["player/repeatType"],
-- 
2.45.2


From 159935d94906f044981d3bac76fefd7781605530 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 19 Sep 2023 12:03:00 +0200
Subject: [PATCH 4/8] added a play button and work on behavior

---
 public/static/app.css                  | 8 ++++++++
 src/components/Player.vue              | 1 +
 src/components/dialogs/AlbumViewer.vue | 9 +++++----
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/static/app.css b/public/static/app.css
index aac381a..0339e37 100644
--- a/public/static/app.css
+++ b/public/static/app.css
@@ -95,6 +95,14 @@ td.fillCell>* {
   color: var(--yellow);
 }
 
+.keepPlaying {
+  z-index: 1;
+  position: absolute;
+  cursor: pointer;
+  right: 0;
+}
+
+
 /*
   DIALOGS
 */
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 5053261..e8ee84d 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -147,6 +147,7 @@ export default {
 
       if (this.selectedTrack.parent.progress) {
         this.skipToSecond(this.selectedTrack.parent.progress.progress);
+        this.selectedTrack.parent.progress = undefined;
       } else {
         // Try to fix SAFARI
         this.audio.play();
diff --git a/src/components/dialogs/AlbumViewer.vue b/src/components/dialogs/AlbumViewer.vue
index 0e84074..a4c8cac 100644
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -6,7 +6,8 @@
         <div class="grow z1 center flex-column">
           <img class="glow ma24" :src="cover" @dblclick="dblclick" />
         </div>
-        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
+        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" title="Favourite" />
+        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedAlbum.progress" title="Keep playing" />
         <div id="stats" class="flex-row z1">
           <DropDown v-if="$store.getters['user/isAdministrator']">
             <button class="flat center" :title="visibility_text">
@@ -68,8 +69,6 @@
           </DropDown>
         </div>
       </div>
-      <p v-if="selectedAlbum.progress" @click="playProgress">Progress</p>
-
       <ul id="trackList" class="tracks">
         <li v-for="track in selectedAlbum.tracks" :key="track._id">
           <TrackItem :track="track" :showCover="false" />
@@ -217,7 +216,9 @@ export default {
       this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
     },
     loadUserProgress() {
-      this.$store.dispatch("user/getProgress", this.selectedAlbum);
+      console.log(this.selectedTrack);
+      if (this.selectedTrack.parent._id != this.selectedAlbum._id)
+        this.$store.dispatch("user/getProgress", this.selectedAlbum);
     }
   },
   computed: {
-- 
2.45.2


From 62091a02a3579a34e7a55aabbf99f2c5e573d2a1 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 19 Sep 2023 15:00:48 +0200
Subject: [PATCH 5/8] reset progress if album is finished

---
 src/components/Player.vue              |  8 +++++---
 src/components/dialogs/AlbumViewer.vue |  1 -
 src/store/modules/user/actions.js      | 10 +++++++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index e8ee84d..78fdd3a 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -203,7 +203,9 @@ export default {
         this.audio.play();
       }
     },
-    reset() {
+    reset(container) {
+      this.$store.dispatch("user/resetProgress", container);
+
       window.clearInterval(this.intervalProgress);
       window.clearInterval(this.intervalState);
       if (!this.audio.paused) {
@@ -370,11 +372,11 @@ export default {
         this.reset();
       }
     },
-    selectedTrack(newVal) {
+    selectedTrack(newVal, oldVal) {
       if (newVal._id) {
         this.playTrack(newVal);
       } else {
-        this.reset();
+        this.reset(oldVal);
       }
     },
   },
diff --git a/src/components/dialogs/AlbumViewer.vue b/src/components/dialogs/AlbumViewer.vue
index a4c8cac..83f4e08 100644
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -216,7 +216,6 @@ export default {
       this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
     },
     loadUserProgress() {
-      console.log(this.selectedTrack);
       if (this.selectedTrack.parent._id != this.selectedAlbum._id)
         this.$store.dispatch("user/getProgress", this.selectedAlbum);
     }
diff --git a/src/store/modules/user/actions.js b/src/store/modules/user/actions.js
index 121949e..53348f3 100644
--- a/src/store/modules/user/actions.js
+++ b/src/store/modules/user/actions.js
@@ -84,7 +84,8 @@ export default {
     if (context.state._id == -1) {
       return;
     }
-    axios.post(context.rootGetters.server + "/api/user/progress", item, context.rootGetters.headers);
+    axios
+      .post(context.rootGetters.server + "/api/user/progress", item, context.rootGetters.headers);
   },
   getProgress(context, parent) {
     if (context.state._id == -1) {
@@ -97,6 +98,13 @@ export default {
         parent.progress = res.data;
       });
   },
+  resetProgress(context, item) {
+    if (context.state._id == -1) {
+      return;
+    }
+    axios
+      .delete(context.rootGetters.server + "/api/user/progress/" + item.album_id, context.rootGetters.headers);
+  },
   savePlayerSettings(context) {
     let body = {
       repeat: context.rootGetters["player/repeatType"],
-- 
2.45.2


From 724f35dfb148dc41a37723e291d0b48d4f3b5ea9 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 19 Sep 2023 15:16:23 +0200
Subject: [PATCH 6/8] pregress handling for artists

---
 src/components/Player.vue               |  8 +-
 src/components/dialogs/ArtistViewer.vue | 99 ++++++++++---------------
 2 files changed, 42 insertions(+), 65 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 78fdd3a..0defff9 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -145,9 +145,9 @@ export default {
 
       this.pushHistoryItem();
 
-      if (this.selectedTrack.parent.progress) {
-        this.skipToSecond(this.selectedTrack.parent.progress.progress);
-        this.selectedTrack.parent.progress = undefined;
+      if (this.currentTrackParent.progress) {
+        this.skipToSecond(this.currentTrackParent.progress.progress);
+        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)
       }
diff --git a/src/components/dialogs/ArtistViewer.vue b/src/components/dialogs/ArtistViewer.vue
index e16b8b6..7d38aeb 100644
--- a/src/components/dialogs/ArtistViewer.vue
+++ b/src/components/dialogs/ArtistViewer.vue
@@ -1,24 +1,10 @@
 <template>
-  <DialogBase
-    ref="dialogWindow"
-    id="dialogWindow"
-    :title="selectedArtist.name"
-    @canceled="closed"
-    :showFooter="false"
-    :showFullscreenButton="true"
-    :disableXscroll="true"
-    :disableYscroll="true"
-  >
+  <DialogBase 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
-          icon="star"
-          size="2x"
-          class="favourite ma4"
-          :class="{ active: isFavourite }"
-          @click="toggleFavourite"
-        />
+        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
+        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
         <h1 @dblclick="dblclick">
           {{ selectedArtist.name }}
         </h1>
@@ -28,41 +14,20 @@
           <b>{{ artist_duration }}</b>
         </span>
         <div id="albumList" class="flex-row showOnMobilePortrait">
-          <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)"
-          />
+          <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)" />
         </div>
         <div id="navigation" class="flex-row center ma-top">
           <div class="flex-row grow"></div>
           <div class="flex-row">
-            <button
-              @click="gotoPrevArtist"
-              class="primary ma4"
-              :title="prevArtist.name"
-              :disabled="!prevArtist._id"
-            >
+            <button @click="gotoPrevArtist" class="primary ma4" :title="prevArtist.name" :disabled="!prevArtist._id">
               <awesome-icon icon="angle-left" class="ma4" />
             </button>
-            <button
-              @click="gotoNextArtist"
-              class="primary ma4"
-              :title="nextArtist.name"
-              :disabled="!nextArtist._id"
-            >
+            <button @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
-              v-if="$store.getters['user/isAdministrator']"
-              class="hideOnMobile"
-            >
+            <DropDown 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
-            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)"
-          />
+          <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)" />
         </div>
-        <ul
-          id="trackList"
-          class="tracks"
-          :class="{ playing: selectedTrack._id != null }"
-        >
+        <ul 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>
\ No newline at end of file
-- 
2.45.2


From 733b8eee9184b91d4d880a6b9303a9076e811ddc Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 19 Sep 2023 16:20:21 +0200
Subject: [PATCH 7/8] reset progress for artists if playing is done

---
 src/components/Player.vue         | 9 +++++++--
 src/store/modules/user/actions.js | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 0defff9..8b70d1f 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -203,8 +203,13 @@ export default {
         this.audio.play();
       }
     },
-    reset(container) {
-      this.$store.dispatch("user/resetProgress", container);
+    reset(item) {
+      let parentId = item.parent._id;
+      if (item.parent.parent && item.parent.parent.tracks) {
+        parentId = item.parent.parent._id;
+      }
+      console.log(parentId);
+      this.$store.dispatch("user/resetProgress", parentId);
 
       window.clearInterval(this.intervalProgress);
       window.clearInterval(this.intervalState);
diff --git a/src/store/modules/user/actions.js b/src/store/modules/user/actions.js
index 53348f3..4a2acd5 100644
--- a/src/store/modules/user/actions.js
+++ b/src/store/modules/user/actions.js
@@ -98,12 +98,12 @@ export default {
         parent.progress = res.data;
       });
   },
-  resetProgress(context, item) {
+  resetProgress(context, parentId) {
     if (context.state._id == -1) {
       return;
     }
     axios
-      .delete(context.rootGetters.server + "/api/user/progress/" + item.album_id, context.rootGetters.headers);
+      .delete(context.rootGetters.server + "/api/user/progress/" + parentId, context.rootGetters.headers);
   },
   savePlayerSettings(context) {
     let body = {
-- 
2.45.2


From 25b9b7b582a84f200b6c606e8327ca11f116ff2d Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 19 Sep 2023 16:32:06 +0200
Subject: [PATCH 8/8] disable play button on artist dialog

---
 src/components/Player.vue               | 1 -
 src/components/dialogs/ArtistViewer.vue | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 8b70d1f..d1ac890 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -208,7 +208,6 @@ export default {
       if (item.parent.parent && item.parent.parent.tracks) {
         parentId = item.parent.parent._id;
       }
-      console.log(parentId);
       this.$store.dispatch("user/resetProgress", parentId);
 
       window.clearInterval(this.intervalProgress);
diff --git a/src/components/dialogs/ArtistViewer.vue b/src/components/dialogs/ArtistViewer.vue
index 7d38aeb..954dc81 100644
--- a/src/components/dialogs/ArtistViewer.vue
+++ b/src/components/dialogs/ArtistViewer.vue
@@ -154,7 +154,7 @@ export default {
       this.$store.dispatch("artists/uploadNewCover", this.selectedArtist);
     },
     loadUserProgress() {
-      if (this.selectedTrack.parent._id != this.selectedArtist._id)
+      if (!this.isPlaying || this.selectedTrack.parent.parent._id != this.selectedArtist._id)
         this.$store.dispatch("user/getProgress", this.selectedArtist);
     }
   },
@@ -165,6 +165,7 @@ export default {
       selectedArtist: ["artists/selectedArtist"],
       selectedTrack: ["tracks/selectedTrack"],
       favourites: ["user/favourites"],
+      isPlaying: ["player/isPlaying"]
     }),
     cover() {
       let covers = this.selectedArtist.covers;
-- 
2.45.2