Add support for video calls when requesting the password for a share

appinfo/routes.php

@@ -28,11 +28,6 @@
 			'url' => '/',
 			'verb' => 'GET',
 		],
-		[
-			'name' => 'Page#shareAuth',
-			'url' => '/shareauth/{token}',
-			'verb' => 'GET',
-		],
 	],
 	'ocs' => [
 		/**

css/publicshareauth.scss

@@ -21,15 +21,6 @@ input#request-password-button:disabled ~ .icon {
 	opacity: 0.5;
 }
 
-/* Mimic the appearance of the log in button when a link is used. */
-.request-password-wrapper a {
-	display: block;
-	width: 269px;
-	padding: 13px 10px;
-	font-size: 20px;
-	margin: 5px;
-}
-
 
 
 /* Special layout to include the Talk sidebar */
@@ -85,11 +76,95 @@ input#request-password-button:disabled ~ .icon {
 	border-left-width: 0;
 }
 
-#talk-sidebar #commentsTabView ~ #emptycontent {
-	display: none !important;
+
+
+/* Talk sidebar */
+#talk-sidebar {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#talk-sidebar #emptycontent {
+	position: relative;
+
+	margin-top: 10px;
+}
+
+#talk-sidebar.incall #emptycontent {
+	display: none;
+}
+
+#talk-sidebar:not(.incall) #call-container {
+	display: none;
+}
+
+#talk-sidebar #call-container {
+	position: relative;
+
+	flex-grow: 1;
+
+	/* Prevent shadows of videos from leaking on other elements. */
+	overflow: hidden;
+
+	/* Distribute available height between call container and chat view. */
+	height: 50%;
+
+	/* Ensure that the background will be black also in voice only calls. */
+	background-color: #000;
+}
+
+/* Video in Talk sidebar */
+#talk-sidebar #videos {
+	position: relative;
+
+	flex-grow: 1;
 }
 
+#talk-sidebar .videoContainer {
+	/* The video container has some small padding to prevent the video from
+	 * reaching the edges, but it also uses "width: 100%", so the padding should
+	 * be included in the full width of the element. */
+	box-sizing: border-box;
+}
 
+#talk-sidebar .videoContainer.promoted video {
+	/* Base the size of the video on its width instead of on its height;
+	 * otherwise the video could appear in full height but cropped on the sides
+	 * due to the space available in the sidebar being typically larger in
+	 * vertical than in horizontal. */
+	width: 100%;
+	height: auto;
+}
+
+#talk-sidebar .nameIndicator {
+	/* The name indicator has some small padding to prevent the name from
+	 * reaching the edges, but it also uses "width: 100%", so the padding should
+	 * be included in the full width of the element. */
+	box-sizing: border-box;
+}
+
+/* Screensharing in Talk sidebar */
+#talk-sidebar.screensharing #videos .videoContainer video {
+	max-height: 200px;
+	background-color: transparent;
+	box-shadow: 0;
+}
+
+#talk-sidebar.screensharing #screens {
+	position: absolute;
+	width: 100%;
+	height: calc(100% - 200px);
+	top: 0;
+	background-color: transparent;
+}
+
+#talk-sidebar.screensharing .screenContainer {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
 
 /**
  * Cascade parent element height to the chat view in the sidebar to limit the
@@ -100,17 +175,15 @@ input#request-password-button:disabled ~ .icon {
  * The list of messages should stretch to fill the available space at the bottom
  * of the right sidebar, so the height is cascaded using flex boxes.
  */
-#talk-sidebar {
-	display: flex;
-	flex-direction: column;
-}
-
 #talk-sidebar #commentsTabView {
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
 
 	flex-grow: 1;
+
+	/* Distribute available height between call container and chat view. */
+	height: 50%;
 }
 
 #talk-sidebar .comments {

js/app.js

@@ -179,6 +179,12 @@
 				$(this).tooltip('hide');
 			});
 
