@ozdao/martyrs 0.2.492 → 0.2.493

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

@@ -17,19 +17,18 @@ const IconMute = require("../../../icons/navigation/IconMute.vue.cjs");
 const player = require("../../store/player.cjs");
 ;/* empty css                   */
 const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
-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) {
@@ -40,16 +39,6 @@ const _sfc_main = {
     const muted = vue.computed(() => player.state.muted);
     const shuffle = vue.computed(() => player.state.shuffle);
     const repeat = vue.computed(() => player.state.repeat);
-    const repeatIcon = vue.computed(() => {
-      switch (repeat.value) {
-        case "one":
-          return "rgb(var(--main))";
-        case "all":
-          return "rgb(var(--main))";
-        default:
-          return "rgb(var(--grey))";
-      }
-    });
     const togglePlay = () => {
       player.actions.togglePlay();
     };
@@ -82,146 +71,147 @@ const _sfc_main = {
       return "Unknown Artist";
     };
     return (_ctx, _cache) => {
-      const _component_IconVolumeHalf = vue.resolveComponent("IconVolumeHalf");
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createElementVNode("div", _hoisted_2, [
-          currentTrack.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-            vue.createVNode(Media.default, {
-              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"])
-          ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_4, [
-            vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(currentTrack.value?.title || "No track playing"), 1),
-            vue.createElementVNode("div", _hoisted_6, vue.toDisplayString(getArtistName(currentTrack.value)), 1)
-          ]),
-          vue.createElementVNode("div", _hoisted_7, [
+          vue.createElementVNode("div", _hoisted_3, [
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.createVNode(Media.default, {
+                url: currentTrack.value?.coverUrl || currentTrack.value?.album && currentTrack.value.album.coverUrl || "/assets/placeholder-track.jpg",
+                class: "track-image-media"
+              }, null, 8, ["url"])
+            ]),
+            vue.createElementVNode("div", _hoisted_5, [
+              vue.createElementVNode("h3", _hoisted_6, vue.toDisplayString(currentTrack.value?.title || "No track playing"), 1),
+              vue.createElementVNode("p", _hoisted_7, vue.toDisplayString(getArtistName(currentTrack.value)), 1)
+            ]),
             vue.createVNode(Button.default, {
               onClick: toggleFavorite,
-              class: "bg-transparent border-none pd-zero",
+              class: vue.normalizeClass(["like-btn", { liked: isFavorite.value }]),
               showLoader: false,
               showSucces: false
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(IconLike.default, {
-                  class: "i-small",
-                  fill: isFavorite.value ? "rgb(var(--main))" : "rgb(var(--grey))"
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        vue.createElementVNode("div", _hoisted_8, [
-          vue.createElementVNode("div", _hoisted_9, [
-            vue.createVNode(Button.default, {
-              onClick: toggleShuffle,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(IconShuffle.default, {
-                  class: "i-small",
-                  fill: shuffle.value ? "rgb(var(--main))" : "rgb(var(--grey))"
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            }),
-            vue.createVNode(Button.default, {
-              onClick: playPrevious,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(IconChevronLeft.default, {
-                  class: "i-small",
-                  fill: "rgb(var(--white))"
+                  fill: "rgb(var(--white))",
+                  class: "like-icon"
                 })
               ]),
               _: 1
-            }),
+            }, 8, ["class"])
+          ]),
+          vue.createElementVNode("div", _hoisted_8, [
+            vue.createElementVNode("div", _hoisted_9, [
+              vue.createVNode(Button.default, {
+                onClick: toggleShuffle,
+                class: vue.normalizeClass(["control-btn secondary", { active: shuffle.value }]),
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconShuffle.default, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              vue.createVNode(Button.default, {
+                onClick: playPrevious,
+                class: "control-btn secondary",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconChevronLeft.default, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Button.default, {
+                onClick: togglePlay,
+                class: "control-btn primary",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => [
+                  isPlaying.value ? (vue.openBlock(), vue.createBlock(IconPause.default, {
+                    key: 0,
+                    class: "play-icon"
+                  })) : (vue.openBlock(), vue.createBlock(IconPlay.default, {
+                    key: 1,
+                    class: "play-icon"
+                  }))
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Button.default, {
+                onClick: playNext,
+                class: "control-btn secondary",
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconChevronRight.default, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(Button.default, {
+                onClick: toggleRepeat,
+                class: vue.normalizeClass(["control-btn secondary", { active: repeat.value !== "off" }]),
+                showLoader: false,
+                showSucces: false
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(IconRefresh.default, {
+                    fill: "rgb(var(--white))",
+                    class: "control-icon"
+                  })
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ]),
+            vue.createElementVNode("div", _hoisted_10, [
+              vue.createVNode(TrackProgress.default)
+            ])
+          ]),
+          vue.createElementVNode("div", _hoisted_11, [
             vue.createVNode(Button.default, {
-              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: vue.withCtx(() => [
-                isPlaying.value ? (vue.openBlock(), vue.createBlock(IconPause.default, {
+                !muted.value && volume.value > 0.5 ? (vue.openBlock(), vue.createBlock(IconVolume.default, {
                   key: 0,
-                  class: "i-medium",
-                  fill: "rgb(var(--black))"
-                })) : (vue.openBlock(), vue.createBlock(IconPlay.default, {
+                  fill: "rgb(var(--white))",
+                  class: "volume-icon"
+                })) : !muted.value && volume.value > 0 ? (vue.openBlock(), vue.createBlock(IconVolume.default, {
                   key: 1,
-                  class: "i-medium",
-                  fill: "rgb(var(--black))"
+                  fill: "rgb(var(--white))",
+                  class: "volume-icon"
+                })) : (vue.openBlock(), vue.createBlock(IconMute.default, {
+                  key: 2,
+                  fill: "rgb(var(--white))",
+                  class: "volume-icon"
                 }))
               ]),
               _: 1
             }),
-            vue.createVNode(Button.default, {
-              onClick: playNext,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(IconChevronRight.default, {
-                  class: "i-small",
-                  fill: "rgb(var(--white))"
-                })
-              ]),
-              _: 1
-            }),
-            vue.createVNode(Button.default, {
-              onClick: toggleRepeat,
-              class: "bg-transparent border-none pd-zero",
-              showLoader: false,
-              showSucces: false
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(IconRefresh.default, {
-                  class: "i-small",
-                  fill: repeatIcon.value
-                }, null, 8, ["fill"])
-              ]),
-              _: 1
-            })
-          ]),
-          vue.createVNode(TrackProgress.default, { class: "w-100 mn-t-thin" })
-        ]),
-        vue.createElementVNode("div", _hoisted_10, [
-          vue.createVNode(Button.default, {
-            onClick: toggleMute,
-            class: "bg-transparent border-none pd-zero mn-r-small",
-            showLoader: false,
-            showSucces: false
-          }, {
-            default: vue.withCtx(() => [
-              !muted.value && volume.value > 0.5 ? (vue.openBlock(), vue.createBlock(IconVolume.default, {
-                key: 0,
-                class: "i-small",
-                fill: "rgb(var(--white))"
-              })) : !muted.value && volume.value > 0 ? (vue.openBlock(), vue.createBlock(_component_IconVolumeHalf, {
-                key: 1,
-                class: "i-small",
-                fill: "rgb(var(--white))"
-              })) : (vue.openBlock(), vue.createBlock(IconMute.default, {
-                key: 2,
-                class: "i-small",
-                fill: "rgb(var(--white))"
-              }))
-            ]),
-            _: 1
-          }),
-          vue.createVNode(VolumeControl.default)
+            vue.createElementVNode("div", _hoisted_12, [
+              vue.createVNode(VolumeControl.default)
+            ])
+          ])
         ])
       ]);
     };
   }
 };
-const MusicPlayer = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-f19b93ab"]]);
+const MusicPlayer = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-8c2c90fa"]]);
 exports.default = MusicPlayer;
 //# sourceMappingURL=MusicPlayer.vue.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MusicPlayer.vue.cjs","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":["ref","computed","playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+HA,UAAM,aAAaA,IAAAA,IAAI,KAAK;AAG5B,UAAM,eAAeC,IAAAA,SAAS,MAAMC,OAAAA,MAAY,YAAY;AAC5D,UAAM,YAAYD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,SAAS;AACtD,UAAM,SAASD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,MAAM;AAChD,UAAM,QAAQD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,KAAK;AAC9C,UAAM,UAAUD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,OAAO;AAClD,UAAM,SAASD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,MAAM;AAEhD,UAAM,aAAaD,IAAAA,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;AACvBE,aAAAA,QAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrBA,aAAAA,QAAc,SAAQ;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACzBA,aAAAA,QAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,gBAAgB,MAAM;AAC1BA,aAAAA,QAAc,cAAa;AAAA,IAC7B;AAEA,UAAM,eAAe,MAAM;AACzBA,aAAAA,QAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,aAAa,MAAM;AACvBA,aAAAA,QAAc,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.cjs","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":["ref","computed","playerState","playerActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIA,UAAM,aAAaA,IAAAA,IAAI,KAAK;AAG5B,UAAM,eAAeC,IAAAA,SAAS,MAAMC,OAAAA,MAAY,YAAY;AAC5D,UAAM,YAAYD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,SAAS;AACtD,UAAM,SAASD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,MAAM;AAChD,UAAM,QAAQD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,KAAK;AAC9C,UAAM,UAAUD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,OAAO;AAClD,UAAM,SAASD,IAAAA,SAAS,MAAMC,OAAAA,MAAY,MAAM;AAGhD,UAAM,aAAa,MAAM;AACvBC,aAAAA,QAAc,WAAU;AAAA,IAC1B;AAEA,UAAM,WAAW,MAAM;AACrBA,aAAAA,QAAc,SAAQ;AAAA,IACxB;AAEA,UAAM,eAAe,MAAM;AACzBA,aAAAA,QAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,gBAAgB,MAAM;AAC1BA,aAAAA,QAAc,cAAa;AAAA,IAC7B;AAEA,UAAM,eAAe,MAAM;AACzBA,aAAAA,QAAc,aAAY;AAAA,IAC5B;AAEA,UAAM,aAAa,MAAM;AACvBA,aAAAA,QAAc,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}