wip

Reviewed-on: #25

public/config.json

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

public/static/app.css

@@ -95,6 +95,14 @@ td.fillCell>* {
   color: var(--yellow);
 }
 
+.keepPlaying {
+  z-index: 1;
+  position: absolute;
+  cursor: pointer;
+  right: 0;
+}
+
+
 /*
   DIALOGS
 */

src/components/Player.vue

@@ -1,48 +1,22 @@
 <template>
-  <div
+  <div id="player" class="flex-column" v-show="selectedTrack._id || selectedRadio._id">
-    id="player"
+    <input type="range" id="slider" min="0" max="100" step="0.1" v-model="selectedTrack.percent" @change="slideChanged"/>
-    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
+        <img class="cover pointer" :src="cover" :title="selectedTrack.parent.title" @click="gotoContainer" />
-          class="cover pointer"
-          :src="cover"
-          :title="selectedTrack.parent.title"
-          @click="gotoContainer"
-        />
         <div v-if="selectedTrack._id" class="flex-column">
           <b>{{ selectedTrack.title }}</b>
           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
+        <button @click="switchShuffle" title="Shuffle mode" v-if="selectedTrack._id">
-          @click="switchShuffle"
+          <img src="static/icons/media-shuffle-dark.svg" v-show="$store.getters['player/shuffle']" class="small" />
-          title="Shuffle mode"
+          <img src="static/icons/media-consecutive-dark.svg" v-show="$store.getters['player/shuffle'] == false" class="small" />
-          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 +28,17 @@
         <button @click="nextTrack" title="Forward" v-if="selectedTrack._id">
           <awesome-icon icon="forward" />
         </button>
