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

Fixes desktop streaming layout.

This commit is contained in:
yanas 2015-11-13 11:04:49 -06:00
parent 4b62f7f0ac
commit 26e2fd6ef0
5 changed files with 108 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/UI/UI.js
View File

@ -107,7 +107,7 @@ function setupChat() {
function setupToolbars() {
Toolbar.init(UI);
Toolbar.setupButtonsFromConfig();
BottomToolbar.init();
BottomToolbar.init(eventEmitter);
}
function streamHandler(stream, isMuted) {
@ -343,6 +343,10 @@ function registerListeners() {
AudioLevels.init();
});
UI.addListener(UIEvents.FILM_STRIP_TOGGLED, function (isToggled) {
VideoLayout.onFilmStripToggled(isToggled);
});
if (!interfaceConfig.filmStripOnly) {
APP.xmpp.addListener(XMPPEvents.MESSAGE_RECEIVED, updateChatConversation);
APP.xmpp.addListener(XMPPEvents.CHAT_ERROR_RECEIVED, chatAddError);

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

@ -2,6 +2,9 @@
var PanelToggler = require("../side_pannels/SidePanelToggler");
var UIUtil = require("../util/UIUtil");
var AnalyticsAdapter = require("../../statistics/AnalyticsAdapter");
var UIEvents = require("../../../service/UI/UIEvents");
var eventEmitter = null;
var buttonHandlers = {
"bottom_toolbar_contact_list": function () {
@ -27,7 +30,8 @@ var defaultBottomToolbarButtons = {
var BottomToolbar = (function (my) {
my.init = function () {
my.init = function (emitter) {
eventEmitter = emitter;
UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
for(var k in buttonHandlers)
@ -45,6 +49,9 @@ var BottomToolbar = (function (my) {
my.toggleFilmStrip = function() {
var filmstrip = $("#remoteVideos");
filmstrip.toggleClass("hidden");
eventEmitter.emit( UIEvents.FILM_STRIP_TOGGLED,
filmstrip.hasClass("hidden"));
};
$(document).bind("remotevideo.resized", function (event, width, height) {

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

@ -115,7 +115,10 @@ function getDesktopVideoSize(videoWidth,
var availableWidth = Math.max(videoWidth, videoSpaceWidth);
var availableHeight = Math.max(videoHeight, videoSpaceHeight);
videoSpaceHeight -= $('#remoteVideos').outerHeight();
var filmstrip = $("#remoteVideos");
if (!filmstrip.hasClass("hidden"))
videoSpaceHeight -= filmstrip.outerHeight();
if (availableWidth / aspectRatio >= videoSpaceHeight)
{
@ -268,13 +271,7 @@ function changeVideo(isVisible) {
largeVideoElement.style.transform = flipX ? "scaleX(-1)" : "none";
var isDesktop = currentSmallVideo.getVideoType() === 'screen';
// Change the way we'll be measuring and positioning large video
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
getVideoPosition = isDesktop ? getDesktopVideoPosition :
getCameraVideoPosition;
LargeVideo.updateVideoSizeAndPosition(currentSmallVideo.getVideoType());
// Only if the large video is currently visible.
if (isVisible) {
@ -451,10 +448,8 @@ var LargeVideo = {
return;
if (LargeVideo.isCurrentlyOnLarge(resourceJid))
{
var isDesktop = newVideoType === 'screen';
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
getVideoPosition = isDesktop ? getDesktopVideoPosition
: getCameraVideoPosition;
LargeVideo.updateVideoSizeAndPosition(newVideoType);
this.position(null, null, null, null, true);
}
},
@ -496,17 +491,23 @@ var LargeVideo = {
},
/**
* Resizes the large html elements.
* @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 pannel visibility.
* @param completeFunction a function to be called when the video space is resized
* @returns {*[]} array with the current width and height values of the largeVideo html element.
*
* @param animate boolean property that indicates whether the resize should
* be animated or not.
* @param isSideBarVisible 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
* @returns {*[]} array with the current width and height values of the
* largeVideo html element.
*/
resize: function (animate, isVisible, completeFunction) {
resize: function (animate, isSideBarVisible, completeFunction) {
if(!isEnabled)
return;
var availableHeight = window.innerHeight;
var availableWidth = UIUtil.getAvailableVideoWidth(isVisible);
var availableWidth = UIUtil.getAvailableVideoWidth(isSideBarVisible);
if (availableWidth < 0 || availableHeight < 0) return;
@ -514,7 +515,8 @@ var LargeVideo = {
var top = availableHeight / 2 - avatarSize / 4 * 3;
$('#activeSpeaker').css('top', top);
this.VideoLayout.resizeVideoSpace(animate, isVisible, completeFunction);
this.VideoLayout
.resizeVideoSpace(animate, isSideBarVisible, completeFunction);
if(animate) {
$('#largeVideoContainer').animate({
width: availableWidth,
@ -530,12 +532,36 @@ var LargeVideo = {
}
return [availableWidth, availableHeight];
},
resizeVideoAreaAnimated: function (isVisible, completeFunction) {
/**
* Resizes the large video.
*
* @param isSideBarVisible indicating if the side bar is visible
* @param completeFunction the callback function to be executed after the
* resize
*/
resizeVideoAreaAnimated: function (isSideBarVisible, completeFunction) {
if(!isEnabled)
return;
var size = this.resize(true, isVisible, completeFunction);
var size = this.resize(true, isSideBarVisible, completeFunction);
this.position(null, null, size[0], size[1], true);
},
/**
* Updates the video size and position.
*
* @param videoType the video type indicating if the stream is of type
* desktop or web cam
*/
updateVideoSizeAndPosition: function (videoType) {
if (!videoType)
videoType = currentSmallVideo.getVideoType();
var isDesktop = videoType === 'screen';
// Change the way we'll be measuring and positioning large video
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
getVideoPosition = isDesktop ? getDesktopVideoPosition :
getCameraVideoPosition;
},
getResourceJid: function () {
return currentSmallVideo ? currentSmallVideo.getResourceJid() : null;
},

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

@ -214,7 +214,8 @@ var VideoLayout = (function (my) {
my.handleVideoThumbClicked = function(noPinnedEndpointChangedEvent,
resourceJid) {
if(focusedVideoResourceJid) {
var oldSmallVideo = VideoLayout.getSmallVideo(focusedVideoResourceJid);
var oldSmallVideo
= VideoLayout.getSmallVideo(focusedVideoResourceJid);
if (oldSmallVideo && !interfaceConfig.filmStripOnly)
oldSmallVideo.focus(false);
}
@ -400,7 +401,8 @@ var VideoLayout = (function (my) {
if(animate) {
$('#remoteVideos').animate({
height: height + 2 // adds 2 px because of small video 1px border
// adds 2 px because of small video 1px border
height: height + 2
},
{
queue: false,
@ -425,7 +427,8 @@ var VideoLayout = (function (my) {
} else {
// size videos so that while keeping AR and max height, we have a
// nice fit
$('#remoteVideos').height(height + 2);// adds 2 px because of small video 1px border
// adds 2 px because of small video 1px border
$('#remoteVideos').height(height + 2);
$('#remoteVideos>span').width(width);
$('#remoteVideos>span').height(height);
@ -439,10 +442,10 @@ var VideoLayout = (function (my) {
* @param videoSpaceWidth the width of the video space
*/
my.calculateThumbnailSize = function (videoSpaceWidth) {
// 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.
// 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.
var availableHeight = 100;
var numvids = $('#remoteVideos>span:visible').length;
@ -458,7 +461,11 @@ var VideoLayout = (function (my) {
var availableWidth = availableWinWidth / numvids;
var aspectRatio = 16.0 / 9.0;
var maxHeight = Math.min(160, availableHeight);
availableHeight = Math.min(maxHeight, availableWidth / aspectRatio, window.innerHeight - 18);
availableHeight
= Math.min( maxHeight,
availableWidth / aspectRatio,
window.innerHeight - 18);
if (availableHeight < availableWidth / aspectRatio) {
availableWidth = Math.floor(availableHeight * aspectRatio);
}
@ -882,6 +889,17 @@ var VideoLayout = (function (my) {
};
/**
* Updates the video size and position when the film strip is toggled.
*
* @param isToggled indicates if the film strip is toggled or not. True
* would mean that the film strip is hidden, false would mean it's shown
*/
my.onFilmStripToggled = function(isToggled) {
LargeVideo.updateVideoSizeAndPosition();
LargeVideo.position(null, null, null, null, true);
};
my.showMore = function (jid) {
if (jid === 'local') {
localVideoThumbnail.connectionIndicator.showMore();
@ -914,21 +932,27 @@ var VideoLayout = (function (my) {
};
/**
* Resizes the video area
* 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
* resized.
*/
my.resizeVideoArea = function(isVisible, callback) {
LargeVideo.resizeVideoAreaAnimated(isVisible, callback);
my.resizeVideoArea = function(isSideBarVisible, callback) {
LargeVideo.resizeVideoAreaAnimated(isSideBarVisible, callback);
VideoLayout.resizeThumbnails(true);
};
/**
* 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 pannel visibility.
* @param completeFunction a function to be called when the video space is resized
* @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.
*/
my.resizeVideoSpace = function (animate, isChatVisible, completeFunction) {
var availableHeight = window.innerHeight;
@ -998,7 +1022,8 @@ var VideoLayout = (function (my) {
LargeVideo.enableVideoProblemFilter(true);
var reconnectingKey = "connection.RECONNECTING";
$('#videoConnectionMessage').attr("data-i18n", reconnectingKey);
$('#videoConnectionMessage').text(APP.translation.translateString(reconnectingKey));
$('#videoConnectionMessage')
.text(APP.translation.translateString(reconnectingKey));
$('#videoConnectionMessage').css({display: "block"});
};

7
service/UI/UIEvents.js
View File

@ -2,6 +2,11 @@ var UIEvents = {
NICKNAME_CHANGED: "UI.nickname_changed",
SELECTED_ENDPOINT: "UI.selected_endpoint",
PINNED_ENDPOINT: "UI.pinned_endpoint",
LARGEVIDEO_INIT: "UI.largevideo_init"
LARGEVIDEO_INIT: "UI.largevideo_init",
/**
* Notifies interested parties when the film strip (remote video's panel)
* is hidden (toggled) or shown (un-toggled).
*/
FILM_STRIP_TOGGLED: "UI.filmstrip_toggled"
};
module.exports = UIEvents;