src/store/modules/albums/actions.js

@@ -176,10 +176,5 @@ 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);
-    });
   }
 }

src/store/modules/albums/getters.js

@@ -32,8 +32,5 @@ export default {
     },
     newest(state) {
         return state.newest;
-    },
-    randomCovers(state) {
-        return state.randomCovers;
     }
 }

src/store/modules/albums/mutations.js

@@ -76,8 +76,5 @@ export default {
       }
     });
     state.newest = albums;
-  },
-  setRandomCovers(state, covers) {
-    state.randomCovers = covers;
   }
 }

src/store/modules/albums/state.js

@@ -2,7 +2,6 @@ export default {
     collection: [],
     newest: [],
     selectedAlbum: { tracks: [], covers: {}, share: {} },
-    randomCovers: [],
     page: 1,
     loading: false,
     eos: false

src/views/Home.vue

@@ -2,17 +2,6 @@
   <div id="welcome" ref="welcome" @scroll="loadNextPage">
     <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">
-            <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" />
-
-              <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>
-        <div class="flex-column" style="z-index: 1;">
         <h1>WebPlay</h1>
         <p>
           <b>{{ serverInfo.stats.tracks.toLocaleString("de-DE") }}</b> Tracks
@@ -22,9 +11,21 @@
           <b>{{ serverInfo.stats.users }}</b>
         </p>
       </div>
-      </div>
+      <MessageScreen
-      <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" />
+        title="First Run?"
-      <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" />
+        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
@@ -32,43 +33,90 @@
         <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" />
+              <AlbumItem
-              <ArtistItem class="ma8" v-if="item.type == 'artist'" :item="item" :key="item._id" />
+                class="ma8"
-              <BoxItem class="ma8" v-if="item.type == 'box'" :item="item" :key="item._id" />
+                v-if="item.type == 'album'"
-              <RadioItem class="ma8" v-if="item.type == 'radio'" :item="item" :key="item._id" />
+                :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>
@@ -112,11 +160,6 @@ export default {
       this.$store.dispatch("boxes/loadNewest");
       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/loadAlbums", true);
-        this.$store.dispatch("artists/loadArtists", true);
-      }
     },
     loadNextPage() {
       this.scrollPosition = this.$refs.welcome.scrollTop;
@@ -151,7 +194,6 @@ export default {
       serverInfo: "serverInfo",
       mostListened: "tracks/mostListened",
       mostViewed: "videos/mostViewed",
-      randomCovers: ["albums/randomCovers"],
     }),
     historyToggleText() {
       return this.historyAll ? "less..." : "more...";
@@ -179,17 +221,4 @@ export default {
 #history.more {
   max-height: initial;
 }
-
-#banner {
-  position: relative;
-}
-
-#collage {
-  bottom: 0;
-  top: 0;
-  left: 0;
-  right: 0;
-  opacity: 0.2;
-  position: absolute;
-}
 </style>