@ozdao/martyrs 0.2.494 → 0.2.496

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

@@ -5,7 +5,7 @@ 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.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");
@@ -15,10 +15,10 @@ 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 IconCheckmark = require("../../../icons/navigation/IconCheckmark.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");
 require("../../store/tracks.cjs");
 const player = require("../../store/player.cjs");
@@ -33,7 +33,7 @@ const _hoisted_3 = {
   key: 1,
   class: "playlist-content cols-2-fit-content mobile:cols-1 gap-big"
 };
-const _hoisted_4 = { class: "pos-sticky pos-t-0 mobile:pos-relative playlist-cover-section" };
+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" };
@@ -44,68 +44,60 @@ 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: "badge bg-secondary-transp-20 t-secondary pd-thin-big radius-small t-small"
+  class: "bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase"
 };
 const _hoisted_14 = {
   key: 1,
-  class: "badge bg-success-transp-20 t-success pd-thin-big radius-small t-small"
+  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-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_22 = { class: "flex items-center gap-thin" };
-const _hoisted_23 = { class: "t-large" };
-const _hoisted_24 = { class: "t-small t-transp" };
-const _hoisted_25 = {
+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-col gap-small" };
+const _hoisted_20 = {
   key: 0,
   class: "collaborators-section mn-b-big"
 };
-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 = {
+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-medium" };
+const _hoisted_25 = { class: "t-medium" };
+const _hoisted_26 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_27 = { class: "t-medium" };
+const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_29 = { class: "t-medium" };
+const _hoisted_30 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_31 = { class: "t-medium" };
+const _hoisted_32 = {
   key: 1,
   class: "tags-section mn-b-medium"
 };
-const _hoisted_38 = { class: "flex gap-thin flex-wrap" };
-const _hoisted_39 = {
+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_40 = { class: "t-transp" };
-const _hoisted_41 = {
+const _hoisted_35 = { class: "t-transp" };
+const _hoisted_36 = {
   key: 2,
   class: "tracks-section mn-t-big"
 };
-const _hoisted_42 = { class: "bg-light radius-medium o-hidden" };
-const _hoisted_43 = {
+const _hoisted_37 = { class: "bg-light radius-medium o-hidden" };
+const _hoisted_38 = {
   key: 3,
   class: "empty-section mn-t-big"
 };
-const _hoisted_44 = { class: "empty-tracks t-center pd-big bg-light radius-medium" };
-const _hoisted_45 = {
+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_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 _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"],
@@ -140,24 +132,6 @@ const _sfc_main = {
       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) 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" };
       const targetId = typeof owner.target === "object" ? owner.target._id : owner.target;
@@ -338,7 +312,7 @@ const _sfc_main = {
           ]),
           vue.createElementVNode("div", _hoisted_11, [
             vue.createElementVNode("div", _hoisted_12, [
-              _cache[10] || (_cache[10] = vue.createElementVNode("span", { class: "badge bg-primary-transp-20 t-primary pd-thin-big radius-small t-small t-uppercase" }, " Playlist ", -1)),
+              _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)
             ]),
@@ -348,10 +322,13 @@ const _sfc_main = {
                 onClick: playPlaylist,
                 color: "primary",
                 size: "medium",
-                class: "flex-1 flex-center gap-thin"
+                class: "flex-1 t-white bg-black radius-thin flex-center gap-thin"
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(IconPlay.default, { class: "i-medium" }),
+                  vue.createVNode(IconPlay.default, {
+                    fill: "rgb(var(--white))",
+                    class: "i-medium"
+                  }),
                   _cache[11] || (_cache[11] = vue.createTextVNode(" Play All "))
                 ]),
                 _: 1
@@ -360,7 +337,7 @@ const _sfc_main = {
                 onClick: shufflePlay,
                 color: "primary",
                 size: "medium",
-                class: "flex-1 flex-center gap-thin"
+                class: "flex-1 bg-light radius-thin flex-center gap-thin"
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(IconShuffle.default, { class: "i-medium" }),
@@ -372,7 +349,7 @@ const _sfc_main = {
                 onClick: toggleFollow,
                 color: "primary",
                 size: "medium",
-                class: "flex-1 flex-center gap-thin"
+                class: "flex-1 bg-light radius-thin flex-center gap-thin"
               }, {
                 default: vue.withCtx(() => [
                   vue.createTextVNode(vue.toDisplayString(isFollowing.value ? "Follow" : "Unfollow"), 1)
@@ -380,7 +357,7 @@ const _sfc_main = {
                 _: 1
               }),
               vue.createVNode(Dropdown.default, {
-                label: { component: IconEllipsis.default, class: "i-medium" },
+                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"
@@ -403,7 +380,7 @@ const _sfc_main = {
                       onClick: addToQueue,
                       color: "transp",
                       size: "small",
-                      class: "w-100 justify-start"
+                      class: "w-100 t-nowrap justify-start"
                     }, {
                       default: vue.withCtx(() => _cache[13] || (_cache[13] = [
                         vue.createTextVNode(" Add to Queue ")
@@ -414,7 +391,7 @@ const _sfc_main = {
                       onClick: copyLink,
                       color: "transp",
                       size: "small",
-                      class: "w-100 justify-start"
+                      class: "w-100 t-nowrap justify-start"
                     }, {
                       default: vue.withCtx(() => _cache[14] || (_cache[14] = [
                         vue.createTextVNode(" Copy Link ")
@@ -427,7 +404,7 @@ const _sfc_main = {
                         onClick: editPlaylist,
                         color: "transp",
                         size: "small",
-                        class: "w-100 justify-start"
+                        class: "w-100 t-nowrap justify-start"
                       }, {
                         default: vue.withCtx(() => _cache[15] || (_cache[15] = [
                           vue.createTextVNode(" Edit Playlist ")
@@ -439,7 +416,7 @@ const _sfc_main = {
                         onClick: toggleCollaborative,
                         color: "transp",
                         size: "small",
-                        class: "w-100 justify-start"
+                        class: "t-nowrap w-100 justify-start"
                       }, {
                         default: vue.withCtx(() => [
                           vue.createTextVNode(vue.toDisplayString(playlist.value.isCollaborative ? "Make Private" : "Make Collaborative"), 1)
@@ -451,7 +428,7 @@ const _sfc_main = {
                         onClick: deletePlaylist,
                         color: "danger",
                         size: "small",
-                        class: "w-100 justify-start"
+                        class: "t-nowrap w-100 justify-start"
                       }, {
                         default: vue.withCtx(() => _cache[16] || (_cache[16] = [
                           vue.createTextVNode(" Delete Playlist ")
@@ -467,48 +444,23 @@ const _sfc_main = {
             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(_component_router_link, {
-                  to: getOwnerProfileLink(playlist.value.creator || playlist.value.owner),
-                  class: "flex items-center gap-medium flex-1 hover-opacity"
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createElementVNode("div", _hoisted_20, [
-                      getOwnerData(playlist.value)?.photoUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
-                        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"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_21, vue.toDisplayString(getPlaylistOwnerName(playlist.value).charAt(0)), 1))
-                    ]),
-                    vue.createElementVNode("div", null, [
-                      vue.createElementVNode("div", _hoisted_22, [
-                        vue.createElementVNode("span", _hoisted_23, vue.toDisplayString(getPlaylistOwnerName(playlist.value)), 1),
-                        getOwnerData(playlist.value)?.isVerified ? (vue.openBlock(), vue.createBlock(IconCheckmark.default, {
-                          key: 0,
-                          class: "w-1r h-1r t-primary"
-                        })) : vue.createCommentVNode("", true)
-                      ]),
-                      vue.createElementVNode("span", _hoisted_24, vue.toDisplayString(playlist.value.creator?.type || "User"), 1)
-                    ])
-                  ]),
-                  _: 1
-                }, 8, ["to"]),
-                !isOwner.value && vue.unref(auth.state).user ? (vue.openBlock(), vue.createBlock(Button.default, {
-                  key: 0,
-                  onClick: _cache[1] || (_cache[1] = () => toggleFollowUser(getOwnerId(playlist.value))),
-                  color: followedUsers.value.includes(getOwnerId(playlist.value)) ? "primary" : "transp",
-                  size: "small"
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode(vue.toDisplayString(followedUsers.value.includes(getOwnerId(playlist.value)) ? "Following" : "Follow"), 1)
-                  ]),
-                  _: 1
-                }, 8, ["color"])) : vue.createCommentVNode("", true)
+                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_25, [
+            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_26, [
+              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,
@@ -517,46 +469,47 @@ const _sfc_main = {
                     collaborator.photoUrl ? (vue.openBlock(), vue.createBlock(Media.default, {
                       key: 0,
                       url: collaborator.photoUrl,
-                      class: "w-1-5r h-1-5r radius-full object-cover"
+                      class: "i-regular radius-full object-cover"
                     }, null, 8, ["url"])) : vue.createCommentVNode("", true),
-                    vue.createElementVNode("span", _hoisted_27, vue.toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
+                    vue.createElementVNode("span", _hoisted_22, vue.toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
                   ]);
                 }), 128))
               ])
             ])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_28, [
-              vue.createElementVNode("div", _hoisted_29, [
+            _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_30, vue.toDisplayString(formatDate(playlist.value.createdAt)), 1)
+                  vue.createElementVNode("div", _hoisted_25, vue.toDisplayString(formatDate(playlist.value.createdAt)), 1)
                 ])
               ]),
-              vue.createElementVNode("div", _hoisted_31, [
+              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_32, vue.toDisplayString(totalDuration.value), 1)
+                  vue.createElementVNode("div", _hoisted_27, vue.toDisplayString(totalDuration.value), 1)
                 ])
               ]),
-              vue.createElementVNode("div", _hoisted_33, [
+              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_34, vue.toDisplayString(formatDate(playlist.value.updatedAt)), 1)
+                  vue.createElementVNode("div", _hoisted_29, vue.toDisplayString(formatDate(playlist.value.updatedAt)), 1)
                 ])
               ]),
-              vue.createElementVNode("div", _hoisted_35, [
+              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_36, vue.toDisplayString(playlist.value.isPublic ? "Public" : "Private"), 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_37, [
+            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_38, [
+              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,
@@ -565,14 +518,14 @@ const _sfc_main = {
                 }), 128))
               ])
             ])) : vue.createCommentVNode("", true),
-            playlist.value.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_39, [
+            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_40, vue.toDisplayString(playlist.value.description), 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_41, [
-          _cache[26] || (_cache[26] = vue.createElementVNode("h2", { class: "h2 mn-b-medium" }, "Tracklist", -1)),
+        !_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),
@@ -589,7 +542,7 @@ const _sfc_main = {
             }
           }, {
             default: vue.withCtx(({ items }) => [
-              vue.createElementVNode("div", _hoisted_42, [
+              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,
@@ -605,38 +558,38 @@ const _sfc_main = {
             ]),
             _: 1
           }, 8, ["store", "items"])
-        ])) : !_ctx.isLoading && playlist.value && !playlistTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_43, [
-          vue.createElementVNode("div", _hoisted_44, [
-            _cache[28] || (_cache[28] = vue.createElementVNode("h3", { class: "mn-b-small" }, "This playlist is empty", -1)),
-            _cache[29] || (_cache[29] = vue.createElementVNode("p", { class: "t-transp t-medium mn-b-medium" }, "Add some tracks to get started", -1)),
+        ])) : !_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[27] || (_cache[27] = [
+              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_45, [
-          vue.createElementVNode("div", _hoisted_46, [
-            _cache[31] || (_cache[31] = vue.createElementVNode("h2", { class: "h2" }, "More Playlists", -1)),
+        !_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[30] || (_cache[30] = [
+              default: vue.withCtx(() => _cache[31] || (_cache[31] = [
                 vue.createTextVNode(" See all ")
               ])),
               _: 1
             }, 8, ["to"])) : vue.createCommentVNode("", true)
           ]),
-          vue.createElementVNode("div", _hoisted_47, [
+          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,
@@ -653,7 +606,7 @@ const _sfc_main = {
         vue.createVNode(Popup.default, {
           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"
+          class: "bg-white pd-medium w-m-30r radius-medium"
         }, {
           default: vue.withCtx(() => [
             vue.createVNode(PlaylistForm.default, {
@@ -668,18 +621,18 @@ const _sfc_main = {
         vue.createVNode(Popup.default, {
           isPopupOpen: showDeleteModal.value,
           onClosePopup: _cache[6] || (_cache[6] = ($event) => showDeleteModal.value = false),
-          class: "bg-dark pd-medium w-m-25r radius-medium"
+          class: "bg-white pd-medium w-m-25r radius-medium"
         }, {
           default: vue.withCtx(() => [
-            _cache[34] || (_cache[34] = vue.createElementVNode("h3", { class: "mn-b-medium" }, "Delete Playlist", -1)),
-            vue.createElementVNode("p", _hoisted_48, 'Are you sure you want to delete "' + vue.toDisplayString(playlist.value.title) + '"? This action cannot be undone.', 1),
-            vue.createElementVNode("div", _hoisted_49, [
+            _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[32] || (_cache[32] = [
+                default: vue.withCtx(() => _cache[33] || (_cache[33] = [
                   vue.createTextVNode(" Cancel ")
                 ])),
                 _: 1
@@ -689,7 +642,7 @@ const _sfc_main = {
                 color: "danger",
                 size: "medium"
               }, {
-                default: vue.withCtx(() => _cache[33] || (_cache[33] = [
+                default: vue.withCtx(() => _cache[34] || (_cache[34] = [
                   vue.createTextVNode(" Delete Playlist ")
                 ])),
                 _: 1