@saooti/octopus-sdk 42.2.1 → 42.2.2

package/dist/PodcastPlayBar-D7CyLEM4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayBar-D7CyLEM4.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayBar.vue","../src/components/display/podcasts/PodcastPlayBar.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex align-items-center\">\n    <PodcastPlayBasicButton v-if=\"displayButonPlay\" :podcast=\"podcast\"/>\n    <div class=\"d-flex align-items-center podcast-play-bar flex-grow-1\">\n      <div class=\"me-2\">\n        {{ playedTime }}\n      </div>\n      <div class=\"position-relative flex-grow-1\">\n        <ProgressBar\n          :main-progress=\"percentProgress\"\n          class=\"medium\"\n          @mouseup=\"seekTo\"\n        />\n      </div>\n      <div class=\"ms-2\">\n        {{ totalTime }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ProgressBar from \"../../misc/ProgressBar.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nconst PodcastPlayBasicButton = defineAsyncComponent(() => import(\"./PodcastPlayBasicButton.vue\"));\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n  displayButonPlay:{ default: false, type: Boolean },\n})\n\n//Composables\nconst playerStore = usePlayerStore();\n\n//Computed\nconst percentProgress = computed(() => {\n  if (props.podcast?.podcastId !== playerStore.playerPodcast?.podcastId) {\n    return 0;\n  }\n  return !playerStore.playerElapsed ? 0 : playerStore.playerElapsed * 100;\n});\nconst playedTime = computed(() => {\n  if (props.podcast?.podcastId === playerStore.playerPodcast?.podcastId) {\n    if (\n      playerStore.playerElapsed &&\n      playerStore.playerElapsed > 0 &&\n      playerStore.playerTotal &&\n      playerStore.playerTotal > 0\n    ) {\n      return DurationHelper.formatDuration(\n        Math.round(playerStore.playerElapsed * playerStore.playerTotal),\n      );\n    }\n  }\n  return \"00:00\";\n});\nconst totalTime = computed(() => DurationHelper.formatDuration(Math.round(props.podcast.duration / 1000)));\n\n//Methods\nfunction seekTo(event: MouseEvent): void {\n  if (\n    !playerStore.playerPodcast ||\n    props.podcast?.podcastId !== playerStore.playerPodcast.podcastId\n  ) {\n    return;\n  }\n  const rect = (event.currentTarget as Element).getBoundingClientRect();\n  const barWidth = (event.currentTarget as Element).clientWidth;\n  const x = event.clientX - rect.left;\n  const percentPosition = x / barWidth;\n  playerStore.playerUpdateSeekTime(playerStore.playerTotal * percentPosition);\n}\n</script>","<template>\n  <div class=\"d-flex align-items-center\">\n    <PodcastPlayBasicButton v-if=\"displayButonPlay\" :podcast=\"podcast\"/>\n    <div class=\"d-flex align-items-center podcast-play-bar flex-grow-1\">\n      <div class=\"me-2\">\n        {{ playedTime }}\n      </div>\n      <div class=\"position-relative flex-grow-1\">\n        <ProgressBar\n          :main-progress=\"percentProgress\"\n          class=\"medium\"\n          @mouseup=\"seekTo\"\n        />\n      </div>\n      <div class=\"ms-2\">\n        {{ totalTime }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ProgressBar from \"../../misc/ProgressBar.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nconst PodcastPlayBasicButton = defineAsyncComponent(() => import(\"./PodcastPlayBasicButton.vue\"));\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n  displayButonPlay:{ default: false, type: Boolean },\n})\n\n//Composables\nconst playerStore = usePlayerStore();\n\n//Computed\nconst percentProgress = computed(() => {\n  if (props.podcast?.podcastId !== playerStore.playerPodcast?.podcastId) {\n    return 0;\n  }\n  return !playerStore.playerElapsed ? 0 : playerStore.playerElapsed * 100;\n});\nconst playedTime = computed(() => {\n  if (props.podcast?.podcastId === playerStore.playerPodcast?.podcastId) {\n    if (\n      playerStore.playerElapsed &&\n      playerStore.playerElapsed > 0 &&\n      playerStore.playerTotal &&\n      playerStore.playerTotal > 0\n    ) {\n      return DurationHelper.formatDuration(\n        Math.round(playerStore.playerElapsed * playerStore.playerTotal),\n      );\n    }\n  }\n  return \"00:00\";\n});\nconst totalTime = computed(() => DurationHelper.formatDuration(Math.round(props.podcast.duration / 1000)));\n\n//Methods\nfunction seekTo(event: MouseEvent): void {\n  if (\n    !playerStore.playerPodcast ||\n    props.podcast?.podcastId !== playerStore.playerPodcast.podcastId\n  ) {\n    return;\n  }\n  const rect = (event.currentTarget as Element).getBoundingClientRect();\n  const barWidth = (event.currentTarget as Element).clientWidth;\n  const x = event.clientX - rect.left;\n  const percentPosition = x / barWidth;\n  playerStore.playerUpdateSeekTime(playerStore.playerTotal * percentPosition);\n}\n</script>"],"mappings":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,yBAAyB,2BAA2B,OAAO,wCAA+B;EAIhG,MAAM,QAAQ;EAMd,MAAM,cAAc,eAAe;EAGnC,MAAM,kBAAkB,eAAe;GACrC,IAAI,MAAM,SAAS,cAAc,YAAY,eAAe,WAC1D,OAAO;GAET,OAAO,CAAC,YAAY,gBAAgB,IAAI,YAAY,gBAAgB;EACtE,CAAC;EACD,MAAM,aAAa,eAAe;GAChC,IAAI,MAAM,SAAS,cAAc,YAAY,eAAe;QAExD,YAAY,iBACZ,YAAY,gBAAgB,KAC5B,YAAY,eACZ,YAAY,cAAc,GAE1B,OAAO,uBAAe,eACpB,KAAK,MAAM,YAAY,gBAAgB,YAAY,WAAW,CAChE;GAAA;GAGJ,OAAO;EACT,CAAC;EACD,MAAM,YAAY,eAAe,uBAAe,eAAe,KAAK,MAAM,MAAM,QAAQ,WAAW,GAAI,CAAC,CAAC;EAGzG,SAAS,OAAO,OAAyB;GACvC,IACE,CAAC,YAAY,iBACb,MAAM,SAAS,cAAc,YAAY,cAAc,WAEvD;GAEF,MAAM,OAAQ,MAAM,cAA0B,sBAAsB;GACpE,MAAM,WAAY,MAAM,cAA0B;GAElD,MAAM,mBADI,MAAM,UAAU,KAAK,QACH;GAC5B,YAAY,qBAAqB,YAAY,cAAc,eAAe;EAC5E;;;;;;;;;;;;;;;;;;;;mBC3EO,OAAM,4BAA2B;mBAE/B,OAAM,yDAAwD;mBAC5D,OAAM,OAAM;mBAGZ,OAAM,gCAA+B;mBAOrC,OAAM,OAAM;;qBAbrB,mBAiBM,OAjBN,YAiBM,CAhB0B,OAAA,oBAAA,UAAA,GAA9B,YAAoE,OAAA,2BAAA;;EAAnB,SAAS,OAAA;+DAC1D,mBAcM,OAdN,YAcM;EAbJ,mBAEM,OAFN,YAEM,gBADD,OAAA,UAAU,GAAA,CAAA;EAEf,mBAMM,OANN,YAMM,CALJ,YAIE,OAAA,gBAAA;GAHC,iBAAe,OAAA;GAChB,OAAM;GACL,WAAS,OAAA;;EAGd,mBAEM,OAFN,YAEM,gBADD,OAAA,SAAS,GAAA,CAAA"}

package/dist/{PodcastPlayBar-WjGn_KlZ.mjs → PodcastPlayBar-DC5HCx76.mjs}

