{"version":3,"file":"StepSliderText-C-3qNbts.js","sources":["../../../app/javascript/src/components/Theme2/ProgressBar.vue","../../../app/javascript/src/components/ThreeVideoCarousel.vue","../../../app/javascript/src/components/StepSliderText.vue"],"sourcesContent":["<template>\n  <progress v-bind=\"$attrs\"></progress>\n</template>\n\n<style lang=\"scss\" scoped>\n$progress-radius: 2px;\n\nprogress[value] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: none;\n\n  height: 4px;\n  background: var(--progress-track-color, #30758233);\n  border-radius: $progress-radius;\n  transition: all 100ms linear;\n\n  &::-webkit-progress-value {\n    background: var(--progress-bar-color, $green-300);\n    border-radius: $progress-radius;\n  }\n\n  &::-webkit-progress-bar {\n    border-radius: $progress-radius;\n    background: var(--progress-track-color, #30758233);\n  }\n\n  &::-moz-progress-bar {\n    background: var(--progress-bar-color, $green-300);\n    border-radius: $progress-radius;\n  }\n}\n</style>","<template>\n  <div class=\"timeline\">\n    <template v-for=\"(v, i) in videos\" :key=\"i\">\n      <ProgressBar v-if=\"v.control\"\n                   :value=\"v.control.currentTime\"\n                   :max=\"v.control.duration\"/>\n    </template>\n  </div>\n\n  <div ref=\"container\" class=\"videos\">\n    <video ref=\"videoEls\"\n           muted\n           playsinline\n           :autoplay=\"v.position === 0\"\n           v-for=\"(v, i) in videos\" :key=\"i\"\n           :controls=\"v.position === 0\"\n           @ended.prevent=\"onVideoEnd(v)\"\n           @click.prevent=\"rotateToPosition(v.position)\"\n           :style=\"positionStyle(v.position)\"\n           :class=\"{ active: v.position === 0 }\"\n    />\n  </div>\n</template>\n\n<script setup>\nimport { computed, onMounted, ref, watchEffect } from \"vue\";\nimport ProgressBar from \"@/components/Theme2/ProgressBar.vue\";\nimport { useSwipe, useElementVisibility, until } from \"@vueuse/core\";\nimport { sleep } from \"@/utils/generalUtils.js\";\nimport { useVideoControls } from \"@/helpers/vueHelpers.js\";\n\nconst { v1, v2, v3 } = defineProps({ v1: String, v2: String, v3: String });\nconst container = ref(null);\nconst videoEls = ref([]);\nconst videos = ref([\n  { src: v1, position: +0, el: null, control: null },\n  { src: v2, position: +1, el: null, control: null },\n  { src: v3, position: -1, el: null, control: null },\n]);\nconst currentVideo = computed(() => videos.value.find(v => v.position === 0));\nconst { isSwiping, direction, lengthX } = useSwipe(container);\nconst moving = ref(false);\nconst transition = 300;\nconst containerVisible = useElementVisibility(container);\n\nonMounted(() => {\n  videos.value.forEach((v, i) => {\n    v.el = videoEls.value[i];\n    v.control = useVideoControls(v.el, { src: v.src });\n  });\n\n  until(containerVisible).toBeTruthy().then(playActiveVideo);\n});\n\nwatchEffect(() => {\n  if (!moving.value && isSwiping.value && Math.abs(lengthX.value) > 50) {\n    if (direction.value === 'left') rotateToRight();\n    if (direction.value === 'right') rotateToLeft();\n  }\n});\n\nfunction positionStyle(pos) {\n  const translateX = `calc(${100 * pos}% + ${20 * pos}px)`;\n  const scale = pos === 0 ? 1 : 0.735;\n  return {\n    zIndex: 100 - Math.abs(pos),\n    transform: `translateX(${translateX}) scale(${scale})`,\n    transformOrigin: pos < 0 ? 'right center' : 'left center',\n    transitionDuration: `${transition}ms`,\n  }\n}\n\nasync function rotateToLeft() {\n  moving.value = true;\n  videos.value.forEach(r => r.position = r.position < 1 ? r.position + 1 : -1);\n  playActiveVideo();\n  await sleep(transition);\n  moving.value = false;\n}\n\nasync function rotateToRight() {\n  moving.value = true;\n  videos.value.forEach(r => r.position = r.position > -1 ? r.position - 1 : 1);\n  playActiveVideo();\n  await sleep(transition);\n  moving.value = false;\n}\n\nfunction rotateToPosition(pos) {\n  if (pos > 0) rotateToRight();\n  if (pos < 0) rotateToLeft();\n}\n\nasync function playActiveVideo() {\n  currentVideo.value.control.mutedPlay();\n  videos.value.filter(v => v !== currentVideo.value).forEach(v => v.control.pause());\n}\n\nasync function onVideoEnd() {\n  rotateToRight();\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.timeline {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n\n  progress {\n    width: 100%;\n    max-width: 200px;\n  }\n\n  @include mobile {\n    gap: 4px;\n    padding: 0 20px;\n  }\n}\n\n.videos {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  user-select: none;\n}\n\nvideo {\n  width: 335px;\n  border-radius: 15px;\n  box-shadow: 0 4px 12px 0 rgba(29, 71, 79, 0.15);\n  position: absolute;\n  filter: brightness(0.5);\n\n  @include mobile {\n    width: 100%;\n    max-width: 80vw;\n  }\n\n  &.active {\n    position: static;\n    filter: brightness(1);\n  }\n}\n</style>","<template>\n  <FloatingContainer>\n    <div class=\"steps\">\n      <Button\n        v-for=\"(s, i) in steps.length\" :key=\"i\"\n        @click=\"step = i\"\n        :text=\"`Step ${s}`\"\n        :color=\"step === i ? 'blue' : ''\"\n      />\n    </div>\n  </FloatingContainer>\n\n  <div class=\"step-text-container\">\n    <transition v-for=\"(s, i) in steps\" :name=\"`slide-${direction}`\" :key=\"i\">\n      <div class=\"step-text\" v-if=\"step === i\">{{ s }}</div>\n    </transition>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watch } from \"vue\";\nimport Button from \"@/components/Theme2/Button.vue\";\nimport FloatingContainer from \"@/components/Containers/FloatingContainer.vue\";\n\nconst step = ref(0);\nconst { steps } = defineProps({ steps: Array });\nconst direction = ref('forward');\n\nwatch(step, (curr, prev) => direction.value = curr >= prev ? 'forward' : 'backward');\n</script>\n\n<style lang=\"scss\" scoped>\n.steps {\n  @include hide-scrollbar;\n\n  width: 100%;\n  gap: 20px;\n  display: flex;\n  margin-bottom: 48px;\n  white-space: nowrap;\n  overflow-x: auto;\n  justify-content: center;\n\n  @include mobile {\n    padding-inline: var(--site-px);\n    justify-content: flex-start;\n    gap: 12px;\n  }\n}\n\n.step-text-container {\n  position: relative;\n}\n\n.step-text {\n  text-align: center;\n  font-size: 32px;\n  line-height: 40px;\n  max-width: 600px;\n  margin-bottom: 48px;\n}\n\n.slide-forward, .slide-backward {\n  &-enter-active, &-leave-active {\n    transition-duration: 300ms;\n    transition-timing-function: ease-in;\n  }\n\n  &-enter-from, &-leave-to {\n    position: absolute;\n    top: 0;\n    opacity: 0;\n  }\n\n  &-enter-to, &-leave-from {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n\n.slide-forward-enter-from, .slide-backward-leave-to {\n  transform: translateX(100%);\n}\n\n.slide-forward-leave-to, .slide-backward-enter-from {\n  transform: translateX(-100%);\n}\n</style>"],"names":["_cache","transition","container","ref","videoEls","videos","__props","currentVideo","computed","v","isSwiping","direction","lengthX","useSwipe","moving","containerVisible","useElementVisibility","onMounted","i","useVideoControls","until","playActiveVideo","watchEffect","rotateToRight","rotateToLeft","positionStyle","pos","translateX","scale","r","sleep","rotateToPosition","onVideoEnd","step","watch","curr","prev"],"mappings":"6bACuCA,EAAA,kLCyCjCC,EAAa,mFAVnB,MAAMC,EAAYC,EAAI,IAAI,EACpBC,EAAWD,EAAI,EAAE,EACjBE,EAASF,EAAI,CACjB,CAAE,IAAKG,EAAA,GAAI,SAAU,EAAI,GAAI,KAAM,QAAS,IAAM,EAClD,CAAE,IAAKA,EAAA,GAAI,SAAU,EAAI,GAAI,KAAM,QAAS,IAAM,EAClD,CAAE,IAAKA,EAAA,GAAI,SAAU,GAAI,GAAI,KAAM,QAAS,IAAM,CACpD,CAAC,EACKC,EAAeC,EAAS,IAAMH,EAAO,MAAM,KAAKI,GAAKA,EAAE,WAAa,CAAC,CAAC,EACtE,CAAE,UAAAC,EAAW,UAAAC,EAAW,QAAAC,CAAO,EAAKC,EAASX,CAAS,EACtDY,EAASX,EAAI,EAAK,EAElBY,EAAmBC,EAAqBd,CAAS,EAEvDe,EAAU,IAAM,CACdZ,EAAO,MAAM,QAAQ,CAACI,EAAGS,IAAM,CAC7BT,EAAE,GAAKL,EAAS,MAAMc,CAAC,EACvBT,EAAE,QAAUU,EAAiBV,EAAE,GAAI,CAAE,IAAKA,EAAE,IAAK,CACrD,CAAG,EAEDW,EAAML,CAAgB,EAAE,WAAU,EAAG,KAAKM,CAAe,CAC3D,CAAC,EAEDC,EAAY,IAAM,CACZ,CAACR,EAAO,OAASJ,EAAU,OAAS,KAAK,IAAIE,EAAQ,KAAK,EAAI,KAC5DD,EAAU,QAAU,QAAQY,EAAe,EAC3CZ,EAAU,QAAU,SAASa,EAAc,EAEnD,CAAC,EAED,SAASC,EAAcC,EAAK,CAC1B,MAAMC,EAAa,QAAQ,IAAMD,CAAG,OAAO,GAAKA,CAAG,MAC7CE,EAAQF,IAAQ,EAAI,EAAI,KAC9B,MAAO,CACL,OAAQ,IAAM,KAAK,IAAIA,CAAG,EAC1B,UAAW,cAAcC,CAAU,WAAWC,CAAK,IACnD,gBAAiBF,EAAM,EAAI,eAAiB,cAC5C,mBAAoB,GAAGzB,CAAU,IACrC,CACA,CAEA,eAAeuB,GAAe,CAC5BV,EAAO,MAAQ,GACfT,EAAO,MAAM,QAAQwB,GAAKA,EAAE,SAAWA,EAAE,SAAW,EAAIA,EAAE,SAAW,EAAI,EAAE,EAC3ER,EAAiB,EACjB,MAAMS,EAAM7B,CAAU,EACtBa,EAAO,MAAQ,EACjB,CAEA,eAAeS,GAAgB,CAC7BT,EAAO,MAAQ,GACfT,EAAO,MAAM,QAAQwB,GAAKA,EAAE,SAAWA,EAAE,SAAW,GAAKA,EAAE,SAAW,EAAI,CAAC,EAC3ER,EAAiB,EACjB,MAAMS,EAAM7B,CAAU,EACtBa,EAAO,MAAQ,EACjB,CAEA,SAASiB,EAAiBL,EAAK,CACzBA,EAAM,GAAGH,EAAe,EACxBG,EAAM,GAAGF,EAAc,CAC7B,CAEA,eAAeH,GAAkB,CAC/Bd,EAAa,MAAM,QAAQ,UAAW,EACtCF,EAAO,MAAM,OAAOI,GAAKA,IAAMF,EAAa,KAAK,EAAE,QAAQE,GAAKA,EAAE,QAAQ,MAAK,CAAE,CACnF,CAEA,eAAeuB,GAAa,CAC1BT,EAAe,CACjB,wwBC5EA,MAAMU,EAAO9B,EAAI,CAAC,EAEZQ,EAAYR,EAAI,SAAS,EAE/B,OAAA+B,EAAMD,EAAM,CAACE,EAAMC,IAASzB,EAAU,MAAQwB,GAAQC,EAAO,UAAY,UAAU"}