1"use strict";(self.webpackChunkaem_maven_archetype=self.webpackChunkaem_maven_archetype||[]).push([["src_main_webpack_components_AudioPlayer_AudioPlayer_lit_ts"],{4863:function(e,t,r){r.r(t),r.d(t,{AudioPlayer:function(){return c}});var i=r(6684),n=r(6505),a=r(4081),o=r(4290);const s=i.AH` 2 3.audio-player__container { 4 display: flex; 5 padding: 12px var(--spacing-space-100-16, 16px); 6 align-items: center; 7 gap: 8px; 8 align-self: stretch; 9 border-radius: var(--radius-radius-100-4, 4px); 10 border: 1px solid var(--color-decorative-100, #b6c2de); 11 background: var(--decorative-40, #eceff8); 12 box-sizing: border-box; 13 height: 56px; 14} 15 16.audio-player__playbutton { 17 height: 24px; 18 width: 24px; 19 display: flex; 20 flex-shrink: 0; 21 padding: 0; 22 border: none; 23 border-radius: 50%; 24 cursor: pointer; 25 26 svg { 27 width: 100%; 28 height: 100%; 29 30 path { 31 fill: var(--color-primary-100, #1a3691); 32 } 33 } 34 35 &:hover { 36 path { 37 fill: var(--color-primary-125, #132768); 38 } 39 } 40} 41 42.audio-player__playbutton:disabled{ 43 cursor: none; 44 45 svg { 46 47 path{ 48 fill: var(--color-neutral-100, #757d8b) 49 } 50 } 51 52} 53 54.audio-player__time-display { 55 flex-shrink: 0; 56 color: var(--color-primary-100, #1a3691); 57} 58 59.audio-player__timeline { 60 --seek-before-width: 0%; 61 --volume-before-width: 100%; 62 --seek-height: 15px; 63 --seek-track-background-color: var(--color-decorative-75); 64 position: relative; 65 max-width: 500px; 66 background: #fff; 67 flex-grow: 1; 68} 69 70.audio-player__error-message{ 71 margin:0; 72 background: var(--decorative-40, #eceff8); 73 color: var(--color-error-100, #cc1535); 74 font-weight: 500; 75 text-align: center; 76} 77 78.audio-player__volume { 79 --seek-before-width: 100%; 80 --volume-before-width: 100%; 81 --seek-height: 9px; 82 --seek-track-background-color: #fff; 83 height: 100%; 84 display: flex; 85 align-items: center; 86 border-radius: 4px; 87 padding: 0 8px; 88 89 input[type='range'] { 90 transform: scaleX(0); 91 transform-origin: right; 92 width: 0; 93 opacity: 0; 94 transition: opacity 1s ease, transform 0.5s ease, width 0.5s ease; 95 } 96 97 button { 98 border: none; 99 padding: 5px 0 0 0; 100 margin: 0; 101 background: transparent; 102 cursor: pointer; 103 104 path { 105 fill: var(--color-primary-100); 106 stroke: var(--color-primary-100); 107 } 108 109 &:hover { 110 path { 111 fill: var(--color-primary-125); 112 stroke: var(--color-primary-125); 113 } 114 } 115 } 116} 117 118.audio-player__speed-settings button { 119 color: var(--color-primary-100, #1a3691); 120 font-family: 'SI Sans'; 121 font-size: 1rem; 122 font-weight: 600; 123 border: none; 124 background: transparent; 125 cursor: pointer; 126 127 &:hover { 128 color: var(--color-primary-125, #132768); 129 } 130} 131 132/* ###### Mobile Styles ######### */ 133 134@media only screen and (min-width: 600px) { 135 .audio-player__container { 136 gap: var(--spacing-space-100-16, 16px); 137 138 .audio-player__volume:hover { 139 background-color: var(--color-decorative-75); 140 gap: 1rem; 141 142 input { 143 opacity: 1; 144 transform: scaleX(1); 145 width: 200px; 146 } 147 } 148 } 149} 150 151/* ###### Custom Input Styles ######### */ 152 153input[type='range'] { 154 position: relative; 155 -webkit-appearance: none; 156 width: 100%; 157 margin: 0; 158 padding: 0; 159 height: var(--seek-height); 160 float: left; 161 border-radius: 2px; 162} 163input[type='range']::-webkit-slider-runnable-track { 164 width: 100%; 165 height: var(--seek-height); 166 cursor: pointer; 167 border-radius: 2px; 168 background: var(--seek-track-background-color); 169} 170input[type='range']::before { 171 position: absolute; 172 content: ''; 173 left: 0; 174 width: var(--seek-before-width); 175 height: var(--seek-height); 176 border-radius: 2px; 177 background: var(--primary-signal-iduna-100, #1a3691); 178 cursor: pointer; 179} 180input[type='range']::-webkit-slider-thumb { 181 position: relative; 182 -webkit-appearance: none; 183 box-sizing: content-box; 184 border: none; 185 height: 0px; 186 width: 0px; 187 border-radius: 50%; 188 background-color: #fff; 189 cursor: pointer; 190 margin: -7px 0 0 0; 191} 192input[type='range']:active::-webkit-slider-thumb { 193 transform: scale(1.2); 194 background: transparent; 195} 196input[type='range']::-moz-range-track { 197 width: 100%; 198 height: var(--seek-height); 199 cursor: pointer; 200 background: var(--seek-track-background-color); 201} 202input[type='range']::-moz-range-progress { 203 background-color: transparent; 204} 205input[type='range']::-moz-focus-outer { 206 border: 0; 207} 208input[type='range']::-moz-range-thumb { 209 box-sizing: content-box; 210 border: 1px solid transparent; 211 height: 15px; 212 width: 15px; 213 border-radius: 50%; 214 background-color: #fff; 215 cursor: pointer; 216} 217input[type='range']:active::-moz-range-thumb { 218 transform: scale(1.2); 219 background: transparent; 220} 221input[type='range']::-ms-track { 222 width: 100%; 223 height: var(--seek-height); 224 cursor: pointer; 225 background: transparent; 226 border: solid transparent; 227 color: transparent; 228} 229input[type='range']::-ms-fill-lower { 230 background-color: transparent; 231} 232input[type='range']::-ms-fill-upper { 233 background: var(--seek-track-background-color); 234} 235input[type='range']::-ms-thumb { 236 box-sizing: content-box; 237 border: 1px solid #007db5; 238 height: 15px; 239 width: 15px; 240 border-radius: 50%; 241 background-color: #fff; 242 cursor: pointer; 243} 244input[type='range']:active::-ms-thumb { 245 transform: scale(1.2); 246 background: transparent; 247} 248 249 250`;var d,p=r(5694),l=r(6217),u=function(e,t,r,i){var n,a=arguments.length,o=a<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,r,i
250);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(o=(a<3?n(o):a>3?n(t,r,o):n(t,r))||o);return a>3&&o&&Object.defineProperty(t,r,o),o};let c=d=class extends i.WF{constructor(){super(...arguments),this.currentTimeInSeconds=0,this.currentTimeDisplayText="0:00",this.currentTimeInPercent="0",this.componentState="OK",this.isPlaying=!1,this.currentSpeedLevelIndex=0,this.isMuted=!1,this.handlePlaybackSync=e=>{this.componentId!==e.detail.id&&this.isPlaying&&this.togglePlayback()},this.setTimelineString=e=>{if(!Number.isFinite(e)||e<0)return"0:00";const t=Math.floor(e%3600/60),r=Math.floor(e%60);return`${String(t).padStart(2,"0")}:${String(r).padStart(2,"0")}`}}firstUpdated(){this.src||(this.componentState="ERROR",this.errorMessage="Keine Audio Datei gefunden"),this.autoplay&&(this.isPlaying=!0,this.dispatchCustomPlaybackEvent())}connectedCallback(){super.connectedCallback(),this.componentId=(0,l.kX)(),document.addEventListener(d.playBackEventName,this.handlePlaybackSync)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(d.playBackEventName,this.handlePlaybackSync)}render(){return i.qy` 251 252 <audio 253 id="audioPlayer" 254 ?autoplay=${this.autoplay} 255 preload="metadata" 256 @loadedmetadata="${this.getDuration}" 257 @timeupdate="${this.getCurrentTime}" 258 @ended="${this.endPlayBack}" 259 @loadstart="${()=>this.setLoadingState()}" 260 @canplay="${()=>this.componentState="OK"}" 261 @waiting="${()=>this.setLoadingState()}" 262 @error="${this.setUndefinedError}"> 263 <source src="${this.src}" type="${this.type}"> 264 </audio> 265 <div class="audio-player__container"> 266 <button id="playButton" aria-label=${this.isPlaying?"Stoppe Audio":"Starte Audio"} class="audio-player__playbutton" @click="${this.togglePlayback}" .disabled="${"ERROR"===this.componentState}"> 267 ${"LOADING"===this.componentState?this.renderLoadingSpinner():this.renderPlayPauseButtonIcon()} 268 </button> 269 <div class="audio-player__time-display"> 270 <span id="current-time"> ${this.currentTimeDisplayText}</span> ${this.durationDisplayText?i.qy`<span id="duration"> / ${this.durationDisplayText}</span>`:i.s6} 271 </div> 272 <div class="audio-player__timeline"> 273 ${"ERROR"===this.componentState?i.qy`<p class="audio-player__error-message"> ${this.errorMessage} </p>`:i.qy` <input 274 id="timeSlider" 275 type="range" 276 .value=${this.currentTimeInSeconds.toString()} 277 min="0" 278 max=${Math.floor(this.durationInSeconds)} 279 step="1" 280 aria-label='${this.setTimelineString(this.currentTimeInSeconds)} von ${this.setTimelineString(this.durationInSeconds)} Minuten' 281 @input="${this.handleTimeRangeInput}">`} 282 </div> 283 <div class="audio-player__volume"> 284 <input id="volumeSlider" type="range" @input="${this.handleVolumeRangeInput}" > 285 <button aria-label=${this.isMuted?"Ton aktivieren":"Ton deaktivieren"} @click="${this.toggleMute}"> 286 ${this.isMuted?this.renderVolumeMuteSvg():this.renderVolumeSvg()} 287 </button> 288 </div> 289 <div class="audio-player__speed-settings"> 290 <button id="speedButton" aria-label='Wiedergabegeschwindigkeit ändern, aktuell 1x' @click="${this.handleSpeedChange}" > 291 1x 292 </button> 293 </div> 294 </div> 295 `}togglePlayback(){this.audioPlayer.paused?(this.audioPlayer.play(),this.isPlaying=!0,this.dispatchCustomPlaybackEvent()):(this.audioPlayer.pause(),this.isPlaying=!1)}toggleMute(){this.isMuted=!this.isMuted,this.audioPlayer.muted=this.isMuted}getDuration(){this.durationInSeconds=this.audioPlayer.duration,this.durationDisplayText=(0,l.vc)(this.durationInSeconds)}getCurrentTime(){this.currentTimeInSeconds=this.audioPlayer.currentTime,this.currentTimeDisplayText=(0,l.vc)(this.currentTimeInSeconds),this.currentTimeInPercent=(this.currentTimeInSeconds/this.durationInSeconds*100).toFixed(0),this.updateSliderTrack(this.timeRangeContainer,Number(this.timeRangeInput.value),Number(this.timeRangeInput.max))}setCurrentTime(){this.audioPlayer.currentTime=parseInt(this.timeRangeInput.value),this.currentTimeInSeconds=parseInt(this.timeRangeInput.value),this.currentTimeDisplayText=(0,l.vc)(this.currentTimeInSeconds)}endPlayBack(){this.timeRangeContainer.style.setProperty("--seek-before-width","100%"),this.isPlaying=!1,this.currentTimeDisplayText=this.durationDisplayText}handleTimeRangeInput(){this.setCurrentTime(),this.updateSliderTrack(this.timeRangeContainer,Number(this.timeRangeInput.value),Number(this.timeRangeInput.max))}handleVolumeRangeInput(){const e=Number(this.volumeRangeInput.value)/100;this.audioPlayer.volume=e,this.updateSliderTrack(this.volumeContainer,Number(this.volumeRangeInput.value),100)}handleSpeedChange(){this.currentSpeedLevelIndex=(this.currentSpeedLevelIndex+1)%d.speedLevels.length;const e=d.speedLevels[this.currentSpeedLevelIndex];this.audioPlayer.playbackRate=e,this.speedButton.textContent=`${e}x`,this.speedButton.ariaLabel=`Wiedergabegeschwindigkeit ändern, aktuell ${e}x`}dispatchCustomPlaybackEvent(){const e=new CustomEvent(d.playBackEventName,{composed:!0,bubbles:!0,detail:{id:this.componentId}});this.dispatchEvent(e)}renderPlayPauseButtonIcon(){return i.qy` 296 ${this.isPlaying?this.renderPauseSvg():this.renderPlaySvg()} 297 `}renderLoadingSpinner(){return i.qy` 298 <si-loader si-size="sm"> </si-loader> 299 `}renderPlaySvg(){return i.qy` 300 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 301 <path d="M12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1ZM9.35645 8C9.24911 8.00252 9.14389 8.03275 9.05176 8.08789C8.95981 8.14295 8.88397 8.22126 8.83105 8.31445C8.77811 8.40786 8.74999 8.51372 8.75 8.62109V15.8623C8.75003 15.9695 8.77822 16.0747 8.83105 16.168C8.88391 16.2612 8.95984 16.3394 9.05176 16.3945C9.14389 16.4497 9.24911 16.4809 9.35645 16.4834C9.46367 16.4859 9.56952 16.4598 9.664
30106 16.4092L16.4229 12.7891C16.5217 12.736 16.6045 12.6568 16.6621 12.5605C16.7198 12.4642 16.75 12.3535 16.75 12.2412C16.7499 12.1291 16.7196 12.0191 16.6621 11.9229C16.6045 11.8266 16.5217 11.7474 16.4229 11.6943L9.66406 8.07422C9.5695 8.02354 9.46371 7.99748 9.35645 8Z" fill="none"/> 302 </svg> 303 `}renderPauseSvg(){return i.qy` 304 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 305 <path d="M12 1.5C17.799 1.5 22.5 6.20101 22.5 12C22.5 17.799 17.799 22.5 12 22.5C6.20101 22.5 1.5 17.799 1.5 12C1.5 6.20101 6.20101 1.5 12 1.5ZM9.5293 7.58301C9.11521 7.58301 8.77949 7.91896 8.7793 8.33301V15.666C8.7793 16.0802 9.11508 16.416 9.5293 16.416C9.94329 16.4158 10.2793 16.0801 10.2793 15.666V8.33301C10.2791 7.91913 9.94316 7.58327 9.5293 7.58301ZM14.4717 7.58301C14.0577 7.58316 13.7219 7.91906 13.7217 8.33301V15.666C13.7217 16.0801 14.0576 16.4159 14.4717 16.416C14.8857 16.4158 15.2217 16.0801 15.2217 15.666V8.33301C15.2215 7.91913 14.8855 7.58327 14.4717 7.58301Z" fill="none"/> 306 </svg> 307 `}renderVolumeMuteSvg(){return i.qy` 308 <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 309 <path d="M13.3614 4.00609C13.6389 3.98101 13.9178 4.03371 14.1671 4.15827C14.4162 4.2829 14.6258 4.47447 14.7722 4.7115C14.9186 4.94853 14.9961 5.22166 14.9961 5.50027V17.5003C14.9961 17.7788 14.9185 18.0519 14.772 18.2889C14.6256 18.5258 14.416 18.7173 14.1669 18.8419C13.9177 18.9665 13.6388 19.0192 13.3614 18.9942C13.0839 18.9692 12.8189 18.8674 12.5961 18.7003L6.83125 15.0318C6.71587 14.9583 6.646 14.831 6.646 14.6943V8.30625C6.646 8.16949 6.71587 8.04221 6.83125 7.96879L12.5961 4.30027C12.8189 4.13304 13.0839 4.03117 13.3614 4.00609Z" fill="none"/> 310 <path d="M2.99609 8.50024H4.84609C5.06701 8.50024 5.24609 8.67933 5.24609 8.90024V14.1002C5.24609 14.3212 5.06701 14.5002 4.84609 14.5002H2.99609C2.59827 14.5002 2.21674 14.3422 1.93543 14.0609C1.65413 13.7796 1.49609 13.3981 1.49609 13.0002V10.0002C1.49609 9.60242 1.65413 9.22089 1.93543 8.93958C2.21674 8.65828 2.59827 8.50024 2.99609 8.50024Z" fill="none"/> 311 <path d="M21.7158 9.46967C22.0087 9.17678 22.4834 9.17678 22.7763 9.46967C23.0692 9.76256 23.0692 10.2373 22.7763 10.5302L21.3066 11.9999L22.7763 13.4697L22.8281 13.5263C23.0684 13.8209 23.0509 14.2556 22.7763 14.5302C22.5017 14.8048 22.067 14.8223 21.7724 14.582L21.7158 14.5302L20.246 13.0605L18.7763 14.5302C18.4834 14.8231 18.0087 14.8231 17.7158 14.5302C17.4229 14.2373 17.4229 13.7626 17.7158 13.4697L19.1855 11.9999L17.7158 10.5302C17.4229 10.2373 17.4229 9.76256 17.7158 9.46967C18.0087 9.17678 18.4834 9.17678 18.7763 9.46967L20.246 10.9394L21.7158 9.46967Z" fill="none"/> 312 </svg> 313 `}renderVolumeSvg(){return i.qy` 314 <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none"> 315 <path d="M13.6821 4.00609C13.9595 3.98101 14.2385 4.0337 14.4877 4.15827C14.7369 4.2829 14.9464 4.47446 15.0929 4.71149C15.2393 4.94852 15.3168 5.22164 15.3167 5.50024V17.5C15.3167 17.7786 15.2391 18.0517 15.0927 18.2886C14.9462 18.5256 14.7367 18.7171 14.4875 18.8416C14.2384 18.9662 13.9595 19.019 13.682 18.9939C13.4046 18.9689 13.1396 18.8671 12.9168 18.7L7.15205 15.0316C7.03667 14.9581 6.9668 14.8309 6.9668 14.6941V8.30618C6.9668 8.16942 7.03667 8.04214 7.15205 7.96871L12.9168 4.30026C13.1396 4.13304 13.4046 4.03117 13.6821 4.00609Z" fill="none"/> 316 <path d="M3.31687 8.50012H5.16683C5.38774 8.50012 5.56683 8.67921 5.56683 8.90012V14.1C5.56683 14.3209 5.38774 14.5 5.16683 14.5H3.31687C2.91905 14.5 2.53753 14.342 2.25623 14.0607C1.97493 13.7794 1.81689 13.3979 1.81689 13V10.0001C1.81689 9.60228 1.97493 9.22075 2.25623 8.93945C2.53753 8.65815 2.91905 8.50012 3.31687 8.50012Z" fill="none"/> 317 <path d="M21.8154 14.9999C22.4685 13.9544 22.8154 12.7401 22.8154 11.4999C22.8154 10.2598 22.4685 9.04547 21.8154 8" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 318 <path d="M19.0166 13.9998C19.6635 13.2931 20.0166 12.4103 20.0166 11.4998C20.0166 10.5893 19.6635 9.70657 19.0166 8.99988" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 319 </svg> 320 `}updateSliderTrack(e,t,r){e.style.setProperty("--seek-before-width",t/r*100+"%")}setLoadingState(){this.src&&(this.componentState="LOADING")}setUndefinedError(){this.componentState="ERROR",this.errorMessage="Ein unerwarterer Fehler ist aufgetreten",console.error("AudioPlayer - unexpected Error: ",this.audioPlayer.error)}};c.styles=s,c.speedLevels=[1,1.25,1.5,1.75,2],u([(0,p.M)({type:String})],c.prototype,"src",void 0),u([(0,p.M)({type:String})],c.prototype,"type",void 0),u([(0,p.M)({type:Boolean})],c.prototype,"autoplay",void 0),u([(0,a.P)("#audioPlayer")],c.prototype,"audioPlayer",void 0),u([(0,a.P)("#timeSlider")],c.prototype,"timeRangeInput",void 0),u([(0,a.P)(".audio-player__timeline")],c.prototype,"timeRangeContainer",void 0),u([(0,a.P)("#volumeSlider")],c.prototype,"volumeRangeInput",void 0),u([(0,a.P)(".audio-player__volume")],c.prototype,"volumeContainer",void 0),u([(0,a.P)("#speedButton")],c.prototype,"speedButton",void 0),u([(0,o.w)()],c.prototype,"currentTimeInSeconds",void 0),u([(0,o.w)()],c.prototype,"currentTimeDisplayText",void 0),u([(0,o.w)()],c.prototype,"durationInSeconds",void 0),u([(0,o.w)()],c.prototype,"durationDisplayText",void 0),u([(0,o.w)()],c.prototype,"currentTimeInPercent",void 0),u([(0,o.w)()],c.prototype,"componentState",void 0),u([(0,o.w)()],c.prototype,"errorMessage",void 0),u([(0,o.w)()],c.prototype,"isPlaying",void 0),u([(0,o.w)()],c.prototype,"currentSpeedLevelIndex",void 0),u([(0,o.w)()],c.prototype,"isMuted",void 0),u([(0,o.w)()],c.prototype,"componentId",void 0),c=d=u([(0,n.E)("si-audio-player")],c)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.