@@ -1,6 +1,6 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
-import { n as usePlayerStore, r as durationHelper_default } from "./PlayerStore-DukkcHI_.mjs";
-import { t as ProgressBar_default } from "./ProgressBar-0DSoUTwB.mjs";
+import { n as usePlayerStore, r as durationHelper_default } from "./PlayerStore-vYmnOEA_.mjs";
+import { t as ProgressBar_default } from "./ProgressBar-BVc0_6Lv.mjs";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineAsyncComponent, defineComponent, openBlock, toDisplayString } from "vue";
 //#region src/components/display/podcasts/PodcastPlayBar.vue?vue&type=script&setup=true&lang.ts
 var PodcastPlayBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -17,7 +17,7 @@ var PodcastPlayBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	},
 	setup(__props, { expose: __expose }) {
 		__expose();
-		const PodcastPlayBasicButton = defineAsyncComponent(() => import("./PodcastPlayBasicButton-BNKlqhGR.mjs"));
+		const PodcastPlayBasicButton = defineAsyncComponent(() => import("./PodcastPlayBasicButton-PJHza4d_.mjs"));
 		const props = __props;
 		const playerStore = usePlayerStore();
 		const percentProgress = computed(() => {
@@ -80,4 +80,4 @@ var PodcastPlayBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(Pod
 //#endregion
 export { PodcastPlayBar_default as default };
 
-//# sourceMappingURL=PodcastPlayBar-WjGn_KlZ.mjs.map
+//# sourceMappingURL=PodcastPlayBar-DC5HCx76.mjs.map

package/dist/PodcastPlayBar-DC5HCx76.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayBar-DC5HCx76.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayBar.vue","../src/components/display/podcasts/PodcastPlayBar.vue"],"sourcesContent":["<template>\n  <div class=\"d-flex align-items-center\">\n    <PodcastPlayBasicButton v-if=\"displayButonPlay\" :podcast=\"podcast\"/>\n    <div class=\"d-flex align-items-center podcast-play-bar flex-grow-1\">\n      <div class=\"me-2\">\n        {{ playedTime }}\n      </div>\n      <div class=\"position-relative flex-grow-1\">\n        <ProgressBar\n          :main-progress=\"percentProgress\"\n          class=\"medium\"\n          @mouseup=\"seekTo\"\n        />\n      </div>\n      <div class=\"ms-2\">\n        {{ totalTime }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ProgressBar from \"../../misc/ProgressBar.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nconst PodcastPlayBasicButton = defineAsyncComponent(() => import(\"./PodcastPlayBasicButton.vue\"));\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n  displayButonPlay:{ default: false, type: Boolean },\n})\n\n//Composables\nconst playerStore = usePlayerStore();\n\n//Computed\nconst percentProgress = computed(() => {\n  if (props.podcast?.podcastId !== playerStore.playerPodcast?.podcastId) {\n    return 0;\n  }\n  return !playerStore.playerElapsed ? 0 : playerStore.playerElapsed * 100;\n});\nconst playedTime = computed(() => {\n  if (props.podcast?.podcastId === playerStore.playerPodcast?.podcastId) {\n    if (\n      playerStore.playerElapsed &&\n      playerStore.playerElapsed > 0 &&\n      playerStore.playerTotal &&\n      playerStore.playerTotal > 0\n    ) {\n      return DurationHelper.formatDuration(\n        Math.round(playerStore.playerElapsed * playerStore.playerTotal),\n      );\n    }\n  }\n  return \"00:00\";\n});\nconst totalTime = computed(() => DurationHelper.formatDuration(Math.round(props.podcast.duration / 1000)));\n\n//Methods\nfunction seekTo(event: MouseEvent): void {\n  if (\n    !playerStore.playerPodcast ||\n    props.podcast?.podcastId !== playerStore.playerPodcast.podcastId\n  ) {\n    return;\n  }\n  const rect = (event.currentTarget as Element).getBoundingClientRect();\n  const barWidth = (event.currentTarget as Element).clientWidth;\n  const x = event.clientX - rect.left;\n  const percentPosition = x / barWidth;\n  playerStore.playerUpdateSeekTime(playerStore.playerTotal * percentPosition);\n}\n</script>","<template>\n  <div class=\"d-flex align-items-center\">\n    <PodcastPlayBasicButton v-if=\"displayButonPlay\" :podcast=\"podcast\"/>\n    <div class=\"d-flex align-items-center podcast-play-bar flex-grow-1\">\n      <div class=\"me-2\">\n        {{ playedTime }}\n      </div>\n      <div class=\"position-relative flex-grow-1\">\n        <ProgressBar\n          :main-progress=\"percentProgress\"\n          class=\"medium\"\n          @mouseup=\"seekTo\"\n        />\n      </div>\n      <div class=\"ms-2\">\n        {{ totalTime }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ProgressBar from \"../../misc/ProgressBar.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nconst PodcastPlayBasicButton = defineAsyncComponent(() => import(\"./PodcastPlayBasicButton.vue\"));\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n  displayButonPlay:{ default: false, type: Boolean },\n})\n\n//Composables\nconst playerStore = usePlayerStore();\n\n//Computed\nconst percentProgress = computed(() => {\n  if (props.podcast?.podcastId !== playerStore.playerPodcast?.podcastId) {\n    return 0;\n  }\n  return !playerStore.playerElapsed ? 0 : playerStore.playerElapsed * 100;\n});\nconst playedTime = computed(() => {\n  if (props.podcast?.podcastId === playerStore.playerPodcast?.podcastId) {\n    if (\n      playerStore.playerElapsed &&\n      playerStore.playerElapsed > 0 &&\n      playerStore.playerTotal &&\n      playerStore.playerTotal > 0\n    ) {\n      return DurationHelper.formatDuration(\n        Math.round(playerStore.playerElapsed * playerStore.playerTotal),\n      );\n    }\n  }\n  return \"00:00\";\n});\nconst totalTime = computed(() => DurationHelper.formatDuration(Math.round(props.podcast.duration / 1000)));\n\n//Methods\nfunction seekTo(event: MouseEvent): void {\n  if (\n    !playerStore.playerPodcast ||\n    props.podcast?.podcastId !== playerStore.playerPodcast.podcastId\n  ) {\n    return;\n  }\n  const rect = (event.currentTarget as Element).getBoundingClientRect();\n  const barWidth = (event.currentTarget as Element).clientWidth;\n  const x = event.clientX - rect.left;\n  const percentPosition = x / barWidth;\n  playerStore.playerUpdateSeekTime(playerStore.playerTotal * percentPosition);\n}\n</script>"],"mappings":";;;;;;;;;;;;;;;;;;;EA2BA,MAAM,yBAAyB,2BAA2B,OAAO,wCAA+B;EAIhG,MAAM,QAAQ;EAMd,MAAM,cAAc,eAAe;EAGnC,MAAM,kBAAkB,eAAe;GACrC,IAAI,MAAM,SAAS,cAAc,YAAY,eAAe,WAC1D,OAAO;GAET,OAAO,CAAC,YAAY,gBAAgB,IAAI,YAAY,gBAAgB;EACtE,CAAC;EACD,MAAM,aAAa,eAAe;GAChC,IAAI,MAAM,SAAS,cAAc,YAAY,eAAe;QAExD,YAAY,iBACZ,YAAY,gBAAgB,KAC5B,YAAY,eACZ,YAAY,cAAc,GAE1B,OAAO,uBAAe,eACpB,KAAK,MAAM,YAAY,gBAAgB,YAAY,WAAW,CAChE;GAAA;GAGJ,OAAO;EACT,CAAC;EACD,MAAM,YAAY,eAAe,uBAAe,eAAe,KAAK,MAAM,MAAM,QAAQ,WAAW,GAAI,CAAC,CAAC;EAGzG,SAAS,OAAO,OAAyB;GACvC,IACE,CAAC,YAAY,iBACb,MAAM,SAAS,cAAc,YAAY,cAAc,WAEvD;GAEF,MAAM,OAAQ,MAAM,cAA0B,sBAAsB;GACpE,MAAM,WAAY,MAAM,cAA0B;GAElD,MAAM,mBADI,MAAM,UAAU,KAAK,QACH;GAC5B,YAAY,qBAAqB,YAAY,cAAc,eAAe;EAC5E;;;;;;;;;;;;;;;;;;;;mBC3EO,OAAM,4BAA2B;mBAE/B,OAAM,yDAAwD;mBAC5D,OAAM,OAAM;mBAGZ,OAAM,gCAA+B;mBAOrC,OAAM,OAAM;;qBAbrB,mBAiBM,OAjBN,YAiBM,CAhB0B,OAAA,oBAAA,UAAA,GAA9B,YAAoE,OAAA,2BAAA;;EAAnB,SAAS,OAAA;+DAC1D,mBAcM,OAdN,YAcM;EAbJ,mBAEM,OAFN,YAEM,gBADD,OAAA,UAAU,GAAA,CAAA;EAEf,mBAMM,OANN,YAMM,CALJ,YAIE,OAAA,gBAAA;GAHC,iBAAe,OAAA;GAChB,OAAM;GACL,WAAS,OAAA;;EAGd,mBAEM,OAFN,YAEM,gBADD,OAAA,SAAS,GAAA,CAAA"}

package/dist/PodcastPlayBasicButton-DHYxw3NX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayBasicButton-DHYxw3NX.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayBasicButton.vue","../src/components/display/podcasts/PodcastPlayBasicButton.vue"],"sourcesContent":["<template>\n  <button\n    class=\"btn play-button-box bg-primary\"\n    @click=\"clickBtn(podcast)\"\n  >\n    <PlayIcon v-if=\"btnPlay\" class=\"text-light\" :title=\"t('Play')\" />\n    <PauseIcon v-else class=\"text-light\" :title=\"t('Pause')\" />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport PauseIcon from \"vue-material-design-icons/Pause.vue\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { useI18n } from \"vue-i18n\";\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n})\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst btnPlay = computed(() => playerStore.playerPodcast !== props.podcast || (playerStore.playerPodcast === props.podcast && 'PAUSED' === playerStore.playerStatus));\n\n\n//Methods\nfunction clickBtn(podcast: Podcast){\n  if(btnPlay.value){\n    play(podcast);\n    return;\n  }\n  pause();\n}\nfunction play(podcast: Podcast): void {\n  if (podcast === playerStore.playerPodcast) {\n    playerStore.playerChangeStatus(false);\n  } else {\n    playerStore.playerPlay(podcast);\n  }\n}\nfunction pause(): void {\n  playerStore.playerChangeStatus(true);\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../style/playButton\";\n</style>","<template>\n  <button\n    class=\"btn play-button-box bg-primary\"\n    @click=\"clickBtn(podcast)\"\n  >\n    <PlayIcon v-if=\"btnPlay\" class=\"text-light\" :title=\"t('Play')\" />\n    <PauseIcon v-else class=\"text-light\" :title=\"t('Pause')\" />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport PauseIcon from \"vue-material-design-icons/Pause.vue\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { useI18n } from \"vue-i18n\";\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n})\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst btnPlay = computed(() => playerStore.playerPodcast !== props.podcast || (playerStore.playerPodcast === props.podcast && 'PAUSED' === playerStore.playerStatus));\n\n\n//Methods\nfunction clickBtn(podcast: Podcast){\n  if(btnPlay.value){\n    play(podcast);\n    return;\n  }\n  pause();\n}\nfunction play(podcast: Podcast): void {\n  if (podcast === playerStore.playerPodcast) {\n    playerStore.playerChangeStatus(false);\n  } else {\n    playerStore.playerPlay(podcast);\n  }\n}\nfunction pause(): void {\n  playerStore.playerChangeStatus(true);\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../style/playButton\";\n</style>"],"mappings":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAKd,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,cAAc,eAAe;EAGnC,MAAM,UAAU,eAAe,YAAY,kBAAkB,MAAM,WAAY,YAAY,kBAAkB,MAAM,WAAW,aAAa,YAAY,YAAa;EAIpK,SAAS,SAAS,SAAiB;GACjC,IAAG,QAAQ,OAAM;IACf,KAAK,OAAO;IACZ;GACF;GACA,MAAM;EACR;EACA,SAAS,KAAK,SAAwB;GACpC,IAAI,YAAY,YAAY,eAC1B,YAAY,mBAAmB,KAAK;QAEpC,YAAY,WAAW,OAAO;EAElC;EACA,SAAS,QAAc;GACrB,YAAY,mBAAmB,IAAI;EACrC;;;;;;;;;;;;;;;;;;;;;;qBChDE,mBAMS,UAAA;EALP,OAAM;EACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,SAAS,OAAA,OAAO;KAER,OAAA,WAAA,UAAA,GAAhB,YAAiE,OAAA,aAAA;;EAAxC,OAAM;EAAc,OAAO,OAAA,EAAC,MAAA;yCACrD,YAA2D,OAAA,cAAA;;EAAzC,OAAM;EAAc,OAAO,OAAA,EAAC,OAAA"}

package/dist/{PodcastPlayBasicButton-BNKlqhGR.mjs → PodcastPlayBasicButton-PJHza4d_.mjs}

@@ -1,5 +1,5 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
-import { n as usePlayerStore } from "./PlayerStore-DukkcHI_.mjs";
+import { n as usePlayerStore } from "./PlayerStore-vYmnOEA_.mjs";
 import { computed, createBlock, createElementBlock, defineComponent, openBlock } from "vue";
 import { useI18n } from "vue-i18n";
 import PlayIcon from "vue-material-design-icons/Play.vue";
@@ -69,4 +69,4 @@ var PodcastPlayBasicButton_default = /*#__PURE__*/ _plugin_vue_export_helper_def
 //#endregion
 export { PodcastPlayBasicButton_default as default };
 
-//# sourceMappingURL=PodcastPlayBasicButton-BNKlqhGR.mjs.map
+//# sourceMappingURL=PodcastPlayBasicButton-PJHza4d_.mjs.map

package/dist/PodcastPlayBasicButton-PJHza4d_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayBasicButton-PJHza4d_.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayBasicButton.vue","../src/components/display/podcasts/PodcastPlayBasicButton.vue"],"sourcesContent":["<template>\n  <button\n    class=\"btn play-button-box bg-primary\"\n    @click=\"clickBtn(podcast)\"\n  >\n    <PlayIcon v-if=\"btnPlay\" class=\"text-light\" :title=\"t('Play')\" />\n    <PauseIcon v-else class=\"text-light\" :title=\"t('Pause')\" />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport PauseIcon from \"vue-material-design-icons/Pause.vue\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { useI18n } from \"vue-i18n\";\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n})\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst btnPlay = computed(() => playerStore.playerPodcast !== props.podcast || (playerStore.playerPodcast === props.podcast && 'PAUSED' === playerStore.playerStatus));\n\n\n//Methods\nfunction clickBtn(podcast: Podcast){\n  if(btnPlay.value){\n    play(podcast);\n    return;\n  }\n  pause();\n}\nfunction play(podcast: Podcast): void {\n  if (podcast === playerStore.playerPodcast) {\n    playerStore.playerChangeStatus(false);\n  } else {\n    playerStore.playerPlay(podcast);\n  }\n}\nfunction pause(): void {\n  playerStore.playerChangeStatus(true);\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../style/playButton\";\n</style>","<template>\n  <button\n    class=\"btn play-button-box bg-primary\"\n    @click=\"clickBtn(podcast)\"\n  >\n    <PlayIcon v-if=\"btnPlay\" class=\"text-light\" :title=\"t('Play')\" />\n    <PauseIcon v-else class=\"text-light\" :title=\"t('Pause')\" />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport PauseIcon from \"vue-material-design-icons/Pause.vue\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { useI18n } from \"vue-i18n\";\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n})\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst btnPlay = computed(() => playerStore.playerPodcast !== props.podcast || (playerStore.playerPodcast === props.podcast && 'PAUSED' === playerStore.playerStatus));\n\n\n//Methods\nfunction clickBtn(podcast: Podcast){\n  if(btnPlay.value){\n    play(podcast);\n    return;\n  }\n  pause();\n}\nfunction play(podcast: Podcast): void {\n  if (podcast === playerStore.playerPodcast) {\n    playerStore.playerChangeStatus(false);\n  } else {\n    playerStore.playerPlay(podcast);\n  }\n}\nfunction pause(): void {\n  playerStore.playerChangeStatus(true);\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../style/playButton\";\n</style>"],"mappings":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAKd,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,cAAc,eAAe;EAGnC,MAAM,UAAU,eAAe,YAAY,kBAAkB,MAAM,WAAY,YAAY,kBAAkB,MAAM,WAAW,aAAa,YAAY,YAAa;EAIpK,SAAS,SAAS,SAAiB;GACjC,IAAG,QAAQ,OAAM;IACf,KAAK,OAAO;IACZ;GACF;GACA,MAAM;EACR;EACA,SAAS,KAAK,SAAwB;GACpC,IAAI,YAAY,YAAY,eAC1B,YAAY,mBAAmB,KAAK;QAEpC,YAAY,WAAW,OAAO;EAElC;EACA,SAAS,QAAc;GACrB,YAAY,mBAAmB,IAAI;EACrC;;;;;;;;;;;;;;;;;;;;;;qBChDE,mBAMS,UAAA;EALP,OAAM;EACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,SAAS,OAAA,OAAO;KAER,OAAA,WAAA,UAAA,GAAhB,YAAiE,OAAA,aAAA;;EAAxC,OAAM;EAAc,OAAO,OAAA,EAAC,MAAA;yCACrD,YAA2D,OAAA,cAAA;;EAAzC,OAAM;EAAc,OAAO,OAAA,EAAC,OAAA"}

