add a diffrent icon, if media is playing

Reviewed-on: #36

package-lock.json

@@ -9,7 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.3.0",
-        "@fortawesome/free-solid-svg-icons": "^6.3.0",
+        "@fortawesome/free-regular-svg-icons": "^6.4.2",
+        "@fortawesome/free-solid-svg-icons": "^6.4.2",
         "@fortawesome/vue-fontawesome": "^3.0.3",
         "axios": "^1.3.3",
         "body-parser": "^1.20.1",
@@ -1890,18 +1891,48 @@
         "node": ">=6"
       }
     },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
-      "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
       "hasInstallScript": true,
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.3.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
       },
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-regular-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons/node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+      "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/vue-fontawesome": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
@@ -14961,12 +14992,34 @@
         "@fortawesome/fontawesome-common-types": "6.3.0"
       }
     },
-    "@fortawesome/free-solid-svg-icons": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz",
-      "integrity": "sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==",
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-0+sIUWnkgTVVXVAPQmW4vxb9ZTHv0WstOa3rBx9iPxrrrDH6bNLsDYuwXF9b6fGm+iR7DKQvQshUH/FJm3ed9Q==",
       "requires": {
-        "@fortawesome/fontawesome-common-types": "6.3.0"
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+          "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA=="
+        }
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
+      "integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.4.2"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
+          "integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA=="
+        }
       }
     },
     "@fortawesome/vue-fontawesome": {

package.json

@@ -14,7 +14,8 @@
   "main": "electron.js",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
-    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/vue-fontawesome": "^3.0.3",
     "axios": "^1.3.3",
     "body-parser": "^1.20.1",

public/config.json

@@ -1,5 +1,5 @@
 {
   "backend_de": "http://localhost:31204",
   "backend_dev": "https://webplay.rocks",
-  "backend": "https://webplay.rocks"
+  "backend": ""
 }

public/static/app.css

@@ -85,23 +85,10 @@ td.fillCell>* {
   text-align: center;
 }
 
-.favourite {
-  z-index: 1;
-  position: absolute;
-  cursor: pointer;
-}
-
 .favourite.active {
   color: var(--yellow);
 }
 
-.keepPlaying {
-  z-index: 1;
-  position: absolute;
-  cursor: pointer;
-  right: 0;
-}
-
 
 /*
   DIALOGS
@@ -638,9 +625,8 @@ td.fillCell>* {
   }
 
   #artists .artistCover {
-    min-width: 100%;
+    width: 160px;
     height: initial;
-    min-height: 128px;
   }
 
   #artists .artistName {

public/static/style.css

@@ -1741,6 +1741,10 @@ td.strech {
   box-shadow: 0 1px 4px var(--glow);
 }
 
+.glow-text {
+  text-shadow: 0 1px 4px var(--glow);
+}
+
 .nowrap {
   white-space: nowrap;
 }

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>
@@ -124,7 +127,7 @@ export default {
 
       let item = {
         id: this.selectedRadio._id,
-        cover128: this.selectedRadio.cover128,
+        covers: { cover128: this.selectedRadio.covers.cover128 },
         name: this.selectedRadio.name,
         type: "radio",
       };
@@ -143,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);
@@ -153,7 +154,6 @@ export default {
       }
       // Try to fix SAFARI
       this.audio.play();
-
     },
     pushHistoryItem() {
       if (!this.currentUser._id) {
@@ -295,6 +295,7 @@ export default {
           track: this.selectedTrack,
           rate: this.audioBpm,
         });
+        this.pushHistoryItem();
       }
     },
   },

src/components/base-components/Dialog.vue

@@ -1,65 +1,32 @@
 <template>
-  <div
-    ref="dialogBackground"
-    class="dialog-background"
-    v-if="visible"
-    @click="bgClicked"
-  >
-    <div
-      class="dialog-window"
-      :class="{
+  <div ref="dialogBackground" class="dialog-background" v-if="visible" @click="bgClicked">
+    <div class="dialog-window" :class="{
       fullscreen: isFullscreen,
       'max-size': maxSize,
       playing: $store.getters['player/isPlaying'],
-      }"
-    >
-      <div
-        class="dialog-header"
-        :class="{ hideOnMobile: showHeaderOnMobile == false }"
-        v-if="showHeader"
-        @dblclick="headerDoubleClick"
-      >
+    }">
+      <div class="dialog-header" :class="{ hideOnMobile: showHeaderOnMobile == false, 'flat-dialog-header': flatDialogHeader == true }" v-if="showHeader" @dblclick="headerDoubleClick">
         <div class="dialog-header-left">
           <slot name="header-left" />
         </div>
         <div class="dialog-header-center">
-          <h3 v-if="dialogTitle">{{ dialogTitle }}</h3>
+          <h3 v-if="dialogTitle && !flatDialogHeader">{{ dialogTitle }}</h3>
           <slot name="header-center" />
         </div>
         <div class="dialog-header-right">
           <slot name="header-right" />
-          <button
-            class="hideOnMobile"
-            @click="isFullscreen = !isFullscreen"
-            v-if="showFullscreenButton"
-            :title="isFullscreen ? 'Restore' : 'Fullscreen'"
-          >
+          <button class="hideOnMobile" @click="isFullscreen = !isFullscreen" v-if="showFullscreenButton" :title="isFullscreen ? 'Restore' : 'Fullscreen'">
             <awesome-icon v-if="isFullscreen" icon="compress" />
             <awesome-icon v-else icon="expand" />
           </button>
-          <button
-            @click="cancel"
-            class="red"
-            v-if="showCloseButton"
-            title="Close"
-          >
+          <button @click="cancel" class="red" v-if="showCloseButton" title="Close">
             <awesome-icon icon="times" />
           </button>
         </div>
       </div>
-      <div
-        class="dialog-body"
-        :class="{
-          hideXScroll: disableXscroll == true,
-          hideYScroll: disableYscroll == true,
-        }"
-      >
+      <div class="dialog-body" :class="{ hideXScroll: disableXscroll == true, hideYScroll: disableYscroll == true, 'flat-dialog-header': flatDialogHeader == true }">
         <slot />
-        <div
-          class="dialog-body-content"
-          v-if="dialogContent"
-          v-html="dialogContent"
-        />
+        <div class="dialog-body-content" v-if="dialogContent" v-html="dialogContent" />
       </div>
       <div class="dialog-footer" v-if="showFooter">
         <div class="dialog-footer-left">
@@ -74,41 +41,15 @@
         </div>
         <div>
           <slot name="footer-right" />
-          <div
-            class="dialog-footer-controls"
-            v-if="
-              showFooterButtons &&
+          <div class="dialog-footer-controls" v-if="showFooterButtons &&
             (openButtons == null || openButtons.length > 0)
-            "
-          >
-            <button
-              v-for="(button, i) in dialogButtons"
-              :key="i"
-              @click="click('clicked', button.text || button)"
-              :class="button.class || ''"
-              :disabled="button.disabled"
-              :title="button.title || ''"
-              v-show="button.visible != false"
-            >
-              <awesome-icon
-                v-if="button.icon"
-                :icon="button.icon"
-                class="ma-right8"
-              />
+            ">
+            <button v-for="(  button, i  ) in   dialogButtons  " :key="i" @click="click('clicked', button.text || button)" :class="button.class || ''" :disabled="button.disabled" :title="button.title || ''" v-show="button.visible != false">
+              <awesome-icon v-if="button.icon" :icon="button.icon" class="ma-right8" />
               {{ button.text || button }}
             </button>
-            <button
-              ref="dialogButton"
-              @click="click('accept')"
-              v-if="showFooterButtons && !dialogButtons"
-              :disabled="!enableFooterButtons"
-              :class="buttonClass"
-            >
-              <awesome-icon
-                v-if="buttonIcon"
-                :icon="buttonIcon"
-                class="ma-right8"
-              />
+            <button ref="dialogButton" @click="click('accept')" v-if="showFooterButtons && !dialogButtons" :disabled="!enableFooterButtons" :class="buttonClass">
+              <awesome-icon v-if="buttonIcon" :icon="buttonIcon" class="ma-right8" />
               {{ buttonText }}
             </button>
           </div>
@@ -143,6 +84,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    flatDialogHeader: {
+      type: Boolean,
+      default: false
+    },
     showFooter: {
       type: Boolean,
       default: true,
@@ -301,6 +246,7 @@ export default {
   z-index: 1000;
   animation: fadeIn ease 0.20s;
 }
+
 .dialog-window {
   box-shadow: 0px 8px 32px var(--shadow);
   background-color: var(--white);
@@ -308,13 +254,16 @@ export default {
   max-height: 80%;
   display: flex;
   flex-direction: column;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  position: absolute;
 }
+
 .dialog-window.max-size {
   width: 90%;
   height: 90%;
 }
+
 .dialog-window.fullscreen {
   max-width: initial;
   max-height: initial;
@@ -329,10 +278,21 @@ export default {
   flex-shrink: 0;
   background-color: var(--background);
   box-shadow: 0px 1px 4px var(--shadow);
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
   z-index: 1;
 }
+
+.dialog-header.flat-dialog-header {
+  background: transparent;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  box-shadow: none;
+  z-index: 101;
+}
+
 .dialog-header h3 {
   flex-grow: 1;
   margin: 0;
@@ -344,6 +304,7 @@ export default {
   align-self: center;
   cursor: default;
 }
+
 .dialog-header input,
 .dialog-header select {
   padding: 0 4px;
@@ -352,6 +313,7 @@ export default {
   background-color: var(--white);
   align-self: stretch;
 }
+
 .dialog-header button,
 .dialog-header a {
   background-color: transparent;
@@ -365,85 +327,124 @@ export default {
 .dialog-header button:hover {
   background-color: var(--light-gray);
 }
+
 .dialog-header button.red:hover {
   background-color: var(--red50);
   color: var(--white);
 }
+
 .dialog-header button.red svg {
   color: var(--red);
 }
+
 .dialog-header button.red:hover svg {
   color: var(--white);
 }
+
 .dialog-header button.blue {
   background-color: var(--blue);
 }
+
 .dialog-header button.green:hover {
   background-color: var(--green);
   color: var(--green);
 }
+
 .dialog-header button.green svg {
   color: var(--green);
 }
+
 .dialog-header button.yellow {
   background-color: var(--yellow);
 }
+
 /* SUCCESS */
 .dialog-header button.success svg {
   color: var(--success);
 }
+
 .dialog-header button.success:hover {
   background-color: var(--success);
 }
+
 .dialog-header button.success:hover svg {
   color: var(--white);
 }
+
 .dialog-header button.primary,
 .dialog-header a.primary {
   background-color: var(--primary);
   color: var(--white);
 }
-.dialog-header button > span,
-.dialog-header a > span {
+
+.dialog-header button>span,
+.dialog-header a>span {
   margin-left: 12px;
 }
+
 .dialog-header svg {
   width: 16px !important;
   height: 16px;
 }
-.dialog-header > div,
-.dialog-footer > div {
+
+.dialog-header>div,
+.dialog-footer>div {
   display: flex;
   align-items: center;
 }
-.dialog-header > .dialog-header-center,
-.dialog-footer > .dialog-footer-center {
+
+.dialog-header>.dialog-header-center,
+.dialog-footer>.dialog-footer-center {
   flex-grow: 1;
   justify-content: center;
   margin: 0 12px;
 }
-.dialog-header > .dialog-header-right input,
-.dialog-header > .dialog-header-right select {
+
+.dialog-header>.dialog-header-right input,
+.dialog-header>.dialog-header-right select {
   border-left: 1px solid var(--light-border);
 }
 
+.dialog-header.flat-dialog-header>.dialog-header-right>button {
+  color: var(--white);
+}
+
+.dialog-header.flat-dialog-header>.dialog-header-right>button:hover {
+  color: var(--gray);
+}
+
 .dialog-body {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   flex-grow: 1;
 }
+
+
+.dialog-body.flat-dialog-header {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.dialog-window.fullscreen .dialog-body.flat-dialog-header {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
 .dialog-body.hideXScroll {
   overflow-x: hidden;
 }
+
 .dialog-body.hideYScroll {
   overflow-y: hidden;
 }
+
 .dialog-body-content {
   margin: 4px;
   display: flex;
   flex-direction: column;
 }
+
 .dialog-footer {
   border-top: 1px solid var(--light-border);
   display: flex;
@@ -451,27 +452,33 @@ export default {
   align-items: center;
   background-color: var(--background);
 }
+
 .dialog-footer button:disabled {
   opacity: 0.5;
 }
+
 .dialog-footer .dialog-message {
   flex-grow: 1;
   display: flex;
   align-items: center;
   margin-left: 4px;
 }
+
 .dialog-footer .dialog-message svg {
   margin-right: 4px;
 }
+
 .dialog-footer .dialog-footer-controls {
   padding: 4px;
   display: flex;
 }
+
 .dialog-footer .dialog-footer-controls button:not(:last-child) {
   margin-right: 4px;
 }
 
-@media (max-width: 480px), (max-height: 480px) {
+@media (max-width: 480px),
+(max-height: 480px) {
   .dialog-window {
     max-width: initial;
     max-height: initial;
@@ -480,14 +487,22 @@ export default {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+
   .dialog-window.max-size {
     width: 100%;
     height: 100%;
   }
+
   .dialog-header {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
+
+  .dialog-body.flat-dialog-header {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
   .dialog-window.playing {
     margin-bottom: 60px;
     height: calc(100% - 60px);

src/components/dialogs/AlbumViewer.vue

@@ -1,17 +1,46 @@
 <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" :flatDialogHeader="true">
     <div id="albumViewer" class="flex-row">
-      <div id="header" class="flex-column">
+      <div id="header" class="flex-column grow">
         <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" 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">
+        <div id="title" class="flex-column pa grow z1">
+          <img class="glow ma" :src="cover" />
+          <span id="stats" class="center">
+            {{ selectedAlbum.title }}
+            <br />
+            by
+            <b @click="gotoArtist" class="pointer">{{ selectedAlbum.artist_name }}</b>
+            <br />
+            <span v-if="album_year">
+              from year <b>{{ album_year }}</b> </span><br />
+            <b>{{ album_tracks.length }}</b> Tracks with a duration of
+            <b>{{ album_duration }}</b>
+          </span>
+          <div class="grow"> </div>
+          <div class="flex-row grow ma-top">
+            <button class="flat ma-right" title="Favourite" @click="toggleFavourite">
+              <awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
+              <awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
+            </button>
+            <button class="flat ma-right" title="Keep playing" v-if="selectedAlbum._id == selectedTrackContainer._id && isPlaying">
+              <awesome-icon icon="compact-disc" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" title="Keep playing" @click="playProgress" v-else-if="selectedAlbum.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" title="Play" @click="playAlbum" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" />
+            </button>
+            <button @click="gotoPrevAlbum" class="flat ma-left ma-right" :title="prevAlbum.name" :disabled="!prevAlbum._id">
+              <awesome-icon icon="angle-left" class="ma4 white-text" />
+            </button>
+            <button @click="gotoNextAlbum" class="flat" :title="nextAlbum.name" :disabled="!nextAlbum._id">
+              <awesome-icon icon="angle-right" class="ma4 white-text" />
+            </button>
+            <div class="grow"></div>
             <DropDown v-if="$store.getters['user/isAdministrator']">
               <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
+                <awesome-icon :icon="visibility_icon" class="white-text" />
               </button>
               <template v-slot:dropdown-content>
                 <div>
@@ -33,24 +62,9 @@
                 </div>
               </template>
             </DropDown>
-          <div class="grow flex-column">
-            <p class="ma4 center">
-              <span class="grow center">
-                by
-                <b @click="gotoArtist" class="pointer">{{
-                  selectedAlbum.artist_name
-                }}</b>
-                <br />
-                <span v-if="album_year">
-                  from year <b>{{ album_year }}</b> </span><br />
-                <b>{{ album_tracks.length }}</b> Tracks with a duration of
-                <b>{{ album_duration }}</b>
-              </span>
-            </p>
-          </div>
             <DropDown v-if="$store.getters['user/isAdministrator']">
               <button class="flat center">
-              <awesome-icon icon="ellipsis-v" />
+                <awesome-icon icon="ellipsis-v" class="white-text" />
               </button>
               <template v-slot:dropdown-content>
                 <div>
@@ -69,6 +83,7 @@
             </DropDown>
           </div>
         </div>
+      </div>
       <ul id="trackList" class="tracks">
         <li v-for="track in selectedAlbum.tracks" :key="track._id">
           <TrackItem :track="track" :showCover="false" />
@@ -100,7 +115,7 @@ export default {
         window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id;
       navigator.clipboard.writeText(url);
     },
-    dblclick() {
+    playAlbum() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.dispatch("tracks/playContainer", this.selectedAlbum);
@@ -231,7 +246,9 @@ export default {
       nextAlbum: ["albums/nextAlbum"],
       selectedAlbum: ["albums/selectedAlbum"],
       selectedTrack: ["tracks/selectedTrack"],
+      selectedTrackContainer: ["tracks/selectedTrackContainer"],
       favourites: ["user/favourites"],
+      isPlaying: ["player/isPlaying"],
     }),
     album_title() {
       return this.selectedAlbum.title;
@@ -332,11 +349,13 @@ export default {
 
 <style scoped>
 #albumViewer {
-  height: 366px;
+  height: 400px;
   width: 640px;
 }
 
 #header {
+  width: 304px;
+  height: 400px;
   position: relative;
   background-color: black;
 }
@@ -348,13 +367,8 @@ export default {
 
 #stats {
   z-index: 2;
-  align-items: center;
   color: var(--white);
   text-shadow: 0 1px 2px black;
-  line-height: 1.4;
-  background-color: #ffffff40;
-  border-top: 1px solid #ffffff20;
-  border-bottom: 1px solid #00000020;
 }
 
 .dropdown-activator button {

src/components/dialogs/ArtistViewer.vue

@@ -1,11 +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" :flatDialogHeader="true" :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="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
-        <h1 @dblclick="dblclick">
+        <div id="title" class="flex-column ma-left ma-right pa-bottom">
+          <h1>
             {{ selectedArtist.name }}
           </h1>
           <span id="stats" class="ma-bottom">
@@ -13,23 +12,30 @@
             <b>{{ artist_albums.length }}</b> Albums with a duration of
             <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)" />
-        </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">
-              <awesome-icon icon="angle-left" class="ma4" />
+          <div class="flex-row ma-top ma-bottom">
+            <button class="flat ma-right" @click="toggleFavourite" title="Favourite">
+              <awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
+              <awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
             </button>
-            <button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id">
-              <awesome-icon icon="angle-right" class="ma4" />
+            <button class="flat ma-right" title="Keep playing" v-if="selectedArtist._id == selectedTrackContainer._id && isPlaying">
+              <awesome-icon icon="compact-disc" size="2x" class="primary-text" />
             </button>
-          </div>
-          <div class="flex-row grow right center">
-            <DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile">
-              <button class="flat pa8-left pa8-right">
-                <awesome-icon icon="ellipsis-v" />
+            <button class="flat ma-right" @click="playProgress" title="Keep playing" v-else-if="selectedArtist.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" @click="playArtist" title="Play" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" />
+            </button>
+            <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
+              <awesome-icon icon="angle-left" class="ma4 white-text" />
+            </button>
+            <button @click="gotoNextArtist" class="flat" :title="nextArtist.name" :disabled="!nextArtist._id">
+              <awesome-icon icon="angle-right" class="ma4 white-text" />
+            </button>
+
+            <DropDown v-if="$store.getters['user/isAdministrator']" class="ma-left hideOnMobile">
+              <button class="flat pa-left pa-right">
+                <awesome-icon icon="ellipsis-v" class="white-text" />
               </button>
               <template v-slot:dropdown-content>
                 <div>
@@ -48,6 +54,9 @@
             </DropDown>
           </div>
         </div>
+        <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)" />
+        </div>
       </div>
       <div class="flex-row overflow-y">
         <div id="albumList" class="flex-column hideOnMobilePortrait">
@@ -77,7 +86,7 @@ export default {
     }
   },
   methods: {
-    dblclick() {
+    playArtist() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.dispatch("tracks/playContainer", this.selectedArtist);
@@ -110,8 +119,9 @@ export default {
     },
     closed() {
       if (
+        window.history.state.back && (
           window.history.state.back.indexOf("?") == -1 ||
-        window.history.state.back.startsWith("/search")
+          window.history.state.back.startsWith("/search"))
       ) {
         this.$router.back();
       } else {
@@ -169,6 +179,7 @@ export default {
       nextArtist: ["artists/nextArtist"],
       selectedArtist: ["artists/selectedArtist"],
       selectedTrack: ["tracks/selectedTrack"],
+      selectedTrackContainer: ["tracks/selectedTrackContainer"],
       favourites: ["user/favourites"],
       isPlaying: ["player/isPlaying"]
     }),
@@ -262,7 +273,6 @@ export default {
 h1,
 #stats {
   z-index: 1;
-  text-align: center;
   width: 100%;
   color: var(--white);
   text-shadow: 0 1px 2px black;
@@ -280,6 +290,10 @@ h1,
   max-width: 100%;
 }
 
+#header #title {
+  z-index: 100;
+}
+
 #albumList {
   z-index: 1;
   overflow-y: auto;

src/components/dialogs/BoxViewer.vue

@@ -1,38 +1,42 @@
 <template>
-  <DialogBase
-    ref="dialogWindow"
-    :title="selectedBox.title"
-    @canceled="closed"
-    :showFooter="false"
-    :closeOnEscape="selectedVideo._id == null"
-    :disableXscroll="true"
-    :disableYscroll="true"
-  >
+  <DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true" :flatDialogHeader="true">
     <div id="boxViewer" class="flex-row">
-      <div id="header" class="flex-column">
+      <div id="header" class="flex-column grow">
         <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 z2"
-          :class="{ active: isFavourite }"
-          @click="toggleFavourite"
-        />
-        <div id="stats" class="flex-row z1">
+        <div id="title" class="grow z1 pa flex-column">
+          <img class="glow ma" :src="cover" />
+          <span id="stats" class="center">
+            <b>{{ selectedBox.title }}</b>
+            <br />
+            <b>{{ box_videos.length }}</b> Videos
+          </span>
+
+          <div class="grow"> </div>
+          <div class="flex-row ma-top grow">
+            <button class="flat ma-right" title="Favourite" @click="toggleFavourite">
+              <awesome-icon :icon="['fas', 'star']" size="2x" class="white-text favourite active" v-if="isFavourite" />
+              <awesome-icon :icon="['far', 'star']" size="2x" class="white-text favourite" v-else />
+            </button>
+            <button class="flat ma-right" title="Keep playing" @click="playProgress" v-if="selectedBox.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text" />
+            </button>
+            <button class="flat ma-right" title="Play" @dblclick="dblclick" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" />
+            </button>
+            <button @click="gotoPrevBox" class="flat ma-left ma-right" :title="prevBox.name" :disabled="!prevBox._id">
+              <awesome-icon icon="angle-left" class="ma4 white-text" />
+            </button>
+            <button @click="gotoNextBox" class="flat" :title="nextBox.name" :disabled="!nextBox._id">
+              <awesome-icon icon="angle-right" class="ma4 white-text" />
+            </button>
+            <div class="grow"></div>
             <DropDown v-if="$store.getters['user/isAdministrator']">
               <button class="flat center" :title="visibility_text">
-              <awesome-icon :icon="visibility_icon" />
+                <awesome-icon :icon="visibility_icon" class="white-text" />
               </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)
                     }}
@@ -41,10 +45,7 @@
                   <button v-if="!selectedBox.share._id" @click="shareEnable">
                     <awesome-icon icon="share" />Share this box
                   </button>
-                <button
-                  v-if="selectedBox.share._id"
-                  @click="addShareUrlToClipboard"
-                >
+                  <button v-if="selectedBox.share._id" @click="addShareUrlToClipboard">
                     <awesome-icon icon="clipboard" />Copy url into clipboard
                   </button>
                   <button v-if="selectedBox.share._id" @click="shareDisable">
@@ -53,18 +54,9 @@
                 </div>
               </template>
             </DropDown>
-          <div class="grow flex-column">
-            <p class="ma4 center">
-              <span class="">
-                <b>{{ selectedBox.title }}</b>
-                <br />
-                <b>{{ box_videos.length }}</b> Videos
-              </span>
-            </p>
-          </div>
             <DropDown v-if="$store.getters['user/isAdministrator']">
               <button class="flat center">
-              <awesome-icon icon="ellipsis-v" />
+                <awesome-icon icon="ellipsis-v" class="white-text" />
               </button>
               <template v-slot:dropdown-content>
                 <div>
@@ -83,7 +75,7 @@
             </DropDown>
           </div>
         </div>
-
+      </div>
       <ul id="videoList" class="videos">
         <li v-for="item in selectedBox.videos" :key="item._id">
           <VideoItem :video="item" />
@@ -121,6 +113,14 @@ export default {
         }
       }
     },
+    playProgress() {
+      let video = this.selectedBox.videos.find(
+        (f) => f._id == this.selectedBox.progress.id
+      );
+      if (video) {
+        this.$store.dispatch("videos/play", video);
+      }
+    },
     gotoNextBox() {
       this.$store.dispatch("boxes/gotoNextBox");
     },
@@ -192,6 +192,15 @@ export default {
     shareDisable() {
       this.$store.dispatch("boxes/shareDisable", this.selectedBox);
     },
+    loadUserProgress() {
+      if (this.selectedVideo.parent._id != this.selectedBox._id) {
+        this.$store
+          .dispatch("user/getProgress", this.selectedBox)
+          .then(() => {
+            this.gotoVideo();
+          });
+      }
+    }
   },
   computed: {
     ...mapGetters({
@@ -249,7 +258,7 @@ export default {
           this.$refs.dialogWindow.open();
           window.addEventListener("keydown", this.keydownListener);
         }
-        this.gotoVideo();
+        this.loadUserProgress();
       } else {
         if (this.$refs.dialogWindow.visible) {
           this.$refs.dialogWindow.close();
@@ -267,39 +276,36 @@ export default {
 
 <style scoped>
 #boxViewer {
-  height: 462px;
+  height: 486px;
 }
+
 #header {
   position: relative;
   background-color: black;
 }
+
 #header img {
   align-self: center;
   width: 256px;
 }
+
 #stats {
   z-index: 2;
-  align-items: center;
   color: var(--white);
   text-shadow: 0 1px 2px black;
-  line-height: 1.4;
-  background-color: #ffffff40;
-  border-top: 1px solid #ffffff20;
-  border-bottom: 1px solid #00000020;
 }
+
 .dropdown-activator button {
   width: 32px;
   height: 32px;
 }
-#stats p {
-  max-width: 192px;
-  align-self: center;
-}
+
 #videoList {
   background-color: var(--white);
   z-index: 1;
   overflow: overlay;
 }
+
 .video {
   width: 220px;
 }
@@ -308,26 +314,32 @@ export default {
   #boxViewer {
     flex-direction: column;
   }
+
   #stats p {
     max-width: initial;
   }
 }
-@media (max-width: 480px), (max-height: 480px) {
+
+@media (max-width: 480px),
+(max-height: 480px) {
   #boxViewer {
     width: 100%;
     height: 100%;
   }
+
   #header img {
     width: 192px;
   }
+
   #videoList {
     height: initial;
     flex-grow: 1;
   }
+
   .video {
     width: initial;
   }
 }
-@media (max-height: 480px) {
-}
+
+@media (max-height: 480px) {}
 </style>

src/components/dialogs/VideoScreen.vue

@@ -1,37 +1,14 @@
 <template>
-  <DialogBase
-    ref="dialogWindow"
-    @closing="closing"
-    :showFooter="false"
-    :showFullscreenButton="true"
-  >
+  <DialogBase ref="dialogWindow" @closing="closing" :showFooter="false" :showFullscreenButton="true">
     <template v-slot:header-right>
-      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1"
-        >Language:</span
-      >
-      <select
-        v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1"
-        @change="langChanged"
-        v-model="selectedLang"
-      >
-        <option
-          v-for="(lang, i) in selectedVideo.tracks"
-          :key="i"
-          :value="lang"
-          :title="lang.title"
-        >
+      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1">Language:</span>
+      <select v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1" @change="langChanged" v-model="selectedLang">
+        <option v-for="(lang, i) in selectedVideo.tracks" :key="i" :value="lang" :title="lang.title">
           {{ lang.lang.toUpperCase() }}
         </option>
       </select>
     </template>
-    <video
-      @ended="nextVideo"
-      @timeupdate="timeUpdate"
-      controls
-      style="height: 100%; width: 100%; background: black"
-      ref="videoControl"
-      src
-    ></video>
+    <video @ended="nextVideo" @timeupdate="timeUpdate" @playing="playing" @pause="pause" controls style="height: 100%; width: 100%; background: black" ref="videoControl" src></video>
   </DialogBase>
 </template>
 <script>
@@ -42,6 +19,7 @@ export default {
       languages: [],
       selectedLang: {},
       preConvert: false,
+      intervalState: 0,
     };
   },
   methods: {
@@ -50,6 +28,30 @@ export default {
         this.$store.getters["videos/getStreamUrl"] + this.langIndex;
       this.video.play();
     },
+    pause() {
+      window.clearInterval(this.intervalState);
+    },
+    playing() {
+      window.clearInterval(this.intervalState);
+      this.pushState();
+
+      this.intervalState = setInterval(() => {
+        this.pushState();
+      }, 10000);
+    },
+    pushState() {
+      if (!this.currentUser._id || !this.video || !this.selectedVideo._id) {
+        return;
+      }
+      let item = {
+        id: this.selectedVideo._id,
+        parentId: this.selectedVideo.parent._id,
+        type: "video",
+        progress: Math.round(this.video.currentTime)
+      }
+      this.$store.dispatch("user/saveProgress", item);
+    },
+
     playVideo(video) {
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.commit("tracks/resetSelectedTrack");
@@ -81,6 +83,13 @@ export default {
 
       this.video.src =
         this.$store.getters["videos/getStreamUrl"] + this.langIndex;
+      if (this.selectedVideo.parent.progress) {
+        if (this.selectedVideo.parent.progress.id == this.selectedVideo._id) {
+          this.skipToSecond(this.selectedVideo.parent.progress.progress);
+        }
+        this.selectedVideo.parent.progress = undefined;
+      }
+
       this.video.play();
 
       this.pushHistoryItem();
@@ -120,7 +129,22 @@ export default {
         });
       }
     },
+    reset() {
+      if (this.$refs.dialogWindow.visible) {
+        this.$refs.dialogWindow.close();
+      }
+    },
+    skipToSecond(second) {
+      let was_paused = this.video.paused;
+      this.video.pause();
+      this.video.currentTime = second;
+      if (!was_paused) {
+        this.video.play();
+      }
+    },
     closing() {
+      window.clearInterval(this.intervalState);
+      this.pushState();
       this.video = undefined;
       this.$store.dispatch("videos/resetSelectedVideo");
     },
@@ -172,9 +196,7 @@ export default {
       if (newVal._id) {
         this.playVideo(newVal);
       } else {
-        if (this.$refs.dialogWindow.visible) {
-          this.$refs.dialogWindow.close();
-        }
+        this.reset();
       }
     },
   },

src/main.js

@@ -4,6 +4,7 @@ import App from './App.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
+import { far } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 import DialogBase from "./components/base-components/Dialog";
@@ -15,6 +16,7 @@ import ArtistItem from "./components/Artist"
 import BoxItem from "./components/Box"
 
 library.add(fas)
+library.add(far)
 
 import store from "./store/index";
 import router from './router'

src/store/modules/albums/actions.js

@@ -32,12 +32,15 @@ export default {
 
   },
   loadAlbums(context, force) {
+    return new Promise((resolve) => {
       if ((!context.state.eos || force) && !context.state.loading) {
         context.state.loading = true;
         axios.get(context.rootGetters.server + "/api/albums/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
           context.commit("setAlbums", res.data);
+          resolve(res.data);
         });
       }
+    });
   },
   loadFavourites(context) {
     axios.get(context.rootGetters.server + "/api/albums/favourites", context.rootGetters.headers).then(res => {
@@ -165,7 +168,7 @@ export default {
       axios.post(context.rootGetters.server + "/api/albums/" + album._id + "/share", {}, context.rootGetters.headers).then(res => {
         album.share = res.data;
         resolve();
-        context.dispatch("addPoUp", { title: "Share successful", message: "Url was copied into your clipboard", type: "success", icon:"share" }, { root: true });
+        context.dispatch("addPoUp", { title: "Share successful", message: "Url was copied into your clipboard", type: "success", icon: "share" }, { root: true });
       });
     });
   },
@@ -176,5 +179,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);
+    });
   }
 }

