Make classroom video layout work in main mode.

src/styles/global/_views.scss

@@ -22,7 +22,7 @@
 .mainview {
   bottom: 0;
   display: none;
-  left: 150px;
+  left: 0px;
   position: absolute;
   right: 0;
   top: $minbarheight;
@@ -31,6 +31,14 @@
   }
 }
 
+.videolayoutSmally .mainview {
+  left: 150px;
+}
+
+.videolayoutClassroom .mainview {
+  left: 360px;
+}
+
 .withChat,
 .withBuddylist {
   .mainview {

static/js/controllers/mediastreamcontroller.js

@@ -141,7 +141,7 @@ define(['underscore', 'bigscreen', 'moment', 'sjcl', 'modernizr', 'webrtc.adapte
 		$scope.microphoneMute = false;
 		$scope.cameraMute = false;
 		$scope.layout = {
-			main: null
+			main: null,
 		};
 		$scope.chatMessagesUnseen = 0;
 		$scope.autoAccept = null;
@@ -680,7 +680,7 @@ define(['underscore', 'bigscreen', 'moment', 'sjcl', 'modernizr', 'webrtc.adapte
 		// Apply all layout stuff as classes to our element.
 		$scope.$watch("layout", (function() {
 			var makeName = function(prefix, n) {
-				return prefix + n.substr(0, 1).toUpperCase() + n.substr(1);
+				return prefix + n.charAt(0).toUpperCase() + n.slice(1);
 			};
 			return function(layout, old) {
 				_.each(layout, function(v, k) {

static/js/directives/audiovideo.js

@@ -269,9 +269,20 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 						return scope.rendererName;
 					}
 				};
+				var forceRendererName = function(name) {
+					// Allow change between some renderes when forced.
+					if (name === "classroom") {
+						rendererName = "classroom";
+					} else {
+						rendererName = "smally";
+					}
+				};
 
 				scope.setRenderer = function(name) {
 					scope.rendererName = name;
+					if (rendererName && rendererName !== name) {
+						forceRendererName(name);
+					}
 				};
 
 				var needsRedraw = false;
@@ -295,8 +306,8 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 				$($window).on("resize", scope.redraw);
 				scope.$on("mainresize", function(event, main) {
 					if (main) {
-						// Force smally renderer when we have a main view.
-						rendererName = "smally"
+						// Force smally renderer or pin classroom when we have a main view.
+						forceRendererName(scope.rendererName);
 					} else if (rendererName) {
 						rendererName = null;
 					}

static/js/services/videolayout.js

@@ -316,9 +316,20 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 
 		// Public api.
 		var current = null;
+		var body = $("body");
 		return {
 			update: function(name, size, scope, controller) {
 
+				var makeName = function(prefix, n, camel) {
+					var r = prefix;
+					if (camel) {
+						r = r + n.charAt(0).toUpperCase() + n.slice(1);
+					} else {
+						r = r + "-" + n;
+					}
+					return r;
+				};
+
 				var videos = _.keys(controller.peers);
 				var peers = controller.peers;
 				var container = scope.container;
@@ -327,15 +338,18 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 				if (!current) {
 					current = new renderers[name](container, scope, controller)
 					//console.log("Created new video layout renderer", name, current);
-					$(layoutparent).addClass("renderer-" + name);
+					$(layoutparent).addClass(makeName("renderer", name));
+					$(body).addClass(makeName("videolayout", name, true));
 					return true;
 				} else {
 					if (current.name !== name) {
 						current.close(container, scope, controller);
 						$(container).removeAttr("style");
-						$(layoutparent).removeClass("renderer-" + current.name);
+						$(layoutparent).removeClass(makeName("renderer", current.name));
+						$(body).removeClass(makeName("videolayout", current.name, true));
 						current = new renderers[name](container, scope, controller)
-						$(layoutparent).addClass("renderer-" + name);
+						$(layoutparent).addClass(makeName("renderer", name));
+						$(body).addClass(makeName("videolayout", name, true));
 						//console.log("Switched to new video layout renderer", name, current);
 						return true;
 					}