Show "busy" spinner when counting down or recording

This commit is contained in:
David Rowe 2017-04-13 19:23:22 +12:00
parent 9638b093d8
commit 8f3789421f
2 changed files with 67 additions and 44 deletions

View file

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

View file

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