@ozdao/martyrs 0.2.485 → 0.2.487

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

@@ -13,7 +13,7 @@
       </div>
       
       <div class="track-info flex-1">
-        <div class="track-name t-white t-truncate">{{ track.title }}</div>
+        <div class="track-name  t-truncate">{{ track.title }}</div>
         <div class="track-artist t-grey t-small t-truncate">{{ getArtistName(track) }}</div>
       </div>
       

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

@@ -0,0 +1,135 @@
+<!-- components/cards/TrackListCard.vue -->
+<template>
+  <div 
+    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 = props.index"
+    @mouseleave="hoveredIndex = -1"
+  >
+    <div class="track-number w-3r t-center pos-relative">
+      <span v-if="!isPlaying(track) && hoveredIndex !== props.index" class="t-grey">{{ props.index + 1 }}</span>
+      <Button 
+        v-else-if="!isPlaying(track) && hoveredIndex === props.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 o-hidden radius-small"
+        />
+      </div>
+      
+      <div class="track-info">
+        <div class="track-name " :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', params: { url: track.artist.url } }"
+            class="t-grey hover-"
+            @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', params: { url: track.album.url } }"
+        class="t-grey hover-"
+        @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>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Media from '@martyrs/src/components/Media/Media.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';
+
+// Props
+const props = defineProps({
+  track: {
+    type: Object,
+    required: true
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  showCover: {
+    type: Boolean,
+    default: true
+  },
+  showAlbum: {
+    type: Boolean,
+    default: true
+  }
+});
+
+// State
+const hoveredIndex = ref(-1);
+
+// Methods
+const isPlaying = (track) => {
+  return playerState.currentTrack && playerState.currentTrack._id === track._id && playerState.isPlaying;
+};
+
+const playTrack = (track, force = false) => {
+  if (isPlaying(track) && !force) {
+    playerActions.togglePlay();
+  } else {
+    playerActions.playTrack(track);
+  }
+};
+
+const pauseTrack = () => {
+  playerActions.pause();
+};
+
+const getArtistName = (track) => {
+  if (!track || !track.artist) return 'Unknown Artist';
+  return typeof track.artist === 'object' ? track.artist.name : 'Unknown Artist';
+};
+
+const formatDuration = (duration) => {
+  if (!duration) return '--:--';
+  
+  const minutes = Math.floor(duration / 60);
+  const seconds = Math.floor(duration % 60);
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+</script>

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

@@ -0,0 +1,463 @@
+<template>
+  <div class="pd-medium">
+    <h2 class="h2 mn-b-medium">{{ editMode ? 'Edit Album' : 'Create Album' }}</h2>
+    
+    <form @submit.prevent="submitForm" class="cols-1 gap-medium">
+      <!-- Basic Info Section -->
+      <div class="bg-light pd-medium radius-medium">
+        <h3 class="h3 mn-b-medium">Basic Information</h3>
+        
+        <!-- Album Cover -->
+        <div class="mn-b-medium">
+          <p class="p-semi mn-b-small">Album Cover</p>
+          <UploadImage
+            v-model:photo="album.coverArt"
+            uploadPath="albums/covers"
+            class="w-100 h-15r radius-small o-hidden mn-b-small"
+            @error="handleUploadError"
+          />
+        </div>
+        
+        <!-- Title -->
+        <Field
+          v-model:field="album.title"
+          label="Title"
+          placeholder="Enter album title"
+          class="bg-white radius-small pd-small mn-b-thin"
+          :validation="validation.title"
+        />
+        
+        <!-- URL -->
+        <Field
+          v-model:field="album.url"
+          label="URL"
+          placeholder="Leave blank for auto-generation based on the album title"
+          class="bg-white radius-small pd-small mn-b-small"
+        />
+        
+        <!-- Description -->
+        <Field
+          v-model:field="album.description"
+          label="Description"
+          type="textarea"
+          placeholder="Enter album description"
+          class="bg-white radius-small pd-small mn-b-thin"
+          :validation="validation.description"
+        />
+        
+        <!-- Release Date -->
+        <Field
+          v-model:field="album.releaseDate"
+          label="Release Date"
+          type="date"
+          class="bg-white radius-small pd-small mn-b-thin"
+          :validation="validation.releaseDate"
+        />
+        
+        <!-- Album Type -->
+        <Select
+          v-model:select="album.type"
+          :options="albumTypeOptions"
+          label="Album Type"
+          class="bg-white radius-small pd-small mn-b-thin"
+        />
+      </div>
+      
+      <!-- Artists Section -->
+      <Block title="Artists">
+        <BlockMultiselect
+          v-model="album.artists"
+          placeholder="Search artists..."
+          :multiple="true"
+          :transform="(item) => ({ _id: item._id, name: item.name })"
+          :store="{
+            read: (options) => artistsStore.actions.fetchArtists(options),
+            state: artistsStore.state
+          }"
+          :options="{
+            rootOnly: false,
+            excludeChildren: false,
+            limit: 50
+          }"
+          :skeleton="{
+            hide: false,
+            horizontal: true,
+            class: 'radius-small',
+            structure: [{ 
+              block: 'text', size: 'large'
+            }]
+          }"
+          :states="{
+            empty: {
+              title: 'No artists found',
+              description: 'Try different search terms or create a new artist',
+              class: 'radius-small'
+            }
+          }"
+          key="_id"
+          :label="item => item.name"
+          classSearch="bg-white radius-small"
+          classSelected="bg-white pd-small radius-small"
+          classDropdown="bg-white pd-small radius-medium bs-small"
+          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classFeed="h-max-30r gap-thin flex-column flex o-scroll"
+        >
+          <!-- Слот для выбранных артистов -->
+          <template #selected="{ item, clear }">
+            <div class="flex-nowrap flex-v-center flex gap-thin">
+              <span class="t-medium">{{ item?.name || item }}</span>
+              <button 
+                @click.stop="clear"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+              >
+                <IconCross class="i-micro fill-white" />
+              </button>
+            </div>
+          </template>
+          
+          <!-- Слот для элементов в списке -->
+          <template #item="{ item }">
+            <div class="flex-nowrap flex-v-center flex">
+              <div class="w-100">
+                <p class="t-medium">{{ item.name }}</p>
+                <p v-if="item.bio" class="t-small t-transp">{{ item.bio }}</p>
+              </div>
+            </div>
+          </template>
+        </BlockMultiselect>
+      </Block>
+      
+      <!-- Genres Section -->
+      <Block title="Genres">
+        <BlockMultiselect
+          v-model="album.genres"
+          placeholder="Search genres..."
+          :multiple="true"
+          :transform="(item) => ({ _id: item._id, name: item.name })"
+          :store="{
+            read: (options) => genresStore.actions.fetchGenres(options),
+            state: genresStore.state
+          }"
+          :options="{
+            rootOnly: false,
+            excludeChildren: false,
+            limit: 50
+          }"
+          :skeleton="{
+            hide: false,
+            horizontal: true,
+            class: 'radius-small',
+            structure: [{ 
+              block: 'text', size: 'large'
+            }]
+          }"
+          :states="{
+            empty: {
+              title: 'No genres found',
+              description: 'Try different search terms or create a new genre',
+              class: 'radius-small'
+            }
+          }"
+          key="_id"
+          :label="item => item.name"
+          classSearch="bg-white radius-small"
+          classSelected="bg-white pd-small radius-small"
+          classDropdown="bg-white pd-small radius-medium bs-small"
+          classItem="pd-small radius-small hover-bg-light cursor-pointer"
+          classFeed="h-max-30r gap-thin flex-column flex o-scroll"
+        >
+          <!-- Слот для выбранных жанров -->
+          <template #selected="{ item, clear }">
+            <div class="flex-nowrap flex-v-center flex gap-thin">
+              <span class="t-medium">{{ item?.name || item }}</span>
+              <button 
+                @click.stop="clear"
+                class="i-small pd-micro bg-red radius-extra flex-center flex aspect-1x1 hover-scale-1"
+              >
+                <IconCross class="i-micro fill-white" />
+              </button>
+            </div>
+          </template>
+          
+          <!-- Слот для элементов в списке -->
+          <template #item="{ item }">
+            <div class="flex-nowrap flex-v-center flex">
+              <div class="w-100">
+                <p class="t-medium">{{ item.name }}</p>
+                <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
+              </div>
+            </div>
+          </template>
+        </BlockMultiselect>
+      </Block>
+      
+      <!-- Status Section -->
+      <div class="bg-light pd-medium radius-medium">
+        <h3 class="h3 mn-b-medium">Publishing Status</h3>
+        
+        <Select
+          v-model:select="album.status"
+          :options="statusOptions"
+          label="Status"
+          class="bg-white radius-small pd-small mn-b-thin"
+        />
+      </div>
+      
+      <!-- Submit Button -->
+      <div class="flex flex-justify-between">
+        <Button
+          @click="$router.go(-1)"
+          class="bg-grey-nano t-black"
+          :showSucces="false"
+          :showLoader="false"
+        >
+          Cancel
+        </Button>
+        
+        <Button
+          :submit="submitForm"
+          class="bg-main t-black"
+          :text="{
+            success: editMode ? 'Updated!' : 'Created!'
+          }"
+        >
+          {{ editMode ? 'Update Album' : 'Create Album' }}
+        </Button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+// Import Martyrs components
+import Field from '@martyrs/src/components/Field/Field.vue';
+import Block from '@martyrs/src/components/Block/Block.vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Select from '@martyrs/src/components/Select/Select.vue';
+import UploadImage from '@martyrs/src/components/UploadImage/UploadImage.vue';
+import IconCross from '@martyrs/src/modules/icons/navigation/IconCross.vue';
+
+import BlockMultiselect from '@martyrs/src/modules/globals/views/components/blocks/BlockMultiselect.vue';
+
+// Import stores
+import * as albumsStore from '../../store/albums';
+import * as artistsStore from '../../store/artists';
+import * as genresStore from '../../store/genres';
+import * as globals from '@martyrs/src/modules/globals/views/store/globals.js';
+import * as auth from '@martyrs/src/modules/auth/views/store/auth.js';
+
+// Props
+const props = defineProps({
+  editMode: {
+    type: Boolean,
+    default: false
+  },
+  url: {
+    type: String,
+    default: ''
+  }
+});
+
+// Router and route
+const router = useRouter();
+const route = useRoute();
+
+// State
+const album = reactive({
+  title: '',
+  description: '',
+  releaseDate: new Date().toISOString().split('T')[0],
+  coverArt: '',
+  artists: [],
+  type: 'album',
+  genres: [],
+  totalTracks: 0,
+  url: '',
+  status: 'draft'
+});
+
+const validation = reactive({
+  title: false,
+  description: false,
+  releaseDate: false
+});
+
+// Track if URL was manually entered
+const urlManuallySet = ref(false);
+
+// Function to generate URL-friendly slug from text
+const generateSlug = (text) => {
+  if (!text) return '';
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
+    .replace(/\s+/g, '-') // Replace spaces with hyphens
+    .replace(/-+/g, '-') // Replace multiple hyphens with single
+    .trim('-'); // Remove leading/trailing hyphens
+};
+
+// Watch for changes in album title to auto-generate URL
+watch(() => album.title, (newTitle) => {
+  // Only auto-generate if URL hasn't been manually set and we're not in edit mode
+  if (!urlManuallySet.value && !props.editMode) {
+    album.url = generateSlug(newTitle);
+  }
+});
+
+// Watch for manual changes to URL field
+watch(() => album.url, (newUrl, oldUrl) => {
+  // If user manually changes URL, mark as manually set
+  if (newUrl !== generateSlug(album.title)) {
+    urlManuallySet.value = true;
+  }
+});
+
+// Options
+const statusOptions = [
+  'draft',
+  'published',
+  'archived'
+];
+
+const albumTypeOptions = [
+  'album',
+  'single',
+  'EP',
+  'compilation'
+];
+
+const fetchAlbum = async () => {
+  if (!props.url) return;
+  
+  try {
+    const fetchedAlbum = await albumsStore.actions.fetchAlbumByUrl(props.url);
+    
+    if (!fetchedAlbum) {
+      globals.actions.setError({
+        message: 'Album not found'
+      });
+      return;
+    }
+    
+    // Update local album data
+    Object.assign(album, {
+      title: fetchedAlbum.title || '',
+      description: fetchedAlbum.description || '',
+      releaseDate: fetchedAlbum.releaseDate ? new Date(fetchedAlbum.releaseDate).toISOString().split('T')[0] : '',
+      coverArt: fetchedAlbum.coverArt || '',
+      artists: fetchedAlbum.artists || [],
+      type: fetchedAlbum.type || 'album',
+      genres: fetchedAlbum.genres || [],
+      totalTracks: fetchedAlbum.totalTracks || 0,
+      url: fetchedAlbum.url || '',
+      status: fetchedAlbum.status || 'draft',
+      _id: fetchedAlbum._id
+    });
+    
+  } catch (error) {
+    console.error('Error fetching album:', error);
+    globals.actions.setError({
+      message: 'Failed to load album details'
+    });
+  }
+};
+
+const validateForm = () => {
+  let isValid = true;
+  
+  // Validate title
+  if (!album.title.trim()) {
+    validation.title = {
+      message: 'Album title is required'
+    };
+    isValid = false;
+  } else {
+    validation.title = false;
+  }
+  
+  // Validate release date
+  if (!album.releaseDate) {
+    validation.releaseDate = {
+      message: 'Release date is required'
+    };
+    isValid = false;
+  } else {
+    validation.releaseDate = false;
+  }
+  
+  // Validate description
+  if (album.description && album.description.length > 2000) {
+    validation.description = {
+      message: 'Description is too long (max 2000 characters)'
+    };
+    isValid = false;
+  } else {
+    validation.description = false;
+  }
+  
+  return isValid;
+};
+
+const submitForm = async () => {
+  if (!validateForm()) {
+    return;
+  }
+  
+  try {
+    // Prepare data for submission
+    const formData = {
+      ...album,
+      artists: album.artists.map(artist => artist._id || artist),
+      genres: album.genres.map(genre => genre._id || genre)
+    };
+    
+    // Add ownership data if creating new album
+    if (!props.editMode) {
+      formData.owner = {
+        type: 'user',
+        target: auth.state.user._id
+      };
+    }
+    
+    let result;
+    if (props.editMode) {
+      result = await albumsStore.actions.updateAlbum(formData);
+    } else {
+      result = await albumsStore.actions.createAlbum(formData);
+    }
+    
+    // Navigate to album detail page
+    setTimeout(() => {
+      router.push({
+        name: 'album',
+        params: { url: result.url }
+      });
+    }, 1000);
+    
+  } catch (error) {
+    console.error('Error saving album:', error);
+    globals.actions.setError({
+      message: 'Failed to save album'
+    });
+  }
+};
+
+const handleUploadError = (error) => {
+  console.error('Upload error:', error);
+  globals.actions.setError({
+    message: 'Error uploading image'
+  });
+};
+
+// Lifecycle hooks
+onMounted(async () => {
+  if (props.editMode) {
+    await fetchAlbum();
+    // Mark URL as manually set in edit mode to prevent auto-generation
+    urlManuallySet.value = true;
+  }
+});
+</script>