@ozdao/martyrs 0.2.565 → 0.2.567

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

@@ -1,24 +1,24 @@
-import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, withCtx, createTextVNode, Fragment, createBlock, renderList } from "vue";
+import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, Fragment, renderList, createBlock, withCtx, createTextVNode } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
+import _sfc_main$9 from "../../../../components/Button/Button.vue2.js";
 /* empty css                                        */
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$4 from "../../../../components/Dropdown/Dropdown.vue.js";
-import _sfc_main$9 from "../../../../components/Feed/Feed.vue.js";
-import _sfc_main$b from "../../../../components/Popup/Popup.vue.js";
-import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
-import _sfc_main$5 from "../../../icons/navigation/IconEllipsis.vue.js";
-import _sfc_main$3 from "../../../icons/navigation/IconShuffle.vue.js";
-import _sfc_main$6 from "../../../icons/entities/IconCalendar.vue.js";
+/* empty css                                            */
+import _sfc_main$7 from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$a from "../../../../components/Popup/Popup.vue.js";
+import _sfc_main$1 from "../../../icons/navigation/IconPlay.vue.js";
+import _sfc_main$2 from "../../../icons/navigation/IconShuffle.vue.js";
+import _sfc_main$4 from "../../../icons/entities/IconCalendar.vue.js";
 import IconTime from "../../../icons/entities/IconTime.vue.js";
-import _sfc_main$8 from "../../../icons/actions/IconShow.vue.js";
-import _sfc_main$7 from "../../../icons/navigation/IconRefresh.vue.js";
-import _sfc_main$a from "../cards/TrackListCard.vue.js";
+import _sfc_main$6 from "../../../icons/actions/IconShow.vue.js";
+import _sfc_main$5 from "../../../icons/navigation/IconRefresh.vue.js";
+import _sfc_main$3 from "../blocks/ActionButtons.vue.js";
+import _sfc_main$8 from "../cards/TrackListCard.vue.js";
 import PlaylistCard from "../cards/PlaylistCard.vue.js";
-import _sfc_main$c from "../forms/PlaylistForm.vue.js";
+import _sfc_main$b from "../forms/PlaylistForm.vue.js";
 import ArtistCardSmall from "../cards/ArtistCardSmall.vue.js";
-import { state, actions } from "../../store/playlists.js";
-import { actions as actions$1 } from "../../store/player.js";
+import { state, actions as actions$1 } from "../../store/playlists.js";
+import { actions } from "../../store/player.js";
 import { state as state$1 } from "../../../auth/views/store/auth.js";
 import { useStore } from "../../../core/views/store/core.store.js";
 const _hoisted_1 = { class: "playlist-page pd-small" };
@@ -28,9 +28,9 @@ const _hoisted_2 = {
 };
 const _hoisted_3 = {
   key: 1,
-  class: "playlist-content cols-2-fit-content mobile:cols-1 gap-big"
+  class: "playlist-content cols-2 mobile:cols-1 gap-big"
 };
-const _hoisted_4 = { class: "pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section" };
+const _hoisted_4 = { class: "pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section" };
 const _hoisted_5 = { class: "cover-container relative mn-b-medium radius-big overflow-hidden shadow-big" };
 const _hoisted_6 = { class: "stats-grid grid cols-2 gap-small" };
 const _hoisted_7 = { class: "stat-card bg-light pd-medium radius-medium t-center" };
