feat: unload - reload

This commit is contained in:
cv
2021-04-24 12:21:15 +02:00
parent ea92fc7de7
commit 75b8e9b8be
21 changed files with 151 additions and 18 deletions
+10
View File
@@ -34,3 +34,13 @@ export const getNext = async () => {
const res = axios.get(playbackURL + '/next');
return res;
};
export const getUnload = async () => {
const res = axios.get(playbackURL + '/unload');
return res;
};
export const getReload = async () => {
const res = axios.get(playbackURL + '/reload');
return res;
};
@@ -9,6 +9,7 @@ export default function AddIconBtn(props) {
colorScheme='blue'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -9,6 +9,7 @@ export default function BlockIconBtn(props) {
colorScheme='purple'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -10,6 +10,7 @@ export default function CollapseIconBtn(props) {
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -9,6 +9,7 @@ export default function DelayIconBtn(props) {
colorScheme='yellow'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -9,6 +9,7 @@ export default function DeleteIconBtn(props) {
colorScheme='red'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -6,11 +6,12 @@ export default function NextIconBtn(props) {
<IconButton
icon={<FiSkipForward />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
backgroundColor='#ffffff11'
variant='outline'
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -10,6 +10,7 @@ export default function PauseIconBtn(props) {
onClick={props.clickHandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -6,11 +6,12 @@ export default function PrevIconBtn(props) {
<IconButton
icon={<FiSkipBack />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
backgroundColor='#ffffff11'
variant='outline'
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -11,6 +11,7 @@ export default function ReloadIconButton(props) {
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -9,8 +9,9 @@ export default function RollIconBtn(props) {
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
width={120}
disabled
_focus={{ boxShadow: 'none' }}
{...props}
disabled
/>
);
}
@@ -10,6 +10,7 @@ export default function SettingsIconBtn(props) {
variant='outline'
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -10,6 +10,7 @@ export default function StartIconBtn(props) {
onClick={props.clickHandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -11,6 +11,7 @@ export default function UnloadIconBtn(props) {
onClick={props.clickHandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -10,6 +10,7 @@ export default function VisibleIconBtn(props) {
variant={props.active ? 'solid' : 'outline'}
onClick={props.clickHandler}
_focus={{ boxShadow: 'none' }}
{...props}
/>
);
}
@@ -20,6 +20,7 @@ export default function PlaybackControl() {
startedAt: null,
expectedFinish: null,
});
const [selectedId, setSelectedId] = useState(null);
const resetTimer = () => {
setTimer({
@@ -35,6 +36,7 @@ export default function PlaybackControl() {
socket.emit('get-timer');
socket.emit('get-playstate');
socket.emit('get-selected-id');
// Handle playstate
socket.on('playstate', (data) => {
@@ -46,10 +48,16 @@ export default function PlaybackControl() {
setTimer({ ...data });
});
// Handle selected event
socket.on('selected-id', (data) => {
setSelectedId(data);
});
// Clear listener
return () => {
socket.off('playstate');
socket.off('timer');
socket.off('selected-id');
};
}, [socket]);
@@ -72,6 +80,14 @@ export default function PlaybackControl() {
socket.emit('set-playstate', 'next');
resetTimer();
break;
case 'unload':
socket.emit('set-playstate', 'unload');
resetTimer();
break;
case 'reload':
socket.emit('set-playstate', 'reload');
resetTimer();
break;
default:
break;
}
@@ -100,10 +116,12 @@ export default function PlaybackControl() {
<StartIconBtn
active={playback === 'start'}
clickHandler={() => playbackControl('start')}
disabled={!selectedId}
/>
<PauseIconBtn
active={playback === 'pause'}
clickHandler={() => playbackControl('pause')}
disabled={!selectedId}
/>
<RollIconBtn
active={playback === 'roll'}
@@ -113,8 +131,14 @@ export default function PlaybackControl() {
<div className={style.playbackContainer}>
<PrevIconBtn clickHandler={() => playbackControl('previous')} />
<NextIconBtn clickHandler={() => playbackControl('next')} />
<UnloadIconBtn clickHandler={() => playbackControl('unload')} />
<ReloadIconButton clickHandler={() => playbackControl('reload')} />
<UnloadIconBtn
clickHandler={() => playbackControl('unload')}
disabled={!selectedId}
/>
<ReloadIconButton
clickHandler={() => playbackControl('reload')}
disabled={!selectedId}
/>
</div>
</div>
);
+1 -1
View File
@@ -48,7 +48,7 @@ const withSocket = (Component) => {
subtitleNext: '',
presenterNext: '',
});
const [selectedId, setSelectedId] = useState({});
const [selectedId, setSelectedId] = useState(null);
const [general, setGeneral] = useState({
title: '',
url: '',
+71 -2
View File
@@ -78,6 +78,24 @@ class EventTimer extends Timer {
this.io.emit(address, payload);
}
update() {
// if there is nothing selected, no nothing
if (!this.selectedEventId) return;
super.update();
}
start() {
// if there is nothing selected, no nothing
if (!this.selectedEventId) return;
super.start()
}
pause() {
// if there is nothing selected, no nothing
if (!this.selectedEventId) return;
super.pause()
}
_setterManager(action, payload) {
switch (action) {
/*******************************************/
@@ -89,9 +107,10 @@ class EventTimer extends Timer {
else if (payload === 'stop') this.stop();
else if (payload === 'previous') this.previous();
else if (payload === 'next') this.next();
else if (payload === 'reload') this.reload();
else if (payload === 'unload') this.unload();
// Not yet implemented
// else if (payload === 'roll') this.roll();
// else if (payload === 'release') this.roll();
this.broadcastThis('playstate', this.playState);
this.broadcastThis('selected-id', this.selectedEventId);
this.broadcastThis('titles', this.titles);
@@ -155,7 +174,7 @@ class EventTimer extends Timer {
console.log(
`EventTimer: Client disconnected, total now: ${this._numClients}`
);
})
});
/***************************************/
/*** TIMER STATE GETTERS / SETTERS ***/
@@ -333,6 +352,20 @@ class EventTimer extends Timer {
}
}
_resetSelection() {
this.titles = {
titleNow: null,
subtitleNow: null,
presenterNow: null,
titleNext: null,
subtitleNext: null,
presenterNext: null,
};
this.selectedEvent = null;
this.selectedEventId = null;
}
print() {
return `
Timer
@@ -438,6 +471,14 @@ class EventTimer extends Timer {
}
previous() {
// check that we have events to run
if (this.numEvents < 1) return;
// if there is no event running, go to first
if (!this.selectedEvent) {
this.goto(0);
return;
}
const gotoEvent = this.selectedEvent > 0 ? this.selectedEvent - 1 : 0;
if (gotoEvent === this.selectedEvent) return;
@@ -445,6 +486,15 @@ class EventTimer extends Timer {
}
next() {
// check that we have events to run
if (this.numEvents < 1) return;
// if there is no event running, go to first
if (!this.selectedEvent) {
this.goto(0);
return;
}
const gotoEvent =
this.selectedEvent < this.numEvents - 1
? this.selectedEvent + 1
@@ -453,6 +503,25 @@ class EventTimer extends Timer {
if (gotoEvent === this.selectedEvent) return;
this.goto(gotoEvent);
}
unload() {
// reset duration
this.duration = null;
// reset timers
this._resetTimers();
// reset playstate
this.state = 'stop';
// reset selected
this._resetSelection();
}
reload() {
this._resetTimers();
this.state = 'pause';
}
}
module.exports = EventTimer;
+3 -10
View File
@@ -91,12 +91,12 @@ class Timer {
}
_resetTimers() {
this.current = this.duration;
this._finishAt = null;
this._startedAt = null;
this._pausedAt = null;
this._pausedInterval = null;
this._pausedTotal = null;
this.state = 'stop';
}
// getObject
@@ -127,7 +127,7 @@ class Timer {
start() {
// do we need to change
if (this.state === 'start') return;
else if (this.state === 'stop') {
else if (this.startedAt == null) {
const now = this._getCurrentTime();
this._startedAt = now;
this._finishAt = now + this.duration;
@@ -157,14 +157,7 @@ class Timer {
if (this.state === 'stop') return;
// clear all timers
this.current = duration;
this._finishAt = null;
this._startedAt = null;
this._pausedAt = null;
this._pausedInterval = null;
this._pausedTotal = null;
// change state
this._resetTimers();
this.state = 'stop';
}
}
+17
View File
@@ -45,3 +45,20 @@ exports.pbNext = async (req, res) => {
global.timer.next();
res.sendStatus(200);
};
// Create controller for GET request to '/playback/unload'
// Unloads any events
exports.pbUnload = async (req, res) => {
global.timer.unload();
console.log('debug: unload called')
res.sendStatus(200);
};
// Create controller for GET request to '/playback/reload'
// Reloads current event
exports.pbReload = async (req, res) => {
global.timer.reload();
console.log('debug: reload called')
res.sendStatus(200);
};
+6
View File
@@ -25,4 +25,10 @@ router.get('/previous', playbackController.pbPrevious);
// create route between controller and '/playback/next' endpoint
router.get('/next', playbackController.pbNext);
// create route between controller and '/playback/unload' endpoint
router.get('/unload', playbackController.pbUnload);
// create route between controller and '/playback/reload' endpoint
router.get('/reload', playbackController.pbReload);
module.exports = router;