@ozdao/martyrs 0.2.485 → 0.2.487

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

@@ -0,0 +1,227 @@
+import { ref, computed, resolveComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, 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 _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";
+import _sfc_main$7 from "../../../icons/navigation/IconVolume.vue.js";
+import _sfc_main$8 from "../../../icons/navigation/IconMute.vue.js";
+import { state, actions } from "../../store/player.js";
+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 _sfc_main = {
+  __name: "MusicPlayer",
+  setup(__props) {
+    const isFavorite = ref(false);
+    const currentTrack = computed(() => state.currentTrack);
+    const isPlaying = computed(() => state.isPlaying);
+    const volume = computed(() => state.volume);
+    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();
+    };
+    const playNext = () => {
+      actions.playNext();
+    };
+    const playPrevious = () => {
+      actions.playPrevious();
+    };
+    const toggleShuffle = () => {
+      actions.toggleShuffle();
+    };
+    const toggleRepeat = () => {
+      actions.toggleRepeat();
+    };
+    const toggleMute = () => {
+      actions.toggleMute();
+    };
+    const toggleFavorite = () => {
+      isFavorite.value = !isFavorite.value;
+    };
+    const getArtistName = (track) => {
+      if (!track) return "Unknown Artist";
+      if (track.artist) {
+        if (typeof track.artist === "object") {
+          return track.artist.name || "Unknown Artist";
+        }
+        return track.artist;
+      }
+      return "Unknown Artist";
+    };
+    return (_ctx, _cache) => {
+      var _a;
+      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(((_a = currentTrack.value) == null ? void 0 : _a.title) || "No track playing"), 1),
+            createElementVNode("div", _hoisted_6, toDisplayString(getArtistName(currentTrack.value)), 1)
+          ]),
+          createElementVNode("div", _hoisted_7, [
+            createVNode(_sfc_main$1, {
+              onClick: toggleFavorite,
+              class: "bg-transparent border-none pd-zero",
+              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))"
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_sfc_main$1, {
+              onClick: togglePlay,
+              class: "play-pause-btn bg-white radius-round pd-micro flex-center flex",
+              showLoader: false,
+              showSucces: false
+            }, {
+              default: withCtx(() => [
+                isPlaying.value ? (openBlock(), createBlock(_sfc_main$4, {
+                  key: 0,
+                  class: "i-medium",
+                  fill: "rgb(var(--black))"
+                })) : (openBlock(), createBlock(_sfc_main$5, {
+                  key: 1,
+                  class: "i-medium",
+                  fill: "rgb(var(--black))"
+                }))
+              ]),
+              _: 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)
+        ])
+      ]);
+    };
+  }
+};
+const MusicPlayer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f19b93ab"]]);
+export {
+  MusicPlayer as default
+};
+//# sourceMappingURL=MusicPlayer.vue.js.map

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

@@ -0,0 +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,WAAY;AAAA,IAC5B;AAEA,UAAM,WAAW,MAAM;AACrBA,cAAc,SAAU;AAAA,IAC1B;AAEA,UAAM,eAAe,MAAM;AACzBA,cAAc,aAAc;AAAA,IAC9B;AAEA,UAAM,gBAAgB,MAAM;AAC1BA,cAAc,cAAe;AAAA,IAC/B;AAEA,UAAM,eAAe,MAAM;AACzBA,cAAc,aAAc;AAAA,IAC9B;AAEA,UAAM,aAAa,MAAM;AACvBA,cAAc,WAAY;AAAA,IAC5B;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,QAClC;AACI,eAAO,MAAM;AAAA,MACjB;AACE,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const player = require("../../store/player.cjs");
+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 _sfc_main = {
+  __name: "TrackProgress",
+  setup(__props) {
+    const progressBarContainer = vue.ref(null);
+    const isSeeking = vue.ref(false);
+    const seekPosition = vue.ref(0);
+    const currentTime = vue.computed(() => player.state.currentTime);
+    const duration = vue.computed(() => player.state.duration);
+    const progressPercentage = vue.computed(() => {
+      if (!duration.value) return 0;
+      return Math.min(100, currentTime.value / duration.value * 100);
+    });
+    const formatTime = (seconds) => {
+      if (!seconds) return "0:00";
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = Math.floor(seconds % 60);
+      return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+    };
+    const calculateSeekTime = (event) => {
+      if (!progressBarContainer.value || !duration.value) return 0;
+      const rect = progressBarContainer.value.getBoundingClientRect();
+      const offsetX = event.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, offsetX / rect.width));
+      return percentage * duration.value;
+    };
+    const seek = (event) => {
+      const seekTime = calculateSeekTime(event);
+      player.actions.seek(seekTime);
+    };
+    const startSeek = (event) => {
+      isSeeking.value = true;
+      seekPosition.value = calculateSeekTime(event);
+    };
+    const updateSeekPosition = (event) => {
+      if (isSeeking.value) {
+        seekPosition.value = calculateSeekTime(event);
+      }
+    };
+    const endSeek = () => {
+      if (isSeeking.value) {
+        isSeeking.value = false;
+        player.actions.seek(seekPosition.value);
+      }
+    };
+    vue.onUnmounted(() => {
+      isSeeking.value = false;
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _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",
+          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)
+        ], 544),
+        vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(formatTime(duration.value)), 1)
+      ]);
+    };
+  }
+};
+const TrackProgress = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-4326ac71"]]);
+exports.default = TrackProgress;
+//# sourceMappingURL=TrackProgress.vue.cjs.map

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