@@ -48,53 +48,51 @@ const _hoisted_14 = {
   class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 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-white pd-small radius-medium shadow-big mn-t-thin" };
-const _hoisted_18 = { class: "artists-section mn-b-medium" };
-const _hoisted_19 = { class: "flex flex-column gap-small" };
-const _hoisted_20 = {
+const _hoisted_16 = { class: "artists-section mn-b-medium" };
+const _hoisted_17 = { class: "flex flex-column gap-small" };
+const _hoisted_18 = {
   key: 0,
   class: "collaborators-section mn-b-big"
 };
-const _hoisted_21 = { class: "flex flex-wrap gap-small" };
-const _hoisted_22 = { class: "t-small" };
-const _hoisted_23 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
+const _hoisted_19 = { class: "flex flex-wrap gap-small" };
+const _hoisted_20 = { class: "t-small" };
+const _hoisted_21 = { class: "metadata-grid grid cols-2 gap-small mn-b-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 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_27 = { class: "t-medium" };
 const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_29 = { class: "t-medium" };
-const _hoisted_30 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
-const _hoisted_31 = { class: "t-medium" };
-const _hoisted_32 = {
+const _hoisted_30 = {
   key: 1,
   class: "tags-section mn-b-medium"
 };
-const _hoisted_33 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_34 = {
+const _hoisted_31 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_32 = {
   key: 2,
   class: "description-section bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_35 = { class: "t-transp" };
-const _hoisted_36 = {
+const _hoisted_33 = { class: "t-transp" };
+const _hoisted_34 = {
   key: 2,
   class: "tracks-section mn-t-big"
 };
-const _hoisted_37 = { class: "bg-light radius-medium o-hidden" };
-const _hoisted_38 = {
+const _hoisted_35 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_36 = {
   key: 3,
   class: "empty-section mn-t-big"
 };
-const _hoisted_39 = { class: "empty-tracks t-center pd-big bg-light radius-medium" };
-const _hoisted_40 = {
+const _hoisted_37 = { class: "empty-tracks t-center pd-big bg-light radius-medium" };
+const _hoisted_38 = {
   key: 4,
   class: "more-playlists-section mn-t-big"
 };
-const _hoisted_41 = { class: "flex justify-between items-center mn-b-medium" };
-const _hoisted_42 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
-const _hoisted_43 = { class: "t-transp mn-b-medium" };
-const _hoisted_44 = { class: "flex justify-end gap-small" };
+const _hoisted_39 = { class: "flex justify-between items-center mn-b-medium" };
+const _hoisted_40 = { class: "flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide" };
+const _hoisted_41 = { class: "t-transp mn-b-medium" };
+const _hoisted_42 = { class: "flex justify-end gap-small" };
 const _sfc_main = {
   __name: "Playlist",
   emits: ["page-loading", "page-loaded"],
@@ -105,7 +103,6 @@ const _sfc_main = {
     const emits = __emit;
     const hasLoaded = ref(false);
     const isFollowing = ref(false);
-    const showDropdown = ref(false);
     const showEditModal = ref(false);
     const showDeleteModal = ref(false);
     const followedUsers = ref([]);
@@ -130,6 +127,58 @@ const _sfc_main = {
       const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);
       return formatDuration(totalSeconds);
     });
+    const actionButtons = computed(() => {
+      const buttons = [
+        {
+          type: "button",
+          class: "t-white bg-black",
+          icon: _sfc_main$1,
+          iconFill: "rgb(var(--white))",
+          text: "Play All",
+          action: playPlaylist
+        },
+        {
+          type: "button",
+          class: "bg-light",
+          icon: _sfc_main$2,
+          text: "Shuffle",
+          action: shufflePlay
+        },
+        {
+          type: "button",
+          class: "bg-light",
+          icon: null,
+          text: isFollowing.value ? "Unfollow" : "Follow",
+          action: toggleFollow
+        },
+        {
+          type: "dropdown",
+          items: [
+            { text: "Add to Queue", action: addToQueue, class: "t-nowrap" },
+            { text: "Copy Link", action: copyLink, class: "t-nowrap" }
+          ]
+        }
+      ];
+      if (isOwner.value || isCollaborator.value) {
+        const items = buttons[3].items;
+        items.push({ separator: true });
+        items.push({ text: "Edit Playlist", action: editPlaylist, class: "t-nowrap" });
+        if (isOwner.value) {
+          items.push({
+            text: playlist.value?.isCollaborative ? "Make Private" : "Make Collaborative",
+            action: toggleCollaborative,
+            class: "t-nowrap"
+          });
+          items.push({
+            text: "Delete Playlist",
+            action: deletePlaylist,
+            color: "danger",
+            class: "t-nowrap"
+          });
+        }
+      }
+      return buttons;
+    });
     const getOwnerProfileLink = (owner) => {
       if (!owner || !owner.target) return { name: "music-home" };
       const targetId = typeof owner.target === "object" ? owner.target._id : owner.target;
@@ -169,22 +218,22 @@ const _sfc_main = {
     };
     const playPlaylist = () => {
       if (playlistTracks.value && playlistTracks.value.length > 0) {
-        actions$1.setQueue(playlistTracks.value);
+        actions.setQueue(playlistTracks.value);
       }
     };
     const shufflePlay = () => {
       if (playlistTracks.value && playlistTracks.value.length > 0) {
         const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);
-        actions$1.setQueue(shuffled);
+        actions.setQueue(shuffled);
       }
     };
     const toggleFollow = async () => {
       isFollowing.value = !isFollowing.value;
       try {
         if (isFollowing.value) {
-          await actions.followPlaylist(playlist.value._id);
+          await actions$1.followPlaylist(playlist.value._id);
         } else {
-          await actions.unfollowPlaylist(playlist.value._id);
+          await actions$1.unfollowPlaylist(playlist.value._id);
         }
       } catch (error) {
         console.error("Error toggling follow:", error);
@@ -202,14 +251,12 @@ const _sfc_main = {
     const addToQueue = () => {
       if (playlistTracks.value && playlistTracks.value.length > 0) {
         playlistTracks.value.forEach((track) => {
-          actions$1.addToQueue(track);
+          actions.addToQueue(track);
         });
-        showDropdown.value = false;
       }
     };
     const editPlaylist = () => {
       showEditModal.value = true;
-      showDropdown.value = false;
     };
     const toggleCollaborative = async () => {
       try {
@@ -217,19 +264,17 @@ const _sfc_main = {
           _id: playlist.value._id,
           isCollaborative: !playlist.value.isCollaborative
         };
-        await actions.updatePlaylist(updatedData);
-        showDropdown.value = false;
+        await actions$1.updatePlaylist(updatedData);
       } catch (error) {
         console.error("Error updating playlist:", error);
       }
     };
     const deletePlaylist = () => {
       showDeleteModal.value = true;
-      showDropdown.value = false;
     };
     const confirmDelete = async () => {
       try {
-        await actions.deletePlaylist(playlist.value._id);
+        await actions$1.deletePlaylist(playlist.value._id);
         router.push({ name: "music-library" });
       } catch (error) {
         console.error("Error deleting playlist:", error);
@@ -240,7 +285,7 @@ const _sfc_main = {
     };
     const removeTrack = async (trackId) => {
       try {
-        await actions.removeTrackFromPlaylist(playlist.value._id, trackId);
+        await actions$1.removeTrackFromPlaylist(playlist.value._id, trackId);
         await fetchPlaylistData();
       } catch (error) {
         console.error("Error removing track:", error);
@@ -251,7 +296,6 @@ const _sfc_main = {
     };
     const copyLink = () => {
       navigator.clipboard.writeText(window.location.href);
-      showDropdown.value = false;
     };
     const handlePlaylistUpdated = () => {
       showEditModal.value = false;
@@ -259,12 +303,12 @@ const _sfc_main = {
     };
     const fetchPlaylistData = async () => {
       try {
-        await actions.fetchPlaylistByUrl(route.params.url);
+        await actions$1.fetchPlaylistByUrl(route.params.url);
         if (state$1.user && playlist.value) {
         }
         if (playlist.value?.creator?.target) {
           const creatorId = typeof playlist.value.creator.target === "object" ? playlist.value.creator.target._id : playlist.value.creator.target;
-          const playlists = await actions.fetchPlaylists({
+          const playlists = await actions$1.fetchPlaylists({
             "creator.target": creatorId,
             isPublic: true,
             limit: 6
@@ -284,7 +328,7 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        hasLoaded.value && !playlist.value ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[7] || (_cache[7] = [
+        hasLoaded.value && !playlist.value ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[6] || (_cache[6] = [
           createElementVNode("h2", { class: "" }, "Playlist not found", -1),
           createElementVNode("p", { class: "t-transp t-medium" }, "The playlist you're looking for doesn't exist or has been removed.", -1)
         ]))) : createCommentVNode("", true),
@@ -300,148 +344,25 @@ const _sfc_main = {
             createElementVNode("div", _hoisted_6, [
               createElementVNode("div", _hoisted_7, [
                 createElementVNode("div", _hoisted_8, toDisplayString(playlistTracks.value.length), 1),
-                _cache[8] || (_cache[8] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Tracks", -1))
+                _cache[7] || (_cache[7] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Tracks", -1))
               ]),
               createElementVNode("div", _hoisted_9, [
                 createElementVNode("div", _hoisted_10, toDisplayString(formatNumber(playlist.value.followers || 0)), 1),
-                _cache[9] || (_cache[9] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Followers", -1))
+                _cache[8] || (_cache[8] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Followers", -1))
               ])
             ])
           ]),
           createElementVNode("div", _hoisted_11, [
             createElementVNode("div", _hoisted_12, [
-              _cache[10] || (_cache[10] = createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, " Playlist ", -1)),
+              _cache[9] || (_cache[9] = createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, " Playlist ", -1)),
               playlist.value.isCollaborative ? (openBlock(), createElementBlock("span", _hoisted_13, " Collaborative ")) : createCommentVNode("", true),
               playlist.value.status === "published" ? (openBlock(), createElementBlock("span", _hoisted_14, " Published ")) : createCommentVNode("", true)
             ]),
             createElementVNode("h1", _hoisted_15, toDisplayString(playlist.value.title), 1),
+            createVNode(_sfc_main$3, { buttons: actionButtons.value }, null, 8, ["buttons"]),
             createElementVNode("div", _hoisted_16, [
-              createVNode(_sfc_main$1, {
-                onClick: playPlaylist,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$2, {
-                    fill: "rgb(var(--white))",
-                    class: "i-medium"
-                  }),
-                  _cache[11] || (_cache[11] = createTextVNode(" Play All "))
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$1, {
-                onClick: shufflePlay,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  createVNode(_sfc_main$3, { class: "i-medium" }),
-                  _cache[12] || (_cache[12] = createTextVNode(" Shuffle "))
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$1, {
-                onClick: toggleFollow,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(isFollowing.value ? "Follow" : "Unfollow"), 1)
-                ]),
-                _: 1
-              }),
-              createVNode(_sfc_main$4, {
-                label: { component: _sfc_main$5, class: "bg-light radius-thin pd-thin i-big" },
-                modelValue: showDropdown.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($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$5, { class: "w-1-25r h-1-25r" })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: withCtx(() => [
-                  createElementVNode("div", _hoisted_17, [
-                    createVNode(_sfc_main$1, {
-                      onClick: addToQueue,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 t-nowrap justify-start"
-                    }, {
-                      default: withCtx(() => _cache[13] || (_cache[13] = [
-                        createTextVNode(" Add to Queue ")
-                      ])),
-                      _: 1
-                    }),
-                    createVNode(_sfc_main$1, {
-                      onClick: copyLink,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 t-nowrap justify-start"
-                    }, {
-                      default: withCtx(() => _cache[14] || (_cache[14] = [
-                        createTextVNode(" Copy Link ")
-                      ])),
-                      _: 1
-                    }),
-                    isOwner.value || isCollaborator.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                      _cache[17] || (_cache[17] = createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
-                      createVNode(_sfc_main$1, {
-                        onClick: editPlaylist,
-                        color: "transp",
-                        size: "small",
-                        class: "w-100 t-nowrap justify-start"
-                      }, {
-                        default: withCtx(() => _cache[15] || (_cache[15] = [
-                          createTextVNode(" Edit Playlist ")
-                        ])),
-                        _: 1
-                      }),
-                      isOwner.value ? (openBlock(), createBlock(_sfc_main$1, {
-                        key: 0,
-                        onClick: toggleCollaborative,
-                        color: "transp",
-                        size: "small",
-                        class: "t-nowrap w-100 justify-start"
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(playlist.value.isCollaborative ? "Make Private" : "Make Collaborative"), 1)
-                        ]),
-                        _: 1
-                      })) : createCommentVNode("", true),
-                      isOwner.value ? (openBlock(), createBlock(_sfc_main$1, {
-                        key: 1,
-                        onClick: deletePlaylist,
-                        color: "danger",
-                        size: "small",
-                        class: "t-nowrap w-100 justify-start"
-                      }, {
-                        default: withCtx(() => _cache[16] || (_cache[16] = [
-                          createTextVNode(" Delete Playlist ")
-                        ])),
-                        _: 1
-                      })) : createCommentVNode("", true)
-                    ], 64)) : createCommentVNode("", true)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["label", "modelValue"])
-            ]),
-            createElementVNode("div", _hoisted_18, [
-              _cache[18] || (_cache[18] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Created by", -1)),
-              createElementVNode("div", _hoisted_19, [
+              _cache[10] || (_cache[10] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Created by", -1)),
+              createElementVNode("div", _hoisted_17, [
                 createVNode(ArtistCardSmall, {
                   artist: {
                     _id: playlist.value.creator.target,
@@ -452,13 +373,13 @@ const _sfc_main = {
                   },
                   "is-following": followedUsers.value.includes(playlist.value.creator.target),
                   "show-follow-button": !isOwner.value,
-                  onToggleFollow: _cache[1] || (_cache[1] = ($event) => toggleFollowUser(playlist.value.creator.target))
+                  onToggleFollow: _cache[0] || (_cache[0] = ($event) => toggleFollowUser(playlist.value.creator.target))
                 }, null, 8, ["artist", "is-following", "show-follow-button"])
               ])
             ]),
-            playlist.value.collaborators && playlist.value.collaborators.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_20, [
-              _cache[19] || (_cache[19] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Collaborators", -1)),
-              createElementVNode("div", _hoisted_21, [
+            playlist.value.collaborators && playlist.value.collaborators.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_18, [
+              _cache[11] || (_cache[11] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Collaborators", -1)),
+              createElementVNode("div", _hoisted_19, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.value.collaborators, (collaborator) => {
                   return openBlock(), createElementBlock("div", {
                     key: collaborator._id || collaborator,
@@ -469,45 +390,45 @@ const _sfc_main = {
                       url: collaborator.photoUrl,
                       class: "i-medium radius-full object-cover"
                     }, null, 8, ["url"])) : createCommentVNode("", true),
-                    createElementVNode("span", _hoisted_22, toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
+                    createElementVNode("span", _hoisted_20, toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
                   ]);
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
-            _cache[26] || (_cache[26] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
-            createElementVNode("div", _hoisted_23, [
-              createElementVNode("div", _hoisted_24, [
-                createVNode(_sfc_main$6, { class: "i-medium t-primary" }),
+            _cache[18] || (_cache[18] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
+            createElementVNode("div", _hoisted_21, [
+              createElementVNode("div", _hoisted_22, [
+                createVNode(_sfc_main$4, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[20] || (_cache[20] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Created", -1)),
-                  createElementVNode("div", _hoisted_25, toDisplayString(formatDate(playlist.value.createdAt)), 1)
+                  _cache[12] || (_cache[12] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Created", -1)),
+                  createElementVNode("div", _hoisted_23, toDisplayString(formatDate(playlist.value.createdAt)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_26, [
+              createElementVNode("div", _hoisted_24, [
                 createVNode(IconTime, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[21] || (_cache[21] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
-                  createElementVNode("div", _hoisted_27, toDisplayString(totalDuration.value), 1)
+                  _cache[13] || (_cache[13] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
+                  createElementVNode("div", _hoisted_25, toDisplayString(totalDuration.value), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_28, [
-                createVNode(_sfc_main$7, { class: "i-medium t-primary" }),
+              createElementVNode("div", _hoisted_26, [
+                createVNode(_sfc_main$5, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[22] || (_cache[22] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Updated", -1)),
-                  createElementVNode("div", _hoisted_29, toDisplayString(formatDate(playlist.value.updatedAt)), 1)
+                  _cache[14] || (_cache[14] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Updated", -1)),
+                  createElementVNode("div", _hoisted_27, toDisplayString(formatDate(playlist.value.updatedAt)), 1)
                 ])
               ]),
-              createElementVNode("div", _hoisted_30, [
-                createVNode(_sfc_main$8, { class: "i-medium t-primary" }),
+              createElementVNode("div", _hoisted_28, [
+                createVNode(_sfc_main$6, { class: "i-medium t-primary" }),
                 createElementVNode("div", null, [
-                  _cache[23] || (_cache[23] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
-                  createElementVNode("div", _hoisted_31, toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 1)
+                  _cache[15] || (_cache[15] = createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
+                  createElementVNode("div", _hoisted_29, toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 1)
                 ])
               ])
             ]),
-            playlist.value.tags && playlist.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_32, [
-              _cache[24] || (_cache[24] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Tags", -1)),
-              createElementVNode("div", _hoisted_33, [
+            playlist.value.tags && playlist.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_30, [
+              _cache[16] || (_cache[16] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Tags", -1)),
+              createElementVNode("div", _hoisted_31, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.value.tags, (tag) => {
                   return openBlock(), createElementBlock("span", {
                     key: tag,
@@ -516,15 +437,15 @@ const _sfc_main = {
                 }), 128))
               ])
             ])) : createCommentVNode("", true),
-            playlist.value.description ? (openBlock(), createElementBlock("div", _hoisted_34, [
-              _cache[25] || (_cache[25] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
-              createElementVNode("p", _hoisted_35, toDisplayString(playlist.value.description), 1)
+            playlist.value.description ? (openBlock(), createElementBlock("div", _hoisted_32, [
+              _cache[17] || (_cache[17] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              createElementVNode("p", _hoisted_33, toDisplayString(playlist.value.description), 1)
             ])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        !_ctx.isLoading && playlist.value && playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_36, [
-          _cache[27] || (_cache[27] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
-          createVNode(_sfc_main$9, {
+        !_ctx.isLoading && playlist.value && playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_34, [
+          _cache[19] || (_cache[19] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
+          createVNode(_sfc_main$7, {
             store: {
               read: () => _ctx.Promise.resolve(playlistTracks.value),
               state: { isLoading: false }
@@ -540,9 +461,9 @@ const _sfc_main = {
             }
           }, {
             default: withCtx(({ items }) => [
-              createElementVNode("div", _hoisted_37, [
+              createElementVNode("div", _hoisted_35, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
-                  return openBlock(), createBlock(_sfc_main$a, {
+                  return openBlock(), createBlock(_sfc_main$8, {
                     key: track._id,
                     track,
                     index: index + 1,
@@ -556,38 +477,38 @@ const _sfc_main = {
             ]),
             _: 1
           }, 8, ["store", "items"])
-        ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_38, [
-          createElementVNode("div", _hoisted_39, [
-            _cache[29] || (_cache[29] = createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
-            _cache[30] || (_cache[30] = createElementVNode("p", { class: "t-transp t-medium mn-b-medium" }, "Add some tracks to get started", -1)),
-            isOwner.value || isCollaborator.value ? (openBlock(), createBlock(_sfc_main$1, {
+        ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_36, [
+          createElementVNode("div", _hoisted_37, [
+            _cache[21] || (_cache[21] = createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
+            _cache[22] || (_cache[22] = createElementVNode("p", { class: "t-transp t-medium mn-b-medium" }, "Add some tracks to get started", -1)),
+            isOwner.value || isCollaborator.value ? (openBlock(), createBlock(_sfc_main$9, {
               key: 0,
-              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$router.push({ name: "music-search" })),
+              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.push({ name: "music-search" })),
               color: "primary",
               size: "medium"
             }, {
-              default: withCtx(() => _cache[28] || (_cache[28] = [
+              default: withCtx(() => _cache[20] || (_cache[20] = [
                 createTextVNode(" Find Tracks ")
               ])),
               _: 1
             })) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        !_ctx.isLoading && playlist.value && morePlaylists.value.length ? (openBlock(), createElementBlock("section", _hoisted_40, [
-          createElementVNode("div", _hoisted_41, [
-            _cache[32] || (_cache[32] = createElementVNode("h2", { class: "h2" }, "More Playlists", -1)),
+        !_ctx.isLoading && playlist.value && morePlaylists.value.length ? (openBlock(), createElementBlock("section", _hoisted_38, [
+          createElementVNode("div", _hoisted_39, [
+            _cache[24] || (_cache[24] = createElementVNode("h2", { class: "h2" }, "More Playlists", -1)),
             playlist.value.creator ? (openBlock(), createBlock(_component_router_link, {
               key: 0,
               to: getOwnerProfileLink(playlist.value.creator),
               class: "t-primary hover-opacity"
             }, {
-              default: withCtx(() => _cache[31] || (_cache[31] = [
+              default: withCtx(() => _cache[23] || (_cache[23] = [
                 createTextVNode(" See all ")
               ])),
               _: 1
             }, 8, ["to"])) : createCommentVNode("", true)
           ]),
-          createElementVNode("div", _hoisted_42, [
+          createElementVNode("div", _hoisted_40, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(morePlaylists.value, (relatedPlaylist) => {
               return openBlock(), createElementBlock("li", {
                 key: relatedPlaylist._id,
@@ -601,46 +522,46 @@ const _sfc_main = {
             }), 128))
           ])
         ])) : createCommentVNode("", true),
-        createVNode(_sfc_main$b, {
+        createVNode(_sfc_main$a, {
           isPopupOpen: showEditModal.value && (isOwner.value || isCollaborator.value),
-          onClosePopup: _cache[4] || (_cache[4] = ($event) => showEditModal.value = false),
+          onClosePopup: _cache[3] || (_cache[3] = ($event) => showEditModal.value = false),
           class: "bg-white pd-medium w-m-30r radius-medium"
         }, {
           default: withCtx(() => [
-            createVNode(_sfc_main$c, {
+            createVNode(_sfc_main$b, {
               editMode: true,
               url: playlist.value.url,
-              onCancel: _cache[3] || (_cache[3] = ($event) => showEditModal.value = false),
+              onCancel: _cache[2] || (_cache[2] = ($event) => showEditModal.value = false),
               onUpdated: handlePlaylistUpdated
             }, null, 8, ["url"])
           ]),
           _: 1
         }, 8, ["isPopupOpen"]),
-        createVNode(_sfc_main$b, {
+        createVNode(_sfc_main$a, {
           isPopupOpen: showDeleteModal.value,
-          onClosePopup: _cache[6] || (_cache[6] = ($event) => showDeleteModal.value = false),
+          onClosePopup: _cache[5] || (_cache[5] = ($event) => showDeleteModal.value = false),
           class: "bg-white pd-medium w-m-25r radius-medium"
         }, {
           default: withCtx(() => [
-            _cache[35] || (_cache[35] = createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
-            createElementVNode("p", _hoisted_43, 'Are you sure you want to delete "' + toDisplayString(playlist.value.title) + '"? This action cannot be undone.', 1),
-            createElementVNode("div", _hoisted_44, [
-              createVNode(_sfc_main$1, {
-                onClick: _cache[5] || (_cache[5] = ($event) => showDeleteModal.value = false),
+            _cache[27] || (_cache[27] = createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
+            createElementVNode("p", _hoisted_41, 'Are you sure you want to delete "' + toDisplayString(playlist.value.title) + '"? This action cannot be undone.', 1),
+            createElementVNode("div", _hoisted_42, [
+              createVNode(_sfc_main$9, {
+                onClick: _cache[4] || (_cache[4] = ($event) => showDeleteModal.value = false),
                 color: "transp",
                 size: "medium"
               }, {
-                default: withCtx(() => _cache[33] || (_cache[33] = [
+                default: withCtx(() => _cache[25] || (_cache[25] = [
                   createTextVNode(" Cancel ")
                 ])),
                 _: 1
               }),
-              createVNode(_sfc_main$1, {
+              createVNode(_sfc_main$9, {
                 onClick: confirmDelete,
                 color: "danger",
                 size: "medium"
               }, {
-                default: withCtx(() => _cache[34] || (_cache[34] = [
+                default: withCtx(() => _cache[26] || (_cache[26] = [
                   createTextVNode(" Delete Playlist ")
                 ])),
                 _: 1