diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss index fd946f97..08d17a2c 100644 --- a/src/styles/components/_audiovideo.scss +++ b/src/styles/components/_audiovideo.scss @@ -47,18 +47,6 @@ right:260px; .withBuddylist.withChat #audiovideo { right:520px; } -.mainScreenshare { - #audiovideo { - width:150px; - .remoteVideo .peerlabel { - font-size:12px; - font-weight:bold; - } - .remoteVideo .peeractions i { - font-size:1em; - } - } -} .remoteVideo .peerlabel { -webkit-transition: color 500ms ease-out; @@ -96,6 +84,27 @@ right:520px; border:1px solid #9dd53a; } +.renderer-smally { + width:150px; + #remoteVideos { + padding-bottom: 85px; + } + #mini { + bottom:0px; + left:0px; + right:0px; + max-height:none; + height:85px; + } + .remoteVideo .peerlabel { + font-size:.9em; + font-weight:bold; + } + .remoteVideo .peeractions i { + font-size:1em; + } +} + .renderer-conferencekiosk { #remoteVideos { top:auto; diff --git a/static/js/directives/audiovideo.js b/static/js/directives/audiovideo.js index 6f85f496..1e02f0dd 100644 --- a/static/js/directives/audiovideo.js +++ b/static/js/directives/audiovideo.js @@ -82,12 +82,12 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ }); } scope.$emit("active", currentcall); - $scope.resize(); + $scope.redraw(); }, function() { peers[peerid] = scope; console.warn("We did not receive video data for remote stream", currentcall, stream, video); scope.$emit("active", currentcall); - $scope.resize(); + $scope.redraw(); }); scope.doChat = function() { $scope.$emit("startchat", currentcall.id, {autofocus: true, restore: true}); @@ -107,7 +107,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ subscope.element.remove(); } subscope.$destroy(); - $scope.resize(); + $scope.redraw(); } }; @@ -167,7 +167,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ } if ($scope.localVideo.videoWidth > 0) { $scope.localVideo.style.opacity = 1; - $scope.resize(); + $scope.redraw(); } else { count++; if (count < 100) { @@ -239,7 +239,6 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ $(scope.card).on("doubletap dblclick", _.debounce(scope.toggleFullscreen, 100, true)); - //scope.rendererName = "conferencekiosk"; scope.rendererName = "onepeople"; scope.renderersAvailable = videoLayout.layouts(); @@ -253,42 +252,46 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ } }; - var needsResize = false; - scope.resize = function() { - needsResize = true; + var needsRedraw = false; + scope.redraw = function() { + needsRedraw = true; }; - var resize = function() { + var redraw = function() { var size = { width: scope.layoutparent.width(), height: scope.layoutparent.height() } - videoLayout.update(getRendererName(), size, scope, controller); + var again = videoLayout.update(getRendererName(), size, scope, controller); + if (again) { + // Layout needs a redraw. + needsRedraw = true; + } }; // Make sure we draw on resize. - $($window).on("resize", scope.resize); + $($window).on("resize", scope.redraw); scope.$on("mainresize", function(event, main) { if (main) { - // Force onepeople renderer when we have a main view. - rendererName = "onepeople" + // Force smally renderer when we have a main view. + rendererName = "smally" } else if (rendererName) { rendererName = null; } - _.defer(scope.resize); + _.defer(scope.redraw); }); - scope.resize(); + scope.redraw(); // Make sure we draw when the renderer was changed. scope.$watch("rendererName", function() { - _.defer(scope.resize); + _.defer(scope.redraw); }); // Update function run in rendering thread. var update = function() { - if (needsResize) { - needsResize =false; - resize(); + if (needsRedraw) { + needsRedraw =false; + redraw(); } requestAnimationFrame(update); } diff --git a/static/js/services/videolayout.js b/static/js/services/videolayout.js index 17449c57..2af0e3e1 100644 --- a/static/js/services/videolayout.js +++ b/static/js/services/videolayout.js @@ -42,7 +42,7 @@ define(["jquery", "underscore"], function($, _) { // videoLayout return ["$window", function($window) { - // Video layout with all persons rendered the same size. + // Video layout with all videos rendered the same size. var OnePeople = function(container, scope, controller) { }; @@ -59,15 +59,6 @@ define(["jquery", "underscore"], function($, _) { if (videos.length) { var remoteSize = getRemoteVideoSize(videos, peers); - /*if (videos.length === 1) { - var remoteVideo = peers[videos[0]].element.find("video").get(0); - videoWidth = remoteVideo.videoWidth; - videoHeight = remoteVideo.videoHeight; - console.log("Remote video size: ", videoWidth, videoHeight); - } else { - videoWidth = 1920; - videoHeight = 1080; - }*/ videoWidth = remoteSize.width; videoHeight = remoteSize.height; } @@ -94,8 +85,8 @@ define(["jquery", "underscore"], function($, _) { } var aspectRatio = videoWidth/videoHeight; - var innerHeight = size.height; //scope.layoutparent.height(); - var innerWidth = size.width; //scope.layoutparent.width(); + var innerHeight = size.height; + var innerWidth = size.width; //console.log("resize", innerHeight, innerWidth); //console.log("resize", container, videos.length, aspectRatio, innerHeight, innerWidth); @@ -155,6 +146,17 @@ define(["jquery", "underscore"], function($, _) { }; + + // Smally inherits from OnePeople + var Smally = function(container, scope, controller) { + // Call super. + OnePeople.call(this, container, scope, controller); + } + Smally.prototype = Object.create(OnePeople.prototype); + Smally.prototype.constructor = Smally; + Smally.prototype.name = "smally"; + + // A view with one selectable large video. The others are small. var ConferenceKiosk = function(container, scope, controller) { this.remoteVideos = $(container).find("#remoteVideos"); @@ -228,10 +230,13 @@ define(["jquery", "underscore"], function($, _) { this.remoteVideos = null; }; + // Register renderers. renderers[OnePeople.prototype.name] = OnePeople; + renderers[Smally.prototype.name] = Smally; renderers[ConferenceKiosk.prototype.name] = ConferenceKiosk; + // Public api. var current = null; return { @@ -240,23 +245,26 @@ define(["jquery", "underscore"], function($, _) { var videos = _.keys(controller.peers); var peers = controller.peers; var container = scope.container; + var layoutparent = scope.layoutparent; if (!current) { current = new renderers[name](container, scope, controller) console.log("Created new video layout renderer", name, current); - $(container).addClass("renderer-"+name); + $(layoutparent).addClass("renderer-"+name); + return true; } else { if (current.name !== name) { current.close(container, scope, controller); $(container).removeAttr("style"); - $(container).removeClass("renderer-"+current.name); - current = new renderers[name](container, scope, conroller) - $(container).addClass("renderer-"+name); + $(layoutparent).removeClass("renderer-"+current.name); + current = new renderers[name](container, scope, controller) + $(layoutparent).addClass("renderer-"+name); console.log("Switched to new video layout renderer", name, current); + return true; } } - current.render(container, size, scope, videos, peers); + return current.render(container, size, scope, videos, peers); }, register: function(name, impl) {