OwlCyberSecurity - MANAGER
Edit File: presto-audio2.js.map
{"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}