{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l(),t),t,void 0,s??{});}return h._$AI(t),h};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
class WhisperTranscript extends r {
static styles = i$3`
:host {
display: block;
padding: 25px;
color: var(--whisper-transcript-text-color, #000);
}
ul {
list-style: none;
padding-left: 0;
}
.media {
text-align: center;
}
`;
static properties = {
url: {type: String},
audio: {type: String},
video: {type: String},
transcript: {type: Object, attribute: false},
time: {type: Number}
};
constructor() {
super();
this.time = 0;
}
connectedCallback() {
super.connectedCallback();
this.getTranscript();
const that = this;
window.addEventListener('update-time', e => that.time = e.detail.time);
}
async getTranscript() {
const resp = await fetch(this.url);
this.transcript = await resp.json();
}
render() {
if (! this.transcript) {
return x`Loading...`;
}
let media = null;
if (this.audio) {
media = x``;
} else {
media = x``;
}
return x`
${media}
${this.transcript.segments.map(s =>
x``
)}
`;
}
}
class WhisperSegment extends r {
static properties = {
text: { type: String },
start: { type: Number },
end: { type: Number },
words: { type: Array },
selected: { type: Boolean }
};
static styles = i$3`
.segment {
border: 2px solid #ddd;
padding: 5px;
margin: 2px;
border-radius: 5px;
display: flex;
flex-direction: row;
}
.selected {
background-color: #ddd;
border-color: black;
}
.times {
width: 325px;
float: left;
color: gray;
margin-right: 10px;
}
.words {
width: 100%;
}
`
constructor() {
super();
this.selected = false;
const that = this;
window.addEventListener('update-time', e => that.updateTime(e.detail.time));
}
updateTime(time) {
if ((time >= this.start) && (time <= this.end)) {
this.selected = true;
} else {
this.selected = false;
}
}
render() {
if (this.words) {
return x`
${hms(this.start)} - ${hms(this.end)}
${this.words.map(w =>
x``
)}
`;
}
}
}
function hms(secs) {
const h = Math.trunc(secs / 60 / 60);
const m = Math.trunc((secs - (h * 60)) / 60);
const s = Math.trunc(secs) - (h * 60 + m * 60);
return `${pad(h)}:${pad(m)}:${pad(s)}`;
}
function pad(i) {
return String(i).padStart(2, '0');
}
class WhisperWord extends r {
static properties = {
word: {type: String},
probability: {type: Number},
start: {type: Number},
end: {type: Number},
selected: {type: Boolean}
}
static styles = i$3`
span.word {
cursor: pointer;
}
span.selected {
text-decoration: underline;
}
span.mediocre {
color: #880808;
}
span.poor {
color: #E30B5C;
}
span.terrible {
color: red;
}
`;
constructor() {
super();
this.addEventListener('click', _ => this.updatePlayerTime());
}
connectedCallback() {
super.connectedCallback();
const that = this;
window.addEventListener('update-time', e => that.updateTime(e.detail.time));
}
updatePlayerTime() {
window.dispatchEvent(
new CustomEvent("update-player-time", {
detail: {
time: this.start
}
})
);
}
updateTime(time) {
if ((time >= this.start) && (time <= this.end)) {
this.selected = true;
} else {
this.selected = false;
}
}
getCssClass() {
let style = this.selected ? 'selected ' : '';
if (this.probability > .9) {
style += 'good';
} else if (this.probability > .7) {
style += 'mediocre';
} else if (this.probability > .5) {
style += 'poor';
} else {
style += 'terrible';
}
return style;
}
render() {
return x`
${this.word}
`
}
}
class WhisperMedia extends r {
static styles = i$3`
audio {
width: 100%;
}
video {
max-height: 200px;
margin-left: auto;
margin-right: auto;
}
`;
static properties = {
audio: {type: String},
video: {type: String}
};
updateTime(time) {
window.dispatchEvent(
new CustomEvent("update-time", {
detail: {
time
}
})
);
}
render() {
let media = null;
if (this.audio) {
media = document.createElement('audio', this.audio);
media.src = this.audio;
} else {
media = document.createElement('video', this.video);
media.src = this.video;
}
if (media) {
media.controls = true;
media.preload = "auto";
media.ontimeupdate = (_) => this.updateTime(media.currentTime);
window.addEventListener('update-player-time', e => media.currentTime = e.detail.time);
return x`${media}`;
}
}
}
window.customElements.define('whisper-transcript', WhisperTranscript);
window.customElements.define('whisper-segment', WhisperSegment);
window.customElements.define('whisper-word', WhisperWord);
window.customElements.define('whisper-media', WhisperMedia);
export { WhisperMedia, WhisperSegment, WhisperTranscript, WhisperWord };
//# sourceMappingURL=index.js.map