@ozdao/martyrs 0.2.492 → 0.2.494

package/src/components/Feed/Feed.vue

@@ -106,7 +106,7 @@
   </div>
 
   <TransitionGroup 
-    v-if="isLoading"
+    v-if="isLoading && !keepSlotVisible"
     tag="ul" 
     name="scaleTransition" 
     class="pos-relative z-index-1"
@@ -140,7 +140,7 @@
    </TransitionGroup>
 
   <TransitionGroup 
-    v-else
+    v-else-if="!keepSlotVisible || !isLoading"
     tag="ul" 
     name="feed"
     :class="$attrs.class"
@@ -151,6 +151,28 @@
     </slot>
   </TransitionGroup>
 
+  <!-- Slot visible with overlay loader -->
+  <div v-else class="pos-relative">
+    <TransitionGroup 
+      tag="ul" 
+      name="feed"
+      :class="$attrs.class"
+    >
+      <slot
+        :items="itemsList"
+      >
+      </slot>
+    </TransitionGroup>
+    
+    <!-- Overlay loader -->
+    <div 
+      v-if="isLoading && keepSlotVisible"
+      class="pos-absolute pos-t-0 pos-l-0 w-100 h-100 flex-center bg-white-transp-90 z-index-10"
+    >
+      <Loader />
+    </div>
+  </div>
+
   <button
     v-if="showLoadMore && hasMoreItems && itemsList.length > 0 && !isLoadingExtra"
     @click="loadMoreItems"
@@ -294,6 +316,10 @@ const props = defineProps({
       contain:  null,
     }),
   },
+  keepSlotVisible: {
+    type: Boolean,
+    default: false
+  },
 });
   
 const hasMoreItems = ref(false);

package/src/modules/globals/controllers/classes/crud/crud.policies.js

@@ -60,6 +60,11 @@ export default  class CRUDPolicies {
       );
     }
     
+    // Проверяем еще раз, чтобы убедиться что не отключено
+    if (options.enabled === false) {
+      return null;
+    }
+    
     // Дефолтный ABAC middleware
     return this.abac.middleware(this.crud.modelName, action, options);
   }

package/src/modules/globals/controllers/classes/globals.validator.js

