rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Started work on HLS livestreaming

Browse source
This commit is contained in:
rainbow napkin 2025-05-11 08:19:30 -04:00
parent 93265b7890
commit c6de68b474
6 changed files with 193 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

44
www/js/channel/mediaHandler.js
View file

@ -158,8 +158,13 @@ class rawFileBase extends mediaHandler{
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();
}
@ -488,4 +493,43 @@ class youtubeEmbedHandler extends mediaHandler{
this.iframe.style.pointerEvents = (lock ? "none" : "");
}
}
}
class hlsBase extends rawFileBase{
constructor(client, player, media, type){
//Call derived constructor
super(client, player, media, type);
//Create property to hold HLS object
this.hls = null;
}
buildPlayer(){
//Call derived player
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));
}
onMetadataLoad(){
//Start the video
this.video.play();
}
}
class hlsLiveStreamHandler extends hlsBase{
constructor(client, player, media){
//Call derived constructor
super(client, player, media, "livehls");
}
}

9
www/js/channel/player.js
View file

@ -89,13 +89,20 @@ class player{
}else{
//If we have a youtube video and the official embedded iframe player is selected
if(data.media.type == 'yt' && localStorage.getItem("ytPlayerType") == 'embed'){
//Create a new yt handler for it
this.mediaHandler = new youtubeEmbedHandler(this.client, this, data.media);
//Sync to time stamp
this.mediaHandler.sync(data.timestamp);
//If we have an HLS Livestream
}else if(data.media.type == "livehls"){
//Create a new HLS Livestream Handler for it
this.mediaHandler = new hlsLiveStreamHandler(this.client, this, data.media);
//Otherwise, if we have a raw-file compatible source
}else if(data.media.type == 'ia' || data.media.type == 'raw' || data.media.type == 'yt' || data.media.type == 'dm'){
//Create a new raw file handler for it
this.mediaHandler = new rawFileHandler(client, this, data.media);
//Sync to time stamp
this.mediaHandler.sync(data.timestamp);
this.mediaHandler.sync(data.timestamp);
}else{
this.mediaHandler = new nullHandler(client, this);
}