@ozdao/martyrs 0.2.469 → 0.2.471

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

@@ -0,0 +1,25 @@
+<!-- components/lists/AlbumList.vue -->
+<template>
+  <div class="album-list">
+    <div v-if="albums.length === 0" class="empty-list t-center pd-medium">
+      <p class="t-grey">No albums found</p>
+    </div>
+    
+    <div v-else class="album-grid cols-5 mobile:cols-2 gap-small">
+      <div v-for="album in albums" :key="album._id">
+        <AlbumCard :album="album" class="hover-scale-1 transition-cubic-in-out" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import AlbumCard from '../cards/AlbumCard.vue';
+
+const props = defineProps({
+  albums: {
+    type: Array,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,25 @@
+<!-- components/lists/ArtistList.vue -->
+<template>
+  <div class="artist-list">
+    <div v-if="artists.length === 0" class="empty-list t-center pd-medium">
+      <p class="t-grey">No artists found</p>
+    </div>
+    
+    <div v-else class="artist-grid cols-6 mobile:cols-3 gap-small">
+      <div v-for="artist in artists" :key="artist._id">
+        <ArtistCard :artist="artist" class="hover-scale-1 transition-cubic-in-out" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ArtistCard from '../cards/ArtistCard.vue';
+
+const props = defineProps({
+  artists: {
+    type: Array,
+    required: true
+  }
+});
+</script>

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

@@ -0,0 +1,25 @@
+<!-- components/lists/PlaylistList.vue -->
+<template>
+  <div class="playlist-list">
+    <div v-if="playlists.length === 0" class="empty-list t-center pd-medium">
+      <p class="t-grey">No playlists found</p>
+    </div>
+    
+    <div v-else class="playlist-grid cols-5 mobile:cols-2 gap-small">
+      <div v-for="playlist in playlists" :key="playlist._id">
+        <PlaylistCard :playlist="playlist" class="hover-scale-1 transition-cubic-in-out" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import PlaylistCard from '../cards/PlaylistCard.vue';
+
+const props = defineProps({
+  playlists: {
+    type: Array,
+    required: true
+  }
+});
+</script>

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>