@ozdao/martyrs 0.2.492 → 0.2.493

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

@@ -1,138 +1,229 @@
-import { ref, reactive, computed, onMounted, watch, resolveComponent, createElementBlock, openBlock, createVNode, createElementVNode, createBlock, createCommentVNode, toDisplayString, withCtx, createTextVNode, Fragment, renderList, withModifiers } from "vue";
+import { ref, computed, onMounted, resolveComponent, createElementBlock, openBlock, createCommentVNode, createVNode, createElementVNode, toDisplayString, withCtx, createTextVNode, Fragment, createBlock, unref, renderList } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import _sfc_main$6 from "../../../../components/Feed/Feed.vue.js";
-import TrackCard from "../cards/TrackCard.vue.js";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
-import Loader from "../../../../components/Loader/Loader.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$7 from "../../../../components/Popup/Popup.vue.js";
-import Field from "../../../../components/Field/Field.vue2.js";
-import _sfc_main$8 from "../../../../components/Radio/Radio.vue.js";
-import _sfc_main$a from "../../../../components/UploadImage/UploadImage.vue.js";
+import _sfc_main$a from "../../../../components/Feed/Feed.vue.js";
+import _sfc_main$c from "../../../../components/Popup/Popup.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$5 from "../../../icons/navigation/IconEllipsis.vue.js";
-import _sfc_main$9 from "../../../icons/entities/IconMusic.vue.js";
-import { state as state$1 } from "../../../auth/views/store/auth.js";
+import _sfc_main$3 from "../../../icons/navigation/IconShuffle.vue.js";
+import _sfc_main$7 from "../../../icons/entities/IconCalendar.vue.js";
+import IconClock from "../../../icons/entities/IconTime.vue.js";
+import _sfc_main$9 from "../../../icons/actions/IconShow.vue.js";
+import _sfc_main$8 from "../../../icons/navigation/IconRefresh.vue.js";
+import _sfc_main$6 from "../../../icons/navigation/IconCheckmark.vue.js";
+import _sfc_main$b from "../cards/TrackListCard.vue.js";
+import PlaylistCard from "../cards/PlaylistCard.vue.js";
+import _sfc_main$d from "../forms/PlaylistForm.vue.js";
 import { state, actions } from "../../store/playlists.js";
+import "../../store/tracks.js";
 import { actions as actions$1 } from "../../store/player.js";
-const _hoisted_1 = { class: "playlist-page" };
+import { state as state$1 } from "../../../auth/views/store/auth.js";
+import { actions as actions$2 } from "../../../globals/views/store/globals.js";
+const _hoisted_1 = { class: "playlist-page pd-small" };
 const _hoisted_2 = {
   key: 0,
-  class: "w-100 h-25r flex-center flex"
+  class: "t-center pd-big"
 };
 const _hoisted_3 = {
   key: 1,
-  class: "t-center pd-big"
+  class: "playlist-content cols-2-fit-content mobile:cols-1 gap-big"
 };
-const _hoisted_4 = { key: 2 };
-const _hoisted_5 = { class: "playlist-header mn-b-medium flex flex-v-center gap-medium" };
-const _hoisted_6 = { class: "playlist-cover" };
-const _hoisted_7 = { class: "playlist-info" };
-const _hoisted_8 = { class: "" };
-const _hoisted_9 = {
+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" };
+const _hoisted_8 = { class: "mn-b-thin" };
+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: "playlist-details-section" };
+const _hoisted_12 = { class: "flex items-center gap-small mn-b-small" };
+const _hoisted_13 = {
   key: 0,
-  class: "playlist-description t-grey mn-t-thin mn-b-small"
+  class: "badge bg-secondary-transp-20 t-secondary pd-thin-big radius-small t-small"
 };
