diff --git a/interface_config.js b/interface_config.js
index 1509f40b4..aae97d279 100644
--- a/interface_config.js
+++ b/interface_config.js
@@ -29,5 +29,6 @@ var interfaceConfig = {
*/
filmStripOnly: false,
RANDOM_AVATAR_URL_PREFIX: false,
- RANDOM_AVATAR_URL_SUFFIX: false
+ RANDOM_AVATAR_URL_SUFFIX: false,
+ FILM_STRIP_MAX_HEIGHT: 160
};
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index c75c7b926..359000fcb 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -16,6 +16,7 @@ import PreziManager from './prezi/Prezi';
import EtherpadManager from './etherpad/Etherpad';
import VideoLayout from "./videolayout/VideoLayout";
+import FilmStrip from "./videolayout/FilmStrip";
import SettingsMenu from "./side_pannels/settings/SettingsMenu";
import Settings from "./../settings/Settings";
import { reload } from '../util/helpers';
@@ -293,7 +294,7 @@ function registerListeners() {
function bindEvents() {
function onResize() {
PanelToggler.resizeChat();
- VideoLayout.resizeLargeVideoContainer(PanelToggler.isVisible());
+ VideoLayout.resizeVideoArea(PanelToggler.isVisible());
}
// Resize and reposition videos in full screen mode.
@@ -335,12 +336,13 @@ UI.start = function () {
registerListeners();
BottomToolbar.init();
+ FilmStrip.init();
VideoLayout.init(eventEmitter);
if (!interfaceConfig.filmStripOnly) {
VideoLayout.initLargeVideo(PanelToggler.isVisible());
}
- VideoLayout.resizeLargeVideoContainer(PanelToggler.isVisible(), true);
+ VideoLayout.resizeVideoArea(PanelToggler.isVisible(), true, true);
ContactList.init(eventEmitter);
@@ -368,9 +370,9 @@ UI.start = function () {
});
} else {
$("#header").css("display", "none");
- $("#bottomToolbar").css("display", "none");
$("#downloadlog").css("display", "none");
- BottomToolbar.setupFilmStripOnly();
+ BottomToolbar.hide();
+ FilmStrip.setupFilmStripOnly();
messageHandler.disableNotifications();
$('body').popover("disable");
JitsiPopover.enabled = false;
@@ -599,7 +601,7 @@ UI.getSettings = function () {
* Toggles film strip.
*/
UI.toggleFilmStrip = function () {
- BottomToolbar.toggleFilmStrip();
+ FilmStrip.toggleFilmStrip();
};
/**
diff --git a/modules/UI/audio_levels/AudioLevels.js b/modules/UI/audio_levels/AudioLevels.js
index 437216501..7e1bc68dd 100644
--- a/modules/UI/audio_levels/AudioLevels.js
+++ b/modules/UI/audio_levels/AudioLevels.js
@@ -2,7 +2,7 @@
/* jshint -W101 */
import CanvasUtil from './CanvasUtils';
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip';
const LOCAL_LEVEL = 'local';
@@ -228,7 +228,7 @@ const AudioLevels = {
let canvasWidth = thumbWidth + interfaceConfig.CANVAS_EXTRA;
let canvasHeight = thumbHeight + interfaceConfig.CANVAS_EXTRA;
- BottomToolbar.getThumbs().children('canvas').each(function () {
+ FilmStrip.getThumbs().children('canvas').each(function () {
$(this).attr('width', canvasWidth);
$(this).attr('height', canvasHeight);
});
diff --git a/modules/UI/etherpad/Etherpad.js b/modules/UI/etherpad/Etherpad.js
index 1ae49289f..f5f58f921 100644
--- a/modules/UI/etherpad/Etherpad.js
+++ b/modules/UI/etherpad/Etherpad.js
@@ -4,7 +4,7 @@ import VideoLayout from "../videolayout/VideoLayout";
import LargeContainer from '../videolayout/LargeContainer';
import UIUtil from "../util/UIUtil";
import SidePanelToggler from "../side_pannels/SidePanelToggler";
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip';
/**
* Etherpad options.
@@ -101,7 +101,7 @@ class Etherpad extends LargeContainer {
}
resize (containerWidth, containerHeight, animate) {
- let height = containerHeight - BottomToolbar.getFilmStripHeight();
+ let height = containerHeight - FilmStrip.getFilmStripHeight();
let width = containerWidth;
$(this.iframe).width(width).height(height);
diff --git a/modules/UI/prezi/Prezi.js b/modules/UI/prezi/Prezi.js
index c9526b891..da2b41cb5 100644
--- a/modules/UI/prezi/Prezi.js
+++ b/modules/UI/prezi/Prezi.js
@@ -9,7 +9,7 @@ import UIEvents from '../../../service/UI/UIEvents';
import messageHandler from '../util/MessageHandler';
import ToolbarToggler from "../toolbars/ToolbarToggler";
import SidePanelToggler from "../side_pannels/SidePanelToggler";
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip';
/**
* Example of Prezi link.
@@ -287,7 +287,7 @@ class PreziContainer extends LargeContainer {
}
resize (containerWidth, containerHeight) {
- let height = containerHeight - BottomToolbar.getFilmStripHeight();
+ let height = containerHeight - FilmStrip.getFilmStripHeight();
let width = containerWidth;
diff --git a/modules/UI/side_pannels/SidePanelToggler.js b/modules/UI/side_pannels/SidePanelToggler.js
index 55836556c..6fe56bba3 100644
--- a/modules/UI/side_pannels/SidePanelToggler.js
+++ b/modules/UI/side_pannels/SidePanelToggler.js
@@ -96,11 +96,14 @@ var PanelToggler = {
$('#chatspace').trigger('shown');
};
- VideoLayout.resizeVideoArea(!Chat.isVisible(), chatCompleteFunction);
+ VideoLayout.resizeVideoArea(!Chat.isVisible(),
+ false,
+ true,
+ chatCompleteFunction);
- toggle(Chat,
- '#chatspace',
- function () {
+ toggle(Chat, //Object
+ '#chatspace', // Selector
+ function () { //onOpenComplete
// Request the focus in the nickname field or the chat input
// field.
if ($('#nickname').css('visibility') === 'visible') {
@@ -109,9 +112,8 @@ var PanelToggler = {
$('#usermsg').focus();
}
},
- null,
- () => this.resizeChat(),
- null);
+ () => this.resizeChat(), //OnOpen
+ null); //OnClose
},
resizeChat () {
@@ -128,7 +130,11 @@ var PanelToggler = {
: function () {
$('#contactlist').trigger('shown');
};
- VideoLayout.resizeVideoArea(!ContactList.isVisible(), completeFunction);
+ VideoLayout.resizeVideoArea(
+ !ContactList.isVisible(),
+ false,
+ true,
+ completeFunction);
toggle(ContactList,
'#contactlist',
@@ -143,7 +149,8 @@ var PanelToggler = {
* Opens / closes the settings menu
*/
toggleSettingsMenu () {
- VideoLayout.resizeVideoArea(!SettingsMenu.isVisible(), function (){});
+ VideoLayout.resizeVideoArea(
+ !SettingsMenu.isVisible(), false, true, function (){});
toggle(SettingsMenu,
'#settingsmenu',
null,
diff --git a/modules/UI/toolbars/BottomToolbar.js b/modules/UI/toolbars/BottomToolbar.js
index eff37614b..eae97444a 100644
--- a/modules/UI/toolbars/BottomToolbar.js
+++ b/modules/UI/toolbars/BottomToolbar.js
@@ -1,4 +1,4 @@
-/* global $ */
+/* global $, APP, interfaceConfig*/
import UIUtil from '../util/UIUtil';
import UIEvents from '../../../service/UI/UIEvents';
import AnalyticsAdapter from '../../statistics/AnalyticsAdapter';
@@ -11,7 +11,6 @@ const defaultBottomToolbarButtons = {
const BottomToolbar = {
init () {
- this.filmStrip = $('#remoteVideos');
this.toolbar = $('#bottomToolbar');
},
@@ -38,71 +37,43 @@ const BottomToolbar = {
);
},
- toggleFilmStrip () {
- this.filmStrip.toggleClass("hidden");
- },
-
- isFilmStripVisible () {
- return !this.filmStrip.hasClass('hidden');
- },
-
- setupFilmStripOnly () {
- this.filmStrip.css({
- padding: "0px 0px 18px 0px",
- right: 0
- });
- },
-
- getFilmStripHeight () {
- if (this.isFilmStripVisible()) {
- return this.filmStrip.outerHeight();
- } else {
- return 0;
- }
- },
-
- getFilmStripWidth () {
- return this.filmStrip.width();
- },
-
- resizeThumbnails (thumbWidth, thumbHeight,
- animate = false, forceUpdate = false) {
- return new Promise(resolve => {
- this.filmStrip.animate({
- // adds 2 px because of small video 1px border
- height: thumbHeight + 2
- }, {
- queue: false,
- duration: animate ? 500 : 0
- });
-
- this.getThumbs(!forceUpdate).animate({
- height: thumbHeight,
- width: thumbWidth
- }, {
- queue: false,
- duration: animate ? 500 : 0,
- complete: resolve
- });
-
- if (!animate) {
- resolve();
- }
- });
- },
-
resizeToolbar (thumbWidth, thumbHeight) {
let bottom = (thumbHeight - this.toolbar.outerHeight())/2 + 18;
this.toolbar.css({bottom});
},
- getThumbs (only_visible = false) {
- let selector = 'span';
- if (only_visible) {
- selector += ':visible';
- }
+ /**
+ * Returns true if this toolbar is currently visible, or false otherwise.
+ * @return true if currently visible, false - otherwise
+ */
+ isVisible() {
+ return this.toolbar.is(":visible");
+ },
- return this.filmStrip.children(selector);
+ /**
+ * Hides the bottom toolbar with animation or not depending on the animate
+ * parameter.
+ * @param animate true to hide the bottom toolbar with animation,
+ * false 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 true to show the bottom toolbar with animation,
+ * false 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");
}
};
diff --git a/modules/UI/toolbars/ToolbarToggler.js b/modules/UI/toolbars/ToolbarToggler.js
index 16c6bb94e..698aef269 100644
--- a/modules/UI/toolbars/ToolbarToggler.js
+++ b/modules/UI/toolbars/ToolbarToggler.js
@@ -2,6 +2,7 @@
import UIUtil from '../util/UIUtil';
import BottomToolbar from './BottomToolbar';
+import FilmStrip from '../videolayout/FilmStrip.js';
let toolbarTimeoutObject;
let toolbarTimeout = interfaceConfig.INITIAL_TOOLBAR_TIMEOUT;
@@ -28,7 +29,6 @@ function hideToolbar() {
}
let header = $("#header");
- let bottomToolbar = $("#bottomToolbar");
let isToolbarHover = false;
header.find('*').each(function () {
let id = $(this).attr('id');
@@ -48,10 +48,8 @@ function hideToolbar() {
} else {
header.hide("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "-=40"}, 300);
- if (!BottomToolbar.isFilmStripVisible()) {
- bottomToolbar.hide(
- "slide", {direction: "right", duration: 300}
- );
+ if (!FilmStrip.isFilmStripVisible()) {
+ BottomToolbar.hide(true);
}
}
}
@@ -65,14 +63,11 @@ const ToolbarToggler = {
return;
}
let header = $("#header");
- let bottomToolbar = $("#bottomToolbar");
- if (!header.is(':visible') || !bottomToolbar.is(":visible")) {
+ if (!header.is(':visible') || !BottomToolbar.isVisible()) {
header.show("slide", { direction: "up", duration: 300});
$('#subject').animate({top: "+=40"}, 300);
- if (!bottomToolbar.is(":visible")) {
- bottomToolbar.show(
- "slide", {direction: "right", duration: 300}
- );
+ if (!BottomToolbar.isVisible()) {
+ BottomToolbar.show(true);
}
if (toolbarTimeoutObject) {
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index 50d9f85fa..b31589e7b 100644
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@@ -32,6 +32,7 @@
return window.innerWidth - rightPanelWidth;
},
+
/**
* Changes the style class of the element given by id.
*/
diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js
new file mode 100644
index 000000000..016e90b93
--- /dev/null
+++ b/modules/UI/videolayout/FilmStrip.js
@@ -0,0 +1,140 @@
+/* global $, APP, interfaceConfig, config*/
+
+import UIUtil from "../util/UIUtil";
+
+const thumbAspectRatio = 16.0 / 9.0;
+
+const FilmStrip = {
+ init () {
+ this.filmStrip = $('#remoteVideos');
+ },
+
+ toggleFilmStrip () {
+ this.filmStrip.toggleClass("hidden");
+ },
+
+ isFilmStripVisible () {
+ return !this.filmStrip.hasClass('hidden');
+ },
+
+ setupFilmStripOnly () {
+ this.filmStrip.css({
+ padding: "0px 0px 18px 0px",
+ right: 0
+ });
+ },
+
+ getFilmStripHeight () {
+ if (this.isFilmStripVisible()) {
+ return this.filmStrip.outerHeight();
+ } else {
+ return 0;
+ }
+ },
+
+ getFilmStripWidth () {
+ return this.filmStrip.innerWidth()
+ - parseInt(this.filmStrip.css('paddingLeft'), 10)
+ - parseInt(this.filmStrip.css('paddingRight'), 10);
+ },
+
+ /**
+ * 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 (videoAreaAvailableWidth) {
+ // 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
+ // remoteVideos container used for highlighting shadow.
+ let availableHeight = 100;
+
+ let numvids = this.getThumbs(true).length;
+
+ let localVideoContainer = $("#localVideoContainer");
+
+ /**
+ * If the videoAreaAvailableWidth is set we use this one to calculate
+ * 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
+ - 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();
+
+
+ let availableWidth = Math.floor(
+ (filmStripWidth - 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;
+
+ 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
+ = Math.min( maxHeight,
+ availableWidth / thumbAspectRatio,
+ window.innerHeight - 18);
+
+ if (availableHeight < availableWidth / thumbAspectRatio) {
+ availableWidth = Math.floor(availableHeight * thumbAspectRatio);
+ }
+
+ return {
+ thumbWidth: availableWidth,
+ thumbHeight: availableHeight
+ };
+ },
+
+ resizeThumbnails (thumbWidth, thumbHeight,
+ animate = false, forceUpdate = false) {
+
+ return new Promise(resolve => {
+ this.getThumbs(!forceUpdate).animate({
+ height: thumbHeight,
+ width: thumbWidth
+ }, {
+ queue: false,
+ duration: animate ? 500 : 0,
+ complete: resolve
+ });
+
+ this.filmStrip.animate({
+ // adds 2 px because of small video 1px border
+ height: thumbHeight + 2
+ }, {
+ queue: false,
+ duration: animate ? 500 : 0
+ });
+
+ if (!animate) {
+ resolve();
+ }
+ });
+ },
+
+ getThumbs (only_visible = false) {
+ let selector = 'span';
+ if (only_visible) {
+ selector += ':visible';
+ }
+
+ return this.filmStrip.children(selector);
+ }
+};
+
+export default FilmStrip;
diff --git a/modules/UI/videolayout/LargeVideo.js b/modules/UI/videolayout/LargeVideo.js
index 40148449c..9f27bb8b2 100644
--- a/modules/UI/videolayout/LargeVideo.js
+++ b/modules/UI/videolayout/LargeVideo.js
@@ -4,7 +4,7 @@
import UIUtil from "../util/UIUtil";
import UIEvents from "../../../service/UI/UIEvents";
import LargeContainer from './LargeContainer';
-import BottomToolbar from '../toolbars/BottomToolbar';
+import FilmStrip from './FilmStrip';
import Avatar from "../avatar/Avatar";
import {createDeferred} from '../../util/helpers';
@@ -43,7 +43,7 @@ function getDesktopVideoSize(videoWidth,
let availableWidth = Math.max(videoWidth, videoSpaceWidth);
let availableHeight = Math.max(videoHeight, videoSpaceHeight);
- videoSpaceHeight -= BottomToolbar.getFilmStripHeight();
+ videoSpaceHeight -= FilmStrip.getFilmStripHeight();
if (availableWidth / aspectRatio >= videoSpaceHeight) {
availableHeight = videoSpaceHeight;
diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js
index f0bb32155..bdff54c18 100644
--- a/modules/UI/videolayout/RemoteVideo.js
+++ b/modules/UI/videolayout/RemoteVideo.js
@@ -33,7 +33,7 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
if (APP.conference.isModerator) {
this.addRemoteVideoMenu();
}
- let {thumbWidth, thumbHeight} = this.VideoLayout.calculateThumbnailSize();
+ let {thumbWidth, thumbHeight} = this.VideoLayout.resizeThumbnails();
AudioLevels.updateAudioLevelCanvas(this.id, thumbWidth, thumbHeight);
return this.container;
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index b7f20e1e2..3cbbfebcc 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/modules/UI/videolayout/VideoLayout.js
@@ -4,7 +4,7 @@
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";
@@ -34,8 +34,6 @@ var eventEmitter = null;
*/
var focusedVideoResourceJid = null;
-const thumbAspectRatio = 16.0 / 9.0;
-
/**
* On contact list item clicked.
*/
@@ -149,9 +147,8 @@ var VideoLayout = {
let localId = APP.conference.localId;
this.onVideoTypeChanged(localId, stream.videoType);
- let {thumbWidth, thumbHeight} = this.calculateThumbnailSize();
- AudioLevels.updateAudioLevelCanvas(
- null, thumbWidth, thumbHeight);
+ let {thumbWidth, thumbHeight} = this.resizeThumbnails(false, true);
+ AudioLevels.updateAudioLevelCanvas(null, thumbWidth, thumbHeight);
if (!stream.isMuted()) {
localVideoThumbnail.changeVideo(stream);
@@ -221,7 +218,7 @@ var VideoLayout = {
electLastVisibleVideo () {
// pick the last visible video in the row
// if nobody else is left, this picks the local video
- let thumbs = BottomToolbar.getThumbs(true).filter('[id!="mixedstream"]');
+ let thumbs = FilmStrip.getThumbs(true).filter('[id!="mixedstream"]');
let lastVisible = thumbs.filter(':visible:last');
if (lastVisible.length) {
@@ -235,7 +232,7 @@ var VideoLayout = {
}
console.info("Last visible video no longer exists");
- thumbs = BottomToolbar.getThumbs();
+ thumbs = FilmStrip.getThumbs();
if (thumbs.length) {
let id = getPeerContainerResourceId(thumbs[0]);
if (remoteVideos[id]) {
@@ -345,7 +342,7 @@ var VideoLayout = {
// In case this is not currently in the last n we don't show it.
if (localLastNCount && localLastNCount > 0 &&
- BottomToolbar.getThumbs().length >= localLastNCount + 2) {
+ FilmStrip.getThumbs().length >= localLastNCount + 2) {
remoteVideo.showPeerContainer('hide');
} else {
VideoLayout.resizeThumbnails(false, true);
@@ -411,74 +408,26 @@ var VideoLayout = {
localVideoThumbnail.showAudioIndicator(isMuted);
},
- /**
- * Resizes the large video container.
- */
- resizeLargeVideoContainer (isSideBarVisible, forceUpdate) {
- let animate = false;
- if (largeVideo) {
- largeVideo.updateContainerSize(isSideBarVisible);
- largeVideo.resize(animate);
- }
- this.resizeVideoSpace(animate, isSideBarVisible);
- this.resizeThumbnails(false, forceUpdate);
- },
-
/**
* Resizes thumbnails.
*/
- resizeThumbnails (animate = false, forceUpdate = false) {
- let {thumbWidth, thumbHeight} = this.calculateThumbnailSize();
+ resizeThumbnails ( animate = false,
+ forceUpdate = false,
+ videoAreaAvailableWidth = null) {
+ let {thumbWidth, thumbHeight}
+ = FilmStrip.calculateThumbnailSize(videoAreaAvailableWidth);
$('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
- BottomToolbar.resizeThumbnails(thumbWidth, thumbHeight,
+ FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
animate, forceUpdate)
.then(function () {
BottomToolbar.resizeToolbar(thumbWidth, thumbHeight);
AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
});
+ return {thumbWidth, thumbHeight};
},
- /**
- * Calculates the thumbnail size.
- *
- */
- calculateThumbnailSize () {
- let videoSpaceWidth = BottomToolbar.getFilmStripWidth();
- // 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
- // remoteVideos container used for highlighting shadow.
- let availableHeight = 100;
-
- let numvids = BottomToolbar.getThumbs().length;
- if (localLastNCount && localLastNCount > 0) {
- numvids = Math.min(localLastNCount + 1, numvids);
- }
-
- // Remove the 3px borders arround videos and border around the remote
- // videos area and the 4 pixels between the local video and the others
- //TODO: Find out where the 4 pixels come from and remove them
- let availableWinWidth = videoSpaceWidth - 2 * 3 * numvids - 70 - 4;
-
- let availableWidth = availableWinWidth / numvids;
- let maxHeight = Math.min(160, availableHeight);
- availableHeight
- = Math.min( maxHeight,
- availableWidth / thumbAspectRatio,
- window.innerHeight - 18);
-
- if (availableHeight < availableWidth / thumbAspectRatio) {
- availableWidth = Math.floor(availableHeight * thumbAspectRatio);
- }
-
- return {
- thumbWidth: availableWidth,
- thumbHeight: availableHeight
- };
- },
-
/**
* On audio muted event.
*/
@@ -613,7 +562,7 @@ var VideoLayout = {
var updateLargeVideo = false;
// Handle LastN/local LastN changes.
- BottomToolbar.getThumbs().each(( index, element ) => {
+ FilmStrip.getThumbs().each(( index, element ) => {
var resourceJid = getPeerContainerResourceId(element);
var smallVideo = remoteVideos[resourceJid];
@@ -667,7 +616,8 @@ var VideoLayout = {
endpointsEnteringLastN.forEach(function (resourceJid) {
var remoteVideo = remoteVideos[resourceJid];
- remoteVideo.showPeerContainer('show');
+ if (remoteVideo)
+ remoteVideo.showPeerContainer('show');
if (!remoteVideo.isVisible()) {
console.log("Add to last N", resourceJid);
@@ -840,40 +790,31 @@ var VideoLayout = {
* Resizes the video area.
*
* @param isSideBarVisible indicates if the side bar is currently visible
- * @param callback a function to be called when the video space is
+ * @param forceUpdate indicates that hidden thumbnails will be shown
+ * @param completeFunction a function to be called when the video area is
* resized.
- */
- resizeVideoArea (isSideBarVisible, callback) {
- let animate = true;
+ */resizeVideoArea (isSideBarVisible,
+ forceUpdate = false,
+ animate = false,
+ completeFunction = null) {
if (largeVideo) {
largeVideo.updateContainerSize(isSideBarVisible);
largeVideo.resize(animate);
- this.resizeVideoSpace(animate, isSideBarVisible, callback);
}
- VideoLayout.resizeThumbnails(animate);
- },
-
- /**
- * Resizes the #videospace html element
- * @param animate boolean property that indicates whether the resize should
- * be animated or not.
- * @param isChatVisible boolean property that indicates whether the chat
- * area is displayed or not.
- * If that parameter is null the method will check the chat panel
- * visibility.
- * @param completeFunction a function to be called when the video space
- * is resized.
- */
- resizeVideoSpace (animate, isChatVisible, completeFunction) {
+ // Calculate available width and height.
let availableHeight = window.innerHeight;
- let availableWidth = UIUtil.getAvailableVideoWidth(isChatVisible);
+ let availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
if (availableWidth < 0 || availableHeight < 0) {
return;
}
+ // Resize the thumbnails first.
+ this.resizeThumbnails(false, forceUpdate, availableWidth);
+
+ // Resize the video area element.
$('#videospace').animate({
right: window.innerWidth - availableWidth,
width: availableWidth,
diff --git a/modules/keyboardshortcut/keyboardshortcut.js b/modules/keyboardshortcut/keyboardshortcut.js
index c43e8c43d..4f48af97d 100644
--- a/modules/keyboardshortcut/keyboardshortcut.js
+++ b/modules/keyboardshortcut/keyboardshortcut.js
@@ -47,7 +47,6 @@ function initShortcutHandlers() {
};
}
-
var KeyboardShortcut = {
init: function () {
initShortcutHandlers();