@ozdao/martyrs 0.2.470 → 0.2.471

package/src/modules/music/components/SidebarMusic.vue

@@ -0,0 +1,156 @@
+<!-- components/navigation/MusicSidebar.vue -->
+<template>
+  <Sidebar 
+    :stateSidebar="stateSidebar"
+    :theme="'dark'"
+    :width="'w-15r'"
+    :widthHidden="'w-3r'"
+    @closeSidebar="$emit('closeSidebar')"
+    class="flex-child-shrink-0"
+  >
+    <div class="pd-thin">
+      <div class="music-logo mn-b-medium">
+        <h3 class="t-white mn-b-small">Music</h3>
+      </div>
+      
+      <nav class="music-nav mn-b-medium">
+        <ul class="flex flex-column gap-small">
+          <li>
+            <router-link :to="{ name: 'music-home' }" 
+              class="flex-v-center flex gap-small pd-thin radius-small" 
+              :class="$route.name === 'music-home' ? 'bg-dark' : 'hover-bg-dark'"
+            >
+              <IconHome class="i-medium" :fill="$route.name === 'music-home' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+              <span class="t-medium" :class="$route.name === 'music-home' ? 't-main' : 't-white'">Home</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'music-search' }" 
+              class="flex-v-center flex gap-small pd-thin radius-small"
+              :class="$route.name === 'music-search' ? 'bg-dark' : 'hover-bg-dark'"
+            >
+              <IconSearch class="i-medium" :fill="$route.name === 'music-search' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+              <span class="t-medium" :class="$route.name === 'music-search' ? 't-main' : 't-white'">Search</span>
+            </router-link>
+          </li>
+          <li>
+            <router-link :to="{ name: 'music-library' }" 
+              class="flex-v-center flex gap-small pd-thin radius-small"
+              :class="$route.name === 'music-library' ? 'bg-dark' : 'hover-bg-dark'"
+            >
+              <IconLibrary class="i-medium" :fill="$route.name === 'music-library' ? 'rgb(var(--main))' : 'rgb(var(--white))'"/>
+              <span class="t-medium" :class="$route.name === 'music-library' ? 't-main' : 't-white'">Your Library</span>
+            </router-link>
+          </li>
+        </ul>
+      </nav>
+      
+      <div class="music-playlists" v-if="isAuthenticated">
+        <div class="flex-between flex mn-b-small">
+          <h4 class="t-grey t-medium">YOUR PLAYLISTS</h4>
+          <Button 
+            @click="showCreatePlaylistModal = true" 
+            class="bg-transparent cursor-pointer pd-micro radius-small hover-bg-dark"
+            :showLoader="false"
+            :showSucces="false"
+          >
+            <IconPlus class="i-small" fill="rgb(var(--white))"/>
+          </Button>
+        </div>
+        
+        <Feed
+          v-if="userPlaylists.length"
+          class="mn-t-thin"
+          :skeleton="{
+            hide: true
+          }"
+          :states="{
+            empty: {
+              title: 'No playlists yet',
+              description: 'Create your first playlist to see it here'
+            }
+          }"
+          :items="userPlaylists"
+        >
+          <template #default="{ items }">
+            <li v-for="playlist in items" :key="playlist._id" class="mn-b-thin">
+              <router-link 
+                :to="{ name: 'playlist-detail', params: { url: playlist.url } }" 
+                class="t-white t-truncate d-block pd-thin radius-small hover-bg-dark"
+                :class="$route.params.url === playlist.url ? 'bg-dark t-main' : ''"
+              >
+                {{ playlist.title }}
+              </router-link>
+            </li>
+          </template>
+        </Feed>
+      </div>
+    </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" />
+    </Popup>
+  </Sidebar>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+// Import components from Martyrs framework
+import Sidebar from '@martyrs/src/modules/globals/views/components/partials/Sidebar.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Popup from '@martyrs/src/components/Popup/Popup.vue';
+import Feed from '@martyrs/src/components/Feed/Feed.vue';
+import PlaylistForm from '../forms/PlaylistForm.vue';
+
+// Icons 
+import IconHome from '@martyrs/src/modules/icons/navigation/IconHome.vue';
+import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
+import IconLibrary from '@martyrs/src/modules/icons/entities/IconFolder.vue';
+import IconPlus from '@martyrs/src/modules/icons/navigation/IconPlus.vue';
+
+// Store
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+import { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';
+
+const props = defineProps({
+  stateSidebar: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['closeSidebar']);
+
+const router = useRouter();
+const showCreatePlaylistModal = ref(false);
+
+// Auth computed property
+const isAuthenticated = computed(() => {
+  return authState.access.status === true;
+});
+
+// User playlists
+const userPlaylists = computed(() => {
+  return playlistsState.userPlaylists;
+});
+
+const onPlaylistCreated = (playlist) => {
+  showCreatePlaylistModal.value = false;
+  router.push({ name: 'playlist-detail', params: { url: playlist.url } });
+};
+
+// Fetch user playlists on component mount
+onMounted(async () => {
+  if (isAuthenticated.value && authState.user) {
+    await playlistsActions.fetchUserPlaylists();
+  }
+});
+</script>

package/src/modules/music/components/cards/AlbumCard.vue

@@ -0,0 +1,107 @@
+<!-- components/cards/AlbumCard.vue -->
+<template>
+  <router-link 
+    :to="{ name: 'album-detail', params: { url: album.url } }" 
+    class="album-card d-block radius-small o-hidden"
+  >
+    <div class="album-cover pos-relative">
+      <Media 
+        :url="album.coverUrl || '/assets/placeholder-album.jpg'" 
+        class="w-100 aspect-1x1 object-fit-cover"
+      />
+      <div class="album-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out">
+        <Button 
+          @click.stop="playAlbum(album)" 
+          class="play-button bg-main radius-round flex-center flex aspect-1x1"
+          :showLoader="false"
+          :showSucces="false"
+        >
+          <IconPlay class="i-small" fill="rgb(var(--black))" />
+        </Button>
+      </div>
+    </div>
+    <div class="album-info pd-small bg-dark-transp-20">
+      <h3 class="t-white t-medium t-truncate">{{ album.title }}</h3>
+      <p class="t-grey t-small t-truncate">{{ albumInfo }}</p>
+    </div>
+  </router-link>
+</template>
+
+<script setup>
+import { 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 player store & albums store
+import { actions as playerActions } from '../../store/player.js';
+import { state as albumsState, actions as albumsActions } from '../../store/albums.js';
+
+const props = defineProps({
+  album: {
+    type: Object,
+    required: true
+  }
+});
+
+// Computed properties
+const albumInfo = computed(() => {
+  const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : '';
+  let artistName = 'Unknown Artist';
+  
+  if (props.album.artist?.name) {
+    artistName = props.album.artist.name;
+  } else if (typeof props.album.artist === 'string') {
+    artistName = props.album.artist;
+  }
+  
+  return releaseYear ? `${artistName} • ${releaseYear}` : artistName;
+});
+
+// Methods
+const playAlbum = async (album) => {
+  // If album tracks are already loaded in state, use those
+  if (albumsState.currentAlbum && albumsState.currentAlbum._id === album._id && albumsState.currentAlbumTracks.length > 0) {
+    playerActions.setQueue(albumsState.currentAlbumTracks);
+    return;
+  }
+  
+  // Otherwise fetch tracks for this album
+  const tracks = await albumsActions.fetchAlbumTracks(album._id);
+  
+  if (tracks && tracks.length > 0) {
+    playerActions.setQueue(tracks);
+  }
+};
+</script>
+
+<style scoped>
+.album-card {
+  transition: transform 0.3s ease;
+}
+
+.album-card:hover {
+  transform: translateY(-5px);
+}
+
+.album-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.album-card:hover .album-overlay {
+  opacity: 1;
+}
+
+.play-button {
+  width: 48px;
+  height: 48px;
+  transform: scale(0.8);
+  transition: transform 0.3s ease;
+}
+
+.album-card:hover .play-button {
+  transform: scale(1);
+}
+</style>

package/src/modules/music/components/cards/ArtistCard.vue

@@ -0,0 +1,37 @@
+<!-- components/cards/ArtistCard.vue -->
+<template>
+  <router-link 
+    :to="{ name: 'artist-detail', params: { url: artist.url } }" 
+    class="artist-card d-block text-center"
+  >
+    <div class="artist-photo mn-b-small">
+      <Media 
+        :url="artist.photoUrl || '/assets/placeholder-artist.jpg'" 
+        class="w-100 aspect-1x1 object-fit-cover radius-round"
+      />
+    </div>
+    <h3 class="t-white t-medium t-truncate">{{ artist.name }}</h3>
+    <p class="t-grey t-small">Artist</p>
+  </router-link>
+</template>
+
+<script setup>
+import Media from '@martyrs/src/components/Media/Media.vue';
+
+const props = defineProps({
+  artist: {
+    type: Object,
+    required: true
+  }
+});
+</script>
+
+<style scoped>
+.artist-card {
+  transition: transform 0.3s ease;
+}
+
+.artist-card:hover {
+  transform: translateY(-5px);
+}
+</style>

package/src/modules/music/components/cards/PlaylistCard.vue

@@ -0,0 +1,100 @@
+<!-- components/cards/PlaylistCard.vue -->
+<template>
+  <router-link 
+    :to="{ name: 'playlist-detail', params: { url: playlist.url } }" 
+    class="playlist-card d-block radius-small o-hidden"
+  >
+    <div class="playlist-cover pos-relative">
+      <Media 
+        :url="playlist.coverUrl || '/assets/placeholder-playlist.jpg'" 
+        class="w-100 aspect-1x1 object-fit-cover"
+      />
+      <div class="playlist-overlay pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center flex transition-cubic-in-out">
+        <Button 
+          @click.stop="playPlaylist(playlist)" 
+          class="play-button bg-main radius-round flex-center flex aspect-1x1"
+          :showLoader="false"
+          :showSucces="false"
+        >
+          <IconPlay class="i-small" fill="rgb(var(--black))" />
+        </Button>
+      </div>
+    </div>
+    <div class="playlist-info pd-small bg-dark-transp-20">
+      <h3 class="t-white t-medium t-truncate">{{ playlist.title }}</h3>
+      <p class="t-grey t-small t-truncate">{{ playlistInfo }}</p>
+    </div>
+  </router-link>
+</template>
+
+<script setup>
+import { 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 player store
+import { actions as playerActions } from '../../store/player.js';
+
+const props = defineProps({
+  playlist: {
+    type: Object,
+    required: true
+  }
+});
+
+// Computed properties
+const playlistInfo = computed(() => {
+  const trackCount = props.playlist.tracks?.length || 0;
+  let creatorName = 'Unknown';
+  
+  if (props.playlist.creator?.target?.profile?.name) {
+    creatorName = props.playlist.creator.target.profile.name;
+  } else if (props.playlist.creator?.target?.name) {
+    creatorName = props.playlist.creator.target.name;
+  }
+  
+  return `${creatorName} • ${trackCount} ${trackCount === 1 ? 'track' : 'tracks'}`;
+});
+
+// Methods
+const playPlaylist = (playlist) => {
+  // Extract tracks from playlist
+  const tracks = playlist.tracks?.map(item => item.track).filter(track => track) || [];
+  
+  if (tracks.length > 0) {
+    playerActions.setQueue(tracks);
+  }
+};
+</script>
+
+<style scoped>
+.playlist-card {
+  transition: transform 0.3s ease;
+}
+
+.playlist-card:hover {
+  transform: translateY(-5px);
+}
+
+.playlist-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.playlist-card:hover .playlist-overlay {
+  opacity: 1;
+}
+
+.play-button {
+  width: 48px;
+  height: 48px;
+  transform: scale(0.8);
+  transition: transform 0.3s ease;
+}
+
+.playlist-card:hover .play-button {
+  transform: scale(1);
+}
+</style>

package/src/modules/music/components/cards/TrackCard.vue

@@ -0,0 +1,86 @@
+<!-- components/cards/TrackCard.vue -->
+<template>
+  <div 
+    class="track-card radius-small o-hidden pos-relative cursor-pointer transition-cubic-in-out bg-dark-transp-20"
+    @click="playTrack"
+  >
+    <div class="track-card-content pd-small flex-v-center flex">
+      <div 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 flex-1">
+        <div class="track-name t-white t-truncate">{{ track.title }}</div>
+        <div class="track-artist t-grey t-small t-truncate">{{ getArtistName(track) }}</div>
+      </div>
+      
+      <div class="track-play pos-absolute pos-r-0 pos-t-0 h-100 pd-small flex-center flex">
+        <div class="play-button bg-main radius-round flex-center flex aspect-1x1 i-medium">
+          <IconPlay class="i-small" fill="rgb(var(--black))"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
+
+// Import player store
+import { actions as playerActions } from '../../store/player.js';
+
+const props = defineProps({
+  track: {
+    type: Object,
+    required: true
+  }
+});
+
+// Methods
+const getArtistName = (track) => {
+  if (track.artist) {
+    if (typeof track.artist === 'object') {
+      return track.artist.name || 'Unknown Artist';
+    }
+    return track.artist;
+  }
+  return 'Unknown Artist';
+};
+
+const playTrack = () => {
+  playerActions.playTrack(props.track);
+};
+</script>
+
+<style scoped>
+.track-card {
+  transition: background-color 0.3s ease;
+}
+
+.track-card:hover {
+  background-color: rgba(var(--dark), 0.4);
+}
+
+.track-play {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.track-card:hover .track-play {
+  opacity: 1;
+}
+
+.play-button {
+  transform: scale(0.8);
+  transition: transform 0.3s ease;
+}
+
+.track-card:hover .play-button {
+  transform: scale(1);
+}
+</style>

package/src/modules/music/components/forms/PlaylistForm.vue

@@ -0,0 +1,156 @@
+<!-- components/forms/PlaylistForm.vue -->
+<template>
+  <div class="playlist-form">
+    <form @submit.prevent="submitForm">
+      <div class="form-group mn-b-medium">
+        <label for="title" class="t-white t-medium mn-b-thin d-block">Playlist Name</label>
+        <Field 
+          v-model:field="form.title"
+          id="title"
+          type="text"
+          placeholder="New Playlist"
+          :validation="validationErrors.title"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label for="description" class="t-white t-medium mn-b-thin d-block">Description</label>
+        <Field 
+          v-model:field="form.description"
+          id="description"
+          type="textarea"
+          placeholder="Add an optional description"
+          :validation="validationErrors.description"
+          class="w-100 pd-small bg-dark-transp-25 radius-small t-white"
+        />
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label class="t-white t-medium mn-b-thin d-block">Privacy</label>
+        <div class="flex gap-small">
+          <Radio 
+            v-model:radio="form.isPublic"
+            :value="true"
+            name="privacy"
+            label="Public"
+            class="t-white"
+          />
+          <Radio 
+            v-model:radio="form.isPublic"
+            :value="false"
+            name="privacy"
+            label="Private"
+            class="t-white"
+          />
+        </div>
+      </div>
+      
+      <div class="form-group mn-b-medium">
+        <label class="t-white t-medium mn-b-thin d-block">Cover Image</label>
+        <div class="playlist-cover-upload flex gap-medium">
+          <div class="playlist-cover-preview bg-dark-transp-25 radius-small o-hidden">
+            <Media 
+              v-if="form.coverUrl"
+              :url="form.coverUrl"
+              class="w-10r h-10r object-fit-cover"
+            />
+            <div v-else class="w-10r h-10r flex-center flex">
+              <IconMusic class="i-big" fill="rgb(var(--grey))"/>
+            </div>
+          </div>
+          
+          <UploadImage
+            v-model:photo="form.coverUrl"
+            uploadPath="playlists"
+            class="flex-1 h-10r bg-dark-transp-25 radius-small"
+          />
+        </div>
+      </div>
+      
+      <div class="form-actions t-right">
+        <Button 
+          @click="$emit('cancel')"
+          type="button"
+          class="bg-dark-transp-25 t-white pd-small radius-small mn-r-small hover-bg-dark"
+          :showLoader="false" 
+          :showSucces="false"
+        >
+          Cancel
+        </Button>
+        
+        <Button 
+          type="submit"
+          class="bg-main t-white pd-small radius-small hover-scale-1"
+          :submit="submitForm"
+          :showLoader="true" 
+          :showSucces="true"
+          :validation="!!Object.keys(validationErrors).length"
+        >
+          Create Playlist
+        </Button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+import Field from '@martyrs/src/components/Field/Field.vue';
+import Radio from '@martyrs/src/components/Radio/Radio.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import IconMusic from '@martyrs/src/modules/icons/entities/IconMusic.vue';
+
+// Import auth store and playlists store
+import { state as authState } from '@martyrs/src/modules/auth/views/store/auth.js';
+import { actions as playlistsActions } from '../../store/playlists.js';
+
+const emit = defineEmits(['created', 'cancel']);
+
+// Form data
+const form = reactive({
+  title: '',
+  description: '',
+  isPublic: true,
+  coverUrl: '',
+  isCollaborative: false,
+  tracks: []
+});
+
+// Validation
+const validationErrors = reactive({});
+
+// Form submission
+const submitForm = async () => {
+  // Validate form
+  validationErrors.title = !form.title ? { message: 'Playlist name is required' } : null;
+  
+  // If there are validation errors, don't submit
+  if (Object.values(validationErrors).some(error => error !== null)) {
+    return;
+  }
+  
+  // Prepare playlist data
+  const playlistData = {
+    ...form,
+    creator: {
+      type: 'User',
+      target: authState.user._id
+    },
+    owner: {
+      type: 'User',
+      target: authState.user._id
+    }
+  };
+  
+  try {
+    const playlist = await playlistsActions.createPlaylist(playlistData);
+    emit('created', playlist);
+  } catch (error) {
+    console.error('Error creating playlist:', error);
+    // Handle error (could add form-level error message)
+  }
+};
+</script>