@saooti/octopus-sdk 42.3.0 → 42.3.1

package/dist/PlayerVideo-DXG_PsWA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideo-DXG_PsWA.mjs","names":["youtubeVideoHelper","_openBlock","_createBlock","_Teleport","_createElementBlock","_Fragment","_createElementVNode","_createVNode","_createCommentVNode","_sfc_main"],"sources":["../src/components/misc/player/video/PlayerVideo.vue","../src/components/misc/player/video/PlayerVideo.vue"],"sourcesContent":["<template>\n  <teleport to=\".octopus-app\">\n    <template v-if=\"playerStore.playerVideo\">\n      <button class=\"btn btn-transparent video-close\" @click=\"closePlayer\">\n        <WindowCloseIcon />\n      </button>\n      <div class=\"video-wrapper\">\n        <PlayerYoutubeEmbed v-if=\"youtubeId\" :youtube-id=\"youtubeId\" />\n        <PlayerVideoDigiteka\n          v-else-if=\"!playerStore.playerLive\"\n          :video-id=\"playerStore.playerPodcast?.video?.videoId\"\n          :podcast-id=\"playerStore.playerPodcast.podcastId\"\n        />\n        <PlayerVideoHls v-else :hls-url=\"hlsVideoUrl\" :is-secured=\"isSecured\"/>\n      </div>\n    </template>\n  </teleport>\n</template>\n<script setup lang=\"ts\">\nimport youtubeVideoHelper from \"../../../../helper/youtubeVideoHelper\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport { useApiStore } from \"../../../../stores/ApiStore\";\nimport { defineAsyncComponent, ref, Ref, computed, onMounted } from \"vue\";\nconst PlayerVideoDigiteka = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoDigiteka.vue\"),\n);\nconst PlayerVideoHls = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoHls.vue\"),\n);\nconst PlayerYoutubeEmbed = defineAsyncComponent(\n  () => import(\"../video/PlayerYoutubeEmbed.vue\"),\n);\n\n//Data \nconst youtubeId: Ref<string|undefined> = ref(undefined);\n\n//Composables\nconst apiStore = useApiStore();\nconst playerStore = usePlayerStore();\n\n\n//Computed\nconst isSecured = computed(() => \"SECURED\" === playerStore.playerLive?.organisation?.privacy);\nconst hlsVideoUrl = computed(() => {\n  if (!playerStore.playerHlsIdentifier) {\n    return \"\";\n  }\n  return `${apiStore.hlsUrl}live/video_${playerStore.playerHlsIdentifier}/index.m3u8`;\n});\n\nonMounted(()=>{\n  youtubeId.value = youtubeVideoHelper.getYoutubeId((playerStore.playerPodcast ?? playerStore.playerLive )?.tags ?? []);\n})\n\n//Methods\nfunction closePlayer() {\n  playerStore.playerPlay();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .video-wrapper {\n    border-radius: 1rem;\n    overflow: hidden;\n    position: fixed;\n    bottom: 2.5rem;\n    right: 0;\n    z-index: 10;\n  }\n\n  .video-close {\n    position: fixed;\n    bottom: 16.5rem;\n    right: 1rem;\n  }\n\n  @media (width <= 500px) {\n    .video-close {\n      bottom: 10.5rem;\n    }\n\n    .video-wrapper iframe {\n      width: 100%;\n      max-height: 150px;\n    }\n  }\n}\n</style>\n","<template>\n  <teleport to=\".octopus-app\">\n    <template v-if=\"playerStore.playerVideo\">\n      <button class=\"btn btn-transparent video-close\" @click=\"closePlayer\">\n        <WindowCloseIcon />\n      </button>\n      <div class=\"video-wrapper\">\n        <PlayerYoutubeEmbed v-if=\"youtubeId\" :youtube-id=\"youtubeId\" />\n        <PlayerVideoDigiteka\n          v-else-if=\"!playerStore.playerLive\"\n          :video-id=\"playerStore.playerPodcast?.video?.videoId\"\n          :podcast-id=\"playerStore.playerPodcast.podcastId\"\n        />\n        <PlayerVideoHls v-else :hls-url=\"hlsVideoUrl\" :is-secured=\"isSecured\"/>\n      </div>\n    </template>\n  </teleport>\n</template>\n<script setup lang=\"ts\">\nimport youtubeVideoHelper from \"../../../../helper/youtubeVideoHelper\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport { useApiStore } from \"../../../../stores/ApiStore\";\nimport { defineAsyncComponent, ref, Ref, computed, onMounted } from \"vue\";\nconst PlayerVideoDigiteka = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoDigiteka.vue\"),\n);\nconst PlayerVideoHls = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoHls.vue\"),\n);\nconst PlayerYoutubeEmbed = defineAsyncComponent(\n  () => import(\"../video/PlayerYoutubeEmbed.vue\"),\n);\n\n//Data \nconst youtubeId: Ref<string|undefined> = ref(undefined);\n\n//Composables\nconst apiStore = useApiStore();\nconst playerStore = usePlayerStore();\n\n\n//Computed\nconst isSecured = computed(() => \"SECURED\" === playerStore.playerLive?.organisation?.privacy);\nconst hlsVideoUrl = computed(() => {\n  if (!playerStore.playerHlsIdentifier) {\n    return \"\";\n  }\n  return `${apiStore.hlsUrl}live/video_${playerStore.playerHlsIdentifier}/index.m3u8`;\n});\n\nonMounted(()=>{\n  youtubeId.value = youtubeVideoHelper.getYoutubeId((playerStore.playerPodcast ?? playerStore.playerLive )?.tags ?? []);\n})\n\n//Methods\nfunction closePlayer() {\n  playerStore.playerPlay();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .video-wrapper {\n    border-radius: 1rem;\n    overflow: hidden;\n    position: fixed;\n    bottom: 2.5rem;\n    right: 0;\n    z-index: 10;\n  }\n\n  .video-close {\n    position: fixed;\n    bottom: 16.5rem;\n    right: 1rem;\n  }\n\n  @media (width <= 500px) {\n    .video-close {\n      bottom: 10.5rem;\n    }\n\n    .video-wrapper iframe {\n      width: 100%;\n      max-height: 150px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAwBA,MAAM,sBAAsB,2BACpB,OAAO,qCACf;EACA,MAAM,iBAAiB,2BACf,OAAO,gCACf;EACA,MAAM,qBAAqB,2BACnB,OAAO,oCACf;EAGA,MAAM,YAAmC,IAAI,KAAA,CAAS;EAGtD,MAAM,WAAW,YAAY;EAC7B,MAAM,cAAc,eAAe;EAInC,MAAM,YAAY,eAAe,cAAc,YAAY,YAAY,cAAc,OAAO;EAC5F,MAAM,cAAc,eAAe;GACjC,IAAI,CAAC,YAAY,qBACf,OAAO;GAET,OAAO,GAAG,SAAS,OAAO,aAAa,YAAY,oBAAoB;EACzE,CAAC;EAED,gBAAc;GACZ,UAAU,QAAQA,2BAAmB,cAAc,YAAY,iBAAiB,YAAY,WAAA,EAAc,QAAQ,CAAC,CAAC;EACtH,CAAC;EAGD,SAAS,cAAc;GACrB,YAAY,WAAW;EACzB;;;;;;;;;;;;;;;;;;;;;;ACpDW,IAAA,aAAA,EAAA,OAAM,gBAAe;;CAL9B,OAAAC,UAAA,GAAAC,YAeWC,UAAA,EAfD,IAAG,eAAc,GAAA,CACT,OAAA,YAAY,eAA5BF,UAAA,GAAAG,mBAaWC,UAAA,EAAA,KAAA,EAAA,GAAA,CAZTC,mBAES,UAAA;EAFD,OAAM;EAAmC,SAAO,OAAA;CACtD,GAAA,CAAAC,YAAmB,OAAA,kBAAA,CAAA,CAAA,GAErBD,mBAQM,OARN,YAQM,CAPsB,OAAA,aAA1BL,UAAA,GAAAC,YAA+D,OAAA,uBAAA;;EAAzB,cAAY,OAAA;CAEpC,GAAA,MAAA,GAAA,CAAA,YAAA,CAAA,KAAA,CAAA,OAAA,YAAY,cAD1BD,UAAA,GAAAC,YAIE,OAAA,wBAAA;;EAFC,YAAU,OAAA,YAAY,eAAe,OAAO;EAC5C,cAAY,OAAA,YAAY,cAAc;CAEzC,GAAA,MAAA,GAAA,CAAA,YAAA,YAAA,CAAA,MAAAD,UAAA,GAAAC,YAAuE,OAAA,mBAAA;;EAA/C,WAAS,OAAA;EAAc,cAAY,OAAA"}

