node-videojs-vjstranscribe/dist/videojs-vjstranscribe.js

Creates searchable transcripts from text tracks

/*!
* videojs-vjstranscribe
* @author 7Ds7
* @version 1.0.3
* @url https://github.com/7Ds7/videojs-vjstranscribe.git
* Copyright 2024 GPLv3 licensed.
*/
(()=>{var c=class{selectorId;activeTrack;plugin;constructor(t,e,s){this.selectorId=t,this.activeTrack=e,this.plugin=s;let i=document.createElement("select");i.setAttribute("id",this.selectorId);for(let r=0;r<this.plugin.getTextTracks().length;r++){let n=document.createElement("option");n.value=this.plugin.getTextTracks()[r].language,this.activeTrack===this.plugin.getTextTracks()[r]&&n.setAttribute("selected","selected"),n.textContent=this.plugin.getTextTracks()[r].label||this.plugin.getTextTracks()[r].language,i.appendChild(n)}if(i.addEventListener("change",this.changeSelector.bind(this)),!document.getElementById(this.selectorId)){let r=document.createElement("div");r.setAttribute("id",this.selectorId),this.plugin.player.el().insertAdjacentElement("afterend",r)}document.getElementById(this.selectorId).appendChild(i)}changeSelector(t){for(let e=0;e<this.plugin.getTextTracks().length;e++){let s=this.plugin.getTextTracks()[e];document.getElementById(this.selectorId).querySelector(`option[value=${s.language}]`).removeAttribute("selected"),s.mode="disabled",(t.target&&s.language===t.target.value||t.language&&s.language===t.language)&&(document.getElementById(this.selectorId).querySelector(`option[value=${s.language}]`).setAttribute("selected","selected"),s.mode="showing")}}};var d=class{downloadId;activeTrack;plugin;constructor(t,e,s){this.downloadId=t,this.activeTrack=e,this.plugin=s,this.changeDownload(this.activeTrack)}changeDownload(t){this.activeTrack=t;let e;if(!document.getElementById(this.downloadId)){let s=document.createElement("div");s.setAttribute("id",this.downloadId),this.plugin.player.el().insertAdjacentElement("afterend",s)}if(e=document.getElementById(this.downloadId),e.innerHTML="",this.plugin.options.download){let s=document.createElement("a");s.setAttribute("href",this.activeTrack.src);let i=this.activeTrack.src.split(/[#?]/)[0].split(".").pop().trim();s.setAttribute("download",`${this.activeTrack.label}.${i}`),s.classList.add("vjs-transcribe-btn"),s.classList.add("vjs-transcribe-download"),s.setAttribute("title","Download");let r=document.createElement("span");r.classList.add("vjs-sr-only"),r.textContent="Download transcript",e.appendChild(s)}if(this.plugin.options.copy){let s=document.createElement("button");s.classList.add("vjs-transcribe-btn"),s.classList.add("vjs-transcribe-copy"),s.setAttribute("title","Copy");let i=document.createElement("span");i.classList.add("vjs-sr-only"),i.textContent="Copy",s.appendChild(i),s.addEventListener("click",r=>{let n="";document.querySelectorAll(".vjs-transcribe-cueline span:last-child").forEach(a=>{n+=a.textContent,n+=" "}),navigator.clipboard.writeText(n).then(a=>{console.log("copied to clipboard",a)},a=>{console.log("failed to copy to clipboard",a)})}),e.appendChild(s)}}};var l=class{widgetId;activeTrack;plugin;$body;constructor(t,e,s){if(this.widgetId=t,this.activeTrack=e,this.plugin=s,!document.getElementById(this.widgetId)){let i=document.createElement("div");i.setAttribute("id",this.widgetId),this.plugin.player.el().insertAdjacentElement("afterend",i)}this.createWidgetBody(this.activeTrack)}createWidgetBody(t){this.activeTrack=t,this.$body=document.createElement("div"),this.$body.classList.add("vjs-transcribe-body"),this.plugin.options.mode==="prose"&&this.$body.classList.add("vjs-transcribe-body-prose");let e,s,i=document.createDocumentFragment();for(s=0;s<this.activeTrack.cues.length;s++)e=this.createLine(this.activeTrack.cues[s]),i.appendChild(e);this.$body.innerHTML="",this.$body.appendChild(i),this.$body.setAttribute("lang",this.activeTrack.language),document.getElementById(this.widgetId).innerHTML="",document.getElementById(this.widgetId).appendChild(this.$body)}createLine(t){let e=document.createElement("div"),s=document.createElement("span"),i=document.createElement("span");return e.setAttribute("data-begin",t.startTime),e.classList.add("vjs-transcribe-cueline"),s.textContent=new Date(1e3*t.startTime).toISOString().substr(11,8).replace(/^(00:0)+|^(00:)+|(0)/,""),s.classList.add("vjs-transcribe-cuetimestamp"),i.innerHTML=this.plugin.parseTags(t.text),e.appendChild(s),e.appendChild(i),e.addEventListener("click",this.clickTimestamp.bind(this)),e}clickTimestamp(t){let e=t.target.getAttribute("data-begin")||t.target.parentElement.getAttribute("data-begin");e!=null&&this.plugin.player.currentTime(parseInt(e))}setCue(t){let e,s,i,r,n=this.$body.children,a=!1;for(e=0;e<n.length;e++)s=n[e],i=s.getAttribute("data-begin"),e<n.length-1?r=n[e+1].getAttribute("data-begin"):r=this.plugin.player.duration()||1/0,t>i&&t<r?s.classList.contains("cue-active")||(s.classList.add("cue-active"),a=!0):s.classList.remove("cue-active");let o=this.$body.querySelector(".cue-active");if(o&&a){let u={root:this.$body,rootMargin:"0px",threshold:0},g=new IntersectionObserver(m=>{m[0].intersectionRatio<1&&this.$body.scrollTo({top:o.offsetTop-this.$body.offsetTop-this.$body.offsetHeight+o.offsetHeight,left:0,behavior:"smooth"}),g.unobserve(o)},u);g.observe(o)}}};var h=class{searchId;activeTrack;plugin;$search;$searchInput;$resultsWrapper;$$cues;constructor(t,e,s){if(this.searchId=t,this.activeTrack=e,this.plugin=s,!document.getElementById(this.searchId)){let i=document.createElement("div");i.setAttribute("id",this.searchId),this.plugin.player.el().insertAdjacentElement("afterend",i)}this.$search=document.getElementById(this.searchId),this.$search.classList.add("vjs-transcribe-search"),this.$searchInput=document.createElement("input"),this.$searchInput.setAttribute("role","searchbox"),this.$searchInput.setAttribute("type","search"),this.$searchInput.setAttribute("placeholder","Search"),this.$searchInput.addEventListener("keyup",this.searchStart.bind(this)),this.$searchInput.addEventListener("focus",this.searchStart.bind(this)),this.$search.appendChild(this.$searchInput),this.$resultsWrapper=document.createElement("div"),this.$resultsWrapper.classList.add("vjs-transcribe-search-results"),this.$resultsWrapper.classList.add("vjs-transcribe-hide"),this.$search.appendChild(this.$resultsWrapper),window.addEventListener("click",this.closeHandler,!1)}closeHandler=this.closeSearch.bind(this);removeEv(){window.removeEventListener("click",this.closeHandler,!1)}closeSearch(t){!this.$search.querySelector(".vjs-transcribe-search-results").classList.contains("vjs-transcribe-hide")&&t.target.closest(`#${this.searchId}`)===null&&(this.$resultsWrapper.classList.add("vjs-transcribe-hide"),this.$resultsWrapper.innerHTML="")}searchStart(t){t.target.value&&t.target.value.length>0&&(this.$$cues=this.queryCueLines(`#${this.plugin.options.widgetId} .vjs-transcribe-cueline`,t.target.value),this.$resultsWrapper.innerHTML="",this.generateResults(t.target.value),this.$resultsWrapper.classList.remove("vjs-transcribe-hide"))}generateResults(t){if(this.$$cues.length==0){let e=document.createElement("div");return e.classList.add("vjs-transcribe-search-result"),e.textContent="No results found",this.$resultsWrapper.appendChild(e),!1}this.$$cues.forEach((e,s)=>{let i=document.createElement("span");i=this.plugin.parseTags(e.querySelector("span:last-child").textContent);let r=(o,u)=>o.replace(RegExp(u,"gi"),`<b>${u}</b>`),n=document.createElement("span");n.innerHTML=r(i,t);let a=document.createElement("button");a.classList.add("vjs-transcribe-search-result"),a.dataset.index=s,a.appendChild(n),a.addEventListener("click",this.selectResult.bind(this)),this.$resultsWrapper.appendChild(a)})}selectResult(t){let e=t.currentTarget;this.$$cues[e.dataset.index].dispatchEvent(new Event("click")),this.$resultsWrapper.classList.add("vjs-transcribe-hide")}queryCueLines(t,e){var s=document.querySelectorAll(t);return Array.prototype.filter.call(s,function(i){return RegExp(e,"i").test(i.textContent)})}};typeof videojs>"u"&&console.warn("vjstranscribe videojs not detected");var b=videojs.getPlugin("plugin"),v=class extends b{defaultOptions={customClass:"vjs-transcribe",widgetId:"vjs-transcribe",selector:!0,selectorId:"vjs-transcribe-selector",download:!0,copy:!0,downloadId:"vjs-transcribe-download",search:!0,searchId:"vjs-transcribe-search",pip:!0,pipId:"vjs-transcribe-pip",mode:"line",disablecc:!0};activeTrack;selectorComponent;widgetComponent;downloadComponent;searchComponent;$initialParent;activated=!1;totalTracks=0;constructor(t,e){super(t,e),this.options={...this.defaultOptions,...e},t.addClass(this.options.customClass),this.on(t,"ready",function(){if(this.getActiveTrack()){let s=videojs.getComponent("Button"),i=new s(t,{className:"vjs-transcribe-btn",controlText:"Transcript",clickHandler:r=>{this.activated?this.destroyTranscript():this.createTranscript(t)}});t.getChild("ControlBar").el().insertBefore(i.el(),t.getChild("ControlBar").getChild("subsCapsButton").el())}}),this.on(t.textTracks(),"change",function(s){let i=this.getActiveTrack();i.activeCues&&this.widgetComponent&&i!==this.widgetComponent.activeTrack&&(this.widgetComponent.createWidgetBody(i),this.options.selector&&this.totalTracks>0&&this.selectorComponent.changeSelector(i),this.downloadComponent&&this.downloadComponent.changeDownload(i))}),this.on(t,"timeupdate",function(){this.activated&&this.widgetComponent&&this.widgetComponent.setCue(t.currentTime())})}getTextTracks(){return this.player.textTracks().tracks_.filter(e=>e.kind!=="metadata")}getActiveTrack(){let t,e;for(t=0;t<this.getTextTracks().length;t++)e=this.getTextTracks()[t],e.mode==="showing"&&(this.activeTrack=e);return this.activeTrack||this.getTextTracks()[0]}createTranscript(){let t=this.getActiveTrack(),e=this;if(this.activated=!0,this.totalTracks=this.getTextTracks().length,!t.activeCues)window.setTimeout(function(){e.createTranscript()},100);else{if(this.options.selector&&this.totalTracks>1&&(this.selectorComponent=new c(this.options.selectorId,t,this)),this.options.search&&(this.searchComponent=new h(this.options.searchId,t,this)),(this.options.download||this.options.copy)&&(this.downloadComponent=new d(this.options.downloadId,t,this)),this.widgetComponent=new l(this.options.widgetId,t,this),this.player.el().classList.add("vjs-transcribe-active"),this.options.pip){this.$initialParent=this.player.el().parentElement;let s=this.getPip();s.appendChild(this.player.el()),s.classList.add("vjs-transcribe-pip"),s.classList.add("pip-active")}this.options.disablecc&&(this.player.el().querySelector(".vjs-text-track-display").style.display="none"),window.dispatchEvent(new Event("vjstranscribe.on"))}}getPip(){if(!document.getElementById(this.options.pipId)){let t=document.createElement("div");t.setAttribute("id",this.options.pipId),this.player.el().insertAdjacentElement("afterend",t)}return document.getElementById(this.options.pipId)}parseTags(t){let e=document.createElement("textarea");e.innerHTML=t;let s=new DOMParser().parseFromString(e.value,"text/html");return s.body.textContent||s.body.innerText||""}destroyTranscript(){this.activated=!1,this.widgetComponent=void 0,this.activeTrack=void 0,this.player.el().classList.remove("vjs-transcribe-active"),document.getElementById(this.options.widgetId).innerHTML="",(this.options.download||this.options.copy)&&(this.downloadComponent=void 0,document.getElementById(this.options.downloadId).innerHTML=""),this.options.selector&&this.totalTracks>0&&(this.selectorComponent=void 0,document.getElementById(this.options.selectorId).innerHTML=""),this.options.search&&(this.searchComponent.removeEv(),this.searchComponent=void 0,document.getElementById(this.options.searchId).innerHTML=""),this.options.pip&&this.$initialParent.insertBefore(this.player.el(),this.$initialParent.firstChild),this.options.disablecc&&(this.player.el().querySelector(".vjs-text-track-display").style.display="block"),this.options.pip&&this.getPip().classList.remove("pip-active"),window.dispatchEvent(new Event("vjstranscribe.off"))}};videojs.registerPlugin("vjstranscribe",v);})();