Skip to content

Commit

Permalink
Merge pull request #1123 from nextcloud/add-support-for-video-calls-w…
Browse files Browse the repository at this point in the history 
…hen-requesting-the-password-for-a-share

Add support for video calls when requesting the password for a share
  • Loading branch information
@nickvergessen
nickvergessen authored Aug 8, 2018
2 parents 9723b25 + 1002981 commit 98491bd
Show file tree
Hide file tree
Showing 8 changed files with 186 additions and 107 deletions.
5 changes: 0 additions & 5 deletions appinfo/routes.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,6 @@
'url' => '/',
'verb' => 'GET',
],
[
'name' => 'Page#shareAuth',
'url' => '/shareauth/{token}',
'verb' => 'GET',
],
],
'ocs' => [
/**
Expand Down
105 changes: 89 additions & 16 deletions css/publicshareauth.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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
Expand All @@ -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 {
Expand Down
13 changes: 9 additions & 4 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -286,8 +292,6 @@
$("#stop-screen-button").on('click', function() {
OCA.SpreedMe.webrtc.stopScreenShare();
});

$(document).keyup(this._onKeyUp.bind(this));
},

_onKeyUp: function(event) {
Expand Down Expand Up @@ -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);
}
Expand Down
4 changes: 2 additions & 2 deletions js/connection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
},
Expand All @@ -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) {
Expand Down
104 changes: 76 additions & 28 deletions js/publicshareauth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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
Expand All @@ -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');
},
Expand Down Expand Up @@ -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')
Expand Down
6 changes: 3 additions & 3 deletions js/webrtc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand Down Expand Up @@ -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;
Expand All @@ -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) {
Expand Down
Loading

0 comments on commit 98491bd

Please sign in to comment.