{"version":3,"names":["prestoActionBarCss","PrestoActionBarStyle0","PrestoActionBar","componentWillLoad","this","player","on","setEnded","e","setCurrentTime","ended","currentTime","_a","detail","plyr","duration","_b","disconnectedCallback","off","render","h","key","config","direction","youtube","prestoActionBarControllerCss","PrestoActionBarControllerStyle0","handleDuration","handleTime","handleEnded","val","percentage_start","show","handlePercentagePassed","percentagePassed","checkTime","window","wp","blocks","timePassed","current","showAfter","handleButtonCountChange","newVal","oldVal","button_count","youtubeRenderKey","enabled","youtubeButton","button_type","channelId","channel","_c","showCount","_d","customButton","type","size","href","button_link","url","target","_e","opensInNewTab","style","Object","assign","_f","button_radius","_g","button_color","_h","_j","button_text_color","_k","_l","button_text","handleCtaStateChange","actionBarStateChange","emit","open","background_color","text","slot","prestoAudioCss","PrestoAudioStyle0","PrestoAudio","renderPosterImage","poster","class","src","hasPosterArea","preset","renderMobilePoster","renderLargePlay","mediaTitle","className","onClick","playing","playVideo","pauseVideo","width","height","viewBox","fill","xmlns","d","x","componentDidLoad","ro","ResizeObserver","entries","forEach","entry","contentRect","observe","el","ref","lightOrDark","part","getRef","autoplay","preload","audioAttributes","tracks","length","map","track","kind","label","srclang","srcLang","PrestoBunny","thumbnail","playsinline","videoAttributes","prestoBusinessSkinCss","PrestoBusinessSkinStyle0","PrestoBusinessSkin","Host","prestoCtaOverlayCss","PrestoCtaOverlayStyle0","PrestoCTAOverlay","cta","i18n","provider","prestoCtaOverlayControllerCss","PrestoCtaOverlayControllerStyle0","PrestoCtaOverlayController","percentage","skipped","handleEnabled","skip","rewatch","restartVideo","ctaStateChange","background_opacity","headline","bottom_text","show_button","buttonLink","allowSkip","_m","show_skip","allowRewatch","_o","show_rewatch","_p","onSkip","onRewatch","prestoDynamicOverlayUiCss","PrestoDynamicOverlayUiStyle0","PrestoDynamicOverlayUi","closestElement","selector","document","closest","getRootNode","host","fitText","maxFontSize","minFontSize","container","Tag","position","prestoDynamicOverlaysCss","PrestoDynamicOverlaysStyle0","PrestoDynamicOverlays","watermarkRef","left","right","refs","checkValidity","overlays","watermark","offsetParent","topLeft","topRight","reloadComponent","keys","overlay","component","checkComponent","shouldShowWatermark","callback","shadowRoot","querySelector","content","assignedNodes","parentElement","innerHTML","getComputedStyle","parseInt","fontSize","color","parseColor","shouldShowOverlay","timeToSeconds","startTime","endTime","renderOverlay","visible","id","link","backgroundColor","opacity","toString","time","Math","floor","prestoEmailOverlayCss","PrestoEmailOverlayStyle0","PrestoEmailOverlay","videoId","presetId","emailCollection","email_collection","prestoEmailOverlayControllerCss","PrestoEmailOverlayControllerStyle0","PrestoEmailOverlayController","setStorage","status","localStorage","setItem","JSON","stringify","getStorage","getItem","handleTimeCheck","handleShowChange","getNonce","fetch","prestoPlayer","ajaxurl","submit","loading","error","response","data","nonce","json","method","body","URLSearchParams","action","preset_id","video_id","success","handleEmailStateChange","emailStateChange","bottomText","allow_skip","buttonText","isLoading","errorMessage","onSubmitForm","prestoModernSkinCss","PrestoModernSkinStyle0","PrestoModernSkin","prestoMutedOverlayCss","PrestoMutedOverlayStyle0","PrestoMutedOverlay","mutedPreview","mutedOverlay","focalPoint","top","y","transform","PrestoSearchBar","onSearch","value","removeOldMarkers","markers","searchResult","searchVtt","points","setMarkers","onPreviousNav","prevLocation","currentMarkerLocation","onFocusChange","focus","hideControls","auto_hide","onNextNav","nextLocation","media","textTracks","presets","placeholder","search","hasNavigation","prestoStackedSkinCss","PrestoStackedSkinStyle0","PrestoStackedSkin","prestoVimeoCss","PrestoVimeoStyle0","PrestoVimeo","getId","regExp","parseUrl","exec","parseHash","regex","found","match","groups","hash","isAndroidWebView","allowFullScreen","allowTransparency","allow","prestoYoutubeCss","PrestoYoutubeStyle0","PrestoYoutube","handlePlayerChange","fixes","setPoster","once","code","blockAttributes","muted","loadPlayer","lazyLoad","reloadPlayer","componentDidRender","reload","setWebView","standalone","navigator","userAgent","toLowerCase","safari","test","ios","isWebView","includes","loadImage","minWidth","Promise","resolve","reject","image","Image","handler","onload","onerror","naturalWidth","posterSrc","s","catch","then","isIOS","allowtransparency"],"sources":["src/components/core/features/presto-action-bar/component/presto-action-bar.scss?tag=presto-action-bar&encapsulation=shadow","src/components/core/features/presto-action-bar/component/presto-action-bar.tsx","src/components/core/features/presto-action-bar/controller/presto-action-bar-controller.scss?tag=presto-action-bar-controller&encapsulation=shadow","src/components/core/features/presto-action-bar/controller/presto-action-bar-controller.tsx","src/components/core/providers/presto-audio/presto-audio.scss?tag=presto-audio","src/components/core/providers/presto-audio/presto-audio.tsx","src/components/core/providers/presto-bunny/presto-bunny.tsx","src/components/ui/skins/presto-business-skin/presto-business-skin.scss?tag=presto-business-skin","src/components/ui/skins/presto-business-skin/presto-business-skin.tsx","src/components/core/features/presto-cta-overlay/component/presto-cta-overlay.css?tag=presto-cta-overlay","src/components/core/features/presto-cta-overlay/component/presto-cta-overlay.tsx","src/components/core/features/presto-cta-overlay/controller/presto-cta-overlay-controller.css?tag=presto-cta-overlay-controller","src/components/core/features/presto-cta-overlay/controller/presto-cta-overlay-controller.tsx","src/components/core/features/presto-dynamic-overlays/ui/presto-dynamic-overlay-ui.scss?tag=presto-dynamic-overlay-ui&encapsulation=shadow","src/components/core/features/presto-dynamic-overlays/ui/presto-dynamic-overlay-ui.tsx","src/components/core/features/presto-dynamic-overlays/component/presto-dynamic-overlays.scss?tag=presto-dynamic-overlays&encapsulation=shadow","src/components/core/features/presto-dynamic-overlays/component/presto-dynamic-overlays.tsx","src/components/core/features/presto-email-overlay/component/presto-email-overlay.css?tag=presto-email-overlay","src/components/core/features/presto-email-overlay/component/presto-email-overlay.tsx","src/components/core/features/presto-email-overlay/controller/presto-email-overlay-controller.css?tag=presto-email-overlay-controller","src/components/core/features/presto-email-overlay/controller/presto-email-overlay-controller.tsx","src/components/ui/skins/presto-modern-skin/presto-modern-skin.scss?tag=presto-modern-skin","src/components/ui/skins/presto-modern-skin/presto-modern-skin.tsx","src/components/core/features/presto-muted-overlay/presto-muted-overlay.css?tag=presto-muted-overlay","src/components/core/features/presto-muted-overlay/presto-muted-overlay.tsx","src/components/core/features/presto-search-bar/component/presto-search-bar.tsx","src/components/ui/skins/presto-stacked-skin/presto-stacked-skin.scss?tag=presto-stacked-skin","src/components/ui/skins/presto-stacked-skin/presto-stacked-skin.tsx","src/components/core/providers/presto-vimeo/presto-vimeo.css?tag=presto-vimeo","src/components/core/providers/presto-vimeo/presto-vimeo.tsx","src/components/core/providers/presto-youtube/presto-youtube.css?tag=presto-youtube","src/components/core/providers/presto-youtube/presto-youtube.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { ActionBarConfig, YoutubeConfig } from '../../../../../interfaces';\n\n@Component({\n tag: 'presto-action-bar',\n styleUrl: 'presto-action-bar.scss',\n shadow: true,\n})\nexport class PrestoActionBar {\n @Element() el: HTMLElement;\n\n @Prop() player: any;\n @Prop() config: ActionBarConfig;\n @Prop() direction?: 'rtl';\n @Prop() youtube?: YoutubeConfig;\n\n @State() currentTime: number;\n @State() duration: number;\n @State() ended: boolean;\n\n componentWillLoad() {\n if (!this.player) return;\n this.player.on('ended', () => this.setEnded());\n this.player.on('timeupdate', e => this.setCurrentTime(e));\n }\n\n setEnded() {\n this.ended = true;\n }\n\n setCurrentTime(e) {\n this.currentTime = e?.detail?.plyr.currentTime;\n this.duration = e?.detail?.plyr.duration;\n }\n\n /**\n * Remove listeners if destroyed\n */\n disconnectedCallback() {\n if (!this.player) return;\n this.player.off('ended', this.setEnded);\n this.player.off('timeupdate', this.setCurrentTime);\n }\n\n render() {\n return (\n \n );\n }\n}\n",":host {\n display: block;\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { ActionBarConfig, YoutubeConfig } from '../../../../../interfaces';\nimport { timePassed } from '../../../../../util';\n\n@Component({\n tag: 'presto-action-bar-controller',\n styleUrl: 'presto-action-bar-controller.scss',\n shadow: true,\n})\nexport class PrestoActionBar {\n @Element() el: HTMLElement;\n\n @Prop() ended: boolean;\n @Prop() config: ActionBarConfig;\n @Prop({ reflect: true }) currentTime: number;\n @Prop({ reflect: true }) duration: number;\n @Prop() direction?: 'rtl';\n @Prop() youtube?: YoutubeConfig;\n\n @State() show: boolean = false;\n @State() youtubeRenderKey: number = 1;\n @State() percentagePassed: number = 0;\n @Event() actionBarStateChange: EventEmitter;\n\n componentWillLoad() {\n this.handleDuration();\n }\n\n /**\n * Wait for duration to start before checking time\n * @returns void\n */\n @Watch('duration')\n handleDuration() {\n this.handleTime();\n }\n\n /**\n * Handle with the player is ended\n * @param val\n * @returns\n */\n @Watch('ended')\n handleEnded(val) {\n if (val) {\n if (this?.config?.percentage_start !== 100) return;\n this.show = true;\n }\n }\n\n @Watch('currentTime')\n @Watch('duration')\n handlePercentagePassed() {\n this.percentagePassed = (this.currentTime / this.duration) * 100;\n }\n\n /**\n * When current time changes, check to see if we should\n * enable the overlay\n * @returns void\n */\n @Watch('currentTime')\n handleTime() {\n this.checkTime();\n }\n\n /**\n * Set enabled/disabled based on time that has passed\n */\n checkTime() {\n if (window?.wp?.blocks) {\n this.show = true;\n return;\n }\n // if ( this.config?.percentage_start === 0) {\n // this.show = true;\n // } else {\n\n // console.log(this.currentTime, this.duration, this.config?.percentage_start);\n this.show = timePassed({\n current: this.currentTime,\n duration: this.duration,\n showAfter: this.config?.percentage_start,\n });\n }\n\n @Watch('config')\n handleButtonCountChange(newVal, oldVal) {\n if (newVal?.button_count !== oldVal?.button_count) {\n this.youtubeRenderKey++;\n }\n if (newVal?.enabled) {\n this.handleDuration();\n }\n }\n\n youtubeButton() {\n if (this.config?.button_type !== 'youtube' || !this.youtube?.channelId) {\n return;\n }\n\n return ;\n }\n\n customButton() {\n if (this.config?.button_type !== 'custom') {\n return;\n }\n\n return (\n \n {this.config?.button_text}\n \n );\n }\n @Watch('show')\n handleCtaStateChange(val) {\n this.actionBarStateChange.emit(val);\n }\n render() {\n return (\n \n {this.config?.text}\n\n
\n {this.youtubeButton()}\n {this.customButton()}\n
\n \n );\n }\n}\n",":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;\n @Event() pauseVideo: EventEmitter;\n\n @State() width: number;\n\n renderPosterImage() {\n if (this.poster) {\n return (\n
\n \n
\n );\n }\n return;\n }\n\n hasPosterArea() {\n return !!this.poster || !!this.preset?.['play-large'];\n }\n\n renderMobilePoster() {\n return (\n
\n {!!this.preset?.['play-large'] && this.renderLargePlay('presto-audio__large-play-button is-relative')}\n
{this.mediaTitle}
\n
\n );\n }\n\n renderLargePlay(className = 'presto-audio__large-play-button') {\n return (\n {\n if (!this.player.playing) {\n this.playVideo.emit();\n } else {\n this.pauseVideo.emit();\n }\n }}\n >\n \n \n \n \n \n \n \n \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 (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
\n {!!this.preset?.['play-large'] &&
{this.renderLargePlay()}
}\n {this.renderPosterImage()}\n
\n )}\n\n {this.hasPosterArea() && this.renderMobilePoster()}\n\n
\n
{this.mediaTitle}
\n \n
\n \n );\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'presto-bunny',\n shadow: false,\n})\nexport class PrestoBunny {\n @Prop({ mutable: true }) getRef?: (elm?: HTMLVideoElement) => void;\n @Prop() autoplay: boolean;\n @Prop() src: string;\n @Prop() preload: string;\n @Prop({ mutable: true }) poster: string;\n @Prop() player: any;\n @Prop() tracks: { label: string; src: string; srcLang: string }[];\n @Prop() playsinline: boolean;\n @Prop() provider: string;\n @Prop() thumbnail: string;\n @Prop() previewUrl: string;\n @Prop() videoAttributes: object;\n\n componentWillLoad() {\n this.poster = this.poster || this.thumbnail; // maybe add bunny thumbnail\n }\n\n render() {\n return (\n \n );\n }\n}\n",".skin-business {\n &.presto-player__wrapper {\n // when small play button is active but rewind is inactive\n &.rewind-inactive {\n .plyr__controls .plyr__controls__item:nth-child(2) {\n &::before {\n border-radius: var(--plyr-control-radius, 3px) 0px 0px var(--plyr-control-radius, 3px);\n }\n }\n }\n\n // full captions\n &.caption-style-full .plyr:not(.plyr--hide-controls):not(.is-muted-overlay) .plyr__controls:not(:empty) ~ .plyr__captions {\n transform: translateY(calc(var(--plyr-control-spacing, 16px) * -4));\n }\n\n .presto-player-progress__marker {\n border-radius: 0;\n width: 15px;\n height: 15px;\n border-width: 1px;\n }\n\n // hover effect for all button\n .plyr__control[data-plyr] {\n &:hover,\n &:focus,\n &:active {\n &:not([role*='menuitem']):not(.plyr__control--back) {\n background-color: transparent;\n color: var(--plyr-color-main);\n\n &[data-plyr='play'] {\n background-color: var(--plyr-color-main);\n color: white;\n }\n }\n }\n }\n\n // for large button\n .plyr__control--overlaid[data-plyr='play'] {\n border-radius: 4px;\n background: #000000;\n opacity: 75%;\n &:hover {\n background-color: var(--plyr-color-main);\n color: white;\n opacity: 100%;\n }\n }\n\n // for soun range cursor\n .plyr__volume input[type='range'] {\n cursor: pointer;\n }\n\n // fast forward\n .plyr__controls .plyr__controls__item[data-plyr='fast-forward'] {\n border-radius: 0px;\n }\n\n // range contol for video progression\n .plyr__progress {\n margin: 0px 20px 0 5px;\n\n input[type='range'] {\n height: 32px;\n border-radius: 0px;\n cursor: pointer;\n }\n }\n\n .plyr__controls .plyr__controls__item:not(.presto-player-progress__marker):first-child {\n &::before {\n border-radius: var(--plyr-control-radius, 3px) 0px 0px var(--plyr-control-radius, 3px);\n }\n }\n .plyr__controls .plyr__controls__item:not(.presto-player-progress__marker):last-child {\n &::before {\n border-radius: 0px var(--plyr-control-radius, 3px) var(--plyr-control-radius, 3px) 0px;\n }\n }\n\n // play button\n .plyr__controls .plyr__controls__item.plyr__control[data-plyr='play'] {\n order: -1;\n margin-right: 5px;\n padding: 11px 20px 11px 20px;\n top: -4px;\n &::before {\n border-radius: 4px;\n }\n }\n\n // rewind control\n .plyr__controls .plyr__controls__item[data-plyr='rewind'] {\n &::before {\n border-radius: var(--plyr-control-radius, 3px) 0px 0px var(--plyr-control-radius, 3px);\n }\n }\n\n .plyr__controls .plyr__controls__item:not([data-plyr='play']) {\n margin: 0;\n }\n\n //make fullscreen svg bigger\n .plyr__controls .plyr__controls__item[data-plyr='fullscreen'] {\n padding: 4px;\n svg {\n height: 24px;\n width: 24px;\n }\n }\n\n .plyr__controls .plyr__controls__item:not(.presto-player-progress__marker) {\n position: relative;\n // time\n &.plyr__time {\n height: 32px;\n padding-top: 4.5px;\n }\n\n &::before {\n content: '';\n background: #000000;\n position: absolute;\n top: 0px;\n left: 0;\n right: 0;\n bottom: 0px;\n opacity: 0.76;\n z-index: -1;\n }\n }\n\n // make video prgression range outline\n .plyr--full-ui input[type='range']::-webkit-slider-runnable-track {\n box-shadow: none;\n color: var(--plyr-color-main);\n height: 9px;\n outline: 1px solid #878787a6;\n outline-offset: 2px;\n border-radius: 0px;\n }\n\n // make the range control invisible\n .plyr--full-ui input[type='range']::-webkit-slider-thumb {\n visibility: hidden;\n }\n\n // make buffer big\n .plyr__progress__buffer::-webkit-progress-value {\n position: relative;\n border-radius: 0px;\n height: 9px;\n top: -2px;\n }\n\n .plyr--full-ui input[type='range']::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n @media screen and (max-width: 480px) {\n .plyr__controls .plyr__controls__item {\n &.plyr__time {\n padding: 1.5%;\n }\n }\n .plyr__controls .plyr__controls__item[data-plyr='play'] {\n padding: 8px;\n top: 0px;\n }\n //make fullscreen svg bigger\n .plyr__controls .plyr__controls__item[data-plyr='fullscreen'] {\n svg {\n width: 22px;\n }\n }\n }\n }\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'presto-business-skin',\n styleUrl: 'presto-business-skin.scss',\n shadow: false,\n})\nexport class PrestoBusinessSkin {\n render() {\n return (\n \n \n \n );\n }\n}\n",":host {\n display: block;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { i18nConfig, presetAttributes } from '../../../../../interfaces';\n\n/**\n * This component is needed to prevent re-rendering of\n * main component with currentTime changes.\n */\n@Component({\n tag: 'presto-cta-overlay',\n styleUrl: 'presto-cta-overlay.css',\n shadow: false,\n})\nexport class PrestoCTAOverlay {\n @Prop() player: any;\n @Prop() direction?: 'rtl';\n @Prop() preset: presetAttributes;\n @Prop() i18n: i18nConfig;\n @Prop() provider: string;\n\n @State() currentTime: number;\n @State() duration: number;\n @State() ended: boolean;\n\n componentWillLoad() {\n if (!this.player) return;\n this.player.on('ended', () => this.setEnded());\n this.player.on('timeupdate', e => this.setCurrentTime(e));\n }\n\n setEnded() {\n this.ended = true;\n }\n\n setCurrentTime(e) {\n this.currentTime = e?.detail?.plyr.currentTime;\n this.duration = e?.detail?.plyr.duration;\n }\n\n /**\n * Remove listeners if destroyed\n */\n disconnectedCallback() {\n if (!this.player) return;\n this.player.off('ended', this.setEnded);\n this.player.off('timeupdate', this.setCurrentTime);\n }\n\n /**\n * Maybe render\n * @returns JSX\n */\n render() {\n return (\n \n );\n }\n}\n",":host {\n display: block;\n}\n","import { Component, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { i18nConfig, CTA } from '../../../../../interfaces';\nimport { timePassed } from '../../../../../util';\n\n@Component({\n tag: 'presto-cta-overlay-controller',\n styleUrl: 'presto-cta-overlay-controller.css',\n shadow: false,\n})\nexport class PrestoCtaOverlayController {\n @Prop() ended: boolean;\n @Prop({ reflect: true }) currentTime: number;\n @Prop({ reflect: true }) duration: number;\n @Prop() direction?: 'rtl';\n @Prop() cta?: CTA;\n @Prop() i18n: i18nConfig;\n @Prop() provider: string;\n\n @State() enabled: boolean;\n @State() show: boolean;\n @State() loading: boolean;\n @State() error: string;\n @State() skipped: boolean;\n @State() percentagePassed: number = 0;\n\n @Event() playVideo: EventEmitter;\n @Event() pauseVideo: EventEmitter;\n @Event() restartVideo: EventEmitter;\n @Event() ctaStateChange: EventEmitter;\n\n componentWillLoad() {\n this.handleDuration();\n }\n\n /**\n * Handle with the player is ended\n * @param val\n * @returns\n */\n @Watch('ended')\n handleEnded(val) {\n if (val) {\n if (this?.cta?.percentage !== 100) return;\n this.show = true;\n }\n }\n\n /**\n * Wait for duration to start before checking time\n * @returns void\n */\n @Watch('duration')\n handleDuration() {\n this.enabled = this.skipped ? false : this?.cta?.enabled;\n this.handleTime();\n }\n\n @Watch('currentTime')\n @Watch('duration')\n handlePercentagePassed() {\n this.percentagePassed = (this.currentTime / this.duration) * 100;\n }\n\n /**\n * Watch current time and check if we should\n * pause the video.\n */\n @Watch('currentTime')\n handleEnabled() {\n if (!this.show) return; // not showing.\n if (this.skipped) return; // already skipped.\n this.pauseVideo.emit(true); // pause if enabled.\n }\n\n /**\n * When current time changes, check to see if we should\n * enable the overlay\n * @returns void\n */\n @Watch('currentTime')\n handleTime() {\n if (!this.enabled) return; // not enabled.\n if (this.skipped) return; // skipped.\n if (this?.cta?.percentage === 100) return; // we'll catch this on ended event.\n this.checkTime();\n }\n\n /**\n * Set enabled/disabled based on time that has passed\n */\n checkTime() {\n this.show = timePassed({\n current: this.currentTime,\n duration: this.duration,\n showAfter: this?.cta?.percentage || 0,\n });\n }\n\n /**\n * Skip email collection\n */\n skip() {\n this.skipped = true;\n this.show = false;\n this.playVideo.emit();\n }\n\n /**\n * Handle rewatch click.\n */\n rewatch() {\n this.ended = false;\n this.show = false;\n this.restartVideo.emit();\n }\n\n /**\n * Maybe render\n * @returns JSX\n */\n\n @Watch('show')\n handleCtaStateChange(val) {\n this.ctaStateChange.emit(val);\n }\n render() {\n if (!this.show) {\n return;\n }\n\n return (\n this.skip()}\n onRewatch={() => this.rewatch()}\n provider={this.provider}\n >\n );\n }\n}\n",":host {\n display: block;\n}\n\n.overlay-text {\n text-decoration: none;\n display: inline-block;\n user-select: none;\n line-height: 1;\n opacity: var(--presto-dynamic-overlay-opacity, 1);\n font-size: var(--presto-dynamic-overlay-font-size, 18px);\n padding: var(--presto-dynamic-overlay-padding, 0.65em 0.85em);\n font-weight: var(--presto-dynamic-overlay-font-weight, 500);\n border-radius: var(--presto-dynamic-overlay-radius, 0.25em);\n background: var(--presto-dynamic-overlay-background, rgba(0, 0, 0, 0.8));\n color: var(--presto-dynamic-overlay-color, #fff);\n opacity: var(--presto-dynamic-overlay-opacity, 1);\n word-break: break-word;\n}\n\na.overlay-text {\n cursor: pointer;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport fitText from '../../../../../library/fittext.js';\n\n@Component({\n tag: 'presto-dynamic-overlay-ui',\n styleUrl: 'presto-dynamic-overlay-ui.scss',\n shadow: true,\n})\nexport class PrestoDynamicOverlayUi {\n @Element() el: HTMLElement;\n\n private text: HTMLAnchorElement;\n\n /** When set, the underlying button will be rendered as an `` with this `href` instead of a `