initial styling for 1-on-1 calls

5 files changed, 56 insertions, 21 deletions

diff --git a/css/style.css b/css/style.css
index 1283c9fc3..4411fade8 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,27 +1,55 @@
-.participants-2 {
-	background-color: red;
-}
 video {
 	width: 100%;
 	z-index: 0;
+	max-height: 100%;
 }
-.videoView {
-	width: 33%;
+
+.participants-1 .videoView,
+.videoContainer {
+	position: relative;
+	width: 50%;
 	float: left;
+	border-radius: none;
 }
-.videoContainer {
+
+.videoView {
+	position: absolute;
 	width: 33%;
-	float: left;
+	right: 20px;
+	bottom: 20px;
+	z-index: 10;
 }
+.videoView video {
+	border-radius: 3px;
+}
+
+#app-content.participants-2 {
+	background-color: #000;
+}
+.participants-2 .videoContainer {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
 .nameIndicator {
-	position: relative;
+	position: absolute;
+	bottom: 5%;
 	z-index: 5;
-	color: white;
+	color: #fff;
 	width: 100%;
 	text-align: center;
-	float: left;
-	top: -50px;
+	font-size: 16px;
 }
+
 .nameIndicator button {
-	opacity: 0.9;
+	background-color: transparent;
+	border: none;
+	width: 44px;
+	height: 44px;
+	background-size: 25px;
+}
+.nameIndicator button.audio-disabled,
+.nameIndicator button.video-disabled {
+	opacity: .5;
 }
diff --git a/img/app.svg b/img/app.svg
new file mode 100644
index 000000000..5d8c67ea3
--- /dev/null
+++ b/img/app.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
+ <path d="m3 3c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-1.334l4 3.334v-10l-4 3.334v-1.334c0-1.108-0.892-2-2-2z" fill="#fff"/>
+</svg>
diff --git a/js/index.js b/js/index.js
index bb40a7b37..89b8f02f5 100644
--- a/js/index.js
+++ b/js/index.js
@@ -26,11 +26,11 @@ $(window).load(function() {
 	$('#hideVideo').click(function() {
 		if(videoHidden) {
 			webrtc.resumeVideo();
-			$(this).text('Disable video');
+			$(this).data('title', 'Disable video').removeClass('video-disabled');
 			videoHidden = false;
 		} else {
 			webrtc.pauseVideo();
-			$(this).text('Enable video');
+			$(this).data('title', 'Enable video').addClass('video-disabled');
 			videoHidden = true;
 		}
 	});
@@ -38,11 +38,11 @@ $(window).load(function() {
 	$('#mute').click(function() {
 		if(audioMuted) {
 			webrtc.unmute();
-			$(this).text('Mute audio');
+			$(this).data('title', 'Mute audio').removeClass('audio-disabled');
 			audioMuted = false;
 		} else {
 			webrtc.mute();
-			$(this).text('Enable audio');
+			$(this).data('title', 'Enable audio').addClass('audio-disabled');
 			audioMuted = true;
 		}
 	});
diff --git a/js/webrtc.js b/js/webrtc.js
index b04126a3b..757c46561 100644
--- a/js/webrtc.js
+++ b/js/webrtc.js
@@ -22,8 +22,11 @@ function openEventSource() {
 		users.forEach(function(user) {
 			currentUsersInRoom.push(user['userId']);
 		});
-		$('#app-content').attr('class','');
-		$('#app-content').addClass('participants-'+currentUsersInRoom.length);
+
+		if(currentUsersInRoom.length !== previousUsersInRoom.length) {
+			$('#app-content').attr('class','');
+			$('#app-content').addClass('participants-'+currentUsersInRoom.length);
+		}
 
 		var disconnectedUsers = previousUsersInRoom.diff(currentUsersInRoom);
 		disconnectedUsers.forEach(function(user) {
diff --git a/templates/index.php b/templates/index.php
index 6e6cedb6c..a31872a9c 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -38,8 +38,8 @@ script(
 		<div class="videoView hidden">
 			<video id="localVideo"></video>
 			<div class="nameIndicator">
-				<button id="mute"><?php p($l->t('Mute audio')) ?></button>
-				<button id="hideVideo"><?php p($l->t('Pause video')) ?></button>
+				<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>
 			</div>
 		</div>
 		<div id="remotes" style="display: inline"></div>
@@ -50,4 +50,4 @@ script(
 			<p class="uploadmessage"><?php p($l->t('Choose a room to the left or create a new one.')) ?></p>
 		</div>
 	</div>
-</div>
\ No newline at end of file
+</div>