From efef863e668cad80c177d3b583585f9cd7b08471 Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Thu, 16 Feb 2023 18:19:22 +0100
Subject: [PATCH] wip sharing view

---
 public/config.json                 |  4 +--
 public/static/app.css              |  2 ++
 src/store/modules/share/actions.js | 13 +++++--
 src/views/Share.vue                | 56 ++++++++++++++++++++++++++++--
 4 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/public/config.json b/public/config.json
index a3b7d4a..f966bb7 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,5 +1,5 @@
 {
-  "backend_de": "http://localhost:31204",
-  "backend_dev": "https://webplay.rocks",
+  "backend_dev": "http://localhost:31204",
+  "backend_de": "https://webplay.rocks",
   "backend": "https://webplay.rocks"
 }
\ No newline at end of file
diff --git a/public/static/app.css b/public/static/app.css
index d537a04..13dee39 100644
--- a/public/static/app.css
+++ b/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;
 }
diff --git a/src/store/modules/share/actions.js b/src/store/modules/share/actions.js
index 72c23ed..f41bd6b 100644
--- a/src/store/modules/share/actions.js
+++ b/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) => {
-      console.log(res);
+    return new Promise((resolve) => {
+      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);
+      });
     });
   },
 }
\ No newline at end of file
diff --git a/src/views/Share.vue b/src/views/Share.vue
index 4fd841b..89dcfa8 100644
--- a/src/views/Share.vue
+++ b/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>
\ No newline at end of file
+</script>
+
+<style scoped>
+#share {
+  overflow: auto;
+}
+#cover {
+  align-self: flex-start;
+  width: 256px;
+  align-self: center;
+}
+#content {
+  overflow: auto;
+}
+</style>
\ No newline at end of file