Mirrors/overte-HifiExperiments
3
0
Fork 0
mirror of https://github.com/HifiExperiments/overte.git synced 2025-08-09 13:11:43 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show "busy" spinner when counting down or recording

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

33
scripts/system/html/js/record.js
View file

@ -15,13 +15,15 @@ var isUsingToolbar = false,
isRecording = false, isRecording = false,
numberOfPlayers = 0, numberOfPlayers = 0,
recordingsBeingPlayed = [], recordingsBeingPlayed = [],
elRecordingsPlaying,
elRecordings, elRecordings,
elRecordingsPlaying,
elRecordingsList,
elInstructions, elInstructions,
elPlayersUnused, elPlayersUnused,
elHideInfoButton, elHideInfoButton,
elShowInfoButton, elShowInfoButton,
elLoadButton, elLoadButton,
elSpinner,
elRecordButton, elRecordButton,
elFinishOnOpen, elFinishOnOpen,
elFinishOnOpenLabel, elFinishOnOpenLabel,
@ -65,7 +67,7 @@ function updateRecordings() {
recordingsBeingPlayed.sort(orderRecording); recordingsBeingPlayed.sort(orderRecording);
tbody = document.createElement("tbody"); tbody = document.createElement("tbody");
tbody.id = "recordings"; tbody.id = "recordings-list";
for (i = 0, length = recordingsBeingPlayed.length; i < length; i += 1) { for (i = 0, length = recordingsBeingPlayed.length; i < length; i += 1) {
tr = document.createElement("tr"); tr = document.createElement("tr");
@ -94,8 +96,8 @@ function updateRecordings() {
tbody.appendChild(tr); tbody.appendChild(tr);
} }
elRecordingsPlaying.replaceChild(tbody, elRecordings); elRecordingsPlaying.replaceChild(tbody, elRecordingsList);
elRecordings = document.getElementById("recordings"); elRecordingsList = document.getElementById("recordings-list");
} }
function updateInstructions() { function updateInstructions() {
@ -110,11 +112,11 @@ function updateInstructions() {
// Display instructions if user requested or no players available. // Display instructions if user requested or no players available.
if (isDisplayingInstructions || numberOfPlayers === 0) { if (isDisplayingInstructions || numberOfPlayers === 0) {
elRecordings.classList.add("hidden"); elRecordingsList.classList.add("hidden");
elInstructions.classList.remove("hidden"); elInstructions.classList.remove("hidden");
} else { } else {
elInstructions.classList.add("hidden"); 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() { function updateFinishOnOpenLabel() {
var WINDOW_FINISH_ON_OPEN_LABEL = "Finish recording when open dialog", var WINDOW_FINISH_ON_OPEN_LABEL = "Finish recording when open dialog",
TABLET_FINISH_ON_OPEN_LABEL = "Finish recording when open tablet"; TABLET_FINISH_ON_OPEN_LABEL = "Finish recording when open tablet";
@ -159,6 +171,7 @@ function onScriptEventReceived(data) {
if (isRecording) { if (isRecording) {
elRecordButton.classList.add("pressed"); elRecordButton.classList.add("pressed");
} }
updateSpinner();
break; break;
case RECORDINGS_BEING_PLAYED_ACTION: case RECORDINGS_BEING_PLAYED_ACTION:
recordingsBeingPlayed = JSON.parse(message.value); recordingsBeingPlayed = JSON.parse(message.value);
@ -193,6 +206,7 @@ function onRecordButtonClicked() {
action: START_RECORDING_ACTION action: START_RECORDING_ACTION
})); }));
isRecording = true; isRecording = true;
updateSpinner();
} else { } else {
elRecordButton.classList.remove("pressed"); elRecordButton.classList.remove("pressed");
EventBridge.emitWebEvent(JSON.stringify({ EventBridge.emitWebEvent(JSON.stringify({
@ -200,6 +214,7 @@ function onRecordButtonClicked() {
action: STOP_RECORDING_ACTION action: STOP_RECORDING_ACTION
})); }));
isRecording = false; isRecording = false;
updateSpinner();
} }
} }
@ -222,8 +237,10 @@ function onBodyLoaded() {
EventBridge.scriptEventReceived.connect(onScriptEventReceived); EventBridge.scriptEventReceived.connect(onScriptEventReceived);
elRecordingsPlaying = document.getElementById("recordings-playing");
elRecordings = document.getElementById("recordings"); elRecordings = document.getElementById("recordings");
elRecordingsPlaying = document.getElementById("recordings-playing");
elRecordingsList = document.getElementById("recordings-list");
elInstructions = document.getElementById("instructions"); elInstructions = document.getElementById("instructions");
elPlayersUnused = document.getElementById("players-unused"); elPlayersUnused = document.getElementById("players-unused");
@ -235,6 +252,8 @@ function onBodyLoaded() {
elLoadButton = document.getElementById("load-button"); elLoadButton = document.getElementById("load-button");
elLoadButton.onclick = onLoadButtonClicked; elLoadButton.onclick = onLoadButtonClicked;
elSpinner = document.getElementById("spinner");
elRecordButton = document.getElementById("record-button"); elRecordButton = document.getElementById("record-button");
elRecordButton.onclick = onRecordButtonClicked; elRecordButton.onclick = onRecordButtonClicked;

78
scripts/system/html/record.html
View file

@ -19,44 +19,48 @@
<div class="title"> <div class="title">
<label>Record</label> <label>Record</label>
</div> </div>
<div> <div id="recordings">
<table id="recordings-playing"> <div>
<thead> <table id="recordings-playing">
<tr> <thead>
<th>Recordings Being Played</th> <tr>
<th>Unload</th> <th>Recordings Being Played</th>
</tr> <th>Unload</th>
</thead> </tr>
<tbody id="recordings"> </thead>
</tbody> <tbody id="recordings-list"></tbody>
<tbody id="instructions" class="hidden"> <tbody id="instructions" class="hidden">
<tr> <tr>
<td colspan="2"> <td colspan="2">
<p> <p>
If you're in your own sandbox or are a domain administrator:<br /> 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 /> 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 /> 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 /> Click "Save and restart".<br />
Now you can play recordings in the domain! Now you can play recordings in the domain!
</p> </p>
<p> <p>
<input id="hide-info-button" type="button" value="OK" /> <input id="hide-info-button" type="button" value="OK" />
</p> </p>
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tfoot> <tfoot>
<tr> <tr>
<td id="footer-text" colspan="2"> <td id="footer-text" colspan="2">
Number of available instances: <span id="players-unused"></span> Number of available instances: <span id="players-unused"></span>
<input id="show-info-button" type="button" value="i" /> <input id="show-info-button" type="button" value="i" />
</td> </td>
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div>
<div>
<input id="load-button" type="button" value="Load" disabled />
</div>
</div> </div>
<div> <div id="spinner" class="hidden">
<input id="load-button" type="button" value="Load" disabled /> <p>TODO: Spinner</p>
</div> </div>
<div> <div>
<input id="record-button" class="red" type="button" value="Record" /> <input id="record-button" class="red" type="button" value="Record" />