feat: increment running timer

client/src/features/control/PlaybackControl.jsx

@@ -3,6 +3,7 @@ import Countdown from '../../common/components/countdown/Countdown';
 import { stringFromMillis } from '../../common/dateConfig';
 import { useEffect, useState } from 'react';
 import { useSocket } from '../../app/context/socketContext';
+import { Button } from '@chakra-ui/button';
 import StartIconBtn from '../../common/components/buttons/StartIconBtn';
 import PauseIconBtn from '../../common/components/buttons/PauseIconBtn';
 import PrevIconBtn from '../../common/components/buttons/PrevIconBtn';
@@ -96,6 +97,14 @@ export default function PlaybackControl() {
   const started = stringFromMillis(timer.startedAt, true);
   const finish = stringFromMillis(timer.expectedFinish, true);
 
+  const incrementProps = {
+    size: 'sm',
+    width: '2.9em',
+    colorScheme: 'whiteAlpha',
+    variant: 'outline',
+    _focus: { boxShadow: 'none' },
+  };
+
   return (
     <div className={style.mainContainer}>
       <div className={style.timeContainer}>
@@ -110,6 +119,32 @@ export default function PlaybackControl() {
           <span className={style.tag}>Finish at </span>
           <span className={style.time}>{finish}</span>
         </div>
+        <div className={style.btn}>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', 1)}
+          >
+            +1
+          </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', 5)}
+          >
+            +5
+          </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', -1)}
+          >
+            -1
+          </Button>
+          <Button
+            {...incrementProps}
+            onClick={() => socket.emit('increment-timer', -5)}
+          >
+            -5
+          </Button>
+        </div>
       </div>
 
       <div className={style.playbackContainer}>

client/src/features/control/PlaybackControl.module.css

@@ -17,10 +17,10 @@
 .timeContainer {
   display: grid;
   grid-template-areas:
-    'clk clk ...'
-    'sta fin ...';
+    'clk clk btn'
+    'sta fin btn';
   grid-template-rows: 1fr auto;
-  grid-template-columns: 1fr 1fr 80px;
+  grid-template-columns: 2fr 2fr 22%;
   gap: 5px;
   justify-items: start;
 }
@@ -29,6 +29,22 @@
   grid-area: clk;
 }
 
+.btn {
+  grid-area: btn;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+}
+
+.minus {
+  grid-area: min;
+  display: flex;
+  flex-direction: column;
+}
+
 .start {
   grid-area: sta;
 }

server/classes/EventTimer.js

@@ -239,6 +239,12 @@ class EventTimer extends Timer {
         socket.emit('timer', this.getObject());
       });
 
+      socket.on('increment-timer', (data) => {
+        if (isNaN(parseInt(data))) return;
+        if (data < -5 || data > 5) return;
+        this.increment(data * 1000 * 60);
+      });
+
       /*******************************************/
       // playstate
       socket.on('set-playstate', (data) => {
@@ -624,6 +630,14 @@ class EventTimer extends Timer {
     this.broadcastState();
   }
 
+  increment(amount) {
+    // call super
+    super.increment(amount);
+
+    // broadcast current state
+    this.broadcastState();
+  }
+
   goto(eventIndex) {
     // load event
     this.loadEvent(eventIndex);

server/classes/Timer.js

@@ -58,6 +58,7 @@ class Timer {
         }
         break;
       case 'pause':
+        if (this.current <= 0) return;
         // update paused time
         this._pausedInterval = now - this._pausedAt;
         break;
@@ -129,8 +130,8 @@ class Timer {
   start() {
     // do we need to change
     if (this.state === 'start') return;
-    else if (this.duration === 0) return;
-    else if (this.startedAt == null) {
+    else if (this.duration <= 0) return;
+    else if (this._startedAt == null) {
       this._resetTimers();
       const now = this._getCurrentTime();
       this._startedAt = now;
@@ -165,6 +166,21 @@ class Timer {
     this._resetTimers();
     this.state = 'stop';
   }
+
+  increment(amount) {
+
+    if (amount < 0) {
+      if (Math.abs(amount) > this.current) {
+        console.log('ot os');
+
+        this.current = 0;
+        this._finishAt = this._getCurrentTime();
+        return;
+      }
+    }
+    this.current += amount;
+    this._finishAt += amount;
+  }
 }
 
 module.exports = Timer;