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