package/dist/PlayerVideo-DzUapxuZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideo-DzUapxuZ.mjs","names":["youtubeVideoHelper","_openBlock","_createBlock","_Teleport","_createElementBlock","_Fragment","_createElementVNode","_createVNode","_createCommentVNode","_sfc_main"],"sources":["../src/components/misc/player/video/PlayerVideo.vue","../src/components/misc/player/video/PlayerVideo.vue"],"sourcesContent":["<template>\n  <teleport to=\".octopus-app\">\n    <template v-if=\"playerStore.playerVideo\">\n      <button class=\"btn btn-transparent video-close\" @click=\"closePlayer\">\n        <WindowCloseIcon />\n      </button>\n      <div class=\"video-wrapper\">\n        <PlayerYoutubeEmbed v-if=\"youtubeId\" :youtube-id=\"youtubeId\" />\n        <PlayerVideoDigiteka\n          v-else-if=\"!playerStore.playerLive\"\n          :video-id=\"playerStore.playerPodcast?.video?.videoId\"\n          :podcast-id=\"playerStore.playerPodcast.podcastId\"\n        />\n        <PlayerVideoHls v-else :hls-url=\"hlsVideoUrl\" :is-secured=\"isSecured\"/>\n      </div>\n    </template>\n  </teleport>\n</template>\n<script setup lang=\"ts\">\nimport youtubeVideoHelper from \"../../../../helper/youtubeVideoHelper\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport { useApiStore } from \"../../../../stores/ApiStore\";\nimport { defineAsyncComponent, ref, Ref, computed, onMounted } from \"vue\";\nconst PlayerVideoDigiteka = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoDigiteka.vue\"),\n);\nconst PlayerVideoHls = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoHls.vue\"),\n);\nconst PlayerYoutubeEmbed = defineAsyncComponent(\n  () => import(\"../video/PlayerYoutubeEmbed.vue\"),\n);\n\n//Data \nconst youtubeId: Ref<string|undefined> = ref(undefined);\n\n//Composables\nconst apiStore = useApiStore();\nconst playerStore = usePlayerStore();\n\n\n//Computed\nconst isSecured = computed(() => \"SECURED\" === playerStore.playerLive?.organisation?.privacy);\nconst hlsVideoUrl = computed(() => {\n  if (!playerStore.playerHlsIdentifier) {\n    return \"\";\n  }\n  return `${apiStore.hlsUrl}live/video_${playerStore.playerHlsIdentifier}/index.m3u8`;\n});\n\nonMounted(()=>{\n  youtubeId.value = youtubeVideoHelper.getYoutubeId((playerStore.playerPodcast ?? playerStore.playerLive )?.tags ?? []);\n})\n\n//Methods\nfunction closePlayer() {\n  playerStore.playerPlay();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .video-wrapper {\n    border-radius: 1rem;\n    overflow: hidden;\n    position: fixed;\n    bottom: 2.5rem;\n    right: 0;\n    z-index: 10;\n  }\n\n  .video-close {\n    position: fixed;\n    bottom: 16.5rem;\n    right: 1rem;\n  }\n\n  @media (width <= 500px) {\n    .video-close {\n      bottom: 10.5rem;\n    }\n\n    .video-wrapper iframe {\n      width: 100%;\n      max-height: 150px;\n    }\n  }\n}\n</style>\n","<template>\n  <teleport to=\".octopus-app\">\n    <template v-if=\"playerStore.playerVideo\">\n      <button class=\"btn btn-transparent video-close\" @click=\"closePlayer\">\n        <WindowCloseIcon />\n      </button>\n      <div class=\"video-wrapper\">\n        <PlayerYoutubeEmbed v-if=\"youtubeId\" :youtube-id=\"youtubeId\" />\n        <PlayerVideoDigiteka\n          v-else-if=\"!playerStore.playerLive\"\n          :video-id=\"playerStore.playerPodcast?.video?.videoId\"\n          :podcast-id=\"playerStore.playerPodcast.podcastId\"\n        />\n        <PlayerVideoHls v-else :hls-url=\"hlsVideoUrl\" :is-secured=\"isSecured\"/>\n      </div>\n    </template>\n  </teleport>\n</template>\n<script setup lang=\"ts\">\nimport youtubeVideoHelper from \"../../../../helper/youtubeVideoHelper\";\nimport WindowCloseIcon from \"vue-material-design-icons/WindowClose.vue\";\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport { useApiStore } from \"../../../../stores/ApiStore\";\nimport { defineAsyncComponent, ref, Ref, computed, onMounted } from \"vue\";\nconst PlayerVideoDigiteka = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoDigiteka.vue\"),\n);\nconst PlayerVideoHls = defineAsyncComponent(\n  () => import(\"../video/PlayerVideoHls.vue\"),\n);\nconst PlayerYoutubeEmbed = defineAsyncComponent(\n  () => import(\"../video/PlayerYoutubeEmbed.vue\"),\n);\n\n//Data \nconst youtubeId: Ref<string|undefined> = ref(undefined);\n\n//Composables\nconst apiStore = useApiStore();\nconst playerStore = usePlayerStore();\n\n\n//Computed\nconst isSecured = computed(() => \"SECURED\" === playerStore.playerLive?.organisation?.privacy);\nconst hlsVideoUrl = computed(() => {\n  if (!playerStore.playerHlsIdentifier) {\n    return \"\";\n  }\n  return `${apiStore.hlsUrl}live/video_${playerStore.playerHlsIdentifier}/index.m3u8`;\n});\n\nonMounted(()=>{\n  youtubeId.value = youtubeVideoHelper.getYoutubeId((playerStore.playerPodcast ?? playerStore.playerLive )?.tags ?? []);\n})\n\n//Methods\nfunction closePlayer() {\n  playerStore.playerPlay();\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .video-wrapper {\n    border-radius: 1rem;\n    overflow: hidden;\n    position: fixed;\n    bottom: 2.5rem;\n    right: 0;\n    z-index: 10;\n  }\n\n  .video-close {\n    position: fixed;\n    bottom: 16.5rem;\n    right: 1rem;\n  }\n\n  @media (width <= 500px) {\n    .video-close {\n      bottom: 10.5rem;\n    }\n\n    .video-wrapper iframe {\n      width: 100%;\n      max-height: 150px;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;EAwBA,MAAM,sBAAsB,2BACpB,OAAO,qCACf;EACA,MAAM,iBAAiB,2BACf,OAAO,gCACf;EACA,MAAM,qBAAqB,2BACnB,OAAO,oCACf;EAGA,MAAM,YAAmC,IAAI,KAAA,CAAS;EAGtD,MAAM,WAAW,YAAY;EAC7B,MAAM,cAAc,eAAe;EAInC,MAAM,YAAY,eAAe,cAAc,YAAY,YAAY,cAAc,OAAO;EAC5F,MAAM,cAAc,eAAe;GACjC,IAAI,CAAC,YAAY,qBACf,OAAO;GAET,OAAO,GAAG,SAAS,OAAO,aAAa,YAAY,oBAAoB;EACzE,CAAC;EAED,gBAAc;GACZ,UAAU,QAAQA,2BAAmB,cAAc,YAAY,iBAAiB,YAAY,WAAA,EAAc,QAAQ,CAAC,CAAC;EACtH,CAAC;EAGD,SAAS,cAAc;GACrB,YAAY,WAAW;EACzB;;;;;;;;;;;;;;;;;;;;;;ACpDW,IAAA,aAAA,EAAA,OAAM,gBAAe;;CAL9B,OAAAC,UAAA,GAAAC,YAeWC,UAAA,EAfD,IAAG,eAAc,GAAA,CACT,OAAA,YAAY,eAA5BF,UAAA,GAAAG,mBAaWC,UAAA,EAAA,KAAA,EAAA,GAAA,CAZTC,mBAES,UAAA;EAFD,OAAM;EAAmC,SAAO,OAAA;CACtD,GAAA,CAAAC,YAAmB,OAAA,kBAAA,CAAA,CAAA,GAErBD,mBAQM,OARN,YAQM,CAPsB,OAAA,aAA1BL,UAAA,GAAAC,YAA+D,OAAA,uBAAA;;EAAzB,cAAY,OAAA;CAEpC,GAAA,MAAA,GAAA,CAAA,YAAA,CAAA,KAAA,CAAA,OAAA,YAAY,cAD1BD,UAAA,GAAAC,YAIE,OAAA,wBAAA;;EAFC,YAAU,OAAA,YAAY,eAAe,OAAO;EAC5C,cAAY,OAAA,YAAY,cAAc;CAEzC,GAAA,MAAA,GAAA,CAAA,YAAA,YAAA,CAAA,MAAAD,UAAA,GAAAC,YAAuE,OAAA,mBAAA;;EAA/C,WAAS,OAAA;EAAc,cAAY,OAAA"}

package/dist/PlayerVideoDigiteka-B1rRVLzy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideoDigiteka-B1rRVLzy.mjs","names":["classicApi","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_createVNode","_sfc_main"],"sources":["../src/api/videoApi.ts","../src/components/misc/player/video/PlayerVideoDigiteka.vue","../src/components/misc/player/video/PlayerVideoDigiteka.vue"],"sourcesContent":["import { ModuleApi } from \"./apiConnection\";\nimport classicApi from \"./classicApi\";\n\n/**\n * Request the download ID from a video\n * @param podcastId The id of the podcast to be watched\n */\nasync function watchPodcast(podcastId: number): Promise<string> {\n    return classicApi.fetchData<string>({\n        api: ModuleApi.DEFAULT,\n        path: 'video/watch/' + podcastId\n    });\n}\n\nexport const videoApi = {\n    watchPodcast\n}\n","<template>\n  <div :class=\"responsive ? 'video-responsive-wrapper' : ''\">\n    <iframe\n      v-if=\"videoId\"\n      ref=\"iframeVideo\"\n      :src=\"srcVideo\"\n      :title=\"t('Video')\"\n      width=\"500\"\n      height=\"281\"\n      style=\"z-index: 1\"\n      ebkitallowfullscreen=\"true\"\n      mozallowfullscreen=\"true\"\n      allowfullscreen=\"true\"\n      allow=\"fullscreen; autoplay\"\n      referrerpolicy=\"no-referrer-when-downgrade\"\n    ></iframe>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport SnackBar from \"../../SnackBar.vue\";\nimport { computed, onMounted, useTemplateRef } from \"vue\";\n\nimport { usePlayerLogicProgress } from \"../../../composable/player/usePlayerLogicProgress\";\nimport { videoApi } from \"../../../../api/videoApi\";\n\n//Props \nconst props = defineProps({\n  videoId: { type: String, required: true },\n  podcastId: { type: Number, required: false, default: null },\n  responsive: { default: false, type: Boolean },\n})\n\n//Data\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst { onTimeUpdateProgress, setDownloadId } = usePlayerLogicProgress();\n\n//Computed\nconst srcVideo = computed(() => {\n  return (\n    \"//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/\" +\n    props.videoId +\n    \"/sound/yes/autoplay/1\"\n  );\n});\n\nonMounted(async()=>{\n  if (undefined === props.videoId) {\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t(\"Podcast play error\"));\n  }\n\n  // #14118 cf https://support.digiteka.com/fr/API/Iframe#h-3-r%C3%A9ception-des-%C3%A9v%C3%A9nements-du-player\n  window.addEventListener('message', event => {\n    if (typeof event.data !== 'string') {\n      return;\n    }\n\n    const data = Object.fromEntries(event.data.split('&').map(d => d.split('=')));\n    if (data.event === 'timeupdate') {\n      onTimeUpdateProgress(parseFloat(data.time));\n    }\n  });\n\n  if (props.podcastId !== undefined) {\n    const downloadId = await videoApi.watchPodcast(props.podcastId);\n    setDownloadId(downloadId);\n  }\n})\n</script>\n\n<style scoped lang=\"scss\">\n@use \"../../../../style/videoPlayer\";\n</style>\n","<template>\n  <div :class=\"responsive ? 'video-responsive-wrapper' : ''\">\n    <iframe\n      v-if=\"videoId\"\n      ref=\"iframeVideo\"\n      :src=\"srcVideo\"\n      :title=\"t('Video')\"\n      width=\"500\"\n      height=\"281\"\n      style=\"z-index: 1\"\n      ebkitallowfullscreen=\"true\"\n      mozallowfullscreen=\"true\"\n      allowfullscreen=\"true\"\n      allow=\"fullscreen; autoplay\"\n      referrerpolicy=\"no-referrer-when-downgrade\"\n    ></iframe>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport SnackBar from \"../../SnackBar.vue\";\nimport { computed, onMounted, useTemplateRef } from \"vue\";\n\nimport { usePlayerLogicProgress } from \"../../../composable/player/usePlayerLogicProgress\";\nimport { videoApi } from \"../../../../api/videoApi\";\n\n//Props \nconst props = defineProps({\n  videoId: { type: String, required: true },\n  podcastId: { type: Number, required: false, default: null },\n  responsive: { default: false, type: Boolean },\n})\n\n//Data\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst { onTimeUpdateProgress, setDownloadId } = usePlayerLogicProgress();\n\n//Computed\nconst srcVideo = computed(() => {\n  return (\n    \"//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/\" +\n    props.videoId +\n    \"/sound/yes/autoplay/1\"\n  );\n});\n\nonMounted(async()=>{\n  if (undefined === props.videoId) {\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t(\"Podcast play error\"));\n  }\n\n  // #14118 cf https://support.digiteka.com/fr/API/Iframe#h-3-r%C3%A9ception-des-%C3%A9v%C3%A9nements-du-player\n  window.addEventListener('message', event => {\n    if (typeof event.data !== 'string') {\n      return;\n    }\n\n    const data = Object.fromEntries(event.data.split('&').map(d => d.split('=')));\n    if (data.event === 'timeupdate') {\n      onTimeUpdateProgress(parseFloat(data.time));\n    }\n  });\n\n  if (props.podcastId !== undefined) {\n    const downloadId = await videoApi.watchPodcast(props.podcastId);\n    setDownloadId(downloadId);\n  }\n})\n</script>\n\n<style scoped lang=\"scss\">\n@use \"../../../../style/videoPlayer\";\n</style>\n"],"mappings":";;;;;;;;;;;AAOA,eAAe,aAAa,WAAoC;CAC5D,OAAOA,mBAAW,UAAkB;EAChC,KAAK,UAAU;EACf,MAAM,iBAAiB;CAC3B,CAAC;AACL;AAEA,IAAa,WAAW,EACpB,aACJ;;;;;;;;;;;;;;;;;;;;;;ECaA,MAAM,QAAQ;EAOd,MAAM,cAAc,eAAe,UAAU;EAG7C,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,EAAE,sBAAsB,kBAAkB,uBAAuB;EAGvE,MAAM,WAAW,eAAe;GAC9B,OACE,qFACA,MAAM,UACN;EAEJ,CAAC;EAED,UAAU,YAAS;GACjB,IAAI,KAAA,MAAc,MAAM,SACtB,CAAC,aAAa,MAAA,CAAwC,KAAK,EAAE,oBAAoB,CAAC;GAIpF,OAAO,iBAAiB,YAAW,UAAS;IAC1C,IAAI,OAAO,MAAM,SAAS,UACxB;IAGF,MAAM,OAAO,OAAO,YAAY,MAAM,KAAK,MAAM,GAAG,CAAC,CAAC,KAAI,MAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IAC5E,IAAI,KAAK,UAAU,cACjB,qBAAqB,WAAW,KAAK,IAAI,CAAC;GAE9C,CAAC;GAED,IAAI,MAAM,cAAc,KAAA,GAAW;IACjC,MAAM,aAAa,MAAM,SAAS,aAAa,MAAM,SAAS;IAC9D,cAAc,UAAU;GAC1B;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;CCvEC,OAAAC,UAAA,GAAAC,mBAgBM,OAAA,EAhBA,OAAKC,eAAE,OAAA,aAAU,6BAAA,EAAA,EAAA,GAEb,CAAA,OAAA,WADRF,UAAA,GAAAC,mBAaU,UAAA;;EAXR,KAAI;EACH,KAAK,OAAA;EACL,OAAO,OAAA,EAAC,OAAA;EACT,OAAM;EACN,QAAO;EACP,OAAA,EAAA,WAAA,IAAA;EACA,sBAAqB;EACrB,oBAAmB;EACnB,iBAAgB;EAChB,OAAM;EACN,gBAAe;CAEjB,GAAA,MAAA,GAAA,UAAA,KAAAE,mBAAA,QAAA,IAAA,GAAAC,YAAkD,OAAA,aAAA;EAAxC,KAAI;EAAW,UAAS"}

