Implemented Classroom view.

src/styles/components/_audiovideo.scss

@@ -233,7 +233,7 @@
 .audiovideo .overlayActions {
   background: $video-overlayactions;
   bottom: 0;
-  height: 105px;
+  height: 140px;
   left: 0;
   margin:auto 0;
   opacity: 0;
@@ -377,4 +377,64 @@
     opacity: 0 !important;
     display: none;
   }
+}
+
+.renderer-classroom {
+  .remoteContainer {
+    border-left: 40px solid black;
+  }
+  .remoteVideos {
+    top: 180px;
+    width: 320px;
+    pointer-events: auto;
+    background: $video-background;
+    .overlayLogo {
+      display: none;
+    }
+    video {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      margin-top: -9px;
+    }
+    > div {
+      cursor: pointer;
+      width: 80px;
+      height: 60px;
+      display: inline-block;
+    }
+    .overlayLogo {
+      display: none;
+    }
+    .peerLabel {
+      font-size: 0.6em;
+      background: $video-overlayactions;
+      max-width: 100%;
+      bottom: 0px;
+      left: 0px;
+      right: 0px;
+      padding: 0 4px;
+      line-height: 9px;
+    }
+    .peerActions {
+      display: none;
+    }
+    .miniContainer {
+      right: auto;
+      max-height: auto;
+    }
+  }
+  .bigVideo {
+    width: 320px;
+    height: 180px;
+    video {
+      height: 100%;
+      width: 100%;
+    }
+    .peerLabel {
+      font-size: 1vw;
+      max-width: 40%;
+      bottom: 8%;
+    }
+  }
 }

static/js/services/videolayout.js

@@ -281,11 +281,38 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 		};
 
 
+		// Classroom inherits from ConferenceKiosk
+		var Classroom = function(container, scope, controller) {
+			// Call super.
+			ConferenceKiosk.call(this, container, scope, controller);
+		}
+		Classroom.prototype = Object.create(ConferenceKiosk.prototype);
+		Classroom.prototype.constructor = Classroom;
+		Classroom.prototype.name = "classroom";
+		Classroom.prototype.render = function(container, size, scope, videos, peers) {
+			var big = this.big;
+			if (big) {
+				var currentbigpeerid = this.big.data("peerid");
+				if (!peers[currentbigpeerid]) {
+					console.log("Current big peer is no longer there", currentbigpeerid);
+					this.big = big = null;
+				}
+			}
+			if (!big) {
+				if (videos.length) {
+					this.makeBig(peers[videos[0]].element);
+					this.bigVideo.style.opacity = 1;
+				}
+
+			}
+		};
+
 		// Register renderers.
 		renderers[OnePeople.prototype.name] = OnePeople;
 		renderers[Smally.prototype.name] = Smally;
 		renderers[ConferenceKiosk.prototype.name] = ConferenceKiosk;
 		renderers[SelfPortrait.prototype.name] = SelfPortrait;
+		renderers[Classroom.prototype.name] = Classroom;
 
 		// Public api.
 		var current = null;

static/partials/audiovideo.html

@@ -15,5 +15,6 @@
     <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="{{_('Kiosk view')}}" ng-click="setRenderer('conferencekiosk')"><i class="fa fa-user"></i></button>
     <button class="btn btn-link" title="{{_('Self portrait')}}" ng-click="setRenderer('selfportrait')"><i class="fa fa-dot-circle-o"></i></button>
+    <button class="btn btn-link" title="{{_('Classroom')}}" ng-click="setRenderer('classroom')"><i class="fa fa-graduation-cap"></i></button>
   </div>
 </div>