{"version":3,"file":"PodcastImage-BNOWBbbX.mjs","names":[],"sources":["../src/components/display/podcasts/PodcastImage.vue","../src/components/display/podcasts/PodcastImage.vue"],"sourcesContent":["<!--\n  Component to display the image of a podcast.\n  May also display additional information, for example when an error occured\n  when processing the file (using PodcastPlayButton).\n-->\n<template>\n  <div\n    v-if=\"podcast\"\n    class=\"img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start\"\n  >\n    <router-link\n      :to=\"{\n        name: 'podcast',\n        params: { podcastId: podcast.podcastId },\n      }\"\n      :title=\"t('Episode name page', { name: podcast.title })\"\n    >\n      <img\n        v-lazy=\"useProxyImageUrl(podcast.imageUrl, '270')\"\n        width=\"270\"\n        height=\"270\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"img-box img-box-podcast\"\n        :title=\"t('Episode name image', { name: podcast.title })\"\n      >\n    </router-link>\n    <div\n      v-if=\"state.generalParameters.podcastmaker\"\n      :class=\"mainRubrique ? 'mainRubrique' : 'notMainRubrique'\"\n    />\n    <div\n      v-if=\"fetchConference\"\n      class=\"live-image-status\"\n      :class=\"\n        fetchConference && 'null' !== fetchConference && fetchConference.status\n          ? fetchConference.status.toLowerCase() + '-bg'\n          : ''\n      \"\n    >\n      {{ statusText }}\n    </div>\n    <div v-if=\"isRecordedInLive\" class=\"live-image-status recording-bg\">\n      {{ t(\"Recorded in live\") }}\n    </div>\n    <PodcastPlayButton\n      :podcast=\"podcast\"\n      :hide-play=\"hidePlay\"\n      :fetch-conference=\"fetchConference\"\n      :show-processing=\"isAuthenticated\"\n    />\n    <button\n      v-if=\"displayDescription && isMobile\"\n      class=\"background-icon bg-dark text-white\"\n      :title=\"isDescription ? t('Hide description') : t('Show description')\"\n      @click=\"showDescription\"\n    >\n      <ChevronDownIcon :class=\"{ 'arrow-transform': !isDescription }\" />\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport PodcastPlayButton from \"./PodcastPlayButton.vue\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport {useImageProxy} from \"../../composable/useImageProxy\";\nimport { computed, onBeforeMount, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n  hidePlay: { default: false, type: Boolean },\n  displayDescription: { default: false, type: Boolean },\n  arrowDirection: { default: \"up\", type: String },\n  isAnimatorLive: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference }\n})\n\n//Emits\nconst emit = defineEmits([\"hideDescription\", \"showDescription\"]);\n\n//Data \nconst isDescription = ref(false);\nconst isMobile = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { isAuthenticated } = useAuthStore();\n\n//Computed\nconst mainRubrique = computed(() => {\n  return (\n    undefined !== state.podcastPage.mainRubrique &&\n    0 !== state.podcastPage.mainRubrique &&\n    (props.podcast?.rubriqueIds?.includes(\n      state.podcastPage.mainRubrique,\n    ) as boolean)\n  );\n});\nconst isRecordedInLive = computed(() => {\n  return (\n    undefined === props.fetchConference &&\n    undefined !== props.podcast.conferenceId &&\n    \"READY_TO_RECORD\" !== props.podcast.processingStatus\n  );\n});\nconst statusText = computed(() => {\n  if (!props.fetchConference) {\n    return \"\";\n  }\n\n  switch (props.fetchConference.status) {\n    case \"PLANNED\":\n      return t(\"live in few time\");\n\n    case \"PENDING\":\n      if (props.isAnimatorLive) {\n        return t(\"Open studio\");\n      } else {\n        return t(\"live upcoming\");\n      }\n\n    case \"RECORDING\":\n      return t(\"In live\");\n\n    case \"DEBRIEFING\":\n      if (\"READY_TO_RECORD\" === props.podcast.processingStatus) {\n        return t(\"Not recording\");\n      } else {\n        return t(\"Debriefing\");\n      }\n\n    case \"ERROR\":\n      return t(\"In error\");\n\n    case \"PUBLISHING\":\n      return t(\"Publishing\");\n\n    default:\n      return \"\";\n  }\n});\n\n\n//Watch\nwatch(()=>props.arrowDirection, () => {\n  if (\"up\" === props.arrowDirection) {\n    isDescription.value = true;\n    showDescription();\n  } else {\n    isDescription.value = false;\n    showDescription();\n  }\n});\n\n\nonBeforeMount(()=>{\n  isMobile.value = window.matchMedia(\"(hover: none)\").matches;\n})\n\n//Methods\nfunction showDescription(): void {\n  if (isDescription.value) {\n    emit(\"hideDescription\");\n  } else {\n    emit(\"showDescription\");\n  }\n  isDescription.value = !isDescription.value;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .background-icon {\n    border-radius: 50%;\n    width: 44px;\n    height: 44px;\n    font-size: 0.7rem;\n    right: 0;\n    bottom: 0;\n    margin: 5px;\n    position: absolute;\n    cursor: pointer;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n</style>\n","<!--\n  Component to display the image of a podcast.\n  May also display additional information, for example when an error occured\n  when processing the file (using PodcastPlayButton).\n-->\n<template>\n  <div\n    v-if=\"podcast\"\n    class=\"img-box img-box-podcast mb-3 flex-column justify-content-start align-items-start position-relative flex-shrink-0 float-start\"\n  >\n    <router-link\n      :to=\"{\n        name: 'podcast',\n        params: { podcastId: podcast.podcastId },\n      }\"\n      :title=\"t('Episode name page', { name: podcast.title })\"\n    >\n      <img\n        v-lazy=\"useProxyImageUrl(podcast.imageUrl, '270')\"\n        width=\"270\"\n        height=\"270\"\n        aria-hidden=\"true\"\n        alt=\"\"\n        class=\"img-box img-box-podcast\"\n        :title=\"t('Episode name image', { name: podcast.title })\"\n      >\n    </router-link>\n    <div\n      v-if=\"state.generalParameters.podcastmaker\"\n      :class=\"mainRubrique ? 'mainRubrique' : 'notMainRubrique'\"\n    />\n    <div\n      v-if=\"fetchConference\"\n      class=\"live-image-status\"\n      :class=\"\n        fetchConference && 'null' !== fetchConference && fetchConference.status\n          ? fetchConference.status.toLowerCase() + '-bg'\n          : ''\n      \"\n    >\n      {{ statusText }}\n    </div>\n    <div v-if=\"isRecordedInLive\" class=\"live-image-status recording-bg\">\n      {{ t(\"Recorded in live\") }}\n    </div>\n    <PodcastPlayButton\n      :podcast=\"podcast\"\n      :hide-play=\"hidePlay\"\n      :fetch-conference=\"fetchConference\"\n      :show-processing=\"isAuthenticated\"\n    />\n    <button\n      v-if=\"displayDescription && isMobile\"\n      class=\"background-icon bg-dark text-white\"\n      :title=\"isDescription ? t('Hide description') : t('Show description')\"\n      @click=\"showDescription\"\n    >\n      <ChevronDownIcon :class=\"{ 'arrow-transform': !isDescription }\" />\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ChevronDownIcon from \"vue-material-design-icons/ChevronDown.vue\";\nimport PodcastPlayButton from \"./PodcastPlayButton.vue\";\nimport { state } from \"../../../stores/ParamSdkStore\";\nimport { Podcast } from \"@/stores/class/general/podcast\";\nimport { Conference } from \"@/stores/class/conference/conference\";\nimport {useImageProxy} from \"../../composable/useImageProxy\";\nimport { computed, onBeforeMount, ref, watch } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { useAuthStore } from \"../../../stores/AuthStore\";\n\n//Props \nconst props = defineProps({\n  podcast: { default: () => ({}), type: Object as () => Podcast },\n  hidePlay: { default: false, type: Boolean },\n  displayDescription: { default: false, type: Boolean },\n  arrowDirection: { default: \"up\", type: String },\n  isAnimatorLive: { default: false, type: Boolean },\n  fetchConference: { default: undefined, type: Object as () => Conference }\n})\n\n//Emits\nconst emit = defineEmits([\"hideDescription\", \"showDescription\"]);\n\n//Data \nconst isDescription = ref(false);\nconst isMobile = ref(false);\n\n//Composables\nconst { t } = useI18n();\nconst { useProxyImageUrl } = useImageProxy();\nconst { isAuthenticated } = useAuthStore();\n\n//Computed\nconst mainRubrique = computed(() => {\n  return (\n    undefined !== state.podcastPage.mainRubrique &&\n    0 !== state.podcastPage.mainRubrique &&\n    (props.podcast?.rubriqueIds?.includes(\n      state.podcastPage.mainRubrique,\n    ) as boolean)\n  );\n});\nconst isRecordedInLive = computed(() => {\n  return (\n    undefined === props.fetchConference &&\n    undefined !== props.podcast.conferenceId &&\n    \"READY_TO_RECORD\" !== props.podcast.processingStatus\n  );\n});\nconst statusText = computed(() => {\n  if (!props.fetchConference) {\n    return \"\";\n  }\n\n  switch (props.fetchConference.status) {\n    case \"PLANNED\":\n      return t(\"live in few time\");\n\n    case \"PENDING\":\n      if (props.isAnimatorLive) {\n        return t(\"Open studio\");\n      } else {\n        return t(\"live upcoming\");\n      }\n\n    case \"RECORDING\":\n      return t(\"In live\");\n\n    case \"DEBRIEFING\":\n      if (\"READY_TO_RECORD\" === props.podcast.processingStatus) {\n        return t(\"Not recording\");\n      } else {\n        return t(\"Debriefing\");\n      }\n\n    case \"ERROR\":\n      return t(\"In error\");\n\n    case \"PUBLISHING\":\n      return t(\"Publishing\");\n\n    default:\n      return \"\";\n  }\n});\n\n\n//Watch\nwatch(()=>props.arrowDirection, () => {\n  if (\"up\" === props.arrowDirection) {\n    isDescription.value = true;\n    showDescription();\n  } else {\n    isDescription.value = false;\n    showDescription();\n  }\n});\n\n\nonBeforeMount(()=>{\n  isMobile.value = window.matchMedia(\"(hover: none)\").matches;\n})\n\n//Methods\nfunction showDescription(): void {\n  if (isDescription.value) {\n    emit(\"hideDescription\");\n  } else {\n    emit(\"showDescription\");\n  }\n  isDescription.value = !isDescription.value;\n}\n</script>\n\n<style lang=\"scss\">\n.octopus-app {\n  .live-image-status {\n    text-align: center;\n    width: 100%;\n    font-size: 0.6rem;\n    padding: 0.2rem 0;\n    color: white;\n    text-transform: uppercase;\n    position: absolute;\n    top: 0;\n  }\n\n  .background-icon {\n    border-radius: 50%;\n    width: 44px;\n    height: 44px;\n    font-size: 0.7rem;\n    right: 0;\n    bottom: 0;\n    margin: 5px;\n    position: absolute;\n    cursor: pointer;\n    z-index: 3;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n}\n</style>\n"],"mappings":"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"}