Introduced moving ellipsis to page on before-text.

client.js

@@ -75,19 +75,28 @@ function setupRadioPlayer() {
     });
 
     let autoplayed = false; // Only autoplay once (don't want to autoplay after it's been actively paused.
+    let startedEllipsis = false;
     function handleRadioTextDisplay() {
         let now = moment.utc();
 
         if (now < startTime) {
             $beforeEl.removeClass("hidden");
+
+            if (!startedEllipsis) {
+                setupMovingEllipsis();
+                startedEllipsis = true;
+            }
         } else if (now < endTime) {
             $beforeEl.addClass("hidden");
             $radioHandler.removeClass("hidden");
             audioElementHandler.addClass("cursor-pointer");
             $duringEl.removeClass("hidden");
 
-            if (!autoplayed) playRadio();
-            autoplayed = true;
+            if (!autoplayed) {
+                playRadio();
+                autoplayed = true;
+                $(document).trigger("breakEllipsisInterval");
+            }
         } else {
             $beforeEl.addClass("hidden");
             $radioHandler.addClass("hidden");
@@ -103,6 +112,31 @@ function setupRadioPlayer() {
     setInterval(handleRadioTextDisplay, 5000);
 }
 
+function setupMovingEllipsis() {
+    let $ellipsisEl = $('#ellipsis');
+    let i = 0;
+    function handleMovingEllipsis() {
+        if (i === 3) {
+            i = 0;
+        } else {
+            i++;
+        }
+
+        let text = "";
+        for (let j=0; j<i; j++) {
+            text += '.';
+        }
+
+        $ellipsisEl.text(text);
+    }
+    let ellipsisInterval = setInterval(handleMovingEllipsis, 1000);
+
+    $(document).on('breakEllipsisInterval', function() {
+        window.clearInterval(ellipsisInterval);
+    });
+}
+
+
 $(document).ready(function() {
     ga('send', 'pageview', window.location.pathname);
 

index.html

@@ -81,7 +81,7 @@
 
     <div class="header__radio-player">
         <div class="header__radio-player__text primary-font">
-            <span id="before-text" class="hidden header-fuzzy-text header-fuzzy-text--dark">Live Radio Broadcast 7th September 18:00 BST</span>
+            <span id="before-text" class="hidden header-fuzzy-text header-fuzzy-text--dark">Live Radio Broadcast 7th September 18:00 BST<span id="ellipsis" class="header-fuzzy-text header-fuzzy-text--dark"></span></span>
             <span id="during-text" class="hidden header-fuzzy-text header-fuzzy-text--dark">
                 <i id="live-now-circle" class="fa fa-circle header-fuzzy-text header-fuzzy-text--red" aria-hidden="true"></i>
                 LIVE NOW: Mount Kimbie - Love What Survives