package/dist/PlayerVideoDigiteka-B6qODy7b.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideoDigiteka-B6qODy7b.mjs","names":["classicApi","_openBlock","_createElementBlock","_normalizeClass","_createCommentVNode","_createVNode","_sfc_main"],"sources":["../src/api/videoApi.ts","../src/components/misc/player/video/PlayerVideoDigiteka.vue","../src/components/misc/player/video/PlayerVideoDigiteka.vue"],"sourcesContent":["import { ModuleApi } from \"./apiConnection\";\nimport classicApi from \"./classicApi\";\n\n/**\n * Request the download ID from a video\n * @param podcastId The id of the podcast to be watched\n */\nasync function watchPodcast(podcastId: number): Promise<string> {\n    return classicApi.fetchData<string>({\n        api: ModuleApi.DEFAULT,\n        path: 'video/watch/' + podcastId\n    });\n}\n\nexport const videoApi = {\n    watchPodcast\n}\n","<template>\n  <div :class=\"responsive ? 'video-responsive-wrapper' : ''\">\n    <iframe\n      v-if=\"videoId\"\n      ref=\"iframeVideo\"\n      :src=\"srcVideo\"\n      :title=\"t('Video')\"\n      width=\"500\"\n      height=\"281\"\n      style=\"z-index: 1\"\n      ebkitallowfullscreen=\"true\"\n      mozallowfullscreen=\"true\"\n      allowfullscreen=\"true\"\n      allow=\"fullscreen; autoplay\"\n      referrerpolicy=\"no-referrer-when-downgrade\"\n    ></iframe>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport SnackBar from \"../../SnackBar.vue\";\nimport { computed, onMounted, useTemplateRef } from \"vue\";\n\nimport { usePlayerLogicProgress } from \"../../../composable/player/usePlayerLogicProgress\";\nimport { videoApi } from \"../../../../api/videoApi\";\n\n//Props \nconst props = defineProps({\n  videoId: { type: String, required: true },\n  podcastId: { type: Number, required: false, default: null },\n  responsive: { default: false, type: Boolean },\n})\n\n//Data\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst { onTimeUpdateProgress, setDownloadId } = usePlayerLogicProgress();\n\n//Computed\nconst srcVideo = computed(() => {\n  return (\n    \"//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/\" +\n    props.videoId +\n    \"/sound/yes/autoplay/1\"\n  );\n});\n\nonMounted(async()=>{\n  if (undefined === props.videoId) {\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t(\"Podcast play error\"));\n  }\n\n  // #14118 cf https://support.digiteka.com/fr/API/Iframe#h-3-r%C3%A9ception-des-%C3%A9v%C3%A9nements-du-player\n  window.addEventListener('message', event => {\n    if (typeof event.data !== 'string') {\n      return;\n    }\n\n    const data = Object.fromEntries(event.data.split('&').map(d => d.split('=')));\n    if (data.event === 'timeupdate') {\n      onTimeUpdateProgress(parseFloat(data.time));\n    }\n  });\n\n  if (props.podcastId !== undefined) {\n    const downloadId = await videoApi.watchPodcast(props.podcastId);\n    setDownloadId(downloadId);\n  }\n})\n</script>\n\n<style scoped lang=\"scss\">\n@use \"../../../../style/videoPlayer\";\n</style>\n","<template>\n  <div :class=\"responsive ? 'video-responsive-wrapper' : ''\">\n    <iframe\n      v-if=\"videoId\"\n      ref=\"iframeVideo\"\n      :src=\"srcVideo\"\n      :title=\"t('Video')\"\n      width=\"500\"\n      height=\"281\"\n      style=\"z-index: 1\"\n      ebkitallowfullscreen=\"true\"\n      mozallowfullscreen=\"true\"\n      allowfullscreen=\"true\"\n      allow=\"fullscreen; autoplay\"\n      referrerpolicy=\"no-referrer-when-downgrade\"\n    ></iframe>\n    <SnackBar ref=\"snackbar\" position=\"bottom-left\" />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useI18n } from \"vue-i18n\";\nimport SnackBar from \"../../SnackBar.vue\";\nimport { computed, onMounted, useTemplateRef } from \"vue\";\n\nimport { usePlayerLogicProgress } from \"../../../composable/player/usePlayerLogicProgress\";\nimport { videoApi } from \"../../../../api/videoApi\";\n\n//Props \nconst props = defineProps({\n  videoId: { type: String, required: true },\n  podcastId: { type: Number, required: false, default: null },\n  responsive: { default: false, type: Boolean },\n})\n\n//Data\nconst snackBarRef = useTemplateRef('snackbar');\n\n//Composables\nconst { t } = useI18n();\nconst { onTimeUpdateProgress, setDownloadId } = usePlayerLogicProgress();\n\n//Computed\nconst srcVideo = computed(() => {\n  return (\n    \"//www.ultimedia.com/deliver/generic/iframe/mdtk/01009833/zone/1/showtitle/1/src/\" +\n    props.videoId +\n    \"/sound/yes/autoplay/1\"\n  );\n});\n\nonMounted(async()=>{\n  if (undefined === props.videoId) {\n    (snackBarRef?.value as InstanceType<typeof SnackBar>).open(t(\"Podcast play error\"));\n  }\n\n  // #14118 cf https://support.digiteka.com/fr/API/Iframe#h-3-r%C3%A9ception-des-%C3%A9v%C3%A9nements-du-player\n  window.addEventListener('message', event => {\n    if (typeof event.data !== 'string') {\n      return;\n    }\n\n    const data = Object.fromEntries(event.data.split('&').map(d => d.split('=')));\n    if (data.event === 'timeupdate') {\n      onTimeUpdateProgress(parseFloat(data.time));\n    }\n  });\n\n  if (props.podcastId !== undefined) {\n    const downloadId = await videoApi.watchPodcast(props.podcastId);\n    setDownloadId(downloadId);\n  }\n})\n</script>\n\n<style scoped lang=\"scss\">\n@use \"../../../../style/videoPlayer\";\n</style>\n"],"mappings":";;;;;;;;;;;AAOA,eAAe,aAAa,WAAoC;CAC5D,OAAOA,mBAAW,UAAkB;EAChC,KAAK,UAAU;EACf,MAAM,iBAAiB;CAC3B,CAAC;AACL;AAEA,IAAa,WAAW,EACpB,aACJ;;;;;;;;;;;;;;;;;;;;;;ECaA,MAAM,QAAQ;EAOd,MAAM,cAAc,eAAe,UAAU;EAG7C,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,EAAE,sBAAsB,kBAAkB,uBAAuB;EAGvE,MAAM,WAAW,eAAe;GAC9B,OACE,qFACA,MAAM,UACN;EAEJ,CAAC;EAED,UAAU,YAAS;GACjB,IAAI,KAAA,MAAc,MAAM,SACtB,CAAC,aAAa,MAAA,CAAwC,KAAK,EAAE,oBAAoB,CAAC;GAIpF,OAAO,iBAAiB,YAAW,UAAS;IAC1C,IAAI,OAAO,MAAM,SAAS,UACxB;IAGF,MAAM,OAAO,OAAO,YAAY,MAAM,KAAK,MAAM,GAAG,CAAC,CAAC,KAAI,MAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IAC5E,IAAI,KAAK,UAAU,cACjB,qBAAqB,WAAW,KAAK,IAAI,CAAC;GAE9C,CAAC;GAED,IAAI,MAAM,cAAc,KAAA,GAAW;IACjC,MAAM,aAAa,MAAM,SAAS,aAAa,MAAM,SAAS;IAC9D,cAAc,UAAU;GAC1B;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;CCvEC,OAAAC,UAAA,GAAAC,mBAgBM,OAAA,EAhBA,OAAKC,eAAE,OAAA,aAAU,6BAAA,EAAA,EAAA,GAEb,CAAA,OAAA,WADRF,UAAA,GAAAC,mBAaU,UAAA;;EAXR,KAAI;EACH,KAAK,OAAA;EACL,OAAO,OAAA,EAAC,OAAA;EACT,OAAM;EACN,QAAO;EACP,OAAA,EAAA,WAAA,IAAA;EACA,sBAAqB;EACrB,oBAAmB;EACnB,iBAAgB;EAChB,OAAM;EACN,gBAAe;CAEjB,GAAA,MAAA,GAAA,UAAA,KAAAE,mBAAA,QAAA,IAAA,GAAAC,YAAkD,OAAA,aAAA;EAAxC,KAAI;EAAW,UAAS"}

package/dist/{PlayerVideoDigiteka-DZIqqN8a.mjs → PlayerVideoDigiteka-Dxx63XHI.mjs}

