@ozdao/martyrs 0.2.492 → 0.2.493

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

@@ -1,12 +1,8 @@
 <template>
-  <div>
-    <!-- Loading state -->
-    <div v-if="isLoading" class="flex-center flex pd-extra">
-      <Loader />
-    </div>
-    
+  <div class="w-100 pos-relative">
+  
     <!-- Artist not found -->
-    <div v-else-if="!artist" class="flex-center flex-column flex pd-extra">
+    <div v-if="hasLoaded && !artist" class="flex-center flex-column flex pd-extra">
       <h2 class="h2 mn-b-medium">Artist Not Found</h2>
       <p class="p-medium t-transp mn-b-medium">The artist you are looking for doesn't exist or may have been removed.</p>
       <Button
@@ -20,7 +16,7 @@
     </div>
     
     <!-- Artist content -->
-    <div v-else>
+    <div v-if="artist">
       <!-- Cover image -->
       <div 
         class="w-100 t-white h-50vh pos-relative"
@@ -31,7 +27,7 @@
         <!-- Artist actions for edit/manage -->
         <div v-if="isOwner" class="pos-absolute pos-t-medium pos-r-medium z-index-1">
           <Button
-            :submit="editArtist"
+            @click="router.push({ name: 'artist-edit', params: { url: artist.url } })"
             class="bg-main  mn-r-small"
             :showSucces="false"
             :showLoader="false"
@@ -40,7 +36,7 @@
           </Button>
           
           <Button
-            :submit="manageContent"
+            @click="router.push({ name: 'artist-manage-content', params: { artistId: artist._id } })"
             class="bg-white t-black"
             :showSucces="false"
             :showLoader="false"
@@ -59,7 +55,7 @@
               class="w-100 h-100 object-fit-cover"
             />
             <div v-else class="w-100 h-100 bg-white flex-center flex">
-              <span class="h1">{{ artist.name[0] }}</span>
+              <span class="h1">{{ artist?.name?.[0] || 'A' }}</span>
             </div>
           </div>
           
@@ -161,7 +157,7 @@
                   v-for="album in discography.albums"
                   :key="album._id"
                   class="bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white"
-                  @click="navigateToAlbum(album)"
+                  @click="router.push({ name: 'album', params: { url: album.url } })"
                 >
                   <div class="w-3r h-3r radius-small o-hidden mn-r-small">
                     <img
@@ -184,7 +180,7 @@
               
               <Button
                 v-if="discography.albums.length > 4"
-                :submit="viewAllAlbums"
+                @click="router.push({ name: 'artist-albums', params: { artistId: artist._id } })"
                 class="mn-t-small w-100 bg-white t-black"
                 :showSucces="false"
                 :showLoader="false"
@@ -202,7 +198,7 @@
                   v-for="single in discography.singles"
                   :key="single._id"
                   class="bg-white pd-small radius-medium flex-v-center flex cursor-pointer hover-bg-white"
-                  @click="navigateToTrack(single)"
+                  @click="router.push({ name: 'track', params: { url: single.url } })"
                 >
                   <div class="w-3r h-3r radius-small o-hidden mn-r-small">
                     <img
@@ -225,7 +221,7 @@
               
               <Button
                 v-if="discography.singles.length > 5"
-                :submit="viewAllSingles"
+                @click="router.push({ name: 'artist-singles', params: { artistId: artist._id } })"
                 class="mn-t-small w-100 bg-white t-black"
                 :showSucces="false"
                 :showLoader="false"
@@ -234,6 +230,22 @@
               </Button>
             </div>
             
+            <!-- Popular Tracks Section -->
+            <div v-if="artistTracks.length > 0" class="bg-light pd-medium radius-medium mn-b-medium">
+              <h2 class="h3 mn-b-medium">Popular Tracks</h2>
+              
+              <div class="bg-white radius-medium o-hidden">
+                <TrackListCard
+                  v-for="(track, index) in artistTracks"
+                  :key="track._id"
+                  :track="track"
+                  :index="index"
+                  :showAlbum="true"
+                  :showCover="true"
+                />
+              </div>
+            </div>
+            
             <!-- No discography yet -->
             <div 
               v-if="discography.albums.length === 0 && discography.singles.length === 0" 
@@ -244,7 +256,7 @@
               
               <Button
                 v-if="isOwner"
