diff options
| -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')) { |