@ozdao/martyrs 0.2.547 → 0.2.549

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":["<template>\n  <div class=\"playlist-page pd-small\">\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n      <h2 class=\"\">Playlist not found</h2>\n      <p class=\"t-transp t-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <!-- Playlist Content -->\n    <div v-if=\"playlist\" class=\"playlist-content cols-2-fit-content mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section\">\n        <!-- Cover -->\n        <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n          <Media \n            :url=\"playlist.coverUrl || '/assets/placeholder-playlist.jpg'\"\n            :alt=\"playlist.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n        </div>\n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ playlistTracks.length }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Tracks</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(playlist.followers || 0) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Followers</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Playlist Details -->\n      <div class=\"playlist-details-section\">\n        <!-- Playlist Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n          <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Playlist\n          </span>\n          <span v-if=\"playlist.isCollaborative\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Collaborative\n          </span>\n          <span v-if=\"playlist.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Published\n          </span>\n        </div>\n\n        <!-- Playlist Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n        <!-- Action Buttons -->\n        <div class=\"flex gap-small mn-b-medium\">\n          <Button\n            @click=\"playPlaylist\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n          >\n            <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            Play All\n          </Button>\n\n          <Button\n            @click=\"shufflePlay\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1   bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconShuffle class=\"i-medium\" />\n            Shuffle\n          </Button>\n\n          <Button\n            @click=\"toggleFollow\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1  bg-light radius-thin flex-center gap-thin\"\n          >\n            {{isFollowing ? 'Follow' : 'Unfollow'}}\n          </Button>\n\n          \n          <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n            <template #trigger>\n              <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n                <IconEllipsis class=\"w-1-25r h-1-25r\" />\n              </Button>\n            </template>\n            <template #default>\n              <div class=\"dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin\">\n                <Button @click=\"addToQueue\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap justify-start\">\n                  Add to Queue\n                </Button>\n                <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                  Copy Link\n                </Button>\n                <template v-if=\"isOwner || isCollaborator\">\n                  <hr class=\"mn-v-thin border-dark-transp-10\" />\n                  <Button @click=\"editPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                    Edit Playlist\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"toggleCollaborative\" color=\"transp\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    {{ playlist.isCollaborative ? 'Make Private' : 'Make Collaborative' }}\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"deletePlaylist\" color=\"danger\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    Delete Playlist\n                  </Button>\n                </template>\n              </div>\n            </template>\n          </Dropdown>\n        </div>\n\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Created by</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              :artist=\"{\n                _id: playlist.creator.target,\n                to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n                photoUrl: null,\n                name: playlist.creator.target,\n                isVerified: false\n              }\"\n              :is-following=\"followedUsers.includes(playlist.creator.target)\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n            />\n          </div>\n        </div>\n\n        <!-- Collaborators -->\n        <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n          <h3 class=\"t-medium mn-b-small\">Collaborators</h3>\n          <div class=\"flex flex-wrap gap-small\">\n            <div \n              v-for=\"collaborator in playlist.collaborators\"\n              :key=\"collaborator._id || collaborator\"\n              class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n            >\n              <Media \n                v-if=\"collaborator.photoUrl\"\n                :url=\"collaborator.photoUrl\"\n                class=\"i-regular radius-full object-cover\"\n              />\n              <span class=\"t-small\">{{ collaborator.name || collaborator.profile?.name || 'User' }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Created Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconCalendar class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Created</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.createdAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconClock class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ totalDuration }}</div>\n            </div>\n          </div>\n\n          <!-- Updated Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconRefresh class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Updated</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.updatedAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconEye class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Tags -->\n        <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"tag in playlist.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ playlist.description }}</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Playlist Tracks -->\n    <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n      <Feed\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 t-center'\n          }\n        }\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index + 1\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              :canRemove=\"isOwner || isCollaborator\"\n              @remove=\"() => removeTrack(track._id)\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Empty State -->\n    <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n      <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n        <h3 class=\" mn-b-small\">This playlist is empty</h3>\n        <p class=\"t-transp t-medium mn-b-medium\">Add some tracks to get started</p>\n        \n        <Button \n          v-if=\"isOwner || isCollaborator\"\n          @click=\"$router.push({ name: 'music-search' })\"\n          color=\"primary\"\n          size=\"medium\"\n        >\n          Find Tracks\n        </Button>\n      </div>\n    </section>\n\n    <!-- More Playlists -->\n    <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n      <div class=\"flex justify-between items-center mn-b-medium\">\n        <h2 class=\"h2\">More Playlists</h2>\n        <router-link \n          v-if=\"playlist.creator\"\n          :to=\"getOwnerProfileLink(playlist.creator)\" \n          class=\"t-primary hover-opacity\"\n        >\n          See all\n        </router-link>\n      </div>\n      <div class=\"flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide\">\n        <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-align-start\">\n          <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r transition-cubic-in-out\" />\n        </li>\n      </div>\n    </section>\n\n    <!-- Edit Playlist Modal -->\n    <Popup \n      :isPopupOpen=\"showEditModal && (isOwner || isCollaborator)\"\n      @close-popup=\"showEditModal = false\" \n      class=\"bg-white pd-medium w-m-30r radius-medium\"\n    >\n      <PlaylistForm \n        :editMode=\"true\"\n        :url=\"playlist.url\"\n        @cancel=\"showEditModal = false\"\n        @updated=\"handlePlaylistUpdated\"\n      />\n    </Popup>\n\n    <!-- Delete Confirmation Modal -->\n    <Popup \n      :isPopupOpen=\"showDeleteModal\"\n      @close-popup=\"showDeleteModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n      <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n      \n      <div class=\"flex justify-end gap-small\">\n        <Button \n          @click=\"showDeleteModal = false\"\n          color=\"transp\"\n          size=\"medium\"\n        >\n          Cancel\n        </Button>\n        \n        <Button \n          @click=\"confirmDelete\"\n          color=\"danger\"\n          size=\"medium\"\n        >\n          Delete Playlist\n        </Button>\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\n// 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 IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFollowing = ref(false);\nconst showDropdown = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks || []);\n\nconst isOwner = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  const ownerId = playlist.value.owner?.target?._id || playlist.value.owner?.target;\n  return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  return playlist.value.collaborators?.some(collab => \n    (collab._id || collab) === authState.user._id\n  );\n});\n\nconst totalDuration = computed(() => {\n  if (!playlistTracks.value.length) return '0:00';\n  const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);\n  return formatDuration(totalSeconds);\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n  if (!playlist) return 'Unknown';\n  \n  const owner = getOwnerData(playlist);\n  if (owner) {\n    return owner.profile?.name || owner.name || 'Unknown';\n  }\n  \n  return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n  if (!owner || !owner.target) return { name: 'music-home' };\n  \n  const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n  \n if (owner.type === 'user' || owner.type === 'User') {\n    return { name: 'User Profile', params: { _id: targetId } };\n  } else if (owner.type === 'organization' || owner.type === 'Organization') {\n    return { name: 'Organizatio', params: { _id: targetId } };\n  }\n  \n  return { name: 'music-home' };\n};\n\n// Format helpers\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playPlaylist = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playerActions.setQueue(playlistTracks.value);\n  }\n};\n\nconst shufflePlay = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n    playerActions.setQueue(shuffled);\n  }\n};\n\nconst toggleFollow = async () => {\n  isFollowing.value = !isFollowing.value;\n  // TODO: Implement actual following\n  try {\n    if (isFollowing.value) {\n      await playlistsActions.followPlaylist(playlist.value._id);\n    } else {\n      await playlistsActions.unfollowPlaylist(playlist.value._id);\n    }\n  } catch (error) {\n    console.error('Error toggling follow:', error);\n    isFollowing.value = !isFollowing.value; // Revert on error\n  }\n};\n\nconst toggleFollowUser = (userId) => {\n  const index = followedUsers.value.indexOf(userId);\n  if (index > -1) {\n    followedUsers.value.splice(index, 1);\n  } else {\n    followedUsers.value.push(userId);\n  }\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playlistTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    showDropdown.value = false;\n  }\n};\n\nconst editPlaylist = () => {\n  showEditModal.value = true;\n  showDropdown.value = false;\n};\n\nconst toggleCollaborative = async () => {\n  try {\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    globals.actions.setError({\n      message: 'Failed to delete playlist'\n    });\n  }\n};\n\nconst removeTrack = async (trackId) => {\n  try {\n    await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n    // Refresh playlist data\n    await fetchPlaylistData();\n  } catch (error) {\n    console.error('Error removing track:', error);\n    globals.actions.setError({\n      message: 'Failed to remove track'\n    });\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\nconst handlePlaylistUpdated = () => {\n  showEditModal.value = false;\n  fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n  try {\n    await playlistsActions.fetchPlaylistByUrl(route.params.url);\n    \n    // Check if following\n    if (authState.user && playlist.value) {\n      // TODO: Check if user is following this playlist\n    }\n    \n    // Fetch more playlists from the same creator\n    if (playlist.value?.creator?.target) {\n      const creatorId = typeof playlist.value.creator.target === 'object' \n        ? playlist.value.creator.target._id \n        : playlist.value.creator.target;\n        \n      const playlists = await playlistsActions.fetchPlaylists({\n        'creator.target': creatorId,\n        isPublic: true,\n        limit: 6\n      });\n      \n      // Filter out current playlist\n      morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n    }\n  } catch (error) {\n    console.error('Error fetching playlist data:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchPlaylistData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["useRoute","useRouter","ref","playlistsState","computed","authState","playerActions","playlistsActions","globals.actions","playlists","onMounted"],"mappings":"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"}
+{"version":3,"file":"Playlist.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<template>\n  <div class=\"playlist-page pd-small\">\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n      <h2 class=\"\">Playlist not found</h2>\n      <p class=\"t-transp t-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <!-- Playlist Content -->\n    <div v-if=\"playlist\" class=\"playlist-content cols-2-fit-content mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section\">\n        <!-- Cover -->\n        <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n          <Media \n            :url=\"playlist.coverUrl || '/assets/placeholder-playlist.jpg'\"\n            :alt=\"playlist.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n        </div>\n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ playlistTracks.length }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Tracks</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(playlist.followers || 0) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Followers</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Playlist Details -->\n      <div class=\"playlist-details-section\">\n        <!-- Playlist Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n          <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Playlist\n          </span>\n          <span v-if=\"playlist.isCollaborative\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Collaborative\n          </span>\n          <span v-if=\"playlist.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Published\n          </span>\n        </div>\n\n        <!-- Playlist Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n        <!-- Action Buttons -->\n        <div class=\"flex gap-small mn-b-medium\">\n          <Button\n            @click=\"playPlaylist\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n          >\n            <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            Play All\n          </Button>\n\n          <Button\n            @click=\"shufflePlay\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1   bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconShuffle class=\"i-medium\" />\n            Shuffle\n          </Button>\n\n          <Button\n            @click=\"toggleFollow\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1  bg-light radius-thin flex-center gap-thin\"\n          >\n            {{isFollowing ? 'Follow' : 'Unfollow'}}\n          </Button>\n\n          \n          <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n            <template #trigger>\n              <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n                <IconEllipsis class=\"w-1-25r h-1-25r\" />\n              </Button>\n            </template>\n            <template #default>\n              <div class=\"dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin\">\n                <Button @click=\"addToQueue\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap justify-start\">\n                  Add to Queue\n                </Button>\n                <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                  Copy Link\n                </Button>\n                <template v-if=\"isOwner || isCollaborator\">\n                  <hr class=\"mn-v-thin border-dark-transp-10\" />\n                  <Button @click=\"editPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                    Edit Playlist\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"toggleCollaborative\" color=\"transp\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    {{ playlist.isCollaborative ? 'Make Private' : 'Make Collaborative' }}\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"deletePlaylist\" color=\"danger\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    Delete Playlist\n                  </Button>\n                </template>\n              </div>\n            </template>\n          </Dropdown>\n        </div>\n\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Created by</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              :artist=\"{\n                _id: playlist.creator.target,\n                to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n                photoUrl: null,\n                name: playlist.creator.target,\n                isVerified: false\n              }\"\n              :is-following=\"followedUsers.includes(playlist.creator.target)\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n            />\n          </div>\n        </div>\n\n        <!-- Collaborators -->\n        <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n          <h3 class=\"t-medium mn-b-small\">Collaborators</h3>\n          <div class=\"flex flex-wrap gap-small\">\n            <div \n              v-for=\"collaborator in playlist.collaborators\"\n              :key=\"collaborator._id || collaborator\"\n              class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n            >\n              <Media \n                v-if=\"collaborator.photoUrl\"\n                :url=\"collaborator.photoUrl\"\n                class=\"i-medium radius-full object-cover\"\n              />\n              <span class=\"t-small\">{{ collaborator.name || collaborator.profile?.name || 'User' }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Created Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconCalendar class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Created</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.createdAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconClock class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ totalDuration }}</div>\n            </div>\n          </div>\n\n          <!-- Updated Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconRefresh class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Updated</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.updatedAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconEye class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Tags -->\n        <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"tag in playlist.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ playlist.description }}</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Playlist Tracks -->\n    <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n      <Feed\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 t-center'\n          }\n        }\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index + 1\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              :canRemove=\"isOwner || isCollaborator\"\n              @remove=\"() => removeTrack(track._id)\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Empty State -->\n    <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n      <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n        <h3 class=\" mn-b-small\">This playlist is empty</h3>\n        <p class=\"t-transp t-medium mn-b-medium\">Add some tracks to get started</p>\n        \n        <Button \n          v-if=\"isOwner || isCollaborator\"\n          @click=\"$router.push({ name: 'music-search' })\"\n          color=\"primary\"\n          size=\"medium\"\n        >\n          Find Tracks\n        </Button>\n      </div>\n    </section>\n\n    <!-- More Playlists -->\n    <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n      <div class=\"flex justify-between items-center mn-b-medium\">\n        <h2 class=\"h2\">More Playlists</h2>\n        <router-link \n          v-if=\"playlist.creator\"\n          :to=\"getOwnerProfileLink(playlist.creator)\" \n          class=\"t-primary hover-opacity\"\n        >\n          See all\n        </router-link>\n      </div>\n      <div class=\"flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide\">\n        <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-align-start\">\n          <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r transition-cubic-in-out\" />\n        </li>\n      </div>\n    </section>\n\n    <!-- Edit Playlist Modal -->\n    <Popup \n      :isPopupOpen=\"showEditModal && (isOwner || isCollaborator)\"\n      @close-popup=\"showEditModal = false\" \n      class=\"bg-white pd-medium w-m-30r radius-medium\"\n    >\n      <PlaylistForm \n        :editMode=\"true\"\n        :url=\"playlist.url\"\n        @cancel=\"showEditModal = false\"\n        @updated=\"handlePlaylistUpdated\"\n      />\n    </Popup>\n\n    <!-- Delete Confirmation Modal -->\n    <Popup \n      :isPopupOpen=\"showDeleteModal\"\n      @close-popup=\"showDeleteModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n      <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n      \n      <div class=\"flex justify-end gap-small\">\n        <Button \n          @click=\"showDeleteModal = false\"\n          color=\"transp\"\n          size=\"medium\"\n        >\n          Cancel\n        </Button>\n        \n        <Button \n          @click=\"confirmDelete\"\n          color=\"danger\"\n          size=\"medium\"\n        >\n          Delete Playlist\n        </Button>\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\n// 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 IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFollowing = ref(false);\nconst showDropdown = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks || []);\n\nconst isOwner = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  const ownerId = playlist.value.owner?.target?._id || playlist.value.owner?.target;\n  return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  return playlist.value.collaborators?.some(collab => \n    (collab._id || collab) === authState.user._id\n  );\n});\n\nconst totalDuration = computed(() => {\n  if (!playlistTracks.value.length) return '0:00';\n  const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);\n  return formatDuration(totalSeconds);\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n  if (!playlist) return 'Unknown';\n  \n  const owner = getOwnerData(playlist);\n  if (owner) {\n    return owner.profile?.name || owner.name || 'Unknown';\n  }\n  \n  return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n  if (!owner || !owner.target) return { name: 'music-home' };\n  \n  const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n  \n if (owner.type === 'user' || owner.type === 'User') {\n    return { name: 'User Profile', params: { _id: targetId } };\n  } else if (owner.type === 'organization' || owner.type === 'Organization') {\n    return { name: 'Organizatio', params: { _id: targetId } };\n  }\n  \n  return { name: 'music-home' };\n};\n\n// Format helpers\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playPlaylist = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playerActions.setQueue(playlistTracks.value);\n  }\n};\n\nconst shufflePlay = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n    playerActions.setQueue(shuffled);\n  }\n};\n\nconst toggleFollow = async () => {\n  isFollowing.value = !isFollowing.value;\n  // TODO: Implement actual following\n  try {\n    if (isFollowing.value) {\n      await playlistsActions.followPlaylist(playlist.value._id);\n    } else {\n      await playlistsActions.unfollowPlaylist(playlist.value._id);\n    }\n  } catch (error) {\n    console.error('Error toggling follow:', error);\n    isFollowing.value = !isFollowing.value; // Revert on error\n  }\n};\n\nconst toggleFollowUser = (userId) => {\n  const index = followedUsers.value.indexOf(userId);\n  if (index > -1) {\n    followedUsers.value.splice(index, 1);\n  } else {\n    followedUsers.value.push(userId);\n  }\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playlistTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    showDropdown.value = false;\n  }\n};\n\nconst editPlaylist = () => {\n  showEditModal.value = true;\n  showDropdown.value = false;\n};\n\nconst toggleCollaborative = async () => {\n  try {\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    globals.actions.setError({\n      message: 'Failed to delete playlist'\n    });\n  }\n};\n\nconst removeTrack = async (trackId) => {\n  try {\n    await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n    // Refresh playlist data\n    await fetchPlaylistData();\n  } catch (error) {\n    console.error('Error removing track:', error);\n    globals.actions.setError({\n      message: 'Failed to remove track'\n    });\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\nconst handlePlaylistUpdated = () => {\n  showEditModal.value = false;\n  fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n  try {\n    await playlistsActions.fetchPlaylistByUrl(route.params.url);\n    \n    // Check if following\n    if (authState.user && playlist.value) {\n      // TODO: Check if user is following this playlist\n    }\n    \n    // Fetch more playlists from the same creator\n    if (playlist.value?.creator?.target) {\n      const creatorId = typeof playlist.value.creator.target === 'object' \n        ? playlist.value.creator.target._id \n        : playlist.value.creator.target;\n        \n      const playlists = await playlistsActions.fetchPlaylists({\n        'creator.target': creatorId,\n        isPublic: true,\n        limit: 6\n      });\n      \n      // Filter out current playlist\n      morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n    }\n  } catch (error) {\n    console.error('Error fetching playlist data:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchPlaylistData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["useRoute","useRouter","ref","playlistsState","computed","authState","playerActions","playlistsActions","globals.actions","playlists","onMounted"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from "vue-router";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 /* empty css                                       */
 import Media from "../../../../components/Media/Media.vue.js";
-import _sfc_main$4 from "../../../../components/Dropdown/Dropdown.vue2.js";
+import _sfc_main$4 from "../../../../components/Dropdown/Dropdown.vue.js";
 import _sfc_main$9 from "../../../../components/Feed/Feed.vue.js";
 import _sfc_main$b from "../../../../components/Popup/Popup.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconPlay.vue.js";
@@ -59,13 +59,13 @@ const _hoisted_20 = {
 const _hoisted_21 = { class: "flex flex-wrap gap-small" };
 const _hoisted_22 = { class: "t-small" };
 const _hoisted_23 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
-const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_24 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_25 = { class: "t-medium" };
-const _hoisted_26 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_26 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_27 = { class: "t-medium" };
-const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_28 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_29 = { class: "t-medium" };
-const _hoisted_30 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_30 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_31 = { class: "t-medium" };
 const _hoisted_32 = {
   key: 1,
@@ -466,7 +466,7 @@ const _sfc_main = {
                     collaborator.photoUrl ? (openBlock(), createBlock(Media, {
                       key: 0,
                       url: collaborator.photoUrl,
-                      class: "i-regular radius-full object-cover"
+                      class: "i-medium radius-full object-cover"
                     }, null, 8, ["url"])) : createCommentVNode("", true),
                     createElementVNode("span", _hoisted_22, toDisplayString(collaborator.name || collaborator.profile?.name || "User"), 1)
                   ]);

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":["<template>\n  <div class=\"playlist-page pd-small\">\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n      <h2 class=\"\">Playlist not found</h2>\n      <p class=\"t-transp t-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <!-- Playlist Content -->\n    <div v-if=\"playlist\" class=\"playlist-content cols-2-fit-content mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section\">\n        <!-- Cover -->\n        <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n          <Media \n            :url=\"playlist.coverUrl || '/assets/placeholder-playlist.jpg'\"\n            :alt=\"playlist.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n        </div>\n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ playlistTracks.length }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Tracks</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(playlist.followers || 0) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Followers</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Playlist Details -->\n      <div class=\"playlist-details-section\">\n        <!-- Playlist Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n          <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Playlist\n          </span>\n          <span v-if=\"playlist.isCollaborative\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Collaborative\n          </span>\n          <span v-if=\"playlist.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Published\n          </span>\n        </div>\n\n        <!-- Playlist Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n        <!-- Action Buttons -->\n        <div class=\"flex gap-small mn-b-medium\">\n          <Button\n            @click=\"playPlaylist\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n          >\n            <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            Play All\n          </Button>\n\n          <Button\n            @click=\"shufflePlay\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1   bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconShuffle class=\"i-medium\" />\n            Shuffle\n          </Button>\n\n          <Button\n            @click=\"toggleFollow\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1  bg-light radius-thin flex-center gap-thin\"\n          >\n            {{isFollowing ? 'Follow' : 'Unfollow'}}\n          </Button>\n\n          \n          <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n            <template #trigger>\n              <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n                <IconEllipsis class=\"w-1-25r h-1-25r\" />\n              </Button>\n            </template>\n            <template #default>\n              <div class=\"dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin\">\n                <Button @click=\"addToQueue\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap justify-start\">\n                  Add to Queue\n                </Button>\n                <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                  Copy Link\n                </Button>\n                <template v-if=\"isOwner || isCollaborator\">\n                  <hr class=\"mn-v-thin border-dark-transp-10\" />\n                  <Button @click=\"editPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                    Edit Playlist\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"toggleCollaborative\" color=\"transp\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    {{ playlist.isCollaborative ? 'Make Private' : 'Make Collaborative' }}\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"deletePlaylist\" color=\"danger\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    Delete Playlist\n                  </Button>\n                </template>\n              </div>\n            </template>\n          </Dropdown>\n        </div>\n\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Created by</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              :artist=\"{\n                _id: playlist.creator.target,\n                to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n                photoUrl: null,\n                name: playlist.creator.target,\n                isVerified: false\n              }\"\n              :is-following=\"followedUsers.includes(playlist.creator.target)\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n            />\n          </div>\n        </div>\n\n        <!-- Collaborators -->\n        <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n          <h3 class=\"t-medium mn-b-small\">Collaborators</h3>\n          <div class=\"flex flex-wrap gap-small\">\n            <div \n              v-for=\"collaborator in playlist.collaborators\"\n              :key=\"collaborator._id || collaborator\"\n              class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n            >\n              <Media \n                v-if=\"collaborator.photoUrl\"\n                :url=\"collaborator.photoUrl\"\n                class=\"i-regular radius-full object-cover\"\n              />\n              <span class=\"t-small\">{{ collaborator.name || collaborator.profile?.name || 'User' }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Created Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconCalendar class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Created</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.createdAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconClock class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ totalDuration }}</div>\n            </div>\n          </div>\n\n          <!-- Updated Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconRefresh class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Updated</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.updatedAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n              <IconEye class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Tags -->\n        <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"tag in playlist.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ playlist.description }}</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Playlist Tracks -->\n    <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n      <Feed\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 t-center'\n          }\n        }\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index + 1\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              :canRemove=\"isOwner || isCollaborator\"\n              @remove=\"() => removeTrack(track._id)\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Empty State -->\n    <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n      <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n        <h3 class=\" mn-b-small\">This playlist is empty</h3>\n        <p class=\"t-transp t-medium mn-b-medium\">Add some tracks to get started</p>\n        \n        <Button \n          v-if=\"isOwner || isCollaborator\"\n          @click=\"$router.push({ name: 'music-search' })\"\n          color=\"primary\"\n          size=\"medium\"\n        >\n          Find Tracks\n        </Button>\n      </div>\n    </section>\n\n    <!-- More Playlists -->\n    <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n      <div class=\"flex justify-between items-center mn-b-medium\">\n        <h2 class=\"h2\">More Playlists</h2>\n        <router-link \n          v-if=\"playlist.creator\"\n          :to=\"getOwnerProfileLink(playlist.creator)\" \n          class=\"t-primary hover-opacity\"\n        >\n          See all\n        </router-link>\n      </div>\n      <div class=\"flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide\">\n        <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-align-start\">\n          <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r transition-cubic-in-out\" />\n        </li>\n      </div>\n    </section>\n\n    <!-- Edit Playlist Modal -->\n    <Popup \n      :isPopupOpen=\"showEditModal && (isOwner || isCollaborator)\"\n      @close-popup=\"showEditModal = false\" \n      class=\"bg-white pd-medium w-m-30r radius-medium\"\n    >\n      <PlaylistForm \n        :editMode=\"true\"\n        :url=\"playlist.url\"\n        @cancel=\"showEditModal = false\"\n        @updated=\"handlePlaylistUpdated\"\n      />\n    </Popup>\n\n    <!-- Delete Confirmation Modal -->\n    <Popup \n      :isPopupOpen=\"showDeleteModal\"\n      @close-popup=\"showDeleteModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n      <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n      \n      <div class=\"flex justify-end gap-small\">\n        <Button \n          @click=\"showDeleteModal = false\"\n          color=\"transp\"\n          size=\"medium\"\n        >\n          Cancel\n        </Button>\n        \n        <Button \n          @click=\"confirmDelete\"\n          color=\"danger\"\n          size=\"medium\"\n        >\n          Delete Playlist\n        </Button>\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\n// 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 IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFollowing = ref(false);\nconst showDropdown = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks || []);\n\nconst isOwner = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  const ownerId = playlist.value.owner?.target?._id || playlist.value.owner?.target;\n  return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  return playlist.value.collaborators?.some(collab => \n    (collab._id || collab) === authState.user._id\n  );\n});\n\nconst totalDuration = computed(() => {\n  if (!playlistTracks.value.length) return '0:00';\n  const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);\n  return formatDuration(totalSeconds);\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n  if (!playlist) return 'Unknown';\n  \n  const owner = getOwnerData(playlist);\n  if (owner) {\n    return owner.profile?.name || owner.name || 'Unknown';\n  }\n  \n  return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n  if (!owner || !owner.target) return { name: 'music-home' };\n  \n  const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n  \n if (owner.type === 'user' || owner.type === 'User') {\n    return { name: 'User Profile', params: { _id: targetId } };\n  } else if (owner.type === 'organization' || owner.type === 'Organization') {\n    return { name: 'Organizatio', params: { _id: targetId } };\n  }\n  \n  return { name: 'music-home' };\n};\n\n// Format helpers\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playPlaylist = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playerActions.setQueue(playlistTracks.value);\n  }\n};\n\nconst shufflePlay = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n    playerActions.setQueue(shuffled);\n  }\n};\n\nconst toggleFollow = async () => {\n  isFollowing.value = !isFollowing.value;\n  // TODO: Implement actual following\n  try {\n    if (isFollowing.value) {\n      await playlistsActions.followPlaylist(playlist.value._id);\n    } else {\n      await playlistsActions.unfollowPlaylist(playlist.value._id);\n    }\n  } catch (error) {\n    console.error('Error toggling follow:', error);\n    isFollowing.value = !isFollowing.value; // Revert on error\n  }\n};\n\nconst toggleFollowUser = (userId) => {\n  const index = followedUsers.value.indexOf(userId);\n  if (index > -1) {\n    followedUsers.value.splice(index, 1);\n  } else {\n    followedUsers.value.push(userId);\n  }\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playlistTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    showDropdown.value = false;\n  }\n};\n\nconst editPlaylist = () => {\n  showEditModal.value = true;\n  showDropdown.value = false;\n};\n\nconst toggleCollaborative = async () => {\n  try {\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    globals.actions.setError({\n      message: 'Failed to delete playlist'\n    });\n  }\n};\n\nconst removeTrack = async (trackId) => {\n  try {\n    await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n    // Refresh playlist data\n    await fetchPlaylistData();\n  } catch (error) {\n    console.error('Error removing track:', error);\n    globals.actions.setError({\n      message: 'Failed to remove track'\n    });\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\nconst handlePlaylistUpdated = () => {\n  showEditModal.value = false;\n  fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n  try {\n    await playlistsActions.fetchPlaylistByUrl(route.params.url);\n    \n    // Check if following\n    if (authState.user && playlist.value) {\n      // TODO: Check if user is following this playlist\n    }\n    \n    // Fetch more playlists from the same creator\n    if (playlist.value?.creator?.target) {\n      const creatorId = typeof playlist.value.creator.target === 'object' \n        ? playlist.value.creator.target._id \n        : playlist.value.creator.target;\n        \n      const playlists = await playlistsActions.fetchPlaylists({\n        'creator.target': creatorId,\n        isPublic: true,\n        limit: 6\n      });\n      \n      // Filter out current playlist\n      morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n    }\n  } catch (error) {\n    console.error('Error fetching playlist data:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchPlaylistData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["playlistsState","authState","playerActions","playlistsActions","globals.actions"],"mappings":"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"}
+{"version":3,"file":"Playlist.vue.js","sources":["../../../../../../../src/modules/music/components/pages/Playlist.vue"],"sourcesContent":["<template>\n  <div class=\"playlist-page pd-small\">\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !playlist\" class=\"t-center pd-big\">\n      <h2 class=\"\">Playlist not found</h2>\n      <p class=\"t-transp t-medium\">The playlist you're looking for doesn't exist or has been removed.</p>\n    </div>\n    \n    <!-- Playlist Content -->\n    <div v-if=\"playlist\" class=\"playlist-content cols-2-fit-content mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky w-max-30r pos-t-0 mobile:pos-relative playlist-cover-section\">\n        <!-- Cover -->\n        <div class=\"cover-container relative mn-b-medium radius-big overflow-hidden shadow-big\">\n          <Media \n            :url=\"playlist.coverUrl || '/assets/placeholder-playlist.jpg'\"\n            :alt=\"playlist.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n        </div>\n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ playlistTracks.length }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Tracks</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(playlist.followers || 0) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Followers</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Playlist Details -->\n      <div class=\"playlist-details-section\">\n        <!-- Playlist Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n          <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Playlist\n          </span>\n          <span v-if=\"playlist.isCollaborative\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Collaborative\n          </span>\n          <span v-if=\"playlist.status === 'published'\" class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">\n            Published\n          </span>\n        </div>\n\n        <!-- Playlist Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ playlist.title }}</h1>\n\n        <!-- Action Buttons -->\n        <div class=\"flex gap-small mn-b-medium\">\n          <Button\n            @click=\"playPlaylist\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n          >\n            <IconPlay fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            Play All\n          </Button>\n\n          <Button\n            @click=\"shufflePlay\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1   bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconShuffle class=\"i-medium\" />\n            Shuffle\n          </Button>\n\n          <Button\n            @click=\"toggleFollow\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1  bg-light radius-thin flex-center gap-thin\"\n          >\n            {{isFollowing ? 'Follow' : 'Unfollow'}}\n          </Button>\n\n          \n          <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n            <template #trigger>\n              <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n                <IconEllipsis class=\"w-1-25r h-1-25r\" />\n              </Button>\n            </template>\n            <template #default>\n              <div class=\"dropdown-menu bg-white pd-small radius-medium shadow-big mn-t-thin\">\n                <Button @click=\"addToQueue\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap justify-start\">\n                  Add to Queue\n                </Button>\n                <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                  Copy Link\n                </Button>\n                <template v-if=\"isOwner || isCollaborator\">\n                  <hr class=\"mn-v-thin border-dark-transp-10\" />\n                  <Button @click=\"editPlaylist\" color=\"transp\" size=\"small\" class=\"w-100 t-nowrap  justify-start\">\n                    Edit Playlist\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"toggleCollaborative\" color=\"transp\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    {{ playlist.isCollaborative ? 'Make Private' : 'Make Collaborative' }}\n                  </Button>\n                  <Button v-if=\"isOwner\" @click=\"deletePlaylist\" color=\"danger\" size=\"small\" class=\"t-nowrap  w-100 justify-start\">\n                    Delete Playlist\n                  </Button>\n                </template>\n              </div>\n            </template>\n          </Dropdown>\n        </div>\n\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Created by</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              :artist=\"{\n                _id: playlist.creator.target,\n                to: { name: 'User Profile', params: { _id: playlist.creator.target } },\n                photoUrl: null,\n                name: playlist.creator.target,\n                isVerified: false\n              }\"\n              :is-following=\"followedUsers.includes(playlist.creator.target)\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowUser(playlist.creator.target)\"\n            />\n          </div>\n        </div>\n\n        <!-- Collaborators -->\n        <div v-if=\"playlist.collaborators && playlist.collaborators.length > 0\" class=\"collaborators-section mn-b-big\">\n          <h3 class=\"t-medium mn-b-small\">Collaborators</h3>\n          <div class=\"flex flex-wrap gap-small\">\n            <div \n              v-for=\"collaborator in playlist.collaborators\"\n              :key=\"collaborator._id || collaborator\"\n              class=\"collaborator-chip bg-light pd-thin-big radius-full flex items-center gap-thin\"\n            >\n              <Media \n                v-if=\"collaborator.photoUrl\"\n                :url=\"collaborator.photoUrl\"\n                class=\"i-medium radius-full object-cover\"\n              />\n              <span class=\"t-small\">{{ collaborator.name || collaborator.profile?.name || 'User' }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Created Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconCalendar class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Created</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.createdAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconClock class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ totalDuration }}</div>\n            </div>\n          </div>\n\n          <!-- Updated Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconRefresh class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Updated</div>\n              <div class=\"t-medium \">{{ formatDate(playlist.updatedAt) }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n              <IconEye class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Tags -->\n        <div v-if=\"playlist.tags && playlist.tags.length\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"tag in playlist.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"playlist.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ playlist.description }}</p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Playlist Tracks -->\n    <section v-if=\"!isLoading && playlist && playlistTracks.length\" class=\"tracks-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Tracklist</h2>\n      <Feed\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 t-center'\n          }\n        }\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(track, index) in items\"\n              :key=\"track._id\"\n              :track=\"track\"\n              :index=\"index + 1\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n              :canRemove=\"isOwner || isCollaborator\"\n              @remove=\"() => removeTrack(track._id)\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Empty State -->\n    <section v-else-if=\"!isLoading && playlist && !playlistTracks.length\" class=\"empty-section mn-t-big\">\n      <div class=\"empty-tracks t-center pd-big bg-light radius-medium\">\n        <h3 class=\" mn-b-small\">This playlist is empty</h3>\n        <p class=\"t-transp t-medium mn-b-medium\">Add some tracks to get started</p>\n        \n        <Button \n          v-if=\"isOwner || isCollaborator\"\n          @click=\"$router.push({ name: 'music-search' })\"\n          color=\"primary\"\n          size=\"medium\"\n        >\n          Find Tracks\n        </Button>\n      </div>\n    </section>\n\n    <!-- More Playlists -->\n    <section v-if=\"!isLoading && playlist && morePlaylists.length\" class=\"more-playlists-section mn-t-big\">\n      <div class=\"flex justify-between items-center mn-b-medium\">\n        <h2 class=\"h2\">More Playlists</h2>\n        <router-link \n          v-if=\"playlist.creator\"\n          :to=\"getOwnerProfileLink(playlist.creator)\" \n          class=\"t-primary hover-opacity\"\n        >\n          See all\n        </router-link>\n      </div>\n      <div class=\"flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide\">\n        <li v-for=\"relatedPlaylist in morePlaylists\" :key=\"relatedPlaylist._id\" class=\"flex-none scroll-snap-align-start\">\n          <PlaylistCard :playlist=\"relatedPlaylist\" class=\"w-min-15r transition-cubic-in-out\" />\n        </li>\n      </div>\n    </section>\n\n    <!-- Edit Playlist Modal -->\n    <Popup \n      :isPopupOpen=\"showEditModal && (isOwner || isCollaborator)\"\n      @close-popup=\"showEditModal = false\" \n      class=\"bg-white pd-medium w-m-30r radius-medium\"\n    >\n      <PlaylistForm \n        :editMode=\"true\"\n        :url=\"playlist.url\"\n        @cancel=\"showEditModal = false\"\n        @updated=\"handlePlaylistUpdated\"\n      />\n    </Popup>\n\n    <!-- Delete Confirmation Modal -->\n    <Popup \n      :isPopupOpen=\"showDeleteModal\"\n      @close-popup=\"showDeleteModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"mn-b-medium\">Delete Playlist</h3>\n      <p class=\"t-transp mn-b-medium\">Are you sure you want to delete \"{{ playlist.title }}\"? This action cannot be undone.</p>\n      \n      <div class=\"flex justify-end gap-small\">\n        <Button \n          @click=\"showDeleteModal = false\"\n          color=\"transp\"\n          size=\"medium\"\n        >\n          Cancel\n        </Button>\n        \n        <Button \n          @click=\"confirmDelete\"\n          color=\"danger\"\n          size=\"medium\"\n        >\n          Delete Playlist\n        </Button>\n      </div>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\n\n// 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 IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconRefresh from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport PlaylistCard from '../cards/PlaylistCard.vue';\nimport PlaylistForm from '../forms/PlaylistForm.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n\n// Store\nimport { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\nimport * as globals from '@martyrs/src/modules/globals/views/store/globals.js';\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst isFollowing = ref(false);\nconst showDropdown = ref(false);\nconst showEditModal = ref(false);\nconst showDeleteModal = ref(false);\nconst followedUsers = ref([]);\nconst morePlaylists = ref([]);\n\n// Clear state\nplaylistsState.currentPlaylist = null;\nplaylistsState.currentPlaylistTracks = [];\n\n// Computed\nconst playlist = computed(() => playlistsState.currentPlaylist);\nconst playlistTracks = computed(() => playlistsState.currentPlaylistTracks || []);\n\nconst isOwner = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  const ownerId = playlist.value.owner?.target?._id || playlist.value.owner?.target;\n  return ownerId === authState.user._id;\n});\n\nconst isCollaborator = computed(() => {\n  if (!playlist.value || !authState.user) return false;\n  \n  return playlist.value.collaborators?.some(collab => \n    (collab._id || collab) === authState.user._id\n  );\n});\n\nconst totalDuration = computed(() => {\n  if (!playlistTracks.value.length) return '0:00';\n  const totalSeconds = playlistTracks.value.reduce((sum, track) => sum + (track.duration || 0), 0);\n  return formatDuration(totalSeconds);\n});\n\n// Helper functions\nconst getOwnerData = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner : null;\n};\n\nconst getOwnerId = (playlist) => {\n  if (!playlist) return null;\n  const owner = playlist.creator?.target || playlist.owner?.target;\n  return typeof owner === 'object' ? owner._id : owner;\n};\n\nconst getPlaylistOwnerName = (playlist) => {\n  if (!playlist) return 'Unknown';\n  \n  const owner = getOwnerData(playlist);\n  if (owner) {\n    return owner.profile?.name || owner.name || 'Unknown';\n  }\n  \n  return 'Unknown';\n};\n\nconst getOwnerProfileLink = (owner) => {\n  if (!owner || !owner.target) return { name: 'music-home' };\n  \n  const targetId = typeof owner.target === 'object' ? owner.target._id : owner.target;\n  \n if (owner.type === 'user' || owner.type === 'User') {\n    return { name: 'User Profile', params: { _id: targetId } };\n  } else if (owner.type === 'organization' || owner.type === 'Organization') {\n    return { name: 'Organizatio', params: { _id: targetId } };\n  }\n  \n  return { name: 'music-home' };\n};\n\n// Format helpers\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playPlaylist = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playerActions.setQueue(playlistTracks.value);\n  }\n};\n\nconst shufflePlay = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    const shuffled = [...playlistTracks.value].sort(() => Math.random() - 0.5);\n    playerActions.setQueue(shuffled);\n  }\n};\n\nconst toggleFollow = async () => {\n  isFollowing.value = !isFollowing.value;\n  // TODO: Implement actual following\n  try {\n    if (isFollowing.value) {\n      await playlistsActions.followPlaylist(playlist.value._id);\n    } else {\n      await playlistsActions.unfollowPlaylist(playlist.value._id);\n    }\n  } catch (error) {\n    console.error('Error toggling follow:', error);\n    isFollowing.value = !isFollowing.value; // Revert on error\n  }\n};\n\nconst toggleFollowUser = (userId) => {\n  const index = followedUsers.value.indexOf(userId);\n  if (index > -1) {\n    followedUsers.value.splice(index, 1);\n  } else {\n    followedUsers.value.push(userId);\n  }\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (playlistTracks.value && playlistTracks.value.length > 0) {\n    playlistTracks.value.forEach(track => {\n      playerActions.addToQueue(track);\n    });\n    showDropdown.value = false;\n  }\n};\n\nconst editPlaylist = () => {\n  showEditModal.value = true;\n  showDropdown.value = false;\n};\n\nconst toggleCollaborative = async () => {\n  try {\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    globals.actions.setError({\n      message: 'Failed to delete playlist'\n    });\n  }\n};\n\nconst removeTrack = async (trackId) => {\n  try {\n    await playlistsActions.removeTrackFromPlaylist(playlist.value._id, trackId);\n    // Refresh playlist data\n    await fetchPlaylistData();\n  } catch (error) {\n    console.error('Error removing track:', error);\n    globals.actions.setError({\n      message: 'Failed to remove track'\n    });\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\nconst handlePlaylistUpdated = () => {\n  showEditModal.value = false;\n  fetchPlaylistData();\n};\n\n// Data fetching\nconst fetchPlaylistData = async () => {\n  try {\n    await playlistsActions.fetchPlaylistByUrl(route.params.url);\n    \n    // Check if following\n    if (authState.user && playlist.value) {\n      // TODO: Check if user is following this playlist\n    }\n    \n    // Fetch more playlists from the same creator\n    if (playlist.value?.creator?.target) {\n      const creatorId = typeof playlist.value.creator.target === 'object' \n        ? playlist.value.creator.target._id \n        : playlist.value.creator.target;\n        \n      const playlists = await playlistsActions.fetchPlaylists({\n        'creator.target': creatorId,\n        isPublic: true,\n        limit: 6\n      });\n      \n      // Filter out current playlist\n      morePlaylists.value = playlists.filter(p => p._id !== playlist.value._id).slice(0, 5);\n    }\n  } catch (error) {\n    console.error('Error fetching playlist data:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchPlaylistData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>"],"names":["playlistsState","authState","playerActions","playlistsActions","globals.actions"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ const vueRouter = require("vue-router");
 const Button = require("../../../../components/Button/Button.vue.cjs");
 const Loader = require("../../../../components/Loader/Loader.vue2.cjs");
 const Media = require("../../../../components/Media/Media.vue.cjs");
-const Dropdown = require("../../../../components/Dropdown/Dropdown.vue2.cjs");
+const Dropdown = require("../../../../components/Dropdown/Dropdown.vue.cjs");
 const Popup = require("../../../../components/Popup/Popup.vue.cjs");
 const Feed = require("../../../../components/Feed/Feed.vue.cjs");
 const IconPlay = require("../../../icons/navigation/IconPlay.vue.cjs");
@@ -54,13 +54,13 @@ const _hoisted_18 = {
 };
 const _hoisted_19 = { class: "flex flex-column gap-small" };
 const _hoisted_20 = { class: "metadata-grid grid cols-2 gap-small mn-b-medium" };
-const _hoisted_21 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_21 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_22 = { class: "t-medium" };
-const _hoisted_23 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_23 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_24 = { class: "t-medium" };
-const _hoisted_25 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_25 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_26 = { class: "t-medium" };
-const _hoisted_27 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-medium" };
+const _hoisted_27 = { class: "metadata-card bg-light pd-medium radius-medium flex items-center gap-regular" };
 const _hoisted_28 = { class: "t-medium" };
 const _hoisted_29 = {
   key: 0,
@@ -377,28 +377,28 @@ const _sfc_main = {
             _cache[20] || (_cache[20] = vue.createElementVNode("h3", { class: "t-medium mn-b-small" }, "Metadata", -1)),
             vue.createElementVNode("div", _hoisted_20, [
               vue.createElementVNode("div", _hoisted_21, [
-                vue.createVNode(IconCalendar.default, { class: "i-regular t-primary" }),
+                vue.createVNode(IconCalendar.default, { class: "i-medium t-primary" }),
                 vue.createElementVNode("div", null, [
                   _cache[12] || (_cache[12] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Released", -1)),
                   vue.createElementVNode("div", _hoisted_22, vue.toDisplayString(formatDate(track.value.releaseDate)), 1)
                 ])
               ]),
               vue.createElementVNode("div", _hoisted_23, [
-                vue.createVNode(IconTime.default, { class: "i-regular t-primary" }),
+                vue.createVNode(IconTime.default, { class: "i-medium t-primary" }),
                 vue.createElementVNode("div", null, [
                   _cache[13] || (_cache[13] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Duration", -1)),
                   vue.createElementVNode("div", _hoisted_24, vue.toDisplayString(formatDuration(track.value.duration)), 1)
                 ])
               ]),
               vue.createElementVNode("div", _hoisted_25, [
-                vue.createVNode(IconCheckmark.default, { class: "i-regular t-primary" }),
+                vue.createVNode(IconCheckmark.default, { class: "i-medium t-primary" }),
                 vue.createElementVNode("div", null, [
                   _cache[14] || (_cache[14] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Status", -1)),
                   vue.createElementVNode("div", _hoisted_26, vue.toDisplayString(track.value.status), 1)
                 ])
               ]),
               vue.createElementVNode("div", _hoisted_27, [
-                vue.createVNode(IconShow.default, { class: "i-regular t-primary" }),
+                vue.createVNode(IconShow.default, { class: "i-medium t-primary" }),
                 vue.createElementVNode("div", null, [
                   _cache[15] || (_cache[15] = vue.createElementVNode("div", { class: "t-small t-transp t-uppercase" }, "Visibility", -1)),
                   vue.createElementVNode("div", _hoisted_28, vue.toDisplayString(track.value.isPublic ? "Public" : "Private"), 1)
@@ -465,7 +465,7 @@ const _sfc_main = {
                 class: "pd-medium bg-light radius-medium"
               }
             },
-            class: "grid cols-2 cols-m-3 cols-l-4 gap-medium"
+            class: "grid cols-2 cols-m-3 cols-l-4 gap-regular"
           }, {
             default: vue.withCtx(({ items }) => [
               vue.createElementVNode("div", _hoisted_39, [

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

@@ -1 +1 @@
-{"version":3,"file":"Track.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Track.vue"],"sourcesContent":["<!-- components/pages/Track.vue -->\n<template>\n  <div class=\"track-page pd-small\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !track\" class=\"t-center pd-big\">\n      <h2 class=\"\">Track not found</h2>\n      <p class=\"t-transp t-medium\">The track you're looking for doesn't exist or has been removed.</p>\n    </div>\n\n    <!-- Track Content -->\n    <div v-if=\"track\" class=\"track-content cols-2-fit-content mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky pos-t-0 mobile:pos-relative track-cover-section\">\n        <!-- Cover with Play Overlay -->\n        <div class=\"cover-container pos-relative mn-b-medium radius-big o-hidden\">\n          <Media \n            :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n            :alt=\"track.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n          <div class=\"cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center\">\n            <Button\n              @click=\"playTrack\"\n              color=\"white\"\n              size=\"big\"\n              class=\"w-5r h-5r radius-big bg-main shadow-big hover-scale-110\"\n            >\n              <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n              <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            </Button>\n          </div>\n        </div>\n\n          \n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.playCount) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Plays</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.views) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Views</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Track Details -->\n      <div class=\"track-details-section\">\n        <!-- Track Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n           <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Single</span>\n           <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Explicit</span>\n        </div>\n\n        <!-- Track Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ track.title }}</h1>\n        <!-- Action Buttons -->\n        <div class=\"flex gap-small mn-b-medium\">\n          <Button\n            @click=\"playTrack\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n          >\n            <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            {{ !isPlaying ? 'Play' : 'Pause'}}\n          </Button>\n\n          <Button\n            @click=\"addToQueue\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconAdd class=\"i-medium\" />\n            Add to Queue\n          </Button>\n\n          <Button\n            @click=\"toggleFavorite\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'\" />\n            {{isFavorite ? 'Liked' : 'Like'}}\n          </Button>\n\n          <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n            <template #trigger>\n              <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n                <IconEllipsis class=\"w-1-25r h-1-25r\" />\n              </Button>\n            </template>\n            <template #default>\n              <div class=\"dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin\">\n                <Button @click=\"showAddToPlaylistModal = true\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                  Add to Playlist\n                </Button>\n                <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                  Copy Link\n                </Button>\n                <template v-if=\"isOwner\">\n                  <hr class=\"mn-v-thin border-dark-transp-10\" />\n                  <Button @click=\"editTrack\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                    Edit Track\n                  </Button>\n                  <Button @click=\"deleteTrack\" color=\"danger\" size=\"small\" class=\"w-100 justify-start\">\n                    Delete Track\n                  </Button>\n                </template>\n              </div>\n            </template>\n          </Dropdown>\n        </div>\n\n        <!-- Artist Card -->\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\" v-if=\"track.artist\">Artist</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              :key=\"track.artist._id\"\n              :artist=\"track.artist\"\n              :is-following=\"isFollowingArtist\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowArtist\"\n            />\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Release Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <IconCalendar class=\"i-regular t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Released</div>\n              <div class=\"t-medium \">{{ formatDate(track.releaseDate) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <IconClock class=\"i-regular t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ formatDuration(track.duration) }}</div>\n            </div>\n          </div>\n\n          <!-- Label -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <IconCheck class=\"i-regular t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Status</div>\n              <div class=\"t-medium \">{{ track.status }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-medium\">\n            <IconEye class=\"i-regular t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ track.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n\n        <!-- Album Info -->\n        <h3 v-if=\"track.album\" class=\"t-medium mn-b-small\">From Album</h3>\n        <div v-if=\"track.album\" class=\"album-card bg-light pd-medium radius-medium mn-b-medium\">\n         \n          <router-link \n            :to=\"`/album/${track.album.url}`\"\n            class=\"flex flex-v-center gap-thin hover-opacity\"\n          >\n            <Media \n              :url=\"track.album.coverArt || '/logo/logo-placeholder.jpg'\"\n              :alt=\"track.album.title\"\n              class=\"w-3r h-3r radius-thin o-hidden object-cover\"\n            />\n            <span class=\"t-medium \">{{ track.album.title }}</span>\n          </router-link>\n        </div>\n\n        <!-- Genres & Tags -->\n        <div v-if=\"(track.genre && track.genre.length) || (track.tags && track.tags.length)\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Genres & Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"genre in track.genre\" \n              :key=\"genre\"\n              class=\"tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer\"\n            >\n              {{ genre.name || genre }}\n            </span>\n            <span \n              v-for=\"tag in track.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag.name || tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"track.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ track.description }}</p>\n        </div>\n\n        <!-- Lyrics -->\n        <div v-if=\"track.lyrics\" class=\"lyrics-section bg-light pd-medium radius-medium\">\n          <h3 class=\"t-medium mn-b-small\">Lyrics</h3>\n          <pre class=\"t-transp t-small\">{{ track.lyrics }}</pre>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Tracks -->\n    <section v-if=\"track && relatedTracks && relatedTracks.length\" class=\"related-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Related Tracks</h2>\n      <Feed\n        :store=\"{\n          read: () => new Promise(resolve => resolve(relatedTracks || [])),\n          state: { isLoading: false }\n        }\"\n        :external=\"true\"\n        :items=\"relatedTracks\"\n        :states=\"{\n          empty: {\n            title: 'No related tracks',\n            description: 'Check back later for recommendations',\n            class: 'pd-medium bg-light radius-medium'\n          }\n        }\"\n        class=\"grid cols-2 cols-m-3 cols-l-4 gap-medium\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(relatedTrack, index) in items\"\n              :key=\"relatedTrack._id\"\n              :track=\"relatedTrack\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Add to Playlist Modal -->\n    <Popup \n      v-if=\"showAddToPlaylistModal\" \n      @close-popup=\"showAddToPlaylistModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"h3 mn-b-medium\">Add to Playlist</h3>\n      <!-- <PlaylistSelector \n        :trackId=\"track._id\" \n        @added=\"showAddToPlaylistModal = false\"\n      /> -->\n      <p class=\"t-transp\">Playlist selector coming soon...</p>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\n// Store\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst isPlaying = computed(() => playerState.isPlaying);\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst showDropdown = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\nconst isFollowingArtist = ref(false);\n\n// Clear state\ntracksState.currentTrack = null;\ntracksState.relatedTracks = [];\n\n// Computed\nconst track = computed(() => tracksState.currentTrack);\nconst relatedTracks = computed(() => tracksState.relatedTracks || []);\n\nconst isOwner = computed(() => {\n  return track.value?.owner?.target === authState.user?._id;\n});\n\n// Format helpers\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playTrack = () => {\n  if (track.value) {\n    playerActions.setQueue([track.value]);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = () => {\n  isFollowingArtist.value = !isFollowingArtist.value;\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (track.value) {\n    playerActions.addToQueue(track.value);\n  }\n};\n\nconst editTrack = () => {\n  router.push({ name: 'track-edit', params: { url: track.value.url } });\n};\n\nconst deleteTrack = async () => {\n  if (confirm('Are you sure you want to delete this track?')) {\n    try {\n      await tracksActions.deleteTrack(track.value._id);\n      router.push({ name: 'music-library' });\n    } catch (error) {\n      console.error('Failed to delete track:', error);\n    }\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\n// Data fetching\nconst fetchTrackData = async () => {\n  try {\n    await tracksActions.fetchTrackByUrl(route.params.url);\n    await tracksActions.fetchRelatedTracks(route.params.url);\n  } catch (error) {\n    console.error('Error loading track:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchTrackData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["computed","playerState","useRoute","useRouter","ref","tracksState","authState","playerActions","tracksActions","onMounted"],"mappings":"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"}
+{"version":3,"file":"Track.vue.cjs","sources":["../../../../../../../src/modules/music/components/pages/Track.vue"],"sourcesContent":["<!-- components/pages/Track.vue -->\n<template>\n  <div class=\"track-page pd-small\">\n    <!-- Loading -->\n    <div v-if=\"isLoading\" class=\"w-100 h-25r flex-center flex\">\n      <Loader />\n    </div>\n\n    <!-- Not Found -->\n    <div v-if=\"hasLoaded && !track\" class=\"t-center pd-big\">\n      <h2 class=\"\">Track not found</h2>\n      <p class=\"t-transp t-medium\">The track you're looking for doesn't exist or has been removed.</p>\n    </div>\n\n    <!-- Track Content -->\n    <div v-if=\"track\" class=\"track-content cols-2-fit-content mobile:cols-1 gap-big\">\n      <!-- Left Column - Cover & Stats -->\n      <div class=\"pos-sticky pos-t-0 mobile:pos-relative track-cover-section\">\n        <!-- Cover with Play Overlay -->\n        <div class=\"cover-container pos-relative mn-b-medium radius-big o-hidden\">\n          <Media \n            :url=\"track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.jpg'\" \n            :alt=\"track.title\"\n            class=\"aspect-1x1 w-100 radius-medium o-hidden\"\n          />\n          <div class=\"cover-overlay w-100 h-100 pos-absolute pos-t-0 pos-r-0 bg-black-transp-40 flex flex-center\">\n            <Button\n              @click=\"playTrack\"\n              color=\"white\"\n              size=\"big\"\n              class=\"w-5r h-5r radius-big bg-main shadow-big hover-scale-110\"\n            >\n              <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n              <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            </Button>\n          </div>\n        </div>\n\n          \n\n        <!-- Quick Stats -->\n        <div class=\"stats-grid grid cols-2 gap-small\">\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.playCount) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Plays</div>\n          </div>\n          <div class=\"stat-card bg-light pd-medium radius-medium t-center\">\n            <div class=\" mn-b-thin\">{{ formatNumber(track.views) }}</div>\n            <div class=\"t-small t-transp t-uppercase\">Views</div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Right Column - Track Details -->\n      <div class=\"track-details-section\">\n        <!-- Track Type Badge -->\n        <div class=\"flex items-center gap-small mn-b-small\">\n           <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Single</span>\n           <span class=\"bg-light t-medium pd-thin radius-thin uppercase t-small t-uppercase\">Explicit</span>\n        </div>\n\n        <!-- Track Title -->\n        <h1 class=\"h1 mn-b-medium\">{{ track.title }}</h1>\n        <!-- Action Buttons -->\n        <div class=\"flex gap-small mn-b-medium\">\n          <Button\n            @click=\"playTrack\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 t-white bg-black radius-thin flex-center gap-thin\"\n          >\n            <IconPlay v-if=\"!isPlaying\" fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            <IconPause v-else fill=\"rgb(var(--white))\" class=\"i-medium\" />\n            {{ !isPlaying ? 'Play' : 'Pause'}}\n          </Button>\n\n          <Button\n            @click=\"addToQueue\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconAdd class=\"i-medium\" />\n            Add to Queue\n          </Button>\n\n          <Button\n            @click=\"toggleFavorite\"\n            color=\"primary\"\n            size=\"medium\"\n            class=\"flex-1 bg-light radius-thin flex-center gap-thin\"\n          >\n            <IconLike class=\"i-medium\" :fill=\"isFavorite ? 'rgb(var(--main)':'rgb(var(--black)'\" />\n            {{isFavorite ? 'Liked' : 'Like'}}\n          </Button>\n\n          <Dropdown :label=\"{component: IconEllipsis, class: 'bg-light radius-thin pd-thin i-big' }\" v-model=\"showDropdown\" class=\"relative\">\n            <template #trigger>\n              <Button color=\"transp\" size=\"medium\" class=\"w-3r h-3r radius-full\">\n                <IconEllipsis class=\"w-1-25r h-1-25r\" />\n              </Button>\n            </template>\n            <template #default>\n              <div class=\"dropdown-menu bg-dark pd-small radius-medium shadow-big mn-t-thin\">\n                <Button @click=\"showAddToPlaylistModal = true\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                  Add to Playlist\n                </Button>\n                <Button @click=\"copyLink\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                  Copy Link\n                </Button>\n                <template v-if=\"isOwner\">\n                  <hr class=\"mn-v-thin border-dark-transp-10\" />\n                  <Button @click=\"editTrack\" color=\"transp\" size=\"small\" class=\"w-100 justify-start\">\n                    Edit Track\n                  </Button>\n                  <Button @click=\"deleteTrack\" color=\"danger\" size=\"small\" class=\"w-100 justify-start\">\n                    Delete Track\n                  </Button>\n                </template>\n              </div>\n            </template>\n          </Dropdown>\n        </div>\n\n        <!-- Artist Card -->\n        <div class=\"artists-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\" v-if=\"track.artist\">Artist</h3>\n          <div class=\"flex flex-column gap-small\">\n            <ArtistCardSmall \n              :key=\"track.artist._id\"\n              :artist=\"track.artist\"\n              :is-following=\"isFollowingArtist\"\n              :show-follow-button=\"!isOwner\"\n              @toggle-follow=\"toggleFollowArtist\"\n            />\n          </div>\n        </div>\n\n        <!-- Metadata Cards -->\n        <h3 class=\"t-medium mn-b-small\">Metadata</h3>\n        <div class=\"metadata-grid grid cols-2 gap-small mn-b-medium\">\n          <!-- Release Date -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCalendar class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Released</div>\n              <div class=\"t-medium \">{{ formatDate(track.releaseDate) }}</div>\n            </div>\n          </div>\n\n          <!-- Total Duration -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconClock class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Duration</div>\n              <div class=\"t-medium \">{{ formatDuration(track.duration) }}</div>\n            </div>\n          </div>\n\n          <!-- Label -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconCheck class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Status</div>\n              <div class=\"t-medium \">{{ track.status }}</div>\n            </div>\n          </div>\n\n          <!-- Visibility -->\n          <div class=\"metadata-card bg-light pd-medium radius-medium flex items-center gap-regular\">\n            <IconEye class=\"i-medium t-primary\" />\n            <div>\n              <div class=\"t-small t-transp t-uppercase\">Visibility</div>\n              <div class=\"t-medium \">{{ track.isPublic ? 'Public' : 'Private' }}</div>\n            </div>\n          </div>\n        </div>\n\n\n        <!-- Album Info -->\n        <h3 v-if=\"track.album\" class=\"t-medium mn-b-small\">From Album</h3>\n        <div v-if=\"track.album\" class=\"album-card bg-light pd-medium radius-medium mn-b-medium\">\n         \n          <router-link \n            :to=\"`/album/${track.album.url}`\"\n            class=\"flex flex-v-center gap-thin hover-opacity\"\n          >\n            <Media \n              :url=\"track.album.coverArt || '/logo/logo-placeholder.jpg'\"\n              :alt=\"track.album.title\"\n              class=\"w-3r h-3r radius-thin o-hidden object-cover\"\n            />\n            <span class=\"t-medium \">{{ track.album.title }}</span>\n          </router-link>\n        </div>\n\n        <!-- Genres & Tags -->\n        <div v-if=\"(track.genre && track.genre.length) || (track.tags && track.tags.length)\" class=\"tags-section mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">Genres & Tags</h3>\n          <div class=\"flex gap-thin flex-wrap\">\n            <span \n              v-for=\"genre in track.genre\" \n              :key=\"genre\"\n              class=\"tag bg-main t-medium pd-thin radius-thin t-small cursor-pointer\"\n            >\n              {{ genre.name || genre }}\n            </span>\n            <span \n              v-for=\"tag in track.tags\" \n              :key=\"tag\"\n              class=\"tag bg-light t-transp pd-thin-big radius-small t-small hover-bg-light cursor-pointer\"\n            >\n              #{{ tag.name || tag }}\n            </span>\n          </div>\n        </div>\n\n        <!-- Description -->\n        <div v-if=\"track.description\" class=\"description-section bg-light pd-medium radius-medium mn-b-medium\">\n          <h3 class=\"t-medium mn-b-small\">About</h3>\n          <p class=\"t-transp\">{{ track.description }}</p>\n        </div>\n\n        <!-- Lyrics -->\n        <div v-if=\"track.lyrics\" class=\"lyrics-section bg-light pd-medium radius-medium\">\n          <h3 class=\"t-medium mn-b-small\">Lyrics</h3>\n          <pre class=\"t-transp t-small\">{{ track.lyrics }}</pre>\n        </div>\n      </div>\n    </div>\n\n    <!-- Related Tracks -->\n    <section v-if=\"track && relatedTracks && relatedTracks.length\" class=\"related-section mn-t-big\">\n      <h2 class=\"h2 mn-b-medium\">Related Tracks</h2>\n      <Feed\n        :store=\"{\n          read: () => new Promise(resolve => resolve(relatedTracks || [])),\n          state: { isLoading: false }\n        }\"\n        :external=\"true\"\n        :items=\"relatedTracks\"\n        :states=\"{\n          empty: {\n            title: 'No related tracks',\n            description: 'Check back later for recommendations',\n            class: 'pd-medium bg-light radius-medium'\n          }\n        }\"\n        class=\"grid cols-2 cols-m-3 cols-l-4 gap-regular\"\n      >\n        <template #default=\"{ items }\">\n          <div class=\"bg-light radius-medium o-hidden\">\n            <TrackListCard\n              v-for=\"(relatedTrack, index) in items\"\n              :key=\"relatedTrack._id\"\n              :track=\"relatedTrack\"\n              :index=\"index\"\n              :showAlbum=\"true\"\n              :showCover=\"true\"\n            />\n          </div>\n        </template>\n      </Feed>\n    </section>\n\n    <!-- Add to Playlist Modal -->\n    <Popup \n      v-if=\"showAddToPlaylistModal\" \n      @close-popup=\"showAddToPlaylistModal = false\" \n      class=\"bg-white pd-medium w-m-25r radius-medium\"\n    >\n      <h3 class=\"h3 mn-b-medium\">Add to Playlist</h3>\n      <!-- <PlaylistSelector \n        :trackId=\"track._id\" \n        @added=\"showAddToPlaylistModal = false\"\n      /> -->\n      <p class=\"t-transp\">Playlist selector coming soon...</p>\n    </Popup>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, watch } from 'vue';\nimport { useRoute, useRouter } from 'vue-router';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport Loader from '@martyrs/src/components/Loader/Loader.vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';\nimport Popup from '@martyrs/src/components/Popup/Popup.vue';\nimport Feed from '@martyrs/src/components/Feed/Feed.vue';\n\n// Icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';\nimport IconAdd from '@martyrs/src/modules/icons/navigation/IconAdd.vue';\nimport IconClock from '@martyrs/src/modules/icons/entities/IconTime.vue';\nimport IconCalendar from '@martyrs/src/modules/icons/entities/IconCalendar.vue';\nimport IconCheck from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\nimport IconEye from '@martyrs/src/modules/icons/actions/IconShow.vue';\nimport IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';\n\n// Components\nimport TrackListCard from '../cards/TrackListCard.vue';\nimport ArtistCardSmall from '../cards/ArtistCardSmall.vue';\n// import PlaylistSelector from '../forms/PlaylistSelector.vue';\n\n// Store\nimport { state as tracksState, actions as tracksActions } from '../../store/tracks.js';\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\nimport { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';\n\nconst isPlaying = computed(() => playerState.isPlaying);\n\nconst route = useRoute();\nconst router = useRouter();\n\n// Emits\nconst emits = defineEmits(['page-loading', 'page-loaded']);\n\n// State\nconst hasLoaded = ref(false);\nconst showDropdown = ref(false);\nconst showAddToPlaylistModal = ref(false);\nconst isFavorite = ref(false);\nconst isFollowingArtist = ref(false);\n\n// Clear state\ntracksState.currentTrack = null;\ntracksState.relatedTracks = [];\n\n// Computed\nconst track = computed(() => tracksState.currentTrack);\nconst relatedTracks = computed(() => tracksState.relatedTracks || []);\n\nconst isOwner = computed(() => {\n  return track.value?.owner?.target === authState.user?._id;\n});\n\n// Format helpers\nconst formatDuration = (seconds) => {\n  if (!seconds) return '0:00';\n  const h = Math.floor(seconds / 3600);\n  const m = Math.floor((seconds % 3600) / 60);\n  const s = Math.floor(seconds % 60);\n  \n  if (h > 0) {\n    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;\n  }\n  return `${m}:${s.toString().padStart(2, '0')}`;\n};\n\nconst formatDate = (dateString) => {\n  if (!dateString) return 'Unknown';\n  return new Date(dateString).toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric'\n  });\n};\n\nconst formatNumber = (num) => {\n  if (!num) return '0';\n  if (num >= 1000000) {\n    return (num / 1000000).toFixed(1) + 'M';\n  } else if (num >= 1000) {\n    return (num / 1000).toFixed(1) + 'K';\n  }\n  return num.toString();\n};\n\n// Actions\nconst playTrack = () => {\n  if (track.value) {\n    playerActions.setQueue([track.value]);\n  }\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // TODO: Implement actual saving\n};\n\nconst toggleFollowArtist = () => {\n  isFollowingArtist.value = !isFollowingArtist.value;\n  // TODO: Implement actual following\n};\n\nconst addToQueue = () => {\n  if (track.value) {\n    playerActions.addToQueue(track.value);\n  }\n};\n\nconst editTrack = () => {\n  router.push({ name: 'track-edit', params: { url: track.value.url } });\n};\n\nconst deleteTrack = async () => {\n  if (confirm('Are you sure you want to delete this track?')) {\n    try {\n      await tracksActions.deleteTrack(track.value._id);\n      router.push({ name: 'music-library' });\n    } catch (error) {\n      console.error('Failed to delete track:', error);\n    }\n  }\n};\n\nconst copyLink = () => {\n  navigator.clipboard.writeText(window.location.href);\n  showDropdown.value = false;\n};\n\n// Data fetching\nconst fetchTrackData = async () => {\n  try {\n    await tracksActions.fetchTrackByUrl(route.params.url);\n    await tracksActions.fetchRelatedTracks(route.params.url);\n  } catch (error) {\n    console.error('Error loading track:', error);\n  }\n};\n\n// Lifecycle\nonMounted(async () => {\n  emits('page-loading');\n  \n  await fetchTrackData();\n  \n  hasLoaded.value = true;\n  emits('page-loaded');\n});\n</script>\n\n<style scoped>\n</style>"],"names":["computed","playerState","useRoute","useRouter","ref","tracksState","authState","playerActions","tracksActions","onMounted"],"mappings":"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"}