vlitejs/dist/plugins/subtitle.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
 */
var t='<svg viewBox="0 0 18 14" xmlns="http://www.w3.org/2000/svg"><path d="M5.6 10.6 1.4 6.4 0 7.8l5.6 5.6 12-12L16.2 0z"/></svg>';class e{constructor({player:t}){this.providers=["html5"],this.types=["video"],this.player=t,this.tracks=Array.from(this.player.media.textTracks),this.subtitlesListCssTransitionDuration=0,this.onClickOnSubtitleButton=this.onClickOnSubtitleButton.bind(this),this.onClickOnSubtitlesList=this.onClickOnSubtitlesList.bind(this)}init(){this.tracks.length&&this.player.options.controls&&(this.activeTrack=this.getActiveTrack(),this.hideTracks(),this.render(),this.captions=this.player.elements.container.querySelector(".v-captions"),this.subtitleButton=this.player.elements.container.querySelector(".v-subtitleButton"),this.subtitlesList=this.player.elements.container.querySelector(".v-subtitlesList"),this.subtitlesListCssTransitionDuration=1e3*Number.parseFloat(window.getComputedStyle(this.subtitlesList).transitionDuration),this.addEvents())}onReady(){this.enableTrack()}getActiveTrack(){return this.tracks.find((t=>"showing"===t.mode))||this.tracks[0]}hideTracks(){this.tracks.forEach((t=>{t.mode="hidden"}))}render(){this.player.elements.container.insertAdjacentHTML("beforeend",'<div class="v-captions"></div>');const t=this.player.elements.container.querySelector(".v-controlBar"),e=this.player.elements.container.querySelector(".v-fullscreenButton");t&&(e?e.insertAdjacentHTML("beforebegin",this.getTemplate()):t.insertAdjacentHTML("beforeend",this.getTemplate()))}enableTrack(){if(this.activeTrack){const t=this.subtitlesList.querySelector(`[data-language="${this.activeTrack.language}"]`);t&&t.dispatchEvent(new window.CustomEvent("click",{bubbles:!0,detail:{triggerPlayerFocus:!1}}))}}getTemplate(){return`\n\t\t\t\t<div class="v-subtitle">\n\t\t\t\t\t<button class="v-subtitleButton v-controlButton v-controlPressed">\n\t\t\t\t\t\t<svg class="v-iconUnpressed" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg"><path d="M18 0H2C.9 0 0 .9 0 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2ZM2 8h4v2H2V8Zm10 6H2v-2h10v2Zm6 0h-4v-2h4v2Zm0-4H8V8h10v2Z"/></svg><svg class="v-iconPressed" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><path d="M18.96 1.55H5.79l8 8h5.17v2h-3.17l4.93 4.93c.15-.28.24-.59.24-.93v-12c0-1.1-.9-2-2-2ZM0 1.42l1.2 1.2c-.15.28-.24.59-.24.93v12c0 1.1.9 2 2 2h13.17l2.96 2.96 1.41-1.41L1.41 0 0 1.42Zm6.96 8.13v2h-4v-2h4Zm6 4.83v1.17h-10v-2h9.17l.83.83Z"/></svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t<div class="v-subtitlesList">\n\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<button class="v-trackButton v-active" data-language="off">${t}Off</button>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t${this.tracks.map((e=>`<li>\n\t\t\t\t\t\t\t\t\t\t\t<button class="v-trackButton" data-language="${e.language}">${t}${e.label}</button>\n\t\t\t\t\t\t\t\t\t\t</li>`)).join(" ")}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t`}addEvents(){this.subtitleButton.addEventListener("click",this.onClickOnSubtitleButton),this.subtitlesList.addEventListener("click",this.onClickOnSubtitlesList)}onClickOnSubtitleButton(t){t.preventDefault(),this.subtitlesList.classList.toggle("v-active")}onClickOnSubtitlesList(t){var e;t.preventDefault();const s=t.target,i=s.getAttribute("data-language"),n=function({target:t,selectorString:e,nodeName:s}){return(s=[].concat(s)).some((s=>t.nodeName.toLowerCase()===s&&t.matches(e)))}({target:s,selectorString:".v-trackButton:not(.v-active)",nodeName:["button"]}),a=this.subtitlesList.querySelector(".v-active"),l=null===(e=t.detail.triggerPlayerFocus)||void 0===e||e;i&&n&&(null==a||a.classList.remove("v-active"),s.classList.add("v-active"),"off"===i?(this.subtitleButton.classList.add("v-controlPressed"),this.captions.classList.remove("v-active"),this.captions.innerHTML="",this.activeTrack&&this.updateCues({isDisabled:!0})):(this.subtitleButton.classList.remove("v-controlPressed"),this.activeTrack=this.getTrackByLanguage(i),this.activeTrack&&this.updateCues()),l&&this.player.elements.container.focus()),this.subtitlesList.classList.remove("v-active")}getTrackByLanguage(t){return this.tracks.find((e=>e.language===t))||null}updateCues({isDisabled:t=!1}={}){var e,s;if(null===(s=null===(e=this.activeTrack)||void 0===e?void 0:e.cues)||void 0===s?void 0:s.length){const e=Array.from(this.activeTrack.cues),s=this.activeTrack.activeCues,i=this,n=function(){i.addCue(this)},a=function(){i.hideCue(this)};e.forEach((e=>{e.onenter=t?null:n,e.onexit=t?null:a})),!t&&s&&s.length&&this.addCue(s[0]),this.player.dispatchEvent(t?"trackdisabled":"trackenabled")}}addCue(t){this.captions.innerHTML=t.text,this.captions.classList.add("v-active")}hideCue(){this.captions.classList.remove("v-active")}destroy(){this.subtitleButton.removeEventListener("click",this.onClickOnSubtitleButton),this.subtitlesList.removeEventListener("click",this.onClickOnSubtitlesList)}}export{e as default};