@ozdao/martyrs 0.2.477 → 0.2.479

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

@@ -1,247 +1,433 @@
-<!-- components/pages/ArtistDetail.vue -->
 <template>
-  <div class="artist-detail-page">
-    <div v-if="isLoading" class="w-100 h-25r flex-center flex">
+  <div>
+    <!-- Loading state -->
+    <div v-if="isLoading" class="flex-center flex pd-extra">
       <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>
+    <!-- Artist not found -->
+    <div v-else-if="!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
+        :submit="() => router.push({ name: 'music-home' })"
+        class="bg-main t-white"
+        :showSucces="false"
+        :showLoader="false"
+      >
+        Back to Music
+      </Button>
     </div>
     
+    <!-- Artist content -->
     <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>
+      <!-- Cover image -->
+      <div 
+        class="w-100 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>
+        
+        <!-- Artist actions for edit/manage -->
+        <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"
+            :showSucces="false"
+            :showLoader="false"
+          >
+            Edit Artist
+          </Button>
+          
+          <Button
+            :submit="manageContent"
+            class="bg-white t-black"
+            :showSucces="false"
+            :showLoader="false"
+          >
+            Manage Content
+          </Button>
         </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"
+        <!-- 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="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"
+              :src="FILE_SERVER_URL + artist.photoUrl"
+              alt="Artist photo"
+              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>
+            </div>
           </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 class="t-white 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">
+                ✓ Verified
+              </span>
             </div>
-            <h1 class="t-white">{{ artist.name }}</h1>
             
-            <div class="artist-stats mn-t-small t-grey">
-              {{ formatFollowersCount(artist.popularity || 0) }} followers
+            <p v-if="artist.location" class="p-medium mn-b-small">{{ artist.location }}</p>
+            
+            <!-- Social media links -->
+            <div class="flex flex-nowrap gap-small mobile:flex-center">
+              <a 
+                v-if="artist.socials.telegram" 
+                :href="`https://t.me/${artist.socials.telegram}`" 
+                target="_blank"
+                class="bg-white t-black flex-center flex w-2r h-2r radius-extra"
+              >
+                <span>T</span>
+              </a>
+              
+              <a 
+                v-if="artist.socials.twitter" 
+                :href="`https://twitter.com/${artist.socials.twitter}`" 
+                target="_blank"
+                class="bg-white t-black flex-center flex w-2r h-2r radius-extra"
+              >
+                <span>𝕏</span>
+              </a>
+              
+              <a 
+                v-if="artist.socials.instagram" 
+                :href="`https://instagram.com/${artist.socials.instagram}`" 
+                target="_blank"
+                class="bg-white t-black flex-center flex w-2r h-2r radius-extra"
+              >
+                <span>I</span>
+              </a>
+              
+              <a 
+                v-if="artist.socials.facebook" 
+                :href="`https://facebook.com/${artist.socials.facebook}`" 
+                target="_blank"
+                class="bg-white t-black flex-center flex w-2r h-2r radius-extra"
+              >
+                <span>F</span>
+              </a>
+              
+              <a 
+                v-if="artist.website" 
+                :href="artist.website" 
+                target="_blank"
+                class="bg-white t-black flex-center flex w-2r h-2r radius-extra"
+              >
+                <span>W</span>
+              </a>
             </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>
+      <!-- Main content -->
+      <div class="pd-medium">
+        <div class="cols-2-1_2 gap-medium mobile:cols-1">
+          <!-- Left column - Bio and details -->
+          <div>
+            <div class="bg-light pd-medium radius-medium mn-b-medium">
+              <h2 class="h3 mn-b-small">Biography</h2>
+              <p v-if="artist.bio" class="p-medium">{{ artist.bio }}</p>
+              <p v-else class="p-medium t-transp">No biography available for this artist.</p>
+            </div>
+            
+            <!-- Genres -->
+            <div v-if="genres.length > 0" class="bg-light pd-medium radius-medium">
+              <h2 class="h3 mn-b-small">Genres</h2>
+              <div class="flex flex-wrap gap-small">
+                <span 
+                  v-for="genre in genres" 
+                  :key="genre._id"
+                  class="bg-white pd-thin radius-medium"
+                >
+                  {{ genre.name }}
+                </span>
+              </div>
+            </div>
+          </div>
           
