move

src/components/Album.vue

@@ -0,0 +1,78 @@
+<template>
+  <div
+    :id="item._id"
+    class="container album"
+    @click="click"
+    :title="item.title"
+    v-if="type == 'default'"
+  >
+    <img class="albumCover shadow" :src="cover" />
+    <p class="albumTitle componentTitle">{{ item.title }}</p>
+  </div>
+  <div v-else-if="type == 'line'" class="album-line flex-row" @click="click">
+    <img class="albumCover line shadow" :src="cover" />
+    <p class="albumTitle line">
+      <b>{{ item.title }}</b
+      ><br />by<br /><b>{{ item.artist_name }}</b>
+    </p>
+  </div>
+</template>
+<script>
+import BaseCollection from "../mixins/BaseCollection";
+
+export default {
+  name: "AlbumItem",
+  mixins: [BaseCollection],
+  props: {
+    type: {
+      type: String,
+      default: "default",
+    },
+  },
+  mounted() {
+    if (this.$route.query.id == this.item._id && this.item.tracks) {
+      this.$nextTick(() => {
+        this.scrollFunction();
+        this.$store.dispatch("albums/selectAlbum", this.item);
+      });
+    }
+  },
+  methods: {
+    click() {
+      if (this.$route.path != "/albums" && this.$route.path != "/artists") {
+        this.$store.dispatch("albums/loadAlbum", this.item._id);
+        this.$router.push("/albums?id=" + this.item._id);
+      } else {
+        this.scrollFunction();
+      }
+    },
+  },
+  computed: {
+    cover() {
+      let res = "/static/icons/dummy/album.svg";
+      if (
+        this.type == "default" &&
+        this.item.covers &&
+        this.item.covers.cover128
+      ) {
+        res = this.item.covers.cover128;
+      } else if (
+        this.type == "line" &&
+        this.item.covers &&
+        this.item.covers.cover64
+      ) {
+        res = this.item.covers.cover64;
+      }
+      return res;
+    },
+  },
+};
+</script>
+<style scoped>
+.albumTitle.line {
+  max-width: initial;
+  align-self: center;
+  margin-left: 8px;
+  line-height: 1.4;
+}
+</style>

src/components/Artist.vue

