@ozdao/martyrs 0.2.565 → 0.2.566

package/dist/style.css

@@ -3086,10 +3086,40 @@ input[data-v-cca87f09] {
   background: rgba(var(--second),0.9);
 }
 
-.volume-control[data-v-d29a4209] {
+.volume-section[data-v-caf5f57c] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: center;
+  width: 100%;
+}
+.volume-btn[data-v-caf5f57c] {
+  background: none;
+  border: none;
+  color: rgb(var(--black));
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.volume-icon[data-v-caf5f57c] {
+  width: 16px;
+  height: 16px;
+}
+.volume-btn[data-v-caf5f57c]:hover {
+  background: rgba(var(--black),0.1);
+}
+.volume-slider[data-v-caf5f57c] {
+  flex: 1;
+}
+.volume-control[data-v-caf5f57c] {
   width: 100%;
 }
-.volume-bar-container[data-v-d29a4209] {
+.volume-bar-container[data-v-caf5f57c] {
   width: 100%;
   height: 12px;
   display: flex;
@@ -3097,38 +3127,72 @@ input[data-v-cca87f09] {
   cursor: pointer;
   padding: 4px 0;
 }
-.volume-track[data-v-d29a4209] {
+.volume-track[data-v-caf5f57c] {
   position: relative;
   width: 100%;
   height: 4px;
   border-radius: 2px;
   transition: height 0.2s ease;
 }
-.volume-thumb[data-v-d29a4209] {
+.volume-thumb[data-v-caf5f57c] {
   position: absolute;
   top: 50%;
   width: 12px;
   height: 12px;
-   background: rgb(var(--black));
+  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-d29a4209] {
+.volume-bar-container:hover .volume-track[data-v-caf5f57c] {
   height: 6px;
 }
-.volume-bar-container:hover .volume-thumb[data-v-d29a4209] {
+.volume-bar-container:hover .volume-thumb[data-v-caf5f57c] {
   opacity: 1 !important;
 }
 
 /* Muted state */
-.volume-track.muted[data-v-d29a4209] {
+.volume-track.muted[data-v-caf5f57c] {
   opacity: 0.5;
 }
 
-.player-container[data-v-f4886dd7] {
+.pauseplay-btn[data-v-7ad52fcb] {
+  --bars-anim-duration: 300ms;
+  --clip-anim-duration: 150ms;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: clip-path ease-out var(--clip-anim-duration);
+  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
+}
+.pauseplay-btn.paused[data-v-7ad52fcb] {
+  clip-path: polygon(0 0, 0 100%, 100% 50%, 100% 50%);
+}
+.pauseplay-btn div[data-v-7ad52fcb] {
+  position: absolute;
+  top: 0;
+  width: 30%;
+  height: 100%;
+  background: white;
+  transition: transform ease-out var(--bars-anim-duration);
+}
+.pauseplay-btn.paused div[data-v-7ad52fcb] {
+  transform: scaleX(2);
+}
+.pauseplay-btn div.d1[data-v-7ad52fcb] {
+  left: 0;
+  transform-origin: left;
+}
+.pauseplay-btn div.d2[data-v-7ad52fcb] {
+  right: 0;
+  transform-origin: right;
+}
+
+.player-container[data-v-098a5fdf] {
   bottom: 0;
   left: 0;
   right: 0;
@@ -3137,7 +3201,7 @@ input[data-v-cca87f09] {
   border-top: 1px solid rgb(var(--light));
   backdrop-filter: blur(10px);
 }
-.player[data-v-f4886dd7] {
+.player[data-v-098a5fdf] {
   display: grid;
   grid-template-columns: 1fr 2fr 1fr;
   align-items: center;
@@ -3148,33 +3212,38 @@ input[data-v-cca87f09] {
 }
 
 /* Track Info Section */
-.track-info[data-v-f4886dd7] {
+.track-info[data-v-098a5fdf] {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
 }
-.track-image[data-v-f4886dd7] {
+.track-info[data-v-098a5fdf]:hover {
+  opacity: 0.8;
+}
+.track-image[data-v-098a5fdf] {
   width: 56px;
   height: 56px;
   border-radius: 4px;
   overflow: hidden;
   flex-shrink: 0;
 }
-.track-image-media[data-v-f4886dd7] {
+.track-image-media[data-v-098a5fdf] {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.3s ease;
 }
-.track-image:hover .track-image-media[data-v-f4886dd7] {
+.track-image:hover .track-image-media[data-v-098a5fdf] {
   transform: scale(1.05);
 }
-.track-details[data-v-f4886dd7] {
+.track-details[data-v-098a5fdf] {
   min-width: 0;
   flex: 1;
 }
-.track-title[data-v-f4886dd7] {
+.track-title[data-v-098a5fdf] {
   font-size: 14px;
   font-weight: 600;
   color: rgb(var(--black));
@@ -3184,7 +3253,7 @@ input[data-v-cca87f09] {
   text-overflow: ellipsis;
   line-height: 1.2;
 }
-.track-artist[data-v-f4886dd7] {
+.track-artist[data-v-098a5fdf] {
   font-size: 12px;
   color: rgb(var(--grey));
   margin: 2px 0 0 0;
@@ -3192,7 +3261,7 @@ input[data-v-cca87f09] {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.like-btn[data-v-f4886dd7] {
+.like-btn[data-v-098a5fdf] {
   background: none;
   border: none;
   color: rgb(var(--grey));
@@ -3204,158 +3273,67 @@ input[data-v-cca87f09] {
   align-items: center;
   justify-content: center;
 }
-.like-icon[data-v-f4886dd7] {
+.like-icon[data-v-098a5fdf] {
   width: 16px;
   height: 16px;
 }
-.like-btn[data-v-f4886dd7]:hover {
+.like-btn[data-v-098a5fdf]:hover {
   color: rgb(var(--black));
   background: rgba(var(--black),0.1);
 }
-.like-btn.liked[data-v-f4886dd7] {
+.like-btn.liked[data-v-098a5fdf] {
   color: rgb(var(--main));
 }
-.like-btn.liked .like-icon[data-v-f4886dd7] {
+.like-btn.liked .like-icon[data-v-098a5fdf] {
   fill: rgb(var(--main));
 }
-.like-btn.liked[data-v-f4886dd7]:hover {
+.like-btn.liked[data-v-098a5fdf]:hover {
   color: rgb(var(--main));
   opacity: 0.8;
 }
 
 /* Controls Section */
-.controls[data-v-f4886dd7] {
+.controls[data-v-098a5fdf] {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   width: 100%;
 }
-.control-buttons[data-v-f4886dd7] {
+.control-buttons[data-v-098a5fdf] {
   display: flex;
   align-items: center;
   gap: 16px;
 }
-.control-btn[data-v-f4886dd7] {
-  background: none;
-  border: none;
-  color: rgb(var(--grey));
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.control-icon[data-v-f4886dd7] {
-  width: 16px;
-  height: 16px;
-}
-.control-btn.primary[data-v-f4886dd7] {
-  background: rgb(var(--second));
-  color: rgb(var(--white));
-  width: 32px;
-  height: 32px;
-}
-.play-icon[data-v-f4886dd7] {
-  width: 14px;
-  height: 14px;
-  fill: rgb(var(--white));
-}
-.control-btn.primary[data-v-f4886dd7]:hover {
-  background: rgb(var(--second));
-  transform: scale(1.06);
-}
-.control-btn.secondary[data-v-f4886dd7]:hover {
-  color: rgb(var(--white));
-  background: rgba(var(--black),0.1);
-}
-.control-btn.secondary:hover .control-icon[data-v-f4886dd7] {
-  fill: rgb(var(--white));
-}
-.control-btn.active[data-v-f4886dd7] {
-  color: rgb(var(--main));
-  background: rgba(var(--second),0.1);
-}
-.control-btn.active .control-icon[data-v-f4886dd7] {
-  fill: rgb(var(--main));
-}
-.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-f4886dd7] {
+.progress-section[data-v-098a5fdf] {
   width: 100%;
   max-width: 600px;
 }
 
-/* Volume Section */
-.volume-section[data-v-f4886dd7] {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  justify-content: flex-end;
-}
-.volume-btn[data-v-f4886dd7] {
-  background: none;
-  border: none;
-  color: rgb(var(--grey));
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.volume-icon[data-v-f4886dd7] {
-  width: 16px;
-  height: 16px;
-}
-.volume-btn[data-v-f4886dd7]:hover {
-  color: rgb(var(--white));
-  background: rgba(var(--white),0.1);
-}
-.volume-btn:hover .volume-icon[data-v-f4886dd7] {
-  fill: rgb(var(--white));
-}
-.volume-slider[data-v-f4886dd7] {
-  width: 100px;
-}
-
 /* Responsive Design */
 @media (max-width: 768px) {
-.player[data-v-f4886dd7] {
+.player[data-v-098a5fdf] {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
     height: auto;
     padding: 8px 12px 12px;
     gap: 12px;
 }
-.track-info[data-v-f4886dd7] {
+.track-info[data-v-098a5fdf] {
     order: 1;
 }
-.controls[data-v-f4886dd7] {
+.controls[data-v-098a5fdf] {
     order: 2;
 }
-.volume-section[data-v-f4886dd7] {
-    order: 3;
-    justify-content: center;
-}
-.volume-slider[data-v-f4886dd7] {
-    width: 120px;
-}
-.progress-section[data-v-f4886dd7] {
+.progress-section[data-v-098a5fdf] {
     max-width: 100%;
 }
 }
 
 /* Animations */
-@keyframes fadeIn-f4886dd7 {
+@keyframes fadeIn-098a5fdf {
 from {
     opacity: 0;
     transform: translateY(20px);
@@ -3365,10 +3343,10 @@ to {
     transform: translateY(0);
 }
 }
-.player-container[data-v-f4886dd7] {
-  animation: fadeIn-f4886dd7 0.3s ease-out;
+.player-container[data-v-098a5fdf] {
+  animation: fadeIn-098a5fdf 0.3s ease-out;
 }
-@keyframes pulse-f4886dd7 {
+@keyframes pulse-098a5fdf {
 0% {
     transform: scale(1);
 }
@@ -3379,42 +3357,140 @@ to {
     transform: scale(1);
 }
 }
-.control-btn.primary[data-v-f4886dd7]:active {
-  animation: pulse-f4886dd7 0.3s ease;
+.control-btn.primary[data-v-098a5fdf]:active {
+  animation: pulse-098a5fdf 0.3s ease;
+}
+.radioTonarWrapper[data-v-76598c55] {
+  width: 15rem;
+  position: absolute;
+  z-index: 30;
+  transform: rotate(253deg);
+  transform-origin: 75% center;
+  top: 0;
+  right: -2.5rem;
+  transition: transform 1s ease-in-out;
+}
+.radioTonar[data-v-76598c55] {
+  width: 15rem;
+  transform-origin: 75% center;
+}
+.activeTonar[data-v-76598c55] {
+  transform: rotate(285deg);
+}
+.playingTonar[data-v-76598c55] {
+  animation: playingTonar-76598c55 2s ease-in-out infinite;
+}
+@keyframes playingTonar-76598c55 {
+0%, 100% {
+    transform: rotate(0deg);
+}
+25% {
+    transform: rotate(2deg);
+}
+50% {
+    transform: rotate(-2deg);
+}
+}
+@property --a {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --b {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+.rotate-gradient[data-v-76598c55] {
+  --a: 0deg;
+  --b: 0deg;
+  transition: --a 0.5s, --b 0.5s;
+  background: conic-gradient(from var(--a), rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.33), rgba(255, 255, 255, 0.1)), linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgb(0, 0, 0) 100%), linear-gradient(180deg, #000 0%, rgba(10, 10, 10, 0) 100%), #000;
+}
+/* Shared control button styles for both players */
+.control-btn {
+  background: none;
+  border: none;
+  color: rgb(var(--grey));
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.control-icon {
+  width: 16px;
+  height: 16px;
+}
+.control-btn.primary {
+  background: rgb(var(--second));
+  color: rgb(var(--white));
+  width: 32px;
+  height: 32px;
+}
+.play-icon {
+  width: 14px;
+  height: 14px;
+  fill: rgb(var(--white));
+}
+.control-btn.primary:hover {
+  background: rgb(var(--second));
+  transform: scale(1.06);
+}
+.control-btn.secondary:hover {
+  color: rgb(var(--white));
+  background: rgba(var(--black),0.1);
+}
+.control-btn.secondary:hover .control-icon {
+  fill: rgb(var(--white));
+}
+.control-btn.active {
+  color: rgb(var(--main));
+  background: rgba(var(--second),0.1);
+}
+.control-btn.active .control-icon {
+  fill: rgb(var(--main));
+}
+.control-btn.active:hover {
+  color: rgb(var(--main));
+  opacity: 0.8;
+  background: rgba(var(--second),0.2);
 }
 
-.album-card[data-v-faf7f060] {
+.album-card[data-v-7bd0bb4d] {
   transition: transform 0.3s ease;
 }
-.album-card[data-v-faf7f060]:hover {
+.album-card[data-v-7bd0bb4d]:hover {
   transform: translateY(-5px);
 }
-.album-overlay[data-v-faf7f060] {
+.album-overlay[data-v-7bd0bb4d] {
   background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
-.album-card:hover .album-overlay[data-v-faf7f060] {
+.album-card:hover .album-overlay[data-v-7bd0bb4d] {
   opacity: 1;
 }
-.play-button[data-v-faf7f060] {
+.play-button[data-v-7bd0bb4d] {
   transform: scale(0.8);
   transition: transform 0.3s ease;
 }
-.album-card:hover .play-button[data-v-faf7f060] {
+.album-card:hover .play-button[data-v-7bd0bb4d] {
   transform: scale(1);
 }
 
-.artist-card[data-v-7fd022f7] {
+.artist-card[data-v-64fdf510] {
   transition: all 0.2s ease;
 }
-.artist-card[data-v-7fd022f7]:hover {
+.artist-card[data-v-64fdf510]:hover {
   transform: translateY(-5px);
 }
-.artist-avatar img[data-v-7fd022f7] {
+.artist-avatar img[data-v-64fdf510] {
   transition: transform 0.2s ease;
 }
-.artist-card:hover .artist-avatar img[data-v-7fd022f7] {
+.artist-card:hover .artist-avatar img[data-v-64fdf510] {
   transform: scale(1.05);
 }
 
@@ -3451,7 +3527,7 @@ to {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.bg-gradient-dark[data-v-82023828] {
+.bg-gradient-dark[data-v-f86a5570] {
   background: linear-gradient(to bottom, rgba(var(--dark), 0.8), rgba(var(--black), 0.9));
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozdao/martyrs",
-  "version": "0.2.565",
+  "version": "0.2.566",
   "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/components/BottomSheet/BottomSheet.vue

@@ -1,11 +1,11 @@
 <template>
   <transition name="slideY"  mode="out-in">
-    <section 
+    <section
       v-if="show"
-      ref="wrapper" 
-      class="w-100 bs-black rows-1 h-100"
+      ref="wrapper"
+      class="w-100 bs-black rows-1 h-100 pos-absolute pos-t-0 pos-l-0 z-index-9999"
       :class="{
-        'pd-t-extra': MOBILE_APP === 'ios',  
+        'pd-t-extra': MOBILE_APP === 'ios',
       }"
       >
       <!-- Toggle To Close -->