@ozdao/martyrs 0.2.564 → 0.2.566

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

@@ -1,24 +1,24 @@
-import { computed, ref, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, createVNode, createElementVNode, withCtx, toDisplayString, createTextVNode, Fragment, renderList } from "vue";
+import { computed, ref, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createBlock, createVNode, createElementVNode, withCtx, toDisplayString, 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 _sfc_main$5 from "../../../../components/Button/Button.vue2.js";
+import Loader from "../../../../components/Loader/Loader.vue.js";
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$6 from "../../../../components/Dropdown/Dropdown.vue.js";
-import _sfc_main$d from "../../../../components/Popup/Popup.vue.js";
-import _sfc_main$b from "../../../../components/Feed/Feed.vue.js";
+/* empty css                                            */
+import _sfc_main$c from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$a from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.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 _sfc_main$1 from "../../../icons/navigation/IconPause.vue.js";
+import _sfc_main$4 from "../../../icons/navigation/IconLike.vue.js";
+import _sfc_main$3 from "../../../icons/navigation/IconAdd.vue.js";
 import IconTime from "../../../icons/entities/IconTime.vue.js";
-import _sfc_main$8 from "../../../icons/entities/IconCalendar.vue.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 _sfc_main$7 from "../../../icons/entities/IconCalendar.vue.js";
+import _sfc_main$8 from "../../../icons/navigation/IconCheckmark.vue.js";
+import _sfc_main$9 from "../../../icons/actions/IconShow.vue.js";
+import _sfc_main$6 from "../blocks/ActionButtons.vue.js";
+import _sfc_main$b 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$1, actions as actions$1 } from "../../store/tracks.js";
+import { state, actions } 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 = {
@@ -31,7 +31,7 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = {
   key: 2,
-  class: "track-content cols-2-fit-content mobile:cols-1 gap-big"
+  class: "track-content cols-2 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 pos-relative mn-b-medium radius-big o-hidden" };
@@ -43,52 +43,49 @@ const _hoisted_11 = { class: "stat-card bg-light pd-medium radius-medium t-cente
 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 = {
+const _hoisted_15 = { class: "artists-section mn-b-medium" };
+const _hoisted_16 = {
   key: 0,
   class: "t-medium mn-b-small"
 };
-const _hoisted_19 = { class: "flex flex-column 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-regular" };
-const _hoisted_22 = { class: "t-medium" };
-const _hoisted_23 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_24 = { class: "t-medium" };
-const _hoisted_25 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_26 = { class: "t-medium" };
-const _hoisted_27 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_28 = { class: "t-medium" };
-const _hoisted_29 = {
+const _hoisted_17 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_18 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
+const _hoisted_19 = { class: "t-medium" };
+const _hoisted_20 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
+const _hoisted_21 = { class: "t-medium" };
+const _hoisted_22 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
+const _hoisted_23 = { class: "t-medium" };
+const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
+const _hoisted_25 = { class: "t-medium" };
+const _hoisted_26 = {
   key: 0,
   class: "t-medium mn-b-small"
 };
-const _hoisted_30 = {
+const _hoisted_27 = {
   key: 1,
   class: "album-card bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_31 = { class: "t-medium" };
-const _hoisted_32 = {
+const _hoisted_28 = { class: "t-medium" };
+const _hoisted_29 = {
   key: 2,
   class: "tags-section mn-b-medium"
 };
-const _hoisted_33 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_34 = {
+const _hoisted_30 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_31 = {
   key: 3,
   class: "description-section bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_35 = { class: "t-transp" };
-const _hoisted_36 = {
+const _hoisted_32 = { class: "t-transp" };
+const _hoisted_33 = {
   key: 4,
   class: "lyrics-section bg-light pd-medium radius-medium"
 };
-const _hoisted_37 = { class: "t-transp t-small" };
-const _hoisted_38 = {
+const _hoisted_34 = { class: "t-transp t-small" };
+const _hoisted_35 = {
   key: 3,
   class: "related-section mn-t-big"
 };
-const _hoisted_39 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_36 = { class: "bg-light radius-medium o-hidden" };
 const _sfc_main = {
   __name: "Track",
   emits: ["page-loading", "page-loaded"],
@@ -98,7 +95,6 @@ const _sfc_main = {
     const router = useRouter();
     const emits = __emit;
     const hasLoaded = ref(false);
-    const showDropdown = ref(false);
     const showAddToPlaylistModal = ref(false);
     const isFavorite = ref(false);
     const isFollowingArtist = ref(false);
@@ -109,6 +105,47 @@ const _sfc_main = {
     const isOwner = computed(() => {
       return track.value?.owner?.target === state$2.user?._id;
     });
+    const actionButtons = computed(() => {
+      const buttons = [
+        {
+          type: "button",
+          class: "t-white bg-black",
+          icon: isPlaying.value ? _sfc_main$1 : _sfc_main$2,
+          iconFill: "rgb(var(--white))",
+          text: isPlaying.value ? "Pause" : "Play",
+          action: playTrack
+        },
+        {
+          type: "button",
+          class: "bg-light",
+          icon: _sfc_main$3,
+          text: "Add to Queue",
+          action: addToQueue
+        },
+        {
+          type: "button",
+          class: "bg-light",
+          icon: _sfc_main$4,
+          iconFill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--black))",
+          text: isFavorite.value ? "Liked" : "Like",
+          action: toggleFavorite
+        },
+        {
+          type: "dropdown",
+          items: [
+            { text: "Add to Playlist", action: () => showAddToPlaylistModal.value = true },
+            { text: "Copy Link", action: copyLink }
+          ]
+        }
+      ];
+      if (isOwner.value) {
+        const items = buttons[3].items;
+        items.push({ separator: true });
+        items.push({ text: "Edit Track", action: editTrack });
+        items.push({ text: "Delete Track", action: deleteTrack, color: "danger" });
+      }
+      return buttons;
+    });
     const formatDuration = (seconds) => {
       if (!seconds) return "0:00";
       const h = Math.floor(seconds / 3600);
@@ -138,7 +175,7 @@ const _sfc_main = {
     };
     const playTrack = () => {
       if (track.value) {
-        actions$1.setQueue([track.value]);
+        actions.setQueue([track.value]);
       }
     };
     const toggleFavorite = () => {
@@ -149,7 +186,7 @@ const _sfc_main = {
     };
     const addToQueue = () => {
       if (track.value) {
-        actions$1.addToQueue(track.value);
+        actions.addToQueue(track.value);
       }
     };
     const editTrack = () => {
@@ -158,7 +195,7 @@ const _sfc_main = {
     const deleteTrack = async () => {
       if (confirm("Are you sure you want to delete this track?")) {
         try {
-          await actions.deleteTrack(track.value._id);
+          await actions$1.deleteTrack(track.value._id);
           router.push({ name: "music-library" });
         } catch (error) {
           console.error("Failed to delete track:", error);
@@ -167,12 +204,11 @@ const _sfc_main = {
     };
     const copyLink = () => {
       navigator.clipboard.writeText(window.location.href);
-      showDropdown.value = false;
     };
     const fetchTrackData = async () => {
       try {
-        await actions.fetchTrackByUrl(route.params.url);
-        await actions.fetchRelatedTracks(route.params.url);
+        await actions$1.fetchTrackByUrl(route.params.url);
+        await actions$1.fetchRelatedTracks(route.params.url);
       } catch (error) {
         console.error("Error loading track:", error);
       }
@@ -189,7 +225,7 @@ const _sfc_main = {
         _ctx.isLoading ? (openBlock(), createElementBlock("div", _hoisted_2, [
           createVNode(Loader)
         ])) : createCommentVNode("", true),
-        hasLoaded.value && !track.value ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[3] || (_cache[3] = [
+        hasLoaded.value && !track.value ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[1] || (_cache[1] = [
           createElementVNode("h2", { class: "" }, "Track not found", -1),
           createElementVNode("p", { class: "t-transp t-medium" }, "The track you're looking for doesn't exist or has been removed.", -1)
         ]))) : createCommentVNode("", true),
@@ -202,7 +238,7 @@ const _sfc_main = {
                 class: "aspect-1x1 w-100 radius-medium o-hidden"
               }, null, 8, ["url", "alt"]),
               createElementVNode("div", _hoisted_7, [
-                createVNode(_sfc_main$1, {
+                createVNode(_sfc_main$5, {
                   onClick: playTrack,
                   color: "white",
                   size: "big",
@@ -213,7 +249,7 @@ const _sfc_main = {
                       key: 0,
                       fill: "rgb(var(--white))",
                       class: "i-medium"
-                    })) : (openBlock(), createBlock(_sfc_main$3, {
+                    })) : (openBlock(), createBlock(_sfc_main$1, {
                       key: 1,
                       fill: "rgb(var(--white))",
                       class: "i-medium"
@@ -226,185 +262,64 @@ const _sfc_main = {
             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))
+                _cache[2] || (_cache[2] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Plays", -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))
+                _cache[3] || (_cache[3] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Views", -1))
               ])
             ])
           ]),
           createElementVNode("div", _hoisted_13, [
-            _cache[19] || (_cache[19] = createElementVNode("div", { class: "flex items-center gap-small mn-b-small" }, [
+            _cache[11] || (_cache[11] = 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),
+            createVNode(_sfc_main$6, { buttons: actionButtons.value }, null, 8, ["buttons"]),
             createElementVNode("div", _hoisted_15, [
-              createVNode(_sfc_main$1, {
-                onClick: playTrack,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
-              }, {
-                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"
-                  })),
-                  createTextVNode(" " + toDisplayString(!isPlaying.value ? "Play" : "Pause"), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$1, {
-                onClick: addToQueue,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$4, { class: "i-medium" }),
-                  _cache[6] || (_cache[6] = createTextVNode(" Add to Queue "))
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$1, {
-                onClick: toggleFavorite,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  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$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"
-              }, {
-                trigger: withCtx(() => [
-                  createVNode(_sfc_main$1, {
-                    color: "transp",
-                    size: "medium",
-                    class: "w-3r h-3r radius-full"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(_sfc_main$7, { class: "w-1-25r h-1-25r" })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  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[7] || (_cache[7] = [
-                        createTextVNode(" Add to Playlist ")
-                      ])),
-                      _: 1
-                    }),
-                    createVNode(_sfc_main$1, {
-                      onClick: copyLink,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 justify-start"
-                    }, {
-                      default: withCtx(() => _cache[8] || (_cache[8] = [
-                        createTextVNode(" Copy Link ")
-                      ])),
-                      _: 1
-                    }),
-                    isOwner.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      _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[9] || (_cache[9] = [
-                          createTextVNode(" Edit Track ")
-                        ])),
-                        _: 1
-                      }),
-                      createVNode(_sfc_main$1, {
-                        onClick: deleteTrack,
-                        color: "danger",
-                        size: "small",
-                        class: "w-100 justify-start"
-                      }, {
-                        default: withCtx(() => _cache[10] || (_cache[10] = [
-                          createTextVNode(" Delete Track ")
-                        ])),
-                        _: 1
-                      })
-                    ], 64)) : createCommentVNode("", true)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["label", "modelValue"])
+              track.value.artist ? (openBlock(), createElementBlock("h3", _hoisted_16, "Artist")) : createCommentVNode("", true),
+              (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"]))
             ]),
+            _cache[12] || (_cache[12] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
             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"]))
-              ])
-            ]),
-            _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-medium t-primary" }),
+              createElementVNode("div", _hoisted_18, [
+                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _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)
+                  _cache[4] || (_cache[4] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
+                  createElementVNode("div", _hoisted_19, toDisplayString(formatDate(track.value.releaseDate)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_23, [
+              createElementVNode("div", _hoisted_20, [
                 createVNode(IconTime, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _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)
+                  _cache[5] || (_cache[5] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
+                  createElementVNode("div", _hoisted_21, toDisplayString(formatDuration(track.value.duration)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_25, [
-                createVNode(_sfc_main$9, { class: "i-medium t-primary" }),
+              createElementVNode("div", _hoisted_22, [
+                createVNode(_sfc_main$8, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[14] || (_cache[14] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
-                  createElementVNode("div", _hoisted_26, toDisplayString(track.value.status), 1)
+                  _cache[6] || (_cache[6] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
+                  createElementVNode("div", _hoisted_23, toDisplayString(track.value.status), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_27, [
-                createVNode(_sfc_main$a, { class: "i-medium t-primary" }),
+              createElementVNode("div", _hoisted_24, [
+                createVNode(_sfc_main$9, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _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)
+                  _cache[7] || (_cache[7] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
+                  createElementVNode("div", _hoisted_25, toDisplayString(track.value.isPublic ? "Public" : "Private"), 1)
                 ])
               ])
             ]),
-            track.value.album ? (openBlock(), createElementBlock("h3", _hoisted_29, "From Album")) : createCommentVNode("", true),
-            track.value.album ? (openBlock(), createElementBlock("div", _hoisted_30, [
+            track.value.album ? (openBlock(), createElementBlock("h3", _hoisted_26, "From Album")) : createCommentVNode("", true),
+            track.value.album ? (openBlock(), createElementBlock("div", _hoisted_27, [
               createVNode(_component_router_link, {
                 to: `/album/${track.value.album.url}`,
                 class: "flex flex-v-center gap-thin hover-opacity"
@@ -415,14 +330,14 @@ const _sfc_main = {
                     alt: track.value.album.title,
                     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)
+                  createElementVNode("span", _hoisted_28, 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_32, [
-              _cache[16] || (_cache[16] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
-              createElementVNode("div", _hoisted_33, [
+            track.value.genre && track.value.genre.length || track.value.tags && track.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_29, [
+              _cache[8] || (_cache[8] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Genres & Tags", -1)),
+              createElementVNode("div", _hoisted_30, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(track.value.genre, (genre) => {
                   return openBlock(), createElementBlock("span", {
                     key: genre,
@@ -437,19 +352,19 @@ const _sfc_main = {
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
-            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)
+            track.value.description ? (openBlock(), createElementBlock("div", _hoisted_31, [
+              _cache[9] || (_cache[9] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              createElementVNode("p", _hoisted_32, toDisplayString(track.value.description), 1)
             ])) : createCommentVNode("", true),
-            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)
+            track.value.lyrics ? (openBlock(), createElementBlock("div", _hoisted_33, [
+              _cache[10] || (_cache[10] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Lyrics", -1)),
+              createElementVNode("pre", _hoisted_34, toDisplayString(track.value.lyrics), 1)
             ])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        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, {
+        track.value && relatedTracks.value && relatedTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_35, [
+          _cache[13] || (_cache[13] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Related Tracks", -1)),
+          createVNode(_sfc_main$a, {
             store: {
               read: () => new _ctx.Promise((resolve) => resolve(relatedTracks.value || [])),
               state: { isLoading: false }
@@ -466,9 +381,9 @@ const _sfc_main = {
             class: "grid cols-2 cols-m-3 cols-l-4 gap-regular"
           }, {
             default: withCtx(({ items }) => [
-              createElementVNode("div", _hoisted_39, [
+              createElementVNode("div", _hoisted_36, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items, (relatedTrack, index) => {
-                  return openBlock(), createBlock(_sfc_main$c, {
+                  return openBlock(), createBlock(_sfc_main$b, {
                     key: relatedTrack._id,
                     track: relatedTrack,
                     index,
@@ -481,12 +396,12 @@ const _sfc_main = {
             _: 1
           }, 8, ["store", "items"])
         ])) : createCommentVNode("", true),
-        showAddToPlaylistModal.value ? (openBlock(), createBlock(_sfc_main$d, {
+        showAddToPlaylistModal.value ? (openBlock(), createBlock(_sfc_main$c, {
           key: 4,
-          onClosePopup: _cache[2] || (_cache[2] = ($event) => showAddToPlaylistModal.value = false),
+          onClosePopup: _cache[0] || (_cache[0] = ($event) => showAddToPlaylistModal.value = false),
           class: "bg-white pd-medium w-m-25r radius-medium"
         }, {
-          default: withCtx(() => _cache[22] || (_cache[22] = [
+          default: withCtx(() => _cache[14] || (_cache[14] = [
             createElementVNode("h3", { class: "h3 mn-b-medium" }, "Add to Playlist", -1),
             createElementVNode("p", { class: "t-transp" }, "Playlist selector coming soon...", -1)
           ])),