@@ -98,7 +98,14 @@ class Validator {
   boolean(message) {
     this.rules.push({
       type: 'boolean',
-      check: value => typeof value === 'boolean',
+      check: value => {
+        if (typeof value === 'boolean') return true;
+        if (typeof value === 'string') {
+          const lowered = value.toLowerCase();
+          return lowered === 'true' || lowered === 'false';
+        }
+        return false;
+      },
       message,
     });
     return this;

package/src/modules/globals/views/components/layouts/Client.vue

@@ -151,6 +151,12 @@
 						  </router-view>
 						</Suspense>
 				  </div>
+
+				 	<component 
+			      v-if="route.meta.player"
+			      class="z-index-2"
+			    	:is="route.meta.player"
+			    />
 			  
 	        <component
 						v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter"
@@ -175,6 +181,7 @@
 
 	
 
+
     <component 
       v-if="MOBILE_APP && route.meta.title_hide"
       class="z-index-2"

package/src/modules/music/README.md

@@ -0,0 +1,8 @@
+# Music Module
+
+## Задачи
+
+### Оптимизация подсчета воспроизведений
+- [ ] Перенести увеличение playCount из HTTP stream controller в WebSocket handler
+- [ ] Сейчас playCount увеличивается при каждом HTTP range request, что может давать завышенные показатели
+- [ ] WebSocket handler уже написан, но не работает из-за проблем с регистрацией модуля

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

@@ -9,10 +9,6 @@
     class="flex-child-shrink-0"
   >
     <div class="pd-thin">
-      <div class="music-logo mn-b-medium">
-        <h3 class=" mn-b-small">Music</h3>
-      </div>
-      
       <nav class="music-nav mn-b-medium">
         <ul class="flex flex-column gap-small">
           <li>
@@ -47,7 +43,7 @@
       
       <div class="music-playlists" v-if="isAuthenticated">
         <div class="flex-between flex mn-b-small">
-          <h4 class="t-grey t-medium">YOUR PLAYLISTS</h4>
+          <h4 class="t-transp t-medium">YOUR PLAYLISTS</h4>
           <Button 
             @click="showCreatePlaylistModal = true" 
             class="bg-transparent cursor-pointer pd-micro radius-small hover-bg-dark"
@@ -108,17 +104,18 @@ import Sidebar from '@martyrs/src/modules/globals/views/components/partials/Side
 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';
+
+import PlaylistForm from './forms/PlaylistForm.vue';
 
 // Icons 
-import IconHome from '@martyrs/src/modules/icons/navigation/IconHome.vue';
+import IconHome from '@martyrs/src/modules/icons/entities/IconHome.vue';
 import IconSearch from '@martyrs/src/modules/icons/navigation/IconSearch.vue';
-import IconLibrary from '@martyrs/src/modules/icons/entities/IconFolder.vue';
+import IconLibrary from '@martyrs/src/modules/icons/navigation/IconPlus.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';
+import { state as playlistsState, actions as playlistsActions } from '..//store/playlists.js';
 
 const props = defineProps({
   stateSidebar: {

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

@@ -2,27 +2,27 @@
 <template>
   <router-link 
     :to="{ name: 'album', params: { url: album.url } }" 
-    class="album-card d-block radius-small o-hidden"
+    class="album-card d-block radius-medium o-hidden"
   >
     <div class="album-cover pos-relative">
       <Media 
-        :url="album.coverUrl || '/assets/placeholder-album.jpg'" 
+        :url="album.coverArt || album.coverUrl || '/logo/logo-placeholder.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">
+      <div v-if="album.totalTracks && album.totalTracks > 0" 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"
+          @click.stop.prevent="playAlbum(album)" 
+          class="play-button i-big bg-main radius-round flex-center flex aspect-1x1"
           :showLoader="false"
           :showSucces="false"
         >
-          <IconPlay class="i-small" fill="rgb(var(--black))" />
+          <IconPlay class="i-small" fill="rgb(var(--white))" />
         </Button>
       </div>
     </div>
-    <div class="album-info pd-small bg-dark-transp-20">
-      <h3 class=" t-medium t-truncate">{{ album.title }}</h3>
-      <p class="t-grey t-small t-truncate">{{ albumInfo }}</p>
+    <div class="album-info pd-medium bg-light">
+      <h3 class="mn-b-thin t-medium t-truncate">{{ album.title }}</h3>
+      <p class="t-transp t-small t-truncate">{{ albumInfo }}</p>
     </div>
   </router-link>
 </template>
@@ -49,10 +49,18 @@ const albumInfo = computed(() => {
   const releaseYear = props.album.releaseDate ? new Date(props.album.releaseDate).getFullYear() : '';
   let artistName = 'Unknown Artist';
   
-  if (props.album.artist?.name) {
+  // Handle artists array (model uses 'artists' not 'artist')
+  if (props.album.artists && props.album.artists.length > 0) {
+    // If populated, artists[0] will have name property
+    if (props.album.artists[0]?.name) {
+      artistName = props.album.artists.map(artist => artist.name).join(', ');
+    } else if (typeof props.album.artists[0] === 'string') {
+      // If not populated, it might be just IDs
+      artistName = 'Various Artists';
+    }
+  } else if (props.album.artist?.name) {
+    // Fallback for old data structure
     artistName = props.album.artist.name;
-  } else if (typeof props.album.artist === 'string') {
-    artistName = props.album.artist;
   }
   
   return releaseYear ? `${artistName} • ${releaseYear}` : artistName;
@@ -95,8 +103,6 @@ const playAlbum = async (album) => {
 }
 
 .play-button {
-  width: 48px;
-  height: 48px;
   transform: scale(0.8);
   transition: transform 0.3s ease;
 }

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

@@ -30,7 +30,7 @@
     </div>
     
     <div class="pd-small">
-      <h4 class="mn-b-micro t-trim-2">{{ artist.name }}</h4>
+      <h4 class="t-medium mn-b-small t-truncate">{{ artist.name }}</h4>
       <p v-if="artist.genres && artist.genres.length" class="p-small t-transp t-trim">
         {{ artist.genres.join(', ') }}
       </p>

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

@@ -6,12 +6,12 @@
   >
     <div class="playlist-cover pos-relative">
       <Media 
-        :url="playlist.coverUrl || '/assets/placeholder-playlist.jpg'" 
+        :url="playlist.coverUrl || '/logo/logo-placeholder.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">
+      <div v-if="playlist.tracks && playlist.tracks.length > 0" 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)" 
+          @click.stop.prevent="playPlaylist(playlist)" 
           class="play-button bg-main radius-round flex-center flex aspect-1x1"
           :showLoader="false"
           :showSucces="false"
@@ -20,9 +20,9 @@
         </Button>
       </div>
     </div>
-    <div class="playlist-info pd-small bg-dark-transp-20">
-      <h3 class=" t-medium t-truncate">{{ playlist.title }}</h3>
-      <p class="t-grey t-small t-truncate">{{ playlistInfo }}</p>
+    <div class="playlist-info pd-small bg-light">
+      <h3 class=" t-medium mn-b-small t-truncate">{{ playlist.title }}</h3>
+      <p class="t-transp t-small t-truncate">{{ playlistInfo }}</p>
     </div>
   </router-link>
 </template>
@@ -35,6 +35,7 @@ import IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';
 
 // Import player store
 import { actions as playerActions } from '../../store/player.js';
+import { state as playlistsState, actions as playlistsActions } from '../../store/playlists.js';
 
 const props = defineProps({
   playlist: {
@@ -58,12 +59,31 @@ const playlistInfo = computed(() => {
 });
 
 // Methods
-const playPlaylist = (playlist) => {
-  // Extract tracks from playlist
-  const tracks = playlist.tracks?.map(item => item.track).filter(track => track) || [];
+const playPlaylist = async (playlist) => {
+  if (!playlist || !playlist.url) {
+    console.warn('Playlist or URL not available');
+    return;
+  }
   
-  if (tracks.length > 0) {
-    playerActions.setQueue(tracks);
+  try {
+    console.log('Loading playlist:', playlist.url);
+    
+    // Fetch full playlist data with populated tracks
+    await playlistsActions.fetchPlaylistByUrl(playlist.url);
+    
+    // Get tracks from store after loading
+    const tracks = playlistsState.currentPlaylistTracks || [];
+    
+    console.log('Loaded tracks:', tracks);
+    
+    if (tracks.length > 0) {
+      console.log('Setting queue with tracks:', tracks);
+      playerActions.setQueue(tracks);
+    } else {
+      console.warn('No tracks found in playlist after loading');
+    }
+  } catch (error) {
+    console.error('Error loading playlist for playback:', error);
   }
 };
 </script>

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

@@ -2,49 +2,60 @@
 <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)}"
+    :class="{'bg-main-transp-10': 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>
+      <span v-if="!isPlaying(track) && hoveredIndex !== props.index" class="t-transp">{{ props.index + 1 }}</span>
       <Button 
         v-else-if="!isPlaying(track) && hoveredIndex === props.index"
         @click.stop="playTrack(track)"
-        class="bg-transparent border-none pd-zero"
+        class="bg-main  pd-thin"
         :showLoader="false"
         :showSucces="false"
       >
-        <IconPlay class="i-small" fill="rgb(var(--white))"/>
+        <IconPlay @click.stop="playTrack(track)" class="i-small" fill="rgb(var(--white))"/>
       </Button>
       <Button 
         v-else
         @click.stop="pauseTrack()"
-        class="bg-transparent border-none pd-zero"
+        class="bg-main pd-thin"
         :showLoader="false"
         :showSucces="false"
       >
-        <IconPause class="i-small" fill="rgb(var(--main))"/>
+        <IconPause @click.stop="pauseTrack()" class="i-small" fill="rgb(var(--white))"/>
       </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'" 
+          :url="track.coverUrl || (track.album && track.album.coverUrl) || '/logo/logo-placeholder.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">
+        <div class="track-name " :class="{'t-main': isPlaying(track)}">
+          <router-link 
+            v-if="track.url"
+            :to="{ name: 'track', params: { url: track.url } }"
+            class="hover-t-main"
+            :class="{'t-main': isPlaying(track)}"
+            @click.stop
+          >
+            {{ track.title }}
+          </router-link>
+          <span v-else>{{ track.title }}</span>
+        </div>
+        <div :class="{'t-main': isPlaying(track)}" class="track-artist t-transp t-small">
           <router-link 
             v-if="track.artist && track.artist._id"
             :to="{ name: 'artist', params: { url: track.artist.url } }"
-            class="t-grey hover-"
+            class="t-transp hover-"
             @click.stop
           >
             {{ getArtistName(track) }}
@@ -54,11 +65,11 @@
       </div>
     </div>
     
-    <div v-if="showAlbum" class="track-album w-15r mobile:w-0 mobile:hidden t-grey t-truncate">
+    <div v-if="showAlbum" class="track-album  w-15r mobile:w-0 mobile:hidden t-transp t-truncate">
       <router-link 
         v-if="track.album && track.album._id"
         :to="{ name: 'album', params: { url: track.album.url } }"
-        class="t-grey hover-"
+        class="t-transp hover-"
         @click.stop
       >
         {{ track.album.title }}
@@ -66,7 +77,7 @@
       <span v-else>{{ track.album?.title || 'Single' }}</span>
     </div>
     
-    <div class="track-duration w-5r t-right t-grey">{{ formatDuration(track.duration) }}</div>
+    <div class="track-duration w-5r t-right t-transp">{{ formatDuration(track.duration) }}</div>
   </div>
 </template>