@ozdao/martyrs 0.2.492 → 0.2.494

package/dist/martyrs/src/modules/music/components/player/MusicPlayer.vue.js

@@ -1,12 +1,12 @@
-import { ref, computed, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, withCtx, createBlock } from "vue";
+import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, toDisplayString, normalizeClass, withCtx, createBlock } from "vue";
 import Media from "../../../../components/Media/Media.vue.js";
 import _sfc_main$1 from "../../../../components/Button/Button.vue.js";
 import TrackProgress from "./TrackProgress.vue.js";
 import VolumeControl from "./VolumeControl.vue.js";
 import _sfc_main$5 from "../../../icons/navigation/IconPlay.vue.js";
 import _sfc_main$4 from "../../../icons/navigation/IconPause.vue.js";
-import IconChevronRight from "../../../icons/navigation/IconChevronRight.vue.js";
-import IconChevronLeft from "../../../icons/navigation/IconChevronLeft.vue.js";
+import IconNext from "../../../icons/navigation/IconChevronRight.vue.js";
+import IconPrevious from "../../../icons/navigation/IconChevronLeft.vue.js";
 import _sfc_main$3 from "../../../icons/navigation/IconShuffle.vue.js";
 import _sfc_main$6 from "../../../icons/navigation/IconRefresh.vue.js";
 import _sfc_main$2 from "../../../icons/navigation/IconLike.vue.js";
@@ -15,19 +15,18 @@ import _sfc_main$8 from "../../../icons/navigation/IconMute.vue.js";
 import { state, actions } from "../../store/player.js";
 /* empty css                 */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const _hoisted_1 = { class: "music-player pd-small flex-between flex-v-center flex bg-dark br-t br-solid br-dark-transp-20" };