package/dist/PodcastPlayBasicButton-gK82n3YL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayBasicButton-gK82n3YL.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayBasicButton.vue","../src/components/display/podcasts/PodcastPlayBasicButton.vue"],"sourcesContent":["<template>\n  <button\n    class=\"btn play-button-box bg-primary\"\n    @click=\"clickBtn(podcast)\"\n  >\n    <PlayIcon v-if=\"btnPlay\" class=\"text-light\" :title=\"t('Play')\" />\n    <PauseIcon v-else class=\"text-light\" :title=\"t('Pause')\" />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport PauseIcon from \"vue-material-design-icons/Pause.vue\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { useI18n } from \"vue-i18n\";\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n})\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst btnPlay = computed(() => playerStore.playerPodcast !== props.podcast || (playerStore.playerPodcast === props.podcast && 'PAUSED' === playerStore.playerStatus));\n\n\n//Methods\nfunction clickBtn(podcast: Podcast){\n  if(btnPlay.value){\n    play(podcast);\n    return;\n  }\n  pause();\n}\nfunction play(podcast: Podcast): void {\n  if (podcast === playerStore.playerPodcast) {\n    playerStore.playerChangeStatus(false);\n  } else {\n    playerStore.playerPlay(podcast);\n  }\n}\nfunction pause(): void {\n  playerStore.playerChangeStatus(true);\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../style/playButton\";\n</style>","<template>\n  <button\n    class=\"btn play-button-box bg-primary\"\n    @click=\"clickBtn(podcast)\"\n  >\n    <PlayIcon v-if=\"btnPlay\" class=\"text-light\" :title=\"t('Play')\" />\n    <PauseIcon v-else class=\"text-light\" :title=\"t('Pause')\" />\n  </button>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport PauseIcon from \"vue-material-design-icons/Pause.vue\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed } from \"vue\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { useI18n } from \"vue-i18n\";\n\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n})\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\n\n//Computed\nconst btnPlay = computed(() => playerStore.playerPodcast !== props.podcast || (playerStore.playerPodcast === props.podcast && 'PAUSED' === playerStore.playerStatus));\n\n\n//Methods\nfunction clickBtn(podcast: Podcast){\n  if(btnPlay.value){\n    play(podcast);\n    return;\n  }\n  pause();\n}\nfunction play(podcast: Podcast): void {\n  if (podcast === playerStore.playerPodcast) {\n    playerStore.playerChangeStatus(false);\n  } else {\n    playerStore.playerPlay(podcast);\n  }\n}\nfunction pause(): void {\n  playerStore.playerChangeStatus(true);\n}\n</script>\n<style lang=\"scss\">\n@use \"../../../style/playButton\";\n</style>"],"mappings":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ;EAKd,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,cAAc,eAAe;EAGnC,MAAM,UAAU,eAAe,YAAY,kBAAkB,MAAM,WAAY,YAAY,kBAAkB,MAAM,WAAW,aAAa,YAAY,YAAa;EAIpK,SAAS,SAAS,SAAiB;GACjC,IAAG,QAAQ,OAAM;IACf,KAAK,OAAO;IACZ;GACF;GACA,MAAM;EACR;EACA,SAAS,KAAK,SAAwB;GACpC,IAAI,YAAY,YAAY,eAC1B,YAAY,mBAAmB,KAAK;QAEpC,YAAY,WAAW,OAAO;EAElC;EACA,SAAS,QAAc;GACrB,YAAY,mBAAmB,IAAI;EACrC;;;;;;;;;;;;;;;;;;;;;;qBChDE,mBAMS,UAAA;EALP,OAAM;EACL,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,OAAA,SAAS,OAAA,OAAO;KAER,OAAA,WAAA,UAAA,GAAhB,YAAiE,OAAA,aAAA;;EAAxC,OAAM;EAAc,OAAO,OAAA,EAAC,MAAA;yCACrD,YAA2D,OAAA,cAAA;;EAAzC,OAAM;EAAc,OAAO,OAAA,EAAC,OAAA"}