@@ -0,0 +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,IAAG,IAAC,IAAI;AACrC,UAAM,YAAYA,IAAG,IAAC,KAAK;AAC3B,UAAM,eAAeA,IAAG,IAAC,CAAC;AAG1B,UAAM,cAAcC,IAAQ,SAAC,MAAMC,OAAW,MAAC,WAAW;AAC1D,UAAM,WAAWD,IAAQ,SAAC,MAAMC,OAAW,MAAC,QAAQ;AACpD,UAAM,qBAAqBD,IAAQ,SAAC,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,SAAU,EAAC,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,sBAAuB;AAC/D,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,aAAa,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,MAChD;AAAA,IACA;AAEA,UAAM,UAAU,MAAM;AACpB,UAAI,UAAU,OAAO;AACnB,kBAAU,QAAQ;AAClBA,uBAAc,KAAK,aAAa,KAAK;AAAA,MACzC;AAAA,IACA;AAGAC,QAAAA,YAAY,MAAM;AAChB,gBAAU,QAAQ;AAAA,IACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,85 @@
+import { ref, computed, onUnmounted, createElementBlock, openBlock, createElementVNode, toDisplayString, normalizeStyle } from "vue";
+import { state, actions } from "../../store/player.js";
+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 _sfc_main = {
+  __name: "TrackProgress",
+  setup(__props) {
+    const progressBarContainer = ref(null);
+    const isSeeking = ref(false);
+    const seekPosition = ref(0);
+    const currentTime = computed(() => state.currentTime);
+    const duration = computed(() => state.duration);
+    const progressPercentage = computed(() => {
+      if (!duration.value) return 0;
+      return Math.min(100, currentTime.value / duration.value * 100);
+    });
+    const formatTime = (seconds) => {
+      if (!seconds) return "0:00";
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = Math.floor(seconds % 60);
+      return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+    };
+    const calculateSeekTime = (event) => {
+      if (!progressBarContainer.value || !duration.value) return 0;
+      const rect = progressBarContainer.value.getBoundingClientRect();
+      const offsetX = event.clientX - rect.left;
+      const percentage = Math.max(0, Math.min(1, offsetX / rect.width));
+      return percentage * duration.value;
+    };
+    const seek = (event) => {
+      const seekTime = calculateSeekTime(event);
+      actions.seek(seekTime);
+    };
+    const startSeek = (event) => {
+      isSeeking.value = true;
+      seekPosition.value = calculateSeekTime(event);
+    };
+    const updateSeekPosition = (event) => {
+      if (isSeeking.value) {
+        seekPosition.value = calculateSeekTime(event);
+      }
+    };
+    const endSeek = () => {
+      if (isSeeking.value) {
+        isSeeking.value = false;
+        actions.seek(seekPosition.value);
+      }
+    };
+    onUnmounted(() => {
+      isSeeking.value = false;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _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",
+          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)
+        ], 544),
+        createElementVNode("div", _hoisted_3, toDisplayString(formatTime(duration.value)), 1)
+      ]);
+    };
+  }
+};
+const TrackProgress = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4326ac71"]]);
+export {
+  TrackProgress as default
+};
+//# sourceMappingURL=TrackProgress.vue.js.map

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

