From c7f669541635eaaecf7be5f454bc91c29667cd45 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 26 Sep 2023 14:57:37 +0200
Subject: [PATCH 1/8] show radio title in the palyer bar. fix #23

---
 src/components/Player.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index e9d2d48..f21e7a6 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -1,6 +1,6 @@
 <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" />
+    <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" />
@@ -9,6 +9,9 @@
           from
           <b>{{ selectedTrack.parent.title }}</b>
         </div>
+        <div v-if="selectedRadio._id" class="flex-column">
+          <b>{{ selectedRadio.name }}</b>
+        </div>
       </div>
       <div id="playerControls" class="flex-row center">
         <button @click="switchShuffle" title="Shuffle mode" v-if="selectedTrack._id">
@@ -31,8 +34,8 @@
           <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">
-        {{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}
+      <div class="flex-row ma-right hideOnMobilePortrait grow right">
+        <span v-show="selectedTrack.title">{{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}</span>
       </div>
     </div>
     <audio preload="auto" ref="audioControl" type="audio/mpeg" @ended="nextTrack" @canplay="play" @playing="playing" @durationchange="durationChanged" @timeupdate="timeUpdate" src></audio>

From 02e13cb642532ef30ac863c0288da694c36554bf Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Tue, 26 Sep 2023 23:51:33 +0200
Subject: [PATCH 2/8] wip

---
 src/views/Home.vue | 132 ++++++++++++++++++---------------------------
 1 file changed, 52 insertions(+), 80 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index a3ac45e..f3c87c2 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,30 +2,31 @@
   <div id="welcome" ref="welcome" @scroll="loadNextPage">
     <div id="welcomeLeft" class="flex-column grow">
       <div id="banner" class="center flex-column shadow">
-        <h1>WebPlay</h1>
-        <p>
-          <b>{{ serverInfo.stats.tracks.toLocaleString("de-DE") }}</b> Tracks
-          and
-          <b>{{ serverInfo.stats.videos.toLocaleString("de-DE") }}</b> Videos |
-          Users:
-          <b>{{ serverInfo.stats.users }}</b>
-        </p>
+        <div id="collage">
+          <svg width="100%" height="100%" viewBox="20 20 700 100">
+            <g>
+              <animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="-40 -20" to="0 0" dur="30s" />
+              <animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="0 0" to="-40 -20" dur="30s" />
+
+              <image :xlink:href="item.covers.cover128" :x="i * 64" y="0" width="64" height="64" v-for="(item, i) in albums" :key="item" />
+              <image :xlink:href="item.covers.cover256" :x="i * 128" y="64" width="128" v-for="(item, i) in artists" :key="item" />
+              <image :xlink:href="item.covers.cover128 || item.covers.cover256" :x="i * 64" y="128" v-for="(item, i) in history" :key="item" />
+            </g>
+          </svg>
+        </div>
+        <div class="flex-column" style="z-index: 1;">
+          <h1>WebPlay</h1>
+          <p>
+            <b>{{ serverInfo.stats.tracks.toLocaleString("de-DE") }}</b> Tracks
+            and
+            <b>{{ serverInfo.stats.videos.toLocaleString("de-DE") }}</b> Videos |
+            Users:
+            <b>{{ serverInfo.stats.users }}</b>
+          </p>
+        </div>
       </div>
-      <MessageScreen
-        title="First Run?"
-        subtitle="You still don't have any Music or Video content on your instance"
-        icon="sync"
-        :commands="messageCommands"
-        @commandClicked="messageCommand"
-        :showCommands="$store.getters['user/isAdministrator']"
-        v-if="serverInfo.stats.tracks == 0 && serverInfo.stats.videos == 0"
-      />
-      <MessageScreen
-        v-else-if="mostListened.length == 0 && mostViewed.length == 0"
-        title="Still no history or trends"
-        subtitle="Still no history or trends on this instance"
-        icon="info"
-      />
+      <MessageScreen title="First Run?" subtitle="You still don't have any Music or Video content on your instance" icon="sync" :commands="messageCommands" @commandClicked="messageCommand" :showCommands="$store.getters['user/isAdministrator']" v-if="serverInfo.stats.tracks == 0 && serverInfo.stats.videos == 0" />
+      <MessageScreen v-else-if="mostListened.length == 0 && mostViewed.length == 0" title="Still no history or trends" subtitle="Still no history or trends on this instance" icon="info" />
       <template v-else>
         <h2 class="ma-left ma-top pa-top ma4-bottom" v-if="history.length > 0">
           Last played
@@ -33,90 +34,43 @@
         <template v-if="history.length > 0">
           <div id="history" :class="{ more: historyAll == true }">
             <template v-for="item in history">
-              <AlbumItem
-                class="ma8"
-                v-if="item.type == 'album'"
-                :item="item"
-                :key="item._id"
-              />
-              <ArtistItem
-                class="ma8"
-                v-if="item.type == 'artist'"
-                :item="item"
-                :key="item._id"
-              />
-              <BoxItem
-                class="ma8"
-                v-if="item.type == 'box'"
-                :item="item"
-                :key="item._id"
-              />
-              <RadioItem
-                class="ma8"
-                v-if="item.type == 'radio'"
-                :item="item"
-                :key="item._id"
-              />
+              <AlbumItem class="ma8" v-if="item.type == 'album'" :item="item" :key="item._id" />
+              <ArtistItem class="ma8" v-if="item.type == 'artist'" :item="item" :key="item._id" />
+              <BoxItem class="ma8" v-if="item.type == 'box'" :item="item" :key="item._id" />
+              <RadioItem class="ma8" v-if="item.type == 'radio'" :item="item" :key="item._id" />
             </template>
           </div>
 
           <span class="pa-top pa-right right" @click="toggleHistory">
-            <awesome-icon
-              :icon="historyAll ? 'arrow-up' : 'arrow-down'"
-              class="pa8-right"
-            />{{ historyToggleText }}</span
-          >
+            <awesome-icon :icon="historyAll ? 'arrow-up' : 'arrow-down'" class="pa8-right" />{{ historyToggleText }}</span>
         </template>
         <div id="mostUsed" class="flex-row ma">
           <div id="mostListened" class="grow" v-if="mostListened.length > 0">
             <h2 class="ma-top pa-top ma4-bottom">Most listened</h2>
             <div class="flex-column">
-              <TrackItem
-                v-for="(item, i) in mostListened"
-                :track="item"
-                :key="i"
-              />
+              <TrackItem v-for="(item, i) in mostListened" :track="item" :key="i" />
             </div>
           </div>
           <div id="mostViewed" class="grow" v-if="mostViewed.length > 0">
             <h2 class="ma-top pa-top ma4-bottom">Most viewed</h2>
             <div id="mostViewedVideos" class="flex-row">
-              <VideoItem
-                v-for="(item, i) in mostViewed"
-                :video="item"
-                :key="i"
-              />
+              <VideoItem v-for="(item, i) in mostViewed" :video="item" :key="i" />
             </div>
           </div>
         </div>
       </template>
     </div>
-    <div
-      v-if="newestAlbums.length > 0 || newestBoxes.length > 0"
-      id="newest"
-      class="pa-left pa-right"
-    >
+    <div v-if="newestAlbums.length > 0 || newestBoxes.length > 0" id="newest" class="pa-left pa-right">
       <template v-if="newestAlbums.length > 0">
         <h3>Newest Music</h3>
         <div id="newestMusic" class="flex-column pa-bottom">
-          <AlbumItem
-            class="ma8"
-            v-for="item in newestAlbums"
-            type="line"
-            :item="item"
-            :key="item._id"
-          />
+          <AlbumItem class="ma8" v-for="item in newestAlbums" type="line" :item="item" :key="item._id" />
         </div>
       </template>
       <template v-if="newestBoxes.length > 0">
         <h3>Newest Videos</h3>
         <div id="newestVideos" class="flex-row">
-          <BoxItem
-            class="ma8 small"
-            v-for="item in newestBoxes"
-            :item="item"
-            :key="item._id"
-          />
+          <BoxItem class="ma8 small" v-for="item in newestBoxes" :item="item" :key="item._id" />
         </div>
       </template>
     </div>
@@ -160,6 +114,9 @@ export default {
       this.$store.dispatch("boxes/loadNewest");
       this.$store.dispatch("tracks/loadMostListened");
       this.$store.dispatch("videos/loadMostViewed");
+
+      this.$store.dispatch("albums/loadAlbums", true);
+      this.$store.dispatch("artists/loadArtists", true);
     },
     loadNextPage() {
       this.scrollPosition = this.$refs.welcome.scrollTop;
@@ -194,6 +151,8 @@ export default {
       serverInfo: "serverInfo",
       mostListened: "tracks/mostListened",
       mostViewed: "videos/mostViewed",
+      albums: ["albums/collection"],
+      artists: ["artists/collection"],
     }),
     historyToggleText() {
       return this.historyAll ? "less..." : "more...";
@@ -221,4 +180,17 @@ export default {
 #history.more {
   max-height: initial;
 }
+
+#banner {
+  position: relative;
+}
+
+#collage {
+  bottom: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.25;
+  position: absolute;
+}
 </style>
\ No newline at end of file

From 7ebce51c2de151d70e6c4e90aa55b7278d2be1fe Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Wed, 27 Sep 2023 16:51:44 +0200
Subject: [PATCH 3/8] load random covers

---
 public/config.json                    | 4 ++--
 src/store/modules/albums/actions.js   | 5 +++++
 src/store/modules/albums/getters.js   | 3 +++
 src/store/modules/albums/mutations.js | 3 +++
 src/store/modules/albums/state.js     | 1 +
 src/views/Home.vue                    | 8 +++-----
 6 files changed, 17 insertions(+), 7 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/store/modules/albums/actions.js b/src/store/modules/albums/actions.js
index 301ddb5..90bb4f6 100644
--- a/src/store/modules/albums/actions.js
+++ b/src/store/modules/albums/actions.js
@@ -176,5 +176,10 @@ export default {
         resolve();
       });
     });