+			this.registerLocalVideoButtonHandlers();
+
+			$(document).keyup(this._onKeyUp.bind(this));
+		},
+
+		registerLocalVideoButtonHandlers: function() {
 			$('#hideVideo').click(function() {
 				if(!OCA.SpreedMe.app.videoWasEnabledAtLeastOnce) {
 					// don't allow clicking the video toggle
@@ -286,8 +292,6 @@
 			$("#stop-screen-button").on('click', function() {
 				OCA.SpreedMe.webrtc.stopScreenShare();
 			});
-
-			$(document).keyup(this._onKeyUp.bind(this));
 		},
 
 		_onKeyUp: function(event) {
@@ -629,8 +633,9 @@
 					}.bind(this));
 
 				this._showParticipantList();
-			} else {
-				// The token is always defined in the public page.
+			} else if (this.token) {
+				// The token is always defined in the public page (although not
+				// in the public share auth page).
 				this.activeRoom = new OCA.SpreedMe.Models.Room({ token: this.token });
 				this.signaling.setRoom(this.activeRoom);
 			}

js/connection.js

@@ -99,7 +99,7 @@
 			if (!OCA.Talk.PublicShareAuth) {
 				OC.Util.History.pushState({}, OC.generateUrl('/apps/spreed'));
 			}
-			$('#app-content').removeClass('incall');
+			$('#app-content, #talk-sidebar').removeClass('incall');
 			this.showRoomDeletedMessage(deleter);
 			roomsChannel.trigger('leaveCurrentRoom');
 		},
@@ -119,7 +119,7 @@
 		leaveCurrentCall: function() {
 			this.app.signaling.leaveCurrentCall();
 			this.app.signaling.syncRooms();
-			$('#app-content').removeClass('incall');
+			$('#app-content, #talk-sidebar').removeClass('incall');
 		},
 		showRoomDeletedMessage: function(deleter) {
 			if (deleter) {

js/publicshareauth.js

@@ -28,10 +28,11 @@
 		init: function() {
 			var self = this;
 
-			// this.setupRequestPasswordButton();
-			this.setupCallButton();
+			this.setupRequestPasswordButton();
 			this.setupLayoutForTalkSidebar();
 
+			this.setupSignalingEventHandlers();
+
 			$('#request-password-button').click(function() {
 				$('.request-password-wrapper + .error-message').hide();
 
@@ -45,15 +46,6 @@
 			});
 		},
 
-		setupCallButton: function() {
-			var url = OC.generateUrl('apps/spreed/shareauth/' + $('#sharingToken').val());
-
-			$('main').append('<div id="submit-wrapper" class="request-password-wrapper">' +
-				'    <a href="' + url + '" target="_blank" class="primary button">' + t('spreed', 'Request password') + '</a>' +
-				'    <div class="icon icon-confirm-white"></div>' +
-				'</div>');
-		},
-
 		setupRequestPasswordButton: function() {
 			// "submit-wrapper" is used to mimic the login button and thus get
 			// automatic colouring of the confirm icon by the Theming app
@@ -64,12 +56,46 @@
 		},
 
 		setupLayoutForTalkSidebar: function() {
+			$('body').append('<div id="notification-container"><div id="notification"></div></div>');
+
 			$('body').append('<div id="content"></div>');
 			$('#content').append($('.wrapper'));
 			$('#content').append($('footer'));
 
 			$('body').append('<div id="talk-sidebar" class="disappear"></div>');
 			$('#talk-sidebar').append('<div id="emptycontent"><div id="emptycontent-icon" class="icon-loading"></div><h2></h2><p></p></div>');
+			$('#talk-sidebar').append('<div id="call-container"></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();
 
 			$('body').addClass('talk-sidebar-enabled');
 		},
@@ -112,33 +138,55 @@
 			});
 		},
 