@@ -0,0 +1,82 @@
+<template>
+  <div
+    :id="item._id"
+    class="container artist"
+    @click="click"
+    :title="item.name"
+    v-if="type == 'default'"
+  >
+    <img class="artistCover shadow" :src="cover" />
+    <p class="artistName componentTitle">
+      {{ item.name }}
+    </p>
+  </div>
+  <div v-else-if="type == 'line'" class="album-line flex-row" @click="click">
+    <img class="artistCover shadow line" :src="cover" />
+    <p class="artistName line">
+      <b> {{ item.name }}</b>
+    </p>
+  </div>
+</template>
+<script>
+import BaseCollection from "../mixins/BaseCollection";
+
+export default {
+  name: "ArtistItem",
+  mixins: [BaseCollection],
+  props: {
+    type: {
+      type: String,
+      default: "default",
+    },
+  },
+  mounted() {
+    if (this.$route.query.id == this.item._id && this.item.albums) {
+      this.$nextTick(() => {
+        this.scrollFunction();
+        this.$store.dispatch("artists/selectArtist", this.item);
+      });
+    }
+  },
+  methods: {
+    click() {
+      if (this.$route.path != "/artists") {
+        this.$store.dispatch("artists/loadArtist", this.item._id);
+        this.$router.push("/artists?id=" + this.item._id);
+      } else {
+        this.scrollFunction();
+      }
+    },
+  },
+  computed: {
+    cover() {
+      let res = "/static/icons/dummy/artist.svg";
+      if (
+        this.type == "default" &&
+        this.item.covers &&
+        this.item.covers.cover256
+      ) {
+        res = this.item.covers.cover256;
+      } else if (
+        this.type == "line" &&
+        this.item.covers &&
+        this.item.covers.cover128
+      ) {
+        res = this.item.covers.cover128;
+      }
+      return res;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.artistCover.line {
+  width: 128px;
+  height: 64px;
+}
+.artistName.line {
+  align-self: center;
+  margin-left: 8px;
+}
+</style>

src/components/Box.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    :id="item._id"
+    class="container box"
+    @click="click"
+    :title="title"
+    v-if="type == 'default'"
+  >
+    <img class="boxCover shadow" :src="cover" />
+    <p class="boxTitle componentTitle">
+      {{ item.title }}
+    </p>
+  </div>
+  <div v-else-if="type == 'line'" class="flex-row line">
+    <img class="boxCover line shadow" :src="cover" />
+    <p class="boxTitle line">
+      <b>{{ item.title }}</b>
+    </p>
+  </div>
+</template>
+<script>
+import BaseCollection from "../mixins/BaseCollection";
+
+export default {
+  name: "BoxItem",
+  mixins: [BaseCollection],
+  props: {
+    type: {
+      type: String,
+      default: "default",
+    },
+  },
+  mounted() {
+    if (this.$route.query.id == this.item._id && this.item.videos) {
+      this.$nextTick(() => {
+        this.scrollFunction();
+        this.$store.dispatch("boxes/selectBox", this.item);
+      });
+    }
+  },
+  methods: {
+    click() {
+      if (this.$route.path != "/boxes") {
+        this.$store.dispatch("boxes/loadBox", this.item._id);
+        this.$router.push("/boxes?id=" + this.item._id);
+      } else {
+        this.scrollFunction();
+      }
+    },
+  },
+  computed: {
+    cover() {
+      let res = "/static/icons/dummy/box.svg";
+      if (
+        this.type == "default" &&
+        this.item.covers &&
+        this.item.covers.cover128
+      ) {
+        res = this.item.covers.cover128;
+      } else if (
+        this.type == "line" &&
+        this.item.covers &&
+        this.item.covers.cover64
+      ) {
+        res = this.item.covers.cover64;
+      }
+      return res;
+    },
+    title() {
+      return (
+        this.item.title +
+        (this.item.year && this.item.year > 0
+          ? " (" + this.item.year + ")"
+          : "")
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+.boxCover.line {
+  width: 64px;
+  height: 90px;
+}
+.boxTitle.line {
+  align-self: center;
+  margin-left: 8px;
+}
+</style>

src/components/Player.vue

@@ -0,0 +1,416 @@
+<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"
+    />
+    <div id="playerBar" class="flex-row">
+      <div class="flex-row grow">
+        <img
+          class="cover pointer"
+          :src="
+            selectedTrack.parent.covers.cover64 ||
+            selectedRadio.cover64 ||
+            '/static/icons/dummy/album.svg'
+          "
+          :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>
+      <div id="playerControls" class="flex-row center">
+        <button
+          @click="switchShuffle"
+          title="Shuffle mode"
+          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" />
+        </button>
+        <button @click="togglePlaying" :title="audio.paused ? 'Play' : 'Pause'">
+          <awesome-icon icon="play" size="2x" v-if="audio.paused" />
+          <awesome-icon icon="pause" size="2x" v-else />
+        </button>
+        <button @click="nextTrack" title="Forward" v-if="selectedTrack._id">
+          <awesome-icon icon="forward" />
+        </button>
+        <button
+          @click="switchRepeatType"
+          title="Repeat mode"
+          v-if="selectedTrack._id"
+        >
+          <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
+        class="flex-row ma-right hideOnMobilePortrait grow right"
+        v-show="selectedTrack.title"
+      >
+        {{ formatedP }}&nbsp;|&nbsp;{{ formatedD }}
+      </div>
+    </div>
+    <audio
+      preload="auto"
+      ref="audioControl"
+      type="audio/mpeg"
+      @ended="nextTrack"
+      @canplay="play"
+      @playing="playing"
+      @durationchange="durationChanged"
+      @timeupdate="timeUpdate"
+      src
+    ></audio>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PlayerControl",
+  data() {
+    return {
+      audio: {},
+      duration: 0,
+      progress: 0,
+      interval: 0,
+      preConvert: false,
+    };
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.audio = this.$refs.audioControl;
+    });
+    this.setMediaSession();
+  },
+
+  methods: {
+    play() {
+      if (this.audio.paused) {
+        this.audio.play();
+      }
+    },
+    durationChanged() {
+      this.duration = this.audio.duration;
+    },
+    playing() {
+      window.clearInterval(this.interval);
+      this.interval = setInterval(() => {
+        this.progress = this.audio.currentTime;
+        this.selectedTrack.percent = (100 / this.duration) * this.progress;
+      }, 500);
+    },
+    audioReset() {
+      this.audio.pause();
+      this.audio.src = "";
+      this.$store.commit("tracks/resetSelectedTrack");
+    },
+    slideChanged() {
+      this.audio.pause();
+      this.$store.dispatch("tracks/skip");
+    },
+    skipToPercent(percent) {
+      let was_paused = this.audio.paused;
+      this.audio.pause();
+      let currentTime = Math.floor((this.duration * percent) / 100);
+      this.audio.currentTime = currentTime;
+      this.progress = currentTime;
+      if (!was_paused) {
+        this.audio.play();
+      }
+    },
+    playRadio(radio) {
+      this.$store.commit("tracks/resetSelectedTrack");
+      this.audio.pause();
+      this.audio.src = radio.url;
+
+      let item = {
+        id: this.selectedRadio._id,
+        cover128: this.selectedRadio.cover128,
+        type: "radio",
+      };
+      this.$store.dispatch("user/saveHistoryItem", item);
+    },
+    playTrack(track) {
+      this.preConvert = false;
+      this.$store.commit("radios/resetSelectedRadio");
+      let url =
+        this.$store.getters.server +
+        "/api/tracks/" +
+        track._id +
+        "/stream/" +
+        this.audioBpm;
+
+      this.audio.pause();
+      this.audio.src = url;
+
+      let item = {
+        id: this.currentTrackParent._id,
+        type: this.currentTrackParentType,
+      };
+      if (item.type == "album") {
+        item.title = this.currentTrackParent.title;
+        item.covers = { cover128: this.currentTrackParent.covers.cover128 };
+      } else {
+        item.name = this.currentTrackParent.name;
+        item.covers = { cover256: this.currentTrackParent.covers.cover256 };
+      }
+      this.$store.dispatch("user/saveHistoryItem", item);
+      item = {
+        id: this.selectedTrack._id,
+        type: "track",
+        title: this.selectedTrack.title,
+        covers: { cover32: this.selectedTrack.parent.covers.cover32 },
+        parent: {
+          _id: this.selectedTrack.parent._id,
+          title: this.selectedTrack.parent.title,
+        },
+      };
+      this.$store.dispatch("user/saveHistoryItem", item);
+    },
+    nextTrack() {
+      if (this.$store.getters["player/repeatType"] == "one") {
+        this.skipToPercent(0);
+        this.audio.play();
+      } else {
+        this.$store.dispatch("tracks/playNextTo", this.selectedTrack);
+      }
+    },
+    prevTrack() {
+      this.$store.dispatch("tracks/playPrevTo", this.selectedTrack);
+    },
+    togglePlaying() {
+      if (!this.audio) {
+        return;
+      }
+      if (!this.audio.paused) {
+        this.audio.pause();
+      } else if (this.audio.src != "") {
+        this.audio.play();
+      }
+    },
+    reset() {
+      window.clearInterval(this.interval);
+      if (!this.audio.paused) {
+        this.audio.pause();
+      }
+      this.audio.src = "";
+    },
+    setMediaSession() {
+      if ("mediaSession" in navigator) {
+        let me = this;
+        navigator.mediaSession.setActionHandler("play", function () {
+          me.togglePlaying();
+        });
+        navigator.mediaSession.setActionHandler("pause", function () {
+          me.togglePlaying();
+        });
+        navigator.mediaSession.setActionHandler("seekto", function (details) {
+          if (details.fastSeek && "fastSeek" in me.audio) {
+            me.audio.fastSeek(details.seekTime);
+            return;
+          }
+          me.audio.currentTime = details.seekTime;
+        });
+        navigator.mediaSession.setActionHandler("previoustrack", function () {
+          me.prevTrack();
+        });
+        navigator.mediaSession.setActionHandler("nexttrack", function () {
+          me.nextTrack();
+        });
+      }
+    },
+    gotoContainer() {
+      switch (this.selectedTrack.parentType) {
+        case "album":
+          this.$router.push("/albums?id=" + this.selectedTrack.parent._id);
+          break;
+        case "artist":
+          this.$router.push(
+            "/artists?id=" + this.selectedTrack.parent.parent._id
+          );
+          break;
+      }
+    },
+    switchShuffle() {
+      this.$store.dispatch("player/toggleShuffleMode");
+      this.saveUserSettings();
+    },
+    switchRepeatType() {
+      this.$store.dispatch("player/switchPlayerRepeatMode");
+      this.saveUserSettings();
+    },
+    saveUserSettings() {
+      this.$store.dispatch("user/savePlayerSettings");
+    },
+    timeUpdate(event) {
+      let percent = (event.target.currentTime / event.target.duration) * 100;
+      if (percent > 10 && !this.preConvert) {
+        this.preConvert = true;
+        this.$store.dispatch("tracks/convertNextTo", {
+          track: this.selectedTrack,
+          rate: this.audioBpm,
+        });
+      }
+    },
+  },
+  computed: {
+    selectedTrack() {
+      return this.$store.getters["tracks/selectedTrack"];
+    },
+    skipTo() {
+      return this.selectedTrack.skipTo;
+    },
+    selectedRadio() {
+      return this.$store.getters["radios/selectedRadio"];
+    },
+    currentTrackParent() {
+      return this.$store.getters["tracks/selectedTrackContainer"];
+    },
+    currentTrackParentType() {
+      let type = "album";
+      if (
+        this.selectedTrack.parent.parent &&
+        this.selectedTrack.parent.parent.tracks
+      ) {
+        type = "artist";
+      }
+      return type;
+    },
+    formatedD() {
+      let m = Math.floor(this.duration / 60);
+      let s = Math.floor(this.duration - m * 60);
+      return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
+    },
+    formatedP() {
+      let m = Math.floor(this.progress / 60);
+      let s = Math.floor(this.progress - m * 60);
+      return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
+    },
+    requestReplayTrack() {
+      return this.$store.getters["player/requestReplayTrack"];
+    },
+    audioBpm() {
+      return this.$store.getters["user/settings"].desktop_bpm || "128";
+    },
+  },
+  watch: {
+    requestReplayTrack() {
+      this.skipToPercent(0);
+    },
+    skipTo(newVal) {
+      if (newVal) {
+        this.skipToPercent(newVal);
+      }
+    },
+    selectedRadio(newVal) {
+      if (newVal._id) {
+        this.playRadio(newVal);
+      } else {
+        this.reset();
+      }
+    },
+    selectedTrack(newVal) {
+      if (newVal._id) {
+        this.playTrack(newVal);
+      } else {
+        this.reset();
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+#player {
+  background-color: var(--nav);
+  max-height: 60px;
+  height: 60px;
+  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;
+  align-self: stretch;
+  border: none;
+}
+
+@media (max-width: 480px) {
+  #player #playerControls {
+    justify-content: end;
+  }
+}
+
+input[type="range"] {
+  border: none;
+  overflow: hidden;
+  -webkit-appearance: none;
+  background-color: var(--secondary);
+  height: 8px;
+  padding: 0px;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  height: 8px;
+  -webkit-appearance: none;
+  color: var(--primary);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  width: 10px;
+  -webkit-appearance: none;
+  height: 8px;
+  cursor: ew-resize;
+  background: var(--dark);
+  box-shadow: -4000px 0 0 4000px var(--primary);
+}
+</style>

src/components/Radio.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :title="item.name" class="container radio" @click="clicked">
+    <img class="radioCover shadow" :src="item.cover128" />
+    <p
+      class="radioTitle"
+      :class="{ selected: item == $store.state.selectedRadio }"
+    >
+      {{ item.name }}
+    </p>
+  </div>
+</template>
+
+<script>
+import BaseCollection from "../mixins/BaseCollection";
+
+export default {
+  name: "RadioItem",
+  mixins: [BaseCollection],
+  mounted() {
+    if (this.$route.query.play == this.item._id) {
+      this.$store.dispatch("radios/play", this.item);
+    }
+  },
+  methods: {
+    clicked() {
+      if (this.$route.path == "/" || this.$route.path == "/search") {
+        this.$router.push("/radios?play=" + this.item._id);
+      } else {
+        this.$store.dispatch("radios/play", this.item);
+      }
+    },
+  },
+};
+</script>

src/components/Track.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    :id="track._id"
+    :title="track.title"
+    class="track"
+    @click="clicked"
+    :class="{ selected: track._id == selectedTrack._id }"
+  >
+    <div class="trackDetails">
+      <img
+        v-if="showCover == true"
+        :src="cover"
+        :title="track.parent.title"
+        class="trackCover shadow"
+      />
+      <div class="trackTitle">{{ track.title }}</div>
+      <div class="trackDuration" v-if="track.duration">{{ duration }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TrackItem",
+  props: {
+    track: {
+      type: Object,
+    },
+    showCover: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  mounted() {
+    this.scrollFunction();
+  },
+  methods: {
+    clicked() {
+      if (this.$route.path == "/" || this.$route.path == "/search") {
+        this.$store.dispatch("albums/loadAlbum", this.track.parent._id);
+        this.$router.push(
+          "/albums?id=" + this.track.parent._id + "&play=" + this.track._id
+        );
+      } else {
+        this.$store.dispatch("tracks/play", this.track);
+      }
+    },
+    scrollFunction(force) {
+      if (this.track._id != this.selectedTrack._id && force !== true) {
+        return;
+      }
+
+      let tracklist = document.getElementById("trackList");
+      if (!tracklist) {
+        return;
+      }
+      let parent = tracklist.getBoundingClientRect();
+      let element = document.getElementById(this.track._id);
+      if (!element) {
+        return;
+      }
+      let bounding = element.getBoundingClientRect();
+      let scrollDown = bounding.top < parent.top;
+      let scrollUp = bounding.bottom > parent.bottom;
+      if (scrollDown || force) {
+        this.$nextTick(() => {
+          element.scrollIntoView({
+            block: "start",
+          });
+        });
+      } else if (scrollUp) {
+        this.$nextTick(() => {
+          element.scrollIntoView({
+            block: "end",
+          });
+        });
+      }
+    },
+  },
+  computed: {
+    duration() {
+      let min = parseInt(this.track.duration / 60);
+      let sec = parseInt(this.track.duration - min * 60);
+      return min + ":" + (sec < 10 ? "0" : "") + sec;
+    },
+    selectedTrack() {
+      return this.$store.getters["tracks/selectedTrack"];
+    },
+    cover() {
+      let cover = this.track.covers ? this.track.covers.cover32 : undefined;
+      if (!cover) {
+        cover =
+          this.track.parent.covers && this.track.parent.covers.cover64
+            ? this.track.parent.covers.cover64
+            : "/static/icons/dummy/album.svg";
+      }
+      return cover;
+    },
+  },
+  watch: {
+    selectedTrack() {
+      this.scrollFunction();
+    },
+  },
+};
+</script>

src/components/Video.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    :id="video._id"
+    class="video"
+    :title="video.title"
+    @click="clicked"
+    :class="{ selected: video == $store.state.selectedVideo }"
+  >
+    <img class="videoCover shadow" :src="video.thumbnail" />
+    <div class="videoTitle componentTitle">{{ video.title }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VideoItem",
+  props: {
+    video: {
+      type: Object,
+    },
+  },
+  methods: {
+    clicked() {
+      if (this.$route.path == "/" || this.$route.path == "/search") {
+        this.$store.dispatch("boxes/loadBox", this.video.parent._id);
+        this.$router.push(
+          "/boxes?id=" + this.video.parent._id + "&play=" + this.video._id
+        );
+      } else {
+        this.$store.dispatch("videos/play", this.video);
+      }
+    },
+    scrollFunction(video) {
+      if (video._id != this.video._id) {
+        return;
+      }
+      this.$nextTick(() => {
+        let parent = document
+          .getElementById("videoList")
+          .getBoundingClientRect();
+        let element = document.getElementById(this.video._id);
+        let bounding = element.getBoundingClientRect();
+        let scrollDown = bounding.top < parent.top;
+        let scrollUp = bounding.bottom > parent.bottom;
+        if (scrollDown) {
+          element.scrollIntoView({
+            block: "start",
+            behavior: "smooth",
+          });
+        } else if (scrollUp) {
+          element.scrollIntoView({
+            block: "end",
+            behavior: "smooth",
+          });
+        }
+      });
+    },
+  },
+  computed: {
+    selectedVideo() {
+      return this.$store.getters["selectedVideo"];
+    },
+  },
+};
+</script>

src/components/base-components/Dialog.vue

@@ -0,0 +1,496 @@
+<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 class="dialog-header-left">
+          <slot name="header-left" />
+        </div>
+        <div class="dialog-header-center">
+          <h3 v-if="dialogTitle">{{ 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'"
+          >
+            <awesome-icon v-if="isFullscreen" icon="compress" />
+            <awesome-icon v-else icon="expand" />
+          </button>
+          <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,
+        }"
+      >
+        <slot />
+        <div
+          class="dialog-body-content"
+          v-if="dialogContent"
+          v-html="dialogContent"
+        />
+      </div>
+      <div class="dialog-footer" v-if="showFooter">
+        <div class="dialog-footer-left">
+          <span v-if="messageText" class="dialog-message" :class="messageClass">
+            <awesome-icon v-if="messageIcon" :icon="messageIcon" />
+            {{ messageText }}
+          </span>
+          <slot name="footer-left" />
+        </div>
+        <div class="dialog-footer-center">
+          <slot name="footer-center" />
+        </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"
+              />
+              {{ 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"
+              />
+              {{ buttonText }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "DialogControl",
+  props: {
+    title: { type: String, default: "" },
+    content: { type: String, default: "" },
+    closeOnEscape: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnFocusLost: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnButtonClick: {
+      type: Boolean,
+      default: true,
+    },
+    disableXscroll: {
+      type: Boolean,
+      default: false,
+    },
+    disableYscroll: {
+      type: Boolean,
+      default: false,
+    },
+    showFooter: {
+      type: Boolean,
+      default: true,
+    },
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    showHeaderOnMobile: {
+      type: Boolean,
+      default: true,
+    },
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    showFooterButtons: {
+      type: Boolean,
+      default: true,
+    },
+    showFullscreenButton: {
+      type: Boolean,
+      default: false,
+    },
+    enableFooterButtons: {
+      type: Boolean,
+      default: true,
+    },
+    buttonText: {
+      type: String,
+      default: "Done",
+    },
+    buttonClass: {
+      type: String,
+      default: "",
+    },
+    buttonIcon: {
+      type: String,
+      default: "",
+    },
+    buttons: {
+      type: Array,
+    },
+    maxSize: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      openTitle: "",
+      openContent: "",
+      openButtons: null,
+      isFullscreen: false,
+      callback: null,
+      messageText: "",
+      messageClass: "",
+      messageIcon: "",
+    };
+  },
+  methods: {
+    open(title = null, content = null, buttons = null, callback = null) {
+      this.visible = true;
+      if (title) {
+        this.openTitle = title;
+      }
+      if (content) {
+        this.openContent = content;
+      }
+      if (buttons) {
+        this.openButtons = buttons;
+      }
+      if (callback) {
+        this.callback = callback;
+      }
+      window.addEventListener("keydown", this.keydownListener);
+      this.focusButton();
+      this.$emit("opened");
+    },
+    close() {
+      this.$emit("closing");
+      this.visible = false;
+      window.removeEventListener("keydown", this.keydownListener);
+      this.$emit("closed");
+      if (this.callback) {
+        this.callback();
+      }
+    },
+    cancel() {
+      this.$emit("canceled");
+      this.close();
+    },
+    focusButton() {
+      this.$nextTick(() => {
+        if (this.$refs.dialogButton) {
+          this.$refs.dialogButton.focus();
+        }
+      });
+    },
+    click(name, parameter = null) {
+      this.$emit(name, parameter);
+      if (this.callback) {
+        this.callback(parameter || name);
+        this.callback = undefined;
+      }
+      if (this.closeOnButtonClick) {
+        this.close();
+      }
+    },
+    bgClicked(e) {
+      if (
+        e.srcElement == this.$refs.dialogBackground &&
+        this.closeOnFocusLost
+      ) {
+        this.cancel();
+      }
+    },
+    headerDoubleClick() {
+      if (this.showFullscreenButton) {
+        this.isFullscreen = !this.isFullscreen;
+      }
+    },
+    keydownListener(e) {
+      if (e.key == "Escape" && this.closeOnEscape) {
+        e.preventDefault();
+        this.cancel();
+      }
+    },
+  },
+  computed: {
+    dialogTitle() {
+      return this.openTitle || this.title;
+    },
+    dialogButtons() {
+      return this.openButtons || this.buttons;
+    },
+    dialogContent() {
+      return this.openContent || this.content;
+    },
+  },
+};
+</script>
+
+<style>
+.dialog-background {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #00000080;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  animation: fadeIn ease 0.15s;
+}
+.dialog-window {
+  box-shadow: 0px 8px 32px var(--shadow);
+  background-color: var(--white);
+  max-width: 90%;
+  max-height: 80%;
+  display: flex;
+  flex-direction: column;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.dialog-window.max-size {
+  width: 90%;
+  height: 90%;
+}
+.dialog-window.fullscreen {
+  max-width: initial;
+  max-height: initial;
+  width: 100%;
+  height: 100%;
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+.dialog-header {
+  display: flex;
+  flex-shrink: 0;
+  background-color: var(--background);
+  box-shadow: 0px 1px 4px var(--shadow);
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  z-index: 1;
+}
+.dialog-header h3 {
+  flex-grow: 1;
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: bold;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  align-self: center;
+  cursor: default;
+}
+.dialog-header input,
+.dialog-header select {
+  padding: 0 4px;
+  border: 0;
+  border-radius: 0;
+  background-color: var(--white);
+  align-self: stretch;
+}
+.dialog-header button,
+.dialog-header a {
+  background-color: transparent;
+  border: 0;
+  border-radius: 16px;
+  padding: 4px;
+  margin: 2px;
+  cursor: pointer;
+}
+
+.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 {
+  margin-left: 12px;
+}
+.dialog-header svg {
+  width: 16px !important;
+  height: 16px;
+}
+.dialog-header > div,
+.dialog-footer > div {
+  display: flex;
+  align-items: 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 {
+  border-left: 1px solid var(--light-border);
+}
+
+.dialog-body {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+.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;
+  flex-shrink: 0;
+  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) {
+  .dialog-window {
+    max-width: initial;
+    max-height: initial;
+    width: 100%;
+    height: 100%;
+    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);
+  }
+}
+</style>

src/components/base-components/DropDown.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="dropdown">
+    <div ref="dropdownActivator" class="dropdown-activator" @click="click">
+      <slot />
+    </div>
+    <div v-if="open" class="dropdown-background" ref="dropdownBackground" @click="bgClicked">
+      <div
+        ref="dropdownContent"
+        class="dropdown-content"
+        :style="'top: ' + top + 'px; left: ' + left + 'px;'"
+      >
+        <slot name="dropdown-content" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      open: false,
+      top: 0,
+      left: 0
+    };
+  },
+  methods: {
+    click() {
+      let a = this.$refs.dropdownActivator.getBoundingClientRect();
+      let x = a.left;
+      let y = a.top + a.height;
+      let h = window.innerHeight;
+      let w = window.innerWidth;
+
+      this.open = !this.open;
+      if (this.open) {
+        this.$nextTick(() => {
+          let b = this.$refs.dropdownContent.getBoundingClientRect();
+          if (x + b.width > w) {
+            x -= b.width - a.width;
+          }
+          if (y + b.height > h) {
+            y -= b.height + a.height;
+          }
+          this.left = x;
+          this.top = y;
+        });
+      }
+    },
+    bgClicked(e) {
+      if (!this.closeOnClick && e.srcElement != this.$refs.dropdownBackground) {
+        return;
+      }
+      this.open = false;
+    }
+  }
+};
+</script>

src/components/base-components/Expander.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="expander">
+    <div class="expander-header" @click="expanded = !expanded">
+      <awesome-icon icon="caret-up" size="2x" v-if="expanded" />
+      <awesome-icon icon="caret-down" size="2x" v-else />
+      <h3>{{title}}</h3>
+    </div>
+    <div class="expander-body" v-show="expanded">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name:"ExpanderControl",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    expand: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      expanded: false
+    };
+  }
+};
+</script>

src/components/base-components/MessageScreen.vue

@@ -0,0 +1,79 @@
+<template>
+  <div id="message-screen">
+    <div class="ma-left ma-right">
+      <div id="message-screen-header">
+        <img v-if="img" :src="img" />
+        <awesome-icon v-if="icon" :icon="icon" />
+        <div>
+          <h1>{{ title }}</h1>
+          <h2>{{ subtitle }}</h2>
+        </div>
+      </div>
+      <div id="message-screen-body" v-if="showCommands">
+        <div
+          class="message-screen-command"
+          :class="{ 'margin-image': img || icon }"
+          v-for="(command, index) in commands"
+          :key="'Command-' + index"
+          @click="$emit('commandClicked', command)"
+        >
+          <awesome-icon v-if="command.icon" size="2x" :icon="command.icon" />
+          <img v-if="command.img" :src="command.img" />
+          <div>
+            <h3>{{ command.title }}</h3>
+            <span>{{ command.subtitle }}</span>
+          </div>
+        </div>
+        <ul
+          class="message-screen-list"
+          :class="{ 'margin-image': img || icon }"
+        >
+          <li
+            v-for="(item, index) in list"
+            :key="'ListItem-' + index"
+            @click="$emit('listClicked', item)"
+          >
+            {{ listProperty != "" ? item[listProperty] : item }}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    commands: {
+      type: Array,
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    img: {
+      type: String,
+      default: "",
+    },
+    list: {
+      type: Array,
+    },
+    listProperty: {
+      type: String,
+      default: "",
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    showCommands: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>

src/components/dialogs/AlbumMerge.vue

@@ -0,0 +1,113 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    title="Move all title..."
+    buttonText="Move"
+    buttonClass="accept"
+    @accept="merge"
+    @closed="closed"
+    :closeOnButtonClick="false"
+    :enableFooterButtons="acceptable"
+  >
+    <div class="flex-row" id="merge-content">
+      <div class="flex-column">
+        <h4 class="ma-left ma-top">From</h4>
+        <AlbumItem class="ma" :item="source" />
+      </div>
+      <awesome-icon id="arrow-icon" icon="arrow-right" />
+      <div class="flex-column">
+        <DropDown class="ma-left ma-top">
+          <input
+            type="search"
+            v-model="search"
+            @search="searchTermChanged"
+            placeholder="Into"
+          />
+          <template v-slot:dropdown-content>
+            <div class="flex-column">
+              <h3 class="ma" v-if="albums.length == 0">Enter an album title</h3>
+              <AlbumItem
+                class="ma8"
+                v-for="album in albums"
+                :key="album._id"
+                :item="album"
+                @click="select(album)"
+                type="line"
+              />
+            </div>
+          </template>
+        </DropDown>
+        <AlbumItem class="ma" :item="target" />
+      </div>
+    </div>
+  </DialogBase>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      albums: [],
+      search: "",
+      searchTimer: 0,
+      source: {},
+      target: { covers: {} },
+    };
+  },
+  methods: {
+    closed() {
+      this.albums = [];
+      this.source = {};
+      this.target = { covers: {} };
+      this.search = "";
+      clearTimeout(this.searchTimer);
+    },
+    open(source) {
+      this.source = source;
+      this.$refs.dialogWindow.open();
+    },
+    merge() {
+      this.$store
+        .dispatch("albums/move", {
+          source: this.source._id,
+          target: this.target._id,
+        })
+        .then(() => {
+          this.$store.dispatch("albums/loadAlbum", this.target._id);
+          this.$store.dispatch("albums/selectAlbumById", this.target._id);
+          this.$store.dispatch("albums/remove", this.source._id);
+          this.$refs.dialogWindow.close();
+        });
+    },
+    searchTermChanged() {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.$store.dispatch("albums/filter", this.search).then((result) => {
+          this.albums = result;
+        });
+      }, 250);
+    },
+    select(album) {
+      this.target = album;
+    },
+  },
+  computed: {
+    acceptable() {
+      return this.source._id != undefined && this.target._id != undefined;
+    },
+  },
+};
+</script>
+
+<style scoped>
+input {
+  width: 128px;
+}
+#arrow-icon {
+  align-self: center;
+}
+#merge-content {
+  align-items: flex-end;
+}
+</style>