-                :submit="addRelease"
+                @click="router.push({ name: 'release-create', query: { artistId: artist._id } })"
                 class="mn-t-medium bg-main "
                 :showSucces="false"
                 :showLoader="false"
@@ -264,7 +276,7 @@
               v-for="relatedArtist in relatedArtists"
               :key="relatedArtist._id"
               class="t-center cursor-pointer"
-              @click="navigateToArtist(relatedArtist)"
+              @click="router.push({ name: 'artist', params: { url: relatedArtist.url } })"
             >
               <div class="w-100 aspect-1x1 radius-medium o-hidden mn-b-small">
                 <img
@@ -274,7 +286,7 @@
                   class="w-100 h-100 object-fit-cover"
                 />
                 <div v-else class="w-100 h-100 bg-light flex-center flex">
-                  <span>{{ relatedArtist.name[0] }}</span>
+                  <span>{{ relatedArtist?.name?.[0] || 'A' }}</span>
                 </div>
               </div>
               
@@ -294,6 +306,7 @@ import { useRouter, useRoute } from 'vue-router';
 // Import Martyrs components
 import Button from '@martyrs/src/components/Button/Button.vue';
 import Loader from '@martyrs/src/components/Loader/Loader.vue';
+import TrackListCard from '../cards/TrackListCard.vue';
 
 // Import store
 import * as artistsStore from '../../store/artists';
@@ -309,9 +322,12 @@ const { formatDate } = useGlobalMixins();
 const router = useRouter();
 const route = useRoute();
 
+// Emits
+const emits = defineEmits(['page-loading', 'page-loaded']);
+
 // State
-const isLoading = ref(true);
 const genres = ref([]);
+const hasLoaded = ref(false);
 
 // Computed
 const artist = computed(() => {
@@ -326,6 +342,10 @@ const relatedArtists = computed(() => {
   return artistsStore.state.relatedArtists;
 });
 
+const artistTracks = computed(() => {
+  return artistsStore.state.discography.tracks || [];
+});
+
 const isOwner = computed(() => {
   if (!artist.value || !auth.state.user._id) return false;
   
@@ -333,9 +353,18 @@ const isOwner = computed(() => {
   return artist.value.creator?.target?._id === auth.state.user._id;
 });
 
+// Clear current artist state
+artistsStore.state.currentArtist = null;
+// Clear discography state
+artistsStore.state.discography = {
+  albums: [],
+  singles: [],
+  tracks: []
+};
+artistsStore.state.relatedArtists = [];
+
 // Methods
 const fetchArtist = async () => {
-  isLoading.value = true;
   try {
     // Get URL from route params
     const url = route.params.url;
@@ -344,90 +373,21 @@ const fetchArtist = async () => {
     }
     
     await artistsStore.actions.fetchArtistByUrl(url);
-    
-    // Fetch genre details if we have genre IDs
-    if (artist.value?.genre && artist.value.genre.length > 0) {
-      await fetchGenres();
-    }
   } catch (error) {
     console.error('Error fetching artist:', error);
     globals.actions.setError({
       message: 'Failed to load artist'
     });
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const fetchGenres = async () => {
-  try {
-    // Assuming genreStore has a method to fetch multiple genres by IDs
-    // const fetchedGenres = await genreStore.actions.fetchGenresByIds(artist.value.genre);
-    // genres.value = fetchedGenres;
-  } catch (error) {
-    console.error('Error fetching genres:', error);
   }
 };
 
-const editArtist = () => {
-  router.push({
-    name: 'artist-edit',
-    params: { url: artist.value.url }
-  });
-};
-
-const manageContent = () => {
-  // Navigate to a page for managing artist content (albums, tracks, etc.)
-  router.push({
-    name: 'artist-manage-content',
-    params: { artistId: artist.value._id }
-  });
-};
-
-const navigateToAlbum = (album) => {
-  router.push({
-    name: 'album',
-    params: { url: album.url }
-  });
-};
-
-const navigateToTrack = (track) => {
-  router.push({
-    name: 'track',
-    params: { url: track.url }
-  });
-};
-
-const navigateToArtist = (artist) => {
-  router.push({
-    name: 'artist',
-    params: { url: artist.url }
-  });
-};
-
-const viewAllAlbums = () => {
-  router.push({
-    name: 'artist-albums',
-    params: { artistId: artist.value._id }
-  });
-};
-
-const viewAllSingles = () => {
-  router.push({
-    name: 'artist-singles',
-    params: { artistId: artist.value._id }
-  });
-};
-
-const addRelease = () => {
-  router.push({
-    name: 'release-create',
-    query: { artistId: artist.value._id }
-  });
-};
-
 // Lifecycle hooks
 onMounted(async () => {
+  emits('page-loading');
+  
   await fetchArtist();
+  
+  hasLoaded.value = true;
+  emits('page-loaded');
 });
 </script>

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

@@ -1,52 +1,13 @@
 <!-- components/pages/MusicHome.vue -->
 <template>
   <div class="music-home-page pd-medium mobile:pd-thin">
-    <!-- Featured Playlists Section -->
-    <section class="mn-b-medium">
-      <div class="flex-between flex mn-b-small">
-        <h2 class="">Featured Playlists</h2>
-        <router-link :to="{ path: '/music/playlists' }" class="t-main t-small hover-opacity">See all</router-link>
-      </div>
-      
-      <Feed
-        :showLoadMore="false"
-        :LoadMore="false"
-        :states="{
-          empty: {
-            title: 'No Playlists',
-            description: 'No featured playlists available at the moment.'
-          }
-        }"
-        :store="{
-          read: (options) => playlistsActions.fetchFeaturedPlaylists(options),
-          state: playlistsState
-        }"
-        :options="{
-          limit: 5,
-          featured: true
-        }"
-        :skeleton="{
-          structure: [
-            { block: 'square', size: 'large', rounded: false },
-            { block: 'text', size: 'medium' },
-            { block: 'text', size: 'small' }
-          ],
-          horizontal: false
-        }"
-        v-slot="{ items }"
-        class="cols-5 mobile:cols-2 gap-small"
-      >
-        <li v-for="playlist in items" :key="playlist._id">
-          <PlaylistCard :playlist="playlist" class="hover-scale-1 transition-cubic-in-out" />
-        </li>
-      </Feed>
-    </section>
+    
     
     <!-- New Releases Section -->
-    <section class="mn-b-medium">
+    <section class="mn-b-semi">
       <div class="flex-between flex mn-b-small">
-        <h2 class="">New Releases</h2>
-        <router-link :to="{ path: '/music/albums' }" class="t-main t-small hover-opacity">See all</router-link>
+        <h3 class="">New Releases</h3>
+        <!-- <router-link :to="{ path: '/music/albums' }" class="t-main t-small hover-opacity">See all</router-link> -->
       </div>
       
       <Feed
@@ -59,7 +20,7 @@
           }
         }"
         :store="{
