@ozdao/martyrs 0.2.470 → 0.2.471

package/src/modules/music/components/lists/TrackList.vue

@@ -0,0 +1,175 @@
+<!-- components/lists/TrackList.vue (continued) -->
+<template>
+  <div class="track-list w-100">
+    <div 
+      v-if="showHeader" 
+      class="track-list-header pd-small br-b br-solid br-dark-transp-20 t-grey flex-v-center flex"
+    >
+      <div class="track-number w-3r t-center">#</div>
+      <div class="track-title flex-child-1">TITLE</div>
+      <div v-if="showAlbum" class="track-album w-15r mobile:w-0 mobile:hidden">ALBUM</div>
+      <div class="track-duration w-5r t-right">DURATION</div>
+    </div>
+    
+    <div class="track-list-body">
+      <div 
+        v-for="(track, index) in tracks" 
+        :key="track._id"
+        class="track-item pd-small hover-bg-dark-transp-25 flex-v-center flex cursor-pointer"
+        :class="{'bg-dark-transp-25': isPlaying(track)}"
+        @click="playTrack(track)"
+        @dblclick="playTrack(track, true)"
+        @mouseenter="hoveredIndex = index"
+        @mouseleave="hoveredIndex = -1"
+      >
+        <div class="track-number w-3r t-center pos-relative">
+          <span v-if="!isPlaying(track) && hoveredIndex !== index" class="t-grey">{{ index + 1 }}</span>
+          <Button 
+            v-else-if="!isPlaying(track) && hoveredIndex === index"
+            @click.stop="playTrack(track)"
+            class="bg-transparent border-none pd-zero"
+            :showLoader="false"
+            :showSucces="false"
+          >
+            <IconPlay class="i-small" fill="rgb(var(--white))"/>
+          </Button>
+          <Button 
+            v-else
+            @click.stop="pauseTrack()"
+            class="bg-transparent border-none pd-zero"
+            :showLoader="false"
+            :showSucces="false"
+          >
+            <IconPause class="i-small" fill="rgb(var(--main))"/>
+          </Button>
+        </div>
+        
+        <div class="track-title flex-child-1 flex flex-v-center">
+          <div v-if="showCover" class="track-cover mn-r-small">
+            <Media 
+              :url="track.coverUrl || (track.album && track.album.coverUrl) || '/assets/placeholder-track.jpg'" 
+              class="w-3r h-3r object-fit-cover radius-small"
+            />
+          </div>
+          
+          <div class="track-info">
+            <div class="track-name t-white" :class="{'t-main': isPlaying(track)}">{{ track.title }}</div>
+            <div class="track-artist t-grey t-small">
+              <router-link 
+                v-if="track.artist && track.artist._id"
+                :to="{ name: 'artist-detail', params: { url: track.artist.url } }"
+                class="t-grey hover-t-white"
+                @click.stop
+              >
+                {{ getArtistName(track) }}
+              </router-link>
+              <span v-else>{{ getArtistName(track) }}</span>
+            </div>
+          </div>
+        </div>
+        
+        <div v-if="showAlbum" class="track-album w-15r mobile:w-0 mobile:hidden t-grey t-truncate">
+          <router-link 
+            v-if="track.album && track.album._id"
+            :to="{ name: 'album-detail', params: { url: track.album.url } }"
+            class="t-grey hover-t-white"
+            @click.stop
+          >
+            {{ track.album.title }}
+          </router-link>
+          <span v-else>{{ track.album?.title || 'Single' }}</span>
+        </div>
+        
+        <div class="track-duration w-5r t-right t-grey">{{ formatDuration(track.duration) }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
+import IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';
+
+// Import player store
+import { state as playerState, actions as playerActions } from '../../store/player.js';
+
+const props = defineProps({
+  tracks: {
+    type: Array,
+    required: true
+  },
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  showAlbum: {
+    type: Boolean,
+    default: false
+  },
+  showCover: {
+    type: Boolean,
+    default: false
+  },
+  showIndex: {
+    type: Boolean,
+    default: true
+  }
+});
+
+// State
+const hoveredIndex = ref(-1);
+
+// Computed
+const currentTrack = computed(() => playerState.currentTrack);
+
+// Methods
+const isPlaying = (track) => {
+  return currentTrack.value && currentTrack.value._id === track._id && isPlaying.value;
+};
+
+const isHovering = (index) => {
+  return hoveredIndex.value === index;
+};
+
+const playTrack = (track, addToQueue = false) => {
+  if (addToQueue) {
+    playerActions.addToQueue(track);
+  } else {
+    // Find track index to set queue properly
+    const trackIndex = props.tracks.findIndex(t => t._id === track._id);
+    playerActions.setQueue([...props.tracks], trackIndex);
+  }
+};
+
+const pauseTrack = () => {
+  playerActions.togglePlay();
+};
+
+const getArtistName = (track) => {
+  if (track.artist) {
+    if (typeof track.artist === 'object') {
+      return track.artist.name || 'Unknown Artist';
+    }
+    return track.artist;
+  }
+  return 'Unknown Artist';
+};
+
+const formatDuration = (seconds) => {
+  if (!seconds) return '0:00';
+  
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+};
+</script>
+
+<style scoped>
+.track-item {
+  transition: background-color 0.2s ease;
+}
+</style>

package/src/modules/music/components/pages/AlbumDetail.vue

@@ -0,0 +1,265 @@
+<!-- components/pages/AlbumDetail.vue -->
+<template>
+  <div class="album-detail-page">
+    <div v-if="isLoading" class="w-100 h-25r flex-center flex">
+      <Loader />
+    </div>
+    
+    <div v-else-if="!album" class="t-center pd-big">
+      <h2 class="t-white">Album not found</h2>
+      <p class="t-grey t-medium">The album you're looking for doesn't exist or has been removed.</p>
+    </div>
+    
+    <div v-else>
+      <!-- Album Header -->
+      <div class="album-header mn-b-medium flex flex-v-center gap-medium">
+        <div class="album-cover">
+          <Media 
+            :url="album.coverUrl || '/assets/placeholder-album.jpg'" 
+            class="w-15r h-15r object-fit-cover shadow-lg radius-small"
+          />
+        </div>
+        
+        <div class="album-info">
+          <div class="t-small t-uppercase t-white">Album</div>
+          <h1 class="t-white">{{ album.title }}</h1>
+          
+          <div class="album-meta mn-t-small flex flex-v-center">
+            <router-link 
+              v-if="album.artist && album.artist._id"
+              :to="{ name: 'artist-detail', params: { url: album.artist.url } }"
+              class="t-white t-medium hover-t-main"
+            >
+              {{ getArtistName(album) }}
+            </router-link>
+            <span v-else class="t-white t-medium">{{ getArtistName(album) }}</span>
+            
+            <span class="t-grey mn-l-small mn-r-small">•</span>
+            
+            <span class="t-grey">{{ formatReleaseYear(album.releaseDate) }}</span>
+            
+            <span class="t-grey mn-l-small mn-r-small">•</span>
+            
+            <span class="t-grey">{{ albumTracks.length }} {{ albumTracks.length === 1 ? 'song' : 'songs' }}</span>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Album Actions -->
+      <div class="album-actions mn-b-medium flex flex-v-center gap-small">
+        <Button 
+          @click="playAlbum"
+          class="play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          <IconPlay class="i-small" fill="rgb(var(--black))"/>
+          <span class="t-black t-medium">Play</span>
+        </Button>
+        
+        <Button 
+          @click="toggleFavorite"
+          class="bg-transparent border-none pd-zero"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          <IconHeart class="i-medium" :fill="isFavorite ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+        </Button>
+        
+        <Dropdown class="pos-relative">
+          <Button 
+            @click="showDropdown = !showDropdown"
+            class="bg-transparent border-none pd-zero"
+            :showLoader="false" 
+            :showSucces="false"
+          >
+            <IconEllipsis class="i-medium" fill="rgb(var(--white))"/>
+          </Button>
+          
+          <template #content>
+            <ul v-if="showDropdown" class="pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin">
+              <li class="mn-b-thin">
+                <Button 
+                  @click="addToQueue"
+                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  :showLoader="false" 
+                  :showSucces="false"
+                >
+                  <span>Add to Queue</span>
+                </Button>
+              </li>
+              <li>
+                <Button 
+                  @click="copyLink"
+                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  :showLoader="false" 
+                  :showSucces="false"
+                >
+                  <span>Copy Link</span>
+                </Button>
+              </li>
+            </ul>
+          </template>
+        </Dropdown>
+      </div>
+      
+      <!-- Album Tracks -->
+      <div class="album-tracks">
+        <TrackList 
+          :tracks="albumTracks"
+          :showAlbum="false"
+          :showCover="false"
+          class="bg-dark-transp-10 radius-medium o-hidden"
+        />
+      </div>
+      
+      <!-- Album Info -->
+      <div v-if="album.description" class="album-description mn-t-medium pd-medium bg-dark-transp-10 radius-medium">
+        <h3 class="t-white mn-b-small">About</h3>
+        <p class="t-grey">{{ album.description }}</p>
+      </div>
+      
+      <!-- More from this artist if available -->
+      <div v-if="moreFromArtist.length > 0" class="more-from-artist mn-t-medium">
+        <div class="flex-between flex mn-b-small">
+          <h2 class="t-white">More by {{ getArtistName(album) }}</h2>
+          <router-link 
+            v-if="album.artist && album.artist._id"
+            :to="{ name: 'artist-detail', params: { url: album.artist.url } }" 
+            class="t-main t-small hover-opacity"
+          >
+            See all
+          </router-link>
+        </div>
+        
+        <div class="albums-grid cols-5 mobile:cols-2 gap-small">
+          <div v-for="relatedAlbum in moreFromArtist" :key="relatedAlbum._id">
+            <AlbumCard :album="relatedAlbum" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import TrackList from '../lists/TrackList.vue';
+import AlbumCard from '../cards/AlbumCard.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Loader from '@martyrs/src/components/Loader/Loader.vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
+
+// Import icons
+import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
+import IconHeart from '@martyrs/src/modules/icons/navigation/IconHeart.vue';
+import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
+
+// Import store modules
+import { state as albumsState, actions as albumsActions } from '../../store/albums.js';
+import { actions as playerActions } from '../../store/player.js';
+
+const route = useRoute();
+const router = useRouter();
+
+// State
+const isLoading = ref(true);
+const isFavorite = ref(false);
+const showDropdown = ref(false);
+const moreFromArtist = ref([]);
+
+// Computed properties
+const album = computed(() => albumsState.currentAlbum);
+const albumTracks = computed(() => albumsState.currentAlbumTracks);
+
+// Methods
+const getArtistName = (albumItem) => {
+  if (!albumItem) return 'Unknown Artist';
+  
+  if (albumItem.artist) {
+    if (typeof albumItem.artist === 'object') {
+      return albumItem.artist.name || 'Unknown Artist';
+    }
+    return albumItem.artist;
+  }
+  return 'Unknown Artist';
+};
+
+const formatReleaseYear = (dateString) => {
+  if (!dateString) return '';
+  return new Date(dateString).getFullYear();
+};
+
+const playAlbum = () => {
+  if (albumTracks.value && albumTracks.value.length > 0) {
+    playerActions.setQueue(albumTracks.value);
+  }
+};
+
+const toggleFavorite = () => {
+  isFavorite.value = !isFavorite.value;
+  // Implement favorite album logic here
+};
+
+const addToQueue = () => {
+  if (albumTracks.value && albumTracks.value.length > 0) {
+    // Add all tracks to queue
+    albumTracks.value.forEach(track => {
+      playerActions.addToQueue(track);
+    });
+    
+    showDropdown.value = false;
+  }
+};
+
+const copyLink = () => {
+  const url = window.location.href;
+  navigator.clipboard.writeText(url).then(() => {
+    // Could show a success notification here
+    showDropdown.value = false;
+  });
+};
+
+const fetchAlbumData = async () => {
+  isLoading.value = true;
+  
+  try {
+    // Fetch album data
+    await albumsActions.fetchAlbumByUrl(route.params.url);
+    
+    // If artist is available, fetch more albums from the same artist
+    if (album.value?.artist?._id) {
+      const artistAlbums = await albumsActions.fetchAlbums({
+        artist: album.value.artist._id,
+        status: 'published',
+        isPublic: true,
+        limit: 5
+      });
+      
+      // Filter out the current album
+      moreFromArtist.value = artistAlbums.filter(a => a._id !== album.value._id);
+    }
+  } catch (error) {
+    console.error('Error fetching album data:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Fetch data when component mounts or URL changes
+onMounted(fetchAlbumData);
+
+watch(() => route.params.url, (newUrl) => {
+  if (newUrl) {
+    fetchAlbumData();
+  }
+});
+</script>
+
+<style scoped>
+.album-cover {
+  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
+}
+</style>

package/src/modules/music/components/pages/ArtistDetail.vue

@@ -0,0 +1,247 @@
+<!-- components/pages/ArtistDetail.vue -->
+<template>
+  <div class="artist-detail-page">
+    <div v-if="isLoading" class="w-100 h-25r flex-center flex">
+      <Loader />
+    </div>
+    
+    <div v-else-if="!artist" class="t-center pd-big">
+      <h2 class="t-white">Artist not found</h2>
+      <p class="t-grey t-medium">The artist you're looking for doesn't exist or has been removed.</p>
+    </div>
+    
+    <div v-else>
+      <!-- Artist Header with Background -->
+      <div class="artist-hero pos-relative mn-b-medium pd-medium">
+        <div class="artist-cover pos-absolute pos-t-0 pos-l-0 w-100 h-100" v-if="artist.coverUrl">
+          <Media 
+            :url="artist.coverUrl" 
+            class="w-100 h-100 object-fit-cover"
+          />
+          <div class="overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100"></div>
+        </div>
+        
+        <div class="artist-header z-index-1 pos-relative flex flex-v-center gap-medium">
+          <div class="artist-photo">
+            <Media 
+              :url="artist.photoUrl || '/assets/placeholder-artist.jpg'" 
+              class="w-15r h-15r object-fit-cover radius-round shadow-lg"
+            />
+          </div>
+          
+          <div class="artist-info">
+            <div v-if="artist.isVerified" class="verified-badge t-small t-uppercase t-main mn-b-small">
+              <IconVerified class="i-small mn-r-thin" fill="rgb(var(--main))"/>
+              Verified Artist
+            </div>
+            <h1 class="t-white">{{ artist.name }}</h1>
+            
+            <div class="artist-stats mn-t-small t-grey">
+              {{ formatFollowersCount(artist.popularity || 0) }} followers
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Artist Actions -->
+      <div class="artist-actions mn-b-medium flex flex-v-center gap-small">
+        <Button 
+          @click="playArtistTracks"
+          class="play-button bg-main radius-round pd-small flex-v-center flex gap-small hover-scale-1"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          <IconPlay class="i-small" fill="rgb(var(--black))"/>
+          <span class="t-black t-medium">Play</span>
+        </Button>
+        
+        <Button 
+          @click="toggleFollow"
+          class="follow-button pd-small radius-extra"
+          :class="isFollowing ? 'bg-dark-transp-25 t-white br-solid br-white-transp-25' : 'bg-dark-transp-25 t-white'"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          {{ isFollowing ? 'Following' : 'Follow' }}
+        </Button>
+        
+        <Dropdown class="pos-relative">
+          <Button 
+            @click="showDropdown = !showDropdown"
+            class="bg-transparent border-none pd-zero"
+            :showLoader="false" 
+            :showSucces="false"
+          >
+            <IconEllipsis class="i-medium" fill="rgb(var(--white))"/>
+          </Button>
+          
+          <template #content>
+            <ul v-if="showDropdown" class="pd-small bg-dark radius-small pos-absolute pos-t-100 pos-r-0 z-index-3 w-max-15r mn-t-thin">
+              <li>
+                <Button 
+                  @click="copyLink"
+                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  :showLoader="false" 
+                  :showSucces="false"
+                >
+                  <span>Copy Link</span>
+                </Button>
+              </li>
+            </ul>
+          </template>
+        </Dropdown>
+      </div>
+      
+      <!-- Popular Tracks -->
+      <section class="artist-popular-tracks mn-b-medium">
+        <h2 class="t-white mn-b-small">Popular</h2>
+        
+        <TrackList 
+          :tracks="discography.singles.slice(0, 5)"
+          :showAlbum="true" 
+          :showCover="true"
+          class="bg-dark-transp-10 radius-medium o-hidden"
+        />
+      </section>
+      
+      <!-- Discography - Albums -->
+      <section v-if="discography.albums.length > 0" class="artist-albums mn-b-medium">
+        <div class="flex-between flex mn-b-small">
+          <h2 class="t-white">Albums</h2>
+        </div>
+        
+        <AlbumList :albums="discography.albums" />
+      </section>
+      
+      <!-- Singles and EPs -->
+      <section v-if="discography.singles.length > 5" class="artist-singles mn-b-medium">
+        <div class="flex-between flex mn-b-small">
+          <h2 class="t-white">Singles and EPs</h2>
+        </div>
+        
+        <div class="singles-grid cols-5 mobile:cols-2 gap-small">
+          <div v-for="track in discography.singles.slice(5)" :key="track._id">
+            <TrackCard :track="track" />
+          </div>
+        </div>
+      </section>
+      
+      <!-- Artist Bio -->
+      <section v-if="artist.bio" class="artist-bio mn-b-medium pd-medium bg-dark-transp-10 radius-medium">
+        <h2 class="t-white mn-b-small">About</h2>
+        <p class="t-grey">{{ artist.bio }}</p>
+      </section>
+      
+      <!-- Related Artists -->
+      <section v-if="relatedArtists.length > 0" class="related-artists">
+        <h2 class="t-white mn-b-small">Fans Also Like</h2>
+        
+        <ArtistList :artists="relatedArtists" />
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import TrackList from '../lists/TrackList.vue';
+import TrackCard from '../cards/TrackCard.vue';
+import AlbumList from '../lists/AlbumList.vue';
+import ArtistList from '../lists/ArtistList.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Loader from '@martyrs/src/components/Loader/Loader.vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import Dropdown from '@martyrs/src/components/Dropdown/Dropdown.vue';
+
+// Import icons
+import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
+import IconEllipsis from '@martyrs/src/modules/icons/navigation/IconEllipsis.vue';
+import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheck.vue';
+
+// Import store modules
+import { state as artistsState, actions as artistsActions } from '../../store/artists.js';
+import { actions as playerActions } from '../../store/player.js';
+
+const route = useRoute();
+const router = useRouter();
+
+// State
+const isLoading = ref(true);
+const isFollowing = ref(false);
+const showDropdown = ref(false);
+
+// Computed properties
+const artist = computed(() => artistsState.currentArtist);
+const discography = computed(() => artistsState.discography);
+const relatedArtists = computed(() => artistsState.relatedArtists);
+
+// Methods
+const formatFollowersCount = (count) => {
+  if (count >= 1000000) {
+    return `${(count / 1000000).toFixed(1)}M`;
+  } else if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}K`;
+  }
+  return count.toString();
+};
+
+const playArtistTracks = () => {
+  const tracks = [
+    ...discography.value.singles,
+    ...discography.value.albums.reduce((acc, album) => {
+      // In a real app, you'd first load the album tracks here
+      return acc;
+    }, [])
+  ];
+  
+  if (tracks.length > 0) {
+    playerActions.setQueue(tracks);
+  }
+};
+
+const toggleFollow = () => {
+  isFollowing.value = !isFollowing.value;
+  // Implement follow artist logic here
+};
+
+const copyLink = () => {
+  const url = window.location.href;
+  navigator.clipboard.writeText(url).then(() => {
+    // Could show a success notification here
+    showDropdown.value = false;
+  });
+};
+
+const fetchArtistData = async () => {
+  isLoading.value = true;
+  
+  try {
+    // Fetch artist data
+    await artistsActions.fetchArtistByUrl(route.params.url);
+  } catch (error) {
+    console.error('Error fetching artist data:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// Fetch data when component mounts or URL changes
+onMounted(fetchArtistData);
+
+watch(() => route.params.url, (newUrl) => {
+  if (newUrl) {
+    fetchArtistData();
+  }
+});
+</script>
+
+<style scoped>
+.artist-hero {
+  min-height: 20rem;
+}
+
+.overlay {
+  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 100%);
+}
+</style>