-const _hoisted_2 = { class: "player-track-info flex-v-center flex w-25r" };
-const _hoisted_3 = {
-  key: 0,
-  class: "player-track-cover mn-r-small"
-};
-const _hoisted_4 = { class: "player-track-details t-truncate" };
-const _hoisted_5 = { class: "player-track-title t-medium t-truncate" };
-const _hoisted_6 = { class: "player-track-artist t-grey t-small t-truncate" };
-const _hoisted_7 = { class: "player-favorite mn-l-small" };
-const _hoisted_8 = { class: "player-controls flex-1 flex flex-column items-center" };
-const _hoisted_9 = { class: "player-buttons flex-v-center flex gap-small" };
-const _hoisted_10 = { class: "player-volume flex-v-center flex w-15r" };
+const _hoisted_1 = { class: "player-container" };
+const _hoisted_2 = { class: "player" };
+const _hoisted_3 = { class: "track-info" };
+const _hoisted_4 = { class: "track-image" };
+const _hoisted_5 = { class: "track-details" };
+const _hoisted_6 = { class: "track-title" };
+const _hoisted_7 = { class: "track-artist" };
+const _hoisted_8 = { class: "controls" };
+const _hoisted_9 = { class: "control-buttons" };
+const _hoisted_10 = { class: "progress-section" };
+const _hoisted_11 = { class: "volume-section" };
+const _hoisted_12 = { class: "volume-slider" };
 const _sfc_main = {
   __name: "MusicPlayer",
   setup(__props) {
@@ -38,16 +37,6 @@ const _sfc_main = {
     const muted = computed(() => state.muted);
     const shuffle = computed(() => state.shuffle);
     const repeat = computed(() => state.repeat);
-    const repeatIcon = computed(() => {
-      switch (repeat.value) {
-        case "one":
-          return "rgb(var(--main))";
-        case "all":
-          return "rgb(var(--main))";
-        default:
-          return "rgb(var(--grey))";
-      }
-    });
     const togglePlay = () => {
       actions.togglePlay();
     };
@@ -80,147 +69,148 @@ const _sfc_main = {
       return "Unknown Artist";
     };
     return (_ctx, _cache) => {
-      const _component_IconVolumeHalf = resolveComponent("IconVolumeHalf");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
-          currentTrack.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            createVNode(Media, {
-              url: currentTrack.value.coverUrl || currentTrack.value.album && currentTrack.value.album.coverUrl || "/assets/placeholder-track.jpg",
-              class: "w-3r h-3r object-fit-cover radius-small"
-            }, null, 8, ["url"])
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4, [
-            createElementVNode("div", _hoisted_5, toDisplayString(currentTrack.value?.title || "No track playing"), 1),
-            createElementVNode("div", _hoisted_6, toDisplayString(getArtistName(currentTrack.value)), 1)
-          ]),
-          createElementVNode("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, [
+              createVNode(Media, {
+                url: currentTrack.value?.coverUrl || currentTrack.value?.album && currentTrack.value.album.coverUrl || "/assets/placeholder-track.jpg",
+                class: "track-image-media"
+              }, null, 8, ["url"])
+            ]),
+            createElementVNode("div", _hoisted_5, [
+              createElementVNode("h3", _hoisted_6, toDisplayString(currentTrack.value?.title || "No track playing"), 1),
+              createElementVNode("p", _hoisted_7, toDisplayString(getArtistName(currentTrack.value)), 1)
+            ]),
             createVNode(_sfc_main$1, {
               onClick: toggleFavorite,
-              class: "bg-transparent border-none pd-zero",
+              class: normalizeClass(["like-btn", { liked: isFavorite.value }]),
               showLoader: false,
               showSucces: false
             }, {
               default: withCtx(() => [
                 createVNode(_sfc_main$2, {
-                  class: "i-small",
-                  fill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--grey))"
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        createElementVNode("div", _hoisted_8, [
-          createElementVNode("div", _hoisted_9, [
-            createVNode(_sfc_main$1, {
-              onClick: toggleShuffle,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$3, {
-                  class: "i-small",
-                  fill: shuffle.value ? "rgb(var(--main))" : "rgb(var(--grey))"
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$1, {
-              onClick: playPrevious,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: withCtx(() => [
-                createVNode(IconChevronLeft, {
-                  class: "i-small",
-                  fill: "rgb(var(--white))"
+                  fill: "rgb(var(--white))",
+                  class: "like-icon"
                 })
               ]),
               _: 1
-            }),
+            }, 8, ["class"])
+          ]),
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("div", _hoisted_9, [
+              createVNode(_sfc_main$1, {
+                onClick: toggleShuffle,
+                class: normalizeClass(["control-btn secondary", { active: shuffle.value }]),
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$3, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              createVNode(_sfc_main$1, {
+                onClick: playPrevious,
+                class: "control-btn secondary",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  createVNode(IconPrevious, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_sfc_main$1, {
+                onClick: togglePlay,
+                class: "control-btn primary",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  isPlaying.value ? (openBlock(), createBlock(_sfc_main$4, {
+                    key: 0,
+                    class: "play-icon"
+                  })) : (openBlock(), createBlock(_sfc_main$5, {
+                    key: 1,
+                    class: "play-icon"
+                  }))
+                ]),
+                _: 1
+              }),
+              createVNode(_sfc_main$1, {
+                onClick: playNext,
+                class: "control-btn secondary",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  createVNode(IconNext, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_sfc_main$1, {
+                onClick: toggleRepeat,
+                class: normalizeClass(["control-btn secondary", { active: repeat.value !== "off" }]),
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$6, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ]),
+            createElementVNode("div", _hoisted_10, [
+              createVNode(TrackProgress)
+            ])
+          ]),
+          createElementVNode("div", _hoisted_11, [
             createVNode(_sfc_main$1, {
-              onClick: togglePlay,
-              class: "play-pause-btn bg-white radius-round pd-micro flex-center flex",
+              onClick: toggleMute,
+              class: "volume-btn",
               showLoader: false,
               showSucces: false
             }, {
               default: withCtx(() => [
-                isPlaying.value ? (openBlock(), createBlock(_sfc_main$4, {
+                !muted.value && volume.value > 0.5 ? (openBlock(), createBlock(_sfc_main$7, {
                   key: 0,
-                  class: "i-medium",
-                  fill: "rgb(var(--black))"
-                })) : (openBlock(), createBlock(_sfc_main$5, {
+                  fill: "rgb(var(--white))",
+                  class: "volume-icon"
+                })) : !muted.value && volume.value > 0 ? (openBlock(), createBlock(_sfc_main$7, {
                   key: 1,
-                  class: "i-medium",
-                  fill: "rgb(var(--black))"
+                  fill: "rgb(var(--white))",
+                  class: "volume-icon"
+                })) : (openBlock(), createBlock(_sfc_main$8, {
+                  key: 2,
+                  fill: "rgb(var(--white))",
+                  class: "volume-icon"
                 }))
               ]),
               _: 1
             }),
-            createVNode(_sfc_main$1, {
-              onClick: playNext,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: withCtx(() => [
-                createVNode(IconChevronRight, {
-                  class: "i-small",
-                  fill: "rgb(var(--white))"
-                })
-              ]),
-              _: 1
-            }),
-            createVNode(_sfc_main$1, {
-              onClick: toggleRepeat,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: withCtx(() => [
-                createVNode(_sfc_main$6, {
-                  class: "i-small",
-                  fill: repeatIcon.value
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            })
-          ]),
-          createVNode(TrackProgress, { class: "w-100 mn-t-thin" })
-        ]),
-        createElementVNode("div", _hoisted_10, [
-          createVNode(_sfc_main$1, {
-            onClick: toggleMute,
-            class: "bg-transparent border-none pd-zero mn-r-small",
-            showLoader: false,
-            showSucces: false
-          }, {
-            default: withCtx(() => [
-              !muted.value && volume.value > 0.5 ? (openBlock(), createBlock(_sfc_main$7, {
-                key: 0,
-                class: "i-small",
-                fill: "rgb(var(--white))"
-              })) : !muted.value && volume.value > 0 ? (openBlock(), createBlock(_component_IconVolumeHalf, {
-                key: 1,
-                class: "i-small",
-                fill: "rgb(var(--white))"
-              })) : (openBlock(), createBlock(_sfc_main$8, {
-                key: 2,
-                class: "i-small",
-                fill: "rgb(var(--white))"
-              }))
-            ]),
-            _: 1
-          }),
-          createVNode(VolumeControl)
+            createElementVNode("div", _hoisted_12, [
+              createVNode(VolumeControl)
+            ])
+          ])
         ])
       ]);
     };
   }
 };
-const MusicPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f19b93ab"]]);
+const MusicPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8c2c90fa"]]);
 export {
   MusicPlayer as default
 };

package/dist/martyrs/src/modules/music/components/player/MusicPlayer.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MusicPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/player/MusicPlayer.vue"],"sourcesContent":["<!-- components/player/MusicPlayer.vue -->\n<template>\n  <div class=\"music-player pd-small flex-between flex-v-center flex bg-dark br-t br-solid br-dark-transp-20 \">\n    <!-- Current Track Info -->\n    <div class=\"player-track-info flex-v-center flex w-25r\">\n      <div v-if=\"currentTrack\" class=\"player-track-cover mn-r-small\">\n        <Media \n          :url=\"currentTrack.coverUrl || (currentTrack.album && currentTrack.album.coverUrl) || '/assets/placeholder-track.jpg'\" \n          class=\"w-3r h-3r object-fit-cover radius-small\"\n        />\n      </div>\n      \n      <div class=\"player-track-details t-truncate\">\n        <div class=\"player-track-title  t-medium t-truncate\">\n          {{ currentTrack?.title || 'No track playing' }}\n        </div>\n        <div class=\"player-track-artist t-grey t-small t-truncate\">\n          {{ getArtistName(currentTrack) }}\n        </div>\n      </div>\n      \n      <div class=\"player-favorite mn-l-small\">\n        <Button \n          @click=\"toggleFavorite\" \n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconLike class=\"i-small\" :fill=\"isFavorite ? 'rgb(var(--main))' : 'rgb(var(--grey))'\"/>\n        </Button>\n      </div>\n    </div>\n    \n    <!-- Player Controls -->\n    <div class=\"player-controls flex-1 flex flex-column items-center\">\n      <div class=\"player-buttons flex-v-center flex gap-small\">\n        <Button \n          @click=\"toggleShuffle\" \n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconShuffle class=\"i-small\" :fill=\"shuffle ? 'rgb(var(--main))' : 'rgb(var(--grey))'\"/>\n        </Button>\n        \n        <Button \n          @click=\"playPrevious\" \n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconPrevious class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </Button>\n        \n        <Button \n          @click=\"togglePlay\" \n          class=\"play-pause-btn bg-white radius-round pd-micro flex-center flex\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconPause v-if=\"isPlaying\" class=\"i-medium\" fill=\"rgb(var(--black))\"/>\n          <IconPlay v-else class=\"i-medium\" fill=\"rgb(var(--black))\"/>\n        </Button>\n        \n        <Button \n          @click=\"playNext\" \n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconNext class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        </Button>\n        \n        <Button \n          @click=\"toggleRepeat\" \n          class=\"bg-transparent border-none pd-zero\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconRepeat class=\"i-small\" :fill=\"repeatIcon\"/>\n        </Button>\n      </div>\n      \n      <TrackProgress class=\"w-100 mn-t-thin\" />\n    </div>\n    \n    <!-- Volume Control -->\n    <div class=\"player-volume flex-v-center flex w-15r\">\n      <Button \n        @click=\"toggleMute\" \n        class=\"bg-transparent border-none pd-zero mn-r-small\"\n        :showLoader=\"false\" \n        :showSucces=\"false\"\n      >\n        <IconVolume v-if=\"!muted && volume > 0.5\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        <IconVolumeHalf v-else-if=\"!muted && volume > 0\" class=\"i-small\" fill=\"rgb(var(--white))\"/>\n        <IconVolumeMute v-else class=\"i-small\" fill=\"rgb(var(--white))\"/>\n      </Button>\n      \n      <VolumeControl />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport TrackProgress from './TrackProgress.vue';\nimport VolumeControl from './VolumeControl.vue';\n\n// Import icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconNext from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconPrevious from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconRepeat from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';\n// import IconVolumeHalf from '@martyrs/src/modules/icons/navigation/IconVolume.vue'; // Using same icon but we'd style it differently\nimport IconVolumeMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// State\nconst isFavorite = ref(false);\n\n// Computed properties\nconst currentTrack = computed(() => playerState.currentTrack);\nconst isPlaying = computed(() => playerState.isPlaying);\nconst volume = computed(() => playerState.volume);\nconst muted = computed(() => playerState.muted);\nconst shuffle = computed(() => playerState.shuffle);\nconst repeat = computed(() => playerState.repeat);\n\nconst repeatIcon = computed(() => {\n  switch(repeat.value) {\n    case 'one':\n      return 'rgb(var(--main))';\n    case 'all':\n      return 'rgb(var(--main))';\n    default:\n      return 'rgb(var(--grey))';\n  }\n});\n\n// Methods\nconst togglePlay = () => {\n  playerActions.togglePlay();\n};\n\nconst playNext = () => {\n  playerActions.playNext();\n};\n\nconst playPrevious = () => {\n  playerActions.playPrevious();\n};\n\nconst toggleShuffle = () => {\n  playerActions.toggleShuffle();\n};\n\nconst toggleRepeat = () => {\n  playerActions.toggleRepeat();\n};\n\nconst toggleMute = () => {\n  playerActions.toggleMute();\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // Implement favorite track logic here\n};\n\nconst getArtistName = (track) => {\n  if (!track) return 'Unknown Artist';\n  \n  if (track.artist) {\n    if (typeof track.artist === 'object') {\n      return track.artist.name || 'Unknown Artist';\n    }\n    return track.artist;\n  }\n  return 'Unknown Artist';\n};\n</script>\n\n<style scoped>\n.play-pause-btn {\n  width: 32px;\n  height: 32px;\n  transition: transform 0.2s ease;\n}\n\n.play-pause-btn:hover {\n  transform: scale(1.1);\n}\n</style>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA,UAAM,aAAa,IAAI,KAAK;AAG5B,UAAM,eAAe,SAAS,MAAMA,MAAY,YAAY;AAC5D,UAAM,YAAY,SAAS,MAAMA,MAAY,SAAS;AACtD,UAAM,SAAS,SAAS,MAAMA,MAAY,MAAM;AAChD,UAAM,QAAQ,SAAS,MAAMA,MAAY,KAAK;AAC9C,UAAM,UAAU,SAAS,MAAMA,MAAY,OAAO;AAClD,UAAM,SAAS,SAAS,MAAMA,MAAY,MAAM;AAEhD,UAAM,aAAa,SAAS,MAAM;AAChC,cAAO,OAAO,OAAK;AAAA,QACjB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACb;AAAA,IACA,CAAC;AAGD,UAAM,aAAa,MAAM;AACvBC,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrBA,cAAc,SAAQ;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACzBA,cAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,gBAAgB,MAAM;AAC1BA,cAAc,cAAa;AAAA,IAC7B;AAEA,UAAM,eAAe,MAAM;AACzBA,cAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,MAAO,QAAO;AAEnB,UAAI,MAAM,QAAQ;AAChB,YAAI,OAAO,MAAM,WAAW,UAAU;AACpC,iBAAO,MAAM,OAAO,QAAQ;AAAA,QAC9B;AACA,eAAO,MAAM;AAAA,MACf;AACA,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MusicPlayer.vue.js","sources":["../../../../../../../src/modules/music/components/player/MusicPlayer.vue"],"sourcesContent":["<!-- components/player/MusicPlayer.vue -->\n<template>\n  <div class=\"player-container\">\n    <div class=\"player\">\n      <!-- Track Info Section -->\n      <div class=\"track-info\">\n        <div class=\"track-image\">\n          <Media \n            :url=\"currentTrack?.coverUrl || (currentTrack?.album && currentTrack.album.coverUrl) || '/assets/placeholder-track.jpg'\" \n            class=\"track-image-media\"\n          />\n        </div>\n        <div class=\"track-details\">\n          <h3 class=\"track-title\">{{ currentTrack?.title || 'No track playing' }}</h3>\n          <p class=\"track-artist\">{{ getArtistName(currentTrack) }}</p>\n        </div>\n        <Button \n          @click=\"toggleFavorite\" \n          class=\"like-btn\"\n          :class=\"{ liked: isFavorite }\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconLike fill=\"rgb(var(--white))\" class=\"like-icon\"/>\n        </Button>\n      </div>\n\n      <!-- Control Section -->\n      <div class=\"controls\">\n        <div class=\"control-buttons\">\n          <Button \n            @click=\"toggleShuffle\" \n            class=\"control-btn secondary\"\n            :class=\"{ active: shuffle }\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconShuffle fill=\"rgb(var(--white))\" class=\"control-icon\"/>\n          </Button>\n          \n          <Button \n            @click=\"playPrevious\" \n            class=\"control-btn secondary\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconPrevious fill=\"rgb(var(--white))\" class=\"control-icon\"/>\n          </Button>\n          \n          <Button \n            @click=\"togglePlay\" \n            class=\"control-btn primary\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconPause v-if=\"isPlaying\" class=\"play-icon\"/>\n            <IconPlay v-else class=\"play-icon\"/>\n          </Button>\n          \n          <Button \n            @click=\"playNext\" \n            class=\"control-btn secondary\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconNext fill=\"rgb(var(--white))\" class=\"control-icon\"/>\n          </Button>\n          \n          <Button \n            @click=\"toggleRepeat\" \n            class=\"control-btn secondary\"\n            :class=\"{ active: repeat !== 'off' }\"\n            :showLoader=\"false\" \n            :showSucces=\"false\"\n          >\n            <IconRepeat fill=\"rgb(var(--white))\" class=\"control-icon\"/>\n          </Button>\n        </div>\n        \n        <!-- Progress Bar -->\n        <div class=\"progress-section\">\n          <TrackProgress />\n        </div>\n      </div>\n\n      <!-- Volume Section -->\n      <div class=\"volume-section\">\n        <Button \n          @click=\"toggleMute\" \n          class=\"volume-btn\"\n          :showLoader=\"false\" \n          :showSucces=\"false\"\n        >\n          <IconVolume fill=\"rgb(var(--white))\" v-if=\"!muted && volume > 0.5\" class=\"volume-icon\"/>\n          <IconVolumeHalf fill=\"rgb(var(--white))\" v-else-if=\"!muted && volume > 0\" class=\"volume-icon\"/>\n          <IconVolumeMute  fill=\"rgb(var(--white))\" v-else class=\"volume-icon\"/>\n        </Button>\n        \n        <div class=\"volume-slider\">\n          <VolumeControl />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue';\nimport Media from '@martyrs/src/components/Media/Media.vue';\nimport Button from '@martyrs/src/components/Button/Button.vue';\nimport TrackProgress from './TrackProgress.vue';\nimport VolumeControl from './VolumeControl.vue';\n\n// Import icons\nimport IconPlay from '@martyrs/src/modules/icons/navigation/IconPlay.vue';\nimport IconPause from '@martyrs/src/modules/icons/navigation/IconPause.vue';\nimport IconNext from '@martyrs/src/modules/icons/navigation/IconChevronRight.vue';\nimport IconPrevious from '@martyrs/src/modules/icons/navigation/IconChevronLeft.vue';\nimport IconShuffle from '@martyrs/src/modules/icons/navigation/IconShuffle.vue';\nimport IconRepeat from '@martyrs/src/modules/icons/navigation/IconRefresh.vue';\nimport IconLike from '@martyrs/src/modules/icons/navigation/IconLike.vue';\nimport IconVolume from '@martyrs/src/modules/icons/navigation/IconVolume.vue';\nimport IconVolumeHalf from '@martyrs/src/modules/icons/navigation/IconVolume.vue';\nimport IconVolumeMute from '@martyrs/src/modules/icons/navigation/IconMute.vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// State\nconst isFavorite = ref(false);\n\n// Computed properties\nconst currentTrack = computed(() => playerState.currentTrack);\nconst isPlaying = computed(() => playerState.isPlaying);\nconst volume = computed(() => playerState.volume);\nconst muted = computed(() => playerState.muted);\nconst shuffle = computed(() => playerState.shuffle);\nconst repeat = computed(() => playerState.repeat);\n\n// Methods\nconst togglePlay = () => {\n  playerActions.togglePlay();\n};\n\nconst playNext = () => {\n  playerActions.playNext();\n};\n\nconst playPrevious = () => {\n  playerActions.playPrevious();\n};\n\nconst toggleShuffle = () => {\n  playerActions.toggleShuffle();\n};\n\nconst toggleRepeat = () => {\n  playerActions.toggleRepeat();\n};\n\nconst toggleMute = () => {\n  playerActions.toggleMute();\n};\n\nconst toggleFavorite = () => {\n  isFavorite.value = !isFavorite.value;\n  // Implement favorite track logic here\n};\n\nconst getArtistName = (track) => {\n  if (!track) return 'Unknown Artist';\n  \n  if (track.artist) {\n    if (typeof track.artist === 'object') {\n      return track.artist.name || 'Unknown Artist';\n    }\n    return track.artist;\n  }\n  return 'Unknown Artist';\n};\n</script>\n\n<style scoped>\n.player-container {\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background: linear-gradient(135deg, rgb(24, 24, 24) 0%, rgb(18, 18, 18) 100%);\n  border-top: 1px solid rgb(40, 40, 40);\n  backdrop-filter: blur(10px);\n}\n\n.player {\n  display: grid;\n  grid-template-columns: 1fr 2fr 1fr;\n  align-items: center;\n  padding: 12px 16px;\n  gap: 16px;\n  height: 90px;\n  max-width: 100%;\n}\n\n/* Track Info Section */\n.track-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.track-image {\n  width: 56px;\n  height: 56px;\n  border-radius: 4px;\n  overflow: hidden;\n  flex-shrink: 0;\n}\n\n.track-image-media {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.3s ease;\n}\n\n.track-image:hover .track-image-media {\n  transform: scale(1.05);\n}\n\n.track-details {\n  min-width: 0;\n  flex: 1;\n}\n\n.track-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: rgb(var(--white));\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 1.2;\n}\n\n.track-artist {\n  font-size: 12px;\n  color: rgb(var(--grey));\n  margin: 2px 0 0 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.like-btn {\n  background: none;\n  border: none;\n  color: rgb(var(--grey));\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.like-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.like-btn:hover {\n  color: rgb(var(--white));\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.like-btn.liked {\n  color: rgb(var(--main));\n}\n\n.like-btn.liked .like-icon {\n  fill: rgb(var(--main));\n}\n\n.like-btn.liked:hover {\n  color: rgb(var(--main));\n  opacity: 0.8;\n}\n\n/* Controls Section */\n.controls {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n}\n\n.control-buttons {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.control-btn {\n  background: none;\n  border: none;\n  color: rgb(var(--grey));\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.control-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.control-btn.primary {\n  background: rgb(var(--white));\n  color: rgb(var(--black));\n  width: 32px;\n  height: 32px;\n}\n\n.play-icon {\n  width: 14px;\n  height: 14px;\n  fill: rgb(var(--black));\n}\n\n.control-btn.primary:hover {\n  background: rgb(240, 240, 240);\n  transform: scale(1.06);\n}\n\n.control-btn.secondary:hover {\n  color: rgb(var(--white));\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.control-btn.secondary:hover .control-icon {\n  fill: rgb(var(--white));\n}\n\n.control-btn.active {\n  color: rgb(var(--main));\n}\n\n.control-btn.active .control-icon {\n  fill: rgb(var(--main));\n}\n\n.control-btn.active:hover {\n  color: rgb(var(--main));\n  opacity: 0.8;\n}\n\n/* Progress Section */\n.progress-section {\n  width: 100%;\n  max-width: 600px;\n}\n\n/* Volume Section */\n.volume-section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.volume-btn {\n  background: none;\n  border: none;\n  color: rgb(var(--grey));\n  cursor: pointer;\n  padding: 8px;\n  border-radius: 50%;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.volume-icon {\n  width: 16px;\n  height: 16px;\n}\n\n.volume-btn:hover {\n  color: rgb(var(--white));\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.volume-btn:hover .volume-icon {\n  fill: rgb(var(--white));\n}\n\n.volume-slider {\n  width: 100px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .player {\n    grid-template-columns: 1fr;\n    grid-template-rows: auto auto auto;\n    height: auto;\n    padding: 8px 12px 12px;\n    gap: 12px;\n  }\n\n  .track-info {\n    order: 1;\n  }\n\n  .controls {\n    order: 2;\n  }\n\n  .volume-section {\n    order: 3;\n    justify-content: center;\n  }\n\n  .volume-slider {\n    width: 120px;\n  }\n\n  .progress-section {\n    max-width: 100%;\n  }\n}\n\n/* Animations */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.player-container {\n  animation: fadeIn 0.3s ease-out;\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.05);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.control-btn.primary:active {\n  animation: pulse 0.3s ease;\n}\n</style>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,UAAM,aAAa,IAAI,KAAK;AAG5B,UAAM,eAAe,SAAS,MAAMA,MAAY,YAAY;AAC5D,UAAM,YAAY,SAAS,MAAMA,MAAY,SAAS;AACtD,UAAM,SAAS,SAAS,MAAMA,MAAY,MAAM;AAChD,UAAM,QAAQ,SAAS,MAAMA,MAAY,KAAK;AAC9C,UAAM,UAAU,SAAS,MAAMA,MAAY,OAAO;AAClD,UAAM,SAAS,SAAS,MAAMA,MAAY,MAAM;AAGhD,UAAM,aAAa,MAAM;AACvBC,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrBA,cAAc,SAAQ;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACzBA,cAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,gBAAgB,MAAM;AAC1BA,cAAc,cAAa;AAAA,IAC7B;AAEA,UAAM,eAAe,MAAM;AACzBA,cAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,iBAAiB,MAAM;AAC3B,iBAAW,QAAQ,CAAC,WAAW;AAAA,IAEjC;AAEA,UAAM,gBAAgB,CAAC,UAAU;AAC/B,UAAI,CAAC,MAAO,QAAO;AAEnB,UAAI,MAAM,QAAQ;AAChB,YAAI,OAAO,MAAM,WAAW,UAAU;AACpC,iBAAO,MAAM,OAAO,QAAQ;AAAA,QAC9B;AACA,eAAO,MAAM;AAAA,MACf;AACA,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/player/TrackProgress.vue.cjs

@@ -4,9 +4,10 @@ const vue = require("vue");
 const player = require("../../store/player.cjs");
 ;/* empty css                     */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
-const _hoisted_1 = { class: "track-progress flex flex-v-center gap-small" };
-const _hoisted_2 = { class: "current-time t-grey t-small" };
-const _hoisted_3 = { class: "total-time t-grey t-small" };
+const _hoisted_1 = { class: "progress-section" };
+const _hoisted_2 = { class: "time-current" };
+const _hoisted_3 = { class: "progress-track" };
+const _hoisted_4 = { class: "time-total" };
 const _sfc_main = {
   __name: "TrackProgress",
   setup(__props) {
@@ -56,31 +57,33 @@ const _sfc_main = {
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(formatTime(currentTime.value)), 1),
+        vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(formatTime(currentTime.value)), 1),
         vue.createElementVNode("div", {
           ref_key: "progressBarContainer",
           ref: progressBarContainer,
-          class: "progress-bar-container flex-1 h-thin bg-grey radius-extra pos-relative cursor-pointer",
+          class: "progress-bar",
           onClick: seek,
           onMousedown: startSeek,
           onMousemove: updateSeekPosition,
           onMouseup: endSeek,
           onMouseleave: endSeek
         }, [
-          vue.createElementVNode("div", {
-            class: "progress-bar h-100 bg-white radius-extra",
-            style: vue.normalizeStyle({ width: progressPercentage.value + "%" })
-          }, null, 4),
-          vue.createElementVNode("div", {
-            class: "progress-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0",
-            style: vue.normalizeStyle({ left: `calc(${progressPercentage.value}% - 4px)`, transform: "translateY(-50%)" })
-          }, null, 4)
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("div", {
+              class: "progress-fill",
+              style: vue.normalizeStyle({ width: progressPercentage.value + "%" })
+            }, null, 4),
+            vue.createElementVNode("div", {
+              class: "progress-thumb",
+              style: vue.normalizeStyle({ left: progressPercentage.value + "%" })
+            }, null, 4)
+          ])
         ], 544),
-        vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(formatTime(duration.value)), 1)
+        vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(formatTime(duration.value)), 1)
       ]);
     };
   }
 };
-const TrackProgress = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-4326ac71"]]);
+const TrackProgress = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-0bee7510"]]);
 exports.default = TrackProgress;
 //# sourceMappingURL=TrackProgress.vue.cjs.map

package/dist/martyrs/src/modules/music/components/player/TrackProgress.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TrackProgress.vue.cjs","sources":["../../../../../../../src/modules/music/components/player/TrackProgress.vue"],"sourcesContent":["<!-- components/player/TrackProgress.vue -->\n<template>\n  <div class=\"track-progress flex flex-v-center gap-small\">\n    <div class=\"current-time t-grey t-small\">{{ formatTime(currentTime) }}</div>\n    \n    <div \n      ref=\"progressBarContainer\"\n      class=\"progress-bar-container flex-1 h-thin bg-grey radius-extra pos-relative cursor-pointer\"\n      @click=\"seek\"\n      @mousedown=\"startSeek\"\n      @mousemove=\"updateSeekPosition\"\n      @mouseup=\"endSeek\"\n      @mouseleave=\"endSeek\"\n    >\n      <div \n        class=\"progress-bar h-100 bg-white radius-extra\" \n        :style=\"{ width: progressPercentage + '%' }\"\n      ></div>\n      <div \n        class=\"progress-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0\"\n        :style=\"{ left: `calc(${progressPercentage}% - 4px)`, transform: 'translateY(-50%)' }\"\n      ></div>\n    </div>\n    \n    <div class=\"total-time t-grey t-small\">{{ formatTime(duration) }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted } from 'vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Refs\nconst progressBarContainer = ref(null);\nconst isSeeking = ref(false);\nconst seekPosition = ref(0);\n\n// Computed properties\nconst currentTime = computed(() => playerState.currentTime);\nconst duration = computed(() => playerState.duration);\nconst progressPercentage = computed(() => {\n  if (!duration.value) return 0;\n  return Math.min(100, (currentTime.value / duration.value) * 100);\n});\n\n// Methods\nconst formatTime = (seconds) => {\n  if (!seconds) return '0:00';\n  \n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  \n  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n};\n\nconst calculateSeekTime = (event) => {\n  if (!progressBarContainer.value || !duration.value) return 0;\n  \n  const rect = progressBarContainer.value.getBoundingClientRect();\n  const offsetX = event.clientX - rect.left;\n  const percentage = Math.max(0, Math.min(1, offsetX / rect.width));\n  \n  return percentage * duration.value;\n};\n\nconst seek = (event) => {\n  const seekTime = calculateSeekTime(event);\n  playerActions.seek(seekTime);\n};\n\nconst startSeek = (event) => {\n  isSeeking.value = true;\n  seekPosition.value = calculateSeekTime(event);\n};\n\nconst updateSeekPosition = (event) => {\n  if (isSeeking.value) {\n    seekPosition.value = calculateSeekTime(event);\n  }\n};\n\nconst endSeek = () => {\n  if (isSeeking.value) {\n    isSeeking.value = false;\n    playerActions.seek(seekPosition.value);\n  }\n};\n\n// Clean up event listeners when component is unmounted\nonUnmounted(() => {\n  isSeeking.value = false;\n});\n</script>\n\n<style scoped>\n.progress-bar-container:hover .progress-bar {\n  background-color: rgb(var(--main));\n}\n\n.progress-handle {\n  display: none;\n}\n\n.progress-bar-container:hover .progress-handle {\n  display: block;\n  transform: translateY(-50%) scale(1.3);\n}\n</style>"],"names":["ref","computed","playerState","playerActions","onUnmounted"],"mappings":";;;;;;;;;;;;AAmCA,UAAM,uBAAuBA,IAAAA,IAAI,IAAI;AACrC,UAAM,YAAYA,IAAAA,IAAI,KAAK;AAC3B,UAAM,eAAeA,IAAAA,IAAI,CAAC;AAG1B,UAAM,cAAcC,IAAAA,SAAS,MAAMC,OAAAA,MAAY,WAAW;AAC1D,UAAM,WAAWD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,QAAQ;AACpD,UAAM,qBAAqBD,IAAAA,SAAS,MAAM;AACxC,UAAI,CAAC,SAAS,MAAO,QAAO;AAC5B,aAAO,KAAK,IAAI,KAAM,YAAY,QAAQ,SAAS,QAAS,GAAG;AAAA,IACjE,CAAC;AAGD,UAAM,aAAa,CAAC,YAAY;AAC9B,UAAI,CAAC,QAAS,QAAO;AAErB,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,mBAAmB,KAAK,MAAM,UAAU,EAAE;AAEhD,aAAO,GAAG,OAAO,IAAI,iBAAiB,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IACnE;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,UAAI,CAAC,qBAAqB,SAAS,CAAC,SAAS,MAAO,QAAO;AAE3D,YAAM,OAAO,qBAAqB,MAAM,sBAAqB;AAC7D,YAAM,UAAU,MAAM,UAAU,KAAK;AACrC,YAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,KAAK,CAAC;AAEhE,aAAO,aAAa,SAAS;AAAA,IAC/B;AAEA,UAAM,OAAO,CAAC,UAAU;AACtB,YAAM,WAAW,kBAAkB,KAAK;AACxCE,aAAAA,QAAc,KAAK,QAAQ;AAAA,IAC7B;AAEA,UAAM,YAAY,CAAC,UAAU;AAC3B,gBAAU,QAAQ;AAClB,mBAAa,QAAQ,kBAAkB,KAAK;AAAA,IAC9C;AAEA,UAAM,qBAAqB,CAAC,UAAU;AACpC,UAAI,UAAU,OAAO;AACnB,qBAAa,QAAQ,kBAAkB,KAAK;AAAA,MAC9C;AAAA,IACF;AAEA,UAAM,UAAU,MAAM;AACpB,UAAI,UAAU,OAAO;AACnB,kBAAU,QAAQ;AAClBA,uBAAc,KAAK,aAAa,KAAK;AAAA,MACvC;AAAA,IACF;AAGAC,QAAAA,YAAY,MAAM;AAChB,gBAAU,QAAQ;AAAA,IACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TrackProgress.vue.cjs","sources":["../../../../../../../src/modules/music/components/player/TrackProgress.vue"],"sourcesContent":["<!-- components/player/TrackProgress.vue -->\n<template>\n  <div class=\"progress-section\">\n    <span class=\"time-current\">{{ formatTime(currentTime) }}</span>\n    <div \n      ref=\"progressBarContainer\"\n      class=\"progress-bar\"\n      @click=\"seek\"\n      @mousedown=\"startSeek\"\n      @mousemove=\"updateSeekPosition\"\n      @mouseup=\"endSeek\"\n      @mouseleave=\"endSeek\"\n    >\n      <div class=\"progress-track\">\n        <div \n          class=\"progress-fill\" \n          :style=\"{ width: progressPercentage + '%' }\"\n        ></div>\n        <div \n          class=\"progress-thumb\"\n          :style=\"{ left: progressPercentage + '%' }\"\n        ></div>\n      </div>\n    </div>\n    <span class=\"time-total\">{{ formatTime(duration) }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onUnmounted } from 'vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Refs\nconst progressBarContainer = ref(null);\nconst isSeeking = ref(false);\nconst seekPosition = ref(0);\n\n// Computed properties\nconst currentTime = computed(() => playerState.currentTime);\nconst duration = computed(() => playerState.duration);\nconst progressPercentage = computed(() => {\n  if (!duration.value) return 0;\n  return Math.min(100, (currentTime.value / duration.value) * 100);\n});\n\n// Methods\nconst formatTime = (seconds) => {\n  if (!seconds) return '0:00';\n  \n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  \n  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n};\n\nconst calculateSeekTime = (event) => {\n  if (!progressBarContainer.value || !duration.value) return 0;\n  \n  const rect = progressBarContainer.value.getBoundingClientRect();\n  const offsetX = event.clientX - rect.left;\n  const percentage = Math.max(0, Math.min(1, offsetX / rect.width));\n  \n  return percentage * duration.value;\n};\n\nconst seek = (event) => {\n  const seekTime = calculateSeekTime(event);\n  playerActions.seek(seekTime);\n};\n\nconst startSeek = (event) => {\n  isSeeking.value = true;\n  seekPosition.value = calculateSeekTime(event);\n};\n\nconst updateSeekPosition = (event) => {\n  if (isSeeking.value) {\n    seekPosition.value = calculateSeekTime(event);\n  }\n};\n\nconst endSeek = () => {\n  if (isSeeking.value) {\n    isSeeking.value = false;\n    playerActions.seek(seekPosition.value);\n  }\n};\n\n// Clean up event listeners when component is unmounted\nonUnmounted(() => {\n  isSeeking.value = false;\n});\n</script>\n\n<style scoped>\n/* Progress Section */\n.progress-section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n.time-current,\n.time-total {\n  font-size: 11px;\n  color: rgb(var(--grey));\n  font-weight: 400;\n  min-width: 32px;\n  text-align: center;\n}\n\n.progress-bar {\n  flex: 1;\n  height: 12px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 4px 0;\n}\n\n.progress-track {\n  position: relative;\n  width: 100%;\n  height: 4px;\n  background: rgb(79, 79, 79);\n  border-radius: 2px;\n  overflow: hidden;\n  transition: height 0.2s ease;\n}\n\n.progress-fill {\n  height: 100%;\n  background: rgb(var(--white));\n  border-radius: 2px;\n  transition: width 0.1s ease;\n}\n\n.progress-thumb {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  background: rgb(var(--white));\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.progress-bar:hover .progress-thumb {\n  opacity: 1;\n}\n\n.progress-bar:hover .progress-track {\n  height: 6px;\n}\n\n.progress-bar:hover .progress-fill {\n  background: rgb(var(--main));\n}\n</style>"],"names":["ref","computed","playerState","playerActions","onUnmounted"],"mappings":";;;;;;;;;;;;;AAmCA,UAAM,uBAAuBA,IAAAA,IAAI,IAAI;AACrC,UAAM,YAAYA,IAAAA,IAAI,KAAK;AAC3B,UAAM,eAAeA,IAAAA,IAAI,CAAC;AAG1B,UAAM,cAAcC,IAAAA,SAAS,MAAMC,OAAAA,MAAY,WAAW;AAC1D,UAAM,WAAWD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,QAAQ;AACpD,UAAM,qBAAqBD,IAAAA,SAAS,MAAM;AACxC,UAAI,CAAC,SAAS,MAAO,QAAO;AAC5B,aAAO,KAAK,IAAI,KAAM,YAAY,QAAQ,SAAS,QAAS,GAAG;AAAA,IACjE,CAAC;AAGD,UAAM,aAAa,CAAC,YAAY;AAC9B,UAAI,CAAC,QAAS,QAAO;AAErB,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,mBAAmB,KAAK,MAAM,UAAU,EAAE;AAEhD,aAAO,GAAG,OAAO,IAAI,iBAAiB,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IACnE;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,UAAI,CAAC,qBAAqB,SAAS,CAAC,SAAS,MAAO,QAAO;AAE3D,YAAM,OAAO,qBAAqB,MAAM,sBAAqB;AAC7D,YAAM,UAAU,MAAM,UAAU,KAAK;AACrC,YAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,KAAK,CAAC;AAEhE,aAAO,aAAa,SAAS;AAAA,IAC/B;AAEA,UAAM,OAAO,CAAC,UAAU;AACtB,YAAM,WAAW,kBAAkB,KAAK;AACxCE,aAAAA,QAAc,KAAK,QAAQ;AAAA,IAC7B;AAEA,UAAM,YAAY,CAAC,UAAU;AAC3B,gBAAU,QAAQ;AAClB,mBAAa,QAAQ,kBAAkB,KAAK;AAAA,IAC9C;AAEA,UAAM,qBAAqB,CAAC,UAAU;AACpC,UAAI,UAAU,OAAO;AACnB,qBAAa,QAAQ,kBAAkB,KAAK;AAAA,MAC9C;AAAA,IACF;AAEA,UAAM,UAAU,MAAM;AACpB,UAAI,UAAU,OAAO;AACnB,kBAAU,QAAQ;AAClBA,uBAAc,KAAK,aAAa,KAAK;AAAA,MACvC;AAAA,IACF;AAGAC,QAAAA,YAAY,MAAM;AAChB,gBAAU,QAAQ;AAAA,IACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/player/TrackProgress.vue.js

@@ -2,9 +2,10 @@ import { ref, computed, onUnmounted, createElementBlock, openBlock, createElemen
 import { state, actions } from "../../store/player.js";
 /* empty css                   */
 import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
-const _hoisted_1 = { class: "track-progress flex flex-v-center gap-small" };
-const _hoisted_2 = { class: "current-time t-grey t-small" };
-const _hoisted_3 = { class: "total-time t-grey t-small" };
+const _hoisted_1 = { class: "progress-section" };
+const _hoisted_2 = { class: "time-current" };
+const _hoisted_3 = { class: "progress-track" };
+const _hoisted_4 = { class: "time-total" };
 const _sfc_main = {
   __name: "TrackProgress",
   setup(__props) {
@@ -54,32 +55,34 @@ const _sfc_main = {
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, toDisplayString(formatTime(currentTime.value)), 1),
+        createElementVNode("span", _hoisted_2, toDisplayString(formatTime(currentTime.value)), 1),
         createElementVNode("div", {
           ref_key: "progressBarContainer",
           ref: progressBarContainer,
-          class: "progress-bar-container flex-1 h-thin bg-grey radius-extra pos-relative cursor-pointer",
+          class: "progress-bar",
           onClick: seek,
           onMousedown: startSeek,
           onMousemove: updateSeekPosition,
           onMouseup: endSeek,
           onMouseleave: endSeek
         }, [
-          createElementVNode("div", {
-            class: "progress-bar h-100 bg-white radius-extra",
-            style: normalizeStyle({ width: progressPercentage.value + "%" })
-          }, null, 4),
-          createElementVNode("div", {
-            class: "progress-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0",
-            style: normalizeStyle({ left: `calc(${progressPercentage.value}% - 4px)`, transform: "translateY(-50%)" })
-          }, null, 4)
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", {
+              class: "progress-fill",
+              style: normalizeStyle({ width: progressPercentage.value + "%" })
+            }, null, 4),
+            createElementVNode("div", {
+              class: "progress-thumb",
+              style: normalizeStyle({ left: progressPercentage.value + "%" })
+            }, null, 4)
+          ])
         ], 544),
-        createElementVNode("div", _hoisted_3, toDisplayString(formatTime(duration.value)), 1)
+        createElementVNode("span", _hoisted_4, toDisplayString(formatTime(duration.value)), 1)
       ]);
     };
   }
 };
