cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-20 22:49:18 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

Ux/54 help (#88)

Browse Source 
* ux/54-help tooltips
* ux/54-help refetch after mutation
* ux/54-help broadcast event index
* ux/54-help prevent multiple keypresses when key held
* ux/54-help fat clock
* ux/54-help progress bar user defined
* ux/54-help onAir is button
* ux/54-help OSC: add missing presenter message
* ux/54-help OSC: enable / disable OSC
* ux/54-help handle timezone in excel date import
* ux/54-help tray left click to show app
* ux/54-help create queriable endpoint
* ux/54-help fix memoisation in lower thirds
* ux/54-help revise icons
* ux/54-help clarify text
* ux/54-help forgiving text parsing
* ux/54-help add smart keywords
* ux/54-help version bump
This commit is contained in:
Carlos Valente
2022-01-12 22:41:12 +01:00
committed by GitHub
parent c3f18feaae
commit 48093b8651
90 changed files with 2787 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+24 -8
View File
@@ -9,9 +9,14 @@ import { ALIASES } from './app/api/apiConstants';
import { getAliases } from './app/api/ontimeApi';
const Editor = lazy(() => import('features/editors/Editor'));
const PresenterView = lazy(() =>
import('features/viewers/presenter/PresenterView')
const TimerView = lazy(() =>
import('features/viewers/timer/Timer')
);
const MinimalTimerView = lazy(() =>
import('features/viewers/timer/MinimalTimer')
);
const StageManager = lazy(() =>
import('features/viewers/backstage/StageManager')
);
@@ -22,7 +27,8 @@ const Lower = lazy(() =>
const Pip = lazy(() => import('features/viewers/production/Pip'));
const StudioClock = lazy(() => import('features/viewers/studio/StudioClock'));
const SPresenter = withSocket(PresenterView);
const STimer = withSocket(TimerView);
const SMinimalTimer = withSocket(MinimalTimerView);
const SStageManager = withSocket(StageManager);
const SPublic = withSocket(Public);
const SLowerThird = withSocket(Lower);
@@ -36,6 +42,8 @@ function App() {
// Handle keyboard shortcuts
const handleKeyPress = useCallback((e) => {
// handle held key
if (e.repeat) return;
// check if the alt key is pressed
if (e.altKey) {
if (e.key === 't' || e.key === 'T') {
@@ -75,11 +83,19 @@ function App() {
<ErrorBoundary>
<Suspense fallback={null}>
<Routes>
<Route path='/' element={<SPresenter />} />
<Route path='/' element={<STimer />} />
<Route path='/speaker' element={<STimer />} />
<Route path='/presenter' element={<STimer />} />
<Route path='/stage' element={<STimer />} />
<Route path='/timer' element={<STimer />} />
<Route path='/minimal' element={<SMinimalTimer />} />
<Route path='/minimalTimer' element={<SMinimalTimer />} />
<Route path='/simpleTimer' element={<SMinimalTimer />} />
<Route path='/sm' element={<SStageManager />} />
<Route path='/speaker' element={<SPresenter />} />
<Route path='/presenter' element={<SPresenter />} />
<Route path='/stage' element={<SPresenter />} />
<Route path='/backstage' element={<SStageManager />} />
<Route path='/public' element={<SPublic />} />
<Route path='/pip' element={<SPip />} />
<Route path='/studio' element={<SStudio />} />
@@ -95,7 +111,7 @@ function App() {
}
/>
{/* Send to default if nothing found */}
<Route path='*' element={<SPresenter />} />
<Route path='*' element={<STimer />} />
</Routes>
</Suspense>
</ErrorBoundary>
client/src/app/api/ontimeApi.js
+3 -3
View File
@@ -25,7 +25,7 @@ export const oscPlaceholderSettings = {
port: '',
portOut: '',
targetIP: '',
enabled: true,
enabled: false,
};
export const httpPlaceholder = {
@@ -66,7 +66,7 @@ export const ontimeVars = [
},
{
name: '$presenter',
description: 'Current presenter',
description: 'Current timer',
},
{
name: '$subtitle',
@@ -78,7 +78,7 @@ export const ontimeVars = [
},
{
name: '$next-presenter',
description: 'Next presenter',
description: 'Next timer',
},
{
name: '$next-subtitle',
client/src/app/entryValidator.js
+13
View File
@@ -0,0 +1,13 @@
/**
* @description Validates two time entries
* @param {number} timeStart
* @param {number} timeEnd
* @returns {{catch: string, value: boolean}}
*/
export const validateTimes = (timeStart, timeEnd) => {
let validate = { value: true, catch: '' };
if (timeStart > timeEnd) {
validate.catch = 'Start time later than end time';
}
return validate;
};
client/src/app/sampleData.js
+1 -1
View File
@@ -2,7 +2,7 @@ const dummy = new Date();
export const sampleData = {
presenterMessage: {
text: 'Only the presenter sees this',
text: 'Only the timer sees this',
active: false,
},
publicMessage: {
client/src/common/components/buttons/DeleteIconBtn.jsx
+14 -11
View File
@@ -1,6 +1,7 @@
import { IconButton } from '@chakra-ui/button';
import { useState } from 'react';
import { FiMinus } from 'react-icons/fi';
import { IoRemove } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function DeleteIconBtn(props) {
const { actionHandler, ...rest } = props;
@@ -12,15 +13,17 @@ export default function DeleteIconBtn(props) {
};
return (
<IconButton
size={props.size || 'xs'}
icon={<FiMinus />}
colorScheme='red'
onClick={handleClick}
_focus={{ boxShadow: 'none' }}
disabled={loading}
isLoading={loading}
{...rest}
/>
<Tooltip label='Delete'>
<IconButton
size={props.size || 'xs'}
icon={<IoRemove />}
colorScheme='red'
onClick={handleClick}
_focus={{ boxShadow: 'none' }}
disabled={loading}
isLoading={loading}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/EnableBtn.jsx
+18
View File
@@ -0,0 +1,18 @@
import { IoCloseSharp, IoCheckmarkSharp } from 'react-icons/io5';
import { Button } from '@chakra-ui/button';
export default function EnableBtn(props) {
const { active, text, actionHandler } = props;
return (
<Button
size={props.size || 'xs'}
leftIcon={active ? <IoCheckmarkSharp /> : <IoCloseSharp />}
colorScheme='blue'
variant={active ? 'solid' : 'outline'}
onClick={actionHandler}
_focus={{ boxShadow: 'none' }}
>
{text}
</Button>
);
}
client/src/common/components/buttons/NextIconBtn.jsx
+14 -11
View File
@@ -1,18 +1,21 @@
import { IconButton } from '@chakra-ui/button';
import { FiSkipForward } from 'react-icons/fi';
import { IoPlaySkipForward } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function NextIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<IconButton
icon={<FiSkipForward />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff11'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label='Next event' openDelay={500} shouldWrapChildren={props.disabled}>
<IconButton
icon={<IoPlaySkipForward size='22px' />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff11'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/OnAirIconBtn.jsx
+22
View File
@@ -0,0 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { IoMicSharp, IoMicOffOutline } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function OnAirIconBtn(props) {
const { actionHandler, active, ...rest } = props;
return (
<Tooltip label={active ? 'Go Off Air' : 'Go On Air'} openDelay={500}>
<IconButton
size={props.size || 'xs'}
icon={active ? <IoMicSharp size='24px' /> : <IoMicOffOutline size='24px' />}
colorScheme='blue'
variant={active ? 'solid' : 'outline'}
onClick={() =>
actionHandler('update', { field: 'isPublic', value: !active })
}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/PauseIconBtn.jsx
+13 -10
View File
@@ -1,17 +1,20 @@
import { IconButton } from '@chakra-ui/button';
import { FiPause } from 'react-icons/fi';
import { IoPause } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function PauseIconBtn(props) {
const { clickhandler, active, ...rest } = props;
return (
<IconButton
icon={<FiPause />}
colorScheme='orange'
variant={active ? 'solid' : 'outline'}
onClick={clickhandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label='Pause timer' openDelay={500} shouldWrapChildren={props.disabled}>
<IconButton
icon={<IoPause size='24px' />}
colorScheme='orange'
variant={active ? 'solid' : 'outline'}
onClick={clickhandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/PrevIconBtn.jsx
+14 -11
View File
@@ -1,18 +1,21 @@
import { IconButton } from '@chakra-ui/button';
import { FiSkipBack } from 'react-icons/fi';
import { IoPlaySkipBack } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function PrevIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<IconButton
icon={<FiSkipBack />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff11'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label='Previous event' openDelay={500} shouldWrapChildren={props.disabled}>
<IconButton
icon={<IoPlaySkipBack size='22px' />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff11'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/ReloadIconBtn.jsx
+14 -11
View File
@@ -1,18 +1,21 @@
import { IconButton } from '@chakra-ui/button';
import { FiRefreshCcw } from 'react-icons/fi';
import { IoReload } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function ReloadIconButton(props) {
const { clickhandler, ...rest } = props;
return (
<IconButton
icon={<FiRefreshCcw />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label='Reload event' openDelay={500} shouldWrapChildren={props.disabled}>
<IconButton
icon={<IoReload size='22px' />}
colorScheme='whiteAlpha'
backgroundColor='#ffffff05'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/RollIconBtn.jsx
+13 -10
View File
@@ -1,17 +1,20 @@
import { IconButton } from '@chakra-ui/button';
import { FiClock } from 'react-icons/fi';
import { IoTimeOutline } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function RollIconBtn(props) {
const { clickhandler, active, ...rest } = props;
return (
<IconButton
icon={<FiClock />}
colorScheme='blue'
variant={active ? 'solid' : 'outline'}
onClick={clickhandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label='Roll mode' openDelay={500} shouldWrapChildren={props.disabled}>
<IconButton
icon={<IoTimeOutline size='24px' />}
colorScheme='blue'
variant={active ? 'solid' : 'outline'}
onClick={clickhandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/StartIconBtn.jsx
+13 -10
View File
@@ -1,17 +1,20 @@
import { IconButton } from '@chakra-ui/button';
import { FiPlay } from 'react-icons/fi';
import { IoPlay } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function StartIconBtn(props) {
const { clickhandler, active, ...rest } = props;
return (
<IconButton
icon={<FiPlay />}
colorScheme='green'
variant={active ? 'solid' : 'outline'}
onClick={clickhandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label='Start timer' openDelay={500} shouldWrapChildren={props.disabled}>
<IconButton
icon={<IoPlay size='24px' />}
colorScheme='green'
variant={active ? 'solid' : 'outline'}
onClick={clickhandler}
width={120}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/UnloadIconBtn.jsx
+13 -11
View File
@@ -1,18 +1,20 @@
import { IconButton } from '@chakra-ui/button';
import { FiXOctagon } from 'react-icons/fi';
import { IoStop } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function UnloadIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<IconButton
icon={<FiXOctagon />}
colorScheme='red'
backgroundColor='#ff000022'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label='Unload event' openDelay={500} shouldWrapChildren={props.disabled}>
<IconButton
icon={<IoStop size='22px' />}
colorScheme='red'
variant='outline'
onClick={clickhandler}
width={90}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/buttons/VisibleIconBtn.jsx
+15 -12
View File
@@ -1,19 +1,22 @@
import { IconButton } from '@chakra-ui/button';
import { FiSun } from 'react-icons/fi';
import { IoSunny } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/tooltip';
export default function VisibleIconBtn(props) {
const { actionHandler, active, ...rest } = props;
return (
<IconButton
size={props.size || 'xs'}
icon={<FiSun />}
colorScheme='blue'
variant={active ? 'solid' : 'outline'}
onClick={() =>
actionHandler('update', { field: 'isPublic', value: !active })
}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
<Tooltip label={active ? 'Make invisible' : 'Make visible'} openDelay={500}>
<IconButton
size={props.size || 'xs'}
icon={<IoSunny size={'18px'}/>}
colorScheme='blue'
variant={active ? 'solid' : 'outline'}
onClick={() =>
actionHandler('update', { field: 'isPublic', value: !active })
}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/common/components/errorBoundary/ErrorBoundary.jsx
-1
View File
@@ -19,7 +19,6 @@ class ErrorBoundary extends React.Component {
error: error,
errorInfo: info,
});
// TODO: Log the error to an error reporting service
this.context.emitError(error.toString());
}
client/src/common/components/eventTimes/EventTimes.jsx
+29 -13
View File
@@ -1,27 +1,33 @@
import EditableTimer from 'common/input/EditableTimer';
import { useContext } from 'react';
import { LoggingContext } from '../../../app/context/LoggingContext';
import { validateTimes } from '../../../app/entryValidator';
import PropTypes from 'prop-types';
export default function EventTimes(props) {
const { actionHandler, delay, timeStart, timeEnd } = props;
const { actionHandler, delay, timeStart, timeEnd, previousEnd } = props;
const { emitWarning } = useContext(LoggingContext);
const handleValidate = (entry, v) => {
// we dont enforce validation here
if (v == null || timeStart == null || timeEnd == null) return true;
const handleValidate = (entry, val) => {
if (val == null || timeStart == null || timeEnd == null) return true;
if (timeStart === 0) return true;
let validate = { value: true, catch: '' };
if (entry === 'timeStart' && v > timeEnd) {
validate.catch = 'Start time later than end time';
} else if (entry === 'timeEnd' && v < timeStart) {
validate.catch = 'End time earlier than start time';
let start = timeStart;
let end = timeEnd;
if (entry === 'timeStart') {
start = val;
} else if (entry === 'timeEnd') {
end = val;
} else {
return;
}
if (validate.catch !== '')
emitWarning(`Time Input Warning: ${validate.catch}`);
return validate.value;
const valid = validateTimes(start, end);
// give warning but not enforce validation
if (!valid.value) {
emitWarning(`Time Input Warning: ${valid.catch}`);
}
return valid.value;
};
return (
@@ -32,6 +38,7 @@ export default function EventTimes(props) {
actionHandler={actionHandler}
time={timeStart}
delay={delay}
previousEnd={previousEnd}
/>
<EditableTimer
name='timeEnd'
@@ -39,7 +46,16 @@ export default function EventTimes(props) {
actionHandler={actionHandler}
time={timeEnd}
delay={delay}
previousEnd={previousEnd}
/>
</>
);
}
EventTimes.propTypes = {
actionHandler: PropTypes.func.isRequired,
delay: PropTypes.number.isRequired,
timeStart: PropTypes.number.isRequired,
timeEnd: PropTypes.number.isRequired,
previousEnd: PropTypes.number.isRequired,
};
client/src/common/components/eventTimes/EventTimesVertical.jsx
+73 -36
View File
@@ -2,6 +2,8 @@ import EditableTimer from 'common/input/EditableTimer';
import { stringFromMillis } from 'ontime-utils/time';
import { useContext } from 'react';
import { LoggingContext } from '../../../app/context/LoggingContext';
import { validateTimes } from '../../../app/entryValidator';
import PropTypes from 'prop-types';
const label = {
fontSize: '0.75em',
@@ -9,8 +11,7 @@ const label = {
};
const TimesDelayed = (props) => {
const { handleValidate, actionHandler, delay, timeStart, timeEnd, duration } =
props;
const { handleValidate, actionHandler, delay, timeStart, timeEnd, duration, previousEnd } = props;
const scheduledStart = stringFromMillis(timeStart, false);
const scheduledEnd = stringFromMillis(timeEnd, false);
@@ -26,6 +27,7 @@ const TimesDelayed = (props) => {
actionHandler={actionHandler}
time={timeStart}
delay={delay}
previousEnd={previousEnd}
/>
<span style={label}>
End <span>{scheduledEnd}</span>
@@ -36,6 +38,7 @@ const TimesDelayed = (props) => {
actionHandler={actionHandler}
time={timeEnd}
delay={delay}
previousEnd={previousEnd}
/>
<span style={label}>Duration</span>
<EditableTimer
@@ -44,13 +47,24 @@ const TimesDelayed = (props) => {
actionHandler={actionHandler}
time={duration}
delay={0}
previousEnd={previousEnd}
/>
</>
);
};
TimesDelayed.propTypes = {
handleValidate: PropTypes.func.isRequired,
actionHandler: PropTypes.func.isRequired,
delay: PropTypes.number.isRequired,
timeStart: PropTypes.number.isRequired,
timeEnd: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
previousEnd: PropTypes.number.isRequired,
};
const Times = (props) => {
const { handleValidate, actionHandler, timeStart, timeEnd, duration } = props;
const { handleValidate, actionHandler, timeStart, timeEnd, duration, previousEnd } = props;
return (
<>
@@ -61,6 +75,7 @@ const Times = (props) => {
actionHandler={actionHandler}
time={timeStart}
delay={0}
previousEnd={previousEnd}
/>
<span style={label}>End</span>
<EditableTimer
@@ -69,6 +84,7 @@ const Times = (props) => {
actionHandler={actionHandler}
time={timeEnd}
delay={0}
previousEnd={previousEnd}
/>
<span style={label}>Duration</span>
<EditableTimer
@@ -77,52 +93,73 @@ const Times = (props) => {
actionHandler={actionHandler}
time={duration}
delay={0}
previousEnd={previousEnd}
/>
</>
);
};
Times.propTypes = {
handleValidate: PropTypes.func.isRequired,
actionHandler: PropTypes.func.isRequired,
timeStart: PropTypes.number.isRequired,
timeEnd: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
previousEnd: PropTypes.number.isRequired,
};
export default function EventTimesVertical(props) {
const { delay, timeStart, timeEnd, duration } = props;
const { delay, timeStart, timeEnd, duration, previousEnd } = props;
const { emitWarning } = useContext(LoggingContext);
const handleValidate = (entry, v) => {
// we dont enforce validation here
if (v == null || timeStart == null || timeEnd == null) return true;
const handleValidate = (entry, val) => {
if (val == null || timeStart == null || timeEnd == null) return true;
if (timeStart === 0) return true;
let validate = { value: true, catch: '' };
if (entry === 'timeStart' && v > timeEnd) {
validate.catch = 'Start time later than end time';
} else if (entry === 'timeEnd' && v < timeStart) {
validate.catch = 'End time earlier than start time';
let start = timeStart;
let end = timeEnd;
if (entry === 'timeStart') {
start = val;
} else if (entry === 'timeEnd') {
end = val;
} else {
return;
}
if (validate.catch !== '') {
emitWarning(`Time Input Warning: ${validate.catch}`);
const valid = validateTimes(start, end);
// give warning but not enforce validation
if (!valid.value) {
emitWarning(`Time Input Warning: ${valid.catch}`);
}
return validate.value;
return valid.value;
};
return (
(delay != null) && (delay > 0) ? (
<TimesDelayed
handleValidate={handleValidate}
actionHandler={props.actionHandler}
delay={delay}
timeStart={timeStart}
timeEnd={timeEnd}
duration={duration}
/>
) : (
<Times
handleValidate={handleValidate}
actionHandler={props.actionHandler}
timeStart={timeStart}
timeEnd={timeEnd}
duration={duration}
/>
)
)
return delay != null && delay > 0 ? (
<TimesDelayed
handleValidate={handleValidate}
actionHandler={props.actionHandler}
delay={delay}
timeStart={timeStart}
timeEnd={timeEnd}
duration={duration}
previousEnd={previousEnd}
/>
) : (
<Times
handleValidate={handleValidate}
actionHandler={props.actionHandler}
timeStart={timeStart}
timeEnd={timeEnd}
duration={duration}
previousEnd={previousEnd}
/>
);
}
EventTimesVertical.propTypes = {
delay: PropTypes.number.isRequired,
timeStart: PropTypes.number.isRequired,
timeEnd: PropTypes.number.isRequired,
duration: PropTypes.number.isRequired,
previousEnd: PropTypes.number.isRequired,
};
client/src/common/components/nav/NavLogo.jsx
+16 -7
View File
@@ -16,6 +16,8 @@ export default function NavLogo(props) {
// Handle keyboard shortcuts
const handleKeyPress = useCallback((e) => {
// handle held key
if (e.repeat) return;
// Space bar
if (e.keyCode === 32) {
setShowNav((s) => !s);
@@ -54,44 +56,51 @@ export default function NavLogo(props) {
className={showNav ? style.nav : style.navHidden}
>
<Link
to='/presenter'
to='/timer'
className={style.navItem}
tabIndex={1}
>
Presenter
Timer
</Link>
<Link
to='/minimal'
className={style.navItem}
tabIndex={2}
>
Minimal Timer
</Link>
<Link
to='/sm'
className={style.navItem}
tabIndex={2}
tabIndex={3}
>
Backstage
</Link>
<Link
to='/public'
className={style.navItem}
tabIndex={3}
tabIndex={4}
>
Public
</Link>
<Link
to='/lower'
className={style.navItem}
tabIndex={4}
tabIndex={5}
>
Lower Thirds
</Link>
<Link
to='/pip'
className={style.navItem}
tabIndex={4}
tabIndex={6}
>
PIP
</Link>
<Link
to='/studio'
className={style.navItem}
tabIndex={5}
tabIndex={7}
>
Studio Clock
</Link>
client/src/common/components/smallTimer/SmallTimer.jsx
-10
View File
@@ -1,10 +0,0 @@
import styles from './SmallTimer.module.css';
export default function SmallTimer({ label, time }) {
return (
<div className={styles.SmallTimer}>
<div className={styles.label}>{label}</div>
<div className={styles.timer}>{time}</div>
</div>
);
}
client/src/common/components/smallTimer/SmallTimer.module.css
-23
View File
@@ -1,23 +0,0 @@
.smallTimer {
display: flex;
flex-direction: column;
}
.label,
.timer {
font-size: 1vw;
text-align: center;
}
.label {
font-size: 1.5vw;
color: #888;
margin-bottom: 0;
}
.timer {
font-family: 'Open Sans', sans-serif;
font-size: 4vw;
letter-spacing: 0.125em;
}
client/src/common/input/ChakraInput.jsx
-22
View File
@@ -1,22 +0,0 @@
import { FormErrorMessage } from '@chakra-ui/form-control';
import { FormLabel } from '@chakra-ui/form-control';
import { FormControl } from '@chakra-ui/form-control';
import { Input } from '@chakra-ui/input';
import { Field } from 'formik';
export default function ChakraInput(props) {
const { label, name, ...rest } = props;
return (
<Field name={name}>
{({ field, form }) => {
return (
<FormControl isInvalid={form.errors[name] && form.touched[name]}>
<FormLabel htmlFor={name}>{label}</FormLabel>
<Input id={name} {...rest} {...field} />
<FormErrorMessage>{form.errors[name]}</FormErrorMessage>
</FormControl>
);
}}
</Field>
);
}
client/src/common/input/EditableTimer.jsx
+30 -10
View File
@@ -1,15 +1,13 @@
import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
import { useContext, useEffect, useState } from 'react';
import {
isTimeString,
timeStringToMillis,
} from '../utils/dateConfig';
import { forgivingStringToMillis } from '../utils/dateConfig';
import { stringFromMillis } from 'ontime-utils/time';
import style from './EditableTimer.module.css';
import { LoggingContext } from '../../app/context/LoggingContext';
import PropTypes from 'prop-types';
export default function EditableTimer(props) {
const { name, actionHandler, time, delay, validate } = props;
const { name, actionHandler, time, delay, validate, previousEnd } = props;
const { emitError } = useContext(LoggingContext);
const [value, setValue] = useState('');
@@ -33,13 +31,26 @@ export default function EditableTimer(props) {
// Check if there is anything there
if (value === '') return false;
// check if its valid time string
if (!isTimeString(value)) return false;
let newValMillis;
// convert entered value to milliseconds
const newValMillis = timeStringToMillis(value);
// check for known aliases
if (value === 'p' || value === 'prev' || value === 'previous') {
// string to pass should be the time of the end before
if (previousEnd != null) {
newValMillis = previousEnd;
} else {
newValMillis = 0;
}
} else if (value.startsWith('+')) {
// string to pass should add to the end before
const val = value.substring(1);
newValMillis = previousEnd + forgivingStringToMillis(val);
} else {
// convert entered value to milliseconds
newValMillis = forgivingStringToMillis(value);
}
// Time now and time submitedVal
// Time now and time submittedVal
const originalMillis = time + delay;
// check if time is different from before
@@ -67,3 +78,12 @@ export default function EditableTimer(props) {
</Editable>
);
}
EditableTimer.propTypes = {
name: PropTypes.string.isRequired,
actionHandler: PropTypes.func.isRequired,
time: PropTypes.number.isRequired,
delay: PropTypes.number.isRequired,
validate: PropTypes.func.isRequired,
previousEnd: PropTypes.number.isRequired,
};
client/src/common/utils/__tests__/dateConfig.test.js
+58
View File
@@ -1,7 +1,9 @@
import {
formatDisplay,
isTimeString,
millisToMinutes,
millisToSeconds,
forgivingStringToMillis,
timeStringToMillis,
} from '../dateConfig';
@@ -244,3 +246,59 @@ describe('test timeStringToMillis function', () => {
expect(timeStringToMillis(t.val)).toBe(t.result);
});
});
describe('test isTimeString() function', () => {
test('it validates time strings', () => {
const ts = ['2', '2:10', '2:10:22'];
for (const s of ts) {
expect(isTimeString(s)).toBe(true);
}
});
test('it fails overloaded times', () => {
const ts = ['70', '89:10', '26:10:22'];
for (const s of ts) {
expect(isTimeString(s)).toBe(false);
}
});
});
describe('test isTimeString() function handle different separators', () => {
const ts = ['2:10', '2,10', '2.10'];
for (const s of ts) {
test(`it handles ${s}`, () => {
expect(isTimeString(s)).toBe(true);
});
}
});
describe('test timeHelper() function handles separators', () => {
const ts = ['1:2:3:10', '2,10', '2.10'];
for (const s of ts) {
test(`it handles ${s}`, () => {
expect(typeof forgivingStringToMillis(s)).toBe('number');
});
}
});
describe('test timeHelper() parses strings correctly', () => {
const ts = [
{ value: '', expect: 0 },
{ value: '0', expect: 0 },
{ value: '-0', expect: 0 },
{ value: '1', expect: 60 * 1000 },
{ value: '-1', expect: 60 * 1000 },
{ value: '1.2', expect: 60 * 1000 + 2 * 1000 },
{ value: '1.70', expect: 60 * 1000 + 70 * 1000 },
{ value: '1.1.1', expect: 60 * 60 * 1000 + 60 * 1000 + 1000 },
{ value: '12.1.1', expect: 12 * 60 * 60 * 1000 + 60 * 1000 + 1000 },
{ value: '12.55.1', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 1000 },
{ value: '12.55.40', expect: 12 * 60 * 60 * 1000 + 55 * 60 * 1000 + 40 * 1000 },
];
for (const s of ts) {
test(`it handles ${s.value}`, () => {
expect(forgivingStringToMillis(s.value)).toBe(s.expect);
});
}
});
client/src/common/utils/dateConfig.js
+39 -14
View File
@@ -5,7 +5,6 @@ const mts = 1000; // millis to seconds
const mtm = 1000 * 60; // millis to minutes
const mth = 1000 * 60 * 60; // millis to hours
/**
* another go at simpler string formatting (counters)
* @description Converts seconds to string representing time
@@ -13,8 +12,7 @@ const mth = 1000 * 60 * 60; // millis to hours
* @param {boolean} [hideZero] - whether to show hours in case its 00
* @returns {string} String representing absolute time 00:12:02
*/
export function formatDisplay(seconds, hideZero=false) {
export function formatDisplay(seconds, hideZero = false) {
// add an extra 0 if necessary
const format = (val) => `0${Math.floor(val)}`.slice(-2);
@@ -31,8 +29,6 @@ export function formatDisplay(seconds, hideZero=false) {
* @param {number} millis - time in seconds
* @returns {number} Amount in seconds
*/
// millis to seconds
export const millisToSeconds = (millis) => {
return millis < 0 ? Math.ceil(millis / mts) : Math.floor(millis / mts);
};
@@ -42,8 +38,6 @@ export const millisToSeconds = (millis) => {
* @param {number} millis - time in seconds
* @returns {number} Amount in seconds
*/
// millis to minutes
export const millisToMinutes = (millis) => {
return millis < 0 ? Math.ceil(millis / mtm) : Math.floor(millis / mtm);
};
@@ -53,15 +47,12 @@ export const millisToMinutes = (millis) => {
* @param {string} string - time string "23:00:12"
* @returns {number} Amount in milliseconds
*/
// timeStringToMillis
export const timeStringToMillis = (string) => {
if (typeof string !== 'string') return 0;
const time = string.split(':');
if (time.length === 1) return Math.abs(time[0] * mts);
if (time.length === 2) return Math.abs(time[0]) * mtm + time[1] * mts;
if (time.length === 3)
return Math.abs(time[0]) * mth + time[1] * mtm + time[2] * mts;
if (time.length === 3) return Math.abs(time[0]) * mth + time[1] * mtm + time[2] * mts;
else return 0;
};
@@ -70,8 +61,6 @@ export const timeStringToMillis = (string) => {
* @param {string} string - time string "23:00:12"
* @returns {boolean} string represents time
*/
// isTimeString
export const isTimeString = (string) => {
// ^ # Start of string
// (?: # Try to match...
@@ -83,6 +72,42 @@ export const isTimeString = (string) => {
// ([0-5]?\d) # SS (required)
// $ # End of string
const regex = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$/;
const regex = /^(?:(?:([01]?\d|2[0-3])[:,.])?([0-5]?\d)[:,.])?([0-5]?\d)$/;
return regex.test(string);
};
const parse = (valueAsString) => {
const parsed = parseInt(valueAsString, 10);
if (isNaN(parsed)) {
return 0;
}
return Math.abs(parsed);
};
/**
* @description Parses a time string to millis
* @param string - time string
* @returns {number} - time string in millis
*/
export const forgivingStringToMillis = (string) => {
let millis = 0;
// split string at known separators : , .
const separatorRegex = /[\s,:.]+/;
const [first, second, third] = string.split(separatorRegex);
if (first != null && second != null && third != null) {
// if string has three sections, treat as [hours] [minutes] [seconds]
millis = parse(first) * mth;
millis += parse(second) * mtm;
millis += parse(third) * mts;
} else if (third == null) {
// if string has two sections, treat as [minutes] [seconds]
millis = parse(first) * mtm;
millis += parse(second) * mts;
} else if (second == null) {
// if string has one section, treat as [minutes]
millis = parse(first) * mtm;
}
return millis;
};
client/src/features/control/MessageControl.jsx
+21 -21
View File
@@ -1,8 +1,8 @@
import {Editable, EditableInput, EditablePreview} from '@chakra-ui/editable';
import {Switch} from "@chakra-ui/react";
import {useEffect, useState} from 'react';
import {useSocket} from 'app/context/socketContext';
import { Editable, EditableInput, EditablePreview } from '@chakra-ui/editable';
import { useEffect, useState } from 'react';
import { useSocket } from 'app/context/socketContext';
import VisibleIconBtn from 'common/components/buttons/VisibleIconBtn';
import OnAirIconBtn from '../../common/components/buttons/OnAirIconBtn';
import style from './MessageControl.module.scss';
const inputProps = {
@@ -10,7 +10,7 @@ const inputProps = {
};
const InputRow = (props) => {
const {label, placeholder, text, visible} = props;
const { label, placeholder, text, visible } = props;
return (
<>
@@ -23,8 +23,8 @@ const InputRow = (props) => {
className={style.inline}
color={text === '' ? '#666' : 'inherit'}
>
<EditablePreview className={style.padleft}/>
<EditableInput className={style.padleft}/>
<EditablePreview className={style.padleft} />
<EditableInput className={style.padleft} />
</Editable>
<VisibleIconBtn
active={visible || undefined}
@@ -55,19 +55,19 @@ export default function MessageControl() {
useEffect(() => {
if (socket == null) return;
// Handle presenter messages
socket.on('messages-presenter', (data) => {
setPres({...data});
// Handle timer messages
socket.on('messages-timer', (data) => {
setPres({ ...data });
});
// Handle public messages
socket.on('messages-public', (data) => {
setPubl({...data});
setPubl({ ...data });
});
// Handle lower third messages
socket.on('messages-lower', (data) => {
setLower({...data});
setLower({ ...data });
});
// Handle lower third messages
@@ -83,7 +83,7 @@ export default function MessageControl() {
// Clear listeners
return () => {
socket.off('messages-public');
socket.off('messages-presenter');
socket.off('messages-timer');
socket.off('messages-lower');
socket.off('onAir');
};
@@ -92,10 +92,10 @@ export default function MessageControl() {
const messageControl = async (action, payload) => {
switch (action) {
case 'pres-text':
socket.emit('set-presenter-text', payload);
socket.emit('set-timer-text', payload);
break;
case 'toggle-pres-visible':
socket.emit('set-presenter-visible', !pres.visible);
socket.emit('set-timer-visible', !pres.visible);
break;
case 'publ-text':
socket.emit('set-public-text', payload);
@@ -146,13 +146,13 @@ export default function MessageControl() {
/>
</div>
<div className={style.onAirToggle}>
<Switch
colorScheme='green'
<OnAirIconBtn
className={style.btn}
active={onAir}
size='md'
isChecked={onAir}
onChange={() => messageControl('toggle-onAir')}>
On Air?
</Switch>
actionHandler={() => messageControl('toggle-onAir')}
/>
<span className={style.onAirLabel}>On Air</span>
<span className={style.oscLabel}>
{`/ontime/offAir << OSC >> /ontime/onAir`}
</span>
client/src/features/control/MessageControl.module.scss
+21 -13
View File
@@ -1,12 +1,12 @@
@use '../../styles/main' as *;
@use '../../styles/mixins' as *;
.messageContainer,
.onAirToggle {
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px;
@include main-container;
display: flex;
gap: 0.5em;
padding: 0.5em;
}
.messageContainer {
@@ -17,17 +17,20 @@
grid-template-columns: 1fr auto;
gap: 1em;
}
.label {
padding: 0;
margin: 0;
font-size: 0.9em;
color: #ccc;
}
.inline {
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.padleft {
padding-left: 0.5em;
}
@@ -35,20 +38,25 @@
.onAirToggle {
margin-top: 1em;
display: flex;
gap: 1em;
align-items: center;
line-height: 3em;
display: grid;
grid-template-areas:
'btn label'
'btn osc';
grid-template-columns: 2.5em 1fr;
grid-template-rows: 1.2em 0.8em;
.btn {
grid-area: btn;
}
.onAirLabel {
grid-area: label;
font-size: 1.2em;
}
.oscLabel {
color: #4bffabcc;
font-size: 0.8em;
float: right;
padding-right: 1em;
-webkit-user-select: text;
user-select: text;
@include osc-label;
grid-area: osc;
}
}
client/src/features/control/PlaybackTimer.jsx
+63 -39
View File
@@ -1,37 +1,37 @@
import style from './PlaybackControl.module.scss';
import Countdown from 'common/components/countdown/Countdown';
import { stringFromMillis } from 'ontime-utils/time';
import {Tooltip} from '@chakra-ui/react';
import {Button} from '@chakra-ui/button';
import {memo} from 'react';
import PropTypes from "prop-types";
import { Tooltip } from '@chakra-ui/react';
import { Button } from '@chakra-ui/button';
import { memo } from 'react';
import PropTypes from 'prop-types';
const areEqual = (prevProps, nextProps) => {
return (
prevProps.timer.running === nextProps.timer.running
&& prevProps.timer.expectedFinish === nextProps.timer.expectedFinish
&& prevProps.timer.startedAt === nextProps.timer.startedAt
&& prevProps.playback === nextProps.playback
&& prevProps.timer.secondary === nextProps.timer.secondary
&& prevProps.selectedId === nextProps.selectedId
prevProps.timer.running === nextProps.timer.running &&
prevProps.timer.expectedFinish === nextProps.timer.expectedFinish &&
prevProps.timer.startedAt === nextProps.timer.startedAt &&
prevProps.playback === nextProps.playback &&
prevProps.timer.secondary === nextProps.timer.secondary &&
prevProps.selectedId === nextProps.selectedId
);
};
const PlaybackTimer = (props) => {
const {timer, playback, handleIncrement, selectedId} = props;
const { timer, playback, handleIncrement, selectedId } = props;
const started = stringFromMillis(timer.startedAt, true);
const finish = stringFromMillis(timer.expectedFinish, true);
const isNegative = timer.running < 0;
const isRolling = playback === 'roll';
const isWaiting = timer.secondary > 0 && timer.running == null;
const disableButtons = (selectedId == null || isRolling);
const disableButtons = selectedId == null || isRolling;
const incrementProps = {
size: 'sm',
width: '2.9em',
colorScheme: 'whiteAlpha',
variant: 'outline',
_focus: {boxShadow: 'none'},
_focus: { boxShadow: 'none' },
};
return (
@@ -39,12 +39,12 @@ const PlaybackTimer = (props) => {
<div className={style.timeContainer}>
<div className={style.indicators}>
<Tooltip label='Roll mode active'>
<div className={isRolling ? style.indRollActive : style.indRoll}/>
<div className={isRolling ? style.indRollActive : style.indRoll} />
</Tooltip>
<div
className={isNegative ? style.indNegativeActive : style.indNegative}
/>
<div className={style.indDelay}/>
<div className={style.indDelay} />
</div>
<div className={style.timer}>
<Countdown
@@ -71,34 +71,58 @@ const PlaybackTimer = (props) => {
</>
)}
<div className={style.btn}>
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(-1)}
<Tooltip
label={'Remove 1 minute'}
delay={500}
shouldWrapChildren={disableButtons}
>
-1
</Button>
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(1)}
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(-1)}
>
-1
</Button>
</Tooltip>
<Tooltip
label={'Add 1 minute'}
delay={500}
shouldWrapChildren={disableButtons}
>
+1
</Button>
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(-5)}
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(1)}
>
+1
</Button>
</Tooltip>
<Tooltip
label={'Remove 5 minutes'}
delay={500}
shouldWrapChildren={disableButtons}
>
-5
</Button>
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(5)}
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(-5)}
>
-5
</Button>
</Tooltip>
<Tooltip
label={'Add 5 minutes'}
delay={500}
shouldWrapChildren={disableButtons}
>
+5
</Button>
<Button
{...incrementProps}
disabled={disableButtons}
onClick={() => handleIncrement(5)}
>
+5
</Button>
</Tooltip>
</div>
</div>
</>
client/src/features/editors/list/BlockBlock.jsx → client/src/features/editors/BlockBlock/BlockBlock.jsx
+9 -1
View File
@@ -1,8 +1,9 @@
import { Draggable } from 'react-beautiful-dnd';
import { FiMoreVertical } from 'react-icons/fi';
import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
import ActionButtons from './ActionButtons';
import ActionButtons from '../list/ActionButtons';
import style from './BlockBlock.module.css';
import PropTypes from 'prop-types';
export default function BlockBlock(props) {
const { index, data, actionHandler } = props;
@@ -27,3 +28,10 @@ export default function BlockBlock(props) {
</Draggable>
);
}
BlockBlock.propTypes = {
index: PropTypes.number.isRequired,
data: PropTypes.object.isRequired,
actionHandler: PropTypes.func.isRequired,
};
client/src/features/editors/list/BlockBlock.module.css → client/src/features/editors/BlockBlock/BlockBlock.module.css
View File
client/src/features/editors/list/DelayBlock.jsx → client/src/features/editors/DelayBlock/DelayBlock.jsx
+12 -14
View File
@@ -1,11 +1,12 @@
import { Draggable } from 'react-beautiful-dnd';
import { FiMoreVertical } from 'react-icons/fi';
import { millisToMinutes } from 'common/utils/dateConfig';
import ActionButtons from './ActionButtons';
import ActionButtons from '../list/ActionButtons';
import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
import ApplyIconBtn from 'common/components/buttons/ApplyIconBtn';
import DelayInput from 'common/input/DelayInput';
import style from './DelayBlock.module.css';
import PropTypes from 'prop-types';
export default function DelayBlock(props) {
const { eventsHandler, data, index, actionHandler } = props;
@@ -14,25 +15,15 @@ export default function DelayBlock(props) {
eventsHandler('applyDelay', { id: data.id, duration: data.duration });
};
let delayValue =
data.duration != null ? millisToMinutes(data.duration) : undefined;
let delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
return (
<Draggable key={data.id} draggableId={data.id} index={index}>
{(provided) => (
<div
className={style.delay}
{...provided.draggableProps}
ref={provided.innerRef}
>
<div className={style.delay} {...provided.draggableProps} ref={provided.innerRef}>
<span className={style.drag} {...provided.dragHandleProps}>
<FiMoreVertical />
</span>
<DelayInput
className={style.input}
value={delayValue}
actionHandler={actionHandler}
/>
<DelayInput className={style.input} value={delayValue} actionHandler={actionHandler} />
<div className={style.actionOverlay}>
<ApplyIconBtn clickhandler={applyDelayHandler} />
<DeleteIconBtn actionHandler={actionHandler} />
@@ -43,3 +34,10 @@ export default function DelayBlock(props) {
</Draggable>
);
}
DelayBlock.propTypes = {
eventsHandler: PropTypes.func.isRequired,
data: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
actionHandler: PropTypes.func.isRequired,
};
client/src/features/editors/list/DelayBlock.module.css → client/src/features/editors/DelayBlock/DelayBlock.module.css
View File
client/src/features/editors/list/EventBlock.jsx → client/src/features/editors/EventBlock/EventBlock.jsx
+54 -51
View File
@@ -5,17 +5,17 @@ import { Draggable } from 'react-beautiful-dnd';
import EventTimes from 'common/components/eventTimes/EventTimes';
import EventTimesVertical from 'common/components/eventTimes/EventTimesVertical';
import EditableText from 'common/input/EditableText';
import ActionButtons from './ActionButtons';
import ActionButtons from '../list/ActionButtons';
import PublicIconBtn from 'common/components/buttons/PublicIconBtn';
import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
import { millisToMinutes } from 'common/utils/dateConfig';
import style from './EventBlock.module.css';
import { SelectCollapse, HandleCollapse } from 'app/context/collapseAtom';
import { HandleCollapse, SelectCollapse } from 'app/context/collapseAtom';
import { useAtom } from 'jotai';
import PropTypes from 'prop-types';
const ExpandedBlock = (props) => {
const { provided, data, eventIndex, next, delay, delayValue, actionHandler } =
props;
const { provided, data, eventIndex, next, delay, delayValue, previousEnd, actionHandler } = props;
const oscid = data.id.length > 4 ? '...' : data.id;
@@ -28,14 +28,12 @@ const ExpandedBlock = (props) => {
return (
<>
<span className={style.drag} {...provided.dragHandleProps}>
<FiMoreVertical />
<FiMoreVertical />
</span>
<div className={style.indicators}>
<span className={next ? style.next : style.nextDisabled}>Next</span>
{delayValue != null && (
<span className={style.delayValue}>+ {delayValue}</span>
)}
{delayValue != null && <span className={style.delayValue}>+ {delayValue}</span>}
</div>
<div className={style.timeExpanded}>
<EventTimesVertical
@@ -44,6 +42,7 @@ const ExpandedBlock = (props) => {
timeEnd={data.timeEnd}
duration={duration}
delay={delay}
previousEnd={previousEnd}
className={style.time}
/>
</div>
@@ -53,25 +52,19 @@ const ExpandedBlock = (props) => {
label='Title'
defaultValue={data.title}
placeholder='Add Title'
submitHandler={(v) =>
actionHandler('update', { field: 'title', value: v })
}
submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
/>
<EditableText
label='Presenter'
defaultValue={data.presenter}
placeholder='Add Presenter name'
submitHandler={(v) =>
actionHandler('update', { field: 'presenter', value: v })
}
submitHandler={(v) => actionHandler('update', { field: 'presenter', value: v })}
/>
<EditableText
label='Subtitle'
defaultValue={data.subtitle}
placeholder='Add Subtitle'
submitHandler={(v) =>
actionHandler('update', { field: 'subtitle', value: v })
}
submitHandler={(v) => actionHandler('update', { field: 'subtitle', value: v })}
/>
<EditableText
label='Note'
@@ -79,9 +72,7 @@ const ExpandedBlock = (props) => {
placeholder='Add Note'
style={{ color: '#d69e2e' }}
maxchar={160}
submitHandler={(v) =>
actionHandler('update', { field: 'note', value: v })
}
submitHandler={(v) => actionHandler('update', { field: 'note', value: v })}
/>
<span className={style.oscLabel}>
{`/ontime/goto ${eventIndex + 1} << OSC >> /ontime/gotoid ${oscid}`}
@@ -89,38 +80,43 @@ const ExpandedBlock = (props) => {
</div>
<div className={style.actionOverlay}>
<PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
<ActionButtons
showAdd
showDelay
showBlock
actionHandler={actionHandler}
/>
<ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
<DeleteIconBtn actionHandler={actionHandler} />
</div>
</>
);
};
ExpandedBlock.propTypes = {
provided: PropTypes.any.isRequired,
data: PropTypes.object.isRequired,
eventIndex: PropTypes.number.isRequired,
next: PropTypes.bool.isRequired,
delay: PropTypes.number,
delayValue: PropTypes.number,
previousEnd: PropTypes.number.isRequired,
actionHandler: PropTypes.func.isRequired,
};
const CollapsedBlock = (props) => {
const { provided, data, next, delay, delayValue, actionHandler } = props;
const { provided, data, next, delay, delayValue, previousEnd, actionHandler } = props;
return (
<>
<span className={style.drag} {...provided.dragHandleProps}>
<FiMoreVertical />
<FiMoreVertical />
</span>
<div className={style.indicators}>
<span className={next ? style.next : style.nextDisabled}>Next</span>
{delayValue != null && (
<span className={style.delayValue}>+ {delayValue}</span>
)}
{delayValue != null && <span className={style.delayValue}>+ {delayValue}</span>}
</div>
<EventTimes
actionHandler={actionHandler}
timeStart={data.timeStart}
timeEnd={data.timeEnd}
delay={delay}
previousEnd={previousEnd}
className={style.time}
/>
<div className={style.titleContainer}>
@@ -128,33 +124,32 @@ const CollapsedBlock = (props) => {
label='Title'
defaultValue={data.title}
placeholder='Add Title'
submitHandler={(v) =>
actionHandler('update', { field: 'title', value: v })
}
submitHandler={(v) => actionHandler('update', { field: 'title', value: v })}
/>
</div>
<div className={style.actionOverlay}>
<PublicIconBtn actionHandler={actionHandler} active={data.isPublic} />
<ActionButtons
showAdd
showDelay
showBlock
actionHandler={actionHandler}
/>
<ActionButtons showAdd showDelay showBlock actionHandler={actionHandler} />
</div>
</>
);
};
CollapsedBlock.propTypes = {
provided: PropTypes.any.isRequired,
data: PropTypes.object.isRequired,
next: PropTypes.bool.isRequired,
delay: PropTypes.any,
delayValue: PropTypes.any,
previousEnd: PropTypes.number.isRequired,
actionHandler: PropTypes.func.isRequired,
};
export default function EventBlock(props) {
const { data, selected, delay, index, eventIndex, actionHandler } = props;
const [collapsed] = useAtom(
useMemo(() => SelectCollapse(data.id), [data.id])
);
const { data, selected, delay, index, eventIndex, previousEnd, actionHandler } = props;
const [collapsed] = useAtom(useMemo(() => SelectCollapse(data.id), [data.id]));
const [, setCollapsed] = useAtom(HandleCollapse);
// TODO: should this go inside useEffect()
// Would I then need to add this to state?
const isSelected = selected ? style.active : '';
const isCollapsed = collapsed ? style.collapsed : style.expanded;
const classSelect = `${style.event} ${isCollapsed} ${isSelected}`;
@@ -169,11 +164,7 @@ export default function EventBlock(props) {
return (
<Draggable key={data.id} draggableId={data.id} index={index}>
{(provided) => (
<div
className={classSelect}
{...provided.draggableProps}
ref={provided.innerRef}
>
<div className={classSelect} {...provided.draggableProps} ref={provided.innerRef}>
<Icon
className={collapsed ? style.moreCollapsed : style.moreExpanded}
as={FiChevronUp}
@@ -186,6 +177,7 @@ export default function EventBlock(props) {
next={props.next}
delay={delay}
delayValue={delayValue}
previousEnd={previousEnd}
actionHandler={actionHandler}
/>
) : (
@@ -196,6 +188,7 @@ export default function EventBlock(props) {
next={props.next}
delay={delay}
delayValue={delayValue}
previousEnd={previousEnd}
actionHandler={actionHandler}
/>
)}
@@ -204,3 +197,13 @@ export default function EventBlock(props) {
</Draggable>
);
}
EventBlock.propTypes = {
data: PropTypes.object.isRequired,
selected: PropTypes.bool.isRequired,
delay: PropTypes.number,
index: PropTypes.number.isRequired,
eventIndex: PropTypes.number.isRequired,
previousEnd: PropTypes.number.isRequired,
actionHandler: PropTypes.func.isRequired,
};
client/src/features/editors/list/EventBlock.module.css → client/src/features/editors/EventBlock/EventBlock.module.css
View File
client/src/features/editors/list/ActionButtons.jsx
+14 -11
View File
@@ -1,6 +1,7 @@
import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
import { IconButton } from '@chakra-ui/button';
import { FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
import { FiClock, FiMinusCircle, FiPlus } from 'react-icons/fi';
import { Tooltip } from '@chakra-ui/tooltip';
export default function ActionButtons(props) {
const { showAdd, showDelay, showBlock, actionHandler } = props;
@@ -12,16 +13,18 @@ export default function ActionButtons(props) {
return (
<Menu isLazy lazyBehavior='unmount'>
<MenuButton
as={IconButton}
aria-label='Options'
size='xs'
icon={<FiPlus />}
_expanded={{ bg: 'orange.300', color: 'white' }}
_focus={{ boxShadow: 'none' }}
backgroundColor={'orange.200'}
color={'orange.500'}
/>
<Tooltip label='Add ...' delay={500}>
<MenuButton
as={IconButton}
aria-label='Options'
size='xs'
icon={<FiPlus />}
_expanded={{ bg: 'orange.300', color: 'white' }}
_focus={{ boxShadow: 'none' }}
backgroundColor={'orange.200'}
color={'orange.500'}
/>
</Tooltip>
<MenuList style={menuStyle}>
<MenuItem
icon={<FiPlus />}
client/src/features/editors/list/EventList.jsx
+8 -1
View File
@@ -20,8 +20,10 @@ export default function EventList(props) {
// Handle keyboard shortcuts
const handleKeyPress = useCallback(
(e) => {
// handle held key
if (e.repeat) return;
// Check if the alt key is pressed
if (e.altKey) {
if (e.altKey && (!e.ctrlKey || !e.shiftKey)) {
// Arrow down
if (e.keyCode === 40) {
if (cursor == null) setCursor(0);
@@ -145,6 +147,8 @@ export default function EventList(props) {
let cumulativeDelay = 0;
let eventIndex = -1;
let previousEnd = 0;
let thisEnd = 0;
return (
<div className={style.eventContainer}>
@@ -167,6 +171,8 @@ export default function EventList(props) {
cumulativeDelay = 0;
} else if (e.type === 'event') {
eventIndex++;
previousEnd = thisEnd;
thisEnd = e.timeEnd;
}
return (
@@ -184,6 +190,7 @@ export default function EventList(props) {
next={nextId === e.id}
eventsHandler={eventsHandler}
delay={cumulativeDelay}
previousEnd={previousEnd}
/>
</div>
);
client/src/features/editors/list/EventListItem.jsx
+7 -4
View File
@@ -1,6 +1,6 @@
import DelayBlock from './DelayBlock';
import BlockBlock from './BlockBlock';
import EventBlock from './EventBlock';
import DelayBlock from '../DelayBlock/DelayBlock';
import BlockBlock from '../BlockBlock/BlockBlock';
import EventBlock from '../EventBlock/EventBlock';
import { memo, useContext } from 'react';
import { LoggingContext } from '../../../app/context/LoggingContext';
@@ -10,7 +10,8 @@ const areEqual = (prevProps, nextProps) => {
prevProps.selected === nextProps.selected &&
prevProps.next === nextProps.next &&
prevProps.index === nextProps.index &&
prevProps.delay === nextProps.delay
prevProps.delay === nextProps.delay &&
prevProps.previousEnd === nextProps.previousEnd
);
};
@@ -24,6 +25,7 @@ const EventListItem = (props) => {
next,
eventsHandler,
delay,
previousEnd,
...rest
} = props;
const { emitError } = useContext(LoggingContext);
@@ -79,6 +81,7 @@ const EventListItem = (props) => {
next={next}
actionHandler={actionHandler}
delay={delay}
previousEnd={previousEnd}
/>
);
case 'block':
client/src/features/menu/MenuActionButtons.jsx
+14 -11
View File
@@ -1,7 +1,8 @@
import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
import { IconButton } from '@chakra-ui/button';
import { FiTrash2, FiPlus, FiClock, FiMinusCircle } from 'react-icons/fi';
import { FiClock, FiMinusCircle, FiPlus, FiTrash2 } from 'react-icons/fi';
import { Divider } from '@chakra-ui/layout';
import { Tooltip } from '@chakra-ui/tooltip';
export default function MenuActionButtons(props) {
const { actionHandler } = props;
@@ -12,16 +13,18 @@ export default function MenuActionButtons(props) {
return (
<Menu isLazy lazyBehavior='unmount'>
<MenuButton
as={IconButton}
aria-label='Create Menu'
size={props.size || 'xs'}
icon={<FiPlus />}
_expanded={{ bg: 'orange.300', color: 'white' }}
_focus={{ boxShadow: 'none' }}
backgroundColor={'orange.200'}
color={'orange.500'}
/>
<Tooltip label='Add / Delete ...'>
<MenuButton
as={IconButton}
aria-label='Create Menu'
size={props.size || 'xs'}
icon={<FiPlus />}
_expanded={{ bg: 'orange.300', color: 'white' }}
_focus={{ boxShadow: 'none' }}
backgroundColor={'orange.200'}
color={'orange.500'}
/>
</Tooltip>
<MenuList style={menuStyle}>
<MenuItem icon={<FiPlus />} onClick={() => actionHandler('event')}>
Add Event first
client/src/features/menu/buttons/DownloadIconBtn.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { FiDownload } from 'react-icons/fi';
export default function DownloadIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Download File'>
<Tooltip label='Export event list'>
<IconButton
size={props.size || 'xs'}
icon={<FiDownload />}
client/src/features/menu/buttons/InfoIconBtn.jsx
-19
View File
@@ -1,19 +0,0 @@
import { IconButton } from '@chakra-ui/button';
import { Tooltip } from '@chakra-ui/tooltip';
import { FiHome } from 'react-icons/fi';
export default function InfoIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Event Main'>
<IconButton
size={props.size || 'xs'}
icon={<FiHome />}
colorScheme='white'
onClick={clickhandler}
_focus={{ boxShadow: 'none' }}
{...rest}
/>
</Tooltip>
);
}
client/src/features/menu/buttons/UploadIconBtn.jsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { FiUpload } from 'react-icons/fi';
export default function UploadIconBtn(props) {
const { clickhandler, ...rest } = props;
return (
<Tooltip label='Upload File'>
<Tooltip label='Import event list'>
<IconButton
size={props.size || 'xs'}
icon={<FiUpload />}
client/src/features/modals/AliasesModal.jsx
+4 -4
View File
@@ -1,5 +1,5 @@
import { Button, IconButton } from '@chakra-ui/button';
import { FiInfo, FiMinus, FiSun } from 'react-icons/fi';
import { IoInformationCircleOutline, IoRemove, IoSunny } from 'react-icons/io5';
import { ModalBody } from '@chakra-ui/modal';
import { Input } from '@chakra-ui/react';
import { getAliases, postAliases } from '../../app/api/ontimeApi';
@@ -176,7 +176,7 @@ export default function AliasesModal() {
<div className={style.hSeparator}>Custom Aliases</div>
<div className={style.blockNotes}>
<span className={style.inlineFlex}>
<FiInfo color='#2b6cb0' fontSize={'2em'} />
<IoInformationCircleOutline color='#2b6cb0' fontSize={'2em'} />
URL aliases are useful in two main scenarios
</span>
<span className={style.labelNote}>Complicated URLs</span>
@@ -267,7 +267,7 @@ export default function AliasesModal() {
<Tooltip label='Enable alias' openDelay={500}>
<IconButton
size='xs'
icon={<FiSun />}
icon={<IoSunny />}
colorScheme='blue'
variant={alias.enabled ? null : 'outline'}
onClick={() => setEnabled(alias.id, !alias.enabled)}
@@ -276,7 +276,7 @@ export default function AliasesModal() {
<Tooltip label='Delete alias' openDelay={500}>
<IconButton
size='xs'
icon={<FiMinus />}
icon={<IoRemove />}
colorScheme='red'
onClick={() => deleteAlias(alias.id)}
/>
client/src/features/modals/AppSettingsModal.jsx
+1 -1
View File
@@ -99,7 +99,7 @@ export default function AppSettingsModal() {
<p className={style.notes}>
Options related to the application
<br />
🔥 Changes take effect after app restart 🔥
🔥 Changes take effect on save 🔥
</p>
<form onSubmit={submitHandler}>
<div className={style.modalFields}>
client/src/features/modals/EventSettingsModal.jsx
+1
View File
@@ -39,6 +39,7 @@ export default function SettingsModal() {
setSubmitting(true);
await postEvent(formData);
await refetch();
setChanged(false);
setSubmitting(false);
client/src/features/modals/OscSettingsModal.jsx
+144 -19
View File
@@ -8,7 +8,70 @@ import style from './Modals.module.scss';
import { LoggingContext } from '../../app/context/LoggingContext';
import SubmitContainer from './SubmitContainer';
import { inputProps, portInputProps } from './modalHelper';
import { IoInformationCircleOutline } from 'react-icons/io5';
import EnableBtn from '../../common/components/buttons/EnableBtn';
// currently defined endpoints
// temporary
const oscCycleEndpoints = [
{
title: 'On Event Start',
message: '/ontime/eventNumber',
value: '8 | int',
},
{
title: 'On Update',
message: '/ontime/time',
value: '10:12:12 | string',
},
{
title: 'On Update',
message: '/ontime/overtime',
value: '0-1 | int',
},
{
title: 'On Update',
message: '/ontime/title',
value: 'Title of running event | string',
},
{
title: 'On Finish',
message: '/ontime/finished',
value: '-',
},
];
const oscTriggerEndpoints = [
{
title: 'On Start',
message: '/ontime/play',
value: '-',
},
{
title: 'On Pause',
message: '/ontime/pause',
value: '-',
},
{
title: 'On Previous',
message: '/ontime/prev',
value: '-',
},
{
title: 'On Next',
message: '/ontime/next',
value: '-',
},
{
title: 'On Reload',
message: '/ontime/reload',
value: '-',
},
{
title: 'On Stop',
message: '/ontime/stop',
value: '-',
},
];
export default function OscSettingsModal() {
const { data, status, refetch } = useFetch(OSC_SETTINGS, getOSC);
@@ -57,6 +120,7 @@ export default function OscSettingsModal() {
} else {
// Post here
await postOSC(formData);
await refetch();
setChanged(false);
}
setSubmitting(false);
@@ -91,25 +155,44 @@ export default function OscSettingsModal() {
</p>
<form onSubmit={submitHandler}>
<div className={style.modalFields}>
<div className={style.hSeparator}>OSC Input (control)</div>
<div className={style.spacedEntry}>
<FormLabel htmlFor='port'>
OSC In Port
<span className={style.labelNote}>
<br />
Open port for 3rd party control over OSC - Default 8888
</span>
</FormLabel>
<Input
{...portInputProps}
name='port'
placeholder='8888'
value={formData.port}
onChange={(event) =>
handleChange('port', parseInt(event.target.value))
}
style={{ width: '6em', textAlign: 'center' }}
/>
<div className={style.hSeparator}>
OSC Input (Control ontime over OSC)
</div>
<div className={style.modalInline}>
<FormControl id='oscInEnabled'>
<FormLabel htmlFor='oscInEnabled'>
OSC Enable
<span className={style.labelNote}>
<br />
Enable / Disable control
</span>
</FormLabel>
<EnableBtn
active={formData.enabled}
text={formData.enabled ? 'OSC IN Enabled' : 'OSC IN Disabled'}
actionHandler={() => handleChange('enabled', !formData.enabled)}
onClick={() => console.log('yay')}
/>
</FormControl>
<FormControl id='portIn'>
<FormLabel htmlFor='portIn'>
OSC In Port
<span className={style.labelNote}>
<br />
Port - Default 8888
</span>
</FormLabel>
<Input
{...portInputProps}
name='port'
placeholder='8888'
value={formData.port}
onChange={(event) =>
handleChange('port', parseInt(event.target.value))
}
style={{ width: '6em', textAlign: 'center' }}
/>
</FormControl>
</div>
<div className={style.hSeparator}>OSC Output (feedback)</div>
<div className={style.modalInline}>
@@ -155,6 +238,48 @@ export default function OscSettingsModal() {
/>
</FormControl>
</div>
<div className={style.blockNotes}>
<span className={style.inlineFlex}>
<IoInformationCircleOutline color='#2b6cb0' fontSize={'2em'} />
OSC Feedback messages
</span>
<span>
In future OSC feedback will be user defined. <br />
For now this is the list of OSC messages sent from ontime
</span>
<table>
<tbody>
<tr>
<td className={style.labelNote} style={{ width: '30%' }}>
Cycle
</td>
<td className={style.labelNote}>Message</td>
<td className={style.labelNote}>Value (example | type)</td>
</tr>
{oscCycleEndpoints.map((e) => (
<tr key={e.message}>
<td>{e.title}</td>
<td>{e.message}</td>
<td>{e.value}</td>
</tr>
))}
<tr>
<td className={style.labelNote} style={{ width: '30%' }}>
Trigger
</td>
<td className={style.labelNote}>Message</td>
<td className={style.labelNote}>Value (example | type)</td>
</tr>
{oscTriggerEndpoints.map((e) => (
<tr key={e.message}>
<td>{e.title}</td>
<td>{e.message}</td>
<td>{e.value}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<SubmitContainer
revert={revert}
client/src/features/viewers/PreviewContainer.jsx
-62
View File
@@ -1,62 +0,0 @@
import styles from './PreviewContainer.module.css';
import IFrameLoader from './iframes/IFrameLoader';
// get origin from URL
const serverURL = `${window.location.origin}`;
export default function PreviewContainer() {
return (
<div className={styles.previewContainer}>
<div className={styles.previewItem}>
<IFrameLoader title='Default Presenter' src={`${serverURL}/speaker`} />
<a
href={`${serverURL}/speaker`}
target='_blank'
rel='noreferrer'
className={styles.label}
>
Default Presenter
</a>
</div>
<div className={styles.previewItem}>
<IFrameLoader title='Audience' src={`${serverURL}/public`} />
<a
href={`${serverURL}/public`}
target='_blank'
rel='noreferrer'
className={styles.label}
>
Audience
</a>
</div>
<div className={styles.previewItem}>
<IFrameLoader title='Stage Manager' src={`${serverURL}/sm`} />
<a
href={`${serverURL}/sm`}
target='_blank'
rel='noreferrer'
className={styles.label}
>
Stage Manager
</a>
</div>
<div className={styles.previewItem}>
<IFrameLoader
title='Lower third'
src={`${serverURL}/lower?key=242424`}
/>
<a
href={`${serverURL}/lower`}
target='_blank'
rel='noreferrer'
className={styles.label}
>
Lower third
</a>
</div>
</div>
);
}
client/src/features/viewers/PreviewContainer.module.css
-25
View File
@@ -1,25 +0,0 @@
.previewContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
gap: 1em;
}
.previewItem {
width: 45%;
}
.label {
padding: 0.1em 4em;
}
a::after {
content: ' \2197';
color: #ff7597;
}
a:hover {
color: #ff7597;
}
client/src/features/viewers/ViewWrapper.jsx
+9 -15
View File
@@ -4,16 +4,12 @@ import { fetchEvent } from 'app/api/eventApi';
import { useSocket } from 'app/context/socketContext';
import { stringFromMillis } from 'ontime-utils/time';
import { useFetch } from 'app/hooks/useFetch';
import { EVENTS_TABLE, EVENT_TABLE } from 'app/api/apiConstants';
import { EVENT_TABLE, EVENTS_TABLE } from 'app/api/apiConstants';
const withSocket = (Component) => {
const WrappedComponent = (props) => {
const {
data: eventsData,
} = useFetch(EVENTS_TABLE, fetchAllEvents);
const {
data: genData,
} = useFetch(EVENT_TABLE, fetchEvent);
return (props) => {
const { data: eventsData } = useFetch(EVENTS_TABLE, fetchAllEvents);
const { data: genData } = useFetch(EVENT_TABLE, fetchEvent);
const [publicEvents, setPublicEvents] = useState([]);
const [backstageEvents, setBackstageEvents] = useState([]);
@@ -70,8 +66,8 @@ const withSocket = (Component) => {
useEffect(() => {
if (socket == null) return;
// Handle presenter messages
socket.on('messages-presenter', (data) => {
// Handle timer messages
socket.on('messages-timer', (data) => {
setPres({ ...data });
});
@@ -121,14 +117,14 @@ const withSocket = (Component) => {
socket.emit('get-messages');
// Ask for up to data
socket.emit('get-presenter');
socket.emit('get-timer');
// ask for timer
socket.emit('get-timer');
// ask for playstate
socket.emit('get-playstate');
socket.emit('get-onAir')
socket.emit('get-onAir');
// Ask for up titles
socket.emit('get-titles');
@@ -141,7 +137,7 @@ const withSocket = (Component) => {
// Clear listeners
return () => {
socket.off('messages-public');
socket.off('messages-presenter');
socket.off('messages-timer');
socket.off('messages-lower');
socket.off('timer');
socket.off('playstate');
@@ -255,8 +251,6 @@ const withSocket = (Component) => {
/>
);
};
return WrappedComponent;
};
export default withSocket;
client/src/features/viewers/presenter/PresenterSimple.jsx
-28
View File
@@ -1,28 +0,0 @@
import style from './PresenterView.module.css';
export default function PresenterSimple() {
return (
<div className={style.container__graySimple}>
{/* <div className={style.messageOverlayActive}>
<div className={style.message}>Remember to smile</div>
</div> */}
<div className={style.timerContainer}>
<div className={style.countdownBig}>01:03</div>
</div>
<div className={style.progress}>
<div className={style.progressed}></div>
</div>
{/* <div className={style.mainContainer}>
<div className={style.finished}>TIME UP</div>
</div> */}
<div className={style.clockContainer}>
<div className={style.label}>Time Now</div>
<div className={style.clock}>11:00:23</div>
</div>
</div>
);
}
client/src/features/viewers/production/lower/LowerWrapper.jsx
+2 -1
View File
@@ -7,7 +7,7 @@ const isEqual = require('react-fast-compare');
const areEqual = (prevProps, nextProps) => {
return (
isEqual(prevProps.title, nextProps.title) &&
isEqual(prevProps.lower && nextProps.lower)
isEqual(prevProps.lower, nextProps.lower)
);
};
@@ -56,6 +56,7 @@ const Lower = (props) => {
clearTimeout(timeout);
}
};
// eslint-disable-next-line
}, [title.titleNow, title.subtitleNow, title.presenterNow]);
// TODO: sanitize data
client/src/features/viewers/timer/MinimalTimer.jsx
+37
View File
@@ -0,0 +1,37 @@
import { useEffect } from 'react';
import { formatDisplay } from '../../../common/utils/dateConfig';
import NavLogo from '../../../common/components/nav/NavLogo';
import style from './MinimalTimer.module.scss';
export default function MinimalTimer(props) {
const { pres, time } = props;
// Set window title
useEffect(() => {
document.title = 'ontime - Minimal Timer';
}, []);
const showOverlay = pres.text !== '' && pres.visible;
const isPlaying = time.playstate !== 'pause';
const timer = formatDisplay(time.running, true);
const clean = timer.replaceAll(':', '');
return (
<div className={time.finished ? style.containerFinished : style.container}>
<div
className={
showOverlay ? style.messageOverlayActive : style.messageOverlay
}
>
<div className={style.message}>{pres.text}</div>
</div>
<NavLogo />
<div
style={{ fontSize: `${89 / (clean.length - 1)}vw` }}
className={isPlaying ? style.timer : style.timerPaused}
>
{time.running < 0 ? `-${timer}` : timer}
</div>
</div>
);
}
client/src/features/viewers/timer/MinimalTimer.module.scss
+72
View File
@@ -0,0 +1,72 @@
@use '../../../styles/main' as *;
.container,
.containerFinished {
background: $bg-black;
height: 100vh;
color: $title-white;
display: grid;
place-content: center;
gap: 1vw;
border: 1vw solid $bg-black;
}
.containerFinished {
border: 1vw solid $ontime-pink-variant;
color: $ontime-pink-variant;
transition: 0.3s;
}
.timer,
.timerPaused {
font-family: "Arial Black", sans-serif;
font-size: 20vw;
color: inherit;
opacity: 1;
transition: 0.5s;
transition-property: opacity;
}
.timerPaused {
opacity: 0.6;
transition: 0.5s;
}
/* =================== OVERLAY ===================*/
.messageOverlay,
.messageOverlayActive {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.85);
z-index: -1;
opacity: 0;
transition: 0.5s;
}
.messageOverlayActive {
opacity: 1;
transition: 0.5s;
transition-property: opacity;
z-index: 2;
}
.message {
width: inherit;
padding: 2vw;
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
font-size: 15vw;
line-height: 30vh;
text-align: center;
font-weight: 600;
}
client/src/features/viewers/presenter/PresenterView.jsx → client/src/features/viewers/timer/Timer.jsx
+25 -5
View File
@@ -1,19 +1,35 @@
import { AnimatePresence, motion } from 'framer-motion';
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import Countdown from 'common/components/countdown/Countdown';
import MyProgressBar from 'common/components/myProgressBar/MyProgressBar';
import NavLogo from 'common/components/nav/NavLogo';
import TitleCard from 'common/components/views/TitleCard';
import style from './PresenterView.module.css';
import style from './Timer.module.scss';
export default function PresenterView(props) {
export default function Timer(props) {
const { general, pres, title, time } = props;
const [elapsed, setElapsed] = useState(true);
const [searchParams] = useSearchParams();
// Set window title
useEffect(() => {
document.title = 'ontime - Presenter Screen';
document.title = 'ontime - Timer';
}, []);
// eg. http://localhost:3000/timer?progress=up
// Check for user options
useEffect(() => {
// progress: selector
// Should be 'up' or 'down'
const progress = searchParams.get('progress');
if (progress === 'up') {
setElapsed(true);
} else if (progress === 'down') {
setElapsed(false);
}
}, [searchParams]);
const showOverlay = pres.text !== '' && pres.visible;
const isPlaying = time.playstate !== 'pause';
const normalisedTime = Math.max(time.running, 0);
@@ -79,7 +95,11 @@ export default function PresenterView(props) {
isPlaying ? style.progressContainer : style.progressContainerPaused
}
>
<MyProgressBar now={normalisedTime} complete={time.durationSeconds} />
<MyProgressBar
now={normalisedTime}
complete={time.durationSeconds}
showElapsed={elapsed}
/>
</div>
)}
client/src/features/viewers/presenter/PresenterView.module.css → client/src/features/viewers/timer/Timer.module.scss
+9 -20
View File
@@ -1,3 +1,5 @@
@use '../../../styles/main' as *;
.container__gray,
.container__grayFinished {
margin: 0;
@@ -5,9 +7,9 @@
overflow: hidden;
width: 100%; /* restrict the page width to viewport */
background: radial-gradient(circle, #202020 0%, #121212 80%);
background: radial-gradient(circle, $bg-black-gradient 0%, $bg-black 80%);
height: 100vh;
color: #fffd;
color: $title-white;
display: grid;
grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
grid-template-rows: auto 1fr auto minmax(25vh, auto);
@@ -20,25 +22,11 @@
padding: 1vw;
}
.container__graySimple,
.container__grayFinishedSimple {
background: radial-gradient(circle, #202020 0%, #121212 80%);
height: 100vh;
color: #fffd;
display: grid;
grid-template-columns: 1fr 1fr 5vw 1fr 1fr;
grid-template-rows: auto 1fr 30vh;
grid-template-areas:
' clck .... .... .... ....'
' timr timr timr timr timr'
' prog prog prog prog prog';
gap: 1vw;
}
.label {
font-size: 1.3vw;
color: #ff7597;
color: $ontime-pink;
}
/* =================== TITLES ===================*/
.nowContainer,
@@ -52,6 +40,7 @@
.nowContainer {
grid-area: now;
}
.nextContainer {
grid-area: next;
}
@@ -71,7 +60,7 @@
font-size: 12vw;
line-height: 18vw;
font-weight: 600;
color: #ff6969;
color: $ontime-pink-variant;
padding: 0;
}
@@ -95,7 +84,7 @@
}
.container__grayFinished {
border: 1vw solid #ff6969;
border: 1vw solid $ontime-pink-variant;
}
/* =================== OVERLAY ===================*/
client/src/styles/_main.scss
+7
View File
@@ -2,6 +2,7 @@
$ontime-accent: #4bffabcc;
$ontime-pink: #ff7597;
$ontime-pink-variant: #ff6969;
$ontime-roll: #2b6cb0;
$notes-color: #d69e2e;
@@ -16,6 +17,11 @@ $light-text: #2b6cb022;
$error-red: #E53E3E;
$title-white: #fffd;
$bg-black: #121212;
$bg-black-gradient: #202020;
//////////////////////////////////// general app element overriders
// no decoration on lists
@@ -34,6 +40,7 @@ a {
content: ' \2197';
color: $ontime-pink;
}
&:hover {
color: $ontime-pink;
}
client/src/styles/_mixins.scss
+12
View File
@@ -1,5 +1,11 @@
//////////////////////////////////// general app elements
@mixin main-container {
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
@mixin container-bg {
background-color: rgba(0, 0, 0, 0.13);
border-radius: 2px;
@@ -7,3 +13,9 @@
margin: 0 0.5em;
}
@mixin osc-label {
color: #4bffabcc;
font-size: 0.8em;
-webkit-user-select: text;
user-select: text;
}