@ozdao/martyrs 0.2.485 → 0.2.487

package/src/modules/music/components/pages/{AlbumDetail.vue → Album.vue}

@@ -1,12 +1,12 @@
-<!-- components/pages/AlbumDetail.vue -->
+<!-- components/pages/Album.vue -->
 <template>
-  <div class="album-detail-page">
+  <div class="album-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>
+      <h2 class="">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>
     
@@ -21,18 +21,18 @@
         </div>
         
         <div class="album-info">
-          <div class="t-small t-uppercase t-white">Album</div>
-          <h1 class="t-white">{{ album.title }}</h1>
+          <div class="t-small t-uppercase ">Album</div>
+          <h1 class="">{{ 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"
+              :to="{ name: 'artist', params: { url: album.artist.url } }"
+              class=" t-medium hover-t-main"
             >
               {{ getArtistName(album) }}
             </router-link>
-            <span v-else class="t-white t-medium">{{ getArtistName(album) }}</span>
+            <span v-else class=" t-medium">{{ getArtistName(album) }}</span>
             
             <span class="t-grey mn-l-small mn-r-small">•</span>
             
@@ -81,7 +81,7 @@
               <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"
+                  class="bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small"
                   :showLoader="false" 
                   :showSucces="false"
                 >
@@ -91,7 +91,7 @@
               <li>
                 <Button 
                   @click="copyLink"
-                  class="bg-transparent border-none pd-thin t-white w-100 t-left hover-bg-dark radius-small"
+                  class="bg-transparent border-none pd-thin  w-100 t-left hover-bg-dark radius-small"
                   :showLoader="false" 
                   :showSucces="false"
                 >
@@ -105,27 +105,48 @@
       
       <!-- Album Tracks -->
       <div class="album-tracks">
-        <TrackList 
-          :tracks="albumTracks"
-          :showAlbum="false"
-          :showCover="false"
-          class="bg-dark-transp-10 radius-medium o-hidden"
-        />
+        <Feed
+          :store="{
+            read: () => Promise.resolve(albumTracks),
+            state: { isLoading: false }
+          }"
+          :external="true"
+          :items="albumTracks"
+          :states="{
+            empty: {
+              title: 'No tracks in album',
+              description: 'This album appears to be empty',
+              class: 'pd-medium bg-dark-transp-10 radius-medium'
+            }
+          }"
+          class="gap-thin"
+        >
+          <template #default="{ items }">
+            <TrackCard
+              v-for="track in items"
+              :key="track._id"
+              :track="track"
+              :showAlbum="false"
+              :showCover="false"
+              class="w-100 bg-dark-transp-10 radius-medium"
+            />
+          </template>
+        </Feed>
       </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>
+        <h3 class=" 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>
+          <h2 class="">More by {{ getArtistName(album) }}</h2>
           <router-link 
             v-if="album.artist && album.artist._id"
-            :to="{ name: 'artist-detail', params: { url: album.artist.url } }" 
+            :to="{ name: 'artist', params: { url: album.artist.url } }" 
             class="t-main t-small hover-opacity"
           >
             See all
@@ -145,7 +166,8 @@
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import TrackList from '../lists/TrackList.vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
+import TrackCard from '../cards/TrackCard.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';

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

@@ -0,0 +1,7 @@
+<template>
+  <AlbumForm :editMode="false" />
+</template>
+
+<script setup>
+import AlbumForm from '../forms/AlbumForm.vue';
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <AlbumForm :editMode="true" :url="url" />
+</template>
+
+<script setup>
+import AlbumForm from '../forms/AlbumForm.vue';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  }
+});
+</script>

package/src/modules/music/components/pages/{ArtistDetail.vue → Artist.vue}

@@ -11,7 +11,7 @@
       <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
         :submit="() => router.push({ name: 'music-home' })"
-        class="bg-main t-white"
+        class="bg-main "
         :showSucces="false"
         :showLoader="false"
       >
@@ -23,7 +23,7 @@
     <div v-else>
       <!-- Cover image -->
       <div 
-        class="w-100 h-50vh pos-relative"
+        class="w-100 t-white h-50vh pos-relative"
         :style="artist.coverUrl ? `background-image: url(${FILE_SERVER_URL + artist.coverUrl}); background-size: cover; background-position: center;` : ''"
       >
         <div class="pos-absolute pos-t-0 pos-l-0 w-100 h-100 bg-blur-small" :class="artist.coverUrl ? 'bg-black-transp-50' : 'bg-black'"></div>
@@ -32,7 +32,7 @@
         <div v-if="isOwner" class="pos-absolute pos-t-medium pos-r-medium z-index-1">
           <Button
             :submit="editArtist"
