public/config.json

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

public/static/app.css

@@ -272,6 +272,7 @@ td.fillCell>* {
   overflow: hidden;
   text-overflow: ellipsis;
   flex-grow: 1;
+  text-align: left;
 }
 
 .radioCover {
@@ -593,6 +594,7 @@ td.fillCell>* {
 .z1 {
   z-index: 1;
 }
+
 .z2 {
   z-index: 2;
 }

src/store/modules/share/actions.js

@@ -2,8 +2,17 @@ import axios from 'axios'
 
 export default {
   get(context, id) {
-    axios.get(context.rootGetters.server + "/api/shares/" + id, context.rootGetters.headers).then((res) => {
+    return new Promise((resolve) => {
-      console.log(res);
+      axios.get(context.rootGetters.server + "/api/shares/" + id, context.rootGetters.headers).then((res) => {
+        if (res.data.object.type == "album") {
+          console.log(res.data)
+          res.data.object.tracks.forEach(track => {
+            track.parent = res.data.object;
+            track.parentType = "album"
+          });
+        }
+        resolve(res.data);
+      });
     });
   },
 }

src/views/Share.vue

@@ -1,16 +1,66 @@
 <template>
-  <div ref="share" id="share"></div>
+  <div ref="share" id="share" class="flex-column">
+    <div class="flex-column ma-horizontal">
+      <h1>{{ object.title }}</h1>
+      <h2>{{ object.artist_name }}</h2>
+    </div>
+    <div id="content" class="flex-row border-top">
+      <div>
+        <img id="cover" class="shadow ma24" :src="cover" />
+      </div>
+      <ul id="trackList" class="tracks">
+        <li v-for="track in object.tracks" :key="track._id">
+          <TrackItem :track="track" :showCover="false" />
+        </li>
+      </ul>
+    </div>
+  </div>
 </template>
 
 <script>
+import TrackItem from "../components/Track";
+
 export default {
   name: "ShareView",
+  data() {
+    return {
+      object: {
+        covers: { cover256: "" },
+      },
+    };
+  },
   mounted() {
     if (this.$route.query.id) {
-      this.$store.dispatch("share/get", this.$route.query.id);
+      this.$store.dispatch("share/get", this.$route.query.id).then((res) => {
+        this.$nextTick(() => {
+          this.object = res.object;
+        });
+      });
     } else {
       this.$router.replace("/");
     }
   },
+  computed: {
+    cover() {
+      return this.object.covers.cover256;
+    },
+  },
+  components: {
+    TrackItem,
+  },
 };
-</script>
+</script>
+
+<style scoped>
+#share {
+  overflow: auto;
+}
+#cover {
+  align-self: flex-start;
+  width: 256px;
+  align-self: center;
+}
+#content {
+  overflow: auto;
+}
+</style>