{"version":3,"file":"RadioProgressBar-e2Ehdu7C.mjs","names":[],"sources":["../src/components/misc/player/radio/RadioProgressBar.vue","../src/components/misc/player/radio/RadioProgressBar.vue"],"sourcesContent":["<template>\n  <progress\n    class=\"c-hand-auto mt-1\"\n    min=\"0\"\n    max=\"100\"\n    :value=\"percentProgress\"\n    :aria-label=\"t('Radio')\"\n    :class=\"isAmbiance ? 'ambiance-progress' : ''\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport dayjs from \"dayjs\";\nimport { useI18n } from \"vue-i18n\";\nimport { computed, onMounted, onUnmounted, ref, Ref } from \"vue\";\n\n//Data \nconst percentInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n\n//Computed\nconst isAmbiance = computed(() => !playerStore.playerRadio?.podcast?.podcastId);\nconst percentProgress = computed(() => {\n  if (!playerStore.playerElapsed) {\n    return 0;\n  }\n  return playerStore.playerElapsed * 100;\n});\n\n\nonMounted(()=>handlePercentInterval())\nonUnmounted(()=>clearInterval(percentInterval.value as unknown as number))\n\n\n//Methods\nfunction handlePercentInterval(): void {\n  percentInterval.value = setInterval(() => {calculatePercent();}, 1000);\n}\nfunction calculatePercent(): void {\n  if (!playerStore.playerRadio?.metadata) {\n    return;\n  }\n  const actualMilliSecondsPlayed = dayjs()\n    .subtract(18, \"second\")\n    .diff(dayjs(playerStore.playerRadio.metadata.startDate));\n  const percentPlayed =\n    actualMilliSecondsPlayed /\n    (playerStore.playerRadio?.metadata.playDuration * 1000);\n    playerStore.playerUpdateElapsed(\n    percentPlayed,\n    playerStore.playerRadio?.metadata.playDuration,\n  );\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n  progress {\n      background-color: var(--octopus-player-progress-background-color);\n      border-radius: var(--octopus-border-radius);\n      accent-color: var(--octopus-player-progress-color-current);\n      color: var(--octopus-player-progress-color-current);\n      border: none;\n\n      &::-moz-progress-bar, &::-webkit-progress-value {\n        background: var(--octopus-player-progress-color-current);\n      }\n  }\n}\n</style>\n","<template>\n  <progress\n    class=\"c-hand-auto mt-1\"\n    min=\"0\"\n    max=\"100\"\n    :value=\"percentProgress\"\n    :aria-label=\"t('Radio')\"\n    :class=\"isAmbiance ? 'ambiance-progress' : ''\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport dayjs from \"dayjs\";\nimport { useI18n } from \"vue-i18n\";\nimport { computed, onMounted, onUnmounted, ref, Ref } from \"vue\";\n\n//Data \nconst percentInterval: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n\n//Computed\nconst isAmbiance = computed(() => !playerStore.playerRadio?.podcast?.podcastId);\nconst percentProgress = computed(() => {\n  if (!playerStore.playerElapsed) {\n    return 0;\n  }\n  return playerStore.playerElapsed * 100;\n});\n\n\nonMounted(()=>handlePercentInterval())\nonUnmounted(()=>clearInterval(percentInterval.value as unknown as number))\n\n\n//Methods\nfunction handlePercentInterval(): void {\n  percentInterval.value = setInterval(() => {calculatePercent();}, 1000);\n}\nfunction calculatePercent(): void {\n  if (!playerStore.playerRadio?.metadata) {\n    return;\n  }\n  const actualMilliSecondsPlayed = dayjs()\n    .subtract(18, \"second\")\n    .diff(dayjs(playerStore.playerRadio.metadata.startDate));\n  const percentPlayed =\n    actualMilliSecondsPlayed /\n    (playerStore.playerRadio?.metadata.playDuration * 1000);\n    playerStore.playerUpdateElapsed(\n    percentPlayed,\n    playerStore.playerRadio?.metadata.playDuration,\n  );\n}\n</script>\n\n<style scoped lang=\"scss\">\n.octopus-app {\n  progress {\n      background-color: var(--octopus-player-progress-background-color);\n      border-radius: var(--octopus-border-radius);\n      accent-color: var(--octopus-player-progress-color-current);\n      color: var(--octopus-player-progress-color-current);\n      border: none;\n\n      &::-moz-progress-bar, &::-webkit-progress-value {\n        background: var(--octopus-player-progress-color-current);\n      }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;EAkBA,MAAM,kBAAkE,IAAI,KAAA,CAAS;EAGrF,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,cAAc,eAAe;EAInC,MAAM,aAAa,eAAe,CAAC,YAAY,aAAa,SAAS,SAAS;EAC9E,MAAM,kBAAkB,eAAe;GACrC,IAAI,CAAC,YAAY,eACf,OAAO;GAET,OAAO,YAAY,gBAAgB;EACrC,CAAC;EAGD,gBAAc,sBAAsB,CAAC;EACrC,kBAAgB,cAAc,gBAAgB,KAA0B,CAAC;EAIzE,SAAS,wBAA8B;GACrC,gBAAgB,QAAQ,kBAAkB;IAAC,iBAAiB;GAAE,GAAG,GAAI;EACvE;EACA,SAAS,mBAAyB;GAChC,IAAI,CAAC,YAAY,aAAa,UAC5B;GAKF,MAAM,gBAH2B,MAAM,EACpC,SAAS,IAAI,QAAQ,EACrB,KAAK,MAAM,YAAY,YAAY,SAAS,SAAS,CAEtD,KACC,YAAY,aAAa,SAAS,eAAe;GAClD,YAAY,oBACZ,eACA,YAAY,aAAa,SAAS,YACpC;EACF;;;;;;;;;;;;;;;;;;;;;qBCxDE,mBAOE,YAAA;EANA,OAAK,eAAA,CAAC,oBAKE,OAAA,aAAU,sBAAA,EAAA,CAAA;EAJlB,KAAI;EACJ,KAAI;EACH,OAAO,OAAA;EACP,cAAY,OAAA,EAAC,OAAA"}