77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { SubtitleCue, SubtitleTrack } from '../types'
|
|
import { state } from '../state'
|
|
import { parseVtt } from './vtt'
|
|
|
|
const proxyUrl = (token: string) => `/watch/proxy/subtitle?token=${encodeURIComponent(token)}`
|
|
|
|
const subtitlesForMode = (): SubtitleTrack[] => {
|
|
const src = state.modeSources[state.currentMode]
|
|
if (!src?.subtitles) return []
|
|
return src.subtitles
|
|
.map(t => ({ lang: (t.lang || 'unknown').toLowerCase(), label: t.lang || 'Unknown', url: proxyUrl(t.token) }))
|
|
.filter(t => t.url !== '')
|
|
}
|
|
|
|
const hideSubtitleText = (): void => {
|
|
const el = state.container.querySelector('[data-subtitle-text]') as HTMLElement | null
|
|
if (!el) return
|
|
el.textContent = ''
|
|
el.classList.remove('block')
|
|
el.classList.add('hidden')
|
|
}
|
|
|
|
const loadSubtitle = async (url: string): Promise<SubtitleCue[]> => {
|
|
try {
|
|
const res = await fetch(url)
|
|
if (!res.ok) return []
|
|
return parseVtt(await res.text())
|
|
} catch { return [] }
|
|
}
|
|
|
|
export const updateSubtitleOptions = (): void => {
|
|
const select = state.container.querySelector('[data-subtitle-select]') as HTMLSelectElement | null
|
|
if (!select) return
|
|
state.currentSubtitleTracks = subtitlesForMode()
|
|
select.innerHTML = ''
|
|
|
|
const none = document.createElement('option')
|
|
none.value = 'none'
|
|
none.textContent = 'Off'
|
|
select.appendChild(none)
|
|
select.value = 'none'
|
|
|
|
state.currentSubtitleTracks.forEach((t, i) => {
|
|
const opt = document.createElement('option')
|
|
opt.value = String(i)
|
|
opt.textContent = t.label
|
|
select.appendChild(opt)
|
|
})
|
|
|
|
const wrapper = select.parentElement
|
|
wrapper?.classList.toggle('hidden', state.currentSubtitleTracks.length === 0)
|
|
state.activeSubtitles = []
|
|
hideSubtitleText()
|
|
}
|
|
|
|
export const updateSubtitleRender = (time: number): void => {
|
|
const el = state.container.querySelector('[data-subtitle-text]') as HTMLElement | null
|
|
if (!el) return
|
|
if (!state.activeSubtitles.length) { hideSubtitleText(); return }
|
|
|
|
const cue = state.activeSubtitles.find(c => time >= c.start && time <= c.end)
|
|
if (!cue) { hideSubtitleText(); return }
|
|
|
|
el.textContent = cue.text
|
|
el.classList.remove('hidden')
|
|
}
|
|
|
|
export const setupSubtitles = (): void => {
|
|
const select = state.container.querySelector('[data-subtitle-select]') as HTMLSelectElement | null
|
|
select?.addEventListener('change', async () => {
|
|
if (select.value === 'none') { state.activeSubtitles = []; hideSubtitleText(); return }
|
|
const track = state.currentSubtitleTracks[Number(select.value)]
|
|
if (!track) { state.activeSubtitles = []; return }
|
|
state.activeSubtitles = await loadSubtitle(track.url)
|
|
})
|
|
}
|