@ozdao/martyrs 0.2.496 → 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] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.496",
+  "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 };
-      //     }
-      //   ]
-      // }),
+      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 || '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/music/components/player/MusicPlayer.vue

@@ -21,7 +21,7 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconLike fill="rgb(var(--white))" class="like-icon"/>
+          <IconLike class="like-icon"/>
         </Button>
       </div>
 
@@ -35,7 +35,7 @@
             :showLoader="false" 
             :showSucces="false"
           >
-            <IconShuffle fill="rgb(var(--white))" class="control-icon"/>
+            <IconShuffle fill="rgb(var(--black))" class="control-icon"/>
           </Button>
           
           <Button 
@@ -44,7 +44,7 @@
             :showLoader="false" 
             :showSucces="false"
           >
-            <IconPrevious fill="rgb(var(--white))" class="control-icon"/>
+            <IconPrevious fill="rgb(var(--black))" class="control-icon"/>
           </Button>
           
           <Button 
@@ -53,8 +53,8 @@
             :showLoader="false" 
             :showSucces="false"
           >
-            <IconPause v-if="isPlaying" class="play-icon"/>
-            <IconPlay v-else class="play-icon"/>
+            <IconPause v-if="isPlaying" fill="white" class="play-icon"/>
+            <IconPlay fill="white"  v-else class="play-icon"/>
           </Button>
           
           <Button 
@@ -63,7 +63,7 @@
             :showLoader="false" 
             :showSucces="false"
           >
-            <IconNext fill="rgb(var(--white))" class="control-icon"/>
+            <IconNext fill="rgb(var(--black))" class="control-icon"/>
           </Button>
           
           <Button 
@@ -73,7 +73,7 @@
             :showLoader="false" 
             :showSucces="false"
           >
-            <IconRepeat fill="rgb(var(--white))" class="control-icon"/>
+            <IconRepeat fill="rgb(var(--black))" class="control-icon"/>
           </Button>
         </div>
         
@@ -91,9 +91,9 @@
           :showLoader="false" 
           :showSucces="false"
         >
-          <IconVolume fill="rgb(var(--white))" v-if="!muted && volume > 0.5" class="volume-icon"/>
-          <IconVolumeHalf fill="rgb(var(--white))" v-else-if="!muted && volume > 0" class="volume-icon"/>
-          <IconVolumeMute  fill="rgb(var(--white))" v-else class="volume-icon"/>
+          <IconVolumeMute fill="rgb(var(--black))" v-if="muted || volume < 0.005" class="volume-icon"/>
+          <!-- <IconVolumeHalf fill="rgb(var(--black))" v-else-if="!muted && volume > 0" class="volume-icon"/> -->
+          <IconUnMute  fill="rgb(var(--black))" v-else class="volume-icon"/>
         </Button>
         
         <div class="volume-slider">
@@ -120,6 +120,7 @@ import IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';
 import IconRepeat from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';
 import IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';
 import IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';
+import IconUnMute from '@martyrs/src/modules/icons/navigation/IconUnMute.vue';
 import IconVolumeHalf from '@martyrs/src/modules/icons/navigation/IconVolume.vue';
 import IconVolumeMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';
 
@@ -186,8 +187,8 @@ const getArtistName = (track) => {
   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);
 }
 
@@ -236,7 +237,7 @@ const getArtistName = (track) => {
 .track-title {
   font-size: 14px;
   font-weight: 600;
-  color: rgb(var(--white));
+  color: rgb(var(--black));
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -272,8 +273,8 @@ const getArtistName = (track) => {
 }
 
 .like-btn:hover {
-  color: rgb(var(--white));
-  background: rgba(255, 255, 255, 0.1);
+  color: rgb(var(--black));
+  background: rgba(var(--black),0.1);
 }
 
 .like-btn.liked {
@@ -323,8 +324,8 @@ const getArtistName = (track) => {
 }
 
 .control-btn.primary {
-  background: rgb(var(--white));
-  color: rgb(var(--black));
+  background: rgb(var(--second));
+  color: rgb(var(--white));
   width: 32px;
   height: 32px;
 }
@@ -332,17 +333,17 @@ const getArtistName = (track) => {
 .play-icon {
   width: 14px;
   height: 14px;
-  fill: rgb(var(--black));
+  fill: rgb(var(--white));
 }
 
 .control-btn.primary:hover {
-  background: rgb(240, 240, 240);
+  background: rgb(var(--second));
   transform: scale(1.06);
 }
 
 .control-btn.secondary:hover {
   color: rgb(var(--white));
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--black),0.1);
 }
 
 .control-btn.secondary:hover .control-icon {
@@ -351,6 +352,7 @@ const getArtistName = (track) => {
 
 .control-btn.active {
   color: rgb(var(--main));
+  background: rgba(var(--second),0.1);
 }
 
 .control-btn.active .control-icon {
@@ -360,6 +362,7 @@ const getArtistName = (track) => {
 .control-btn.active:hover {
   color: rgb(var(--main));
   opacity: 0.8;
+   background: rgba(var(--second),0.2);
 }
 
 /* Progress Section */
@@ -396,7 +399,7 @@ const getArtistName = (track) => {
 
 .volume-btn:hover {
   color: rgb(var(--white));
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--white),0.1);
 }
 
 .volume-btn:hover .volume-icon {