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

Video Syncronization Prototyping Complete.

Browse source
This commit is contained in:
rainbow napkin 2025-01-15 06:29:12 -05:00
parent 0b68db1265
commit 6dc9ad7b34
10 changed files with 286 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,15 +27,17 @@ class player{
//elements
this.playerDiv = document.querySelector("#media-panel-div");
this.videoContainer = document.querySelector("#media-panel-video-container")
this.navBar = document.querySelector("#navbar");
this.video = document.querySelector("#media-panel-video");
this.uiBar = document.querySelector("#media-panel-head-div");
this.title = document.querySelector("#media-panel-title-span");
this.showVideoIcon = document.querySelector("#chat-panel-show-video-icon");
this.hideVideoIcon = document.querySelector("#media-panel-div-toggle-icon");
this.cinemaModeIcon = document.querySelector("#media-panel-cinema-mode-icon");
//run setup functions
this.setupInput();
this.defineListeners();
}
setupInput(){
@ -50,6 +52,52 @@ class player{
this.cinemaModeIcon.addEventListener("click", ()=>{this.toggleCinemaMode()});
}
defineListeners(){
this.client.socket.on("play", this.play.bind(this));
this.client.socket.on("sync", this.sync.bind(this));
this.client.socket.on("end", this.end.bind(this));
}
play(data){
//If we have an active media handler
if(this.mediaHandler != null){
//End the media handler
this.mediaHandler.end();
}
//Ignore null media
if(data.media == null){
//Set null handler
this.mediaHandler = new nullHandler(client, this);
//Otherwise
}else{
//If we have a raw-file compatible source
if(data.media.type == 'ia' || data.media.type == 'raw'){
//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);
}else{
this.mediaHandler = new nullHandler(client, this);
}
}
//Re-size to aspect since video may now be a different size
this.client.chatBox.resizeAspect();
}
end(){
//Call the media handler finisher
this.mediaHandler.end();
//Replace it with a null handler
this.mediaHandler = new nullHandler(client, this);
}
sync(data){
this.mediaHandler.sync(data.timestamp);
}
popUI(event){
this.toggleUI(true);
clearTimeout(this.uiTimer);
@ -94,7 +142,14 @@ class player{
this.popUI();
}
//This way other classes don't need to worry about media handler
getRatio(){
return this.video.videoWidth / this.video.videoHeight;
//If we have no media handler
if(this.mediaHandler == null){
//Return a 4/3 aspect to get a decent chat size
return 4/3;
}else{
return this.mediaHandler.getRatio();
}
}
}