Implemented democrazy video layoyt and use it as default.

src/styles/components/_audiovideo.scss

@@ -123,6 +123,7 @@
     transition-property: opacity;
     transition-duration: .5s;
     z-index: 25;
+    background: black;
     &.visible {
       opacity: 1;
     }
@@ -276,11 +277,16 @@
 }
 
 .miniContainer {
-  &.talking video {
-    border: 1px solid $audiovideolevel;
+  &.talking:after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    box-shadow: 0px 0px 20px $audiovideolevel inset;
   }
   video {
-    border: 1px solid transparent;
   }
 }
 
@@ -313,6 +319,20 @@
 .renderer-onepeople {
 }
 
+.renderer-democrazy {
+
+  .remoteVideos .miniContainer {
+    position: relative;
+    max-height: 100%;
+    max-width: 100%;
+    display: inline-block;
+    vertical-align: bottom;
+    bottom: auto;
+    right: auto;
+  }
+
+}
+
 .renderer-conferencekiosk {
   .remoteVideos {
     background: $video-background;

static/js/directives/audiovideo.js

@@ -40,7 +40,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
 			$scope.hasUsermedia = false;
 			$scope.isActive = false;
 
-			$scope.rendererName = $scope.defaultRendererName = "onepeople";
+			$scope.rendererName = $scope.defaultRendererName = "democrazy";
 
 			//console.log("audiovideo", localVideo, miniVideo);
 

static/js/services/videolayout.js

@@ -87,6 +87,10 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 				videoHeight = 360;
 			}
 
+			if (this.countSelfAsRemote) {
+				videos.unshift(null);
+			}
+
 			var aspectRatio = videoWidth / videoHeight;
 			var innerHeight = size.height;
 			var innerWidth = size.width;
@@ -99,10 +103,9 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 				// 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 = {
-					".renderer-onepeople .miniVideo": {
-						width: ($(scope.mini).height() * aspectRatioLocal) + "px"
-					}
+				extraCSS = {};
+				extraCSS[".renderer-"+this.name+" .miniVideo"] = {
+					width: ($(scope.mini).height() * aspectRatioLocal) + "px"
 				};
 			}
 
@@ -138,14 +141,14 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
                 */
 				container.style.width = newContainerWidth + "px";
 				container.style.left = ((innerWidth - newContainerWidth) / 2) + 'px';
-				extraCSS = $.extend(extraCSS, {
-					".renderer-onepeople .remoteVideos": {
-						">div": {
-							width: singleVideoWidth + "px",
-							height: singleVideoHeight + "px"
-						}
+				var extraCSS2 = {};
+				extraCSS2[".renderer-"+this.name+" .remoteVideos"] = {
+					">div": {
+						width: singleVideoWidth + "px",
+						height: singleVideoHeight + "px"
 					}
-				});
+				};
+				extraCSS = $.extend(extraCSS, extraCSS2);
 			}
 			$.injectCSS(extraCSS, {
 				truncateFirst: true,
@@ -172,6 +175,29 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 		Smally.prototype.name = "smally";
 
 
+		// Democrazy inherits from OnePeople
+		var Democrazy = function(container, scope, controller) {
+			// Call super.
+			OnePeople.call(this, container, scope, controller);
+			// Move mini video into remoteVideos.
+			var $mini = $(scope.mini);
+			this.miniParent = $mini.parent();
+			$mini.prependTo(scope.remoteVideos);
+			$mini.find("video").get(0).play();
+			this.countSelfAsRemote = true;
+		}
+		Democrazy.prototype = Object.create(OnePeople.prototype);
+		Democrazy.prototype.constructor = Democrazy;
+		Democrazy.prototype.name = "democrazy";
+		Democrazy.prototype.close = function(container, scope, controller) {
+			OnePeople.prototype.close.call(this, container, scope, controller);
+			var $mini = $(scope.mini);
+			$mini.appendTo(this.miniParent);
+			$mini.find("video").get(0).play();
+			this.miniParent = null;
+		};
+
+
 		// A view with one selectable large video. The others are small.
 		var ConferenceKiosk = function(container, scope, controller) {
 
@@ -241,12 +267,11 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 
 			// Make space for own video on the right if width goes low.
 			if (((size.width - (videos.length - 1) * 192) / 2) < 192) {
-				extraCSS = {
-					".renderer-conferencekiosk .remoteVideos": {
-						"margin-right": "192px",
-						"overflow-x": "auto",
-						"overflow-y": "hidden"
-					}
+				extraCSS = {};
+				extraCSS[".renderer-"+this.name+" .remoteVideos"] = {
+					"margin-right": "192px",
+					"overflow-x": "auto",
+					"overflow-y": "hidden"
 				};
 			}
 
@@ -300,6 +325,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 		// Register renderers.
 		renderers[OnePeople.prototype.name] = OnePeople;
 		renderers[Smally.prototype.name] = Smally;
+		renderers[Democrazy.prototype.name] = Democrazy;
 		renderers[ConferenceKiosk.prototype.name] = ConferenceKiosk;
 		renderers[Classroom.prototype.name] = Classroom;
 

static/partials/audiovideo.html

@@ -12,7 +12,7 @@
     </div>
   </div>
   <div class="overlayActions">
-    <button class="btn btn-link" title="{{_('Standard view')}}" ng-click="setRenderer('onepeople')"><i class="fa fa-table" ></i></button>
+    <button class="btn btn-link" title="{{_('Standard view')}}" ng-click="setRenderer('democrazy')"><i class="fa fa-table" ></i></button>
     <button class="btn btn-link" title="{{_('Kiosk view')}}" ng-click="setRenderer('conferencekiosk')"><i class="fa fa-user"></i></button>
     <button class="btn btn-link" title="{{_('Classroom')}}" ng-click="setRenderer('classroom')"><i class="fa fa-graduation-cap"></i></button>
   </div>