GUACAMOLE-346: Display "seek in progress" notification when seeking in playback example.
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/25de4339 Tree: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/tree/25de4339 Diff: http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/diff/25de4339 Branch: refs/heads/master Commit: 25de43391aebb6a042fcc2ba2755e7fe081a8187 Parents: b41311f Author: Michael Jumper <[email protected]> Authored: Sat Jul 15 16:50:02 2017 -0700 Committer: Michael Jumper <[email protected]> Committed: Sat Jul 15 16:50:02 2017 -0700 ---------------------------------------------------------------------- .../src/main/webapp/index.html | 8 ++++- .../src/main/webapp/playback.css | 35 ++++++++++++++++++++ .../src/main/webapp/playback.js | 13 +++++++- 3 files changed, 54 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/blob/25de4339/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 69e79a9..64f8cbc 100644 --- a/doc/guacamole-playback-example/src/main/webapp/index.html +++ b/doc/guacamole-playback-example/src/main/webapp/index.html @@ -31,7 +31,13 @@ <div class="player"> <!-- Player display --> - <div id="display"></div> + <div id="display"> + <div class="notification-container"> + <div class="seek-notification"> + <p>Seek in progress... Click "play" to cancel.</p> + </div> + </div> + </div> <!-- Player controls --> <div class="controls"> http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/blob/25de4339/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 210506f..ce0c96e 100644 --- a/doc/guacamole-playback-example/src/main/webapp/playback.css +++ b/doc/guacamole-playback-example/src/main/webapp/playback.css @@ -21,6 +21,41 @@ width: 640px; } +.player #display { + position: relative; +} + +.player .notification-container { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + bottom: 0; +} + +.player .seek-notification { + + color: white; + background: rgba(0, 0, 0, 0.75); + + display: none; /* Initially hidden */ + width: 100%; + height: 100%; + +} + +.player #display.seeking .seek-notification { + display: table; +} + +.player .seek-notification p { + display: table-cell; + text-align: center; + vertical-align: middle; + font-family: sans-serif; +} + .player .controls { width: 100%; http://git-wip-us.apache.org/repos/asf/incubator-guacamole-client/blob/25de4339/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 170a2b5..d99322a 100644 --- a/doc/guacamole-playback-example/src/main/webapp/playback.js +++ b/doc/guacamole-playback-example/src/main/webapp/playback.js @@ -148,6 +148,7 @@ // If playing, the play/pause button should read "Pause" recording.onplay = function() { playPause.textContent = 'Pause'; + display.classList.remove('seeking'); }; // If paused, the play/pause button should read "Play" @@ -189,7 +190,17 @@ // Seek within recording if slider is moved positionSlider.onchange = function sliderPositionChanged() { - recording.seek(positionSlider.value); + + // Seek is in progress + display.classList.add('seeking'); + + // Request seek + recording.seek(positionSlider.value, function seekComplete() { + + // Seek has completed + display.classList.remove('seeking'); + + }); }; })();
