mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-09 17:33:55 +00:00
feat: unload - reload
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -48,7 +48,7 @@ const withSocket = (Component) => {
|
||||
subtitleNext: '',
|
||||
presenterNext: '',
|
||||
});
|
||||
const [selectedId, setSelectedId] = useState({});
|
||||
const [selectedId, setSelectedId] = useState(null);
|
||||
const [general, setGeneral] = useState({
|
||||
title: '',
|
||||
url: '',
|
||||
|
||||
@@ -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
@@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user