@ozdao/martyrs 0.2.494 → 0.2.496

package/dist/martyrs/src/modules/music/components/pages/Track.vue.js

@@ -1,23 +1,25 @@
-import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, createVNode, createElementVNode, toDisplayString, withCtx, createTextVNode, Fragment, renderList } from "vue";
+import { computed, ref, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, createVNode, createElementVNode, withCtx, toDisplayString, createTextVNode, Fragment, renderList } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 import Loader from "../../../../components/Loader/Loader.vue2.js";
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$5 from "../../../../components/Dropdown/Dropdown.vue.js";
-import _sfc_main$c from "../../../../components/Popup/Popup.vue.js";
-import _sfc_main$a from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$6 from "../../../../components/Dropdown/Dropdown.vue2.js";
+import _sfc_main$d from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$b from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
-import _sfc_main$3 from "../../../icons/navigation/IconLike.vue.js";
-import _sfc_main$6 from "../../../icons/navigation/IconEllipsis.vue.js";
+import _sfc_main$3 from "../../../icons/navigation/IconPause.vue.js";
+import _sfc_main$5 from "../../../icons/navigation/IconLike.vue.js";
+import _sfc_main$7 from "../../../icons/navigation/IconEllipsis.vue.js";
 import _sfc_main$4 from "../../../icons/navigation/IconAdd.vue.js";
 import IconClock from "../../../icons/entities/IconTime.vue.js";
 import _sfc_main$8 from "../../../icons/entities/IconCalendar.vue.js";
