web: timer: several fixes, including blinking for the last minute

Author: rkdarst

web/annunciators.html

@@ -48,7 +48,7 @@
           <td><button class="indicator" id="chat">Chat</button></td>
           <td><button class="indicator" id="slower">Slower</button></td>
           <td><button class="indicator" id="faster">Faster</button></td>
-          <td><input size="4" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @HH:MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through."></span></td>
+          <td><input size="4" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @[HH:]MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through."></span></td>
         </tr>
     </table>
 

web/control.js

@@ -719,14 +719,23 @@ async function init_timers() {
             //console.log(event)
             input = event.target
 
-            regex_at = /@(\d\d?):(\d\d?)(\/(\d+))?/
+            regex_at = /@((\d\d?):)?(\d\d?)(\/(\d+))?/
             match_at = input.value.match(regex_at)
             if (match_at) {
                 // Match format @HH:MM/DD where HH:MM is a real time and DD is duration in minutes
                 endtime = new Date()
-                endtime.setHours(parseInt(match_at[1]))
-                endtime.setMinutes(parseInt(match_at[2]))
-                duration = match_at[4]*60 || null
+                hours = match_at[2] || null
+                minutes = match_at[3]
+                if (hours === null) {
+                    if (minutes <= endtime.getMinutes()) {
+                        hours = endtime.getHours() + 1
+                    } else {
+                        hours = endtime.getHours()
+                    }
+                }
+                endtime.setHours(hours)
+                endtime.setMinutes(minutes)
+                duration = match_at[5]*60 || null
                 endtime = Math.round(endtime.getTime()/1000)
                 console.log('timer parse (end time)', match_at, endtime, duration)
             } else {
@@ -764,6 +773,7 @@ async function timer_set(id, endtime, duration) {
     console.log('timer_set', id, endtime)
     // Start a countdown timer
     input = document.querySelector('input#'+id)
+    input.style.backgroundColor = null
     // token is a way to tell when a new timer has been set. If token is different, stop ticking.
     input.token = Math.random()
     setTimeout(timer_tick, 500, id, endtime, duration, input.token)
@@ -790,7 +800,10 @@ async function timer_tick(id, endtime, duration, token) {
         fraction_remaining = remaining / duration
         if (fraction_remaining < .75) {
             fraction = fraction_remaining * 4 // 1 when started, 0 when out
-            input.style.backgroundColor = `hsl(288, 100%, ${Math.max(50+50*fraction)}%)`
+            if (remaining % 2 == 0)
+                input.style.backgroundColor = `hsl(288, 100%, ${Math.max(50+50*fraction)}%)`
+            else
+                input.style.backgroundColor = null
         }
     } else {
         console.log(`timer ${id} is focused`)

web/director.html

@@ -50,7 +50,7 @@
           <td><button class="indicator" id="slower">Slower</button></td>
           <td><button class="indicator" id="faster">Faster</button></td>
           <td><span class="time" title="Current time"></span></td>
-          <td><input size="6" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @HH:MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through."></span></td>
+          <td><input size="6" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @[HH:]MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through."></span></td>
         </tr>
     </table>
 

web/small.html

@@ -57,7 +57,7 @@
             <td><span class="synced" syncwith="scene">Scene</span></td>
             <td><span class="time" title="Current time"></span></td>
             <td class="playfile timer" title="Timer for ongoing playback">-</td>
-            <td><input size="4" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @HH:MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through."></span></td>
+            <td><input size="4" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @[HH:]MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through."></span></td>
             <td class="status">Status</td>
           </tr>
     </table>

web/tablet.html

@@ -57,7 +57,7 @@
           <button class="indicator" id="chat">Chat</button>
           <button class="indicator" id="slower">Slower</button>
           <button class="indicator" id="faster">Faster</button>
-          <input size="6" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @HH:MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through.">
+          <input size="6" id="A" class="timer" style="text-align: center" title="Timer.  Set the duration with formats MM[:SS][/DD] (time remaining) or @[HH:]MM[/DD] (end time), where DD is planned duration in minutes. It starts changing color 75% of the way through.">
         </div>
         <div style="display: grid; grid-template-columns: 1fr 2fr 2fr 1fr"> <!-- under indicators-->
           <div style="display:grid;"> <!-- first column-->