src/components/dialogs/AlbumViewer.vue

@@ -0,0 +1,494 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    :title="album_title"
+    @canceled="closed"
+    @opened="opened"
+    :showFooter="false"
+    :disableXscroll="true"
+    :disableYscroll="true"
+  >
+    <div id="albumViewer">
+      <div id="header" class="flex-column">
+        <div id="background" :style="coverBackground" />
+
+        <div id="albumList" class="flex-row z1" @scroll="loadingAlbums()">
+          <div class="dummyAlbum" />
+          <div id="loadPrevAlbums" />
+
+          <AlbumItem
+            v-for="album in albums"
+            :key="album._id"
+            :item="album"
+            class="ma"
+            :class="{ focus: album._id == selectedAlbum._id }"
+            :id="album._id"
+            @touchend="albumAutoSelect"
+            @click="selectAlbum(album)"
+            @dblclick="dblclick"
+          />
+
+          <div id="loadNextAlbums" />
+          <div class="dummyAlbum" />
+        </div>
+        <awesome-icon
+          icon="star"
+          size="2x"
+          class="favourite ma4"
+          :class="{ active: isFavourite }"
+          @click="toggleFavourite"
+        />
+        <div id="stats" class="flex-row grow z1 pa4-bottom">
+          <DropDown v-if="$store.getters['user/isAdministrator']">
+            <button class="flat pa8-left pa8-right" :title="visibility_text">
+              <awesome-icon :icon="visibility_icon" />
+            </button>
+            <template v-slot:dropdown-content>
+              <div>
+                <button
+                  v-for="(item, i) in $store.state.system.lists.visibility"
+                  :key="i"
+                  @click="setVisibility(item)"
+                >
+                  <awesome-icon :icon="getVisibilityIcon(item)" />{{
+                    getVisibilityText(item)
+                  }}
+                </button>
+              </div>
+            </template>
+          </DropDown>
+
+          <span class="grow center" @click="scrollIntoCenter(selectedAlbum)">
+            <b>{{ album_title }}</b> 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>
+
+          <DropDown v-if="$store.getters['user/isAdministrator']">
+            <button class="flat pa8-left pa8-right">
+              <awesome-icon icon="ellipsis-v" />
+            </button>
+            <template v-slot:dropdown-content>
+              <div>
+                <button @click="uploadNewCover">
+                  <awesome-icon icon="image" />Set new Cover...
+                </button>
+                <button @click="resetCover">
+                  <awesome-icon icon="eraser" />Reset Cover
+                </button>
+                <hr />
+                <button @click="mergeAlbum">
+                  <awesome-icon icon="compress-alt" />Merge Albums...
+                </button>
+              </div>
+            </template>
+          </DropDown>
+        </div>
+      </div>
+
+      <ul id="trackList" class="tracks">
+        <li v-for="track in selectedAlbum.tracks" :key="track._id">
+          <TrackItem :track="track" :showCover="false" />
+        </li>
+      </ul>
+    </div>
+    <AlbumMerge ref="mergeDialog" />
+  </DialogBase>
+</template>
+
+<script>
+import AlbumMerge from "./AlbumMerge.vue";
+import TrackItem from "../Track";
+import { mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+      move: 152,
+      albums: [],
+      scrollTimer: 0,
+      loadingPrev: false,
+      loadingNext: false,
+      elements: {},
+    };
+  },
+  mounted() {
+    if (window.innerWidth <= 480 || window.innerHeight <= 480) {
+      this.move = 120;
+    }
+  },
+  methods: {
+    albumAutoSelect() {
+      this.albums.forEach((album) => {
+        let center_client = document.documentElement.clientWidth / 2;
+        let e = document.getElementById(album._id);
+        let r = e.getBoundingClientRect();
+        let center_element = center_client - r.left - r.width / 2;
+        if (center_element < this.move / 2 && center_element > -this.move / 2) {
+          if (album._id == this.selectedAlbum._id) {
+            this.scrollIntoCenter(album, "smooth");
+          } else {
+            this.selectAlbum(album);
+          }
+        }
+      });
+    },
+    readElements() {
+      if (document.getElementById("header") == undefined) {
+        return false;
+      }
+      this.elements.prev = document
+        .getElementById("loadPrevAlbums")
+        .getBoundingClientRect();
+
+      this.elements.next = document
+        .getElementById("loadNextAlbums")
+        .getBoundingClientRect();
+
+      this.elements.header = document
+        .getElementById("header")
+        .getBoundingClientRect();
+
+      this.elements.albums = document.getElementById("albumList");
+
+      return true;
+    },
+    dblclick() {
+      this.$store.commit("tracks/resetSelectedTrack");
+      this.$store.commit("radios/resetSelectedRadio");
+      this.$store.dispatch("tracks/playContainer", this.selectedAlbum);
+    },
+    gotoArtist() {
+      let artist = this.$store.getters["artists/collection"].find(
+        (f) => f._id == this.selectedAlbum.artist_id
+      );
+      if (artist) {
+        this.$store.dispatch("artists/selectArtist", artist);
+      } else {
+        this.$store
+          .dispatch("artists/loadArtist", this.selectedAlbum.artist_id)
+          .then((artist) => {
+            this.$store.dispatch("artists/selectArtist", artist);
+          });
+      }
+    },
+    gotoNextAlbum() {
+      let i = this.albums.indexOf(this.selectedAlbum);
+      if (i < this.albums.length - 1) {
+        this.selectAlbum(this.albums[++i]);
+      }
+    },
+    gotoPrevAlbum() {
+      let i = this.albums.indexOf(this.selectedAlbum);
+      if (i > 0) {
+        this.selectAlbum(this.albums[--i]);
+      }
+    },
+    gotoTrack() {
+      if (this.$route.query.play) {
+        let track = this.selectedAlbum.tracks.find(
+          (f) => f._id == this.$route.query.play
+        );
+        if (track) {
+          this.$store.dispatch("tracks/play", track);
+        }
+      }
+    },
+    closed() {
+      if (
+        (window.history.state.back &&
+          window.history.state.back.indexOf("?") == -1) ||
+        window.history.state.back.startsWith("/search")
+      ) {
+        this.$router.back();
+      } else {
+        this.$store.dispatch("albums/resetSelectedAlbum");
+      }
+      this.albums = [];
+    },
+    keydownListener(e) {
+      if (e.key == "ArrowLeft") {
+        e.preventDefault();
+        this.elements.albums.scrollLeft -= 0;
+        this.gotoPrevAlbum();
+      }
+      if (e.key == "ArrowRight") {
+        e.preventDefault();
+        this.elements.albums.scrollLeft += 0;
+        this.gotoNextAlbum();
+      }
+    },
+    loadingAlbums() {
+      clearTimeout(this.scrollTimer);
+      if (!this.readElements()) {
+        return;
+      }
+
+      let posPrev = this.elements.prev.left - this.elements.header.left;
+      let posNext = this.elements.header.right - this.elements.next.right;
+
+      if (posPrev >= -this.move && !this.loadingPrev) {
+        this.loadingPrev = true;
+        this.$store
+          .dispatch("albums/getPrevTo", this.albums[0])
+          .then((album) => {
+            if (album) {
+              this.albums.unshift(album);
+              this.elements.albums.scrollLeft += this.move;
+            }
+            this.loadingPrev = false;
+          });
+      } else if (posPrev < -this.move * 3 && !this.loadingPrev) {
+        this.loadingPrev = true;
+        this.elements.albums.scrollLeft -= this.move;
+        this.albums.shift();
+        this.loadingPrev = false;
+      }
+
+      if (posNext >= -this.move && !this.loadingNext) {
+        this.loadingNext = true;
+        this.$store
+          .dispatch("albums/getNextTo", this.albums[this.albums.length - 1])
+          .then((album) => {
+            if (album) {
+              this.albums.push(album);
+            }
+            this.loadingNext = false;
+          });
+      } else if (posNext < -this.move * 3 && !this.loadingNext) {
+        this.loadingNext = true;
+        this.albums.pop();
+        this.loadingNext = false;
+      }
+    },
+    mergeAlbum() {
+      this.$refs.mergeDialog.open(this.selectedAlbum);
+    },
+    opened() {
+      this.$nextTick(() => {
+        this.scrollIntoCenter(this.selectedAlbum);
+      });
+    },
+    setVisibility(visibility) {
+      this.selectedAlbum.visibility = visibility;
+      this.$store.dispatch("albums/updateAlbum", this.selectedAlbum);
+    },
+    toggleFavourite() {
+      this.$store.dispatch("user/toggleFavourite", {
+        itemId: this.selectedAlbum._id,
+        type: "album",
+      });
+    },
+    uploadNewCover() {
+      this.$store.dispatch("albums/uploadNewCover", this.selectedAlbum);
+    },
+    resetCover() {
+      this.$store.dispatch("albums/resetCover", this.selectedAlbum);
+    },
+    getVisibilityIcon(visibility) {
+      return visibility == "global"
+        ? "globe"
+        : visibility == "instance"
+        ? "server"
+        : visibility == "hidden"
+        ? "eye-slash"
+        : "user";
+    },
+    getVisibilityText(visibility) {
+      return visibility == "global"
+        ? "Global"
+        : visibility == "instance"
+        ? "On this server"
+        : visibility == "hidden"
+        ? "Hide this Album"
+        : "Only for me";
+    },
+    scrollIntoCenter(album, behavior = "auto") {
+      let e = document.getElementById(album._id);
+      if (e) {
+        e.scrollIntoView({ behavior: behavior, inline: "center" });
+      }
+    },
+    selectAlbum(album) {
+      this.$store.dispatch("albums/selectAlbum", album);
+      this.scrollIntoCenter(album);
+    },
+  },
+  computed: {
+    ...mapGetters({
+      prevAlbum: ["albums/prevAlbum"],
+      nextAlbum: ["albums/nextAlbum"],
+      selectedAlbum: ["albums/selectedAlbum"],
+      selectedTrack: ["tracks/selectedTrack"],
+      favourites: ["user/favourites"],
+    }),
+    album_title() {
+      return this.selectedAlbum.title;
+    },
+    album_year() {
+      return this.selectedAlbum.year;
+    },
+    album_tracks() {
+      return this.selectedAlbum.tracks || [];
+    },
+    album_duration() {
+      if (!this.selectedAlbum.tracks) {
+        return 0;
+      }
+      let duration = 0;
+      let hours = 0;
+      let minutes = 0;
+      let seconds = 0;
+
+      this.selectedAlbum.tracks.forEach((track) => {
+        duration += track.duration;
+      });
+
+      if (duration >= 3600) {
+        hours = parseInt(duration / 3600);
+        duration -= hours * 3600;
+      }
+
+      minutes = parseInt(duration / 60);
+      seconds = parseInt(duration - minutes * 60);
+      return (
+        (hours > 0 ? hours + ":" : "") +
+        (minutes < 10 ? "0" : "") +
+        minutes +
+        ":" +
+        (seconds < 10 ? "0" : "") +
+        seconds
+      );
+    },
+
+    coverBackground() {
+      return "background-image: url('" + this.cover + "')";
+    },
+    cover() {
+      return (
+        this.selectedAlbum.covers.cover256 || "/static/icons/dummy/album.svg"
+      );
+    },
+
+    visibility_icon() {
+      return this.selectedAlbum.visibility == "global"
+        ? "globe"
+        : this.selectedAlbum.visibility == "instance"
+        ? "server"
+        : this.selectedAlbum.visibility == "hidden"
+        ? "eye-slash"
+        : "user";
+    },
+    visibility_text() {
+      return this.selectedAlbum.visibility == "global"
+        ? "Visible for the whole world"
+        : this.selectedAlbum.visibility == "instance"
+        ? "Visible on this instance"
+        : this.selectedAlbum.visibility == "hidden"
+        ? "Hidden for all users"
+        : "Visible only for me";
+    },
+    isFavourite() {
+      return (
+        this.favourites.find((f) => f.itemId == this.selectedAlbum._id) !=
+        undefined
+      );
+    },
+  },
+  watch: {
+    selectedAlbum(newVal) {
+      if (newVal._id) {
+        if (this.albums.length == 0) {
+          this.albums.push(newVal);
+        }
+        if (!this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.open();
+          window.addEventListener("keydown", this.keydownListener);
+        }
+        this.gotoTrack();
+      } else {
+        if (this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.close();
+        }
+        window.removeEventListener("keydown", this.keydownListener);
+      }
+    },
+  },
+  components: {
+    AlbumMerge,
+    TrackItem,
+  },
+};
+</script>
+
+<style scoped>
+#albumViewer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#albumList {
+  overflow-x: overlay;
+  max-width: 100%;
+  align-self: center;
+}
+#albumList::-webkit-scrollbar {
+  display: none;
+}
+#header {
+  position: relative;
+  min-width: 280px;
+  width: 456px;
+  background: black;
+}
+#header img {
+  align-self: center;
+}
+#navigation {
+  width: 456px;
+  overflow: auto;
+}
+#stats {
+  z-index: 2;
+  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;
+}
+#trackList {
+  height: 360px;
+  width: 456px;
+  background-color: var(--white);
+  z-index: 1;
+}
+.album {
+  transition: transform 0.25s;
+}
+.album.focus {
+  transform: scale(1.1);
+}
+.dummyAlbum {
+  min-width: 160px;
+}
+@media (max-width: 480px), (max-height: 480px) {
+  #header {
+    width: 100%;
+  }
+  #trackList {
+    height: initial;
+    width: 100%;
+  }
+  .dummyAlbum {
+    min-width: 128px;
+  }
+}
+</style>

