diff --git a/doc/guacamole-playback-example/src/main/webapp/index.html b/doc/guacamole-playback-example/src/main/webapp/index.html index 9151ebce6..127e1985c 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 @@ -
+
@@ -39,6 +39,9 @@

+
+

Paused.

+
diff --git a/doc/guacamole-playback-example/src/main/webapp/playback.css b/doc/guacamole-playback-example/src/main/webapp/playback.css index ce0c96e46..85bf90445 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; } diff --git a/doc/guacamole-playback-example/src/main/webapp/playback.js b/doc/guacamole-playback-example/src/main/webapp/playback.js index 0554a506d..8c1c49c5e 100644 --- a/doc/guacamole-playback-example/src/main/webapp/playback.js +++ b/doc/guacamole-playback-example/src/main/webapp/playback.js @@ -27,6 +27,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. * @@ -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'; };