Browse Source

Improved Firefox support for video layout and make use of object-fit support in FF>=36.

pull/176/head
Simon Eisenmann 11 years ago
parent
commit
d12471445d
  1. 3
      src/styles/components/_audiovideo.scss
  2. 2
      static/css/main.min.css
  3. 84
      static/js/services/videolayout.js

3
src/styles/components/_audiovideo.scss

@ -97,7 +97,7 @@
z-index: 2; z-index: 2;
} }
video { video {
object-fit: contain; object-fit: cover;
} }
} }
@ -133,6 +133,7 @@
max-height: 100%; max-height: 100%;
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
width: 100%;
} }
.localVideo { .localVideo {
background: $video-background; background: $video-background;

2
static/css/main.min.css vendored

File diff suppressed because one or more lines are too long

84
static/js/services/videolayout.js

@ -22,13 +22,17 @@
"use strict"; "use strict";
define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modernizr) { define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modernizr) {
var dynamicCSSContainer = "audiovideo-dynamic";
var renderers = {}; var renderers = {};
var defaultSize = {
width: 640,
height: 360
};
var defaultAspectRatio = defaultSize.width/defaultSize.height;
var getRemoteVideoSize = function(videos, streams) { var getRemoteVideoSize = function(videos, streams) {
var size = { var size = {
width: 1920, width: defaultSize.width,
height: 1080 height: defaultSize.height
} }
if (videos.length) { if (videos.length) {
if (videos.length === 1) { if (videos.length === 1) {
@ -41,7 +45,16 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
} }
} }
return size; return size;
} };
var dynamicCSSContainer = "audiovideo-dynamic";
var injectCSS = function(css) {
$.injectCSS(css, {
containerName: dynamicCSSContainer,
truncateFirst: true,
useRawValues: true
});
};
var objectFitSupport = Modernizr["object-fit"] && true; var objectFitSupport = Modernizr["object-fit"] && true;
@ -83,40 +96,31 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
} }
if (!videoWidth) { if (!videoWidth) {
videoWidth = 640; videoWidth = defaultSize.width;
} }
if (!videoHeight) { if (!videoHeight) {
videoHeight = 360; videoHeight = defaultSize.height;
} }
if (this.countSelfAsRemote) { if (this.countSelfAsRemote) {
videos.unshift(null); videos.unshift(null);
} }
var aspectRatio = videoWidth / videoHeight;
var innerHeight = size.height; var innerHeight = size.height;
var innerWidth = size.width; var innerWidth = size.width;
// We use the same aspect ratio to make all videos look the same.
var aspectRatio = defaultAspectRatio;
//console.log("resize", innerHeight, innerWidth); //console.log("resize", innerHeight, innerWidth);
//console.log("resize", container, videos.length, aspectRatio, innerHeight, innerWidth); //console.log("resize", container, videos.length, aspectRatio, innerHeight, innerWidth);
var extraCSS = {}; var extraCSS = {};
if (!objectFitSupport) { // Always set size of mini video.
// Make mini video fit into available space on browsers with no object-fit support.
// http://caniuse.com/object-fit
var aspectRatioLocal = scope.localVideo.videoWidth / scope.localVideo.videoHeight;
extraCSS = {};
extraCSS[".renderer-"+this.name+" .miniVideo"] = { extraCSS[".renderer-"+this.name+" .miniVideo"] = {
width: ($(scope.mini).height() * aspectRatioLocal) + "px" width: ($(scope.mini).height() * defaultAspectRatio) + "px"
}; };
}
if (videos.length === 1) {
var newVideoWidth = innerWidth < aspectRatio * innerHeight ? innerWidth : aspectRatio * innerHeight;
var newVideoHeight = innerHeight < innerWidth / aspectRatio ? innerHeight : innerWidth / aspectRatio;
container.style.width = newVideoWidth + 'px';
container.style.left = ((innerWidth - newVideoWidth) / 2) + 'px';
} else {
var space = innerHeight * innerWidth; // square pixels var space = innerHeight * innerWidth; // square pixels
var videoSpace = space / videos.length; var videoSpace = space / videos.length;
var singleVideoWidthOptimal = Math.pow(videoSpace * aspectRatio, 0.5); var singleVideoWidthOptimal = Math.pow(videoSpace * aspectRatio, 0.5);
@ -143,20 +147,14 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
*/ */
container.style.width = newContainerWidth + "px"; container.style.width = newContainerWidth + "px";
container.style.left = ((innerWidth - newContainerWidth) / 2) + 'px'; container.style.left = ((innerWidth - newContainerWidth) / 2) + 'px';
var extraCSS2 = {}; extraCSS[".renderer-"+this.name+" .remoteVideos"] = {
extraCSS2[".renderer-"+this.name+" .remoteVideos"] = {
">div": { ">div": {
width: singleVideoWidth + "px", width: singleVideoWidth + "px",
height: singleVideoHeight + "px" height: singleVideoHeight + "px"
} }
}; };
extraCSS = $.extend(extraCSS, extraCSS2);
} injectCSS(extraCSS);
$.injectCSS(extraCSS, {
truncateFirst: true,
containerName: dynamicCSSContainer,
useRawValues: true
});
}; };
@ -255,33 +253,32 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
} }
var remoteSize = getRemoteVideoSize(videos, streams);
var aspectRatio = remoteSize.width / remoteSize.height;
var innerHeight = size.height - 110; var innerHeight = size.height - 110;
var innerWidth = size.width; var innerWidth = size.width;
var extraCSS = {}; var extraCSS = {};
// Use the same aspect ratio for all videos.
var aspectRatio = defaultAspectRatio;
var bigVideoWidth = innerWidth < aspectRatio * innerHeight ? innerWidth : aspectRatio * innerHeight; var bigVideoWidth = innerWidth < aspectRatio * innerHeight ? innerWidth : aspectRatio * innerHeight;
var bigVideoHeight = innerHeight < innerWidth / aspectRatio ? innerHeight : innerWidth / aspectRatio; var bigVideoHeight = innerHeight < innerWidth / aspectRatio ? innerHeight : innerWidth / aspectRatio;
this.bigVideo.style.width = bigVideoWidth + 'px';
this.bigVideo.style.height = bigVideoHeight + 'px';
// Make space for own video on the right if width goes low. // Make space for own video on the right if width goes low.
if (((size.width - (videos.length - 1) * 192) / 2) < 192) { if (((size.width - (videos.length - 1) * 192) / 2) < 192) {
extraCSS = {};
extraCSS[".renderer-"+this.name+" .remoteVideos"] = { extraCSS[".renderer-"+this.name+" .remoteVideos"] = {
"margin-right": "192px", "margin-right": "192px",
"overflow-x": "auto", "overflow-x": "auto",
"overflow-y": "hidden" "overflow-y": "hidden"
}; };
} }
// Big video size.
extraCSS[".renderer-"+this.name+" .bigVideo .remoteVideo"] = {
"height": bigVideoHeight + 'px',
"width": bigVideoWidth + 'px',
"margin": "auto",
"display": "block"
};
$.injectCSS(extraCSS, { injectCSS(extraCSS);
truncateFirst: true,
containerName: dynamicCSSContainer,
useRawValues: true
});
}; };
@ -320,8 +317,13 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
this.makeBig(streams[videos[0]].element); this.makeBig(streams[videos[0]].element);
this.bigVideo.style.opacity = 1; this.bigVideo.style.opacity = 1;
} }
} }
var extraCSS = {};
// Always set size of mini video.
extraCSS[".renderer-"+this.name+" .miniVideo"] = {
width: ($(scope.mini).height() * defaultAspectRatio) + "px"
};
injectCSS(extraCSS);
}; };
// Register renderers. // Register renderers.

Loading…
Cancel
Save