public/static/style.css

@@ -808,6 +808,10 @@ li {
   list-style: none;
 }
 
+li:hover {
+  background-color: var(--nav);
+}
+
 li.selected,
 li.active {
   background-color: var(--selected);

src/App.vue

@@ -1,7 +1,11 @@
 <template>
   <div id="app">
     <nav
-      v-show="$route.path != '/login' && $route.path != '/setup' && $route.path != '/share' "
+      v-show="
+        $route.path != '/login' &&
+        $route.path != '/setup' &&
+        $route.path != '/share'
+      "
       :class="{ slideOverTop: $store.getters.isDialogOpen }"
     >
       <div>
@@ -72,6 +76,14 @@
             >
               <awesome-icon icon="server" />Server settings
             </button>
+
+            <button
+              @click="openDialog('sharedItems')"
+              v-if="$store.getters['user/isAdministrator']"
+            >
+              <awesome-icon icon="share" />Shared items
+            </button>
+
             <button
               v-if="$store.getters.isElectron"
               @click="openDialog('dialogSettings')"
@@ -122,6 +134,7 @@
     <VideoScreen />
     <AudioUploadDialog ref="audioUploader" />
     <VideoUploadDialog ref="videoUploader" />
+    <SharedItems ref="sharedItems" />
   </div>
 </template>
 
@@ -135,6 +148,7 @@ import Player from "./components/Player";
 import ServerSettings from "./components/dialogs/ServerSettings";
 import AudioUploadDialog from "./components/dialogs/AudioUpload";
 import VideoUploadDialog from "./components/dialogs/VideoUpload";
+import SharedItems from "./components/dialogs/SharedItems";
 
 import { mapGetters } from "vuex";
 
@@ -245,7 +259,11 @@ export default {
     },
     login() {
       let hash = window.location.hash.replace("#/", "");
-      if (!hash.startsWith("login") && !hash.startsWith("setup") && !hash.startsWith("share")) {
+      if (
+        !hash.startsWith("login") &&
+        !hash.startsWith("setup") &&
+        !hash.startsWith("share")
+      ) {
         let redirect = encodeURIComponent(hash);
         if (redirect) {
           this.$router.replace({
@@ -284,6 +302,7 @@ export default {
     UserProfile,
     VideoScreen,
     VideoUploadDialog,
+    SharedItems,
   },
 };
 </script>

src/components/AlbumContent.vue

@@ -1,10 +1,10 @@
 <template>
   <div id="content" class="flex-column">
-    <div class="flex-column ma-horizontal">
+    <div class="flex-column pa-horizontal border-bottom hideOnMobile">
       <h1>{{ album.title }}</h1>
       <h2>{{ album.artist_name }}</h2>
     </div>
-    <div id="tracks" class="flex-row border-top">
+    <div id="tracks" class="flex-row">
       <div class="flex-column">
         <img id="cover" class="shadow ma24" :src="cover" />
         <p class="center ma-off hideOnMobile">

src/components/BoxContent.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="content" class="flex-column">
-    <div class="flex-column ma-horizontal">
+    <div class="flex-column pa-horizontal border-bottom hideOnMobile">
       <h1>{{ box.title }}</h1>
     </div>
-    <div id="videos" class="flex-row border-top">
+    <div id="videos" class="flex-row">
       <div class="flex-column">
         <img id="cover" class="shadow ma24" :src="cover" />
         <p class="center ma-off hideOnMobile">

src/components/dialogs/SharedItems.vue

@@ -0,0 +1,110 @@
+<template>
+  <DialogBase ref="dialogWindow" title="Shared items" button-text="close">
+    <div class="flex-column">
+      <ul v-if="shares.length > 0">
+        <li
+          class="flex-row pa4-top pa4-bottom"
+          v-for="share in shares"
+          :key="share._id"
+        >
+          <div class="flex-row grow">
+            <a
+              :href="'/#/share?id=' + share._id"
+              target="webplay_share"
+              :title="'Open ' + share.type"
+            >
+              <img
+                class="cover ma-horizontal shadow pointer"
+                :src="cover(share)"
+              />
+            </a>
+            <p class="grow ma-off">
+              {{ share.type }}
+            </p>
+            <button class="flat danger" @click="shareDisable(share)">
+              <awesome-icon icon="trash" />
+            </button>
+          </div>
+        </li>
+      </ul>
+      <h3 v-else class="ma">No shares on your instance</h3>
+    </div>
+  </DialogBase>
+</template>
+
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  methods: {
+    open() {
+      this.loadCollection();
+      this.$store.state.systemDialog = true;
+      this.$refs.dialogWindow.open();
+    },
+    closed() {
+      this.$store.state.systemDialog = false;
+    },
+    cover(item) {
+      switch (item.type) {
+        case "album":
+          return item.cover || "/static/icons/dummy/album.svg";
+        case "box":
+          return item.cover || "/static/icons/dummy/box.svg";
+      }
+    },
+    loadCollection() {
+      this.$store.dispatch("share/loadShares");
+    },
+    shareDisable(share) {
+      switch (share.type) {
+        case "album":
+          this.$store
+            .dispatch("albums/getAlbumById", share.object_id)
+            .then((item) => {
+              this.$store
+                .dispatch(
+                  "albums/shareDisable",
+                  item || { _id: share.object_id }
+                )
+                .then(() => {
+                  this.loadCollection();
+                });
+            });
+
+          break;
+        case "box":
+          this.$store
+            .dispatch("boxes/getBoxById", share.object_id)
+            .then((item) => {
+              this.$store
+                .dispatch(
+                  "boxes/shareDisable",
+                  item || { _id: share.object_id }
+                )
+                .then(() => {
+                  this.loadCollection();
+                });
+            });
+          break;
+      }
+    },
+  },
+  computed: {
+    ...mapGetters({
+      shares: ["share/collection"],
+    }),
+  },
+};
+</script>
+
+<style scoped>
+li p {
+  align-self: center;
+}
+
+li .cover {
+  width: 32px;
+}
+</style>

src/store/modules/albums/actions.js

@@ -111,6 +111,12 @@ export default {
       context.dispatch("selectAlbum", album);
     }
   },
+  getAlbumById(context, id) {
+    return new Promise(resolve => {
+      let album = context.getters.collection.find(item => item._id == id);
+      resolve(album);
+    });
+  },
   gotoPrevAlbum(context) {
     let prevAlbum = context.getters.prevAlbum;
     if (prevAlbum._id) {
@@ -163,8 +169,11 @@ export default {
     });
   },
   shareDisable(context, album) {
-    axios.delete(context.rootGetters.server + "/api/albums/" + album._id + "/share", context.rootGetters.headers).then(() => {
+    return new Promise(resolve => {
-      album.share = {};
+      axios.delete(context.rootGetters.server + "/api/albums/" + album._id + "/share", context.rootGetters.headers).then(() => {
+        album.share = {};
+        resolve();
+      });
     });
   }
 }

src/store/modules/boxes/actions.js

@@ -75,6 +75,12 @@ export default {
       context.dispatch("selectBox", box);
     }
   },
+  getBoxById(context, id) {
+    return new Promise(resolve => {
+      let box = context.getters.collection.find(item => item._id == id);
+      resolve(box);
+    });
+  },
   gotoPrevBox(context) {
     let prevBox = context.getters.prevBox;
     if (prevBox._id) {
@@ -139,8 +145,11 @@ export default {
     });
   },
   shareDisable(context, box) {
-    axios.delete(context.rootGetters.server + "/api/boxes/" + box._id + "/share", context.rootGetters.headers).then(() => {
+    return new Promise(resolve => {
-      box.share = {};
+      axios.delete(context.rootGetters.server + "/api/boxes/" + box._id + "/share", context.rootGetters.headers).then(() => {
+        box.share = {};
+        resolve();
+      });
     });
   }
 }

src/store/modules/share/actions.js

@@ -1,6 +1,11 @@
 import axios from 'axios'
 
 export default {
+  loadShares(context) {
+    axios.get(context.rootGetters.server + "/api/shares", context.rootGetters.headers).then((res) => {
+      context.commit('setShares', res.data);
+    });
+  },
   get(context, id) {
     return new Promise((resolve) => {
       axios.get(context.rootGetters.server + "/api/shares/" + id, context.rootGetters.headers).then((res) => {

src/store/modules/share/getters.js

@@ -0,0 +1,5 @@
+export default {
+    collection(state) {
+        return state.collection;
+    },
+}

src/store/modules/share/index.js

@@ -1,9 +1,12 @@
-//import state from './state.js';
+import state from './state.js';
-//import getters from './getters.js';
+import getters from './getters.js';
-//import mutations from './mutations.js';
+import mutations from './mutations.js';
 import actions from './actions.js';
 
 export default {
     namespaced: true,
+    state,
+    getters,
+    mutations,
     actions
 }

src/store/modules/share/mutations.js

@@ -0,0 +1,6 @@
+export default {
+
+  setShares(state, shares) {
+    state.collection = shares;
+  },
+}

src/store/modules/share/state.js

@@ -0,0 +1,3 @@
+export default {
+    collection: [],
+}

src/views/Share.vue

@@ -16,6 +16,11 @@ export default {
       type: "",
     };
   },
+  mounted() {
+    if (this.server != "none") {
+      this.loadShare();
+    }
+  },
   methods: {
     loadShare() {
       if (this.$route.query.id) {