@ozdao/martyrs 0.2.470 → 0.2.472

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>

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

@@ -0,0 +1,82 @@
+<!-- components/forms/SearchForm.vue -->
+<template>
+  <div class="search-form flex-v-center flex bg-dark-transp-50 pd-thin radius-extra">
+    <IconSearch class="i-small mn-r-small" fill="rgb(var(--grey))"/>
+    <input 
+      ref="searchInput"
+      v-model="searchQuery"
+      type="text"
+      :placeholder="placeholder"
+      class="bg-transparent border-none t-white flex-1"
+      @keydown.enter="handleSearch"
+    />
+    <Button 
+      v-if="searchQuery.length > 0"
+      @click="clearSearch"
+      class="bg-transparent border-none pd-zero"
+      :showLoader="false" 
+      :showSucces="false"
+    >
+      <IconCross class="i-small" fill="rgb(var(--grey))"/>
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { ref, watchEffect, defineEmits } from 'vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
+import IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Search...'
+  },
+  initialQuery: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['search']);
+
+const searchInput = ref(null);
+const searchQuery = ref(props.initialQuery);
+
+const handleSearch = () => {
+  if (searchQuery.value.trim()) {
+    emit('search', searchQuery.value.trim());
+  }
+};
+
+const clearSearch = () => {
+  searchQuery.value = '';
+  searchInput.value.focus();
+};
+
+watchEffect(() => {
+  // Update search query when initialQuery prop changes
+  if (props.initialQuery !== searchQuery.value) {
+    searchQuery.value = props.initialQuery;
+  }
+});
+</script>
+
+<style scoped>
+.search-form {
+  transition: background-color 0.2s ease;
+}
+
+.search-form:focus-within {
+  background-color: rgba(var(--dark), 0.8);
+}
+
+input::placeholder {
+  color: rgba(var(--grey), 0.8);
+}
+
+input:focus {
+  outline: none;
+}
+</style>