@ozdao/martyrs 0.2.550 → 0.2.552

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

@@ -1,658 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const vue = require("vue");
-const vueRouter = require("vue-router");
-const Button = require("../../../../components/Button/Button.vue.cjs");
-;/* empty css                                          */
-const Media = require("../../../../components/Media/Media.vue.cjs");
-const Dropdown = require("../../../../components/Dropdown/Dropdown.vue2.cjs");
-const Feed = require("../../../../components/Feed/Feed.vue.cjs");
-const Popup = require("../../../../components/Popup/Popup.vue.cjs");
-const IconPlay = require("../../../icons/navigation/IconPlay.vue.cjs");
-const IconEllipsis = require("../../../icons/navigation/IconEllipsis.vue.cjs");
-const IconShuffle = require("../../../icons/navigation/IconShuffle.vue.cjs");
-const IconCalendar = ;/* empty css                                         */
-const IconTime = require("../../../icons/entities/IconTime.vue.cjs");
-const IconShow = require("../../../icons/actions/IconShow.vue.cjs");
-const IconRefresh = require("../../../icons/navigation/IconRefresh.vue.cjs");
-const TrackListCard = require("../cards/TrackListCard.vue.cjs");
-const PlaylistCard = require("../cards/PlaylistCard.vue.cjs");
-const PlaylistForm = require("../forms/PlaylistForm.vue.cjs");
-const ArtistCardSmall = require("../cards/ArtistCardSmall.vue.cjs");
-const playlists = require("../../store/playlists.cjs");
-const player = require("../../store/player.cjs");
-const auth = require("../../../auth/views/store/auth.cjs");
-const core_store = require("../../../core/views/store/core.store.cjs");
-const _hoisted_1 = { class: "playlist-page pd-small" };
-const _hoisted_2 = {
-  key: 0,
-  class: "t-center pd-big"
-};
-const _hoisted_3 = {
-  key: 1,
-  class: "playlist-content cols-2-fit-content 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_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: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
-};
-const _hoisted_14 = {
-  key: 1,
-  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 = {
-  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_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 = {
-  key: 1,
-  class: "tags-section mn-b-medium"
-};
-const _hoisted_33 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_34 = {
-  key: 2,
-  class: "description-section bg-light pd-medium radius-medium mn-b-medium"
-};
-const _hoisted_35 = { class: "t-transp" };
-const _hoisted_36 = {
-  key: 2,
-  class: "tracks-section mn-t-big"
-};
-const _hoisted_37 = { class: "bg-light radius-medium o-hidden" };
-const _hoisted_38 = {
-  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 = {
-  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 _sfc_main = {
-  __name: "Playlist",
-  emits: ["page-loading", "page-loaded"],
-  setup(__props, { emit: __emit }) {
-    const route = vueRouter.useRoute();
-    const router = vueRouter.useRouter();
-    const emits = __emit;
-    const hasLoaded = vue.ref(false);
-    const isFollowing = vue.ref(false);
-    const showDropdown = vue.ref(false);
-    const showEditModal = vue.ref(false);
-    const showDeleteModal = vue.ref(false);
-    const followedUsers = vue.ref([]);
-    const morePlaylists = vue.ref([]);
-    playlists.state.currentPlaylist = null;
-    playlists.state.currentPlaylistTracks = [];
-    const playlist = vue.computed(() => playlists.state.currentPlaylist);
-    const playlistTracks = vue.computed(() => playlists.state.currentPlaylistTracks || []);
-    const isOwner = vue.computed(() => {
-      if (!playlist.value || !auth.state.user) return false;
-      const ownerId = playlist.value.owner?.target?._id || playlist.value.owner?.target;
-      return ownerId === auth.state.user._id;
-    });
-    const isCollaborator = vue.computed(() => {
-      if (!playlist.value || !auth.state.user) return false;
-      return playlist.value.collaborators?.some(
-        (collab) => (collab._id || collab) === auth.state.user._id
-      );
-    });
-    const totalDuration = vue.computed(() => {
-      if (!playlistTracks.value.length) return "0:00";
-      const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);
-      return formatDuration(totalSeconds);
-    });
-    const getOwnerProfileLink = (owner) => {
-      if (!owner || !owner.target) return { name: "music-home" };
-      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) {
-        player.actions.setQueue(playlistTracks.value);
-      }
-    };
-    const shufflePlay = () => {
-      if (playlistTracks.value && playlistTracks.value.length > 0) {
-        const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);
-        player.actions.setQueue(shuffled);
-      }
-    };
-    const toggleFollow = async () => {
-      isFollowing.value = !isFollowing.value;
-      try {
-        if (isFollowing.value) {
-          await playlists.actions.followPlaylist(playlist.value._id);
-        } else {
-          await playlists.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) {
-        playlistTracks.value.forEach((track) => {
-          player.actions.addToQueue(track);
-        });
-        showDropdown.value = false;
-      }
-    };
-    const editPlaylist = () => {
-      showEditModal.value = true;
-      showDropdown.value = false;
-    };
-    const toggleCollaborative = async () => {
-      try {
-        const updatedData = {
-          _id: playlist.value._id,
-          isCollaborative: !playlist.value.isCollaborative
-        };
-        await playlists.actions.updatePlaylist(updatedData);
-        showDropdown.value = false;
-      } catch (error) {
-        console.error("Error updating playlist:", error);
-      }
-    };
-    const deletePlaylist = () => {
-      showDeleteModal.value = true;
-      showDropdown.value = false;
-    };
-    const confirmDelete = async () => {
-      try {
-        await playlists.actions.deletePlaylist(playlist.value._id);
-        router.push({ name: "music-library" });
-      } catch (error) {
-        console.error("Error deleting playlist:", error);
-        core_store.actions.setError({
-          message: "Failed to delete playlist"
-        });
-      }
-    };
-    const removeTrack = async (trackId) => {
-      try {
-        await playlists.actions.removeTrackFromPlaylist(playlist.value._id, trackId);
-        await fetchPlaylistData();
-      } catch (error) {
-        console.error("Error removing track:", error);
-        core_store.actions.setError({
-          message: "Failed to remove track"
-        });
-      }
-    };
-    const copyLink = () => {
-      navigator.clipboard.writeText(window.location.href);
-      showDropdown.value = false;
-    };
-    const handlePlaylistUpdated = () => {
-      showEditModal.value = false;
-      fetchPlaylistData();
-    };
-    const fetchPlaylistData = async () => {
-      try {
-        await playlists.actions.fetchPlaylistByUrl(route.params.url);
-        if (auth.state.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$1 = await playlists.actions.fetchPlaylists({
-            "creator.target": creatorId,
-            isPublic: true,
-            limit: 6
-          });
-          morePlaylists.value = playlists$1.filter((p) => p._id !== playlist.value._id).slice(0, 5);
-        }
-      } catch (error) {
-        console.error("Error fetching playlist data:", error);
-      }
-    };
-    vue.onMounted(async () => {
-      emits("page-loading");
-      await fetchPlaylistData();
-      hasLoaded.value = true;
-      emits("page-loaded");
-    });
-    return (_ctx, _cache) => {
-      const _component_router_link = vue.resolveComponent("router-link");
-      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        hasLoaded.value && !playlist.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, _cache[7] || (_cache[7] = [
-          vue.createElementVNode("h2", { class: "" }, "Playlist not found", -1),
-          vue.createElementVNode("p", { class: "t-transp t-medium" }, "The playlist you're looking for doesn't exist or has been removed.", -1)
-        ]))) : vue.createCommentVNode("", true),
-        playlist.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-          vue.createElementVNode("div", _hoisted_4, [
-            vue.createElementVNode("div", _hoisted_5, [
-              vue.createVNode(Media.default, {
-                url: playlist.value.coverUrl || "/assets/placeholder-playlist.jpg",
-                alt: playlist.value.title,
-                class: "aspect-1x1 w-100 radius-medium o-hidden"
-              }, null, 8, ["url", "alt"])
-            ]),
-            vue.createElementVNode("div", _hoisted_6, [
-              vue.createElementVNode("div", _hoisted_7, [
-                vue.createElementVNode("div", _hoisted_8, vue.toDisplayString(playlistTracks.value.length), 1),
-                _cache[8] || (_cache[8] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Tracks", -1))
-              ]),
-              vue.createElementVNode("div", _hoisted_9, [
-                vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(formatNumber(playlist.value.followers || 0)), 1),
-                _cache[9] || (_cache[9] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Followers", -1))
-              ])
-            ])
-          ]),
-          vue.createElementVNode("div", _hoisted_11, [
-            vue.createElementVNode("div", _hoisted_12, [
-              _cache[10] || (_cache[10] = vue.createElementVNode("span", { class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase" }, " Playlist ", -1)),
-              playlist.value.isCollaborative ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_13, " Collaborative ")) : vue.createCommentVNode("", true),
-              playlist.value.status === "published" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, " Published ")) : vue.createCommentVNode("", true)
-            ]),
-            vue.createElementVNode("h1", _hoisted_15, vue.toDisplayString(playlist.value.title), 1),
-            vue.createElementVNode("div", _hoisted_16, [
-              vue.createVNode(Button.default, {
-                onClick: playPlaylist,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(IconPlay.default, {
-                    fill: "rgb(var(--white))",
-                    class: "i-medium"
-                  }),
-                  _cache[11] || (_cache[11] = vue.createTextVNode(" Play All "))
-                ]),
-                _: 1
-              }),
-              vue.createVNode(Button.default, {
-                onClick: shufflePlay,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(IconShuffle.default, { class: "i-medium" }),
-                  _cache[12] || (_cache[12] = vue.createTextVNode(" Shuffle "))
-                ]),
-                _: 1
-              }),
-              vue.createVNode(Button.default, {
-                onClick: toggleFollow,
-                color: "primary",
-                size: "medium",
-                class: "flex-1 bg-light radius-thin flex-center gap-thin"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(isFollowing.value ? "Follow" : "Unfollow"), 1)
-                ]),
-                _: 1
-              }),
-              vue.createVNode(Dropdown.default, {
-                label: { component: IconEllipsis.default, 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: vue.withCtx(() => [
-                  vue.createVNode(Button.default, {
-                    color: "transp",
-                    size: "medium",
-                    class: "w-3r h-3r radius-full"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(IconEllipsis.default, { class: "w-1-25r h-1-25r" })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: vue.withCtx(() => [
-                  vue.createElementVNode("div", _hoisted_17, [
-                    vue.createVNode(Button.default, {
-                      onClick: addToQueue,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 t-nowrap justify-start"
-                    }, {
-                      default: vue.withCtx(() => _cache[13] || (_cache[13] = [
-                        vue.createTextVNode(" Add to Queue ")
-                      ])),
-                      _: 1
-                    }),
-                    vue.createVNode(Button.default, {
-                      onClick: copyLink,
-                      color: "transp",
-                      size: "small",
-                      class: "w-100 t-nowrap justify-start"
-                    }, {
-                      default: vue.withCtx(() => _cache[14] || (_cache[14] = [
-                        vue.createTextVNode(" Copy Link ")
-                      ])),
-                      _: 1
-                    }),
-                    isOwner.value || isCollaborator.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                      _cache[17] || (_cache[17] = vue.createElementVNode("hr", { class: "mn-v-thin border-dark-transp-10" }, null, -1)),
-                      vue.createVNode(Button.default, {
-                        onClick: editPlaylist,
-                        color: "transp",
-                        size: "small",
-                        class: "w-100 t-nowrap justify-start"
-                      }, {
-                        default: vue.withCtx(() => _cache[15] || (_cache[15] = [
-                          vue.createTextVNode(" Edit Playlist ")
-                        ])),
-                        _: 1
-                      }),
-                      isOwner.value ? (vue.openBlock(), vue.createBlock(Button.default, {
-                        key: 0,
-                        onClick: toggleCollaborative,
-                        color: "transp",
-                        size: "small",
-                        class: "t-nowrap w-100 justify-start"
-                      }, {
-                        default: vue.withCtx(() => [
-                          vue.createTextVNode(vue.toDisplayString(playlist.value.isCollaborative ? "Make Private" : "Make Collaborative"), 1)
-                        ]),
-                        _: 1
-                      })) : vue.createCommentVNode("", true),
-                      isOwner.value ? (vue.openBlock(), vue.createBlock(Button.default, {
-                        key: 1,
-                        onClick: deletePlaylist,
-                        color: "danger",
-                        size: "small",
-                        class: "t-nowrap w-100 justify-start"
-                      }, {
-                        default: vue.withCtx(() => _cache[16] || (_cache[16] = [
-                          vue.createTextVNode(" Delete Playlist ")
-                        ])),
-                        _: 1
-                      })) : vue.createCommentVNode("", true)
-                    ], 64)) : vue.createCommentVNode("", true)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["label", "modelValue"])
-            ]),
-            vue.createElementVNode("div", _hoisted_18, [
-              _cache[18] || (_cache[18] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Created by", -1)),
-              vue.createElementVNode("div", _hoisted_19, [
-                vue.createVNode(ArtistCardSmall.default, {
-                  artist: {
-                    _id: playlist.value.creator.target,
-                    to: { name: "User Profile", params: { _id: playlist.value.creator.target } },
-                    photoUrl: null,
-                    name: playlist.value.creator.target,
-                    isVerified: false
-                  },
-                  "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))
-                }, null, 8, ["artist", "is-following", "show-follow-button"])
-              ])
-            ]),
-            playlist.value.collaborators && playlist.value.collaborators.length > 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
-              _cache[19] || (_cache[19] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Collaborators", -1)),
-              vue.createElementVNode("div", _hoisted_21, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(playlist.value.collaborators, (collaborator) => {
-                  return vue.openBlock(), vue.createElementBlock("div", {
-                    key: collaborator._id || collaborator,
-                    class: "collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin"
-                  }, [
-                    collaborator.photoUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
-                      key: 0,
-                      url: collaborator.photoUrl,
-                      class: "i-medium radius-full object-cover"
-                    }, null, 8, ["url"])) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
-                  ]);
-                }), 128))
-              ])
-            ])) : vue.createCommentVNode("", true),
-            _cache[26] || (_cache[26] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
-            vue.createElementVNode("div", _hoisted_23, [
-              vue.createElementVNode("div", _hoisted_24, [
-                vue.createVNode(IconCalendar.default, { class: "i-medium t-primary" }),
-                vue.createElementVNode("div", null, [
-                  _cache[20] || (_cache[20] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Created", -1)),
-                  vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(formatDate(playlist.value.createdAt)), 1)
-                ])
-              ]),
-              vue.createElementVNode("div", _hoisted_26, [
-                vue.createVNode(IconTime.default, { class: "i-medium t-primary" }),
-                vue.createElementVNode("div", null, [
-                  _cache[21] || (_cache[21] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
-                  vue.createElementVNode("div", _hoisted_27, vue.toDisplayString(totalDuration.value), 1)
-                ])
-              ]),
-              vue.createElementVNode("div", _hoisted_28, [
-                vue.createVNode(IconRefresh.default, { class: "i-medium t-primary" }),
-                vue.createElementVNode("div", null, [
-                  _cache[22] || (_cache[22] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Updated", -1)),
-                  vue.createElementVNode("div", _hoisted_29, vue.toDisplayString(formatDate(playlist.value.updatedAt)), 1)
-                ])
-              ]),
-              vue.createElementVNode("div", _hoisted_30, [
-                vue.createVNode(IconShow.default, { class: "i-medium t-primary" }),
-                vue.createElementVNode("div", null, [
-                  _cache[23] || (_cache[23] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
-                  vue.createElementVNode("div", _hoisted_31, vue.toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 1)
-                ])
-              ])
-            ]),
-            playlist.value.tags && playlist.value.tags.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_32, [
-              _cache[24] || (_cache[24] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Tags", -1)),
-              vue.createElementVNode("div", _hoisted_33, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(playlist.value.tags, (tag) => {
-                  return vue.openBlock(), vue.createElementBlock("span", {
-                    key: tag,
-                    class: "tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer"
-                  }, " #" + vue.toDisplayString(tag), 1);
-                }), 128))
-              ])
-            ])) : vue.createCommentVNode("", true),
-            playlist.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_34, [
-              _cache[25] || (_cache[25] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "About", -1)),
-              vue.createElementVNode("p", _hoisted_35, vue.toDisplayString(playlist.value.description), 1)
-            ])) : vue.createCommentVNode("", true)
-          ])
-        ])) : vue.createCommentVNode("", true),
-        !_ctx.isLoading && playlist.value && playlistTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_36, [
-          _cache[27] || (_cache[27] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
-          vue.createVNode(Feed.default, {
-            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: vue.withCtx(({ items }) => [
-              vue.createElementVNode("div", _hoisted_37, [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (track, index) => {
-                  return vue.openBlock(), vue.createBlock(TrackListCard.default, {
-                    key: track._id,
-                    track,
-                    index: index + 1,
-                    showAlbum: true,
-                    showCover: true,
-                    canRemove: isOwner.value || isCollaborator.value,
-                    onRemove: () => removeTrack(track._id)
-                  }, null, 8, ["track", "index", "canRemove", "onRemove"]);
-                }), 128))
-              ])
-            ]),
-            _: 1
-          }, 8, ["store", "items"])
-        ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_38, [
-          vue.createElementVNode("div", _hoisted_39, [
-            _cache[29] || (_cache[29] = vue.createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
-            _cache[30] || (_cache[30] = vue.createElementVNode("p", { class: "t-transp t-medium mn-b-medium" }, "Add some tracks to get started", -1)),
-            isOwner.value || isCollaborator.value ? (vue.openBlock(), vue.createBlock(Button.default, {
-              key: 0,
-              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$router.push({ name: "music-search" })),
-              color: "primary",
-              size: "medium"
-            }, {
-              default: vue.withCtx(() => _cache[28] || (_cache[28] = [
-                vue.createTextVNode(" Find Tracks ")
-              ])),
-              _: 1
-            })) : vue.createCommentVNode("", true)
-          ])
-        ])) : vue.createCommentVNode("", true),
-        !_ctx.isLoading && playlist.value && morePlaylists.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_40, [
-          vue.createElementVNode("div", _hoisted_41, [
-            _cache[32] || (_cache[32] = vue.createElementVNode("h2", { class: "h2" }, "More Playlists", -1)),
-            playlist.value.creator ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-              key: 0,
-              to: getOwnerProfileLink(playlist.value.creator),
-              class: "t-primary hover-opacity"
-            }, {
-              default: vue.withCtx(() => _cache[31] || (_cache[31] = [
-                vue.createTextVNode(" See all ")
-              ])),
-              _: 1
-            }, 8, ["to"])) : vue.createCommentVNode("", true)
-          ]),
-          vue.createElementVNode("div", _hoisted_42, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(morePlaylists.value, (relatedPlaylist) => {
-              return vue.openBlock(), vue.createElementBlock("li", {
-                key: relatedPlaylist._id,
-                class: "flex-none scroll-snap-align-start"
-              }, [
-                vue.createVNode(PlaylistCard.default, {
-                  playlist: relatedPlaylist,
-                  class: "w-min-15r transition-cubic-in-out"
-                }, null, 8, ["playlist"])
-              ]);
-            }), 128))
-          ])
-        ])) : vue.createCommentVNode("", true),
-        vue.createVNode(Popup.default, {
-          isPopupOpen: showEditModal.value && (isOwner.value || isCollaborator.value),
-          onClosePopup: _cache[4] || (_cache[4] = ($event) => showEditModal.value = false),
-          class: "bg-white pd-medium w-m-30r radius-medium"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createVNode(PlaylistForm.default, {
-              editMode: true,
-              url: playlist.value.url,
-              onCancel: _cache[3] || (_cache[3] = ($event) => showEditModal.value = false),
-              onUpdated: handlePlaylistUpdated
-            }, null, 8, ["url"])
-          ]),
-          _: 1
-        }, 8, ["isPopupOpen"]),
-        vue.createVNode(Popup.default, {
-          isPopupOpen: showDeleteModal.value,
-          onClosePopup: _cache[6] || (_cache[6] = ($event) => showDeleteModal.value = false),
-          class: "bg-white pd-medium w-m-25r radius-medium"
-        }, {
-          default: vue.withCtx(() => [
-            _cache[35] || (_cache[35] = vue.createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
-            vue.createElementVNode("p", _hoisted_43, 'Are you sure you want to delete "' + vue.toDisplayString(playlist.value.title) + '"? This action cannot be undone.', 1),
-            vue.createElementVNode("div", _hoisted_44, [
-              vue.createVNode(Button.default, {
-                onClick: _cache[5] || (_cache[5] = ($event) => showDeleteModal.value = false),
-                color: "transp",
-                size: "medium"
-              }, {
-                default: vue.withCtx(() => _cache[33] || (_cache[33] = [
-                  vue.createTextVNode(" Cancel ")
-                ])),
-                _: 1
-              }),
-              vue.createVNode(Button.default, {
-                onClick: confirmDelete,
-                color: "danger",
-                size: "medium"
-              }, {
-                default: vue.withCtx(() => _cache[34] || (_cache[34] = [
-                  vue.createTextVNode(" Delete Playlist ")
-                ])),
-                _: 1
-              })
-            ])
-          ]),
-          _: 1
-        }, 8, ["isPopupOpen"])
-      ]);
-    };
-  }
-};
-exports.default = _sfc_main;
-//# sourceMappingURL=Playlist.vue.cjs.map