@@ -0,0 +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,SAAU,EAAC,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,sBAAuB;AAC/D,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,MAChD;AAAA,IACA;AAEA,UAAM,UAAU,MAAM;AACpB,UAAI,UAAU,OAAO;AACnB,kBAAU,QAAQ;AAClBA,gBAAc,KAAK,aAAa,KAAK;AAAA,MACzC;AAAA,IACA;AAGA,gBAAY,MAAM;AAChB,gBAAU,QAAQ;AAAA,IACpB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const player = require("../../store/player.cjs");
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  __name: "VolumeControl",
+  setup(__props) {
+    const volumeBarContainer = vue.ref(null);
+    const isChangingVolume = vue.ref(false);
+    const volume = vue.computed(() => player.state.volume);
+    const muted = vue.computed(() => player.state.muted);
+    const volumePercentage = vue.computed(() => {
+      if (muted.value) return 0;
+      return volume.value * 100;
+    });
+    const calculateVolume = (event) => {
+      if (!volumeBarContainer.value) return 0;
+      const rect = volumeBarContainer.value.getBoundingClientRect();
+      const offsetX = event.clientX - rect.left;
+      return Math.max(0, Math.min(1, offsetX / rect.width));
+    };
+    const setVolume = (event) => {
+      const newVolume = calculateVolume(event);
+      player.actions.setVolume(newVolume);
+      if (muted.value && newVolume > 0) {
+        player.actions.toggleMute();
+      }
+    };
+    const startVolumeChange = (event) => {
+      isChangingVolume.value = true;
+      setVolume(event);
+    };
+    const updateVolumePosition = (event) => {
+      if (isChangingVolume.value) {
+        setVolume(event);
+      }
+    };
+    const endVolumeChange = () => {
+      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
+      }, [
+        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);
+    };
+  }
+};
+const VolumeControl = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-08586594"]]);
+exports.default = VolumeControl;
+//# sourceMappingURL=VolumeControl.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.vue.cjs","sources":["../../../../../../../src/modules/music/components/player/VolumeControl.vue"],"sourcesContent":["<!-- components/player/VolumeControl.vue -->\n<template>\n  <div \n    ref=\"volumeBarContainer\"\n    class=\"volume-bar-container w-100 h-thin bg-grey-transp-50 radius-extra pos-relative cursor-pointer\"\n    @click=\"setVolume\"\n    @mousedown=\"startVolumeChange\"\n    @mousemove=\"updateVolumePosition\"\n    @mouseup=\"endVolumeChange\"\n    @mouseleave=\"endVolumeChange\"\n  >\n    <div \n      class=\"volume-bar h-100 bg-white radius-extra\" \n      :style=\"{ width: volumePercentage + '%' }\"\n      :class=\"{ 'muted': muted }\"\n    ></div>\n    <div \n      class=\"volume-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0\"\n      :style=\"{ \n        left: `calc(${volumePercentage}% - 4px)`, \n        transform: 'translateY(-50%)',\n        opacity: muted ? 0 : 1\n      }\"\n    ></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Refs\nconst volumeBarContainer = ref(null);\nconst isChangingVolume = ref(false);\n\n// Computed properties\nconst volume = computed(() => playerState.volume);\nconst muted = computed(() => playerState.muted);\nconst volumePercentage = computed(() => {\n  if (muted.value) return 0;\n  return volume.value * 100;\n});\n\n// Methods\nconst calculateVolume = (event) => {\n  if (!volumeBarContainer.value) return 0;\n  \n  const rect = volumeBarContainer.value.getBoundingClientRect();\n  const offsetX = event.clientX - rect.left;\n  \n  return Math.max(0, Math.min(1, offsetX / rect.width));\n};\n\nconst setVolume = (event) => {\n  const newVolume = calculateVolume(event);\n  playerActions.setVolume(newVolume);\n  \n  // Unmute if was muted\n  if (muted.value && newVolume > 0) {\n    playerActions.toggleMute();\n  }\n};\n\nconst startVolumeChange = (event) => {\n  isChangingVolume.value = true;\n  setVolume(event);\n};\n\nconst updateVolumePosition = (event) => {\n  if (isChangingVolume.value) {\n    setVolume(event);\n  }\n};\n\nconst endVolumeChange = () => {\n  isChangingVolume.value = false;\n};\n</script>\n\n<style scoped>\n.volume-bar-container:hover .volume-bar:not(.muted) {\n  background-color: rgb(var(--main));\n}\n\n.volume-handle {\n  display: none;\n}\n\n.volume-bar-container:hover .volume-handle {\n  display: block;\n}\n\n.muted {\n  opacity: 0.5;\n}\n</style>"],"names":["ref","computed","playerState","playerActions"],"mappings":";;;;;;;;AAkCA,UAAM,qBAAqBA,IAAG,IAAC,IAAI;AACnC,UAAM,mBAAmBA,IAAG,IAAC,KAAK;AAGlC,UAAM,SAASC,IAAQ,SAAC,MAAMC,OAAW,MAAC,MAAM;AAChD,UAAM,QAAQD,IAAQ,SAAC,MAAMC,OAAW,MAAC,KAAK;AAC9C,UAAM,mBAAmBD,IAAQ,SAAC,MAAM;AACtC,UAAI,MAAM,MAAO,QAAO;AACxB,aAAO,OAAO,QAAQ;AAAA,IACxB,CAAC;AAGD,UAAM,kBAAkB,CAAC,UAAU;AACjC,UAAI,CAAC,mBAAmB,MAAO,QAAO;AAEtC,YAAM,OAAO,mBAAmB,MAAM,sBAAuB;AAC7D,YAAM,UAAU,MAAM,UAAU,KAAK;AAErC,aAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,KAAK,CAAC;AAAA,IACtD;AAEA,UAAM,YAAY,CAAC,UAAU;AAC3B,YAAM,YAAY,gBAAgB,KAAK;AACvCE,aAAa,QAAC,UAAU,SAAS;AAGjC,UAAI,MAAM,SAAS,YAAY,GAAG;AAChCA,eAAAA,QAAc,WAAY;AAAA,MAC9B;AAAA,IACA;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,uBAAiB,QAAQ;AACzB,gBAAU,KAAK;AAAA,IACjB;AAEA,UAAM,uBAAuB,CAAC,UAAU;AACtC,UAAI,iBAAiB,OAAO;AAC1B,kBAAU,KAAK;AAAA,MACnB;AAAA,IACA;AAEA,UAAM,kBAAkB,MAAM;AAC5B,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,71 @@
+import { ref, computed, createElementBlock, openBlock, createElementVNode, normalizeStyle, normalizeClass } from "vue";
+import { state, actions } from "../../store/player.js";
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  __name: "VolumeControl",
+  setup(__props) {
+    const volumeBarContainer = ref(null);
+    const isChangingVolume = ref(false);
+    const volume = computed(() => state.volume);
+    const muted = computed(() => state.muted);
+    const volumePercentage = computed(() => {
+      if (muted.value) return 0;
+      return volume.value * 100;
+    });
+    const calculateVolume = (event) => {
+      if (!volumeBarContainer.value) return 0;
+      const rect = volumeBarContainer.value.getBoundingClientRect();
+      const offsetX = event.clientX - rect.left;
+      return Math.max(0, Math.min(1, offsetX / rect.width));
+    };
+    const setVolume = (event) => {
+      const newVolume = calculateVolume(event);
+      actions.setVolume(newVolume);
+      if (muted.value && newVolume > 0) {
+        actions.toggleMute();
+      }
+    };
+    const startVolumeChange = (event) => {
+      isChangingVolume.value = true;
+      setVolume(event);
+    };
+    const updateVolumePosition = (event) => {
+      if (isChangingVolume.value) {
+        setVolume(event);
+      }
+    };
+    const endVolumeChange = () => {
+      isChangingVolume.value = false;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), 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
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(["volume-bar h-100 bg-white radius-extra", { "muted": muted.value }]),
+          style: normalizeStyle({ width: volumePercentage.value + "%" })
+        }, null, 6),
+        createElementVNode("div", {
+          class: "volume-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0",
+          style: normalizeStyle({
+            left: `calc(${volumePercentage.value}% - 4px)`,
+            transform: "translateY(-50%)",
+            opacity: muted.value ? 0 : 1
+          })
+        }, null, 4)
+      ], 544);
+    };
+  }
+};
+const VolumeControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-08586594"]]);
+export {
+  VolumeControl as default
+};
+//# sourceMappingURL=VolumeControl.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VolumeControl.vue.js","sources":["../../../../../../../src/modules/music/components/player/VolumeControl.vue"],"sourcesContent":["<!-- components/player/VolumeControl.vue -->\n<template>\n  <div \n    ref=\"volumeBarContainer\"\n    class=\"volume-bar-container w-100 h-thin bg-grey-transp-50 radius-extra pos-relative cursor-pointer\"\n    @click=\"setVolume\"\n    @mousedown=\"startVolumeChange\"\n    @mousemove=\"updateVolumePosition\"\n    @mouseup=\"endVolumeChange\"\n    @mouseleave=\"endVolumeChange\"\n  >\n    <div \n      class=\"volume-bar h-100 bg-white radius-extra\" \n      :style=\"{ width: volumePercentage + '%' }\"\n      :class=\"{ 'muted': muted }\"\n    ></div>\n    <div \n      class=\"volume-handle w-thin h-thin bg-white radius-round pos-absolute pos-t-50 pos-l-0\"\n      :style=\"{ \n        left: `calc(${volumePercentage}% - 4px)`, \n        transform: 'translateY(-50%)',\n        opacity: muted ? 0 : 1\n      }\"\n    ></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\n// Import player store\nimport { state as playerState, actions as playerActions } from '../../store/player.js';\n\n// Refs\nconst volumeBarContainer = ref(null);\nconst isChangingVolume = ref(false);\n\n// Computed properties\nconst volume = computed(() => playerState.volume);\nconst muted = computed(() => playerState.muted);\nconst volumePercentage = computed(() => {\n  if (muted.value) return 0;\n  return volume.value * 100;\n});\n\n// Methods\nconst calculateVolume = (event) => {\n  if (!volumeBarContainer.value) return 0;\n  \n  const rect = volumeBarContainer.value.getBoundingClientRect();\n  const offsetX = event.clientX - rect.left;\n  \n  return Math.max(0, Math.min(1, offsetX / rect.width));\n};\n\nconst setVolume = (event) => {\n  const newVolume = calculateVolume(event);\n  playerActions.setVolume(newVolume);\n  \n  // Unmute if was muted\n  if (muted.value && newVolume > 0) {\n    playerActions.toggleMute();\n  }\n};\n\nconst startVolumeChange = (event) => {\n  isChangingVolume.value = true;\n  setVolume(event);\n};\n\nconst updateVolumePosition = (event) => {\n  if (isChangingVolume.value) {\n    setVolume(event);\n  }\n};\n\nconst endVolumeChange = () => {\n  isChangingVolume.value = false;\n};\n</script>\n\n<style scoped>\n.volume-bar-container:hover .volume-bar:not(.muted) {\n  background-color: rgb(var(--main));\n}\n\n.volume-handle {\n  display: none;\n}\n\n.volume-bar-container:hover .volume-handle {\n  display: block;\n}\n\n.muted {\n  opacity: 0.5;\n}\n</style>"],"names":["playerState","playerActions"],"mappings":";;;;;;AAkCA,UAAM,qBAAqB,IAAI,IAAI;AACnC,UAAM,mBAAmB,IAAI,KAAK;AAGlC,UAAM,SAAS,SAAS,MAAMA,MAAY,MAAM;AAChD,UAAM,QAAQ,SAAS,MAAMA,MAAY,KAAK;AAC9C,UAAM,mBAAmB,SAAS,MAAM;AACtC,UAAI,MAAM,MAAO,QAAO;AACxB,aAAO,OAAO,QAAQ;AAAA,IACxB,CAAC;AAGD,UAAM,kBAAkB,CAAC,UAAU;AACjC,UAAI,CAAC,mBAAmB,MAAO,QAAO;AAEtC,YAAM,OAAO,mBAAmB,MAAM,sBAAuB;AAC7D,YAAM,UAAU,MAAM,UAAU,KAAK;AAErC,aAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,UAAU,KAAK,KAAK,CAAC;AAAA,IACtD;AAEA,UAAM,YAAY,CAAC,UAAU;AAC3B,YAAM,YAAY,gBAAgB,KAAK;AACvCC,cAAc,UAAU,SAAS;AAGjC,UAAI,MAAM,SAAS,YAAY,GAAG;AAChCA,gBAAc,WAAY;AAAA,MAC9B;AAAA,IACA;AAEA,UAAM,oBAAoB,CAAC,UAAU;AACnC,uBAAiB,QAAQ;AACzB,gBAAU,KAAK;AAAA,IACjB;AAEA,UAAM,uBAAuB,CAAC,UAAU;AACtC,UAAI,iBAAiB,OAAO;AAC1B,kBAAU,KAAK;AAAA,MACnB;AAAA,IACA;AAEA,UAAM,kBAAkB,MAAM;AAC5B,uBAAiB,QAAQ;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}