GUACAMOLE-346: Add "paused" notification to example player. Project: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/commit/76897471 Tree: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/tree/76897471 Diff: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/diff/76897471
Branch: refs/heads/master Commit: 768974711caddebbf8ef432da3e6bc575db35408 Parents: be9124d Author: Michael Jumper <[email protected]> Authored: Sat Jul 15 17:32:03 2017 -0700 Committer: Michael Jumper <[email protected]> Committed: Sat Jul 15 17:32:03 2017 -0700 ---------------------------------------------------------------------- .../src/main/webapp/index.html | 5 ++- .../src/main/webapp/playback.css | 32 ++++++++++++-------- .../src/main/webapp/playback.js | 22 ++++++++------ 3 files changed, 35 insertions(+), 24 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/blob/76897471/doc/guacamole-playback-example/src/main/webapp/index.html ---------------------------------------------------------------------- diff --git a/doc/guacamole-playback-example/src/main/webapp/index.html b/doc/guacamole-playback-example/src/main/webapp/index.html index 9151ebc..127e198 100644 --- a/doc/guacamole-playback-example/src/main/webapp/index.html +++ b/doc/guacamole-playback-example/src/main/webapp/index.html @@ -28,7 +28,7 @@ <body> <!-- Guacamole recording player --> - <div class="player"> + <div id="player" class="paused"> <!-- Player display --> <div id="display"> @@ -39,6 +39,9 @@ <button id="cancel-seek">Cancel</button> </p> </div> + <div class="paused-notification"> + <p>Paused.</p> + </div> </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/blob/76897471/doc/guacamole-playback-example/src/main/webapp/playback.css ---------------------------------------------------------------------- diff --git a/doc/guacamole-playback-example/src/main/webapp/playback.css b/doc/guacamole-playback-example/src/main/webapp/playback.css index ce0c96e..85bf904 100644 --- a/doc/guacamole-playback-example/src/main/webapp/playback.css +++ b/doc/guacamole-playback-example/src/main/webapp/playback.css @@ -17,15 +17,15 @@ * under the License. */ -.player { +#player { width: 640px; } -.player #display { +#display { position: relative; } -.player .notification-container { +#player .notification-container { position: absolute; z-index: 1; top: 0; @@ -34,7 +34,8 @@ bottom: 0; } -.player .seek-notification { +#player .paused-notification, +#player .seek-notification { color: white; background: rgba(0, 0, 0, 0.75); @@ -45,18 +46,23 @@ } -.player #display.seeking .seek-notification { +#player.seeking .seek-notification { display: table; } -.player .seek-notification p { +#player.paused .paused-notification { + display: table; +} + +#player .paused-notification p, +#player .seek-notification p { display: table-cell; text-align: center; vertical-align: middle; font-family: sans-serif; } -.player .controls { +#player .controls { width: 100%; @@ -87,11 +93,11 @@ } -.player .controls > * { +#player .controls > * { margin: 0.25em; } -.player .controls #position-slider { +#player .controls #position-slider { -ms-flex: 1 1 auto; -moz-box-flex: 1; -webkit-box-flex: 1; @@ -99,16 +105,16 @@ flex: 1 1 auto; } -.player .controls #play-pause { +#player .controls #play-pause { margin-left: 0; min-width: 5em; } -.player .controls #position, -.player .controls #duration { +#player .controls #position, +#player .controls #duration { font-family: monospace; } -.player .controls #duration { +#player .controls #duration { margin-right: 0; } http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/blob/76897471/doc/guacamole-playback-example/src/main/webapp/playback.js ---------------------------------------------------------------------- diff --git a/doc/guacamole-playback-example/src/main/webapp/playback.js b/doc/guacamole-playback-example/src/main/webapp/playback.js index 0554a50..8c1c49c 100644 --- a/doc/guacamole-playback-example/src/main/webapp/playback.js +++ b/doc/guacamole-playback-example/src/main/webapp/playback.js @@ -28,6 +28,13 @@ var RECORDING_URL = 'recording.guac'; /** + * The element representing the session recording player. + * + * @type Element + */ + var player = document.getElementById('player'); + + /** * The element which will contain the recording display. * * @type Element @@ -155,13 +162,13 @@ // If playing, the play/pause button should read "Pause" recording.onplay = function() { playPause.textContent = 'Pause'; - display.classList.remove('seeking'); + player.className = 'playing'; }; // If paused, the play/pause button should read "Play" recording.onpause = function() { playPause.textContent = 'Play'; - display.classList.remove('seeking'); + player.className = 'paused'; }; // Toggle play/pause when display or button are clicked @@ -174,7 +181,7 @@ // Cancel seek operation when cancel button is clicked cancelSeek.onclick = function cancelSeekOperation(e) { - display.classList.remove('seeking'); + player.className = 'paused'; recording.pause(); e.stopPropagation(); }; @@ -207,15 +214,10 @@ positionSlider.onchange = function sliderPositionChanged() { // Request seek - recording.seek(positionSlider.value, function seekComplete() { - - // Seek has completed - display.classList.remove('seeking'); - - }); + recording.seek(positionSlider.value); // Seek is in progress - display.classList.add('seeking'); + player.className = 'seeking'; };