-const TrackProgress = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4326ac71"]]);
+const TrackProgress = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0bee7510"]]);
 export {
   TrackProgress as default
 };

package/dist/martyrs/src/modules/music/components/player/TrackProgress.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackProgress.vue.js","sources":["../../../../../../../src/modules/music/components/player/TrackProgress.vue"],"sourcesContent":["<!-- components/player/TrackProgress.vue -->\n<template>\n  <div class=\"track-progress flex flex-v-center gap-small\">\n    <div class=\"current-time t-grey t-small\">{{ formatTime(currentTime) }}</div>\n    \n    <div \n      ref=\"progressBarContainer\"\n      class=\"progress-bar-container flex-1 h-thin bg-grey radius-extra pos-relative cursor-pointer\"\n      @click=\"seek\"\n      @mousedown=\"startSeek\"\n      @mousemove=\"updateSeekPosition\"\n      @mouseup=\"endSeek\"\n      @mouseleave=\"endSeek\"\n    >\n      <div \n        class=\"progress-bar h-100 bg-white radius-extra\" \n        :style=\"{ width: progressPercentage + '%' }\"\n      ></div>\n      <div \n        class=\"progress-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0\"\n        :style=\"{ left: `calc(${progressPercentage}% - 4px)`, transform: 'translateY(-50%)' }\"\n      ></div>\n    </div>\n    \n    <div class=\"total-time t-grey t-small\">{{ formatTime(duration) }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onMounted, onUnmounted } from 'vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Refs\nconst progressBarContainer = ref(null);\nconst isSeeking = ref(false);\nconst seekPosition = ref(0);\n\n// Computed properties\nconst currentTime = computed(() => playerState.currentTime);\nconst duration = computed(() => playerState.duration);\nconst progressPercentage = computed(() => {\n  if (!duration.value) return 0;\n  return Math.min(100, (currentTime.value / duration.value) * 100);\n});\n\n// Methods\nconst formatTime = (seconds) => {\n  if (!seconds) return '0:00';\n  \n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  \n  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n};\n\nconst calculateSeekTime = (event) => {\n  if (!progressBarContainer.value || !duration.value) return 0;\n  \n  const rect = progressBarContainer.value.getBoundingClientRect();\n  const offsetX = event.clientX - rect.left;\n  const percentage = Math.max(0, Math.min(1, offsetX / rect.width));\n  \n  return percentage * duration.value;\n};\n\nconst seek = (event) => {\n  const seekTime = calculateSeekTime(event);\n  playerActions.seek(seekTime);\n};\n\nconst startSeek = (event) => {\n  isSeeking.value = true;\n  seekPosition.value = calculateSeekTime(event);\n};\n\nconst updateSeekPosition = (event) => {\n  if (isSeeking.value) {\n    seekPosition.value = calculateSeekTime(event);\n  }\n};\n\nconst endSeek = () => {\n  if (isSeeking.value) {\n    isSeeking.value = false;\n    playerActions.seek(seekPosition.value);\n  }\n};\n\n// Clean up event listeners when component is unmounted\nonUnmounted(() => {\n  isSeeking.value = false;\n});\n</script>\n\n<style scoped>\n.progress-bar-container:hover .progress-bar {\n  background-color: rgb(var(--main));\n}\n\n.progress-handle {\n  display: none;\n}\n\n.progress-bar-container:hover .progress-handle {\n  display: block;\n  transform: translateY(-50%) scale(1.3);\n}\n</style>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;AAmCA,UAAM,uBAAuB,IAAI,IAAI;AACrC,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,eAAe,IAAI,CAAC;AAG1B,UAAM,cAAc,SAAS,MAAMA,MAAY,WAAW;AAC1D,UAAM,WAAW,SAAS,MAAMA,MAAY,QAAQ;AACpD,UAAM,qBAAqB,SAAS,MAAM;AACxC,UAAI,CAAC,SAAS,MAAO,QAAO;AAC5B,aAAO,KAAK,IAAI,KAAM,YAAY,QAAQ,SAAS,QAAS,GAAG;AAAA,IACjE,CAAC;AAGD,UAAM,aAAa,CAAC,YAAY;AAC9B,UAAI,CAAC,QAAS,QAAO;AAErB,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,mBAAmB,KAAK,MAAM,UAAU,EAAE;AAEhD,aAAO,GAAG,OAAO,IAAI,iBAAiB,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IACnE;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,UAAI,CAAC,qBAAqB,SAAS,CAAC,SAAS,MAAO,QAAO;AAE3D,YAAM,OAAO,qBAAqB,MAAM,sBAAqB;AAC7D,YAAM,UAAU,MAAM,UAAU,KAAK;AACrC,YAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,KAAK,CAAC;AAEhE,aAAO,aAAa,SAAS;AAAA,IAC/B;AAEA,UAAM,OAAO,CAAC,UAAU;AACtB,YAAM,WAAW,kBAAkB,KAAK;AACxCC,cAAc,KAAK,QAAQ;AAAA,IAC7B;AAEA,UAAM,YAAY,CAAC,UAAU;AAC3B,gBAAU,QAAQ;AAClB,mBAAa,QAAQ,kBAAkB,KAAK;AAAA,IAC9C;AAEA,UAAM,qBAAqB,CAAC,UAAU;AACpC,UAAI,UAAU,OAAO;AACnB,qBAAa,QAAQ,kBAAkB,KAAK;AAAA,MAC9C;AAAA,IACF;AAEA,UAAM,UAAU,MAAM;AACpB,UAAI,UAAU,OAAO;AACnB,kBAAU,QAAQ;AAClBA,gBAAc,KAAK,aAAa,KAAK;AAAA,MACvC;AAAA,IACF;AAGA,gBAAY,MAAM;AAChB,gBAAU,QAAQ;AAAA,IACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TrackProgress.vue.js","sources":["../../../../../../../src/modules/music/components/player/TrackProgress.vue"],"sourcesContent":["<!-- components/player/TrackProgress.vue -->\n<template>\n  <div class=\"progress-section\">\n    <span class=\"time-current\">{{ formatTime(currentTime) }}</span>\n    <div \n      ref=\"progressBarContainer\"\n      class=\"progress-bar\"\n      @click=\"seek\"\n      @mousedown=\"startSeek\"\n      @mousemove=\"updateSeekPosition\"\n      @mouseup=\"endSeek\"\n      @mouseleave=\"endSeek\"\n    >\n      <div class=\"progress-track\">\n        <div \n          class=\"progress-fill\" \n          :style=\"{ width: progressPercentage + '%' }\"\n        ></div>\n        <div \n          class=\"progress-thumb\"\n          :style=\"{ left: progressPercentage + '%' }\"\n        ></div>\n      </div>\n    </div>\n    <span class=\"time-total\">{{ formatTime(duration) }}</span>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed, onUnmounted } from 'vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Refs\nconst progressBarContainer = ref(null);\nconst isSeeking = ref(false);\nconst seekPosition = ref(0);\n\n// Computed properties\nconst currentTime = computed(() => playerState.currentTime);\nconst duration = computed(() => playerState.duration);\nconst progressPercentage = computed(() => {\n  if (!duration.value) return 0;\n  return Math.min(100, (currentTime.value / duration.value) * 100);\n});\n\n// Methods\nconst formatTime = (seconds) => {\n  if (!seconds) return '0:00';\n  \n  const minutes = Math.floor(seconds / 60);\n  const remainingSeconds = Math.floor(seconds % 60);\n  \n  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n};\n\nconst calculateSeekTime = (event) => {\n  if (!progressBarContainer.value || !duration.value) return 0;\n  \n  const rect = progressBarContainer.value.getBoundingClientRect();\n  const offsetX = event.clientX - rect.left;\n  const percentage = Math.max(0, Math.min(1, offsetX / rect.width));\n  \n  return percentage * duration.value;\n};\n\nconst seek = (event) => {\n  const seekTime = calculateSeekTime(event);\n  playerActions.seek(seekTime);\n};\n\nconst startSeek = (event) => {\n  isSeeking.value = true;\n  seekPosition.value = calculateSeekTime(event);\n};\n\nconst updateSeekPosition = (event) => {\n  if (isSeeking.value) {\n    seekPosition.value = calculateSeekTime(event);\n  }\n};\n\nconst endSeek = () => {\n  if (isSeeking.value) {\n    isSeeking.value = false;\n    playerActions.seek(seekPosition.value);\n  }\n};\n\n// Clean up event listeners when component is unmounted\nonUnmounted(() => {\n  isSeeking.value = false;\n});\n</script>\n\n<style scoped>\n/* Progress Section */\n.progress-section {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n}\n\n.time-current,\n.time-total {\n  font-size: 11px;\n  color: rgb(var(--grey));\n  font-weight: 400;\n  min-width: 32px;\n  text-align: center;\n}\n\n.progress-bar {\n  flex: 1;\n  height: 12px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 4px 0;\n}\n\n.progress-track {\n  position: relative;\n  width: 100%;\n  height: 4px;\n  background: rgb(79, 79, 79);\n  border-radius: 2px;\n  overflow: hidden;\n  transition: height 0.2s ease;\n}\n\n.progress-fill {\n  height: 100%;\n  background: rgb(var(--white));\n  border-radius: 2px;\n  transition: width 0.1s ease;\n}\n\n.progress-thumb {\n  position: absolute;\n  top: 50%;\n  width: 12px;\n  height: 12px;\n  background: rgb(var(--white));\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.progress-bar:hover .progress-thumb {\n  opacity: 1;\n}\n\n.progress-bar:hover .progress-track {\n  height: 6px;\n}\n\n.progress-bar:hover .progress-fill {\n  background: rgb(var(--main));\n}\n</style>"],"names":["playerState","playerActions"],"mappings":";;;;;;;;;;;AAmCA,UAAM,uBAAuB,IAAI,IAAI;AACrC,UAAM,YAAY,IAAI,KAAK;AAC3B,UAAM,eAAe,IAAI,CAAC;AAG1B,UAAM,cAAc,SAAS,MAAMA,MAAY,WAAW;AAC1D,UAAM,WAAW,SAAS,MAAMA,MAAY,QAAQ;AACpD,UAAM,qBAAqB,SAAS,MAAM;AACxC,UAAI,CAAC,SAAS,MAAO,QAAO;AAC5B,aAAO,KAAK,IAAI,KAAM,YAAY,QAAQ,SAAS,QAAS,GAAG;AAAA,IACjE,CAAC;AAGD,UAAM,aAAa,CAAC,YAAY;AAC9B,UAAI,CAAC,QAAS,QAAO;AAErB,YAAM,UAAU,KAAK,MAAM,UAAU,EAAE;AACvC,YAAM,mBAAmB,KAAK,MAAM,UAAU,EAAE;AAEhD,aAAO,GAAG,OAAO,IAAI,iBAAiB,SAAQ,EAAG,SAAS,GAAG,GAAG,CAAC;AAAA,IACnE;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,UAAI,CAAC,qBAAqB,SAAS,CAAC,SAAS,MAAO,QAAO;AAE3D,YAAM,OAAO,qBAAqB,MAAM,sBAAqB;AAC7D,YAAM,UAAU,MAAM,UAAU,KAAK;AACrC,YAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,KAAK,CAAC;AAEhE,aAAO,aAAa,SAAS;AAAA,IAC/B;AAEA,UAAM,OAAO,CAAC,UAAU;AACtB,YAAM,WAAW,kBAAkB,KAAK;AACxCC,cAAc,KAAK,QAAQ;AAAA,IAC7B;AAEA,UAAM,YAAY,CAAC,UAAU;AAC3B,gBAAU,QAAQ;AAClB,mBAAa,QAAQ,kBAAkB,KAAK;AAAA,IAC9C;AAEA,UAAM,qBAAqB,CAAC,UAAU;AACpC,UAAI,UAAU,OAAO;AACnB,qBAAa,QAAQ,kBAAkB,KAAK;AAAA,MAC9C;AAAA,IACF;AAEA,UAAM,UAAU,MAAM;AACpB,UAAI,UAAU,OAAO;AACnB,kBAAU,QAAQ;AAClBA,gBAAc,KAAK,aAAa,KAAK;AAAA,MACvC;AAAA,IACF;AAGA,gBAAY,MAAM;AAChB,gBAAU,QAAQ;AAAA,IACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/martyrs/src/modules/music/components/player/VolumeControl.vue.cjs

