{"version":3,"file":"PublicGuide.748ae300.js","sources":["../../../app/javascript/components/GuideCreationBanner.vue","../../../app/javascript/public/PublicGuide.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, defineProps } from \"vue\";\n\nimport Icon from \"@components/Icon.vue\";\nimport Button from \"@components/Button.vue\";\nimport { numberToHumanDuration } from \"@modules/helpers\";\n\nconst props = defineProps<{\n  creatorName: string;\n  recordingTime: number;\n  href: string;\n}>();\n\nconst humanRecordingTime = computed(() => {\n  const duration = props.recordingTime;\n  if (!duration) return null;\n  if (duration > 15 * 60) return null;\n\n  return numberToHumanDuration(duration).toLowerCase();\n});\n</script>\n\n<template>\n  <div\n    class=\"flex select-none flex-col items-center justify-center gap-4 bg-[#1f4dc1] !bg-colorful-backdrop p-10 py-16 text-center text-xl font-bold screen:shadow-lg\"\n  >\n    <div class=\"\">\n      <Icon icon=\"sparkles\" class=\"h-20 text-white/80\" />\n    </div>\n\n    <h2\n      class=\"bg-gradient-to-b from-white/100 to-white/50 bg-clip-text text-2xl font-bold tracking-tight text-transparent sm:text-3xl\"\n    >\n      <div>\n        <template v-if=\"humanRecordingTime\">\n          Created by {{ creatorName }} in {{ humanRecordingTime || \"a few minutes\" }}.<br />\n          An AI did all of the editing.\n        </template>\n        <template v-else>\n          {{ creatorName }} recorded this video.<br />\n          An AI did all of the editing.</template\n        >\n      </div>\n    </h2>\n\n    <div class=\"group flex items-center justify-center gap-2.5 text-sm font-normal text-white/80\">\n      <div class=\"\">made with</div>\n      <a\n        :href=\"`https://recordonce.com/?ref=share/{video.token}`\"\n        target=\"_blank\"\n        class=\"-m-1.5 flex items-center justify-center gap-1.5 rounded-lg p-1.5 pr-3 text-inherit transition-all hover:bg-white/10\"\n      >\n        <img src=\"@assets/images/Record-Once-icon-64x64px.svg\" class=\"block h-6 w-6\" />\n        <div class=\"font-bold tracking-tight\">Record Once</div>\n      </a>\n    </div>\n\n    <div class=\"mt-3\">\n      <Button\n        as=\"a\"\n        :href=\"href\"\n        target=\"_blank\"\n        :transparency=\"true\"\n        class=\"!cursor-pointer !border-white/[15%] !px-6 !py-4 text-sm transition-transform ease-in-out hover:scale-105\"\n        label=\"Show me how\"\n      />\n    </div>\n  </div>\n</template>\n","<template>\n  <div v-if=\"error\" class=\"flex grow items-center justify-center\">\n    <div class=\"text-red-500\">{{ error }}</div>\n  </div>\n  <div v-else id=\"PublicGuide\" class=\"text-xs sm:text-base\">\n    <header class=\"my-4 flex flex-col items-center gap-2 p-6 print:my-0\">\n      <h1\n        class=\"flex gap-2 bg-gradient-to-b from-black/90 to-black/50 bg-cover bg-clip-text text-center text-3xl font-extrabold tracking-tight text-transparent sm:text-4xl lg:py-1 lg:text-5xl\"\n      >\n        <Icon v-if=\"isLoading\" icon=\"spinner\" class=\"w-6\" />\n        {{ video?.name || \"Loading Guide…\" }}\n      </h1>\n      <div class=\"flex items-center text-black/40 max-sm:flex-col\">\n        <div class=\"mr-3\" :class=\"[video?.creatorName ? '' : isLoading ? 'opacity-0' : '']\">\n          Recorded by {{ video?.creatorName }}\n          <template v-if=\"humanRecordingTime\">in {{ humanRecordingTime }}</template>\n        </div>\n        <div v-if=\"video\" class=\"border-black/10 pl-3 sm:border-l\">\n          {{ pluralize(steps.length, \"step\") }}\n        </div>\n      </div>\n    </header>\n\n    <div class=\"flex justify-center print:hidden\">\n      <iframe\n        v-if=\"video\"\n        :src=\"video.embedUrl\"\n        frameborder=\"0\"\n        allowfullscreen\n        class=\"aspect-video w-full shadow-2xl lg:min-h-[300px] lg:max-w-4xl lg:overflow-hidden lg:rounded-xl\"\n        allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n      ></iframe>\n      <div\n        v-else\n        class=\"flex aspect-video w-full items-center justify-center bg-black/70 text-white shadow-2xl lg:min-h-[300px] lg:max-w-4xl lg:overflow-hidden lg:rounded-xl\"\n      >\n        <Icon v-if=\"isLoading\" icon=\"spinner\" class=\"w-6\" />\n      </div>\n    </div>\n\n    <h2\n      class=\"mt-16 bg-gradient-to-b from-black/90 to-black/50 bg-cover bg-clip-text text-center text-2xl font-extrabold tracking-tight text-transparent print:mt-0 print:hidden sm:text-3xl lg:py-1 lg:text-4xl\"\n    >\n      Step-by-Step Guide\n    </h2>\n\n    <Guide\n      v-if=\"video\"\n      id=\"Guide\"\n      :video=\"video\"\n      :video-dimensions=\"videoDimensions\"\n      :base-file-url=\"video.baseFileUrl\"\n      :actions=\"actionsForGuide\"\n      :voice-overs=\"voiceOvers\"\n      :selected-action-ids=\"[]\"\n      :show-chapter-navigation=\"false\"\n      class=\"w-full\"\n    />\n\n    <GuideCreationBanner\n      v-if=\"video\"\n      class=\"\"\n      :creator-name=\"video.creatorName\"\n      :recording-time=\"video.totalRecordingTime || 0\"\n      :href=\"`https://www.recordonce.com/?ref=guide/${video?.token}`\"\n    />\n\n    <footer v-if=\"false\" class=\"m-2 flex items-center justify-center gap-2.5 p-8\">\n      <div class=\"text-black/40\">created with</div>\n      <a\n        :href=\"`https://recordonce.com/?ref=guide/${video?.token}`\"\n        target=\"_blank\"\n        class=\"-m-1.5 flex items-center justify-center gap-1.5 rounded-lg p-1.5 pr-2.5 transition-all hover:bg-black/10\"\n      >\n        <img src=\"@assets/images/Record-Once-icon-64x64px.svg\" class=\"block h-6 w-6\" />\n        <div class=\"font-extrabold tracking-tight\">Record Once</div>\n      </a>\n    </footer>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport {\n  computed,\n  onMounted,\n  onBeforeMount,\n  onBeforeUnmount,\n  watch,\n  provide,\n  ref,\n  type Ref,\n  reactive,\n  defineProps,\n} from \"vue\";\n\nimport Guide from \"@guide/Guide.vue\";\nimport Icon from \"@components/Icon.vue\";\nimport GuideCreationBanner from \"@components/GuideCreationBanner.vue\";\nimport Video from \"@models/Video\";\nimport { Action, BrowserAction } from \"@models/ActionHierarchy\";\nimport VoiceOver from \"@models/VoiceOver\";\nimport { getErrorMessage } from \"@modules/errors\";\nimport { numberToHumanDuration, pluralize } from \"@modules/helpers\";\n\nconst props = defineProps<{\n  videoToken: string;\n}>();\n\nconst isLoading = ref(true);\nconst error: Ref<null | string> = ref(null);\n\nconst video = ref<Video | undefined>();\n// const actions = ref<Action[] | undefined>([]);\n// const voiceOvers = ref<VoiceOver[] | undefined>([]);\nconst actions = computed<Action[]>(() => {\n  if (!video.value) return [];\n  return Action.query().where(\"videoId\", video.value.id).orderBy(\"index\").all();\n});\nconst voiceOvers = computed<VoiceOver[]>(() => {\n  if (!video.value) return [];\n  return VoiceOver.queryForVideo(video.value.id).all();\n});\n\nonBeforeMount(async () => {\n  try {\n    video.value = await Video.fetch(props.videoToken);\n    if (!video.value) {\n      error.value = `404 - Video not found ${props.videoToken}`;\n      throw new Error(`404 - Video not found ${props.videoToken}`);\n    }\n    // actions.value = Action.query().where(\"videoId\", video.value.id).orderBy(\"index\").all();\n    // voiceOvers.value = VoiceOver.queryForVideo(video.value.id).all() as VoiceOver[];\n  } catch (err) {\n    error.value = getErrorMessage(err);\n    console.error(err);\n  }\n  isLoading.value = false;\n});\n\nconst visibleActions = computed(() => Action.getVisibleActions(actions.value));\nconst actionsForGuide = computed(() =>\n  visibleActions.value.filter((action) => action.type !== \"Pause\"),\n);\nconst steps = computed(() =>\n  actionsForGuide.value.filter((action) => action instanceof BrowserAction),\n);\n\nconst videoDimensions = computed(() => ({\n  width: video.value?.width || 1280,\n  height: video.value?.height || 720,\n}));\n\nconst humanRecordingTime = computed(() => {\n  if (!video.value) return null;\n\n  const duration = video.value.totalRecordingTime;\n  if (!duration) return null;\n  if (duration > 15 * 60) return null;\n\n  return numberToHumanDuration(duration).toLowerCase();\n});\n</script>\n"],"names":["humanRecordingTime","computed","duration","props","numberToHumanDuration","isLoading","ref","error","video","actions","Action","voiceOvers","VoiceOver","onBeforeMount","Video","err","getErrorMessage","visibleActions","actionsForGuide","action","steps","BrowserAction","videoDimensions","_a","_b"],"mappings":"2xCAaMA,EAAqBC,EAAS,IAAM,CACxC,MAAMC,EAAWC,EAAM,cAEvB,MADI,CAACD,GACDA,EAAW,GAAK,GAAW,KAExBE,EAAsBF,CAAQ,EAAE,aAAY,CACpD,80DCyFKG,EAAYC,EAAI,EAAI,EACpBC,EAA4BD,EAAI,IAAI,EAEpCE,EAAQF,IAGRG,EAAUR,EAAmB,IAC5BO,EAAM,MACJE,EAAO,MAAA,EAAQ,MAAM,UAAWF,EAAM,MAAM,EAAE,EAAE,QAAQ,OAAO,EAAE,IAAI,EADnD,EAE1B,EACKG,EAAaV,EAAsB,IAClCO,EAAM,MACJI,EAAU,cAAcJ,EAAM,MAAM,EAAE,EAAE,MADtB,EAE1B,EAEDK,EAAc,SAAY,CACpB,GAAA,CAEE,GADJL,EAAM,MAAQ,MAAMM,EAAM,MAAMX,EAAM,UAAU,EAC5C,CAACK,EAAM,MACH,MAAAD,EAAA,MAAQ,yBAAyBJ,EAAM,aACvC,IAAI,MAAM,yBAAyBA,EAAM,YAAY,QAItDY,GACDR,EAAA,MAAQS,EAAgBD,CAAG,EACjC,QAAQ,MAAMA,CAAG,CACnB,CACAV,EAAU,MAAQ,EAAA,CACnB,EAED,MAAMY,EAAiBhB,EAAS,IAAMS,EAAO,kBAAkBD,EAAQ,KAAK,CAAC,EACvES,EAAkBjB,EAAS,IAC/BgB,EAAe,MAAM,OAAQE,GAAWA,EAAO,OAAS,OAAO,CAAA,EAE3DC,EAAQnB,EAAS,IACrBiB,EAAgB,MAAM,OAAQC,GAAWA,aAAkBE,CAAa,CAAA,EAGpEC,EAAkBrB,EAAS,IAAO,SAAA,OACtC,QAAOsB,EAAAf,EAAM,QAAN,YAAAe,EAAa,QAAS,KAC7B,SAAQC,EAAAhB,EAAM,QAAN,YAAAgB,EAAa,SAAU,GAC/B,EAAA,EAEIxB,EAAqBC,EAAS,IAAM,CACxC,GAAI,CAACO,EAAM,MAAc,OAAA,KAEnB,MAAAN,EAAWM,EAAM,MAAM,mBAE7B,MADI,CAACN,GACDA,EAAW,GAAK,GAAW,KAExBE,EAAsBF,CAAQ,EAAE,aAAY,CACpD"}