wip

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

@@ -85,10 +85,23 @@ 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

public/static/style.css

@@ -1741,10 +1741,6 @@ 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

@@ -146,6 +146,8 @@ 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);
@@ -295,7 +297,6 @@ export default {
           track: this.selectedTrack,
           rate: this.audioBpm,
         });
-        this.pushHistoryItem();
       }
     },
   },

src/components/dialogs/ArtistViewer.vue

@@ -1,10 +1,11 @@
 <template>
-  <DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showHeader="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
+  <DialogBase ref="dialogWindow" id="dialogWindow" :title="selectedArtist.name" @canceled="closed" :showFooter="false" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
     <div id="artistViewer">
       <div id="header" class="flex-column">
         <div id="background" :style="coverBackground" />
-        <div id="title" class="flex-column ma-left ma-right pa-bottom">
+        <awesome-icon icon="star" size="2x" class="favourite ma4" :class="{ active: isFavourite }" @click="toggleFavourite" />
-          <h1>
+        <awesome-icon icon="play" size="2x" class="keepPlaying ma4 primary-text" @click="playProgress" v-if="selectedArtist.progress" title="Keep playing" />
+        <h1 @dblclick="dblclick">
           {{ selectedArtist.name }}
         </h1>
         <span id="stats" class="ma-bottom">
@@ -12,26 +13,23 @@
           <b>{{ artist_albums.length }}</b> Albums with a duration of
           <b>{{ artist_duration }}</b>
         </span>
-          <div class="flex-row ma-top ma-bottom">
+        <div id="albumList" class="flex-row showOnMobilePortrait">
-            <button class="flat ma-right">
+          <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)" />
-              <awesome-icon icon="star" size="2x" class="favourite" :class="{ active: isFavourite }" @click="toggleFavourite" />
+        </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" />
             </button>
-            <button class="flat ma-right" v-if="selectedArtist.progress">
+            <button @click="gotoNextArtist" class="primary ma4" :title="nextArtist.name" :disabled="!nextArtist._id">
-              <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
+              <awesome-icon icon="angle-right" class="ma4" />
             </button>
-            <button class="flat ma-right" v-else>
+          </div>
-              <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Keep playing" />
+          <div class="flex-row grow right center">
-            </button>
+            <DropDown v-if="$store.getters['user/isAdministrator']" class="hideOnMobile">
-            <button @click="gotoPrevArtist" class="flat ma-left ma-right" :title="prevArtist.name" :disabled="!prevArtist._id">
+              <button class="flat pa8-left pa8-right">
-              <awesome-icon icon="angle-left" class="ma4 white-text" />
+                <awesome-icon icon="ellipsis-v" />
-            </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>
@@ -50,9 +48,6 @@
             </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">
@@ -82,7 +77,7 @@ export default {
     }
   },
   methods: {
-    playArtist() {
+    dblclick() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.dispatch("tracks/playContainer", this.selectedArtist);
@@ -267,6 +262,7 @@ export default {
 h1,
 #stats {
   z-index: 1;
+  text-align: center;
   width: 100%;
   color: var(--white);
   text-shadow: 0 1px 2px black;
@@ -284,10 +280,6 @@ h1,
   max-width: 100%;
 }
 
-#header #title {
-  z-index: 100;
-}
-
 #albumList {
   z-index: 1;
   overflow-y: auto;

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

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");