Fixed chat width breaking when video hidden.

This commit is contained in:
rainbow napkin 2025-04-09 21:09:04 -04:00
parent 441108c9cb
commit 4c54c270d2
3 changed files with 43 additions and 8 deletions

View file

@ -295,9 +295,14 @@ class chatBox{
}
resizeAspect(event){
if(this.aspectLock){
const playerHidden = this.client.player.playerDiv.style.display == "none";
//If the aspect is locked and the player is hidden
if(this.aspectLock && !playerHidden){
this.sizeToAspect();
//Otherwise
}else{
//Fix the clickDragger on userlist
this.client.userList.clickDragger.fixCutoff();
}
}
@ -334,4 +339,28 @@ class chatBox{
this.client.player.hideVideoIcon.style.display = "none";
}
}
handleVideoToggle(show){
//If we're enabling the video
if(show){
//Show hide chat icon
this.hideChatIcon.style.display = "flex";
//Re-enable the click dragger
this.clickDragger.enabled = true;
//Lock the chat to aspect ratio of the video, to make sure the chat width isn't breaking shit
this.lockAspect();
//If we're disabling the video
}else{
//Hide hide hide hide hide hide chat icon
this.hideChatIcon.style.display = "none";
//Need to clear the width from the split, or else it doesn't display properly
this.chatPanel.style.flexBasis = "100%";
//Disable the click dragger
this.clickDragger.enabled = false;
}
}
}

View file

@ -224,16 +224,13 @@ class player{
if(show){
this.playerDiv.style.display = "flex";
this.showVideoIcon.style.display = "none";
this.client.chatBox.hideChatIcon.style.display = "flex";
//Lock the chat to aspect ratio of the video, to make sure the chat width isn't breaking shit
this.client.chatBox.lockAspect();
}else{
this.playerDiv.style.display = "none";
this.showVideoIcon.style.display = "flex";
this.client.chatBox.hideChatIcon.style.display = "none";
//Need to clear the width from the split, or else it doesn't display properly
this.client.chatBox.chatPanel.style.flexBasis = "100%";
}
//Tell chatbox to handle this shit
this.client.chatBox.handleVideoToggle(show);
}
toggleCinemaMode(cinema = !this.navBar.checkVisibility()){

View file

@ -483,6 +483,9 @@ class canopyUXUtils{
//Whether or not click dragger is in a flexbox
this.flex = flex;
//Create boolean to allow parent classes to suspend click dragging behavior
this.enabled = true;
//Setup our event listeners
this.setupInput();
}
@ -514,7 +517,7 @@ class canopyUXUtils{
}
drag(event){
if(this.dragLock){
if(this.dragLock && this.enabled){
if(this.leftHandle){
//get difference between mouse and right edge of element
var difference = this.element.getBoundingClientRect().right - event.clientX;
@ -558,6 +561,12 @@ class canopyUXUtils{
fixCutoff(standalone = true, pageBreak){
//If the click dragger isn't enable
if(!this.enabled){
//FUCK OFF AND DIE
return;
}
//If we have no pagebreak
if(pageBreak == null){
//If we have a document body