-          read: (options) => albumsActions.fetchAlbums(options),
+          read: (options) => albumsActions.fetchFeaturedAlbums(options),
           state: albumsState
         }"
         :options="{
@@ -73,22 +34,24 @@
             { block: 'text', size: 'medium' },
             { block: 'text', size: 'small' }
           ],
-          horizontal: false
+          horizontal: false,
+          class: 'h-max-15r'
         }"
         v-slot="{ items }"
-        class="cols-4 mobile:cols-2 gap-small"
+        class="flex flex-nowrap gap-small o-x-scroll overscroll-behavior-x-contain scroll-behavior-smooth scroll-snap-type-x-mandatory scroll-hide"
       >
-        <li v-for="album in items" :key="album._id">
-          <AlbumCard :album="album" class="hover-scale-1 transition-cubic-in-out" />
-        </li>
+          <li v-for="album in items" :key="album._id" class="flex-none scroll-snap-align-start">
+            <AlbumCard :album="album" class="w-min-15r transition-cubic-in-out" />
+          </li>
+
       </Feed>
     </section>
     
     <!-- Popular Tracks Section -->
     <section class="mn-b-medium">
       <div class="flex-between flex mn-b-small">
-        <h2 class="">Popular Tracks</h2>
-        <router-link :to="{ path: '/music/tracks' }" class="t-main t-small hover-opacity">See all</router-link>
+        <h3 class="">Popular Tracks</h3>
+        <!-- <router-link :to="{ path: '/music/tracks' }" class="t-main t-small hover-opacity">See all</router-link> -->
       </div>
       
       <Feed
@@ -118,7 +81,7 @@
         v-slot="{ items }"
         class="gap-zero"
       >
-        <div class="bg-dark-transp-10 radius-medium o-hidden">
+        <div class="bg-light radius-medium o-hidden">
           <TrackListCard
             v-for="(track, index) in items"
             :key="track._id"
