@ozdao/martyrs 0.2.488 → 0.2.491

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

@@ -0,0 +1,473 @@
+import { ref, computed, onMounted, watch, resolveComponent, createElementBlock, openBlock, createElementVNode, createVNode, createCommentVNode, Fragment, renderList, normalizeClass, withCtx, createTextVNode, toDisplayString, createBlock, normalizeStyle } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import SearchForm from "../forms/SearchForm.vue.js";
+import _sfc_main$2 from "../../../../components/Feed/Feed.vue.js";
+import TrackCard from "../cards/TrackCard.vue.js";
+import AlbumCard from "../cards/AlbumCard.vue.js";
+import PlaylistCard from "../cards/PlaylistCard.vue.js";
+import ArtistCard from "../cards/ArtistCard.vue.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
+import Loader from "../../../../components/Loader/Loader.vue.js";
+import Media from "../../../../components/Media/Media.vue.js";
+import { state, computed as computed$1, actions } from "../../store/search.js";
+import { actions as actions$1 } from "../../store/player.js";
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _hoisted_1 = { class: "search-results-page" };
+const _hoisted_2 = { class: "search-header mn-b-medium" };
+const _hoisted_3 = {
+  key: 0,
+  class: "search-filters flex gap-small mn-t-medium"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "search-loading"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "search-error t-center pd-big"
+};
+const _hoisted_6 = { class: "t-fourth t-medium" };
+const _hoisted_7 = {
+  key: 2,
+  class: "search-empty t-center pd-big"
+};
+const _hoisted_8 = {
+  key: 3,
+  class: "search-no-results t-center pd-big"
+};
+const _hoisted_9 = { class: "mn-b-small" };
+const _hoisted_10 = {
+  key: 4,
+  class: "search-results"
+};
+const _hoisted_11 = {
+  key: 0,
+  class: "search-section mn-b-medium"
+};
+const _hoisted_12 = { class: "search-top-result bg-dark-transp-20 radius-medium p-medium" };
+const _hoisted_13 = {
+  key: 0,
+  class: "top-result-artist pd-medium"
+};
+const _hoisted_14 = { class: "top-artist-photo mn-b-medium" };
+const _hoisted_15 = { class: "t-semi" };
+const _hoisted_16 = {
+  key: 1,
+  class: "top-result-album pd-medium"
+};
+const _hoisted_17 = { class: "top-album-cover mn-b-medium" };
+const _hoisted_18 = { class: "t-semi" };
+const _hoisted_19 = { class: "t-grey" };
+const _hoisted_20 = {
+  key: 2,
+  class: "top-result-playlist pd-medium"
+};
+const _hoisted_21 = { class: "top-playlist-cover mn-b-medium" };
+const _hoisted_22 = { class: "t-semi" };
+const _hoisted_23 = { class: "t-grey" };
+const _hoisted_24 = {
+  key: 1,
+  class: "search-section mn-b-medium"
+};
+const _hoisted_25 = {
+  key: 2,
+  class: "search-section mn-b-medium"
+};
+const _hoisted_26 = { class: "artists-grid cols-6 mobile:cols-3 gap-small" };
+const _hoisted_27 = {
+  key: 3,
+  class: "search-section mn-b-medium"
+};
+const _hoisted_28 = { class: "albums-grid cols-5 mobile:cols-2 gap-small" };
+const _hoisted_29 = {
+  key: 4,
+  class: "search-section mn-b-medium"
+};
+const _hoisted_30 = { class: "playlists-grid cols-5 mobile:cols-2 gap-small" };
+const _hoisted_31 = {
+  key: 5,
+  class: "search-section"
+};
+const _hoisted_32 = { class: "genres-grid cols-4 mobile:cols-2 gap-small" };
+const _hoisted_33 = { class: "" };
+const _sfc_main = {
+  __name: "SearchResults",
+  setup(__props) {
+    const route = useRoute();
+    const router = useRouter();
+    const searchQuery = ref("");
+    const activeFilter = ref("all");
+    const searchFilters = [
+      { id: "all", label: "All" },
+      { id: "tracks", label: "Songs" },
+      { id: "artists", label: "Artists" },
+      { id: "albums", label: "Albums" },
+      { id: "playlists", label: "Playlists" },
+      { id: "genres", label: "Genres" }
+    ];
+    const isLoading = computed(() => state.isLoading);
+    const searchError = computed(() => state.error);
+    const hasResults = computed(() => computed$1.hasResults());
+    const trackResults = computed(() => state.results.tracks || []);
+    const artistResults = computed(() => state.results.artists || []);
+    const albumResults = computed(() => state.results.albums || []);
+    const playlistResults = computed(() => state.results.playlists || []);
+    const genreResults = computed(() => state.results.genres || []);
+    const topResult = computed(() => {
+      if (artistResults.value.length > 0) {
+        return { type: "artist", item: artistResults.value[0] };
+      } else if (albumResults.value.length > 0) {
+        return { type: "album", item: albumResults.value[0] };
+      } else if (playlistResults.value.length > 0) {
+        return { type: "playlist", item: playlistResults.value[0] };
+      } else if (trackResults.value.length > 0) {
+        return { type: "track", item: trackResults.value[0] };
+      }
+      return null;
+    });
+    const handleSearch = (query) => {
+      searchQuery.value = query;
+      router.push({
+        name: "music-search",
+        query: { q: query },
+        replace: true
+      });
+      actions.search(query);
+    };
+    const setActiveFilter = (filter) => {
+      activeFilter.value = filter;
+      actions.setFilter(filter);
+    };
+    const playTopResult = () => {
+      if (!topResult.value) return;
+      const { type, item } = topResult.value;
+      switch (type) {
+        case "track":
+          actions$1.playTrack(item);
+          break;
+        case "album":
+          router.push({ name: "album", params: { url: item.url } });
+          break;
+        case "playlist":
+          router.push({ name: "playlist", params: { url: item.url } });
+          break;
+        case "artist":
+          router.push({ name: "artist", params: { url: item.url } });
+          break;
+      }
+    };
+    const getArtistName = (item) => {
+      if (!item) return "Unknown Artist";
+      if (item.artist) {
+        if (typeof item.artist === "object") {
+          return item.artist.name || "Unknown Artist";
+        }
+        return item.artist;
+      }
+      return "Unknown Artist";
+    };
+    const getPlaylistOwner = (playlist) => {
+      var _a, _b;
+      if (!playlist) return "Unknown";
+      if ((_a = playlist.owner) == null ? void 0 : _a.target) {
+        if (typeof playlist.owner.target === "object") {
+          if ((_b = playlist.owner.target.profile) == null ? void 0 : _b.name) {
+            return playlist.owner.target.profile.name;
+          }
+          return playlist.owner.target.name || "Unknown";
+        }
+      }
+      return "Unknown";
+    };
+    const getRandomGradient = () => {
+      const colors = [
+        "linear-gradient(135deg, #1DB954, #1ED760)",
+        "linear-gradient(135deg, #FF6B6B, #FFE66D)",
+        "linear-gradient(135deg, #4776E6, #8E54E9)",
+        "linear-gradient(135deg, #FF8008, #FFC837)",
+        "linear-gradient(135deg, #7F00FF, #E100FF)",
+        "linear-gradient(135deg, #11998E, #38EF7D)"
+      ];
+      return colors[Math.floor(Math.random() * colors.length)];
+    };
+    onMounted(() => {
+      const query = route.query.q;
+      if (query) {
+        searchQuery.value = query;
+        actions.search(query);
+      }
+    });
+    watch(() => route.query.q, (newQuery) => {
+      if (newQuery && newQuery !== searchQuery.value) {
+        searchQuery.value = newQuery;
+        actions.search(newQuery);
+      } else if (!newQuery) {
+        searchQuery.value = "";
+        actions.clearSearch();
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_router_link = resolveComponent("router-link");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          _cache[5] || (_cache[5] = createElementVNode("h1", { class: "mn-b-small" }, "Search", -1)),
+          createVNode(SearchForm, {
+            initialQuery: searchQuery.value,
+            onSearch: handleSearch,
+            placeholder: "What do you want to listen to?",
+            class: "w-m-40r"
+          }, null, 8, ["initialQuery"]),
+          searchQuery.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            (openBlock(), createElementBlock(Fragment, null, renderList(searchFilters, (filter) => {
+              return createVNode(_sfc_main$1, {
+                key: filter.id,
+                onClick: ($event) => setActiveFilter(filter.id),
+                class: normalizeClass([[
+                  filter.id === activeFilter.value ? "bg-white t-black" : "bg-dark-transp-50  hover-bg-dark"
+                ], "radius-extra pd-small"]),
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(filter.label), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick", "class"]);
+            }), 64))
+          ])) : createCommentVNode("", true)
+        ]),
+        isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          createVNode(Loader)
+        ])) : searchError.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          createElementVNode("p", _hoisted_6, toDisplayString(searchError.value), 1)
+        ])) : !searchQuery.value ? (openBlock(), createElementBlock("div", _hoisted_7, _cache[6] || (_cache[6] = [
+          createElementVNode("h2", { class: "mn-b-small" }, "Search for music", -1),
+          createElementVNode("p", { class: "t-grey t-medium" }, "Find your favorite songs, artists, albums, and playlists", -1)
+        ]))) : !hasResults.value ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          createElementVNode("h2", _hoisted_9, 'No results found for "' + toDisplayString(searchQuery.value) + '"', 1),
+          _cache[7] || (_cache[7] = createElementVNode("p", { class: "t-grey t-medium" }, "Please try different keywords or check your spelling", -1))
+        ])) : (openBlock(), createElementBlock("div", _hoisted_10, [
+          activeFilter.value === "all" ? (openBlock(), createElementBlock("section", _hoisted_11, [
+            _cache[12] || (_cache[12] = createElementVNode("h2", { class: "mn-b-small" }, "Top Result", -1)),
+            createElementVNode("div", _hoisted_12, [
+              topResult.value.type === "artist" ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                createElementVNode("div", _hoisted_14, [
+                  createVNode(Media, {
+                    url: topResult.value.item.photoUrl || "/assets/placeholder-artist.jpg",
+                    class: "w-10r h-10r object-fit-cover radius-round"
+                  }, null, 8, ["url"])
+                ]),
+                createElementVNode("h3", _hoisted_15, toDisplayString(topResult.value.item.name), 1),
+                _cache[9] || (_cache[9] = createElementVNode("p", { class: "t-grey" }, "Artist", -1)),
+                createVNode(_sfc_main$1, {
+                  onClick: playTopResult,
+                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
+                  showLoader: false,
+                  showSucces: false
+                }, {
+                  default: withCtx(() => _cache[8] || (_cache[8] = [
+                    createTextVNode(" PLAY ")
+                  ])),
+                  _: 1
+                })
+              ])) : topResult.value.type === "album" ? (openBlock(), createElementBlock("div", _hoisted_16, [
+                createElementVNode("div", _hoisted_17, [
+                  createVNode(Media, {
+                    url: topResult.value.item.coverUrl || "/assets/placeholder-album.jpg",
+                    class: "w-10r h-10r object-fit-cover radius-small"
+                  }, null, 8, ["url"])
+                ]),
+                createElementVNode("h3", _hoisted_18, toDisplayString(topResult.value.item.title), 1),
+                createElementVNode("p", _hoisted_19, "Album • " + toDisplayString(getArtistName(topResult.value.item)), 1),
+                createVNode(_sfc_main$1, {
+                  onClick: playTopResult,
+                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
+                  showLoader: false,
+                  showSucces: false
+                }, {
+                  default: withCtx(() => _cache[10] || (_cache[10] = [
+                    createTextVNode(" PLAY ")
+                  ])),
+                  _: 1
+                })
+              ])) : topResult.value.type === "playlist" ? (openBlock(), createElementBlock("div", _hoisted_20, [
+                createElementVNode("div", _hoisted_21, [
+                  createVNode(Media, {
+                    url: topResult.value.item.coverUrl || "/assets/placeholder-playlist.jpg",
+                    class: "w-10r h-10r object-fit-cover radius-small"
+                  }, null, 8, ["url"])
+                ]),
+                createElementVNode("h3", _hoisted_22, toDisplayString(topResult.value.item.title), 1),
+                createElementVNode("p", _hoisted_23, "Playlist • " + toDisplayString(getPlaylistOwner(topResult.value.item)), 1),
+                createVNode(_sfc_main$1, {
+                  onClick: playTopResult,
+                  class: "bg-main radius-round pd-small mn-t-medium hover-scale-1",
+                  showLoader: false,
+                  showSucces: false
+                }, {
+                  default: withCtx(() => _cache[11] || (_cache[11] = [
+                    createTextVNode(" PLAY ")
+                  ])),
+                  _: 1
+                })
+              ])) : createCommentVNode("", true)
+            ])
+          ])) : createCommentVNode("", true),
+          activeFilter.value === "all" || activeFilter.value === "tracks" ? (openBlock(), createElementBlock("section", _hoisted_24, [
+            _cache[14] || (_cache[14] = createElementVNode("h2", { class: "mn-b-small" }, "Songs", -1)),
+            createVNode(_sfc_main$2, {
+              store: {
+                read: () => _ctx.Promise.resolve(trackResults.value),
+                state: { isLoading: false }
+              },
+              external: true,
+              items: trackResults.value,
+              states: {
+                empty: {
+                  title: "No tracks found",
+                  description: "Try different search terms",
+                  class: "pd-medium bg-dark-transp-10 radius-medium"
+                }
+              },
+              class: "gap-thin"
+            }, {
+              default: withCtx(({ items }) => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(items, (track) => {
+                  return openBlock(), createBlock(TrackCard, {
+                    key: track._id,
+                    track,
+                    showAlbum: true,
+                    showCover: true,
+                    class: "w-100 bg-dark-transp-10 radius-medium"
+                  }, null, 8, ["track"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["store", "items"]),
+            trackResults.value.length > 4 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              onClick: _cache[0] || (_cache[0] = ($event) => setActiveFilter("tracks")),
+              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[13] || (_cache[13] = [
+                createTextVNode(" See all songs ")
+              ])),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          activeFilter.value === "all" || activeFilter.value === "artists" ? (openBlock(), createElementBlock("section", _hoisted_25, [
+            _cache[16] || (_cache[16] = createElementVNode("h2", { class: "mn-b-small" }, "Artists", -1)),
+            createElementVNode("div", _hoisted_26, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(artistResults.value.slice(0, activeFilter.value === "all" ? 6 : artistResults.value.length), (artist) => {
+                return openBlock(), createElementBlock("div", {
+                  key: artist._id
+                }, [
+                  createVNode(ArtistCard, { artist }, null, 8, ["artist"])
+                ]);
+              }), 128))
+            ]),
+            artistResults.value.length > 6 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              onClick: _cache[1] || (_cache[1] = ($event) => setActiveFilter("artists")),
+              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[15] || (_cache[15] = [
+                createTextVNode(" See all artists ")
+              ])),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          activeFilter.value === "all" || activeFilter.value === "albums" ? (openBlock(), createElementBlock("section", _hoisted_27, [
+            _cache[18] || (_cache[18] = createElementVNode("h2", { class: "mn-b-small" }, "Albums", -1)),
+            createElementVNode("div", _hoisted_28, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(albumResults.value.slice(0, activeFilter.value === "all" ? 5 : albumResults.value.length), (album) => {
+                return openBlock(), createElementBlock("div", {
+                  key: album._id
+                }, [
+                  createVNode(AlbumCard, { album }, null, 8, ["album"])
+                ]);
+              }), 128))
+            ]),
+            albumResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              onClick: _cache[2] || (_cache[2] = ($event) => setActiveFilter("albums")),
+              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[17] || (_cache[17] = [
+                createTextVNode(" See all albums ")
+              ])),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          activeFilter.value === "all" || activeFilter.value === "playlists" ? (openBlock(), createElementBlock("section", _hoisted_29, [
+            _cache[20] || (_cache[20] = createElementVNode("h2", { class: "mn-b-small" }, "Playlists", -1)),
+            createElementVNode("div", _hoisted_30, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(playlistResults.value.slice(0, activeFilter.value === "all" ? 5 : playlistResults.value.length), (playlist) => {
+                return openBlock(), createElementBlock("div", {
+                  key: playlist._id
+                }, [
+                  createVNode(PlaylistCard, { playlist }, null, 8, ["playlist"])
+                ]);
+              }), 128))
+            ]),
+            playlistResults.value.length > 5 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              onClick: _cache[3] || (_cache[3] = ($event) => setActiveFilter("playlists")),
+              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[19] || (_cache[19] = [
+                createTextVNode(" See all playlists ")
+              ])),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          (activeFilter.value === "all" || activeFilter.value === "genres") && genreResults.value.length > 0 ? (openBlock(), createElementBlock("section", _hoisted_31, [
+            _cache[22] || (_cache[22] = createElementVNode("h2", { class: "mn-b-small" }, "Genres", -1)),
+            createElementVNode("div", _hoisted_32, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(genreResults.value.slice(0, activeFilter.value === "all" ? 4 : genreResults.value.length), (genre) => {
+                return openBlock(), createBlock(_component_router_link, {
+                  key: genre._id,
+                  to: { name: "genre-detail", params: { url: genre.url } },
+                  class: "genre-card bg-gradient-color pd-medium radius-medium t-center hover-scale-1 transition-cubic-in-out",
+                  style: normalizeStyle({
+                    "--gradient-color": getRandomGradient()
+                  })
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("h3", _hoisted_33, toDisplayString(genre.name), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["to", "style"]);
+              }), 128))
+            ]),
+            genreResults.value.length > 4 && activeFilter.value === "all" ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              onClick: _cache[4] || (_cache[4] = ($event) => setActiveFilter("genres")),
+              class: "t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => _cache[21] || (_cache[21] = [
+                createTextVNode(" See all genres ")
+              ])),
+              _: 1
+            })) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ]))
+      ]);
+    };
+  }
+};
+const SearchResults = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d2f0de62"]]);
+export {
+  SearchResults as default
+};
+//# sourceMappingURL=SearchResults.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.vue.js","sources":["../../../../../../../src/modules/music/components/pages/SearchResults.vue"],"sourcesContent":["<!-- components/pages/SearchResults.vue -->\n<template>\n  <div class=\"search-results-page\">\n    <div class=\"search-header mn-b-medium\">\n      <h1 class=\" mn-b-small\">Search</h1>\n      \n      <SearchForm \n        :initialQuery=\"searchQuery\"\n        @search=\"handleSearch\"\n        placeholder=\"What do you want to listen to?\"\n        class=\"w-m-40r\"\n      />\n      \n      <div v-if=\"searchQuery\" class=\"search-filters flex gap-small mn-t-medium\">\n        <Button \n          v-for=\"filter in searchFilters\"\n          :key=\"filter.id\"\n          @click=\"setActiveFilter(filter.id)\"\n          :class=\"[\n            filter.id === activeFilter ? 'bg-white t-black' : 'bg-dark-transp-50  hover-bg-dark',\n          ]\"\n          class=\"radius-extra pd-small\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          {{ filter.label }}\n        </Button>\n      </div>\n    </div>\n    \n    <div v-if=\"isLoading\" class=\"search-loading\">\n      <Loader />\n    </div>\n    \n    <div v-else-if=\"searchError\" class=\"search-error t-center pd-big\">\n      <p class=\"t-fourth t-medium\">{{ searchError }}</p>\n    </div>\n    \n    <div v-else-if=\"!searchQuery\" class=\"search-empty t-center pd-big\">\n      <h2 class=\" mn-b-small\">Search for music</h2>\n      <p class=\"t-grey t-medium\">Find your favorite songs, artists, albums, and playlists</p>\n    </div>\n    \n    <div v-else-if=\"!hasResults\" class=\"search-no-results t-center pd-big\">\n      <h2 class=\" mn-b-small\">No results found for \"{{ searchQuery }}\"</h2>\n      <p class=\"t-grey t-medium\">Please try different keywords or check your spelling</p>\n    </div>\n    \n    <div v-else class=\"search-results\">\n      <!-- Top Results Section -->\n      <section v-if=\"activeFilter === 'all'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Top Result</h2>\n        \n        <div class=\"search-top-result bg-dark-transp-20 radius-medium p-medium\">\n          <div v-if=\"topResult.type === 'artist'\" class=\"top-result-artist pd-medium\">\n            <div class=\"top-artist-photo mn-b-medium\">\n              <Media \n                :url=\"topResult.item.photoUrl || '/assets/placeholder-artist.jpg'\" \n                class=\"w-10r h-10r object-fit-cover radius-round\"\n              />\n            </div>\n            <h3 class=\" t-semi\">{{ topResult.item.name }}</h3>\n            <p class=\"t-grey\">Artist</p>\n            <Button \n              @click=\"playTopResult\"\n              class=\"bg-main radius-round pd-small  mn-t-medium hover-scale-1\"\n              :showLoader=\"false\" \n              :showSucces=\"false\"\n            >\n              PLAY\n            </Button>\n          </div>\n          \n          <div v-else-if=\"topResult.type === 'album'\" class=\"top-result-album pd-medium\">\n            <div class=\"top-album-cover mn-b-medium\">\n              <Media \n                :url=\"topResult.item.coverUrl || '/assets/placeholder-album.jpg'\" \n                class=\"w-10r h-10r object-fit-cover radius-small\"\n              />\n            </div>\n            <h3 class=\" t-semi\">{{ topResult.item.title }}</h3>\n            <p class=\"t-grey\">Album • {{ getArtistName(topResult.item) }}</p>\n            <Button \n              @click=\"playTopResult\"\n              class=\"bg-main radius-round pd-small  mn-t-medium hover-scale-1\"\n              :showLoader=\"false\" \n              :showSucces=\"false\"\n            >\n              PLAY\n            </Button>\n          </div>\n          \n          <div v-else-if=\"topResult.type === 'playlist'\" class=\"top-result-playlist pd-medium\">\n            <div class=\"top-playlist-cover mn-b-medium\">\n              <Media \n                :url=\"topResult.item.coverUrl || '/assets/placeholder-playlist.jpg'\" \n                class=\"w-10r h-10r object-fit-cover radius-small\"\n              />\n            </div>\n            <h3 class=\" t-semi\">{{ topResult.item.title }}</h3>\n            <p class=\"t-grey\">Playlist • {{ getPlaylistOwner(topResult.item) }}</p>\n            <Button \n              @click=\"playTopResult\"\n              class=\"bg-main radius-round pd-small  mn-t-medium hover-scale-1\"\n              :showLoader=\"false\" \n              :showSucces=\"false\"\n            >\n              PLAY\n            </Button>\n          </div>\n        </div>\n      </section>\n      \n      <!-- Songs Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'tracks'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Songs</h2>\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(trackResults),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"trackResults\"\n          :states=\"{\n            empty: {\n              title: 'No tracks found',\n              description: 'Try different search terms',\n              class: 'pd-medium bg-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"track in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\n          </template>\n        </Feed>\n        \n        <Button \n          v-if=\"trackResults.length > 4 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('tracks')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all songs\n        </Button>\n      </section>\n      \n      <!-- Artists Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'artists'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Artists</h2>\n        \n        <div class=\"artists-grid cols-6 mobile:cols-3 gap-small\">\n          <div v-for=\"artist in artistResults.slice(0, activeFilter === 'all' ? 6 : artistResults.length)\" :key=\"artist._id\">\n            <ArtistCard :artist=\"artist\" />\n          </div>\n        </div>\n        \n        <Button \n          v-if=\"artistResults.length > 6 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('artists')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all artists\n        </Button>\n      </section>\n      \n      <!-- Albums Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'albums'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Albums</h2>\n        \n        <div class=\"albums-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"album in albumResults.slice(0, activeFilter === 'all' ? 5 : albumResults.length)\" :key=\"album._id\">\n            <AlbumCard :album=\"album\" />\n          </div>\n        </div>\n        \n        <Button \n          v-if=\"albumResults.length > 5 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('albums')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all albums\n        </Button>\n      </section>\n      \n      <!-- Playlists Results -->\n      <section v-if=\"activeFilter === 'all' || activeFilter === 'playlists'\" class=\"search-section mn-b-medium\">\n        <h2 class=\" mn-b-small\">Playlists</h2>\n        \n        <div class=\"playlists-grid cols-5 mobile:cols-2 gap-small\">\n          <div v-for=\"playlist in playlistResults.slice(0, activeFilter === 'all' ? 5 : playlistResults.length)\" :key=\"playlist._id\">\n            <PlaylistCard :playlist=\"playlist\" />\n          </div>\n        </div>\n        \n        <Button \n          v-if=\"playlistResults.length > 5 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('playlists')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all playlists\n        </Button>\n      </section>\n      \n      <!-- Genres Results -->\n      <section v-if=\"(activeFilter === 'all' || activeFilter === 'genres') && genreResults.length > 0\" class=\"search-section\">\n        <h2 class=\" mn-b-small\">Genres</h2>\n        \n        <div class=\"genres-grid cols-4 mobile:cols-2 gap-small\">\n          <router-link \n            v-for=\"genre in genreResults.slice(0, activeFilter === 'all' ? 4 : genreResults.length)\" \n            :key=\"genre._id\"\n            :to=\"{ name: 'genre-detail', params: { url: genre.url } }\"\n            class=\"genre-card bg-gradient-color pd-medium radius-medium t-center hover-scale-1 transition-cubic-in-out\"\n            :style=\"{ \n              '--gradient-color': getRandomGradient() \n            }\"\n          >\n            <h3 class=\"\">{{ genre.name }}</h3>\n          </router-link>\n        </div>\n        \n        <Button \n          v-if=\"genreResults.length > 4 && activeFilter === 'all'\"\n          @click=\"setActiveFilter('genres')\"\n          class=\"t-main bg-transparent border-none t-center w-100 mn-t-small hover-bg-dark-transp-10 pd-thin\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          See all genres\n        </Button>\n      </section>\n    </div>\n  </div>\n  </template>\n\n  <script setup>\n  import { ref, computed, onMounted, watch } from 'vue';\n  import { useRoute, useRouter } from 'vue-router';\n  import SearchForm from '../forms/SearchForm.vue';\n  import Feed from '@martyrs/src/components/Feed/Feed.vue';\n  import TrackCard from '../cards/TrackCard.vue';\n  import AlbumCard from '../cards/AlbumCard.vue';\n  import PlaylistCard from '../cards/PlaylistCard.vue';\n  import ArtistCard from '../cards/ArtistCard.vue';\n  import Button from '@martyrs/src/components/Button/Button.vue';\n  import Loader from '@martyrs/src/components/Loader/Loader.vue';\n  import Media from '@martyrs/src/components/Media/Media.vue';\n\n  // Import search store\n  import { state as searchState, actions as searchActions, computed as searchComputed } from '../../store/search.js';\n  import { actions as playerActions } from '../../store/player.js';\n\n  const route = useRoute();\n  const router = useRouter();\n\n  // State\n  const searchQuery = ref('');\n  const activeFilter = ref('all');\n\n  // Array of search filters\n  const searchFilters = [\n    { id: 'all', label: 'All' },\n    { id: 'tracks', label: 'Songs' },\n    { id: 'artists', label: 'Artists' },\n    { id: 'albums', label: 'Albums' },\n    { id: 'playlists', label: 'Playlists' },\n    { id: 'genres', label: 'Genres' }\n  ];\n\n  // Computed properties\n  const isLoading = computed(() => searchState.isLoading);\n  const searchError = computed(() => searchState.error);\n  const hasResults = computed(() => searchComputed.hasResults());\n\n  const trackResults = computed(() => searchState.results.tracks || []);\n  const artistResults = computed(() => searchState.results.artists || []);\n  const albumResults = computed(() => searchState.results.albums || []);\n  const playlistResults = computed(() => searchState.results.playlists || []);\n  const genreResults = computed(() => searchState.results.genres || []);\n\n  // Top result determination\n  const topResult = computed(() => {\n    // Determine which result to show as top result based on relevance\n    if (artistResults.value.length > 0) {\n      return { type: 'artist', item: artistResults.value[0] };\n    } else if (albumResults.value.length > 0) {\n      return { type: 'album', item: albumResults.value[0] };\n    } else if (playlistResults.value.length > 0) {\n      return { type: 'playlist', item: playlistResults.value[0] };\n    } else if (trackResults.value.length > 0) {\n      return { type: 'track', item: trackResults.value[0] };\n    }\n    return null;\n  });\n\n  // Methods\n  const handleSearch = (query) => {\n    searchQuery.value = query;\n    \n    // Update URL without reloading the page\n    router.push({ \n      name: 'music-search', \n      query: { q: query },\n      replace: true\n    });\n    \n    // Perform search\n    searchActions.search(query);\n  };\n\n  const setActiveFilter = (filter) => {\n    activeFilter.value = filter;\n    searchActions.setFilter(filter);\n  };\n\n  const playTopResult = () => {\n    if (!topResult.value) return;\n    \n    const { type, item } = topResult.value;\n    \n    switch (type) {\n      case 'track':\n        playerActions.playTrack(item);\n        break;\n      case 'album':\n        // Navigate to album page\n        router.push({ name: 'album', params: { url: item.url } });\n        break;\n      case 'playlist':\n        // Navigate to playlist page\n        router.push({ name: 'playlist', params: { url: item.url } });\n        break;\n      case 'artist':\n        // Navigate to artist page\n        router.push({ name: 'artist', params: { url: item.url } });\n        break;\n    }\n  };\n\n  const getArtistName = (item) => {\n    if (!item) return 'Unknown Artist';\n    \n    if (item.artist) {\n      if (typeof item.artist === 'object') {\n        return item.artist.name || 'Unknown Artist';\n      }\n      return item.artist;\n    }\n    return 'Unknown Artist';\n  };\n\n  const getPlaylistOwner = (playlist) => {\n    if (!playlist) return 'Unknown';\n    \n    if (playlist.owner?.target) {\n      if (typeof playlist.owner.target === 'object') {\n        if (playlist.owner.target.profile?.name) {\n          return playlist.owner.target.profile.name;\n        }\n        return playlist.owner.target.name || 'Unknown';\n      }\n    }\n    return 'Unknown';\n  };\n\n  // Generate random gradient for genre cards\n  const getRandomGradient = () => {\n    const colors = [\n      'linear-gradient(135deg, #1DB954, #1ED760)',\n      'linear-gradient(135deg, #FF6B6B, #FFE66D)',\n      'linear-gradient(135deg, #4776E6, #8E54E9)',\n      'linear-gradient(135deg, #FF8008, #FFC837)',\n      'linear-gradient(135deg, #7F00FF, #E100FF)',\n      'linear-gradient(135deg, #11998E, #38EF7D)'\n    ];\n    \n    return colors[Math.floor(Math.random() * colors.length)];\n  };\n\n  // Watch for URL query parameter changes\n  onMounted(() => {\n    const query = route.query.q;\n    if (query) {\n      searchQuery.value = query;\n      searchActions.search(query);\n    }\n  });\n\n  watch(() => route.query.q, (newQuery) => {\n    if (newQuery && newQuery !== searchQuery.value) {\n      searchQuery.value = newQuery;\n      searchActions.search(newQuery);\n    } else if (!newQuery) {\n      searchQuery.value = '';\n      searchActions.clearSearch();\n    }\n  });\n  </script>\n\n  <style scoped>\n  .bg-gradient-color {\n    background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));\n  }\n  </style>"],"names":["searchState","searchComputed","searchActions","playerActions"],"mappings":"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"}

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

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const vueRouter = require("vue-router");
+const Loader = require("../../../../components/Loader/Loader.vue.cjs");
+;/* empty css                                         */
+;/* empty css                                             */
+;/* empty css                                        */
+const Feed = require("../../../../components/Feed/Feed.vue.cjs");
+const TrackCard = require("../cards/TrackCard.vue.cjs");
+const tracks = require("../../store/tracks.cjs");
+require("../../store/player.cjs");
+const auth = require("../../../auth/views/store/auth.cjs");
+const _hoisted_1 = { class: "track-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 = {
+  key: 0,
+  class: "track-lyrics mn-b-medium pd-medium bg-dark-transp-10 radius-medium"
+};
+const _hoisted_6 = { class: "t-grey" };
+const _hoisted_7 = {
+  key: 1,
+  class: "related-tracks mn-b-medium"
+};
+const _sfc_main = {
+  __name: "Track",
+  setup(__props) {
+    const route = vueRouter.useRoute();
+    vueRouter.useRouter();
+    const isLoading = vue.ref(true);
+    vue.ref(false);
+    vue.ref(false);
+    vue.ref(false);
+    const track = vue.computed(() => tracks.state.currentTrack);
+    const relatedTracks = vue.computed(() => tracks.state.relatedTracks);
+    vue.computed(() => {
+      var _a, _b, _c;
+      return ((_b = (_a = track.value) == null ? void 0 : _a.owner) == null ? void 0 : _b.target) === ((_c = auth.state.user) == null ? void 0 : _c._id);
+    });
+    const fetchTrackData = async () => {
+      isLoading.value = true;
+      try {
+        await tracks.actions.fetchTrackByUrl(route.params.url);
+        await tracks.actions.fetchRelatedTracks(route.params.url);
+      } catch (error) {
+        console.error("Error loading track:", error);
+      } finally {
+        isLoading.value = false;
+      }
+    };
+    vue.onMounted(fetchTrackData);
+    vue.watch(() => route.params.url, fetchTrackData);
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          vue.createVNode(Loader.default)
+        ])) : !track.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _cache[0] || (_cache[0] = [
+          vue.createElementVNode("h2", { class: "" }, "Track not found", -1),
+          vue.createElementVNode("p", { class: "t-grey t-medium" }, "The track you're looking for doesn't exist or has been removed.", -1)
+        ]))) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          track.value.lyrics ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+            _cache[1] || (_cache[1] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Lyrics", -1)),
+            vue.createElementVNode("pre", _hoisted_6, vue.toDisplayString(track.value.lyrics), 1)
+          ])) : vue.createCommentVNode("", true),
+          relatedTracks.value.length ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_7, [
+            _cache[2] || (_cache[2] = vue.createElementVNode("h2", { class: "mn-b-small" }, "Related Tracks", -1)),
+            vue.createVNode(Feed.default, {
+              store: {
+                read: () => _ctx.Promise.resolve(relatedTracks.value.value),
+                state: { isLoading: false }
+              },
+              external: true,
+              items: relatedTracks.value,
+              states: {
+                empty: {
+                  title: "No related tracks",
+                  description: "Check back later for recommendations",
+                  class: "pd-medium bg-dark-transp-10 radius-medium"
+                }
+              },
+              class: "gap-thin"
+            }, {
+              default: vue.withCtx(({ items }) => [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (relatedTrack) => {
+                  return vue.openBlock(), vue.createBlock(TrackCard.default, {
+                    key: relatedTrack._id,
+                    track: relatedTrack,
+                    showAlbum: true,
+                    showCover: true,
+                    class: "w-100 bg-dark-transp-10 radius-medium"
+                  }, null, 8, ["track"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["store", "items"])
+          ])) : vue.createCommentVNode("", true)
+        ]))
+      ]);
+    };
+  }
+};
+exports.default = _sfc_main;
+//# sourceMappingURL=Track.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Track.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Track.vue"],"sourcesContent":["<!-- components/pages/Track.vue -->\n<template>\n  <div class=\"track-page\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n\n    <!-- Not Found -->\n    <div v-else-if=\"!track\" class=\"t-center pd-big\">\n      <h2 class=\"\">Track not found</h2>\n      <p class=\"t-grey t-medium\">The track you're looking for doesn't exist or has been removed.</p>\n    </div>\n\n    <!-- Track Content -->\n    <div v-else>\n      <!-- ... [HEADER + ACTIONS as you posted] -->\n\n      <!-- Track Lyrics -->\n      <div v-if=\"track.lyrics\" class=\"track-lyrics mn-b-medium pd-medium bg-dark-transp-10 radius-medium\">\n        <h2 class=\" mn-b-small\">Lyrics</h2>\n        <pre class=\"t-grey\">{{ track.lyrics }}</pre>\n      </div>\n\n      <!-- Related Tracks -->\n      <section v-if=\"relatedTracks.length\" class=\"related-tracks mn-b-medium\">\n        <h2 class=\" mn-b-small\">Related Tracks</h2>\n        <Feed\n          :store=\"{\n            read: () => Promise.resolve(relatedTracks.value),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"relatedTracks\"\n          :states=\"{\n            empty: {\n              title: 'No related tracks',\n              description: 'Check back later for recommendations',\n              class: 'pd-medium bg-dark-transp-10 radius-medium'\n            }\n          }\"\n          class=\"gap-thin\"\n        >\n          <template #default=\"{ items }\">\n            <TrackCard\n              v-for=\"relatedTrack in items\"\n              :key=\"relatedTrack._id\"\n              :track=\"relatedTrack\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              class=\"w-100 bg-dark-transp-10 radius-medium\"\n            />\n          </template>\n        </Feed>\n      </section>\n\n      <!-- Add to Playlist Modal -->\n      <!-- <Popup \n        v-if=\"showAddToPlaylistModal\" \n        @close-popup=\"showAddToPlaylistModal = false\" \n        class=\"bg-dark pd-small w-m-25r radius-medium \"\n      >\n        <h3 class=\"mn-b-medium\">Add to Playlist</h3>\n        <PlaylistSelector \n          :trackId=\"track._id\" \n          @added=\"showAddToPlaylistModal = false\"\n        />\n      </Popup> -->\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\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 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 Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst isLoading = ref(true);\nconst showDropdown = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\n\nconst track = computed(() => tracksState.currentTrack);\nconst relatedTracks = computed(() => tracksState.relatedTracks);\n\nconst isOwner = computed(() => {\n  return track.value?.owner?.target === authState.user?._id;\n});\n\nconst getArtistName = (track) => {\n  if (!track || !track.artist) return 'Unknown';\n  return typeof track.artist === 'object' ? track.artist.name : 'Unknown';\n};\n\nconst formatReleaseYear = (date) => {\n  return date ? new Date(date).getFullYear() : 'Unknown';\n};\n\nconst playTrack = () => {\n  if (track.value) {\n    playerActions.setQueue([track.value]);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // You can implement actual saving here\n};\n\nconst addToQueue = () => {\n  if (track.value) {\n    playerActions.addToQueue(track.value);\n  }\n};\n\nconst editTrack = () => {\n  router.push({ name: 'track-edit', params: { url: track.value.url } });\n};\n\nconst deleteTrack = async () => {\n  try {\n    await tracksActions.deleteTrack(track.value._id);\n    router.push({ name: 'music-library' });\n  } catch (error) {\n    console.error('Failed to delete track:', error);\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\nconst fetchTrackData = async () => {\n  isLoading.value = true;\n  try {\n    await tracksActions.fetchTrackByUrl(route.params.url);\n    await tracksActions.fetchRelatedTracks(route.params.url);\n  } catch (error) {\n    console.error('Error loading track:', error);\n  } finally {\n    isLoading.value = false;\n  }\n};\n\nonMounted(fetchTrackData);\nwatch(() => route.params.url, fetchTrackData);\n</script>\n"],"names":["useRoute","useRouter","ref","computed","tracksState","authState","tracksActions","onMounted","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2FA,UAAM,QAAQA,UAAAA,SAAU;AACTC,cAAS,UAAA;AAExB,UAAM,YAAYC,IAAG,IAAC,IAAI;AACLA,QAAAA,IAAI,KAAK;AACCA,QAAAA,IAAI,KAAK;AACrBA,QAAAA,IAAI,KAAK;AAE5B,UAAM,QAAQC,IAAQ,SAAC,MAAMC,OAAW,MAAC,YAAY;AACrD,UAAM,gBAAgBD,IAAQ,SAAC,MAAMC,OAAW,MAAC,aAAa;AAE9CD,QAAAA,SAAS,MAAM;;AAC7B,eAAO,iBAAM,UAAN,mBAAa,UAAb,mBAAoB,cAAWE,UAAAA,MAAU,SAAVA,mBAAgB;AAAA,IACxD,CAAC;AA8CD,UAAM,iBAAiB,YAAY;AACjC,gBAAU,QAAQ;AAClB,UAAI;AACF,cAAMC,OAAa,QAAC,gBAAgB,MAAM,OAAO,GAAG;AACpD,cAAMA,OAAa,QAAC,mBAAmB,MAAM,OAAO,GAAG;AAAA,MACxD,SAAQ,OAAO;AACd,gBAAQ,MAAM,wBAAwB,KAAK;AAAA,MAC/C,UAAY;AACR,kBAAU,QAAQ;AAAA,MACtB;AAAA,IACA;AAEAC,QAAS,UAAC,cAAc;AACxBC,QAAK,MAAC,MAAM,MAAM,OAAO,KAAK,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}