package/dist/{PodcastPlayButton-B9hWbPEk.mjs → PodcastPlayButton-1eaXWTlG.mjs}

@@ -1,8 +1,8 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.mjs";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
-import { A as state, m as podcastApi } from "./classicApi-CkDHWZG1.mjs";
+import { A as state, m as podcastApi } from "./classicApi-xjOqAovv.mjs";
 import { t as useResizePhone } from "./useResizePhone-CpfFUmfV.mjs";
-import { n as usePlayerStore, r as durationHelper_default } from "./PlayerStore-DukkcHI_.mjs";
+import { n as usePlayerStore, r as durationHelper_default } from "./PlayerStore-vYmnOEA_.mjs";
 import { t as PodcastProcessingStatus } from "./podcast-Da9L7I5Q.mjs";
 import { t as PlayVideoIcon_default } from "./PlayVideoIcon-CQJTc1O7.mjs";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineAsyncComponent, defineComponent, normalizeClass, openBlock, ref, resolveDynamicComponent, toDisplayString, withModifiers } from "vue";
@@ -46,7 +46,7 @@ var PodcastPlayButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	setup(__props, { expose: __expose }) {
 		__expose();
 		dayjs.extend(duration);
-		const PodcastIsPlaying = defineAsyncComponent(() => import("./PodcastIsPlaying-B7YVeSyB.mjs"));
+		const PodcastIsPlaying = defineAsyncComponent(() => import("./PodcastIsPlaying-BsObdQGR.mjs"));
 		const props = __props;
 		const hoverType = ref("");
 		const { t } = useI18n();
@@ -233,4 +233,4 @@ var PodcastPlayButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 //#endregion
 export { PodcastPlayButton_exports as n, PodcastPlayButton_default as t };
 
-//# sourceMappingURL=PodcastPlayButton-B9hWbPEk.mjs.map
+//# sourceMappingURL=PodcastPlayButton-1eaXWTlG.mjs.map

package/dist/PodcastPlayButton-1eaXWTlG.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayButton-1eaXWTlG.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayButton.vue","../src/components/display/podcasts/PodcastPlayButton.vue"],"sourcesContent":["<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n","<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PodcastPlayButton-Bosq5ozq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayButton-Bosq5ozq.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayButton.vue","../src/components/display/podcasts/PodcastPlayButton.vue"],"sourcesContent":["<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n","<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PodcastPlayButton-DIQi57Oh.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayButton-DIQi57Oh.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayButton.vue","../src/components/display/podcasts/PodcastPlayButton.vue"],"sourcesContent":["<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n","<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PodcastPlayButton-DcjbCnlT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayButton-DcjbCnlT.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayButton.vue","../src/components/display/podcasts/PodcastPlayButton.vue"],"sourcesContent":["<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n","<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PodcastPlayButton-DgSCyhrd.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlayButton-DgSCyhrd.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastPlayButton.vue","../src/components/display/podcasts/PodcastPlayButton.vue"],"sourcesContent":["<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n","<!--\n  Component displaying the play button on a podcast.\n  If the podcast is not available, an overlay is displayed with a message.\n-->\n<template>\n  <div\n    v-if=\"!hidePlay || recordingLive\"\n    :class=\"{ 'img-blur-background': displayBanner, 'allow-play': classicPodcastPlay }\"\n  >\n    <div\n      v-if=\"displayBanner\"\n      class=\"live-image-status bg-dark\"\n    >\n      {{ textVisible }}\n    </div>\n\n    <div\n      class=\"multi-buttons-play\"\n      :class=\"justButtons ? 'play-button-relative' : ''\"\n    >\n      <template v-if=\"!isLiveToBeRecorded\">\n        <button \n          class=\"d-flex\"\n          :title=\"playingPodcast? t('Pause') : t('Play')\"\n          @mouseenter=\"hoverType = 'audio'\"\n          @mouseleave=\"hoverType = ''\" \n          @click.prevent=\"play(false)\"\n        >\n          <PlayIcon\n            v-if=\"!playingPodcast || (playingPodcast && playerStore.playerVideo)\"\n            :size=\"playIconSize\"\n          />\n          <PodcastIsPlaying v-if=\"playingPodcast && !playerStore.playerVideo\" />\n          <time\n            v-if=\"!isVideoPodcast\"\n            class=\"ms-1 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n        <button \n          v-if=\"isVideoPodcast\"\n          :title=\"t('Video')\" \n          :disabled=\"playerStore.playerVideo\"\n          @click.prevent=\"play(true)\"\n          @mouseenter=\"hoverType = 'video'\"\n          @mouseleave=\"hoverType = ''\"\n        >\n          <PodcastIsPlaying v-if=\"playingPodcast && playerStore.playerVideo\" />\n          <PlayVideoIcon\n            v-else\n            :size=\"'video' === hoverType ? 50 : 40\"\n          />\n          <time\n            class=\"ms-2 me-2\"\n            :datetime=\"durationIso\"\n          >\n            {{ durationString }}\n          </time>\n        </button>\n\n        <div\n          v-if=\"displayBanner\"\n          class=\"special-icon-play-button\"\n        >\n          <component\n            :is=\"iconName\"\n            :size=\"16\"\n          />\n        </div>\n      </template>\n      <component\n        :is=\"iconName\"\n        v-else\n        :size=\"50\"\n        :title=\"textVisible\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlayVideoIcon from \"../../icons/PlayVideoIcon.vue\";\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\nimport ClockOutlineIcon from \"vue-material-design-icons/ClockOutline.vue\";\nimport CheckIcon from \"vue-material-design-icons/Check.vue\";\nimport TimerSandEmptyIcon from \"vue-material-design-icons/TimerSandEmpty.vue\";\nimport EyeOffOutlineIcon from \"vue-material-design-icons/EyeOffOutline.vue\";\nimport CancelIcon from \"vue-material-design-icons/Cancel.vue\";\nimport AlertIcon from \"vue-material-design-icons/Alert.vue\";\nimport DurationHelper from \"../../../helper/durationHelper\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast, PodcastProcessingStatus as ProcessingStatus, SimplifiedPodcast } from \"../../../stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport { usePlayerStore } from \"../../../stores/PlayerStore\";\nimport { computed, defineAsyncComponent, ref } from \"vue\";\nimport dayjs from \"dayjs\";\nimport duration from \"dayjs/plugin/duration\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRouter } from \"vue-router\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\nimport { podcastApi } from \"../../../api/podcastApi\";\ndayjs.extend(duration);\nconst PodcastIsPlaying = defineAsyncComponent(() => import(\"./PodcastIsPlaying.vue\"));\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast|SimplifiedPodcast },\n  hidePlay: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference },\n  justButtons: { default: false, type: Boolean },\n  /** Indicates that the processing status of the episode may be shown */\n  showProcessing: { default: false, type: Boolean }\n})\n\n\n//Data \nconst hoverType = ref(\"\");\n\n//Composables\nconst { t } = useI18n();\nconst playerStore = usePlayerStore();\nconst router = useRouter();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst isVideoPodcast = computed(() => {\n  return (\n    (props.fetchConference?.videoProfile?.includes(\"video_\") &&\n      ProcessingStatus.ReadyToRecord === props.podcast.processingStatus) ||\n    ('video' in props.podcast && undefined !== props.podcast.video?.videoId) ||\n    ('videoId' in props.podcast && undefined !== props.podcast.videoId)\n  );\n});\nconst playingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    \"null\" !== props.fetchConference.toString() &&\n    playerStore.playerLive?.conferenceId === props.fetchConference.conferenceId\n  );\n});\nconst playingPodcast = computed(() => {\n  return (\n    playerStore.playerPodcast?.podcastId === props.podcast.podcastId ||\n    playingLive.value\n  );\n});\nconst isLiveToBeRecorded = computed(() => undefined === props.fetchConference && isLiveReadyToRecord.value);\nconst isLiveReadyToRecord = computed(() => {\n  return (\n    undefined !== props.podcast?.conferenceId &&\n    0 !== props.podcast.conferenceId &&\n    ProcessingStatus.ReadyToRecord === props.podcast.processingStatus\n  );\n});\nconst isLiveValidAndVisible = computed(() => {\n  return (\n    undefined !== props.podcast &&\n    false !== props.podcast.valid &&\n    undefined !== props.podcast.availability.visibility &&\n    props.podcast.availability.visibility\n  );\n});\n\n/** Size of the play icon */\nconst playIconSize = computed(() => {\n  if (isPhone.value) {\n    return 36;\n  } else if (hoverType.value === 'audio') {\n    return 50;\n  } else {\n    return 40;\n  }\n});\n\n/** Whether the podcast can be played */\nconst classicPodcastPlay = computed(() => {\n  return (\n    //isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  );\n});\n\nconst displayBanner = computed(() => {\n  return props.justButtons !== true && !(\n    isLiveValidAndVisible.value &&\n    !isLiveToBeRecorded.value &&\n    ProcessingStatus.Planned !== props.podcast.processingStatus\n  ) || (ProcessingStatus.Processing === props.podcast.processingStatus && props.showProcessing);\n});\n\nconst iconName = computed(() => {\n  if (isLiveToBeRecorded.value) {\n    return ClockOutlineIcon;\n  }\n\n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return CheckIcon;\n    }\n\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ) {\n      return ClockOutlineIcon;\n    }\n\n    return EyeOffOutlineIcon;\n  }\n\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ) {\n    return TimerSandEmptyIcon;\n  }\n\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus) {\n    return CancelIcon;\n  }\n\n  return AlertIcon;\n});\n\n/** The text to display when the podcast is not ready */\nconst textVisible = computed(() => {\n  if (isLiveToBeRecorded.value){\n    return t(\"Podcast linked to waiting live\");\n  }\n    \n  if (ProcessingStatus.Ready === props.podcast.processingStatus || props.fetchConference) {\n    if (!props.podcast.valid) {\n      return t(\"Podcast to validate\");\n    }\n    if (\n      !props.podcast.availability.visibility &&\n      props.podcast.availability.date\n    ){\n      return t(\"Podcast publish in future\");\n    }\n    return t(\"Podcast no visible\");\n  }\n  if (\n    ProcessingStatus.Planned === props.podcast.processingStatus ||\n    ProcessingStatus.Processing === props.podcast.processingStatus\n  ){\n    return t(\"Podcast in process\");\n  }\n  if (ProcessingStatus.Cancelled === props.podcast.processingStatus){\n    return t(\"Podcast in cancelled status\");\n  }\n\n  return t(\"Podcast in error\");\n});\n\nconst recordingLive = computed(() => {\n  return (\n    undefined !== props.fetchConference &&\n    -1 !== props.fetchConference.conferenceId &&\n    (\"RECORDING\" === props.fetchConference.status ||\n      \"PENDING\" === props.fetchConference.status)\n  );\n});\nconst durationString = computed(() => {\n  return DurationHelper.formatDuration(\n    Math.round(props.podcast.duration / 1000),\n  );\n});\nconst durationIso = computed(() => {\n  if (!props.podcast || props.podcast.duration <= 1) {\n    return \"\";\n  }\n  return dayjs.duration({ milliseconds: props.podcast.duration }).toISOString();\n});\n\n//Methods\nasync function play(isVideo: boolean): Promise<void> {\n  if (isLiveToBeRecorded.value) {\n    return;\n  }\n  if (playingPodcast.value && isVideo === playerStore.playerVideo) {\n    playerStore.playerChangeStatus(\"PLAYING\" === playerStore.playerStatus);\n    return;\n  }\n  if (isVideo && state.player.isVideoPage) {\n    router.push(\"/main/pub/video/\" + props.podcast.podcastId);\n    return;\n  }\n\n  let podcast: Podcast|SimplifiedPodcast = props.podcast;\n  if (isVideo && !('video' in props.podcast)) {\n    podcast = await podcastApi.get(props.podcast.podcastId);\n  }\n  \n  if (!recordingLive.value) {\n    playerStore.playerPlay(podcast, isVideo);\n  } else {\n    playerStore.playerPlay(\n      {\n        ...podcast,\n        conferenceId: props.fetchConference?.conferenceId,\n        hlsIdentifier: props.fetchConference?.hlsIdentifier,\n      },\n      isVideo\n    );\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .img-blur-background{\n    position: absolute;\n    inset: 0;\n    background-color:var(--octopus-background-transparent);\n    // Allow pointer events to go through (allow click on image beneath blur)\n    pointer-events: none;\n\n    // Buttons intercept button events to allow start play\n    &.allow-play button {\n      pointer-events: all;\n    }\n  }\n\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .special-icon-play-button {\n    width: 30px;\n    height: 30px;\n    background-color: oklch(88.97% 0.1399 89.64deg);\n    color: black;\n    border-radius: 50%;\n    position: absolute;\n    right: -15px;\n    top: -20px;\n    font-size: 0.9rem;\n    font-weight: bold;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .multi-buttons-play{\n    display: flex;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    font-size: 1rem;\n    color: white;\n    background-color: var(--octopus-btn-play-bg);\n    border-radius: var(--octopus-btn-play-radius);\n\n    @media (width <= 960px) {\n      font-size: 0.8rem;\n    }\n\n    button{\n      color: var(--octopus-btn-play-fg);\n      background-color: transparent;\n      border: 0;\n      display: flex;\n      align-items: center;\n      padding:  0.2rem;\n    }\n  }\n\n  .play-button-relative.multi-buttons-play{\n    position: relative;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PodcastPlaylistInlineList-C0HZum5z.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlaylistInlineList-C0HZum5z.mjs","names":[],"sources":["../src/components/display/playlist/PodcastPlaylistInlineList.vue","../src/components/display/playlist/PodcastPlaylistInlineList.vue"],"sourcesContent":["<template>\n  <PodcastInlineListTemplate\n    v-if=\"loading || (!loading && 0 !== allPodcasts.length)\"\n    :display-arrow=\"false\"\n    :button-text=\"noMoreButton ? undefined : t('See more')\"\n    :button-plus=\"true\"\n    :title=\"playlist?.title ?? ''\"\n    :href=\"'/main/pub/playlist/' + playlistId\"\n    :podcast-id=\"playlistId\"\n  >\n    <template #list-inline>\n      <ClassicLoading\n        class=\"loading-size\"\n        :loading-text=\"loading ? t('Loading podcasts ...') : undefined\"\n      />\n      <SwiperList\n        v-if=\"!loading\"\n        :list-object=\"allPodcasts\"\n        :size-item-overload=\"sizeItemOverload\"\n      >\n        <template #octopusSlide=\"{ option }\">\n          <PodcastItem\n            class=\"flex-shrink-0 item-phone-margin\"\n            :podcast=\"option\"\n          />\n        </template>\n      </SwiperList>\n    </template>\n  </PodcastInlineListTemplate>\n</template>\n\n<script setup lang=\"ts\">\nimport PodcastInlineListTemplate from \"../podcasts/PodcastInlineListTemplate.vue\";\nimport PodcastItem from \"../podcasts/PodcastItem.vue\";\nimport SwiperList from \"../list/SwiperList.vue\";\nimport ClassicLoading from \"../../form/ClassicLoading.vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { onMounted, Ref, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { playlistApi } from \"../../../api/playlistApi\";\n\n//Props \nconst props = defineProps<{\n  /** ID of the playlist to display */\n  playlistId: number;\n  sizeItemOverload?: number;\n  /** When set to true, disable display of \"see more\" button */\n  noMoreButton?: boolean;\n}>();\n\n//Data \nconst loading = ref(true);\nconst totalCount = ref(0);\nconst playlist: Ref<Playlist | undefined> = ref(undefined);\nconst allPodcasts: Ref<Array<Podcast>> = ref([]);\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\n\n//Watch\nwatch(()=>props.playlistId, () => {\n  reset();\n  fetchContent();\n});\n\nonMounted(()=>fetchContent())\n\n//Methods\nasync function fetchContent(): Promise<void> {\n  allPodcasts.value.length = 0;\n  loading.value = true;\n\n  // Retrieve both playlist & content at the same time\n  const [playlistData, content] = await Promise.all([\n    playlistApi.get(props.playlistId),\n    playlistApi.getContentFull(props.playlistId)\n  ]);\n\n  // Update data\n  playlist.value = playlistData;\n  allPodcasts.value = content;\n\n  if (\n    !(\n      (undefined !== authStore.authOrgaId &&\n      authStore.authOrgaId === playlist.value?.organisation?.id) ||\n      authStore.isRoleAdmin\n    )\n  ) {\n    allPodcasts.value = allPodcasts.value.filter((p: Podcast | null) => {\n      return (\n        null !== p &&\n        (!p.availability || true === p.availability.visibility)\n      );\n    });\n  }\n  loading.value = false;\n}\nfunction reset(): void {\n  totalCount.value = 0;\n  allPodcasts.value.length = 0;\n}\n</script>\n","<template>\n  <PodcastInlineListTemplate\n    v-if=\"loading || (!loading && 0 !== allPodcasts.length)\"\n    :display-arrow=\"false\"\n    :button-text=\"noMoreButton ? undefined : t('See more')\"\n    :button-plus=\"true\"\n    :title=\"playlist?.title ?? ''\"\n    :href=\"'/main/pub/playlist/' + playlistId\"\n    :podcast-id=\"playlistId\"\n  >\n    <template #list-inline>\n      <ClassicLoading\n        class=\"loading-size\"\n        :loading-text=\"loading ? t('Loading podcasts ...') : undefined\"\n      />\n      <SwiperList\n        v-if=\"!loading\"\n        :list-object=\"allPodcasts\"\n        :size-item-overload=\"sizeItemOverload\"\n      >\n        <template #octopusSlide=\"{ option }\">\n          <PodcastItem\n            class=\"flex-shrink-0 item-phone-margin\"\n            :podcast=\"option\"\n          />\n        </template>\n      </SwiperList>\n    </template>\n  </PodcastInlineListTemplate>\n</template>\n\n<script setup lang=\"ts\">\nimport PodcastInlineListTemplate from \"../podcasts/PodcastInlineListTemplate.vue\";\nimport PodcastItem from \"../podcasts/PodcastItem.vue\";\nimport SwiperList from \"../list/SwiperList.vue\";\nimport ClassicLoading from \"../../form/ClassicLoading.vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { onMounted, Ref, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { playlistApi } from \"../../../api/playlistApi\";\n\n//Props \nconst props = defineProps<{\n  /** ID of the playlist to display */\n  playlistId: number;\n  sizeItemOverload?: number;\n  /** When set to true, disable display of \"see more\" button */\n  noMoreButton?: boolean;\n}>();\n\n//Data \nconst loading = ref(true);\nconst totalCount = ref(0);\nconst playlist: Ref<Playlist | undefined> = ref(undefined);\nconst allPodcasts: Ref<Array<Podcast>> = ref([]);\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\n\n//Watch\nwatch(()=>props.playlistId, () => {\n  reset();\n  fetchContent();\n});\n\nonMounted(()=>fetchContent())\n\n//Methods\nasync function fetchContent(): Promise<void> {\n  allPodcasts.value.length = 0;\n  loading.value = true;\n\n  // Retrieve both playlist & content at the same time\n  const [playlistData, content] = await Promise.all([\n    playlistApi.get(props.playlistId),\n    playlistApi.getContentFull(props.playlistId)\n  ]);\n\n  // Update data\n  playlist.value = playlistData;\n  allPodcasts.value = content;\n\n  if (\n    !(\n      (undefined !== authStore.authOrgaId &&\n      authStore.authOrgaId === playlist.value?.organisation?.id) ||\n      authStore.isRoleAdmin\n    )\n  ) {\n    allPodcasts.value = allPodcasts.value.filter((p: Podcast | null) => {\n      return (\n        null !== p &&\n        (!p.availability || true === p.availability.visibility)\n      );\n    });\n  }\n  loading.value = false;\n}\nfunction reset(): void {\n  totalCount.value = 0;\n  allPodcasts.value.length = 0;\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EASd,MAAM,UAAU,IAAI,IAAI;EACxB,MAAM,aAAa,IAAI,CAAC;EACxB,MAAM,WAAsC,IAAI,KAAA,CAAS;EACzD,MAAM,cAAmC,IAAI,CAAC,CAAC;EAG/C,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,YAAY,aAAa;EAG/B,YAAU,MAAM,kBAAkB;GAChC,MAAM;GACN,aAAa;EACf,CAAC;EAED,gBAAc,aAAa,CAAC;EAG5B,eAAe,eAA8B;GAC3C,YAAY,MAAM,SAAS;GAC3B,QAAQ,QAAQ;GAGhB,MAAM,CAAC,cAAc,WAAW,MAAM,QAAQ,IAAI,CAChD,YAAY,IAAI,MAAM,UAAU,GAChC,YAAY,eAAe,MAAM,UAAU,CAC7C,CAAC;GAGD,SAAS,QAAQ;GACjB,YAAY,QAAQ;GAEpB,IACE,EACG,KAAA,MAAc,UAAU,cACzB,UAAU,eAAe,SAAS,OAAO,cAAc,MACvD,UAAU,cAGZ,YAAY,QAAQ,YAAY,MAAM,QAAQ,MAAsB;IAClE,OACE,SAAS,MACR,CAAC,EAAE,gBAAgB,SAAS,EAAE,aAAa;GAEhD,CAAC;GAEH,QAAQ,QAAQ;EAClB;EACA,SAAS,QAAc;GACrB,WAAW,QAAQ;GACnB,YAAY,MAAM,SAAS;EAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;QCtGU,OAAA,WAAO,CAAM,OAAA,WAAO,MAAU,OAAA,YAAY,UAAA,UAAA,GADlD,YA2B4B,OAAA,8BAAA;;EAzBzB,iBAAe;EACf,eAAa,OAAA,eAAe,KAAA,IAAY,OAAA,EAAC,UAAA;EACzC,eAAa;EACb,OAAO,OAAA,UAAU,SAAK;EACtB,MAAI,wBAA0B,OAAA;EAC9B,cAAY,OAAA;;EAEF,eAAW,cAIlB,CAHF,YAGE,OAAA,mBAAA;GAFA,OAAM;GACL,gBAAc,OAAA,UAAU,OAAA,EAAC,sBAAA,IAA2B,KAAA;kCAG9C,OAAA,WAAA,UAAA,GADT,YAWa,OAAA,eAAA;;GATV,eAAa,OAAA;GACb,sBAAoB,OAAA;;GAEV,cAAY,SAInB,EAJuB,aAAM,CAC/B,YAGE,OAAA,gBAAA;IAFA,OAAM;IACL,SAAS"}

package/dist/PodcastPlaylistInlineList-CSziI2j4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlaylistInlineList-CSziI2j4.mjs","names":[],"sources":["../src/components/display/playlist/PodcastPlaylistInlineList.vue","../src/components/display/playlist/PodcastPlaylistInlineList.vue"],"sourcesContent":["<template>\n  <PodcastInlineListTemplate\n    v-if=\"loading || (!loading && 0 !== allPodcasts.length)\"\n    :display-arrow=\"false\"\n    :button-text=\"noMoreButton ? undefined : t('See more')\"\n    :button-plus=\"true\"\n    :title=\"playlist?.title ?? ''\"\n    :href=\"'/main/pub/playlist/' + playlistId\"\n    :podcast-id=\"playlistId\"\n  >\n    <template #list-inline>\n      <ClassicLoading\n        class=\"loading-size\"\n        :loading-text=\"loading ? t('Loading podcasts ...') : undefined\"\n      />\n      <SwiperList\n        v-if=\"!loading\"\n        :list-object=\"allPodcasts\"\n        :size-item-overload=\"sizeItemOverload\"\n      >\n        <template #octopusSlide=\"{ option }\">\n          <PodcastItem\n            class=\"flex-shrink-0 item-phone-margin\"\n            :podcast=\"option\"\n          />\n        </template>\n      </SwiperList>\n    </template>\n  </PodcastInlineListTemplate>\n</template>\n\n<script setup lang=\"ts\">\nimport PodcastInlineListTemplate from \"../podcasts/PodcastInlineListTemplate.vue\";\nimport PodcastItem from \"../podcasts/PodcastItem.vue\";\nimport SwiperList from \"../list/SwiperList.vue\";\nimport ClassicLoading from \"../../form/ClassicLoading.vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { onMounted, Ref, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { playlistApi } from \"../../../api/playlistApi\";\n\n//Props \nconst props = defineProps<{\n  /** ID of the playlist to display */\n  playlistId: number;\n  sizeItemOverload?: number;\n  /** When set to true, disable display of \"see more\" button */\n  noMoreButton?: boolean;\n}>();\n\n//Data \nconst loading = ref(true);\nconst totalCount = ref(0);\nconst playlist: Ref<Playlist | undefined> = ref(undefined);\nconst allPodcasts: Ref<Array<Podcast>> = ref([]);\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\n\n//Watch\nwatch(()=>props.playlistId, () => {\n  reset();\n  fetchContent();\n});\n\nonMounted(()=>fetchContent())\n\n//Methods\nasync function fetchContent(): Promise<void> {\n  allPodcasts.value.length = 0;\n  loading.value = true;\n\n  // Retrieve both playlist & content at the same time\n  const [playlistData, content] = await Promise.all([\n    playlistApi.get(props.playlistId),\n    playlistApi.getContentFull(props.playlistId)\n  ]);\n\n  // Update data\n  playlist.value = playlistData;\n  allPodcasts.value = content;\n\n  if (\n    !(\n      (undefined !== authStore.authOrgaId &&\n      authStore.authOrgaId === playlist.value?.organisation?.id) ||\n      authStore.isRoleAdmin\n    )\n  ) {\n    allPodcasts.value = allPodcasts.value.filter((p: Podcast | null) => {\n      return (\n        null !== p &&\n        (!p.availability || true === p.availability.visibility)\n      );\n    });\n  }\n  loading.value = false;\n}\nfunction reset(): void {\n  totalCount.value = 0;\n  allPodcasts.value.length = 0;\n}\n</script>\n","<template>\n  <PodcastInlineListTemplate\n    v-if=\"loading || (!loading && 0 !== allPodcasts.length)\"\n    :display-arrow=\"false\"\n    :button-text=\"noMoreButton ? undefined : t('See more')\"\n    :button-plus=\"true\"\n    :title=\"playlist?.title ?? ''\"\n    :href=\"'/main/pub/playlist/' + playlistId\"\n    :podcast-id=\"playlistId\"\n  >\n    <template #list-inline>\n      <ClassicLoading\n        class=\"loading-size\"\n        :loading-text=\"loading ? t('Loading podcasts ...') : undefined\"\n      />\n      <SwiperList\n        v-if=\"!loading\"\n        :list-object=\"allPodcasts\"\n        :size-item-overload=\"sizeItemOverload\"\n      >\n        <template #octopusSlide=\"{ option }\">\n          <PodcastItem\n            class=\"flex-shrink-0 item-phone-margin\"\n            :podcast=\"option\"\n          />\n        </template>\n      </SwiperList>\n    </template>\n  </PodcastInlineListTemplate>\n</template>\n\n<script setup lang=\"ts\">\nimport PodcastInlineListTemplate from \"../podcasts/PodcastInlineListTemplate.vue\";\nimport PodcastItem from \"../podcasts/PodcastItem.vue\";\nimport SwiperList from \"../list/SwiperList.vue\";\nimport ClassicLoading from \"../../form/ClassicLoading.vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { onMounted, Ref, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { playlistApi } from \"../../../api/playlistApi\";\n\n//Props \nconst props = defineProps<{\n  /** ID of the playlist to display */\n  playlistId: number;\n  sizeItemOverload?: number;\n  /** When set to true, disable display of \"see more\" button */\n  noMoreButton?: boolean;\n}>();\n\n//Data \nconst loading = ref(true);\nconst totalCount = ref(0);\nconst playlist: Ref<Playlist | undefined> = ref(undefined);\nconst allPodcasts: Ref<Array<Podcast>> = ref([]);\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\n\n//Watch\nwatch(()=>props.playlistId, () => {\n  reset();\n  fetchContent();\n});\n\nonMounted(()=>fetchContent())\n\n//Methods\nasync function fetchContent(): Promise<void> {\n  allPodcasts.value.length = 0;\n  loading.value = true;\n\n  // Retrieve both playlist & content at the same time\n  const [playlistData, content] = await Promise.all([\n    playlistApi.get(props.playlistId),\n    playlistApi.getContentFull(props.playlistId)\n  ]);\n\n  // Update data\n  playlist.value = playlistData;\n  allPodcasts.value = content;\n\n  if (\n    !(\n      (undefined !== authStore.authOrgaId &&\n      authStore.authOrgaId === playlist.value?.organisation?.id) ||\n      authStore.isRoleAdmin\n    )\n  ) {\n    allPodcasts.value = allPodcasts.value.filter((p: Podcast | null) => {\n      return (\n        null !== p &&\n        (!p.availability || true === p.availability.visibility)\n      );\n    });\n  }\n  loading.value = false;\n}\nfunction reset(): void {\n  totalCount.value = 0;\n  allPodcasts.value.length = 0;\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EASd,MAAM,UAAU,IAAI,IAAI;EACxB,MAAM,aAAa,IAAI,CAAC;EACxB,MAAM,WAAsC,IAAI,KAAA,CAAS;EACzD,MAAM,cAAmC,IAAI,CAAC,CAAC;EAG/C,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,YAAY,aAAa;EAG/B,YAAU,MAAM,kBAAkB;GAChC,MAAM;GACN,aAAa;EACf,CAAC;EAED,gBAAc,aAAa,CAAC;EAG5B,eAAe,eAA8B;GAC3C,YAAY,MAAM,SAAS;GAC3B,QAAQ,QAAQ;GAGhB,MAAM,CAAC,cAAc,WAAW,MAAM,QAAQ,IAAI,CAChD,YAAY,IAAI,MAAM,UAAU,GAChC,YAAY,eAAe,MAAM,UAAU,CAC7C,CAAC;GAGD,SAAS,QAAQ;GACjB,YAAY,QAAQ;GAEpB,IACE,EACG,KAAA,MAAc,UAAU,cACzB,UAAU,eAAe,SAAS,OAAO,cAAc,MACvD,UAAU,cAGZ,YAAY,QAAQ,YAAY,MAAM,QAAQ,MAAsB;IAClE,OACE,SAAS,MACR,CAAC,EAAE,gBAAgB,SAAS,EAAE,aAAa;GAEhD,CAAC;GAEH,QAAQ,QAAQ;EAClB;EACA,SAAS,QAAc;GACrB,WAAW,QAAQ;GACnB,YAAY,MAAM,SAAS;EAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;QCtGU,OAAA,WAAO,CAAM,OAAA,WAAO,MAAU,OAAA,YAAY,UAAA,UAAA,GADlD,YA2B4B,OAAA,8BAAA;;EAzBzB,iBAAe;EACf,eAAa,OAAA,eAAe,KAAA,IAAY,OAAA,EAAC,UAAA;EACzC,eAAa;EACb,OAAO,OAAA,UAAU,SAAK;EACtB,MAAI,wBAA0B,OAAA;EAC9B,cAAY,OAAA;;EAEF,eAAW,cAIlB,CAHF,YAGE,OAAA,mBAAA;GAFA,OAAM;GACL,gBAAc,OAAA,UAAU,OAAA,EAAC,sBAAA,IAA2B,KAAA;kCAG9C,OAAA,WAAA,UAAA,GADT,YAWa,OAAA,eAAA;;GATV,eAAa,OAAA;GACb,sBAAoB,OAAA;;GAEV,cAAY,SAInB,EAJuB,aAAM,CAC/B,YAGE,OAAA,gBAAA;IAFA,OAAM;IACL,SAAS"}

