{"file":"presto-audio2.js","mappings":"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","names":[],"sources":["src/components/core/providers/presto-audio/presto-audio.scss?tag=presto-audio","src/components/core/providers/presto-audio/presto-audio.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.presto-audio {\n  $pre: &;\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Plyr tweaks\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__wrapper {\n    border-radius: var(--presto-player-border-radius, 0px);\n    .plyr--audio .plyr__controls {\n      padding: 0;\n    }\n\n    .plyr--audio .plyr__control.plyr__tab-focus,\n    .plyr--audio .plyr__control:hover,\n    .plyr--audio .plyr__control[aria-expanded='true'] {\n      background: var(--plyr-audio-controls-background);\n      color: var(--plyr-audio-control-color);\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Wrapper\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__wrapper {\n    display: flex;\n    background: var(--plyr-audio-controls-background, #fff);\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Controls Container\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__controls-wrapper {\n    padding: calc(var(--plyr-control-spacing, 10px) * 2);\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    min-width: 0;\n\n    // handle style tweaks for poster.\n    .has-poster & {\n      padding: calc(var(--plyr-control-spacing, 10px) * 3);\n    }\n    // handle style tweaks for play-large with no poster.\n    .has-play-large:not(.has-poster) & {\n      padding-left: 0;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Title\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__title,\n  &__mobile-title {\n    font-size: 18px;\n    font-weight: 500;\n    line-height: 1;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: var(--plyr-audio-control-color);\n  }\n\n  &__title {\n    margin: calc(var(--plyr-control-spacing, 10px) / 2);\n    margin-top: 0;\n    text-wrap: wrap;\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Poster\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__poster-wrapper {\n    position: relative;\n    width: 100px;\n    min-height: 100px;\n    flex: 0 0 100px;\n\n    img {\n      border-radius: var(--presto-player-border-radius, 0px) 0 0 var(--presto-player-border-radius, 0px);\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      aspect-ratio: 1;\n      display: block;\n    }\n\n    // handle style tweaks for poster.\n    .has-poster & {\n      width: 140px;\n      height: 140px;\n      flex: 0 0 140px;\n    }\n  }\n\n  &__poster {\n    width: 100%;\n    height: 100%;\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Play Large Button\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__large-play-button {\n    user-select: none;\n    cursor: pointer;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 50px;\n    height: 50px;\n    color: white;\n    border-radius: 100%;\n    background: var(--plyr-audio-control-color);\n    color: var(--plyr-audio-controls-background);\n\n    &.is-relative {\n      position: relative;\n      top: auto;\n      left: auto;\n      transform: none;\n    }\n\n    .has-light-background.has-poster & {\n      background: var(--plyr-audio-controls-background);\n      color: var(--plyr-audio-control-color);\n    }\n    .has-dark-background.has-poster & {\n      background: var(--plyr-audio-control-color);\n      color: var(--plyr-audio-controls-background);\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Play Large Icon\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__icon-play,\n  &__icon-pause {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    fill: currentColor;\n    display: block;\n    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;\n    margin: 0 auto;\n    text-align: center;\n  }\n  &__icon-pause {\n    opacity: 0;\n    visibility: hidden;\n\n    #{$pre}__wrapper.is-playing & {\n      opacity: 1;\n      visibility: visible;\n    }\n  }\n  &__icon-play {\n    margin-left: 2px; // optically center\n    opacity: 1;\n    visibility: visible;\n    #{$pre}__wrapper.is-playing & {\n      opacity: 0;\n      visibility: hidden;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Mobile sizing\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  &__poster-wrapper-mobile {\n    display: none;\n    min-width: 0;\n\n    .presto-audio__large-play-button {\n      flex: 0 0 50px;\n    }\n  }\n\n  &__wrapper.breakpoint-small {\n    flex-direction: column;\n\n    #{$pre}__controls-wrapper {\n      padding: calc(var(--plyr-control-spacing, 10px) * 2);\n    }\n\n    &.has-poster #{$pre}__title {\n      text-align: center;\n      margin: calc(var(--plyr-control-spacing, 10px) * 1.5);\n    }\n\n    &.has-poster #{$pre}__poster-wrapper {\n      margin: 30px auto auto auto;\n      overflow: hidden;\n      border-radius: var(--presto-player-border-radius, 0px);\n      width: 225px;\n      height: 225px;\n      flex: 0 0 225px;\n    }\n\n    &.has-play-large:not(.has-poster) #{$pre}__poster-wrapper,\n    &.has-play-large:not(.has-poster) #{$pre}__title {\n      display: none;\n    }\n\n    &.has-play-large:not(.has-poster) #{$pre}__poster-wrapper-mobile {\n      display: flex;\n      align-items: center;\n      gap: 1em;\n      margin-bottom: calc(var(--plyr-control-spacing, 10px) * -1);\n      padding: calc(var(--plyr-control-spacing, 10px) * 2) calc(var(--plyr-control-spacing, 10px) * 2) 0 calc(var(--plyr-control-spacing, 10px) * 2);\n    }\n  }\n}\n\n//  Stacked View\n.skin-stacked.presto-sticky-audio {\n  .presto-audio__wrapper {\n    height: 115px;\n  }\n  .has-poster {\n    .presto-audio__controls-wrapper {\n      padding: 20px;\n    }\n    .presto-audio__poster-wrapper {\n      width: 115px;\n      height: 115px;\n      flex: 0 0 115px;\n    }\n  }\n}\n\n// skin-default\n.presto-sticky-audio {\n  .presto-audio__wrapper {\n    height: 100px;\n  }\n  .has-poster {\n    .presto-audio__controls-wrapper {\n      padding: 20px;\n    }\n    .presto-audio__poster-wrapper {\n      width: 100px;\n      height: 100px;\n      flex: 0 0 100px;\n    }\n  }\n}\n\n// Basic Viwe\n\n.action-bar-active {\n  .presto-audio__wrapper {\n    border-radius: var(--presto-player-border-radius) var(--presto-player-border-radius) 0px 0px;\n  }\n}\n\n@media screen and (max-width: 782px) {\n  .presto-sticky-audio {\n    .presto-audio__poster-wrapper-mobile {\n      display: flex;\n      align-items: center;\n      gap: 1em;\n      margin-bottom: calc(var(--plyr-control-spacing, 10px) * -1);\n      padding: calc(var(--plyr-control-spacing, 10px) * 2) calc(var(--plyr-control-spacing, 10px) * 2) 0 calc(var(--plyr-control-spacing, 10px) * 2);\n    }\n    .presto-audio__poster-wrapper,\n    .presto-audio__title {\n      display: none;\n    }\n    .presto-audio__wrapper {\n      height: 140px;\n    }\n    .has-poster .presto-audio__controls-wrapper {\n      padding: 0px;\n    }\n    .presto-audio__poster-wrapper-mobile {\n      .presto-audio__large-play-button {\n        flex: 0 0 40px;\n        height: 40px;\n      }\n    }\n  }\n}\n","import { Component, h, Event, EventEmitter, Prop, State } from '@stencil/core';\nimport { presetAttributes } from '../../../../interfaces';\nimport { lightOrDark } from '../../../../util';\n\n@Component({\n  tag: 'presto-audio',\n  styleUrl: 'presto-audio.scss',\n  shadow: false,\n})\nexport class PrestoAudio {\n  private el: HTMLDivElement;\n  @Prop({ mutable: true }) getRef?: (elm?: HTMLAudioElement) => void;\n  @Prop() autoplay: boolean;\n  @Prop() src: string;\n  @Prop() preload: string;\n  @Prop() poster: string;\n  @Prop() player: any;\n  @Prop() preset: presetAttributes;\n  @Prop() tracks: { label: string; src: string; srcLang: string }[];\n  @Prop() provider: string;\n  @Prop() mediaTitle: string;\n  @Prop() audioAttributes: object;\n\n  @Event() playVideo: EventEmitter<void>;\n  @Event() pauseVideo: EventEmitter<true>;\n\n  @State() width: number;\n\n  renderPosterImage() {\n    if (this.poster) {\n      return (\n        <div class=\"presto-audio__poster\">\n          <img src={this.poster} />\n        </div>\n      );\n    }\n    return;\n  }\n\n  hasPosterArea() {\n    return !!this.poster || !!this.preset?.['play-large'];\n  }\n\n  renderMobilePoster() {\n    return (\n      <div class=\"presto-audio__poster-wrapper-mobile\">\n        {!!this.preset?.['play-large'] && this.renderLargePlay('presto-audio__large-play-button is-relative')}\n        <div class=\"presto-audio__mobile-title\">{this.mediaTitle}</div>\n      </div>\n    );\n  }\n\n  renderLargePlay(className = 'presto-audio__large-play-button') {\n    return (\n      <div\n        class={className}\n        onClick={() => {\n          if (!this.player.playing) {\n            this.playVideo.emit();\n          } else {\n            this.pauseVideo.emit();\n          }\n        }}\n      >\n        <svg class=\"presto-audio__icon-play\" width=\"16\" height=\"18\" viewBox=\"0 0 16 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M15.5588 9.00005L0.117662 17.915L0.117662 0.0850823L15.5588 9.00005Z\" />\n        </svg>\n        <svg class=\"presto-audio__icon-pause\" width=\"17\" height=\"17\" viewBox=\"0 0 17 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"5\" height=\"17\" />\n          <rect x=\"12\" width=\"5\" height=\"17\" />\n        </svg>\n      </div>\n    );\n  }\n\n  componentDidLoad() {\n    // Only run if ResizeObserver is supported.\n    if ('ResizeObserver' in window) {\n      var ro = new ResizeObserver(entries => {\n        entries.forEach(entry => (this.width = entry.contentRect.width));\n      });\n      ro.observe(this.el);\n    }\n  }\n\n  render() {\n    return (\n      <div\n        ref={el => (this.el = el as HTMLDivElement)}\n        class={{\n          'presto-audio__wrapper': true,\n          'has-poster': !!this.poster,\n          'has-play-large': !!this.preset?.['play-large'],\n          'is-playing': this.player?.playing,\n          'has-light-background': lightOrDark(this.preset?.background_color) === 'light',\n          'has-dark-background': lightOrDark(this.preset?.background_color) === 'dark',\n          'breakpoint-small': this.width < 520,\n          'skin-stacked': this.width < 520,\n          'breakpoint-large': this.width >= 520,\n        }}\n      >\n        {this.hasPosterArea() && (\n          <div class=\"presto-audio__poster-wrapper\">\n            {!!this.preset?.['play-large'] && <div class=\"presto-audio__large-play-wrapper\">{this.renderLargePlay()}</div>}\n            {this.renderPosterImage()}\n          </div>\n        )}\n\n        {this.hasPosterArea() && this.renderMobilePoster()}\n\n        <div class=\"presto-audio__controls-wrapper\">\n          <div class=\"presto-audio__title\">{this.mediaTitle}</div>\n          <audio part=\"audio-player\" ref={this.getRef} autoplay={this.autoplay} preload={this.preload} data-poster={this.poster} {...this.audioAttributes}>\n            <source src={this.src} />\n            {!!this.tracks &&\n              !!this.tracks.length &&\n              this.tracks.map(track => <track kind=\"captions\" label={track?.label ? track.label : 'Captions'} src={track?.src} srclang={track?.srcLang ? track?.srcLang : 'en'} />)}\n          </audio>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}