@@ -1,7 +1,7 @@
-import { E as e, t } from "./classicApi-pmODlqv5.mjs";
+import { D as e, t } from "./classicApi-CGipMqf7.mjs";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.mjs";
 import { t as r } from "./SnackBar-BL-mLRun.mjs";
-import { t as i } from "./usePlayerLogicProgress-C2L7cMdd.mjs";
+import { t as i } from "./usePlayerLogicProgress-BybmSAcs.mjs";
 import { computed as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, normalizeClass as u, onMounted as d, openBlock as f, unref as p, useTemplateRef as m } from "vue";
 import { useI18n as h } from "vue-i18n";
 //#region src/api/videoApi.ts

package/dist/PlayerVideoHls-BoAbvi2b.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideoHls-BoAbvi2b.mjs","names":["_openBlock","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","_sfc_main"],"sources":["../src/components/misc/player/video/PlayerVideoHls.vue","../src/components/misc/player/video/PlayerVideoHls.vue"],"sourcesContent":["<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    ></video>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  player.value.on(\"error\", (error: any) => {\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async () => {\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n","<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    ></video>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  player.value.on(\"error\", (error: any) => {\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async () => {\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PlayerVideoHls-BsHaaJB-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideoHls-BsHaaJB-.mjs","names":["_openBlock","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","_sfc_main"],"sources":["../src/components/misc/player/video/PlayerVideoHls.vue","../src/components/misc/player/video/PlayerVideoHls.vue"],"sourcesContent":["<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    />\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  player.value.on(\"error\", (error: any) => {\n    console.error(error);\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async error => {\n    console.error(error);\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n","<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    />\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  player.value.on(\"error\", (error: any) => {\n    console.error(error);\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async error => {\n    console.error(error);\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;EAoBA,IAAI,KAAA,MAAc,QAAQ,UAAU,oBAAoB,GACtD,QAAQ,eAAe,sBAAsB,kBAAkB;EAOjE,MAAM,QAAQ;EAOd,MAAM,YAAY,IAAI,EAAE;EACxB,MAAM,cAAc,IAAI,KAAK;EAC7B,MAAM,SAAyC,IAAI,KAAK;EACxD,MAAM,UAAU,IAAI,KAAK;EACzB,MAAM,WAAW,IAAI,KAAK;EAC1B,MAAM,gBAAgE,IAAI,KAAA,CAAS;EACnF,MAAM,kBAAkB,eAAe,cAAc;EAIrD,MAAM,EAAE,MAAM,QAAQ;EACtB,MAAM,EAAE,YAAY,oBAAoB,sBAAsB,yBAAwB,uBAAuB;EAC7G,MAAM,YAAY,aAAa;EAC/B,MAAM,cAAc,eAAe;EAKnC,MAAM,eAAe,eAAe;GAClC,OAAO,iBAAiB;EAC1B,CAAC;EACD,MAAM,eAAe,eAAe;GAClC,OAAO;IACL,UAAU;IACV,UAAU;IACV,QAAQ;IACR,SAAS,CACP;KACE,KAAK,MAAM;KACX,MAAM;IACR,CACF;IACA,OAAO;KACL,KAAK,EACH,gBAAgB,CAAC,QAAQ,QAAQ,UACnC;KACA,mBAAmB;KACnB,mBAAmB;IACrB;GACF;EACF,CAAC;EAGD,gBAAc;GACZ,YAAY,yBAAyB,MAAM,MAAM;GACjD,YAAY,QACV,OAAO,aAAa,MAAM,YAAY,+BAA+B,KACrE,CAAC,UAAU,UAAU,SAAS,SAAS;GACzC,SAAS;EACX,CAAC;EAED,kBAAgB;GACd,IAAI,QAAQ,OACV,SAAS;EAEb,CAAC;EAID,SAAS,wBAAwB;GAC/B,SAAS,QAAQ;GACjB,cAAc,QAAQ,iBAAiB;IACrC,IAAI,SAAS,OACX;IAEF,WAAW;IACX,SAAS;GACX,GAAG,IAAK;EACV;EACA,eAAe,WAA0B;GACvC,aAAa,cAAc,KAAK;GAChC,sBAAsB;GACtB,MAAM,mBAAmB;GACzB,IAAI,YAAY,OAAO;IACrB,YAAY;IACZ;GACF;GACA,IAAI,MAAM,aAAa,UAAU,UAAU,aAAa;IACtD,MAAM,wBAAwB,YAAiB;KAC7C,QAAQ,cAAc,QAAwB;MAC5C,IAAI,iBAAiB,iBAAiB,YAAU,UAAU,UAAU,WAAW;KACjF;KACA,OAAO;IACT;IACA,QAAQ,IAAI,IAAI,UAAU,oBAAoB;GAChD;GACA,OAAO,QAAQ,QACb,SAAS,eAAe,mBAAmB,GAC3C,aAAa,aACP;IACJ,OAAO,MAAM,mBAAmB,EAAE,uBAAuB,KAAK,CAAC;IAC/D,UAAU,QAAQ;IAClB,QAAQ,QAAQ;GAClB,CACF;GAEA,OAAO,MAAM,GAAG,UAAU,UAAe;IACvC,QAAQ,MAAM,KAAK;IACnB,SAAS;IACT,IAAI,MAAM,aAAa,SAAS,KAAK,GACnC,UAAU,QAAQ,EAAE,sBAAsB;SAE1C,UAAU,QAAQ,EAAE,oBAAoB;GAE5C,CAAC;GACD,OAAO,MAAM,GAAG,iBAAiB;IAC/B,YAAY,qBAAqB,OAAO,OAAO,YAAY,KAAK,CAAC;GACnE,CAAC;GACD,OAAO,MAAM,GAAG,eAAe;IAC7B,SAAS,QAAQ;GACnB,CAAC;GACD,OAAO,MAAM,GAAG,oBAAoB;IAClC,aAAa,cAAc,KAAK;IAChC,sBAAsB;IACtB,kBAAkB;GACpB,CAAC;GACD,OAAO,MAAM,GAAG,iBAAiB;IAC/B,YAAY,qBAAqB,OAAO,OAAO,YAAY,KAAK,CAAC;GACnE,CAAC;EACH;EAEA,eAAe,cAA6B;GAC1C,aAAa,MAAM,yBAAyB;IAC1C,MAAM,cAAc,aAAa,MAAM,KAAK;IAC5C,IAAI,gBAAgB,KAAA,GAClB,YACG,WAAW;KACV,UAAU,QAAQ;KAClB,QAAQ,QAAQ;IAClB,CAAC,CAAA,CACA,YAAY;KACX,QAAQ,QAAQ;IAClB,CAAC;GAEP;GACA,aAAa,MAAM,UAAU,OAAM,UAAS;IAC1C,QAAQ,MAAM,KAAK;IACnB,SAAS;IACT,UAAU,QAAQ,EAAE,oBAAoB;GAC1C;GACA,aAAa,MAAM,eAAe,YAAY;IAC5C,aAAa,cAAc,KAAK;IAChC,sBAAsB;IACtB,kBAAkB;GACpB;GACA,aAAa,MAAM,UAAU,YAAY;IACvC,SAAS,QAAQ;GACnB;GACA,aAAa,MAAM,YAAY,YAAY;IACzC,YAAY,qBAAqB,aAAa,MAAM,WAAW;GACjE;GACA,IAAI,MAAM,aAAa,UAAU,UAAU,aACzC,aAAa,MAAM,MAAM,MAAM,SAAS,kBAAgB,UAAU,UAAU;QAE5E,aAAa,MAAM,MAAM,MAAM;GAEjC,aAAa,MAAM,MAAM,MAAM;EACjC;EAEA,SAAS,aAAmB;GAC1B,IAAI,YAAY,OAAO;IACrB,aAAa,MAAM,MAAM;IACzB,aAAa,MAAM,gBAAgB,KAAK;IACxC,aAAa,MAAM,KAAK;IACxB;GACF;GACA,IAAI,OAAO,OAAO;IAChB,OAAO,MAAM,QAAQ;IAErB,MAAM,eAAe,SAAS,eAAe,kBAAkB;IAC/D,IAAI,cAAc;KAChB,MAAM,QAAQ,SAAS,cAAc,OAAO;KAC5C,MAAM,KAAK;KACX,MAAM,YAAY;KAClB,MAAM,UAAU;KAChB,MAAM,aAAa,eAAe,MAAM;KACxC,aAAa,YAAY,KAAK;IAChC;GACF;EACF;EACA,SAAS,WAAiB;GACxB,aAAa,cAAc,KAAK;GAChC,UAAU,QAAQ;GAClB,WAAW;GACX,QAAQ,QAAQ;GAChB,qBAAqB;EACvB;EACA,SAAS,oBAA0B;GACjC,IAAI,CAAC,WAAW,OACd;GAEF,MAAM,cAAa,OAAO,OAAO,YAAY,KAAK,aAAa,MAAM;GACrE,qBAAqB,WAAW;EAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CC9NiC,OAAM;;;CAEjC,IAAG;CACH,KAAI;CACJ,OAAM;CACN,aAAA;;;CAVJ,OAAAA,UAAA,GAAAC,mBAYM,OAAA;EAXJ,IAAG;EACH,OAAKC,eAAA,CAAC,gBACE,OAAA,aAAU,6BAAA,EAAA,CAAA;CAEP,GAAA,CAAA,OAAA,UAAU,UAArBF,UAAA,GAAAC,mBAA2E,OAA3E,YAA2EE,gBAAlB,OAAA,SAAS,GAAA,CAAA,KAAAC,mBAAA,QAAA,IAAA,GAClEC,mBAKE,SALF,YAKE,MAAA,GAAA,CAAA,GAAA,CAAA"}

package/dist/PlayerVideoHls-C0ddorEn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideoHls-C0ddorEn.mjs","names":["_openBlock","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","_sfc_main"],"sources":["../src/components/misc/player/video/PlayerVideoHls.vue","../src/components/misc/player/video/PlayerVideoHls.vue"],"sourcesContent":["<template>\n    <div\n        id=\"player-video-hls\"\n        class=\"video-player\"\n        :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n    >\n        <div v-if=\"errorPlay.length\" class=\"video-live-error\">\n            {{ errorPlay }}\n        </div>\n        <video\n            id=\"video-element-hls\"\n            ref=\"videoelement\"\n            class=\"video-js\"\n            playsinline\n        />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n    videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    hlsUrl: { default: \"\", type: String },\n    responsive: { default: false, type: Boolean },\n    isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n    return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n    return {\n        autoplay: true,\n        controls: true,\n        liveui: true,\n        sources: [\n            {\n                src: props.hlsUrl,\n                type: \"application/x-mpegURL\",\n            },\n        ],\n        html5: {\n            vhs: {\n                overrideNative: !videojs.browser.IS_SAFARI,\n            },\n            nativeAudioTracks: false,\n            nativeVideoTracks: false,\n        },\n    };\n});\n\n\nonMounted(()=>{\n    playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n    useVideoSrc.value = videojs.browser.IS_SAFARI || videojs.browser.IS_IOS;\n    playLive();\n})\n\nonUnmounted(()=>{\n    if (playing.value) {\n        stopLive();\n    }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n    isPaused.value = false;\n    stalledTimout.value = setTimeout(() => {\n        if (isPaused.value) {\n            return;\n        }\n        videoClean();\n        playLive();\n    }, 15000);\n}\nasync function playLive(): Promise<void> {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    await initLiveDownloadId();\n    if (useVideoSrc.value) {\n        playLiveIos();\n        return;\n    }\n    if (props.isSecured && authStore.authParam.accessToken) {\n        const globalXhrRequestHook = (options: { beforeSend?: (xhr: XMLHttpRequest) => void }) => {\n            options.beforeSend = (xhr: XMLHttpRequest) => {\n                xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n            };\n            return options;\n        };\n        videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n    }\n    player.value = videojs(\n        document.getElementById(\"video-element-hls\") as Element,\n        videoOptions.value,\n        () => {\n            player.value.qualitySelectorHls({ displayCurrentQuality: true });\n            errorPlay.value = \"\";\n            playing.value = true;\n        },\n    );\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    player.value.on(\"error\", (error: any) => {\n        console.error(error);\n        stopLive();\n        if (error.description?.includes(\"403\")) {\n            errorPlay.value = t(\"Video is unavailable\");\n        } else {\n            errorPlay.value = t(\"Podcast play error\");\n        }\n    });\n    player.value.on(\"seeking\", () => {\n        playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n    });\n    player.value.on(\"pause\", () => {\n        isPaused.value = true;\n    });\n    player.value.on(\"timeupdate\", () => {\n        clearTimeout(stalledTimout.value);\n        definedStalledTimeout();\n        onTimeUpdateVideo();\n    });\n    player.value.on(\"seeking\", () => {\n        playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n    });\n}\n\nasync function playLiveIos(): Promise<void> {\n    videoElement.value.onloadedmetadata = () => {\n        const playPromise = videoElement.value.play();\n        if (playPromise !== undefined) {\n            playPromise\n                .then(() => {\n                    errorPlay.value = \"\";\n                    playing.value = true;\n                })\n                .catch(() => {\n                    playing.value = false;\n                });\n        }\n    };\n    videoElement.value.onerror = async () => {\n        console.error(videoElement.value.error);\n        stopLive();\n        errorPlay.value = t(\"Podcast play error\");\n    };\n    videoElement.value.ontimeupdate = async () => {\n        clearTimeout(stalledTimout.value);\n        definedStalledTimeout();\n        onTimeUpdateVideo();\n    };\n    videoElement.value.onpause = async () => {\n        isPaused.value = true;\n    };\n    videoElement.value.onseeking = async () => {\n        playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n    };\n    const separator = props.hlsUrl.includes(\"?\") ? \"&\" : \"?\";\n    videoElement.value.src = props.isSecured && authStore.authParam.accessToken\n        ? `${props.hlsUrl}${separator}access_token=${authStore.authParam.accessToken}`\n        : props.hlsUrl;\n}\n\nfunction videoClean(): void {\n    if (useVideoSrc.value) {\n        videoElement.value.pause();\n        videoElement.value.removeAttribute(\"src\");\n        videoElement.value.load();\n        return;\n    }\n    if (player.value) {\n        player.value.dispose();\n        //Redraw\n        const video_parent = document.getElementById(\"player-video-hls\");\n        if (video_parent) {\n            const video = document.createElement(\"video\");\n            video.id = \"video-element-hls\";\n            video.className = \"video-js\";\n            video.preload = \"auto\";\n            video.setAttribute(\"playsinline\", \"true\");\n            video_parent.appendChild(video);\n        }\n    }\n}\nfunction stopLive(): void {\n    clearTimeout(stalledTimout.value);\n    errorPlay.value = \"\";\n    videoClean();\n    playing.value = false;\n    endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n    if (!downloadId.value) {\n        return;\n    }\n    const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n    onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n","<template>\n    <div\n        id=\"player-video-hls\"\n        class=\"video-player\"\n        :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n    >\n        <div v-if=\"errorPlay.length\" class=\"video-live-error\">\n            {{ errorPlay }}\n        </div>\n        <video\n            id=\"video-element-hls\"\n            ref=\"videoelement\"\n            class=\"video-js\"\n            playsinline\n        />\n    </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n    videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n    hlsUrl: { default: \"\", type: String },\n    responsive: { default: false, type: Boolean },\n    isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n    return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n    return {\n        autoplay: true,\n        controls: true,\n        liveui: true,\n        sources: [\n            {\n                src: props.hlsUrl,\n                type: \"application/x-mpegURL\",\n            },\n        ],\n        html5: {\n            vhs: {\n                overrideNative: !videojs.browser.IS_SAFARI,\n            },\n            nativeAudioTracks: false,\n            nativeVideoTracks: false,\n        },\n    };\n});\n\n\nonMounted(()=>{\n    playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n    useVideoSrc.value = videojs.browser.IS_SAFARI || videojs.browser.IS_IOS;\n    playLive();\n})\n\nonUnmounted(()=>{\n    if (playing.value) {\n        stopLive();\n    }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n    isPaused.value = false;\n    stalledTimout.value = setTimeout(() => {\n        if (isPaused.value) {\n            return;\n        }\n        videoClean();\n        playLive();\n    }, 15000);\n}\nasync function playLive(): Promise<void> {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    await initLiveDownloadId();\n    if (useVideoSrc.value) {\n        playLiveIos();\n        return;\n    }\n    if (props.isSecured && authStore.authParam.accessToken) {\n        const globalXhrRequestHook = (options: { beforeSend?: (xhr: XMLHttpRequest) => void }) => {\n            options.beforeSend = (xhr: XMLHttpRequest) => {\n                xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n            };\n            return options;\n        };\n        videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n    }\n    player.value = videojs(\n        document.getElementById(\"video-element-hls\") as Element,\n        videoOptions.value,\n        () => {\n            player.value.qualitySelectorHls({ displayCurrentQuality: true });\n            errorPlay.value = \"\";\n            playing.value = true;\n        },\n    );\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    player.value.on(\"error\", (error: any) => {\n        console.error(error);\n        stopLive();\n        if (error.description?.includes(\"403\")) {\n            errorPlay.value = t(\"Video is unavailable\");\n        } else {\n            errorPlay.value = t(\"Podcast play error\");\n        }\n    });\n    player.value.on(\"seeking\", () => {\n        playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n    });\n    player.value.on(\"pause\", () => {\n        isPaused.value = true;\n    });\n    player.value.on(\"timeupdate\", () => {\n        clearTimeout(stalledTimout.value);\n        definedStalledTimeout();\n        onTimeUpdateVideo();\n    });\n    player.value.on(\"seeking\", () => {\n        playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n    });\n}\n\nasync function playLiveIos(): Promise<void> {\n    videoElement.value.onloadedmetadata = () => {\n        const playPromise = videoElement.value.play();\n        if (playPromise !== undefined) {\n            playPromise\n                .then(() => {\n                    errorPlay.value = \"\";\n                    playing.value = true;\n                })\n                .catch(() => {\n                    playing.value = false;\n                });\n        }\n    };\n    videoElement.value.onerror = async () => {\n        console.error(videoElement.value.error);\n        stopLive();\n        errorPlay.value = t(\"Podcast play error\");\n    };\n    videoElement.value.ontimeupdate = async () => {\n        clearTimeout(stalledTimout.value);\n        definedStalledTimeout();\n        onTimeUpdateVideo();\n    };\n    videoElement.value.onpause = async () => {\n        isPaused.value = true;\n    };\n    videoElement.value.onseeking = async () => {\n        playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n    };\n    const separator = props.hlsUrl.includes(\"?\") ? \"&\" : \"?\";\n    videoElement.value.src = props.isSecured && authStore.authParam.accessToken\n        ? `${props.hlsUrl}${separator}access_token=${authStore.authParam.accessToken}`\n        : props.hlsUrl;\n}\n\nfunction videoClean(): void {\n    if (useVideoSrc.value) {\n        videoElement.value.pause();\n        videoElement.value.removeAttribute(\"src\");\n        videoElement.value.load();\n        return;\n    }\n    if (player.value) {\n        player.value.dispose();\n        //Redraw\n        const video_parent = document.getElementById(\"player-video-hls\");\n        if (video_parent) {\n            const video = document.createElement(\"video\");\n            video.id = \"video-element-hls\";\n            video.className = \"video-js\";\n            video.preload = \"auto\";\n            video.setAttribute(\"playsinline\", \"true\");\n            video_parent.appendChild(video);\n        }\n    }\n}\nfunction stopLive(): void {\n    clearTimeout(stalledTimout.value);\n    errorPlay.value = \"\";\n    videoClean();\n    playing.value = false;\n    endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n    if (!downloadId.value) {\n        return;\n    }\n    const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n    onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PlayerVideoHls-DBODDRmV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideoHls-DBODDRmV.mjs","names":["_openBlock","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","_sfc_main"],"sources":["../src/components/misc/player/video/PlayerVideoHls.vue","../src/components/misc/player/video/PlayerVideoHls.vue"],"sourcesContent":["<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    ></video>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  player.value.on(\"error\", (error: any) => {\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async () => {\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n","<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    ></video>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  player.value.on(\"error\", (error: any) => {\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async () => {\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/PlayerVideoHls-DVNHm_O2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayerVideoHls-DVNHm_O2.mjs","names":["_openBlock","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_createElementVNode","_sfc_main"],"sources":["../src/components/misc/player/video/PlayerVideoHls.vue","../src/components/misc/player/video/PlayerVideoHls.vue"],"sourcesContent":["<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    />\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  player.value.on(\"error\", (error: any) => {\n    console.error(error);\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async () => {\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n","<template>\n  <div\n    id=\"player-video-hls\"\n    class=\"video-player\"\n    :class=\"responsive ? 'video-responsive-wrapper' : ''\"\n  >\n    <div v-if=\"errorPlay.length\" class=\"video-live-error\">{{ errorPlay }}</div>\n    <video\n      id=\"video-element-hls\"\n      ref=\"videoelement\"\n      class=\"video-js\"\n      playsinline\n    />\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { usePlayerStore } from \"../../../../stores/PlayerStore\";\nimport {usePlayerLogicProgress} from \"../../../composable/player/usePlayerLogicProgress\";\nimport videojs, { VideoJsPlayer } from \"video.js\";\nimport qualitySelectorHls from \"videojs-quality-selector-hls\";\nif (undefined === videojs.getPlugin(\"qualitySelectorHls\")) {\n  videojs.registerPlugin(\"qualitySelectorHls\", qualitySelectorHls);\n}\nimport { computed, onMounted, onUnmounted, Ref, ref, useTemplateRef } from \"vue\";\nimport { useAuthStore } from \"../../../../stores/AuthStore\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  hlsUrl: { default: \"\", type: String },\n  responsive: { default: false, type: Boolean },\n  isSecured: { default: true, type: Boolean },\n})\n\n//Data\nconst errorPlay = ref(\"\");\nconst useVideoSrc = ref(false);\nconst player: Ref<VideoJsPlayer | undefined> = ref(false);\nconst playing = ref(false);\nconst isPaused = ref(false);\nconst stalledTimout: Ref<ReturnType<typeof setTimeout> | undefined> = ref(undefined);\nconst videoElementRef = useTemplateRef('videoelement');\n\n\n//Composables\nconst { t } = useI18n();\nconst { downloadId, initLiveDownloadId, onTimeUpdateProgress, endListeningProgress} = usePlayerLogicProgress();\nconst authStore = useAuthStore();\nconst playerStore = usePlayerStore();\n\n\n\n//Computed\nconst videoElement = computed(() => {\n  return videoElementRef?.value as HTMLVideoElement;\n});\nconst videoOptions = computed(() => {\n  return {\n    autoplay: true,\n    controls: true,\n    liveui: true,\n    sources: [\n      {\n        src: props.hlsUrl,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    html5: {\n      vhs: {\n        overrideNative: !videojs.browser.IS_SAFARI,\n      },\n      nativeAudioTracks: false,\n      nativeVideoTracks: false,\n    },\n  };\n});\n\n\nonMounted(()=>{\n  playerStore.playerUpdatePlayerHlsUrl(props.hlsUrl);\n  useVideoSrc.value =\n    \"\" !== videoElement.value.canPlayType(\"application/vnd.apple.mpegurl\") &&\n    !navigator.userAgent.includes(\"Android\");\n  playLive();\n})\n\nonUnmounted(()=>{\n  if (playing.value) {\n    stopLive();\n  }\n})\n\n\n//Methods\nfunction definedStalledTimeout() {\n  isPaused.value = false;\n  stalledTimout.value = setTimeout(() => {\n    if (isPaused.value) {\n      return;\n    }\n    videoClean();\n    playLive();\n  }, 15000);\n}\nasync function playLive(): Promise<void> {\n  clearTimeout(stalledTimout.value);\n  definedStalledTimeout();\n  await initLiveDownloadId();\n  if (useVideoSrc.value) {\n    playLiveIos();\n    return;\n  }\n  if (props.isSecured && authStore.authParam.accessToken) {\n    const globalXhrRequestHook = (options: any) => {\n      options.beforeSend = (xhr: XMLHttpRequest) => {\n        xhr.setRequestHeader(\"Authorization\", \"Bearer \"+authStore.authParam.accessToken);\n      };\n      return options;\n    };\n    videojs.Vhs.xhr.onRequest(globalXhrRequestHook);\n  }\n  player.value = videojs(\n    document.getElementById(\"video-element-hls\") as Element,\n    videoOptions.value,\n    () => {\n      player.value.qualitySelectorHls({ displayCurrentQuality: true });\n      errorPlay.value = \"\";\n      playing.value = true;\n    },\n  );\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  player.value.on(\"error\", (error: any) => {\n    console.error(error);\n    stopLive();\n    if (error.description?.includes(\"403\")) {\n      errorPlay.value = t(\"Video is unavailable\");\n    } else {\n      errorPlay.value = t(\"Podcast play error\");\n    }\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n  player.value.on(\"pause\", () => {\n    isPaused.value = true;\n  });\n  player.value.on(\"timeupdate\", () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  });\n  player.value.on(\"seeking\", () => {\n    playerStore.playerUpdateSeekTime(player.value?.currentTime() ?? 0);\n  });\n}\n\nasync function playLiveIos(): Promise<void> {\n  videoElement.value.onloadedmetadata = () => {\n    const playPromise = videoElement.value.play();\n    if (playPromise !== undefined) {\n      playPromise\n        .then(() => {\n          errorPlay.value = \"\";\n          playing.value = true;\n        })\n        .catch(() => {\n          playing.value = false;\n        });\n    }\n  };\n  videoElement.value.onerror = async () => {\n    stopLive();\n    errorPlay.value = t(\"Podcast play error\");\n  };\n  videoElement.value.ontimeupdate = async () => {\n    clearTimeout(stalledTimout.value);\n    definedStalledTimeout();\n    onTimeUpdateVideo();\n  };\n  videoElement.value.onpause = async () => {\n    isPaused.value = true;\n  };\n  videoElement.value.onseeking = async () => {\n    playerStore.playerUpdateSeekTime(videoElement.value.currentTime);\n  };\n  if (props.isSecured && authStore.authParam.accessToken) {\n    videoElement.value.src = props.hlsUrl + \"access_token=\"+authStore.authParam.accessToken;\n  }else{\n    videoElement.value.src = props.hlsUrl;\n  }\n  videoElement.value.src = props.hlsUrl;\n}\n\nfunction videoClean(): void {\n  if (useVideoSrc.value) {\n    videoElement.value.pause();\n    videoElement.value.removeAttribute(\"src\");\n    videoElement.value.load();\n    return;\n  }\n  if (player.value) {\n    player.value.dispose();\n    //Redraw\n    const video_parent = document.getElementById(\"player-video-hls\");\n    if (video_parent) {\n      const video = document.createElement(\"video\");\n      video.id = \"video-element-hls\";\n      video.className = \"video-js\";\n      video.preload = \"auto\";\n      video.setAttribute(\"playsinline\", \"true\");\n      video_parent.appendChild(video);\n    }\n  }\n}\nfunction stopLive(): void {\n  clearTimeout(stalledTimout.value);\n  errorPlay.value = \"\";\n  videoClean();\n  playing.value = false;\n  endListeningProgress();\n}\nfunction onTimeUpdateVideo(): void {\n  if (!downloadId.value) {\n    return;\n  }\n  const currentTime =player.value?.currentTime() ?? videoElement.value.currentTime;\n  onTimeUpdateProgress(currentTime);\n}\n</script>\n\n<style lang=\"scss\">\n@use \"video.js\";\n@use \"../../../../style/videoPlayer\";\n\n.octopus-app {\n  .video-live-error {\n    text-align: center;\n    width: 100%;\n    font-size: 1rem;\n    font-weight: bold;\n    padding: 0.2rem 0;\n    color: white;\n    position: absolute;\n    top: 0;\n    background: var(--octopus-danger);\n    z-index: 1;\n  }\n\n  .video-js {\n    width: 500px;\n    height: 281px;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/{PlayerVideoHls-BirHOkZD.mjs → PlayerVideoHls-DzbyXZsQ.mjs}

@@ -1,6 +1,6 @@
-import { i as e } from "./classicApi-pmODlqv5.mjs";
-import { n as t } from "./PlayerStore-CKprkxa0.mjs";
-import { t as n } from "./usePlayerLogicProgress-C2L7cMdd.mjs";
+import { i as e } from "./classicApi-CGipMqf7.mjs";
+import { n as t } from "./PlayerStore-DggKki80.mjs";
+import { t as n } from "./usePlayerLogicProgress-BybmSAcs.mjs";
 import { computed as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, onMounted as l, onUnmounted as u, openBlock as d, ref as f, toDisplayString as p, useTemplateRef as m } from "vue";
 import { useI18n as h } from "vue-i18n";
 import g from "video.js";
@@ -47,7 +47,7 @@ var v = {
 			}
 		}));
 		l(() => {
-			P.playerUpdatePlayerHlsUrl(b.hlsUrl), S.value = F.value.canPlayType("application/vnd.apple.mpegurl") !== "" && !navigator.userAgent.includes("Android"), R();
+			P.playerUpdatePlayerHlsUrl(b.hlsUrl), S.value = g.browser.IS_SAFARI || g.browser.IS_IOS, R();
 		}), u(() => {
 			w.value && V();
 		});
