Merge pull request #521 from jitsi/fix-resizing
Fixes resizing problems introduced in last resizing commit and some previous problems with side panel open/close.
This commit is contained in:
damencho
commit
25a9928758
|
|
@ -22,11 +22,16 @@ var currentlyOpen = null;
|
|||
* @param onOpenComplete function to be called when the panel is opened
|
||||
* @param onOpen function to be called if the window is going to be opened
|
||||
* @param onClose function to be called if the window is going to be closed
|
||||
* @param onVideoResizeComplete function to be called after the video area
|
||||
* is resized
|
||||
*/
|
||||
function toggle (object, selector, onOpenComplete, onOpen, onClose) {
|
||||
function toggle (object, selector, onOpenComplete,
|
||||
onOpen, onClose, onVideoResizeComplete) {
|
||||
let isSideBarVisible = object.isVisible();
|
||||
|
||||
UIUtil.buttonClick(buttons[selector], "active");
|
||||
|
||||
if (object.isVisible()) {
|
||||
if (isSideBarVisible) {
|
||||
$("#toast-container").animate({
|
||||
right: 5
|
||||
}, {
|
||||
|
|
@ -38,12 +43,17 @@ function toggle (object, selector, onOpenComplete, onOpen, onClose) {
|
|||
queue: false,
|
||||
duration: 500
|
||||
});
|
||||
|
||||
resizeVideoArea(isSideBarVisible, onVideoResizeComplete);
|
||||
|
||||
if(typeof onClose === "function") {
|
||||
onClose();
|
||||
}
|
||||
|
||||
currentlyOpen = null;
|
||||
} else {
|
||||
resizeVideoArea(isSideBarVisible, onVideoResizeComplete);
|
||||
|
||||
// Undock the toolbar when the chat is shown and if we're in a
|
||||
// video mode.
|
||||
if (VideoLayout.isLargeVideoVisible()) {
|
||||
|
|
@ -80,6 +90,13 @@ function toggle (object, selector, onOpenComplete, onOpen, onClose) {
|
|||
}
|
||||
}
|
||||
|
||||
function resizeVideoArea(isSidePanelVisible, completeFunction) {
|
||||
VideoLayout.resizeVideoArea(!isSidePanelVisible,
|
||||
false,
|
||||
true,
|
||||
completeFunction);
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggler for the chat, contact list, settings menu, etc..
|
||||
*/
|
||||
|
|
@ -96,11 +113,6 @@ var PanelToggler = {
|
|||
$('#chatspace').trigger('shown');
|
||||
};
|
||||
|
||||
VideoLayout.resizeVideoArea(!Chat.isVisible(),
|
||||
false,
|
||||
true,
|
||||
chatCompleteFunction);
|
||||
|
||||
toggle(Chat, //Object
|
||||
'#chatspace', // Selector
|
||||
function () { //onOpenComplete
|
||||
|
|
@ -113,7 +125,8 @@ var PanelToggler = {
|
|||
}
|
||||
},
|
||||
() => this.resizeChat(), //OnOpen
|
||||
null); //OnClose
|
||||
null,
|
||||
chatCompleteFunction); //OnClose
|
||||
},
|
||||
|
||||
resizeChat () {
|
||||
|
|
@ -130,11 +143,6 @@ var PanelToggler = {
|
|||
: function () {
|
||||
$('#contactlist').trigger('shown');
|
||||
};
|
||||
VideoLayout.resizeVideoArea(
|
||||
!ContactList.isVisible(),
|
||||
false,
|
||||
true,
|
||||
completeFunction);
|
||||
|
||||
toggle(ContactList,
|
||||
'#contactlist',
|
||||
|
|
@ -142,15 +150,14 @@ var PanelToggler = {
|
|||
function() {
|
||||
ContactList.setVisualNotification(false);
|
||||
},
|
||||
null);
|
||||
null,
|
||||
completeFunction);
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens / closes the settings menu
|
||||
*/
|
||||
toggleSettingsMenu () {
|
||||
VideoLayout.resizeVideoArea(
|
||||
!SettingsMenu.isVisible(), false, true, function (){});
|
||||
toggle(SettingsMenu,
|
||||
'#settingsmenu',
|
||||
null,
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const FilmStrip = {
|
|||
* @param videoAreaAvailableWidth the currently available video area width
|
||||
* that we want to take into account when calculating the film strip width.
|
||||
*/
|
||||
calculateThumbnailSize (videoAreaAvailableWidth) {
|
||||
calculateThumbnailSize (isSideBarVisible) {
|
||||
// Calculate the available height, which is the inner window height
|
||||
// minus 39px for the header minus 2px for the delimiter lines on the
|
||||
// top and bottom of the large video, minus the 36px space inside the
|
||||
|
|
@ -59,31 +59,29 @@ const FilmStrip = {
|
|||
* the filmStrip width, because we're probably in a state where the
|
||||
* film strip size hasn't been updated yet, but it will be.
|
||||
*/
|
||||
let filmStripWidth = videoAreaAvailableWidth
|
||||
? videoAreaAvailableWidth
|
||||
let videoAreaAvailableWidth
|
||||
= UIUtil.getAvailableVideoWidth(isSideBarVisible)
|
||||
- parseInt(this.filmStrip.css('right'), 10)
|
||||
- parseInt(this.filmStrip.css('paddingLeft'), 10)
|
||||
- parseInt(this.filmStrip.css('paddingRight'), 10)
|
||||
- parseInt(this.filmStrip.css('borderLeftWidth'), 10)
|
||||
- parseInt(this.filmStrip.css('borderRightWidth'), 10)
|
||||
: this.getFilmStripWidth();
|
||||
|
||||
- parseInt(this.filmStrip.css('borderRightWidth'), 10) - 5;
|
||||
|
||||
let availableWidth = Math.floor(
|
||||
(filmStripWidth - numvids * (
|
||||
(videoAreaAvailableWidth - numvids * (
|
||||
parseInt(localVideoContainer.css('borderLeftWidth'), 10)
|
||||
+ parseInt(localVideoContainer.css('borderRightWidth'), 10)
|
||||
+ parseInt(localVideoContainer.css('paddingLeft'), 10)
|
||||
+ parseInt(localVideoContainer.css('paddingRight'), 10)
|
||||
+ parseInt(localVideoContainer.css('marginLeft'), 10)
|
||||
+ parseInt(localVideoContainer.css('marginRight'), 10)))
|
||||
/ numvids) - numvids*10;
|
||||
/ numvids);
|
||||
|
||||
let maxHeight
|
||||
// If the MAX_HEIGHT property hasn't been specified
|
||||
// we have the static value.
|
||||
= Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 160,
|
||||
availableHeight);
|
||||
availableHeight);
|
||||
|
||||
availableHeight
|
||||
= Math.min( maxHeight,
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
|
|||
* @param id the id indicating the video for which we're adding a menu.
|
||||
* @param parentElement the parent element where this menu will be added
|
||||
*/
|
||||
|
||||
if (!interfaceConfig.filmStripOnly) {
|
||||
RemoteVideo.prototype.addRemoteVideoMenu = function () {
|
||||
var spanElement = document.createElement('span');
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import RemoteVideo from "./RemoteVideo";
|
|||
import LargeVideoManager, {VideoContainerType} from "./LargeVideo";
|
||||
import {PreziContainerType} from '../prezi/Prezi';
|
||||
import LocalVideo from "./LocalVideo";
|
||||
import PanelToggler from "../side_pannels/SidePanelToggler";
|
||||
|
||||
const RTCUIUtil = JitsiMeetJS.util.RTCUIHelper;
|
||||
|
||||
|
|
@ -356,8 +357,8 @@ var VideoLayout = {
|
|||
|
||||
console.info(resourceJid + " video is now active", videoelem);
|
||||
|
||||
$(videoelem).show();
|
||||
VideoLayout.resizeThumbnails();
|
||||
VideoLayout.resizeThumbnails(
|
||||
false, false, false, function() {$(videoelem).show();});
|
||||
|
||||
// Update the large video to the last added video only if there's no
|
||||
// current dominant, focused speaker or prezi playing or update it to
|
||||
|
|
@ -416,9 +417,14 @@ var VideoLayout = {
|
|||
*/
|
||||
resizeThumbnails ( animate = false,
|
||||
forceUpdate = false,
|
||||
videoAreaAvailableWidth = null) {
|
||||
isSideBarVisible = null,
|
||||
onComplete = null) {
|
||||
isSideBarVisible
|
||||
= (isSideBarVisible !== null)
|
||||
? isSideBarVisible : PanelToggler.isVisible();
|
||||
|
||||
let {thumbWidth, thumbHeight}
|
||||
= FilmStrip.calculateThumbnailSize(videoAreaAvailableWidth);
|
||||
= FilmStrip.calculateThumbnailSize(isSideBarVisible);
|
||||
|
||||
$('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
|
||||
|
||||
|
|
@ -427,6 +433,8 @@ var VideoLayout = {
|
|||
.then(function () {
|
||||
BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
|
||||
AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
|
||||
if (onComplete && typeof onComplete === "function")
|
||||
onComplete();
|
||||
});
|
||||
return {thumbWidth, thumbHeight};
|
||||
},
|
||||
|
|
@ -815,7 +823,7 @@ var VideoLayout = {
|
|||
}
|
||||
|
||||
// Resize the thumbnails first.
|
||||
this.resizeThumbnails(false, forceUpdate, availableWidth);
|
||||
this.resizeThumbnails(false, forceUpdate, isSideBarVisible);
|
||||
|
||||
// Resize the video area element.
|
||||
$('#videospace').animate({
|
||||
|
|
|
|||
Loading…
Reference in New Issue