929 lines
25 KiB
JavaScript
929 lines
25 KiB
JavaScript
/*Canopy - The next generation of stoner streaming software
|
|
Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
|
|
|
/*
|
|
* Base class for all Canopy Media Handlers
|
|
*
|
|
* This is little more than a interface class
|
|
*/
|
|
class mediaHandler{
|
|
/**
|
|
* Instantiates a new Media Handler object
|
|
* @param {channel} client - Parent Client Management Object
|
|
* @param {player} player - Parent Canopy Player Object
|
|
* @param {Object} media - De-hydrated media object from server
|
|
* @param {String} type - Media Handler Source Type
|
|
*/
|
|
constructor(client, player, media, type){
|
|
/**
|
|
* Parent Client Management Object
|
|
*/
|
|
this.client = client;
|
|
|
|
/**
|
|
* Parent Canopy Player Object
|
|
*/
|
|
this.player = player;
|
|
|
|
/**
|
|
* Media Handler Source Type
|
|
*/
|
|
this.type = type
|
|
|
|
/*
|
|
* Denotes wether a seek call was made by the syncing function
|
|
*/
|
|
this.selfAct = false;
|
|
|
|
/*
|
|
* Contains the last received time stamp
|
|
*/
|
|
this.lastTimestamp = 0;
|
|
|
|
//Ingest media object from server
|
|
this.startMedia(media);
|
|
}
|
|
|
|
/**
|
|
* Ingests media nd starts playback
|
|
* @param {Object} media - Media object from server
|
|
*/
|
|
startMedia(media){
|
|
//If we properly ingested the media
|
|
if(this.ingestMedia(media)){
|
|
//Build the video player
|
|
this.buildPlayer();
|
|
|
|
//Call the start function
|
|
this.start();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Builds video player element
|
|
*/
|
|
buildPlayer(){
|
|
//Reset player lock
|
|
this.lock = false;
|
|
}
|
|
|
|
/**
|
|
* Destroys video player element
|
|
*/
|
|
destroyPlayer(){
|
|
//Null out video property
|
|
this.video = null;
|
|
}
|
|
|
|
/**
|
|
* Ingests media object from server
|
|
* @param {Object} media - Media object from the server
|
|
* @returns {Boolean} True upon success
|
|
*/
|
|
ingestMedia(media){
|
|
//Set now playing
|
|
this.nowPlaying = media;
|
|
|
|
//return true to signify success
|
|
return true;
|
|
}
|
|
|
|
/**
|
|
* Starts video playback
|
|
*/
|
|
start(){
|
|
this.setVideoTitle(this.nowPlaying.title);
|
|
}
|
|
|
|
/**
|
|
* Syncronizes timestamp based on timestamp received from server
|
|
* @param {Number} timestamp - Current video timestamp in seconds
|
|
*/
|
|
sync(timestamp = this.lastTimestamp){
|
|
//Skip sync calls that won't seek so we don't pointlessly throw selfAct
|
|
if(timestamp != this.video.currentTime){
|
|
//Set self act flag
|
|
this.selfAct = true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Reloads media player
|
|
*/
|
|
reload(){
|
|
//Get current timestamp
|
|
const timestamp = this.video.currentTime;
|
|
|
|
//Throw self act flag to make sure we don't un-sync the player
|
|
this.selfAct = true;
|
|
}
|
|
|
|
/**
|
|
* Handles media end
|
|
*/
|
|
end(){
|
|
//Null out current media
|
|
this.nowPlaying = null;
|
|
|
|
//Throw self act to prevent unlock on video end
|
|
this.selfAct = true;
|
|
|
|
//Destroy the player
|
|
this.destroyPlayer();
|
|
}
|
|
|
|
/**
|
|
* Plays video
|
|
*/
|
|
play(){
|
|
}
|
|
|
|
/**
|
|
* Pauses video
|
|
*/
|
|
pause(){
|
|
}
|
|
|
|
/**
|
|
* Toggles player control lockout
|
|
* @param {Boolean} lock - Whether or not to lock-out user control of video
|
|
*/
|
|
setPlayerLock(lock){
|
|
//set lock property
|
|
this.lock = lock;
|
|
}
|
|
|
|
/**
|
|
* Calculates Aspect Ratio of media
|
|
* @returns {Number} Media Aspect Ratio as Floating Point number
|
|
*/
|
|
getRatio(){
|
|
return 4/3;
|
|
}
|
|
|
|
/**
|
|
* Gets current timestamp from video
|
|
* @returns {Number} Media Timestamp in seconds
|
|
*/
|
|
getTimestamp(){
|
|
return 0;
|
|
}
|
|
|
|
/**
|
|
* Sets player title
|
|
* @param {String} title - Title to set
|
|
*/
|
|
setVideoTitle(title){
|
|
this.player.title.innerText = `Currently Playing: ${utils.unescapeEntities(title)}`;
|
|
}
|
|
|
|
/**
|
|
* Called once all video metadata has properly been fetched
|
|
* @param {Event} event - Event passed down by event handler
|
|
*/
|
|
onMetadataLoad(event){
|
|
//Resize aspect (if locked), since the video doesn't properly report it's resolution until it's been loaded
|
|
this.client.chatBox.resizeAspect();
|
|
}
|
|
|
|
/**
|
|
* Called on media pause
|
|
* @param {Event} event - Event passed down by event handler
|
|
*/
|
|
onPause(event){
|
|
//If the video was paused out-side of code
|
|
if(!this.selfAct){
|
|
this.player.unlockSync();
|
|
}
|
|
|
|
this.selfAct = false;
|
|
}
|
|
|
|
/**
|
|
* Called on media volume change
|
|
* @param {Event} event - Event passed down by event handler
|
|
*/
|
|
onVolumeChange(event){
|
|
}
|
|
|
|
/**
|
|
* Called on media seek
|
|
* @param {Event} event - Event passed down by event handler
|
|
*/
|
|
onSeek(event){
|
|
//If the video was seeked out-side of code
|
|
if(!this.selfAct){
|
|
this.player.unlockSync();
|
|
}
|
|
|
|
//reset self act flag
|
|
this.selfAct = false;
|
|
}
|
|
|
|
/**
|
|
* Called on media buffer
|
|
* @param {Event} event - Event passed down by event handler
|
|
*/
|
|
onBuffer(){
|
|
this.selfAct = true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Class containing basic building blocks for anything that touches a <video> tag
|
|
* @extends mediaHandler
|
|
*/
|
|
class rawFileBase extends mediaHandler{
|
|
/**
|
|
* Instantiates a new rawFileBase object
|
|
* @param {channel} client - Parent Client Management Object
|
|
* @param {player} player - Parent Canopy Player Object
|
|
* @param {Object} media - De-hydrated media object from server
|
|
* @param {String} type - Media Handler Source Type
|
|
*/
|
|
constructor(client, player, media, type){
|
|
super(client, player, media, type);
|
|
}
|
|
|
|
/**
|
|
* Defines input-related event listeners
|
|
*/
|
|
defineListeners(){
|
|
//Resize to aspect on metadata load
|
|
this.video.addEventListener('loadedmetadata', this.onMetadataLoad.bind(this));
|
|
this.video.addEventListener('volumechange', this.onVolumeChange.bind(this));
|
|
}
|
|
|
|
buildPlayer(){
|
|
//Create player
|
|
this.video = document.createElement('video');
|
|
|
|
//Enable controls
|
|
this.video.controls = true;
|
|
|
|
//Append it to page
|
|
this.player.videoContainer.appendChild(this.video);
|
|
|
|
//Run derived method
|
|
super.buildPlayer();
|
|
}
|
|
|
|
destroyPlayer(){
|
|
//Stops playback
|
|
this.video.pause();
|
|
//Remove player from page
|
|
this.video.remove();
|
|
//Run derived method
|
|
super.destroyPlayer();
|
|
}
|
|
|
|
reload(){
|
|
//Call derived method
|
|
super.reload();
|
|
|
|
//Load video from source
|
|
this.video.load();
|
|
|
|
//Set it back to the proper time
|
|
this.video.currentTime = this.lastTimestamp;
|
|
|
|
//Play the video
|
|
this.video.play();
|
|
}
|
|
|
|
setPlayerLock(lock){
|
|
//toggle controls
|
|
this.video.controls = !lock;
|
|
//Only toggle mute if we're locking, or if we're unlocking after being locked
|
|
//If this is ran twice without locking we don't want to surprise unmute on the user
|
|
if(lock || this.lock){
|
|
//toggle mute
|
|
this.video.muted = lock;
|
|
}
|
|
//toggle looping
|
|
this.video.loop = lock;
|
|
|
|
//Run derived method
|
|
super.setPlayerLock(lock);
|
|
}
|
|
|
|
getRatio(){
|
|
return this.video.videoWidth / this.video.videoHeight;
|
|
}
|
|
|
|
onVolumeChange(event){
|
|
//Pull volume from video
|
|
this.player.volume = this.video.volume;
|
|
}
|
|
|
|
onSeek(event){
|
|
super.onSeek(event);
|
|
}
|
|
|
|
onBuffer(event){
|
|
super.onBuffer(event);
|
|
}
|
|
|
|
onPause(event){
|
|
super.onPause(event);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Off air static 'player'
|
|
* @extends rawFileBase
|
|
*/
|
|
class nullHandler extends rawFileBase{
|
|
/**
|
|
* Instantiates a new Null Handler object
|
|
* @param {channel} client - Parent Client Management Object
|
|
* @param {player} player - Parent Canopy Player Object
|
|
*/
|
|
constructor(client, player){
|
|
//Call derived constructor
|
|
super(client, player, {}, null);
|
|
|
|
this.defineListeners();
|
|
}
|
|
|
|
defineListeners(){
|
|
//Run derived method
|
|
super.defineListeners();
|
|
|
|
//Disable right clicking
|
|
this.video.addEventListener('contextmenu', (e)=>{e.preventDefault()});
|
|
}
|
|
|
|
start(){
|
|
//call derived start function
|
|
super.start();
|
|
|
|
//Lock the player
|
|
this.setPlayerLock(true);
|
|
|
|
//Set the static placeholder
|
|
this.video.src = '/video/static.webm';
|
|
|
|
//play the placeholder video
|
|
this.video.play();
|
|
}
|
|
|
|
setVideoTitle(title){
|
|
this.player.title.innerText = `Channel Off Air`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Basic building blocks needed for proper time-synchronized raw-file playback
|
|
* @extends rawFileBase
|
|
*/
|
|
class rawFileHandler extends rawFileBase{
|
|
/**
|
|
* Instantiates a new Null Handler object
|
|
* @param {channel} client - Parent Client Management Object
|
|
* @param {player} player - Parent Canopy Player Object
|
|
* @param {Object} media - De-hydrated media object from server
|
|
*/
|
|
constructor(client, player, media){
|
|
//Call derived constructor
|
|
super(client, player, media, 'raw');
|
|
|
|
//Re-sync audio every .1 seconds
|
|
this.audioSyncDelta = 1000;
|
|
|
|
//Set audio sync tolerance to .3
|
|
this.audioSyncTolerance = .3;
|
|
|
|
//Create value to hold last calculated difference between audio and video timestamp
|
|
this.lastAudioDelta = 0;
|
|
|
|
//Define listeners
|
|
this.defineListeners();
|
|
}
|
|
|
|
defineListeners(){
|
|
//Run derived method
|
|
super.defineListeners();
|
|
|
|
this.video.addEventListener('playing', this.onPlay.bind(this));
|
|
this.video.addEventListener('pause', this.onPause.bind(this));
|
|
this.video.addEventListener('seeked', this.onSeek.bind(this));
|
|
this.video.addEventListener('waiting', this.onBuffer.bind(this));
|
|
}
|
|
|
|
buildPlayer(){
|
|
super.buildPlayer();
|
|
|
|
this.audio = new Audio();
|
|
}
|
|
|
|
destroyPlayer(){
|
|
//Call derived method
|
|
super.destroyPlayer();
|
|
|
|
//Destroy the audio player
|
|
this.audio.pause();
|
|
this.audio.remove();
|
|
clearInterval(this.audioInterval);
|
|
}
|
|
|
|
start(){
|
|
//Call derived start
|
|
super.start();
|
|
|
|
//Just pull the combo source by default
|
|
const combo = this.nowPlaying.rawLink.combo[0]
|
|
|
|
//Check if the combo source is null
|
|
if(combo != null){
|
|
//Set video
|
|
this.video.src = combo[1];
|
|
}else{
|
|
|
|
//Pull video only link
|
|
const video = this.nowPlaying.rawLink.video[0]
|
|
const audio = this.nowPlaying.rawLink.audio[0];
|
|
|
|
//Set video source
|
|
this.video.src = video[1];
|
|
this.audio.src = audio[1];
|
|
}
|
|
|
|
//Set video volume
|
|
this.video.volume = this.player.volume;
|
|
|
|
//Unlock player
|
|
this.setPlayerLock(false);
|
|
|
|
//play video
|
|
this.video.play();
|
|
}
|
|
|
|
play(){
|
|
super.play();
|
|
//play video
|
|
this.video.play();
|
|
}
|
|
|
|
pause(){
|
|
super.pause();
|
|
//pause video
|
|
this.video.pause();
|
|
}
|
|
|
|
sync(timestamp = this.lastTimestamp){
|
|
//Call derived sync
|
|
super.sync(timestamp);
|
|
|
|
//Skip sync calls that won't seek so we don't pointlessly throw selfAct
|
|
if(timestamp != this.video.currentTime){
|
|
//Set current video time based on timestamp received from server
|
|
this.video.currentTime = timestamp;
|
|
}
|
|
|
|
//if we have a seperate audio track
|
|
if(this.audio != null && this.audio != ""){
|
|
//Re-sync it to the video, regardless if we synced video
|
|
this.audio.currentTime = this.video.currentTime;
|
|
}
|
|
}
|
|
|
|
getTimestamp(){
|
|
//Return current timestamp
|
|
return this.video.currentTime;
|
|
}
|
|
|
|
onSeek(event){
|
|
//Call derived event
|
|
super.onSeek(event);
|
|
|
|
//if we have a seperate audio track
|
|
if(this.audio != null && this.audio != "" && this.video != null){
|
|
//Set it's timestamp too
|
|
this.audio.currentTime = this.video.currentTime;
|
|
}
|
|
}
|
|
|
|
onBuffer(event){
|
|
//Call derived event
|
|
super.onBuffer(event);
|
|
|
|
//if we have a seperate audio track
|
|
if(this.audio != null && this.audio != "" && this.video != null){
|
|
//Set it's timestamp
|
|
this.audio.currentTime = this.video.currentTime;
|
|
//pause it
|
|
this.audio.pause();
|
|
clearInterval(this.audioInterval);
|
|
}
|
|
}
|
|
|
|
onPause(event){
|
|
//Call derived event
|
|
super.onPause(event);
|
|
|
|
//if we have a seperate audio track
|
|
if(this.audio != null && this.audio != "" && this.video != null){
|
|
//Set it's timestamp
|
|
this.audio.currentTime = this.video.currentTime;
|
|
//pause it
|
|
this.audio.pause();
|
|
clearInterval(this.audioInterval);
|
|
}
|
|
}
|
|
|
|
onPlay(event){
|
|
//if we have a seperate audio track
|
|
if(this.audio != null && this.audio != "" && this.video != null){
|
|
//Set audio volume
|
|
this.audio.volume = this.player.volume;
|
|
//Set it's timestamp
|
|
this.audio.currentTime = this.video.currentTime;
|
|
//pause it
|
|
this.audio.play();
|
|
this.audioInterval = setInterval(this.syncAudio.bind(this), this.audioSyncDelta);
|
|
}
|
|
}
|
|
|
|
syncAudio(){
|
|
//get current audi odelta
|
|
const audioDelta = this.video.currentTime - this.audio.currentTime;
|
|
|
|
//If the audio is out of sync enough that someone would notice
|
|
if(Math.abs(audioDelta) > this.audioSyncTolerance){
|
|
//Set audio volume
|
|
this.audio.volume = this.player.volume;
|
|
//Re-sync the audio
|
|
this.audio.currentTime = this.video.currentTime + audioDelta;
|
|
}
|
|
|
|
//Set last audio delta
|
|
this.lastAudioDelta = audioDelta;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Handles Youtube playback via the official YT embed (gross)
|
|
* @extends mediaHandler
|
|
*/
|
|
class youtubeEmbedHandler extends mediaHandler{
|
|
/**
|
|
* Instantiates a new Youtube Embed Handler object
|
|
* @param {channel} client - Parent Client Management Object
|
|
* @param {player} player - Parent Canopy Player Object
|
|
* @param {Object} media - De-hydrated media object from server
|
|
*/
|
|
constructor(client, player, media){
|
|
//Call derived constructor
|
|
super(client, player, media, 'ytEmbed');
|
|
|
|
//Set flag to notify functions when the player is actually ready
|
|
this.ready = false;
|
|
|
|
//Create property to hold video iframe for easy access
|
|
this.iframe = null;
|
|
}
|
|
|
|
//custom start media function since we want the youtube player to call the start function once it's ready
|
|
startMedia(media){
|
|
//If we properly ingested the media
|
|
if(this.ingestMedia(media)){
|
|
//Build the video player
|
|
this.buildPlayer();
|
|
}
|
|
}
|
|
|
|
buildPlayer(){
|
|
//If the embed API hasn't loaded
|
|
if(!this.client.ytEmbedAPILoaded){
|
|
//Complain and stop
|
|
return console.warn("youtubeEmbedHandler.buildPlayer() Called before YT Iframe API Loaded, waiting on refresh to rebuild...");
|
|
}
|
|
|
|
//Create temp div for yt api to replace
|
|
const tempDiv = document.createElement('div');
|
|
//Name the div
|
|
tempDiv.id = "youtube-embed-player"
|
|
//Append it to the video container
|
|
this.player.videoContainer.appendChild(tempDiv);
|
|
|
|
//Create a new youtube player using the official YT iframe-embed api
|
|
this.video = new YT.Player('youtube-embed-player', {
|
|
//Inject video id
|
|
videoId: this.nowPlaying.id,
|
|
events: {
|
|
'onReady': this.start.bind(this),
|
|
'onStateChange': this.onStateChange.bind(this)
|
|
}
|
|
});
|
|
|
|
//Call derived function
|
|
super.buildPlayer();
|
|
}
|
|
|
|
start(){
|
|
//Call derived start function
|
|
super.start();
|
|
|
|
//Set volume based on player volume
|
|
this.video.setVolume(this.player.volume * 100);
|
|
|
|
//Kick the video off
|
|
this.video.playVideo();
|
|
|
|
//Pull iframe
|
|
this.iframe = this.video.getIframe()
|
|
|
|
//Throw the ready flag
|
|
this.ready = true;
|
|
}
|
|
|
|
destroyPlayer(){
|
|
//If we've had enough time to create a player frame
|
|
if(this.ready){
|
|
//Pull volume from player before destroying since google didn't give us a volume change event like a bunch of dicks
|
|
this.player.volume = (this.video.getVolume() / 100);
|
|
|
|
//Use the embed api's built in destroy function
|
|
this.video.destroy();
|
|
}
|
|
|
|
//Check the f̶r̶i̶d̶g̶e video container for leftovers
|
|
const leftovers = this.player.videoContainer.querySelector("#youtube-embed-player");
|
|
|
|
//If we have any leftovers
|
|
if(leftovers != null){
|
|
//Nukem like last nights chicken
|
|
leftovers.remove();
|
|
}
|
|
|
|
//Call derived destroy function
|
|
super.destroyPlayer();
|
|
}
|
|
|
|
sync(timestamp = this.lastTimestamp){
|
|
//If we're not ready
|
|
if(!this.ready){
|
|
//Kick off a timer to wait it out and try again l8r
|
|
setTimeout(this.sync.bind(this), 100);
|
|
|
|
//If it failed, tell randy to fuck off
|
|
return;
|
|
}
|
|
|
|
//Seek to timestamp, allow buffering
|
|
this.video.seekTo(timestamp, true);
|
|
}
|
|
|
|
reload(){
|
|
//if we're ready
|
|
if(this.ready){
|
|
//re-load the video by id
|
|
this.video.loadVideoById(this.nowPlaying.id);
|
|
}
|
|
}
|
|
|
|
play(){
|
|
//If we're ready
|
|
if(this.ready){
|
|
//play the video
|
|
this.video.playVideo();
|
|
}
|
|
}
|
|
|
|
pause(){
|
|
//If we're ready
|
|
if(this.ready){
|
|
//pause the video
|
|
this.video.pauseVideo();
|
|
}
|
|
}
|
|
|
|
getRatio(){
|
|
//TODO: Implement a type-specific metadata property object in the media class to hold type-sepecifc meta-data
|
|
//Alternatively we could fill in resolution information from the raw link
|
|
//However keeping embedded functionality dependant on raw-links seems like bad practice
|
|
}
|
|
|
|
getTimestamp(){
|
|
//If we're ready
|
|
if(this.ready){
|
|
//Return the timestamp
|
|
return this.video.getCurrentTime();
|
|
}
|
|
|
|
//If we fall through, simply report that the video hasn't gone anywhere yet
|
|
return 0;
|
|
}
|
|
|
|
setVideoTitle(){
|
|
//Clear out the player title so that youtube's baked in title can do it's thing.
|
|
//This will be replaced once we complete the full player control and remove the defualt youtube UI
|
|
this.player.title.innerText = "";
|
|
}
|
|
|
|
/**
|
|
* Generic handler for state changes since google is a dick
|
|
*/
|
|
onStateChange(event){
|
|
switch(event.data){
|
|
//video unstarted
|
|
case -1:
|
|
return;
|
|
//video ended
|
|
case 0:
|
|
return;
|
|
//video playing
|
|
case 1:
|
|
return;
|
|
//video paused
|
|
case 2:
|
|
super.onPause(event);
|
|
return;
|
|
//video buffering
|
|
case 3:
|
|
//There is no good way to tell slow connections apart from user seeking
|
|
//This will be easier to implement once we get custom player controls up
|
|
//super.onSeek(event);
|
|
return;
|
|
//video queued
|
|
case 5:
|
|
return;
|
|
//bad status code
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
|
|
setPlayerLock(lock){
|
|
super.setPlayerLock(lock);
|
|
|
|
if(this.ready){
|
|
this.iframe.style.pointerEvents = (lock ? "none" : "");
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Base HLS Media handler for handling all HLS related media
|
|
* @extends rawFileBase
|
|
*/
|
|
class hlsBase extends rawFileBase{
|
|
/**
|
|
* Instantiates a new HLS Base object
|
|
* @param {channel} client - Parent Client Management Object
|
|
* @param {player} player - Parent Canopy Player Object
|
|
* @param {Object} media - De-hydrated media object from server
|
|
* @param {String} type - Media Handler Source Type
|
|
*/
|
|
constructor(client, player, media, type){
|
|
//Call derived constructor
|
|
super(client, player, media, type);
|
|
}
|
|
|
|
buildPlayer(){
|
|
//Call derived buildPlayer function
|
|
super.buildPlayer();
|
|
|
|
//Instantiate HLS object
|
|
this.hls = new Hls();
|
|
|
|
//Load HLS Stream
|
|
this.hls.loadSource(this.nowPlaying.url);
|
|
|
|
//Attatch hls object to video element
|
|
this.hls.attachMedia(this.video);
|
|
|
|
//Bind onMetadataLoad to MANIFEST_PARSED
|
|
this.hls.on(Hls.Events.MANIFEST_PARSED, this.onMetadataLoad.bind(this));
|
|
}
|
|
|
|
end(){
|
|
//Stop hls.js from loading any more of the stream
|
|
this.hls.stopLoad();
|
|
|
|
//Call derived method
|
|
super.end();
|
|
}
|
|
|
|
onMetadataLoad(){
|
|
//Call derived method
|
|
super.onMetadataLoad();
|
|
}
|
|
|
|
start(){
|
|
//Call derived method
|
|
super.start();
|
|
|
|
//Start the video
|
|
this.video.play();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* HLS Livestream Handler
|
|
* @extends hlsBase
|
|
*/
|
|
class hlsLiveStreamHandler extends hlsBase{
|
|
/**
|
|
* Instantiates a new HLS Live Stream Handler object
|
|
* @param {channel} client - Parent Client Management Object
|
|
* @param {player} player - Parent Canopy Player Object
|
|
* @param {Object} media - De-hydrated media object from server
|
|
*/
|
|
constructor(client, player, media){
|
|
//Call derived constructor
|
|
super(client, player, media, "livehls");
|
|
|
|
//Create variable to determine if we need to resync after next seek
|
|
this.reSync = false;
|
|
|
|
this.video.addEventListener('pause', this.onPause.bind(this));
|
|
this.video.addEventListener('seeked', this.onSeek.bind(this));
|
|
this.video.addEventListener('waiting', this.onBuffer.bind(this));
|
|
}
|
|
|
|
sync(){
|
|
//Kick the video back on if it was paused
|
|
this.video.play();
|
|
|
|
//Pull video duration
|
|
const duration = this.video.duration;
|
|
|
|
//Ignore bad timestamps
|
|
if(duration > 0){
|
|
//Seek to the end to sync up w/ the livestream
|
|
this.video.currentTime = duration;
|
|
}
|
|
}
|
|
|
|
setVideoTitle(title){
|
|
//Add title as text content for security :P
|
|
this.player.title.innerText = `: ${utils.unescapeEntities(title)}`;
|
|
|
|
//Create glow span
|
|
const glowSpan = document.createElement('span');
|
|
//Fill glow span content
|
|
glowSpan.innerText = "🔴LIVE";
|
|
//Set glowspan class
|
|
glowSpan.classList.add('critical-danger-text');
|
|
|
|
//Inject glowspan into title in a way that allows it to be easily replaced
|
|
this.player.title.prepend(glowSpan);
|
|
}
|
|
|
|
onBuffer(event){
|
|
//Call derived function
|
|
super.onBuffer(event);
|
|
|
|
|
|
//If we're supposed to be synced by the end of buffering
|
|
if(this.player.syncLock){
|
|
//Throw flag to manually sync since this works entirely differently from literally every other fucking media source
|
|
this.reSync = true;
|
|
}
|
|
}
|
|
|
|
onSeek(event){
|
|
//Call derived method
|
|
super.onSeek(event);
|
|
|
|
//If we stopped playing the video
|
|
if(this.video == null){
|
|
//Don't worry about it
|
|
return;
|
|
}
|
|
|
|
//Resize chat box to video aspect, since this is the only event thats reliably called on ratio change
|
|
//Re-enforcing UX rules a little more often shouldnt cause too many issues anywho.
|
|
this.client.chatBox.resizeAspect();
|
|
|
|
//Calculate distance to end of stream
|
|
const difference = this.video.duration - this.video.currentTime;
|
|
|
|
//If we where buffering under sync lock
|
|
if(this.reSync){
|
|
//Set reSync to false
|
|
this.reSync = false;
|
|
|
|
//If the difference is bigger than streamSyncTolerance
|
|
if(difference > this.player.streamSyncTolerance){
|
|
//Sync manually since we have no timestamp, and therefore the player won't do it for us
|
|
this.sync();
|
|
}
|
|
}
|
|
}
|
|
} |