package/dist/PodcastPlaylistInlineList-CvX2rauY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PodcastPlaylistInlineList-CvX2rauY.mjs","names":[],"sources":["../src/components/display/playlist/PodcastPlaylistInlineList.vue","../src/components/display/playlist/PodcastPlaylistInlineList.vue"],"sourcesContent":["<template>\n  <PodcastInlineListTemplate\n    v-if=\"loading || (!loading && 0 !== allPodcasts.length)\"\n    :display-arrow=\"false\"\n    :button-text=\"noMoreButton ? undefined : t('See more')\"\n    :button-plus=\"true\"\n    :title=\"playlist?.title ?? ''\"\n    :href=\"'/main/pub/playlist/' + playlistId\"\n    :podcast-id=\"playlistId\"\n  >\n    <template #list-inline>\n      <ClassicLoading\n        class=\"loading-size\"\n        :loading-text=\"loading ? t('Loading podcasts ...') : undefined\"\n      />\n      <SwiperList\n        v-if=\"!loading\"\n        :list-object=\"allPodcasts\"\n        :size-item-overload=\"sizeItemOverload\"\n      >\n        <template #octopusSlide=\"{ option }\">\n          <PodcastItem\n            class=\"flex-shrink-0 item-phone-margin\"\n            :podcast=\"option\"\n          />\n        </template>\n      </SwiperList>\n    </template>\n  </PodcastInlineListTemplate>\n</template>\n\n<script setup lang=\"ts\">\nimport PodcastInlineListTemplate from \"../podcasts/PodcastInlineListTemplate.vue\";\nimport PodcastItem from \"../podcasts/PodcastItem.vue\";\nimport SwiperList from \"../list/SwiperList.vue\";\nimport ClassicLoading from \"../../form/ClassicLoading.vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { onMounted, Ref, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { playlistApi } from \"../../../api/playlistApi\";\n\n//Props \nconst props = defineProps<{\n  /** ID of the playlist to display */\n  playlistId: number;\n  sizeItemOverload?: number;\n  /** When set to true, disable display of \"see more\" button */\n  noMoreButton?: boolean;\n}>();\n\n//Data \nconst loading = ref(true);\nconst totalCount = ref(0);\nconst playlist: Ref<Playlist | undefined> = ref(undefined);\nconst allPodcasts: Ref<Array<Podcast>> = ref([]);\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\n\n//Watch\nwatch(()=>props.playlistId, () => {\n  reset();\n  fetchContent();\n});\n\nonMounted(()=>fetchContent())\n\n//Methods\nasync function fetchContent(): Promise<void> {\n  allPodcasts.value.length = 0;\n  loading.value = true;\n\n  // Retrieve both playlist & content at the same time\n  const [playlistData, content] = await Promise.all([\n    playlistApi.get(props.playlistId),\n    playlistApi.getContentFull(props.playlistId)\n  ]);\n\n  // Update data\n  playlist.value = playlistData;\n  allPodcasts.value = content;\n\n  if (\n    !(\n      (undefined !== authStore.authOrgaId &&\n      authStore.authOrgaId === playlist.value?.organisation?.id) ||\n      authStore.isRoleAdmin\n    )\n  ) {\n    allPodcasts.value = allPodcasts.value.filter((p: Podcast | null) => {\n      return (\n        null !== p &&\n        (!p.availability || true === p.availability.visibility)\n      );\n    });\n  }\n  loading.value = false;\n}\nfunction reset(): void {\n  totalCount.value = 0;\n  allPodcasts.value.length = 0;\n}\n</script>\n","<template>\n  <PodcastInlineListTemplate\n    v-if=\"loading || (!loading && 0 !== allPodcasts.length)\"\n    :display-arrow=\"false\"\n    :button-text=\"noMoreButton ? undefined : t('See more')\"\n    :button-plus=\"true\"\n    :title=\"playlist?.title ?? ''\"\n    :href=\"'/main/pub/playlist/' + playlistId\"\n    :podcast-id=\"playlistId\"\n  >\n    <template #list-inline>\n      <ClassicLoading\n        class=\"loading-size\"\n        :loading-text=\"loading ? t('Loading podcasts ...') : undefined\"\n      />\n      <SwiperList\n        v-if=\"!loading\"\n        :list-object=\"allPodcasts\"\n        :size-item-overload=\"sizeItemOverload\"\n      >\n        <template #octopusSlide=\"{ option }\">\n          <PodcastItem\n            class=\"flex-shrink-0 item-phone-margin\"\n            :podcast=\"option\"\n          />\n        </template>\n      </SwiperList>\n    </template>\n  </PodcastInlineListTemplate>\n</template>\n\n<script setup lang=\"ts\">\nimport PodcastInlineListTemplate from \"../podcasts/PodcastInlineListTemplate.vue\";\nimport PodcastItem from \"../podcasts/PodcastItem.vue\";\nimport SwiperList from \"../list/SwiperList.vue\";\nimport ClassicLoading from \"../../form/ClassicLoading.vue\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport { onMounted, Ref, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { playlistApi } from \"../../../api/playlistApi\";\n\n//Props \nconst props = defineProps<{\n  /** ID of the playlist to display */\n  playlistId: number;\n  sizeItemOverload?: number;\n  /** When set to true, disable display of \"see more\" button */\n  noMoreButton?: boolean;\n}>();\n\n//Data \nconst loading = ref(true);\nconst totalCount = ref(0);\nconst playlist: Ref<Playlist | undefined> = ref(undefined);\nconst allPodcasts: Ref<Array<Podcast>> = ref([]);\n\n//Composables\nconst { t } = useI18n();\nconst authStore = useAuthStore();\n\n//Watch\nwatch(()=>props.playlistId, () => {\n  reset();\n  fetchContent();\n});\n\nonMounted(()=>fetchContent())\n\n//Methods\nasync function fetchContent(): Promise<void> {\n  allPodcasts.value.length = 0;\n  loading.value = true;\n\n  // Retrieve both playlist & content at the same time\n  const [playlistData, content] = await Promise.all([\n    playlistApi.get(props.playlistId),\n    playlistApi.getContentFull(props.playlistId)\n  ]);\n\n  // Update data\n  playlist.value = playlistData;\n  allPodcasts.value = content;\n\n  if (\n    !(\n      (undefined !== authStore.authOrgaId &&\n      authStore.authOrgaId === playlist.value?.organisation?.id) ||\n      authStore.isRoleAdmin\n    )\n  ) {\n    allPodcasts.value = allPodcasts.value.filter((p: Podcast | null) => {\n      return (\n        null !== p &&\n        (!p.availability || true === p.availability.visibility)\n      );\n    });\n  }\n  loading.value = false;\n}\nfunction reset(): void {\n  totalCount.value = 0;\n  allPodcasts.value.length = 0;\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EA4CA,MAAM,QAAQ;EASd,MAAM,UAAU,IAAI,IAAI;EACxB,MAAM,aAAa,IAAI,CAAC;EACxB,MAAM,WAAsC,IAAI,KAAA,CAAS;EACzD,MAAM,cAAmC,IAAI,CAAC,CAAC;EAG/C,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,YAAY,aAAa;EAG/B,YAAU,MAAM,kBAAkB;GAChC,MAAM;GACN,aAAa;EACf,CAAC;EAED,gBAAc,aAAa,CAAC;EAG5B,eAAe,eAA8B;GAC3C,YAAY,MAAM,SAAS;GAC3B,QAAQ,QAAQ;GAGhB,MAAM,CAAC,cAAc,WAAW,MAAM,QAAQ,IAAI,CAChD,YAAY,IAAI,MAAM,UAAU,GAChC,YAAY,eAAe,MAAM,UAAU,CAC7C,CAAC;GAGD,SAAS,QAAQ;GACjB,YAAY,QAAQ;GAEpB,IACE,EACG,KAAA,MAAc,UAAU,cACzB,UAAU,eAAe,SAAS,OAAO,cAAc,MACvD,UAAU,cAGZ,YAAY,QAAQ,YAAY,MAAM,QAAQ,MAAsB;IAClE,OACE,SAAS,MACR,CAAC,EAAE,gBAAgB,SAAS,EAAE,aAAa;GAEhD,CAAC;GAEH,QAAQ,QAAQ;EAClB;EACA,SAAS,QAAc;GACrB,WAAW,QAAQ;GACnB,YAAY,MAAM,SAAS;EAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;QCtGU,OAAA,WAAO,CAAM,OAAA,WAAO,MAAU,OAAA,YAAY,UAAA,UAAA,GADlD,YA2B4B,OAAA,8BAAA;;EAzBzB,iBAAe;EACf,eAAa,OAAA,eAAe,KAAA,IAAY,OAAA,EAAC,UAAA;EACzC,eAAa;EACb,OAAO,OAAA,UAAU,SAAK;EACtB,MAAI,wBAA0B,OAAA;EAC9B,cAAY,OAAA;;EAEF,eAAW,cAIlB,CAHF,YAGE,OAAA,mBAAA;GAFA,OAAM;GACL,gBAAc,OAAA,UAAU,OAAA,EAAC,sBAAA,IAA2B,KAAA;kCAG9C,OAAA,WAAA,UAAA,GADT,YAWa,OAAA,eAAA;;GATV,eAAa,OAAA;GACb,sBAAoB,OAAA;;GAEV,cAAY,SAInB,EAJuB,aAAM,CAC/B,YAGE,OAAA,gBAAA;IAFA,OAAM;IACL,SAAS"}