src/components/dialogs/ArtistMerge.vue

@@ -0,0 +1,115 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    title="Move all albums..."
+    buttonText="Move"
+    buttonClass="accept"
+    @accept="merge"
+    @closed="closed"
+    :closeOnButtonClick="false"
+    :enableFooterButtons="acceptable"
+  >
+    <div class="flex-row" id="merge-content">
+      <div class="flex-column">
+        <h4 class="ma-left ma-top">From</h4>
+        <ArtistItem class="ma" :item="source" />
+      </div>
+      <awesome-icon id="arrow-icon" icon="arrow-right" />
+      <div class="flex-column">
+        <DropDown class="ma-left ma-top">
+          <input
+            type="search"
+            v-model="search"
+            @search="searchTermChanged"
+            placeholder="Into"
+          />
+          <template v-slot:dropdown-content>
+            <div class="flex-column">
+              <h3 class="ma" v-if="artists.length == 0">
+                Enter an artist name
+              </h3>
+              <ArtistItem
+                class="ma8"
+                v-for="artist in artists"
+                :key="artist._id"
+                :item="artist"
+                @click="select(artist)"
+                type="line"
+              />
+            </div>
+          </template>
+        </DropDown>
+        <ArtistItem class="ma" :item="target" />
+      </div>
+    </div>
+  </DialogBase>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      artists: [],
+      search: "",
+      searchTimer: 0,
+      source: {},
+      target: { covers: {} },
+    };
+  },
+  methods: {
+    closed() {
+      this.artists = [];
+      this.source = {};
+      this.target = { covers: {} };
+      this.search = "";
+      clearTimeout(this.searchTimer);
+    },
+    open(source) {
+      this.source = source;
+      this.$refs.dialogWindow.open();
+    },
+    merge() {
+      this.$store
+        .dispatch("artists/move", {
+          source: this.source._id,
+          target: this.target._id,
+        })
+        .then(() => {
+          this.$store.dispatch("artists/loadArtist", this.target._id);
+          this.$store.dispatch("artists/selectArtistById", this.target._id);
+          this.$store.dispatch("artists/remove", this.source._id);
+          this.$refs.dialogWindow.close();
+        });
+    },
+    searchTermChanged() {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.$store.dispatch("artists/filter", this.search).then((result) => {
+          this.artists = result;
+        });
+      }, 250);
+    },
+    select(album) {
+      this.target = album;
+    },
+  },
+  computed: {
+    acceptable() {
+      return this.source._id != undefined && this.target._id != undefined;
+    },
+  },
+};
+</script>
+
+<style scoped>
+input {
+  width: 256px;
+}
+#arrow-icon {
+  align-self: center;
+}
+#merge-content {
+  align-items: flex-end;
+}
+</style>

src/components/dialogs/ArtistViewer.vue

