{"version":3,"file":"DwrwS6fv.js","sources":["../../../../components/ui/icons/play.vue","../../../../components/component/common/embed.vue","../../../../components/component/common/image.vue","../../../../components/component/common/video.vue"],"sourcesContent":["<template>\n  <svg\n    width=\"100%\"\n    height=\"100%\"\n    viewBox=\"0 0 27 35\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path d=\"M0 35V0L26.8492 17.5L0 35Z\" fill=\"currentColor\" />\n  </svg>\n</template>\n","<script setup>\nimport { useStore } from \"vuex\";\nconst emit = defineEmits([\"loaded\"]);\n\nconst props = defineProps({\n  media: Object,\n  type: String,\n  provider: String,\n  url: String,\n  title: String,\n  description: String,\n  code: {\n    type: String,\n    required: true,\n  },\n  width: Number,\n  height: Number,\n  posterImage: Object,\n  posters: Array,\n  transparent: Boolean,\n  responsive: {\n    type: Boolean,\n    default: true,\n  },\n  playButton: {\n    type: Boolean,\n    default: true,\n  },\n  attributes: Object,\n  playsinline: Boolean,\n});\nconst customPoster = inject(\"customPoster\", null);\nconst poster = computed(() => {\n  if (!props.posters || !props.posters.length) return null;\n  return customPoster?.src ? customPoster : props.posters[0];\n});\nconst aspectRatio = computed(() => (props.height / props.width) * 100 + \"%\");\nconst attributes = computed(() => {\n  const { src, type, width, height, ...attributes } = props;\n  return attributes;\n});\n\nconst store = useStore();\n\nconst element = ref(null);\nconst statisticConsent = ref(false);\n\nconst handlePlay = () => {\n  // store.dispatch(\"modals/open\", {\n  //   id: \"ModalEmbed\",\n  //   data: {\n  //     data: props.media,\n  //     playsinline: true,\n  //   },\n  // });\n  if (process.client) {\n    statisticConsent.value = window.cicc[\"cookie_cat_statistic\"];\n  }\n\n  if (!statisticConsent.value) {\n    store.dispatch(\"modals/open\", {\n      id: \"ModalCookie\",\n      data: {\n        data: {},\n      },\n    });\n  } else {\n    store.dispatch(\"modals/open\", {\n      id: \"ModalEmbed\",\n      data: {\n        data: props.media,\n        playsinline: true,\n      },\n    });\n  }\n};\n\n// mounted() {\n//   observe(\n//     [this.$el],\n//     () => {\n//       this.show = true\n//     },\n//     { rootMargin: '50px 0px', threshold: 0.01 }\n//   )\n// },\n\nonMounted(() => {\n  emit(\"loaded\");\n});\n</script>\n\n<template>\n  <div :class=\"['embed', 'embed--' + type]\">\n    <span\n      class=\"embed-placeholder\"\n      v-if=\"type != 'podcast'\"\n      :style=\"{\n        paddingBottom: responsive ? aspectRatio : 0,\n        backgroundColor: transparent ? 'transparent' : null,\n        height: !responsive ? `${height}px` : null,\n      }\"\n    ></span>\n\n    <template v-if=\"type === 'video' && !playsinline && poster != null\">\n      <img\n        class=\"embed-poster\"\n        :src=\"poster.url || poster.src\"\n        :srcset=\"poster.srcset\"\n        ref=\"element\"\n        :class=\"[isVisible ? 'visible' : 'hidden']\"\n      />\n\n      <div class=\"ui\" ref=\"target\">\n        <button class=\"play-btn\" @click=\"handlePlay\">\n          <div class=\"icon\">\n            <ui-icons-play />\n          </div>\n        </button>\n      </div>\n    </template>\n    <template v-else>\n      <transition name=\"embed-fade\" @after-enter=\"fadedIn = true\">\n        <div class=\"embed-code\" v-html=\"code\"></div>\n      </transition>\n    </template>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n.embed {\n  display: block;\n  position: relative;\n  overflow: hidden;\n  height: 100%;\n  background: transparent;\n}\n\n.embed > * {\n  margin-top: 0;\n}\n\n.embed .embed-poster {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: block;\n  top: 0;\n  left: 0;\n  background-color: currentColor;\n  transition: opacity 0.5s ease;\n  object-fit: cover;\n}\n\n.embed .embed-poster.visible {\n  opacity: 1;\n}\n\n.embed .embed-poster.hidden {\n  opacity: 0;\n}\n\n.embed .embed-code {\n  width: 100%;\n  height: 100%;\n  top: 0;\n  bottom: 0;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.embed .ui {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  pointer-events: none;\n}\n\n.embed .ui > * {\n  pointer-events: auto;\n}\n\n.embed .play-btn {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  background-color: rgba(0, 0, 0, 0.3);\n  transition: background 1s ease;\n}\n\n.embed .play-btn:hover {\n  background: rgba(0, 0, 0, 0);\n}\n\n.embed .play-btn:hover .icon {\n  opacity: 1;\n  transform: scale(1.5);\n  transition: transform 0.25s ease-out;\n}\n\n.embed .play-btn .icon {\n  transition: transform 0.25s ease-out;\n  position: absolute;\n  width: 5%;\n  height: auto;\n  max-width: 50px;\n}\n\n.embed .toggle-video-embed {\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  fill: #fff;\n  cursor: pointer;\n}\n\n.embed .toggle-video-embed .icon-button {\n  width: 30px;\n  height: 30px;\n  transition: transform 0.22s ease;\n}\n\n.embed .toggle-video-embed:hover .icon,\n.embed .toggle-video-embed:focus .icon {\n  transform: scale(1.1);\n}\n\n.embed iframe,\n.embed img,\n.embed .toggle-video-embed,\n.embed .video-poster {\n  width: 100%;\n  height: 100%;\n}\n\n.embed--podcast .embed-code {\n  width: 100%;\n  height: 200px;\n  position: relative;\n  padding-bottom: 0;\n}\n\n.embed-placeholder {\n  display: block;\n  background-color: currentColor;\n  opacity: 0.05;\n  transition: opacity 0.32s cubic-bezier(0.67, 0, 0.67, 1) 0.15s;\n  pointer-events: none;\n}\n\n.embed-placeholder.is-loaded {\n  opacity: 0;\n}\n\n.embed-placeholder--medium,\n.embed-placeholder--large,\n.embed-placeholder--wide,\n.embed-placeholder--extra-wide,\n.embed-placeholder--super-wide {\n  display: none;\n}\n\n@media screen and (min-width: 768px) {\n  .embed-placeholder--medium {\n    display: block;\n  }\n  .embed-placeholder--medium ~ .embed-placeholder {\n    display: none;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  .embed-placeholder--large {\n    display: block;\n  }\n  .embed-placeholder--large ~ .embed-placeholder {\n    display: none;\n  }\n}\n\n/* Uncomment if needed in future\n@media screen and (min-width: var(--wide)) {\n  .embed-placeholder--wide {\n    display: block;\n  }\n  .embed-placeholder--wide ~ .embed-placeholder {\n    display: none;\n  }\n}\n\n@media screen and (min-width: var(--extra-wide)) {\n  .embed-placeholder--extra-wide {\n    display: block;\n  }\n  .embed-placeholder--extra-wide ~ .embed-placeholder {\n    display: none;\n  }\n}\n\n@media screen and (min-width: var(--super-wide)) {\n  .embed-placeholder--super-wide {\n    display: block;\n  }\n  .embed-placeholder--super-wide ~ .embed-placeholder {\n    display: none;\n  }\n}\n*/\n</style>\n","<script setup>\n/**\n * note: shouldn't be used directly, instead use the CommonMedia:\n * <CommonMedia :media=\"myImageOrVideo\" />\n */\n\nconst props = defineProps({\n  media: Object,\n  sizes: Array,\n  loading: String, // used for overwriting the \"loading\" attr from cms\n  withPlaceholder: { type: Boolean, default: true },\n});\n\nconst focalPoint = computed(() => {\n  if (!props.media.focalPoint) return null;\n\n  const { x, y } = props.media.focalPoint;\n\n  return {\n    backgroundPosition: `${x * 100}% ${y * 100}%`,\n    objectPosition: `${x * 100}% ${y * 100}%`,\n  };\n});\n\nconst sizesAttribute = computed(() => {\n  const [mobileSize, desktopSize] = props.sizes;\n  return `(max-width: 900px) ${mobileSize}vw, ${desktopSize}vw`;\n});\n</script>\n\n<template>\n  <img\n    :style=\"{\n      ...focalPoint,\n      backgroundImage:\n        withPlaceholder && props.media.extension !== 'png'\n          ? `url(${media.placeholder})`\n          : null,\n    }\"\n    v-bind=\"media.attributes\"\n    :sizes=\"sizesAttribute\"\n    :loading=\"loading || media.attributes.loading\"\n    class=\"image\"\n  />\n</template>\n\n<style>\n.image {\n  /* background-size: 100% 100%; */\n  background-size: cover;\n}\n</style>\n","<script setup>\nimport { useStore } from \"vuex\";\n\nconst props = defineProps({\n  media: Object,\n  playsinline: Boolean,\n  controls: Boolean,\n});\n\nconst emit = defineEmits([\"loaded\"]);\n\nconst video = ref(null);\n\nconst target = ref(null);\n\nconst store = useStore();\n\nconst videoProps = computed(() => ({\n  ...props.media.attributes,\n  controls: props.controls,\n}));\n\nconst isPlaying = ref(\n  props.media.attributes.muted && props.media.attributes.autoplay,\n);\nconst progress = ref(0);\n\nconst { pause: pauseProgress, resume: resumeProgress } = useRafFn(() => {\n  if (!video.value) return;\n  progress.value = video.value.currentTime / video.value.duration;\n});\n\nconst handlePlay = () => {\n  if (props.media.attributes.loop && props.playsinline) return;\n\n  if (props.playsinline) {\n    isPlaying.value = !isPlaying.value;\n  } else {\n    // Display video in overlay....\n\n    store.dispatch(\"modals/open\", {\n      id: \"ModalVideo\",\n      data: {\n        data: props.media,\n        playsinline: true,\n      },\n    });\n  }\n};\n\nconst handleSeek = (e) => {\n  video.value.currentTime = e.target.value * video.value.duration;\n};\n\nconst handleVolume = (e) => {\n  video.value.volume = e.target.value;\n};\n\nwatch(isPlaying, () => {\n  if (!video.value) return;\n\n  if (isPlaying.value) {\n    video.value.play();\n    resumeProgress();\n  } else {\n    video.value.pause();\n    pauseProgress();\n  }\n});\n\nconst zeroPad = (x) => x.toString().padStart(2, \"0\");\n\nconst parseTime = (time) => {\n  const minutes = Math.floor(time / 60);\n  const seconds = Math.round(time - minutes * 60);\n\n  return `${zeroPad(minutes)}:${zeroPad(seconds)}`;\n};\n\nonMounted(() => {\n  emit(\"loaded\");\n});\n</script>\n\n<template>\n  <div class=\"video h-full w-full\" :class=\"[media.extension]\">\n    <div class=\"ui\" ref=\"target\" v-if=\"!playsinline && !media.attributes.loop\">\n      <button class=\"play-btn\" @click=\"handlePlay\" v-if=\"!isPlaying\">\n        <div class=\"icon\">\n          <ui-icons-play />\n        </div>\n      </button>\n\n      <!-- <div class=\"timeline\" v-if=\"media.attributes.controls\">\n        <div>{{ parseTime(video ? video.currentTime : 0) }}</div>\n        <div class=\"scrub\">\n          <input\n            type=\"range\"\n            @input=\"handleSeek\"\n            :value=\"progress\"\n            :style=\"{ '--progress': video?.currentTime / video?.duration }\"\n            min=\"0\"\n            max=\"1\"\n            step=\"0.0001\"\n          />\n        </div>\n        <div>{{ parseTime(video ? video.duration : 0) }}</div> -->\n\n      <!-- <div class=\"volume\">\n          <input\n            @input.prevent=\"handleVolume\"\n            :style=\"{ '--progress': video?.volume }\"\n            type=\"range\"\n            min=\"0\"\n            max=\"1\"\n            step=\"0.01\"\n          />\n        </div> -->\n      <!-- </div> -->\n    </div>\n\n    <video @click=\"handlePlay\" ref=\"video\" v-bind=\"videoProps\"></video>\n  </div>\n</template>\n\n<style scoped>\n.video {\n  position: relative;\n  display: flex;\n}\n\n.ui {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  pointer-events: none;\n}\n\n.ui > * {\n  pointer-events: auto;\n}\n\n.play-btn {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  background-color: rgba(0, 0, 0, 0.3);\n  transition: background 1s ease;\n}\n\n.play-btn:hover {\n  background: rgba(0, 0, 0, 0);\n}\n.play-btn:hover .icon {\n  opacity: 1;\n  transform: scale(1.5);\n  transition: transform 0.25s ease-out;\n}\n.play-btn .icon {\n  transition: transform 0.25s ease-out;\n  position: absolute;\n  width: 5%;\n  height: auto;\n  max-width: 50px;\n}\n\nvideo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n</style>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","emit","__emit","props","__props","customPoster","inject","poster","computed","aspectRatio","src","type","width","height","attributes","store","useStore","element","ref","statisticConsent","handlePlay","onMounted","focalPoint","x","y","sizesAttribute","mobileSize","desktopSize","video","target","videoProps","isPlaying","progress","pauseProgress","resumeProgress","useRafFn","watch"],"mappings":"uMAEIA,EAAY,CACZ,aACA,cACA,QAAW,YACX,gDALF,SAAAC,EAAAC,EAAAC,EAAA,QAO6DC,EAAA,EAAAC,EAAA,MAAAL,EAAAG,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,CAArDG,EAA8B,OAAA,CAAC,EAAA,0hBCNzC,MAAMC,EAAOC,EAEPC,EAAQC,EA2BRC,EAAeC,EAAO,eAAgB,IAAI,EAC1CC,EAASC,EAAS,IAClB,CAACL,EAAM,SAAW,CAACA,EAAM,QAAQ,OAAe,KAC7CE,GAAA,MAAAA,EAAc,IAAMA,EAAeF,EAAM,QAAQ,CAAC,CAC1D,EACKM,EAAcD,EAAS,IAAOL,EAAM,OAASA,EAAM,MAAS,IAAM,GAAG,EACxDK,EAAS,IAAM,CAChC,KAAM,CAAE,IAAAE,EAAK,KAAAC,EAAM,MAAAC,EAAO,OAAAC,EAAQ,GAAGC,GAAeX,EAC7CW,OAAAA,CACR,CAAA,EAED,MAAMC,EAAQC,EAAS,EAEjBC,EAAUC,EAAI,IAAI,EAClBC,EAAmBD,EAAI,EAAK,EAE5BE,EAAa,IAAM,CASJD,EAAA,MAAQ,OAAO,KAAK,qBAGlCA,EAAiB,MAQpBJ,EAAM,SAAS,cAAe,CAC5B,GAAI,aACJ,KAAM,CACJ,KAAMZ,EAAM,MACZ,YAAa,EAAA,CACf,CACD,EAbDY,EAAM,SAAS,cAAe,CAC5B,GAAI,cACJ,KAAM,CACJ,KAAM,CAAA,CAAC,CACT,CACD,CAUL,EAYA,OAAAM,EAAU,IAAM,CACdpB,EAAK,QAAQ,CAAA,CACd,83BCnFD,MAAME,EAAQC,EAORkB,EAAad,EAAS,IAAM,CAChC,GAAI,CAACL,EAAM,MAAM,WAAY,OAAO,KAEpC,KAAM,CAAE,EAAAoB,EAAG,EAAAC,CAAG,EAAGrB,EAAM,MAAM,WAE7B,MAAO,CACL,mBAAoB,GAAGoB,EAAI,GAAG,KAAKC,EAAI,GAAG,IAC1C,eAAgB,GAAGD,EAAI,GAAG,KAAKC,EAAI,GAAG,GACvC,CACH,CAAC,EAEKC,EAAiBjB,EAAS,IAAM,CACpC,KAAM,CAACkB,EAAYC,CAAW,EAAIxB,EAAM,MACxC,MAAO,sBAAsBuB,CAAU,OAAOC,CAAW,IAC3D,CAAC,2XCxBD,MAAMxB,EAAQC,EAMRH,EAAOC,EAEP0B,EAAQV,EAAI,IAAI,EAEhBW,EAASX,EAAI,IAAI,EAEjBH,EAAQC,EAAU,EAElBc,EAAatB,EAAS,KAAO,CACjC,GAAGL,EAAM,MAAM,WACf,SAAUA,EAAM,QAClB,EAAE,EAEI4B,EAAYb,EAChBf,EAAM,MAAM,WAAW,OAASA,EAAM,MAAM,WAAW,QACzD,EACM6B,EAAWd,EAAI,CAAC,EAEhB,CAAE,MAAOe,EAAe,OAAQC,CAAgB,EAAGC,EAAS,IAAM,CACjEP,EAAM,QACXI,EAAS,MAAQJ,EAAM,MAAM,YAAcA,EAAM,MAAM,SACzD,CAAC,EAEKR,EAAa,IAAM,CACnBjB,EAAM,MAAM,WAAW,MAAQA,EAAM,cAErCA,EAAM,YACR4B,EAAU,MAAQ,CAACA,EAAU,MAI7BhB,EAAM,SAAS,cAAe,CAC5B,GAAI,aACJ,KAAM,CACJ,KAAMZ,EAAM,MACZ,YAAa,EACd,CACP,CAAK,EAEL,EAUA,OAAAiC,EAAML,EAAW,IAAM,CAChBH,EAAM,QAEPG,EAAU,OACZH,EAAM,MAAM,KAAM,EAClBM,EAAgB,IAEhBN,EAAM,MAAM,MAAO,EACnBK,EAAe,GAEnB,CAAC,EAWDZ,EAAU,IAAM,CACdpB,EAAK,QAAQ,CACf,CAAC"}