-import _sfc_main$7 from "../../../icons/navigation/IconCheckmark.vue.js";
-import _sfc_main$9 from "../../../icons/actions/IconShow.vue.js";
-import _sfc_main$b from "../cards/TrackListCard.vue.js";
-import { state, actions } from "../../store/tracks.js";
-import { actions as actions$1 } from "../../store/player.js";
-import { state as state$1 } from "../../../auth/views/store/auth.js";
+import _sfc_main$9 from "../../../icons/navigation/IconCheckmark.vue.js";
+import _sfc_main$a from "../../../icons/actions/IconShow.vue.js";
+import _sfc_main$c from "../cards/TrackListCard.vue.js";
+import ArtistCardSmall from "../cards/ArtistCardSmall.vue.js";
+import { state as state$1, actions } from "../../store/tracks.js";
+import { state, actions as actions$1 } from "../../store/player.js";
+import { state as state$2 } from "../../../auth/views/store/auth.js";
 const _hoisted_1 = { class: "track-page pd-small" };
 const _hoisted_2 = {
   key: 0,
@@ -32,71 +34,66 @@ const _hoisted_4 = {
   class: "track-content cols-2-fit-content mobile:cols-1 gap-big"
 };
 const _hoisted_5 = { class: "pos-sticky pos-t-0 mobile:pos-relative track-cover-section" };
-const _hoisted_6 = { class: "cover-container relative mn-b-medium radius-big overflow-hidden shadow-big" };
-const _hoisted_7 = { class: "stats-grid grid cols-2 gap-small" };
-const _hoisted_8 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
-const _hoisted_9 = { class: "mn-b-thin" };
-const _hoisted_10 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
-const _hoisted_11 = { class: "mn-b-thin" };
-const _hoisted_12 = { class: "track-details-section" };
-const _hoisted_13 = { class: "flex items-center gap-small mn-b-small" };
-const _hoisted_14 = {
+const _hoisted_6 = { class: "cover-container pos-relative mn-b-medium radius-big o-hidden" };
+const _hoisted_7 = { class: "cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center" };
+const _hoisted_8 = { class: "stats-grid grid cols-2 gap-small" };
+const _hoisted_9 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
+const _hoisted_10 = { class: "mn-b-thin" };
+const _hoisted_11 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
+const _hoisted_12 = { class: "mn-b-thin" };
+const _hoisted_13 = { class: "track-details-section" };
+const _hoisted_14 = { class: "h1 mn-b-medium" };
+const _hoisted_15 = { class: "flex gap-small mn-b-medium" };
+const _hoisted_16 = { class: "dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin" };
+const _hoisted_17 = { class: "artists-section mn-b-medium" };
+const _hoisted_18 = {
   key: 0,
-  class: "badge bg-danger-transp-20 t-danger pd-thin-big radius-small t-small"
+  class: "t-medium mn-b-small"
 };
-const _hoisted_15 = { class: "h1 mn-b-medium" };
-const _hoisted_16 = { class: "flex gap-small mn-b-medium" };
-const _hoisted_17 = { class: "dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin" };
-const _hoisted_18 = { class: "artist-card bg-light pd-medium radius-medium flex items-center gap-medium mn-b-big" };
-const _hoisted_19 = { class: "artist-avatar" };
-const _hoisted_20 = {
-  key: 1,
-  class: "w-4r h-4r radius-full bg-primary flex-center"
-};
-const _hoisted_21 = { class: "flex items-center gap-thin" };
-const _hoisted_22 = { class: "t-large" };
-const _hoisted_23 = { class: "metadata-grid grid cols-2 gap-small mn-b-big" };
-const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_25 = { class: "icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center" };
+const _hoisted_19 = { class: "flex flex-col gap-small" };
+const _hoisted_20 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_21 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_22 = { class: "t-medium" };
+const _hoisted_23 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_24 = { class: "t-medium" };
+const _hoisted_25 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
 const _hoisted_26 = { class: "t-medium" };
 const _hoisted_27 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_28 = { class: "icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center" };
-const _hoisted_29 = { class: "t-medium" };
-const _hoisted_30 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_31 = { class: "icon-wrapper bg-success-transp-20 w-3r h-3r radius-small flex-center" };
-const _hoisted_32 = { class: "t-medium t-success" };
-const _hoisted_33 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
-const _hoisted_34 = { class: "icon-wrapper bg-primary-transp-20 w-3r h-3r radius-small flex-center" };
-const _hoisted_35 = { class: "t-medium" };
-const _hoisted_36 = {
+const _hoisted_28 = { class: "t-medium" };
+const _hoisted_29 = {
   key: 0,
-  class: "album-card bg-light pd-medium radius-medium mn-b-medium"
+  class: "t-medium mn-b-small"
 };
-const _hoisted_37 = { class: "t-medium" };
-const _hoisted_38 = {
+const _hoisted_30 = {
   key: 1,
-  class: "tags-section mn-b-medium"
+  class: "album-card bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_39 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_40 = {
+const _hoisted_31 = { class: "t-medium" };
+const _hoisted_32 = {
   key: 2,
-  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
+  class: "tags-section mn-b-medium"
 };
-const _hoisted_41 = { class: "t-transp" };
-const _hoisted_42 = {
+const _hoisted_33 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_34 = {
   key: 3,
+  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
+};
+const _hoisted_35 = { class: "t-transp" };
+const _hoisted_36 = {
+  key: 4,
   class: "lyrics-section bg-light pd-medium radius-medium"
 };
-const _hoisted_43 = { class: "t-transp t-small" };
-const _hoisted_44 = {
+const _hoisted_37 = { class: "t-transp t-small" };
+const _hoisted_38 = {
   key: 3,
   class: "related-section mn-t-big"
 };
-const _hoisted_45 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_39 = { class: "bg-light radius-medium o-hidden" };
 const _sfc_main = {
   __name: "Track",
   emits: ["page-loading", "page-loaded"],
   setup(__props, { emit: __emit }) {
+    const isPlaying = computed(() => state.isPlaying);
     const route = useRoute();
     const router = useRouter();
     const emits = __emit;
@@ -105,12 +102,12 @@ const _sfc_main = {
     const showAddToPlaylistModal = ref(false);
     const isFavorite = ref(false);
     const isFollowingArtist = ref(false);
-    state.currentTrack = null;
-    state.relatedTracks = [];
-    const track = computed(() => state.currentTrack);
-    const relatedTracks = computed(() => state.relatedTracks || []);
+    state$1.currentTrack = null;
+    state$1.relatedTracks = [];
+    const track = computed(() => state$1.currentTrack);
+    const relatedTracks = computed(() => state$1.relatedTracks || []);
     const isOwner = computed(() => {
-      return track.value?.owner?.target === state$1.user?._id;
+      return track.value?.owner?.target === state$2.user?._id;
     });
     const formatDuration = (seconds) => {
       if (!seconds) return "0:00";
@@ -203,64 +200,96 @@ const _sfc_main = {
                 url: track.value.coverUrl || track.value.album && track.value.album.coverUrl || "/logo/logo-placeholder.jpg",
                 alt: track.value.title,
                 class: "aspect-1x1 w-100 radius-medium o-hidden"
-              }, null, 8, ["url", "alt"])
+              }, null, 8, ["url", "alt"]),
+              createElementVNode("div", _hoisted_7, [
+                createVNode(_sfc_main$1, {
+                  onClick: playTrack,
+                  color: "white",
+                  size: "big",
+                  class: "w-5r h-5r radius-big bg-main shadow-big hover-scale-110"
+                }, {
+                  default: withCtx(() => [
+                    !isPlaying.value ? (openBlock(), createBlock(_sfc_main$2, {
+                      key: 0,
+                      fill: "rgb(var(--white))",
+                      class: "i-medium"
+                    })) : (openBlock(), createBlock(_sfc_main$3, {
+                      key: 1,
+                      fill: "rgb(var(--white))",
+                      class: "i-medium"
+                    }))
+                  ]),
+                  _: 1
+                })
+              ])
             ]),
-            createElementVNode("div", _hoisted_7, [
-              createElementVNode("div", _hoisted_8, [
-                createElementVNode("div", _hoisted_9, toDisplayString(formatNumber(track.value.playCount)), 1),
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("div", _hoisted_9, [
+                createElementVNode("div", _hoisted_10, toDisplayString(formatNumber(track.value.playCount)), 1),
                 _cache[4] || (_cache[4] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Plays", -1))
               ]),
-              createElementVNode("div", _hoisted_10, [
-                createElementVNode("div", _hoisted_11, toDisplayString(formatNumber(track.value.views)), 1),
+              createElementVNode("div", _hoisted_11, [
+                createElementVNode("div", _hoisted_12, toDisplayString(formatNumber(track.value.views)), 1),
                 _cache[5] || (_cache[5] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Views", -1))
               ])
             ])
           ]),
-          createElementVNode("div", _hoisted_12, [
-            createElementVNode("div", _hoisted_13, [
-              _cache[6] || (_cache[6] = createElementVNode("span", { class: "badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase" }, "Single", -1)),
-              track.value.isExplicit ? (openBlock(), createElementBlock("span", _hoisted_14, "Explicit")) : createCommentVNode("", true)
-            ]),
-            createElementVNode("h1", _hoisted_15, toDisplayString(track.value.title), 1),
-            createElementVNode("div", _hoisted_16, [
+          createElementVNode("div", _hoisted_13, [
+            _cache[19] || (_cache[19] = createElementVNode("div", { class: "flex items-center gap-small mn-b-small" }, [
+              createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Single"),
+              createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, "Explicit")
+            ], -1)),
+            createElementVNode("h1", _hoisted_14, toDisplayString(track.value.title), 1),
+            createElementVNode("div", _hoisted_15, [
               createVNode(_sfc_main$1, {
                 onClick: playTrack,
                 color: "primary",
                 size: "medium",
-                class: "flex-1 flex-center gap-thin"
+                class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$2, { class: "w-1r h-1r" }),
-                  _cache[7] || (_cache[7] = createTextVNode(" Play "))
+                  !isPlaying.value ? (openBlock(), createBlock(_sfc_main$2, {
+                    key: 0,
+                    fill: "rgb(var(--white))",
+                    class: "i-medium"
+                  })) : (openBlock(), createBlock(_sfc_main$3, {
+                    key: 1,
+                    fill: "rgb(var(--white))",
+                    class: "i-medium"
+                  })),
+                  createTextVNode(" " + toDisplayString(!isPlaying.value ? "Play" : "Pause"), 1)
                 ]),
                 _: 1
               }),
               createVNode(_sfc_main$1, {
-                onClick: toggleFavorite,
-                color: isFavorite.value ? "danger" : "transp",
+                onClick: addToQueue,
+                color: "primary",
                 size: "medium",
-                class: "w-3r h-3r radius-full"
+                class: "flex-1 bg-light radius-thin flex-center gap-thin"
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$3, {
-                    class: "w-1-25r h-1-25r",
-                    fill: isFavorite.value
-                  }, null, 8, ["fill"])
+                  createVNode(_sfc_main$4, { class: "i-medium" }),
+                  _cache[6] || (_cache[6] = createTextVNode(" Add to Queue "))
                 ]),
                 _: 1
-              }, 8, ["color"]),
+              }),
               createVNode(_sfc_main$1, {
-                onClick: addToQueue,
-                color: "transp",
+                onClick: toggleFavorite,
+                color: "primary",
                 size: "medium",
-                class: "w-3r h-3r radius-full"
+                class: "flex-1 bg-light radius-thin flex-center gap-thin"
               }, {
                 default: withCtx(() => [
-                  createVNode(_sfc_main$4, { class: "w-1-25r h-1-25r" })
+                  createVNode(_sfc_main$5, {
+                    class: "i-medium",
+                    fill: isFavorite.value ? "rgb(var(--main)" : "rgb(var(--black)"
+                  }, null, 8, ["fill"]),
+                  createTextVNode(" " + toDisplayString(isFavorite.value ? "Liked" : "Like"), 1)
                 ]),
                 _: 1
               }),
-              createVNode(_sfc_main$5, {
+              createVNode(_sfc_main$6, {
+                label: { component: _sfc_main$7, class: "bg-light radius-thin pd-thin i-big" },
                 modelValue: showDropdown.value,
                 "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showDropdown.value = $event),
                 class: "relative"
@@ -272,20 +301,20 @@ const _sfc_main = {
                     class: "w-3r h-3r radius-full"
                   }, {
                     default: withCtx(() => [
-                      createVNode(_sfc_main$6, { class: "w-1-25r h-1-25r" })
+                      createVNode(_sfc_main$7, { class: "w-1-25r h-1-25r" })
                     ]),
                     _: 1
                   })
                 ]),
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_17, [
+                  createElementVNode("div", _hoisted_16, [
                     createVNode(_sfc_main$1, {
                       onClick: _cache[0] || (_cache[0] = ($event) => showAddToPlaylistModal.value = true),
                       color: "transp",
                       size: "small",
                       class: "w-100 justify-start"
                     }, {
-                      default: withCtx(() => _cache[8] || (_cache[8] = [
+                      default: withCtx(() => _cache[7] || (_cache[7] = [
                         createTextVNode(" Add to Playlist ")
                       ])),
                       _: 1
@@ -296,20 +325,20 @@ const _sfc_main = {
                       size: "small",
                       class: "w-100 justify-start"
                     }, {
-                      default: withCtx(() => _cache[9] || (_cache[9] = [
+                      default: withCtx(() => _cache[8] || (_cache[8] = [
                         createTextVNode(" Copy Link ")
                       ])),
                       _: 1
                     }),
                     isOwner.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      _cache[12] || (_cache[12] = createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
+                      _cache[11] || (_cache[11] = createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
                       createVNode(_sfc_main$1, {
                         onClick: editTrack,
                         color: "transp",
                         size: "small",
                         class: "w-100 justify-start"
                       }, {
-                        default: withCtx(() => _cache[10] || (_cache[10] = [
+                        default: withCtx(() => _cache[9] || (_cache[9] = [
                           createTextVNode(" Edit Track ")
                         ])),
                         _: 1
@@ -320,7 +349,7 @@ const _sfc_main = {
                         size: "small",
                         class: "w-100 justify-start"
                       }, {
-                        default: withCtx(() => _cache[11] || (_cache[11] = [
+                        default: withCtx(() => _cache[10] || (_cache[10] = [
                           createTextVNode(" Delete Track ")
                         ])),
                         _: 1
@@ -329,133 +358,98 @@ const _sfc_main = {
                   ])
                 ]),
                 _: 1
-              }, 8, ["modelValue"])
+              }, 8, ["label", "modelValue"])
             ]),
-            createElementVNode("div", _hoisted_18, [
-              createVNode(_component_router_link, {
-                to: `/artist/${track.value.artist.url}`,
-                class: "flex items-center gap-medium flex-1 hover-opacity"
-              }, {
-                default: withCtx(() => [
-                  createElementVNode("div", _hoisted_19, [
-                    track.value.artist.photoUrl ? (openBlock(), createBlock(Media, {
-                      key: 0,
-                      src: track.value.artist.photoUrl,
-                      alt: track.value.artist.name,
-                      class: "w-4r h-4r radius-full object-cover"
-                    }, null, 8, ["src", "alt"])) : (openBlock(), createElementBlock("div", _hoisted_20, toDisplayString(track.value.artist.name.charAt(0)), 1))
-                  ]),
-                  createElementVNode("div", null, [
-                    createElementVNode("div", _hoisted_21, [
-                      createElementVNode("span", _hoisted_22, toDisplayString(track.value.artist.name), 1),
-                      track.value.artist.isVerified ? (openBlock(), createBlock(_sfc_main$7, {
-                        key: 0,
-                        class: "w-1r h-1r t-primary"
-                      })) : createCommentVNode("", true)
-                    ]),
-                    _cache[13] || (_cache[13] = createElementVNode("span", { class: "t-small t-transp" }, "Artist", -1))
-                  ])
-                ]),
-                _: 1
-              }, 8, ["to"]),
-              !isOwner.value ? (openBlock(), createBlock(_sfc_main$1, {
-                key: 0,
-                onClick: toggleFollowArtist,
-                color: isFollowingArtist.value ? "primary" : "transp",
-                size: "small"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(isFollowingArtist.value ? "Following" : "Follow"), 1)
-                ]),
-                _: 1
-              }, 8, ["color"])) : createCommentVNode("", true)
+            createElementVNode("div", _hoisted_17, [
+              track.value.artist ? (openBlock(), createElementBlock("h3", _hoisted_18, "Artist")) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_19, [
+                (openBlock(), createBlock(ArtistCardSmall, {
+                  key: track.value.artist._id,
+                  artist: track.value.artist,
+                  "is-following": isFollowingArtist.value,
+                  "show-follow-button": !isOwner.value,
+                  onToggleFollow: toggleFollowArtist
+                }, null, 8, ["artist", "is-following", "show-follow-button"]))
+              ])
             ]),
-            createElementVNode("div", _hoisted_23, [
-              createElementVNode("div", _hoisted_24, [
-                createElementVNode("div", _hoisted_25, [
-                  createVNode(IconClock, { class: "w-1-5r h-1-5r t-primary" })
-                ]),
+            _cache[20] || (_cache[20] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            createElementVNode("div", _hoisted_20, [
+              createElementVNode("div", _hoisted_21, [
+                createVNode(_sfc_main$8, { class: "i-regular t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[14] || (_cache[14] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
-                  createElementVNode("div", _hoisted_26, toDisplayString(formatDuration(track.value.duration)), 1)
+                  _cache[12] || (_cache[12] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
+                  createElementVNode("div", _hoisted_22, toDisplayString(formatDate(track.value.releaseDate)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_27, [
-                createElementVNode("div", _hoisted_28, [
-                  createVNode(_sfc_main$8, { class: "w-1-5r h-1-5r t-primary" })
-                ]),
+              createElementVNode("div", _hoisted_23, [
+                createVNode(IconClock, { class: "i-regular t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[15] || (_cache[15] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
-                  createElementVNode("div", _hoisted_29, toDisplayString(formatDate(track.value.releaseDate)), 1)
+                  _cache[13] || (_cache[13] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
+                  createElementVNode("div", _hoisted_24, toDisplayString(formatDuration(track.value.duration)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_30, [
-                createElementVNode("div", _hoisted_31, [
-                  createVNode(_sfc_main$7, { class: "w-1-5r h-1-5r t-success" })
-                ]),
+              createElementVNode("div", _hoisted_25, [
+                createVNode(_sfc_main$9, { class: "i-regular t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[16] || (_cache[16] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
-                  createElementVNode("div", _hoisted_32, toDisplayString(track.value.status), 1)
+                  _cache[14] || (_cache[14] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
+                  createElementVNode("div", _hoisted_26, toDisplayString(track.value.status), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_33, [
-                createElementVNode("div", _hoisted_34, [
-                  createVNode(_sfc_main$9, { class: "w-1-5r h-1-5r t-primary" })
-                ]),
+              createElementVNode("div", _hoisted_27, [
+                createVNode(_sfc_main$a, { class: "i-regular t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[17] || (_cache[17] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
-                  createElementVNode("div", _hoisted_35, toDisplayString(track.value.isPublic ? "Public" : "Private"), 1)
+                  _cache[15] || (_cache[15] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
+                  createElementVNode("div", _hoisted_28, toDisplayString(track.value.isPublic ? "Public" : "Private"), 1)
                 ])
               ])
             ]),
-            track.value.album ? (openBlock(), createElementBlock("div", _hoisted_36, [
-              _cache[18] || (_cache[18] = createElementVNode("div", { class: "t-small t-transp t-uppercase mn-b-thin" }, "From Album", -1)),
+            track.value.album ? (openBlock(), createElementBlock("h3", _hoisted_29, "From Album")) : createCommentVNode("", true),
+            track.value.album ? (openBlock(), createElementBlock("div", _hoisted_30, [
               createVNode(_component_router_link, {
                 to: `/album/${track.value.album.url}`,
-                class: "flex items-center gap-medium hover-opacity"
+                class: "flex flex-v-center gap-thin hover-opacity"
               }, {
                 default: withCtx(() => [
-                  track.value.album.coverUrl ? (openBlock(), createBlock(Media, {
-                    key: 0,
-                    src: track.value.album.coverUrl,
+                  createVNode(Media, {
+                    url: track.value.album.coverArt || "/logo/logo-placeholder.jpg",
                     alt: track.value.album.title,
-                    class: "w-3r h-3r radius-small object-cover"
-                  }, null, 8, ["src", "alt"])) : createCommentVNode("", true),
-                  createElementVNode("span", _hoisted_37, toDisplayString(track.value.album.title), 1)
+                    class: "w-3r h-3r radius-thin o-hidden object-cover"
+                  }, null, 8, ["url", "alt"]),
+                  createElementVNode("span", _hoisted_31, toDisplayString(track.value.album.title), 1)
                 ]),
                 _: 1
               }, 8, ["to"])
             ])) : createCommentVNode("", true),
-            track.value.genre && track.value.genre.length || track.value.tags && track.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_38, [
-              _cache[19] || (_cache[19] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
-              createElementVNode("div", _hoisted_39, [
+            track.value.genre && track.value.genre.length || track.value.tags && track.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_32, [
+              _cache[16] || (_cache[16] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              createElementVNode("div", _hoisted_33, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(track.value.genre, (genre) => {
                   return openBlock(), createElementBlock("span", {
                     key: genre,
-                    class: "tag bg-primary-transp-20 t-primary pd-thin-big radius-small t-small hover-bg-primary-transp-30 cursor-pointer"
-                  }, toDisplayString(genre), 1);
+                    class: "tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer"
+                  }, toDisplayString(genre.name || genre), 1);
                 }), 128)),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(track.value.tags, (tag) => {
                   return openBlock(), createElementBlock("span", {
                     key: tag,
                     class: "tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
-                  }, " #" + toDisplayString(tag), 1);
+                  }, " #" + toDisplayString(tag.name || tag), 1);
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
-            track.value.description ? (openBlock(), createElementBlock("div", _hoisted_40, [
-              _cache[20] || (_cache[20] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
-              createElementVNode("p", _hoisted_41, toDisplayString(track.value.description), 1)
+            track.value.description ? (openBlock(), createElementBlock("div", _hoisted_34, [
+              _cache[17] || (_cache[17] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              createElementVNode("p", _hoisted_35, toDisplayString(track.value.description), 1)
             ])) : createCommentVNode("", true),
-            track.value.lyrics ? (openBlock(), createElementBlock("div", _hoisted_42, [
-              _cache[21] || (_cache[21] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Lyrics", -1)),
-              createElementVNode("pre", _hoisted_43, toDisplayString(track.value.lyrics), 1)
+            track.value.lyrics ? (openBlock(), createElementBlock("div", _hoisted_36, [
+              _cache[18] || (_cache[18] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Lyrics", -1)),
+              createElementVNode("pre", _hoisted_37, toDisplayString(track.value.lyrics), 1)
             ])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        track.value && relatedTracks.value && relatedTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_44, [
-          _cache[22] || (_cache[22] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Related Tracks", -1)),
-          createVNode(_sfc_main$a, {
+        track.value && relatedTracks.value && relatedTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_38, [
+          _cache[21] || (_cache[21] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Related Tracks", -1)),
+          createVNode(_sfc_main$b, {
             store: {
               read: () => new _ctx.Promise((resolve) => resolve(relatedTracks.value || [])),
               state: { isLoading: false }
@@ -472,9 +466,9 @@ const _sfc_main = {
             class: "grid cols-2 cols-m-3 cols-l-4 gap-medium"
           }, {
             default: withCtx(({ items }) => [
-              createElementVNode("div", _hoisted_45, [
+              createElementVNode("div", _hoisted_39, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items, (relatedTrack, index) => {
-                  return openBlock(), createBlock(_sfc_main$b, {
+                  return openBlock(), createBlock(_sfc_main$c, {
                     key: relatedTrack._id,
                     track: relatedTrack,
                     index,
@@ -487,12 +481,12 @@ const _sfc_main = {
             _: 1
           }, 8, ["store", "items"])
         ])) : createCommentVNode("", true),
-        showAddToPlaylistModal.value ? (openBlock(), createBlock(_sfc_main$c, {
+        showAddToPlaylistModal.value ? (openBlock(), createBlock(_sfc_main$d, {
           key: 4,
           onClosePopup: _cache[2] || (_cache[2] = ($event) => showAddToPlaylistModal.value = false),
-          class: "bg-dark pd-medium w-m-25r radius-medium"
+          class: "bg-white pd-medium w-m-25r radius-medium"
         }, {
-          default: withCtx(() => _cache[23] || (_cache[23] = [
+          default: withCtx(() => _cache[22] || (_cache[22] = [
             createElementVNode("h3", { class: "h3 mn-b-medium" }, "Add to Playlist", -1),
             createElementVNode("p", { class: "t-transp" }, "Playlist selector coming soon...", -1)
           ])),