@ozdao/martyrs 0.2.469 → 0.2.471

package/src/modules/icons/navigation/IconPlay.vue

@@ -0,0 +1,17 @@
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">
+	  <path :fill="fill" d="M25.2765 9.37509L29.0265 5.93759C30.589 4.53134 32.9327 4.68759 34.339 6.25009L63.2453 37.8126C64.339 39.0626 64.339 40.9376 63.2453 42.1876L34.339 73.7501C32.9327 75.3126 30.589 75.4689 29.0265 74.0626L25.2765 70.6251C23.714 69.3751 23.5577 66.8751 24.964 65.4689L48.4015 40.0001L24.964 14.5313C23.5577 13.1251 23.714 10.6251 25.2765 9.37509Z"/>
+	</svg>
+</template>
+
+
+<script>
+	export default {
+	  props: {
+	    fill: {
+	      type: String,
+	      default: 'rgb(var(--black)'
+	    }
+	  }
+	}
+</script>

package/src/modules/icons/navigation/IconRefresh.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/navigation/IconShuffle.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/navigation/IconVolume.vue

@@ -0,0 +1,31 @@
+<template>
+	<svg 
+    width="19" 
+    height="15" 
+    viewBox="0 0 19 15" 
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path 
+			:fill="fill"
+      d="M9.97505 0.3828C10.3344 0.5453 10.5657 0.90155 10.5657 1.2953V13.2953C10.5657 13.6891 10.3344 14.0453 9.97505 14.2078C9.61567 14.3703 9.1938 14.3047 8.90005 14.0422L4.68442 10.2953H2.56567C1.46255 10.2953 0.565674 9.39843 0.565674 8.2953V6.2953C0.565674 5.19218 1.46255 4.2953 2.56567 4.2953H4.68442L8.90005 0.548425C9.1938 0.285925 9.61567 0.223425 9.97505 0.3828Z"
+    />
+    <path 
+      :fill="fill"
+      d="M15.5657 6.23301L13.8469 4.51426C13.5563 4.22051 13.0813 4.22363 12.7876 4.51426C12.4938 4.80488 12.4938 5.27988 12.7876 5.57363L14.5063 7.29238L12.7876 9.01113C12.4938 9.30176 12.4969 9.77676 12.7876 10.0705C13.0782 10.3643 13.5532 10.3643 13.8469 10.0705L15.5657 8.35176L17.2844 10.0705C17.5751 10.3643 18.0501 10.3611 18.3438 10.0705C18.6376 9.77988 18.6376 9.30488 18.3438 9.01113L16.6251 7.29238L18.3438 5.57363C18.6376 5.28301 18.6344 4.80801 18.3438 4.51426C18.0532 4.22051 17.5782 4.22051 17.2844 4.51426L15.5657 6.23301Z"
+    />
+  </svg>
+</template>
+
+<script setup>
+	const props = defineProps({
+  fill: {
+    type: String,
+    default: {
+      position: 'rgb(var(--black))'
+    }
+  },
+})
+</script>
+
+

package/src/modules/icons/skeletons/SkeletonBlogpost.vue

@@ -1,7 +1,7 @@
 <template>
   <svg width="100%" height="20rem" xmlns="http://www.w3.org/2000/svg">
     <!-- Фоновый прямоугольник для всей карточки -->
-    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="rgb(var(--white))"/>
+    <rect x="0" y="0" rx="5" ry="5" width="100%" height="100%" fill="rgb(var(--light))"/>
     
     <!-- Имитация шапки карточки -->
     <rect x="15" y="15" rx="4" ry="4" width="40%" height="20" fill="rgba(var(--black),0.05)"></rect>
@@ -14,7 +14,7 @@
     <rect x="15" y="130" rx="3" ry="3" width="70%" height="6" fill="rgba(var(--black),0.05)"></rect>
     
     <!-- Блик с анимацией движения -->
-    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--white))" mask="url(#myMask)" opacity="0.3">
+    <rect x="-25%" y="0" width="25%" height="100%" fill="rgb(var(--light))" mask="url(#myMask)" opacity="0.3">
       <animate attributeName="x" from="-25%" to="100%" dur="2s" repeatCount="indefinite"></animate>
     </rect>
   </svg>

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>