Fixes desktop positioning and sizing.

This commit is contained in:
paweldomas 2014-03-28 10:37:14 +01:00
parent 53c5c16f8d
commit dbc0966334
1 changed files with 48 additions and 16 deletions

64
app.js
View File

@ -27,6 +27,11 @@ var currentVideoHeight = null;
* @type {function()} * @type {function()}
*/ */
var getVideoSize; var getVideoSize;
/**
* Method used to get large video position.
* @type {function()}
*/
var getVideoPosition;
/* window.onbeforeunload = closePageWarning; */ /* window.onbeforeunload = closePageWarning; */
@ -720,8 +725,10 @@ function updateLargeVideo(newSrc, vol) {
document.getElementById('largeVideo').style.webkitTransform = "none"; document.getElementById('largeVideo').style.webkitTransform = "none";
} }
// Change the way we'll be measuring large video // Change the way we'll be measuring and positioning large video
getVideoSize = isVideoSrcDesktop(newSrc) ? getVideoSizeFit : getVideoSizeCover; var isDesktop = isVideoSrcDesktop(newSrc);
getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
getVideoPosition = isDesktop ? getDesktopVideoPosition : getCameraVideoPosition;
if (isVisible) if (isVisible)
$(this).fadeIn(300); $(this).fadeIn(300);
@ -849,10 +856,10 @@ var positionLarge = function(videoWidth, videoHeight) {
* @return an array with 2 elements, the horizontal indent and the vertical * @return an array with 2 elements, the horizontal indent and the vertical
* indent * indent
*/ */
var getVideoPosition = function ( videoWidth, function getCameraVideoPosition( videoWidth,
videoHeight, videoHeight,
videoSpaceWidth, videoSpaceWidth,
videoSpaceHeight) { videoSpaceHeight) {
// Parent height isn't completely calculated when we position the video in // Parent height isn't completely calculated when we position the video in
// full screen mode and this is why we use the screen height in this case. // full screen mode and this is why we use the screen height in this case.
// Need to think it further at some point and implement it properly. // Need to think it further at some point and implement it properly.
@ -866,7 +873,26 @@ var getVideoPosition = function ( videoWidth,
var verticalIndent = (videoSpaceHeight - videoHeight)/2; var verticalIndent = (videoSpaceHeight - videoHeight)/2;
return [horizontalIndent, verticalIndent]; return [horizontalIndent, verticalIndent];
}; }
/**
* Returns an array of the video horizontal and vertical indents.
* Centers horizontally and top aligns vertically.
*
* @return an array with 2 elements, the horizontal indent and the vertical
* indent
*/
function getDesktopVideoPosition( videoWidth,
videoHeight,
videoSpaceWidth,
videoSpaceHeight) {
var horizontalIndent = (videoSpaceWidth - videoWidth)/2;
var verticalIndent = 0;// Top aligned
return [horizontalIndent, verticalIndent];
}
/** /**
* Returns an array of the video dimensions, so that it covers the screen. * Returns an array of the video dimensions, so that it covers the screen.
@ -874,7 +900,7 @@ var getVideoPosition = function ( videoWidth,
* *
* @return an array with 2 elements, the video width and the video height * @return an array with 2 elements, the video width and the video height
*/ */
function getVideoSizeCover(videoWidth, function getCameraVideoSize(videoWidth,
videoHeight, videoHeight,
videoSpaceWidth, videoSpaceWidth,
videoSpaceHeight) { videoSpaceHeight) {
@ -907,10 +933,11 @@ function getVideoSizeCover(videoWidth,
* *
* @return an array with 2 elements, the video width and the video height * @return an array with 2 elements, the video width and the video height
*/ */
function getVideoSizeFit(videoWidth, function getDesktopVideoSize( videoWidth,
videoHeight, videoHeight,
videoSpaceWidth, videoSpaceWidth,
videoSpaceHeight) { videoSpaceHeight )
{
if (!videoWidth) if (!videoWidth)
videoWidth = currentVideoWidth; videoWidth = currentVideoWidth;
if (!videoHeight) if (!videoHeight)
@ -921,12 +948,16 @@ function getVideoSizeFit(videoWidth,
var availableWidth = Math.max(videoWidth, videoSpaceWidth); var availableWidth = Math.max(videoWidth, videoSpaceWidth);
var availableHeight = Math.max(videoHeight, videoSpaceHeight); var availableHeight = Math.max(videoHeight, videoSpaceHeight);
if (availableWidth / aspectRatio >= videoSpaceHeight) { videoSpaceHeight -= $('#remoteVideos').outerHeight();
if (availableWidth / aspectRatio >= videoSpaceHeight)
{
availableHeight = videoSpaceHeight; availableHeight = videoSpaceHeight;
availableWidth = availableHeight*aspectRatio; availableWidth = availableHeight*aspectRatio;
} }
if (availableHeight*aspectRatio >= videoSpaceWidth) { if (availableHeight*aspectRatio >= videoSpaceWidth)
{
availableWidth = videoSpaceWidth; availableWidth = videoSpaceWidth;
availableHeight = availableWidth / aspectRatio; availableHeight = availableWidth / aspectRatio;
} }
@ -1005,8 +1036,9 @@ $(document).ready(function () {
// Set default desktop sharing method // Set default desktop sharing method
setDesktopSharing(config.desktopSharing); setDesktopSharing(config.desktopSharing);
// By default we cover the whole screen with video // By default we use camera
getVideoSize = getVideoSizeCover; getVideoSize = getCameraVideoSize;
getVideoPosition = getCameraVideoPosition;
resizeLargeVideoContainer(); resizeLargeVideoContainer();
$(window).resize(function () { $(window).resize(function () {