+  },
+  loadRandomCovers(context, count) {
+    axios.get(context.rootGetters.server + "/api/albums/random/" + count, context.rootGetters.headers).then((res) => {
+      context.commit("setRandomCovers", res.data);
+    });
   }
 }
\ No newline at end of file
diff --git a/src/store/modules/albums/getters.js b/src/store/modules/albums/getters.js
index 94440bf..cecc746 100644
--- a/src/store/modules/albums/getters.js
+++ b/src/store/modules/albums/getters.js
@@ -32,5 +32,8 @@ export default {
     },
     newest(state) {
         return state.newest;
+    },
+    randomCovers(state) {
+        return state.randomCovers;
     }
 }
\ No newline at end of file
diff --git a/src/store/modules/albums/mutations.js b/src/store/modules/albums/mutations.js
index dafa403..c1c8222 100644
--- a/src/store/modules/albums/mutations.js
+++ b/src/store/modules/albums/mutations.js
@@ -76,5 +76,8 @@ export default {
       }
     });
     state.newest = albums;
+  },
+  setRandomCovers(state, covers) {
+    state.randomCovers = covers;
   }
 }
\ No newline at end of file
diff --git a/src/store/modules/albums/state.js b/src/store/modules/albums/state.js
index e504bbe..6fb4e5f 100644
--- a/src/store/modules/albums/state.js
+++ b/src/store/modules/albums/state.js
@@ -2,6 +2,7 @@ export default {
     collection: [],
     newest: [],
     selectedAlbum: { tracks: [], covers: {}, share: {} },
+    randomCovers: [],
     page: 1,
     loading: false,
     eos: false
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f3c87c2..c04b288 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -8,9 +8,7 @@
               <animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="-40 -20" to="0 0" dur="30s" />
               <animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="0 0" to="-40 -20" dur="30s" />
 
-              <image :xlink:href="item.covers.cover128" :x="i * 64" y="0" width="64" height="64" v-for="(item, i) in albums" :key="item" />
-              <image :xlink:href="item.covers.cover256" :x="i * 128" y="64" width="128" v-for="(item, i) in artists" :key="item" />
-              <image :xlink:href="item.covers.cover128 || item.covers.cover256" :x="i * 64" y="128" v-for="(item, i) in history" :key="item" />
+              <image :xlink:href="item.covers.cover64" :x="i * 64" y="0" width="64" height="64" v-for="(item, i) in randomCovers" :key="item" />
             </g>
           </svg>
         </div>
@@ -115,6 +113,7 @@ export default {
       this.$store.dispatch("tracks/loadMostListened");
       this.$store.dispatch("videos/loadMostViewed");
 
+      this.$store.dispatch("albums/loadRandomCovers", 24);
       this.$store.dispatch("albums/loadAlbums", true);
       this.$store.dispatch("artists/loadArtists", true);
     },
@@ -151,8 +150,7 @@ export default {
       serverInfo: "serverInfo",
       mostListened: "tracks/mostListened",
       mostViewed: "videos/mostViewed",
-      albums: ["albums/collection"],
-      artists: ["artists/collection"],
+      randomCovers: ["albums/randomCovers"],
     }),
     historyToggleText() {
       return this.historyAll ? "less..." : "more...";

From d0b4590664b624004424c77999d23c99cb4e0119 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Wed, 27 Sep 2023 22:10:16 +0200
Subject: [PATCH 4/8] ready to use

---
 public/config.json |  4 ++--
 src/views/Home.vue | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/public/config.json b/public/config.json
index f966bb7..a3b7d4a 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,5 +1,5 @@
 {
-  "backend_dev": "http://localhost:31204",
-  "backend_de": "https://webplay.rocks",
+  "backend_de": "http://localhost:31204",
+  "backend_dev": "https://webplay.rocks",
   "backend": "https://webplay.rocks"
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index c04b288..8fec13e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,10 +5,10 @@
         <div id="collage">
           <svg width="100%" height="100%" viewBox="20 20 700 100">
             <g>
-              <animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="-40 -20" to="0 0" dur="30s" />
-              <animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="0 0" to="-40 -20" dur="30s" />
+              <animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="-40 -60" to="-10 -20" dur="30s" />
+              <animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="-10 -20" to="-40 -60" dur="30s" />
 
-              <image :xlink:href="item.covers.cover64" :x="i * 64" y="0" width="64" height="64" v-for="(item, i) in randomCovers" :key="item" />
+              <image :xlink:href="item.covers.cover64" :x="Math.floor(i / 4) * 64" :y="i % 4 * 64" width="64" height="64" v-for="(item, i) in randomCovers" :key="item" />
             </g>
           </svg>
         </div>
@@ -113,7 +113,7 @@ export default {
       this.$store.dispatch("tracks/loadMostListened");
       this.$store.dispatch("videos/loadMostViewed");
 
-      this.$store.dispatch("albums/loadRandomCovers", 24);
+      this.$store.dispatch("albums/loadRandomCovers", 48);
       this.$store.dispatch("albums/loadAlbums", true);
       this.$store.dispatch("artists/loadArtists", true);
     },
@@ -188,7 +188,7 @@ export default {
   top: 0;
   left: 0;
   right: 0;
-  opacity: 0.25;
+  opacity: 0.2;
   position: absolute;
 }
 </style>
\ No newline at end of file

From a9d705298a1162982c6a32309c88ce02a730ba59 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Wed, 27 Sep 2023 22:13:10 +0200
Subject: [PATCH 5/8] don't reload random covers

---
 src/views/Home.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8fec13e..0215f5d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -112,10 +112,11 @@ export default {
       this.$store.dispatch("boxes/loadNewest");
       this.$store.dispatch("tracks/loadMostListened");
       this.$store.dispatch("videos/loadMostViewed");
-
-      this.$store.dispatch("albums/loadRandomCovers", 48);
-      this.$store.dispatch("albums/loadAlbums", true);
-      this.$store.dispatch("artists/loadArtists", true);
+      if (this.randomCovers.length == 0) {
+        this.$store.dispatch("albums/loadRandomCovers", 48);
+        this.$store.dispatch("albums/loadAlbums", true);
+        this.$store.dispatch("artists/loadArtists", true);
+      }
     },
     loadNextPage() {
       this.scrollPosition = this.$refs.welcome.scrollTop;

From dbefc505dde334a5ba878ffd467e307bec64a148 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Wed, 27 Sep 2023 22:35:09 +0200
Subject: [PATCH 6/8] adjust viewbox

---
 src/views/Home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0215f5d..2b068d0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,7 +3,7 @@
     <div id="welcomeLeft" class="flex-column grow">
       <div id="banner" class="center flex-column shadow">
         <div id="collage">
-          <svg width="100%" height="100%" viewBox="20 20 700 100">
+          <svg width="100%" height="100%" viewBox="20 40 700 100">
             <g>
               <animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="-40 -60" to="-10 -20" dur="30s" />
               <animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="-10 -20" to="-40 -60" dur="30s" />

From 2abc46216d8c5b82bf91259de406f0ca958d880d Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Thu, 28 Sep 2023 12:48:11 +0200
Subject: [PATCH 7/8] adjust banner animation for smartphones

---
 src/views/Home.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 2b068d0..29ec95b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -3,12 +3,12 @@
     <div id="welcomeLeft" class="flex-column grow">
       <div id="banner" class="center flex-column shadow">
         <div id="collage">
-          <svg width="100%" height="100%" viewBox="20 40 700 100">
+          <svg width="100%" height="100%" viewBox="20 40 600 100">
             <g>
-              <animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="-40 -60" to="-10 -20" dur="30s" />
-              <animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="-10 -20" to="-40 -60" dur="30s" />
+              <animateTransform id="animY1" attributeName="transform" type="translate" begin="0s; animY2.end" from="0 -140" to="-20 -60" dur="30s" />
+              <animateTransform id="animY2" attributeName="transform" type="translate" begin="animY1.end" from="-20 -60" to="0 -140" dur="30s" />
 
-              <image :xlink:href="item.covers.cover64" :x="Math.floor(i / 4) * 64" :y="i % 4 * 64" width="64" height="64" v-for="(item, i) in randomCovers" :key="item" />
+              <image :xlink:href="item.covers.cover64" :x="Math.floor(i / 6) * 64" :y="i % 6 * 64" width="64" height="64" v-for="(item, i) in randomCovers" :key="item" />
             </g>
           </svg>
         </div>
@@ -113,7 +113,7 @@ export default {
       this.$store.dispatch("tracks/loadMostListened");
       this.$store.dispatch("videos/loadMostViewed");
       if (this.randomCovers.length == 0) {
-        this.$store.dispatch("albums/loadRandomCovers", 48);
+        this.$store.dispatch("albums/loadRandomCovers", 60);
         this.$store.dispatch("albums/loadAlbums", true);
         this.$store.dispatch("artists/loadArtists", true);
       }

From 2b79f47d57149634926eaa0704ddc34807c927ba Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Wed, 4 Oct 2023 11:29:32 +0200
Subject: [PATCH 8/8] push history item after 10%. fix #27

---
 src/components/Player.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index f21e7a6..6e17002 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -146,8 +146,6 @@ export default {
       this.audio.pause();
       this.audio.src = url;
 
-      this.pushHistoryItem();
-
       if (this.currentTrackParent.progress) {
         if (this.currentTrackParent.progress.id == this.selectedTrack._id) {
           this.skipToSecond(this.currentTrackParent.progress.progress);
@@ -297,6 +295,7 @@ export default {
           track: this.selectedTrack,
           rate: this.audioBpm,
         });
+        this.pushHistoryItem();
       }
     },
   },