diff --git a/doc/guacamole-playback-example/src/main/webapp/index.html b/doc/guacamole-playback-example/src/main/webapp/index.html
index 69e79a963..64f8cbcef 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 @@
-
+
+
+
+
Seek in progress... Click "play" to cancel.
+
+
+
diff --git a/doc/guacamole-playback-example/src/main/webapp/playback.css b/doc/guacamole-playback-example/src/main/webapp/playback.css
index 210506f35..ce0c96e46 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%;
diff --git a/doc/guacamole-playback-example/src/main/webapp/playback.js b/doc/guacamole-playback-example/src/main/webapp/playback.js
index 170a2b5ed..d99322a94 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');
+
+ });
};
})();