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

Reviewed-on: #33
2023-10-05 13:32:55 +02:00 · 2023-10-05 13:32:55 +02:00 · 367067eff8
commit 367067eff8
parent 761001d686 740152500e
9 changed files with 205 additions and 139 deletions
--- a/package-lock.json
+++ b/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": {
--- a/package.json
+++ b/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",
--- a/src/components/base-components/Dialog.vue
+++ b/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="{
-        fullscreen: isFullscreen,
-        'max-size': maxSize,
-        playing: $store.getters['player/isPlaying'],
-      }"
-    >
-      <div
-        class="dialog-header"
-        :class="{ hideOnMobile: showHeaderOnMobile == false }"
-        v-if="showHeader"
-        @dblclick="headerDoubleClick"
-      >
+  <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, '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 &&
-              (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"
-              />
+          <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.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,118 @@ 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-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 +446,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 +481,17 @@ 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-window.playing {
    margin-bottom: 60px;
    height: calc(100% - 60px);
--- a/src/components/dialogs/ArtistViewer.vue
+++ b/src/components/dialogs/ArtistViewer.vue
@ -1,5 +1,5 @@
 <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" :flatDialogHeader="true" :showFullscreenButton="true" :disableXscroll="true" :disableYscroll="true">
    <div id="artistViewer">
      <div id="header" class="flex-column">
        <div id="background" :style="coverBackground" />
@ -13,14 +13,15 @@
            <b>{{ artist_duration }}</b>
          </span>
          <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 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 class="flat ma-right" v-if="selectedArtist.progress">
              <awesome-icon icon="play" size="2x" class="primary-text " @click="playProgress" title="Keep playing" />
            </button>
            <button class="flat ma-right" v-else>
-              <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Keep playing" />
+              <awesome-icon icon="play" size="2x" class="white-text" @click="playArtist" title="Play" />
            </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" />
@ -31,7 +32,7 @@

            <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"/>
+                <awesome-icon icon="ellipsis-v" class="white-text" />
              </button>
              <template v-slot:dropdown-content>
                <div>
@ -115,8 +116,9 @@ export default {
    },
    closed() {
      if (
-        window.history.state.back.indexOf("?") == -1 ||
-        window.history.state.back.startsWith("/search")
+        window.history.state.back && (
+          window.history.state.back.indexOf("?") == -1 ||
+          window.history.state.back.startsWith("/search"))
      ) {
        this.$router.back();
      } else {
--- a/src/main.js
+++ b/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'
--- a/src/store/modules/albums/actions.js
+++ b/src/store/modules/albums/actions.js
@ -32,12 +32,15 @@ export default {

  },
  loadAlbums(context, force) {
-    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);
-      });
-    }
+    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 });
      });
    });
  },
--- a/src/store/modules/artists/actions.js
+++ b/src/store/modules/artists/actions.js
@ -13,12 +13,15 @@ export default {
    })
  },
  loadArtists(context, force) {
-    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);
-      });
-    }
+    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;
--- a/src/store/modules/boxes/actions.js
+++ b/src/store/modules/boxes/actions.js
@ -13,12 +13,15 @@ export default {
    })
  },
  loadBoxes(context, force) {
-    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);
-      });
-    }
+    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 => {
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -7,20 +7,12 @@
            <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
-            and
-            <b>{{ serverInfo.stats.videos.toLocaleString("de-DE") }}</b> Videos |
-            Users:
-            <b>{{ serverInfo.stats.users }}</b>
-          </p>
        </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" />
@ -114,8 +106,11 @@ export default {
      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);
+        this.$store.dispatch("albums/loadAlbums", true).then(() => {
+          this.$store.dispatch("artists/loadArtists", true).then(() => {
+            this.$store.dispatch("boxes/loadBoxes", true);
+          });
+        });
      }
    },
    loadNextPage() {