-		setupRoom: function(token) {
+		setupSignalingEventHandlers: function() {
 			var self = this;
 
-			OCA.SpreedMe.app.activeRoom = new OCA.SpreedMe.Models.Room({token: token});
-			OCA.SpreedMe.app.signaling.setRoom(OCA.SpreedMe.app.activeRoom);
-
-			OCA.SpreedMe.app.signaling.on('leaveRoom', function(leftRoomToken) {
-				if (token === leftRoomToken) {
-					self.leaveRoom();
+			OCA.SpreedMe.app.signaling.on('joinRoom', function(joinedRoomToken) {
+				if (OCA.SpreedMe.app.token !== joinedRoomToken) {
+					return;
 				}
-			});
 
-			// Prevent updateContentsLayout from executing, as it is not needed
-			// when not having a full UI and messes with the tooltip container.
-			OCA.SpreedMe.app.updateContentsLayout = function() {
-			};
+				OCA.SpreedMe.app.signaling.syncRooms().then(function() {
+					OCA.SpreedMe.app._chatView.$el.appendTo('#talk-sidebar');
+					OCA.SpreedMe.app._chatView.setTooltipContainer($('body'));
 
-			OCA.SpreedMe.app.connection.joinRoom(token);
+					var participants = OCA.SpreedMe.app.activeRoom.get('participants');
+					OCA.SpreedMe.app.setRoomMessageForGuest(participants);
 
-			OCA.SpreedMe.app._chatView.$el.prependTo('#talk-sidebar');
-			OCA.SpreedMe.app._chatView.setTooltipContainer($('body'));
+					OCA.SpreedMe.app.setPageTitle(OCA.SpreedMe.app.activeRoom.get('displayName'));
 
-			OCA.SpreedMe.app.signaling.on('joinRoom', function() {
-				self.showTalkSidebar();
+					OCA.SpreedMe.app._messageCollection.setRoomToken(OCA.SpreedMe.app.activeRoom.get('token'));
+					OCA.SpreedMe.app._messageCollection.receiveMessages();
+
+					// Ensure that the elements are shown, as they could have
+					// been hidden if the password was already requested and
+					// that conversation ended in this same page.
+					$('#videos').show();
+					$('#screens').show();
+
+					self.showTalkSidebar();
+
+					OCA.SpreedMe.app.connection.joinCall(joinedRoomToken);
+				});
+			});
+
+			OCA.SpreedMe.app.signaling.on('leaveRoom', function(leftRoomToken) {
+				if (OCA.SpreedMe.app.token !== leftRoomToken) {
+					return;
+				}
+
+				self.leaveRoom();
 			});
 		},
 
+		setupRoom: function(token) {
+			OCA.SpreedMe.app.activeRoom = new OCA.SpreedMe.Models.Room({token: token});
+			OCA.SpreedMe.app.signaling.setRoom(OCA.SpreedMe.app.activeRoom);
+
+			OCA.SpreedMe.app.token = token;
+			OCA.SpreedMe.app.signaling.joinRoom(token);
+		},
+
 		leaveRoom: function() {
 			$('.request-password-wrapper .icon')
 					.removeClass('icon-loading-small-dark')

js/webrtc.js

@@ -23,7 +23,7 @@ var spreedPeerConnectionTable = [];
 			currentUsersNo = 1;
 		}
 
-		var $appContentElement = $('#app-content'),
+		var $appContentElement = $('#app-content, #talk-sidebar'),
 			participantsClass = 'participants-' + currentUsersNo,
 			hadSidebar = $appContentElement.hasClass('with-app-sidebar');
 		if (!$appContentElement.hasClass(participantsClass) && !$appContentElement.hasClass('screensharing')) {
@@ -1151,7 +1151,7 @@ var spreedPeerConnectionTable = [];
 			// Check if there are still some screens
 			if (!document.getElementById('screens').hasChildNodes()) {
 				screenSharingActive = false;
-				$('#app-content').removeClass('screensharing');
+				$('#app-content, #talk-sidebar').removeClass('screensharing');
 				if (unpromotedSpeakerId) {
 					OCA.SpreedMe.speakers.switchVideoToId(unpromotedSpeakerId);
 					unpromotedSpeakerId = null;
@@ -1177,7 +1177,7 @@ var spreedPeerConnectionTable = [];
 			OCA.SpreedMe.speakers.unpromoteLatestSpeaker();
 
 			screenSharingActive = true;
-			$('#app-content').addClass('screensharing');
+			$('#app-content, #talk-sidebar').addClass('screensharing');
 
 			var screens = document.getElementById('screens');
 			if (screens) {