@ozdao/martyrs 0.2.470 → 0.2.471

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

@@ -0,0 +1,177 @@
+<!-- components/pages/MusicHome.vue -->
+<template>
+  <div class="music-home-page">
+    <!-- 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">
+        <h2 class="t-white">Featured Playlists</h2>
+        <router-link :to="{ path: '/music/playlists' }" class="t-main t-small hover-opacity">See all</router-link>
+      </div>
+      
+      <Feed
+        v-model:items="featuredPlaylists"
+        :isLoading="loadingFeatured"
+        :showLoadMore="false"
+        :skeleton="{
+          structure: [
+            { block: 'square', size: 'large', rounded: false },
+            { block: 'text', size: 'medium' },
+            { block: 'text', size: 'small' }
+          ],
+          horizontal: false
+        }"
+        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>
+      </Feed>
+    </section>
+    
+    <!-- New Releases Section -->
+    <section class="mn-b-medium">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="t-white">New Releases</h2>
+        <router-link :to="{ path: '/music/albums' }" class="t-main t-small hover-opacity">See all</router-link>
+      </div>
+      
+      <Feed
+        v-model:items="recentAlbums"
+        :isLoading="loadingRecentAlbums"
+        :showLoadMore="false"
+        :skeleton="{
+          structure: [
+            { block: 'square', size: 'large', rounded: false },
+            { block: 'text', size: 'medium' },
+            { block: 'text', size: 'small' }
+          ],
+          horizontal: false
+        }"
+        class="cols-5 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>
+      </Feed>
+    </section>
+    
+    <!-- Popular Tracks Section -->
+    <section class="mn-b-medium">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="t-white">Popular Tracks</h2>
+        <router-link :to="{ path: '/music/tracks' }" class="t-main t-small hover-opacity">See all</router-link>
+      </div>
+      
+      <Feed
+        v-model:items="popularTracks"
+        :isLoading="loadingPopularTracks"
+        :showLoadMore="false"
+        :skeleton="{
+          structure: [
+            { block: 'text', size: 'medium' },
+            { block: 'text', size: 'small' }
+          ],
+          horizontal: true
+        }"
+      >
+        <template #default="{ items }">
+          <TrackList 
+            :tracks="items" 
+            :showAlbum="true" 
+            :showCover="true"
+            class="bg-dark-transp-10 radius-medium o-hidden"
+          />
+        </template>
+      </Feed>
+    </section>
+    
+    <!-- Top Artists Section -->
+    <section>
+      <div class="flex-between flex mn-b-small">
+        <h2 class="t-white">Top Artists</h2>
+        <router-link :to="{ path: '/music/artists' }" class="t-main t-small hover-opacity">See all</router-link>
+      </div>
+      
+      <Feed
+        v-model:items="topArtists"
+        :isLoading="loadingTopArtists"
+        :showLoadMore="false"
+        :skeleton="{
+          structure: [
+            { block: 'circle', size: 'large' },
+            { block: 'text', size: 'medium' }
+          ],
+          horizontal: false
+        }"
+        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>
+      </Feed>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+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';
+
+// 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>
+.bg-gradient-dark {
+  background: linear-gradient(to bottom, rgba(var(--dark), 0.8), rgba(var(--black), 0.9));
+}
+</style>

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

