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

Media-handler refactoring

Browse source
This commit is contained in:
rainbow napkin 2025-05-04 17:06:26 -04:00
parent 99fa549469
commit b253f817f4
1 changed files with 96 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,7 @@ 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/>.*/
//This is little more than a interface class
class mediaHandler{
constructor(client, player, media, type){
//Get parents
@ -29,6 +30,9 @@ class mediaHandler{
//Set last received timestamp to 0
this.lastTimestamp = 0;
//Set volume
this.volume = 1;
//Ingest media object from server
this.startMedia(media);
}
@ -45,17 +49,11 @@ class mediaHandler{
}
buildPlayer(){
//Create player
this.video = document.createElement('video');
//Append it to page
this.player.videoContainer.appendChild(this.video);
//Reset player lock
this.lock = false;
}
destroyPlayer(){
//Remove player from page
this.video.remove();
//Null out video property
this.video = null;
}
@ -72,11 +70,6 @@ class mediaHandler{
}
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;
}
}
reload(){
@ -85,15 +78,6 @@ class mediaHandler{
//Throw self act flag to make sure we don't un-sync the player
this.selfAct = true;
//Load video from source
this.video.load();
//Set it back to the proper time
this.video.currentTime = timestamp;
//Play the video
this.video.play();
}
end(){
@ -114,22 +98,11 @@ class mediaHandler{
}
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;
//set lock property
this.lock = lock;
}
getRatio(){
return this.video.videoWidth / this.video.videoHeight;
}
getTimestamp(){
@ -153,6 +126,9 @@ class mediaHandler{
this.selfAct = false;
}
onVolumeChange(event){
}
onSeek(event){
//If the video was seeked out-side of code
if(!this.selfAct){
@ -164,7 +140,83 @@ class mediaHandler{
}
}
class nullHandler extends mediaHandler{
//Basic building blocks for anything that touches a <video> tag
class rawFileBase extends mediaHandler{
constructor(client, player, media, type){
super(client, player, media, type);
}
defineListeners(){
//Resize to aspect on metadata load
this.video.addEventListener('loadedmetadata', this.onMetadataLoad.bind(this));
}
buildPlayer(){
//Create player
this.video = document.createElement('video');
//Append it to page
this.player.videoContainer.appendChild(this.video);
//Run derived method
super.buildPlayer();
}
destroyPlayer(){
//Remove player from page
this.video.remove();
//Run derived method
super.destroyPlayer();
}
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;
}
}
reload(){
//Call derived method
super.reload();
//Load video from source
this.video.load();
//Set it back to the proper time
this.video.currentTime = timestamp;
//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.volume = this.video.volume;
}
}
//Off air static 'player'
class nullHandler extends rawFileBase{
constructor(client, player){
//Call derived constructor
super(client, player, {}, null);
@ -173,14 +225,11 @@ class nullHandler extends mediaHandler{
}
defineListeners(){
//Run derived method
super.defineListeners();
//Disable right clicking
this.video.addEventListener('contextmenu', (e)=>{e.preventDefault()});
this.video.addEventListener('loadedmetadata', this.onMetadataLoad.bind(this));
}
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();
}
start(){
@ -198,12 +247,8 @@ class nullHandler extends mediaHandler{
}
}
//This at first was hard to seperate out as parts of it are used for other handlers because they're based on the <video> tag
//Others simply because this was the first actual media handler and there are parts necissary for ALL media handlers, even ones That being said I think I split this up in a way that makes sense :P
//Essentially, the base class is enough to make a video tag and handle things every handler does like sync locking
//Null is just enough added on to play the static
//And the raw file handler adds on everything needed to sync up a raw file
class rawFileHandler extends mediaHandler{
//Basic building blocks needed for proper time-synchronized raw-file playback
class rawFileHandler extends rawFileBase{
constructor(client, player, media){
//Call derived constructor
super(client, player, media, 'raw');
@ -213,7 +258,9 @@ class rawFileHandler extends mediaHandler{
}
defineListeners(){
this.video.addEventListener('loadedmetadata', this.onMetadataLoad.bind(this));
//Run derived method
super.defineListeners();
this.video.addEventListener('pause', this.onPause.bind(this));
this.video.addEventListener('seeking', this.onSeek.bind(this));
}
@ -222,6 +269,9 @@ class rawFileHandler extends mediaHandler{
//Set video
this.video.src = this.nowPlaying.id;
//Set video volume
this.video.volume = this.volume;
//Set video title
this.setVideoTitle(this.nowPlaying.title);