-        <button
+        <button @click="switchRepeatType" title="Repeat mode" v-if="selectedTrack._id">
-          @click="switchRepeatType"
+          <img src="static/icons/media-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'all'" />
-          title="Repeat mode"
+          <img src="static/icons/media-repeat-song-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'one'" />
-          v-if="selectedTrack._id"
+          <img src="static/icons/media-no-repeat-dark.svg" class="small" v-show="$store.getters['player/repeatType'] == 'none'" />
-        >
-          <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
+      <div class="flex-row ma-right hideOnMobilePortrait grow right">
-        class="flex-row ma-right hideOnMobilePortrait grow right"
+        <span v-show="selectedTrack.title">{{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}</span>
-        v-show="selectedTrack.title"
-      >
-        {{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}
       </div>
     </div>
-    <audio
+    <audio preload="auto" ref="audioControl" type="audio/mpeg" @ended="nextTrack" @canplay="play" @playing="playing" @durationchange="durationChanged" @timeupdate="timeUpdate" src></audio>
-      preload="auto"
-      ref="audioControl"
-      type="audio/mpeg"
-      @ended="nextTrack"
-      @canplay="play"
-      @playing="playing"
-      @durationchange="durationChanged"
-      @timeupdate="timeUpdate"
-      src
-    ></audio>
   </div>
 </template>
 
@@ -105,7 +50,8 @@ export default {
       audio: {},
       duration: 0,
       progress: 0,
-      interval: 0,
+      intervalProgress: 0,
+      intervalState: 0,
       preConvert: false,
     };
   },
@@ -121,21 +67,31 @@ export default {
     play() {
       this.audio.play();
     },
-
     pause() {
-      if (!this.audio.paused) {
       this.audio.pause();
-      }
+
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalState);
+
+      this.pushState();
     },
     durationChanged() {
       this.duration = this.audio.duration;
     },
     playing() {
-      window.clearInterval(this.interval);
+      window.clearInterval(this.intervalProgress);
-      this.interval = setInterval(() => {
+      window.clearInterval(this.intervalState);
+
+      this.intervalProgress = setInterval(() => {
         this.progress = this.audio.currentTime;
         this.selectedTrack.percent = (100 / this.duration) * this.progress;
       }, 500);
+
+      if (this.currentUser._id) {
+        this.intervalState = setInterval(() => {
+          this.pushState();
+        }, 10000);
+      }
     },
     audioReset() {
       this.audio.pause();
@@ -156,6 +112,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();
@@ -163,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",
       };
@@ -184,6 +148,12 @@ export default {
 
       this.pushHistoryItem();
 
+      if (this.currentTrackParent.progress) {
+        if (this.currentTrackParent.progress.id == this.selectedTrack._id) {
+          this.skipToSecond(this.currentTrackParent.progress.progress);
+        }
+        this.currentTrackParent.progress = undefined;
+      }
       // Try to fix SAFARI
       this.audio.play();
     },
@@ -232,13 +202,20 @@ export default {
         return;
       }
       if (!this.audio.paused) {
-        this.audio.pause();
+        this.pause();
       } else if (this.audio.src != "") {
         this.audio.play();
       }
     },
-    reset() {
+    reset(item) {
-      window.clearInterval(this.interval);
+      let parentId = item.parent._id;
+      if (item.parent.parent && item.parent.parent.tracks) {
+        parentId = item.parent.parent._id;
+      }
+      this.$store.dispatch("user/resetProgress", parentId);
+
+      window.clearInterval(this.intervalProgress);
+      window.clearInterval(this.intervalState);
       if (!this.audio.paused) {
         this.audio.pause();
       }
@@ -299,6 +276,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.currentTrackParent._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) {
@@ -324,8 +314,8 @@ export default {
 
       if (this.selectedRadio) {
         let res = "/static/icons/dummy/radio.svg";
-        if (this.selectedRadio.cover64) {
+        if (this.selectedRadio.covers.cover64) {
-          res = this.selectedRadio.cover64;
+          res = this.selectedRadio.covers.cover64;
         }
         return res;
       }
@@ -390,11 +380,11 @@ export default {
         this.reset();
       }
     },
-    selectedTrack(newVal) {
+    selectedTrack(newVal, oldVal) {
       if (newVal._id) {
         this.playTrack(newVal);
       } else {
-        this.reset();
+        this.reset(oldVal);
       }
     },
   },
@@ -409,17 +399,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 {
   align-items: center;
 }
+
 #playerControls button {
   display: flex;
   padding: 4px 12px;

src/components/Radio.vue

@@ -33,8 +33,8 @@ export default {
   computed: {
     cover() {
       let res = "/static/icons/dummy/radio.svg";
-      if (this.item && this.item.cover128) {
+      if (this.item && this.item.covers.cover128) {
-        res = this.item.cover128;
+        res = this.item.covers.cover128;
       }
       return res;
     },

src/components/dialogs/AlbumViewer.vue

@@ -1,25 +1,13 @@
 <template>
-  <DialogBase
+  <DialogBase ref="dialogWindow" :title="album_title" @canceled="closed" :showFooter="false" :disableXscroll="true" :disableYscroll="true">
-    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
+        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" title="Favourite" />
-          icon="star"
+        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedAlbum.progress" title="Keep playing" />
-          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 +15,7 @@
             </button>
             <template v-slot:dropdown-content>
               <div>
-                <button
+                <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
-                  v-for="(item, i) in $store.state.system.lists.visibility"
-                  :key="i"
-                  @click="setVisibility(item)"
-                >
                   <awesome-icon :icon="getVisibilityIcon(item)" />{{
                     getVisibilityText(item)
                   }}
@@ -40,10 +24,7 @@
                 <button v-if="!selectedAlbum.share._id" @click="shareEnable">
                   <awesome-icon icon="share" />Share this album
                 </button>
-                <button
+                <button v-if="selectedAlbum.share._id" @click="addShareUrlToClipboard">
-                  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 +42,7 @@
                 }}</b>
                 <br />
                 <span v-if="album_year">
-                  from year <b>{{ album_year }}</b> </span
+                  from year <b>{{ album_year }}</b> </span><br />
-                ><br />
                 <b>{{ album_tracks.length }}</b> Tracks with a duration of
                 <b>{{ album_duration }}</b>
               </span>
@@ -89,7 +69,6 @@
           </DropDown>
         </div>
       </div>
-
       <ul id="trackList" class="tracks">
         <li v-for="track in selectedAlbum.tracks" :key="track._id">
           <TrackItem :track="track" :showCover="false" />
@@ -156,6 +135,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 &&
@@ -228,6 +215,15 @@ export default {
     shareDisable() {
       this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
     },
+    loadUserProgress() {
+      if (this.selectedTrack.parent._id != this.selectedAlbum._id) {
+        this.$store
+          .dispatch("user/getProgress", this.selectedAlbum)
+          .then(() => {
+            this.gotoTrack();
+          });
+      }
+    }
   },
   computed: {
     ...mapGetters({
@@ -318,7 +314,7 @@ export default {
           this.$refs.dialogWindow.open();
           window.addEventListener("keydown", this.keydownListener);
         }
-        this.gotoTrack();
+        this.loadUserProgress();
       } else {
         if (this.$refs.dialogWindow.visible) {
           this.$refs.dialogWindow.close();
@@ -339,14 +335,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 +356,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 +371,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;

src/components/dialogs/ArtistViewer.vue

@@ -1,24 +1,10 @@
 <template>
-  <DialogBase
+  <DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
-    ref="dialogWindow"
-    id="dialogWindow"
-    :title="selectedArtist.name"
-    @canceled="closed"
-    :showFooter="false"
-    :showFullscreenButton="true"
-    :disableXscroll="true"
-    :disableYscroll="true"
-  >
     <div id="artistViewer">
       <div id="header" class="flex-column">
         <div id="background" :style="coverBackground" />
-        <awesome-icon
+        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
-          icon="star"
+        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
-          size="2x"
-          class="favourite ma4"
-          :class="{ active: isFavourite }"
-          @click="toggleFavourite"
-        />
         <h1 @dblclick="dblclick">
           {{ selectedArtist.name }}
         </h1>
@@ -28,41 +14,20 @@
           <b>{{ artist_duration }}</b>
         </span>
         <div id="albumList" class="flex-row showOnMobilePortrait">
-          <AlbumItem
+          <AlbumItem class="ma" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
-            class="ma"
-            :class="{ playing: playingAlbumId == album._id }"
-            v-for="album in selectedArtist.albums"
-            :key="album._id"
-            :item="album"
-            @click="scrollToAlbum(album)"
-            @dblclick="playAlbum(album)"
-          />
         </div>
         <div id="navigation" class="flex-row center ma-top">
           <div class="flex-row grow"></div>
           <div class="flex-row">
-            <button
+            <button @click="gotoPrevArtist" class="primary ma4" :title="prevArtist.name" :disabled="!prevArtist._id">
-              @click="gotoPrevArtist"
-              class="primary ma4"
-              :title="prevArtist.name"
-              :disabled="!prevArtist._id"
-            >
               <awesome-icon icon="angle-left" class="ma4" />
             </button>
-            <button
+            <button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id">
-              @click="gotoNextArtist"
-              class="primary ma4"
-              :title="nextArtist.name"
-              :disabled="!nextArtist._id"
-            >
               <awesome-icon icon="angle-right" class="ma4" />
             </button>
           </div>
           <div class="flex-row grow right center">
-            <DropDown
+            <DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile">
-              v-if="$store.getters['user/isAdministrator']"
-              class="hideOnMobile"
-            >
               <button class="flat pa8-left pa8-right">
                 <awesome-icon icon="ellipsis-v" />
               </button>
@@ -86,23 +51,9 @@
       </div>
       <div class="flex-row overflow-y">
         <div id="albumList" class="flex-column hideOnMobilePortrait">
-          <AlbumItem
+          <AlbumItem class="ma-top ma-left ma-right" :class="{ playing: playingAlbumId == album._id }" v-for="album in selectedArtist.albums" :key="album._id" :item="album" :id="album._id" :ref="album._id" @click="scrollToAlbum(album)" @dblclick="playAlbum(album)" />
-            class="ma-top ma-left ma-right"
-            :class="{ playing: playingAlbumId == album._id }"
-            v-for="album in selectedArtist.albums"
-            :key="album._id"
-            :item="album"
-            :id="album._id"
-            :ref="album._id"
-            @click="scrollToAlbum(album)"
-            @dblclick="playAlbum(album)"
-          />
         </div>
-        <ul
+        <ul id="trackList" class="tracks" :class="{ playing: selectedTrack._id != null }">
-          id="trackList"
-          class="tracks"
-          :class="{ playing: selectedTrack._id != null }"
-        >
           <li v-for="track in selectedArtist.tracks" :key="track._id">
             <TrackItem :track="track" :ref="track._id" />
           </li>
@@ -143,6 +94,14 @@ export default {
         }
       }
     },
+    playProgress() {
+      let track = this.selectedArtist.tracks.find(
+        (f) => f._id == this.selectedArtist.progress.id
+      );
+      if (track) {
+        this.$store.dispatch("tracks/play", track);
+      }
+    },
     gotoNextArtist() {
       this.$store.dispatch("artists/gotoNextArtist");
     },
@@ -194,6 +153,15 @@ export default {
     uploadNewCover() {
       this.$store.dispatch("artists/uploadNewCover", this.selectedArtist);
     },
+    loadUserProgress() {
+      if (!this.isPlaying || !this.selectedTrack.parent.parent || this.selectedTrack.parent.parent._id != this.selectedArtist._id) {
+        this.$store.dispatch("user/getProgress", this.selectedArtist).then(() => {
+          this.gotoTrack();
+        });
+      } else {
+        this.gotoTrack();
+      }
+    }
   },
   computed: {
     ...mapGetters({
@@ -202,6 +170,7 @@ export default {
       selectedArtist: ["artists/selectedArtist"],
       selectedTrack: ["tracks/selectedTrack"],
       favourites: ["user/favourites"],
+      isPlaying: ["player/isPlaying"]
     }),
     cover() {
       let covers = this.selectedArtist.covers;
@@ -266,7 +235,7 @@ export default {
           this.$refs.dialogWindow.open();
           window.addEventListener("keydown", this.keydownListener);
         }
-        this.gotoTrack();
+        this.loadUserProgress();
       } else {
         if (this.$refs.dialogWindow.visible) {
           this.$refs.dialogWindow.close();
@@ -289,6 +258,7 @@ export default {
   flex-direction: column;
   overflow: hidden;
 }
+
 h1,
 #stats {
   z-index: 1;
@@ -297,33 +267,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 +315,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 +333,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>

src/components/dialogs/BoxViewer.vue

@@ -1,26 +1,14 @@
 <template>
-  <DialogBase
+  <DialogBase ref="dialogWindow" :title="selectedBox.title" @canceled="closed" :showFooter="false" :closeOnEscape="selectedVideo._id == null" :disableXscroll="true" :disableYscroll="true">
-    ref="dialogWindow"
-    :title="selectedBox.title"
-    @canceled="closed"
-    :showFooter="false"
-    :closeOnEscape="selectedVideo._id == null"
-    :disableXscroll="true"
-    :disableYscroll="true"
-  >
     <div id="boxViewer" 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
+        <awesome-icon icon="star" size="2x" class="favourite ma4 z2" :class="{ active: isFavourite }" @click="toggleFavourite" />
-          icon="star"
+        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedBox.progress" title="Keep playing" />
-          size="2x"
+
-          class="favourite ma4 z2"
-          :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">
@@ -28,11 +16,7 @@
             </button>
             <template v-slot:dropdown-content>
               <div>
-                <button
+                <button v-for="(item, i) in $store.state.system.lists.visibility" :key="i" @click="setVisibility(item)">
-                  v-for="(item, i) in $store.state.system.lists.visibility"
-                  :key="i"
-                  @click="setVisibility(item)"
-                >
                   <awesome-icon :icon="getVisibilityIcon(item)" />{{
                     getVisibilityText(item)
                   }}
@@ -41,10 +25,7 @@
                 <button v-if="!selectedBox.share._id" @click="shareEnable">
                   <awesome-icon icon="share" />Share this box
                 </button>
-                <button
+                <button v-if="selectedBox.share._id" @click="addShareUrlToClipboard">
-                  v-if="selectedBox.share._id"
-                  @click="addShareUrlToClipboard"
-                >
                   <awesome-icon icon="clipboard" />Copy url into clipboard
                 </button>
                 <button v-if="selectedBox.share._id" @click="shareDisable">
@@ -121,6 +102,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 +181,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 +247,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();
@@ -269,14 +267,17 @@ export default {
 #boxViewer {
   height: 462px;
 }
+
 #header {
   position: relative;
   background-color: black;
 }
+
 #header img {
   align-self: center;
   width: 256px;
 }
+
 #stats {
   z-index: 2;
   align-items: center;
@@ -287,19 +288,23 @@ export default {
   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 +313,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/Radios.vue

@@ -118,8 +118,8 @@ export default {
     },
     cover(radio) {
       let res = "/static/icons/dummy/radio.svg";
-      if (radio.cover32) {
+      if (radio.covers.cover32) {
-        res = radio.cover32;
+        res = radio.covers.cover32;
       }
       return res;
     },

src/components/dialogs/VideoScreen.vue

@@ -1,37 +1,14 @@
 <template>
-  <DialogBase
+  <DialogBase ref="dialogWindow" @closing="closing" :showFooter="false" :showFullscreenButton="true">
-    ref="dialogWindow"
-    @closing="closing"
-    :showFooter="false"
-    :showFullscreenButton="true"
-  >
     <template v-slot:header-right>
-      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1"
+      <span v-if="selectedVideo.tracks && selectedVideo.tracks.length > 1">Language:</span>
-        >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">
-      <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
+    <video @ended="nextVideo" @timeupdate="timeUpdate" @playing="playing" @pause="pause" controls style="height: 100%; width: 100%; background: black" ref="videoControl" src></video>
-      @ended="nextVideo"
-      @timeupdate="timeUpdate"
-      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.reset();
-          this.$refs.dialogWindow.close();
-        }
       }
     },
   },

src/store/actions.js

@@ -3,12 +3,18 @@ import axios from 'axios'
 export default {
   checkIfInstanceIsNew(context) {
     return new Promise((resolve) => {
-      axios.get(context.rootGetters.server + "/api/system/setup").then((res) => {
+      axios
+        .get(context.rootGetters.server + "/api/system/setup")
+        .then((res) => {
+          console.log(res.status);
           if (res.status == 200) {
             resolve(true);
           } else {
             resolve(false);
           }
+        })
+        .catch(err => {
+          console.log(err);
         });
     });
   },

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);
+    });
   }
 }

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/radios/actions.js

@@ -44,9 +44,7 @@ export default {
         let h = context.rootGetters.headers;
         h.headers["content-type"] = "multipart/form-data";
         axios.put(context.rootGetters.server + "/api/radios/" + radio._id + "/cover", formData, h).then((res) => {
-          radio.cover32 = res.data.cover32;
+          radio.covers = res.data.covers;
-          radio.cover64 = res.data.cover64;
-          radio.cover128 = res.data.cover128;
           context.dispatch("loadRadios", true);
         });
       }

src/store/modules/radios/state.js

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

src/store/modules/user/actions.js

@@ -10,11 +10,13 @@ export default {
   load(context) {
     return new Promise((resolve, reject) => {
       axios.get(context.rootGetters.server + "/api/user/login", context.rootGetters.headers).then((res) => {
+        console.log(res.data);
         context.commit("load", res.data);
         context.rootState["player"].shuffle = res.data.player.shuffle;
         context.rootState["player"].repeatType = res.data.player.repeat;
         resolve();
       }).catch(err => {
+        console.log("error")
         context.commit("resetToken");
         reject(err);
       });
@@ -80,6 +82,34 @@ 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) {
+    return new Promise((resolve) => {
+      if (context.state._id == -1) {
+        resolve();
+      } else {
+        axios
+          .get(context.rootGetters.server + "/api/user/progress/" + parent._id, context.rootGetters.headers)
+          .then((res) => {
+            parent.progress = res.data;
+            resolve();
+          });
+      }
+    });
+  },
+  resetProgress(context, parentId) {
+    if (context.state._id == -1) {
+      return;
+    }
+    axios
+      .delete(context.rootGetters.server + "/api/user/progress/" + parentId, context.rootGetters.headers);
+  },
   savePlayerSettings(context) {
     let body = {
       repeat: context.rootGetters["player/repeatType"],

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,6 +2,17 @@
   <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 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>
+        <div class="flex-column" style="z-index: 1;">
           <h1>WebPlay</h1>
           <p>
             <b>{{ serverInfo.stats.tracks.toLocaleString("de-DE") }}</b> Tracks
@@ -11,21 +22,9 @@
             <b>{{ serverInfo.stats.users }}</b>
           </p>
         </div>
-      <MessageScreen
+      </div>
-        title="First Run?"
+      <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" />
-        subtitle="You still don't have any Music or Video content on your instance"
+      <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" />
-        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 +32,43 @@
         <template v-if="history.length > 0">
           <div id="history" :class="{ more: historyAll == true }">
             <template v-for="item in history">
-              <AlbumItem
+              <AlbumItem class="ma8" v-if="item.type == 'album'" :item="item" :key="item._id" />
-                class="ma8"
+              <ArtistItem class="ma8" v-if="item.type == 'artist'" :item="item" :key="item._id" />
-                v-if="item.type == 'album'"
+              <BoxItem class="ma8" v-if="item.type == 'box'" :item="item" :key="item._id" />
-                :item="item"
+              <RadioItem class="ma8" v-if="item.type == 'radio'" :item="item" :key="item._id" />
-                :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
+            <awesome-icon :icon="historyAll ? 'arrow-up' : 'arrow-down'" class="pa8-right" />{{ historyToggleText }}</span>
-              :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
+              <TrackItem v-for="(item, i) in mostListened" :track="item" :key="i" />
-                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
+              <VideoItem v-for="(item, i) in mostViewed" :video="item" :key="i" />
-                v-for="(item, i) in mostViewed"
-                :video="item"
-                :key="i"
-              />
             </div>
           </div>
         </div>
       </template>
     </div>
-    <div
+    <div v-if="newestAlbums.length > 0 || newestBoxes.length > 0" id="newest" class="pa-left pa-right">
-      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
+          <AlbumItem class="ma8" v-for="item in newestAlbums" type="line" :item="item" :key="item._id" />
-            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
+          <BoxItem class="ma8 small" v-for="item in newestBoxes" :item="item" :key="item._id" />
-            class="ma8 small"
-            v-for="item in newestBoxes"
-            :item="item"
-            :key="item._id"
-          />
         </div>
       </template>
     </div>
@@ -160,6 +112,11 @@ 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);
+        this.$store.dispatch("artists/loadArtists", true);
+      }
     },
     loadNextPage() {
       this.scrollPosition = this.$refs.welcome.scrollTop;
@@ -194,6 +151,7 @@ export default {
       serverInfo: "serverInfo",
       mostListened: "tracks/mostListened",
       mostViewed: "videos/mostViewed",
+      randomCovers: ["albums/randomCovers"],
     }),
     historyToggleText() {
       return this.historyAll ? "less..." : "more...";
@@ -221,4 +179,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>

src/views/Login.vue

@@ -123,13 +123,17 @@ export default {
     checkTocken() {
       let token = localStorage.getItem("token");
       if (token) {
+        console.log("hello token")
         this.$store.dispatch("user/setToken", token);
+        console.log("hello token; user/load")
         this.$store
           .dispatch("user/load")
           .then(() => {
+            console.log("user loaded")
             this.goto();
           })
           .catch((err) => {
+            console.log("user not loaded")
             console.log(err);
             this.checkIfNewBackend();
           });
@@ -157,6 +161,7 @@ export default {
         });
     },
     checkIfNewBackend() {
+      console.log("check new instance")
       this.$store.dispatch("checkIfInstanceIsNew").then((res) => {
         if (res) {
           this.$router.replace("setup");