@ozdao/martyrs 0.2.484 → 0.2.486

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

@@ -0,0 +1,556 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const TrackList = require("../lists/TrackList.vue.cjs");
+const Button = require("../../../../components/Button/Button.vue.cjs");
+const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
+const Media = require("../../../../components/Media/Media.vue.cjs");
+const Dropdown = require("../../../../components/Dropdown/Dropdown.vue.cjs");
+const Popup = require("../../../../components/Popup/Popup.vue.cjs");
+const Field = require("../../../../components/Field/Field.vue.cjs");
+const Radio = require("../../../../components/Radio/Radio.vue.cjs");
+const UploadImage = require("../../../../components/UploadImage/UploadImage.vue.cjs");
+const IconPlay = require("../../../icons/navigation/IconPlay.vue.cjs");
+const IconLike = require("../../../icons/navigation/IconLike.vue.cjs");
+const IconEllipsis = require("../../../icons/navigation/IconEllipsis.vue.cjs");
+const IconMusic = require("../../../icons/entities/IconMusic.vue.cjs");
+const auth = require("../../../auth/views/store/auth.cjs");
+const playlists = require("../../store/playlists.cjs");
+const player = require("../../store/player.cjs");
+const _hoisted_1 = { class: "playlist-detail-page" };
+const _hoisted_2 = {
+  key: 0,
+  class: "w-100 h-25r flex-center flex"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "t-center pd-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: "t-white" };
+const _hoisted_9 = {
+  key: 0,
+  class: "playlist-description t-grey mn-t-thin mn-b-small"
+};
+const _hoisted_10 = { class: "playlist-meta flex flex-v-center" };
+const _hoisted_11 = {
+  key: 1,
+  class: "t-white t-medium"
+};
+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 = {
+  key: 0,
+  class: "mn-b-thin"
+};
+const _hoisted_16 = { class: "mn-b-thin" };
+const _hoisted_17 = {
+  key: 1,
+  class: "mn-b-thin"
+};
+const _hoisted_18 = {
+  key: 2,
+  class: "mn-b-thin"
+};
+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_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_29 = { class: "form-actions t-right" };
+const _hoisted_30 = { class: "t-right" };
+const _sfc_main = {
+  __name: "PlaylistDetail",
+  setup(__props) {
+    const route = vueRouter.useRoute();
+    const router = vueRouter.useRouter();
+    const isLoading = vue.ref(true);
+    const isFavorite = vue.ref(false);
+    const showDropdown = vue.ref(false);
+    const showEditModal = vue.ref(false);
+    const showDeleteModal = vue.ref(false);
+    const validationErrors = vue.reactive({});
+    const editForm = vue.reactive({
+      title: "",
+      description: "",
+      isPublic: true,
+      coverUrl: ""
+    });
+    const playlist = vue.computed(() => playlists.state.currentPlaylist);
+    const playlistTracks = vue.computed(() => playlists.state.currentPlaylistTracks);
+    const isOwner = vue.computed(() => {
+      var _a, _b, _c;
+      if (!playlist.value || !auth.state.user) return false;
+      return ((_b = (_a = playlist.value.owner) == null ? void 0 : _a.target) == null ? void 0 : _b._id) === auth.state.user._id || ((_c = playlist.value.owner) == null ? void 0 : _c.target) === auth.state.user._id;
+    });
+    const isCollaborator = vue.computed(() => {
+      var _a;
+      if (!playlist.value || !auth.state.user) return false;
+      return (_a = playlist.value.collaborators) == null ? void 0 : _a.some(
+        (collab) => collab._id === auth.state.user._id || collab === auth.state.user._id
+      );
+    });
+    const getPlaylistOwnerName = (playlist2) => {
+      var _a;
+      if (!playlist2 || !playlist2.owner) return "Unknown";
+      const owner = playlist2.owner.target;
+      if (typeof owner === "object") {
+        if ((_a = owner.profile) == null ? void 0 : _a.name) {
+          return owner.profile.name;
+        }
+        return 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 } };
+      }
+      return { name: "music-home" };
+    };
+    const playPlaylist = () => {
+      if (playlistTracks.value && playlistTracks.value.length > 0) {
+        player.actions.setQueue(playlistTracks.value);
+      }
+    };
+    const toggleFavorite = () => {
+      isFavorite.value = !isFavorite.value;
+    };
+    const addToQueue = () => {
+      if (playlistTracks.value && playlistTracks.value.length > 0) {
+        playlistTracks.value.forEach((track) => {
+          player.actions.addToQueue(track);
+        });
+        showDropdown.value = false;
+      }
+    };
+    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 playlists.actions.updatePlaylist(updatedData);
+        showEditModal.value = false;
+      } catch (error) {
+        console.error("Error updating playlist:", error);
+      }
+    };
+    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);
+      }
+    };
+    const copyLink = () => {
+      const url = window.location.href;
+      navigator.clipboard.writeText(url).then(() => {
+        showDropdown.value = false;
+      });
+    };
+    const fetchPlaylistData = async () => {
+      isLoading.value = true;
+      try {
+        await playlists.actions.fetchPlaylistByUrl(route.params.url);
+      } catch (error) {
+        console.error("Error fetching playlist data:", error);
+      } finally {
+        isLoading.value = false;
+      }
+    };
+    vue.onMounted(fetchPlaylistData);
+    vue.watch(() => route.params.url, (newUrl) => {
+      if (newUrl) {
+        fetchPlaylistData();
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_router_link = vue.resolveComponent("router-link");
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(Loader.default)
+        ])) : !playlist.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _cache[11] || (_cache[11] = [
+          vue.createElementVNode("h2", { class: "t-white" }, "Playlist not found", -1),
+          vue.createElementVNode("p", { class: "t-grey t-medium" }, "The playlist you're looking for doesn't exist or has been removed.", -1)
+        ]))) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createElementVNode("div", _hoisted_5, [
+            vue.createElementVNode("div", _hoisted_6, [
+              vue.createVNode(Media.default, {
+                url: playlist.value.coverUrl || "/assets/placeholder-playlist.jpg",
+                class: "w-15r h-15r object-fit-cover shadow-lg radius-small"
+              }, null, 8, ["url"])
+            ]),
+            vue.createElementVNode("div", _hoisted_7, [
+              _cache[13] || (_cache[13] = vue.createElementVNode("div", { class: "t-small t-uppercase t-white" }, "Playlist", -1)),
+              vue.createElementVNode("h1", _hoisted_8, vue.toDisplayString(playlist.value.title), 1),
+              playlist.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_9, vue.toDisplayString(playlist.value.description), 1)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_10, [
+                playlist.value.owner && playlist.value.owner.target ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                  key: 0,
+                  to: getOwnerProfileLink(playlist.value.owner),
+                  class: "t-white t-medium hover-t-main"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createTextVNode(vue.toDisplayString(getPlaylistOwnerName(playlist.value)), 1)
+                  ]),
+                  _: 1
+                }, 8, ["to"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_11, vue.toDisplayString(getPlaylistOwnerName(playlist.value)), 1)),
+                _cache[12] || (_cache[12] = vue.createElementVNode("span", { class: "t-grey mn-l-small mn-r-small" }, "•", -1)),
+                vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(playlistTracks.value.length) + " " + vue.toDisplayString(playlistTracks.value.length === 1 ? "song" : "songs"), 1)
+              ])
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_13, [
+            vue.createVNode(Button.default, {
+              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: vue.withCtx(() => [
+                vue.createVNode(IconPlay.default, {
+                  class: "i-small",
+                  fill: "rgb(var(--black))"
+                }),
+                _cache[14] || (_cache[14] = vue.createElementVNode("span", { class: "t-black t-medium" }, "Play", -1))
+              ]),
+              _: 1
+            }),
+            vue.createVNode(Button.default, {
+              onClick: toggleFavorite,
+              class: "bg-transparent border-none pd-zero",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(IconLike.default, {
+                  class: "i-medium",
+                  fill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--white))"
+                }, null, 8, ["fill"])
+              ]),
+              _: 1
+            }),
+            vue.createVNode(Dropdown.default, { class: "pos-relative" }, {
+              content: vue.withCtx(() => [
+                showDropdown.value ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_14, [
+                  isOwner.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_15, [
+                    vue.createVNode(Button.default, {
+                      onClick: editPlaylist,
+                      class: "bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small",
+                      showLoader: false,
+                      showSucces: false
+                    }, {
+                      default: vue.withCtx(() => _cache[15] || (_cache[15] = [
+                        vue.createElementVNode("span", null, "Edit Details", -1)
+                      ])),
+                      _: 1
+                    })
+                  ])) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("li", _hoisted_16, [
+                    vue.createVNode(Button.default, {
+                      onClick: addToQueue,
+                      class: "bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small",
+                      showLoader: false,
+                      showSucces: false
+                    }, {
+                      default: vue.withCtx(() => _cache[16] || (_cache[16] = [
+                        vue.createElementVNode("span", null, "Add to Queue", -1)
+                      ])),
+                      _: 1
+                    })
+                  ]),
+                  isOwner.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_17, [
+                    vue.createVNode(Button.default, {
+                      onClick: toggleCollaborative,
+                      class: "bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small",
+                      showLoader: false,
+                      showSucces: false
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("span", null, vue.toDisplayString(playlist.value.isCollaborative ? "Make Private" : "Make Collaborative"), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])) : vue.createCommentVNode("", true),
+                  isOwner.value ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_18, [
+                    vue.createVNode(Button.default, {
+                      onClick: deletePlaylist,
+                      class: "bg-transparent border-none pd-thin t-fourth w-100 t-left hover-bg-dark radius-small",
+                      showLoader: false,
+                      showSucces: false
+                    }, {
+                      default: vue.withCtx(() => _cache[17] || (_cache[17] = [
+                        vue.createElementVNode("span", null, "Delete", -1)
+                      ])),
+                      _: 1
+                    })
+                  ])) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("li", null, [
+                    vue.createVNode(Button.default, {
+                      onClick: copyLink,
+                      class: "bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small",
+                      showLoader: false,
+                      showSucces: false
+                    }, {
+                      default: vue.withCtx(() => _cache[18] || (_cache[18] = [
+                        vue.createElementVNode("span", null, "Copy Link", -1)
+                      ])),
+                      _: 1
+                    })
+                  ])
+                ])) : vue.createCommentVNode("", true)
+              ]),
+              default: vue.withCtx(() => [
+                vue.createVNode(Button.default, {
+                  onClick: _cache[0] || (_cache[0] = ($event) => showDropdown.value = !showDropdown.value),
+                  class: "bg-transparent border-none pd-zero",
+                  showLoader: false,
+                  showSucces: false
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(IconEllipsis.default, {
+                      class: "i-medium",
+                      fill: "rgb(var(--white))"
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          vue.createElementVNode("div", _hoisted_19, [
+            playlistTracks.value.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_20, [
+              _cache[20] || (_cache[20] = vue.createElementVNode("h3", { class: "t-white mn-b-small" }, "This playlist is empty", -1)),
+              _cache[21] || (_cache[21] = vue.createElementVNode("p", { class: "t-grey t-medium" }, "Add some tracks to get started", -1)),
+              isOwner.value || isCollaborator.value ? (vue.openBlock(), vue.createBlock(Button.default, {
+                key: 0,
+                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$router.push({ name: "music-search" })),
+                class: "bg-main t-white radius-small pd-small mn-t-medium hover-scale-1",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => _cache[19] || (_cache[19] = [
+                  vue.createTextVNode(" Find Tracks ")
+                ])),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ])) : (vue.openBlock(), vue.createBlock(TrackList.default, {
+              key: 1,
+              tracks: playlistTracks.value,
+              showAlbum: true,
+              showCover: true,
+              class: "bg-dark-transp-10 radius-medium o-hidden"
+            }, null, 8, ["tracks"]))
+          ]),
+          showEditModal.value && isOwner.value ? (vue.openBlock(), vue.createBlock(Popup.default, {
+            key: 0,
+            onClosePopup: _cache[8] || (_cache[8] = ($event) => showEditModal.value = false),
+            class: "bg-dark pd-small w-m-25r radius-medium t-white"
+          }, {
+            default: vue.withCtx(() => [
+              _cache[28] || (_cache[28] = vue.createElementVNode("h3", { class: "mn-b-medium" }, "Edit Playlist", -1)),
+              vue.createElementVNode("form", {
+                onSubmit: vue.withModifiers(updatePlaylist, ["prevent"])
+              }, [
+                vue.createElementVNode("div", _hoisted_21, [
+                  _cache[22] || (_cache[22] = vue.createElementVNode("label", {
+                    for: "title",
+                    class: "t-white t-medium mn-b-thin d-block"
+                  }, "Playlist Name", -1)),
+                  vue.createVNode(Field.default, {
+                    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 t-white"
+                  }, null, 8, ["field", "validation"])
+                ]),
+                vue.createElementVNode("div", _hoisted_22, [
+                  _cache[23] || (_cache[23] = vue.createElementVNode("label", {
+                    for: "description",
+                    class: "t-white t-medium mn-b-thin d-block"
+                  }, "Description", -1)),
+                  vue.createVNode(Field.default, {
+                    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 t-white"
+                  }, null, 8, ["field"])
+                ]),
+                vue.createElementVNode("div", _hoisted_23, [
+                  _cache[24] || (_cache[24] = vue.createElementVNode("label", { class: "t-white t-medium mn-b-thin d-block" }, "Privacy", -1)),
+                  vue.createElementVNode("div", _hoisted_24, [
+                    vue.createVNode(Radio.default, {
+                      radio: editForm.isPublic,
+                      "onUpdate:radio": _cache[4] || (_cache[4] = ($event) => editForm.isPublic = $event),
+                      value: true,
+                      name: "privacy",
+                      label: "Public",
+                      class: "t-white"
+                    }, null, 8, ["radio"]),
+                    vue.createVNode(Radio.default, {
+                      radio: editForm.isPublic,
+                      "onUpdate:radio": _cache[5] || (_cache[5] = ($event) => editForm.isPublic = $event),
+                      value: false,
+                      name: "privacy",
+                      label: "Private",
+                      class: "t-white"
+                    }, null, 8, ["radio"])
+                  ])
+                ]),
+                vue.createElementVNode("div", _hoisted_25, [
+                  _cache[25] || (_cache[25] = vue.createElementVNode("label", { class: "t-white t-medium mn-b-thin d-block" }, "Cover Image", -1)),
+                  vue.createElementVNode("div", _hoisted_26, [
+                    vue.createElementVNode("div", _hoisted_27, [
+                      editForm.coverUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
+                        key: 0,
+                        url: editForm.coverUrl,
+                        class: "w-10r h-10r object-fit-cover"
+                      }, null, 8, ["url"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_28, [
+                        vue.createVNode(IconMusic.default, {
+                          class: "i-big",
+                          fill: "rgb(var(--grey))"
+                        })
+                      ]))
+                    ]),
+                    vue.createVNode(UploadImage.default, {
+                      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"])
+                  ])
+                ]),
+                vue.createElementVNode("div", _hoisted_29, [
+                  vue.createVNode(Button.default, {
+                    onClick: _cache[7] || (_cache[7] = ($event) => showEditModal.value = false),
+                    type: "button",
+                    class: "bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark",
+                    showLoader: false,
+                    showSucces: false
+                  }, {
+                    default: vue.withCtx(() => _cache[26] || (_cache[26] = [
+                      vue.createTextVNode(" Cancel ")
+                    ])),
+                    _: 1
+                  }),
+                  vue.createVNode(Button.default, {
+                    type: "submit",
+                    class: "bg-main t-white pd-small radius-small hover-scale-1",
+                    submit: updatePlaylist,
+                    showLoader: true,
+                    showSucces: true,
+                    validation: !!Object.keys(validationErrors).length
+                  }, {
+                    default: vue.withCtx(() => _cache[27] || (_cache[27] = [
+                      vue.createTextVNode(" Save ")
+                    ])),
+                    _: 1
+                  }, 8, ["validation"])
+                ])
+              ], 32)
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true),
+          showDeleteModal.value ? (vue.openBlock(), vue.createBlock(Popup.default, {
+            key: 1,
+            onClosePopup: _cache[10] || (_cache[10] = ($event) => showDeleteModal.value = false),
+            class: "bg-dark pd-small w-m-25r radius-medium t-white"
+          }, {
+            default: vue.withCtx(() => [
+              _cache[31] || (_cache[31] = vue.createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
+              _cache[32] || (_cache[32] = vue.createElementVNode("p", { class: "t-grey mn-b-medium" }, "Are you sure you want to delete this playlist? This action cannot be undone.", -1)),
+              vue.createElementVNode("div", _hoisted_30, [
+                vue.createVNode(Button.default, {
+                  onClick: _cache[9] || (_cache[9] = ($event) => showDeleteModal.value = false),
+                  class: "bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark",
+                  showLoader: false,
+                  showSucces: false
+                }, {
+                  default: vue.withCtx(() => _cache[29] || (_cache[29] = [
+                    vue.createTextVNode(" Cancel ")
+                  ])),
+                  _: 1
+                }),
+                vue.createVNode(Button.default, {
+                  onClick: confirmDelete,
+                  class: "bg-fourth t-white pd-small radius-small hover-scale-1",
+                  showLoader: true,
+                  showSucces: true
+                }, {
+                  default: vue.withCtx(() => _cache[30] || (_cache[30] = [
+                    vue.createTextVNode(" Delete ")
+                  ])),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true)
+        ]))
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=PlaylistDetail.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlaylistDetail.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/PlaylistDetail.vue"],"sourcesContent":["<!-- components/pages/PlaylistDetail.vue -->\n<template>\n  <div class=\"playlist-detail-page\">\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"!playlist\" class=\"t-center pd-big\">\n      <h2 class=\"t-white\">Playlist not found</h2>\n      <p class=\"t-grey t-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <div v-else>\n      <!-- Playlist Header -->\n      <div class=\"playlist-header mn-b-medium flex flex-v-center gap-medium\">\n        <div class=\"playlist-cover\">\n          <Media \n            :url=\"playlist.coverUrl || '/assets/placeholder-playlist.jpg'\" \n            class=\"w-15r h-15r object-fit-cover shadow-lg radius-small\"\n          />\n        </div>\n        \n        <div class=\"playlist-info\">\n          <div class=\"t-small t-uppercase t-white\">Playlist</div>\n          <h1 class=\"t-white\">{{ playlist.title }}</h1>\n          \n          <div v-if=\"playlist.description\" class=\"playlist-description t-grey mn-t-thin mn-b-small\">\n            {{ playlist.description }}\n          </div>\n          \n          <div class=\"playlist-meta flex flex-v-center\">\n            <router-link \n              v-if=\"playlist.owner && playlist.owner.target\"\n              :to=\"getOwnerProfileLink(playlist.owner)\"\n              class=\"t-white t-medium hover-t-main\"\n            >\n              {{ getPlaylistOwnerName(playlist) }}\n            </router-link>\n            <span v-else class=\"t-white t-medium\">{{ getPlaylistOwnerName(playlist) }}</span>\n            \n            <span class=\"t-grey mn-l-small mn-r-small\">•</span>\n            \n            <span class=\"t-grey\">{{ playlistTracks.length }} {{ playlistTracks.length === 1 ? 'song' : 'songs' }}</span>\n          </div>\n        </div>\n      </div>\n      \n      <!-- Playlist Actions -->\n      <div class=\"playlist-actions mn-b-medium flex flex-v-center gap-small\">\n        <Button \n          @click=\"playPlaylist\"\n          class=\"play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconPlay class=\"i-small\" fill=\"rgb(var(--black))\"/>\n          <span class=\"t-black t-medium\">Play</span>\n        </Button>\n        \n        <Button \n          @click=\"toggleFavorite\"\n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'\"/>\n        </Button>\n        \n        <Dropdown class=\"pos-relative\">\n          <Button \n            @click=\"showDropdown = !showDropdown\"\n            class=\"bg-transparent border-none pd-zero\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconEllipsis class=\"i-medium\" fill=\"rgb(var(--white))\"/>\n          </Button>\n          \n          <template #content>\n            <ul v-if=\"showDropdown\" class=\"pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin\">\n              <li v-if=\"isOwner\" class=\"mn-b-thin\">\n                <Button \n                  @click=\"editPlaylist\"\n                  class=\"bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Edit Details</span>\n                </Button>\n              </li>\n              <li class=\"mn-b-thin\">\n                <Button \n                  @click=\"addToQueue\"\n                  class=\"bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Add to Queue</span>\n                </Button>\n              </li>\n              <li v-if=\"isOwner\" class=\"mn-b-thin\">\n                <Button \n                  @click=\"toggleCollaborative\"\n                  class=\"bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>{{ playlist.isCollaborative ? 'Make Private' : 'Make Collaborative' }}</span>\n                </Button>\n              </li>\n              <li v-if=\"isOwner\" class=\"mn-b-thin\">\n                <Button \n                  @click=\"deletePlaylist\"\n                  class=\"bg-transparent border-none pd-thin t-fourth w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Delete</span>\n                </Button>\n              </li>\n              <li>\n                <Button \n                  @click=\"copyLink\"\n                  class=\"bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small\"\n                  :showLoader=\"false\" \n                  :showSucces=\"false\"\n                >\n                  <span>Copy Link</span>\n                </Button>\n              </li>\n            </ul>\n          </template>\n        </Dropdown>\n      </div>\n      \n      <!-- Playlist Tracks -->\n      <div class=\"playlist-tracks\">\n        <div v-if=\"playlistTracks.length === 0\" class=\"empty-tracks t-center pd-big bg-dark-transp-10 radius-medium\">\n          <h3 class=\"t-white mn-b-small\">This playlist is empty</h3>\n          <p class=\"t-grey t-medium\">Add some tracks to get started</p>\n          \n          <Button \n            v-if=\"isOwner || isCollaborator\"\n            @click=\"$router.push({ name: 'music-search' })\"\n            class=\"bg-main t-white radius-small pd-small mn-t-medium hover-scale-1\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            Find Tracks\n          </Button>\n        </div>\n        \n        <TrackList \n          v-else\n          :tracks=\"playlistTracks\"\n          :showAlbum=\"true\" \n          :showCover=\"true\"\n          class=\"bg-dark-transp-10 radius-medium o-hidden\"\n        />\n      </div>\n      \n      <!-- Edit Playlist Modal -->\n      <Popup \n        v-if=\"showEditModal && isOwner\" \n        @close-popup=\"showEditModal = false\" \n        class=\"bg-dark pd-small w-m-25r radius-medium t-white\"\n      >\n        <h3 class=\"mn-b-medium\">Edit Playlist</h3>\n        \n        <form @submit.prevent=\"updatePlaylist\">\n          <div class=\"form-group mn-b-medium\">\n            <label for=\"title\" class=\"t-white t-medium mn-b-thin d-block\">Playlist Name</label>\n            <Field \n              v-model:field=\"editForm.title\"\n              id=\"title\"\n              type=\"text\"\n              placeholder=\"Playlist Name\"\n              :validation=\"validationErrors.title\"\n              class=\"w-100 pd-small bg-dark-transp-25 radius-small t-white\"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label for=\"description\" class=\"t-white t-medium mn-b-thin d-block\">Description</label>\n            <Field \n              v-model:field=\"editForm.description\"\n              id=\"description\"\n              type=\"textarea\"\n              placeholder=\"Add an optional description\"\n              class=\"w-100 pd-small bg-dark-transp-25 radius-small t-white\"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\"t-white t-medium mn-b-thin d-block\">Privacy</label>\n            <div class=\"flex gap-small\">\n              <Radio \n                v-model:radio=\"editForm.isPublic\"\n                :value=\"true\"\n                name=\"privacy\"\n                label=\"Public\"\n                class=\"t-white\"\n              />\n              <Radio \n                v-model:radio=\"editForm.isPublic\"\n                :value=\"false\"\n                name=\"privacy\"\n                label=\"Private\"\n                class=\"t-white\"\n              />\n            </div>\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\"t-white t-medium mn-b-thin d-block\">Cover Image</label>\n            <div class=\"playlist-cover-upload flex gap-medium\">\n              <div class=\"playlist-cover-preview bg-dark-transp-25 radius-small o-hidden\">\n                <Media \n                  v-if=\"editForm.coverUrl\"\n                  :url=\"editForm.coverUrl\"\n                  class=\"w-10r h-10r object-fit-cover\"\n                />\n                <div v-else class=\"w-10r h-10r flex-center flex\">\n                  <IconMusic class=\"i-big\" fill=\"rgb(var(--grey))\"/>\n                </div>\n              </div>\n              \n              <UploadImage\n                v-model:photo=\"editForm.coverUrl\"\n                uploadPath=\"playlists\"\n                class=\"flex-1 h-10r bg-dark-transp-25 radius-small\"\n              />\n            </div>\n          </div>\n          \n          <div class=\"form-actions t-right\">\n            <Button \n              @click=\"showEditModal = false\"\n              type=\"button\"\n              class=\"bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark\"\n              :showLoader=\"false\" \n              :showSucces=\"false\"\n            >\n              Cancel\n            </Button>\n            \n            <Button \n              type=\"submit\"\n              class=\"bg-main t-white pd-small radius-small hover-scale-1\"\n              :submit=\"updatePlaylist\"\n              :showLoader=\"true\" \n              :showSucces=\"true\"\n              :validation=\"!!Object.keys(validationErrors).length\"\n            >\n              Save\n            </Button>\n          </div>\n        </form>\n      </Popup>\n      \n      <!-- Delete Confirmation Modal -->\n      <Popup \n        v-if=\"showDeleteModal\" \n        @close-popup=\"showDeleteModal = false\" \n        class=\"bg-dark pd-small w-m-25r radius-medium t-white\"\n      >\n        <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n        <p class=\"t-grey mn-b-medium\">Are you sure you want to delete this playlist? This action cannot be undone.</p>\n        \n        <div class=\"t-right\">\n          <Button \n            @click=\"showDeleteModal = false\"\n            class=\"bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            Cancel\n          </Button>\n          \n          <Button \n            @click=\"confirmDelete\"\n            class=\"bg-fourth t-white pd-small radius-small hover-scale-1\"\n            :showLoader=\"true\" \n            :showSucces=\"true\"\n          >\n            Delete\n          </Button>\n        </div>\n      </Popup>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, reactive, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport TrackList from '../lists/TrackList.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Field from '@martyrs/src/components/Field/Field.vue';\nimport Radio from '@martyrs/src/components/Radio/Radio.vue';\nimport UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';\n\n// Import icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';\n\n// Import store modules\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { actions as playerActions } from '../../store/player.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// State\nconst isLoading = ref(true);\nconst isFavorite = ref(false);\nconst showDropdown = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\n\n// Validation\nconst validationErrors = reactive({});\n\n// Edit form\nconst editForm = reactive({\n  title: '',\n  description: '',\n  isPublic: true,\n  coverUrl: ''\n});\n\n// Computed properties\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks);\n\nconst isOwner = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  return (\n    playlist.value.owner?.target?._id === authState.user._id ||\n    playlist.value.owner?.target === authState.user._id\n  );\n});\n\nconst isCollaborator = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  return playlist.value.collaborators?.some(collab => \n    collab._id === authState.user._id || collab === authState.user._id\n  );\n});\n\n// Methods\nconst getPlaylistOwnerName = (playlist) => {\n  if (!playlist || !playlist.owner) return 'Unknown';\n  \n  const owner = playlist.owner.target;\n  if (typeof owner === 'object') {\n    if (owner.profile?.name) {\n      return owner.profile.name;\n    }\n    return owner.name || 'Unknown';\n  }\n  \n  return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n  if (!owner || !owner.target) return { name: 'music-home' };\n  \n  if (owner.type === 'User') {\n    return { name: 'user-profile', params: { _id: owner.target._id || owner.target } };\n  } else if (owner.type === 'Organization') {\n    return { name: 'organization-profile', params: { _id: owner.target._id || owner.target } };\n  }\n  \n  return { name: 'music-home' };\n};\n\nconst playPlaylist = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playerActions.setQueue(playlistTracks.value);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // Implement favorite playlist logic here\n};\n\nconst addToQueue = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    // Add all tracks to queue\n    playlistTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    \n    showDropdown.value = false;\n  }\n};\n\nconst editPlaylist = () => {\n  // Populate edit form with current playlist data\n  editForm.title = playlist.value.title;\n  editForm.description = playlist.value.description || '';\n  editForm.isPublic = playlist.value.isPublic;\n  editForm.coverUrl = playlist.value.coverUrl || '';\n  \n  showEditModal.value = true;\n  showDropdown.value = false;\n};\n\nconst updatePlaylist = async () => {\n  // Validate form\n  validationErrors.title = !editForm.title ? { message: 'Playlist name is required' } : null;\n  \n  // If there are validation errors, don't submit\n  if (Object.values(validationErrors).some(error => error !== null)) {\n    return;\n  }\n  \n  try {\n    // Update playlist\n    const updatedData = {\n      _id: playlist.value._id,\n      title: editForm.title,\n      description: editForm.description,\n      isPublic: editForm.isPublic,\n      coverUrl: editForm.coverUrl\n    };\n    \n    await playlistsActions.updatePlaylist(updatedData);\n    showEditModal.value = false;\n  } catch (error) {\n    console.error('Error updating playlist:', error);\n  }\n};\n\nconst toggleCollaborative = async () => {\n  try {\n    // Toggle collaborative status\n    const updatedData = {\n      _id: playlist.value._id,\n      isCollaborative: !playlist.value.isCollaborative\n    };\n    \n    await playlistsActions.updatePlaylist(updatedData);\n    showDropdown.value = false;\n  } catch (error) {\n    console.error('Error updating playlist:', error);\n  }\n};\n\nconst deletePlaylist = () => {\n  showDeleteModal.value = true;\n  showDropdown.value = false;\n};\n\nconst confirmDelete = async () => {\n  try {\n    await playlistsActions.deletePlaylist(playlist.value._id);\n    router.push({ name: 'music-library' });\n  } catch (error) {\n    console.error('Error deleting playlist:', error);\n  }\n};\n\nconst copyLink = () => {\n  const url = window.location.href;\n  navigator.clipboard.writeText(url).then(() => {\n    // Could show a success notification here\n    showDropdown.value = false;\n  });\n};\n\nconst fetchPlaylistData = async () => {\n  isLoading.value = true;\n  \n  try {\n    // Fetch playlist data\n    await playlistsActions.fetchPlaylistByUrl(route.params.url);\n  } catch (error) {\n    console.error('Error fetching playlist data:', error);\n  } finally {\n    isLoading.value = false;\n  }\n};\n\n// Fetch data when component mounts or URL changes\nonMounted(fetchPlaylistData);\n\nwatch(() => route.params.url, (newUrl) => {\n  if (newUrl) {\n    fetchPlaylistData();\n  }\n});\n</script>"],"names":["useRoute","useRouter","ref","reactive","computed","playlistsState","authState","playlist","playerActions","playlistsActions","onMounted","watch"],"mappings":"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"}