From 766a117025f149947486196cba94bfbc7a39bcfc Mon Sep 17 00:00:00 2001 From: cv <34649812+cpvalente@users.noreply.github.com> Date: Tue, 6 Apr 2021 12:21:30 +0200 Subject: [PATCH] time from server --- client/src/features/editors/Editor.jsx | 146 ++----------------------- server/app.js | 8 +- 2 files changed, 14 insertions(+), 140 deletions(-) diff --git a/client/src/features/editors/Editor.jsx b/client/src/features/editors/Editor.jsx index 4770e01df..b6938c931 100644 --- a/client/src/features/editors/Editor.jsx +++ b/client/src/features/editors/Editor.jsx @@ -29,7 +29,9 @@ export default function Editor() { prevState: 'pause', }); - const [response, setResponse] = useState(''); + const updatePlayback = (vals) => { + setPlayback({ ...playback, ...vals }); + }; // WEBSOCKETZ useEffect(() => { @@ -37,8 +39,9 @@ export default function Editor() { const socket = io('http://localhost:4001', { transport: ['websocket'] }); console.log('websocket started'); - socket.on('FromAPI', (data) => { - console.log('got date', data); + socket.on('timerSeconds', (data) => { + console.log('got time', data); + updatePlayback({ currentTimer: data }); }); socket.on('eventdata', (data) => { @@ -48,60 +51,13 @@ export default function Editor() { return () => socket.disconnect(); }, []); - // 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; } @@ -110,78 +66,6 @@ export default function Editor() { } }; - // 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) => { - if (events !== null) { - // loop through events to find target - const filteredEvents = events.filter((e) => e.type === 'event'); - const curEvent = filteredEvents[target]; - - // set as event - setEvent(curEvent); - - // extract time only from dates - let minStart = getHours(curEvent.timeStart) * 60; - minStart = minStart + getMinutes(curEvent.timeStart); - - let minEnd = getHours(curEvent.timeEnd) * 60; - minEnd = minEnd + getMinutes(curEvent.timeEnd); - - // return time in seconds - return (minEnd - minStart) * 60; - } - }; - const playbackControl = (action, payload) => { switch (action) { case 'play': { @@ -217,13 +101,8 @@ export default function Editor() { } if (playback.numEvents > 1) nxt = cur + 1; if (nxt > playback.numEvents) nxt = playback.numEvents; - - // get time - let time = getCurrentTime(cur); // update playback - updatePlayback({ current: cur, next: nxt, currentTimer: time }); - // set timer - setTimerTargetinSeconds(time); + updatePlayback({ current: cur, next: nxt }); } break; } @@ -238,13 +117,7 @@ export default function Editor() { } if (playback.numEvents > 1) nxt = cur + 1; if (nxt >= playback.numEvents) nxt = playback.numEvents - 1; - - // get time - let time = getCurrentTime(cur); - // update playback - updatePlayback({ current: cur, next: nxt, currentTimer: time }); - // set timer - setTimerTargetinSeconds(time); + updatePlayback({ current: cur, next: nxt }); } break; } @@ -254,7 +127,6 @@ export default function Editor() { }; console.log('playback here', playback); - console.log('timer here', timer); return ( diff --git a/server/app.js b/server/app.js index 9ef56fbb1..ac1bf1563 100644 --- a/server/app.js +++ b/server/app.js @@ -23,6 +23,9 @@ const io = socketIo(server, { }, }); +// timer stuff, for now +let timer = 5400; + // transmit let interval; @@ -40,9 +43,8 @@ io.on('connection', (socket) => { }); const getApiAndEmit = (socket) => { - const response = new Date(); - // Emitting a new message. Will be consumed by the client - socket.emit('FromAPI', response); + socket.emit('timerSeconds', timer); + if (timer > 0) timer = timer - 1; }; server.listen(port, () => console.log(`Listening on port ${port}`));