{"version":3,"names":["elementCss","globalState","_a","window","TangiaVideoPlayerGlobal","GlobalStateEvent","GlobalVideoPlayingEvent","instanceCnt","transparentPixel","TangiaVideoPlayer","this","instanceId","_b","muted","componentWillLoad","isMuted","alwaysMuted","connectedCallback","videoOnVisible","intersectionObserver","disconnect","IntersectionObserver","entries","isVisible","isIntersecting","setTimeout","play","unobserve","el","observe","Math","random","root","document","autoplay","videoOnHover","disconnectedCallback","handleMouseEnter","isHovering","playing","handleMouseLeave","handleGlobalMute","handleGlobalVideoPlaying","e","_video","detail","element","allowConcurrent","pause","render","showVideo","undefined","h","Host","class","extracss","src","poster","effectivelyMuted","domExtras","controlslist","disablePictureInPicture","disableRemotePlayback","defaultMuted","Object","assign","ref","setAttribute","playsInline","playsinline","onClick","togglePlay","loop","preload","onPlaying","onEnded","endsWith","Fragment","type","replace","id","key","name","mute","unmute","preventDefault","stopImmediatePropagation","dispatchEvent","CustomEvent","err","console","error","toggleOnClick"],"sources":["src/components/tangia-video-player/element.css?tag=tangia-video-player&encapsulation=shadow","src/components/tangia-video-player/tangia-video-player.tsx"],"sourcesContent":["/*\n! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com\n*/\n\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  /* 1 */\n  border-width: 0;\n  /* 2 */\n  border-style: solid;\n  /* 2 */\n  border-color: #BFBFC2;\n  /* 2 */\n}\n\n::before,\n::after {\n  --tw-content: '';\n}\n\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n*/\n\nhtml {\n  line-height: 1.5;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n  -moz-tab-size: 4;\n  /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4;\n  /* 3 */\n  font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  /* 4 */\n  font-feature-settings: normal;\n  /* 5 */\n  font-variation-settings: normal;\n  /* 6 */\n}\n\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\n\nbody {\n  margin: 0;\n  /* 1 */\n  line-height: inherit;\n  /* 2 */\n}\n\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\n\nhr {\n  height: 0;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  border-top-width: 1px;\n  /* 3 */\n}\n\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n\n/*\nRemove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\nAdd the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n1. Use the user's configured `mono` font family by default.\n2. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/*\nAdd the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0;\n  /* 1 */\n  border-color: inherit;\n  /* 2 */\n  border-collapse: collapse;\n  /* 3 */\n}\n\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  /* 1 */\n  font-feature-settings: inherit;\n  /* 1 */\n  font-variation-settings: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  font-weight: inherit;\n  /* 1 */\n  line-height: inherit;\n  /* 1 */\n  color: inherit;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n  padding: 0;\n  /* 3 */\n}\n\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\n\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\n\nbutton,\n[type='button'],\n[type='reset'],\n[type='submit'] {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n\n[type='search'] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\n\n/*\nAdd the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nblockquote,\ndl,\ndd,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\nfigure,\np,\npre {\n  margin: 0;\n}\n\nfieldset {\n  margin: 0;\n  padding: 0;\n}\n\nlegend {\n  padding: 0;\n}\n\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\nReset default styling for dialogs.\n*/\n\ndialog {\n  padding: 0;\n}\n\n/*\nPrevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\n\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1;\n  /* 1 */\n  color: #8C8787;\n  /* 2 */\n}\n\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1;\n  /* 1 */\n  color: #8C8787;\n  /* 2 */\n}\n\n/*\nSet the default cursor for buttons.\n*/\n\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n\n:disabled {\n  cursor: default;\n}\n\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block;\n  /* 1 */\n  vertical-align: middle;\n  /* 2 */\n}\n\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n\n[hidden] {\n  display: none;\n}\n\n*, ::before, ::after {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(0 190 217 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n::backdrop {\n  --tw-border-spacing-x: 0;\n  --tw-border-spacing-y: 0;\n  --tw-translate-x: 0;\n  --tw-translate-y: 0;\n  --tw-rotate: 0;\n  --tw-skew-x: 0;\n  --tw-skew-y: 0;\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  --tw-pan-x:  ;\n  --tw-pan-y:  ;\n  --tw-pinch-zoom:  ;\n  --tw-scroll-snap-strictness: proximity;\n  --tw-gradient-from-position:  ;\n  --tw-gradient-via-position:  ;\n  --tw-gradient-to-position:  ;\n  --tw-ordinal:  ;\n  --tw-slashed-zero:  ;\n  --tw-numeric-figure:  ;\n  --tw-numeric-spacing:  ;\n  --tw-numeric-fraction:  ;\n  --tw-ring-inset:  ;\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgb(0 190 217 / 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  --tw-blur:  ;\n  --tw-brightness:  ;\n  --tw-contrast:  ;\n  --tw-grayscale:  ;\n  --tw-hue-rotate:  ;\n  --tw-invert:  ;\n  --tw-saturate:  ;\n  --tw-sepia:  ;\n  --tw-drop-shadow:  ;\n  --tw-backdrop-blur:  ;\n  --tw-backdrop-brightness:  ;\n  --tw-backdrop-contrast:  ;\n  --tw-backdrop-grayscale:  ;\n  --tw-backdrop-hue-rotate:  ;\n  --tw-backdrop-invert:  ;\n  --tw-backdrop-opacity:  ;\n  --tw-backdrop-saturate:  ;\n  --tw-backdrop-sepia:  ;\n}\n\n.flex {\n  display: flex;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.shrink-0 {\n  flex-shrink: 0;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.object-contain {\n  -o-object-fit: contain;\n     object-fit: contain;\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n","import { Component, Element, Host, Listen, Prop, State, h, Fragment } from '@stencil/core';\n\ninterface GlobalState {\n  muted?: boolean;\n}\n\nconst globalState = ((window as any).TangiaVideoPlayerGlobal ?? {}) as GlobalState;\n(window as any).TangiaVideoPlayerGlobal = globalState;\n\nconst GlobalStateEvent = 'tangia-player-global-changed';\n\nconst GlobalVideoPlayingEvent = 'tangia-player-playing';\ninterface GlobalVideoPlayingEventDetail {\n  element: HTMLVideoElement;\n}\n\nlet instanceCnt = 0;\n\nconst transparentPixel = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';\n@Component({\n  tag: 'tangia-video-player',\n  shadow: true,\n  styleUrl: 'element.css',\n})\nexport class TangiaVideoPlayer {\n  @Prop()\n  preload?: string;\n  @Prop({ mutable: true })\n  autoplay?: boolean;\n  @Prop()\n  loop?: boolean;\n  @Prop()\n  toggleOnClick?: boolean;\n  @Prop()\n  src?: string;\n  @Prop()\n  poster?: string;\n  @Prop()\n  extracss?: string;\n  @Prop()\n  muted?: boolean;\n  @Prop()\n  alwaysMuted?: boolean;\n\n  @Element() el: HTMLElement;\n\n  // updating the prop doesn't cause a re-render so we put it in the state\n  @State()\n  protected isMuted = globalState.muted ?? this.muted ?? false;\n\n  @Prop()\n  videoOnHover: boolean;\n  @Prop()\n  videoOnVisible: boolean;\n  @Prop()\n  allowConcurrent: boolean;\n\n  protected intersectionObserver?: IntersectionObserver;\n\n  @State()\n  protected playing = false;\n  @State()\n  protected isHovering = false;\n  @State()\n  protected isVisible = false;\n\n  protected _video?: HTMLVideoElement;\n\n  protected instanceId = instanceCnt++;\n\n  componentWillLoad() {\n    this.isMuted = this.alwaysMuted || (globalState.muted ?? this.muted ?? false);\n  }\n\n  connectedCallback() {\n    if (this.videoOnVisible) {\n      if (this.intersectionObserver) {\n        this.intersectionObserver.disconnect();\n      }\n      this.intersectionObserver = new IntersectionObserver(\n        entries => {\n          //console.log('intersect', this.instanceId, entries[0].isIntersecting);\n          this.isVisible = entries[0].isIntersecting;\n          if (this.isVisible) {\n            setTimeout(() => {\n              this.play();\n            }, 100);\n            // we sometimes don't get the end of the intersection, so we do a force re-detect after a bit\n            setTimeout(() => {\n              if (!this.isVisible || !this.intersectionObserver) return;\n              //console.log('running redetect', this.instanceId);\n              this.intersectionObserver.unobserve(this.el);\n              this.intersectionObserver.observe(this.el);\n            }, 500 + Math.random() * 500);\n          }\n        },\n        { root: window.document },\n      );\n      this.intersectionObserver.observe(this.el);\n    }\n    if (this.autoplay && !this.videoOnHover && !this.videoOnVisible) {\n      // iOS is a pita...\n      setTimeout(() => {\n        this.play();\n      }, 100);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.intersectionObserver) {\n      this.intersectionObserver.disconnect();\n    }\n  }\n\n  @Listen('mouseenter')\n  handleMouseEnter() {\n    if (!this.videoOnHover) return;\n    this.isHovering = true;\n    setTimeout(() => {\n      if (!this.isHovering) return;\n      if (this.playing) return;\n      this.play();\n    }, 50);\n  }\n\n  @Listen('mouseleave')\n  handleMouseLeave() {\n    if (!this.videoOnHover) return;\n    this.isHovering = false;\n  }\n\n  @Listen('tangia-player-global-changed', { target: 'window' })\n  handleGlobalMute() {\n    if (!this.alwaysMuted) {\n      this.isMuted = globalState.muted ?? this.isMuted;\n    }\n  }\n  @Listen('tangia-player-playing', { target: 'window' })\n  handleGlobalVideoPlaying(e: CustomEvent<GlobalVideoPlayingEventDetail>) {\n    if (!this._video) return;\n    if (this._video === e.detail.element) return;\n    if (this.allowConcurrent) {\n      // even if playing multiple videos is fine, playing multiple audios is just chaos\n      this._video.muted = true;\n      this.isMuted = true;\n    } else {\n      this.pause();\n    }\n  }\n\n  render() {\n    let showVideo: boolean | undefined = undefined;\n    if (this.videoOnHover || this.videoOnVisible) {\n      showVideo = false;\n    }\n    if (this.videoOnHover && this.isHovering) {\n      showVideo = true;\n    }\n    if (this.videoOnVisible && this.isVisible) {\n      showVideo = true;\n    }\n    /*\n    console.log(\n      'tvp',\n      this.instanceId,\n      'showVideo',\n      showVideo,\n      'videoOnHover',\n      this.videoOnHover,\n      'isHovering',\n      this.isHovering,\n      'videoOnVisible',\n      this.videoOnVisible,\n      'isVisible',\n      this.isVisible,\n      showVideo ? this.el : null,\n    );\n    */\n    if (showVideo === false) {\n      return (\n        <Host class=\"video-poster flex flex-col h-full w-full\">\n          <style>{this.extracss}</style>\n          <img class=\"grow object-contain\" src={this.poster} />\n        </Host>\n      );\n    }\n    const effectivelyMuted = this.alwaysMuted || this.isMuted;\n    const domExtras = {\n      controlslist: 'nodownload nofullscreen noremoteplayback',\n      disablePictureInPicture: true,\n      disableRemotePlayback: true,\n      defaultMuted: effectivelyMuted,\n    };\n    return (\n      <Host class=\"video-player flex flex-col h-full w-full\">\n        <style>{this.extracss}</style>\n        <video\n          ref={el => {\n            if (this._video && this._video !== el) {\n              this._video.pause();\n            }\n            this._video = el;\n            if (!el) return;\n            el.muted = effectivelyMuted;\n            el.defaultMuted = effectivelyMuted;\n            // autoplay does not work on some browsers if video does not have `muted`\n            // attribute:\n            // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay\n\n            // open bug since 2017 that you cannot set muted in video element https://github.com/facebook/react/issues/10389\n            // https://github.com/facebook/react/issues/10389\n            if (effectivelyMuted) el.setAttribute('muted', '');\n            // iOS...\n            el.setAttribute('webkit-playsinline', '');\n            el.setAttribute('playsinline', '');\n          }}\n          class=\"grow object-contain\"\n          // no idea why this exists multiple times\n          playsInline={true}\n          playsinline={true}\n          webkit-playsinline={true}\n          onClick={e => this.togglePlay(e)}\n          muted={effectivelyMuted}\n          loop={this.loop}\n          autoplay={this.autoplay}\n          preload={this.preload}\n          // prevent showing the ugly default poster while loading\n          poster={this.poster || transparentPixel}\n          onPlaying={() => this.play()}\n          onEnded={() => this.pause()}\n          {...domExtras}\n        >\n          {this.src?.endsWith('.webm') ? (\n            <Fragment>\n              <source src={this.src} type=\"video/webm\" />\n              <source src={this.src.replace(/\\.webm$/, '.mp4')} type=\"video/mp4\" />\n            </Fragment>\n          ) : (\n            <source src={this.src} />\n          )}\n        </video>\n        <div id=\"controls\" class=\"flex shrink-0\">\n          {!this.playing ? (\n            <button onClick={e => this.play(e)}>\n              <slot key=\"play-button\" name=\"play-button\"></slot>\n            </button>\n          ) : (\n            <button onClick={e => this.pause(e)}>\n              <slot key=\"pause-button\" name=\"pause-button\"></slot>\n            </button>\n          )}\n          <slot name=\"control-gap\"></slot>\n          {!this.alwaysMuted &&\n            (!this.isMuted ? (\n              <button onClick={e => this.mute(e)}>\n                <slot key=\"mute-button\" name=\"mute-button\"></slot>\n              </button>\n            ) : (\n              <button onClick={e => this.unmute(e)}>\n                <slot key=\"unmute-button\" name=\"unmute-button\"></slot>\n              </button>\n            ))}\n        </div>\n      </Host>\n    );\n  }\n\n  protected async play(e?: MouseEvent) {\n    // console.log(\"play\")\n    e?.preventDefault();\n    e?.stopImmediatePropagation();\n    if (!this._video) return;\n    this._video.playsInline = true;\n    this.playing = true;\n    // weird bug(?) in Chrome which ignores the attribute in the HTML when it's added dynamically\n    // https://stackoverflow.com/a/51755171/4321944\n    this._video.muted = this.isMuted;\n    try {\n      await this._video.play();\n      window.dispatchEvent(new CustomEvent(GlobalVideoPlayingEvent, { detail: { element: this._video } } as CustomEvent<GlobalVideoPlayingEventDetail>));\n    } catch {\n      // workaround for mobile where we are not allowed to auto-play with sound\n      this.playing = false;\n      if (!this._video) return;\n      this._video.muted = true;\n      try {\n        await this._video.play();\n        setTimeout(() => {\n          this._video.muted = this.muted;\n        }, 100);\n        window.dispatchEvent(new CustomEvent(GlobalVideoPlayingEvent, { detail: { element: this._video } } as CustomEvent<GlobalVideoPlayingEventDetail>));\n      } catch (err) {\n        console.error('Could not play video', err);\n      }\n    }\n  }\n\n  protected pause(e?: MouseEvent) {\n    // console.log(\"pause\")\n    e?.preventDefault();\n    e?.stopImmediatePropagation();\n    if (!this._video) return;\n    this.playing = false;\n    this.autoplay = false;\n    this._video.pause();\n  }\n\n  protected togglePlay(e?: MouseEvent) {\n    if (!this.toggleOnClick) return;\n    // console.log(\"togglePlay\")\n    if (this.playing) {\n      this.pause(e);\n    } else {\n      this.play(e);\n    }\n  }\n\n  protected mute(e?: MouseEvent) {\n    // console.log(\"mute\")\n    e?.preventDefault();\n    e?.stopImmediatePropagation();\n    this.isMuted = true;\n    if (this._video) {\n      this._video.muted = this.isMuted;\n    }\n    globalState.muted = this.isMuted;\n    window.dispatchEvent(new CustomEvent(GlobalStateEvent));\n  }\n\n  protected unmute(e?: MouseEvent) {\n    // console.log(\"unmute\", this._video, this.mute)\n    e?.preventDefault();\n    e?.stopImmediatePropagation();\n    this.isMuted = false;\n    if (this._video) {\n      this._video.muted = this.isMuted;\n    }\n    globalState.muted = this.isMuted;\n    window.dispatchEvent(new CustomEvent(GlobalStateEvent));\n  }\n}\n"],"mappings":"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"}