@mux/mux-player
Version:
An open source Mux player web component that Just Worksâ„¢
949 lines (844 loc) • 106 kB
JavaScript
var lt=t=>{throw TypeError(t)};var Ae=(t,a,e)=>a.has(t)||lt("Cannot "+e);var l=(t,a,e)=>(Ae(t,a,"read from private field"),e?e.call(t):a.get(t)),h=(t,a,e)=>a.has(t)?lt("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(t):a.set(t,e),y=(t,a,e,i)=>(Ae(t,a,"write to private field"),i?i.call(t,e):a.set(t,e),e),p=(t,a,e)=>(Ae(t,a,"access private method"),e);var Y=class{addEventListener(){}removeEventListener(){}dispatchEvent(a){return!0}};if(typeof DocumentFragment=="undefined"){class t extends Y{}globalThis.DocumentFragment=t}var Q=class extends Y{},Ce=class extends Y{},Gt={get(t){},define(t,a,e){},getName(t){return null},upgrade(t){},whenDefined(t){return Promise.resolve(Q)}},J,ke=class{constructor(a,e={}){h(this,J);y(this,J,e==null?void 0:e.detail)}get detail(){return l(this,J)}initCustomEvent(){}};J=new WeakMap;function jt(t,a){return new Q}var ut={document:{createElement:jt},DocumentFragment,customElements:Gt,CustomEvent:ke,EventTarget:Y,HTMLElement:Q,HTMLVideoElement:Ce},mt=typeof window=="undefined"||typeof globalThis.customElements=="undefined",_=mt?ut:globalThis,D=mt?ut.document:globalThis.document;import{MediaController as _a,MediaErrorDialog as Ht}from"media-chrome";import{Attributes as we}from"media-chrome/dist/media-container.js";import{MediaStateChangeEvents as Pt,MediaUIAttributes as Ee,MediaUIEvents as wt}from"media-chrome/dist/constants.js";import"media-chrome/dist/experimental/index.js";import{MediaError as ve,Attributes as n}from"@mux/mux-video/base";import{StreamTypes as L,PlaybackTypes as Te,addTextTrack as Ra,removeTextTrack as xa,CmcdTypeValues as Dt,i18n as V,parseJwt as De,MuxJWTAud as Ue,generatePlayerInitTime as Oa}from"@mux/playback-core";import{i18n as Jt}from"@mux/playback-core";import{StreamTypes as xe,parseJwt as pt}from"@mux/playback-core";function ct(t){let a="";return Object.entries(t).forEach(([e,i])=>{i!=null&&(a+=`${me(e)}: ${i}; `)}),a?a.trim():void 0}function me(t){return t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function ce(t){return t.replace(/[-_]([a-z])/g,(a,e)=>e.toUpperCase())}function f(t){if(t==null)return;let a=+t;return Number.isNaN(a)?void 0:a}function _e(t){let a=zt(t).toString();return a?"?"+a:""}function zt(t){let a={};for(let e in t)t[e]!=null&&(a[e]=t[e]);return new URLSearchParams(a)}var Re=(t,a)=>!t||!a?!1:t.contains(a)?!0:Re(t,a.getRootNode().host);var bt="mux.com",Xt=()=>{try{return"3.13.0"}catch{}return"UNKNOWN"},qt=Xt(),be=()=>qt,ht=(t,{token:a,customDomain:e=bt,thumbnailTime:i,programTime:r}={})=>{var u;let s=a==null?i:void 0,{aud:d}=(u=pt(a))!=null?u:{};if(!(a&&d!=="t"))return`https://image.${e}/${t}/thumbnail.webp${_e({token:a,time:s,program_time:r})}`},gt=(t,{token:a,customDomain:e=bt,programStartTime:i,programEndTime:r}={})=>{var d;let{aud:s}=(d=pt(a))!=null?d:{};if(!(a&&s!=="s"))return`https://image.${e}/${t}/storyboard.vtt${_e({token:a,format:"webp",program_start_time:i,program_end_time:r})}`},ee=t=>{if(t){if([xe.LIVE,xe.ON_DEMAND].includes(t))return t;if(t!=null&&t.includes("live"))return xe.LIVE}};var Qt={crossorigin:"crossOrigin",playsinline:"playsInline"};function ft(t){var a;return(a=Qt[t])!=null?a:ce(t)}var U,B,C,pe=class{constructor(a,e){h(this,U);h(this,B);h(this,C,[]);y(this,U,a),y(this,B,e)}[Symbol.iterator](){return l(this,C).values()}get length(){return l(this,C).length}get value(){var a;return(a=l(this,C).join(" "))!=null?a:""}set value(a){var e;a!==this.value&&(y(this,C,[]),this.add(...(e=a==null?void 0:a.split(" "))!=null?e:[]))}toString(){return this.value}item(a){return l(this,C)[a]}values(){return l(this,C).values()}keys(){return l(this,C).keys()}forEach(a){l(this,C).forEach(a)}add(...a){var e,i;a.forEach(r=>{this.contains(r)||l(this,C).push(r)}),!(this.value===""&&!((e=l(this,U))!=null&&e.hasAttribute(`${l(this,B)}`)))&&((i=l(this,U))==null||i.setAttribute(`${l(this,B)}`,`${this.value}`))}remove(...a){var e;a.forEach(i=>{l(this,C).splice(l(this,C).indexOf(i),1)}),(e=l(this,U))==null||e.setAttribute(`${l(this,B)}`,`${this.value}`)}contains(a){return l(this,C).includes(a)}toggle(a,e){return typeof e!="undefined"?e?(this.add(a),!0):(this.remove(a),!1):this.contains(a)?(this.remove(a),!1):(this.add(a),!0)}replace(a,e){this.remove(a),this.add(e)}};U=new WeakMap,B=new WeakMap,C=new WeakMap;var yt=`[mux-player ${be()}]`;function O(...t){console.warn(yt,...t)}function k(...t){console.error(yt,...t)}function Oe(t){var e;let a=(e=t.message)!=null?e:"";t.context&&(a+=` ${t.context}`),t.file&&(a+=` ${Jt("Read more: ")}
https://github.com/muxinc/elements/blob/main/errors/${t.file}`),O(a)}var E={AUTOPLAY:"autoplay",CROSSORIGIN:"crossorigin",LOOP:"loop",MUTED:"muted",PLAYSINLINE:"playsinline",PRELOAD:"preload"},P={VOLUME:"volume",PLAYBACKRATE:"playbackrate",MUTED:"muted"},Xa={...E,...P},Tt=Object.freeze({length:0,start(t){let a=t>>>0;if(a>=this.length)throw new DOMException(`Failed to execute 'start' on 'TimeRanges': The index provided (${a}) is greater than or equal to the maximum bound (${this.length}).`);return 0},end(t){let a=t>>>0;if(a>=this.length)throw new DOMException(`Failed to execute 'end' on 'TimeRanges': The index provided (${a}) is greater than or equal to the maximum bound (${this.length}).`);return 0}}),ea=Object.values(E).filter(t=>E.PLAYSINLINE!==t),ta=Object.values(P),aa=[...ea,...ta],Le=class extends _.HTMLElement{static get observedAttributes(){return aa}constructor(){super()}attributeChangedCallback(a,e,i){var r,s;switch(a){case P.MUTED:{this.media&&(this.media.muted=i!=null,this.media.defaultMuted=i!=null);return}case P.VOLUME:{let d=(r=f(i))!=null?r:1;this.media&&(this.media.volume=d);return}case P.PLAYBACKRATE:{let d=(s=f(i))!=null?s:1;this.media&&(this.media.playbackRate=d,this.media.defaultPlaybackRate=d);return}}}play(){var a,e;return(e=(a=this.media)==null?void 0:a.play())!=null?e:Promise.reject()}pause(){var a;(a=this.media)==null||a.pause()}load(){var a;(a=this.media)==null||a.load()}get media(){var a;return(a=this.shadowRoot)==null?void 0:a.querySelector("mux-video")}get audioTracks(){return this.media.audioTracks}get videoTracks(){return this.media.videoTracks}get audioRenditions(){return this.media.audioRenditions}get videoRenditions(){return this.media.videoRenditions}get paused(){var a,e;return(e=(a=this.media)==null?void 0:a.paused)!=null?e:!0}get duration(){var a,e;return(e=(a=this.media)==null?void 0:a.duration)!=null?e:NaN}get ended(){var a,e;return(e=(a=this.media)==null?void 0:a.ended)!=null?e:!1}get buffered(){var a,e;return(e=(a=this.media)==null?void 0:a.buffered)!=null?e:Tt}get seekable(){var a,e;return(e=(a=this.media)==null?void 0:a.seekable)!=null?e:Tt}get readyState(){var a,e;return(e=(a=this.media)==null?void 0:a.readyState)!=null?e:0}get videoWidth(){var a,e;return(e=(a=this.media)==null?void 0:a.videoWidth)!=null?e:0}get videoHeight(){var a,e;return(e=(a=this.media)==null?void 0:a.videoHeight)!=null?e:0}get currentSrc(){var a,e;return(e=(a=this.media)==null?void 0:a.currentSrc)!=null?e:""}get currentTime(){var a,e;return(e=(a=this.media)==null?void 0:a.currentTime)!=null?e:0}set currentTime(a){this.media&&(this.media.currentTime=Number(a))}get volume(){var a,e;return(e=(a=this.media)==null?void 0:a.volume)!=null?e:1}set volume(a){this.media&&(this.media.volume=Number(a))}get playbackRate(){var a,e;return(e=(a=this.media)==null?void 0:a.playbackRate)!=null?e:1}set playbackRate(a){this.media&&(this.media.playbackRate=Number(a))}get defaultPlaybackRate(){var a;return(a=f(this.getAttribute(P.PLAYBACKRATE)))!=null?a:1}set defaultPlaybackRate(a){a!=null?this.setAttribute(P.PLAYBACKRATE,`${a}`):this.removeAttribute(P.PLAYBACKRATE)}get crossOrigin(){return te(this,E.CROSSORIGIN)}set crossOrigin(a){this.setAttribute(E.CROSSORIGIN,`${a}`)}get autoplay(){return te(this,E.AUTOPLAY)!=null}set autoplay(a){a?this.setAttribute(E.AUTOPLAY,typeof a=="string"?a:""):this.removeAttribute(E.AUTOPLAY)}get loop(){return te(this,E.LOOP)!=null}set loop(a){a?this.setAttribute(E.LOOP,""):this.removeAttribute(E.LOOP)}get muted(){var a,e;return(e=(a=this.media)==null?void 0:a.muted)!=null?e:!1}set muted(a){this.media&&(this.media.muted=!!a)}get defaultMuted(){return te(this,E.MUTED)!=null}set defaultMuted(a){a?this.setAttribute(E.MUTED,""):this.removeAttribute(E.MUTED)}get playsInline(){return te(this,E.PLAYSINLINE)!=null}set playsInline(a){k("playsInline is set to true by default and is not currently supported as a setter.")}get preload(){return this.media?this.media.preload:this.getAttribute("preload")}set preload(a){["","none","metadata","auto"].includes(a)?this.setAttribute(E.PRELOAD,a):this.removeAttribute(E.PRELOAD)}};function te(t,a){return t.media?t.media.getAttribute(a):t.getAttribute(a)}var Me=Le;import"media-chrome/dist/media-theme-element.js";var vt=`:host {
--media-control-display: var(--controls);
--media-loading-indicator-display: var(--loading-indicator);
--media-dialog-display: var(--dialog);
--media-play-button-display: var(--play-button);
--media-live-button-display: var(--live-button);
--media-seek-backward-button-display: var(--seek-backward-button);
--media-seek-forward-button-display: var(--seek-forward-button);
--media-mute-button-display: var(--mute-button);
--media-captions-button-display: var(--captions-button);
--media-captions-menu-button-display: var(--captions-menu-button, var(--media-captions-button-display));
--media-rendition-menu-button-display: var(--rendition-menu-button);
--media-audio-track-menu-button-display: var(--audio-track-menu-button);
--media-airplay-button-display: var(--airplay-button);
--media-pip-button-display: var(--pip-button);
--media-fullscreen-button-display: var(--fullscreen-button);
--media-cast-button-display: var(--cast-button, var(--_cast-button-drm-display));
--media-playback-rate-button-display: var(--playback-rate-button);
--media-playback-rate-menu-button-display: var(--playback-rate-menu-button);
--media-volume-range-display: var(--volume-range);
--media-time-range-display: var(--time-range);
--media-time-display-display: var(--time-display);
--media-duration-display-display: var(--duration-display);
--media-title-display-display: var(--title-display);
display: inline-block;
line-height: 0;
width: 100%;
}
a {
color: #fff;
font-size: 0.9em;
text-decoration: underline;
}
media-theme {
display: inline-block;
line-height: 0;
width: 100%;
height: 100%;
direction: ltr;
}
media-poster-image {
display: inline-block;
line-height: 0;
width: 100%;
height: 100%;
}
media-poster-image:not([src]):not([placeholdersrc]) {
display: none;
}
::part(top),
[part~='top'] {
--media-control-display: var(--controls, var(--top-controls));
--media-play-button-display: var(--play-button, var(--top-play-button));
--media-live-button-display: var(--live-button, var(--top-live-button));
--media-seek-backward-button-display: var(--seek-backward-button, var(--top-seek-backward-button));
--media-seek-forward-button-display: var(--seek-forward-button, var(--top-seek-forward-button));
--media-mute-button-display: var(--mute-button, var(--top-mute-button));
--media-captions-button-display: var(--captions-button, var(--top-captions-button));
--media-captions-menu-button-display: var(
--captions-menu-button,
var(--media-captions-button-display, var(--top-captions-menu-button))
);
--media-rendition-menu-button-display: var(--rendition-menu-button, var(--top-rendition-menu-button));
--media-audio-track-menu-button-display: var(--audio-track-menu-button, var(--top-audio-track-menu-button));
--media-airplay-button-display: var(--airplay-button, var(--top-airplay-button));
--media-pip-button-display: var(--pip-button, var(--top-pip-button));
--media-fullscreen-button-display: var(--fullscreen-button, var(--top-fullscreen-button));
--media-cast-button-display: var(--cast-button, var(--top-cast-button, var(--_cast-button-drm-display)));
--media-playback-rate-button-display: var(--playback-rate-button, var(--top-playback-rate-button));
--media-playback-rate-menu-button-display: var(
--captions-menu-button,
var(--media-playback-rate-button-display, var(--top-playback-rate-menu-button))
);
--media-volume-range-display: var(--volume-range, var(--top-volume-range));
--media-time-range-display: var(--time-range, var(--top-time-range));
--media-time-display-display: var(--time-display, var(--top-time-display));
--media-duration-display-display: var(--duration-display, var(--top-duration-display));
--media-title-display-display: var(--title-display, var(--top-title-display));
}
::part(center),
[part~='center'] {
--media-control-display: var(--controls, var(--center-controls));
--media-play-button-display: var(--play-button, var(--center-play-button));
--media-live-button-display: var(--live-button, var(--center-live-button));
--media-seek-backward-button-display: var(--seek-backward-button, var(--center-seek-backward-button));
--media-seek-forward-button-display: var(--seek-forward-button, var(--center-seek-forward-button));
--media-mute-button-display: var(--mute-button, var(--center-mute-button));
--media-captions-button-display: var(--captions-button, var(--center-captions-button));
--media-captions-menu-button-display: var(
--captions-menu-button,
var(--media-captions-button-display, var(--center-captions-menu-button))
);
--media-rendition-menu-button-display: var(--rendition-menu-button, var(--center-rendition-menu-button));
--media-audio-track-menu-button-display: var(--audio-track-menu-button, var(--center-audio-track-menu-button));
--media-airplay-button-display: var(--airplay-button, var(--center-airplay-button));
--media-pip-button-display: var(--pip-button, var(--center-pip-button));
--media-fullscreen-button-display: var(--fullscreen-button, var(--center-fullscreen-button));
--media-cast-button-display: var(--cast-button, var(--center-cast-button, var(--_cast-button-drm-display)));
--media-playback-rate-button-display: var(--playback-rate-button, var(--center-playback-rate-button));
--media-playback-rate-menu-button-display: var(
--playback-rate-menu-button,
var(--media-playback-rate-button-display, var(--center-playback-rate-menu-button))
);
--media-volume-range-display: var(--volume-range, var(--center-volume-range));
--media-time-range-display: var(--time-range, var(--center-time-range));
--media-time-display-display: var(--time-display, var(--center-time-display));
--media-duration-display-display: var(--duration-display, var(--center-duration-display));
}
::part(bottom),
[part~='bottom'] {
--media-control-display: var(--controls, var(--bottom-controls));
--media-play-button-display: var(--play-button, var(--bottom-play-button));
--media-live-button-display: var(--live-button, var(--bottom-live-button));
--media-seek-backward-button-display: var(--seek-backward-button, var(--bottom-seek-backward-button));
--media-seek-forward-button-display: var(--seek-forward-button, var(--bottom-seek-forward-button));
--media-mute-button-display: var(--mute-button, var(--bottom-mute-button));
--media-captions-button-display: var(--captions-button, var(--bottom-captions-button));
--media-captions-menu-button-display: var(
--captions-menu-button,
var(--media-captions-button-display, var(--bottom-captions-menu-button))
);
--media-rendition-menu-button-display: var(--rendition-menu-button, var(--bottom-rendition-menu-button));
--media-audio-track-menu-button-display: var(--audio-track-menu-button, var(--bottom-audio-track-menu-button));
--media-airplay-button-display: var(--airplay-button, var(--bottom-airplay-button));
--media-pip-button-display: var(--pip-button, var(--bottom-pip-button));
--media-fullscreen-button-display: var(--fullscreen-button, var(--bottom-fullscreen-button));
--media-cast-button-display: var(--cast-button, var(--bottom-cast-button, var(--_cast-button-drm-display)));
--media-playback-rate-button-display: var(--playback-rate-button, var(--bottom-playback-rate-button));
--media-playback-rate-menu-button-display: var(
--playback-rate-menu-button,
var(--media-playback-rate-button-display, var(--bottom-playback-rate-menu-button))
);
--media-volume-range-display: var(--volume-range, var(--bottom-volume-range));
--media-time-range-display: var(--time-range, var(--bottom-time-range));
--media-time-display-display: var(--time-display, var(--bottom-time-display));
--media-duration-display-display: var(--duration-display, var(--bottom-duration-display));
--media-title-display-display: var(--title-display, var(--bottom-title-display));
}
:host([no-tooltips]) {
--media-tooltip-display: none;
}
`;import{TemplateInstance as ra,ChildNodePart as ge,AttrPart as fe}from"media-chrome/dist/media-theme-element.js";var ae=new WeakMap,Ne=class t{constructor(a,e){this.element=a;this.type=e;this.element.addEventListener(this.type,this);let i=ae.get(this.element);i&&i.set(this.type,this)}set(a){if(typeof a=="function")this.handleEvent=a.bind(this.element);else if(typeof a=="object"&&typeof a.handleEvent=="function")this.handleEvent=a.handleEvent.bind(a);else{this.element.removeEventListener(this.type,this);let e=ae.get(this.element);e&&e.delete(this.type)}}static for(a){ae.has(a.element)||ae.set(a.element,new Map);let e=a.attributeName.slice(2),i=ae.get(a.element);return i&&i.has(e)?i.get(e):new t(a.element,e)}};function oa(t,a){return t instanceof fe&&t.attributeName.startsWith("on")?(Ne.for(t).set(a),t.element.removeAttributeNS(t.attributeNamespace,t.attributeName),!0):!1}function na(t,a){return a instanceof he&&t instanceof ge?(a.renderInto(t),!0):!1}function sa(t,a){return a instanceof DocumentFragment&&t instanceof ge?(a.childNodes.length&&t.replace(...a.childNodes),!0):!1}function da(t,a){if(t instanceof fe){let e=t.attributeNamespace,i=t.element.getAttributeNS(e,t.attributeName);return String(a)!==i&&(t.value=String(a)),!0}return t.value=String(a),!0}function la(t,a){if(t instanceof fe&&a instanceof Element){let e=t.element;return e[t.attributeName]!==a&&(t.element.removeAttributeNS(t.attributeNamespace,t.attributeName),e[t.attributeName]=a),!0}return!1}function ua(t,a){if(typeof a=="boolean"&&t instanceof fe){let e=t.attributeNamespace,i=t.element.hasAttributeNS(e,t.attributeName);return a!==i&&(t.booleanValue=a),!0}return!1}function ma(t,a){return a===!1&&t instanceof ge?(t.replace(""),!0):!1}function ca(t,a){la(t,a)||ua(t,a)||oa(t,a)||ma(t,a)||na(t,a)||sa(t,a)||da(t,a)}var Se=new Map,At=new WeakMap,Ct=new WeakMap,he=class{constructor(a,e,i){this.strings=a;this.values=e;this.processor=i;this.stringsKey=this.strings.join("")}get template(){if(Se.has(this.stringsKey))return Se.get(this.stringsKey);{let a=D.createElement("template"),e=this.strings.length-1;return a.innerHTML=this.strings.reduce((i,r,s)=>i+r+(s<e?`{{ ${s} }}`:""),""),Se.set(this.stringsKey,a),a}}renderInto(a){var r;let e=this.template;if(At.get(a)!==e){At.set(a,e);let s=new ra(e,this.values,this.processor);Ct.set(a,s),a instanceof ge?a.replace(...s.children):a.appendChild(s);return}let i=Ct.get(a);(r=i==null?void 0:i.update)==null||r.call(i,this.values)}},pa={processCallback(t,a,e){var i;if(e){for(let[r,s]of a)if(r in e){let d=(i=e[r])!=null?i:"";ca(s,d)}}}};function ie(t,...a){return new he(t,a,pa)}function kt(t,a){t.renderInto(a)}import{StreamTypes as ba,toMuxVideoURL as _t}from"@mux/playback-core";var ha=t=>{let{tokens:a}=t;return a.drm?":host(:not([cast-receiver])) { --_cast-button-drm-display: none; }":""},Rt=t=>ie`
<style>
${ha(t)}
${vt}
</style>
${Ea(t)}
`,ga=t=>{let a=t.hotKeys?`${t.hotKeys}`:"";return ee(t.streamType)==="live"&&(a+=" noarrowleft noarrowright"),a},fa={TOP:"top",CENTER:"center",BOTTOM:"bottom",LAYER:"layer",MEDIA_LAYER:"media-layer",POSTER_LAYER:"poster-layer",VERTICAL_LAYER:"vertical-layer",CENTERED_LAYER:"centered-layer",GESTURE_LAYER:"gesture-layer",CONTROLLER_LAYER:"controller",BUTTON:"button",RANGE:"range",THUMB:"thumb",DISPLAY:"display",CONTROL_BAR:"control-bar",MENU_BUTTON:"menu-button",MENU:"menu",MENU_ITEM:"menu-item",OPTION:"option",POSTER:"poster",LIVE:"live",PLAY:"play",PRE_PLAY:"pre-play",SEEK_BACKWARD:"seek-backward",SEEK_FORWARD:"seek-forward",MUTE:"mute",CAPTIONS:"captions",AIRPLAY:"airplay",PIP:"pip",FULLSCREEN:"fullscreen",CAST:"cast",PLAYBACK_RATE:"playback-rate",VOLUME:"volume",TIME:"time",TITLE:"title",AUDIO_TRACK:"audio-track",RENDITION:"rendition"},ya=Object.values(fa).join(", "),Ea=t=>{var a,e,i,r,s,d,u,b,R,j,z,A,T,x,F,g,ue,X,q,He,$e,Fe,Ye,We,Ze,Ge,je,ze,Xe,qe,Qe,Je,et,tt,at,it,rt,ot,nt,st,dt;return ie`
<media-theme
template="${t.themeTemplate||!1}"
defaultstreamtype="${(a=t.defaultStreamType)!=null?a:!1}"
hotkeys="${ga(t)||!1}"
nohotkeys="${t.noHotKeys||!t.hasSrc||!1}"
noautoseektolive="${!!((e=t.streamType)!=null&&e.includes(ba.LIVE))&&t.targetLiveWindow!==0}"
novolumepref="${t.novolumepref||!1}"
nomutedpref="${t.nomutedpref||!1}"
disabled="${!t.hasSrc||t.isDialogOpen}"
audio="${(i=t.audio)!=null?i:!1}"
style="${(r=ct({"--media-primary-color":t.primaryColor,"--media-secondary-color":t.secondaryColor,"--media-accent-color":t.accentColor}))!=null?r:!1}"
defaultsubtitles="${!t.defaultHiddenCaptions}"
forwardseekoffset="${(s=t.forwardSeekOffset)!=null?s:!1}"
backwardseekoffset="${(d=t.backwardSeekOffset)!=null?d:!1}"
playbackrates="${(u=t.playbackRates)!=null?u:!1}"
defaultshowremainingtime="${(b=t.defaultShowRemainingTime)!=null?b:!1}"
defaultduration="${(R=t.defaultDuration)!=null?R:!1}"
hideduration="${(j=t.hideDuration)!=null?j:!1}"
title="${(z=t.title)!=null?z:!1}"
videotitle="${(A=t.videoTitle)!=null?A:!1}"
proudlydisplaymuxbadge="${(T=t.proudlyDisplayMuxBadge)!=null?T:!1}"
exportparts="${ya}"
onclose="${t.onCloseErrorDialog}"
onfocusin="${t.onFocusInErrorDialog}"
>
<mux-video
slot="media"
inert="${(x=t.noHotKeys)!=null?x:!1}"
target-live-window="${(F=t.targetLiveWindow)!=null?F:!1}"
stream-type="${(g=ee(t.streamType))!=null?g:!1}"
crossorigin="${(ue=t.crossOrigin)!=null?ue:""}"
playsinline
autoplay="${(X=t.autoplay)!=null?X:!1}"
muted="${(q=t.muted)!=null?q:!1}"
loop="${(He=t.loop)!=null?He:!1}"
preload="${($e=t.preload)!=null?$e:!1}"
debug="${(Fe=t.debug)!=null?Fe:!1}"
prefer-cmcd="${(Ye=t.preferCmcd)!=null?Ye:!1}"
disable-tracking="${(We=t.disableTracking)!=null?We:!1}"
disable-cookies="${(Ze=t.disableCookies)!=null?Ze:!1}"
prefer-playback="${(Ge=t.preferPlayback)!=null?Ge:!1}"
start-time="${t.startTime!=null?t.startTime:!1}"
initial-bandwidth-estimate-kbps="${t.initialBandwidthEstimateKbps!=null?t.initialBandwidthEstimateKbps:!1}"
initial-estimate-segments="${t.initialEstimateSegments!=null?t.initialEstimateSegments:!1}"
min-preload-segments="${t.minPreloadSegments!=null?t.minPreloadSegments:!1}"
beacon-collection-domain="${(je=t.beaconCollectionDomain)!=null?je:!1}"
player-init-time="${(ze=t.playerInitTime)!=null?ze:!1}"
player-software-name="${(Xe=t.playerSoftwareName)!=null?Xe:!1}"
player-software-version="${(qe=t.playerSoftwareVersion)!=null?qe:!1}"
env-key="${(Qe=t.envKey)!=null?Qe:!1}"
custom-domain="${(Je=t.customDomain)!=null?Je:!1}"
src="${t.src?t.src:t.playbackId?_t(t):!1}"
cast-src="${t.src?t.src:t.playbackId?_t(t):!1}"
cast-receiver="${(et=t.castReceiver)!=null?et:!1}"
drm-token="${(at=(tt=t.tokens)==null?void 0:tt.drm)!=null?at:!1}"
playback-token="${(rt=(it=t.tokens)==null?void 0:it.playback)!=null?rt:!1}"
exportparts="video"
disable-pseudo-ended="${(ot=t.disablePseudoEnded)!=null?ot:!1}"
max-auto-resolution="${(nt=t.maxAutoResolution)!=null?nt:!1}"
cap-rendition-to-player-size="${(st=t.capRenditionToPlayerSize)!=null?st:!1}"
>
${t.storyboard?ie`<track label="thumbnails" default kind="metadata" src="${t.storyboard}" />`:ie``}
<slot></slot>
</mux-video>
<slot name="poster" slot="poster">
<media-poster-image
part="poster"
exportparts="poster, img"
src="${t.poster?t.poster:!1}"
placeholdersrc="${(dt=t.placeholder)!=null?dt:!1}"
></media-poster-image>
</slot>
</media-theme>
`};import{errorCategoryToTokenNameOrPrefix as xt,i18n as v,MediaError as S,MuxErrorCategory as Ot,MuxErrorCode as c}from"@mux/playback-core";var Lt=t=>t.charAt(0).toUpperCase()+t.slice(1),Ta=(t,a=!1)=>{var e,i;if(t.muxCode){let r=Lt((e=t.errorCategory)!=null?e:"video"),s=xt((i=t.errorCategory)!=null?i:Ot.VIDEO);if(t.muxCode===c.NETWORK_OFFLINE)return v("Your device appears to be offline",a);if(t.muxCode===c.NETWORK_TOKEN_EXPIRED)return v("{category} URL has expired",a).format({category:r});if([c.NETWORK_TOKEN_SUB_MISMATCH,c.NETWORK_TOKEN_AUD_MISMATCH,c.NETWORK_TOKEN_AUD_MISSING,c.NETWORK_TOKEN_MALFORMED].includes(t.muxCode))return v("{category} URL is formatted incorrectly",a).format({category:r});if(t.muxCode===c.NETWORK_TOKEN_MISSING)return v("Invalid {categoryName} URL",a).format({categoryName:s});if(t.muxCode===c.NETWORK_NOT_FOUND)return v("{category} does not exist",a).format({category:r});if(t.muxCode===c.NETWORK_NOT_READY){let d=t.streamType==="live"?"Live stream":"Video";return v("{mediaType} is not currently available",a).format({mediaType:d})}}if(t.code){if(t.code===S.MEDIA_ERR_NETWORK)return v("Network Error",a);if(t.code===S.MEDIA_ERR_DECODE)return v("Media Error",a);if(t.code===S.MEDIA_ERR_SRC_NOT_SUPPORTED)return v("Source Not Supported",a)}return v("Error",a)},va=(t,a=!1)=>{var e,i;if(t.muxCode){let r=Lt((e=t.errorCategory)!=null?e:"video"),s=xt((i=t.errorCategory)!=null?i:Ot.VIDEO);return t.muxCode===c.NETWORK_OFFLINE?v("Check your internet connection and try reloading this video.",a):t.muxCode===c.NETWORK_TOKEN_EXPIRED?v("The video\u2019s secured {tokenNamePrefix}-token has expired.",a).format({tokenNamePrefix:s}):t.muxCode===c.NETWORK_TOKEN_SUB_MISMATCH?v("The video\u2019s playback ID does not match the one encoded in the {tokenNamePrefix}-token.",a).format({tokenNamePrefix:s}):t.muxCode===c.NETWORK_TOKEN_MALFORMED?v("{category} URL is formatted incorrectly",a).format({category:r}):[c.NETWORK_TOKEN_AUD_MISMATCH,c.NETWORK_TOKEN_AUD_MISSING].includes(t.muxCode)?v("The {tokenNamePrefix}-token is formatted with incorrect information.",a).format({tokenNamePrefix:s}):[c.NETWORK_TOKEN_MISSING,c.NETWORK_INVALID_URL].includes(t.muxCode)?v("The video URL or {tokenNamePrefix}-token are formatted with incorrect or incomplete information.",a).format({tokenNamePrefix:s}):t.muxCode===c.NETWORK_NOT_FOUND?"":t.message}return t.code&&(t.code===S.MEDIA_ERR_NETWORK||t.code===S.MEDIA_ERR_DECODE||t.code===S.MEDIA_ERR_SRC_NOT_SUPPORTED),t.message},Mt=(t,a=!1)=>{let e=Ta(t,a).toString(),i=va(t,a).toString();return{title:e,message:i}},Aa=t=>{if(t.muxCode){if(t.muxCode===c.NETWORK_TOKEN_EXPIRED)return"403-expired-token.md";if(t.muxCode===c.NETWORK_TOKEN_MALFORMED)return"403-malformatted-token.md";if([c.NETWORK_TOKEN_AUD_MISMATCH,c.NETWORK_TOKEN_AUD_MISSING].includes(t.muxCode))return"403-incorrect-aud-value.md";if(t.muxCode===c.NETWORK_TOKEN_SUB_MISMATCH)return"403-playback-id-mismatch.md";if(t.muxCode===c.NETWORK_TOKEN_MISSING)return"missing-signed-tokens.md";if(t.muxCode===c.NETWORK_NOT_FOUND)return"404-not-found.md";if(t.muxCode===c.NETWORK_NOT_READY)return"412-not-playable.md"}if(t.code){if(t.code===S.MEDIA_ERR_NETWORK)return"";if(t.code===S.MEDIA_ERR_DECODE)return"media-decode-error.md";if(t.code===S.MEDIA_ERR_SRC_NOT_SUPPORTED)return"media-src-not-supported.md"}return""},Ie=(t,a)=>{let e=Aa(t);return{message:t.message,context:t.context,file:e}};var St=`<template id="media-theme-gerwig">
<style>
@keyframes pre-play-hide {
0% {
transform: scale(1);
opacity: 1;
}
30% {
transform: scale(0.7);
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
:host {
--_primary-color: var(--media-primary-color, #fff);
--_secondary-color: var(--media-secondary-color, transparent);
--_accent-color: var(--media-accent-color, #fa50b5);
--_text-color: var(--media-text-color, #000);
--media-icon-color: var(--_primary-color);
--media-control-background: var(--_secondary-color);
--media-control-hover-background: var(--_accent-color);
--media-time-buffered-color: rgba(255, 255, 255, 0.4);
--media-preview-time-text-shadow: none;
--media-control-height: 14px;
--media-control-padding: 6px;
--media-tooltip-container-margin: 6px;
--media-tooltip-distance: 18px;
color: var(--_primary-color);
display: inline-block;
width: 100%;
height: 100%;
}
:host([audio]) {
--_secondary-color: var(--media-secondary-color, black);
--media-preview-time-text-shadow: none;
}
:host([audio]) ::slotted([slot='media']) {
height: 0px;
}
:host([audio]) media-loading-indicator {
display: none;
}
:host([audio]) media-controller {
background: transparent;
}
:host([audio]) media-controller::part(vertical-layer) {
background: transparent;
}
:host([audio]) media-control-bar {
width: 100%;
background-color: var(--media-control-background);
}
/*
* 0.433s is the transition duration for VTT Regions.
* Borrowed here, so the captions don't move too fast.
*/
media-controller {
--media-webkit-text-track-transform: translateY(0) scale(0.98);
--media-webkit-text-track-transition: transform 0.433s ease-out 0.3s;
}
media-controller:is([mediapaused], :not([userinactive])) {
--media-webkit-text-track-transform: translateY(-50px) scale(0.98);
--media-webkit-text-track-transition: transform 0.15s ease;
}
/*
* CSS specific to iOS devices.
* See: https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices/60220757#60220757
*/
@supports (-webkit-touch-callout: none) {
/* Disable subtitle adjusting for iOS Safari */
media-controller[mediaisfullscreen] {
--media-webkit-text-track-transform: unset;
--media-webkit-text-track-transition: unset;
}
}
media-time-range {
--media-box-padding-left: 6px;
--media-box-padding-right: 6px;
--media-range-bar-color: var(--_accent-color);
--media-time-range-buffered-color: var(--_primary-color);
--media-range-track-color: transparent;
--media-range-track-background: rgba(255, 255, 255, 0.4);
--media-range-thumb-background: radial-gradient(
circle,
#000 0%,
#000 25%,
var(--_accent-color) 25%,
var(--_accent-color)
);
--media-range-thumb-width: 12px;
--media-range-thumb-height: 12px;
--media-range-thumb-transform: scale(0);
--media-range-thumb-transition: transform 0.3s;
--media-range-thumb-opacity: 1;
--media-preview-background: var(--_primary-color);
--media-box-arrow-background: var(--_primary-color);
--media-preview-thumbnail-border: 5px solid var(--_primary-color);
--media-preview-border-radius: 5px;
--media-text-color: var(--_text-color);
--media-control-hover-background: transparent;
--media-preview-chapter-text-shadow: none;
color: var(--_accent-color);
padding: 0 6px;
}
:host([audio]) media-time-range {
--media-preview-time-padding: 1.5px 6px;
--media-preview-box-margin: 0 0 -5px;
}
media-time-range:hover {
--media-range-thumb-transform: scale(1);
}
media-preview-thumbnail {
border-bottom-width: 0;
}
[part~='menu'] {
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
bottom: 50px;
padding: 2.5px 10px;
}
[part~='menu']::part(indicator) {
fill: var(--_accent-color);
}
[part~='menu']::part(menu-item) {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 6px 10px;
min-height: 34px;
}
[part~='menu']::part(checked) {
font-weight: 700;
}
media-captions-menu,
media-rendition-menu,
media-audio-track-menu,
media-playback-rate-menu {
position: absolute; /* ensure they don't take up space in DOM on load */
--media-menu-background: var(--_primary-color);
--media-menu-item-checked-background: transparent;
--media-text-color: var(--_text-color);
--media-menu-item-hover-background: transparent;
--media-menu-item-hover-outline: var(--_accent-color) solid 1px;
}
media-rendition-menu {
min-width: 140px;
}
/* The icon is a circle so make it 16px high instead of 14px for more balance. */
media-audio-track-menu-button {
--media-control-padding: 5px;
--media-control-height: 16px;
}
media-playback-rate-menu-button {
--media-control-padding: 6px 3px;
min-width: 4.4ch;
}
media-playback-rate-menu {
--media-menu-flex-direction: row;
--media-menu-item-checked-background: var(--_accent-color);
--media-menu-item-checked-indicator-display: none;
margin-right: 6px;
padding: 0;
--media-menu-gap: 0.25em;
}
media-playback-rate-menu[part~='menu']::part(menu-item) {
padding: 6px 6px 6px 8px;
}
media-playback-rate-menu[part~='menu']::part(checked) {
color: #fff;
}
:host(:not([audio])) media-time-range {
/* Adding px is required here for calc() */
--media-range-padding: 0px;
background: transparent;
z-index: 10;
height: 10px;
bottom: -3px;
width: 100%;
}
media-control-bar :is([role='button'], [role='switch'], button) {
line-height: 0;
}
media-control-bar :is([part*='button'], [part*='range'], [part*='display']) {
border-radius: 3px;
}
.spacer {
flex-grow: 1;
background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
}
media-control-bar[slot~='top-chrome'] {
min-height: 42px;
pointer-events: none;
}
media-control-bar {
--gradient-steps:
hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%, hsl(0 0% 0% / 0.104) 22.5%,
hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%,
hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%,
hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%;
}
:host([title]) media-control-bar[slot='top-chrome']::before,
:host([videotitle]) media-control-bar[slot='top-chrome']::before {
content: '';
position: absolute;
width: 100%;
padding-bottom: min(100px, 25%);
background: linear-gradient(to top, var(--gradient-steps));
opacity: 0.8;
pointer-events: none;
}
:host(:not([audio])) media-control-bar[part~='bottom']::before {
content: '';
position: absolute;
width: 100%;
bottom: 0;
left: 0;
padding-bottom: min(100px, 25%);
background: linear-gradient(to bottom, var(--gradient-steps));
opacity: 0.8;
z-index: 1;
pointer-events: none;
}
media-control-bar[part~='bottom'] > * {
z-index: 20;
}
media-control-bar[part~='bottom'] {
padding: 6px 6px;
}
media-control-bar[slot~='top-chrome'] > * {
--media-control-background: transparent;
--media-control-hover-background: transparent;
position: relative;
}
media-controller::part(vertical-layer) {
transition: background-color 1s;
}
media-controller:is([mediapaused], :not([userinactive]))::part(vertical-layer) {
background-color: var(--controls-backdrop-color, var(--controls, transparent));
transition: background-color 0.25s;
}
.center-controls {
--media-button-icon-width: 100%;
--media-button-icon-height: auto;
--media-tooltip-display: none;
pointer-events: none;
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
paint-order: stroke;
stroke: rgba(102, 102, 102, 1);
stroke-width: 0.3px;
text-shadow:
0 0 2px rgb(0 0 0 / 0.25),
0 0 6px rgb(0 0 0 / 0.25);
}
.center-controls media-play-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
--media-control-padding: 0;
width: 40px;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
}
[breakpointsm] .center-controls media-play-button {
width: 90px;
height: 90px;
border-radius: 50%;
transition: background 0.4s;
padding: 24px;
--media-control-background: #000;
--media-control-hover-background: var(--_accent-color);
}
.center-controls media-seek-backward-button,
.center-controls media-seek-forward-button {
--media-control-background: transparent;
--media-control-hover-background: transparent;
padding: 0;
margin: 0 20px;
width: max(33px, min(8%, 40px));
text-shadow:
0 0 2px rgb(0 0 0 / 0.25),
0 0 6px rgb(0 0 0 / 0.25);
}
[breakpointsm]:not([audio]) .center-controls.pre-playback {
display: grid;
align-items: initial;
justify-content: initial;
height: 100%;
overflow: hidden;
}
[breakpointsm]:not([audio]) .center-controls.pre-playback media-play-button {
place-self: var(--_pre-playback-place, center);
grid-area: 1 / 1;
margin: 16px;
}
/* Show and hide controls or pre-playback state */
[breakpointsm]:is([mediahasplayed], :not([mediapaused])):not([audio])
.center-controls.pre-playback
media-play-button {
/* Using \`forwards\` would lead to a laggy UI after the animation got in the end state */
animation: 0.3s linear pre-play-hide;
opacity: 0;
pointer-events: none;
}
.autoplay-unmute {
--media-control-hover-background: transparent;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.25)) drop-shadow(0 0 6px rgb(0 0 0 / 0.25));
}
.autoplay-unmute-btn {
--media-control-height: 16px;
border-radius: 8px;
background: #000;
color: var(--_primary-color);
display: flex;
align-items: center;
padding: 8px 16px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
}
.autoplay-unmute-btn:hover {
background: var(--_accent-color);
}
[breakpointsm] .autoplay-unmute-btn {
--media-control-height: 30px;
padding: 14px 24px;
font-size: 26px;
}
.autoplay-unmute-btn svg {
margin: 0 6px 0 0;
}
[breakpointsm] .autoplay-unmute-btn svg {
margin: 0 10px 0 0;
}
media-controller:not([audio]):not([mediahasplayed]) *:is(media-control-bar, media-time-range) {
display: none;
}
media-error-dialog:not([mediaerrorcode]) {
opacity: 0;
}
media-loading-indicator {
--media-loading-icon-width: 100%;
--media-button-icon-height: auto;
display: var(--media-control-display, var(--media-loading-indicator-display, flex));
pointer-events: none;
position: absolute;
width: min(15%, 150px);
flex-flow: row;
align-items: center;
justify-content: center;
}
/* Intentionally don't target the div for transition but the children
of the div. Prevents messing with media-chrome's autohide feature. */
media-loading-indicator + div * {
transition: opacity 0.15s;
opacity: 1;
}
media-loading-indicator[medialoading]:not([mediapaused]) ~ div > * {
opacity: 0;
transition-delay: 400ms;
}
media-volume-range {
width: min(100%, 100px);
--media-range-padding-left: 10px;
--media-range-padding-right: 10px;
--media-range-thumb-width: 12px;
--media-range-thumb-height: 12px;
--media-range-thumb-background: radial-gradient(
circle,
#000 0%,
#000 25%,
var(--_primary-color) 25%,
var(--_primary-color)
);
--media-control-hover-background: none;
}
media-time-display {
white-space: nowrap;
}
/* Generic style for explicitly disabled controls */
media-control-bar[part~='bottom'] [disabled],
media-control-bar[part~='bottom'] [aria-disabled='true'] {
opacity: 60%;
cursor: not-allowed;
}
media-text-display {
--media-font-size: 16px;
--media-control-padding: 14px;
font-weight: 500;
}
media-play-button.animated *:is(g, path) {
transition: all 0.3s;
}
media-play-button.animated[mediapaused] .pause-icon-pt1 {
opacity: 0;
}
media-play-button.animated[mediapaused] .pause-icon-pt2 {
transform-origin: center center;
transform: scaleY(0);
}
media-play-button.animated[mediapaused] .play-icon {
clip-path: inset(0 0 0 0);
}
media-play-button.animated:not([mediapaused]) .play-icon {
clip-path: inset(0 0 0 100%);
}
media-seek-forward-button,
media-seek-backward-button {
--media-font-weight: 400;
}
.mute-icon {
display: inline-block;
}
.mute-icon :is(path, g) {
transition: opacity 0.5s;
}
.muted {
opacity: 0;
}
media-mute-button[mediavolumelevel='low'] :is(.volume-medium, .volume-high),
media-mute-button[mediavolumelevel='medium'] :is(.volume-high) {
opacity: 0;
}
media-mute-button[mediavolumelevel='off'] .unmuted {
opacity: 0;
}
media-mute-button[mediavolumelevel='off'] .muted {
opacity: 1;
}
/**
* Our defaults for these buttons are to hide them at small sizes
* users can override this with CSS
*/
media-controller:not([breakpointsm]):not([audio]) {
--bottom-play-button: none;
--bottom-seek-backward-button: none;
--bottom-seek-forward-button: none;
--bottom-time-display: none;
--bottom-playback-rate-menu-button: none;
--bottom-pip-button: none;
}
[part='mux-badge'] {
position: absolute;
bottom: 10px;
right: 10px;
z-index: 2;
opacity: 0.6;
transition:
opacity 0.2s ease-in-out,
bottom 0.2s ease-in-out;
}
[part='mux-badge']:hover {
opacity: 1;
}
[part='mux-badge'] a {
font-size: 14px;
font-family: var(--_font-family);
color: var(--_primary-color);
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
}
[part='mux-badge'] .mux-badge-text {
transition: opacity 0.5s ease-in-out;
opacity: 0;
}
[part='mux-badge'] .mux-badge-logo {
width: 40px;
height: auto;
display: inline-block;
}
[part='mux-badge'] .mux-badge-logo svg {
width: 100%;
height: 100%;
fill: white;
}
media-controller:not([userinactive]):not([mediahasplayed]) [part='mux-badge'],
media-controller:not([userinactive]) [part='mux-badge'],
media-controller[mediahasplayed][mediapaused] [part='mux-badge'] {
transition: bottom 0.1s ease-in-out;
}
media-controller[userinactive]:not([mediapaused]) [part='mux-badge'] {
transition: bottom 0.2s ease-in-out 0.62s;
}
media-controller:not([userinactive]) [part='mux-badge'] .mux-badge-text,
media-controller[mediahasplayed][mediapaused] [part='mux-badge'] .mux-badge-text {
opacity: 1;
}
media-controller[userinactive]:not([mediapaused]) [part='mux-badge'] .mux-badge-text {
opacity: 0;
}
media-controller[userinactive]:not([mediapaused]) [part='mux-badge'] {
bottom: 10px;
}
media-controller:not([userinactive]):not([mediahasplayed]) [part='mux-badge'] {
bottom: 10px;
}
media-controller:not([userinactive])[mediahasplayed] [part='mux-badge'],
media-controller[mediahasplayed][mediapaused] [part='mux-badge'] {
bottom: calc(28px + var(--media-control-height, 0px) + var(--media-control-padding, 0px) * 2);
}
</style>
<template partial="TitleDisplay">
<template if="videotitle">
<template if="videotitle != true">
<media-text-display part="top title display" class="title-display">{{videotitle}}</media-text-display>
</template>
</template>
<template if="!videotitle">
<template if="title">
<media-text-display part="top title display" class="title-display">{{title}}</media-text-display>
</template>
</template>
</template>
<template partial="PlayButton">
<media-play-button
part="{{section ?? 'bottom'}} play button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
class="animated"
>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="icon">
<g class="play-icon">
<path
d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
/>
</g>
<g class="pause-icon">
<path
class="pause-icon-pt1"
d="M5.90709 0H2.96889C2.46857 0 2.06299 0.405585 2.06299 0.9059V13.0941C2.06299 13.5944 2.46857 14 2.96889 14H5.90709C6.4074 14 6.81299 13.5944 6.81299 13.0941V0.9059C6.81299 0.405585 6.4074 0 5.90709 0Z"
/>
<path
class="pause-icon-pt2"
d="M15.1571 0H12.2189C11.7186 0 11.313 0.405585 11.313 0.9059V13.0941C11.313 13.5944 11.7186 14 12.2189 14H15.1571C15.6574 14 16.063 13.5944 16.063 13.0941V0.9059C16.063 0.405585 15.6574 0 15.1571 0Z"
/>
</g>
</svg>
</media-play-button>
</template>
<template partial="PrePlayButton">
<media-play-button
part="{{section ?? 'center'}} play button pre-play"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg aria-hidden="true" viewBox="0 0 18 14" slot="icon" style="transform: translate(3px, 0)">
<path
d="M15.5987 6.2911L3.45577 0.110898C2.83667 -0.204202 2.06287 0.189698 2.06287 0.819798V13.1802C2.06287 13.8103 2.83667 14.2042 3.45577 13.8891L15.5987 7.7089C16.2178 7.3938 16.2178 6.6061 15.5987 6.2911Z"
/>
</svg>
</media-play-button>
</template>
<template partial="SeekBackwardButton">
<media-seek-backward-button
seekoffset="{{backwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-backward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
<path
d="M3.65 2.07888L0.0864 6.7279C-0.0288 6.87812 -0.0288 7.12188 0.0864 7.2721L3.65 11.9211C3.7792 12.0896 4 11.9703 4 11.7321V2.26787C4 2.02968 3.7792 1.9104 3.65 2.07888Z"
/>
<text transform="translate(6 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
{{backwardseekoffset}}
</text>
</svg>
</media-seek-backward-button>
</template>
<template partial="SeekForwardButton">
<media-seek-forward-button
seekoffset="{{forwardseekoffset}}"
part="{{section ?? 'bottom'}} seek-forward button"
disabled="{{disabled}}"
aria-disabled="{{disabled}}"
>
<svg viewBox="0 0 22 14" aria-hidden="true" slot="icon">
<g>
<text transform="translate(-1 12)" style="font-size: 14px; font-family: 'ArialMT', 'Arial'">
{{forwardseekoffset}}
</text>
<path
d="M18.35 11.9211L21.9136 7.2721C22.0288 7.12188 22.0288 6.87812 21.9136 6.7279L18.35 2.07888C18.2208 1.91041 18 2.02968 18 2.26787V11.7321C18 11.9703 18.2208 12.0896 18.35 11.9211Z"
/>
</g>
</svg>
</media-seek-forward-button>
</template>
<template partial="MuteButton">
<media-mute-button part="bottom mute button" disabled="{{disabled}}" aria-disabled="{{disabled}}">
<svg viewBox="0 0 18 14" slot="icon" class="mute-icon" aria-hidden="true">
<g class="unmuted">
<path
d="M6.76786 1.21233L3.98606 3.98924H1.19937C0.593146 3.98924 0.101743 4.51375 0.101743 5.1607V6.96412L0 6.99998L0.101743 7.03583V8.83926C0.101743 9.48633 0.593146 10.0108 1.19937 10.0108H3.98606L6.76773 12.7877C7.23561 13.2547 8 12.9007 8 12.2171V1.78301C8 1.09925 7.23574 0.745258 6.76786 1.21233Z"
/>
<path
class="volume-low"
d="M10 3.54781C10.7452 4.55141 11.1393 5.74511 11.1393 6.99991C11.1393 8.25471 10.7453 9.44791 10 10.4515L10.7988 11.0496C11.6734 9.87201 12.1356 8.47161 12.1356 6.99991C12.1356 5.52821 11.6735 4.12731 10.7988 2.94971L10 3.54781Z"
/>
<path
class="volume-medium"
d="M12.3778 2.40086C13.2709 3.76756 13.7428 5.35806 13.7428 7.00026C13.7428 8.64246 13.2709 10.233 12.3778 11.5992L13.2106 12.1484C14.2107 10.6185 14.739 8.83796 14.739 7.00016C14.739 5.16236 14.2107 3.38236 13.2106 1.85156L12.3778 2.40086Z"
/>
<path
class="volume-high"
d="M15.5981 0.75L14.7478 1.2719C15.7937 2.9919 16.3468 4.9723 16.3468 7C16.3468 9.0277 15.7937 11.0082 14.7478 12.7281L15.5981 13.25C16.7398 11.3722 17.343 9.211 17.343 7C17.343 4.789 16.7398 2.6268 15.5981 0.75Z"
/>
</g>
<g class="muted">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M