{"version":3,"names":["controlsCss","EonUiVideoplayerControlsStyle0","VideoplayerControls","handleSeek","e","clientX","currentTarget","left","width","getBoundingClientRect","seekPercent","seekSecond","this","duration","seekEvent","emit","percent","seconds","render","percentPlayedLabel","stringFormat","_a","currentLocalization","percentPlayed","String","h","key","class","pfx","controls","fullscreen","isFullscreen","title","_b","togglePlayPause","type","onClick","_e","x","y","playToggleEvent","name","isPlaying","_c","max","value","tabIndex","formatTime","secondsPlayed","hideMuteButton","muteToggleEvent","_d","toggleMute","isMuted","_f","hideFullscreenButton","fullscreenToggleEvent","_g","toggleFullscreen","_h","playerSharedCss","EonUiVideoplayerFileStyle0","filePlayerCss","EonUiVideoplayerFileStyle1","FilePlayer","handleNativePlayerFullscreenChange","nativePlayerFullscreenChangeEvent","componentWillLoad","VIDEOPLAYER_TYPE_MOVING_IMAGE","createPlayer","VIDEOPLAYER_TYPE_FILE","resolvedSource","source","componentDidLoad","isSafari","videoElement","addEventListener","disconnectedCallback","removeEventListener","fetch","method","then","response","json","videoSourcesJson","catch","error","webComponentsDebug","console","log","errorEvent","htmlVideoSource","videoSources","html","length","handleIsMutedChanged","muted","handleSeekTimeChanged","currentTime","seekTime","handleCanPlay","canPlayEvent","handleLoadedMetaData","handleEnded","load","endedEvent","handleError","handleTimeUpdate","Math","round","timeUpdateEvent","handleOnPlay","play","playEvent","handleOnPause","pause","pauseEvent","handleIsPlayingChanged","sources","Fragment","src","onError","videoTagNotSupported","defaultProps","ref","el","onCanPlay","onPlay","onPause","onLoadedMetaData","onEnded","onTimeUpdate","videoPlayerProps","autoplay","defaultMuted","loop","playsInline","autoPlay","preload","youtubePlayerCss","EonUiYoutubeplayerStyle0","EonUiYoutubeplayerStyle1","YouTubePlayer","isIosMobileDevice","isIphoneOrIpod","initVideo","handleHideControlsChanged","hideControls","player","playVideo","getIframe","classList","add","remove","mute","unMute","handleAutoplayChanged","seekTo","handleStateChange","event","data","YT","PlayerState","PLAYING","PAUSED","ENDED","UNSTARTED","BUFFERING","iframeAPIScript","document","createElement","firstScriptTag","getElementsByTagName","parentNode","insertBefore","window","callback","push","forEach","splice","Player","youtubeElement","videoId","host","noCookie","playerVars","cc_load_policy","captions","cc_lang_pref","languageCode","modestbranding","disablekb","rel","showinfo","fs","iv_load_policy","playsinline","events","onReady","cueVideoById","onStateChange","handleApiChange","loadModule","getOption","getDuration","time_update_interval","clearInterval","setInterval","getCurrentTime","pauseVideo","id"],"sources":["src/components/videoplayer/controls/controls.scss?tag=eon-ui-videoplayer-controls","src/components/videoplayer/controls/controls.tsx","src/components/videoplayer/players/player-shared.scss?tag=eon-ui-videoplayer-file","src/components/videoplayer/players/file/file-player.scss?tag=eon-ui-videoplayer-file","src/components/videoplayer/players/file/file-player.tsx","src/components/videoplayer/players/youtube/youtube-player.scss?tag=eon-ui-youtubeplayer","src/components/videoplayer/players/player-shared.scss?tag=eon-ui-youtubeplayer","src/components/videoplayer/players/youtube/youtube-player.tsx"],"sourcesContent":["$controls-height: 48px;\n$controls-overlap-collapsed: 4px; // Controls how much the control bar is overlappping the video when collapsed\n\n.#{$prefix}videoplayer {\n  &:focus .#{$prefix}controls,\n  &:hover .#{$prefix}controls {\n    bottom: 0;\n    transition: bottom 0.25s ease-in;\n  }\n\n  .#{$prefix}controls {\n    background: $videoplayer-controls-background;\n    bottom: -$controls-height + $controls-overlap-collapsed;\n    display: flex;\n    flex-wrap: nowrap;\n    height: $controls-height;\n    left: 0;\n    margin: 0 auto;\n    max-width: 100%;\n    position: absolute;\n    right: 0;\n    transition: bottom 0.25s ease-in 2s;\n    width: 100%;\n    z-index: 1;\n\n    &.#{$prefix}fullscreen {\n      @include for-size(desktop-or-larger) {\n        width: 80%;\n      }\n    }\n\n    .#{$prefix}progress-bar {\n      background: $videoplayer-progress-bar-background;\n      flex-grow: 1;\n\n      &:active {\n        background: $videoplayer-progress-bar-active-background;\n      }\n\n      .#{$prefix}progress-bar-time {\n        align-items: center;\n        bottom: 0;\n        color: $videoplayer-progress-bar-time-color;\n        display: flex;\n        font-size: 18px;\n        font-weight: 500;\n        left: 0;\n        pointer-events: none;\n        position: absolute;\n        top: 0;\n        width: 100%;\n        justify-content: center;\n      }\n\n      progress {\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        background-color: $videoplayer-progress-background; // required by IE, Edge & FF\n        border: none;\n        border-radius: 0;\n        color: $videoplayer-progress-color; // required by IE, Edge\n        height: 100%;\n        padding: 0;\n        width: 100%;\n      }\n\n      progress::-webkit-progress-bar {\n        background-color: $videoplayer-progress-background;\n      }\n\n      progress::-webkit-progress-value {\n        background-color: $videoplayer-progress-bar-value-background;\n      }\n\n      progress::-moz-progress-bar {\n        background-color: $videoplayer-progress-bar-background;\n      }\n\n      progress::-ms-fill {\n        border-color: currentColor; // remove IE default border-right of value\n      }\n    }\n\n    .#{$prefix}button {\n      border: 0;\n      color: $videoplayer-progress-bar-button-color;\n      font-size: 1.8em;\n      padding: 0;\n      transition: 0.5s background;\n      width: $controls-height;\n\n      eon-ui-icon {\n        margin-left: 8px;\n      }\n\n      &.#{$prefix}play {\n        background: $videoplayer-progress-bar-play-button-background;\n\n        eon-ui-icon {\n          color: $videoplayer-icon-color;\n        }\n\n        &:active,\n        &:hover {\n          background: $videoplayer-progress-bar-play-button-hover-background;\n        }\n\n        &:focus {\n          outline: 2px solid $videoplayer-progress-bar-button-focus;\n          outline-offset: -4px;\n        }\n\n        @include for-size(tablet-or-larger) {\n          &:active,\n          &:hover {\n            background: $videoplayer-progress-bar-play-button-hover-background;\n          }\n        }\n      }\n\n      &.#{$prefix}mute {\n        background: $videoplayer-progress-bar-mute-button-background;\n\n        eon-ui-icon {\n          color: $videoplayer-icon-color;\n        }\n\n        @include for-size(phone) {\n          display: none;\n        }\n\n        &:active,\n        &:hover {\n          background: $videoplayer-progress-bar-mute-button-hover-background;\n        }\n\n        &:focus {\n          outline: 2px solid $videoplayer-progress-bar-button-focus;\n          outline-offset: -4px;\n        }\n\n        @include for-size(tablet-or-larger) {\n          &:active,\n          &:hover {\n            background: $videoplayer-progress-bar-mute-button-background;\n          }\n        }\n      }\n\n      &.#{$prefix}fullscreen {\n        background: $videoplayer-progress-bar-full-screen-button-background;\n\n        eon-ui-icon {\n          color: $videoplayer-icon-color;\n        }\n\n        &:active,\n        &:hover {\n          background: $videoplayer-progress-bar-full-screen-button-hover-background;\n        }\n\n        &:focus {\n          outline: 2px solid $videoplayer-progress-bar-button-focus;\n          outline-offset: -4px;\n        }\n\n        @include for-size(tablet-or-larger) {\n          &:active,\n          &:hover {\n            background: $videoplayer-progress-bar-full-screen-button-background;\n          }\n        }\n\n        .#{$prefix}eon_fullscreen_exit {\n          margin-left: -1px;\n          padding-top: 2px;\n        }\n      }\n    }\n  }\n\n  &.#{$prefix}is-touch {\n    .#{$prefix}playing ~ eon-ui-videoplayer-controls .#{$prefix}controls {\n      bottom: -$controls-height + $controls-overlap-collapsed;\n    }\n  }\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\nimport { VideoplayerLocalization, VideoplayerProgressEventArgs } from \"../constants/videoplayer-types\";\nimport { formatTime } from \"../../../utils/date-helper\";\nimport { stringFormat } from \"../../../utils/string-format\";\nimport pfx from \"../../../utils/style-class-prefix-helper\";\n// import { InitLogging } from \"../../../decorators/init-logging\";\n\n@Component({\n  tag: \"eon-ui-videoplayer-controls\",\n  styleUrl: \"controls.scss\",\n  shadow: false\n})\nexport class VideoplayerControls {\n  // @InitLogging() sentryTransaction;\n\n  @Element() hostElement: HTMLEonUiVideoplayerControlsElement;\n\n  /**\n   *\n   */\n  @Event() fullscreenToggleEvent: EventEmitter<void>;\n\n  /**\n   *\n   */\n  @Event() muteToggleEvent: EventEmitter<void>;\n\n  /**\n   *\n   */\n  @Event() playToggleEvent: EventEmitter<void>;\n\n  /**\n   *\n   */\n  @Event() seekEvent: EventEmitter<VideoplayerProgressEventArgs>;\n\n  /**\n   *\n   */\n  @Prop() duration: number;\n\n  /**\n   *\n   */\n  @Prop() isFullscreen: boolean;\n\n  /**\n   *\n   */\n  @Prop() isMuted: boolean;\n\n  /**\n   *\n   */\n  @Prop() isPlaying: boolean;\n\n  /**\n   *\n   */\n  @Prop() percentPlayed: number;\n\n  /**\n   *\n   */\n  @Prop() secondsPlayed: number;\n\n  /**\n   *\n   */\n  @Prop() hideMuteButton: boolean;\n\n  /**\n   *\n   */\n  @Prop() currentLocalization: VideoplayerLocalization;\n\n  /**\n   *\n   */\n  @Prop() hideFullscreenButton: boolean;\n\n  handleSeek(e: MouseEvent): void {\n    const { clientX, currentTarget } = e;\n    const { left, width } = (currentTarget as Element).getBoundingClientRect();\n    const seekPercent = ((clientX - left) / width) * 100;\n    const seekSecond = (seekPercent / 100) * this.duration;\n\n    this.seekEvent.emit({ percent: seekPercent, seconds: seekSecond });\n  }\n\n  render() {\n    const percentPlayedLabel = stringFormat(this.currentLocalization?.percentPlayed, String(this.percentPlayed));\n\n    return (\n      <div\n        class={pfx({\n          controls: true,\n          fullscreen: this.isFullscreen\n        })}\n      >\n        {/* Play/Pause button */}\n        <button\n          class={pfx(\"button play\")}\n          title={this.currentLocalization?.togglePlayPause}\n          type=\"button\"\n          onClick={(_e) => {\n            if (_e.x === 0 && _e.y === 0) return;\n            this.playToggleEvent.emit();\n          }}\n        >\n          <eon-ui-icon\n            no-space=\"false\"\n            name={this.isPlaying ? \"pause\" : \"play\"}\n            title={this.currentLocalization?.togglePlayPause}\n          ></eon-ui-icon>\n        </button>\n\n        {/* Progress bar */}\n        <div class={pfx(\"progress-bar\")}>\n          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n          <progress\n            max={100}\n            onClick={(e) => this.handleSeek(e)}\n            value={this.percentPlayed || 0}\n            /* eslint-disable-next-line */\n            tabIndex={0}\n          >\n            {/* for ScreenReaders: */}\n            {percentPlayedLabel}\n          </progress>\n          <span class={pfx(\"progress-bar-time\")}>\n            {`${formatTime(this.secondsPlayed || 0)}/${formatTime(this.duration || 0)}`}\n          </span>\n        </div>\n\n        {/* Mute/Unmute button */}\n        {!this.hideMuteButton && (\n          <button\n            type=\"button\"\n            class={pfx(\"button mute\")}\n            onClick={(_e) => this.muteToggleEvent.emit()}\n            title={this.currentLocalization?.toggleMute}\n          >\n            <eon-ui-icon\n              no-space=\"false\"\n              name={!this.isMuted ? \"volume_normal\" : \"volume_mute\"}\n              title={this.currentLocalization?.toggleMute}\n            ></eon-ui-icon>\n          </button>\n        )}\n        {/* Toggle Fullscreen button */}\n        {!this.hideFullscreenButton && (\n          <button\n            type=\"button\"\n            class={pfx(\"button fullscreen\")}\n            onClick={(_e) => this.fullscreenToggleEvent.emit()}\n            title={this.currentLocalization?.toggleFullscreen}\n          >\n            <eon-ui-icon\n              no-space=\"false\"\n              title={this.currentLocalization?.toggleFullscreen}\n              name={this.isFullscreen ? \"fullscreen_exit\" : \"fullscreen_enter\"}\n            ></eon-ui-icon>\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n","video {\r\n  display: block;\r\n  height: 100%;\r\n  min-width: 100%;\r\n  position: relative;\r\n  object-fit: cover;\r\n  object-position: center center;\r\n}\r\n",".#{$prefix}fullscreen-safari {\r\n  transform: unset !important;\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch, State } from \"@stencil/core\";\nimport Fragment from \"../../../../common/fragment\";\nimport {\n  VideoplayerProgressEventArgs,\n  VideoplayerLocalization,\n  VideoPlayerType\n} from \"../../constants/videoplayer-types\";\nimport { Player } from \"../player\";\nimport { isSafari } from \"../../../../utils/device-helper\";\nimport pfx from \"../../../../utils/style-class-prefix-helper\";\nimport { VIDEOPLAYER_TYPE_FILE, VIDEOPLAYER_TYPE_MOVING_IMAGE } from \"../../constants/videoplayer-constants\";\nimport webComponentsDebug from \"../../../../utils/log-helper\";\n// import { InitLogging } from \"../../../../decorators/init-logging\";\n\n@Component({\n  tag: \"eon-ui-videoplayer-file\",\n  styleUrls: [\"../player-shared.scss\", \"file-player.scss\"],\n  shadow: false\n})\nexport class FilePlayer implements Player {\n  // @InitLogging() sentryTransaction;\n\n  @Element() hostElement: HTMLEonUiVideoplayerFileElement;\n  private videoElement: HTMLVideoElement;\n\n  @State() videoSourcesJson: any;\n  @State() resolvedSource: any;\n\n  /**\n   * Raised when the browser finished analyzing the video and can start playing, meaning it has buffered enough to begin.\n   * Emits the total length of the video in seconds.\n   */\n  @Event() canPlayEvent: EventEmitter<number>;\n\n  /**\n   * Raised when the video has reached the end.\n   */\n  @Event() endedEvent: EventEmitter<void>;\n\n  /**\n   * Raised when the video resource could not be loaded due to an error (e.g. a network error).\n   */\n  @Event() errorEvent: EventEmitter<void>;\n\n  /**\n   * Raised when the time indicated by the currentTime attribute of the video has been updated.\n   * This is triggered very frequently to keep the progress bar up2date.\n   */\n  @Event() timeUpdateEvent: EventEmitter<VideoplayerProgressEventArgs>;\n\n  /**\n   * Raised when a native video player (e.g. in Safari) toggles the fullscreen mode without using the custom E.ON videoplayer controls.\n   */\n  @Event() nativePlayerFullscreenChangeEvent: EventEmitter<void>;\n\n  /**\n   * The pauseEvent is fired when the video is paused via youtube button or customised control bar\n   */\n  @Event() pauseEvent: EventEmitter<void>;\n\n  /**\n   * The playEvent is fired when the video is played via youtube button or customised control bar\n   */\n  @Event() playEvent: EventEmitter<void>;\n\n  /**\n   * Flexibility to editor for choosing player: file player or moving image player?\n   */\n  @Prop() type: VideoPlayerType;\n\n  /**\n   * Set to true if the player should attempt to autoplay the video.\n   * This doesn't work on iPhones and requires the video to be muted as well.\n   */\n  @Prop() autoplay: boolean;\n\n  /**\n   * Controls whether the video is muted or not.\n   */\n  @Prop() isMuted: boolean;\n\n  /**\n   * Controls whether the video is currently playing or not.\n   * Set to false to pause the video.\n   */\n  @Prop() isPlaying: boolean;\n\n  /**\n   * The seconds at which the video should play.\n   */\n  @Prop() seekTime: number;\n\n  /**\n   * The source URL of the video.\n   */\n  @Prop() source: string;\n\n  /**\n   * Determines whether the video is currently displayed in fullscreen mode or not.\n   */\n  @Prop() isFullscreen: boolean;\n\n  /**\n   * Translated strings in the language currently selected.\n   */\n  @Prop() currentLocalization: VideoplayerLocalization;\n\n  componentWillLoad() {\n    if (this.type === VIDEOPLAYER_TYPE_MOVING_IMAGE) {\n      this.createPlayer();\n    } else if (this.type === VIDEOPLAYER_TYPE_FILE) {\n      this.resolvedSource = this.source;\n    }\n  }\n\n  componentDidLoad() {\n    if (isSafari()) {\n      this.videoElement.addEventListener(\"webkitbeginfullscreen\", this.handleNativePlayerFullscreenChange); //iPad\n      this.videoElement.addEventListener(\"webkitfullscreenchange\", this.handleNativePlayerFullscreenChange); // Desktop\n    }\n  }\n\n  disconnectedCallback() {\n    if (isSafari()) {\n      this.videoElement.removeEventListener(\"webkitbeginfullscreen\", this.handleNativePlayerFullscreenChange);\n      this.videoElement.removeEventListener(\"webkitfullscreenchange\", this.handleNativePlayerFullscreenChange);\n    }\n  }\n\n  /**\n   * Reference for MovingImage REST API:\n   * @Here: https://doc.movingimage.com/display/LT/movingimage+Playout+API#/reference/0/get-playout-video/get-playout-video\n   * This Returns API response which is then fetched in the form of JSON and accordingly video source is retrieved.\n   */\n  @Watch(\"type\")\n  @Watch(\"source\")\n  async createPlayer() {\n    await fetch(`https://d.video-cdn.net/play/public/v1/video/${this.source}`, {\n      method: \"GET\"\n    }).then((response) =>\n      response\n        .json()\n        .then((json) => {\n          this.videoSourcesJson = json;\n        })\n        .catch((error) => {\n          if (webComponentsDebug) {\n            console.log(`MovingImage URL for video ID: ${this.source} failed to resolve: ${error}`);\n          }\n          // Here is errorEvent is fired for invalid MovingImage VideoIds\n          this.errorEvent.emit();\n        })\n    );\n    const htmlVideoSource = this.videoSourcesJson?.videoSources?.html[\"720p\"] || null;\n    this.resolvedSource = (htmlVideoSource?.length && htmlVideoSource[0]?.source) || null;\n    return this.resolvedSource;\n  }\n\n  handleNativePlayerFullscreenChange = (_e: Event) => {\n    this.nativePlayerFullscreenChangeEvent.emit();\n  };\n\n  @Watch(\"isMuted\")\n  handleIsMutedChanged() {\n    this.videoElement.muted = this.isMuted;\n  }\n\n  @Watch(\"seekTime\")\n  handleSeekTimeChanged() {\n    this.videoElement.currentTime = this.seekTime;\n  }\n\n  private handleCanPlay(_e: Event): void {\n    this.canPlayEvent.emit(this.videoElement.duration);\n  }\n\n  private handleLoadedMetaData(_e: Event): void {\n    // Safari doesn't fire handleCanPlay, so we have to use handleLoadedMetaData instead.\n    if (isSafari()) {\n      this.canPlayEvent.emit(this.videoElement.duration);\n    }\n  }\n\n  private handleEnded(_e: Event): void {\n    // Reloads the video so that the poster-image is shown again after play.\n    // This isn't browser default behaviour and therefore needs this workaround.\n    // It shouldn't be a performance problem though because the video is always cached.\n    this.videoElement.load();\n    this.endedEvent.emit();\n  }\n\n  private handleError(_e: Event): void {\n    if (this.type === VIDEOPLAYER_TYPE_FILE) {\n      this.errorEvent.emit();\n    }\n  }\n\n  private handleTimeUpdate(_e: Event): void {\n    const percentPlayed = Math.round((100 / this.videoElement.duration) * this.videoElement.currentTime);\n    const secondsPlayed = (percentPlayed / 100) * this.videoElement.duration;\n\n    this.timeUpdateEvent.emit({ percent: percentPlayed, seconds: secondsPlayed });\n  }\n\n  private handleOnPlay(_e: Event): void {\n    this.videoElement.play();\n    this.playEvent.emit();\n  }\n\n  private handleOnPause(_e: Event): void {\n    this.videoElement.pause();\n    this.pauseEvent.emit();\n  }\n\n  @Watch(\"isPlaying\")\n  handleIsPlayingChanged() {\n    if (this.isPlaying) {\n      this.videoElement.play();\n      this.playEvent.emit();\n    } else {\n      this.videoElement.pause();\n      this.pauseEvent.emit();\n    }\n  }\n\n  render() {\n    const sources = (\n      <Fragment>\n        <source src={this.resolvedSource} type=\"video/mp4\" onError={(e) => this.handleError(e)} />\n        {this.currentLocalization?.videoTagNotSupported}\n      </Fragment>\n    );\n    const defaultProps = {\n      controls: isSafari(),\n      ref: (el) => (this.videoElement = el),\n      onCanPlay: (e) => this.handleCanPlay(e),\n      onPlay: (e) => this.handleOnPlay(e),\n      onPause: (e) => this.handleOnPause(e),\n      onLoadedMetaData: (e) => this.handleLoadedMetaData(e),\n      onEnded: (e) => this.handleEnded(e),\n      onError: (e) => this.handleError(e),\n      onTimeUpdate: (e) => this.handleTimeUpdate(e),\n      class: pfx({ \"fullscreen-safari\": this.isFullscreen && isSafari() })\n    };\n\n    const videoPlayerProps =\n      this.type === VIDEOPLAYER_TYPE_FILE\n        ? defaultProps\n        : {\n            ...defaultProps,\n            src: this.resolvedSource\n          };\n\n    return this.autoplay ? (\n      // Do NOT change the sorting order of props for the autoplay video!\n      // This will break the feature in some browsers because they expect the video to be muted before setting the autoplay flag.\n      <video\n        // @ts-ignore\n        defaultMuted\n        loop\n        muted\n        playsInline\n        autoPlay\n        preload=\"metadata\"\n        {...videoPlayerProps}\n      >\n        {sources}\n      </video>\n    ) : (\n      // eslint-disable-next-line jsx-a11y/media-has-caption\n      <video preload={isSafari() ? \"auto\" : \"metadata\"} {...videoPlayerProps}>\n        {sources}\n      </video>\n    );\n  }\n}\n",".#{$prefix}youtube-wrapper {\r\n  iframe {\r\n    height: 100%;\r\n    left: 0;\r\n    position: absolute;\r\n    top: 0;\r\n    width: 100%;\r\n    &.hide-controls {\r\n      pointer-events: none;\r\n      position: absolute;\r\n    }\r\n  }\r\n}\r\n","video {\r\n  display: block;\r\n  height: 100%;\r\n  min-width: 100%;\r\n  position: relative;\r\n  object-fit: cover;\r\n  object-position: center center;\r\n}\r\n","import { Component, Element, Event, h, Prop, EventEmitter, Watch } from \"@stencil/core\";\nimport { VideoplayerProgressEventArgs } from \"../../constants/videoplayer-types\";\nimport { Player } from \"../player\";\nimport pfx from \"../../../../utils/style-class-prefix-helper\";\nimport { isIphoneOrIpod } from \"../../../../utils/device-helper\";\n// import { InitLogging } from \"../../../../decorators/init-logging\";\n\n@Component({\n  tag: \"eon-ui-youtubeplayer\",\n  styleUrls: [\"youtube-player.scss\", \"../player-shared.scss\"],\n  shadow: false\n})\nexport class YouTubePlayer implements Player {\n  // @InitLogging() sentryTransaction;\n\n  @Element() hostElement: HTMLEonUiYoutubeplayerElement;\n  player: any;\n  private youtubeElement: HTMLElement;\n  private isIosMobileDevice: boolean;\n\n  /**\n   * Raised when the browser finished analyzing the video and can start playing, meaning it has buffered enough to begin.\n   * Emits the total length of the video in seconds.\n   */\n  @Event() canPlayEvent: EventEmitter<number>;\n\n  /**\n   * Raised when the video has reached the end.\n   */\n  @Event() endedEvent: EventEmitter<void>;\n\n  /**\n   * Raised when the video resource could not be loaded due to an error (e.g. a network error).\n   */\n  @Event() errorEvent: EventEmitter<void>;\n\n  /**\n   * Raised when the time indicated by the currentTime attribute of the video has been updated.\n   * This is triggered very frequently to keep the progress bar up2date.\n   */\n  @Event() timeUpdateEvent: EventEmitter<VideoplayerProgressEventArgs>;\n\n  /**\n   * The pauseEvent is fired when the video is paused via youtube button or customised control bar\n   */\n  @Event() pauseEvent: EventEmitter<void>;\n\n  /**\n   * The playEvent is fired when the video is played via youtube button or customised control bar\n   */\n  @Event() playEvent: EventEmitter<void>;\n\n  /**\n   * ID for youtube\n   */\n  @Prop() source: string;\n\n  /**\n   * Set to true if the player should attempt to autoplay the video.\n   * This doesn't work on iPhones and requires the video to be muted as well.\n   */\n  @Prop() autoplay: boolean;\n\n  /**\n   * Controls whether the video is muted or not.\n   */\n  @Prop() isMuted: boolean;\n\n  /**\n   * Controls whether the video is currently playing or not.\n   * Set to false to pause the video.\n   */\n  @Prop() isPlaying: boolean;\n\n  /**\n   * The seconds at which the video should play.\n   */\n  @Prop() seekTime: number;\n\n  /**\n   * Set to true to hide the control bar of the videoplayer.\n   */\n  @Prop() hideControls: boolean;\n\n  /**\n   * captions property sets Caption/Subtitles for Youtube Video\n   */\n  @Prop() captions: boolean = true;\n\n  /**\n   * Caption language Code can be set with languageCode property\n   * As per ISO 639-1 two-letter language code: https://www.loc.gov/standards/iso639-2/php/code_list.php\n   */\n  @Prop() languageCode: string;\n\n  /**\n   * noCookie property will embed nocookie term into youTube video url\n   * which prevent youtube from tracking user's viewing behaviour,\n   * hence no activity is collected to personalise the viewing experience.\n   */\n  @Prop({ reflect: true }) noCookie: boolean;\n\n  componentWillLoad() {\n    this.isIosMobileDevice = isIphoneOrIpod();\n    this.initVideo();\n  }\n\n  @Watch(\"hideControls\")\n  handleHideControlsChanged() {\n    if (this.hideControls) {\n      this.player.playVideo();\n      this.player.getIframe().classList.add(\"hide-controls\");\n    } else {\n      this.player.getIframe().classList.remove(\"hide-controls\");\n      this.handleIsPlayingChanged();\n    }\n  }\n\n  @Watch(\"isPlaying\")\n  handleIsPlayingChanged() {\n    if (this.isPlaying) {\n      this.play();\n    } else {\n      this.pause();\n    }\n  }\n\n  @Watch(\"isMuted\")\n  handleIsMutedChanged() {\n    if (this.isMuted) {\n      this.player.mute();\n    } else {\n      this.player.unMute();\n    }\n  }\n\n  @Watch(\"autoplay\")\n  handleAutoplayChanged() {\n    if (this.autoplay) {\n      this.player.mute();\n      this.player.playVideo();\n      this.handleIsMutedChanged();\n    }\n  }\n\n  @Watch(\"seekTime\")\n  handleSeekTimeChanged() {\n    this.player.seekTo(this.seekTime, true);\n  }\n\n  private handleError(_e: YT.OnErrorEvent): void {\n    this.errorEvent.emit();\n  }\n\n  private handleStateChange(event: any) {\n    switch (event.data) {\n      case YT.PlayerState.PLAYING:\n        this.play();\n        break;\n      case YT.PlayerState.PAUSED:\n        this.pause();\n        break;\n      case YT.PlayerState.ENDED:\n        this.endedEvent.emit();\n        break;\n      case YT.PlayerState.UNSTARTED:\n        break;\n      case YT.PlayerState.BUFFERING:\n        break;\n    }\n  }\n\n  /**\n   * This function creates logic inside the window object to init the youtube api\n   */\n  private initVideo() {\n    /**\n     * With the Iframe Player API, you can embed a YouTube video player on your website and control the player with JavaScript.\n     */\n    const iframeAPIScript = document.createElement(\"script\");\n    iframeAPIScript.src = \"https://www.youtube.com/iframe_api\";\n    const firstScriptTag = document.getElementsByTagName(\"script\")[0];\n    firstScriptTag.parentNode.insertBefore(iframeAPIScript, firstScriptTag);\n\n    if (!window[\"isReady\"]) {\n      window[\"isReady\"] = false;\n    }\n\n    if (!window[\"callbacks\"]) {\n      window[\"callbacks\"] = [];\n    }\n\n    //this is needed to support more than one youtube player on a page\n    window[\"enqueueOnYoutubeIframeAPIReady\"] = function (callback) {\n      if (window[\"isReady\"]) {\n        callback();\n      } else {\n        window[\"callbacks\"].push(callback);\n      }\n    };\n\n    window[\"onYouTubeIframeAPIReady\"] = function () {\n      window[\"isReady\"] = true;\n      window[\"callbacks\"].forEach(function (callback) {\n        callback();\n      });\n      window[\"callbacks\"].splice(0);\n    };\n\n    //enqueue the player of this component\n    window[\"enqueueOnYoutubeIframeAPIReady\"](() => {\n      this.player = new window[\"YT\"].Player(this.youtubeElement, {\n        videoId: this.source,\n        host: this.noCookie ? \"http://www.youtube-nocookie.com\" : \"http://www.youtube.com\",\n        playerVars: {\n          cc_load_policy: this.captions ? 1 : 0,\n          cc_lang_pref: this.languageCode,\n          autoplay: this.autoplay ? 1 : 0,\n          modestbranding: 1,\n          controls: 0,\n          disablekb: 1,\n          rel: 0,\n          showinfo: 0,\n          fs: 0,\n          iv_load_policy: 3,\n          playsinline: 0,\n          // origin: \"http://localhost:9001\",\n          loop: this.autoplay ? 1 : 0\n        },\n        events: {\n          onReady: (e) => {\n            this.handleCanPlay(e);\n            if (this.isIosMobileDevice) {\n              this.player.cueVideoById(this.source);\n            }\n          },\n          onError: (e) => {\n            this.handleError(e);\n          },\n          onStateChange: (e) => {\n            this.handleStateChange(e);\n            this.handleApiChange(e);\n          }\n        }\n      });\n    });\n  }\n\n  handleApiChange(_e) {\n    this.player.loadModule(\"captions\");\n    this.player.getOption(\"captions\", \"track\");\n  }\n\n  private handleCanPlay(_e: YT.PlayerEvent): void {\n    this.canPlayEvent.emit(this.player.getDuration());\n    let time_update_interval;\n    // Clear any old interval.\n    clearInterval(time_update_interval);\n\n    // Start interval to update elapsed time display and\n    // the elapsed part of the progress bar every second.\n    time_update_interval = setInterval(() => {\n      const percentPlayed = Math.round((100 / this.player.getDuration()) * this.player.getCurrentTime());\n      const secondsPlayed = (percentPlayed / 100) * this.player.getDuration();\n\n      this.timeUpdateEvent.emit({ percent: percentPlayed, seconds: secondsPlayed });\n    }, 250);\n\n    // Autoplay should work as soon as video loads on any site\n    this.handleAutoplayChanged();\n  }\n\n  private play() {\n    this.player.playVideo();\n    this.playEvent.emit();\n    this.handleAutoplayChanged();\n  }\n\n  private pause() {\n    this.player.pauseVideo();\n    this.pauseEvent.emit();\n  }\n\n  render() {\n    return (\n      <div class={pfx(\"youtube-wrapper\")}>\n        <div id={`youtube-player-${this.source}`} ref={(el) => (this.youtubeElement = el)}></div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}