From 25de43391aebb6a042fcc2ba2755e7fe081a8187 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Sat, 15 Jul 2017 16:50:02 -0700
Subject: [PATCH] GUACAMOLE-346: Display "seek in progress" notification when
 seeking in playback example.

---
 .../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(-)

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