@ozdao/martyrs 0.2.495 → 0.2.497

package/dist/style.css

@@ -2751,21 +2751,21 @@ input[data-v-cca87f09] {
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
 /* Progress Section */
-.progress-section[data-v-0bee7510] {
+.progress-section[data-v-a338a0bc] {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
 }
-.time-current[data-v-0bee7510],
-.time-total[data-v-0bee7510] {
+.time-current[data-v-a338a0bc],
+.time-total[data-v-a338a0bc] {
   font-size: 11px;
-  color: rgb(var(--grey));
+  color: rgb(var(--black));
   font-weight: 400;
   min-width: 32px;
   text-align: center;
 }
-.progress-bar[data-v-0bee7510] {
+.progress-bar[data-v-a338a0bc] {
   flex: 1;
   height: 12px;
   display: flex;
@@ -2773,46 +2773,47 @@ input[data-v-cca87f09] {
   cursor: pointer;
   padding: 4px 0;
 }
-.progress-track[data-v-0bee7510] {
+.progress-track[data-v-a338a0bc] {
   position: relative;
   width: 100%;
   height: 4px;
-  background: rgb(79, 79, 79);
+  background:  rgb(var(--grey));
   border-radius: 2px;
-  overflow: hidden;
+/*  overflow: hidden;*/
   transition: height 0.2s ease;
 }
-.progress-fill[data-v-0bee7510] {
+.progress-fill[data-v-a338a0bc] {
   height: 100%;
-  background: rgb(var(--white));
+  background: rgb(var(--second));
   border-radius: 2px;
   transition: width 0.1s ease;
 }
-.progress-thumb[data-v-0bee7510] {
+.progress-thumb[data-v-a338a0bc] {
   position: absolute;
   top: 50%;
   width: 12px;
   height: 12px;
-  background: rgb(var(--white));
+  background: rgb(var(--second));
+  border: 1px solid rgba(var(--black),0.1);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: opacity 0.2s ease;
 }
-.progress-bar:hover .progress-thumb[data-v-0bee7510] {
+.progress-bar:hover .progress-thumb[data-v-a338a0bc] {
   opacity: 1;
 }
-.progress-bar:hover .progress-track[data-v-0bee7510] {
+.progress-bar:hover .progress-track[data-v-a338a0bc] {
   height: 6px;
 }
-.progress-bar:hover .progress-fill[data-v-0bee7510] {
-  background: rgb(var(--main));
+.progress-bar:hover .progress-fill[data-v-a338a0bc] {
+  background: rgba(var(--second),0.9);
 }
 
-.volume-control[data-v-a6e8eccb] {
+.volume-control[data-v-d29a4209] {
   width: 100%;
 }
-.volume-bar-container[data-v-a6e8eccb] {
+.volume-bar-container[data-v-d29a4209] {
   width: 100%;
   height: 12px;
   display: flex;
@@ -2820,46 +2821,47 @@ input[data-v-cca87f09] {
   cursor: pointer;
   padding: 4px 0;
 }
-.volume-track[data-v-a6e8eccb] {
+.volume-track[data-v-d29a4209] {
   position: relative;
   width: 100%;
   height: 4px;
   border-radius: 2px;
   transition: height 0.2s ease;
 }
-.volume-thumb[data-v-a6e8eccb] {
+.volume-thumb[data-v-d29a4209] {
   position: absolute;
   top: 50%;
   width: 12px;
   height: 12px;
-  background: rgb(var(--white));
+   background: rgb(var(--black));
+  border: 1px solid rgba(var(--white),0.1);
   border-radius: 50%;
   transform: translate(-50%, -50%);
   transition: opacity 0.2s ease;
   opacity: 0;
 }
-.volume-bar-container:hover .volume-track[data-v-a6e8eccb] {
+.volume-bar-container:hover .volume-track[data-v-d29a4209] {
   height: 6px;
 }
-.volume-bar-container:hover .volume-thumb[data-v-a6e8eccb] {
+.volume-bar-container:hover .volume-thumb[data-v-d29a4209] {
   opacity: 1 !important;
 }
 
 /* Muted state */
-.volume-track.muted[data-v-a6e8eccb] {
+.volume-track.muted[data-v-d29a4209] {
   opacity: 0.5;
 }
 
-.player-container[data-v-8c2c90fa] {
+.player-container[data-v-f4886dd7] {
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 1000;
-  background: linear-gradient(135deg, rgb(24, 24, 24) 0%, rgb(18, 18, 18) 100%);
-  border-top: 1px solid rgb(40, 40, 40);
+  background: linear-gradient(135deg, rgb(var(--white)) 0%, rgb(var(--light)));
+  border-top: 1px solid rgb(var(--light));
   backdrop-filter: blur(10px);
 }
-.player[data-v-8c2c90fa] {
+.player[data-v-f4886dd7] {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
@@ -2870,43 +2872,43 @@ input[data-v-cca87f09] {
 }
 
 /* Track Info Section */
-.track-info[data-v-8c2c90fa] {
+.track-info[data-v-f4886dd7] {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
 }
-.track-image[data-v-8c2c90fa] {
+.track-image[data-v-f4886dd7] {
   width: 56px;
   height: 56px;
   border-radius: 4px;
   overflow: hidden;
   flex-shrink: 0;
 }
-.track-image-media[data-v-8c2c90fa] {
+.track-image-media[data-v-f4886dd7] {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }
-.track-image:hover .track-image-media[data-v-8c2c90fa] {
+.track-image:hover .track-image-media[data-v-f4886dd7] {
   transform: scale(1.05);
 }
-.track-details[data-v-8c2c90fa] {
+.track-details[data-v-f4886dd7] {
   min-width: 0;
   flex: 1;
 }
-.track-title[data-v-8c2c90fa] {
+.track-title[data-v-f4886dd7] {
   font-size: 14px;
   font-weight: 600;
-  color: rgb(var(--white));
+  color: rgb(var(--black));
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.2;
 }
-.track-artist[data-v-8c2c90fa] {
+.track-artist[data-v-f4886dd7] {
   font-size: 12px;
   color: rgb(var(--grey));
   margin: 2px 0 0 0;
@@ -2914,7 +2916,7 @@ input[data-v-cca87f09] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.like-btn[data-v-8c2c90fa] {
+.like-btn[data-v-f4886dd7] {
   background: none;
   border: none;
   color: rgb(var(--grey));
@@ -2926,39 +2928,39 @@ input[data-v-cca87f09] {
   align-items: center;
   justify-content: center;
 }
-.like-icon[data-v-8c2c90fa] {
+.like-icon[data-v-f4886dd7] {
   width: 16px;
   height: 16px;
 }
-.like-btn[data-v-8c2c90fa]:hover {
-  color: rgb(var(--white));
-  background: rgba(255, 255, 255, 0.1);
+.like-btn[data-v-f4886dd7]:hover {
+  color: rgb(var(--black));
+  background: rgba(var(--black),0.1);
 }
-.like-btn.liked[data-v-8c2c90fa] {
+.like-btn.liked[data-v-f4886dd7] {
   color: rgb(var(--main));
 }
-.like-btn.liked .like-icon[data-v-8c2c90fa] {
+.like-btn.liked .like-icon[data-v-f4886dd7] {
   fill: rgb(var(--main));
 }
-.like-btn.liked[data-v-8c2c90fa]:hover {
+.like-btn.liked[data-v-f4886dd7]:hover {
   color: rgb(var(--main));
   opacity: 0.8;
 }
 
 /* Controls Section */
-.controls[data-v-8c2c90fa] {
+.controls[data-v-f4886dd7] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   width: 100%;
 }
-.control-buttons[data-v-8c2c90fa] {
+.control-buttons[data-v-f4886dd7] {
   display: flex;
   align-items: center;
   gap: 16px;
 }
-.control-btn[data-v-8c2c90fa] {
+.control-btn[data-v-f4886dd7] {
   background: none;
   border: none;
   color: rgb(var(--grey));
@@ -2970,57 +2972,59 @@ input[data-v-cca87f09] {
   align-items: center;
   justify-content: center;
 }
-.control-icon[data-v-8c2c90fa] {
+.control-icon[data-v-f4886dd7] {
   width: 16px;
   height: 16px;
 }
-.control-btn.primary[data-v-8c2c90fa] {
-  background: rgb(var(--white));
-  color: rgb(var(--black));
+.control-btn.primary[data-v-f4886dd7] {
+  background: rgb(var(--second));
+  color: rgb(var(--white));
   width: 32px;
   height: 32px;
 }
-.play-icon[data-v-8c2c90fa] {
+.play-icon[data-v-f4886dd7] {
   width: 14px;
   height: 14px;
-  fill: rgb(var(--black));
+  fill: rgb(var(--white));
 }
-.control-btn.primary[data-v-8c2c90fa]:hover {
-  background: rgb(240, 240, 240);
+.control-btn.primary[data-v-f4886dd7]:hover {
+  background: rgb(var(--second));
   transform: scale(1.06);
 }
-.control-btn.secondary[data-v-8c2c90fa]:hover {
+.control-btn.secondary[data-v-f4886dd7]:hover {
   color: rgb(var(--white));
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--black),0.1);
 }
-.control-btn.secondary:hover .control-icon[data-v-8c2c90fa] {
+.control-btn.secondary:hover .control-icon[data-v-f4886dd7] {
   fill: rgb(var(--white));
 }
-.control-btn.active[data-v-8c2c90fa] {
+.control-btn.active[data-v-f4886dd7] {
   color: rgb(var(--main));
+  background: rgba(var(--second),0.1);
 }
-.control-btn.active .control-icon[data-v-8c2c90fa] {
+.control-btn.active .control-icon[data-v-f4886dd7] {
   fill: rgb(var(--main));
 }
-.control-btn.active[data-v-8c2c90fa]:hover {
+.control-btn.active[data-v-f4886dd7]:hover {
   color: rgb(var(--main));
   opacity: 0.8;
+   background: rgba(var(--second),0.2);
 }
 
 /* Progress Section */
-.progress-section[data-v-8c2c90fa] {
+.progress-section[data-v-f4886dd7] {
   width: 100%;
   max-width: 600px;
 }
 
 /* Volume Section */
-.volume-section[data-v-8c2c90fa] {
+.volume-section[data-v-f4886dd7] {
   display: flex;
   align-items: center;
   gap: 12px;
   justify-content: flex-end;
 }
-.volume-btn[data-v-8c2c90fa] {
+.volume-btn[data-v-f4886dd7] {
   background: none;
   border: none;
   color: rgb(var(--grey));
@@ -3032,50 +3036,50 @@ input[data-v-cca87f09] {
   align-items: center;
   justify-content: center;
 }
-.volume-icon[data-v-8c2c90fa] {
+.volume-icon[data-v-f4886dd7] {
   width: 16px;
   height: 16px;
 }
-.volume-btn[data-v-8c2c90fa]:hover {
+.volume-btn[data-v-f4886dd7]:hover {
   color: rgb(var(--white));
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--white),0.1);
 }
-.volume-btn:hover .volume-icon[data-v-8c2c90fa] {
+.volume-btn:hover .volume-icon[data-v-f4886dd7] {
   fill: rgb(var(--white));
 }
-.volume-slider[data-v-8c2c90fa] {
+.volume-slider[data-v-f4886dd7] {
   width: 100px;
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-.player[data-v-8c2c90fa] {
+.player[data-v-f4886dd7] {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
     height: auto;
     padding: 8px 12px 12px;
     gap: 12px;
 }
-.track-info[data-v-8c2c90fa] {
+.track-info[data-v-f4886dd7] {
     order: 1;
 }
-.controls[data-v-8c2c90fa] {
+.controls[data-v-f4886dd7] {
     order: 2;
 }
-.volume-section[data-v-8c2c90fa] {
+.volume-section[data-v-f4886dd7] {
     order: 3;
     justify-content: center;
 }
-.volume-slider[data-v-8c2c90fa] {
+.volume-slider[data-v-f4886dd7] {
     width: 120px;
 }
-.progress-section[data-v-8c2c90fa] {
+.progress-section[data-v-f4886dd7] {
     max-width: 100%;
 }
 }
 
 /* Animations */
-@keyframes fadeIn-8c2c90fa {
+@keyframes fadeIn-f4886dd7 {
 from {
     opacity: 0;
     transform: translateY(20px);
@@ -3085,10 +3089,10 @@ to {
     transform: translateY(0);
 }
 }
-.player-container[data-v-8c2c90fa] {
-  animation: fadeIn-8c2c90fa 0.3s ease-out;
+.player-container[data-v-f4886dd7] {
+  animation: fadeIn-f4886dd7 0.3s ease-out;
 }
-@keyframes pulse-8c2c90fa {
+@keyframes pulse-f4886dd7 {
 0% {
     transform: scale(1);
 }
@@ -3099,8 +3103,8 @@ to {
     transform: scale(1);
 }
 }
-.control-btn.primary[data-v-8c2c90fa]:active {
-  animation: pulse-8c2c90fa 0.3s ease;
+.control-btn.primary[data-v-f4886dd7]:active {
+  animation: pulse-f4886dd7 0.3s ease;
 }
 
 .album-card[data-v-faf7f060] {
@@ -3125,6 +3129,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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.495",
+  "version": "0.2.497",
   "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 };
-      //     }
-      //   ]
-      // }),
-      // // // 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 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 || 'App by Martyrs Framework',
+          short_name: process.env.APP_SHORT_NAME || 'App',
+          description: process.env.APP_DESCRIPTION || 'Progressive Web App by Martyrs Framework',
+          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/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/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>