Red "recording" ring animation with countdown numbers inside

scripts/system/html/css/record.css

@@ -116,6 +116,16 @@ body {
 #spinner {
     text-align: center;
     margin-top: 25%;
+    position: relative;
+}
+
+#spinner span {
+    display: block;
+    position: relative;
+    top: -101px;
+    color: #e2334d;
+    font-size: 60px;
+    font-weight: bold;
 }
 
 

scripts/system/html/js/record.js

@@ -24,6 +24,7 @@ var isUsingToolbar = false,
     elShowInfoButton,
     elLoadButton,
     elSpinner,
+    elCountdownNumber,
     elRecordButton,
     elFinishOnOpen,
     elFinishOnOpenLabel,
@@ -35,6 +36,7 @@ var isUsingToolbar = false,
     STOP_PLAYING_RECORDING_ACTION = "stopPlayingRecording",
     LOAD_RECORDING_ACTION = "loadRecording",
     START_RECORDING_ACTION = "startRecording",
+    COUNTDOWN_NUMBER_ACTION = "countdownNumber",
     STOP_RECORDING_ACTION = "stopRecording",
     FINISH_ON_OPEN_ACTION = "finishOnOpen";
 
@@ -190,6 +192,9 @@ function onScriptEventReceived(data) {
             elRecordButton.classList.add("pressed");
             updateSpinner();
             break;
+        case COUNTDOWN_NUMBER_ACTION:
+            elCountdownNumber.innerHTML = message.value;
+            break;
         case STOP_RECORDING_ACTION:
             isRecording = false;
             elRecordButton.classList.remove("pressed");
@@ -275,6 +280,7 @@ function onBodyLoaded() {
     elLoadButton.onclick = onLoadButtonClicked;
 
     elSpinner = document.getElementById("spinner");
+    elCountdownNumber = document.getElementById("countdown-number");
 
     elRecordButton = document.getElementById("record-button");
     elRecordButton.onclick = onRecordButtonClicked;

scripts/system/html/record.html

@@ -63,7 +63,8 @@
             </div>
         </div>
         <div id="spinner" class="hidden">
-            <img src="../../../resources/icons/loadingDark.gif" />
+            <img src="../../../resources/icons/loader-red-countdown-ring.gif" />
+            <span id="countdown-number">3</span>
         </div>
         <div id="record-controls">
             <div>

scripts/system/record.js

@@ -195,6 +195,7 @@
         }
 
         function finishCountdown() {
+            Dialog.countdownNumber("");
             recordingState = RECORDING;
             startRecording();
         }
@@ -202,20 +203,23 @@
         function cancelCountdown() {
             recordingState = IDLE;
             Script.clearInterval(countdownTimer);
+            Dialog.countdownNumber("");
             log("Cancel countdown");
         }
 
         function startCountdown() {
             recordingState = COUNTING_DOWN;
             log("Start countdown");
-            playSound(tickSound);
             countdownSeconds = COUNTDOWN_SECONDS;
+            Dialog.countdownNumber(countdownSeconds);
+            playSound(tickSound);
             countdownTimer = Script.setInterval(function () {
                 countdownSeconds -= 1;
                 if (countdownSeconds <= 0) {
                     Script.clearInterval(countdownTimer);
                     finishCountdown();
                 } else {
+                    Dialog.countdownNumber(countdownSeconds);
                     playSound(tickSound);
                 }
             }, 1000);
@@ -405,6 +409,7 @@
             STOP_PLAYING_RECORDING_ACTION = "stopPlayingRecording",
             LOAD_RECORDING_ACTION = "loadRecording",
             START_RECORDING_ACTION = "startRecording",
+            COUNTDOWN_NUMBER_ACTION = "countdownNumber",
             STOP_RECORDING_ACTION = "stopRecording",
             FINISH_ON_OPEN_ACTION = "finishOnOpen",
             SETTINGS_FINISH_ON_OPEN = "record/finishOnOpen";
@@ -454,6 +459,14 @@
             }));
         }
 
+        function countdownNumber(number) {
+            tablet.emitScriptEvent(JSON.stringify({
+                type: EVENT_BRIDGE_TYPE,
+                action: COUNTDOWN_NUMBER_ACTION,
+                value: number
+            }));
+        }
+
         function finishOnOpen() {
             return isFinishOnOpen;
         }
@@ -531,6 +544,7 @@
         return {
             updatePlayerDetails: updatePlayerDetails,
             updateRecordingStatus: updateRecordingStatus,
+            countdownNumber: countdownNumber,
             finishOnOpen: finishOnOpen,
             setUp: setUp,
             tearDown: tearDown