-const _hoisted_10 = { class: "playlist-meta flex flex-v-center" };
-const _hoisted_11 = {
+const _hoisted_14 = {
   key: 1,
-  class: "t-medium"
+  class: "badge bg-success-transp-20 t-success pd-thin-big radius-small t-small"
 };
-const _hoisted_12 = { class: "t-grey" };
-const _hoisted_13 = { class: "playlist-actions mn-b-medium flex flex-v-center gap-small" };
-const _hoisted_14 = {
-  key: 0,
-  class: "pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin"
+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: "owner-section mn-b-big" };
+const _hoisted_19 = { class: "owner-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_20 = { class: "owner-avatar" };
+const _hoisted_21 = {
+  key: 1,
+  class: "w-4r h-4r radius-full bg-primary flex-center"
 };
-const _hoisted_15 = {
+const _hoisted_22 = { class: "flex items-center gap-thin" };
+const _hoisted_23 = { class: "t-large" };
+const _hoisted_24 = { class: "t-small t-transp" };
+const _hoisted_25 = {
   key: 0,
-  class: "mn-b-thin"
+  class: "collaborators-section mn-b-big"
 };
-const _hoisted_16 = { class: "mn-b-thin" };
-const _hoisted_17 = {
+const _hoisted_26 = { class: "flex flex-wrap gap-small" };
+const _hoisted_27 = { class: "t-small" };
+const _hoisted_28 = { class: "metadata-grid grid cols-2 gap-small mn-b-big" };
+const _hoisted_29 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_30 = { class: "t-medium" };
+const _hoisted_31 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_32 = { class: "t-medium" };
+const _hoisted_33 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_34 = { class: "t-medium" };
+const _hoisted_35 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_36 = { class: "t-medium" };
+const _hoisted_37 = {
   key: 1,
-  class: "mn-b-thin"
+  class: "tags-section mn-b-medium"
 };
-const _hoisted_18 = {
+const _hoisted_38 = { class: "flex gap-thin flex-wrap" };
+const _hoisted_39 = {
   key: 2,
-  class: "mn-b-thin"
+  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
 };
-const _hoisted_19 = { class: "playlist-tracks" };
-const _hoisted_20 = {
-  key: 0,
-  class: "empty-tracks t-center pd-big bg-dark-transp-10 radius-medium"
+const _hoisted_40 = { class: "t-transp" };
+const _hoisted_41 = {
+  key: 2,
+  class: "tracks-section mn-t-big"
 };
-const _hoisted_21 = { class: "form-group mn-b-medium" };
-const _hoisted_22 = { class: "form-group mn-b-medium" };
-const _hoisted_23 = { class: "form-group mn-b-medium" };
-const _hoisted_24 = { class: "flex gap-small" };
-const _hoisted_25 = { class: "form-group mn-b-medium" };
-const _hoisted_26 = { class: "playlist-cover-upload flex gap-medium" };
-const _hoisted_27 = { class: "playlist-cover-preview bg-dark-transp-25 radius-small o-hidden" };
-const _hoisted_28 = {
-  key: 1,
-  class: "w-10r h-10r flex-center flex"
+const _hoisted_42 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_43 = {
+  key: 3,
+  class: "empty-section mn-t-big"
 };
-const _hoisted_29 = { class: "form-actions t-right" };
-const _hoisted_30 = { class: "t-right" };
+const _hoisted_44 = { class: "empty-tracks t-center pd-big bg-light radius-medium" };
+const _hoisted_45 = {
+  key: 4,
+  class: "more-playlists-section mn-t-big"
+};
+const _hoisted_46 = { class: "flex justify-between items-center mn-b-medium" };
+const _hoisted_47 = { 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_48 = { class: "t-transp mn-b-medium" };
+const _hoisted_49 = { class: "flex justify-end gap-small" };
 const _sfc_main = {
   __name: "Playlist",
-  setup(__props) {
+  emits: ["page-loading", "page-loaded"],
+  setup(__props, { emit: __emit }) {
     const route = useRoute();
     const router = useRouter();
-    const isLoading = ref(true);
-    const isFavorite = ref(false);
+    const emits = __emit;
+    const hasLoaded = ref(false);
+    const isFollowing = ref(false);
     const showDropdown = ref(false);
     const showEditModal = ref(false);
     const showDeleteModal = ref(false);
-    const validationErrors = reactive({});
-    const editForm = reactive({
-      title: "",
-      description: "",
-      isPublic: true,
-      coverUrl: ""
-    });
+    const followedUsers = ref([]);
+    const morePlaylists = ref([]);
+    state.currentPlaylist = null;
+    state.currentPlaylistTracks = [];
     const playlist = computed(() => state.currentPlaylist);
-    const playlistTracks = computed(() => state.currentPlaylistTracks);
+    const playlistTracks = computed(() => state.currentPlaylistTracks || []);
     const isOwner = computed(() => {
       if (!playlist.value || !state$1.user) return false;
-      return playlist.value.owner?.target?._id === state$1.user._id || playlist.value.owner?.target === state$1.user._id;
+      const ownerId = playlist.value.owner?.target?._id || playlist.value.owner?.target;
+      return ownerId === state$1.user._id;
     });
     const isCollaborator = computed(() => {
       if (!playlist.value || !state$1.user) return false;
       return playlist.value.collaborators?.some(
-        (collab) => collab._id === state$1.user._id || collab === state$1.user._id
+        (collab) => (collab._id || collab) === state$1.user._id
       );
     });
+    const totalDuration = computed(() => {
+      if (!playlistTracks.value.length) return "0:00";
+      const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);
+      return formatDuration(totalSeconds);
+    });
+    const getOwnerData = (playlist2) => {
+      if (!playlist2) return null;
+      const owner = playlist2.creator?.target || playlist2.owner?.target;
+      return typeof owner === "object" ? owner : null;
+    };
+    const getOwnerId = (playlist2) => {
+      if (!playlist2) return null;
+      const owner = playlist2.creator?.target || playlist2.owner?.target;
+      return typeof owner === "object" ? owner._id : owner;
+    };
     const getPlaylistOwnerName = (playlist2) => {
-      if (!playlist2 || !playlist2.owner) return "Unknown";
-      const owner = playlist2.owner.target;
-      if (typeof owner === "object") {
-        if (owner.profile?.name) {
-          return owner.profile.name;
-        }
-        return owner.name || "Unknown";
+      if (!playlist2) return "Unknown";
+      const owner = getOwnerData(playlist2);
+      if (owner) {
+        return owner.profile?.name || owner.name || "Unknown";
       }
       return "Unknown";
     };
     const getOwnerProfileLink = (owner) => {
       if (!owner || !owner.target) return { name: "music-home" };
-      if (owner.type === "User") {
-        return { name: "user-profile", params: { _id: owner.target._id || owner.target } };
-      } else if (owner.type === "Organization") {
-        return { name: "organization-profile", params: { _id: owner.target._id || owner.target } };
+      const targetId = typeof owner.target === "object" ? owner.target._id : owner.target;
+      if (owner.type === "user" || owner.type === "User") {
+        return { name: "User Profile", params: { _id: targetId } };
+      } else if (owner.type === "organization" || owner.type === "Organization") {
+        return { name: "Organizatio", params: { _id: targetId } };
       }
       return { name: "music-home" };
     };
+    const formatDate = (dateString) => {
+      if (!dateString) return "Unknown";
+      return new Date(dateString).toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      });
+    };
+    const formatDuration = (seconds) => {
+      if (!seconds) return "0:00";
+      const h = Math.floor(seconds / 3600);
+      const m = Math.floor(seconds % 3600 / 60);
+      const s = Math.floor(seconds % 60);
+      if (h > 0) {
+        return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+      }
+      return `${m}:${s.toString().padStart(2, "0")}`;
+    };
+    const formatNumber = (num) => {
+      if (!num) return "0";
+      if (num >= 1e6) {
+        return (num / 1e6).toFixed(1) + "M";
+      } else if (num >= 1e3) {
+        return (num / 1e3).toFixed(1) + "K";
+      }
+      return num.toString();
+    };
     const playPlaylist = () => {
       if (playlistTracks.value && playlistTracks.value.length > 0) {
         actions$1.setQueue(playlistTracks.value);
       }
     };
-    const toggleFavorite = () => {
-      isFavorite.value = !isFavorite.value;
+    const shufflePlay = () => {
+      if (playlistTracks.value && playlistTracks.value.length > 0) {
+        const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);
+        actions$1.setQueue(shuffled);
+      }
+    };
+    const toggleFollow = async () => {
+      isFollowing.value = !isFollowing.value;
+      try {
+        if (isFollowing.value) {
+          await actions.followPlaylist(playlist.value._id);
+        } else {
+          await actions.unfollowPlaylist(playlist.value._id);
+        }
+      } catch (error) {
+        console.error("Error toggling follow:", error);
+        isFollowing.value = !isFollowing.value;
+      }
+    };
+    const toggleFollowUser = (userId) => {
+      const index = followedUsers.value.indexOf(userId);
+      if (index > -1) {
+        followedUsers.value.splice(index, 1);
+      } else {
+        followedUsers.value.push(userId);
+      }
     };
     const addToQueue = () => {
       if (playlistTracks.value && playlistTracks.value.length > 0) {
@@ -143,32 +234,9 @@ const _sfc_main = {
       }
     };
     const editPlaylist = () => {
-      editForm.title = playlist.value.title;
-      editForm.description = playlist.value.description || "";
-      editForm.isPublic = playlist.value.isPublic;
-      editForm.coverUrl = playlist.value.coverUrl || "";
       showEditModal.value = true;
       showDropdown.value = false;
     };
-    const updatePlaylist = async () => {
-      validationErrors.title = !editForm.title ? { message: "Playlist name is required" } : null;
-      if (Object.values(validationErrors).some((error) => error !== null)) {
-        return;
-      }
-      try {
-        const updatedData = {
-          _id: playlist.value._id,
-          title: editForm.title,
-          description: editForm.description,
-          isPublic: editForm.isPublic,
-          coverUrl: editForm.coverUrl
-        };
-        await actions.updatePlaylist(updatedData);
-        showEditModal.value = false;
-      } catch (error) {
-        console.error("Error updating playlist:", error);
-      }
-    };
     const toggleCollaborative = async () => {
       try {
         const updatedData = {
@@ -191,382 +259,443 @@ const _sfc_main = {
         router.push({ name: "music-library" });
       } catch (error) {
         console.error("Error deleting playlist:", error);
+        actions$2.setError({
+          message: "Failed to delete playlist"
+        });
+      }
+    };
+    const removeTrack = async (trackId) => {
+      try {
+        await actions.removeTrackFromPlaylist(playlist.value._id, trackId);
+        await fetchPlaylistData();
+      } catch (error) {
+        console.error("Error removing track:", error);
+        actions$2.setError({
+          message: "Failed to remove track"
+        });
       }
     };
     const copyLink = () => {
-      const url = window.location.href;
-      navigator.clipboard.writeText(url).then(() => {
-        showDropdown.value = false;
-      });
+      navigator.clipboard.writeText(window.location.href);
+      showDropdown.value = false;
+    };
+    const handlePlaylistUpdated = () => {
+      showEditModal.value = false;
+      fetchPlaylistData();
     };
     const fetchPlaylistData = async () => {
-      isLoading.value = true;
       try {
         await actions.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({
+            "creator.target": creatorId,
+            isPublic: true,
+            limit: 6
+          });
+          morePlaylists.value = playlists.filter((p) => p._id !== playlist.value._id).slice(0, 5);
+        }
       } catch (error) {
         console.error("Error fetching playlist data:", error);
-      } finally {
-        isLoading.value = false;
       }
     };
-    onMounted(fetchPlaylistData);
-    watch(() => route.params.url, (newUrl) => {
-      if (newUrl) {
-        fetchPlaylistData();
-      }
+    onMounted(async () => {
+      emits("page-loading");
+      await fetchPlaylistData();
+      hasLoaded.value = true;
+      emits("page-loaded");
     });
     return (_ctx, _cache) => {
       const _component_router_link = resolveComponent("router-link");
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-          createVNode(Loader)
-        ])) : !playlist.value ? (openBlock(), createElementBlock("div", _hoisted_3, _cache[11] || (_cache[11] = [
+        hasLoaded.value && !playlist.value ? (openBlock(), createElementBlock("div", _hoisted_2, _cache[7] || (_cache[7] = [
           createElementVNode("h2", { class: "" }, "Playlist not found", -1),
-          createElementVNode("p", { class: "t-grey t-medium" }, "The playlist you're looking for doesn't exist or has been removed.", -1)
-        ]))) : (openBlock(), createElementBlock("div", _hoisted_4, [
-          createElementVNode("div", _hoisted_5, [
-            createElementVNode("div", _hoisted_6, [
+          createElementVNode("p", { class: "t-transp t-medium" }, "The playlist you're looking for doesn't exist or has been removed.", -1)
+        ]))) : createCommentVNode("", true),
+        playlist.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, [
               createVNode(Media, {
                 url: playlist.value.coverUrl || "/assets/placeholder-playlist.jpg",
-                class: "w-15r h-15r object-fit-cover shadow-lg radius-small"
-              }, null, 8, ["url"])
+                alt: playlist.value.title,
+                class: "aspect-1x1 w-100 radius-medium o-hidden"
+              }, null, 8, ["url", "alt"])
             ]),
-            createElementVNode("div", _hoisted_7, [
-              _cache[13] || (_cache[13] = createElementVNode("div", { class: "t-small t-uppercase" }, "Playlist", -1)),
-              createElementVNode("h1", _hoisted_8, toDisplayString(playlist.value.title), 1),
-              playlist.value.description ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(playlist.value.description), 1)) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_10, [
-                playlist.value.owner && playlist.value.owner.target ? (openBlock(), createBlock(_component_router_link, {
-                  key: 0,
-                  to: getOwnerProfileLink(playlist.value.owner),
-                  class: "t-medium hover-t-main"
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(getPlaylistOwnerName(playlist.value)), 1)
-                  ]),
-                  _: 1
-                }, 8, ["to"])) : (openBlock(), createElementBlock("span", _hoisted_11, toDisplayString(getPlaylistOwnerName(playlist.value)), 1)),
-                _cache[12] || (_cache[12] = createElementVNode("span", { class: "t-grey mn-l-small mn-r-small" }, "•", -1)),
-                createElementVNode("span", _hoisted_12, toDisplayString(playlistTracks.value.length) + " " + toDisplayString(playlistTracks.value.length === 1 ? "song" : "songs"), 1)
+            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))
+              ]),
+              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))
               ])
             ])
           ]),
-          createElementVNode("div", _hoisted_13, [
-            createVNode(_sfc_main$1, {
-              onClick: playPlaylist,
-              class: "play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$2, {
-                  class: "i-small",
-                  fill: "rgb(var(--black))"
-                }),
-                _cache[14] || (_cache[14] = createElementVNode("span", { class: "t-black t-medium" }, "Play", -1))
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$1, {
-              onClick: toggleFavorite,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$3, {
-                  class: "i-medium",
-                  fill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--white))"
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$4, { class: "pos-relative" }, {
-              content: withCtx(() => [
-                showDropdown.value ? (openBlock(), createElementBlock("ul", _hoisted_14, [
-                  isOwner.value ? (openBlock(), createElementBlock("li", _hoisted_15, [
-                    createVNode(_sfc_main$1, {
-                      onClick: editPlaylist,
-                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
-                      showLoader: false,
-                      showSucces: false
-                    }, {
-                      default: withCtx(() => _cache[15] || (_cache[15] = [
-                        createElementVNode("span", null, "Edit Details", -1)
-                      ])),
-                      _: 1
-                    })
-                  ])) : createCommentVNode("", true),
-                  createElementVNode("li", _hoisted_16, [
+          createElementVNode("div", _hoisted_11, [
+            createElementVNode("div", _hoisted_12, [
+              _cache[10] || (_cache[10] = createElementVNode("span", { class: "badge bg-primary-transp-20 t-primary pd-thin-big radius-small 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),
+            createElementVNode("div", _hoisted_16, [
+              createVNode(_sfc_main$1, {
+                onClick: playPlaylist,
+                color: "primary",
+                size: "medium",
+                class: "flex-1 flex-center gap-thin"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$2, { class: "i-medium" }),
+                  _cache[11] || (_cache[11] = createTextVNode(" Play All "))
+                ]),
+                _: 1
+              }),
+              createVNode(_sfc_main$1, {
+                onClick: shufflePlay,
+                color: "primary",
+                size: "medium",
+                class: "flex-1 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 flex-center gap-thin"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(isFollowing.value ? "Follow" : "Unfollow"), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(_sfc_main$4, {
+                label: { component: _sfc_main$5, class: "i-medium" },
+                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,
-                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
-                      showLoader: false,
-                      showSucces: false
-                    }, {
-                      default: withCtx(() => _cache[16] || (_cache[16] = [
-                        createElementVNode("span", null, "Add to Queue", -1)
-                      ])),
-                      _: 1
-                    })
-                  ]),
-                  isOwner.value ? (openBlock(), createElementBlock("li", _hoisted_17, [
-                    createVNode(_sfc_main$1, {
-                      onClick: toggleCollaborative,
-                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
-                      showLoader: false,
-                      showSucces: false
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode("span", null, toDisplayString(playlist.value.isCollaborative ? "Make Private" : "Make Collaborative"), 1)
-                      ]),
-                      _: 1
-                    })
-                  ])) : createCommentVNode("", true),
-                  isOwner.value ? (openBlock(), createElementBlock("li", _hoisted_18, [
-                    createVNode(_sfc_main$1, {
-                      onClick: deletePlaylist,
-                      class: "bg-transparent border-none pd-thin t-fourth w-100 t-left hover-bg-dark radius-small",
-                      showLoader: false,
-                      showSucces: false
+                      color: "transp",
+                      size: "small",
+                      class: "w-100 justify-start"
                     }, {
-                      default: withCtx(() => _cache[17] || (_cache[17] = [
-                        createElementVNode("span", null, "Delete", -1)
+                      default: withCtx(() => _cache[13] || (_cache[13] = [
+                        createTextVNode(" Add to Queue ")
                       ])),
                       _: 1
-                    })
-                  ])) : createCommentVNode("", true),
-                  createElementVNode("li", null, [
+                    }),
                     createVNode(_sfc_main$1, {
                       onClick: copyLink,
-                      class: "bg-transparent border-none pd-thin w-100 t-left hover-bg-dark radius-small",
-                      showLoader: false,
-                      showSucces: false
+                      color: "transp",
+                      size: "small",
+                      class: "w-100 justify-start"
                     }, {
-                      default: withCtx(() => _cache[18] || (_cache[18] = [
-                        createElementVNode("span", null, "Copy Link", -1)
+                      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 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: "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: "w-100 justify-start"
+                      }, {
+                        default: withCtx(() => _cache[16] || (_cache[16] = [
+                          createTextVNode(" Delete Playlist ")
+                        ])),
+                        _: 1
+                      })) : createCommentVNode("", true)
+                    ], 64)) : createCommentVNode("", true)
                   ])
-                ])) : createCommentVNode("", true)
-              ]),
-              default: withCtx(() => [
-                createVNode(_sfc_main$1, {
-                  onClick: _cache[0] || (_cache[0] = ($event) => showDropdown.value = !showDropdown.value),
-                  class: "bg-transparent border-none pd-zero",
-                  showLoader: false,
-                  showSucces: false
+                ]),
+                _: 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, [
+                createVNode(_component_router_link, {
+                  to: getOwnerProfileLink(playlist.value.creator || playlist.value.owner),
+                  class: "flex items-center gap-medium flex-1 hover-opacity"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_20, [
+                      getOwnerData(playlist.value)?.photoUrl ? (openBlock(), createBlock(Media, {
+                        key: 0,
+                        url: getOwnerData(playlist.value).photoUrl,
+                        alt: getOwnerData(playlist.value)?.name,
+                        class: "w-4r h-4r radius-full object-cover"
+                      }, null, 8, ["url", "alt"])) : (openBlock(), createElementBlock("div", _hoisted_21, toDisplayString(getPlaylistOwnerName(playlist.value).charAt(0)), 1))
+                    ]),
+                    createElementVNode("div", null, [
+                      createElementVNode("div", _hoisted_22, [
+                        createElementVNode("span", _hoisted_23, toDisplayString(getPlaylistOwnerName(playlist.value)), 1),
+                        getOwnerData(playlist.value)?.isVerified ? (openBlock(), createBlock(_sfc_main$6, {
+                          key: 0,
+                          class: "w-1r h-1r t-primary"
+                        })) : createCommentVNode("", true)
+                      ]),
+                      createElementVNode("span", _hoisted_24, toDisplayString(playlist.value.creator?.type || "User"), 1)
+                    ])
+                  ]),
+                  _: 1
+                }, 8, ["to"]),
+                !isOwner.value && unref(state$1).user ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  onClick: _cache[1] || (_cache[1] = () => toggleFollowUser(getOwnerId(playlist.value))),
+                  color: followedUsers.value.includes(getOwnerId(playlist.value)) ? "primary" : "transp",
+                  size: "small"
                 }, {
                   default: withCtx(() => [
-                    createVNode(_sfc_main$5, {
-                      class: "i-medium",
-                      fill: "rgb(var(--white))"
-                    })
+                    createTextVNode(toDisplayString(followedUsers.value.includes(getOwnerId(playlist.value)) ? "Following" : "Follow"), 1)
                   ]),
                   _: 1
-                })
+                }, 8, ["color"])) : createCommentVNode("", true)
+              ])
+            ]),
+            playlist.value.collaborators && playlist.value.collaborators.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_25, [
+              _cache[19] || (_cache[19] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Collaborators", -1)),
+              createElementVNode("div", _hoisted_26, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.value.collaborators, (collaborator) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: collaborator._id || collaborator,
+                    class: "collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin"
+                  }, [
+                    collaborator.photoUrl ? (openBlock(), createBlock(Media, {
+                      key: 0,
+                      url: collaborator.photoUrl,
+                      class: "w-1-5r h-1-5r radius-full object-cover"
+                    }, null, 8, ["url"])) : createCommentVNode("", true),
+                    createElementVNode("span", _hoisted_27, toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
+                  ]);
+                }), 128))
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_28, [
+              createElementVNode("div", _hoisted_29, [
+                createVNode(_sfc_main$7, { 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_30, toDisplayString(formatDate(playlist.value.createdAt)), 1)
+                ])
               ]),
