Move into same div

Signed-off-by: Lukas Reschke <lukas@statuscode.ch>

css/style.css

@@ -110,6 +110,15 @@ video {
 	display: block !important;
 }
 
+#videos {
+	position: absolute;
+	bottom: 0;
+}
+#videos,
+.videoView {
+	height: 40%;
+}
+
 .videoView {
 	position: absolute;
 	width: 33%;

js/webrtc.js

@@ -141,7 +141,7 @@ var webrtc;
 
 		OCA.SpreedMe.webrtc.on('videoAdded', function(video, peer) {
 			console.log('video added', peer);
-			var remotes = document.getElementById('remotes');
+			var remotes = document.getElementById('videos');
 			if (remotes) {
 				// Indicator for username
 				var userIndicator = document.createElement('div');
@@ -189,13 +189,13 @@ var webrtc;
 					});
 				}
 
-				remotes.appendChild(container);
+				$(container).prependTo($('#videos'));
 			}
 		});
 
 		// a peer was removed
 		OCA.SpreedMe.webrtc.on('videoRemoved', function(video, peer) {
-			var remotes = document.getElementById('remotes');
+			var remotes = document.getElementById('videos');
 			var el = document.getElementById(peer ? 'container_' + OCA.SpreedMe.webrtc.getDomId(peer) : 'localScreenContainer');
 			if (remotes && el) {
 				remotes.removeChild(el);

templates/index.php

@@ -44,15 +44,17 @@ script(
 	</div>
 
 	<div id="app-content">
-		<div class="videoView hidden">
-			<video id="localVideo"></video>
-			<div class="nameIndicator">
-				<button id="mute" class="icon-audio-white" data-title="<?php p($l->t('Mute audio')) ?>"></button>
-				<button id="hideVideo" class="icon-video-white" data-title="<?php p($l->t('Pause video')) ?>"></button>
-				<button id="video-fullscreen" class="icon-fullscreen-white" data-title="<?php p($l->t('Fullscreen')) ?>"></button>
+
+		<div id="videos" style="display: inline">
+			<div class="videoView videoContainer hidden">
+				<video id="localVideo"></video>
+				<div class="nameIndicator">
+					<button id="mute" class="icon-audio-white" data-title="<?php p($l->t('Mute audio')) ?>"></button>
+					<button id="hideVideo" class="icon-video-white" data-title="<?php p($l->t('Pause video')) ?>"></button>
+					<button id="video-fullscreen" class="icon-fullscreen-white" data-title="<?php p($l->t('Fullscreen')) ?>"></button>
+				</div>
 			</div>
 		</div>
-		<div id="remotes" style="display: inline"></div>
 
 
 		<div id="emptycontent">