audiobookshelf/client/players/LocalVideoPlayer.js

257 lines
6.7 KiB
JavaScript
Raw Normal View History

import Hls from 'hls.js'
import EventEmitter from 'events'
2022-05-31 02:26:53 +02:00
export default class LocalVideoPlayer extends EventEmitter {
constructor(ctx) {
super()
this.ctx = ctx
this.player = null
this.libraryItem = null
2022-05-31 02:26:53 +02:00
this.videoTrack = null
this.isHlsTranscode = null
this.hlsInstance = null
this.usingNativeplayer = false
2022-03-05 22:37:30 +01:00
this.startTime = 0
this.playWhenReady = false
this.defaultPlaybackRate = 1
this.playableMimeTypes = []
2022-03-05 22:37:30 +01:00
this.initialize()
}
initialize() {
2022-05-31 02:26:53 +02:00
if (document.getElementById('video-player')) {
document.getElementById('video-player').remove()
}
2022-05-31 02:26:53 +02:00
var videoEl = document.createElement('video')
videoEl.id = 'video-player'
// videoEl.style.display = 'none'
videoEl.className = 'absolute bottom-20 left-4 w-96 bg-black z-50'
videoEl.style.height = '216px'
document.body.appendChild(videoEl)
this.player = videoEl
this.player.addEventListener('play', this.evtPlay.bind(this))
this.player.addEventListener('pause', this.evtPause.bind(this))
this.player.addEventListener('progress', this.evtProgress.bind(this))
2022-03-05 22:37:30 +01:00
this.player.addEventListener('ended', this.evtEnded.bind(this))
this.player.addEventListener('error', this.evtError.bind(this))
this.player.addEventListener('loadedmetadata', this.evtLoadedMetadata.bind(this))
this.player.addEventListener('timeupdate', this.evtTimeupdate.bind(this))
2022-03-05 22:37:30 +01:00
2022-05-31 02:26:53 +02:00
var mimeTypes = ['video/mp4']
var mimeTypeCanPlayMap = {}
2022-03-05 22:37:30 +01:00
mimeTypes.forEach((mt) => {
var canPlay = this.player.canPlayType(mt)
mimeTypeCanPlayMap[mt] = canPlay
if (canPlay) this.playableMimeTypes.push(mt)
2022-03-05 22:37:30 +01:00
})
2022-05-31 02:26:53 +02:00
console.log(`[LocalVideoPlayer] Supported mime types`, mimeTypeCanPlayMap, this.playableMimeTypes)
}
evtPlay() {
this.emit('stateChange', 'PLAYING')
}
evtPause() {
this.emit('stateChange', 'PAUSED')
}
evtProgress() {
var lastBufferTime = this.getLastBufferedTime()
this.emit('buffertimeUpdate', lastBufferTime)
}
2022-03-05 22:37:30 +01:00
evtEnded() {
2022-05-31 02:26:53 +02:00
console.log(`[LocalVideoPlayer] Ended`)
this.emit('finished')
2022-03-05 22:37:30 +01:00
}
evtError(error) {
console.error('Player error', error)
2022-03-05 22:37:30 +01:00
this.emit('error', error)
}
evtLoadedMetadata(data) {
if (!this.isHlsTranscode) {
2022-05-31 02:26:53 +02:00
this.player.currentTime = this.startTime
2022-03-05 22:37:30 +01:00
}
this.emit('stateChange', 'LOADED')
if (this.playWhenReady) {
this.playWhenReady = false
this.play()
}
}
evtTimeupdate() {
if (this.player.paused) {
this.emit('timeupdate', this.getCurrentTime())
}
}
destroy() {
this.destroyHlsInstance()
if (this.player) {
this.player.remove()
}
}
2022-05-31 02:26:53 +02:00
set(libraryItem, videoTrack, isHlsTranscode, startTime, playWhenReady = false) {
this.libraryItem = libraryItem
2022-05-31 02:26:53 +02:00
this.videoTrack = videoTrack
this.isHlsTranscode = isHlsTranscode
this.playWhenReady = playWhenReady
2022-03-05 22:37:30 +01:00
this.startTime = startTime
if (this.hlsInstance) {
this.destroyHlsInstance()
}
if (this.isHlsTranscode) {
2022-03-05 22:37:30 +01:00
this.setHlsStream()
} else {
this.setDirectPlay()
}
}
setHlsStream() {
2022-05-31 02:26:53 +02:00
// iOS does not support Media Elements but allows for HLS in the native video player
if (!Hls.isSupported()) {
2022-05-31 02:26:53 +02:00
console.warn('HLS is not supported - fallback to using video element')
this.usingNativeplayer = true
2022-05-31 02:26:53 +02:00
this.player.src = this.videoTrack.relativeContentUrl
2022-03-05 22:37:30 +01:00
this.player.currentTime = this.startTime
return
}
var hlsOptions = {
2022-03-05 22:37:30 +01:00
startPosition: this.startTime || -1
// No longer needed because token is put in a query string
// xhrSetup: (xhr) => {
// xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
// }
}
this.hlsInstance = new Hls(hlsOptions)
this.hlsInstance.attachMedia(this.player)
this.hlsInstance.on(Hls.Events.MEDIA_ATTACHED, () => {
2022-05-31 02:26:53 +02:00
this.hlsInstance.loadSource(this.videoTrack.relativeContentUrl)
this.hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
console.log('[HLS] Manifest Parsed')
})
this.hlsInstance.on(Hls.Events.ERROR, (e, data) => {
console.error('[HLS] Error', data.type, data.details, data)
if (data.details === Hls.ErrorDetails.BUFFER_STALLED_ERROR) {
console.error('[HLS] BUFFER STALLED ERROR')
}
})
this.hlsInstance.on(Hls.Events.DESTROYING, () => {
console.log('[HLS] Destroying HLS Instance')
})
})
}
2022-03-05 22:37:30 +01:00
setDirectPlay() {
2022-05-31 02:26:53 +02:00
this.player.src = this.videoTrack.relativeContentUrl
console.log(`[LocalVideoPlayer] Loading track src ${this.videoTrack.relativeContentUrl}`)
2022-03-05 22:37:30 +01:00
this.player.load()
}
destroyHlsInstance() {
if (!this.hlsInstance) return
if (this.hlsInstance.destroy) {
var temp = this.hlsInstance
temp.destroy()
}
this.hlsInstance = null
}
async resetStream(startTime) {
this.destroyHlsInstance()
await new Promise((resolve) => setTimeout(resolve, 1000))
2022-05-31 02:26:53 +02:00
this.set(this.libraryItem, this.videoTrack, this.isHlsTranscode, startTime, true)
}
playPause() {
if (!this.player) return
if (this.player.paused) this.play()
else this.pause()
}
play() {
if (this.player) this.player.play()
}
pause() {
if (this.player) this.player.pause()
}
getCurrentTime() {
2022-05-31 02:26:53 +02:00
return this.player ? this.player.currentTime : 0
}
getDuration() {
2022-05-31 02:26:53 +02:00
return this.videoTrack.duration
}
setPlaybackRate(playbackRate) {
if (!this.player) return
this.defaultPlaybackRate = playbackRate
this.player.playbackRate = playbackRate
}
seek(time) {
if (!this.player) return
2022-05-31 02:26:53 +02:00
this.player.currentTime = Math.max(0, time)
}
setVolume(volume) {
if (!this.player) return
this.player.volume = volume
}
// Utils
isValidDuration(duration) {
if (duration && !isNaN(duration) && duration !== Number.POSITIVE_INFINITY && duration !== Number.NEGATIVE_INFINITY) {
return true
}
return false
}
getBufferedRanges() {
if (!this.player) return []
const ranges = []
const seekable = this.player.buffered || []
let offset = 0
for (let i = 0, length = seekable.length; i < length; i++) {
let start = seekable.start(i)
let end = seekable.end(i)
if (!this.isValidDuration(start)) {
start = 0
}
if (!this.isValidDuration(end)) {
end = 0
continue
}
ranges.push({
start: start + offset,
end: end + offset
})
}
return ranges
}
getLastBufferedTime() {
var bufferedRanges = this.getBufferedRanges()
if (!bufferedRanges.length) return 0
var buff = bufferedRanges.find((buff) => buff.start < this.player.currentTime && buff.end > this.player.currentTime)
if (buff) return buff.end
var last = bufferedRanges[bufferedRanges.length - 1]
return last.end
}
}