-          <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"
+          <!-- Right column - Discography -->
+          <div>
+            <!-- Albums section -->
+            <div v-if="discography.albums.length > 0" class="bg-light pd-medium radius-medium mn-b-medium">
+              <h2 class="h3 mn-b-medium">Albums</h2>
+              
+              <div class="cols-2 gap-small mobile:cols-1">
+                <div
+                  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)"
                 >
-                  <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 class="w-3r h-3r radius-small o-hidden mn-r-small">
+                    <img
+                      v-if="album.coverUrl"
+                      :src="FILE_SERVER_URL + album.coverUrl"
+                      alt="Album cover"
+                      class="w-100 h-100 object-fit-cover"
+                    />
+                    <div v-else class="w-100 h-100 bg-light flex-center flex">
+                      <span>A</span>
+                    </div>
+                  </div>
+                  
+                  <div class="w-100 o-hidden">
+                    <p class="p-medium t-truncate">{{ album.title }}</p>
+                    <p class="p-small t-transp">{{ formatDate(album.releaseDate) }}</p>
+                  </div>
+                </div>
+              </div>
+              
+              <Button
+                v-if="discography.albums.length > 4"
+                :submit="viewAllAlbums"
+                class="mn-t-small w-100 bg-white t-black"
+                :showSucces="false"
+                :showLoader="false"
+              >
+                View All Albums
+              </Button>
+            </div>
+            
+            <!-- Singles section -->
+            <div v-if="discography.singles.length > 0" class="bg-light pd-medium radius-medium">
+              <h2 class="h3 mn-b-medium">Singles & EPs</h2>
+              
+              <div class="cols-1 gap-small">
+                <div
+                  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)"
+                >
+                  <div class="w-3r h-3r radius-small o-hidden mn-r-small">
+                    <img
+                      v-if="single.coverUrl"
+                      :src="FILE_SERVER_URL + single.coverUrl"
+                      alt="Single cover"
+                      class="w-100 h-100 object-fit-cover"
+                    />
+                    <div v-else class="w-100 h-100 bg-light flex-center flex">
+                      <span>S</span>
+                    </div>
+                  </div>
+                  
+                  <div class="w-100 o-hidden">
+                    <p class="p-medium t-truncate">{{ single.title }}</p>
+                    <p class="p-small t-transp">{{ formatDate(single.releaseDate) }}</p>
+                  </div>
+                </div>
+              </div>
+              
+              <Button
+                v-if="discography.singles.length > 5"
+                :submit="viewAllSingles"
+                class="mn-t-small w-100 bg-white t-black"
+                :showSucces="false"
+                :showLoader="false"
+              >
+                View All Singles & EPs
+              </Button>
+            </div>
+            
+            <!-- No discography yet -->
+            <div 
+              v-if="discography.albums.length === 0 && discography.singles.length === 0" 
+              class="bg-light pd-medium radius-medium t-center"
+            >
+              <p class="p-medium mn-b-small">No releases yet</p>
+              <p class="p-small t-transp">This artist hasn't released any albums or singles yet.</p>
+              
+              <Button
+                v-if="isOwner"
+                :submit="addRelease"
+                class="mn-t-medium bg-main t-white"
+                :showSucces="false"
+                :showLoader="false"
+              >
+                Add Release
+              </Button>
+            </div>
+          </div>
         </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" />
