GUACAMOLE-346: Display "seek in progress" notification when seeking in playback example.

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">

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%;

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');
+
+        });
     };
 
 })();