@ozdao/martyrs 0.2.494 → 0.2.496

package/dist/style.css

@@ -3125,6 +3125,19 @@ to {
   transform: scale(1);
 }
 
+.artist-card[data-v-7fd022f7] {
+  transition: all 0.2s ease;
+}
+.artist-card[data-v-7fd022f7]:hover {
+  transform: translateY(-5px);
+}
+.artist-avatar img[data-v-7fd022f7] {
+  transition: transform 0.2s ease;
+}
+.artist-card:hover .artist-avatar img[data-v-7fd022f7] {
+  transform: scale(1.05);
+}
+
 .playlist-card[data-v-be2a71af] {
   transition: transform 0.3s ease;
 }
@@ -3162,20 +3175,20 @@ to {
   background: linear-gradient(to bottom, rgba(var(--dark), 0.8), rgba(var(--black), 0.9));
 }
 
-.bg-gradient-color[data-v-464383f0] {
+.bg-gradient-color[data-v-e47a0d68] {
   background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));
 }
 
-.search-form[data-v-405341b8] {
+.search-form[data-v-fa80a365] {
   transition: background-color 0.2s ease;
 }
-.search-form[data-v-405341b8]:focus-within {
+.search-form[data-v-fa80a365]:focus-within {
   background-color: rgba(var(--dark), 0.8);
 }
-input[data-v-405341b8]::placeholder {
+input[data-v-fa80a365]::placeholder {
   color: rgba(var(--grey), 0.8);
 }
-input[data-v-405341b8]:focus {
+input[data-v-fa80a365]:focus {
   outline: none;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.494",
+  "version": "0.2.496",
   "description": "Fullstack framework focused on user experience and ease of development.",
   "author": "OZ DAO <hello@ozdao.dev>",
   "license": "GPL-3.0-or-later",

package/src/builder/rspack/rspack.config.ssr.client.js

@@ -67,47 +67,47 @@ export default (projectRoot) => {
       }),
       // PWA PWA PWA PWA PWA
       // PWA: инжектим манифест в существующий sw.js
-      new InjectManifest({
-        swSrc: path.resolve(projectRoot, '../public/sw.js'),
-        swDest: 'sw.js',
-        exclude: [/\.html$/, /\.map$/],
-        manifestTransforms: [
-          (manifestEntries) => {
-            const manifest = manifestEntries.filter(entry => {
-              return !entry.url.match(/\.(html|map)$/) && entry.size < 5 * 1024 * 1024;
-            });
-            return { manifest };
-          }
-        ]
-      }),
+      // new InjectManifest({
+      //   swSrc: path.resolve(projectRoot, '../public/sw.js'),
+      //   swDest: 'sw.js',
+      //   exclude: [/\.html$/, /\.map$/],
+      //   manifestTransforms: [
+      //     (manifestEntries) => {
+      //       const manifest = manifestEntries.filter(entry => {
+      //         return !entry.url.match(/\.(html|map)$/) && entry.size < 5 * 1024 * 1024;
+      //       });
+      //       return { manifest };
+      //     }
+      //   ]
+      // }),
       // // PWA Manifest
-      new RspackManifestPlugin({
-        fileName: 'manifest.json',
-        seed: {
-          name: process.env.APP_NAME || 'OZDAO App',
-          short_name: process.env.APP_SHORT_NAME || 'OZDAO',
-          description: process.env.APP_DESCRIPTION || 'OZDAO Progressive Web App',
-          theme_color: '#000000',
-          background_color: '#ffffff',
-          display: 'standalone',
-          orientation: 'portrait',
-          scope: '/',
-          start_url: '/',
-          icons: [
-            {
-              src: '/favicon/android-chrome-192x192.png',
-              sizes: '192x192',
-              type: 'image/png'
-            },
-            {
-              src: '/favicon/android-chrome-512x512.png', 
-              sizes: '512x512',
-              type: 'image/png'
-            }
-          ]
-        },
-        generate: (seed) => seed
-      }),
+      // new RspackManifestPlugin({
+      //   fileName: 'manifest.json',
+      //   seed: {
+      //     name: process.env.APP_NAME || 'OZDAO App',
+      //     short_name: process.env.APP_SHORT_NAME || 'OZDAO',
+      //     description: process.env.APP_DESCRIPTION || 'OZDAO Progressive Web App',
+      //     theme_color: '#000000',
+      //     background_color: '#ffffff',
+      //     display: 'standalone',
+      //     orientation: 'portrait',
+      //     scope: '/',
+      //     start_url: '/',
+      //     icons: [
+      //       {
+      //         src: '/favicon/android-chrome-192x192.png',
+      //         sizes: '192x192',
+      //         type: 'image/png'
+      //       },
+      //       {
+      //         src: '/favicon/android-chrome-512x512.png', 
+      //         sizes: '512x512',
+      //         type: 'image/png'
+      //       }
+      //     ]
+      //   },
+      //   generate: (seed) => seed
+      // }),
     ],
     optimization: {
       usedExports: true,  

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

@@ -2,9 +2,18 @@ import * as cookie from 'cookie';
 import jwt from 'jsonwebtoken';
 import uWS from 'uWebSockets.js';
 class WebSocketManager {
-  constructor() {
+  constructor(options = {}) {
     // Создаем uWebSockets.js приложение внутри класса
-    this.app = uWS.App();
+    if (options.ssl) {
+      this.app = uWS.SSLApp({
+        key_file_name: options.ssl.key,      // путь к private key
+        cert_file_name: options.ssl.cert,    // путь к certificate
+        passphrase: options.ssl.passphrase   // если ключ защищен паролем
+      });
+    } else {
+      // Fallback на обычный HTTP для разработки
+      this.app = uWS.App();
+    };
     this.modules = new Map();
     this.userConnections = new Map();
     // Добавляем контейнер для RPC методов

package/src/modules/globals/globals.client.js

@@ -44,12 +44,11 @@ function initializeGlobals(app, store, router, config, options = {}) {
 
   i18nManager.register('globals', locales);
 
-  console.log('mesages is',  i18nManager.getAllMessages())
-
   const envVariables = ['NODE_ENV', 'PORT', 'APP_NAME', 'DOMAIN_URL', 'API_URL', 'WSS_URL', 'FILE_SERVER_URL', 'WDT_TOKEN', 'WDM_URL_PROD', 'GOOGLE_MAPS_API_KEY', 'MOBILE_APP'];
 
   app.config.globalProperties.DOMAIN_URL = process.env.DOMAIN_URL;
   app.config.globalProperties.API_URL = process.env.API_URL;
+  app.config.globalProperties.WSS_URL = process.env.WSS_URL;
   app.config.globalProperties.MOBILE_APP = process.env.MOBILE_APP;
   app.config.globalProperties.FILE_SERVER_URL = process.env.FILE_SERVER_URL;
   app.config.globalProperties.GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY;

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

@@ -106,7 +106,7 @@
 	    </component>
 		  <!-- rows-1-min0_max1 z-index-1 pos-relative w-100 h-100 -->
 		  <div class="rows-1-min0_max1 z-index-1 pos-relative w-100 h-100">
-		  	<div class="o-y-scroll o-x-hidden h-100">
+		  	<div id="scrollview" ref="scrollview" class="o-y-scroll o-x-hidden h-100">
 	  			<Status 
 	  				v-if="globals.state.error.show"
 						:data="globals.state.error"
@@ -157,15 +157,16 @@
 			      class="z-index-2"
 			    	:is="route.meta.player"
 			    />
-			  
-	        <component
-						v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter"
-			      ref="footer" 
-			      :is="route.meta.footer"
-			      :theme="headerTheme"
-			      :logotype="route.meta.logotype"
-			      :location="route.meta.location"
-			    />
+			  	<transition @before-enter="scrollTop" name="scaleTransition" mode="out-in" appear>
+		        <component
+							v-if="!MOBILE_APP && route.meta.footer && !route.meta.hideFooter && page && !isPageLoading"
+				      ref="footer" 
+				      :is="route.meta.footer"
+				      :theme="headerTheme"
+				      :logotype="route.meta.logotype"
+				      :location="route.meta.location"
+				    />
+			   	</transition>
 				</div>
 			</div>
 		</section>
@@ -232,6 +233,7 @@
   let show = ref(false)
   // Preloader
   const page = ref(null)
+   const scrollview = ref(null)
 
   const isPageLoading = ref(true);
   
@@ -265,7 +267,7 @@
 	  globals.state.isOpenLocationPopup = false;
 	}
 	function scrollTop(){
-		document.getElementById('app').scrollIntoView();
+		scrollview.value.scrollTop = 0;
 	}
 	// Scrolling header
 	const scrollOffset = ref(0)

package/src/modules/globals/views/router/scrollBehavior.js

@@ -16,7 +16,7 @@ export default async function scrollBehavior(to, from, savedPosition) {
 
     if (to.hash) {
       let el = await findEl(to.hash);
-      let screen = await findEl('#screen');
+      let screen = await findEl('#scrollview');
 
       if ('scrollBehavior' in document.documentElement.style) {
         return screen.scrollTo({ top: el.offsetTop, behavior: 'smooth' });

package/src/modules/music/README.md

@@ -1,6 +1,8 @@
 # Music Module
 
 ## Задачи
+1. Отрефачить карточку ArtistCardSmall - декомпозировать пропс artist, заменить ArtistCard на ArtistCardSmall и оставить только ArtistCard.
+2. Кнопка проигрывания должна показывать паузу на треке только если это текущий трек!
 
 ### Оптимизация подсчета воспроизведений
 - [ ] Перенести увеличение playCount из HTTP stream controller в WebSocket handler

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

@@ -14,7 +14,7 @@
           <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'"
+              :class="$route.name === 'music-home' ? 'bg-white' : 'hover-bg-white'"
             >
               <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' : ''">Home</span>
@@ -23,7 +23,7 @@
           <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'"
+              :class="$route.name === 'music-search' ? 'bg-white' : 'hover-bg-white'"
             >
               <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' : ''">Search</span>
@@ -32,7 +32,7 @@
           <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'"
+              :class="$route.name === 'music-library' ? 'bg-white' : 'hover-bg-white'"
             >
               <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' : ''">Your Library</span>
@@ -46,7 +46,7 @@
           <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"
+            class="bg-transparent cursor-pointer pd-micro radius-small hover-bg-white"
             :showLoader="false"
             :showSucces="false"
           >
@@ -72,8 +72,8 @@
             <li v-for="playlist in items" :key="playlist._id" class="mn-b-thin">
               <router-link 
                 :to="{ name: 'playlist', params: { url: playlist.url } }" 
-                class=" t-truncate d-block pd-thin radius-small hover-bg-dark"
-                :class="$route.params.url === playlist.url ? 'bg-dark t-main' : ''"
+                class=" t-truncate d-block pd-thin radius-small hover-bg-white"
+                :class="$route.params.url === playlist.url ? 'bg-white t-main' : ''"
               >
                 {{ playlist.title }}
               </router-link>
@@ -87,7 +87,7 @@
     <Popup 
       v-if="showCreatePlaylistModal" 
       @close-popup="showCreatePlaylistModal = false" 
-      class="bg-dark pd-small w-m-25r radius-medium "
+      class="bg-white pd-small w-m-25r radius-medium "
     >
       <h3 class="mn-b-medium">Create Playlist</h3>
       <PlaylistForm @created="onPlaylistCreated" />

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

@@ -0,0 +1,92 @@
+<!-- components/cards/ArtistCard.vue -->
+<template>
+  <div class="artist-card bg-light pd-medium radius-medium flex flex-center gap-big">
+    <router-link 
+      :to="artist.url ? { name: 'artist', params: { url: artist.url } } : artist.to"
+      class="flex flex-v-center gap-thin flex-1 hover-opacity"
+    >
+      <div class="artist-avatar">
+        <Media 
+          v-if="artist.photoUrl"
+          :url="artist.photoUrl"
+          :alt="artist.name"
+          class="w-4r h-4r radius-full object-fit-cover"
+        />
+        <div v-else class="w-4r h-4r flex flex center radius-extra radius-full bg-main flex-center">
+          {{ artist.name.charAt(0) }}
+        </div>
+      </div>
+
+      <div>
+        <div class="flex items-center gap-thin">
+          <span class="mn-b-thin">{{ artist.name }}</span>
+          <IconVerified v-if="artist.isVerified" class="w-1r h-1r t-primary" />
+        </div>
+        <span class="t-small t-transp">{{ artistType }}</span>
+      </div>
+    </router-link>
+
+    <Button 
+      v-if="showFollowButton"
+      @click="handleFollowClick"
+      :color="isFollowing ? 'primary' : 'transp'"
+      size="small"
+      class="bg-main"
+    >
+      {{ isFollowing ? 'Following' : 'Follow' }}
+    </Button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Button from '@martyrs/src/components/Button/Button.vue';
+import Media from '@martyrs/src/components/Media/Media.vue';
+import IconVerified from '@martyrs/src/modules/icons/navigation/IconCheckmark.vue';
+
+const props = defineProps({
+  artist: {
+    type: Object,
+    required: true,
+    validator: (value) => {
+      return value._id && value.name && value.url;
+    }
+  },
+  isFollowing: {
+    type: Boolean,
+    default: false
+  },
+  showFollowButton: {
+    type: Boolean,
+    default: true
+  },
+  artistType: {
+    type: String,
+    default: 'Artist'
+  }
+});
+
+const emit = defineEmits(['toggle-follow']);
+
+const handleFollowClick = () => {
+  emit('toggle-follow', props.artist._id);
+};
+</script>
+
+<style scoped>
+.artist-card {
+  transition: all 0.2s ease;
+}
+
+.artist-card:hover {
+  transform: translateY(-5px);
+}
+
+.artist-avatar img {
+  transition: transform 0.2s ease;
+}
+
+.artist-card:hover .artist-avatar img {
+  transform: scale(1.05);
+}
+</style>

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

@@ -1,7 +1,7 @@
 <!-- components/cards/TrackListCard.vue -->
 <template>
   <div 
-    class="track-item pd-small hover-bg-dark-transp-25 flex-v-center flex cursor-pointer"
+    class="track-item pd-small hover-bg-white-transp-25 flex-v-center flex cursor-pointer"
     :class="{'bg-main-transp-10': isPlaying(track)}"
     @click="playTrack(track)"
     @dblclick="playTrack(track, true)"

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

@@ -1,6 +1,6 @@
 <!-- components/forms/SearchForm.vue -->
 <template>
-  <div class="search-form flex-v-center flex bg-dark-transp-50 pd-thin radius-extra">
+  <div class="search-form flex-v-center flex bg-white-transp-50 pd-thin radius-extra">
     <IconSearch class="i-small mn-r-small" fill="rgb(var(--grey))"/>
     <input 
       ref="searchInput"