@ozdao/martyrs 0.2.469 → 0.2.471

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>

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>