@@ -0,0 +1,371 @@
+<template>
+  <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" />
+        <awesome-icon
+          icon="star"
+          size="2x"
+          class="favourite ma4"
+          :class="{ active: isFavourite }"
+          @click="toggleFavourite"
+        />
+        <h1 @dblclick="dblclick" class="hideOnMobileLandscape">
+          {{ selectedArtist.name }}
+        </h1>
+        <span id="stats" class="hideOnMobileLandscape ma-bottom">
+          <b>{{ artist_tracks.length }}</b> Tracks in
+          <b>{{ artist_albums.length }}</b> Albums with a duration of
+          <b>{{ artist_duration }}</b>
+        </span>
+        <div id="albumList" class="flex-row showOnMobile">
+          <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">
+          <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
+              @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
+              v-if="$store.getters['user/isAdministrator']"
+              class="hideOnMobile"
+            >
+              <button class="flat pa8-left pa8-right">
+                <awesome-icon icon="ellipsis-v" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button @click="uploadNewCover">
+                    <awesome-icon icon="image" />Set new Cover...
+                  </button>
+                  <button @click="resetCover">
+                    <awesome-icon icon="eraser" />Reset Cover
+                  </button>
+                  <hr />
+                  <button @click="mergeArtist">
+                    <awesome-icon icon="compress-alt" />Merge Artists...
+                  </button>
+                </div>
+              </template>
+            </DropDown>
+          </div>
+        </div>
+      </div>
+      <div class="flex-row overflow-y">
+        <div id="albumList" class="flex-column hideOnMobile">
+          <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)"
+          />
+        </div>
+        <ul
+          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>
+        </ul>
+      </div>
+    </div>
+    <ArtistMerge ref="mergeDialog" />
+  </DialogBase>
+</template>
+
+<script>
+import ArtistMerge from "./ArtistMerge";
+import TrackItem from "../Track";
+import { mapGetters } from "vuex";
+
+export default {
+  mounted() {
+    if (this.selectedArtist._id) {
+      this.$refs.dialogWindow.open();
+      window.addEventListener("keydown", this.keydownListener);
+    }
+  },
+  methods: {
+    dblclick() {
+      this.$store.commit("tracks/resetSelectedTrack");
+      this.$store.commit("radios/resetSelectedRadio");
+      this.$store.dispatch("tracks/playContainer", this.selectedArtist);
+    },
+    gotoTrack() {
+      if (this.$route.query.play) {
+        if (!this.selectedTrack._id) {
+          let track = this.selectedArtist.tracks.find(
+            (f) => f._id == this.$route.query.play
+          );
+          if (track) {
+            this.$store.dispatch("tracks/play", track);
+          }
+        }
+      }
+    },
+    gotoNextArtist() {
+      this.$store.dispatch("artists/gotoNextArtist");
+    },
+    gotoPrevArtist() {
+      this.$store.dispatch("artists/gotoPrevArtist");
+    },
+    closed() {
+      if (
+        window.history.state.back.indexOf("?") == -1 ||
+        window.history.state.back.startsWith("/search")
+      ) {
+        this.$router.back();
+      } else {
+        this.$store.dispatch("artists/resetSelectedArtist");
+      }
+    },
+    playAlbum(album) {
+      this.$store.dispatch("tracks/playContainer", album);
+    },
+    keydownListener(e) {
+      if (e.key == "ArrowLeft") {
+        e.preventDefault();
+        this.gotoPrevArtist();
+      }
+      if (e.key == "ArrowRight") {
+        e.preventDefault();
+        this.gotoNextArtist();
+      }
+    },
+    mergeArtist() {
+      this.$refs.mergeDialog.open(this.selectedArtist);
+    },
+    resetCover() {
+      this.$store.dispatch("artists/resetCover", this.selectedArtist);
+    },
+    scrollToAlbum(album) {
+      let track = album.tracks[0];
+      let control = this.$refs[track._id];
+      control[0].scrollFunction(true);
+      control = this.$refs[album._id];
+      control[0].scrollFunction();
+    },
+    toggleFavourite() {
+      this.$store.dispatch("user/toggleFavourite", {
+        itemId: this.selectedArtist._id,
+        type: "artist",
+      });
+    },
+    uploadNewCover() {
+      this.$store.dispatch("artists/uploadNewCover", this.selectedArtist);
+    },
+  },
+  computed: {
+    ...mapGetters({
+      prevArtist: ["artists/prevArtist"],
+      nextArtist: ["artists/nextArtist"],
+      selectedArtist: ["artists/selectedArtist"],
+      selectedTrack: ["tracks/selectedTrack"],
+      favourites: ["user/favourites"],
+    }),
+    cover() {
+      let covers = this.selectedArtist.covers;
+      if (covers.cover512) {
+        return covers.cover512;
+      }
+      return "/static/icons/dummy/artist.svg";
+    },
+    coverBackground() {
+      return "background-image: url('" + this.cover + "')";
+    },
+    artist_albums() {
+      return this.selectedArtist.albums || [];
+    },
+    artist_duration() {
+      let duration = 0;
+      let hours = 0;
+      let minutes = 0;
+      let seconds = 0;
+
+      this.selectedArtist.tracks.forEach((track) => {
+        duration += track.duration;
+      });
+
+      if (duration >= 3600) {
+        hours = parseInt(duration / 3600);
+        duration -= hours * 3600;
+      }
+
+      minutes = parseInt(duration / 60);
+      seconds = parseInt(duration - minutes * 60);
+      return (
+        (hours > 0 ? hours + ":" : "") +
+        (minutes < 10 ? "0" : "") +
+        minutes +
+        ":" +
+        (seconds < 10 ? "0" : "") +
+        seconds
+      );
+    },
+    artist_tracks() {
+      return this.selectedArtist.tracks || [];
+    },
+    isFavourite() {
+      return (
+        this.favourites.find((f) => f.itemId == this.selectedArtist._id) !=
+        undefined
+      );
+    },
+    playingAlbumId() {
+      if (this.selectedTrack) {
+        return this.selectedTrack.parent._id;
+      } else {
+        return "";
+      }
+    },
+  },
+  watch: {
+    selectedArtist(newVal) {
+      if (newVal._id) {
+        if (!this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.open();
+          window.addEventListener("keydown", this.keydownListener);
+        }
+        this.gotoTrack();
+      } else {
+        if (this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.close();
+        }
+        window.removeEventListener("keydown", this.keydownListener);
+      }
+    },
+  },
+  components: {
+    ArtistMerge,
+    TrackItem,
+  },
+};
+</script>
+
+<style scoped>
+#artistViewer {
+  height: 640px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+h1,
+#stats {
+  z-index: 1;
+  text-align: center;
+  width: 100%;
+  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);
+}
+
+.album.playing {
+  box-shadow: 0px 6px 12px #000000a0 !important;
+}
+
+.dialog-window.fullscreen #artistViewer,
+.dialog-window.fullscreen #header {
+  width: initial;
+  height: initial;
+}
+.dialog-body button {
+  color: var(--darkgray);
+}
+.container {
+  flex-grow: 0;
+}
+@media (max-width: 480px) {
+}
+
+@media (max-width: 480px), (max-height: 480px) {
+  #artistViewer {
+    height: initial;
+  }
+  #trackList {
+    width: initial;
+    height: initial;
+  }
+  #header {
+    width: initial;
+  }
+  #albumList {
+    background-color: initial;
+    align-self: center;
+    padding-bottom: 0;
+    max-width: 100%;
+  }
+}
+
+@media (max-height: 480px) {
+}
+</style>

src/components/dialogs/AudioUpload.vue

@@ -0,0 +1,262 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    :closeOnButtonClick="false"
+    :closeOnFocusLost="false"
+    :maxSize="true"
+    :enableFooterButtons="uploadable"
+    title="Upload audio files..."
+    buttonText="Upload"
+    buttonClass="success large"
+    @accept="uploadFiles(0)"
+    @closing="closing"
+  >
+    <div class="flex-column grow">
+      <input
+        style="display: none"
+        ref="files"
+        type="file"
+        accept="audio/*"
+        @change="openFiles"
+        multiple
+      />
+      <ul id="audioUploadFiles">
+        <li v-for="(file, i) in files" :key="i" class="pa-top">
+          <h4 class="ma-left darkgray-text">{{ file.name }}</h4>
+          <div class="flex-row ma">
+            <awesome-icon
+              :icon="file.state == 'uploading' ? 'upload' : 'check'"
+              size="2x"
+              :class="{
+                'success-text': file.state == 'done',
+                'gray-text': file.state == 'ready',
+                'primary-text': file.state == 'uploading',
+              }"
+            />
+            <input
+              placeholder="artist name"
+              type="text"
+              v-model="file.tags.artist"
+              class="left pa8"
+            />
+            <input
+              placeholder="album name"
+              type="text"
+              v-model="file.tags.album"
+              class="pa8"
+            />
+            <input
+              placeholder="track number"
+              title="track number"
+              type="text"
+              v-model="file.tags.track"
+              style="width: 32px"
+              class="right pa8"
+            />
+            <input
+              placeholder="track title"
+              type="text"
+              v-model="file.tags.title"
+              class="pa8 grow"
+            />
+            <input
+              placeholder="genre"
+              type="text"
+              v-model="file.tags.genre"
+              class="pa8"
+            />
+            <input
+              placeholder="year"
+              type="text"
+              v-model="file.tags.year"
+              style="width: 48px"
+              class="right pa8"
+            />
+            <button
+              class="danger"
+              title="Remove from list"
+              @click="remove(file)"
+            >
+              <awesome-icon icon="minus" />
+            </button>
+          </div>
+          <hr />
+        </li>
+      </ul>
+
+      <div
+        class="flex-column grow center ma primary-text"
+        id="dropzone"
+        @dragover="dropover"
+        @drop="droped"
+        @click="emitFileClick"
+      >
+        <h2>
+          Drop your files here<br />
+          <awesome-icon icon="plus" size="4x" />
+        </h2>
+      </div>
+    </div>
+  </DialogBase>
+</template>
+
+
+
+<script>
+import mmreader from "mp3tag.js";
+
+export default {
+  data() {
+    return {
+      files: [],
+    };
+  },
+  methods: {
+    open() {
+      this.$refs.dialogWindow.open();
+    },
+    closing() {
+      this.files = [];
+    },
+    dropover(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    droped(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      let files = [];
+      for (let i = 0; i < e.dataTransfer.files.length; i++) {
+        let file = e.dataTransfer.files[i];
+        if (file.type.indexOf("audio/") == 0) {
+          files.push({ file: file, state: "ready" });
+        }
+      }
+      if (files.length > 0) {
+        this.readTags(files, 0);
+      }
+    },
+    emitFileClick() {
+      this.$refs.files.click();
+    },
+    openFiles(e) {
+      let files = [];
+      if (e.srcElement.value) {
+        for (let i = 0; i < e.srcElement.files.length; i++) {
+          let file = e.srcElement.files[i];
+          files.push({ file: file, state: "ready" });
+        }
+        this.readTags(files, 0);
+      }
+    },
+    readTags(files, index) {
+      let fileReader = new FileReader();
+      var file = files[index];
+      fileReader.onload = () => {
+        if (!this.files.find((f) => f.file.name == file.file.name)) {
+          const mp3tag = new mmreader(fileReader.result);
+          mp3tag.read();
+          file.tags = {};
+          file.tags.title = mp3tag.tags.title;
+          file.tags.artist = mp3tag.tags.artist;
+          file.tags.album = mp3tag.tags.album;
+          file.tags.track = mp3tag.tags.track;
+          file.tags.year = mp3tag.tags.year;
+          if (!file.tags.title || file.tags.title.trim() == "") {
+            file.tags.title = file.file.name;
+          }
+          this.files.push(file);
+        }
+        if (files.length > index + 1) {
+          this.readTags(files, ++index);
+        } else {
+          this.files.sort((a, b) => {
+            if (
+              a.tags.artist > b.tags.artist ||
+              (a.tags.artist == b.tags.artist && a.tags.album > b.tags.album) ||
+              (a.tags.artist == b.tags.artist &&
+                a.tags.album == b.tags.album &&
+                a.tags.track > b.tags.track) ||
+              (a.tags.artist == b.tags.artist &&
+                a.tags.album == b.tags.album &&
+                a.tags.track == b.tags.track &&
+                a.tags.title > b.tags.title)
+            ) {
+              return 1;
+            }
+            return -1;
+          });
+        }
+      };
+      fileReader.readAsArrayBuffer(file.file);
+    },
+    remove(file) {
+      this.files.splice(this.files.indexOf(file), 1);
+    },
+    uploadFiles(index = 0) {
+      if (this.files.length > index) {
+        let file = this.files[index];
+        if (file.state == "ready") {
+          file.state = "uploading";
+          let formData = new FormData();
+
+          formData.append("file", file.file);
+          formData.append("track", JSON.stringify(file.tags));
+
+          this.$store
+            .dispatch("tracks/upload", formData)
+            .then(() => {
+              file.state = "done";
+              this.uploadFiles(++index);
+            })
+            .catch((err) => {
+              console.log(err);
+              this.$refs.dialogWindow.messageText = err;
+            });
+        } else {
+          this.uploadFiles(++index);
+        }
+      } else {
+        this.$store.dispatch("albums/loadNewest");
+        this.$refs.dialogWindow.close();
+      }
+    },
+  },
+  computed: {
+    uploadable() {
+      let has_empty_artist =
+        this.files.find((f) => (f.tags.artist || "").trim() == "") != undefined;
+      let has_empty_album =
+        this.files.find((f) => (f.tags.album || "").trim() == "") != undefined;
+      let has_empty_title =
+        this.files.find((f) => (f.tags.title || "").trim() == "") != undefined;
+      let has_empty_track =
+        this.files.find((f) => (f.tags.track || "").trim() == "") != undefined;
+      return (
+        !has_empty_artist &&
+        !has_empty_album &&
+        !has_empty_title &&
+        !has_empty_track
+      );
+    },
+  },
+};
+</script>
+
+<style scoped>
+#audioUploadFiles input {
+  border: none;
+  font-size: large;
+}
+#audioUploadFiles button {
+  height: 32px;
+  min-width: 32px;
+  justify-content: center;
+  align-self: center;
+  border-radius: 16px;
+}
+#dropzone {
+  border: 2px dashed var(--primary);
+  cursor: pointer;
+}
+</style>

