@ozdao/martyrs 0.2.489 → 0.2.492

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

@@ -1 +1 @@
-{"version":3,"file":"Playlist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<!-- components/pages/Playlist.vue -->\n<template>\n  <div class=\"playlist-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=\"\">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 \">Playlist</div>\n          <h1 class=\"\">{{ 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-medium hover-t-main\"\n            >\n              {{ getPlaylistOwnerName(playlist) }}\n            </router-link>\n            <span v-else class=\" 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  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  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  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  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=\" 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  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        <Feed\n          v-else\n          :store=\"{\n            read: () => Promise.resolve(playlistTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"playlistTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in playlist',\n              description: 'Add some tracks to get started',\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      </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 \"\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-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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label for=\"description\" class=\" 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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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=\"\"\n              />\n              <Radio \n                v-model:radio=\"editForm.isPublic\"\n                :value=\"false\"\n                name=\"privacy\"\n                label=\"Private\"\n                class=\"\"\n              />\n            </div>\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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  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  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 \"\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  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  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 Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.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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"}
+{"version":3,"file":"Playlist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<!-- components/pages/Playlist.vue -->\n<template>\n  <div class=\"playlist-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=\"\">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 \">Playlist</div>\n          <h1 class=\"\">{{ 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-medium hover-t-main\"\n            >\n              {{ getPlaylistOwnerName(playlist) }}\n            </router-link>\n            <span v-else class=\" 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  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  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  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  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=\" 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  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        <Feed\n          v-else\n          :store=\"{\n            read: () => Promise.resolve(playlistTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"playlistTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in playlist',\n              description: 'Add some tracks to get started',\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      </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 \"\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-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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label for=\"description\" class=\" 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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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=\"\"\n              />\n              <Radio \n                v-model:radio=\"editForm.isPublic\"\n                :value=\"false\"\n                name=\"privacy\"\n                label=\"Private\"\n                class=\"\"\n              />\n            </div>\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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  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  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 \"\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  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  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 Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.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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"}

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

@@ -2,12 +2,12 @@ import { ref, reactive, computed, onMounted, watch, resolveComponent, createElem
 import { useRoute, useRouter } from "vue-router";
 import _sfc_main$6 from "../../../../components/Feed/Feed.vue.js";
 import TrackCard from "../cards/TrackCard.vue.js";
-import _sfc_main$1 from "../../../../components/Button/Button.vue2.js";
+import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 import Loader from "../../../../components/Loader/Loader.vue2.js";
 import Media from "../../../../components/Media/Media.vue.js";
 import _sfc_main$4 from "../../../../components/Dropdown/Dropdown.vue.js";
 import _sfc_main$7 from "../../../../components/Popup/Popup.vue.js";
-import Field from "../../../../components/Field/Field.vue.js";
+import Field from "../../../../components/Field/Field.vue2.js";
 import _sfc_main$8 from "../../../../components/Radio/Radio.vue.js";
 import _sfc_main$a from "../../../../components/UploadImage/UploadImage.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
@@ -97,23 +97,20 @@ const _sfc_main = {
     const playlist = computed(() => state.currentPlaylist);
     const playlistTracks = computed(() => state.currentPlaylistTracks);
     const isOwner = computed(() => {
-      var _a, _b, _c;
       if (!playlist.value || !state$1.user) return false;
-      return ((_b = (_a = playlist.value.owner) == null ? void 0 : _a.target) == null ? void 0 : _b._id) === state$1.user._id || ((_c = playlist.value.owner) == null ? void 0 : _c.target) === state$1.user._id;
+      return playlist.value.owner?.target?._id === state$1.user._id || playlist.value.owner?.target === state$1.user._id;
     });
     const isCollaborator = computed(() => {
-      var _a;
       if (!playlist.value || !state$1.user) return false;
-      return (_a = playlist.value.collaborators) == null ? void 0 : _a.some(
+      return playlist.value.collaborators?.some(
         (collab) => collab._id === state$1.user._id || collab === state$1.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) {
+        if (owner.profile?.name) {
           return owner.profile.name;
         }
         return owner.name || "Unknown";

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

@@ -1 +1 @@
-{"version":3,"file":"Playlist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<!-- components/pages/Playlist.vue -->\n<template>\n  <div class=\"playlist-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=\"\">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 \">Playlist</div>\n          <h1 class=\"\">{{ 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-medium hover-t-main\"\n            >\n              {{ getPlaylistOwnerName(playlist) }}\n            </router-link>\n            <span v-else class=\" 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  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  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  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  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=\" 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  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        <Feed\n          v-else\n          :store=\"{\n            read: () => Promise.resolve(playlistTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"playlistTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in playlist',\n              description: 'Add some tracks to get started',\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      </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 \"\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-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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label for=\"description\" class=\" 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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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=\"\"\n              />\n              <Radio \n                v-model:radio=\"editForm.isPublic\"\n                :value=\"false\"\n                name=\"privacy\"\n                label=\"Private\"\n                class=\"\"\n              />\n            </div>\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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  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  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 \"\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  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  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 Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.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":["playlistsState","authState","playlist","playerActions","playlistsActions"],"mappings":"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"}
+{"version":3,"file":"Playlist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<!-- components/pages/Playlist.vue -->\n<template>\n  <div class=\"playlist-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=\"\">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 \">Playlist</div>\n          <h1 class=\"\">{{ 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-medium hover-t-main\"\n            >\n              {{ getPlaylistOwnerName(playlist) }}\n            </router-link>\n            <span v-else class=\" 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  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  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  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  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=\" 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  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        <Feed\n          v-else\n          :store=\"{\n            read: () => Promise.resolve(playlistTracks),\n            state: { isLoading: false }\n          }\"\n          :external=\"true\"\n          :items=\"playlistTracks\"\n          :states=\"{\n            empty: {\n              title: 'No tracks in playlist',\n              description: 'Add some tracks to get started',\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      </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 \"\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-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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label for=\"description\" class=\" 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 \"\n            />\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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=\"\"\n              />\n              <Radio \n                v-model:radio=\"editForm.isPublic\"\n                :value=\"false\"\n                name=\"privacy\"\n                label=\"Private\"\n                class=\"\"\n              />\n            </div>\n          </div>\n          \n          <div class=\"form-group mn-b-medium\">\n            <label class=\" 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  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  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 \"\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  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  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 Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport TrackCard from '../cards/TrackCard.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":["playlistsState","authState","playlist","playerActions","playlistsActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmVA,UAAM,QAAQ,SAAQ;AACtB,UAAM,SAAS,UAAS;AAGxB,UAAM,YAAY,IAAI,IAAI;AAC1B,UAAM,aAAa,IAAI,KAAK;AAC5B,UAAM,eAAe,IAAI,KAAK;AAC9B,UAAM,gBAAgB,IAAI,KAAK;AAC/B,UAAM,kBAAkB,IAAI,KAAK;AAGjC,UAAM,mBAAmB,SAAS,EAAE;AAGpC,UAAM,WAAW,SAAS;AAAA,MACxB,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,UAAU;AAAA,IACZ,CAAC;AAGD,UAAM,WAAW,SAAS,MAAMA,MAAe,eAAe;AAC9D,UAAM,iBAAiB,SAAS,MAAMA,MAAe,qBAAqB;AAE1E,UAAM,UAAU,SAAS,MAAM;AAC7B,UAAI,CAAC,SAAS,SAAS,CAACC,QAAU,KAAM,QAAO;AAE/C,aACE,SAAS,MAAM,OAAO,QAAQ,QAAQA,QAAU,KAAK,OACrD,SAAS,MAAM,OAAO,WAAWA,QAAU,KAAK;AAAA,IAEpD,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AACpC,UAAI,CAAC,SAAS,SAAS,CAACA,QAAU,KAAM,QAAO;AAE/C,aAAO,SAAS,MAAM,eAAe;AAAA,QAAK,YACxC,OAAO,QAAQA,QAAU,KAAK,OAAO,WAAWA,QAAU,KAAK;AAAA,MACnE;AAAA,IACA,CAAC;AAGD,UAAM,uBAAuB,CAACC,cAAa;AACzC,UAAI,CAACA,aAAY,CAACA,UAAS,MAAO,QAAO;AAEzC,YAAM,QAAQA,UAAS,MAAM;AAC7B,UAAI,OAAO,UAAU,UAAU;AAC7B,YAAI,MAAM,SAAS,MAAM;AACvB,iBAAO,MAAM,QAAQ;AAAA,QACvB;AACA,eAAO,MAAM,QAAQ;AAAA,MACvB;AAEA,aAAO;AAAA,IACT;AAEA,UAAM,sBAAsB,CAAC,UAAU;AACrC,UAAI,CAAC,SAAS,CAAC,MAAM,OAAQ,QAAO,EAAE,MAAM,aAAY;AAExD,UAAI,MAAM,SAAS,QAAQ;AACzB,eAAO,EAAE,MAAM,gBAAgB,QAAQ,EAAE,KAAK,MAAM,OAAO,OAAO,MAAM,OAAM,EAAE;AAAA,MAClF,WAAW,MAAM,SAAS,gBAAgB;AACxC,eAAO,EAAE,MAAM,wBAAwB,QAAQ,EAAE,KAAK,MAAM,OAAO,OAAO,MAAM,OAAM,EAAE;AAAA,MAC1F;AAEA,aAAO,EAAE,MAAM,aAAY;AAAA,IAC7B;AAEA,UAAM,eAAe,MAAM;AACzB,UAAI,eAAe,SAAS,eAAe,MAAM,SAAS,GAAG;AAC3DC,kBAAc,SAAS,eAAe,KAAK;AAAA,MAC7C;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,aAAa,MAAM;AACvB,UAAI,eAAe,SAAS,eAAe,MAAM,SAAS,GAAG;AAE3D,uBAAe,MAAM,QAAQ,WAAS;AACpCA,oBAAc,WAAW,KAAK;AAAA,QAChC,CAAC;AAED,qBAAa,QAAQ;AAAA,MACvB;AAAA,IACF;AAEA,UAAM,eAAe,MAAM;AAEzB,eAAS,QAAQ,SAAS,MAAM;AAChC,eAAS,cAAc,SAAS,MAAM,eAAe;AACrD,eAAS,WAAW,SAAS,MAAM;AACnC,eAAS,WAAW,SAAS,MAAM,YAAY;AAE/C,oBAAc,QAAQ;AACtB,mBAAa,QAAQ;AAAA,IACvB;AAEA,UAAM,iBAAiB,YAAY;AAEjC,uBAAiB,QAAQ,CAAC,SAAS,QAAQ,EAAE,SAAS,4BAA2B,IAAK;AAGtF,UAAI,OAAO,OAAO,gBAAgB,EAAE,KAAK,WAAS,UAAU,IAAI,GAAG;AACjE;AAAA,MACF;AAEA,UAAI;AAEF,cAAM,cAAc;AAAA,UAClB,KAAK,SAAS,MAAM;AAAA,UACpB,OAAO,SAAS;AAAA,UAChB,aAAa,SAAS;AAAA,UACtB,UAAU,SAAS;AAAA,UACnB,UAAU,SAAS;AAAA,QACzB;AAEI,cAAMC,QAAiB,eAAe,WAAW;AACjD,sBAAc,QAAQ;AAAA,MACxB,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MACjD;AAAA,IACF;AAEA,UAAM,sBAAsB,YAAY;AACtC,UAAI;AAEF,cAAM,cAAc;AAAA,UAClB,KAAK,SAAS,MAAM;AAAA,UACpB,iBAAiB,CAAC,SAAS,MAAM;AAAA,QACvC;AAEI,cAAMA,QAAiB,eAAe,WAAW;AACjD,qBAAa,QAAQ;AAAA,MACvB,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MACjD;AAAA,IACF;AAEA,UAAM,iBAAiB,MAAM;AAC3B,sBAAgB,QAAQ;AACxB,mBAAa,QAAQ;AAAA,IACvB;AAEA,UAAM,gBAAgB,YAAY;AAChC,UAAI;AACF,cAAMA,QAAiB,eAAe,SAAS,MAAM,GAAG;AACxD,eAAO,KAAK,EAAE,MAAM,gBAAe,CAAE;AAAA,MACvC,SAAS,OAAO;AACd,gBAAQ,MAAM,4BAA4B,KAAK;AAAA,MACjD;AAAA,IACF;AAEA,UAAM,WAAW,MAAM;AACrB,YAAM,MAAM,OAAO,SAAS;AAC5B,gBAAU,UAAU,UAAU,GAAG,EAAE,KAAK,MAAM;AAE5C,qBAAa,QAAQ;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,UAAM,oBAAoB,YAAY;AACpC,gBAAU,QAAQ;AAElB,UAAI;AAEF,cAAMA,QAAiB,mBAAmB,MAAM,OAAO,GAAG;AAAA,MAC5D,SAAS,OAAO;AACd,gBAAQ,MAAM,iCAAiC,KAAK;AAAA,MACtD,UAAC;AACC,kBAAU,QAAQ;AAAA,MACpB;AAAA,IACF;AAGA,cAAU,iBAAiB;AAE3B,UAAM,MAAM,MAAM,OAAO,KAAK,CAAC,WAAW;AACxC,UAAI,QAAQ;AACV,0BAAiB;AAAA,MACnB;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -8,11 +8,12 @@ const TrackCard = require("../cards/TrackCard.vue.cjs");
 const AlbumCard = require("../cards/AlbumCard.vue.cjs");
 const PlaylistCard = require("../cards/PlaylistCard.vue.cjs");
 const ArtistCard = require("../cards/ArtistCard.vue.cjs");
-const Button = require("../../../../components/Button/Button.vue2.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 search = require("../../store/search.cjs");
 const player = require("../../store/player.cjs");
+;/* empty css                     */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
 const _hoisted_1 = { class: "search-results-page" };
 const _hoisted_2 = { class: "search-header mn-b-medium" };
@@ -169,11 +170,10 @@ const _sfc_main = {
       return "Unknown Artist";
     };
     const getPlaylistOwner = (playlist) => {
-      var _a, _b;
       if (!playlist) return "Unknown";
-      if ((_a = playlist.owner) == null ? void 0 : _a.target) {
+      if (playlist.owner?.target) {
         if (typeof playlist.owner.target === "object") {
-          if ((_b = playlist.owner.target.profile) == null ? void 0 : _b.name) {
+          if (playlist.owner.target.profile?.name) {
             return playlist.owner.target.profile.name;
           }
           return playlist.owner.target.name || "Unknown";

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.vue.cjs","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":["useRoute","useRouter","ref","computed","searchState","searchComputed","searchActions","playerActions","onMounted","watch"],"mappings":"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"}
+{"version":3,"file":"SearchResults.vue.cjs","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":["useRoute","useRouter","ref","computed","searchState","searchComputed","searchActions","playerActions","onMounted","watch"],"mappings":"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"}

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

@@ -6,11 +6,12 @@ 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 _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 import Loader from "../../../../components/Loader/Loader.vue2.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";
+/* empty css                   */
 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" };
@@ -167,11 +168,10 @@ const _sfc_main = {
       return "Unknown Artist";
     };
     const getPlaylistOwner = (playlist) => {
-      var _a, _b;
       if (!playlist) return "Unknown";
-      if ((_a = playlist.owner) == null ? void 0 : _a.target) {
+      if (playlist.owner?.target) {
         if (typeof playlist.owner.target === "object") {
-          if ((_b = playlist.owner.target.profile) == null ? void 0 : _b.name) {
+          if (playlist.owner.target.profile?.name) {
             return playlist.owner.target.profile.name;
           }
           return playlist.owner.target.name || "Unknown";

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

@@ -1 +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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"}
+{"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

@@ -3,7 +3,8 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const vueRouter = require("vue-router");
 const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
-;/* empty css                                         */
+;/* empty css                                          */
+;/* empty css                                        */
 ;/* empty css                                              */
 ;/* empty css                                        */
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
@@ -42,8 +43,7 @@ const _sfc_main = {
     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);
+      return track.value?.owner?.target === auth.state.user?._id;
     });
     const fetchTrackData = async () => {
       isLoading.value = true;