Radio player handle clicking only when active.

client.js

@@ -16,6 +16,11 @@ function setupRadioPlayer() {
     const width = window.innerWidth;
     const isMobile = width <= 767;
 
+    // let startTime = moment().add(2, 'seconds');
+    // let endTime = moment().add(7, 'seconds');
+    let startTime = moment.utc("2017-09-07 17:00"); // yyyy-mm-dd
+    let endTime = moment.utc("2017-09-07 18:00"); // yyyy-mm-dd
+
     let audioElement = document.getElementById('nts-player-audio');
     let radioIsPlaying = false;
     let audioElementHandler, $audioIcon, $beforeEl, $duringEl, $radioHandler, $afterEl;
@@ -59,19 +64,16 @@ function setupRadioPlayer() {
     }
 
     audioElementHandler.on('click', function() {
-        if (radioIsPlaying) {
-            stopRadio();
-        } else {
-            playRadio();
+        let now = moment.utc();
+        if (now > startTime && now < endTime) {
+            if (radioIsPlaying) {
+                stopRadio();
+            } else {
+                playRadio();
+            }
         }
     });
 
-
-    // let startTime = moment().add(2, 'seconds');
-    // let endTime = moment().add(7, 'seconds');
-    let startTime = moment.utc("2017-09-07 17:00"); // yyyy-mm-dd
-    let endTime = moment.utc("2017-09-07 18:00"); // yyyy-mm-dd
-
     let autoplayed = false; // Only autoplay once (don't want to autoplay after it's been actively paused.
     function handleRadioTextDisplay() {
         let now = moment.utc();
@@ -81,13 +83,15 @@ function setupRadioPlayer() {
         } else if (now < endTime) {
             $beforeEl.addClass("hidden");
             $radioHandler.removeClass("hidden");
+            audioElementHandler.addClass("cursor-pointer");
             $duringEl.removeClass("hidden");
 
             if (!autoplayed) playRadio();
             autoplayed = true;
         } else {
             $beforeEl.addClass("hidden");
             $radioHandler.addClass("hidden");
+            audioElementHandler.removeClass("cursor-pointer");
             $duringEl.addClass("hidden");
             $afterEl.removeClass('hidden');
 

index.html

@@ -79,7 +79,7 @@
         <a id="nts-logo" href="http://www.nts.live" target="_blank"> </a>
     </div>
 
-    <div class="header__radio-player" >
+    <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="during-text" class="hidden header-fuzzy-text header-fuzzy-text--dark">

style.scss

@@ -98,7 +98,6 @@ $header-padding: 5px;
     right: 15px;
 }
 .header__radio-player {
-    cursor: pointer;
 }
 .header__radio-player, .header__mixcloud-container {
     font-size: 1.2em;
@@ -394,6 +393,10 @@ img {
                                   supported by Chrome and Opera */
 }
 
+.cursor-pointer {
+    cursor: pointer;
+}
+
 /** Animations */
 @keyframes flickerAnimation {
     0%   { opacity:1; }