src/components/dialogs/BoxMerge.vue

@@ -0,0 +1,113 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    title="Move all videos..."
+    buttonText="Move"
+    buttonClass="accept"
+    @accept="merge"
+    @closed="closed"
+    :closeOnButtonClick="false"
+    :enableFooterButtons="acceptable"
+  >
+    <div class="flex-row" id="merge-content">
+      <div class="flex-column">
+        <h4 class="ma-left ma-top">From</h4>
+        <BoxItem class="ma" :item="source" />
+      </div>
+      <awesome-icon id="arrow-icon" icon="arrow-right" />
+      <div class="flex-column">
+        <DropDown class="ma-left ma-top">
+          <input
+            type="search"
+            v-model="search"
+            @search="searchTermChanged"
+            placeholder="Into"
+          />
+          <template v-slot:dropdown-content>
+            <div class="flex-column">
+              <h3 class="ma" v-if="boxes.length == 0">Enter an box title</h3>
+              <BoxItem
+                class="ma8"
+                v-for="box in boxes"
+                :key="box._id"
+                :item="box"
+                @click="select(box)"
+                type="line"
+              />
+            </div>
+          </template>
+        </DropDown>
+        <BoxItem class="ma" :item="target" />
+      </div>
+    </div>
+  </DialogBase>
+</template>
+
+
+<script>
+export default {
+  data() {
+    return {
+      boxes: [],
+      search: "",
+      searchTimer: 0,
+      source: {},
+      target: { covers: {} },
+    };
+  },
+  methods: {
+    closed() {
+      this.boxes = [];
+      this.source = {};
+      this.target = { covers: {} };
+      this.search = "";
+      clearTimeout(this.searchTimer);
+    },
+    open(source) {
+      this.source = source;
+      this.$refs.dialogWindow.open();
+    },
+    merge() {
+      this.$store
+        .dispatch("boxes/move", {
+          source: this.source._id,
+          target: this.target._id,
+        })
+        .then(() => {
+          this.$store.dispatch("boxes/loadBox", this.target._id);
+          this.$store.dispatch("boxes/selectBoxById", this.target._id);
+          this.$store.dispatch("boxes/remove", this.source._id);
+          this.$refs.dialogWindow.close();
+        });
+    },
+    searchTermChanged() {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.$store.dispatch("boxes/filter", this.search).then((result) => {
+          this.boxes = result;
+        });
+      }, 250);
+    },
+    select(album) {
+      this.target = album;
+    },
+  },
+  computed: {
+    acceptable() {
+      return this.source._id != undefined && this.target._id != undefined;
+    },
+  },
+};
+</script>
+
+<style scoped>
+input {
+  width: 128px;
+}
+#arrow-icon {
+  align-self: center;
+}
+#merge-content {
+  align-items: flex-end;
+}
+</style>

src/components/dialogs/BoxViewer.vue

@@ -0,0 +1,301 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    :title="selectedBox.title"
+    @canceled="closed"
+    :showFooter="false"
+    :closeOnEscape="selectedVideo._id == null"
+    :disableXscroll="true"
+    :disableYscroll="true"
+  >
+    <div id="boxViewer">
+      <div id="header" class="flex-column">
+        <div id="background" :style="coverBackground" />
+        <awesome-icon
+          icon="star"
+          size="2x"
+          class="favourite ma4 z2"
+          :class="{ active: isFavourite }"
+          @click="toggleFavourite"
+        />
+        <div id="navigation" class="flex-row grow center z1">
+          <img class="glow ma" :src="cover" @dblclick="dblclick" />
+        </div>
+        <div id="stats" class="z1 pa4">
+          <div class="flex-row">
+            <DropDown v-if="$store.getters['user/isAdministrator']">
+              <button
+                class="flat ma4 pa8-left pa8-right"
+                :title="visibility_text"
+              >
+                <awesome-icon :icon="visibility_icon" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button
+                    v-for="(item, i) in $store.state.system.lists.visibility"
+                    :key="i"
+                    @click="setVisibility(item)"
+                  >
+                    <awesome-icon :icon="getVisibilityIcon(item)" />{{
+                      getVisibilityText(item)
+                    }}
+                  </button>
+                </div>
+              </template>
+            </DropDown>
+            <span class="grow center">
+              <b>{{ selectedBox.title }}</b>
+              <br />
+              <b>{{ box_videos.length }}</b> Videos
+            </span>
+            <DropDown v-if="$store.getters['user/isAdministrator']">
+              <button class="flat ma4 pa8-left pa8-right">
+                <awesome-icon icon="ellipsis-v" />
+              </button>
+              <template v-slot:dropdown-content>
+                <div>
+                  <button @click="uploadNewCover">
+                    <awesome-icon icon="image" />Set new Cover...
+                  </button>
+                  <button @click="resetCover">
+                    <awesome-icon icon="eraser" />Reset Cover
+                  </button>
+                  <hr />
+                  <button @click="mergeBox">
+                    <awesome-icon icon="compress-alt" />Merge Boxes...
+                  </button>
+                </div>
+              </template>
+            </DropDown>
+          </div>
+        </div>
+      </div>
+
+      <ul id="videoList" class="videos">
+        <li v-for="item in selectedBox.videos" :key="item._id">
+          <VideoItem :video="item" />
+        </li>
+      </ul>
+    </div>
+    <BoxMerge ref="mergeDialog" />
+  </DialogBase>
+</template>
+
+<script>
+import BoxMerge from "./BoxMerge";
+import VideoItem from "../Video";
+import { mapGetters } from "vuex";
+
+export default {
+  methods: {
+    dblclick() {
+      this.$store.commit("tracks/resetSelectedTrack");
+      this.$store.commit("radios/resetSelectedRadio");
+      this.$store.dispatch("videos/playContainer", this.selectedBox);
+    },
+    gotoVideo() {
+      if (this.$route.query.play) {
+        let video = this.selectedBox.videos.find(
+          (f) => f._id == this.$route.query.play
+        );
+        if (video) {
+          this.$store.dispatch("videos/play", video);
+        }
+      }
+    },
+    gotoNextBox() {
+      this.$store.dispatch("boxes/gotoNextBox");
+    },
+    gotoPrevBox() {
+      this.$store.dispatch("boxes/gotoPrevBox");
+    },
+    closed() {
+      if (
+        window.history.state.back.indexOf("?") == -1 ||
+        window.history.state.back.startsWith("/search")
+      ) {
+        this.$router.back();
+      } else {
+        this.$store.dispatch("boxes/resetSelectedBox");
+      }
+    },
+    keydownListener(e) {
+      if (e.key == "ArrowLeft") {
+        e.preventDefault();
+        this.gotoPrevBox();
+      }
+      if (e.key == "ArrowRight") {
+        e.preventDefault();
+        this.gotoNextBox();
+      }
+    },
+    mergeBox() {
+      this.$refs.mergeDialog.open(this.selectedBox);
+    },
+    toggleFavourite() {
+      this.$store.dispatch("user/toggleFavourite", {
+        itemId: this.selectedBox._id,
+        type: "box",
+      });
+    },
+    setVisibility(visibility) {
+      this.selectedBox.visibility = visibility;
+      this.$store.dispatch("boxes/updateBox", this.selectedBox);
+    },
+    uploadNewCover() {
+      this.$store.dispatch("boxes/uploadNewCover", this.selectedBox);
+    },
+    getVisibilityIcon(visibility) {
+      return visibility == "global"
+        ? "globe"
+        : visibility == "instance"
+        ? "server"
+        : visibility == "hidden"
+        ? "eye-slash"
+        : "user";
+    },
+    getVisibilityText(visibility) {
+      return visibility == "global"
+        ? "Global"
+        : visibility == "instance"
+        ? "On this server"
+        : visibility == "hidden"
+        ? "Hide this Box"
+        : "Only for me";
+    },
+    resetCover() {
+      this.$store.dispatch("boxes/resetCover", this.selectedBox);
+    },
+  },
+  computed: {
+    ...mapGetters({
+      prevBox: ["boxes/prevBox"],
+      nextBox: ["boxes/nextBox"],
+      selectedBox: ["boxes/selectedBox"],
+      selectedVideo: ["videos/selectedVideo"],
+      favourites: ["user/favourites"],
+    }),
+    box_videos() {
+      return this.selectedBox.videos || [];
+    },
+    box_year() {
+      return this.selectedBox.year;
+    },
+    coverBackground() {
+      return "background-image: url('" + this.cover + "')";
+    },
+    cover() {
+      let cover = "/static/icons/dummy/box.svg";
+      if (this.selectedBox.covers && this.selectedBox.covers.cover256) {
+        cover = this.selectedBox.covers.cover256;
+      }
+      return cover;
+    },
+    isFavourite() {
+      return (
+        this.favourites.find((f) => f.itemId == this.selectedBox._id) !=
+        undefined
+      );
+    },
+    visibility_icon() {
+      return this.selectedBox.visibility == "global"
+        ? "globe"
+        : this.selectedBox.visibility == "instance"
+        ? "server"
+        : this.selectedBox.visibility == "hidden"
+        ? "eye-slash"
+        : "user";
+    },
+    visibility_text() {
+      return this.selectedBox.visibility == "global"
+        ? "Visible for the whole world"
+        : this.selectedBox.visibility == "instance"
+        ? "Visible on this instance"
+        : this.selectedBox.visibility == "hidden"
+        ? "Hidden for all users"
+        : "Visible only for me";
+    },
+  },
+  watch: {
+    selectedBox(newVal) {
+      if (newVal._id) {
+        if (!this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.open();
+          window.addEventListener("keydown", this.keydownListener);
+        }
+        this.gotoVideo();
+      } else {
+        if (this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.close();
+        }
+        window.removeEventListener("keydown", this.keydownListener);
+      }
+    },
+  },
+  components: {
+    BoxMerge,
+    VideoItem,
+  },
+};
+</script>
+
+<style scoped>
+#boxViewer {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+}
+#header {
+  position: relative;
+  min-width: 280px;
+  background-color: black;
+}
+
+#videoList {
+  height: 440px;
+  background-color: var(--white);
+  z-index: 1;
+  overflow: overlay;
+}
+
+#stats {
+  z-index: 2;
+  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;
+}
+
+.video {
+  width: 220px;
+}
+
+@media (max-width: 480px) {
+  #boxViewer {
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 480px), (max-height: 480px) {
+  #videoList {
+    max-height: initial;
+    height: initial;
+  }
+  .video {
+    width: initial;
+  }
+
+  #navigation img{
+    height: 220px;
+  }
+}
+@media (max-height: 480px) {
+  #navigation {
+align-items: center;
+  }
+}
+</style>

src/components/dialogs/DesktopSettings.vue

@@ -0,0 +1,45 @@
+<template>
+  <DialogBase ref="dialogWindow" title="Settings" @closed="closed">
+    <div id="settingsBody">
+      <table class="configValues">
+        <tr>
+          <td colspan="2">
+            <h4>Configuration</h4>
+          </td>
+        </tr>
+        <tr>
+          <td>Backend</td>
+          <td>
+            <input v-model.lazy="backend" @change="backendChanged" />
+          </td>
+        </tr>
+      </table>
+    </div>
+  </DialogBase>
+</template>
+<script>
+export default {
+  name: "SettingsDialog",
+  data() {
+    return {
+      backend: "",
+      newBackend: false,
+    };
+  },
+  methods: {
+    open() {
+      this.$refs.dialogWindow.open();
+      this.backend = this.$store.state.server;
+    },
+    backendChanged() {
+      this.$store.dispatch("setNewBackend", this.backend);
+      this.newBackend = true;
+    },
+    closed() {
+      if (this.newBackend) {
+        window.location.href = "/";
+      }
+    },
+  },
+};
+</script>

src/components/dialogs/Radios.vue

