Mute video in `smally` mode.

This saves bandwidth to be used by the component in the "main area", like screensharing, presentations or YouTube videos.

static/js/services/videolayout.js

@@ -44,7 +44,7 @@ define(["jquery", "underscore", "modernizr"], function($, _, Modernizr) {
 	var objectFitSupport = Modernizr["object-fit"] && true;
 
 	// videoLayout
-	return ["$window", function($window) {
+	return ["$window", "mediaStream", function($window, mediaStream) {
 
 		// Video layout with all videos rendered the same size.
 		var OnePeople = function(container, scope, controller) {};
@@ -165,11 +165,27 @@ define(["jquery", "underscore", "modernizr"], function($, _, Modernizr) {
 		var Smally = function(container, scope, controller) {
 			// Call super.
 			OnePeople.call(this, container, scope, controller);
+			this.prevCameraMuted = scope.cameraMute;
+			if (!scope.cameraMute) {
+				// don't update video pictures in smally mode to save
+				// bandwidth for large main content (e.g. screensharing,
+				// presentations or YouTube videos)
+				mediaStream.webrtc.setVideoMute(true);
+			}
 		}
 		Smally.prototype = Object.create(OnePeople.prototype);
 		Smally.prototype.constructor = Smally;
 		Smally.prototype.name = "smally";
 
+		Smally.prototype.close = function(container, scope, controller) {
+			if (!this.prevCameraMuted) {
+				// smally mode disabled the camera, unmute again
+				mediaStream.webrtc.setVideoMute(false);
+				this.prevCameraMuted = true;
+			}
+			OnePeople.prototype.close.call(this, container, scope, controller);
+		};
+
 		// A view with one selectable large video. The others are small.
 		var ConferenceKiosk = function(container, scope, controller) {