@@ -4,6 +4,7 @@ const vue = require("vue");
 const player = require("../../store/player.cjs");
 ;/* empty css                     */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = { class: "volume-control" };
 const _sfc_main = {
   __name: "VolumeControl",
   setup(__props) {
@@ -41,32 +42,36 @@ const _sfc_main = {
       isChangingVolume.value = false;
     };
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        ref_key: "volumeBarContainer",
-        ref: volumeBarContainer,
-        class: "volume-bar-container w-100 h-thin bg-grey-transp-50 radius-extra pos-relative cursor-pointer",
-        onClick: setVolume,
-        onMousedown: startVolumeChange,
-        onMousemove: updateVolumePosition,
-        onMouseup: endVolumeChange,
-        onMouseleave: endVolumeChange
-      }, [
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("div", {
-          class: vue.normalizeClass(["volume-bar h-100 bg-white radius-extra", { "muted": muted.value }]),
-          style: vue.normalizeStyle({ width: volumePercentage.value + "%" })
-        }, null, 6),
-        vue.createElementVNode("div", {
-          class: "volume-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0",
-          style: vue.normalizeStyle({
-            left: `calc(${volumePercentage.value}% - 4px)`,
-            transform: "translateY(-50%)",
-            opacity: muted.value ? 0 : 1
-          })
-        }, null, 4)
-      ], 544);
+          ref_key: "volumeBarContainer",
+          ref: volumeBarContainer,
+          class: "volume-bar-container",
+          onClick: setVolume,
+          onMousedown: startVolumeChange,
+          onMousemove: updateVolumePosition,
+          onMouseup: endVolumeChange,
+          onMouseleave: endVolumeChange
+        }, [
+          vue.createElementVNode("div", {
+            class: "volume-track",
+            style: vue.normalizeStyle({
+              background: `linear-gradient(to right, rgb(var(--main)) 0%, rgb(var(--main)) ${volumePercentage.value}%, rgb(79, 79, 79) ${volumePercentage.value}%, rgb(79, 79, 79) 100%)`
+            })
+          }, [
+            vue.createElementVNode("div", {
+              class: "volume-thumb",
+              style: vue.normalizeStyle({
+                left: `${volumePercentage.value}%`,
+                opacity: muted.value ? 0 : 1
+              })
+            }, null, 4)
+          ], 4)
+        ], 544)
+      ]);
     };
   }
 };
-const VolumeControl = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-08586594"]]);
+const VolumeControl = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-a6e8eccb"]]);
 exports.default = VolumeControl;
 //# sourceMappingURL=VolumeControl.vue.cjs.map