vlitejs/dist/plugins/volume-bar.js

vLitejs is a fast and lightweight Javascript library for customizing video and audio player in Javascript with a minimalist theme (HTML5, Youtube, Vimeo, Dailymotion)

/*!
 * @license MIT
 * @name vlitejs
 * @version 7.4.0
 * @copyright 2025 Yoriiis
 */
class e{constructor({player:e}){this.providers=["html5","youtube","dailymotion","vimeo"],this.types=["video","audio"],this.player=e,this.onInputVolumeBar=this.onInputVolumeBar.bind(this),this.onVolumeChange=this.onVolumeChange.bind(this)}init(){this.player.options.controls&&this.player.options.volume&&(this.render(),this.volumeBar=this.player.elements.container.querySelector(".v-volumeBar"),this.addEvents())}onReady(){this.player.getVolume().then((e=>{this.updateVolumeBar(this.player.isMuted?0:e)}))}updateVolumeBar(e){this.volumeBar.style.setProperty("--vlite-progressValue",100*e+"%")}render(){if(this.player.elements.container.querySelector(".v-controlBar")){const e=this.player.elements.container.querySelector(".v-volumeButton"),t='<input type="range" class="v-volumeBar v-progressBarStyle" min="0" max="1" step="0.1" value="1" aria-label="Volume" aria-valuemin="0" tabindex="0" />',a=document.createElement("div");a.classList.add("v-volumeArea"),e.parentNode.insertBefore(a,e),a.appendChild(e),a.insertAdjacentHTML("beforeend",t)}}addEvents(){this.volumeBar.addEventListener("input",this.onInputVolumeBar),this.player.on("volumechange",this.onVolumeChange)}onInputVolumeBar(e){const t=e.target,a=Number.parseFloat(t.value);this.updateVolumeBar(a),t.setAttribute("aria-valuenow",`${Math.round(a)}`),this.player.setVolume(a)}onVolumeChange(e){const{volume:t}=(null==e?void 0:e.detail)||{};t?(this.volumeBar.value=`${t}`,this.updateVolumeBar(t)):this.player.isMuted?(this.volumeBar.value="0",this.updateVolumeBar(0)):this.player.getVolume().then((e=>{this.volumeBar.value=`${e}`,this.updateVolumeBar(e)}))}destroy(){this.volumeBar.removeEventListener("input",this.onInputVolumeBar)}}export{e as default};