Merge pull request 'main' (#32) from main into dev

Reviewed-on: #32

public/config.json

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

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

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

@@ -146,8 +146,6 @@ export default {
       this.audio.pause();
       this.audio.src = url;
 
-      this.pushHistoryItem();
-
       if (this.currentTrackParent.progress) {
         if (this.currentTrackParent.progress.id == this.selectedTrack._id) {
           this.skipToSecond(this.currentTrackParent.progress.progress);
@@ -297,6 +295,7 @@ export default {
           track: this.selectedTrack,
           rate: this.audioBpm,
         });
+        this.pushHistoryItem();
       }
     },
   },

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" :showHeader="false" :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,26 @@
             <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">
+              <awesome-icon icon="star" size="2x" class="favourite" :class="{ active: isFavourite }" @click="toggleFavourite" />
             </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" v-if="selectedArtist.progress">
+              <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
             </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" v-else>
+              <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Keep playing" />
+            </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 +50,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 +82,7 @@ export default {
     }
   },
   methods: {
-    dblclick() {
+    playArtist() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
       this.$store.dispatch("tracks/playContainer", this.selectedArtist);
@@ -262,7 +267,6 @@ export default {
 h1,
 #stats {
   z-index: 1;
-  text-align: center;
   width: 100%;
   color: var(--white);
   text-shadow: 0 1px 2px black;
@@ -280,6 +284,10 @@ h1,
   max-width: 100%;
 }
 
+#header #title {
+  z-index: 100;
+}
+
 #albumList {
   z-index: 1;
   overflow-y: auto;

src/store/actions.js

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

src/store/modules/user/actions.js

@@ -10,13 +10,11 @@ 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,17 +123,13 @@ 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();
           });
@@ -161,7 +157,6 @@ export default {
         });
     },
     checkIfNewBackend() {
-      console.log("check new instance")
       this.$store.dispatch("checkIfInstanceIsNew").then((res) => {
         if (res) {
           this.$router.replace("setup");