Implemented ui to switch video layout renderers.

src/styles/components/_audiovideo.scss

@@ -48,6 +48,34 @@ right:260px;
 right:520px;
 }
 
+.audioVideo {
+	position:relative;
+	width:100%;
+	height:100%;
+}
+
+.audioVideo .overlayactions {
+	position: absolute;
+	left:0px;
+	top:0px;
+	bottom:0px;
+	height:70px;
+	margin:auto 0;
+	width:40px;
+	opacity:0.5;
+	padding:3px 0;
+	background: rgba(0,0,0,0.2);
+	text-shadow: 0 0 5px black;
+	z-index:5;
+
+	button {
+		width:40px;
+		display: block;
+		color:#ccc;
+		cursor:pointer;
+	}
+}
+
 .remoteVideo .peerlabel {
 	-webkit-transition: color 500ms ease-out;
 	-moz-transition: color 500ms ease-out;
@@ -112,6 +140,7 @@ right:520px;
 		text-align:center;
 		background:rgba(0,0,0,0.4);
 		padding-right:192px;
+		min-height:108px;
 		>div {
 			height:108px;
 			width:192px;

src/styles/components/_webrtc.scss

@@ -41,8 +41,9 @@ transition-duration: 2s;
 -webkit-transition-duration: 2s;
 transform: rotateY(0deg);
 -webkit-transform: rotateY(0deg);
+z-index:2;
 }
-#card.active {
+.active #card {
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
 }
@@ -55,6 +56,7 @@ bottom:0px;
 transform: scale(-1, 1);
 -webkit-transform: scale(-1, 1);
 pointer-events:none;
+z-index:2;
 }
 #remote {
 position: absolute;
@@ -64,6 +66,8 @@ top:0px;
 bottom:0px;
 transform: rotateY(180deg);
 -webkit-transform: rotateY(180deg);
+pointer-events:none;
+z-index:2;
 }
 #mini {
 position: absolute;
@@ -140,6 +144,7 @@ color:rgba(255,255,255,0.3);
 text-align:center;
 font-size:80px;
 margin-top:-40px;
+pointer-events:auto;
 }
 .remoteVideo.onlyaudio video {
 display:none;

static/js/directives/audiovideo.js

@@ -252,6 +252,10 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
                     }
                 };
 
+                scope.setRenderer = function(name) {
+                    scope.rendererName = name;
+                };
+
                 var needsRedraw = false;
                 scope.redraw = function() {
                     needsRedraw = true;

static/js/services/videolayout.js

@@ -225,6 +225,10 @@ define(["jquery", "underscore"], function($, _) {
 
 		ConferenceKiosk.prototype.close = function(container, scope, controller) {
 			this.closed = true;
+			if (this.big) {
+				this.remoteVideos.append(this.big);
+			}
+			this.big = null;
 			this.bigVideo.remove()
 			this.bigVideo = null;
 			this.remoteVideos = null;

static/partials/audiovideo.html

@@ -1,7 +1,8 @@
-<div id="card">
-	<div id="local">
-      <video id="localVideo" autoplay="autoplay" muted="true"></video>
-      <div class="overlaylogo"></div>
+<div class="audioVideo">
+  <div id="card">
+    <div id="local">
+        <video id="localVideo" autoplay="autoplay" muted="true"></video>
+        <div class="overlaylogo"></div>
     </div>
     <div id="remote">
       <div id="remoteVideos"></div>
@@ -9,4 +10,9 @@
         <video id="miniVideo" autoplay="autoplay" muted="true"></video>
       </div>
     </div>
-</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="{{_('Kiosk view')}}" ng-click="setRenderer('conferencekiosk')"><i class="fa fa-user"></i></button>
+  </div>
+</div>