{"version":3,"file":"PublicPlayer.69254b91.js","sources":["../../../app/assets/images/Record-Once-logo-405x64px-light.svg","../../../app/javascript/components/PlayerControls.vue","../../../app/javascript/components/PlayerDebugger.vue","../../../app/javascript/components/timeline/PublicPlayerTimelineItem.vue","../../../app/javascript/components/PublicPlayerTimeline.vue","../../../node_modules/rrweb-snapshot/dist/rrweb-snapshot.js","../../../app/javascript/modules/event_asset_extractor.ts","../../../app/javascript/components/PreloadStyleheetsFromEvents.vue","../../../app/javascript/modules/beep.ts","../../../app/javascript/public/PublicPlayer.vue"],"sourcesContent":["export default \"__VITE_ASSET__fc6474c2__\"","<script setup lang=\"ts\">\nimport { computed, inject, ref, watch } from \"vue\";\nimport VoiceOver from \"@models/VoiceOver\";\nimport { usePlayerControls } from \"@modules/player_controls\";\nimport { formatSecondsAsString } from \"@modules/helpers\";\nimport { Action } from \"@models/ActionHierarchy\";\nimport { Language } from \"@models/Video\";\nimport Icon from \"@components/Icon.vue\";\nimport SubtitleIcon from \"@components/SubtitleIcon.vue\";\n\nconst props = defineProps<{\n  videoId: number;\n  currentActionId: string | null;\n  isPlaying: boolean;\n  disabled: boolean;\n  allowFullScreen: boolean;\n  isFullScreen: boolean;\n  videoRuntime: number;\n  actions: Action[];\n  voiceOvers: VoiceOver[];\n  currentLanguageCode?: string;\n  languages?: Language[];\n}>();\n\nconst emit = defineEmits<{\n  (e: \"jump-to-action-id\", id: string): void;\n  (e: \"play\"): void;\n  (e: \"pause\"): void;\n  (e: \"toggle-full-screen\"): void;\n  (e: \"open-about-screen\"): void;\n  (e: \"switch-language\", code: string): void;\n}>();\n\nconst {\n  muted,\n  toggleMuted,\n  videoHasSubtitles,\n  subtitlesEnabled,\n  toggleSubtitles,\n  firstAction,\n  currentAction,\n  currentActionIndex,\n  previousAction,\n  nextAction,\n  elapsedTime,\n  formattedElapsedTime,\n  formattedRemainingTime,\n  goTo,\n} = usePlayerControls(props, emit);\n\nconst status = computed(() => {\n  if (props.isPlaying) return \"playing\";\n  return currentActionIndex.value === props.actions.length - 1 ? \"completed\" : \"paused\";\n});\n\nconst toggleButtonIcon = computed(() => {\n  if (status.value === \"completed\") {\n    return \"arrow.counterclockwise:bold\";\n  }\n  if (status.value === \"playing\") return \"pause.fill\";\n  return \"play.fill\";\n});\n\nconst toggleLabel = computed(() => {\n  if (status.value === \"completed\") {\n    return \"Rewind\";\n  }\n  if (status.value === \"playing\") return \"Pause\";\n  return \"Play\";\n});\n\nconst formattedVideoRuntime = computed(() => formatSecondsAsString(props.videoRuntime));\n\nconst languageCode = ref(props.currentLanguageCode);\nconst sortedLanguages = computed(() =>\n  [...(props.languages || [])].sort((a, b) => a.name.localeCompare(b.name)),\n);\nwatch(languageCode, (newLanguageCode) => {\n  if (newLanguageCode) emit(\"switch-language\", newLanguageCode);\n});\n</script>\n\n<template>\n  <div\n    class=\"flex h-8 justify-between px-3 pb-2 text-sm text-white drop-shadow-sm xs:h-8 sm:h-12 sm:text-xl md:h-14\"\n  >\n    <div class=\"flex items-center gap-0\">\n      <button\n        class=\"flex h-full w-8 items-center justify-center rounded text-4xl outline-none ring-white/20 transition-all hover:scale-125 focus-visible:ring disabled:text-white/30 sm:w-10 md:w-12\"\n        :disabled=\"disabled || actions.length === 0\"\n        :title=\"toggleLabel\"\n        @click.stop=\"isPlaying ? $emit('pause') : $emit('play')\"\n      >\n        <!--\n        The play icon is an arrow to the right, so we should visually move it to the right to\n        make it appear centered _visually_.\n        -->\n        <Icon\n          :icon=\"toggleButtonIcon\"\n          :class=\"[\n            status === 'paused' ? 'relative left-0.5' : '',\n            status === 'completed' ? 'w-6 xs:w-7 sm:w-9' : 'w-5 xs:w-6 sm:w-8',\n          ]\"\n          class=\"\"\n        />\n      </button>\n\n      <button\n        class=\"hidden h-full w-8 items-center justify-center rounded outline-none ring-white/20 transition-all hover:scale-150 focus-visible:ring disabled:text-white/30 max-[290px]:hidden xs:flex sm:w-10 md:w-12\"\n        title=\"Previous step\"\n        :disabled=\"disabled || !previousAction\"\n        @click.stop=\"previousAction && goTo(previousAction)\"\n      >\n        <Icon icon=\"backward.fill\" class=\"w-3 xs:w-4 sm:w-6\" />\n      </button>\n\n      <button\n        class=\"hidden h-full w-8 items-center justify-center rounded outline-none ring-white/20 transition-all hover:scale-150 focus-visible:ring disabled:text-white/30 max-[290px]:hidden xs:flex sm:w-10 md:w-12\"\n        title=\"Previous step\"\n        :disabled=\"disabled || !nextAction\"\n        @click.stop=\"nextAction && goTo(nextAction)\"\n      >\n        <Icon icon=\"forward.fill\" class=\"w-3 xs:w-4 sm:w-6\" />\n      </button>\n\n      <button\n        class=\"flex h-full w-8 items-center justify-center rounded outline-none ring-white/20 transition-all hover:scale-150 focus-visible:ring disabled:text-white/30 sm:w-10 md:w-12\"\n        :class=\"muted ? 'relative -left-0.5' : ''\"\n        :title=\"muted ? 'Unmute' : 'Mute'\"\n        :disabled=\"disabled\"\n        @click.stop=\"toggleMuted\"\n      >\n        <font-awesome-icon :icon=\"muted ? 'volume-mute' : 'volume-up'\" class=\"w-3 xs:w-4 sm:w-6\" />\n      </button>\n\n      <div class=\"flex items-center gap-1 pl-2 text-xs max-[350px]:hidden sm:text-base\">\n        <div class=\"text-right max-[380px]:hidden\">{{ formattedElapsedTime }}</div>\n        <div class=\"text-white/60 max-[380px]:hidden\">/</div>\n        <div class=\"text-white/60 max-[380px]:hidden\">{{ formattedVideoRuntime }}</div>\n        <div class=\"min-[380px]:hidden\">{{ formattedRemainingTime }}</div>\n      </div>\n    </div>\n\n    <div class=\"flex items-center\" :languages=\"sortedLanguages\">\n      <label\n        v-if=\"sortedLanguages.length > 1\"\n        class=\"relative flex h-full w-8 items-center justify-center rounded outline-none ring-white/20 transition-all hover:scale-150 focus-visible:ring disabled:text-white/30 sm:w-10 md:w-12\"\n        title=\"Language\"\n        @click.stop\n      >\n        <Icon icon=\"globe\" class=\"w-3 xs:w-3.5 sm:w-5\" />\n        <select v-model=\"languageCode\" class=\"absolute inset-0 opacity-0\">\n          <option v-for=\"language in sortedLanguages\" :key=\"language.code\" :value=\"language.code\">\n            {{ language.name }}\n          </option>\n        </select>\n      </label>\n\n      <button\n        class=\"flex h-full w-8 items-center justify-center rounded outline-none ring-white/20 transition-all hover:scale-150 focus-visible:ring disabled:text-white/30 sm:w-10 md:w-12\"\n        :title=\"\n          videoHasSubtitles\n            ? subtitlesEnabled\n              ? 'Hide Subtitles/closed captions'\n              : 'Show Subtitles/closed captions'\n            : 'This video doesn’t have any subtitles'\n        \"\n        :disabled=\"disabled || !videoHasSubtitles\"\n        @click.stop=\"toggleSubtitles\"\n      >\n        <SubtitleIcon :enabled=\"subtitlesEnabled\" class=\"w-3 xs:w-3.5 sm:w-5\" />\n      </button>\n\n      <button\n        class=\"flex h-full w-8 items-center justify-center rounded outline-none ring-white/20 transition-all hover:scale-150 focus-visible:ring disabled:text-white/30 max-[210px]:hidden sm:w-10 md:w-12\"\n        title=\"About this video\"\n        :disabled=\"disabled\"\n        @click.stop=\"emit('open-about-screen')\"\n      >\n        <Icon icon=\"info\" class=\"w-3 xs:w-3.5 sm:w-5\" />\n      </button>\n\n      <button\n        v-if=\"allowFullScreen\"\n        class=\"flex h-full w-8 items-center justify-center rounded outline-none ring-white/20 transition-all hover:scale-150 focus-visible:ring disabled:text-white/30 sm:w-10 md:w-12\"\n        :title=\"isFullScreen ? 'Exit full screen' : 'Full screen'\"\n        :disabled=\"disabled\"\n        @click.stop=\"$emit('toggle-full-screen')\"\n      >\n        <font-awesome-icon :icon=\"isFullScreen ? 'compress' : 'expand'\" class=\"w-3 xs:w-4 sm:w-6\" />\n      </button>\n    </div>\n  </div>\n</template>\n","<script lang=\"ts\">\n// NOTES + TODOs:\n// - the events array in the Editor is not reactive for performance -> see Editor#created()\n\nimport { defineComponent } from \"vue\";\nimport Video from \"../models/Video\";\nimport { Action } from \"../models/ActionHierarchy\";\n\nexport default defineComponent({\n  components: {},\n  props: {\n    videoId: {\n      type: Number,\n      required: true,\n    },\n    currentActionId: {\n      type: String,\n      required: false,\n      default: null,\n    },\n    isLoading: {\n      type: Boolean,\n      default: false,\n    },\n    isPlaying: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: [\"jump-to-action-id\", \"play\", \"pause\"],\n  computed: {\n    video(): Video | null {\n      return Video.query().withAll().find(this.videoId);\n    },\n    currentAction(): Action | null {\n      if (this.currentActionId) return Action.query().withAll().find(this.currentActionId);\n      return null;\n    },\n  },\n});\n</script>\n\n<template>\n  <div v-if=\"video\" class=\"player-debugger\">\n    <button :disabled=\"isPlaying\" @click=\"$emit('play')\">Play</button>\n    <button :disabled=\"!isPlaying\" @click=\"$emit('pause')\">Pause</button>\n    <ol start=\"0\">\n      <li\n        v-for=\"action in video.actions\"\n        :key=\"action.id\"\n        :style=\"currentActionId === action.id ? { backgroundColor: '#666' } : {}\"\n      >\n        <button @click=\"$emit('jump-to-action-id', action.id)\">Jump</button>\n        <strong>&lt;{{ action.type }}&gt;</strong>: {{ action.id }}, {{ action.timings.total }} sec\n        <div v-if=\"action.voiceOver\">voiceOver: {{ action.voiceOver }}</div>\n      </li>\n    </ol>\n    <pre>\ncurrent voiceOver audio: {{\n        currentAction && currentAction.voiceOver && currentAction.voiceOver.selectedAudioRecording\n      }}\n    </pre>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from \"vue\";\n\nimport PureSlide from \"@components/PureSlide.vue\";\nimport type { PureSlideProps } from \"@components/PureSlide.vue\";\n\nconst props = defineProps<{\n  actionId: string;\n  startsAt: string;\n  description: string;\n  screenshotUrl?: string;\n  slide?: PureSlideProps;\n  inThePast: boolean;\n  isCurrent: boolean;\n  alignHover: \"left\" | \"center\" | \"right\";\n}>();\n\nconst emit = defineEmits<{\n  (e: \"click\"): void;\n}>();\n\nconst inTheFuture = computed(() => !props.inThePast);\n</script>\n\n<template>\n  <button\n    class=\"group/item relative flex h-7 cursor-pointer items-center px-px outline-none\"\n    :aria-label=\"description\"\n    :aria-describedby=\"actionId\"\n    :data-starts-at=\"startsAt\"\n    @click.stop=\"emit('click')\"\n  >\n    <div\n      class=\"w-full rounded-sm drop-shadow-sm transition-all\"\n      :class=\"[\n        isCurrent\n          ? 'h-1 sm:h-2'\n          : 'h-0.5 group-hover/item:h-1.5 group-focus-visible/item:h-1.5 sm:h-1 group-hover/item:sm:h-2.5 group-focus-visible/item:sm:h-2.5',\n        !isCurrent && inTheFuture\n          ? 'bg-white/40 group-hover/item:bg-white/90 group-focus-visible/item:bg-white/90'\n          : 'bg-white/90',\n      ]\"\n    ></div>\n\n    <!-- show time on hover: -->\n    <div\n      class=\"absolute -top-2 left-0 text-xs text-white opacity-0 drop-shadow transition-all group-hover/item:opacity-100 group-focus-visible/item:opacity-100\"\n    >\n      {{ startsAt }}\n    </div>\n\n    <!-- show thumbnail on hover: -->\n    <div\n      v-if=\"screenshotUrl || slide\"\n      :id=\"actionId\"\n      class=\"pointer-events-none absolute bottom-10 z-50 my-auto hidden aspect-video w-80 items-center justify-center overflow-hidden rounded-md bg-neutral-300 text-left text-neutral-500 shadow-lg ring-1 ring-black/10 group-hover/item:flex group-focus-visible/item:flex\"\n      :class=\"{\n        'right-0': alignHover === 'right',\n        'left-1/2 -translate-x-1/2': alignHover === 'center',\n        'left-0': alignHover === 'left',\n      }\"\n      role=\"tooltip\"\n    >\n      <img v-if=\"screenshotUrl\" :src=\"screenshotUrl\" alt=\"\" loading=\"lazy\" decoding=\"async\" />\n      <PureSlide\n        v-else-if=\"slide\"\n        v-bind=\"{ ...slide, disablePointerEvents: true }\"\n        class=\"grow bg-white/30\"\n      />\n    </div>\n  </button>\n</template>\n","<script setup lang=\"ts\">\nimport VoiceOver from \"@models/VoiceOver\";\nimport { Action } from \"@models/ActionHierarchy\";\nimport { useCachedTimeBasedTimeline } from \"@modules/cached_time_based_timeline\";\nimport { formatSecondsAsString } from \"@modules/helpers\";\nimport PublicPlayerTimelineItem from \"@timeline/PublicPlayerTimelineItem.vue\";\n\nconst props = defineProps<{\n  currentActionId?: string;\n  selectedActionIds?: string[];\n  selectedVoiceOverIds?: string[];\n  actions: Action[];\n  voiceOvers: VoiceOver[];\n  videoRuntime: number;\n  videoDimensions: { width: number; height: number };\n  baseFileUrl: string;\n  logoUrl?: string | undefined;\n}>();\n\nconst emit = defineEmits<{\n  (e: \"jump-to-action-id\", id: string): void;\n  (e: \"select-voice-over-id\", id: string): void;\n}>();\n\nfunction selectActionId(id) {\n  emit(\"jump-to-action-id\", id);\n}\n\nconst { groups, getGroupWidthPercentage } = useCachedTimeBasedTimeline(props);\n\nfunction calculateStartAt(actionId): number {\n  const allGroups = groups.value;\n  let startAt = 0;\n  for (const group of allGroups) {\n    for (const action of group.actions) {\n      if (action.id === actionId) {\n        return startAt;\n      }\n      startAt += action.duration;\n    }\n  }\n  return startAt;\n}\n</script>\n\n<template>\n  <div class=\"flex select-none\">\n    <div class=\"relative grow pb-px\">\n      <ol class=\"flex\">\n        <li\n          v-for=\"group in groups\"\n          :key=\"`group-${group.id}`\"\n          class=\"flex flex-wrap\"\n          :style=\"{ width: getGroupWidthPercentage(group.duration) }\"\n        >\n          <PublicPlayerTimelineItem\n            v-for=\"action in group.actions\"\n            :key=\"action.id\"\n            :style=\"{\n              'flex-grow': action.duration,\n            }\"\n            :in-the-past=\"action.inThePast\"\n            :is-current=\"action.current\"\n            :align-hover=\"action.alignHover\"\n            :screenshot-url=\"action.screenshotUrl\"\n            :slide=\"action.slide\"\n            :description=\"action.description\"\n            :action-id=\"action.id\"\n            :starts-at=\"formatSecondsAsString(calculateStartAt(action.id))\"\n            @click.capture=\"selectActionId(action.id)\"\n          />\n        </li>\n      </ol>\n    </div>\n  </div>\n</template>\n","var __defProp = Object.defineProperty;\nvar __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;\nvar __publicField = (obj, key, value) => {\n  __defNormalProp(obj, typeof key !== \"symbol\" ? key + \"\" : key, value);\n  return value;\n};\nvar NodeType = /* @__PURE__ */ ((NodeType2) => {\n  NodeType2[NodeType2[\"Document\"] = 0] = \"Document\";\n  NodeType2[NodeType2[\"DocumentType\"] = 1] = \"DocumentType\";\n  NodeType2[NodeType2[\"Element\"] = 2] = \"Element\";\n  NodeType2[NodeType2[\"Text\"] = 3] = \"Text\";\n  NodeType2[NodeType2[\"CDATA\"] = 4] = \"CDATA\";\n  NodeType2[NodeType2[\"Comment\"] = 5] = \"Comment\";\n  return NodeType2;\n})(NodeType || {});\nfunction isElement(n) {\n  return n.nodeType === n.ELEMENT_NODE;\n}\nfunction isShadowRoot(n) {\n  const host = n == null ? void 0 : n.host;\n  return Boolean((host == null ? void 0 : host.shadowRoot) === n);\n}\nfunction isNativeShadowDom(shadowRoot) {\n  return Object.prototype.toString.call(shadowRoot) === \"[object ShadowRoot]\";\n}\nfunction fixBrowserCompatibilityIssuesInCSS(cssText) {\n  if (cssText.includes(\" background-clip: text;\") && !cssText.includes(\" -webkit-background-clip: text;\")) {\n    cssText = cssText.replace(\n      /\\sbackground-clip:\\s*text;/g,\n      \" -webkit-background-clip: text; background-clip: text;\"\n    );\n  }\n  return cssText;\n}\nfunction escapeImportStatement(rule) {\n  const { cssText } = rule;\n  if (cssText.split('\"').length < 3)\n    return cssText;\n  const statement = [\"@import\", `url(${JSON.stringify(rule.href)})`];\n  if (rule.layerName === \"\") {\n    statement.push(`layer`);\n  } else if (rule.layerName) {\n    statement.push(`layer(${rule.layerName})`);\n  }\n  if (rule.supportsText) {\n    statement.push(`supports(${rule.supportsText})`);\n  }\n  if (rule.media.length) {\n    statement.push(rule.media.mediaText);\n  }\n  return statement.join(\" \") + \";\";\n}\nfunction stringifyStylesheet(s) {\n  try {\n    const rules = s.rules || s.cssRules;\n    return rules ? fixBrowserCompatibilityIssuesInCSS(\n      Array.from(rules, stringifyRule).join(\"\")\n    ) : null;\n  } catch (error) {\n    return null;\n  }\n}\nfunction stringifyRule(rule) {\n  let importStringified;\n  if (isCSSImportRule(rule)) {\n    try {\n      importStringified = // for same-origin stylesheets,\n      // we can access the imported stylesheet rules directly\n      stringifyStylesheet(rule.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement\n      escapeImportStatement(rule);\n    } catch (error) {\n    }\n  } else if (isCSSStyleRule(rule) && rule.selectorText.includes(\":\")) {\n    return fixSafariColons(rule.cssText);\n  }\n  return importStringified || rule.cssText;\n}\nfunction fixSafariColons(cssStringified) {\n  const regex = /(\\[(?:[\\w-]+)[^\\\\])(:(?:[\\w-]+)\\])/gm;\n  return cssStringified.replace(regex, \"$1\\\\$2\");\n}\nfunction isCSSImportRule(rule) {\n  return \"styleSheet\" in rule;\n}\nfunction isCSSStyleRule(rule) {\n  return \"selectorText\" in rule;\n}\nclass Mirror {\n  constructor() {\n    __publicField(this, \"idNodeMap\", /* @__PURE__ */ new Map());\n    __publicField(this, \"nodeMetaMap\", /* @__PURE__ */ new WeakMap());\n  }\n  getId(n) {\n    var _a;\n    if (!n)\n      return -1;\n    const id = (_a = this.getMeta(n)) == null ? void 0 : _a.id;\n    return id ?? -1;\n  }\n  getNode(id) {\n    return this.idNodeMap.get(id) || null;\n  }\n  getIds() {\n    return Array.from(this.idNodeMap.keys());\n  }\n  getMeta(n) {\n    return this.nodeMetaMap.get(n) || null;\n  }\n  // removes the node from idNodeMap\n  // doesn't remove the node from nodeMetaMap\n  removeNodeFromMap(n) {\n    const id = this.getId(n);\n    this.idNodeMap.delete(id);\n    if (n.childNodes) {\n      n.childNodes.forEach(\n        (childNode) => this.removeNodeFromMap(childNode)\n      );\n    }\n  }\n  has(id) {\n    return this.idNodeMap.has(id);\n  }\n  hasNode(node) {\n    return this.nodeMetaMap.has(node);\n  }\n  add(n, meta) {\n    const id = meta.id;\n    this.idNodeMap.set(id, n);\n    this.nodeMetaMap.set(n, meta);\n  }\n  replace(id, n) {\n    const oldNode = this.getNode(id);\n    if (oldNode) {\n      const meta = this.nodeMetaMap.get(oldNode);\n      if (meta)\n        this.nodeMetaMap.set(n, meta);\n    }\n    this.idNodeMap.set(id, n);\n  }\n  reset() {\n    this.idNodeMap = /* @__PURE__ */ new Map();\n    this.nodeMetaMap = /* @__PURE__ */ new WeakMap();\n  }\n}\nfunction createMirror() {\n  return new Mirror();\n}\nfunction maskInputValue({\n  element,\n  maskInputOptions,\n  tagName,\n  type,\n  value,\n  maskInputFn\n}) {\n  let text = value || \"\";\n  const actualType = type && toLowerCase(type);\n  if (maskInputOptions[tagName.toLowerCase()] || actualType && maskInputOptions[actualType]) {\n    if (maskInputFn) {\n      text = maskInputFn(text, element);\n    } else {\n      text = \"*\".repeat(text.length);\n    }\n  }\n  return text;\n}\nfunction toLowerCase(str) {\n  return str.toLowerCase();\n}\nconst ORIGINAL_ATTRIBUTE_NAME = \"__rrweb_original__\";\nfunction is2DCanvasBlank(canvas) {\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx)\n    return true;\n  const chunkSize = 50;\n  for (let x = 0; x < canvas.width; x += chunkSize) {\n    for (let y = 0; y < canvas.height; y += chunkSize) {\n      const getImageData = ctx.getImageData;\n      const originalGetImageData = ORIGINAL_ATTRIBUTE_NAME in getImageData ? getImageData[ORIGINAL_ATTRIBUTE_NAME] : getImageData;\n      const pixelBuffer = new Uint32Array(\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access\n        originalGetImageData.call(\n          ctx,\n          x,\n          y,\n          Math.min(chunkSize, canvas.width - x),\n          Math.min(chunkSize, canvas.height - y)\n        ).data.buffer\n      );\n      if (pixelBuffer.some((pixel) => pixel !== 0))\n        return false;\n    }\n  }\n  return true;\n}\nfunction isNodeMetaEqual(a, b) {\n  if (!a || !b || a.type !== b.type)\n    return false;\n  if (a.type === NodeType.Document)\n    return a.compatMode === b.compatMode;\n  else if (a.type === NodeType.DocumentType)\n    return a.name === b.name && a.publicId === b.publicId && a.systemId === b.systemId;\n  else if (a.type === NodeType.Comment || a.type === NodeType.Text || a.type === NodeType.CDATA)\n    return a.textContent === b.textContent;\n  else if (a.type === NodeType.Element)\n    return a.tagName === b.tagName && JSON.stringify(a.attributes) === JSON.stringify(b.attributes) && a.isSVG === b.isSVG && a.needBlock === b.needBlock;\n  return false;\n}\nfunction getInputType(element) {\n  const type = element.type;\n  return element.hasAttribute(\"data-rr-is-password\") ? \"password\" : type ? (\n    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n    toLowerCase(type)\n  ) : null;\n}\nfunction extractFileExtension(path, baseURL) {\n  let url;\n  try {\n    url = new URL(path, baseURL ?? window.location.href);\n  } catch (err) {\n    return null;\n  }\n  const regex = /\\.([0-9a-z]+)(?:$)/i;\n  const match = url.pathname.match(regex);\n  return (match == null ? void 0 : match[1]) ?? null;\n}\nlet _id = 1;\nconst tagNameRegex = new RegExp(\"[^a-z0-9-_:]\");\nconst IGNORED_NODE = -2;\nfunction genId() {\n  return _id++;\n}\nfunction getValidTagName(element) {\n  if (element instanceof HTMLFormElement) {\n    return \"form\";\n  }\n  const processedTagName = toLowerCase(element.tagName);\n  if (tagNameRegex.test(processedTagName)) {\n    return \"div\";\n  }\n  return processedTagName;\n}\nfunction extractOrigin(url) {\n  let origin = \"\";\n  if (url.indexOf(\"//\") > -1) {\n    origin = url.split(\"/\").slice(0, 3).join(\"/\");\n  } else {\n    origin = url.split(\"/\")[0];\n  }\n  origin = origin.split(\"?\")[0];\n  return origin;\n}\nlet canvasService;\nlet canvasCtx;\nconst URL_IN_CSS_REF = /url\\((?:(')([^']*)'|(\")(.*?)\"|([^)]*))\\)/gm;\nconst URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\\/\\//i;\nconst URL_WWW_MATCH = /^www\\..*/i;\nconst DATA_URI = /^(data:)([^,]*),(.*)/i;\nfunction absoluteToStylesheet(cssText, href) {\n  return (cssText || \"\").replace(\n    URL_IN_CSS_REF,\n    (origin, quote1, path1, quote2, path2, path3) => {\n      const filePath = path1 || path2 || path3;\n      const maybeQuote = quote1 || quote2 || \"\";\n      if (!filePath) {\n        return origin;\n      }\n      if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) {\n        return `url(${maybeQuote}${filePath}${maybeQuote})`;\n      }\n      if (DATA_URI.test(filePath)) {\n        return `url(${maybeQuote}${filePath}${maybeQuote})`;\n      }\n      if (filePath[0] === \"/\") {\n        return `url(${maybeQuote}${extractOrigin(href) + filePath}${maybeQuote})`;\n      }\n      const stack = href.split(\"/\");\n      const parts = filePath.split(\"/\");\n      stack.pop();\n      for (const part of parts) {\n        if (part === \".\") {\n          continue;\n        } else if (part === \"..\") {\n          stack.pop();\n        } else {\n          stack.push(part);\n        }\n      }\n      return `url(${maybeQuote}${stack.join(\"/\")}${maybeQuote})`;\n    }\n  );\n}\nconst SRCSET_NOT_SPACES = /^[^ \\t\\n\\r\\u000c]+/;\nconst SRCSET_COMMAS_OR_SPACES = /^[, \\t\\n\\r\\u000c]+/;\nfunction getAbsoluteSrcsetString(doc, attributeValue) {\n  if (attributeValue.trim() === \"\") {\n    return attributeValue;\n  }\n  let pos = 0;\n  function collectCharacters(regEx) {\n    let chars;\n    const match = regEx.exec(attributeValue.substring(pos));\n    if (match) {\n      chars = match[0];\n      pos += chars.length;\n      return chars;\n    }\n    return \"\";\n  }\n  const output = [];\n  while (true) {\n    collectCharacters(SRCSET_COMMAS_OR_SPACES);\n    if (pos >= attributeValue.length) {\n      break;\n    }\n    let url = collectCharacters(SRCSET_NOT_SPACES);\n    if (url.slice(-1) === \",\") {\n      url = absoluteToDoc(doc, url.substring(0, url.length - 1));\n      output.push(url);\n    } else {\n      let descriptorsStr = \"\";\n      url = absoluteToDoc(doc, url);\n      let inParens = false;\n      while (true) {\n        const c = attributeValue.charAt(pos);\n        if (c === \"\") {\n          output.push((url + descriptorsStr).trim());\n          break;\n        } else if (!inParens) {\n          if (c === \",\") {\n            pos += 1;\n            output.push((url + descriptorsStr).trim());\n            break;\n          } else if (c === \"(\") {\n            inParens = true;\n          }\n        } else {\n          if (c === \")\") {\n            inParens = false;\n          }\n        }\n        descriptorsStr += c;\n        pos += 1;\n      }\n    }\n  }\n  return output.join(\", \");\n}\nconst cachedDocument = /* @__PURE__ */ new WeakMap();\nfunction absoluteToDoc(doc, attributeValue) {\n  if (!attributeValue || attributeValue.trim() === \"\") {\n    return attributeValue;\n  }\n  return getHref(doc, attributeValue);\n}\nfunction isSVGElement(el) {\n  return Boolean(el.tagName === \"svg\" || el.ownerSVGElement);\n}\nfunction getHref(doc, customHref) {\n  let a = cachedDocument.get(doc);\n  if (!a) {\n    a = doc.createElement(\"a\");\n    cachedDocument.set(doc, a);\n  }\n  if (!customHref) {\n    customHref = \"\";\n  } else if (customHref.startsWith(\"blob:\") || customHref.startsWith(\"data:\")) {\n    return customHref;\n  }\n  a.setAttribute(\"href\", customHref);\n  return a.href;\n}\nfunction transformAttribute(doc, tagName, name, value) {\n  if (!value) {\n    return value;\n  }\n  if (name === \"src\" || name === \"href\" && !(tagName === \"use\" && value[0] === \"#\")) {\n    return absoluteToDoc(doc, value);\n  } else if (name === \"xlink:href\" && value[0] !== \"#\") {\n    return absoluteToDoc(doc, value);\n  } else if (name === \"background\" && (tagName === \"table\" || tagName === \"td\" || tagName === \"th\")) {\n    return absoluteToDoc(doc, value);\n  } else if (name === \"srcset\") {\n    return getAbsoluteSrcsetString(doc, value);\n  } else if (name === \"style\") {\n    return absoluteToStylesheet(value, getHref(doc));\n  } else if (tagName === \"object\" && name === \"data\") {\n    return absoluteToDoc(doc, value);\n  }\n  return value;\n}\nfunction ignoreAttribute(tagName, name, _value) {\n  return (tagName === \"video\" || tagName === \"audio\") && name === \"autoplay\";\n}\nfunction _isBlockedElement(element, blockClass, blockSelector) {\n  try {\n    if (typeof blockClass === \"string\") {\n      if (element.classList.contains(blockClass)) {\n        return true;\n      }\n    } else {\n      for (let eIndex = element.classList.length; eIndex--; ) {\n        const className = element.classList[eIndex];\n        if (blockClass.test(className)) {\n          return true;\n        }\n      }\n    }\n    if (blockSelector) {\n      return element.matches(blockSelector);\n    }\n  } catch (e) {\n  }\n  return false;\n}\nfunction classMatchesRegex(node, regex, checkAncestors) {\n  if (!node)\n    return false;\n  if (node.nodeType !== node.ELEMENT_NODE) {\n    if (!checkAncestors)\n      return false;\n    return classMatchesRegex(node.parentNode, regex, checkAncestors);\n  }\n  for (let eIndex = node.classList.length; eIndex--; ) {\n    const className = node.classList[eIndex];\n    if (regex.test(className)) {\n      return true;\n    }\n  }\n  if (!checkAncestors)\n    return false;\n  return classMatchesRegex(node.parentNode, regex, checkAncestors);\n}\nfunction needMaskingText(node, maskTextClass, maskTextSelector, checkAncestors) {\n  try {\n    const el = node.nodeType === node.ELEMENT_NODE ? node : node.parentElement;\n    if (el === null)\n      return false;\n    if (typeof maskTextClass === \"string\") {\n      if (checkAncestors) {\n        if (el.closest(`.${maskTextClass}`))\n          return true;\n      } else {\n        if (el.classList.contains(maskTextClass))\n          return true;\n      }\n    } else {\n      if (classMatchesRegex(el, maskTextClass, checkAncestors))\n        return true;\n    }\n    if (maskTextSelector) {\n      if (checkAncestors) {\n        if (el.closest(maskTextSelector))\n          return true;\n      } else {\n        if (el.matches(maskTextSelector))\n          return true;\n      }\n    }\n  } catch (e) {\n  }\n  return false;\n}\nfunction onceIframeLoaded(iframeEl, listener, iframeLoadTimeout) {\n  const win = iframeEl.contentWindow;\n  if (!win) {\n    return;\n  }\n  let fired = false;\n  let readyState;\n  try {\n    readyState = win.document.readyState;\n  } catch (error) {\n    return;\n  }\n  if (readyState !== \"complete\") {\n    const timer = setTimeout(() => {\n      if (!fired) {\n        listener();\n        fired = true;\n      }\n    }, iframeLoadTimeout);\n    iframeEl.addEventListener(\"load\", () => {\n      clearTimeout(timer);\n      fired = true;\n      listener();\n    });\n    return;\n  }\n  const blankUrl = \"about:blank\";\n  if (win.location.href !== blankUrl || iframeEl.src === blankUrl || iframeEl.src === \"\") {\n    setTimeout(listener, 0);\n    return iframeEl.addEventListener(\"load\", listener);\n  }\n  iframeEl.addEventListener(\"load\", listener);\n}\nfunction onceStylesheetLoaded(link, listener, styleSheetLoadTimeout) {\n  let fired = false;\n  let styleSheetLoaded;\n  try {\n    styleSheetLoaded = link.sheet;\n  } catch (error) {\n    return;\n  }\n  if (styleSheetLoaded)\n    return;\n  const timer = setTimeout(() => {\n    if (!fired) {\n      listener();\n      fired = true;\n    }\n  }, styleSheetLoadTimeout);\n  link.addEventListener(\"load\", () => {\n    clearTimeout(timer);\n    fired = true;\n    listener();\n  });\n}\nfunction serializeNode(n, options) {\n  const {\n    doc,\n    mirror,\n    blockClass,\n    blockSelector,\n    needsMask,\n    inlineStylesheet,\n    maskInputOptions = {},\n    maskTextFn,\n    maskInputFn,\n    dataURLOptions = {},\n    inlineImages,\n    recordCanvas,\n    keepIframeSrcFn,\n    newlyAddedElement = false\n  } = options;\n  const rootId = getRootId(doc, mirror);\n  switch (n.nodeType) {\n    case n.DOCUMENT_NODE:\n      if (n.compatMode !== \"CSS1Compat\") {\n        return {\n          type: NodeType.Document,\n          childNodes: [],\n          compatMode: n.compatMode\n          // probably \"BackCompat\"\n        };\n      } else {\n        return {\n          type: NodeType.Document,\n          childNodes: []\n        };\n      }\n    case n.DOCUMENT_TYPE_NODE:\n      return {\n        type: NodeType.DocumentType,\n        name: n.name,\n        publicId: n.publicId,\n        systemId: n.systemId,\n        rootId\n      };\n    case n.ELEMENT_NODE:\n      return serializeElementNode(n, {\n        doc,\n        blockClass,\n        blockSelector,\n        inlineStylesheet,\n        maskInputOptions,\n        maskInputFn,\n        dataURLOptions,\n        inlineImages,\n        recordCanvas,\n        keepIframeSrcFn,\n        newlyAddedElement,\n        rootId\n      });\n    case n.TEXT_NODE:\n      return serializeTextNode(n, {\n        doc,\n        needsMask,\n        maskTextFn,\n        rootId\n      });\n    case n.CDATA_SECTION_NODE:\n      return {\n        type: NodeType.CDATA,\n        textContent: \"\",\n        rootId\n      };\n    case n.COMMENT_NODE:\n      return {\n        type: NodeType.Comment,\n        textContent: n.textContent || \"\",\n        rootId\n      };\n    default:\n      return false;\n  }\n}\nfunction getRootId(doc, mirror) {\n  if (!mirror.hasNode(doc))\n    return void 0;\n  const docId = mirror.getId(doc);\n  return docId === 1 ? void 0 : docId;\n}\nfunction serializeTextNode(n, options) {\n  var _a;\n  const { needsMask, maskTextFn, rootId } = options;\n  const parentTagName = n.parentNode && n.parentNode.tagName;\n  let textContent = n.textContent;\n  const isStyle = parentTagName === \"STYLE\" ? true : void 0;\n  const isScript = parentTagName === \"SCRIPT\" ? true : void 0;\n  if (isStyle && textContent) {\n    try {\n      if (n.nextSibling || n.previousSibling) {\n      } else if ((_a = n.parentNode.sheet) == null ? void 0 : _a.cssRules) {\n        textContent = stringifyStylesheet(\n          n.parentNode.sheet\n        );\n      }\n    } catch (err) {\n      console.warn(\n        `Cannot get CSS styles from text's parentNode. Error: ${err}`,\n        n\n      );\n    }\n    textContent = absoluteToStylesheet(textContent, getHref(options.doc));\n  }\n  if (isScript) {\n    textContent = \"SCRIPT_PLACEHOLDER\";\n  }\n  if (!isStyle && !isScript && textContent && needsMask) {\n    textContent = maskTextFn ? maskTextFn(textContent, n.parentElement) : textContent.replace(/[\\S]/g, \"*\");\n  }\n  return {\n    type: NodeType.Text,\n    textContent: textContent || \"\",\n    isStyle,\n    rootId\n  };\n}\nfunction serializeElementNode(n, options) {\n  const {\n    doc,\n    blockClass,\n    blockSelector,\n    inlineStylesheet,\n    maskInputOptions = {},\n    maskInputFn,\n    dataURLOptions = {},\n    inlineImages,\n    recordCanvas,\n    keepIframeSrcFn,\n    newlyAddedElement = false,\n    rootId\n  } = options;\n  const needBlock = _isBlockedElement(n, blockClass, blockSelector);\n  const tagName = getValidTagName(n);\n  let attributes2 = {};\n  const len = n.attributes.length;\n  for (let i = 0; i < len; i++) {\n    const attr = n.attributes[i];\n    if (!ignoreAttribute(tagName, attr.name, attr.value)) {\n      attributes2[attr.name] = transformAttribute(\n        doc,\n        tagName,\n        toLowerCase(attr.name),\n        attr.value\n      );\n    }\n  }\n  if (tagName === \"link\" && inlineStylesheet) {\n    const stylesheet = Array.from(doc.styleSheets).find((s) => {\n      return s.href === n.href;\n    });\n    let cssText = null;\n    if (stylesheet) {\n      cssText = stringifyStylesheet(stylesheet);\n    }\n    if (cssText) {\n      delete attributes2.rel;\n      delete attributes2.href;\n      attributes2._cssText = absoluteToStylesheet(cssText, stylesheet.href);\n    }\n  }\n  if (tagName === \"style\" && n.sheet && // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element\n  !(n.innerText || n.textContent || \"\").trim().length) {\n    const cssText = stringifyStylesheet(\n      n.sheet\n    );\n    if (cssText) {\n      attributes2._cssText = absoluteToStylesheet(cssText, getHref(doc));\n    }\n  }\n  if (tagName === \"input\" || tagName === \"textarea\" || tagName === \"select\") {\n    const value = n.value;\n    const checked = n.checked;\n    if (attributes2.type !== \"radio\" && attributes2.type !== \"checkbox\" && attributes2.type !== \"submit\" && attributes2.type !== \"button\" && value) {\n      attributes2.value = maskInputValue({\n        element: n,\n        type: getInputType(n),\n        tagName,\n        value,\n        maskInputOptions,\n        maskInputFn\n      });\n    } else if (checked) {\n      attributes2.checked = checked;\n    }\n  }\n  if (tagName === \"option\") {\n    if (n.selected && !maskInputOptions[\"select\"]) {\n      attributes2.selected = true;\n    } else {\n      delete attributes2.selected;\n    }\n  }\n  if (tagName === \"canvas\" && recordCanvas) {\n    if (n.__context === \"2d\") {\n      if (!is2DCanvasBlank(n)) {\n        attributes2.rr_dataURL = n.toDataURL(\n          dataURLOptions.type,\n          dataURLOptions.quality\n        );\n      }\n    } else if (!(\"__context\" in n)) {\n      const canvasDataURL = n.toDataURL(\n        dataURLOptions.type,\n        dataURLOptions.quality\n      );\n      const blankCanvas = doc.createElement(\"canvas\");\n      blankCanvas.width = n.width;\n      blankCanvas.height = n.height;\n      const blankCanvasDataURL = blankCanvas.toDataURL(\n        dataURLOptions.type,\n        dataURLOptions.quality\n      );\n      if (canvasDataURL !== blankCanvasDataURL) {\n        attributes2.rr_dataURL = canvasDataURL;\n      }\n    }\n  }\n  if (tagName === \"img\" && inlineImages) {\n    if (!canvasService) {\n      canvasService = doc.createElement(\"canvas\");\n      canvasCtx = canvasService.getContext(\"2d\");\n    }\n    const image = n;\n    const imageSrc = image.currentSrc || image.getAttribute(\"src\") || \"<unknown-src>\";\n    const priorCrossOrigin = image.crossOrigin;\n    const recordInlineImage = () => {\n      image.removeEventListener(\"load\", recordInlineImage);\n      try {\n        canvasService.width = image.naturalWidth;\n        canvasService.height = image.naturalHeight;\n        canvasCtx.drawImage(image, 0, 0);\n        attributes2.rr_dataURL = canvasService.toDataURL(\n          dataURLOptions.type,\n          dataURLOptions.quality\n        );\n      } catch (err) {\n        if (image.crossOrigin !== \"anonymous\") {\n          image.crossOrigin = \"anonymous\";\n          if (image.complete && image.naturalWidth !== 0)\n            recordInlineImage();\n          else\n            image.addEventListener(\"load\", recordInlineImage);\n          return;\n        } else {\n          console.warn(\n            `Cannot inline img src=${imageSrc}! Error: ${err}`\n          );\n        }\n      }\n      if (image.crossOrigin === \"anonymous\") {\n        priorCrossOrigin ? attributes2.crossOrigin = priorCrossOrigin : image.removeAttribute(\"crossorigin\");\n      }\n    };\n    if (image.complete && image.naturalWidth !== 0)\n      recordInlineImage();\n    else\n      image.addEventListener(\"load\", recordInlineImage);\n  }\n  if (tagName === \"audio\" || tagName === \"video\") {\n    const mediaAttributes = attributes2;\n    mediaAttributes.rr_mediaState = n.paused ? \"paused\" : \"played\";\n    mediaAttributes.rr_mediaCurrentTime = n.currentTime;\n    mediaAttributes.rr_mediaPlaybackRate = n.playbackRate;\n    mediaAttributes.rr_mediaMuted = n.muted;\n    mediaAttributes.rr_mediaLoop = n.loop;\n    mediaAttributes.rr_mediaVolume = n.volume;\n  }\n  if (!newlyAddedElement) {\n    if (n.scrollLeft) {\n      attributes2.rr_scrollLeft = n.scrollLeft;\n    }\n    if (n.scrollTop) {\n      attributes2.rr_scrollTop = n.scrollTop;\n    }\n  }\n  if (needBlock) {\n    const { width, height } = n.getBoundingClientRect();\n    attributes2 = {\n      class: attributes2.class,\n      rr_width: `${width}px`,\n      rr_height: `${height}px`\n    };\n  }\n  if (tagName === \"iframe\" && !keepIframeSrcFn(attributes2.src)) {\n    if (!n.contentDocument) {\n      attributes2.rr_src = attributes2.src;\n    }\n    delete attributes2.src;\n  }\n  let isCustomElement;\n  try {\n    if (customElements.get(tagName))\n      isCustomElement = true;\n  } catch (e) {\n  }\n  return {\n    type: NodeType.Element,\n    tagName,\n    attributes: attributes2,\n    childNodes: [],\n    isSVG: isSVGElement(n) || void 0,\n    needBlock,\n    rootId,\n    isCustom: isCustomElement\n  };\n}\nfunction lowerIfExists(maybeAttr) {\n  if (maybeAttr === void 0 || maybeAttr === null) {\n    return \"\";\n  } else {\n    return maybeAttr.toLowerCase();\n  }\n}\nfunction slimDOMExcluded(sn, slimDOMOptions) {\n  if (slimDOMOptions.comment && sn.type === NodeType.Comment) {\n    return true;\n  } else if (sn.type === NodeType.Element) {\n    if (slimDOMOptions.script && // script tag\n    (sn.tagName === \"script\" || // (module)preload link\n    sn.tagName === \"link\" && (sn.attributes.rel === \"preload\" || sn.attributes.rel === \"modulepreload\") && sn.attributes.as === \"script\" || // prefetch link\n    sn.tagName === \"link\" && sn.attributes.rel === \"prefetch\" && typeof sn.attributes.href === \"string\" && extractFileExtension(sn.attributes.href) === \"js\")) {\n      return true;\n    } else if (slimDOMOptions.headFavicon && (sn.tagName === \"link\" && sn.attributes.rel === \"shortcut icon\" || sn.tagName === \"meta\" && (lowerIfExists(sn.attributes.name).match(\n      /^msapplication-tile(image|color)$/\n    ) || lowerIfExists(sn.attributes.name) === \"application-name\" || lowerIfExists(sn.attributes.rel) === \"icon\" || lowerIfExists(sn.attributes.rel) === \"apple-touch-icon\" || lowerIfExists(sn.attributes.rel) === \"shortcut icon\"))) {\n      return true;\n    } else if (sn.tagName === \"meta\") {\n      if (slimDOMOptions.headMetaDescKeywords && lowerIfExists(sn.attributes.name).match(/^description|keywords$/)) {\n        return true;\n      } else if (slimDOMOptions.headMetaSocial && (lowerIfExists(sn.attributes.property).match(/^(og|twitter|fb):/) || // og = opengraph (facebook)\n      lowerIfExists(sn.attributes.name).match(/^(og|twitter):/) || lowerIfExists(sn.attributes.name) === \"pinterest\")) {\n        return true;\n      } else if (slimDOMOptions.headMetaRobots && (lowerIfExists(sn.attributes.name) === \"robots\" || lowerIfExists(sn.attributes.name) === \"googlebot\" || lowerIfExists(sn.attributes.name) === \"bingbot\")) {\n        return true;\n      } else if (slimDOMOptions.headMetaHttpEquiv && sn.attributes[\"http-equiv\"] !== void 0) {\n        return true;\n      } else if (slimDOMOptions.headMetaAuthorship && (lowerIfExists(sn.attributes.name) === \"author\" || lowerIfExists(sn.attributes.name) === \"generator\" || lowerIfExists(sn.attributes.name) === \"framework\" || lowerIfExists(sn.attributes.name) === \"publisher\" || lowerIfExists(sn.attributes.name) === \"progid\" || lowerIfExists(sn.attributes.property).match(/^article:/) || lowerIfExists(sn.attributes.property).match(/^product:/))) {\n        return true;\n      } else if (slimDOMOptions.headMetaVerification && (lowerIfExists(sn.attributes.name) === \"google-site-verification\" || lowerIfExists(sn.attributes.name) === \"yandex-verification\" || lowerIfExists(sn.attributes.name) === \"csrf-token\" || lowerIfExists(sn.attributes.name) === \"p:domain_verify\" || lowerIfExists(sn.attributes.name) === \"verify-v1\" || lowerIfExists(sn.attributes.name) === \"verification\" || lowerIfExists(sn.attributes.name) === \"shopify-checkout-api-token\")) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\nfunction serializeNodeWithId(n, options) {\n  const {\n    doc,\n    mirror,\n    blockClass,\n    blockSelector,\n    maskTextClass,\n    maskTextSelector,\n    skipChild = false,\n    inlineStylesheet = true,\n    maskInputOptions = {},\n    maskTextFn,\n    maskInputFn,\n    slimDOMOptions,\n    dataURLOptions = {},\n    inlineImages = false,\n    recordCanvas = false,\n    onSerialize,\n    onIframeLoad,\n    iframeLoadTimeout = 5e3,\n    onStylesheetLoad,\n    stylesheetLoadTimeout = 5e3,\n    keepIframeSrcFn = () => false,\n    newlyAddedElement = false\n  } = options;\n  let { needsMask } = options;\n  let { preserveWhiteSpace = true } = options;\n  if (!needsMask && n.childNodes) {\n    const checkAncestors = needsMask === void 0;\n    needsMask = needMaskingText(\n      n,\n      maskTextClass,\n      maskTextSelector,\n      checkAncestors\n    );\n  }\n  const _serializedNode = serializeNode(n, {\n    doc,\n    mirror,\n    blockClass,\n    blockSelector,\n    needsMask,\n    inlineStylesheet,\n    maskInputOptions,\n    maskTextFn,\n    maskInputFn,\n    dataURLOptions,\n    inlineImages,\n    recordCanvas,\n    keepIframeSrcFn,\n    newlyAddedElement\n  });\n  if (!_serializedNode) {\n    console.warn(n, \"not serialized\");\n    return null;\n  }\n  let id;\n  if (mirror.hasNode(n)) {\n    id = mirror.getId(n);\n  } else if (slimDOMExcluded(_serializedNode, slimDOMOptions) || !preserveWhiteSpace && _serializedNode.type === NodeType.Text && !_serializedNode.isStyle && !_serializedNode.textContent.replace(/^\\s+|\\s+$/gm, \"\").length) {\n    id = IGNORED_NODE;\n  } else {\n    id = genId();\n  }\n  const serializedNode2 = Object.assign(_serializedNode, { id });\n  mirror.add(n, serializedNode2);\n  if (id === IGNORED_NODE) {\n    return null;\n  }\n  if (onSerialize) {\n    onSerialize(n);\n  }\n  let recordChild = !skipChild;\n  if (serializedNode2.type === NodeType.Element) {\n    recordChild = recordChild && !serializedNode2.needBlock;\n    delete serializedNode2.needBlock;\n    const shadowRoot = n.shadowRoot;\n    if (shadowRoot && isNativeShadowDom(shadowRoot))\n      serializedNode2.isShadowHost = true;\n  }\n  if ((serializedNode2.type === NodeType.Document || serializedNode2.type === NodeType.Element) && recordChild) {\n    if (slimDOMOptions.headWhitespace && serializedNode2.type === NodeType.Element && serializedNode2.tagName === \"head\") {\n      preserveWhiteSpace = false;\n    }\n    const bypassOptions = {\n      doc,\n      mirror,\n      blockClass,\n      blockSelector,\n      needsMask,\n      maskTextClass,\n      maskTextSelector,\n      skipChild,\n      inlineStylesheet,\n      maskInputOptions,\n      maskTextFn,\n      maskInputFn,\n      slimDOMOptions,\n      dataURLOptions,\n      inlineImages,\n      recordCanvas,\n      preserveWhiteSpace,\n      onSerialize,\n      onIframeLoad,\n      iframeLoadTimeout,\n      onStylesheetLoad,\n      stylesheetLoadTimeout,\n      keepIframeSrcFn\n    };\n    if (serializedNode2.type === NodeType.Element && serializedNode2.tagName === \"textarea\" && serializedNode2.attributes.value !== void 0)\n      ;\n    else {\n      for (const childN of Array.from(n.childNodes)) {\n        const serializedChildNode = serializeNodeWithId(childN, bypassOptions);\n        if (serializedChildNode) {\n          serializedNode2.childNodes.push(serializedChildNode);\n        }\n      }\n    }\n    if (isElement(n) && n.shadowRoot) {\n      for (const childN of Array.from(n.shadowRoot.childNodes)) {\n        const serializedChildNode = serializeNodeWithId(childN, bypassOptions);\n        if (serializedChildNode) {\n          isNativeShadowDom(n.shadowRoot) && (serializedChildNode.isShadow = true);\n          serializedNode2.childNodes.push(serializedChildNode);\n        }\n      }\n    }\n  }\n  if (n.parentNode && isShadowRoot(n.parentNode) && isNativeShadowDom(n.parentNode)) {\n    serializedNode2.isShadow = true;\n  }\n  if (serializedNode2.type === NodeType.Element && serializedNode2.tagName === \"iframe\") {\n    onceIframeLoaded(\n      n,\n      () => {\n        const iframeDoc = n.contentDocument;\n        if (iframeDoc && onIframeLoad) {\n          const serializedIframeNode = serializeNodeWithId(iframeDoc, {\n            doc: iframeDoc,\n            mirror,\n            blockClass,\n            blockSelector,\n            needsMask,\n            maskTextClass,\n            maskTextSelector,\n            skipChild: false,\n            inlineStylesheet,\n            maskInputOptions,\n            maskTextFn,\n            maskInputFn,\n            slimDOMOptions,\n            dataURLOptions,\n            inlineImages,\n            recordCanvas,\n            preserveWhiteSpace,\n            onSerialize,\n            onIframeLoad,\n            iframeLoadTimeout,\n            onStylesheetLoad,\n            stylesheetLoadTimeout,\n            keepIframeSrcFn\n          });\n          if (serializedIframeNode) {\n            onIframeLoad(\n              n,\n              serializedIframeNode\n            );\n          }\n        }\n      },\n      iframeLoadTimeout\n    );\n  }\n  if (serializedNode2.type === NodeType.Element && serializedNode2.tagName === \"link\" && typeof serializedNode2.attributes.rel === \"string\" && (serializedNode2.attributes.rel === \"stylesheet\" || serializedNode2.attributes.rel === \"preload\" && typeof serializedNode2.attributes.href === \"string\" && extractFileExtension(serializedNode2.attributes.href) === \"css\")) {\n    onceStylesheetLoaded(\n      n,\n      () => {\n        if (onStylesheetLoad) {\n          const serializedLinkNode = serializeNodeWithId(n, {\n            doc,\n            mirror,\n            blockClass,\n            blockSelector,\n            needsMask,\n            maskTextClass,\n            maskTextSelector,\n            skipChild: false,\n            inlineStylesheet,\n            maskInputOptions,\n            maskTextFn,\n            maskInputFn,\n            slimDOMOptions,\n            dataURLOptions,\n            inlineImages,\n            recordCanvas,\n            preserveWhiteSpace,\n            onSerialize,\n            onIframeLoad,\n            iframeLoadTimeout,\n            onStylesheetLoad,\n            stylesheetLoadTimeout,\n            keepIframeSrcFn\n          });\n          if (serializedLinkNode) {\n            onStylesheetLoad(\n              n,\n              serializedLinkNode\n            );\n          }\n        }\n      },\n      stylesheetLoadTimeout\n    );\n  }\n  return serializedNode2;\n}\nfunction snapshot(n, options) {\n  const {\n    mirror = new Mirror(),\n    blockClass = \"rr-block\",\n    blockSelector = null,\n    maskTextClass = \"rr-mask\",\n    maskTextSelector = null,\n    inlineStylesheet = true,\n    inlineImages = false,\n    recordCanvas = false,\n    maskAllInputs = false,\n    maskTextFn,\n    maskInputFn,\n    slimDOM = false,\n    dataURLOptions,\n    preserveWhiteSpace,\n    onSerialize,\n    onIframeLoad,\n    iframeLoadTimeout,\n    onStylesheetLoad,\n    stylesheetLoadTimeout,\n    keepIframeSrcFn = () => false\n  } = options || {};\n  const maskInputOptions = maskAllInputs === true ? {\n    color: true,\n    date: true,\n    \"datetime-local\": true,\n    email: true,\n    month: true,\n    number: true,\n    range: true,\n    search: true,\n    tel: true,\n    text: true,\n    time: true,\n    url: true,\n    week: true,\n    textarea: true,\n    select: true,\n    password: true\n  } : maskAllInputs === false ? {\n    password: true\n  } : maskAllInputs;\n  const slimDOMOptions = slimDOM === true || slimDOM === \"all\" ? (\n    // if true: set of sensible options that should not throw away any information\n    {\n      script: true,\n      comment: true,\n      headFavicon: true,\n      headWhitespace: true,\n      headMetaDescKeywords: slimDOM === \"all\",\n      // destructive\n      headMetaSocial: true,\n      headMetaRobots: true,\n      headMetaHttpEquiv: true,\n      headMetaAuthorship: true,\n      headMetaVerification: true\n    }\n  ) : slimDOM === false ? {} : slimDOM;\n  return serializeNodeWithId(n, {\n    doc: n,\n    mirror,\n    blockClass,\n    blockSelector,\n    maskTextClass,\n    maskTextSelector,\n    skipChild: false,\n    inlineStylesheet,\n    maskInputOptions,\n    maskTextFn,\n    maskInputFn,\n    slimDOMOptions,\n    dataURLOptions,\n    inlineImages,\n    recordCanvas,\n    preserveWhiteSpace,\n    onSerialize,\n    onIframeLoad,\n    iframeLoadTimeout,\n    onStylesheetLoad,\n    stylesheetLoadTimeout,\n    keepIframeSrcFn,\n    newlyAddedElement: false\n  });\n}\nfunction visitSnapshot(node, onVisit) {\n  function walk(current) {\n    onVisit(current);\n    if (current.type === NodeType.Document || current.type === NodeType.Element) {\n      current.childNodes.forEach(walk);\n    }\n  }\n  walk(node);\n}\nfunction cleanupSnapshot() {\n  _id = 1;\n}\nconst commentre = /\\/\\*[^*]*\\*+([^/*][^*]*\\*+)*\\//g;\nfunction parse(css, options = {}) {\n  let lineno = 1;\n  let column = 1;\n  function updatePosition(str) {\n    const lines = str.match(/\\n/g);\n    if (lines) {\n      lineno += lines.length;\n    }\n    const i = str.lastIndexOf(\"\\n\");\n    column = i === -1 ? column + str.length : str.length - i;\n  }\n  function position() {\n    const start = { line: lineno, column };\n    return (node) => {\n      node.position = new Position(start);\n      whitespace();\n      return node;\n    };\n  }\n  const _Position = class _Position {\n    constructor(start) {\n      __publicField(this, \"content\");\n      __publicField(this, \"start\");\n      __publicField(this, \"end\");\n      __publicField(this, \"source\");\n      this.start = start;\n      this.end = { line: lineno, column };\n      this.source = options.source;\n      this.content = _Position.content;\n    }\n  };\n  __publicField(_Position, \"content\");\n  let Position = _Position;\n  Position.content = css;\n  const errorsList = [];\n  function error(msg) {\n    const err = new Error(\n      `${options.source || \"\"}:${lineno}:${column}: ${msg}`\n    );\n    err.reason = msg;\n    err.filename = options.source;\n    err.line = lineno;\n    err.column = column;\n    err.source = css;\n    if (options.silent) {\n      errorsList.push(err);\n    } else {\n      throw err;\n    }\n  }\n  function stylesheet() {\n    const rulesList = rules();\n    return {\n      type: \"stylesheet\",\n      stylesheet: {\n        source: options.source,\n        rules: rulesList,\n        parsingErrors: errorsList\n      }\n    };\n  }\n  function open() {\n    return match(/^{\\s*/);\n  }\n  function close() {\n    return match(/^}/);\n  }\n  function rules() {\n    let node;\n    const rules2 = [];\n    whitespace();\n    comments(rules2);\n    while (css.length && css.charAt(0) !== \"}\" && (node = atrule() || rule())) {\n      if (node) {\n        rules2.push(node);\n        comments(rules2);\n      }\n    }\n    return rules2;\n  }\n  function match(re) {\n    const m = re.exec(css);\n    if (!m) {\n      return;\n    }\n    const str = m[0];\n    updatePosition(str);\n    css = css.slice(str.length);\n    return m;\n  }\n  function whitespace() {\n    match(/^\\s*/);\n  }\n  function comments(rules2 = []) {\n    let c;\n    while (c = comment()) {\n      if (c) {\n        rules2.push(c);\n      }\n      c = comment();\n    }\n    return rules2;\n  }\n  function comment() {\n    const pos = position();\n    if (\"/\" !== css.charAt(0) || \"*\" !== css.charAt(1)) {\n      return;\n    }\n    let i = 2;\n    while (\"\" !== css.charAt(i) && (\"*\" !== css.charAt(i) || \"/\" !== css.charAt(i + 1))) {\n      ++i;\n    }\n    i += 2;\n    if (\"\" === css.charAt(i - 1)) {\n      return error(\"End of comment missing\");\n    }\n    const str = css.slice(2, i - 2);\n    column += 2;\n    updatePosition(str);\n    css = css.slice(i);\n    column += 2;\n    return pos({\n      type: \"comment\",\n      comment: str\n    });\n  }\n  const selectorMatcher = new RegExp(\n    \"^((\" + [\n      /[^\\\\]\"(?:\\\\\"|[^\"])*\"/.source,\n      // consume any quoted parts (checking that the double quote isn't itself escaped)\n      /[^\\\\]'(?:\\\\'|[^'])*'/.source,\n      // same but for single quotes\n      \"[^{]\"\n    ].join(\"|\") + \")+)\"\n  );\n  function selector() {\n    whitespace();\n    while (css[0] == \"}\") {\n      error(\"extra closing bracket\");\n      css = css.slice(1);\n      whitespace();\n    }\n    const m = match(selectorMatcher);\n    if (!m) {\n      return;\n    }\n    const cleanedInput = m[0].trim().replace(/\\/\\*([^*]|[\\r\\n]|(\\*+([^*/]|[\\r\\n])))*\\*\\/+/g, \"\").replace(/\"(?:\\\\\"|[^\"])*\"|'(?:\\\\'|[^'])*'/g, (m2) => {\n      return m2.replace(/,/g, \"‌\");\n    });\n    return customSplit(cleanedInput).map(\n      (s) => s.replace(/\\u200C/g, \",\").trim()\n    );\n  }\n  function customSplit(input) {\n    const result = [];\n    let currentSegment = \"\";\n    let depthParentheses = 0;\n    let depthBrackets = 0;\n    let currentStringChar = null;\n    for (const char of input) {\n      const hasStringEscape = currentSegment.endsWith(\"\\\\\");\n      if (currentStringChar) {\n        if (currentStringChar === char && !hasStringEscape) {\n          currentStringChar = null;\n        }\n      } else if (char === \"(\") {\n        depthParentheses++;\n      } else if (char === \")\") {\n        depthParentheses--;\n      } else if (char === \"[\") {\n        depthBrackets++;\n      } else if (char === \"]\") {\n        depthBrackets--;\n      } else if (`'\"`.includes(char)) {\n        currentStringChar = char;\n      }\n      if (char === \",\" && depthParentheses === 0 && depthBrackets === 0) {\n        result.push(currentSegment);\n        currentSegment = \"\";\n      } else {\n        currentSegment += char;\n      }\n    }\n    if (currentSegment) {\n      result.push(currentSegment);\n    }\n    return result;\n  }\n  function declaration() {\n    const pos = position();\n    const propMatch = match(/^(\\*?[-#\\/\\*\\\\\\w]+(\\[[0-9a-z_-]+\\])?)\\s*/);\n    if (!propMatch) {\n      return;\n    }\n    const prop = trim(propMatch[0]);\n    if (!match(/^:\\s*/)) {\n      return error(`property missing ':'`);\n    }\n    const val = match(/^((?:'(?:\\\\'|.)*?'|\"(?:\\\\\"|.)*?\"|\\([^\\)]*?\\)|[^};])+)/);\n    const ret = pos({\n      type: \"declaration\",\n      property: prop.replace(commentre, \"\"),\n      value: val ? trim(val[0]).replace(commentre, \"\") : \"\"\n    });\n    match(/^[;\\s]*/);\n    return ret;\n  }\n  function declarations() {\n    const decls = [];\n    if (!open()) {\n      return error(`missing '{'`);\n    }\n    comments(decls);\n    let decl;\n    while (decl = declaration()) {\n      if (decl !== false) {\n        decls.push(decl);\n        comments(decls);\n      }\n      decl = declaration();\n    }\n    if (!close()) {\n      return error(`missing '}'`);\n    }\n    return decls;\n  }\n  function keyframe() {\n    let m;\n    const vals = [];\n    const pos = position();\n    while (m = match(/^((\\d+\\.\\d+|\\.\\d+|\\d+)%?|[a-z]+)\\s*/)) {\n      vals.push(m[1]);\n      match(/^,\\s*/);\n    }\n    if (!vals.length) {\n      return;\n    }\n    return pos({\n      type: \"keyframe\",\n      values: vals,\n      declarations: declarations()\n    });\n  }\n  function atkeyframes() {\n    const pos = position();\n    let m = match(/^@([-\\w]+)?keyframes\\s*/);\n    if (!m) {\n      return;\n    }\n    const vendor = m[1];\n    m = match(/^([-\\w]+)\\s*/);\n    if (!m) {\n      return error(\"@keyframes missing name\");\n    }\n    const name = m[1];\n    if (!open()) {\n      return error(`@keyframes missing '{'`);\n    }\n    let frame;\n    let frames = comments();\n    while (frame = keyframe()) {\n      frames.push(frame);\n      frames = frames.concat(comments());\n    }\n    if (!close()) {\n      return error(`@keyframes missing '}'`);\n    }\n    return pos({\n      type: \"keyframes\",\n      name,\n      vendor,\n      keyframes: frames\n    });\n  }\n  function atsupports() {\n    const pos = position();\n    const m = match(/^@supports *([^{]+)/);\n    if (!m) {\n      return;\n    }\n    const supports = trim(m[1]);\n    if (!open()) {\n      return error(`@supports missing '{'`);\n    }\n    const style = comments().concat(rules());\n    if (!close()) {\n      return error(`@supports missing '}'`);\n    }\n    return pos({\n      type: \"supports\",\n      supports,\n      rules: style\n    });\n  }\n  function athost() {\n    const pos = position();\n    const m = match(/^@host\\s*/);\n    if (!m) {\n      return;\n    }\n    if (!open()) {\n      return error(`@host missing '{'`);\n    }\n    const style = comments().concat(rules());\n    if (!close()) {\n      return error(`@host missing '}'`);\n    }\n    return pos({\n      type: \"host\",\n      rules: style\n    });\n  }\n  function atmedia() {\n    const pos = position();\n    const m = match(/^@media *([^{]+)/);\n    if (!m) {\n      return;\n    }\n    const media = trim(m[1]);\n    if (!open()) {\n      return error(`@media missing '{'`);\n    }\n    const style = comments().concat(rules());\n    if (!close()) {\n      return error(`@media missing '}'`);\n    }\n    return pos({\n      type: \"media\",\n      media,\n      rules: style\n    });\n  }\n  function atcustommedia() {\n    const pos = position();\n    const m = match(/^@custom-media\\s+(--[^\\s]+)\\s*([^{;]+);/);\n    if (!m) {\n      return;\n    }\n    return pos({\n      type: \"custom-media\",\n      name: trim(m[1]),\n      media: trim(m[2])\n    });\n  }\n  function atpage() {\n    const pos = position();\n    const m = match(/^@page */);\n    if (!m) {\n      return;\n    }\n    const sel = selector() || [];\n    if (!open()) {\n      return error(`@page missing '{'`);\n    }\n    let decls = comments();\n    let decl;\n    while (decl = declaration()) {\n      decls.push(decl);\n      decls = decls.concat(comments());\n    }\n    if (!close()) {\n      return error(`@page missing '}'`);\n    }\n    return pos({\n      type: \"page\",\n      selectors: sel,\n      declarations: decls\n    });\n  }\n  function atdocument() {\n    const pos = position();\n    const m = match(/^@([-\\w]+)?document *([^{]+)/);\n    if (!m) {\n      return;\n    }\n    const vendor = trim(m[1]);\n    const doc = trim(m[2]);\n    if (!open()) {\n      return error(`@document missing '{'`);\n    }\n    const style = comments().concat(rules());\n    if (!close()) {\n      return error(`@document missing '}'`);\n    }\n    return pos({\n      type: \"document\",\n      document: doc,\n      vendor,\n      rules: style\n    });\n  }\n  function atfontface() {\n    const pos = position();\n    const m = match(/^@font-face\\s*/);\n    if (!m) {\n      return;\n    }\n    if (!open()) {\n      return error(`@font-face missing '{'`);\n    }\n    let decls = comments();\n    let decl;\n    while (decl = declaration()) {\n      decls.push(decl);\n      decls = decls.concat(comments());\n    }\n    if (!close()) {\n      return error(`@font-face missing '}'`);\n    }\n    return pos({\n      type: \"font-face\",\n      declarations: decls\n    });\n  }\n  const atimport = _compileAtrule(\"import\");\n  const atcharset = _compileAtrule(\"charset\");\n  const atnamespace = _compileAtrule(\"namespace\");\n  function _compileAtrule(name) {\n    const re = new RegExp(\n      \"^@\" + name + \"\\\\s*((?:\" + [\n        /[^\\\\]\"(?:\\\\\"|[^\"])*\"/.source,\n        // consume any quoted parts (checking that the double quote isn't itself escaped)\n        /[^\\\\]'(?:\\\\'|[^'])*'/.source,\n        // same but for single quotes\n        \"[^;]\"\n      ].join(\"|\") + \")+);\"\n    );\n    return () => {\n      const pos = position();\n      const m = match(re);\n      if (!m) {\n        return;\n      }\n      const ret = { type: name };\n      ret[name] = m[1].trim();\n      return pos(ret);\n    };\n  }\n  function atrule() {\n    if (css[0] !== \"@\") {\n      return;\n    }\n    return atkeyframes() || atmedia() || atcustommedia() || atsupports() || atimport() || atcharset() || atnamespace() || atdocument() || atpage() || athost() || atfontface();\n  }\n  function rule() {\n    const pos = position();\n    const sel = selector();\n    if (!sel) {\n      return error(\"selector missing\");\n    }\n    comments();\n    return pos({\n      type: \"rule\",\n      selectors: sel,\n      declarations: declarations()\n    });\n  }\n  return addParent(stylesheet());\n}\nfunction trim(str) {\n  return str ? str.replace(/^\\s+|\\s+$/g, \"\") : \"\";\n}\nfunction addParent(obj, parent) {\n  const isNode = obj && typeof obj.type === \"string\";\n  const childParent = isNode ? obj : parent;\n  for (const k of Object.keys(obj)) {\n    const value = obj[k];\n    if (Array.isArray(value)) {\n      value.forEach((v) => {\n        addParent(v, childParent);\n      });\n    } else if (value && typeof value === \"object\") {\n      addParent(value, childParent);\n    }\n  }\n  if (isNode) {\n    Object.defineProperty(obj, \"parent\", {\n      configurable: true,\n      writable: true,\n      enumerable: false,\n      value: parent || null\n    });\n  }\n  return obj;\n}\nconst tagMap = {\n  script: \"noscript\",\n  // camel case svg element tag names\n  altglyph: \"altGlyph\",\n  altglyphdef: \"altGlyphDef\",\n  altglyphitem: \"altGlyphItem\",\n  animatecolor: \"animateColor\",\n  animatemotion: \"animateMotion\",\n  animatetransform: \"animateTransform\",\n  clippath: \"clipPath\",\n  feblend: \"feBlend\",\n  fecolormatrix: \"feColorMatrix\",\n  fecomponenttransfer: \"feComponentTransfer\",\n  fecomposite: \"feComposite\",\n  feconvolvematrix: \"feConvolveMatrix\",\n  fediffuselighting: \"feDiffuseLighting\",\n  fedisplacementmap: \"feDisplacementMap\",\n  fedistantlight: \"feDistantLight\",\n  fedropshadow: \"feDropShadow\",\n  feflood: \"feFlood\",\n  fefunca: \"feFuncA\",\n  fefuncb: \"feFuncB\",\n  fefuncg: \"feFuncG\",\n  fefuncr: \"feFuncR\",\n  fegaussianblur: \"feGaussianBlur\",\n  feimage: \"feImage\",\n  femerge: \"feMerge\",\n  femergenode: \"feMergeNode\",\n  femorphology: \"feMorphology\",\n  feoffset: \"feOffset\",\n  fepointlight: \"fePointLight\",\n  fespecularlighting: \"feSpecularLighting\",\n  fespotlight: \"feSpotLight\",\n  fetile: \"feTile\",\n  feturbulence: \"feTurbulence\",\n  foreignobject: \"foreignObject\",\n  glyphref: \"glyphRef\",\n  lineargradient: \"linearGradient\",\n  radialgradient: \"radialGradient\"\n};\nfunction getTagName(n) {\n  let tagName = tagMap[n.tagName] ? tagMap[n.tagName] : n.tagName;\n  if (tagName === \"link\" && n.attributes._cssText) {\n    tagName = \"style\";\n  }\n  return tagName;\n}\nfunction escapeRegExp(str) {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n}\nconst MEDIA_SELECTOR = /(max|min)-device-(width|height)/;\nconst MEDIA_SELECTOR_GLOBAL = new RegExp(MEDIA_SELECTOR.source, \"g\");\nconst HOVER_SELECTOR = /([^\\\\]):hover/;\nconst HOVER_SELECTOR_GLOBAL = new RegExp(HOVER_SELECTOR.source, \"g\");\nfunction adaptCssForReplay(cssText, cache) {\n  const cachedStyle = cache == null ? void 0 : cache.stylesWithHoverClass.get(cssText);\n  if (cachedStyle)\n    return cachedStyle;\n  const ast = parse(cssText, {\n    silent: true\n  });\n  if (!ast.stylesheet) {\n    return cssText;\n  }\n  const selectors = [];\n  const medias = [];\n  function getSelectors(rule) {\n    if (\"selectors\" in rule && rule.selectors) {\n      rule.selectors.forEach((selector) => {\n        if (HOVER_SELECTOR.test(selector)) {\n          selectors.push(selector);\n        }\n      });\n    }\n    if (\"media\" in rule && rule.media && MEDIA_SELECTOR.test(rule.media)) {\n      medias.push(rule.media);\n    }\n    if (\"rules\" in rule && rule.rules) {\n      rule.rules.forEach(getSelectors);\n    }\n  }\n  getSelectors(ast.stylesheet);\n  let result = cssText;\n  if (selectors.length > 0) {\n    const selectorMatcher = new RegExp(\n      selectors.filter((selector, index) => selectors.indexOf(selector) === index).sort((a, b) => b.length - a.length).map((selector) => {\n        return escapeRegExp(selector);\n      }).join(\"|\"),\n      \"g\"\n    );\n    result = result.replace(selectorMatcher, (selector) => {\n      const newSelector = selector.replace(\n        HOVER_SELECTOR_GLOBAL,\n        \"$1.\\\\:hover\"\n      );\n      return `${selector}, ${newSelector}`;\n    });\n  }\n  if (medias.length > 0) {\n    const mediaMatcher = new RegExp(\n      medias.filter((media, index) => medias.indexOf(media) === index).sort((a, b) => b.length - a.length).map((media) => {\n        return escapeRegExp(media);\n      }).join(\"|\"),\n      \"g\"\n    );\n    result = result.replace(mediaMatcher, (media) => {\n      return media.replace(MEDIA_SELECTOR_GLOBAL, \"$1-$2\");\n    });\n  }\n  cache == null ? void 0 : cache.stylesWithHoverClass.set(cssText, result);\n  return result;\n}\nfunction createCache() {\n  const stylesWithHoverClass = /* @__PURE__ */ new Map();\n  return {\n    stylesWithHoverClass\n  };\n}\nfunction buildNode(n, options) {\n  var _a;\n  const { doc, hackCss, cache } = options;\n  switch (n.type) {\n    case NodeType.Document:\n      return doc.implementation.createDocument(null, \"\", null);\n    case NodeType.DocumentType:\n      return doc.implementation.createDocumentType(\n        n.name || \"html\",\n        n.publicId,\n        n.systemId\n      );\n    case NodeType.Element: {\n      const tagName = getTagName(n);\n      let node;\n      if (n.isSVG) {\n        node = doc.createElementNS(\"http://www.w3.org/2000/svg\", tagName);\n      } else {\n        if (\n          // If the tag name is a custom element name\n          n.isCustom && // If the browser supports custom elements\n          ((_a = doc.defaultView) == null ? void 0 : _a.customElements) && // If the custom element hasn't been defined yet\n          !doc.defaultView.customElements.get(n.tagName)\n        )\n          doc.defaultView.customElements.define(\n            n.tagName,\n            class extends doc.defaultView.HTMLElement {\n            }\n          );\n        node = doc.createElement(tagName);\n      }\n      const specialAttributes = {};\n      for (const name in n.attributes) {\n        if (!Object.prototype.hasOwnProperty.call(n.attributes, name)) {\n          continue;\n        }\n        let value = n.attributes[name];\n        if (tagName === \"option\" && name === \"selected\" && value === false) {\n          continue;\n        }\n        if (value === null) {\n          continue;\n        }\n        if (value === true)\n          value = \"\";\n        if (name.startsWith(\"rr_\")) {\n          specialAttributes[name] = value;\n          continue;\n        }\n        const isTextarea = tagName === \"textarea\" && name === \"value\";\n        const isRemoteOrDynamicCss = tagName === \"style\" && name === \"_cssText\";\n        if (isRemoteOrDynamicCss && hackCss && typeof value === \"string\") {\n          value = adaptCssForReplay(value, cache);\n        }\n        if ((isTextarea || isRemoteOrDynamicCss) && typeof value === \"string\") {\n          node.appendChild(doc.createTextNode(value));\n          n.childNodes = [];\n          continue;\n        }\n        try {\n          if (n.isSVG && name === \"xlink:href\") {\n            node.setAttributeNS(\n              \"http://www.w3.org/1999/xlink\",\n              name,\n              value.toString()\n            );\n          } else if (name === \"onload\" || name === \"onclick\" || name.substring(0, 7) === \"onmouse\") {\n            node.setAttribute(\"_\" + name, value.toString());\n          } else if (tagName === \"meta\" && n.attributes[\"http-equiv\"] === \"Content-Security-Policy\" && name === \"content\") {\n            node.setAttribute(\"csp-content\", value.toString());\n            continue;\n          } else if (tagName === \"link\" && (n.attributes.rel === \"preload\" || n.attributes.rel === \"modulepreload\") && n.attributes.as === \"script\") {\n          } else if (tagName === \"link\" && n.attributes.rel === \"prefetch\" && typeof n.attributes.href === \"string\" && n.attributes.href.endsWith(\".js\")) {\n          } else if (tagName === \"img\" && n.attributes.srcset && n.attributes.rr_dataURL) {\n            node.setAttribute(\n              \"rrweb-original-srcset\",\n              n.attributes.srcset\n            );\n          } else {\n            node.setAttribute(name, value.toString());\n          }\n        } catch (error) {\n        }\n      }\n      for (const name in specialAttributes) {\n        const value = specialAttributes[name];\n        if (tagName === \"canvas\" && name === \"rr_dataURL\") {\n          const image = doc.createElement(\"img\");\n          image.onload = () => {\n            const ctx = node.getContext(\"2d\");\n            if (ctx) {\n              ctx.drawImage(image, 0, 0, image.width, image.height);\n            }\n          };\n          image.src = value.toString();\n          if (node.RRNodeType)\n            node.rr_dataURL = value.toString();\n        } else if (tagName === \"img\" && name === \"rr_dataURL\") {\n          const image = node;\n          if (!image.currentSrc.startsWith(\"data:\")) {\n            image.setAttribute(\n              \"rrweb-original-src\",\n              n.attributes.src\n            );\n            image.src = value.toString();\n          }\n        }\n        if (name === \"rr_width\") {\n          node.style.width = value.toString();\n        } else if (name === \"rr_height\") {\n          node.style.height = value.toString();\n        } else if (name === \"rr_mediaCurrentTime\" && typeof value === \"number\") {\n          node.currentTime = value;\n        } else if (name === \"rr_mediaState\") {\n          switch (value) {\n            case \"played\":\n              node.play().catch((e) => console.warn(\"media playback error\", e));\n              break;\n            case \"paused\":\n              node.pause();\n              break;\n          }\n        } else if (name === \"rr_mediaPlaybackRate\" && typeof value === \"number\") {\n          node.playbackRate = value;\n        } else if (name === \"rr_mediaMuted\" && typeof value === \"boolean\") {\n          node.muted = value;\n        } else if (name === \"rr_mediaLoop\" && typeof value === \"boolean\") {\n          node.loop = value;\n        } else if (name === \"rr_mediaVolume\" && typeof value === \"number\") {\n          node.volume = value;\n        }\n      }\n      if (n.isShadowHost) {\n        if (!node.shadowRoot) {\n          node.attachShadow({ mode: \"open\" });\n        } else {\n          while (node.shadowRoot.firstChild) {\n            node.shadowRoot.removeChild(node.shadowRoot.firstChild);\n          }\n        }\n      }\n      return node;\n    }\n    case NodeType.Text:\n      return doc.createTextNode(\n        n.isStyle && hackCss ? adaptCssForReplay(n.textContent, cache) : n.textContent\n      );\n    case NodeType.CDATA:\n      return doc.createCDATASection(n.textContent);\n    case NodeType.Comment:\n      return doc.createComment(n.textContent);\n    default:\n      return null;\n  }\n}\nfunction buildNodeWithSN(n, options) {\n  const {\n    doc,\n    mirror,\n    skipChild = false,\n    hackCss = true,\n    afterAppend,\n    cache\n  } = options;\n  if (mirror.has(n.id)) {\n    const nodeInMirror = mirror.getNode(n.id);\n    const meta = mirror.getMeta(nodeInMirror);\n    if (isNodeMetaEqual(meta, n))\n      return mirror.getNode(n.id);\n  }\n  let node = buildNode(n, { doc, hackCss, cache });\n  if (!node) {\n    return null;\n  }\n  if (n.rootId && mirror.getNode(n.rootId) !== doc) {\n    mirror.replace(n.rootId, doc);\n  }\n  if (n.type === NodeType.Document) {\n    doc.close();\n    doc.open();\n    if (n.compatMode === \"BackCompat\" && n.childNodes && n.childNodes[0].type !== NodeType.DocumentType) {\n      if (n.childNodes[0].type === NodeType.Element && \"xmlns\" in n.childNodes[0].attributes && n.childNodes[0].attributes.xmlns === \"http://www.w3.org/1999/xhtml\") {\n        doc.write(\n          '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"\">'\n        );\n      } else {\n        doc.write(\n          '<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" \"\">'\n        );\n      }\n    }\n    node = doc;\n  }\n  mirror.add(node, n);\n  if ((n.type === NodeType.Document || n.type === NodeType.Element) && !skipChild) {\n    for (const childN of n.childNodes) {\n      const childNode = buildNodeWithSN(childN, {\n        doc,\n        mirror,\n        skipChild: false,\n        hackCss,\n        afterAppend,\n        cache\n      });\n      if (!childNode) {\n        console.warn(\"Failed to rebuild\", childN);\n        continue;\n      }\n      if (childN.isShadow && isElement(node) && node.shadowRoot) {\n        node.shadowRoot.appendChild(childNode);\n      } else if (n.type === NodeType.Document && childN.type == NodeType.Element) {\n        const htmlElement = childNode;\n        let body = null;\n        htmlElement.childNodes.forEach((child) => {\n          if (child.nodeName === \"BODY\")\n            body = child;\n        });\n        if (body) {\n          htmlElement.removeChild(body);\n          node.appendChild(childNode);\n          htmlElement.appendChild(body);\n        } else {\n          node.appendChild(childNode);\n        }\n      } else {\n        node.appendChild(childNode);\n      }\n      if (afterAppend) {\n        afterAppend(childNode, childN.id);\n      }\n    }\n  }\n  return node;\n}\nfunction visit(mirror, onVisit) {\n  function walk(node) {\n    onVisit(node);\n  }\n  for (const id of mirror.getIds()) {\n    if (mirror.has(id)) {\n      walk(mirror.getNode(id));\n    }\n  }\n}\nfunction handleScroll(node, mirror) {\n  const n = mirror.getMeta(node);\n  if ((n == null ? void 0 : n.type) !== NodeType.Element) {\n    return;\n  }\n  const el = node;\n  for (const name in n.attributes) {\n    if (!(Object.prototype.hasOwnProperty.call(n.attributes, name) && name.startsWith(\"rr_\"))) {\n      continue;\n    }\n    const value = n.attributes[name];\n    if (name === \"rr_scrollLeft\") {\n      el.scrollLeft = value;\n    }\n    if (name === \"rr_scrollTop\") {\n      el.scrollTop = value;\n    }\n  }\n}\nfunction rebuild(n, options) {\n  const {\n    doc,\n    onVisit,\n    hackCss = true,\n    afterAppend,\n    cache,\n    mirror = new Mirror()\n  } = options;\n  const node = buildNodeWithSN(n, {\n    doc,\n    mirror,\n    skipChild: false,\n    hackCss,\n    afterAppend,\n    cache\n  });\n  visit(mirror, (visitedNode) => {\n    if (onVisit) {\n      onVisit(visitedNode);\n    }\n    handleScroll(visitedNode, mirror);\n  });\n  return node;\n}\nexport {\n  IGNORED_NODE,\n  Mirror,\n  NodeType,\n  adaptCssForReplay,\n  buildNodeWithSN,\n  classMatchesRegex,\n  cleanupSnapshot,\n  createCache,\n  createMirror,\n  escapeImportStatement,\n  extractFileExtension,\n  fixSafariColons,\n  genId,\n  getInputType,\n  ignoreAttribute,\n  is2DCanvasBlank,\n  isCSSImportRule,\n  isCSSStyleRule,\n  isElement,\n  isNativeShadowDom,\n  isNodeMetaEqual,\n  isShadowRoot,\n  maskInputValue,\n  needMaskingText,\n  rebuild,\n  serializeNodeWithId,\n  snapshot,\n  stringifyRule,\n  stringifyStylesheet,\n  toLowerCase,\n  transformAttribute,\n  visitSnapshot\n};\n//# sourceMappingURL=rrweb-snapshot.js.map\n","import type { documentNode, elementNode } from \"rrweb-snapshot\";\nimport { NodeType } from \"rrweb-snapshot\";\nimport { EventType } from \"rrweb\";\nimport type { eventWithTime, fullSnapshotEvent } from \"@rrweb/types\";\n\n// TODO: take into account media conditions: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media\n// for example its best to filter out css files that are only used in print\n\nconst getHTMLElementNode = (event: fullSnapshotEvent): elementNode | undefined => {\n  const { node } = event.data;\n  if (node.type !== NodeType.Document) return undefined;\n  const HTMLElement = node.childNodes.find(\n    (element) => element.type === NodeType.Element && element.tagName === \"html\",\n  ) as elementNode | undefined;\n\n  return HTMLElement;\n};\n\n// function that loops through nested child nodes to find nodes with tagname link\nconst getLinksFromHTMLElementNode = (node: elementNode | documentNode): elementNode[] => {\n  const links: elementNode[] = [];\n\n  const { childNodes } = node;\n  for (const childNode of childNodes) {\n    if (\n      childNode.type === NodeType.Element &&\n      childNode.tagName === \"link\" &&\n      childNode.attributes.href &&\n      childNode.attributes.rel === \"stylesheet\"\n    ) {\n      links.push(childNode);\n    }\n    if (\"childNodes\" in childNode && childNode.childNodes.length > 0) {\n      links.push(...getLinksFromHTMLElementNode(childNode));\n    }\n  }\n  return links;\n};\n\nexport const extractStylesheets = (events: eventWithTime[]): string[] => {\n  const links = new Set();\n\n  events.forEach((event) => {\n    if (event.type !== EventType.FullSnapshot) return;\n    const HTMLElement = getHTMLElementNode(event);\n    if (!HTMLElement) return;\n\n    getLinksFromHTMLElementNode(HTMLElement).forEach((link) => {\n      if (typeof link.attributes.href !== \"string\") return;\n      links.add(link.attributes.href);\n    });\n  });\n\n  // flatten and remove undefined values\n  return [...links] as string[];\n};\nexport default extractStylesheets;\n","<script setup lang=\"ts\">\nimport { extractStylesheets } from \"@modules/event_asset_extractor\";\nimport { listenToEvent } from \"@modules/event_hub\";\nimport type { eventWithTime } from \"@rrweb/types\";\nimport { onMounted, ref } from \"vue\";\n\nconst props = defineProps<{\n  events: eventWithTime[];\n}>();\n\nconst assets = ref(extractStylesheets(props.events as eventWithTime[]));\n\nconst refreshAssets = () => {\n  assets.value = extractStylesheets(props.events as eventWithTime[]);\n};\n\nonMounted(() => {\n  listenToEvent(\"changed-events\", refreshAssets);\n  listenToEvent(\"loaded-events\", refreshAssets);\n});\n</script>\n\n<template>\n  <link v-for=\"asset in assets\" :key=\"asset\" rel=\"preload\" as=\"style\" :href=\"asset\" />\n</template>\n","import { noop } from 'lodash';\n\n\nexport function beep({\n  duration = 500,\n  frequency = 400,\n  volume = 1,\n  type = 'sine',\n  callback = noop,\n}: {\n  duration?: number,\n  frequency?: number,\n  volume?: number,\n  type?: OscillatorNode['type'],\n  callback?: () => void,\n}): void {\n  const audioCtx = new AudioContext();\n  const oscillator = audioCtx.createOscillator();\n  const gainNode = audioCtx.createGain();\n\n  oscillator.connect(gainNode);\n  gainNode.connect(audioCtx.destination);\n\n  if (volume) {\n    gainNode.gain.value = volume;\n  }\n  if (frequency) {\n    oscillator.frequency.value = frequency;\n  }\n  if (type) {\n    oscillator.type = type;\n  }\n  if (callback) {\n    oscillator.onended = callback;\n  }\n\n  oscillator.start(audioCtx.currentTime);\n  oscillator.stop(audioCtx.currentTime + (duration || 500) / 1000);\n};\n\nexport default beep;","<script setup lang=\"ts\">\n// When to hide/show the title and player controls:\n// - if the video is in the initial state, hide the controls\n// - if the video is playing, hide both unless the user hovers over the player\n// - otherwise, show both.\n\nimport axios from \"axios\";\nimport {\n  useFullscreen,\n  onClickOutside,\n  useIdle,\n  useWindowSize,\n  useMouseInElement,\n  usePreferredLanguages,\n} from \"@vueuse/core\";\nimport {\n  computed,\n  provide,\n  ref,\n  watch,\n  onMounted,\n  onBeforeUnmount,\n  onBeforeMount,\n  onUnmounted,\n  nextTick,\n} from \"vue\";\nimport type { Ref } from \"vue\";\nimport { calculateRuntime, calculateFormattedRuntime } from \"@modules/runtime\";\nimport type { eventWithTime } from \"@rrweb/types\";\nimport PureSlide from \"@components/PureSlide.vue\";\nimport SpinningCircle from \"@components/SpinningCircle.vue\";\nimport Player from \"@components/Player.vue\";\nimport PlayerControls from \"@components/PlayerControls.vue\";\nimport PlayerDebugger from \"@components/PlayerDebugger.vue\";\nimport PlayerQrPanel from \"@components/PlayerQrPanel.vue\";\nimport PublicPlayerTimeline from \"@components/PublicPlayerTimeline.vue\";\nimport PreloadStyleheetsFromEvents from \"@components/PreloadStyleheetsFromEvents.vue\";\nimport Icon from \"@components/Icon.vue\";\nimport provideElapsedTime from \"@modules/provide_elapsed_time\";\nimport { getErrorMessage } from \"@modules/errors\";\nimport { eventHub } from \"@modules/event_hub\";\nimport { useActionManipulators } from \"@modules/action_manipulators\";\nimport Video, { Language, PublicVideo } from \"@models/Video\";\nimport VoiceOver from \"@models/VoiceOver\";\nimport { Action, BrowserAction, ImageSlide, TextSlide, VideoSlide } from \"@models/ActionHierarchy\";\nimport PublicPlayerAboutScreen from \"@components/PublicPlayerAboutScreen.vue\";\nimport AudioRecording from \"@models/AudioRecording\";\nimport { type Song } from \"@modules/songs\";\nimport type { playerConfig } from \"rrweb\";\nimport { triggerSilentAudioPlayback } from \"@modules/trigger_silent_audio_playback\";\nimport { useAppsignal } from \"@modules/appsignal\";\nimport { beep } from \"@modules/beep\";\n\nimport { useRouter } from \"vue-router\";\n\nconst HEADLESS_STATUS_BAR_HEIGHT = 5;\n\nconst router = useRouter();\n\nconst eventsApi = axios.create({ baseURL: \"/api/v1/events\" });\n\ntype toggleActionStates = \"play\" | \"pause\";\n\ntype PropType = {\n  videoToken: string;\n  language?: string;\n  headless?: boolean;\n  autoplay?: boolean;\n  loop?: boolean;\n  replayCanvas?: boolean;\n  forcePastInitialState?: boolean; // so that this can be overridden in a story.\n  forcePlayerToBeReady?: boolean; // so that this can be overridden in a story.\n  forceClapboardOn?: boolean; // so that this can be overridden in a story.\n  customRrwebConfig?: Partial<playerConfig>;\n};\n\nconst props = withDefaults(defineProps<PropType>(), {\n  autoplay: false,\n  loop: false,\n  customRrwebConfig: () => ({}),\n});\n\nconst isLoading = ref(true);\nconst isLoadingEvents = ref(true);\nconst playerIsReady = ref(props.forcePlayerToBeReady ?? false);\nconst shouldBePlaying = ref<boolean>(props.autoplay);\nconst isPlaying = ref(false); // Possibly add autoplay param\nconst isSeeking = ref(0);\nconst hasStartedPlayer = ref(false); // Only false when the player has never been started\nconst isFinished = ref(false);\nconst videoId: Ref<null | number> = ref(null);\nconst currentActionId: Ref<null | string> = ref(null);\nconst error: Ref<null | string> = ref(null);\nconst lastToggleAction: Ref<null | toggleActionStates> = ref(null);\nconst isFullScreen = ref(false);\nconst showAboutScreen = ref(false);\nconst aboutScreen = ref<HTMLDivElement | undefined>(undefined);\nconst lastToggledPlayAt = ref(0);\nconst { idle, lastActive } = useIdle(2 * 1000);\n\nconst inInitialState = ref(!props.forcePastInitialState);\n\nconst events: eventWithTime[] = []; // for performance reasons we don't want the events array to be reactive\n\nfunction openAboutScreen(): void {\n  showAboutScreen.value = true;\n  // eslint-disable-next-line no-use-before-define\n  pause();\n}\n\nonClickOutside(aboutScreen, openAboutScreen);\n\n// computed\nconst video = computed(() => {\n  if (!videoId.value) return null;\n  return Video.query()\n    .with([\"actions\", \"voiceOvers.audioRecordings\"])\n    .find(videoId.value) as PublicVideo | null;\n});\nconst audioRecordings = computed(() =>\n  AudioRecording.query().where(\"videoId\", videoId.value).orderBy(\"position\").all(),\n);\nconst currentAction = computed(() => {\n  if (!currentActionId.value) return null;\n  return Action.find(currentActionId.value);\n});\nconst voiceOvers = computed(() => VoiceOver.all());\nconst showDebugger = computed(() => Boolean(!isLoading.value && video.value && false));\n\nfunction switchLanguage(code: string): void {\n  // We do an old-fashioned redirect here because the player is not reactive yet.\n  window.location.replace(\n    router.resolve({\n      name: \"player\",\n      params: { videoToken: props.videoToken, language: code },\n    }).fullPath,\n  );\n}\n\nconst {\n  isSupported: fullscreenIsSupported,\n  isFullscreen,\n  toggle: toggleFullScreen,\n} = useFullscreen(document.documentElement);\nconst playerRoot = ref<HTMLDivElement | null>(null);\nconst { isOutside: mouseIsOutsidePlayerRoot } = useMouseInElement(playerRoot);\n\nconst windowSize = useWindowSize();\nconst showToggle = computed(() => {\n  if (inInitialState.value) return true;\n  return false;\n});\nconst showControls = computed(() => {\n  if (inInitialState.value) return false;\n  if (\n    isPlaying.value &&\n    (lastToggledPlayAt.value >= lastActive.value || idle.value || mouseIsOutsidePlayerRoot.value)\n  )\n    return false;\n  return true;\n});\nconst showTimeline = computed(\n  () => showControls.value && windowSize.width.value > 360 && windowSize.height.value > 200,\n);\nconst showHeader = computed(() => {\n  if (inInitialState.value) return true;\n  return showControls.value;\n});\n\nconst lastToggleActionIcon = computed(() => {\n  if (lastToggleAction.value) return `${lastToggleAction.value}.fill`;\n  if (isPlaying.value) return \"play.fill\";\n  return \"pause.fill\";\n});\nconst toggleIcon = computed(() => {\n  if (lastToggleAction.value) return lastToggleActionIcon.value;\n  if (isPlaying.value) return \"pause.fill\";\n  return \"play.fill\";\n});\nconst nextToggleAction = computed(() => {\n  if (!isPlaying.value) return \"play.fill\";\n  return \"pause.fill\";\n});\nconst visibleActions = computed(() =>\n  Action.query()\n    .where(\"videoId\", videoId.value)\n    .where(\"visible\", true)\n    .where(\"index\", (value) => value !== null)\n    .orderBy(\"index\")\n    .all(),\n);\n\nconst videoRuntime = computed(() => calculateRuntime(visibleActions.value, voiceOvers.value));\nconst videoDimensions = computed(() => ({\n  width: video.value?.width || 1280,\n  height: video.value?.height || 720,\n}));\n\nconst { setActionPreviewable } = useActionManipulators({\n  actions: visibleActions,\n  voiceOvers,\n  video,\n  videoId: videoId.value,\n});\n\nconst toggleButton: Ref<null | HTMLButtonElement> = ref(null);\nfunction triggerToggleButton(action: \"play\" | \"pause\"): void {\n  lastToggleAction.value = action;\n  // Reset the classname because adding the classname will trigger the CSS animation.\n  (toggleButton.value as HTMLButtonElement)?.classList.remove(\"toggled\");\n  nextTick(() => {\n    // eslint-disable-next-line no-unused-expressions\n    (toggleButton.value as HTMLButtonElement)?.offsetWidth; // trigger dom reflow and prime CSS animations\n    (toggleButton.value as HTMLButtonElement)?.classList.add(\"toggled\");\n    setTimeout(\n      () => {\n        // prepare the toggle for the next action:\n        if (action === \"play\") lastToggleAction.value = \"pause\";\n        else lastToggleAction.value = \"play\";\n      },\n      10 + 1000 + 10,\n    ); // the 1s part is tightly coupled with the duration toggle animation (1s).\n  });\n}\n\nconst play = (): void => {\n  if (currentAction.value && currentAction.value.isLast) {\n    // rewind the player:\n    currentActionId.value = video.value?.actions?.[0]?.id || null;\n  }\n  if (inInitialState.value) {\n    triggerToggleButton(\"play\");\n  }\n  isPlaying.value = true;\n  hasStartedPlayer.value = true;\n};\n\nconst pause = (): void => {\n  isPlaying.value = false;\n};\n\nwatch(isPlaying, (newPlayingState) => {\n  if (inInitialState.value) inInitialState.value = false;\n  lastToggledPlayAt.value = Date.now();\n\n  if (newPlayingState) navigator.mediaSession.playbackState = \"playing\";\n  else navigator.mediaSession.playbackState = \"paused\";\n});\n\n// respond to media buttons:\nnavigator.mediaSession?.setActionHandler(\"play\", play);\nnavigator.mediaSession?.setActionHandler(\"pause\", pause);\n\nonBeforeUnmount(() => {\n  // de-register from media buttons:\n  navigator.mediaSession?.setActionHandler(\"play\", null);\n  navigator.mediaSession?.setActionHandler(\"pause\", null);\n});\n\nconst isBuffering = computed(() => shouldBePlaying.value && !playerIsReady.value);\n\nconst { sendToAppsignal } = useAppsignal();\nconst togglePlay = (): void => {\n  // Until the player is ready, toggling playback will only toggle a shouldBePlaying and .\n  // When the player is ready to play, toggling playback will just start the player.\n  if (playerIsReady.value) {\n    if (isPlaying.value) {\n      triggerToggleButton(\"pause\");\n      pause();\n    } else {\n      triggerSilentAudioPlayback(sendToAppsignal);\n      triggerToggleButton(\"play\");\n      play();\n    }\n    shouldBePlaying.value = isPlaying.value;\n  } else {\n    if (shouldBePlaying.value) {\n      triggerToggleButton(\"pause\");\n    } else {\n      triggerSilentAudioPlayback(sendToAppsignal);\n      triggerToggleButton(\"play\");\n    }\n    shouldBePlaying.value = !shouldBePlaying.value;\n  }\n};\nwatch(playerIsReady, (isReady) => {\n  if (window.playerApp && props.headless) window.playerApp.isReady = isReady;\n  if (shouldBePlaying.value) {\n    play();\n  }\n});\n\nconst clapboard = ref(false);\nwatch(clapboard, (val) => {\n  if (val) {\n    const callback = () => {\n      if (!props.forceClapboardOn) clapboard.value = false;\n    };\n    beep({ duration: 500, callback });\n  }\n});\n\nconst preferredLanguageCodes = usePreferredLanguages();\nconst preferredAvailableLanguages = computed(\n  (): Language[] =>\n    preferredLanguageCodes.value\n      .map((code) => video.value?.languages?.find((l) => l.code === code))\n      .filter(Boolean) as Language[],\n);\n\nconst currentLanguageCode = computed(() => {\n  if (props.language) return props.language;\n  return preferredAvailableLanguages.value[0]?.code || video.value?.primaryLanguage || undefined;\n});\n\nconst translatedLanguageCodeForAPI = computed(() => {\n  // If the current language is the primary language of the video, we don't need to send it to the API.\n  if (currentLanguageCode.value === video.value?.primaryLanguage) return undefined;\n  return currentLanguageCode.value;\n});\n\nonBeforeMount(async () => {\n  try {\n    const vid = (await Video.fetch(\n      props.videoToken,\n      translatedLanguageCodeForAPI.value,\n    )) as PublicVideo;\n    if (!vid) throw new Error(`404 - Video not found ${props.videoToken}`);\n\n    // console.log(\"video\", video);\n    videoId.value = vid.id;\n\n    currentActionId.value = Action.firstVisibleAction(visibleActions.value)?.id || null;\n    isLoading.value = false;\n\n    const eventsResponse = await eventsApi.get(\"\", {\n      params: { token: props.videoToken, language: translatedLanguageCodeForAPI.value },\n    });\n    // this.events is a plain JavaScript variable and not reactive/observable. Therefore we have\n    // to manually fire a (global) event so that the player can initialize itself when events are\n    // loaded but nothing observable gets changed.\n    events.push(...eventsResponse.data);\n    eventHub.$emit(\"loaded-events\");\n    setActionPreviewable(events);\n  } catch (err) {\n    error.value = getErrorMessage(err);\n    console.error(err);\n  }\n  isLoading.value = false;\n  isLoadingEvents.value = false;\n});\n\nonMounted(() => {\n  window.playerApp = {\n    events,\n    play,\n    clapboard: () => {\n      clapboard.value = true;\n    },\n    videoRuntime,\n    isBuffering,\n  };\n});\n\nonUnmounted(() => {\n  delete window.playerApp;\n});\n\nconst reachedActionId = (id: string): void => {\n  currentActionId.value = id;\n};\n\nconst jumpToActionId = (actionId: string | null): void => {\n  isSeeking.value += 1;\n  if (actionId) reachedActionId(actionId);\n};\n\n/**\n * Provides `elapsedTime`, `formattedElapsedTime` and `runtimeOfPreviousActions`\n */\nprovideElapsedTime(isPlaying, currentActionId, visibleActions, voiceOvers);\n\nprovide(\n  \"isPlaying\",\n  computed(() => isPlaying.value),\n);\nprovide(\n  \"currentActionId\",\n  computed(() => currentActionId.value),\n);\n</script>\n\n<template>\n  <PreloadStyleheetsFromEvents :events=\"events\" />\n  <div\n    ref=\"playerRoot\"\n    class=\"group/player dark relative max-h-screen min-h-screen select-none items-center bg-black text-neutral-100\"\n    :class=\"[{ 'is-playing': isPlaying }, !headless && 'flex h-full']\"\n    :style=\"headless ? `margin-top: ${HEADLESS_STATUS_BAR_HEIGHT}px;` : ''\"\n    @click=\"togglePlay\"\n    @contextmenu.stop.prevent=\"\n      showAboutScreen = true;\n      pause();\n    \"\n  >\n    <!-- headless status bar -->\n    <div\n      v-if=\"headless\"\n      :style=\"`height: ${HEADLESS_STATUS_BAR_HEIGHT}px`\"\n      class=\"fixed inset-x-0 top-0 z-[1000] text-neutral-100\"\n      :class=\"[\n        clapboard && 'bg-[rgb(255,255,0)]',\n        !isLoading && isPlaying && 'bg-[rgb(0,255,0)]',\n        !isLoading && isFinished && 'bg-[rgb(0,0,255)]',\n        error && 'bg-[rgb(255,0,0)]',\n      ]\"\n    />\n\n    <div\n      v-if=\"!headless\"\n      class=\"pointer-events-none fixed inset-0 z-40 bg-black/25 transition-opacity\"\n      :class=\"[showHeader || showToggle || showControls ? 'opacity-100' : 'opacity-0']\"\n    >\n      <!--\n        This semi-transparent, dark background exists separately from the controls, toggle and\n        header so it can be put above the player but underneath everything else.\n      -->\n    </div>\n\n    <header\n      v-if=\"!headless\"\n      class=\"fixed top-0 z-50 h-[130px] w-full p-4 text-xs text-white transition-opacity xs:text-base md:text-xl\"\n      :class=\"[showHeader ? 'opacity-100' : 'opacity-0']\"\n      style=\"text-shadow: 0 0 2px rgba(0, 0, 0, 0.5)\"\n    >\n      <h1 v-if=\"isLoading\"></h1>\n      <!-- TODO: replace with screenshot with overlaid title and play button -->\n      <template v-else-if=\"error\">\n        <h1 class=\"font-bold\">Whoops, the video could not be loaded:</h1>\n        <p class=\"\">{{ error }}</p>\n      </template>\n      <h1 v-else-if=\"video\" class=\"\">\n        {{ video.name }}\n      </h1>\n    </header>\n    <div class=\"z-30 m-auto w-full max-w-full grow overflow-hidden\">\n      <div class=\"m-auto aspect-video h-full max-h-screen grow overflow-hidden\">\n        <template v-if=\"video && !isLoading\">\n          <div v-if=\"!playerIsReady\" class=\"relative aspect-video max-h-screen overflow-hidden\">\n            <div\n              v-if=\"isBuffering && !headless\"\n              class=\"absolute inset-0 z-10 flex place-content-center bg-black/30\"\n            >\n              <SpinningCircle />\n            </div>\n            <PureSlide\n              v-if=\"currentAction instanceof TextSlide\"\n              class=\"h-full w-full\"\n              v-bind=\"{\n                title: currentAction.title,\n                body: currentAction.text,\n                // logoUrl: video.logoUrl || '',\n                horizontalAlignment: currentAction.horizontalAlignment,\n                callToAction: currentAction.callToAction,\n                callToActionUrl: currentAction.callToActionUrl,\n                textColor: currentAction.textColor,\n                backgroundColor: currentAction.backgroundColor,\n              }\"\n            />\n            <img\n              v-else-if=\"video?.thumbnailUrl\"\n              class=\"w-full object-cover\"\n              :src=\"video.thumbnailUrl\"\n              draggable=\"false\"\n            />\n            <div v-else class=\"\"></div>\n          </div>\n          <Player\n            v-if=\"!isLoadingEvents\"\n            v-show=\"playerIsReady\"\n            :video=\"video\"\n            :events=\"events\"\n            :actions=\"visibleActions\"\n            :voice-overs=\"voiceOvers\"\n            :audio-recordings=\"audioRecordings\"\n            :background-song=\"video.backgroundSong\"\n            :current-action-id=\"currentActionId || undefined\"\n            :is-playing=\"isPlaying\"\n            :is-seeking=\"isSeeking\"\n            :is-recording-browser=\"false\"\n            :hide-forced-subtitles=\"!hasStartedPlayer\"\n            :replay-canvas=\"replayCanvas\"\n            :custom-rrweb-config=\"video.customRrwebPlayerConfig\"\n            :headless=\"headless\"\n            @ready=\"\n              playerIsReady = true;\n              props.autoplay ? play() : null;\n            \"\n            @started=\"isPlaying = true\"\n            @paused=\"isPlaying = false\"\n            @finished=\"\n              isFinished = true;\n              props.loop ? play() : null;\n            \"\n            @reached-action-id=\"\n              isSeeking = 0;\n              reachedActionId($event);\n            \"\n          />\n        </template>\n      </div>\n    </div>\n    <template v-if=\"!headless && !isLoading && video\">\n      <div\n        class=\"toggle-overlay pointer-events-none absolute inset-0 z-40 flex cursor-default items-center justify-center drop-shadow-sm transition-colors\"\n        :class=\"showToggle ? 'opacity-100' : 'opacity-0'\"\n      >\n        <button\n          ref=\"toggleButton\"\n          class=\"flex h-24 w-24 scale-75 items-center justify-center rounded-full p-5 text-white outline-none transition-all group-hover/player:scale-90 group-hover/sm:scale-90 group-hover/player:sm:scale-110 md:scale-100 group-hover/player:md:scale-125\"\n        >\n          <Icon\n            :icon=\"`${toggleIcon}:opaque`\"\n            class=\"h-12 w-12 text-white\"\n            :class=\"toggleIcon === 'play.fill' ? 'relative left-[3px]' : ''\"\n          />\n        </button>\n      </div>\n      <a\n        v-if=\"video?.showBranding && !isPlaying\"\n        class=\"fixed right-3 z-40 ml-3 flex origin-bottom-right scale-[0.35] flex-col items-center gap-1 rounded-2xl bg-black/5 p-3 pr-5 text-center text-xs leading-none text-white drop-shadow-sm transition-colors hover:bg-black/10 xs:scale-50 md:scale-75\"\n        :class=\"showControls ? (showTimeline ? 'bottom-16 sm:bottom-20' : 'bottom-10') : 'bottom-3'\"\n        href=\"https://www.recordonce.com/\"\n        target=\"_blank\"\n        @click.stop\n      >\n        <div class=\"absolute left-[52px] top-1 hidden xs:block\">created with</div>\n        <img\n          class=\"block w-48\"\n          src=\"@assets/images/Record-Once-logo-405x64px-light.svg\"\n          alt=\"Record Once\"\n        />\n      </a>\n\n      <div class=\"fixed bottom-0 z-50 flex w-full flex-col\">\n        <div\n          class=\"flex w-full flex-col gap-0 transition-opacity\"\n          :class=\"[showControls ? 'opacity-100' : 'opacity-0']\"\n        >\n          <PublicPlayerTimeline\n            v-show=\"showTimeline\"\n            class=\"z-30 w-full px-2\"\n            :actions=\"visibleActions\"\n            :voice-overs=\"voiceOvers\"\n            :video-runtime=\"videoRuntime\"\n            :video-dimensions=\"videoDimensions\"\n            :current-action-id=\"currentActionId || undefined\"\n            :base-file-url=\"video.baseFileUrl\"\n            :logo-url=\"video.logoUrl || undefined\"\n            @jump-to-action-id=\"jumpToActionId($event)\"\n          />\n          <PlayerControls\n            v-if=\"videoId\"\n            :video-id=\"videoId\"\n            :actions=\"visibleActions\"\n            :current-action-id=\"currentActionId || null\"\n            :voice-overs=\"voiceOvers\"\n            :disabled=\"false\"\n            :is-playing=\"isPlaying\"\n            :allow-full-screen=\"fullscreenIsSupported\"\n            :is-full-screen=\"isFullScreen\"\n            :video-runtime=\"videoRuntime\"\n            :current-language-code=\"currentLanguageCode\"\n            :languages=\"video.languages\"\n            class=\"z-30\"\n            @play=\"play\"\n            @pause=\"pause\"\n            @jump-to-action-id=\"jumpToActionId($event)\"\n            @toggle-full-screen=\"toggleFullScreen\"\n            @open-about-screen=\"openAboutScreen\"\n            @switch-language=\"switchLanguage\"\n          />\n        </div>\n      </div>\n    </template>\n    <PublicPlayerAboutScreen\n      v-if=\"showAboutScreen && video?.name && video?.embedHtml && video?.guideUrl\"\n      ref=\"aboutScreen\"\n      :title=\"video.name\"\n      :embed-html=\"video.embedHtml\"\n      :guide-url=\"video.guideUrl\"\n      @close=\"showAboutScreen = false\"\n    />\n\n    <PlayerDebugger\n      v-if=\"showDebugger && videoId\"\n      :is-loading=\"isLoading\"\n      :is-playing=\"isPlaying\"\n      :video-id=\"videoId\"\n      :current-action-id=\"currentActionId || undefined\"\n      @play=\"play\"\n      @pause=\"pause\"\n      @jump-to-action-id=\"jumpToActionId($event)\"\n    />\n  </div>\n  <!-- <PlayerQrPanel\n    v-if=\"headless\"\n    class=\"fixed inset-x-0 bottom-0 z-[1000] bg-neutral-800/80 text-neutral-100\"\n    :is-loading=\"isLoading\"\n    :is-playing=\"isPlaying\"\n    :is-finished=\"isFinished\"\n    :error=\"error || null\"\n    :current-action-id=\"currentActionId || undefined\"\n  /> -->\n</template>\n\n<style lang=\"scss\" scoped>\n.toggle-overlay button {\n  @keyframes zoomFade {\n    0% {\n      transform: scale(0.01);\n      opacity: 0;\n    }\n\n    5% {\n      transform: scale(0.5);\n      opacity: 1;\n    }\n\n    100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }\n\n  &.toggled {\n    animation-duration: 1s;\n    animation-timing-function: ease-in-out;\n    animation-iteration-count: 1;\n    animation-fill-mode: both;\n    animation-name: zoomFade;\n  }\n}\n</style>\n"],"names":["_imports_0","muted","toggleMuted","videoHasSubtitles","subtitlesEnabled","toggleSubtitles","firstAction","currentAction","currentActionIndex","previousAction","nextAction","elapsedTime","formattedElapsedTime","formattedRemainingTime","goTo","usePlayerControls","props","emit","status","computed","toggleButtonIcon","toggleLabel","formattedVideoRuntime","formatSecondsAsString","languageCode","ref","sortedLanguages","a","b","watch","newLanguageCode","_sfc_main","defineComponent","Video","Action","_hoisted_4","_ctx","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_cache","_hoisted_2","_hoisted_3","_Fragment","_renderList","action","_normalizeStyle","$event","_hoisted_5","_toDisplayString","_createTextVNode","_createCommentVNode","inTheFuture","selectActionId","id","groups","getGroupWidthPercentage","useCachedTimeBasedTimeline","calculateStartAt","actionId","allGroups","startAt","group","NodeType","NodeType2","getHTMLElementNode","event","node","element","getLinksFromHTMLElementNode","links","childNodes","childNode","extractStylesheets","events","EventType","HTMLElement","link","assets","refreshAssets","onMounted","listenToEvent","beep","duration","frequency","volume","type","callback","noop","audioCtx","oscillator","gainNode","HEADLESS_STATUS_BAR_HEIGHT","router","useRouter","eventsApi","axios","isLoading","isLoadingEvents","playerIsReady","_a","shouldBePlaying","isPlaying","isSeeking","hasStartedPlayer","isFinished","videoId","currentActionId","error","lastToggleAction","isFullScreen","showAboutScreen","aboutScreen","lastToggledPlayAt","idle","lastActive","useIdle","inInitialState","openAboutScreen","pause","onClickOutside","video","audioRecordings","AudioRecording","voiceOvers","VoiceOver","showDebugger","switchLanguage","code","fullscreenIsSupported","isFullscreen","toggleFullScreen","useFullscreen","playerRoot","mouseIsOutsidePlayerRoot","useMouseInElement","windowSize","useWindowSize","showToggle","showControls","showTimeline","showHeader","lastToggleActionIcon","toggleIcon","visibleActions","value","videoRuntime","calculateRuntime","videoDimensions","_b","setActionPreviewable","useActionManipulators","toggleButton","triggerToggleButton","nextTick","play","_c","newPlayingState","onBeforeUnmount","isBuffering","sendToAppsignal","useAppsignal","togglePlay","triggerSilentAudioPlayback","isReady","clapboard","val","preferredLanguageCodes","usePreferredLanguages","preferredAvailableLanguages","l","currentLanguageCode","translatedLanguageCodeForAPI","onBeforeMount","vid","eventsResponse","eventHub","err","getErrorMessage","onUnmounted","reachedActionId","jumpToActionId","provideElapsedTime","provide"],"mappings":"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"}