@@ -130,12 +93,53 @@
         </div>
       </Feed>
     </section>
+
+    <!-- Featured Playlists Section -->
+    <section class="mn-b-medium">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="">Featured Playlists</h2>
+        <!-- <router-link :to="{ path: '/music/playlists' }" class="t-main t-small hover-opacity">See all</router-link> -->
+      </div>
+      
+      <Feed
+        :showLoadMore="false"
+        :LoadMore="false"
+        :states="{
+          empty: {
+            title: 'No Playlists',
+            description: 'No featured playlists available at the moment.'
+          }
+        }"
+        :store="{
+          read: (options) => playlistsActions.fetchFeaturedPlaylists(options),
+          state: playlistsState
+        }"
+        :options="{
+          limit: 5,
+          featured: true
+        }"
+        :skeleton="{
+          structure: [
+            { block: 'square', size: 'large', rounded: false },
+            { block: 'text', size: 'medium' },
+            { block: 'text', size: 'small' }
+          ],
+          horizontal: false
+        }"
+        v-slot="{ items }"
+        class="cols-5 mobile:cols-2 gap-small"
+      >
+        <li v-for="playlist in items" :key="playlist._id">
+          <PlaylistCard :playlist="playlist" class="hover-scale-1 transition-cubic-in-out" />
+        </li>
+      </Feed>
+    </section>
     
     <!-- Top Artists Section -->
     <section>
       <div class="flex-between flex mn-b-small">
         <h2 class="">Top Artists</h2>
-        <router-link :to="{ path: '/music/artists' }" class="t-main t-small hover-opacity">See all</router-link>
+        <!-- <router-link :to="{ path: '/music/artists' }" class="t-main t-small hover-opacity">See all</router-link> -->
       </div>
       
       <Feed
@@ -165,8 +169,8 @@
         v-slot="{ items }"
         class="cols-6 mobile:cols-3 gap-small"
       >
-        <li v-for="artist in items" :key="artist._id">
-          <ArtistCard :artist="artist" class="hover-scale-1 transition-cubic-in-out" />
+        <li class="flex-child-default w-100" v-for="artist in items" :key="artist._id">
+          <ArtistCard :artist="artist" class="hover-scale-1 flex-child-default transition-cubic-in-out" />
         </li>
       </Feed>
     </section>
@@ -179,7 +183,6 @@ import Feed from '@martyrs/src/components/Feed/Feed.vue';
 import PlaylistCard from '../cards/PlaylistCard.vue';
 import AlbumCard from '../cards/AlbumCard.vue';
 import ArtistCard from '../cards/ArtistCard.vue';
-import TrackCard from '../cards/TrackCard.vue';
 import TrackListCard from '../cards/TrackListCard.vue';
 
 // Store imports

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

@@ -38,10 +38,10 @@
       
       <Feed
         :store="{
-          read: (options) => playlistsActions.fetchPlaylists({ ...options, owner: { type: 'user', target: authState.user._id } }),
+          read: (options) => playlistsActions.fetchPlaylists(options),
           state: playlistsState
         }"
-        :options="{ owner: { type: 'user', target: authState.user._id } }"
+        :options="{ creator: authState.user._id  }"
         :states="{
           empty: {
             title: 'No playlists yet',
@@ -172,14 +172,16 @@
         class="gap-medium"
       >
         <template #default="{ items }">
-          <TrackCard
-            v-for="track in items"
-            :key="track._id"
-            :track="track"
-            :showAlbum="true"
-            :showCover="true"
-            class="w-100 bg-dark-transp-10 radius-medium"
-          />
+          <div class="bg-light radius-medium o-hidden">
+            <TrackListCard
+              v-for="(track, index) in items"
+              :key="track._id"
+              :track="track"
+              :index="index"
+              :showAlbum="true"
+              :showCover="true"
+            />
+          </div>
         </template>
       </Feed>
     </div>
@@ -191,7 +193,7 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import Feed from '@martyrs/src/components/Feed/Feed.vue';
-import TrackCard from '../cards/TrackCard.vue';
+import TrackListCard from '../cards/TrackListCard.vue';
 import AlbumCard from '../cards/AlbumCard.vue';
 import PlaylistCard from '../cards/PlaylistCard.vue';
 import ArtistCard from '../cards/ArtistCard.vue';