{"file":"presto-audio2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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}