From 8f3789421f00787b1857a076b98014ec3dc86ad3 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Thu, 13 Apr 2017 19:23:22 +1200
Subject: [PATCH] Show "busy" spinner when counting down or recording

---
 scripts/system/html/js/record.js | 33 +++++++++++---
 scripts/system/html/record.html  | 78 +++++++++++++++++---------------
 2 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/scripts/system/html/js/record.js b/scripts/system/html/js/record.js
index 2adeca8768..c45dde1f53 100644
--- a/scripts/system/html/js/record.js
+++ b/scripts/system/html/js/record.js
@@ -15,13 +15,15 @@ var isUsingToolbar = false,
     isRecording = false,
     numberOfPlayers = 0,
     recordingsBeingPlayed = [],
-    elRecordingsPlaying,
     elRecordings,
+    elRecordingsPlaying,
+    elRecordingsList,
     elInstructions,
     elPlayersUnused,
     elHideInfoButton,
     elShowInfoButton,
     elLoadButton,
+    elSpinner,
     elRecordButton,
     elFinishOnOpen,
     elFinishOnOpenLabel,
@@ -65,7 +67,7 @@ function updateRecordings() {
     recordingsBeingPlayed.sort(orderRecording);
 
     tbody = document.createElement("tbody");
-    tbody.id = "recordings";
+    tbody.id = "recordings-list";
 
     for (i = 0, length = recordingsBeingPlayed.length; i < length; i += 1) {
         tr = document.createElement("tr");
@@ -94,8 +96,8 @@ function updateRecordings() {
         tbody.appendChild(tr);
     }
 
-    elRecordingsPlaying.replaceChild(tbody, elRecordings);
-    elRecordings = document.getElementById("recordings");
+    elRecordingsPlaying.replaceChild(tbody, elRecordingsList);
+    elRecordingsList = document.getElementById("recordings-list");
 }
 
 function updateInstructions() {
@@ -110,11 +112,11 @@ function updateInstructions() {
 
     // Display instructions if user requested or no players available.
     if (isDisplayingInstructions || numberOfPlayers === 0) {
-        elRecordings.classList.add("hidden");
+        elRecordingsList.classList.add("hidden");
         elInstructions.classList.remove("hidden");
     } else {
         elInstructions.classList.add("hidden");
-        elRecordings.classList.remove("hidden");
+        elRecordingsList.classList.remove("hidden");
     }
 }
 
@@ -136,6 +138,16 @@ function updateLoadButton() {
     }
 }
 
+function updateSpinner() {
+    if (isRecording) {
+        elRecordings.classList.add("hidden");
+        elSpinner.classList.remove("hidden");
+    } else {
+        elSpinner.classList.add("hidden");
+        elRecordings.classList.remove("hidden");
+    }
+}
+
 function updateFinishOnOpenLabel() {
     var WINDOW_FINISH_ON_OPEN_LABEL = "Finish recording when open dialog",
         TABLET_FINISH_ON_OPEN_LABEL = "Finish recording when open tablet";
@@ -159,6 +171,7 @@ function onScriptEventReceived(data) {
             if (isRecording) {
                 elRecordButton.classList.add("pressed");
             }
+            updateSpinner();
             break;
         case RECORDINGS_BEING_PLAYED_ACTION:
             recordingsBeingPlayed = JSON.parse(message.value);
@@ -193,6 +206,7 @@ function onRecordButtonClicked() {
             action: START_RECORDING_ACTION
         }));
         isRecording = true;
+        updateSpinner();
     } else {
         elRecordButton.classList.remove("pressed");
         EventBridge.emitWebEvent(JSON.stringify({
@@ -200,6 +214,7 @@ function onRecordButtonClicked() {
             action: STOP_RECORDING_ACTION
         }));
         isRecording = false;
+        updateSpinner();
     }
 }
 
