GUACAMOLE-346: Provide explicit "cancel" button for in-progress seek.

doc/guacamole-playback-example/src/main/webapp/index.html

@@ -34,7 +34,10 @@
             <div id="display">
                 <div class="notification-container">
                     <div class="seek-notification">
-                        <p>Seek in progress... Click "play" to cancel.</p>
+                        <p>
+                            Seek in progress...
+                            <button id="cancel-seek">Cancel</button>
+                        </p>
                     </div>
                 </div>
             </div>

doc/guacamole-playback-example/src/main/webapp/playback.js

@@ -41,6 +41,13 @@
      */
     var playPause = document.getElementById('play-pause');
 
+    /**
+     * Button for cancelling in-progress seek operations.
+     *
+     * @type Element
+     */
+    var cancelSeek = document.getElementById('cancel-seek');
+
     /**
      * Text status display indicating the current playback position within the
      * recording.
@@ -164,6 +171,12 @@
             recording.pause();
     };
 
+    // Cancel seek operation when cancel button is clicked
+    cancelSeek.onclick = function cancelSeekOperation(e) {
+        recording.pause();
+        e.stopPropagation();
+    };
+
     // Fit display within containing div
     recordingDisplay.onresize = function displayResized(width, height) {