@@ -0,0 +1,121 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    title="Radio Stations"
+    :showCloseButton="false"
+    @closed="closed"
+    buttonText="close"
+  >
+    <template v-slot:header-right>
+      <div id="newRadio">
+        <input
+          id="radioName"
+          ref="newName"
+          v-model="newName"
+          type="text"
+          placeholder="Station Name"
+          required
+          pattern=".+"
+        />
+        <input
+          id="radioUrl"
+          ref="newUrl"
+          v-model="newUrl"
+          type="text"
+          placeholder="Add a stream url"
+          required
+          pattern="https?://.+"
+          @keydown.enter="addRadio"
+        />
+        <button @click="addRadio" title="Add new Radio Station" class="success">
+          <awesome-icon icon="plus" />
+        </button>
+      </div>
+    </template>
+    <div
+      id="radiosBody"
+      class="ma4-top ma4-left ma4-bottom"
+      v-if="$store.getters['radios/collection'].length > 0"
+    >
+      <table>
+        <thead>
+          <tr>
+            <th colspan="2">Name</th>
+            <th class="maxWidth">Url</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(radio, i) in $store.getters['radios/collection']"
+            :key="i"
+          >
+            <td>
+              <img
+                class="radioCover"
+                :src="radio.cover32"
+                @click="updateCover(radio)"
+              />
+            </td>
+            <td>{{ radio.name }}</td>
+            <td>{{ radio.url }}</td>
+            <td>
+              <button
+                @click="deleteRadio(radio)"
+                title="Remove Radio Station"
+                class="flat"
+              >
+                <awesome-icon icon="trash-alt" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </DialogBase>
+</template>
+<script>
+export default {
+  name: "RadiosDialog",
+  data() {
+    return {
+      newName: "",
+      newUrl: "",
+    };
+  },
+  methods: {
+    open() {
+      this.$store.state.systemDialog = true;
+      this.$refs.dialogWindow.open();
+      this.$nextTick(() => {
+        this.$refs.newName.focus();
+      });
+    },
+    closed() {
+      this.$store.state.systemDialog = false;
+    },
+    isInputValid() {
+      let inputs = document.querySelectorAll("#newRadio input");
+      for (let i = 0; i < inputs.length; i++) {
+        if (!inputs[i].validity.valid) {
+          inputs[i].focus();
+          return false;
+        }
+      }
+      return true;
+    },
+    addRadio() {
+      if (this.isInputValid()) {
+        let newRadio = { name: this.newName, url: this.newUrl };
+        this.$store.dispatch("radios/addRadio", newRadio);
+      }
+    },
+    deleteRadio(radio) {
+      this.$store.dispatch("radios/deleteRadio", radio);
+    },
+    updateCover(radio) {
+      this.$store.dispatch("radios/updateRadio", radio);
+    },
+  },
+};
+</script>

src/components/dialogs/ServerSettings.vue

@@ -0,0 +1,119 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    title="Server Settings"
+    @accept="accept"
+    @closing="closing"
+    :closeOnButtonClick="false"
+    :closeOnFocusLost="false"
+    buttonText="Accept"
+    buttonClass="accept"
+  >
+    <h4 class="ma-top">General</h4>
+    <hr class="ma-right ma-left" />
+    <ul class="ma">
+      <li>
+        <input type="checkbox" id="allowGuests" v-model="allows.guests" />
+        <label for="allowGuests">Allow Guests</label>
+      </li>
+      <li>
+        <input
+          type="checkbox"
+          id="allowRegistrations"
+          v-model="allows.register"
+        />
+        <label for="allowRegistrations">Allow Registration</label>
+      </li>
+    </ul>
+    <h4 class="ma-top">Actions</h4>
+    <hr class="ma-right ma-left" />
+    <div><button class="danger ma" @click="resetRedisCache">Reset Redis Cache</button></div>
+
+    <h4 class="ma-top">Accepted Domains</h4>
+    <hr class="ma-right ma-left" />
+    <ul class="ma-top ma-left">
+      <li v-for="(domain, i) in domains.const" :key="i">
+        <span> {{ domain }}</span>
+      </li>
+      <li v-for="(domain, i) in domains.dynamic" :key="i">
+        <span> {{ domain }}</span
+        ><button class="flat danger" @click="removeDomain(domain)">
+          <awesome-icon icon="trash-alt" />
+        </button>
+      </li>
+    </ul>
+    <input
+      type="url"
+      class="ma"
+      v-model="newDomain"
+      placeholder="Add new domain"
+      @change="addDomain"
+    />
+  </DialogBase>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      allows: { guests: false, register: false },
+      domains: {},
+      newDomain: "",
+    };
+  },
+  methods: {
+    accept() {
+      this.$store.dispatch("saveSystemAllows", this.allows);
+      this.$store.dispatch("saveSystemDomains", this.domains);
+      this.$refs.dialogWindow.close();
+    },
+    addDomain(e) {
+      if (e.srcElement.checkValidity()) {
+        this.domains.dynamic.push(this.newDomain);
+        this.newDomain = "";
+      }
+    },
+    closing() {},
+    open() {
+      this.allows = { ...this.$store.getters.serverConfig.allows };
+      this.$store.dispatch("loadSystemDomains").then((domains) => {
+        this.domains = { ...domains };
+      });
+      this.$refs.dialogWindow.open();
+    },
+    removeDomain(domain) {
+      this.domains.dynamic.splice(this.domains.dynamic.indexOf(domain), 1);
+    },
+    resetRedisCache(){
+      this.$store.dispatch("resetRedisCache");
+    }
+  },
+};
+</script>
+<style scoped>
+h4 {
+  margin-left: 12px;
+}
+li {
+  display: flex;
+  flex-direction: row;
+}
+li:not(:last-child) {
+  display: flex;
+  margin-bottom: 12px;
+}
+li input {
+  margin-right: 4px;
+}
+li span {
+  flex-grow: 1;
+}
+li button {
+  opacity: 0.25;
+}
+li button:hover {
+  opacity: 1;
+}
+input[type="url"] {
+  margin-right: 24px;
+}
+</style>

src/components/dialogs/UserProfile.vue

@@ -0,0 +1,167 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    :title="$store.state.user.name + '\'s Profile'"
+    @closed="closed"
+    :showCloseButton="false"
+    :closeOnFocusLost="false"
+    :closeOnEscape="false"
+  >
+    <div id="profileBody" class="ma">
+      <table class="padding">
+        <tr>
+          <td colspan="2"><h4>Set new password</h4></td>
+        </tr>
+        <tr>
+          <td colspan="2">
+            <div id="newUserPass">
+              <input
+                autocomplete="off"
+                type="password"
+                ref="oldPass"
+                v-model="oldPass"
+                placeholder="Current Password"
+              />
+
+              <input
+                autocomplete="off"
+                type="password"
+                ref="newPass"
+                v-model="newPass"
+                placeholder="New Password"
+                @keydown.enter="changePassword"
+              />
+            </div>
+          </td>
+        </tr>
+        <tr></tr>
+        <tr>
+          <td colspan="2"><h4 class="ma-top">Configuration</h4></td>
+        </tr>
+        <tr>
+          <td>Clear history</td>
+          <td>
+            <button @click="clearHistory">clear</button>
+          </td>
+        </tr>
+        <tr>
+          <td colspan="2"><h4 class="ma-top">Audioquality</h4></td>
+          <td colspan="2"><h4 class="ma-top">Video</h4></td>
+        </tr>
+        <tr>
+          <td>On Moble Devices</td>
+          <td>
+            <select v-model="$store.getters['user/settings'].mobile_bpm">
+              <option
+                v-for="(item, i) in this.$store.state.system.lists
+                  .audio_quality"
+                :key="i"
+              >
+                {{ item }}
+              </option>
+            </select>
+            <span>kBit/s</span>
+          </td>
+          <td>Preferred Language</td>
+          <td class="fillCell">
+            <select v-model="$store.getters['user/settings'].video_lang">
+              <option
+                v-for="(item, i) in this.$store.state.system.lists.video_lang"
+                :key="i"
+              >
+                {{ item }}
+              </option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>On Desktop Devices</td>
+          <td>
+            <select v-model="$store.getters['user/settings'].desktop_bpm">
+              <option
+                v-for="(item, i) in this.$store.state.system.lists
+                  .audio_quality"
+                :key="i"
+              >
+                {{ item }}
+              </option>
+            </select>
+            <span>kBit/s</span>
+          </td>
+          <td>Quality</td>
+          <td class="fillCell">
+            <select v-model="$store.getters['user/settings'].video_quality">
+              <option
+                v-for="(item, i) in this.$store.state.system.lists
+                  .video_quality"
+                :key="i"
+              >
+                {{ item }}
+              </option>
+            </select>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </DialogBase>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loaded: false,
+      oldPass: "",
+      newPass: "",
+    };
+  },
+  methods: {
+    open() {
+      if (!this.loaded) {
+        this.$store.dispatch("system/loadLists");
+        this.$store.state.systemDialog = true;
+        this.loaded = true;
+      }
+      this.$refs.dialogWindow.open();
+      this.$nextTick(() => {
+        this.$refs.oldPass.focus();
+      });
+    },
+    closed() {
+      this.$store.dispatch("user/updateConfig");
+      this.$store.state.systemDialog = false;
+    },
+    changePassword() {
+      console.log("changePassword");
+      let user = { oldPass: this.oldPass, newPass: this.newPass };
+      this.$store
+        .dispatch("user/update", user)
+        .then((response) => {
+          switch (response.status) {
+            case 202:
+              this.oldPass = "";
+              this.newPass = "";
+              this.$refs.dialogWindow.messageText = "Password changed";
+              this.$refs.dialogWindow.focusButton();
+              break;
+          }
+        })
+        .catch((e) => {
+          switch (e.status) {
+            case 401:
+              this.$refs.dialogWindow.messageText = "Not Authorized";
+              break;
+            case 422:
+              this.$refs.oldPass.focus();
+              this.$refs.oldPass.select();
+              this.$refs.dialogWindow.messageText = "Password is incorrect";
+              break;
+          }
+        });
+    },
+
+    clearHistory() {
+      this.$store.dispatch("user/cleanHistory");
+    },
+  },
+};
+</script>

src/components/dialogs/Users.vue