@@ -222,8 +237,10 @@ function onBodyLoaded() {
 
     EventBridge.scriptEventReceived.connect(onScriptEventReceived);
 
-    elRecordingsPlaying = document.getElementById("recordings-playing");
     elRecordings = document.getElementById("recordings");
+
+    elRecordingsPlaying = document.getElementById("recordings-playing");
+    elRecordingsList = document.getElementById("recordings-list");
     elInstructions = document.getElementById("instructions");
     elPlayersUnused = document.getElementById("players-unused");
 
@@ -235,6 +252,8 @@ function onBodyLoaded() {
     elLoadButton = document.getElementById("load-button");
     elLoadButton.onclick = onLoadButtonClicked;
 
+    elSpinner = document.getElementById("spinner");
+
     elRecordButton = document.getElementById("record-button");
     elRecordButton.onclick = onRecordButtonClicked;
 
diff --git a/scripts/system/html/record.html b/scripts/system/html/record.html
index 5eb18de491..cf70fb2401 100644
--- a/scripts/system/html/record.html
+++ b/scripts/system/html/record.html
@@ -19,44 +19,48 @@
         <div class="title">
             <label>Record</label>
         </div>
-        <div>
-            <table id="recordings-playing">
-                <thead>
-                    <tr>
-                        <th>Recordings Being Played</th>
-                        <th>Unload</th>
-                    </tr>
-                </thead>
-                <tbody id="recordings">
-                </tbody>
-                <tbody id="instructions" class="hidden">
-                    <tr>
-                        <td colspan="2">
-                            <p>
-                                If you're in your own sandbox or are a domain administrator:<br />
-                                Right-click the High Fidelity Sandbox icon in your system tray <br />and click "Settings".<br />
-                                In the "Scripts" section add a new Script URL, <br />playRecordingAC.js, and set # instances to 1 or more.<br />
-                                Click "Save and restart".<br />
-                                Now you can play recordings in the domain!
-                            </p>
-                            <p>
-                                <input id="hide-info-button" type="button" value="OK" />
-                            </p>
-                        </td>
-                    </tr>
-                </tbody>
-                <tfoot>
-                    <tr>
-                        <td id="footer-text" colspan="2">
-                            Number of available instances: <span id="players-unused"></span>
-                            <input id="show-info-button" type="button" value="i" />
-                        </td>
-                    </tr>
-                </tfoot>
-            </table>
+        <div id="recordings">
+            <div>
+                <table id="recordings-playing">
+                    <thead>
+                        <tr>
+                            <th>Recordings Being Played</th>
+                            <th>Unload</th>
+                        </tr>
+                    </thead>
+                    <tbody id="recordings-list"></tbody>
+                    <tbody id="instructions" class="hidden">
+                        <tr>
+                            <td colspan="2">
+                                <p>
+                                    If you're in your own sandbox or are a domain administrator:<br />
+                                    Right-click the High Fidelity Sandbox icon in your system tray <br />and click "Settings".<br />
+                                    In the "Scripts" section add a new Script URL, <br />playRecordingAC.js, and set # instances to 1 or more.<br />
+                                    Click "Save and restart".<br />
+                                    Now you can play recordings in the domain!
+                                </p>
+                                <p>
+                                    <input id="hide-info-button" type="button" value="OK" />
+                                </p>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tfoot>
+                        <tr>
+                            <td id="footer-text" colspan="2">
+                                Number of available instances: <span id="players-unused"></span>
+                                <input id="show-info-button" type="button" value="i" />
+                            </td>
+                        </tr>
+                    </tfoot>
+                </table>
+            </div>
+            <div>
+                <input id="load-button" type="button" value="Load" disabled />
+            </div>
         </div>
-        <div>
-            <input id="load-button" type="button" value="Load" disabled />
+        <div id="spinner" class="hidden">
+            <p>TODO: Spinner</p>
         </div>
         <div>
             <input id="record-button" class="red" type="button" value="Record" />