haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove bottom toolbar and change side panel position and behavior

This commit is contained in:
yanas 2016-09-08 13:16:23 -05:00
parent ed29db290e
commit 8562d3d55d
13 changed files with 152 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
modules/UI/UI.js
View File

@ -5,10 +5,9 @@ var UI = {};
import Chat from "./side_pannels/chat/Chat";
import Toolbar from "./toolbars/Toolbar";
import ToolbarToggler from "./toolbars/ToolbarToggler";
import BottomToolbar from "./toolbars/BottomToolbar";
import ContactList from "./side_pannels/contactlist/ContactList";
import Avatar from "./avatar/Avatar";
import PanelToggler from "./side_pannels/SidePanelToggler";
import ExtendedToolbarToggler from "./side_pannels/ExtendedToolbarToggler";
import UIUtil from "./util/UIUtil";
import UIEvents from "../../service/UI/UIEvents";
import CQEvents from '../../service/connectionquality/CQEvents';
@ -134,7 +133,6 @@ function setupChat() {
*/
function setupToolbars() {
Toolbar.init(eventEmitter);
BottomToolbar.setupListeners(eventEmitter);
}
/**
@ -299,7 +297,7 @@ UI.initConference = function () {
//if local role changes buttons state will be again updated
UI.updateLocalRole(false);
ToolbarToggler.showToolbar();
UI.showToolbar();
let displayName = config.displayJids ? id : Settings.getDisplayName();
@ -337,7 +335,7 @@ UI.mucJoined = function () {
*/
UI.handleToggleFilmStrip = () => {
UI.toggleFilmStrip();
VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, false);
VideoLayout.resizeVideoArea(true, false);
};
/**
@ -362,7 +360,7 @@ function registerListeners() {
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
PanelToggler.toggleSettingsMenu();
ExtendedToolbarToggler.toggle("settingsmenu");
});
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
@ -380,8 +378,7 @@ function registerListeners() {
*/
function bindEvents() {
function onResize() {
PanelToggler.resizeChat();
VideoLayout.resizeVideoArea(PanelToggler.isVisible());
ExtendedToolbarToggler.resize();
}
// Resize and reposition videos in full screen mode.
@ -430,22 +427,22 @@ UI.start = function () {
registerListeners();
ToolbarToggler.init();
BottomToolbar.init();
ExtendedToolbarToggler.init();
FilmStrip.init(eventEmitter);
VideoLayout.init(eventEmitter);
if (!interfaceConfig.filmStripOnly) {
VideoLayout.initLargeVideo(PanelToggler.isVisible());
VideoLayout.initLargeVideo();
}
VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, true);
VideoLayout.resizeVideoArea(true, true);
ContactList.init(eventEmitter);
bindEvents();
sharedVideoManager = new SharedVideoManager(eventEmitter);
if (!interfaceConfig.filmStripOnly) {
$("#videospace").mousemove(function () {
return ToolbarToggler.showToolbar();
$("#videoconference_page").mousemove(function () {
return UI.showToolbar();
});
setupToolbars();
setupChat();
@ -468,9 +465,8 @@ UI.start = function () {
elem.href = 'data:application/json;charset=utf-8,\n' + data;
});
} else {
$("#header").css("display", "none");
$("#mainToolbarContainer").css("display", "none");
$("#downloadlog").css("display", "none");
BottomToolbar.hide();
FilmStrip.setupFilmStripOnly();
messageHandler.enableNotifications(false);
$('body').popover("disable");
@ -499,13 +495,6 @@ UI.start = function () {
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut",
"reposition": function () {
if (PanelToggler.isVisible()) {
$("#toast-container").addClass("notification-bottom-right-center");
} else {
$("#toast-container").removeClass("notification-bottom-right-center");
}
},
"newestOnTop": false
};
@ -727,14 +716,14 @@ UI.isFilmStripVisible = function () {
* Toggles chat panel.
*/
UI.toggleChat = function () {
PanelToggler.toggleChat();
ExtendedToolbarToggler.toggle("chatspace");
};
/**
* Toggles contact list panel.
*/
UI.toggleContactList = function () {
PanelToggler.toggleContactList();
ExtendedToolbarToggler.toggle("contactlist");
};
/**

2
modules/UI/recording/Recording.js
View File

@ -19,7 +19,6 @@ import UIUtil from '../util/UIUtil';
import VideoLayout from '../videolayout/VideoLayout';
import Feedback from '../Feedback.js';
import Toolbar from '../toolbars/Toolbar';
import BottomToolbar from '../toolbars/BottomToolbar';
/**
* The dialog for user input.
@ -260,7 +259,6 @@ var Recording = {
VideoLayout.setLocalVideoVisible(false);
Feedback.enableFeedback(false);
Toolbar.enable(false);
BottomToolbar.enable(false);
APP.UI.messageHandler.enableNotifications(false);
APP.UI.messageHandler.enablePopups(false);
}

70
modules/UI/side_pannels/ExtendedToolbarToggler.js Normal file
View File

@ -0,0 +1,70 @@
/* global $ */
const ExtendedToolbarToggler = {
init() {
document.getElementById("extendedToolbarPanel")
.addEventListener("animationend", function(e) {
console.log("ANIM NAME", e.animationName);
if(e.animationName === "slideOutExt")
$("#extendedToolbarPanel").children().each(function() {
if ($(this).hasClass("show"))
$(this).removeClass("show").addClass("hide");
});
}, false);
},
toggle(elementId) {
let elementSelector = $(`#${elementId}`);
let isSelectorVisible = elementSelector.hasClass("show");
if (isSelectorVisible) {
this.hide();
}
else {
if (this.isVisible())
$("#extendedToolbarPanel").children().each(function() {
if ($(this).id !== elementId && $(this).hasClass("show"))
$(this).removeClass("show").addClass("hide");
});
if (!this.isVisible())
this.show();
elementSelector.removeClass("hide").addClass("show");
}
},
/**
* Returns true if this toolbar is currently visible, or false otherwise.
* @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
*/
isVisible() {
return $("#extendedToolbarPanel").hasClass("slideInExt");
},
/**
* Hides the toolbar with animation or not depending on the animate
* parameter.
*/
hide(elementId) {
$("#extendedToolbarPanel")
.removeClass("slideInExt").addClass("slideOutExt");
},
/**
* Shows the toolbar with animation or not depending on the animate
* parameter.
*/
show(elementId) {
if (!this.isVisible())
$("#extendedToolbarPanel")
.removeClass("slideOutExt").addClass("slideInExt");
},
resize () {
//let [width, height] = UIUtil.getSidePanelSize();
//Chat.resizeChat(width, height);
}
};
export default ExtendedToolbarToggler;

186
modules/UI/side_pannels/SidePanelToggler.js
View File

@ -1,186 +0,0 @@
/* global require, $ */
import Chat from "./chat/Chat";
import ContactList from "./contactlist/ContactList";
import Settings from "./../../settings/Settings";
import SettingsMenu from "./settings/SettingsMenu";
import VideoLayout from "../videolayout/VideoLayout";
import ToolbarToggler from "../toolbars/ToolbarToggler";
import UIUtil from "../util/UIUtil";
const buttons = {
'#chatspace': '#chatBottomButton',
'#contactlist': '#contactListButton',
'#settingsmenu': '#toolbar_button_settings'
};
var currentlyOpen = null;
/**
* Toggles the windows in the side panel
* @param object the window that should be shown
* @param selector the selector for the element containing the panel
* @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, onVideoResizeComplete) {
let isSideBarVisible = object.isVisible();
UIUtil.buttonClick(buttons[selector], "active");
if (isSideBarVisible) {
$("#toast-container").animate({
right: 5
}, {
queue: false,
duration: 500
});
$(selector).hide("slide", {
direction: "right",
queue: false,
duration: 500,
// Set the size to 0 at the end of the animation to ensure that
// the is(":visible") function on this selector will return {false}
// when the element is hidden.
complete: function() {$(selector).css("width", "0");}
});
resizeVideoArea(false, onVideoResizeComplete);
if(typeof onClose === "function") {
onClose();
}
currentlyOpen = null;
} else {
resizeVideoArea(true, onVideoResizeComplete);
// Undock the toolbar when the chat is shown and if we're in a
// video mode.
if (VideoLayout.isLargeVideoVisible()) {
ToolbarToggler.dockToolbar(false);
}
if (currentlyOpen) {
var current = $(currentlyOpen);
UIUtil.buttonClick(buttons[currentlyOpen], "active");
current.css('z-index', 4);
setTimeout(function () {
current.css('display', 'none');
current.css('z-index', 5);
}, 500);
}
$("#toast-container").animate({
right: (UIUtil.getSidePanelSize()[0] + 5)
}, {
queue: false,
duration: 500
});
// Set the size dynamically (not in the css), so that we're sure that
// when is(":visible") is called on this selector the result is {false}
// before it's actually visible.
// (Chrome seems to return {true} for an element which is in the DOM and
// has non-null size set).
$(selector).css("width", "20%");
$(selector).show("slide", {
direction: "right",
queue: false,
duration: 500,
complete: onOpenComplete
});
if(typeof onOpen === "function") {
onOpen();
}
currentlyOpen = selector;
}
}
function resizeVideoArea(isSidePanelVisible, completeFunction) {
VideoLayout.resizeVideoArea(isSidePanelVisible,
false,//don't force thumbnail count update
true, //animate
completeFunction);
}
/**
* Toggler for the chat, contact list, settings menu, etc..
*/
var PanelToggler = {
/**
* Opens / closes the chat area.
*/
toggleChat () {
var chatCompleteFunction = Chat.isVisible()
? function () {}
: function () {
Chat.scrollChatToBottom();
$('#chatspace').trigger('shown');
};
toggle(Chat, //Object
'#chatspace', // Selector
function () { //onOpenComplete
// Request the focus in the nickname field or the chat input
// field.
if ($('#nickname').css('visibility') === 'visible') {
$('#nickinput').focus();
} else {
$('#usermsg').focus();
}
},
() => this.resizeChat(), //OnOpen
null,
chatCompleteFunction); //OnClose
},
resizeChat () {
let [width, height] = UIUtil.getSidePanelSize();
Chat.resizeChat(width, height);
},
/**
* Opens / closes the contact list area.
*/
toggleContactList () {
var completeFunction = ContactList.isVisible()
? function () {}
: function () {
$('#contactlist').trigger('shown');
};
toggle(ContactList,
'#contactlist',
null,
function() {
ContactList.setVisualNotification(false);
},
null,
completeFunction);
},
/**
* Opens / closes the settings menu
*/
toggleSettingsMenu () {
toggle(SettingsMenu,
'#settingsmenu',
null,
function() {},
null);
},
isVisible () {
return (Chat.isVisible() ||
ContactList.isVisible() ||
SettingsMenu.isVisible());
}
};
export default PanelToggler;

21
modules/UI/side_pannels/chat/Chat.js
View File

@ -18,15 +18,11 @@ var unreadMessages = 0;
*/
function setVisualNotification(show) {
var unreadMsgElement = document.getElementById('unreadMessages');
var unreadMsgBottomElement
= document.getElementById('bottomUnreadMessages');
var glower = $('#toolbar_button_chat');
var bottomGlower = $('#chatBottomButton');
if (unreadMessages) {
unreadMsgElement.innerHTML = unreadMessages.toString();
unreadMsgBottomElement.innerHTML = unreadMessages.toString();
ToolbarToggler.dockToolbar(true);
@ -42,19 +38,6 @@ function setVisualNotification(show) {
'top:' + topIndent +
'; left:' + leftIndent + ';');
var chatBottomButtonElement
= document.getElementById('chatBottomButton').parentNode;
var bottomLeftIndent = (UIUtil.getTextWidth(chatBottomButtonElement) -
UIUtil.getTextWidth(unreadMsgBottomElement)) / 2;
var bottomTopIndent = (UIUtil.getTextHeight(chatBottomButtonElement) -
UIUtil.getTextHeight(unreadMsgBottomElement)) / 2 - 2;
unreadMsgBottomElement.setAttribute(
'style',
'top:' + bottomTopIndent +
'; left:' + bottomLeftIndent + ';');
if (!glower.hasClass('icon-chat-simple')) {
glower.removeClass('icon-chat');
glower.addClass('icon-chat-simple');
@ -62,7 +45,6 @@ function setVisualNotification(show) {
}
else {
unreadMsgElement.innerHTML = '';
unreadMsgBottomElement.innerHTML = '';
glower.removeClass('icon-chat-simple');
glower.addClass('icon-chat');
}
@ -70,15 +52,12 @@ function setVisualNotification(show) {
if (show && !notificationInterval) {
notificationInterval = window.setInterval(function () {
glower.toggleClass('active');
bottomGlower.toggleClass('active glowing');
}, 800);
}
else if (!show && notificationInterval) {
window.clearInterval(notificationInterval);
notificationInterval = false;
glower.removeClass('active');
bottomGlower.removeClass('glowing');
bottomGlower.addClass('active');
}
}

23
modules/UI/side_pannels/contactlist/ContactList.js
View File

@ -14,16 +14,23 @@ let notificationInterval;
*/
function updateNumberOfParticipants(delta) {
numberOfContacts += delta;
if (numberOfContacts === 1) {
// when the user is alone we don't show the number of participants
$("#numberOfParticipants").text('');
ContactList.setVisualNotification(false);
} else if (numberOfContacts > 1) {
ContactList.setVisualNotification(!ContactList.isVisible());
$("#numberOfParticipants").text(numberOfContacts);
} else {
if (numberOfContacts <= 0) {
console.error("Invalid number of participants: " + numberOfContacts);
return;
}
let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
$("#numberOfParticipants").text(buttonIndicatorText);
let showVisualNotification
= (numberOfContacts === 1) ? false : !ContactList.isVisible();
ContactList.setVisualNotification(showVisualNotification);
$("#contactlist>div.title").text(
APP.translation.translateString(
"contactlist", {participants: numberOfContacts}
));
}
/**

130
modules/UI/toolbars/BottomToolbar.js
View File

@ -1,130 +0,0 @@
/* global $, APP, interfaceConfig, JitsiMeetJS */
import UIUtil from '../util/UIUtil';
import UIEvents from '../../../service/UI/UIEvents';
const defaultBottomToolbarButtons = {
'chat': {
id: '#bottom_toolbar_chat'
},
'contacts': {
id: '#bottom_toolbar_contact_list'
},
'filmstrip': {
id: '#bottom_toolbar_film_strip',
shortcut: "F",
shortcutAttr: "filmstripPopover",
shortcutFunc: function() {
JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
APP.UI.handleToggleFilmStrip();
},
shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
}
};
const BottomToolbar = {
init () {
this.toolbar = $('#bottomToolbar');
// The bottom toolbar is enabled by default.
this.enabled = true;
},
/**
* Enables / disables the bottom toolbar.
* @param {e} set to {true} to enable the bottom toolbar or {false}
* to disable it
*/
enable (e) {
this.enabled = e;
if (!e && this.isVisible())
this.hide(false);
},
/**
* Indicates if the bottom toolbar is currently enabled.
* @return {this.enabled}
*/
isEnabled() {
return this.enabled;
},
setupListeners (emitter) {
UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
const buttonHandlers = {
"bottom_toolbar_contact_list": function () {
JitsiMeetJS.analytics.sendEvent(
'bottomtoolbar.contacts.toggled');
emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
},
"bottom_toolbar_film_strip": function () {
JitsiMeetJS.analytics.sendEvent(
'bottomtoolbar.filmstrip.toggled');
emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
},
"bottom_toolbar_chat": function () {
JitsiMeetJS.analytics.sendEvent('bottomtoolbar.chat.toggled');
emitter.emit(UIEvents.TOGGLE_CHAT);
}
};
Object.keys(defaultBottomToolbarButtons).forEach(
id => {
if (UIUtil.isButtonEnabled(id)) {
var button = defaultBottomToolbarButtons[id];
if (button.shortcut)
APP.keyboardshortcut.registerShortcut(
button.shortcut,
button.shortcutAttr,
button.shortcutFunc,
button.shortcutDescription
);
}
}
);
Object.keys(buttonHandlers).forEach(
buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
);
},
resizeToolbar (thumbWidth, thumbHeight) {
let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18;
this.toolbar.css({bottom});
},
/**
* Returns true if this toolbar is currently visible, or false otherwise.
* @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
*/
isVisible() {
return this.toolbar.is(":visible");
},
/**
* Hides the bottom toolbar with animation or not depending on the animate
* parameter.
* @param animate <tt>true</tt> to hide the bottom toolbar with animation,
* <tt>false</tt> or nothing to hide it without animation.
*/
hide(animate) {
if (animate)
this.toolbar.hide("slide", {direction: "right", duration: 300});
else
this.toolbar.css("display", "none");
},
/**
* Shows the bottom toolbar with animation or not depending on the animate
* parameter.
* @param animate <tt>true</tt> to show the bottom toolbar with animation,
* <tt>false</tt> or nothing to show it without animation.
*/
show(animate) {
if (animate)
this.toolbar.show("slide", {direction: "right", duration: 300});
else
this.toolbar.css("display", "block");
}
};
export default BottomToolbar;

48
modules/UI/toolbars/Toolbar.js
View File

@ -2,6 +2,7 @@
/* jshint -W101 */
import UIUtil from '../util/UIUtil';
import UIEvents from '../../../service/UI/UIEvents';
import ExtendedToolbarToggler from "../side_pannels/ExtendedToolbarToggler.js";
let roomUrl = null;
let emitter = null;
@ -92,6 +93,11 @@ const buttonHandlers = {
JitsiMeetJS.analytics.sendEvent('toolbar.chat.toggled');
emitter.emit(UIEvents.TOGGLE_CHAT);
},
"toolbar_contact_list": function () {
JitsiMeetJS.analytics.sendEvent(
'toolbar.contacts.toggled');
emitter.emit(UIEvents.TOGGLE_CONTACT_LIST);
},
"toolbar_button_etherpad": function () {
JitsiMeetJS.analytics.sendEvent('toolbar.etherpad.clicked');
emitter.emit(UIEvents.ETHERPAD_CLICKED);
@ -150,6 +156,11 @@ const buttonHandlers = {
}
}
);
},
"toolbar_film_strip": function () {
JitsiMeetJS.analytics.sendEvent(
'bottomtoolbar.filmstrip.toggled');
emitter.emit(UIEvents.TOGGLE_FILM_STRIP);
}
};
const defaultToolbarButtons = {
@ -199,6 +210,9 @@ const defaultToolbarButtons = {
},
shortcutDescription: "keyboardShortcuts.toggleChat"
},
'contacts': {
id: '#toolbar_contact_list'
},
'etherpad': {
id: '#toolbar_button_etherpad'
},
@ -210,6 +224,16 @@ const defaultToolbarButtons = {
},
'hangup': {
id: '#toolbar_button_hangup'
},
'filmstrip': {
id: '#toolbar_film_strip',
shortcut: "F",
shortcutAttr: "filmstripPopover",
shortcutFunc: function() {
JitsiMeetJS.analytics.sendEvent("shortcut.film.toggled");
APP.UI.toggleFilmStrip();
},
shortcutDescription: "keyboardShortcuts.toggleFilmstrip"
}
};
@ -242,7 +266,8 @@ const Toolbar = {
emitter = eventEmitter;
// The toolbar is enabled by default.
this.enabled = true;
this.toolbarSelector = $("#header");
this.toolbarSelector = $("#mainToolbarContainer");
this.extendedToolbarSelector = $("#extendedToolbar");
UIUtil.hideDisabledButtons(defaultToolbarButtons);
@ -507,7 +532,9 @@ const Toolbar = {
});
if (hovered)
return true;
if ($("#bottomToolbar:hover").length > 0) {
if ($("#bottomToolbar:hover").length > 0
|| $("#extendedToolbar:hover").length > 0
|| ExtendedToolbarToggler.isVisible()) {
return true;
}
return false;
@ -518,7 +545,7 @@ const Toolbar = {
* @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
*/
isVisible() {
return this.toolbarSelector.is(":visible");
return this.toolbarSelector.hasClass("slideInY");
},
/**
@ -526,8 +553,9 @@ const Toolbar = {
* parameter.
*/
hide() {
this.toolbarSelector.hide(
"slide", { direction: "up", duration: 300});
this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
this.extendedToolbarSelector.toggleClass("slideInX")
.toggleClass("slideOutX");
},
/**
@ -535,8 +563,14 @@ const Toolbar = {
* parameter.
*/
show() {
this.toolbarSelector.show(
"slide", { direction: "up", duration: 300});
if (this.toolbarSelector.hasClass("slideOutY"))
this.toolbarSelector.toggleClass("slideOutY");
if (this.extendedToolbarSelector.hasClass("slideOutX"))
this.extendedToolbarSelector.toggleClass("slideOutX");
this.toolbarSelector.toggleClass("slideInY");
this.extendedToolbarSelector.toggleClass("slideInX");
}
};

9
modules/UI/toolbars/ToolbarToggler.js
View File

@ -1,7 +1,6 @@
/* global APP, config, $, interfaceConfig */
import UIUtil from '../util/UIUtil';
import BottomToolbar from './BottomToolbar';
import Toolbar from './Toolbar';
import FilmStrip from '../videolayout/FilmStrip.js';
@ -37,9 +36,6 @@ function hideToolbar() {
} else {
Toolbar.hide();
$('#subject').animate({top: "-=40"}, 300);
if (!FilmStrip.isFilmStripVisible()) {
BottomToolbar.hide(true);
}
}
}
@ -78,11 +74,6 @@ const ToolbarToggler = {
updateTimeout = true;
}
if (BottomToolbar.isEnabled() && !BottomToolbar.isVisible()) {
BottomToolbar.show(true);
updateTimeout = true;
}
if (updateTimeout) {
if (toolbarTimeoutObject) {
clearTimeout(toolbarTimeoutObject);

21
modules/UI/util/UIUtil.js
View File

@ -5,31 +5,12 @@
*/
var UIUtil = {
/**
* Returns the size of the side panel.
*/
getSidePanelSize () {
var availableHeight = window.innerHeight;
var availableWidth = window.innerWidth;
var panelWidth = 200;
if (availableWidth * 0.2 < 200) {
panelWidth = availableWidth * 0.2;
}
return [panelWidth, availableHeight];
},
/**
* Returns the available video width.
*/
getAvailableVideoWidth: function (isSidePanelVisible) {
getAvailableVideoWidth: function () {
let rightPanelWidth = 0;
if (isSidePanelVisible) {
rightPanelWidth = UIUtil.getSidePanelSize()[0];
}
return window.innerWidth - rightPanelWidth;
},

6
modules/UI/videolayout/FilmStrip.js
View File

@ -68,10 +68,8 @@ const FilmStrip = {
/**
* Calculates the thumbnail size.
* @param videoAreaAvailableWidth the currently available video area width
* that we want to take into account when calculating the film strip width.
*/
calculateThumbnailSize (isSideBarVisible) {
calculateThumbnailSize () {
let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
let numvids = this.getThumbs(true).length;
@ -84,7 +82,7 @@ const FilmStrip = {
* film strip size hasn't been updated yet, but it will be.
*/
let videoAreaAvailableWidth
= UIUtil.getAvailableVideoWidth(isSideBarVisible)
= UIUtil.getAvailableVideoWidth()
- UIUtil.parseCssInt(this.filmStrip.css('right'), 10)
- UIUtil.parseCssInt(this.filmStrip.css('paddingLeft'), 10)
- UIUtil.parseCssInt(this.filmStrip.css('paddingRight'), 10)

7
modules/UI/videolayout/LargeVideo.js
View File

@ -536,11 +536,10 @@ export default class LargeVideoManager {
}
/**
* Update container size optionally taking side bar size into account.
* @param {boolean} isSideBarVisible if side bar is visible.
* Update container size.
*/
updateContainerSize (isSideBarVisible) {
this.width = UIUtil.getAvailableVideoWidth(isSideBarVisible);
updateContainerSize () {
this.width = UIUtil.getAvailableVideoWidth();
this.height = window.innerHeight;
}

23
modules/UI/videolayout/VideoLayout.js
View File

@ -3,7 +3,6 @@
import AudioLevels from "../audio_levels/AudioLevels";
import Avatar from "../avatar/Avatar";
import BottomToolbar from "../toolbars/BottomToolbar";
import FilmStrip from "./FilmStrip";
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from "../util/UIUtil";
@ -12,7 +11,6 @@ import RemoteVideo from "./RemoteVideo";
import LargeVideoManager, {VIDEO_CONTAINER_TYPE} from "./LargeVideo";
import {SHARED_VIDEO_CONTAINER_TYPE} from '../shared_video/SharedVideo';
import LocalVideo from "./LocalVideo";
import PanelToggler from "../side_pannels/SidePanelToggler";
const RTCUIUtil = JitsiMeetJS.util.RTCUIHelper;
@ -115,12 +113,12 @@ var VideoLayout = {
this.lastNCount = config.channelLastN;
},
initLargeVideo (isSideBarVisible) {
initLargeVideo () {
largeVideo = new LargeVideoManager();
if(localFlipX) {
largeVideo.onLocalFlipXChange(localFlipX);
}
largeVideo.updateContainerSize(isSideBarVisible);
largeVideo.updateContainerSize();
AudioLevels.init();
},
@ -487,21 +485,16 @@ var VideoLayout = {
*/
resizeThumbnails ( animate = false,
forceUpdate = false,
isSideBarVisible = null,
onComplete = null) {
isSideBarVisible
= (isSideBarVisible !== null)
? isSideBarVisible : PanelToggler.isVisible();
let {thumbWidth, thumbHeight}
= FilmStrip.calculateThumbnailSize(isSideBarVisible);
= FilmStrip.calculateThumbnailSize();
$('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
animate, forceUpdate)
.then(function () {
BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
if (onComplete && typeof onComplete === "function")
onComplete();
@ -891,31 +884,29 @@ var VideoLayout = {
/**
* Resizes the video area.
*
* @param isSideBarVisible indicates if the side bar is currently visible
* @param forceUpdate indicates that hidden thumbnails will be shown
* @param completeFunction a function to be called when the video area is
* resized.
*/
resizeVideoArea (isSideBarVisible,
forceUpdate = false,
resizeVideoArea (forceUpdate = false,
animate = false,
completeFunction = null) {
if (largeVideo) {
largeVideo.updateContainerSize(isSideBarVisible);
largeVideo.updateContainerSize();
largeVideo.resize(animate);
}
// Calculate available width and height.
let availableHeight = window.innerHeight;
let availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
let availableWidth = UIUtil.getAvailableVideoWidth();
if (availableWidth < 0 || availableHeight < 0) {
return;
}
// Resize the thumbnails first.
this.resizeThumbnails(false, forceUpdate, isSideBarVisible);
this.resizeThumbnails(false, forceUpdate);
// Resize the video area element.
$('#videospace').animate({