From d0c8567022f1c15cf4f390f345c0662b3cdc398c Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Thu, 1 Apr 2021 12:22:23 +0200
Subject: [PATCH] playback + timer
timer not working yet
---
src/common/components/countdown/Countdown.jsx | 14 +--
src/features/control/PlaybackControl.jsx | 3 +-
src/features/editors/Editor.jsx | 119 +++++++++++++++++-
3 files changed, 117 insertions(+), 19 deletions(-)
diff --git a/src/common/components/countdown/Countdown.jsx b/src/common/components/countdown/Countdown.jsx
index 6733b38a7..5248f4639 100644
--- a/src/common/components/countdown/Countdown.jsx
+++ b/src/common/components/countdown/Countdown.jsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
import styles from './Countdown.module.css';
function display(seconds) {
@@ -11,20 +10,9 @@ function display(seconds) {
}
export default function Countdown({ time, small }) {
- const [counter, setCounter] = useState(time);
-
- useEffect(() => {
- console.log('setting time here');
- setCounter(time);
- }, [time]);
-
- useEffect(() => {
- counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
- }, [counter]);
-
return (
- {display(counter)}
+ {time === null ? '- -:- -' : display(time * 60)}
);
}
diff --git a/src/features/control/PlaybackControl.jsx b/src/features/control/PlaybackControl.jsx
index 1732f494e..f7c52a783 100644
--- a/src/features/control/PlaybackControl.jsx
+++ b/src/features/control/PlaybackControl.jsx
@@ -27,7 +27,7 @@ export default function PlaybackControl(props) {
colorScheme='green'
className={style.start}
disabled={roll}
- onClick={() => props.playbackControl('start')}
+ onClick={() => props.playbackControl('play')}
>
Start
@@ -67,6 +67,7 @@ export default function PlaybackControl(props) {
colorScheme='blue'
className={style.reset}
onClick={() => props.playbackControl('roll')}
+ disabled
>
Roll
diff --git a/src/features/editors/Editor.jsx b/src/features/editors/Editor.jsx
index 4e9513a8a..93696bdc5 100644
--- a/src/features/editors/Editor.jsx
+++ b/src/features/editors/Editor.jsx
@@ -2,7 +2,7 @@ import { IconButton } from '@chakra-ui/button';
import { SettingsIcon } from '@chakra-ui/icons';
import { Grid, GridItem, Heading } from '@chakra-ui/layout';
import { Box } from '@chakra-ui/layout';
-import { getHours, getMinutes } from 'date-fns';
+import { addSeconds, getHours, getMinutes, getSeconds } from 'date-fns';
import { differenceInSeconds } from 'date-fns/esm';
import { useContext } from 'react';
import { useEffect, useState } from 'react';
@@ -28,10 +28,113 @@ export default function Editor() {
prevState: 'pause',
});
+ // Timer stuff
+ const [timer, setTimer] = useState({
+ TIMER_UPDATE_INTERVAL: 250,
+ currentTime: null,
+ currentTimeSeconds: null,
+
+ playMode: 'stop',
+
+ isStarted: false,
+ isRunning: false,
+
+ startTime: null,
+ pauseTime: null,
+
+ lastRun: null,
+ elapsedTime: 0,
+
+ elapsedStartedTime: 0,
+ elapsedRunningTime: 0,
+
+ totalElapsedPausedTime: 0,
+ periodElapsedPausedTime: 0,
+
+ elapsedResumeTime: 0,
+
+ targetTime: null,
+ });
+
+ // update timer object
+ const updateTimer = (vals) => {
+ setTimer({ ...timer, ...vals });
+ };
+
+ // set timer target
+ const setTimerTargetinSeconds = (target) => {
+ const t = addSeconds(new Date(), target);
+ updateTimer({ currentTime: t, currentTimeSeconds: target, targetTime: t });
+ };
+
+ // timer playback control
+ const setTimerState = (state) => {
+ const now = new Date();
+
+ switch (state) {
+ case 'play': {
+ updateTimer({ playMode: state, isStarted: true, startTime: now, lastRun: now });
+ break;
+ }
+ case 'pause': {
+ updateTimer({ playMode: state, pauseTime: now, isRunning: false });
+ break;
+ }
+
+ default:
+ break;
+ }
+ };
+
+ // update
+ const updateTime = () => {
+ // exit if we are not ready
+ if (timer.startTime == null) return;
+
+ // aux
+ const now = new Date();
+
+ // how long has the time been running
+ const elapsedTime = now - timer.startTime;
+
+ if (timer.playMode === 'play') {
+ // current time here
+ const currentTime = timer.targetTime - elapsedTime;
+ updateTimer({
+ currentTime: currentTime,
+ currentTimeSeconds: getSeconds(currentTime),
+ elapsedTime: elapsedTime,
+ lastRun: now,
+ });
+ }
+
+ if (timer.playMode === 'pause') {
+ const pausedTime = now - timer.pauseTime;
+ updateTimer({
+ totalElapsedPausedTime: timer.totalElapsedPausedTime + pausedTime,
+ periodElapsedPausedTime: timer.periodElapsedPausedTime + now,
+ elapsedTime: elapsedTime,
+ lastRun: now,
+ });
+ }
+
+ // call again
+ setTimeout(updateTime, timer.TIMER_UPDATE_INTERVAL);
+ };
+
+ // when playmode changes, we might schedule a timer
+ // is this enough for change or should i check prevstate?
+ useEffect(() => {
+ if (playback.state !== 'stop' || playback.state !== null) {
+ updateTime();
+ }
+ }, [playback.state]);
+
const updatePlayback = (vals) => {
setPlayback({ ...playback, ...vals });
};
+ // gets timer on current
// ?? I have already done this a few times,
// maybe loop once and get all data?
const getCurrentTime = (target) => {
@@ -50,23 +153,24 @@ export default function Editor() {
let minEnd = getHours(curEvent.timeEnd) * 60;
minEnd = minEnd + getMinutes(curEvent.timeEnd);
-
// return time in seconds
- return ((minEnd - minStart) * 60);
+ return (minEnd - minStart) * 60;
}
};
const playbackControl = (action, payload) => {
switch (action) {
- case 'start': {
+ case 'play': {
if (playback.state !== 'play') {
updatePlayback({ state: 'play', prevState: playback.state });
+ setTimerState('play');
}
break;
}
case 'pause': {
if (playback.state !== 'pause') {
updatePlayback({ state: 'pause', prevState: playback.state });
+ setTimerState('pause');
}
break;
}
@@ -94,6 +198,8 @@ export default function Editor() {
let time = getCurrentTime(cur);
// update playback
updatePlayback({ current: cur, next: nxt, currentTimer: time });
+ // set timer
+ setTimerTargetinSeconds(time);
}
break;
}
@@ -113,6 +219,8 @@ export default function Editor() {
let time = getCurrentTime(cur);
// update playback
updatePlayback({ current: cur, next: nxt, currentTimer: time });
+ // set timer
+ setTimerTargetinSeconds(time);
}
break;
}
@@ -122,6 +230,7 @@ export default function Editor() {
};
console.log('playback here', playback);
+ console.log('timer here', timer);
return (