-            class="bg-main t-white mn-r-small"
+            class="bg-main  mn-r-small"
             :showSucces="false"
             :showLoader="false"
           >
@@ -50,7 +50,7 @@
         </div>
         
         <!-- Artist profile info -->
-        <div class="flex-v-center pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center">
+        <div class="flex-v-center t-white  pos-absolute pos-b-0 pos-l-0 w-100 pd-medium z-index-1 flex mobile:flex-column mobile:flex-h-center">
           <div class="w-15r h-15r radius-medium o-hidden mn-r-medium bs-black mobile:mn-r-0 mobile:mn-b-medium">
             <img
               v-if="artist.photoUrl"
@@ -63,7 +63,7 @@
             </div>
           </div>
           
-          <div class="t-white mobile:t-center">
+          <div class=" mobile:t-center">
             <div class="flex-v-center flex-nowrap flex mn-b-small mobile:flex-center">
               <h1 class="h1 mn-r-small">{{ artist.name }}</h1>
               <span v-if="artist.isVerified" class="bg-main-nano pd-micro radius-small">
@@ -245,7 +245,7 @@
               <Button
                 v-if="isOwner"
                 :submit="addRelease"
-                class="mn-t-medium bg-main t-white"
+                class="mn-t-medium bg-main "
                 :showSucces="false"
                 :showLoader="false"
               >
@@ -386,21 +386,21 @@ const manageContent = () => {
 
 const navigateToAlbum = (album) => {
   router.push({
-    name: 'album-detail',
+    name: 'album',
     params: { url: album.url }
   });
 };
 
 const navigateToTrack = (track) => {
   router.push({
-    name: 'track-detail',
+    name: 'track',
     params: { url: track.url }
   });
 };
 
 const navigateToArtist = (artist) => {
   router.push({
-    name: 'artist-detail',
+    name: 'artist',
     params: { url: artist.url }
   });
 };

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

@@ -0,0 +1,7 @@
+<template>
+  <ArtistForm :editMode="false" />
+</template>
+
+<script setup>
+import ArtistForm from '../forms/ArtistForm.vue';
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <ArtistForm :editMode="true" :url="url" />
+</template>
+
+<script setup>
+import ArtistForm from '../forms/ArtistForm.vue';
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true
+  }
+});
+</script>

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

@@ -1,12 +1,6 @@
 <!-- components/pages/MusicHome.vue -->
 <template>
   <div class="music-home-page pd-medium mobile:pd-thin">
-    <!-- Hero Section -->
-    <section class="bg-gradient-dark pd-medium radius-medium mn-b-medium">
-      <h1 class="t-white mn-b-small">Welcome to Music</h1>
-      <p class="t-grey t-medium">Discover new tracks, albums, and playlists</p>
-    </section>
-    
     <!-- Featured Playlists Section -->
     <section class="mn-b-medium">
       <div class="flex-between flex mn-b-small">
@@ -15,9 +9,22 @@
       </div>
       
       <Feed
-        v-model:items="featuredPlaylists"
-        :isLoading="loadingFeatured"
         :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 },
@@ -26,13 +33,12 @@
           ],
           horizontal: false
         }"
+        v-slot="{ items }"
         class="cols-5 mobile:cols-2 gap-small"
       >
-        <template #default="{ items }">
-          <li v-for="playlist in items" :key="playlist._id">
-            <PlaylistCard :playlist="playlist" class="hover-scale-1 transition-cubic-in-out" />
-          </li>
-        </template>
+        <li v-for="playlist in items" :key="playlist._id">
+          <PlaylistCard :playlist="playlist" class="hover-scale-1 transition-cubic-in-out" />
+        </li>
       </Feed>
     </section>
     
@@ -44,9 +50,23 @@
       </div>
       
       <Feed
-        v-model:items="recentAlbums"
-        :isLoading="loadingRecentAlbums"
         :showLoadMore="false"
+        :LoadMore="false"
+        :states="{
+          empty: {
+            title: 'No New Releases',
+            description: 'No new albums available at the moment.'
+          }
+        }"
+        :store="{
+          read: (options) => albumsActions.fetchAlbums(options),
+          state: albumsState
+        }"
+        :options="{
+          limit: 4,
+          sortParam: 'releaseDate',
+          sortOrder: 'desc'
+        }"
         :skeleton="{
           structure: [
             { block: 'square', size: 'large', rounded: false },
@@ -55,13 +75,12 @@
           ],
           horizontal: false
         }"
-        class="cols-5 mobile:cols-2 gap-small"
+        v-slot="{ items }"
+        class="cols-4 mobile:cols-2 gap-small"
       >
