diff options
author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-08-02 17:57:17 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2018-08-08 15:17:40 +0300 |
commit | e8410d562e420976084eae68acabe46276624309 (patch) | |
tree | 8750251a2b2b8228b577e9f659c6a44c19e3330c | |
parent | 68045d0430acbf78a103e95e4dfc613b226fd98e (diff) |
Add basic support for video calls
When a password is requested now the guest automatically joins the call,
and once the sharer joins the call too a video call view appears in the
Talk sidebar.
Although it is not currently shown, the empty content message for guest
users was set, as it is expected to be set by some event handlers.
In a similar way the "#screens" element was also added, but there is no
support yet for screensharing and thus the element is kept always
hidden.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
-rw-r--r-- | css/publicshareauth.scss | 69 | ||||
-rw-r--r-- | js/connection.js | 4 | ||||
-rw-r--r-- | js/publicshareauth.js | 13 | ||||
-rw-r--r-- | js/webrtc.js | 2 |
4 files changed, 80 insertions, 8 deletions
diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss index 218e385be..9055777a5 100644 --- a/css/publicshareauth.scss +++ b/css/publicshareauth.scss @@ -82,6 +82,63 @@ input#request-password-button:disabled ~ .icon { +/* Talk sidebar */ +#talk-sidebar { + display: flex; + flex-direction: column; +} + +#talk-sidebar:not(.incall) #call-container { + display: none; +} + +#talk-sidebar #call-container { + position: relative; + + flex-grow: 1; + + /* 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 #screens { + display: none; +} + /** * Cascade parent element height to the chat view in the sidebar to limit the * vertical scroll bar only to the list of messages. Otherwise, the vertical @@ -91,17 +148,19 @@ 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; + + /* Show chat view below "#videos", even if in the markup it is above it to + * hide the empty content using CSS. */ + order: 1; + + /* Distribute available height between call container and chat view. */ + height: 50%; } #talk-sidebar .comments { diff --git a/js/connection.js b/js/connection.js index 126d2ab10..10354ece8 100644 --- a/js/connection.js +++ b/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) { diff --git a/js/publicshareauth.js b/js/publicshareauth.js index 811696c03..6b533fa1e 100644 --- a/js/publicshareauth.js +++ b/js/publicshareauth.js @@ -64,6 +64,9 @@ $('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>'); + $('#call-container').append('<div id="screens"></div>'); $('body').addClass('talk-sidebar-enabled'); }, @@ -118,12 +121,22 @@ OCA.SpreedMe.app._chatView.$el.prependTo('#talk-sidebar'); OCA.SpreedMe.app._chatView.setTooltipContainer($('body')); + var participants = OCA.SpreedMe.app.activeRoom.get('participants'); + OCA.SpreedMe.app.setRoomMessageForGuest(participants); + OCA.SpreedMe.app.setPageTitle(OCA.SpreedMe.app.activeRoom.get('displayName')); 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(); + self.showTalkSidebar(); + + OCA.SpreedMe.app.connection.joinCall(joinedRoomToken); }); }); diff --git a/js/webrtc.js b/js/webrtc.js index 217f9d1f0..3fce02954 100644 --- a/js/webrtc.js +++ b/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')) { |