WIP: Add local video and media controls

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

3 files changed, 75 insertions, 35 deletions

diff --git a/css/files.scss b/css/files.scss
index ce4b8b60e..01523a3a9 100644
--- a/css/files.scss
+++ b/css/files.scss
@@ -246,13 +246,18 @@ video {
 .participants-2 .videoView {
 	position: absolute;
 	width: 33%;
-	min-width: 200px;
+	/* TODO do not force the width to 200px, as otherwise the video is too tall
+	 * and overlaps too much with the promoted video.
+	/* min-width: 200px; */
 	overflow:visible;
 	right: 0;
 	bottom: 0;
 	top: initial;
 	left: initial;
-	z-index: 10;
+	/* TODO z-index of 10 puts the video on top of the close button.
+	 * But why is a z-index needed anyway? */
+	z-index: 1;
+	/* z-index: 10; */
 }
 @media only screen and (max-width: 768px) {
 	.participants-1 .videoView,
@@ -317,7 +322,13 @@ video {
 }
 
 
-
+.nameIndicator button {
+	background-color: transparent;
+	border: none;
+	margin: 0;
+	width: 44px;
+	height: 44px;
+}
 
 .nameIndicator button {
 	background-size: 24px;
diff --git a/js/embedded.js b/js/embedded.js
index e4deb9e2f..163c527f3 100644
--- a/js/embedded.js
+++ b/js/embedded.js
@@ -81,36 +81,36 @@
 // 			this.registerLocalVideoButtonHandlers();
 		},
 
-// 		registerLocalVideoButtonHandlers: function() {
-// 			$('#hideVideo').click(function() {
-// 				if(!OCA.SpreedMe.app.videoWasEnabledAtLeastOnce) {
-// 					// don't allow clicking the video toggle
-// 					// when no video ever was streamed (that
-// 					// means that permission wasn't granted
-// 					// yet or there is no video available at
-// 					// all)
-// 					console.log('video can not be enabled - there was no stream available before');
-// 					return;
-// 				}
-// 				if ($(this).hasClass('video-disabled')) {
-// 					OCA.SpreedMe.app.enableVideo();
-// 					localStorage.removeItem("videoDisabled");
-// 				} else {
-// 					OCA.SpreedMe.app.disableVideo();
-// 					localStorage.setItem("videoDisabled", true);
-// 				}
-// 			});
-// 
-// 			$('#mute').click(function() {
-// 				if (OCA.SpreedMe.webrtc.webrtc.isAudioEnabled()) {
-// 					OCA.SpreedMe.app.disableAudio();
-// 					localStorage.setItem("audioDisabled", true);
-// 				} else {
-// 					OCA.SpreedMe.app.enableAudio();
-// 					localStorage.removeItem("audioDisabled");
-// 				}
-// 			});
-// 
+		registerLocalVideoButtonHandlers: function() {
+			$('#hideVideo').click(function() {
+				if(!OCA.SpreedMe.app.videoWasEnabledAtLeastOnce) {
+					// don't allow clicking the video toggle
+					// when no video ever was streamed (that
+					// means that permission wasn't granted
+					// yet or there is no video available at
+					// all)
+					console.log('video can not be enabled - there was no stream available before');
+					return;
+				}
+				if ($(this).hasClass('video-disabled')) {
+					OCA.SpreedMe.app.enableVideo();
+					localStorage.removeItem("videoDisabled");
+				} else {
+					OCA.SpreedMe.app.disableVideo();
+					localStorage.setItem("videoDisabled", true);
+				}
+			});
+
+			$('#mute').click(function() {
+				if (OCA.SpreedMe.webrtc.webrtc.isAudioEnabled()) {
+					OCA.SpreedMe.app.disableAudio();
+					localStorage.setItem("audioDisabled", true);
+				} else {
+					OCA.SpreedMe.app.enableAudio();
+					localStorage.removeItem("audioDisabled");
+				}
+			});
+
 // 			$('#video-fullscreen').click(function() {
 // 				if (this.fullscreenDisabled) {
 // 					this.enableFullscreen();
@@ -189,7 +189,7 @@
 // 			$("#stop-screen-button").on('click', function() {
 // 				OCA.SpreedMe.webrtc.stopScreenShare();
 // 			});
-// 		},
+		},
 
 		/**
 		 * @param {string} token
diff --git a/js/filesplugin.js b/js/filesplugin.js
index 31c294007..fe8160436 100644
--- a/js/filesplugin.js
+++ b/js/filesplugin.js
@@ -161,9 +161,38 @@
 
 			this.$el.append(this._$talkSidebar);
 			$('#talk-sidebar').append('<div id="call-container"></div>');
-			$('#call-container').append('<div id="videos"></div>');
+			$('#call-container').append('<div id="videos"><div id="localVideoContainer" class="videoView videoContainer"></div></div>');
 			$('#call-container').append('<div id="screens"></div>');
 
+			$('#localVideoContainer').append(
+				'<video id="localVideo"></video>' +
+				'<div class="avatar-container hidden">' +
+				'	<div class="avatar"></div>' +
+				'</div>' +
+				'<div class="nameIndicator">' +
+				'	<button id="mute" class="icon-audio icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="' + t('spreed', 'Mute audio (m)') + '"></button>' +
+				'	<button id="hideVideo" class="icon-video icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="' + t('spreed', 'Disable video (v)') + '"></button>' +
+// 				'	<button id="screensharing-button" class="app-navigation-entry-utils-menu-button icon-screen-off icon-white icon-shadow screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="' + t('spreed', 'Share screen') + '"></button>' +
+// 				'	<div id="screensharing-menu" class="app-navigation-entry-menu">' +
+// 				'		<ul>' +
+// 				'			<li>' +
+// 				'				<button id="show-screen-button">' +
+// 				'					<span class="icon-screen"></span>' +
+// 				'					<span>' + t('spreed', 'Show your screen') + '</span>' +
+// 				'				</button>' +
+// 				'			</li>' +
+// 				'			<li>' +
+// 				'				<button id="stop-screen-button">' +
+// 				'					<span class="icon-screen-off"></span>' +
+// 				'					<span>' + t('spreed', 'Stop screensharing') + '</span>' +
+// 				'				</button>' +
+// 				'			</li>' +
+// 				'		</ul>' +
+// 				'	</div>' +
+				'</div>');
+
+			OCA.SpreedMe.app.registerLocalVideoButtonHandlers();
+
 			this.$el.append(this._callButton.$el);
 		},