-        <template #default="{ items }">
-          <li v-for="album in items" :key="album._id">
-            <AlbumCard :album="album" class="hover-scale-1 transition-cubic-in-out" />
-          </li>
-        </template>
+        <li v-for="album in items" :key="album._id">
+          <AlbumCard :album="album" class="hover-scale-1 transition-cubic-in-out" />
+        </li>
       </Feed>
     </section>
     
@@ -73,9 +92,22 @@
       </div>
       
       <Feed
-        v-model:items="popularTracks"
-        :isLoading="loadingPopularTracks"
         :showLoadMore="false"
+        :LoadMore="false"
+        :states="{
+          empty: {
+            title: 'No Popular Tracks',
+            description: 'No popular tracks available at the moment.'
+          }
+        }"
+        :store="{
+          read: (options) => tracksActions.fetchPopularTracks(options),
+          state: tracksState
+        }"
+        :options="{
+          limit: 10,
+          popular: true
+        }"
         :skeleton="{
           structure: [
             { block: 'text', size: 'medium' },
@@ -83,15 +115,19 @@
           ],
           horizontal: true
         }"
+        v-slot="{ items }"
+        class="gap-zero"
       >
-        <template #default="{ items }">
-          <TrackList 
-            :tracks="items" 
-            :showAlbum="true" 
+        <div class="bg-dark-transp-10 radius-medium o-hidden">
+          <TrackListCard
+            v-for="(track, index) in items"
+            :key="track._id"
+            :track="track"
+            :index="index"
+            :showAlbum="true"
             :showCover="true"
-            class="bg-dark-transp-10 radius-medium o-hidden"
           />
-        </template>
+        </div>
       </Feed>
     </section>
     
@@ -103,9 +139,22 @@
       </div>
       
       <Feed
-        v-model:items="topArtists"
-        :isLoading="loadingTopArtists"
         :showLoadMore="false"
+        :LoadMore="false"
+        :states="{
+          empty: {
+            title: 'No Artists',
+            description: 'No top artists available at the moment.'
+          }
+        }"
+        :store="{
+          read: (options) => artistsActions.fetchTopArtists(options),
+          state: artistsState
+        }"
+        :options="{
+          limit: 6,
+          top: true
+        }"
         :skeleton="{
           structure: [
             { block: 'circle', size: 'large' },
@@ -113,13 +162,12 @@
           ],
           horizontal: false
         }"
+        v-slot="{ items }"
         class="cols-6 mobile:cols-3 gap-small"
       >
-        <template #default="{ items }">
-          <li v-for="artist in items" :key="artist._id">
-            <ArtistCard :artist="artist" class="hover-scale-1 transition-cubic-in-out" />
-          </li>
-        </template>
+        <li v-for="artist in items" :key="artist._id">
+          <ArtistCard :artist="artist" class="hover-scale-1 transition-cubic-in-out" />
+        </li>
       </Feed>
     </section>
   </div>
@@ -131,43 +179,14 @@ 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 TrackList from '../lists/TrackList.vue';
+import TrackCard from '../cards/TrackCard.vue';
+import TrackListCard from '../cards/TrackListCard.vue';
 
 // Store imports
 import { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';
 import { state as albumsState, actions as albumsActions } from '../../store/albums.js';
 import { state as tracksState, actions as tracksActions } from '../../store/tracks.js';
 import { state as artistsState, actions as artistsActions } from '../../store/artists.js';
-
-// Computed properties
-const featuredPlaylists = computed(() => playlistsState.featuredPlaylists);
-const recentAlbums = computed(() => albumsState.albums);
-const popularTracks = computed(() => tracksState.popular);
-const topArtists = computed(() => artistsState.topArtists);
-
-// Loading states
-const loadingFeatured = computed(() => playlistsState.loadingFeatured);
-const loadingRecentAlbums = computed(() => albumsState.isLoading);
-const loadingPopularTracks = computed(() => tracksState.loadingPopular);
-const loadingTopArtists = computed(() => artistsState.loadingTopArtists);
-
-onMounted(async () => {
-  // Fetch featured playlists
-  playlistsActions.fetchFeaturedPlaylists(5);
-  
-  // Fetch recent albums
-  albumsActions.fetchAlbums({
-    limit: 5,
-    sortParam: 'releaseDate',
-    sortOrder: 'desc'
-  });
-  
-  // Fetch popular tracks
-  tracksActions.fetchPopularTracks(10);
-  
-  // Fetch top artists
-  artistsActions.fetchTopArtists(6);
-});
 </script>
 
 <style scoped>