@@ -0,0 +1,214 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    title="Users"
+    :showCloseButton="false"
+    buttonText="Close"
+    @closed="closed"
+    @opened="loadContent"
+  >
+    <template v-slot:header-right>
+      <div id="newUser">
+        <input
+          placeholder="New User"
+          v-model="newUser"
+          ref="newUser"
+          type="text"
+          required
+          pattern=".+"
+          autocomplete="one-time-code"
+        />
+        <input
+          placeholder="Password"
+          v-model="newPass"
+          ref="newPass"
+          type="password"
+          @keydown.enter="validateAndSaveInput"
+          required
+          pattern=".{5,}"
+        />
+        <button
+          @click="validateAndSaveInput"
+          title="Add new Useraccount"
+          class="success"
+        >
+          <awesome-icon icon="user-plus" />
+        </button>
+      </div>
+    </template>
+    <div id="usersBody" class="ma-top ma-left ma-bottom">
+      <table class="padding">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th v-if="$store.getters['user/isAdministrator']">Roles</th>
+            <th>Last Access</th>
+            <th>Change Password</th>
+            <th class="slim" v-if="$store.getters['user/isAdministrator']"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(user, i) in users" :key="i">
+            <td :class="{ me: user._id == me._id }">
+              {{ user.name }}
+            </td>
+            <td v-if="$store.getters['user/isAdministrator']">
+              <DropDown v-if="user._id != me._id" :closeOnClick="false">
+                <button class="flat">
+                  <awesome-icon icon="user-cog" />
+                </button>
+                <template v-slot:dropdown-content>
+                  <div
+                    class="user-role ma4"
+                    v-for="(role, i) in lists.user_role"
+                    :key="i"
+                  >
+                    <input
+                      :id="role"
+                      class="ma4-right"
+                      type="checkbox"
+                      :checked="user.roles && user.roles.includes(role)"
+                      @change="changeRole(user, role)"
+                    />
+                    <label :for="role">{{ role }}</label>
+                  </div>
+                </template>
+              </DropDown>
+            </td>
+            <td class="right">{{ user.last_access }}</td>
+            <td>
+              <input
+                type="password"
+                placeholder="New Password"
+                @keydown.enter="updateUser(user, $event)"
+              />
+            </td>
+            <td v-if="$store.getters['user/isAdministrator']" class="slim">
+              <button
+                @click="deleteUser(user)"
+                title="Remove Useraccount"
+                class="flat danger"
+                v-if="user._id != me._id"
+              >
+                <awesome-icon icon="trash-alt" />
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </DialogBase>
+</template>
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  name: "UsersDialog",
+  data() {
+    return {
+      newUser: "",
+      newPass: "",
+    };
+  },
+  methods: {
+    open() {
+      this.$store.state.systemDialog = true;
+      this.$refs.dialogWindow.open();
+      this.$nextTick(() => {
+        this.$refs.newUser.focus();
+      });
+    },
+    closed() {
+      this.$store.state.systemDialog = false;
+    },
+    loadContent() {
+      this.$store.dispatch("system/loadUsers");
+    },
+    updateUser(user, event) {
+      var newUserPassword = event.srcElement.value;
+      if (newUserPassword.length == 0) {
+        console.log("No Password");
+        return;
+      }
+      user.newPassword = newUserPassword;
+      this.$store.dispatch("system/updateUser", user).then(() => {
+        this.$refs.dialogWindow.messageText =
+          "Password changed for " + user.name;
+        this.$refs.dialogWindow.focusButton();
+      });
+    },
+    deleteUser(user) {
+      this.$store.dispatch("system/deleteUser", user);
+    },
+    validateAndSaveInput() {
+      this.newUser = this.newUser.trim();
+      if (this.newUser.length == 0) {
+        this.$refs.dialogWindow.messageText = "No Username";
+        this.$refs.newUser.focus();
+        return;
+      }
+      if (this.newPass.length == 0) {
+        this.$refs.dialogWindow.messageText = "No Password";
+        this.$refs.newPass.focus();
+        return;
+      }
+
+      let newUser = { name: this.newUser, password: this.newPass };
+      this.$store
+        .dispatch("system/addUserIfNotExists", newUser)
+        .then((success) => {
+          if (!success) {
+            this.$refs.dialogWindow.messageText = "Username bereits vergeben";
+          }
+        });
+    },
+    changeRole(user, role) {
+      let i = user.roles.indexOf(role);
+      if (i > -1) {
+        user.roles.splice(i, 1);
+      } else {
+        user.roles.push(role);
+      }
+      delete user.newPassword;
+      this.$store.dispatch("system/updateUser", user);
+    },
+  },
+  computed: {
+    ...mapGetters({
+      users: ["system/users"],
+      lists: ["system/lists"],
+    }),
+    me() {
+      return this.$store.state.user;
+    },
+  },
+};
+</script>
+
+<style scoped>
+#newUser {
+  display: flex;
+}
+#usersBody th {
+  text-align: left;
+}
+#usersBody td {
+  color: var(--gray);
+}
+#usersBody .me {
+  font-weight: bold;
+}
+#usersBody table button {
+  opacity: 0.25;
+}
+#usersBody table button:hover {
+  opacity: 1;
+}
+#usersBody .user-role {
+  display: flex;
+  align-items: center;
+}
+td input {
+  width: 100%;
+}
+</style>

src/components/dialogs/VideoScreen.vue

@@ -0,0 +1,173 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    @closing="closing"
+    :showFooter="false"
+    :showFullscreenButton="true"
+  >
+    <template v-slot:header-right>
+      <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>
+  </DialogBase>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      video: undefined,
+      languages: [],
+      selectedLang: {},
+      preConvert: false,
+    };
+  },
+  methods: {
+    langChanged() {
+      this.video.src =
+        this.$store.getters["videos/getStreamUrl"] + this.langIndex;
+      this.video.play();
+    },
+    playVideo(video) {
+      this.$store.commit("radios/resetSelectedRadio");
+      this.$store.commit("tracks/resetSelectedTrack");
+      this.$refs.dialogWindow.open(video.title);
+      this.preConvert = false;
+      this.languages = [];
+      if (!this.video) {
+        this.$nextTick(() => {
+          this.video = this.$refs.videoControl;
+          this.playStream(video);
+        });
+      } else {
+        this.playStream(video);
+      }
+    },
+    playStream(video) {
+      let lastLang = this.selectedLang.lang;
+      let findLang = video.tracks.find(
+        (f) =>
+          f.lang.toUpperCase() ==
+          (
+            lastLang ||
+            this.$store.getters["user/settings"].video_lang ||
+            "ENG"
+          ).toUpperCase()
+      );
+
+      this.selectedLang = findLang || video.tracks[0];
+
+      this.video.src =
+        this.$store.getters["videos/getStreamUrl"] + this.langIndex;
+      this.video.play();
+
+      this.pushHistoryItem();
+    },
+    nextVideo() {
+      this.$store.dispatch("videos/playNextTo", this.selectedVideo);
+    },
+    pushHistoryItem() {
+      let item = {
+        id: this.selectedVideo.parent._id,
+        type: "box",
+        title: this.selectedVideo.parent.title,
+        covers: { cover128: this.selectedVideo.parent.covers.cover128 },
+      };
+      this.$store.dispatch("user/saveHistoryItem", item);
+      this.scaleImage(this.selectedVideo.thumbnail, 0.5, (img) => {
+        item = {
+          id: this.selectedVideo._id,
+          type: "video",
+          title: this.selectedVideo.title,
+          thumbnail: img,
+          parent: { _id: this.selectedVideo.parent._id },
+        };
+        this.$store.dispatch("user/saveHistoryItem", item);
+      });
+    },
+    timeUpdate(event) {
+      let percent = (event.target.currentTime / event.target.duration) * 100;
+      if (percent > 30 && !this.preConvert) {
+        this.preConvert = true;
+        this.$store.dispatch("videos/convertNextTo", {
+          video: this.selectedVideo,
+          langIndex: this.langIndex,
+        });
+      }
+    },
+    closing() {
+      this.video = undefined;
+      this.$store.dispatch("videos/resetSelectedVideo");
+    },
+    scaleImage(src, factor, callback) {
+      let img = document.createElement("img");
+
+      img.onload = () => {
+        var canvas = document.createElement("canvas");
+        var ctx = canvas.getContext("2d");
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = "high";
+
+        canvas.width = img.width * factor;
+        canvas.height = img.height * factor;
+
+        let width = img.width;
+        let height = img.height;
+
+        ctx.drawImage(
+          img,
+          0,
+          0,
+          width,
+          height,
+          0,
+          0,
+          width * factor,
+          height * factor
+        );
+
+        callback(canvas.toDataURL());
+      };
+      img.src = src;
+    },
+  },
+  computed: {
+    selectedVideo() {
+      return this.$store.getters["videos/selectedVideo"];
+    },
+    langIndex() {
+      return this.selectedVideo.tracks.indexOf(this.selectedLang);
+    },
+  },
+  watch: {
+    selectedVideo(newVal) {
+      if (newVal._id) {
+        this.playVideo(newVal);
+      } else {
+        if (this.$refs.dialogWindow.visible) {
+          this.$refs.dialogWindow.close();
+        }
+      }
+    },
+  },
+};
+</script>

src/components/dialogs/VideoUpload.vue

@@ -0,0 +1,223 @@
+<template>
+  <DialogBase
+    ref="dialogWindow"
+    :closeOnButtonClick="false"
+    :closeOnFocusLost="false"
+    :maxSize="true"
+    :enableFooterButtons="uploadable"
+    title="Upload video files..."
+    buttonText="Upload"
+    buttonClass="success large"
+    @accept="uploadFiles(0)"
+    @closing="closing"
+  >
+    <div class="flex-row grow">
+      <input
+        style="display: none"
+        ref="files"
+        type="file"
+        accept="video/*"
+        @change="openFiles"
+        multiple
+      />
+      <div class="flex-column" v-if="files.length > 0">
+        <img
+          class="boxCover shadow"
+          :src="coverPreview || 'static/icons/dummy/box.svg'"
+          @click="chooseCover"
+        />
+        <input
+          type="text"
+          class="ma"
+          placeholder="box title"
+          v-model="box.title"
+        />
+        <input type="text" class="ma" placeholder="year" v-model="box.year" />
+      </div>
+      <div class="flex-column grow">
+        <ul id="videoUploadFiles">
+          <li v-for="(file, i) in files" :key="i" class="pa-top">
+            <h4 class="ma-left darkgray-text">{{ file.name }}</h4>
+            <div class="flex-row ma">
+              <awesome-icon
+                :icon="file.state == 'uploading' ? 'upload' : 'check'"
+                size="2x"
+                :class="{
+                  'success-text': file.state == 'done',
+                  'gray-text': file.state == 'ready',
+                  'primary-text': file.state == 'uploading',
+                }"
+              />
+              <input
+                placeholder="video title"
+                type="text"
+                v-model="file.tags.title"
+                class="grow left pa8"
+              />
+              <button
+                class="danger"
+                title="Remove from list"
+                @click="remove(file)"
+              >
+                <awesome-icon icon="minus" />
+              </button>
+            </div>
+          </li>
+        </ul>
+        <div
+          class="flex-column grow center ma primary-text"
+          id="dropzone"
+          @dragover="dropover"
+          @drop="droped"
+          @click="emitFileClick"
+        >
+          <h2>
+            Drop your files here<br />
+            <awesome-icon icon="plus" size="4x" />
+          </h2>
+        </div>
+      </div>
+    </div>
+  </DialogBase>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      box: { title: "", year: "" },
+      files: [],
+      coverPreview: "",
+    };
+  },
+  methods: {
+    open() {
+      this.$refs.dialogWindow.open();
+    },
+    closing() {
+      this.files = [];
+    },
+    chooseCover() {
+      let me = this;
+      let input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/jpeg, image/png";
+      let reader = new FileReader();
+      input.addEventListener("change", function () {
+        if (input.value) {
+          reader.readAsDataURL(input.files[0]);
+          me.box.cover = input.files[0];
+        }
+      });
+      reader.addEventListener("load", function () {
+        me.coverPreview = this.result;
+      });
+      input.click();
+    },
+    dropover(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    droped(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      let files = [];
+      for (let i = 0; i < e.dataTransfer.files.length; i++) {
+        let file = e.dataTransfer.files[i];
+        if (file.type.indexOf("video/") == 0) {
+          files.push({ file: file, state: "ready" });
+        }
+      }
+      if (files.length > 0) {
+        this.readFiles(files, 0);
+      }
+    },
+    openFiles(e) {
+      let files = [];
+      if (e.srcElement.value) {
+        for (let i = 0; i < e.srcElement.files.length; i++) {
+          let file = e.srcElement.files[i];
+          files.push({ file: file, state: "ready" });
+        }
+        this.readFiles(files, 0);
+      }
+    },
+    readFiles(files, index) {
+      let fileReader = new FileReader();
+      var file = files[index];
+      fileReader.onload = () => {
+        file.tags = {};
+        file.tags.title = file.file.name;
+        this.files.push(file);
+        if (files.length > index + 1) {
+          this.readFiles(files, ++index);
+        }
+      };
+      fileReader.readAsArrayBuffer(file.file);
+    },
+    emitFileClick() {
+      this.$refs.files.click();
+    },
+    remove(file) {
+      this.files.splice(this.files.indexOf(file), 1);
+    },
+    uploadFiles(index = 0) {
+      if (this.files.length > index) {
+        let file = this.files[index];
+        if (file.state == "ready") {
+          file.state = "uploading";
+          let formData = new FormData();
+          formData.append("file", file.file, "file");
+          if (this.box.cover) {
+            formData.append("file", this.box.cover, "cover");
+            delete this.box.cover;
+          }
+          formData.append("title", file.tags.title || "");
+          formData.append("box", JSON.stringify(this.box));
+          this.$store
+            .dispatch("videos/upload", formData)
+            .then(() => {
+              file.state = "done";
+              this.uploadFiles(++index);
+            })
+            .catch((err) => {
+              console.log(err);
+              this.$refs.dialogWindow.messageText = err;
+            });
+        } else {
+          this.uploadFiles(++index);
+        }
+      } else {
+        this.$store.dispatch("boxes/loadNewest");
+        this.$refs.dialogWindow.close();
+      }
+    },
+  },
+  computed: {
+    uploadable() {
+      return this.files.length > 0 && this.box.title.trim().length > 0;
+    },
+  },
+};
+</script>
+<style scoped>
+img {
+  margin: 12px;
+  width: 256px;
+  height: 362px;
+}
+input[type="text"] {
+  border: none;
+  font-size: large;
+}
+#videoUploadFiles button {
+  height: 32px;
+  min-width: 32px;
+  justify-content: center;
+  align-self: center;
+  border-radius: 16px;
+}
+#dropzone {
+  border: 2px dashed var(--primary);
+  cursor: pointer;
+}
+</style>