@@ -66,7 +66,7 @@ var v = {
 			}, e)), C.value = g(document.getElementById("video-element-hls"), I.value, () => {
 				C.value.qualitySelectorHls({ displayCurrentQuality: !0 }), x.value = "", w.value = !0;
 			}), C.value.on("error", (e) => {
-				V(), e.description?.includes("403") ? x.value = O("Video is unavailable") : x.value = O("Podcast play error");
+				console.error(e), V(), e.description?.includes("403") ? x.value = O("Video is unavailable") : x.value = O("Podcast play error");
 			}), C.value.on("seeking", () => {
 				P.playerUpdateSeekTime(C.value?.currentTime() ?? 0);
 			}), C.value.on("pause", () => {
@@ -86,14 +86,16 @@ var v = {
 					w.value = !1;
 				});
 			}, F.value.onerror = async () => {
-				V(), x.value = O("Podcast play error");
+				console.error(F.value.error), V(), x.value = O("Podcast play error");
 			}, F.value.ontimeupdate = async () => {
 				clearTimeout(E.value), L(), H();
 			}, F.value.onpause = async () => {
 				T.value = !0;
 			}, F.value.onseeking = async () => {
 				P.playerUpdateSeekTime(F.value.currentTime);
-			}, b.isSecured && N.authParam.accessToken ? F.value.src = b.hlsUrl + "access_token=" + N.authParam.accessToken : F.value.src = b.hlsUrl, F.value.src = b.hlsUrl;
+			};
+			let e = b.hlsUrl.includes("?") ? "&" : "?";
+			F.value.src = b.isSecured && N.authParam.accessToken ? `${b.hlsUrl}${e}access_token=${N.authParam.accessToken}` : b.hlsUrl;
 		}
 		function B() {
 			if (S.value) {

package/dist/{PlaylistPage-DljbABur.mjs → PlaylistPage-BdbqXFwR.mjs}

@@ -1,15 +1,15 @@
 import { t as e } from "./ClassicLoading-CXfMjpyl.mjs";
-import { A as t, _ as n, i as r, r as i } from "./classicApi-pmODlqv5.mjs";
-import { t as a } from "./displayHelper-DQtoqc_6.mjs";
-import { t as o } from "./useImageProxy-8ndy_oTo.mjs";
-import { t as ee } from "./GeneralStore-Darfv4af.mjs";
-import { t as s } from "./useErrorHandler-D9W2BURn.mjs";
-import { t as te } from "./useSimplePageParam-DFKSEyiE.mjs";
-import { t as ne } from "./useSeoTitleUrl-UfPXDCPa.mjs";
-import { t as re } from "./useOrgaComputed-CBJ5sDOm.mjs";
-import { t as c } from "./PodcastList-BAOJhQ7G.mjs";
-import { t as l } from "./SubscribeButtons-zlRDGEzS.mjs";
-import { Fragment as ie, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createVNode as ae, defineAsyncComponent as h, defineComponent as g, guardReactiveProps as _, isRef as v, normalizeClass as oe, normalizeProps as se, onBeforeUnmount as ce, openBlock as y, ref as b, renderSlot as x, resolveDirective as S, toDisplayString as C, unref as w, watch as T, withDirectives as E } from "vue";
+import { i as t, j as n, r, v as i } from "./classicApi-CGipMqf7.mjs";
+import { t as ee } from "./displayHelper-DQtoqc_6.mjs";
+import { t as te } from "./useImageProxy-CCpDzPmQ.mjs";
+import { t as a } from "./GeneralStore-Darfv4af.mjs";
+import { t as ne } from "./useErrorHandler-x9sjDYSz.mjs";
+import { t as re } from "./useSimplePageParam-BrtYXOUt.mjs";
+import { t as ie } from "./useSeoTitleUrl-UfPXDCPa.mjs";
+import { t as o } from "./useOrgaComputed-D81Jihm-.mjs";
+import { t as s } from "./PodcastList-N_XOE-hI.mjs";
+import { t as ae } from "./SubscribeButtons-IpzqDGIn.mjs";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createVNode as m, defineAsyncComponent as h, defineComponent as g, guardReactiveProps as _, isRef as v, normalizeClass as oe, normalizeProps as se, onBeforeUnmount as ce, openBlock as y, ref as b, renderSlot as x, resolveDirective as S, toDisplayString as C, unref as w, watch as T, withDirectives as E } from "vue";
 import { useI18n as D } from "vue-i18n";
 import { useRoute as O } from "vue-router";
 //#region src/components/pages/PlaylistPage.vue?vue&type=script&setup=true&lang.ts
@@ -34,21 +34,21 @@ var k = { class: "page-box" }, A = { class: "module-box" }, j = { class: "mb-5 m
 		}
 	},
 	setup(g) {
-		let I = h(() => import("./ShareSocialsButtons-BJ3DqvIO.mjs")), L = h(() => import("./SharePlayer-CRri0YED.mjs").then((e) => e.n)), R = h(() => import("./PodcastmakerHeader-MhdOrssb.mjs")), z = h(() => import("./ShareAnonymous-bOwwEjPv.mjs")), B = g, V = b(!1), H = b(!1), U = b(void 0), W = O(), { t: G } = D(), { useProxyImageUrl: le } = o(), { isPodcastmaker: K, isEditRights: ue, authOrgaId: de } = re(), { updatePathParams: fe } = ne(), { handle403: pe } = s(), me = r(), q = i(), J = ee(), { searchPattern: Y, paginateFirst: he, isInit: ge } = te(B, !0), X = u(() => U.value?.ambianceType === "AMBIANCE" || U.value?.ambianceType === "AMBIANCE_PROGRAMMED"), _e = u(() => X.value ? G("Mix of episodes") : G("Playlist")), Z = u(() => U.value?.title ?? ""), ve = u(() => U.value?.description ?? ""), Q = u(() => ue(U.value?.organisation?.id, me.isRolePlaylists));
+		let I = h(() => import("./ShareSocialsButtons-PqMXhFEk.mjs")), L = h(() => import("./SharePlayer-C0aveOwy.mjs").then((e) => e.n)), R = h(() => import("./PodcastmakerHeader-CIoJwm1L.mjs")), z = h(() => import("./ShareAnonymous-DK2rnLl1.mjs")), B = g, V = b(!1), H = b(!1), U = b(void 0), W = O(), { t: G } = D(), { useProxyImageUrl: le } = te(), { isPodcastmaker: K, isEditRights: ue, authOrgaId: de } = o(), { updatePathParams: fe } = ie(), { handle403: pe } = ne(), me = t(), q = r(), J = a(), { searchPattern: Y, paginateFirst: he, isInit: ge } = re(B, !0), X = l(() => U.value?.ambianceType === "AMBIANCE" || U.value?.ambianceType === "AMBIANCE_PROGRAMMED"), _e = l(() => X.value ? G("Mix of episodes") : G("Playlist")), Z = l(() => U.value?.title ?? ""), ve = l(() => U.value?.description ?? ""), Q = l(() => ue(U.value?.organisation?.id, me.isRolePlaylists));
 		T(() => B.playlistId, () => {
 			be();
 		}, { immediate: !0 }), ce(() => {
 			J.contentToDisplayUpdate(null);
 		});
 		function ye(e) {
-			return a.urlify(e);
+			return ee.urlify(e);
 		}
 		function $() {
 			H.value = !0, V.value = !0;
 		}
 		async function be() {
 			try {
-				if (V.value = !1, H.value = !1, U.value = await n.get(B.playlistId), q.updateOrgaIfNecessary(U.value.organisation?.id), !Q.value && X.value || U.value.organisation?.privacy !== "PUBLIC" && q.filterOrgaId !== U.value.organisation?.id && W.query.productor !== U.value.organisation?.id) {
+				if (V.value = !1, H.value = !1, U.value = await i.get(B.playlistId), q.updateOrgaIfNecessary(U.value.organisation?.id), !Q.value && X.value || U.value.organisation?.privacy !== "PUBLIC" && q.filterOrgaId !== U.value.organisation?.id && W.query.productor !== U.value.organisation?.id) {
 					$();
 					return;
 				}
@@ -58,19 +58,19 @@ var k = { class: "page-box" }, A = { class: "module-box" }, j = { class: "mb-5 m
 			}
 			V.value = !0;
 		}
-		return (n, r) => {
+		return (t, r) => {
 			let i = S("lazy");
-			return y(), p("section", k, [V.value && !H.value && U.value ? (y(), p(ie, { key: 0 }, [
-				w(K) ? (y(), d(w(R), {
+			return y(), f("section", k, [V.value && !H.value && U.value ? (y(), f(c, { key: 0 }, [
+				w(K) ? (y(), u(w(R), {
 					key: 0,
 					"page-title": _e.value,
 					"img-url": U.value.imageUrl
-				}, null, 8, ["page-title", "img-url"])) : f("", !0),
-				m("div", { class: oe(["d-flex flex-column page-element", w(K) ? "page-element-podcastmaker" : ""]) }, [
-					m("section", A, [
-						Q.value && !w(K) ? x(n.$slots, "edit-box", { playlist: U.value }, void 0, void 0, 0) : f("", !0),
-						m("div", j, [
-							E(m("img", {
+				}, null, 8, ["page-title", "img-url"])) : d("", !0),
+				p("div", { class: oe(["d-flex flex-column page-element", w(K) ? "page-element-podcastmaker" : ""]) }, [
+					p("section", A, [
+						Q.value && !w(K) ? x(t.$slots, "edit-box", { playlist: U.value }, void 0, void 0, 0) : d("", !0),
+						p("div", j, [
+							E(p("img", {
 								width: "250",
 								height: "250",
 								"aria-hidden": "true",
@@ -78,35 +78,35 @@ var k = { class: "page-box" }, A = { class: "module-box" }, j = { class: "mb-5 m
 								title: w(G)("Playlist name image", { name: Z.value }),
 								class: "img-box float-start me-3 mb-3"
 							}, null, 8, M), [[i, w(le)(U.value.imageUrl, "250")]]),
-							m("div", N, [m("h2", null, C(Z.value), 1), Q.value ? f("", !0) : (y(), d(w(z), {
+							p("div", N, [p("h2", null, C(Z.value), 1), Q.value ? d("", !0) : (y(), u(w(z), {
 								key: 0,
 								class: "d-flex justify-content-end flex-grow-1",
 								playlist: U.value,
 								"organisation-id": U.value.organisation?.id
 							}, null, 8, ["playlist", "organisation-id"]))]),
-							m("p", {
+							p("p", {
 								class: "html-wysiwyg-content",
 								innerHTML: ye(ve.value)
 							}, null, 8, P)
 						]),
-						w(K) ? (y(), d(l, {
+						w(K) ? (y(), u(ae, {
 							key: 1,
 							class: "mt-4",
 							content: U.value,
 							"window-width": 1e3,
 							"justify-center": !1
-						}, null, 8, ["content"])) : f("", !0)
+						}, null, 8, ["content"])) : d("", !0)
 					]),
-					!w(K) && Q.value ? (y(), d(w(L), {
+					!w(K) && Q.value ? (y(), u(w(L), {
 						key: 0,
 						playlist: U.value,
 						"organisation-id": w(de)
-					}, null, 8, ["playlist", "organisation-id"])) : f("", !0),
-					w(t).podcastPage.ShareButtons ? (y(), d(w(I), {
+					}, null, 8, ["playlist", "organisation-id"])) : d("", !0),
+					w(n).podcastPage.ShareButtons ? (y(), u(w(I), {
 						key: 1,
 						"organisation-id": U.value.organisation.id
-					}, null, 8, ["organisation-id"])) : f("", !0),
-					m("section", F, [w(ge) ? (y(), d(c, {
+					}, null, 8, ["organisation-id"])) : d("", !0),
+					p("section", F, [w(ge) ? (y(), u(s, {
 						key: 0,
 						query: w(Y),
 						"onUpdate:query": r[0] ||= (e) => v(Y) ? Y.value = e : null,
@@ -118,10 +118,10 @@ var k = { class: "page-box" }, A = { class: "module-box" }, j = { class: "mb-5 m
 						"first",
 						"size",
 						"playlist"
-					])) : f("", !0)])
+					])) : d("", !0)])
 				], 2),
-				x(n.$slots, "bottom", se(_({ playlist: U.value })))
-			], 64)) : f("", !0), ae(e, {
+				x(t.$slots, "bottom", se(_({ playlist: U.value })))
+			], 64)) : d("", !0), m(e, {
 				"loading-text": V.value ? void 0 : w(G)("Loading content ..."),
 				"error-text": H.value ? w(G)("Playlist doesn't exist") : void 0
 			}, null, 8, ["loading-text", "error-text"])]);

package/dist/PlaylistPage-BgUaPJet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaylistPage-BgUaPJet.mjs","names":["displayHelper","_resolveDirective","_openBlock","_createElementBlock","_Fragment","_createBlock","_createCommentVNode","_createElementVNode","_normalizeClass","_renderSlot","_withDirectives","_toDisplayString","_normalizeProps","_guardReactiveProps","_createVNode","_sfc_main"],"sources":["../src/components/pages/PlaylistPage.vue","../src/components/pages/PlaylistPage.vue"],"sourcesContent":["<template>\n  <section class=\"page-box\">\n    <template v-if=\"loaded && !error && playlist\">\n      <PodcastmakerHeader\n        v-if=\"isPodcastmaker\"\n        :page-title=\"pageTitle\"\n        :img-url=\"playlist.imageUrl\"\n      />\n      <div\n        class=\"d-flex flex-column page-element\"\n        :class=\"isPodcastmaker ? 'page-element-podcastmaker' : ''\"\n      >\n        <section class=\"module-box\">\n          <slot\n            v-if=\"editRight && !isPodcastmaker\"\n            name=\"edit-box\"\n            :playlist=\"playlist\"\n          />\n\n          <div class=\"mb-5 mt-3 description-text\">\n            <img\n              v-lazy=\"useProxyImageUrl(playlist.imageUrl, '250')\"\n              width=\"250\"\n              height=\"250\"\n              aria-hidden=\"true\"\n              alt=\"\"\n              :title=\"t('Playlist name image', { name: name })\"\n              class=\"img-box float-start me-3 mb-3\"\n            />\n            <div class=\"d-flex align-items-center justify-content-between\">\n              <h2>{{ name }}</h2>\n              <ShareAnonymous v-if=\"!editRight\" class=\"d-flex justify-content-end flex-grow-1\" :playlist=\"playlist\" :organisation-id=\"playlist.organisation?.id\"/>\n            </div>\n            <!-- eslint-disable vue/no-v-html -->\n            <p class=\"html-wysiwyg-content\" v-html=\"urlify(description)\" />\n            <!-- eslint-enable -->\n          </div>\n          <SubscribeButtons\n            v-if=\"isPodcastmaker\"\n            class=\"mt-4\"\n            :content=\"playlist\"\n            :window-width=\"1000\"\n            :justify-center=\"false\"\n          />\n        </section>\n        <SharePlayer\n          v-if=\"!isPodcastmaker && editRight\"\n          :playlist=\"playlist\"\n          :organisation-id=\"authOrgaId\"\n        />\n        <ShareSocialsButtons\n          v-if=\"state.podcastPage.ShareButtons\"\n          :organisation-id=\"playlist.organisation.id\"\n        />\n        <section class=\"module-box\">\n          <PodcastList \n            v-if=\"isInit\"\n            v-model:query=\"searchPattern\"\n            :first=\"paginateFirst\"\n            :size=\"ps\"\n            :playlist=\"playlist\"\n          />\n        </section>\n      </div>\n\n      <slot name=\"bottom\" v-bind=\"{ playlist }\" />\n    </template>\n    <ClassicLoading\n      :loading-text=\"!loaded ? t('Loading content ...') : undefined\"\n      :error-text=\"error ? t(`Playlist doesn't exist`) : undefined\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport {useOrgaComputed} from \"../composable/useOrgaComputed\";\nimport {useSeoTitleUrl} from \"../composable/route/useSeoTitleUrl\";\nimport ClassicLoading from \"../form/ClassicLoading.vue\";\nimport PodcastList from \"../display/playlist/PodcastList.vue\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport {useErrorHandler} from \"../composable/useErrorHandler\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport {defineAsyncComponent, ref, Ref, computed, watch, onBeforeUnmount } from \"vue\";\nimport { AxiosError } from \"axios\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute } from \"vue-router\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { playlistApi } from \"../../api/playlistApi\";\n\nimport SubscribeButtons from \"../display/sharing/SubscribeButtons.vue\"; \nconst ShareSocialsButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/ShareSocialsButtons.vue\"),\n);\nconst SharePlayer = defineAsyncComponent(\n  () => import(\"../display/sharing/SharePlayer.vue\"),\n);\nconst PodcastmakerHeader = defineAsyncComponent(\n  () => import(\"../display/podcastmaker/PodcastmakerHeader.vue\"),\n);\nconst ShareAnonymous = defineAsyncComponent(() => import(\"../display/sharing/ShareAnonymous.vue\"));\n\n\n//Props\nconst props = defineProps({\n  playlistId: { default: undefined, type: Number },\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  routeQuery: { default: \"\", type: String },\n});\n\n\n//Data \nconst loaded = ref(false);\nconst error = ref(false);\nconst playlist : Ref<Playlist | undefined> = ref(undefined);\n\n\n//Composables\nconst route = useRoute();\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {handle403} = useErrorHandler();\nconst authStore = useAuthStore();\nconst filterStore = useFilterStore();\nconst generalStore = useGeneralStore();\nconst {\n  searchPattern,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props, true);\n\n\n//Computed\nconst playlistRadio = computed(() =>{\n  return (\n    \"AMBIANCE\" === playlist.value?.ambianceType ||\n    \"AMBIANCE_PROGRAMMED\" === playlist.value?.ambianceType\n  );\n});\nconst pageTitle = computed(() =>playlistRadio.value? t(\"Mix of episodes\"): t(\"Playlist\"));\nconst name = computed(() =>playlist.value?.title ?? \"\");\nconst description = computed(() =>playlist.value?.description ?? \"\");\nconst editRight = computed(() =>{\n  return isEditRights(\n    playlist.value?.organisation?.id,\n    authStore.isRolePlaylists,\n  );\n});\n\n\n//Watch\nwatch(()=>props.playlistId, () => {getPlaylistDetails()}, {immediate: true});\n\n\nonBeforeUnmount(() => {\n  generalStore.contentToDisplayUpdate(null);\n});\n\n\n//Methods\nfunction urlify(text:string|undefined){\n  return displayHelper.urlify(text);\n}\nfunction initError(): void {\n  error.value = true;\n  loaded.value = true;\n}\nasync function getPlaylistDetails(): Promise<void> {\n  try {\n    loaded.value = false;\n    error.value = false;\n    playlist.value = await playlistApi.get(props.playlistId);\n    filterStore.updateOrgaIfNecessary(playlist.value.organisation?.id);\n    if (\n      (!editRight.value && playlistRadio.value) ||\n      (\"PUBLIC\" !== playlist.value.organisation?.privacy &&\n      filterStore.filterOrgaId !== playlist.value.organisation?.id &&\n      route.query.productor !== playlist.value.organisation?.id)\n    ) {\n      initError();\n      return;\n    }\n    generalStore.contentToDisplayUpdate(playlist.value);\n    updatePathParams(playlist.value.title);\n  } catch (error) {\n    handle403(error as AxiosError);\n    initError();\n  }\n  loaded.value = true;\n}\n\n</script>\n","<template>\n  <section class=\"page-box\">\n    <template v-if=\"loaded && !error && playlist\">\n      <PodcastmakerHeader\n        v-if=\"isPodcastmaker\"\n        :page-title=\"pageTitle\"\n        :img-url=\"playlist.imageUrl\"\n      />\n      <div\n        class=\"d-flex flex-column page-element\"\n        :class=\"isPodcastmaker ? 'page-element-podcastmaker' : ''\"\n      >\n        <section class=\"module-box\">\n          <slot\n            v-if=\"editRight && !isPodcastmaker\"\n            name=\"edit-box\"\n            :playlist=\"playlist\"\n          />\n\n          <div class=\"mb-5 mt-3 description-text\">\n            <img\n              v-lazy=\"useProxyImageUrl(playlist.imageUrl, '250')\"\n              width=\"250\"\n              height=\"250\"\n              aria-hidden=\"true\"\n              alt=\"\"\n              :title=\"t('Playlist name image', { name: name })\"\n              class=\"img-box float-start me-3 mb-3\"\n            />\n            <div class=\"d-flex align-items-center justify-content-between\">\n              <h2>{{ name }}</h2>\n              <ShareAnonymous v-if=\"!editRight\" class=\"d-flex justify-content-end flex-grow-1\" :playlist=\"playlist\" :organisation-id=\"playlist.organisation?.id\"/>\n            </div>\n            <!-- eslint-disable vue/no-v-html -->\n            <p class=\"html-wysiwyg-content\" v-html=\"urlify(description)\" />\n            <!-- eslint-enable -->\n          </div>\n          <SubscribeButtons\n            v-if=\"isPodcastmaker\"\n            class=\"mt-4\"\n            :content=\"playlist\"\n            :window-width=\"1000\"\n            :justify-center=\"false\"\n          />\n        </section>\n        <SharePlayer\n          v-if=\"!isPodcastmaker && editRight\"\n          :playlist=\"playlist\"\n          :organisation-id=\"authOrgaId\"\n        />\n        <ShareSocialsButtons\n          v-if=\"state.podcastPage.ShareButtons\"\n          :organisation-id=\"playlist.organisation.id\"\n        />\n        <section class=\"module-box\">\n          <PodcastList \n            v-if=\"isInit\"\n            v-model:query=\"searchPattern\"\n            :first=\"paginateFirst\"\n            :size=\"ps\"\n            :playlist=\"playlist\"\n          />\n        </section>\n      </div>\n\n      <slot name=\"bottom\" v-bind=\"{ playlist }\" />\n    </template>\n    <ClassicLoading\n      :loading-text=\"!loaded ? t('Loading content ...') : undefined\"\n      :error-text=\"error ? t(`Playlist doesn't exist`) : undefined\"\n    />\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { useGeneralStore } from \"../../stores/GeneralStore\";\nimport { useAuthStore } from \"../../stores/AuthStore\";\nimport {useOrgaComputed} from \"../composable/useOrgaComputed\";\nimport {useSeoTitleUrl} from \"../composable/route/useSeoTitleUrl\";\nimport ClassicLoading from \"../form/ClassicLoading.vue\";\nimport PodcastList from \"../display/playlist/PodcastList.vue\";\nimport { useFilterStore } from \"../../stores/FilterStore\";\nimport { state } from \"../../stores/ParamSdkStore\";\nimport displayHelper from \"../../helper/displayHelper\";\nimport {useImageProxy} from \"../composable/useImageProxy\";\nimport {useErrorHandler} from \"../composable/useErrorHandler\";\nimport { Playlist } from \"@/stores/class/general/playlist\";\nimport {defineAsyncComponent, ref, Ref, computed, watch, onBeforeUnmount } from \"vue\";\nimport { AxiosError } from \"axios\";\nimport { useI18n } from \"vue-i18n\";\nimport { useRoute } from \"vue-router\";\nimport { useSimplePageParam } from \"../composable/route/useSimplePageParam\";\nimport { playlistApi } from \"../../api/playlistApi\";\n\nimport SubscribeButtons from \"../display/sharing/SubscribeButtons.vue\"; \nconst ShareSocialsButtons = defineAsyncComponent(\n  () => import(\"../display/sharing/ShareSocialsButtons.vue\"),\n);\nconst SharePlayer = defineAsyncComponent(\n  () => import(\"../display/sharing/SharePlayer.vue\"),\n);\nconst PodcastmakerHeader = defineAsyncComponent(\n  () => import(\"../display/podcastmaker/PodcastmakerHeader.vue\"),\n);\nconst ShareAnonymous = defineAsyncComponent(() => import(\"../display/sharing/ShareAnonymous.vue\"));\n\n\n//Props\nconst props = defineProps({\n  playlistId: { default: undefined, type: Number },\n  pr: { default: 0, type: Number },\n  ps: { default: 30, type: Number },\n  routeQuery: { default: \"\", type: String },\n});\n\n\n//Data \nconst loaded = ref(false);\nconst error = ref(false);\nconst playlist : Ref<Playlist | undefined> = ref(undefined);\n\n\n//Composables\nconst route = useRoute();\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { isPodcastmaker, isEditRights, authOrgaId } = useOrgaComputed();\nconst { updatePathParams } = useSeoTitleUrl();\nconst {handle403} = useErrorHandler();\nconst authStore = useAuthStore();\nconst filterStore = useFilterStore();\nconst generalStore = useGeneralStore();\nconst {\n  searchPattern,\n  paginateFirst,\n  isInit\n} = useSimplePageParam(props, true);\n\n\n//Computed\nconst playlistRadio = computed(() =>{\n  return (\n    \"AMBIANCE\" === playlist.value?.ambianceType ||\n    \"AMBIANCE_PROGRAMMED\" === playlist.value?.ambianceType\n  );\n});\nconst pageTitle = computed(() =>playlistRadio.value? t(\"Mix of episodes\"): t(\"Playlist\"));\nconst name = computed(() =>playlist.value?.title ?? \"\");\nconst description = computed(() =>playlist.value?.description ?? \"\");\nconst editRight = computed(() =>{\n  return isEditRights(\n    playlist.value?.organisation?.id,\n    authStore.isRolePlaylists,\n  );\n});\n\n\n//Watch\nwatch(()=>props.playlistId, () => {getPlaylistDetails()}, {immediate: true});\n\n\nonBeforeUnmount(() => {\n  generalStore.contentToDisplayUpdate(null);\n});\n\n\n//Methods\nfunction urlify(text:string|undefined){\n  return displayHelper.urlify(text);\n}\nfunction initError(): void {\n  error.value = true;\n  loaded.value = true;\n}\nasync function getPlaylistDetails(): Promise<void> {\n  try {\n    loaded.value = false;\n    error.value = false;\n    playlist.value = await playlistApi.get(props.playlistId);\n    filterStore.updateOrgaIfNecessary(playlist.value.organisation?.id);\n    if (\n      (!editRight.value && playlistRadio.value) ||\n      (\"PUBLIC\" !== playlist.value.organisation?.privacy &&\n      filterStore.filterOrgaId !== playlist.value.organisation?.id &&\n      route.query.productor !== playlist.value.organisation?.id)\n    ) {\n      initError();\n      return;\n    }\n    generalStore.contentToDisplayUpdate(playlist.value);\n    updatePathParams(playlist.value.title);\n  } catch (error) {\n    handle403(error as AxiosError);\n    initError();\n  }\n  loaded.value = true;\n}\n\n</script>\n"],"mappings":"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"}