@ozdao/martyrs 0.2.485 → 0.2.487

package/src/modules/music/components/lists/ArtistList.vue

@@ -1,280 +0,0 @@
-<template>
-  <div class="pd-medium">
-    <div class="flex flex-justify-between flex-v-center mn-b-medium">
-      <h2 class="h2">Manage Artists</h2>
-      <Button
-        :submit="() => router.push({ name: 'artist-create' })"
-        class="bg-main t-white"
-        :showSucces="false"
-        :showLoader="false"
-      >
-        Create Artist
-      </Button>
-    </div>
-    
-    <div class="mn-b-medium">
-      <Field
-        v-model:field="search"
-        placeholder="Search artists..."
-        class="w-m-40r"
-        @update:field="handleSearch"
-      >
-        <IconSearch class="i-medium mn-r-small" />
-      </Field>
-    </div>
-    
-    <!-- Loading state -->
-    <div v-if="isLoading" class="flex-center flex mn-medium">
-      <Loader />
-    </div>
-    
-    <!-- Empty state -->
-    <div v-else-if="userArtists.length === 0" class="bg-light pd-medium radius-medium t-center">
-      <p class="mn-b-small p-medium">You haven't created any artists yet</p>
-      <p class="p-small t-transp mn-b-medium">Start by creating your first artist profile</p>
-      <Button
-        :submit="() => router.push({ name: 'artist-create' })"
-        class="bg-main t-white"
-        :showSucces="false"
-        :showLoader="false"
-      >
-        Create Artist
-      </Button>
-    </div>
-    
-    <!-- Artist list -->
-    <div v-else class="cols-1 gap-small">
-      <div
-        v-for="artist in userArtists"
-        :key="artist._id"
-        class="bg-light pd-medium radius-medium flex-v-center flex flex-justify-between hover-bg-light mobile:flex-column"
-      >
-        <div class="flex-v-center flex mobile:w-100 mobile:mn-b-small">
-          <div class="w-4r h-4r radius-medium o-hidden mn-r-medium mobile:mn-r-small">
-            <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-second-nano flex-center flex">
-              <span>{{ artist.name[0] }}</span>
-            </div>
-          </div>
-          
-          <div>
-            <h3 class="h5 mn-b-thin">{{ artist.name }}</h3>
-            <p class="p-small t-transp">
-              <Status
-                :value="getStatusLabel(artist.status)"
-                class="mn-r-small"
-              />
-              <span v-if="artist.isVerified" class="bg-second-nano pd-micro radius-small">
-                Verified
-              </span>
-            </p>
-          </div>
-        </div>
-        
-        <div class="flex flex-nowrap gap-small mobile:w-100 mobile:flex-justify-between">
-          <Button
-            :submit="() => viewArtist(artist)"
-            class="bg-grey-nano t-black"
-            :showSucces="false"
-            :showLoader="false"
-          >
-            View
-          </Button>
-          
-          <Button
-            :submit="() => editArtist(artist)"
-            class="bg-main t-white"
-            :showSucces="false"
-            :showLoader="false"
-          >
-            Edit
-          </Button>
-          
-          <Button
-            :submit="() => confirmDelete(artist)"
-            class="bg-fourth t-white"
-            :showSucces="false"
-            :showLoader="false"
-          >
-            Delete
-          </Button>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Confirmation popup -->
-    <Popup
-      :isPopupOpen="showDeleteConfirm"
-      @close-popup="showDeleteConfirm = false"
-      class="bg-white pd-medium radius-medium w-m-33r"
-    >
-      <h3 class="h3 mn-b-medium">Delete Artist</h3>
-      <p class="p-medium mn-b-medium">
-        Are you sure you want to delete <b>{{ selectedArtist?.name }}</b>?
-      </p>
-      <p class="p-small t-transp mn-b-medium">
-        This action cannot be undone and will remove all artist data.
-      </p>
-      
-      <div class="flex flex-justify-between">
-        <Button
-          :submit="() => showDeleteConfirm = false"
-          class="bg-grey-nano t-black"
-          :showSucces="false"
-          :showLoader="false"
-        >
-          Cancel
-        </Button>
-        
-        <Button
-          :submit="deleteArtist"
-          class="bg-fourth t-white"
-        >
-          Confirm Delete
-        </Button>
-      </div>
-    </Popup>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue';
-import { useRouter } from 'vue-router';
-
-// Import Martyrs components
-import Field from '@martyrs/src/components/Field/Field.vue';
-import Button from '@martyrs/src/components/Button/Button.vue';
-import Loader from '@martyrs/src/components/Loader/Loader.vue';
-import Status from '@martyrs/src/components/Status/Status.vue';
-import Popup from '@martyrs/src/components/Popup/Popup.vue';
-import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
-
-// Import store
-import * as artistsStore from '../../store/artists';
-import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
-import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
-
-// Router
-const router = useRouter();
-
-// State
-const search = ref('');
-const isLoading = ref(false);
-const showDeleteConfirm = ref(false);
-const selectedArtist = ref(null);
-
-// Computed
-const userArtists = computed(() => {
-  return artistsStore.state.userArtists;
-});
-
-// Methods
-const loadUserArtists = async () => {
-  isLoading.value = true;
-  try {
-    await artistsStore.actions.fetchUserArtists(auth.state.user._id);
-  } catch (error) {
-    console.error('Error loading artists:', error);
-    globals.actions.setError({
-      message: 'Failed to load your artists'
-    });
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const handleSearch = async (value) => {
-  if (!value.trim()) {
-    // If search is empty, load all user artists
-    await loadUserArtists();
-    return;
-  }
-  
-  isLoading.value = true;
-  try {
-    // Search only within user's artists
-    const options = {
-      creator: auth.state.user._id,
-      search: value
-    };
-    await artistsStore.actions.fetchArtists(options);
-    // Update userArtists (assuming the store is correctly updating userArtists)
-  } catch (error) {
-    console.error('Error searching artists:', error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const viewArtist = (artist) => {
-  router.push({
-    name: 'artist-detail',
-    params: { url: artist.url }
-  });
-};
-
-const editArtist = (artist) => {
-  router.push({
-    name: 'artist-edit',
-    params: { url: artist.url }
-  });
-};
-
-const confirmDelete = (artist) => {
-  selectedArtist.value = artist;
-  showDeleteConfirm.value = true;
-};
-
-const deleteArtist = async () => {
-  if (!selectedArtist.value) return;
-  
-  try {
-    await artistsStore.actions.deleteArtist(selectedArtist.value._id);
-    showDeleteConfirm.value = false;
-    selectedArtist.value = null;
-    
-    // Show success message
-    globals.actions.setError({
-      message: 'Artist deleted successfully',
-      status: 'success'
-    });
-  } catch (error) {
-    console.error('Error deleting artist:', error);
-    globals.actions.setError({
-      message: 'Failed to delete artist'
-    });
-  }
-};
-
-const getStatusLabel = (status) => {
-  const statusMap = {
-    'draft': {
-      text: 'Draft',
-      color: '#888888'
-    },
-    'published': {
-      text: 'Published',
-      color: '#10FA7D' // main color
-    },
-    'archived': {
-      text: 'Archived',
-      color: '#FF0A54' // fourth color
-    }
-  };
-  
-  return statusMap[status] || {
-    text: status,
-    color: '#888888'
-  };
-};
-
-// Lifecycle hooks
-onMounted(async () => {
-  await loadUserArtists();
-});
-</script>

package/src/modules/music/components/lists/PlaylistList.vue

@@ -1,25 +0,0 @@
-<!-- components/lists/PlaylistList.vue -->
-<template>
-  <div class="playlist-list">
-    <div v-if="playlists.length === 0" class="empty-list t-center pd-medium">
-      <p class="t-grey">No playlists found</p>
-    </div>
-    
-    <div v-else class="playlist-grid cols-5 mobile:cols-2 gap-small">
-      <div v-for="playlist in playlists" :key="playlist._id">
-        <PlaylistCard :playlist="playlist" class="hover-scale-1 transition-cubic-in-out" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import PlaylistCard from '../cards/PlaylistCard.vue';
-
-const props = defineProps({
-  playlists: {
-    type: Array,
-    required: true
-  }
-});
-</script>

package/src/modules/music/components/lists/TrackList.vue

@@ -1,175 +0,0 @@
-<!-- components/lists/TrackList.vue (continued) -->
-<template>
-  <div class="track-list w-100">
-    <div 
-      v-if="showHeader" 
-      class="track-list-header pd-small br-b br-solid br-dark-transp-20 t-grey flex-v-center flex"
-    >
-      <div class="track-number w-3r t-center">#</div>
-      <div class="track-title flex-child-1">TITLE</div>
-      <div v-if="showAlbum" class="track-album w-15r mobile:w-0 mobile:hidden">ALBUM</div>
-      <div class="track-duration w-5r t-right">DURATION</div>
-    </div>
-    
-    <div class="track-list-body">
-      <div 
-        v-for="(track, index) in tracks" 
-        :key="track._id"
-        class="track-item pd-small hover-bg-dark-transp-25 flex-v-center flex cursor-pointer"
-        :class="{'bg-dark-transp-25': isPlaying(track)}"
-        @click="playTrack(track)"
-        @dblclick="playTrack(track, true)"
-        @mouseenter="hoveredIndex = index"
-        @mouseleave="hoveredIndex = -1"
-      >
-        <div class="track-number w-3r t-center pos-relative">
-          <span v-if="!isPlaying(track) && hoveredIndex !== index" class="t-grey">{{ index + 1 }}</span>
-          <Button 
-            v-else-if="!isPlaying(track) && hoveredIndex === index"
-            @click.stop="playTrack(track)"
-            class="bg-transparent border-none pd-zero"
-            :showLoader="false"
-            :showSucces="false"
-          >
-            <IconPlay class="i-small" fill="rgb(var(--white))"/>
-          </Button>
-          <Button 
-            v-else
-            @click.stop="pauseTrack()"
-            class="bg-transparent border-none pd-zero"
-            :showLoader="false"
-            :showSucces="false"
-          >
-            <IconPause class="i-small" fill="rgb(var(--main))"/>
-          </Button>
-        </div>
-        
-        <div class="track-title flex-child-1 flex flex-v-center">
-          <div v-if="showCover" class="track-cover mn-r-small">
-            <Media 
-              :url="track.coverUrl || (track.album && track.album.coverUrl) || '/assets/placeholder-track.jpg'" 
-              class="w-3r h-3r object-fit-cover radius-small"
-            />
-          </div>
-          
-          <div class="track-info">
-            <div class="track-name t-white" :class="{'t-main': isPlaying(track)}">{{ track.title }}</div>
-            <div class="track-artist t-grey t-small">
-              <router-link 
-                v-if="track.artist && track.artist._id"
-                :to="{ name: 'artist-detail', params: { url: track.artist.url } }"
-                class="t-grey hover-t-white"
-                @click.stop
-              >
-                {{ getArtistName(track) }}
-              </router-link>
-              <span v-else>{{ getArtistName(track) }}</span>
-            </div>
-          </div>
-        </div>
-        
-        <div v-if="showAlbum" class="track-album w-15r mobile:w-0 mobile:hidden t-grey t-truncate">
-          <router-link 
-            v-if="track.album && track.album._id"
-            :to="{ name: 'album-detail', params: { url: track.album.url } }"
-            class="t-grey hover-t-white"
-            @click.stop
-          >
-            {{ track.album.title }}
-          </router-link>
-          <span v-else>{{ track.album?.title || 'Single' }}</span>
-        </div>
-        
-        <div class="track-duration w-5r t-right t-grey">{{ formatDuration(track.duration) }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-import Media from '@martyrs/src/components/Media/Media.vue';
-import Button from '@martyrs/src/components/Button/Button.vue';
-import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
-import IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';
-
-// Import player store
-import { state as playerState, actions as playerActions } from '../../store/player.js';
-
-const props = defineProps({
-  tracks: {
-    type: Array,
-    required: true
-  },
-  showHeader: {
-    type: Boolean,
-    default: true
-  },
-  showAlbum: {
-    type: Boolean,
-    default: false
-  },
-  showCover: {
-    type: Boolean,
-    default: false
-  },
-  showIndex: {
-    type: Boolean,
-    default: true
-  }
-});
-
-// State
-const hoveredIndex = ref(-1);
-
-// Computed
-const currentTrack = computed(() => playerState.currentTrack);
-
-// Methods
-const isPlaying = (track) => {
-  return currentTrack.value && currentTrack.value._id === track._id && isPlaying.value;
-};
-
-const isHovering = (index) => {
-  return hoveredIndex.value === index;
-};
-
-const playTrack = (track, addToQueue = false) => {
-  if (addToQueue) {
-    playerActions.addToQueue(track);
-  } else {
-    // Find track index to set queue properly
-    const trackIndex = props.tracks.findIndex(t => t._id === track._id);
-    playerActions.setQueue([...props.tracks], trackIndex);
-  }
-};
-
-const pauseTrack = () => {
-  playerActions.togglePlay();
-};
-
-const getArtistName = (track) => {
-  if (track.artist) {
-    if (typeof track.artist === 'object') {
-      return track.artist.name || 'Unknown Artist';
-    }
-    return track.artist;
-  }
-  return 'Unknown Artist';
-};
-
-const formatDuration = (seconds) => {
-  if (!seconds) return '0:00';
-  
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = Math.floor(seconds % 60);
-  
-  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
-};
-</script>
-
-<style scoped>
-.track-item {
-  transition: background-color 0.2s ease;
-}
-</style>