mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-04 08:33:12 +02:00
Show "busy" spinner when counting down or recording
This commit is contained in:
parent
9638b093d8
commit
8f3789421f
2 changed files with 67 additions and 44 deletions
|
@ -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;
|
||||
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Reference in a new issue