+        <!-- Related Artists -->
+        <div v-if="relatedArtists.length > 0" class="mn-t-medium">
+          <h2 class="h3 mn-b-medium">Fans Also Like</h2>
+          
+          <div class="cols-5 gap-medium mobile:cols-2">
+            <div
+              v-for="relatedArtist in relatedArtists"
+              :key="relatedArtist._id"
+              class="t-center cursor-pointer"
+              @click="navigateToArtist(relatedArtist)"
+            >
+              <div class="w-100 aspect-1x1 radius-medium o-hidden mn-b-small">
+                <img
+                  v-if="relatedArtist.photoUrl"
+                  :src="FILE_SERVER_URL + relatedArtist.photoUrl"
+                  alt="Artist photo"
+                  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>
+                </div>
+              </div>
+              
+              <p class="p-medium t-truncate">{{ relatedArtist.name }}</p>
+            </div>
           </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>
   </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 { ref, computed, onMounted } from 'vue';
+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 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
+import * as artistsStore from '../../store/artists';
+// import * as genreStore from '../../store/genres'; // Assuming you have a genre store
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
+import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
 
-// Import store modules
-import { state as artistsState, actions as artistsActions } from '../../store/artists.js';
-import { actions as playerActions } from '../../store/player.js';
+// Import mixins
+import { useGlobalMixins } from '@martyrs/src/modules/globals/views/mixins/mixins.js';
+const { formatDate } = useGlobalMixins();
 
-const route = useRoute();
+// Router and route
 const router = useRouter();
+const route = useRoute();
 
 // State
 const isLoading = ref(true);
-const isFollowing = ref(false);
-const showDropdown = ref(false);
+const genres = ref([]);
 
-// Computed properties
-const artist = computed(() => artistsState.currentArtist);
-const discography = computed(() => artistsState.discography);
-const relatedArtists = computed(() => artistsState.relatedArtists);
+// Computed
+const artist = computed(() => {
+  return artistsStore.state.currentArtist;
+});
+
+const discography = computed(() => {
+  return artistsStore.state.discography;
+});
+
+const relatedArtists = computed(() => {
+  return artistsStore.state.relatedArtists;
+});
+
+const isOwner = computed(() => {
+  if (!artist.value || !auth.state.user._id) return false;
+  
+  // Check if current user is the creator of the artist
+  return artist.value.creator?.target?._id === auth.state.user._id;
+});
 
 // Methods
-const formatFollowersCount = (count) => {
-  if (count >= 1000000) {
-    return `${(count / 1000000).toFixed(1)}M`;
-  } else if (count >= 1000) {
-    return `${(count / 1000).toFixed(1)}K`;
+const fetchArtist = async () => {
+  isLoading.value = true;
+  try {
+    // Get URL from route params
+    const url = route.params.url;
+    if (!url) {
+      throw new Error('Artist URL is required');
+    }
+    
+    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;
   }
-  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 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 toggleFollow = () => {
-  isFollowing.value = !isFollowing.value;
-  // Implement follow artist logic here
+const editArtist = () => {
+  router.push({
+    name: 'artist-edit',
+    params: { url: artist.value.url }
+  });
 };
 
-const copyLink = () => {
-  const url = window.location.href;
-  navigator.clipboard.writeText(url).then(() => {
-    // Could show a success notification here
-    showDropdown.value = false;
+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 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;
-  }
+const navigateToAlbum = (album) => {
+  router.push({
+    name: 'album-detail',
+    params: { url: album.url }
+  });
 };
 
-// Fetch data when component mounts or URL changes
-onMounted(fetchArtistData);
+const navigateToTrack = (track) => {
+  router.push({
+    name: 'track-detail',
+    params: { url: track.url }
+  });
+};
 
-watch(() => route.params.url, (newUrl) => {
-  if (newUrl) {
-    fetchArtistData();
-  }
-});
-</script>
+const navigateToArtist = (artist) => {
+  router.push({
+    name: 'artist-detail',
+    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 }
+  });
+};
 
-<style scoped>
-.artist-hero {
-  min-height: 20rem;
-}
+const addRelease = () => {
+  router.push({
+    name: 'release-create',
+    query: { artistId: artist.value._id }
+  });
+};
 
-.overlay {
-  background: linear-gradient(transparent 0%, rgba(0, 0, 0, 0.8) 100%);
-}
-</style>
+// Lifecycle hooks
+onMounted(async () => {
+  await fetchArtist();
+});
+</script>