-              _: 1
-            })
-          ]),
-          createElementVNode("div", _hoisted_19, [
-            playlistTracks.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_20, [
-              _cache[20] || (_cache[20] = createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
-              _cache[21] || (_cache[21] = createElementVNode("p", { class: "t-grey t-medium" }, "Add some tracks to get started", -1)),
-              isOwner.value || isCollaborator.value ? (openBlock(), createBlock(_sfc_main$1, {
-                key: 0,
-                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.push({ name: "music-search" })),
-                class: "bg-main radius-small pd-small mn-t-medium hover-scale-1",
-                showLoader: false,
-                showSucces: false
-              }, {
-                default: withCtx(() => _cache[19] || (_cache[19] = [
-                  createTextVNode(" Find Tracks ")
-                ])),
-                _: 1
-              })) : createCommentVNode("", true)
-            ])) : (openBlock(), createBlock(_sfc_main$6, {
-              key: 1,
-              store: {
-                read: () => _ctx.Promise.resolve(playlistTracks.value),
-                state: { isLoading: false }
-              },
-              external: true,
-              items: playlistTracks.value,
-              states: {
-                empty: {
-                  title: "No tracks in playlist",
-                  description: "Add some tracks to get started",
-                  class: "pd-medium bg-dark-transp-10 radius-medium"
-                }
-              },
-              class: "gap-thin"
-            }, {
-              default: withCtx(({ items }) => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track) => {
-                  return openBlock(), createBlock(TrackCard, {
+              createElementVNode("div", _hoisted_31, [
+                createVNode(IconClock, { 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_32, toDisplayString(totalDuration.value), 1)
+                ])
+              ]),
+              createElementVNode("div", _hoisted_33, [
+                createVNode(_sfc_main$8, { 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_34, toDisplayString(formatDate(playlist.value.updatedAt)), 1)
+                ])
+              ]),
+              createElementVNode("div", _hoisted_35, [
+                createVNode(_sfc_main$9, { 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_36, toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 1)
+                ])
+              ])
+            ]),
+            playlist.value.tags && playlist.value.tags.length ? (openBlock(), createElementBlock("div", _hoisted_37, [
+              _cache[24] || (_cache[24] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "Tags", -1)),
+              createElementVNode("div", _hoisted_38, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(playlist.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);
+                }), 128))
+              ])
+            ])) : createCommentVNode("", true),
+            playlist.value.description ? (openBlock(), createElementBlock("div", _hoisted_39, [
+              _cache[25] || (_cache[25] = createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
+              createElementVNode("p", _hoisted_40, toDisplayString(playlist.value.description), 1)
+            ])) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        !_ctx.isLoading && playlist.value && playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_41, [
+          _cache[26] || (_cache[26] = createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
+          createVNode(_sfc_main$a, {
+            store: {
+              read: () => _ctx.Promise.resolve(playlistTracks.value),
+              state: { isLoading: false }
+            },
+            external: true,
+            items: playlistTracks.value,
+            states: {
+              empty: {
+                title: "No tracks in playlist",
+                description: "Add some tracks to get started",
+                class: "pd-medium t-center"
+              }
+            }
+          }, {
+            default: withCtx(({ items }) => [
+              createElementVNode("div", _hoisted_42, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track, index) => {
+                  return openBlock(), createBlock(_sfc_main$b, {
                     key: track._id,
                     track,
+                    index: index + 1,
                     showAlbum: true,
                     showCover: true,
-                    class: "w-100 bg-dark-transp-10 radius-medium"
-                  }, null, 8, ["track"]);
+                    canRemove: isOwner.value || isCollaborator.value,
+                    onRemove: () => removeTrack(track._id)
+                  }, null, 8, ["track", "index", "canRemove", "onRemove"]);
                 }), 128))
-              ]),
-              _: 1
-            }, 8, ["store", "items"]))
-          ]),
-          showEditModal.value && isOwner.value ? (openBlock(), createBlock(_sfc_main$7, {
-            key: 0,
-            onClosePopup: _cache[8] || (_cache[8] = ($event) => showEditModal.value = false),
-            class: "bg-dark pd-small w-m-25r radius-medium"
-          }, {
-            default: withCtx(() => [
-              _cache[28] || (_cache[28] = createElementVNode("h3", { class: "mn-b-medium" }, "Edit Playlist", -1)),
-              createElementVNode("form", {
-                onSubmit: withModifiers(updatePlaylist, ["prevent"])
-              }, [
-                createElementVNode("div", _hoisted_21, [
-                  _cache[22] || (_cache[22] = createElementVNode("label", {
-                    for: "title",
-                    class: "t-medium mn-b-thin d-block"
-                  }, "Playlist Name", -1)),
-                  createVNode(Field, {
-                    field: editForm.title,
-                    "onUpdate:field": _cache[2] || (_cache[2] = ($event) => editForm.title = $event),
-                    id: "title",
-                    type: "text",
-                    placeholder: "Playlist Name",
-                    validation: validationErrors.title,
-                    class: "w-100 pd-small bg-dark-transp-25 radius-small"
-                  }, null, 8, ["field", "validation"])
-                ]),
-                createElementVNode("div", _hoisted_22, [
-                  _cache[23] || (_cache[23] = createElementVNode("label", {
-                    for: "description",
-                    class: "t-medium mn-b-thin d-block"
-                  }, "Description", -1)),
-                  createVNode(Field, {
-                    field: editForm.description,
-                    "onUpdate:field": _cache[3] || (_cache[3] = ($event) => editForm.description = $event),
-                    id: "description",
-                    type: "textarea",
-                    placeholder: "Add an optional description",
-                    class: "w-100 pd-small bg-dark-transp-25 radius-small"
-                  }, null, 8, ["field"])
-                ]),
-                createElementVNode("div", _hoisted_23, [
-                  _cache[24] || (_cache[24] = createElementVNode("label", { class: "t-medium mn-b-thin d-block" }, "Privacy", -1)),
-                  createElementVNode("div", _hoisted_24, [
-                    createVNode(_sfc_main$8, {
-                      radio: editForm.isPublic,
-                      "onUpdate:radio": _cache[4] || (_cache[4] = ($event) => editForm.isPublic = $event),
-                      value: true,
-                      name: "privacy",
-                      label: "Public",
-                      class: ""
-                    }, null, 8, ["radio"]),
-                    createVNode(_sfc_main$8, {
-                      radio: editForm.isPublic,
-                      "onUpdate:radio": _cache[5] || (_cache[5] = ($event) => editForm.isPublic = $event),
-                      value: false,
-                      name: "privacy",
-                      label: "Private",
-                      class: ""
-                    }, null, 8, ["radio"])
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_25, [
-                  _cache[25] || (_cache[25] = createElementVNode("label", { class: "t-medium mn-b-thin d-block" }, "Cover Image", -1)),
-                  createElementVNode("div", _hoisted_26, [
-                    createElementVNode("div", _hoisted_27, [
-                      editForm.coverUrl ? (openBlock(), createBlock(Media, {
-                        key: 0,
-                        url: editForm.coverUrl,
-                        class: "w-10r h-10r object-fit-cover"
-                      }, null, 8, ["url"])) : (openBlock(), createElementBlock("div", _hoisted_28, [
-                        createVNode(_sfc_main$9, {
-                          class: "i-big",
-                          fill: "rgb(var(--grey))"
-                        })
-                      ]))
-                    ]),
-                    createVNode(_sfc_main$a, {
-                      photo: editForm.coverUrl,
-                      "onUpdate:photo": _cache[6] || (_cache[6] = ($event) => editForm.coverUrl = $event),
-                      uploadPath: "playlists",
-                      class: "flex-1 h-10r bg-dark-transp-25 radius-small"
-                    }, null, 8, ["photo"])
-                  ])
-                ]),
-                createElementVNode("div", _hoisted_29, [
-                  createVNode(_sfc_main$1, {
-                    onClick: _cache[7] || (_cache[7] = ($event) => showEditModal.value = false),
-                    type: "button",
-                    class: "bg-dark-transp-25 pd-small radius-small mn-r-small hover-bg-dark",
-                    showLoader: false,
-                    showSucces: false
-                  }, {
-                    default: withCtx(() => _cache[26] || (_cache[26] = [
-                      createTextVNode(" Cancel ")
-                    ])),
-                    _: 1
-                  }),
-                  createVNode(_sfc_main$1, {
-                    type: "submit",
-                    class: "bg-main pd-small radius-small hover-scale-1",
-                    submit: updatePlaylist,
-                    showLoader: true,
-                    showSucces: true,
-                    validation: !!Object.keys(validationErrors).length
-                  }, {
-                    default: withCtx(() => _cache[27] || (_cache[27] = [
-                      createTextVNode(" Save ")
-                    ])),
-                    _: 1
-                  }, 8, ["validation"])
-                ])
-              ], 32)
-            ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          showDeleteModal.value ? (openBlock(), createBlock(_sfc_main$7, {
-            key: 1,
-            onClosePopup: _cache[10] || (_cache[10] = ($event) => showDeleteModal.value = false),
-            class: "bg-dark pd-small w-m-25r radius-medium"
-          }, {
-            default: withCtx(() => [
-              _cache[31] || (_cache[31] = createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
-              _cache[32] || (_cache[32] = createElementVNode("p", { class: "t-grey mn-b-medium" }, "Are you sure you want to delete this playlist? This action cannot be undone.", -1)),
-              createElementVNode("div", _hoisted_30, [
-                createVNode(_sfc_main$1, {
-                  onClick: _cache[9] || (_cache[9] = ($event) => showDeleteModal.value = false),
-                  class: "bg-dark-transp-25 pd-small radius-small mn-r-small hover-bg-dark",
-                  showLoader: false,
-                  showSucces: false
-                }, {
-                  default: withCtx(() => _cache[29] || (_cache[29] = [
-                    createTextVNode(" Cancel ")
-                  ])),
-                  _: 1
-                }),
-                createVNode(_sfc_main$1, {
-                  onClick: confirmDelete,
-                  class: "bg-fourth pd-small radius-small hover-scale-1",
-                  showLoader: true,
-                  showSucces: true
-                }, {
-                  default: withCtx(() => _cache[30] || (_cache[30] = [
-                    createTextVNode(" Delete ")
-                  ])),
-                  _: 1
-                })
               ])
             ]),
             _: 1
-          })) : createCommentVNode("", true)
-        ]))
+          }, 8, ["store", "items"])
+        ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (openBlock(), createElementBlock("section", _hoisted_43, [
+          createElementVNode("div", _hoisted_44, [
+            _cache[28] || (_cache[28] = createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
+            _cache[29] || (_cache[29] = 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, {
+              key: 0,
+              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$router.push({ name: "music-search" })),
+              color: "primary",
+              size: "medium"
+            }, {
+              default: withCtx(() => _cache[27] || (_cache[27] = [
+                createTextVNode(" Find Tracks ")
+              ])),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])
+        ])) : createCommentVNode("", true),
+        !_ctx.isLoading && playlist.value && morePlaylists.value.length ? (openBlock(), createElementBlock("section", _hoisted_45, [
+          createElementVNode("div", _hoisted_46, [
+            _cache[31] || (_cache[31] = 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[30] || (_cache[30] = [
+                createTextVNode(" See all ")
+              ])),
+              _: 1
+            }, 8, ["to"])) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", _hoisted_47, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(morePlaylists.value, (relatedPlaylist) => {
+              return openBlock(), createElementBlock("li", {
+                key: relatedPlaylist._id,
+                class: "flex-none scroll-snap-align-start"
+              }, [
+                createVNode(PlaylistCard, {
+                  playlist: relatedPlaylist,
+                  class: "w-min-15r transition-cubic-in-out"
+                }, null, 8, ["playlist"])
+              ]);
+            }), 128))
+          ])
+        ])) : createCommentVNode("", true),
+        createVNode(_sfc_main$c, {
+          isPopupOpen: showEditModal.value && (isOwner.value || isCollaborator.value),
+          onClosePopup: _cache[4] || (_cache[4] = ($event) => showEditModal.value = false),
+          class: "bg-dark pd-medium w-m-30r radius-medium"
+        }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$d, {
+              editMode: true,
+              url: playlist.value.url,
+              onCancel: _cache[3] || (_cache[3] = ($event) => showEditModal.value = false),
+              onUpdated: handlePlaylistUpdated
+            }, null, 8, ["url"])
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen"]),
+        createVNode(_sfc_main$c, {
+          isPopupOpen: showDeleteModal.value,
+          onClosePopup: _cache[6] || (_cache[6] = ($event) => showDeleteModal.value = false),
+          class: "bg-dark pd-medium w-m-25r radius-medium"
+        }, {
+          default: withCtx(() => [
+            _cache[34] || (_cache[34] = createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
+            createElementVNode("p", _hoisted_48, 'Are you sure you want to delete "' + toDisplayString(playlist.value.title) + '"? This action cannot be undone.', 1),
+            createElementVNode("div", _hoisted_49, [
+              createVNode(_sfc_main$1, {
+                onClick: _cache[5] || (_cache[5] = ($event) => showDeleteModal.value = false),
+                color: "transp",
+                size: "medium"
+              }, {
+                default: withCtx(() => _cache[32] || (_cache[32] = [
+                  createTextVNode(" Cancel ")
+                ])),
+                _: 1
+              }),
+              createVNode(_sfc_main$1, {
+                onClick: confirmDelete,
+                color: "danger",
+                size: "medium"
+              }, {
+                default: withCtx(() => _cache[33] || (_cache[33] = [
+                  createTextVNode(" Delete Playlist ")
+                ])),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["isPopupOpen"])
       ]);
     };
   }