src/store/modules/albums/getters.js

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

src/store/modules/albums/mutations.js

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

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

src/store/modules/artists/actions.js

@@ -13,12 +13,15 @@ export default {
     })
   },
   loadArtists(context, force) {
+    return new Promise((resolve) => {
       if ((!context.state.eos || force) && !context.state.loading) {
         context.state.loading = true;
         axios.get(context.rootGetters.server + "/api/artists/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
           context.commit("setArtists", res.data);
+          resolve(res.data);
         });
       }
+    });
   },
   loadArtist(context, id) {
     context.state.loading = true;

src/store/modules/boxes/actions.js

@@ -13,12 +13,15 @@ export default {
     })
   },
   loadBoxes(context, force) {
+    return new Promise((resolve) => {
       if ((!context.state.eos || force) && !context.state.loading) {
         context.state.loading = true;
         axios.get(context.rootGetters.server + "/api/boxes/page/" + context.state.page++, context.rootGetters.headers).then((res) => {
           context.commit("setBoxes", res.data);
+          resolve(res.data);
         });
       }
+    });
   },
   loadFavourites(context) {
     axios.get(context.rootGetters.server + "/api/boxes/favourites", context.rootGetters.headers).then(res => {

src/store/modules/radios/state.js

@@ -1,4 +1,4 @@
 export default {
     collection: [],
-    selectedRadio: {},
+    selectedRadio: { covers: {} },
 }

src/store/modules/videos/actions.js

@@ -16,6 +16,8 @@ export default {
     let currentIndex = video.parent.videos.indexOf(video);
     if (currentIndex < video.parent.videos.length - 1) {
       context.dispatch("play", video.parent.videos[currentIndex + 1]);
+    } else {
+      this.dispatch("user/resetProgress", video.parent._id);
     }
   },
   convertNextTo(context, payload) {

src/store/modules/videos/mutations.js

@@ -6,7 +6,7 @@ export default {
         if (!state.selectedVideo._id) {
             return;
         }
-        state.selectedVideo = { tracks: [] };
+        state.selectedVideo = { tracks: [], parent: { title: "", covers: {} } };
     },
     setMostViewed(state, tracks) {
         state.mostViewed = tracks;

src/store/modules/videos/state.js

@@ -1,4 +1,4 @@
 export default {
-    selectedVideo: { tracks: [] },
+    selectedVideo: { tracks: [], parent: { title: "", covers: {} } },
     mostViewed: []
 }

src/views/Home.vue

@@ -2,30 +2,21 @@
   <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 40 600 100">
+            <g>
+              <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 / 6) * 64" :y="i % 6 * 64" width="64" height="64" v-for="(item, i) in randomCovers" :key="item" />
+            </g>
+          </svg>
         </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"
-      />
+        <div class="flex-column" style="z-index: 1;">
+          <h1>WebPlay</h1>
+        </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" />
       <template v-else>
         <h2 class="ma-left ma-top pa-top ma4-bottom" v-if="history.length > 0">
           Last played
@@ -33,90 +24,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>
@@ -137,13 +81,13 @@ export default {
       messageCommands: [
         {
           title: "Scan for Music files",
-          subtitle: "Scann your server for music files…",
+          subtitle: "Scan your server for music files…",
           icon: "music",
           command: "scanMusic",
         },
         {
           title: "Scan for Video files",
-          subtitle: "Scann your server for video files…",
+          subtitle: "Scan your server for video files…",
           icon: "video",
           command: "scanVideos",
         },
@@ -160,6 +104,14 @@ 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", 60);
+        this.$store.dispatch("albums/loadAlbums", true).then(() => {
+          this.$store.dispatch("artists/loadArtists", true).then(() => {
+            this.$store.dispatch("boxes/loadBoxes", true);
+          });
+        });
+      }
     },
     loadNextPage() {
       this.scrollPosition = this.$refs.welcome.scrollTop;
@@ -194,6 +146,7 @@ export default {
       serverInfo: "serverInfo",
       mostListened: "tracks/mostListened",
       mostViewed: "videos/mostViewed",
+      randomCovers: ["albums/randomCovers"],
     }),
     historyToggleText() {
       return this.historyAll ? "less..." : "more...";
@@ -221,4 +174,17 @@ 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>