diff options
| author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-08-02 18:25:44 +0300 |
|---|---|---|
| committer | Joas Schilling <coding@schilljs.com> | 2018-08-08 15:17:40 +0300 |
| commit | c113242e6f337b83f2fffb4d208e0be47651c15c (patch) | |
| tree | d6a73d13925d92dfabf952771296c1e8c11ea5f1 | |
| parent | e8410d562e420976084eae68acabe46276624309 (diff) | |
Add proper layout for screensharing
When a screen is shared it takes the upper area of the call container,
and the videos are shown below it in a 200px high row, just like in the
normal Talk UI.
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
| -rw-r--r-- | css/publicshareauth.scss | 21 | ||||
| -rw-r--r-- | js/publicshareauth.js | 1 | ||||
| -rw-r--r-- | js/webrtc.js | 4 |
3 files changed, 22 insertions, 4 deletions
diff --git a/css/publicshareauth.scss b/css/publicshareauth.scss index 9055777a5..d3ae5a1cf 100644 --- a/css/publicshareauth.scss +++ b/css/publicshareauth.scss @@ -135,8 +135,25 @@ input#request-password-button:disabled ~ .icon { } /* Screensharing in Talk sidebar */ -#talk-sidebar #screens { - display: none; +#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; } /** diff --git a/js/publicshareauth.js b/js/publicshareauth.js index 6b533fa1e..0cab3c7f9 100644 --- a/js/publicshareauth.js +++ b/js/publicshareauth.js @@ -133,6 +133,7 @@ // been hidden if the password was already requested and // that conversation ended in this same page. $('#videos').show(); + $('#screens').show(); self.showTalkSidebar(); diff --git a/js/webrtc.js b/js/webrtc.js index 3fce02954..c2c2d39d0 100644 --- a/js/webrtc.js +++ b/js/webrtc.js @@ -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) { |