@@ -0,0 +1,192 @@
+<!-- components/pages/MusicLibrary.vue -->
+<template>
+  <div class="music-library-page">
+    <h1 class="t-white mn-b-medium">Your Library</h1>
+    
+    <!-- Filter Tabs -->
+    <div class="library-tabs mn-b-medium">
+      <div class="flex gap-small">
+        <Button 
+          v-for="tab in tabs"
+          :key="tab.id"
+          @click="activeTab = tab.id"
+          :class="[
+            activeTab === tab.id ? 'bg-white t-black' : 'bg-dark-transp-50 t-white hover-bg-dark',
+          ]"
+          class="radius-extra pd-small"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          {{ tab.label }}
+        </Button>
+      </div>
+    </div>
+    
+    <!-- Content based on active tab -->
+    <div v-if="isLoading" class="flex-center flex pd-big">
+      <Loader />
+    </div>
+    
+    <!-- Playlists Tab -->
+    <div v-else-if="activeTab === 'playlists'" class="playlists-tab">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="t-white">Your Playlists</h2>
+        <Button 
+          @click="showCreatePlaylistModal = true"
+          class="bg-main t-white radius-small pd-small hover-scale-1"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Create Playlist
+        </Button>
+      </div>
+      
+      <div v-if="userPlaylists.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
+        <h3 class="t-white mn-b-small">No playlists yet</h3>
+        <p class="t-grey t-medium">Create your first playlist to see it here</p>
+      </div>
+      
+      <PlaylistList v-else :playlists="userPlaylists" />
+    </div>
+    
+    <!-- Albums Tab -->
+    <div v-else-if="activeTab === 'albums'" class="albums-tab">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="t-white">Your Albums</h2>
+      </div>
+      
+      <div v-if="userAlbums.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
+        <h3 class="t-white mn-b-small">No albums yet</h3>
+        <p class="t-grey t-medium">Upload your first album to see it here</p>
+      </div>
+      
+      <AlbumList v-else :albums="userAlbums" />
+    </div>
+    
+    <!-- Artists Tab -->
+    <div v-else-if="activeTab === 'artists'" class="artists-tab">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="t-white">Your Artists</h2>
+      </div>
+      
+      <div v-if="userArtists.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
+        <h3 class="t-white mn-b-small">No artists yet</h3>
+        <p class="t-grey t-medium">Create your first artist profile to see it here</p>
+      </div>
+      
+      <ArtistList v-else :artists="userArtists" />
+    </div>
+    
+    <!-- Tracks Tab -->
+    <div v-else-if="activeTab === 'tracks'" class="tracks-tab">
+      <div class="flex-between flex mn-b-small">
+        <h2 class="t-white">Your Tracks</h2>
+        <Button 
+          @click="$router.push({ name: 'music-upload' })"
+          class="bg-main t-white radius-small pd-small hover-scale-1"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Upload Track
+        </Button>
+      </div>
+      
+      <div v-if="userTracks.length === 0" class="empty-state t-center pd-big bg-dark-transp-10 radius-medium">
+        <h3 class="t-white mn-b-small">No tracks yet</h3>
+        <p class="t-grey t-medium">Upload your first track to see it here</p>
+      </div>
+      
+      <TrackList 
+        v-else
+        :tracks="userTracks"
+        :showAlbum="true" 
+        :showCover="true"
+        class="bg-dark-transp-10 radius-medium o-hidden"
+      />
+    </div>
+    
+        <!-- Create Playlist Modal -->
+    <Popup 
+      v-if="showCreatePlaylistModal" 
+      @close-popup="showCreatePlaylistModal = false" 
+      class="bg-dark pd-small w-m-25r radius-medium t-white"
+    >
+      <h3 class="mn-b-medium">Create Playlist</h3>
+      <PlaylistForm @created="onPlaylistCreated" @cancel="showCreatePlaylistModal = false" />
+    </Popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import TrackList from '../lists/TrackList.vue';
+import AlbumList from '../lists/AlbumList.vue';
+import PlaylistList from '../lists/PlaylistList.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 Popup from '@martyrs/src/components/Popup/Popup.vue';
+import PlaylistForm from '../forms/PlaylistForm.vue';
+
+// Import store modules
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+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 artistsState, actions as artistsActions } from '../../store/artists.js';
+import { state as tracksState, actions as tracksActions } from '../../store/tracks.js';
+
+const router = useRouter();
+
+// State
+const isLoading = ref(true);
+const activeTab = ref('playlists');
+const showCreatePlaylistModal = ref(false);
+
+// Tabs configuration
+const tabs = [
+  { id: 'playlists', label: 'Playlists' },
+  { id: 'albums', label: 'Albums' },
+  { id: 'artists', label: 'Artists' },
+  { id: 'tracks', label: 'Tracks' }
+];
+
+// Computed
+const userPlaylists = ref([]);
+const userAlbums = ref([]);
+const userArtists = ref([]);
+const userTracks = ref([]);
+
+// Methods
+const fetchLibraryData = async () => {
+  isLoading.value = true;
+  
+  try {
+    if (!authState.user || !authState.user._id) {
+      router.push({ name: 'Sign In', query: { redirect: router.currentRoute.value.fullPath } });
+      return;
+    }
+    
+    // Fetch user's content
+    await Promise.all([
+      // playlistsActions.fetchUserPlaylists().then(playlists => userPlaylists.value = playlists || []),
+      // albumsActions.fetchUserAlbums(authState.user._id).then(albums => userAlbums.value = albums || []),
+      // artistsActions.fetchUserArtists(authState.user._id).then(artists => userArtists.value = artists || []),
+      tracksActions.fetchUserTracks(authState.user._id).then(tracks => userTracks.value = tracks || [])
+    ]);
+  } catch (error) {
+    console.error('Error fetching library data:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+const onPlaylistCreated = (playlist) => {
+  userPlaylists.value.unshift(playlist);
+  showCreatePlaylistModal.value = false;
+  router.push({ name: 'playlist-detail', params: { url: playlist.url } });
+};
+
+// Fetch library data when component mounts
+onMounted(fetchLibraryData);
+</script>

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

@@ -0,0 +1,44 @@
+<!-- components/pages/MusicUpload.vue -->
+<template>
+  <div class="music-upload-page">
+    <h1 class="t-white mn-b-medium">Upload Music</h1>
+    
+    <div class="upload-container bg-dark-transp-10 radius-medium pd-medium">
+      <div v-if="!authState.access.status" class="t-center pd-big">
+        <h2 class="t-white mn-b-small">Sign in to upload</h2>
+        <p class="t-grey t-medium mn-b-medium">You need to be signed in to upload tracks</p>
+        <Button 
+          @click="$router.push({ name: 'Sign In', query: { redirect: $route.fullPath } })"
+          class="bg-main t-white radius-small pd-small hover-scale-1"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Sign In
+        </Button>
+      </div>
+      
+      <div v-else>
+        <h2 class="t-white mn-b-medium">Upload a Track</h2>
+        
+        <UploadForm @uploaded="onTrackUploaded" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import UploadForm from '../forms/UploadForm.vue';
+
+// Import auth store
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+
+const router = useRouter();
+
+const onTrackUploaded = (track) => {
+  // Navigate to the uploaded track's detail page
+  router.push({ name: 'track-detail', params: { url: track.url } });
+};
+</script>