mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-07 08:23:55 +00:00
Merge branch 'master' into port-colision
This commit is contained in:
arc-alex
@@ -39,6 +39,7 @@ dist/
|
||||
# docker utils
|
||||
ontime-db
|
||||
ontime-external/
|
||||
ontime-data/
|
||||
|
||||
# versioning file
|
||||
**/ONTIME_VERSION.js
|
||||
|
||||
+1
-1
@@ -91,7 +91,7 @@ While it should allow for a generic setup, it might need to be modified to fit y
|
||||
|
||||
From the project root, run the following commands
|
||||
|
||||
- __Build docker image from__ by running `docker build -t getontime/ontime`
|
||||
- __Build docker image from__ by running `docker build -t getontime/ontime .`
|
||||
- __Run docker image from compose__ by running `docker-compose up -d`
|
||||
|
||||
Other useful commands
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@getontime/cli",
|
||||
"version": "3.8.0",
|
||||
"version": "3.9.5",
|
||||
"author": "Carlos Valente",
|
||||
"description": "Time keeping for live events",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
|
||||
+25
-29
@@ -1,31 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8' />
|
||||
<base href="/">
|
||||
<link rel='icon' href='/favicon.ico' />
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1' />
|
||||
<meta name='theme-color' content='#101010' />
|
||||
<meta name='ontime' content='ontime - time keeping for live events' />
|
||||
<link rel='apple-touch-icon' href='/ontime-logo.png' />
|
||||
<link
|
||||
rel='icon'
|
||||
type='image/png'
|
||||
href='ontime-logo.png'
|
||||
/>
|
||||
<link rel='manifest' href='/site.webmanifest' />
|
||||
<link rel='manifest' href='/manifest.json' />
|
||||
<title>ontime</title>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id='root'></div>
|
||||
<script type='module' src='/src/index.tsx'></script>
|
||||
</body>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="/" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#101010" />
|
||||
<meta name="ontime" content="ontime - time keeping for live events" />
|
||||
<link rel="apple-touch-icon" href="/ontime-logo.png" />
|
||||
<link rel="icon" type="image/png" href="/ontime-logo.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<title>ontime</title>
|
||||
<style>
|
||||
body,
|
||||
html {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ontime-ui",
|
||||
"version": "3.8.0",
|
||||
"version": "3.9.5",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
@@ -13,10 +13,10 @@
|
||||
"@fontsource/open-sans": "^5.0.28",
|
||||
"@mantine/hooks": "^7.13.3",
|
||||
"@react-icons/all-files": "^4.1.0",
|
||||
"@sentry/react": "^8.19.0",
|
||||
"@tanstack/react-query": "^5.17.9",
|
||||
"@tanstack/react-query-devtools": "^5.17.9",
|
||||
"@tanstack/react-table": "^8.11.3",
|
||||
"@sentry/react": "^8.43.0",
|
||||
"@tanstack/react-query": "^5.62.7",
|
||||
"@tanstack/react-query-devtools": "^5.62.7",
|
||||
"@tanstack/react-table": "^8.20.5",
|
||||
"autosize": "^6.0.1",
|
||||
"axios": "^1.2.0",
|
||||
"color": "^4.2.3",
|
||||
@@ -39,7 +39,7 @@
|
||||
"build": "vite build",
|
||||
"build:local": "cross-env NODE_ENV=local vite build",
|
||||
"build:electron": "cross-env NODE_ENV=local vite build",
|
||||
"build:docker": "cross-env VITE_IS_CLOUD=true vite build",
|
||||
"build:docker": "cross-env VITE_IS_DOCKER=true vite build",
|
||||
"build:localdocker": "cross-env NODE_ENV=local vite build",
|
||||
"lint": "eslint . --quiet",
|
||||
"test": "vitest",
|
||||
@@ -92,4 +92,4 @@
|
||||
"vite-tsconfig-paths": "^4.3.1",
|
||||
"vitest": "catalog:"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import { connectSocket } from './common/utils/socket';
|
||||
import theme from './theme/theme';
|
||||
import { TranslationProvider } from './translation/TranslationProvider';
|
||||
import AppRouter from './AppRouter';
|
||||
import { baseURI } from './externals';
|
||||
|
||||
connectSocket();
|
||||
|
||||
@@ -19,7 +20,7 @@ function App() {
|
||||
<ChakraProvider disableGlobalStyle resetCSS theme={theme}>
|
||||
<QueryClientProvider client={ontimeQueryClient}>
|
||||
<AppContextProvider>
|
||||
<BrowserRouter>
|
||||
<BrowserRouter basename={baseURI}>
|
||||
<div className='App'>
|
||||
<ErrorBoundary>
|
||||
<TranslationProvider>
|
||||
|
||||
@@ -19,7 +19,7 @@ import { ONTIME_VERSION } from './ONTIME_VERSION';
|
||||
import { sentryDsn, sentryRecommendedIgnore } from './sentry.config';
|
||||
|
||||
const Editor = React.lazy(() => import('./features/editors/ProtectedEditor'));
|
||||
const Cuesheet = React.lazy(() => import('./features/cuesheet/ProtectedCuesheet'));
|
||||
const Cuesheet = React.lazy(() => import('./views/cuesheet/ProtectedCuesheet'));
|
||||
const Operator = React.lazy(() => import('./features/operator/OperatorExport'));
|
||||
|
||||
const TimerView = React.lazy(() => import('./features/viewers/timer/Timer'));
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import axios, { AxiosResponse } from 'axios';
|
||||
import { DatabaseModel, MessageResponse, ProjectData, ProjectFileListResponse, QuickStartData } from 'ontime-types';
|
||||
|
||||
import { makeCSV, makeTable } from '../../features/cuesheet/cuesheetUtils';
|
||||
import { makeCSV, makeTable } from '../../views/cuesheet/cuesheet.utils';
|
||||
|
||||
import { apiEntryUrl } from './constants';
|
||||
import { createBlob, downloadBlob } from './utils';
|
||||
|
||||
@@ -17,7 +17,7 @@ import { IoExpand } from '@react-icons/all-files/io5/IoExpand';
|
||||
import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
|
||||
import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
|
||||
|
||||
import { isLocalhost, serverPort } from '../../../externals';
|
||||
import { isLocalhost } from '../../../externals';
|
||||
import { navigatorConstants } from '../../../viewerConfig';
|
||||
import useClickOutside from '../../hooks/useClickOutside';
|
||||
import { useElectronEvent } from '../../hooks/useElectronEvent';
|
||||
@@ -25,7 +25,7 @@ import useInfo from '../../hooks-query/useInfo';
|
||||
import { useClientStore } from '../../stores/clientStore';
|
||||
import { useViewOptionsStore } from '../../stores/viewOptions';
|
||||
import { isKeyEnter } from '../../utils/keyEvent';
|
||||
import { handleLinks, openLink } from '../../utils/linkUtils';
|
||||
import { handleLinks, linkToOtherHost, openLink } from '../../utils/linkUtils';
|
||||
import { cx } from '../../utils/styleUtils';
|
||||
import { RenameClientModal } from '../client-modal/RenameClientModal';
|
||||
import CopyTag from '../copy-tag/CopyTag';
|
||||
@@ -45,7 +45,7 @@ function NavigationMenu(props: NavigationMenuProps) {
|
||||
|
||||
const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
|
||||
const { fullscreen, toggle } = useFullscreen();
|
||||
const { toggleMirror } = useViewOptionsStore();
|
||||
const { mirror, toggleMirror } = useViewOptionsStore();
|
||||
const location = useLocation();
|
||||
|
||||
const menuRef = useRef<HTMLDivElement | null>(null);
|
||||
@@ -65,7 +65,7 @@ function NavigationMenu(props: NavigationMenuProps) {
|
||||
<DrawerBody padding={0}>
|
||||
<div className={style.buttonsContainer}>
|
||||
<div
|
||||
className={style.link}
|
||||
className={cx([style.link, fullscreen && style.current])}
|
||||
tabIndex={0}
|
||||
role='button'
|
||||
onClick={toggle}
|
||||
@@ -77,7 +77,7 @@ function NavigationMenu(props: NavigationMenuProps) {
|
||||
{fullscreen ? <IoContract /> : <IoExpand />}
|
||||
</div>
|
||||
<div
|
||||
className={style.link}
|
||||
className={cx([style.link, mirror && style.current])}
|
||||
tabIndex={0}
|
||||
role='button'
|
||||
onClick={() => toggleMirror()}
|
||||
@@ -154,7 +154,8 @@ function OtherAddresses(props: OtherAddressesProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const address = `http://${nif.address}:${serverPort}${currentLocation}`;
|
||||
const address = linkToOtherHost(nif.address, currentLocation);
|
||||
|
||||
return (
|
||||
<CopyTag
|
||||
key={nif.name}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
@use '../../../theme/viewerDefs' as *;
|
||||
|
||||
/* share the same style as a page layout */
|
||||
.page {
|
||||
margin: 0;
|
||||
box-sizing: border-box; /* reset */
|
||||
overflow: hidden;
|
||||
width: 100%; /* restrict the page width to viewport */
|
||||
height: 100vh;
|
||||
|
||||
font-family: var(--font-family-override, $viewer-font-family);
|
||||
background: var(--background-color-override, $viewer-background-color);
|
||||
color: var(--color-override, $viewer-color);
|
||||
padding: min(2vh, 16px) clamp(16px, 10vw, 64px);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 5rem;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { CSSProperties } from 'react';
|
||||
|
||||
import Empty from './Empty';
|
||||
|
||||
import style from './EmptyPage.module.scss';
|
||||
|
||||
interface EmptyPageProps {
|
||||
text?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
export default function EmptyPage(props: EmptyPageProps) {
|
||||
const { text, ...rest } = props;
|
||||
|
||||
return (
|
||||
<div className={style.page}>
|
||||
<Empty text={text} {...rest} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
.drawerFooter {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
justify-content: end;
|
||||
gap: $section-spacing;
|
||||
|
||||
button {
|
||||
@@ -8,6 +8,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.infoLabel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $element-spacing;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
background-color: $gray-1100;
|
||||
border-radius: 2px;
|
||||
font-size: $inner-section-text-size;
|
||||
|
||||
svg {
|
||||
font-size: 1.5rem;
|
||||
color: $info-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: $inner-section-text-size;
|
||||
color: $label-gray;
|
||||
|
||||
@@ -11,6 +11,9 @@ import {
|
||||
DrawerOverlay,
|
||||
useDisclosure,
|
||||
} from '@chakra-ui/react';
|
||||
import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle';
|
||||
|
||||
import useViewSettings from '../../../common/hooks-query/useViewSettings';
|
||||
|
||||
import ParamInput from './ParamInput';
|
||||
import { isSection, ViewOption } from './types';
|
||||
@@ -87,6 +90,8 @@ interface EditFormDrawerProps {
|
||||
// TODO: this is a good candidate for memoisation, but needs the paramFields to be stable
|
||||
export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const { data: viewSettings } = useViewSettings();
|
||||
|
||||
const { isOpen, onClose, onOpen } = useDisclosure();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -115,8 +120,6 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
|
||||
const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
|
||||
const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
|
||||
setSearchParams(newSearchParams);
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -129,6 +132,12 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
|
||||
</DrawerHeader>
|
||||
|
||||
<DrawerBody>
|
||||
{viewSettings.overrideStyles && (
|
||||
<div className={style.infoLabel}>
|
||||
<IoAlertCircle />
|
||||
This view style is being modified by a custom CSS file. <br />
|
||||
</div>
|
||||
)}
|
||||
<form id='edit-params-form' onSubmit={onParamsFormSubmit}>
|
||||
{viewOptions.map((option) => {
|
||||
if (isSection(option)) {
|
||||
|
||||
@@ -4,16 +4,23 @@ import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useClientStore } from '../stores/clientStore';
|
||||
import { socketSendJson } from '../utils/socket';
|
||||
|
||||
import { useIsOnline } from './useSocket';
|
||||
|
||||
export const useClientPath = () => {
|
||||
const navigate = useNavigate();
|
||||
const { pathname, search } = useLocation();
|
||||
const redirect = useClientStore((store) => store.redirect);
|
||||
const setRedirect = useClientStore((store) => store.setRedirect);
|
||||
const { redirect, setRedirect } = useClientStore((store) => ({
|
||||
redirect: store.redirect,
|
||||
setRedirect: store.setRedirect,
|
||||
}));
|
||||
const isOnline = useIsOnline();
|
||||
|
||||
// notify of client path changes
|
||||
useEffect(() => {
|
||||
if (!isOnline) return;
|
||||
|
||||
socketSendJson('set-client-path', pathname + search);
|
||||
}, [pathname, search]);
|
||||
}, [pathname, search, isOnline]);
|
||||
|
||||
// navigate to new path when received from server
|
||||
useEffect(() => {
|
||||
@@ -26,7 +33,7 @@ export const useClientPath = () => {
|
||||
|
||||
// navigate if there is a path change
|
||||
if (redirect !== pathname + search) {
|
||||
navigate(redirect);
|
||||
navigate(redirect, { replace: true });
|
||||
}
|
||||
}, [navigate, pathname, redirect, search, setRedirect]);
|
||||
};
|
||||
|
||||
@@ -238,3 +238,12 @@ export const usePing = () => {
|
||||
|
||||
return useRuntimeStore(featureSelector);
|
||||
};
|
||||
|
||||
/** convert ping into a derived value which changes less often */
|
||||
export const useIsOnline = () => {
|
||||
const featureSelector = (state: RuntimeStore) => ({
|
||||
isOnline: state.ping > 0,
|
||||
});
|
||||
|
||||
return useRuntimeStore(featureSelector);
|
||||
};
|
||||
|
||||
@@ -16,11 +16,17 @@ export const useRuntimeStore = <T>(selector: (state: RuntimeStore) => T) =>
|
||||
|
||||
/**
|
||||
* Allows patching a property of the runtime store
|
||||
* @param key
|
||||
* @param value
|
||||
*/
|
||||
export function patchRuntime<K extends keyof RuntimeStore>(key: K, value: RuntimeStore[K]): void {
|
||||
export function patchRuntimeProperty<K extends keyof RuntimeStore>(key: K, value: RuntimeStore[K]) {
|
||||
const state = runtimeStore.getState();
|
||||
state[key] = value;
|
||||
runtimeStore.setState({ ...state });
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows patching the entire runtime store
|
||||
*/
|
||||
export function patchRuntime(patch: Partial<RuntimeStore>) {
|
||||
const state = runtimeStore.getState();
|
||||
runtimeStore.setState({ ...state, ...patch });
|
||||
}
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
/**
|
||||
* Returns hostname
|
||||
* @type {string}
|
||||
*/
|
||||
export const host = window?.location?.host;
|
||||
|
||||
/**
|
||||
* Open an external URLs: specifically for a electron / browser case
|
||||
* If electron: ask main process to call a new browser window
|
||||
* If browser: open in new tab
|
||||
* @param url
|
||||
*/
|
||||
export function openLink(url) {
|
||||
if (window.process?.type === 'renderer') {
|
||||
window.ipcRenderer.send('send-to-link', url);
|
||||
} else {
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles opening external links
|
||||
* @param event
|
||||
* @param location
|
||||
*/
|
||||
export function handleLinks(event, location) {
|
||||
// we handle the link manually
|
||||
event.preventDefault();
|
||||
openLink(`http://${host}/${location}`);
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { MouseEvent } from 'react';
|
||||
|
||||
import { baseURI, serverURL } from '../../externals';
|
||||
|
||||
/**
|
||||
* Open an external URLs: specifically for a electron / browser case
|
||||
* If electron: ask main process to call a new browser window
|
||||
* If browser: open in new tab
|
||||
* @param url
|
||||
*/
|
||||
export function openLink(url: string) {
|
||||
if (window.process?.type === 'renderer') {
|
||||
window.ipcRenderer.send('send-to-link', url);
|
||||
} else {
|
||||
window.open(url);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles opening external links
|
||||
* @param event
|
||||
* @param location
|
||||
*/
|
||||
export function handleLinks(event: MouseEvent, location: string) {
|
||||
// we handle the link manually
|
||||
event.preventDefault();
|
||||
|
||||
const destination = new URL(serverURL);
|
||||
destination.pathname = baseURI ? `${baseURI}/${location}` : location;
|
||||
openLink(destination.toString());
|
||||
}
|
||||
|
||||
export function linkToOtherHost(host: string, path?: string) {
|
||||
const destination = new URL(serverURL);
|
||||
destination.hostname = host;
|
||||
if (path) {
|
||||
destination.pathname = baseURI ? `${baseURI}/${path}` : path;
|
||||
}
|
||||
return destination.toString();
|
||||
}
|
||||
@@ -14,7 +14,7 @@ import {
|
||||
} from '../stores/clientStore';
|
||||
import { addDialog } from '../stores/dialogStore';
|
||||
import { addLog } from '../stores/logger';
|
||||
import { patchRuntime, runtimeStore } from '../stores/runtime';
|
||||
import { patchRuntime, patchRuntimeProperty } from '../stores/runtime';
|
||||
|
||||
export let websocket: WebSocket | null = null;
|
||||
let reconnectTimeout: NodeJS.Timeout | null = null;
|
||||
@@ -39,12 +39,13 @@ export const connectSocket = () => {
|
||||
}
|
||||
|
||||
socketSendJson('set-client-type', 'ontime');
|
||||
|
||||
socketSendJson('set-client-path', location.pathname + location.search);
|
||||
setOnlineStatus(true);
|
||||
};
|
||||
|
||||
websocket.onclose = () => {
|
||||
console.warn('WebSocket disconnected');
|
||||
setOnlineStatus(false);
|
||||
|
||||
if (shouldReconnect) {
|
||||
reconnectTimeout = setTimeout(() => {
|
||||
console.warn('WebSocket: attempting reconnect');
|
||||
@@ -73,8 +74,8 @@ export const connectSocket = () => {
|
||||
switch (type) {
|
||||
case 'pong': {
|
||||
const offset = (new Date().getTime() - new Date(payload).getTime()) * 0.5;
|
||||
patchRuntime('ping', offset);
|
||||
updateDevTools({ ping: offset }, ['PING']);
|
||||
patchRuntimeProperty('ping', offset);
|
||||
updateDevTools({ ping: offset });
|
||||
break;
|
||||
}
|
||||
case 'client-id': {
|
||||
@@ -131,64 +132,65 @@ export const connectSocket = () => {
|
||||
break;
|
||||
}
|
||||
case 'ontime': {
|
||||
runtimeStore.setState(payload as RuntimeStore);
|
||||
if (!isProduction) {
|
||||
ontimeQueryClient.setQueryData(RUNTIME, data.payload);
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- removing the key from the payload
|
||||
const { ping, ...serverPayload } = payload as Partial<RuntimeStore>;
|
||||
|
||||
patchRuntime(serverPayload);
|
||||
updateDevTools(serverPayload);
|
||||
break;
|
||||
}
|
||||
case 'ontime-clock': {
|
||||
patchRuntime('clock', payload);
|
||||
patchRuntimeProperty('clock', payload);
|
||||
updateDevTools({ clock: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-timer': {
|
||||
patchRuntime('timer', payload);
|
||||
patchRuntimeProperty('timer', payload);
|
||||
updateDevTools({ timer: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-onAir': {
|
||||
patchRuntime('onAir', payload);
|
||||
patchRuntimeProperty('onAir', payload);
|
||||
updateDevTools({ onAir: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-message': {
|
||||
patchRuntime('message', payload);
|
||||
patchRuntimeProperty('message', payload);
|
||||
updateDevTools({ message: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-runtime': {
|
||||
patchRuntime('runtime', payload);
|
||||
patchRuntimeProperty('runtime', payload);
|
||||
updateDevTools({ runtime: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-eventNow': {
|
||||
patchRuntime('eventNow', payload);
|
||||
patchRuntimeProperty('eventNow', payload);
|
||||
updateDevTools({ eventNow: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-currentBlock': {
|
||||
patchRuntime('currentBlock', payload);
|
||||
patchRuntimeProperty('currentBlock', payload);
|
||||
updateDevTools({ currentBlock: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-publicEventNow': {
|
||||
patchRuntime('publicEventNow', payload);
|
||||
patchRuntimeProperty('publicEventNow', payload);
|
||||
updateDevTools({ publicEventNow: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-eventNext': {
|
||||
patchRuntime('eventNext', payload);
|
||||
patchRuntimeProperty('eventNext', payload);
|
||||
updateDevTools({ eventNext: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-publicEventNext': {
|
||||
patchRuntime('publicEventNext', payload);
|
||||
patchRuntimeProperty('publicEventNext', payload);
|
||||
updateDevTools({ publicEventNext: payload });
|
||||
break;
|
||||
}
|
||||
case 'ontime-auxtimer1': {
|
||||
patchRuntime('auxtimer1', payload);
|
||||
patchRuntimeProperty('auxtimer1', payload);
|
||||
updateDevTools({ auxtimer1: payload });
|
||||
break;
|
||||
}
|
||||
@@ -232,11 +234,23 @@ export const socketSendJson = (type: string, payload?: unknown) => {
|
||||
);
|
||||
};
|
||||
|
||||
function updateDevTools(newData: Partial<RuntimeStore>, store = RUNTIME) {
|
||||
function updateDevTools(newData: Partial<RuntimeStore>) {
|
||||
if (!isProduction) {
|
||||
ontimeQueryClient.setQueryData(store, (oldData: RuntimeStore) => ({
|
||||
ontimeQueryClient.setQueryData(RUNTIME, (oldData: RuntimeStore) => ({
|
||||
...oldData,
|
||||
...newData,
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Allows setting the status of the client
|
||||
* We leverage the ping as an indication of the client's online status
|
||||
* @example ping < 0 - client is offline
|
||||
* @example ping > 0 -> client is online
|
||||
*/
|
||||
function setOnlineStatus(status: boolean) {
|
||||
const derivedPing = status ? 1 : -1;
|
||||
patchRuntimeProperty('ping', derivedPing);
|
||||
updateDevTools({ ping: derivedPing });
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { version } from '../../../package.json';
|
||||
/**
|
||||
* This file contains a list of constants that may need to be resolved at runtime
|
||||
*/
|
||||
|
||||
import { version } from '../../../package.json';
|
||||
|
||||
export const githubUrl = 'https://www.github.com/cpvalente/ontime';
|
||||
export const apiRepoLatest = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
|
||||
export const websiteUrl = 'https://www.getontime.no';
|
||||
@@ -16,13 +17,59 @@ export const appVersion = version;
|
||||
export const isProduction = import.meta.env.MODE === 'production';
|
||||
export const isDev = !isProduction;
|
||||
export const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
|
||||
export const isOntimeCloud = Boolean(import.meta.env.VITE_IS_CLOUD);
|
||||
export const isDockerImage = Boolean(import.meta.env.VITE_IS_DOCKER);
|
||||
export const isOntimeCloud = window.location.hostname.includes('cloud.getontime.no');
|
||||
|
||||
// resolve protocol
|
||||
const socketProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
// resolve entrypoint URLs
|
||||
|
||||
// resolve port
|
||||
const STATIC_PORT = 4001;
|
||||
export const serverPort = isProduction ? window.location.port : STATIC_PORT;
|
||||
export const serverURL = `${window.location.protocol}//${location.hostname}:${serverPort}`;
|
||||
export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
|
||||
/**
|
||||
* Resolve base
|
||||
* @example '' for electron
|
||||
* @example '/client-hash' for cloud
|
||||
*/
|
||||
export const baseURI = resolveBaseURI();
|
||||
export const serverURL = resolveUrl('http', '');
|
||||
export const websocketUrl = resolveUrl('ws', 'ws');
|
||||
|
||||
function resolveUrl(protocol: 'http' | 'ws', path: string) {
|
||||
const url = new URL(window.location.origin);
|
||||
|
||||
// generate ws url
|
||||
if (protocol === 'ws') {
|
||||
// ensure we remain in a secure context
|
||||
const isSecure = window.location.protocol === 'https:';
|
||||
url.protocol = isSecure ? 'wss' : 'ws';
|
||||
}
|
||||
|
||||
// make path name relative to the base URI
|
||||
url.pathname = baseURI ? `${baseURI}/${path}` : path;
|
||||
|
||||
// in development mode, we use the React port for UI, but need the requests to target the server
|
||||
if (isDev) {
|
||||
// this is used as a fallback port for development
|
||||
url.port = '4001';
|
||||
}
|
||||
|
||||
const result = url.toString();
|
||||
|
||||
// prevent trailing slash
|
||||
return result.endsWith('/') ? result.slice(0, -1) : result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves a base URI for a client that is not at the root segment
|
||||
* ie: https://cloud.getontime.com/client-hash/timer
|
||||
* This is necessary for ontime cloud and should otherwise not affect the client
|
||||
*/
|
||||
function resolveBaseURI(): string {
|
||||
// in ontime cloud, the base tag is set by the server
|
||||
const baseHref = document.querySelector('base')?.getAttribute('href');
|
||||
const base = baseHref ?? '';
|
||||
|
||||
// prevent a trailing slash from either an empty base or a base with a trailing slash
|
||||
if (base.endsWith('/')) {
|
||||
return base.slice(0, -1);
|
||||
}
|
||||
|
||||
return base;
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@ import { maybeAxiosError } from '../../../../common/api/utils';
|
||||
import useOscSettings, { useOscSettingsMutation } from '../../../../common/hooks-query/useOscSettings';
|
||||
import { isKeyEscape } from '../../../../common/utils/keyEvent';
|
||||
import { isASCII, isASCIIorEmpty, isIPAddress, isOnlyNumbers, startsWithSlash } from '../../../../common/utils/regex';
|
||||
import { isOntimeCloud } from '../../../../externals';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
|
||||
import { cycles } from './integrationUtils';
|
||||
@@ -106,6 +107,9 @@ export default function OscIntegrations() {
|
||||
</Button>
|
||||
</div>
|
||||
</Panel.SubHeader>
|
||||
{isOntimeCloud && (
|
||||
<Panel.Highlight>For security reasons OSC integrations are not available in the cloud service.</Panel.Highlight>
|
||||
)}
|
||||
|
||||
<Panel.Divider />
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@ import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
|
||||
|
||||
import CopyTag from '../../../../common/components/copy-tag/CopyTag';
|
||||
import useInfo from '../../../../common/hooks-query/useInfo';
|
||||
import { openLink } from '../../../../common/utils/linkUtils';
|
||||
import { isLocalhost, serverPort } from '../../../../externals';
|
||||
import { linkToOtherHost, openLink } from '../../../../common/utils/linkUtils';
|
||||
import { isLocalhost } from '../../../../externals';
|
||||
|
||||
import style from './NetworkInterfaces.module.scss';
|
||||
|
||||
@@ -14,11 +14,11 @@ export default function InfoNif() {
|
||||
|
||||
return (
|
||||
<div className={style.interfaces}>
|
||||
{data.networkInterfaces?.map((nif) => {
|
||||
{data.networkInterfaces.map((nif) => {
|
||||
// interfaces outside localhost wont have access
|
||||
if (nif.name === 'localhost' && !isLocalhost) return null;
|
||||
const address = linkToOtherHost(nif.address);
|
||||
|
||||
const address = `http://${nif.address}:${serverPort}`;
|
||||
return (
|
||||
<CopyTag
|
||||
key={nif.name}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useEffect } from 'react';
|
||||
import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
|
||||
import { usePing } from '../../../../common/hooks/useSocket';
|
||||
import { socketSendJson } from '../../../../common/utils/socket';
|
||||
import { isOntimeCloud } from '../../../../externals';
|
||||
import { isDockerImage } from '../../../../externals';
|
||||
import type { PanelBaseProps } from '../../panel-list/PanelList';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
import ClientControlPanel from '../client-control-panel/ClientControlPanel';
|
||||
@@ -19,7 +19,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
|
||||
<>
|
||||
<Panel.Header>Network</Panel.Header>
|
||||
<Panel.Section>
|
||||
{isOntimeCloud && <OntimeCloudStats />}
|
||||
{isDockerImage && <OntimeCloudStats />}
|
||||
<Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
|
||||
</Panel.Section>
|
||||
<InfoNif />
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useQueryClient } from '@tanstack/react-query';
|
||||
import { PROJECT_LIST } from '../../../../common/api/constants';
|
||||
import { createProject } from '../../../../common/api/db';
|
||||
import { maybeAxiosError } from '../../../../common/api/utils';
|
||||
import { documentationUrl, websiteUrl } from '../../../../externals';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
|
||||
import style from './ProjectPanel.module.scss';
|
||||
@@ -118,7 +119,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
|
||||
<Input
|
||||
variant='ontime-filled'
|
||||
size='sm'
|
||||
placeholder='www.getontime.no'
|
||||
placeholder={websiteUrl}
|
||||
autoComplete='off'
|
||||
{...register('publicUrl')}
|
||||
/>
|
||||
@@ -140,7 +141,7 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
|
||||
<Input
|
||||
variant='ontime-filled'
|
||||
size='sm'
|
||||
placeholder='http://docs.getontime.no'
|
||||
placeholder={documentationUrl}
|
||||
autoComplete='off'
|
||||
{...register('backstageUrl')}
|
||||
/>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { postProjectData, uploadProjectLogo } from '../../../../common/api/proje
|
||||
import { maybeAxiosError } from '../../../../common/api/utils';
|
||||
import useProjectData from '../../../../common/hooks-query/useProjectData';
|
||||
import { validateLogo } from '../../../../common/utils/uploadUtils';
|
||||
import { documentationUrl, websiteUrl } from '../../../../externals';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
|
||||
import style from './ProjectPanel.module.scss';
|
||||
@@ -203,7 +204,7 @@ export default function ProjectData() {
|
||||
<Input
|
||||
variant='ontime-filled'
|
||||
size='sm'
|
||||
placeholder='www.getontime.no'
|
||||
placeholder={websiteUrl}
|
||||
autoComplete='off'
|
||||
{...register('publicUrl')}
|
||||
/>
|
||||
@@ -225,7 +226,7 @@ export default function ProjectData() {
|
||||
<Input
|
||||
variant='ontime-filled'
|
||||
size='sm'
|
||||
placeholder='http://docs.getontime.no'
|
||||
placeholder={documentationUrl}
|
||||
autoComplete='off'
|
||||
{...register('backstageUrl')}
|
||||
/>
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { useElectronEvent } from '../../../../common/hooks/useElectronEvent';
|
||||
import { isLocalhost } from '../../../../externals';
|
||||
import { isLocalhost, isOntimeCloud } from '../../../../externals';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
|
||||
export default function ShutdownPanel() {
|
||||
@@ -24,18 +24,28 @@ export default function ShutdownPanel() {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const canShutdown = isElectron || isLocalhost;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Panel.Header>Shutdown Ontime</Panel.Header>
|
||||
<Panel.Section>
|
||||
<Panel.Paragraph>
|
||||
This will shutdown the Ontime server. <br />
|
||||
The runtime state will be lost, but your project is kept for next time.
|
||||
</Panel.Paragraph>
|
||||
{isOntimeCloud ? (
|
||||
<Panel.Highlight>
|
||||
For security reasons, shutting down the server must be done from the Ontime Cloud dashboard.
|
||||
</Panel.Highlight>
|
||||
) : (
|
||||
<Panel.Paragraph>
|
||||
This will shutdown the Ontime server. <br />
|
||||
The runtime state will be lost, but your project is kept for next time.
|
||||
</Panel.Paragraph>
|
||||
)}
|
||||
<Button colorScheme='red' onClick={onOpen} maxWidth='350px' isDisabled={!(isElectron || isLocalhost)}>
|
||||
Shutdown ontime
|
||||
</Button>
|
||||
<Panel.Description>Note: Ontime can only be shutdown from the machine it is running in.</Panel.Description>
|
||||
{!canShutdown && (
|
||||
<Panel.Description>Note: Ontime can only be shutdown from the machine it is running in.</Panel.Description>
|
||||
)}
|
||||
<AlertDialog variant='ontime' isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
|
||||
<AlertDialogOverlay>
|
||||
<AlertDialogContent>
|
||||
@@ -49,7 +59,7 @@ export default function ShutdownPanel() {
|
||||
<Button ref={cancelRef} onClick={onClose} variant='ontime-ghosted-white'>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button colorScheme='red' onClick={sendShutdown} ml={4}>
|
||||
<Button colorScheme='red' onClick={sendShutdown} disabled={!canShutdown}>
|
||||
Shutdown
|
||||
</Button>
|
||||
</AlertDialogFooter>
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import { PropsWithChildren } from 'react';
|
||||
import { Tooltip } from '@chakra-ui/react';
|
||||
import { Playback, TimerPhase } from 'ontime-types';
|
||||
import { dayInMs, millisToMinutes, millisToSeconds, millisToString } from 'ontime-utils';
|
||||
import { dayInMs, millisToString } from 'ontime-utils';
|
||||
|
||||
import { useTimer } from '../../../../common/hooks/useSocket';
|
||||
import { formatDuration } from '../../../../common/utils/time';
|
||||
import TimerDisplay from '../timer-display/TimerDisplay';
|
||||
|
||||
import style from './PlaybackTimer.module.scss';
|
||||
@@ -13,22 +14,12 @@ interface PlaybackTimerProps {
|
||||
}
|
||||
|
||||
function resolveAddedTimeLabel(addedTime: number) {
|
||||
function resolveClosestUnit(ms: number) {
|
||||
if (ms < 6000) {
|
||||
return `${millisToSeconds(ms)} seconds`;
|
||||
} else if (ms < 12000) {
|
||||
return '1 minute';
|
||||
} else {
|
||||
return `${millisToMinutes(ms)} minutes`;
|
||||
}
|
||||
}
|
||||
|
||||
if (addedTime > 0) {
|
||||
return `Added ${resolveClosestUnit(addedTime)}`;
|
||||
return `Added ${formatDuration(addedTime, false)}`;
|
||||
}
|
||||
|
||||
if (addedTime < 0) {
|
||||
return `Removed ${resolveClosestUnit(addedTime)}`;
|
||||
return `Removed ${formatDuration(Math.abs(addedTime), false)}`;
|
||||
}
|
||||
|
||||
return '';
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`makeTable() > returns array of arrays with given fields 1`] = `
|
||||
[
|
||||
[
|
||||
"Ontime · Rundown export",
|
||||
],
|
||||
[
|
||||
"Project title: test title",
|
||||
],
|
||||
[
|
||||
"Project description: test description",
|
||||
],
|
||||
[
|
||||
"Time Start",
|
||||
"Time End",
|
||||
"Duration",
|
||||
"ID",
|
||||
"Colour",
|
||||
"Cue",
|
||||
"Title",
|
||||
"Note",
|
||||
"Is Public? (x)",
|
||||
"Skip?",
|
||||
"lighting",
|
||||
],
|
||||
[
|
||||
"00:00:00",
|
||||
"00:00:00",
|
||||
"...",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"test title 1",
|
||||
"",
|
||||
"x",
|
||||
"",
|
||||
"",
|
||||
],
|
||||
]
|
||||
`;
|
||||
@@ -1,3 +0,0 @@
|
||||
.progressOverride {
|
||||
height: 1rem;
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import { ChangeEvent, memo, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { getHotkeyHandler } from '@mantine/hooks';
|
||||
|
||||
import { AutoTextArea } from '../../../common/components/input/auto-text-area/AutoTextArea';
|
||||
|
||||
interface EditableCellProps {
|
||||
value: string;
|
||||
handleUpdate: (newValue: string) => void;
|
||||
}
|
||||
|
||||
const EditableCell = (props: EditableCellProps) => {
|
||||
const { value: initialValue, handleUpdate } = props;
|
||||
|
||||
// We need to keep and update the state of the cell normally
|
||||
const [value, setValue] = useState(initialValue);
|
||||
const ref = useRef<HTMLAreaElement>();
|
||||
const onChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>) => setValue(event.target.value), []);
|
||||
|
||||
// We'll only update the external data when the input is blurred
|
||||
const onBlur = useCallback(() => handleUpdate(value), [handleUpdate, value]);
|
||||
|
||||
//TODO: maybe we can unify this with `useReactiveTextInput`
|
||||
const onKeyDown = getHotkeyHandler([
|
||||
['mod + Enter', () => ref.current?.blur()],
|
||||
[
|
||||
'Escape',
|
||||
() => {
|
||||
setValue(initialValue);
|
||||
setTimeout(() => ref.current?.blur());
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
// If the initialValue is changed external, sync it up with our state
|
||||
useEffect(() => {
|
||||
setValue(initialValue);
|
||||
}, [initialValue]);
|
||||
|
||||
return (
|
||||
<AutoTextArea
|
||||
size='sm'
|
||||
value={value}
|
||||
inputref={ref}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
rows={1}
|
||||
onKeyDown={onKeyDown}
|
||||
transition='none'
|
||||
spellCheck={false}
|
||||
style={{ padding: 0 }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(EditableCell);
|
||||
-120
@@ -1,120 +0,0 @@
|
||||
$label-colour: $gray-700;
|
||||
$active-colour: $gray-500;
|
||||
|
||||
@mixin label {
|
||||
font-size: $inner-section-text-size;
|
||||
color: $label-colour;
|
||||
text-align: center;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
@mixin time {
|
||||
font-family: 'Open Sans Light', $ontime-font-family;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
padding: 0.25rem 1rem;
|
||||
height: max-content;
|
||||
column-gap: 2rem;
|
||||
|
||||
grid-template-areas: 'event playback timer clock actions';
|
||||
grid-template-columns: 1fr auto auto auto auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.event {
|
||||
grid-area: event;
|
||||
justify-self: start;
|
||||
|
||||
.title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.eventNow {
|
||||
justify-self: start;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.playback {
|
||||
grid-area: playback;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
|
||||
.playbackLabel {
|
||||
@include label;
|
||||
}
|
||||
|
||||
svg {
|
||||
font-size: 2rem;
|
||||
height: 3rem;
|
||||
color: $label-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.timer {
|
||||
grid-area: timer;
|
||||
|
||||
.timerLabel {
|
||||
@include label;
|
||||
}
|
||||
|
||||
.value {
|
||||
@include time;
|
||||
}
|
||||
}
|
||||
|
||||
.clock {
|
||||
grid-area: clock;
|
||||
|
||||
.clockLabel {
|
||||
@include label;
|
||||
}
|
||||
|
||||
.value {
|
||||
grid-area: clock;
|
||||
@include time;
|
||||
}
|
||||
}
|
||||
|
||||
.headerActions {
|
||||
grid-area: actions;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: $label-colour;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
|
||||
.actionIcon,
|
||||
.actionText {
|
||||
cursor: pointer;
|
||||
|
||||
&.enabled {
|
||||
color: $active-indicator;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $active-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.actionIcon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
// in large screens we want to space the buttons
|
||||
.headerActions {
|
||||
padding-left: 10vw;
|
||||
}
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import { Tooltip } from '@chakra-ui/react';
|
||||
import { IoLocate } from '@react-icons/all-files/io5/IoLocate';
|
||||
import { Playback, ProjectData } from 'ontime-types';
|
||||
|
||||
import PlaybackIcon from '../../../common/components/playback-icon/PlaybackIcon';
|
||||
import useProjectData from '../../../common/hooks-query/useProjectData';
|
||||
import { cx, enDash } from '../../../common/utils/styleUtils';
|
||||
import { tooltipDelayFast } from '../../../ontimeConfig';
|
||||
import { useCuesheetSettings } from '../store/CuesheetSettings';
|
||||
|
||||
import CuesheetTableHeaderTimers from './CuesheetTableHeaderTimers';
|
||||
|
||||
import style from './CuesheetTableHeader.module.scss';
|
||||
|
||||
interface CuesheetTableHeaderProps {
|
||||
handleExport: (headerData: ProjectData) => void;
|
||||
featureData: {
|
||||
playback: Playback;
|
||||
selectedEventIndex: number | null;
|
||||
numEvents: number;
|
||||
titleNow: string | null;
|
||||
};
|
||||
}
|
||||
|
||||
export default function CuesheetTableHeader({ handleExport, featureData }: CuesheetTableHeaderProps) {
|
||||
const followSelected = useCuesheetSettings((state) => state.followSelected);
|
||||
const toggleFollow = useCuesheetSettings((state) => state.toggleFollow);
|
||||
const { data: project } = useProjectData();
|
||||
|
||||
const exportProject = () => {
|
||||
if (project) {
|
||||
handleExport(project);
|
||||
}
|
||||
};
|
||||
|
||||
const selected = !featureData.numEvents
|
||||
? 'No events'
|
||||
: `Event ${featureData.selectedEventIndex != null ? featureData.selectedEventIndex + 1 : enDash}/${
|
||||
featureData.numEvents ? featureData.numEvents : enDash
|
||||
}`;
|
||||
|
||||
return (
|
||||
<div className={style.header}>
|
||||
<div className={style.event}>
|
||||
<div className={style.title}>{project?.title || enDash}</div>
|
||||
<div className={style.eventNow}>{featureData?.titleNow || enDash}</div>
|
||||
</div>
|
||||
<div className={style.playback}>
|
||||
<div className={style.playbackLabel}>{selected}</div>
|
||||
<PlaybackIcon state={featureData.playback} />
|
||||
</div>
|
||||
<CuesheetTableHeaderTimers />
|
||||
<div className={style.headerActions}>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Toggle follow'>
|
||||
<span
|
||||
onClick={() => toggleFollow()}
|
||||
className={cx([style.actionIcon, followSelected ? style.enabled : null])}
|
||||
>
|
||||
<IoLocate />
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Tooltip openDelay={tooltipDelayFast} label='Export rundown'>
|
||||
<span className={style.actionText} onClick={exportProject}>
|
||||
Export CSV
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import { useClock, useTimer } from '../../../common/hooks/useSocket';
|
||||
import ClockTime from '../../viewers/common/clock-time/ClockTime';
|
||||
import RunningTime from '../../viewers/common/running-time/RunningTime';
|
||||
|
||||
import style from './CuesheetTableHeader.module.scss';
|
||||
|
||||
export default function CuesheetTableHeaderTimers() {
|
||||
const { current } = useTimer();
|
||||
const { clock } = useClock();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={style.timer}>
|
||||
<div className={style.timerLabel}>Running Timer</div>
|
||||
<RunningTime className={style.value} value={current} hideLeadingZero />
|
||||
</div>
|
||||
<div className={style.clock}>
|
||||
<div className={style.clockLabel}>Time Now</div>
|
||||
<ClockTime className={style.value} value={clock} />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
import { memo, ReactNode } from 'react';
|
||||
import { Button, Checkbox, Switch } from '@chakra-ui/react';
|
||||
import { Column } from '@tanstack/react-table';
|
||||
import { OntimeRundownEntry } from 'ontime-types';
|
||||
|
||||
import { useCuesheetSettings } from '../store/CuesheetSettings';
|
||||
|
||||
import style from './CuesheetTableSettings.module.scss';
|
||||
|
||||
// reusable button styles
|
||||
const buttonProps = {
|
||||
size: 'sm',
|
||||
variant: 'ontime-subtle',
|
||||
};
|
||||
|
||||
interface CuesheetTableSettingsProps {
|
||||
columns: Column<OntimeRundownEntry, unknown>[];
|
||||
handleResetResizing: () => void;
|
||||
handleResetReordering: () => void;
|
||||
handleClearToggles: () => void;
|
||||
}
|
||||
|
||||
function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
|
||||
const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
|
||||
const {
|
||||
followSelected,
|
||||
showIndexColumn,
|
||||
toggleFollow,
|
||||
showPrevious,
|
||||
togglePreviousVisibility,
|
||||
showDelayBlock,
|
||||
hideSeconds,
|
||||
showDelayedTimes,
|
||||
toggleIndexColumn,
|
||||
toggleDelayedTimes,
|
||||
toggleDelayVisibility,
|
||||
toggleSecondsVisibility,
|
||||
} = useCuesheetSettings();
|
||||
|
||||
return (
|
||||
<div className={style.tableSettings}>
|
||||
<div className={style.leftPanel}>
|
||||
<div className={style.sectionTitle}>Toggle column visibility</div>
|
||||
<div className={style.options}>
|
||||
{columns.map((column) => {
|
||||
const columnHeader = column.columnDef.header;
|
||||
const visible = column.getIsVisible();
|
||||
return (
|
||||
<label key={`${column.id}-${visible}`} className={style.option}>
|
||||
<Checkbox
|
||||
variant='ontime-ondark'
|
||||
defaultChecked={visible}
|
||||
onChange={column.getToggleVisibilityHandler()}
|
||||
/>
|
||||
{columnHeader as ReactNode}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className={style.sectionTitle}>Table Options</div>
|
||||
<div className={style.options}>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={followSelected} onChange={() => toggleFollow()} />
|
||||
Follow selected event
|
||||
</label>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={showPrevious} onChange={() => togglePreviousVisibility()} />
|
||||
Show past events
|
||||
</label>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={showIndexColumn} onChange={() => toggleIndexColumn()} />
|
||||
Show Event Order
|
||||
</label>
|
||||
</div>
|
||||
<div className={style.sectionTitle}>Delay Flow</div>
|
||||
<div className={style.options}>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={showDelayedTimes} onChange={() => toggleDelayedTimes()} />
|
||||
Show delayed times
|
||||
</label>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={showDelayBlock} onChange={() => toggleDelayVisibility()} />
|
||||
Show delay blocks
|
||||
</label>
|
||||
<label className={style.option}>
|
||||
<Switch variant='ontime' size='sm' isChecked={hideSeconds} onChange={() => toggleSecondsVisibility()} />
|
||||
Hide seconds
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.rightPanel}>
|
||||
<Button onClick={handleClearToggles} {...buttonProps}>
|
||||
Show All
|
||||
</Button>
|
||||
<Button onClick={handleResetResizing} {...buttonProps}>
|
||||
Reset Resizing
|
||||
</Button>
|
||||
<Button onClick={handleResetReordering} {...buttonProps}>
|
||||
Reset Reordering
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(CuesheetTableSettings);
|
||||
@@ -1,126 +0,0 @@
|
||||
import { useCallback } from 'react';
|
||||
import { IoCheckmark } from '@react-icons/all-files/io5/IoCheckmark';
|
||||
import { CellContext, ColumnDef } from '@tanstack/react-table';
|
||||
import { CustomFields, isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';
|
||||
|
||||
import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';
|
||||
import RunningTime from '../viewers/common/running-time/RunningTime';
|
||||
|
||||
import EditableCell from './cuesheet-table-elements/EditableCell';
|
||||
import { useCuesheetSettings } from './store/CuesheetSettings';
|
||||
|
||||
import style from './Cuesheet.module.scss';
|
||||
|
||||
function makePublic(row: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const cellValue = row.getValue();
|
||||
return cellValue ? <IoCheckmark className={style.check} /> : '';
|
||||
}
|
||||
|
||||
function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const showDelayedTimes = useCuesheetSettings((state) => state.showDelayedTimes);
|
||||
const hideSeconds = useCuesheetSettings((state) => state.hideSeconds);
|
||||
const cellValue = (getValue() as number | null) ?? 0;
|
||||
const delayValue = (original as OntimeEvent)?.delay ?? 0;
|
||||
|
||||
return (
|
||||
<span className={style.time}>
|
||||
<DelayIndicator delayValue={delayValue} />
|
||||
<RunningTime value={cellValue} hideSeconds={hideSeconds} />
|
||||
{delayValue !== 0 && showDelayedTimes && (
|
||||
<RunningTime className={style.delayedTime} value={cellValue + delayValue} hideSeconds={hideSeconds} />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function MakeDuration({ getValue }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const hideSeconds = useCuesheetSettings((state) => state.hideSeconds);
|
||||
const cellValue = (getValue() as number | null) ?? 0;
|
||||
|
||||
return <RunningTime value={cellValue} hideSeconds={hideSeconds} />;
|
||||
}
|
||||
|
||||
function MakeCustomField({ row, column, table }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
// @ts-expect-error -- we inject this into react-table
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- we skip table.options.meta since the reference seems unstable
|
||||
[column.id, row.index],
|
||||
);
|
||||
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// events dont necessarily contain all custom fields
|
||||
const initialValue = event.custom[column.id] ?? '';
|
||||
|
||||
return <EditableCell value={initialValue} handleUpdate={update} />;
|
||||
}
|
||||
|
||||
export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<OntimeRundownEntry>[] {
|
||||
const dynamicCustomFields = Object.keys(customFields).map((key) => ({
|
||||
accessorKey: key,
|
||||
id: key,
|
||||
header: customFields[key].label,
|
||||
meta: { colour: customFields[key].colour },
|
||||
cell: MakeCustomField,
|
||||
size: 250,
|
||||
}));
|
||||
|
||||
return [
|
||||
{
|
||||
accessorKey: 'cue',
|
||||
id: 'cue',
|
||||
header: 'Cue',
|
||||
cell: (row) => row.getValue(),
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'isPublic',
|
||||
id: 'isPublic',
|
||||
header: 'Public',
|
||||
cell: makePublic,
|
||||
size: 45,
|
||||
},
|
||||
{
|
||||
accessorKey: 'timeStart',
|
||||
id: 'timeStart',
|
||||
header: 'Start',
|
||||
cell: MakeTimer,
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'timeEnd',
|
||||
id: 'timeEnd',
|
||||
header: 'End',
|
||||
cell: MakeTimer,
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'duration',
|
||||
id: 'duration',
|
||||
header: 'Duration',
|
||||
cell: MakeDuration,
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'title',
|
||||
id: 'title',
|
||||
header: 'Title',
|
||||
cell: (row) => row.getValue(),
|
||||
size: 250,
|
||||
},
|
||||
{
|
||||
accessorKey: 'note',
|
||||
id: 'note',
|
||||
header: 'Note',
|
||||
cell: (row) => row.getValue(),
|
||||
size: 250,
|
||||
},
|
||||
...dynamicCustomFields,
|
||||
];
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import { OntimeEntryCommonKeys, OntimeEvent } from 'ontime-types';
|
||||
|
||||
/**
|
||||
* @description set default column order
|
||||
*/
|
||||
export const defaultColumnOrder: OntimeEntryCommonKeys[] = [
|
||||
'isPublic',
|
||||
'cue',
|
||||
'timeStart',
|
||||
'timeEnd',
|
||||
'duration',
|
||||
'title',
|
||||
'note',
|
||||
];
|
||||
|
||||
/**
|
||||
* @description set default hidden columns
|
||||
*/
|
||||
export const defaultHiddenColumns: (keyof OntimeEvent)[] = [];
|
||||
@@ -1,85 +0,0 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
import { booleanFromLocalStorage } from '../../../common/utils/localStorage';
|
||||
|
||||
interface CuesheetSettings {
|
||||
showSettings: boolean;
|
||||
showIndexColumn: boolean;
|
||||
followSelected: boolean;
|
||||
showPrevious: boolean;
|
||||
showDelayBlock: boolean;
|
||||
showDelayedTimes: boolean;
|
||||
hideSeconds: boolean;
|
||||
|
||||
toggleSettings: (newValue?: boolean) => void;
|
||||
toggleFollow: (newValue?: boolean) => void;
|
||||
togglePreviousVisibility: (newValue?: boolean) => void;
|
||||
toggleIndexColumn: (newValue?: boolean) => void;
|
||||
toggleDelayVisibility: (newValue?: boolean) => void;
|
||||
toggleDelayedTimes: (newValue?: boolean) => void;
|
||||
toggleSecondsVisibility: (newValue?: boolean) => void;
|
||||
}
|
||||
|
||||
function toggle(oldValue: boolean, value?: boolean) {
|
||||
if (typeof value === 'undefined') {
|
||||
return !oldValue;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
enum CuesheetKeys {
|
||||
Follow = 'ontime-cuesheet-follow-selected',
|
||||
DelayVisibility = 'ontime-cuesheet-show-delay',
|
||||
PreviousVisibility = 'ontime-cuesheet-show-previous',
|
||||
ColumnIndex = 'ontime-cuesheet-show-index-column',
|
||||
DelayedTimes = 'ontime-cuesheet-show-delayed',
|
||||
Seconds = 'ontime-cuesheet-hide-sceconds',
|
||||
}
|
||||
|
||||
export const useCuesheetSettings = create<CuesheetSettings>()((set) => ({
|
||||
showSettings: false,
|
||||
showIndexColumn: booleanFromLocalStorage(CuesheetKeys.ColumnIndex, true),
|
||||
followSelected: booleanFromLocalStorage(CuesheetKeys.Follow, false),
|
||||
showPrevious: booleanFromLocalStorage(CuesheetKeys.PreviousVisibility, true),
|
||||
showDelayBlock: booleanFromLocalStorage(CuesheetKeys.DelayVisibility, true),
|
||||
showDelayedTimes: booleanFromLocalStorage(CuesheetKeys.DelayedTimes, false),
|
||||
hideSeconds: booleanFromLocalStorage(CuesheetKeys.Seconds, false),
|
||||
|
||||
toggleSettings: (newValue?: boolean) => set((state) => ({ showSettings: toggle(state.showSettings, newValue) })),
|
||||
toggleFollow: (newValue?: boolean) =>
|
||||
set((state) => {
|
||||
const followSelected = toggle(state.followSelected, newValue);
|
||||
localStorage.setItem(CuesheetKeys.Follow, String(followSelected));
|
||||
return { followSelected };
|
||||
}),
|
||||
toggleIndexColumn: (newValue?: boolean) =>
|
||||
set((state) => {
|
||||
const showIndexColumn = toggle(state.showIndexColumn, newValue);
|
||||
localStorage.setItem(CuesheetKeys.ColumnIndex, String(showIndexColumn));
|
||||
return { showIndexColumn };
|
||||
}),
|
||||
togglePreviousVisibility: (newValue?: boolean) =>
|
||||
set((state) => {
|
||||
const showPrevious = toggle(state.showPrevious, newValue);
|
||||
localStorage.setItem(CuesheetKeys.PreviousVisibility, String(showPrevious));
|
||||
return { showPrevious };
|
||||
}),
|
||||
toggleDelayVisibility: (newValue?: boolean) =>
|
||||
set((state) => {
|
||||
const showDelayBlock = toggle(state.showDelayBlock, newValue);
|
||||
localStorage.setItem(CuesheetKeys.DelayVisibility, String(showDelayBlock));
|
||||
return { showDelayBlock };
|
||||
}),
|
||||
toggleDelayedTimes: (newValue?: boolean) =>
|
||||
set((state) => {
|
||||
const showDelayedTimes = toggle(state.showDelayedTimes, newValue);
|
||||
localStorage.setItem(CuesheetKeys.DelayedTimes, String(showDelayedTimes));
|
||||
return { showDelayedTimes };
|
||||
}),
|
||||
toggleSecondsVisibility: (newValue?: boolean) =>
|
||||
set((state) => {
|
||||
const hideSeconds = toggle(state.hideSeconds, newValue);
|
||||
localStorage.setItem(CuesheetKeys.Seconds, String(hideSeconds));
|
||||
return { hideSeconds };
|
||||
}),
|
||||
}));
|
||||
@@ -1,7 +1,7 @@
|
||||
import { KeyboardEvent, useState } from 'react';
|
||||
import { Input, Modal, ModalBody, ModalContent, ModalFooter, ModalOverlay } from '@chakra-ui/react';
|
||||
import { useDebouncedCallback } from '@mantine/hooks';
|
||||
import { isOntimeEvent, SupportedEvent } from 'ontime-types';
|
||||
import { SupportedEvent } from 'ontime-types';
|
||||
|
||||
import { useEventSelection } from '../../rundown/useEventSelection';
|
||||
|
||||
@@ -65,14 +65,15 @@ export default function Finder(props: FinderProps) {
|
||||
{error && <li className={style.error}>{error}</li>}
|
||||
{results.length === 0 && <li className={style.empty}>No results</li>}
|
||||
{results.length > 0 &&
|
||||
results.map((event, index) => {
|
||||
results.map((entry, index) => {
|
||||
const isSelected = selected === index;
|
||||
const displayIndex = event.type === SupportedEvent.Block ? '-' : event.index;
|
||||
const colour = event.type === SupportedEvent.Event ? event.colour : '';
|
||||
const displayIndex = entry.type === SupportedEvent.Event ? entry.eventIndex : '-';
|
||||
const displayCue = entry.type === SupportedEvent.Event ? entry.cue : '';
|
||||
const colour = entry.type === SupportedEvent.Event ? entry.colour : '';
|
||||
|
||||
return (
|
||||
<li
|
||||
key={event.id}
|
||||
key={entry.id}
|
||||
className={style.entry}
|
||||
data-selected={isSelected}
|
||||
data-index={index}
|
||||
@@ -82,8 +83,8 @@ export default function Finder(props: FinderProps) {
|
||||
<div className={style.index} style={{ '--color': colour }}>
|
||||
{displayIndex}
|
||||
</div>
|
||||
{isOntimeEvent(event) && <div className={style.cue}>{event.cue}</div>}
|
||||
<div className={style.title}>{event.title}</div>
|
||||
<div className={style.cue}>{displayCue}</div>
|
||||
<div className={style.title}>{entry.title}</div>
|
||||
</div>
|
||||
{isSelected && <span>Go ⏎</span>}
|
||||
</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ChangeEvent, useState } from 'react';
|
||||
import { ChangeEvent, useEffect, useRef, useState } from 'react';
|
||||
import { isOntimeBlock, isOntimeEvent, MaybeString, SupportedEvent } from 'ontime-types';
|
||||
|
||||
import { useFlatRundown } from '../../../common/hooks-query/useRundown';
|
||||
@@ -28,6 +28,17 @@ export default function useFinder() {
|
||||
const { data } = useFlatRundown();
|
||||
const [results, setResults] = useState<FilterableEntry[]>([]);
|
||||
const [error, setError] = useState<MaybeString>(null);
|
||||
const lastSearchString = useRef('');
|
||||
|
||||
/** clear results when source data changes */
|
||||
useEffect(() => {
|
||||
setResults([]);
|
||||
setError(null);
|
||||
// fake a submit event to re-run the search
|
||||
if (lastSearchString.current) {
|
||||
find({ target: { value: lastSearchString.current } } as ChangeEvent<HTMLInputElement>);
|
||||
}
|
||||
}, [data]);
|
||||
|
||||
/** Returns a single item with a matching index */
|
||||
const searchByIndex = (searchString: string) => {
|
||||
@@ -155,6 +166,7 @@ export default function useFinder() {
|
||||
}
|
||||
|
||||
const searchValue = event.target.value.toLowerCase();
|
||||
lastSearchString.current = searchValue;
|
||||
|
||||
if (searchValue.startsWith('index ')) {
|
||||
const searchString = searchValue.replace('index ', '').trim();
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
height: 350px;
|
||||
max-height: 350px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function Welcome(props: WelcomeProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen onClose={handleClose} variant='ontime'>
|
||||
<Modal isOpen onClose={handleClose} closeOnOverlayClick={false} variant='ontime'>
|
||||
<ModalOverlay />
|
||||
<ModalContent maxWidth='max(640px, 40vw)'>
|
||||
<ModalCloseButton />
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
|
||||
import { isOntimeEvent, OntimeEvent, SupportedEvent } from 'ontime-types';
|
||||
import { getFirstEventNormal, getLastEventNormal } from 'ontime-utils';
|
||||
|
||||
import Empty from '../../common/components/state/Empty';
|
||||
import EmptyPage from '../../common/components/state/EmptyPage';
|
||||
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
|
||||
import useFollowComponent from '../../common/hooks/useFollowComponent';
|
||||
import { useOperator } from '../../common/hooks/useSocket';
|
||||
@@ -108,7 +108,7 @@ export default function Operator() {
|
||||
const isLoading = status === 'pending' || customFieldStatus === 'pending' || projectDataStatus === 'pending';
|
||||
|
||||
if (missingData || isLoading) {
|
||||
return <Empty text='Loading...' />;
|
||||
return <EmptyPage text='Loading...' />;
|
||||
}
|
||||
|
||||
// get fields which the user subscribed to
|
||||
|
||||
@@ -87,6 +87,10 @@ function _CuesheetOverview({ children }: { children: React.ReactNode }) {
|
||||
function TitlesOverview() {
|
||||
const { data } = useProjectData();
|
||||
|
||||
if (!data.title && !data.description) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={style.title}>{data.title}</div>
|
||||
|
||||
@@ -256,10 +256,12 @@ export default function Rundown({ data }: RundownProps) {
|
||||
return <RundownEmpty handleAddNew={() => insertAtId(SupportedEvent.Event, cursor)} />;
|
||||
}
|
||||
|
||||
let lastEntry: PlayableEvent | undefined; // used by indicators
|
||||
let thisEntry: PlayableEvent | undefined;
|
||||
let previousEventId: string | undefined;
|
||||
let thisId = previousEventId;
|
||||
// last event is used to calculate relative timings
|
||||
let lastEvent: PlayableEvent | undefined; // used by indicators
|
||||
let thisEvent: PlayableEvent | undefined;
|
||||
// previous entry is used to infer position in the rundown for new events
|
||||
let previousEntryId: string | undefined;
|
||||
let thisId = previousEntryId;
|
||||
|
||||
let eventIndex = 0;
|
||||
// all events before the current selected are in the past
|
||||
@@ -272,63 +274,64 @@ export default function Rundown({ data }: RundownProps) {
|
||||
<DndContext onDragEnd={handleOnDragEnd} sensors={sensors} collisionDetection={closestCenter}>
|
||||
<SortableContext items={statefulEntries} strategy={verticalListSortingStrategy}>
|
||||
<div className={style.list}>
|
||||
{statefulEntries.map((eventId, index) => {
|
||||
{statefulEntries.map((entryId, index) => {
|
||||
// we iterate through a stateful copy of order to make the operations smoother
|
||||
// this means that this can be out of sync with order until the useEffect runs
|
||||
// instead of writing all the logic guards, we simply short circuit rendering here
|
||||
const event = rundown[eventId];
|
||||
if (!event) {
|
||||
const entry = rundown[entryId];
|
||||
if (!entry) {
|
||||
return null;
|
||||
}
|
||||
if (index === 0) {
|
||||
eventIndex = 0;
|
||||
}
|
||||
if (isOntimeEvent(event)) {
|
||||
previousEntryId = thisId;
|
||||
thisId = entryId;
|
||||
if (isOntimeEvent(entry)) {
|
||||
// event indexes are 1 based in frontend
|
||||
eventIndex++;
|
||||
previousEventId = thisId;
|
||||
lastEntry = thisEntry;
|
||||
lastEvent = thisEvent;
|
||||
|
||||
if (isPlayableEvent(event)) {
|
||||
if (isPlayableEvent(entry)) {
|
||||
// populate previous entry
|
||||
if (isNewLatest(event.timeStart, event.timeEnd, lastEntry?.timeStart, lastEntry?.timeEnd)) {
|
||||
thisEntry = event;
|
||||
if (isNewLatest(entry.timeStart, entry.timeEnd, lastEvent?.timeStart, lastEvent?.timeEnd)) {
|
||||
thisEvent = entry;
|
||||
}
|
||||
thisId = eventId;
|
||||
}
|
||||
}
|
||||
const isFirst = index === 0;
|
||||
const isLast = index === order.length - 1;
|
||||
const isLoaded = featureData?.selectedEventId === event.id;
|
||||
const isNext = featureData?.nextEventId === event.id;
|
||||
const hasCursor = event.id === cursor;
|
||||
const isLoaded = featureData?.selectedEventId === entry.id;
|
||||
const isNext = featureData?.nextEventId === entry.id;
|
||||
const hasCursor = entry.id === cursor;
|
||||
if (isLoaded) {
|
||||
isPast = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment key={event.id}>
|
||||
{isEditMode && (hasCursor || isFirst) && <QuickAddBlock previousEventId={previousEventId} />}
|
||||
<Fragment key={entry.id}>
|
||||
{isEditMode && (hasCursor || isFirst) && <QuickAddBlock previousEventId={previousEntryId} />}
|
||||
<div className={style.entryWrapper} data-testid={`entry-${eventIndex}`}>
|
||||
{isOntimeEvent(event) && <div className={style.entryIndex}>{eventIndex}</div>}
|
||||
<div className={style.entry} key={event.id} ref={hasCursor ? cursorRef : undefined}>
|
||||
{isOntimeEvent(entry) && <div className={style.entryIndex}>{eventIndex}</div>}
|
||||
<div className={style.entry} key={entry.id} ref={hasCursor ? cursorRef : undefined}>
|
||||
<RundownEntry
|
||||
type={event.type}
|
||||
type={entry.type}
|
||||
isPast={isPast}
|
||||
eventIndex={eventIndex}
|
||||
data={event}
|
||||
data={entry}
|
||||
loaded={isLoaded}
|
||||
hasCursor={hasCursor}
|
||||
isNext={isNext}
|
||||
previousStart={lastEntry?.timeStart}
|
||||
previousEnd={lastEntry?.timeEnd}
|
||||
previousEventId={previousEventId}
|
||||
previousStart={lastEvent?.timeStart}
|
||||
previousEnd={lastEvent?.timeEnd}
|
||||
previousEntryId={previousEntryId}
|
||||
previousEventId={lastEvent?.id}
|
||||
playback={isLoaded ? featureData.playback : undefined}
|
||||
isRolling={featureData.playback === Playback.Roll}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{isEditMode && (hasCursor || isLast) && <QuickAddBlock previousEventId={event.id} />}
|
||||
{isEditMode && (hasCursor || isLast) && <QuickAddBlock previousEventId={entry.id} />}
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -34,6 +34,7 @@ interface RundownEntryProps {
|
||||
isNext: boolean;
|
||||
previousStart?: number;
|
||||
previousEnd?: number;
|
||||
previousEntryId?: string;
|
||||
previousEventId?: string;
|
||||
playback?: Playback; // we only care about this if this event is playing
|
||||
isRolling: boolean; // we need to know even if not related to this event
|
||||
@@ -48,6 +49,7 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
isNext,
|
||||
previousStart,
|
||||
previousEnd,
|
||||
previousEntryId,
|
||||
previousEventId,
|
||||
playback,
|
||||
isRolling,
|
||||
@@ -84,7 +86,7 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
case 'event-before': {
|
||||
const newEvent = { type: SupportedEvent.Event };
|
||||
const options = {
|
||||
after: previousEventId,
|
||||
after: previousEntryId,
|
||||
};
|
||||
return addEvent(newEvent, options);
|
||||
}
|
||||
@@ -92,13 +94,13 @@ export default function RundownEntry(props: RundownEntryProps) {
|
||||
return addEvent({ type: SupportedEvent.Delay }, { after: data.id });
|
||||
}
|
||||
case 'delay-before': {
|
||||
return addEvent({ type: SupportedEvent.Delay }, { after: previousEventId });
|
||||
return addEvent({ type: SupportedEvent.Delay }, { after: previousEntryId });
|
||||
}
|
||||
case 'block': {
|
||||
return addEvent({ type: SupportedEvent.Block }, { after: data.id });
|
||||
}
|
||||
case 'block-before': {
|
||||
return addEvent({ type: SupportedEvent.Block }, { after: previousEventId });
|
||||
return addEvent({ type: SupportedEvent.Block }, { after: previousEntryId });
|
||||
}
|
||||
case 'swap': {
|
||||
const { value } = payload as FieldValue;
|
||||
|
||||
@@ -32,6 +32,10 @@ export function getTimerByType(freezeEnd: boolean, timerObject?: TimerTypeParams
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses a string to semantically verify if it represents a true value
|
||||
* Used in the context of parsing search params and local storage items which can be strings or null
|
||||
*/
|
||||
export function isStringBoolean(text: string | null) {
|
||||
if (text === null) {
|
||||
return false;
|
||||
|
||||
@@ -149,6 +149,7 @@ $orange-active: #f60;
|
||||
grid-area: schedule;
|
||||
font-family: monospace;
|
||||
margin-right: 2vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.onAir {
|
||||
|
||||
@@ -12,6 +12,7 @@ $action-text-color: $blue-400;
|
||||
$ontime-color: #ff7597;
|
||||
$error-red: $red-500;
|
||||
$warning-orange: $orange-500;
|
||||
$info-blue: $blue-500;
|
||||
$opacity-disabled: 0.4;
|
||||
$active-red: $red-700;
|
||||
|
||||
@@ -57,6 +58,7 @@ $text-body-size: calc(1rem - 1px);
|
||||
|
||||
// media queries
|
||||
$min-tablet: 500px;
|
||||
$small-screen: 800px;
|
||||
|
||||
.blink {
|
||||
animation: blink 1s step-start infinite;
|
||||
|
||||
@@ -38,6 +38,16 @@ export const ontimeInputGhosted = {
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeInputTransparent = {
|
||||
field: {
|
||||
...commonStyles,
|
||||
backgroundColor: 'transparent',
|
||||
_hover: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.10)', // $white-10
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const ontimeTextAreaFilled = {
|
||||
...commonStyles,
|
||||
};
|
||||
|
||||
@@ -21,6 +21,7 @@ import { ontimeTab } from './ontimeTab';
|
||||
import {
|
||||
ontimeInputFilled,
|
||||
ontimeInputGhosted,
|
||||
ontimeInputTransparent,
|
||||
ontimeTextAreaFilled,
|
||||
ontimeTextAreaTransparent,
|
||||
} from './ontimeTextInputs';
|
||||
@@ -78,6 +79,7 @@ const theme = extendTheme({
|
||||
variants: {
|
||||
'ontime-filled': { ...ontimeInputFilled },
|
||||
'ontime-ghosted': { ...ontimeInputGhosted },
|
||||
'ontime-transparent': { ...ontimeInputTransparent },
|
||||
},
|
||||
},
|
||||
Kbd: {
|
||||
|
||||
@@ -39,8 +39,6 @@ export const TranslationContext = createContext<TranslationContextValue>({
|
||||
export const TranslationProvider = ({ children }: PropsWithChildren) => {
|
||||
const { data } = useSettings();
|
||||
|
||||
console.log('....', data.language)
|
||||
|
||||
const getLocalizedString = useCallback(
|
||||
(key: keyof typeof langEn, lang = data?.language || 'en'): string => {
|
||||
if (lang in translationsList) {
|
||||
|
||||
+3
-4
@@ -45,12 +45,11 @@ $table-header-font-size: calc(1rem - 3px);
|
||||
|
||||
.tableHeader {
|
||||
position: sticky;
|
||||
top: -1px;
|
||||
top: 0px;
|
||||
z-index: 10;
|
||||
|
||||
background-color: $ui-black;
|
||||
font-size: $table-header-font-size;
|
||||
color: $gray-700;
|
||||
}
|
||||
color: $label-gray;}
|
||||
|
||||
th {
|
||||
background-color: $gray-1300;
|
||||
+33
-19
@@ -1,7 +1,14 @@
|
||||
import { useCallback, useRef } from 'react';
|
||||
import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
|
||||
import Color from 'color';
|
||||
import { isOntimeBlock, isOntimeDelay, isOntimeEvent, OntimeRundown, OntimeRundownEntry } from 'ontime-types';
|
||||
import {
|
||||
CustomFieldLabel,
|
||||
isOntimeBlock,
|
||||
isOntimeDelay,
|
||||
isOntimeEvent,
|
||||
OntimeRundown,
|
||||
OntimeRundownEntry,
|
||||
} from 'ontime-types';
|
||||
|
||||
import useFollowComponent from '../../common/hooks/useFollowComponent';
|
||||
import { getAccessibleColour } from '../../common/utils/styleUtils';
|
||||
@@ -11,7 +18,7 @@ import CuesheetHeader from './cuesheet-table-elements/CuesheetHeader';
|
||||
import DelayRow from './cuesheet-table-elements/DelayRow';
|
||||
import EventRow from './cuesheet-table-elements/EventRow';
|
||||
import CuesheetTableSettings from './cuesheet-table-settings/CuesheetTableSettings';
|
||||
import { useCuesheetSettings } from './store/CuesheetSettings';
|
||||
import { useCuesheetOptions } from './cuesheet.options';
|
||||
import useColumnManager from './useColumnManager';
|
||||
|
||||
import style from './Cuesheet.module.scss';
|
||||
@@ -19,13 +26,21 @@ import style from './Cuesheet.module.scss';
|
||||
interface CuesheetProps {
|
||||
data: OntimeRundown;
|
||||
columns: ColumnDef<OntimeRundownEntry>[];
|
||||
handleUpdate: (rowIndex: number, accessor: keyof OntimeRundownEntry, payload: unknown) => void;
|
||||
handleUpdate: (rowIndex: number, accessor: keyof OntimeRundownEntry, payload: string) => void;
|
||||
handleUpdateCustom: (rowIndex: number, accessor: CustomFieldLabel, payload: string) => void;
|
||||
selectedId: string | null;
|
||||
currentBlockId: string | null;
|
||||
}
|
||||
|
||||
export default function Cuesheet({ data, columns, handleUpdate, selectedId, currentBlockId }: CuesheetProps) {
|
||||
const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings();
|
||||
export default function Cuesheet({
|
||||
data,
|
||||
columns,
|
||||
handleUpdate,
|
||||
handleUpdateCustom,
|
||||
selectedId,
|
||||
currentBlockId,
|
||||
}: CuesheetProps) {
|
||||
const { followSelected, hideDelays, hidePast, hideIndexColumn } = useCuesheetOptions();
|
||||
const {
|
||||
columnVisibility,
|
||||
columnOrder,
|
||||
@@ -51,6 +66,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
|
||||
},
|
||||
meta: {
|
||||
handleUpdate,
|
||||
handleUpdateCustom,
|
||||
},
|
||||
onColumnVisibilityChange: setColumnVisibility,
|
||||
onColumnSizingChange: setColumnSizing,
|
||||
@@ -94,17 +110,15 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
|
||||
|
||||
return (
|
||||
<>
|
||||
{showSettings && (
|
||||
<CuesheetTableSettings
|
||||
columns={allLeafColumns}
|
||||
handleResetResizing={resetColumnResizing}
|
||||
handleResetReordering={resetColumnOrder}
|
||||
handleClearToggles={setAllVisible}
|
||||
/>
|
||||
)}
|
||||
<CuesheetTableSettings
|
||||
columns={allLeafColumns}
|
||||
handleResetResizing={resetColumnResizing}
|
||||
handleResetReordering={resetColumnOrder}
|
||||
handleClearToggles={setAllVisible}
|
||||
/>
|
||||
<div ref={tableContainerRef} className={style.cuesheetContainer}>
|
||||
<table className={style.cuesheet}>
|
||||
<CuesheetHeader headerGroups={headerGroups} saveColumnOrder={reorder} showIndexColumn={showIndexColumn} />
|
||||
<CuesheetHeader headerGroups={headerGroups} saveColumnOrder={reorder} showIndexColumn={!hideIndexColumn} />
|
||||
<tbody>
|
||||
{rowModel.rows.map((row) => {
|
||||
const key = row.original.id;
|
||||
@@ -114,17 +128,17 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
|
||||
}
|
||||
|
||||
if (isOntimeBlock(row.original)) {
|
||||
if (isPast && !showPrevious && key !== currentBlockId) {
|
||||
if (isPast && hidePast && key !== currentBlockId) {
|
||||
return null;
|
||||
}
|
||||
return <BlockRow key={key} title={row.original.title} />;
|
||||
}
|
||||
if (isOntimeDelay(row.original)) {
|
||||
if (isPast && !showPrevious) {
|
||||
if (isPast && hidePast) {
|
||||
return null;
|
||||
}
|
||||
const delayVal = row.original.duration;
|
||||
if (!showDelayBlock || delayVal === 0) {
|
||||
if (hideDelays || delayVal === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -134,7 +148,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
|
||||
eventIndex++;
|
||||
const isSelected = key === selectedId;
|
||||
|
||||
if (isPast && !showPrevious) {
|
||||
if (isPast && hidePast) {
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -159,7 +173,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId, curr
|
||||
selectedRef={isSelected ? selectedRef : undefined}
|
||||
skip={row.original.skip}
|
||||
colour={row.original.colour}
|
||||
showIndexColumn={showIndexColumn}
|
||||
showIndexColumn={!hideIndexColumn}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => {
|
||||
return (
|
||||
+2
-1
@@ -5,9 +5,10 @@
|
||||
padding: 1rem 0.5rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto 1fr;
|
||||
grid-template-rows: 3rem auto auto 1fr;
|
||||
grid-template-areas:
|
||||
'overview'
|
||||
'progress'
|
||||
'settings'
|
||||
'table';
|
||||
gap: 1rem;
|
||||
+58
-33
@@ -1,44 +1,51 @@
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { IconButton, useDisclosure } from '@chakra-ui/react';
|
||||
import { IoApps } from '@react-icons/all-files/io5/IoApps';
|
||||
import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
|
||||
import { CustomFieldLabel, isOntimeEvent } from 'ontime-types';
|
||||
import { CustomFieldLabel, isOntimeEvent, OntimeEvent } from 'ontime-types';
|
||||
|
||||
import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
|
||||
import Empty from '../../common/components/state/Empty';
|
||||
import EmptyPage from '../../common/components/state/EmptyPage';
|
||||
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
|
||||
import { useEventAction } from '../../common/hooks/useEventAction';
|
||||
import { useCuesheet } from '../../common/hooks/useSocket';
|
||||
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
|
||||
import useCustomFields from '../../common/hooks-query/useCustomFields';
|
||||
import { useFlatRundown } from '../../common/hooks-query/useRundown';
|
||||
import { CuesheetOverview } from '../overview/Overview';
|
||||
import { CuesheetOverview } from '../../features/overview/Overview';
|
||||
|
||||
import CuesheetProgress from './cuesheet-progress/CuesheetProgress';
|
||||
import { useCuesheetSettings } from './store/CuesheetSettings';
|
||||
import Cuesheet from './Cuesheet';
|
||||
import { cuesheetOptions } from './cuesheet.options';
|
||||
import { makeCuesheetColumns } from './cuesheetCols';
|
||||
|
||||
import styles from './CuesheetWrapper.module.scss';
|
||||
import styles from './CuesheetPage.module.scss';
|
||||
|
||||
export default function CuesheetWrapper() {
|
||||
export default function CuesheetPage() {
|
||||
// TODO: can we use the normalised rundown for the table?
|
||||
const { data: flatRundown, status: rundownStatus } = useFlatRundown();
|
||||
const { data: customFields } = useCustomFields();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
|
||||
|
||||
const { updateCustomField } = useEventAction();
|
||||
const { updateCustomField, updateEvent } = useEventAction();
|
||||
const featureData = useCuesheet();
|
||||
const columns = useMemo(() => makeCuesheetColumns(customFields), [customFields]);
|
||||
const toggleSettings = useCuesheetSettings((state) => state.toggleSettings);
|
||||
|
||||
useWindowTitle('Cuesheet');
|
||||
|
||||
/** Handles showing the view params edit drawer */
|
||||
const showEditFormDrawer = useCallback(() => {
|
||||
searchParams.set('edit', 'true');
|
||||
setSearchParams(searchParams);
|
||||
}, [searchParams, setSearchParams]);
|
||||
|
||||
/**
|
||||
* Handles updating a field
|
||||
* Currently, only custom fields can be updated from the cuesheet
|
||||
* Handles updating a custom field
|
||||
*/
|
||||
const handleUpdate = useCallback(
|
||||
async (rowIndex: number, accessor: CustomFieldLabel, payload: unknown) => {
|
||||
const handleUpdateCustom = useCallback(
|
||||
async (rowIndex: number, accessor: CustomFieldLabel, payload: string) => {
|
||||
if (!flatRundown || rundownStatus !== 'success') {
|
||||
return;
|
||||
}
|
||||
@@ -53,52 +60,68 @@ export default function CuesheetWrapper() {
|
||||
return;
|
||||
}
|
||||
|
||||
// skip if there is no value change
|
||||
const previousValue = event.custom[accessor];
|
||||
|
||||
if (previousValue === payload) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check if value is valid
|
||||
// in anticipation to different types of event here
|
||||
if (typeof payload !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
// cleanup
|
||||
const cleanVal = payload.trim();
|
||||
|
||||
// submit
|
||||
try {
|
||||
await updateCustomField(event.id, accessor, cleanVal);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
updateCustomField(event.id, accessor, payload);
|
||||
},
|
||||
[flatRundown, rundownStatus, updateCustomField],
|
||||
);
|
||||
|
||||
/**
|
||||
* Handles updating all other string fields
|
||||
*/
|
||||
const handleUpdate = useCallback(
|
||||
async (rowIndex: number, accessor: keyof OntimeEvent, payload: string) => {
|
||||
if (!flatRundown || rundownStatus !== 'success') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (rowIndex == null || accessor == null || payload == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check if value is the same
|
||||
const event = flatRundown[rowIndex];
|
||||
if (!event || !isOntimeEvent(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// skip if there is no value change
|
||||
const previousValue = event[accessor];
|
||||
if (previousValue === payload) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateEvent({ id: event.id, [accessor]: payload });
|
||||
},
|
||||
[flatRundown, rundownStatus, updateEvent],
|
||||
);
|
||||
|
||||
if (!customFields || !flatRundown || rundownStatus !== 'success') {
|
||||
return <Empty text='Loading...' />;
|
||||
return <EmptyPage text='Loading...' />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.tableWrapper} data-testid='cuesheet'>
|
||||
<ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
|
||||
<ViewParamsEditor viewOptions={cuesheetOptions} />
|
||||
<CuesheetOverview>
|
||||
<IconButton
|
||||
aria-label='Toggle settings'
|
||||
aria-label='Toggle navigation'
|
||||
variant='ontime-subtle-white'
|
||||
size='lg'
|
||||
icon={<IoApps />}
|
||||
onClick={onOpen}
|
||||
/>
|
||||
<IconButton
|
||||
aria-label='Toggle navigation'
|
||||
aria-label='Toggle settings'
|
||||
variant='ontime-subtle-white'
|
||||
size='lg'
|
||||
icon={<IoSettingsOutline />}
|
||||
onClick={() => toggleSettings()}
|
||||
onClick={showEditFormDrawer}
|
||||
/>
|
||||
</CuesheetOverview>
|
||||
<CuesheetProgress />
|
||||
@@ -106,6 +129,8 @@ export default function CuesheetWrapper() {
|
||||
data={flatRundown}
|
||||
columns={columns}
|
||||
handleUpdate={handleUpdate}
|
||||
handleUpdateCustom={handleUpdateCustom}
|
||||
//TODO: stabilizer selectedEventId and currentBlockId
|
||||
selectedId={featureData.selectedEventId}
|
||||
currentBlockId={featureData.currentBlockId}
|
||||
/>
|
||||
+2
-2
@@ -1,11 +1,11 @@
|
||||
import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
|
||||
|
||||
import CuesheetWrapper from './CuesheetWrapper';
|
||||
import CuesheetPage from './CuesheetPage';
|
||||
|
||||
export default function ProtectedCuesheet() {
|
||||
return (
|
||||
<ProtectRoute permission='operator'>
|
||||
<CuesheetWrapper />
|
||||
<CuesheetPage />
|
||||
</ProtectRoute>
|
||||
);
|
||||
}
|
||||
+47
-3
@@ -1,4 +1,6 @@
|
||||
import { makeCSV, makeTable, parseField } from '../cuesheetUtils';
|
||||
import { ProjectData } from 'ontime-types';
|
||||
|
||||
import { makeCSV, makeTable, parseField } from '../cuesheet.utils';
|
||||
|
||||
describe('parseField()', () => {
|
||||
it('returns a string from given millis on timeStart, TimeEnd and duration', () => {
|
||||
@@ -27,6 +29,7 @@ describe('parseField()', () => {
|
||||
});
|
||||
|
||||
it('returns an empty string on undefined fields', () => {
|
||||
// @ts-expect-error -- testing user data with missing fields
|
||||
expect(parseField('title')).toBe('');
|
||||
});
|
||||
|
||||
@@ -51,6 +54,7 @@ describe('makeTable()', () => {
|
||||
const headerData = {
|
||||
title: 'test title',
|
||||
description: 'test description',
|
||||
projectLogo: 'test logo',
|
||||
};
|
||||
const tableData = [
|
||||
{
|
||||
@@ -66,8 +70,48 @@ describe('makeTable()', () => {
|
||||
lighting: { label: 'test' },
|
||||
};
|
||||
|
||||
const table = makeTable(headerData, tableData, customFields);
|
||||
expect(table).toMatchSnapshot();
|
||||
// @ts-expect-error -- testing user data with missing fields
|
||||
const table = makeTable(headerData as ProjectData, tableData, customFields);
|
||||
expect(table).not.toContain('test logo');
|
||||
expect(table).toMatchInlineSnapshot(`
|
||||
[
|
||||
[
|
||||
"Ontime · Rundown export",
|
||||
],
|
||||
[
|
||||
"Project title: test title",
|
||||
],
|
||||
[
|
||||
"Project description: test description",
|
||||
],
|
||||
[
|
||||
"Time Start",
|
||||
"Time End",
|
||||
"Duration",
|
||||
"ID",
|
||||
"Colour",
|
||||
"Cue",
|
||||
"Title",
|
||||
"Note",
|
||||
"Is Public? (x)",
|
||||
"Skip?",
|
||||
"lighting",
|
||||
],
|
||||
[
|
||||
"00:00:00",
|
||||
"00:00:00",
|
||||
"...",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"test title 1",
|
||||
"",
|
||||
"x",
|
||||
"",
|
||||
"",
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
.progressOverride {
|
||||
height: 1rem;
|
||||
grid-area: progress;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { memo, useCallback, useRef } from 'react';
|
||||
|
||||
import { AutoTextArea } from '../../../common/components/input/auto-text-area/AutoTextArea';
|
||||
import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
|
||||
|
||||
interface MultiLineCellProps {
|
||||
initialValue: string;
|
||||
handleUpdate: (newValue: string) => void;
|
||||
}
|
||||
|
||||
const MultiLineCell = (props: MultiLineCellProps) => {
|
||||
const { initialValue, handleUpdate } = props;
|
||||
const ref = useRef<HTMLInputElement | null>(null);
|
||||
const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
|
||||
|
||||
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
|
||||
submitOnCtrlEnter: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<AutoTextArea
|
||||
inputref={ref}
|
||||
rows={1}
|
||||
size='sm'
|
||||
style={{ padding: 0 }}
|
||||
transition='none'
|
||||
variant='ontime-transparent'
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
onKeyDown={onKeyDown}
|
||||
spellCheck={false}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(MultiLineCell);
|
||||
@@ -0,0 +1,35 @@
|
||||
import { memo, useCallback, useRef } from 'react';
|
||||
import { Input } from '@chakra-ui/react';
|
||||
|
||||
import useReactiveTextInput from '../../../common/components/input/text-input/useReactiveTextInput';
|
||||
|
||||
interface SingleLineCellProps {
|
||||
initialValue: string;
|
||||
handleUpdate: (newValue: string) => void;
|
||||
}
|
||||
|
||||
const SingleLineCell = (props: SingleLineCellProps) => {
|
||||
const { initialValue, handleUpdate } = props;
|
||||
const ref = useRef<HTMLInputElement | null>(null);
|
||||
const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
|
||||
|
||||
const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
|
||||
submitOnCtrlEnter: true,
|
||||
});
|
||||
|
||||
return (
|
||||
<Input
|
||||
ref={ref}
|
||||
size='sx'
|
||||
variant='ontime-transparent'
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onBlur={onBlur}
|
||||
onKeyDown={onKeyDown}
|
||||
spellCheck={false}
|
||||
autoComplete='off'
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(SingleLineCell);
|
||||
+7
-19
@@ -1,24 +1,20 @@
|
||||
.tableSettings {
|
||||
grid-area: settings;
|
||||
padding: 1rem;
|
||||
background-color: $ui-black;
|
||||
padding-inline: 0.5rem;
|
||||
display: flex;
|
||||
gap: 5rem;
|
||||
font-size: $inner-section-text-size;
|
||||
}
|
||||
|
||||
.leftPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 0.5rem;
|
||||
@media (max-width: $small-screen) {
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
color: $gray-700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.options {
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1rem;
|
||||
@@ -30,12 +26,4 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.rightPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { memo, ReactNode } from 'react';
|
||||
import { Button, Checkbox } from '@chakra-ui/react';
|
||||
import { Column } from '@tanstack/react-table';
|
||||
import { OntimeRundownEntry } from 'ontime-types';
|
||||
|
||||
import * as Editor from '../../../features/editors/editor-utils/EditorUtils';
|
||||
|
||||
import style from './CuesheetTableSettings.module.scss';
|
||||
|
||||
// reusable button styles
|
||||
const buttonProps = {
|
||||
size: 'xs',
|
||||
variant: 'ontime-subtle',
|
||||
};
|
||||
|
||||
interface CuesheetTableSettingsProps {
|
||||
columns: Column<OntimeRundownEntry, unknown>[];
|
||||
handleResetResizing: () => void;
|
||||
handleResetReordering: () => void;
|
||||
handleClearToggles: () => void;
|
||||
}
|
||||
|
||||
function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
|
||||
const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props;
|
||||
|
||||
return (
|
||||
<div className={style.tableSettings}>
|
||||
<div>
|
||||
<Editor.Label className={style.sectionTitle}>Toggle column visibility</Editor.Label>
|
||||
<div className={style.row}>
|
||||
{columns.map((column) => {
|
||||
const columnHeader = column.columnDef.header;
|
||||
const visible = column.getIsVisible();
|
||||
return (
|
||||
<label key={`${column.id}-${visible}`} className={style.option}>
|
||||
<Checkbox
|
||||
variant='ontime-ondark'
|
||||
defaultChecked={visible}
|
||||
onChange={column.getToggleVisibilityHandler()}
|
||||
/>
|
||||
{columnHeader as ReactNode}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.column}>
|
||||
<Editor.Label className={style.sectionTitle}>Reset Options</Editor.Label>
|
||||
<div className={style.row}>
|
||||
<Button onClick={handleClearToggles} {...buttonProps}>
|
||||
Show All
|
||||
</Button>
|
||||
<Button onClick={handleResetResizing} {...buttonProps}>
|
||||
Reset Resizing
|
||||
</Button>
|
||||
<Button onClick={handleResetReordering} {...buttonProps}>
|
||||
Reset Reordering
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(CuesheetTableSettings);
|
||||
@@ -0,0 +1,90 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
|
||||
import { ViewOption } from '../../common/components/view-params-editor/types';
|
||||
import { isStringBoolean } from '../../features/viewers/common/viewUtils';
|
||||
|
||||
/**
|
||||
* In the specific case of the cuesheet options
|
||||
* we save the user preferences in the local storage
|
||||
*/
|
||||
export const cuesheetOptions: ViewOption[] = [
|
||||
{ section: 'Table options' },
|
||||
{
|
||||
id: 'hideTableSeconds',
|
||||
title: 'Hide seconds in table',
|
||||
description: 'Whether to hide seconds in the time fields displayed in the table',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
id: 'followSelected',
|
||||
title: 'Follow selected event',
|
||||
description: 'Whether the view should automatically scroll to the selected event',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
id: 'hidePast',
|
||||
title: 'Hide Past Events',
|
||||
description: 'Whether to hide events that have passed',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
id: 'hideIndexColumn',
|
||||
title: 'Hide index column',
|
||||
description: 'Whether the hide the event indexes in the table',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
{ section: 'Delay flow' },
|
||||
{
|
||||
id: 'showDelayedTimes',
|
||||
title: 'Show delayed times',
|
||||
description: 'Whether the time fields should include delays',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
{
|
||||
id: 'hideDelays',
|
||||
title: 'Hide delays',
|
||||
description: 'Whether to hide the rows containing scheduled delays',
|
||||
type: 'boolean',
|
||||
defaultValue: false,
|
||||
},
|
||||
];
|
||||
|
||||
type CuesheetOptions = {
|
||||
hideTableSeconds: boolean;
|
||||
followSelected: boolean;
|
||||
hidePast: boolean;
|
||||
hideIndexColumn: boolean;
|
||||
showDelayedTimes: boolean;
|
||||
hideDelays: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
* Utility extract the view options from URL Params
|
||||
* the names and fallbacks are manually matched with cuesheetOptions
|
||||
*/
|
||||
export function getOptionsFromParams(searchParams: URLSearchParams): CuesheetOptions {
|
||||
// we manually make an object that matches the key above
|
||||
return {
|
||||
hideTableSeconds: isStringBoolean(searchParams.get('hideTableSeconds')),
|
||||
followSelected: isStringBoolean(searchParams.get('followSelected')),
|
||||
hidePast: isStringBoolean(searchParams.get('hidePast')),
|
||||
hideIndexColumn: isStringBoolean(searchParams.get('hideIndexColumn')),
|
||||
showDelayedTimes: isStringBoolean(searchParams.get('showDelayedTimes')),
|
||||
hideDelays: isStringBoolean(searchParams.get('hideDelays')),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook exposes the cuesheet view options
|
||||
*/
|
||||
export function useCuesheetOptions(): CuesheetOptions {
|
||||
const [searchParams] = useSearchParams();
|
||||
const options = useMemo(() => getOptionsFromParams(searchParams), [searchParams]);
|
||||
return options;
|
||||
}
|
||||
@@ -0,0 +1,182 @@
|
||||
import { useCallback } from 'react';
|
||||
import { Checkbox } from '@chakra-ui/react';
|
||||
import { CellContext, ColumnDef } from '@tanstack/react-table';
|
||||
import { CustomFields, isOntimeEvent, OntimeEvent, OntimeRundownEntry } from 'ontime-types';
|
||||
|
||||
import DelayIndicator from '../../common/components/delay-indicator/DelayIndicator';
|
||||
import RunningTime from '../../features/viewers/common/running-time/RunningTime';
|
||||
|
||||
import MultiLineCell from './cuesheet-table-elements/MultiLineCell';
|
||||
import SingleLineCell from './cuesheet-table-elements/SingleLineCell';
|
||||
import { useCuesheetOptions } from './cuesheet.options';
|
||||
|
||||
import style from './Cuesheet.module.scss';
|
||||
|
||||
function MakePublic({ row, column, table }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// @ts-expect-error -- we inject this into react-table
|
||||
table.options.meta?.handleUpdate(row.index, column.id, event.target.checked);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- we skip table.options.meta since the reference seems unstable
|
||||
[column.id, row.index],
|
||||
);
|
||||
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isChecked = event.isPublic;
|
||||
|
||||
return (
|
||||
<Checkbox variant='ontime-ondark' onChange={update} isChecked={isChecked} style={{ verticalAlign: 'middle' }} />
|
||||
);
|
||||
}
|
||||
|
||||
function MakeTimer({ getValue, row: { original } }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const { showDelayedTimes, hideTableSeconds } = useCuesheetOptions();
|
||||
const cellValue = (getValue() as number | null) ?? 0;
|
||||
const delayValue = (original as OntimeEvent)?.delay ?? 0;
|
||||
|
||||
return (
|
||||
<span className={style.time}>
|
||||
<DelayIndicator delayValue={delayValue} />
|
||||
<RunningTime value={cellValue} hideSeconds={hideTableSeconds} />
|
||||
{delayValue !== 0 && showDelayedTimes && (
|
||||
<RunningTime className={style.delayedTime} value={cellValue + delayValue} hideSeconds={hideTableSeconds} />
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function MakeDuration({ getValue }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const { hideTableSeconds } = useCuesheetOptions();
|
||||
const cellValue = (getValue() as number | null) ?? 0;
|
||||
|
||||
return <RunningTime value={cellValue} hideSeconds={hideTableSeconds} />;
|
||||
}
|
||||
|
||||
function MakeMultiLineField({ row, column, table }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
// @ts-expect-error -- we inject this into react-table
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- we skip table.options.meta since the reference seems unstable
|
||||
[column.id, row.index],
|
||||
);
|
||||
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const initialValue = event[column.id as keyof OntimeRundownEntry] ?? '';
|
||||
|
||||
return <MultiLineCell initialValue={initialValue} handleUpdate={update} />;
|
||||
}
|
||||
|
||||
function MakeSingleLineField({ row, column, table }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
// @ts-expect-error -- we inject this into react-table
|
||||
table.options.meta?.handleUpdate(row.index, column.id, newValue);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- we skip table.options.meta since the reference seems unstable
|
||||
[column.id, row.index],
|
||||
);
|
||||
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const initialValue = event[column.id as keyof OntimeRundownEntry] ?? '';
|
||||
|
||||
return <SingleLineCell initialValue={initialValue} handleUpdate={update} />;
|
||||
}
|
||||
|
||||
function MakeCustomField({ row, column, table }: CellContext<OntimeRundownEntry, unknown>) {
|
||||
const update = useCallback(
|
||||
(newValue: string) => {
|
||||
// @ts-expect-error -- we inject this into react-table
|
||||
table.options.meta?.handleUpdateCustom(row.index, column.id, newValue);
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- we skip table.options.meta since the reference seems unstable
|
||||
[column.id, row.index],
|
||||
);
|
||||
|
||||
const event = row.original;
|
||||
if (!isOntimeEvent(event)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const initialValue = event.custom[column.id] ?? '';
|
||||
|
||||
return <MultiLineCell initialValue={initialValue} handleUpdate={update} />;
|
||||
}
|
||||
|
||||
export function makeCuesheetColumns(customFields: CustomFields): ColumnDef<OntimeRundownEntry>[] {
|
||||
const dynamicCustomFields = Object.keys(customFields).map((key) => ({
|
||||
accessorKey: key,
|
||||
id: key,
|
||||
header: customFields[key].label,
|
||||
meta: { colour: customFields[key].colour },
|
||||
cell: MakeCustomField,
|
||||
size: 250,
|
||||
}));
|
||||
|
||||
return [
|
||||
{
|
||||
accessorKey: 'cue',
|
||||
id: 'cue',
|
||||
header: 'Cue',
|
||||
cell: (row) => row.getValue(),
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'isPublic',
|
||||
id: 'isPublic',
|
||||
header: 'Public',
|
||||
cell: MakePublic,
|
||||
size: 45,
|
||||
},
|
||||
{
|
||||
accessorKey: 'timeStart',
|
||||
id: 'timeStart',
|
||||
header: 'Start',
|
||||
cell: MakeTimer,
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'timeEnd',
|
||||
id: 'timeEnd',
|
||||
header: 'End',
|
||||
cell: MakeTimer,
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'duration',
|
||||
id: 'duration',
|
||||
header: 'Duration',
|
||||
cell: MakeDuration,
|
||||
size: 75,
|
||||
},
|
||||
{
|
||||
accessorKey: 'title',
|
||||
id: 'title',
|
||||
header: 'Title',
|
||||
cell: MakeSingleLineField,
|
||||
size: 250,
|
||||
},
|
||||
{
|
||||
accessorKey: 'note',
|
||||
id: 'note',
|
||||
header: 'Note',
|
||||
cell: MakeMultiLineField,
|
||||
size: 250,
|
||||
},
|
||||
...dynamicCustomFields,
|
||||
];
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ProjectData } from 'ontime-types';
|
||||
|
||||
import Empty from '../../common/components/state/Empty';
|
||||
import EmptyPage from '../../common/components/state/EmptyPage';
|
||||
import ViewLogo from '../../common/components/view-logo/ViewLogo';
|
||||
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
|
||||
import { useWindowTitle } from '../../common/hooks/useWindowTitle';
|
||||
@@ -16,7 +17,7 @@ interface ProjectInfoProps {
|
||||
isMirrored: boolean;
|
||||
}
|
||||
|
||||
export default function ProjectInfoProps(props: ProjectInfoProps) {
|
||||
export default function ProjectInfo(props: ProjectInfoProps) {
|
||||
const { general, isMirrored } = props;
|
||||
|
||||
useWindowTitle('Project info');
|
||||
@@ -25,6 +26,25 @@ export default function ProjectInfoProps(props: ProjectInfoProps) {
|
||||
return <Empty text='No data found' />;
|
||||
}
|
||||
|
||||
if (!general) {
|
||||
return (
|
||||
<>
|
||||
<ViewParamsEditor viewOptions={projectInfoOptions} />
|
||||
return <EmptyPage text='No data found' />;
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const isEmpty = Object.values(general).every((value) => !value);
|
||||
if (isEmpty) {
|
||||
return (
|
||||
<>
|
||||
<ViewParamsEditor viewOptions={projectInfoOptions} />
|
||||
<EmptyPage text='The project has no data yet' />;
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`project ${isMirrored ? 'mirror' : ''}`} data-testid='project-view'>
|
||||
<ViewParamsEditor viewOptions={projectInfoOptions} />
|
||||
|
||||
@@ -11,6 +11,7 @@ const sentryAuthToken = process.env.SENTRY_AUTH_TOKEN;
|
||||
const isDev = process.env.NODE_ENV === 'local' || process.env.NODE_ENV === 'development';
|
||||
|
||||
export default defineConfig({
|
||||
base: './', // Ontime cloud: we use relative paths to allow them to reference a dynamic base set at runtime
|
||||
plugins: [
|
||||
react(),
|
||||
svgrPlugin(),
|
||||
@@ -33,7 +34,7 @@ export default defineConfig({
|
||||
}),
|
||||
compression({
|
||||
algorithm: 'brotliCompress',
|
||||
exclude: /\.(html)$/, // Exclude HTML files from compression so we can change the base property at runtime
|
||||
exclude: /\.(html)$/, // Ontime cloud: Exclude HTML files from compression so we can change the base property at runtime
|
||||
}),
|
||||
],
|
||||
server: {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ontime",
|
||||
"version": "3.8.0",
|
||||
"version": "3.9.5",
|
||||
"author": "Carlos Valente",
|
||||
"description": "Time keeping for live events",
|
||||
"repository": "https://github.com/cpvalente/ontime",
|
||||
|
||||
@@ -29,6 +29,7 @@ function getApplicationMenu(askToQuit, clientUrl, serverUrl, redirectWindow, sho
|
||||
const template = [
|
||||
...(isMac ? [makeMacMenu(askToQuit)] : []),
|
||||
makeFileMenu(serverUrl, redirectWindow, showDialog, download),
|
||||
makeEditMenu(),
|
||||
makeViewMenu(clientUrl),
|
||||
makeSettingsMenu(redirectWindow),
|
||||
makeHelpMenu(redirectWindow),
|
||||
@@ -61,6 +62,22 @@ function makeMacMenu(askToQuit) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility function generates the edit menu
|
||||
* @returns {Object}
|
||||
*/
|
||||
function makeEditMenu() {
|
||||
return {
|
||||
label: 'Edit',
|
||||
submenu: [
|
||||
{ label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut' },
|
||||
{ label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy' },
|
||||
{ label: 'Paste', accelerator: 'CmdOrCtrl+V', role: 'paste' },
|
||||
{ label: 'Select All', accelerator: 'CmdOrCtrl+A', role: 'selectAll' },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility function generates the file menu
|
||||
* @param {string} serverUrl - base url for the application
|
||||
@@ -253,7 +270,7 @@ function makeSettingsMenu(redirectWindow) {
|
||||
click: () => redirectWindow('/editor?settings=network__log'),
|
||||
},
|
||||
{
|
||||
label: 'Manage cleints',
|
||||
label: 'Manage clients',
|
||||
click: () => redirectWindow('/editor?settings=network__clients'),
|
||||
},
|
||||
],
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "ontime-server",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
"version": "3.8.0",
|
||||
"version": "3.9.5",
|
||||
"exports": "./src/index.js",
|
||||
"dependencies": {
|
||||
"@googleapis/sheets": "^5.0.5",
|
||||
|
||||
@@ -47,8 +47,8 @@ export class SocketServer implements IAdapter {
|
||||
this.wss = null;
|
||||
}
|
||||
|
||||
init(server: Server) {
|
||||
this.wss = new WebSocketServer({ path: '/ws', server, maxPayload: this.MAX_PAYLOAD });
|
||||
init(server: Server, prefix?: string) {
|
||||
this.wss = new WebSocketServer({ path: `${prefix}/ws`, server, maxPayload: this.MAX_PAYLOAD });
|
||||
|
||||
this.wss.on('connection', (ws) => {
|
||||
const clientId = generateId();
|
||||
|
||||
@@ -19,7 +19,6 @@ import {
|
||||
deleteEvent,
|
||||
editEvent,
|
||||
reorderEvent,
|
||||
setFrozenState,
|
||||
swapEvents,
|
||||
} from '../../services/rundown-service/RundownService.js';
|
||||
import {
|
||||
@@ -127,17 +126,6 @@ export async function rundownBatchPut(req: Request, res: Response<MessageRespons
|
||||
}
|
||||
}
|
||||
|
||||
export async function rundownFrozenPost(req: Request, res: Response<MessageResponse | ErrorResponse>) {
|
||||
try {
|
||||
const { frozen } = req.body;
|
||||
setFrozenState(frozen);
|
||||
res.status(200).send({ message: 'Rundown frozen state updated.' });
|
||||
} catch (error) {
|
||||
const message = getErrorMessage(error);
|
||||
res.status(400).send({ message });
|
||||
}
|
||||
}
|
||||
|
||||
export async function rundownReorder(req: Request, res: Response<OntimeRundownEntry | ErrorResponse>) {
|
||||
if (failEmptyObjects(req.body, res)) {
|
||||
return;
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import { eventStore } from '../../stores/EventStore.js';
|
||||
|
||||
export const preventIfFrozen = function (req, res, next) {
|
||||
if (eventStore.get('frozen')) {
|
||||
res.status(403).send({ message: 'Rundown is frozen' });
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
};
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
rundownApplyDelay,
|
||||
rundownBatchPut,
|
||||
rundownDelete,
|
||||
rundownFrozenPost,
|
||||
rundownGetAll,
|
||||
rundownGetById,
|
||||
rundownGetNormalised,
|
||||
@@ -19,14 +18,12 @@ import {
|
||||
paramsMustHaveEventId,
|
||||
rundownArrayOfIds,
|
||||
rundownBatchPutValidator,
|
||||
rundownFrozenPostValidator,
|
||||
rundownGetPaginatedQueryParams,
|
||||
rundownPostValidator,
|
||||
rundownPutValidator,
|
||||
rundownReorderValidator,
|
||||
rundownSwapValidator,
|
||||
} from './rundown.validation.js';
|
||||
import { preventIfFrozen } from './rundown.middleware.js';
|
||||
|
||||
export const router = express.Router();
|
||||
|
||||
@@ -36,14 +33,13 @@ router.get('/normalised', rundownGetNormalised);
|
||||
router.get('/:eventId', paramsMustHaveEventId, rundownGetById); // not used in Ontime frontend
|
||||
|
||||
router.post('/', rundownPostValidator, rundownPost);
|
||||
router.post('/frozen', rundownFrozenPostValidator, rundownFrozenPost);
|
||||
|
||||
router.put('/', rundownPutValidator, rundownPut);
|
||||
router.put('/batch', rundownBatchPutValidator, rundownBatchPut);
|
||||
|
||||
router.patch('/reorder/', rundownReorderValidator, preventIfFrozen, rundownReorder);
|
||||
router.patch('/swap', rundownSwapValidator, preventIfFrozen, rundownSwap);
|
||||
router.patch('/reorder/', rundownReorderValidator, rundownReorder);
|
||||
router.patch('/swap', rundownSwapValidator, rundownSwap);
|
||||
router.patch('/applydelay/:eventId', paramsMustHaveEventId, rundownApplyDelay);
|
||||
|
||||
router.delete('/', rundownArrayOfIds, preventIfFrozen, deletesEventById);
|
||||
router.delete('/all', preventIfFrozen, rundownDelete);
|
||||
router.delete('/', rundownArrayOfIds, deletesEventById);
|
||||
router.delete('/all', rundownDelete);
|
||||
|
||||
@@ -21,15 +21,6 @@ export const rundownPutValidator = [
|
||||
},
|
||||
];
|
||||
|
||||
export const rundownFrozenPostValidator = [
|
||||
body('frozen').isBoolean().exists(),
|
||||
(req: Request, res: Response, next: NextFunction) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) return res.status(422).json({ errors: errors.array() });
|
||||
next();
|
||||
},
|
||||
]
|
||||
|
||||
export const rundownBatchPutValidator = [
|
||||
body('data').isObject().exists(),
|
||||
body('ids').isArray().exists(),
|
||||
|
||||
@@ -241,6 +241,11 @@ const actionHandlers: Record<string, ActionHandler> = {
|
||||
const timeInMs = numberOrError(command.duration) * 1000;
|
||||
reply.payload = auxTimerService.setTime(timeInMs);
|
||||
}
|
||||
if ('addtime' in command) {
|
||||
// convert addTime in seconds to ms
|
||||
const timeInMs = numberOrError(command.addtime) * 1000;
|
||||
reply.payload = auxTimerService.addTime(timeInMs);
|
||||
}
|
||||
if ('direction' in command) {
|
||||
if (command.direction === SimpleDirection.CountUp || command.direction === SimpleDirection.CountDown) {
|
||||
reply.payload = auxTimerService.setDirection(command.direction);
|
||||
|
||||
+38
-28
@@ -6,11 +6,11 @@ import expressStaticGzip from 'express-static-gzip';
|
||||
import http, { Server } from 'http';
|
||||
import cors from 'cors';
|
||||
import serverTiming from 'server-timing';
|
||||
import { extname, resolve } from 'path';
|
||||
import { extname } from 'node:path';
|
||||
|
||||
// import utils
|
||||
import { publicDir, srcDir } from './setup/index.js';
|
||||
import { environment, isProduction, updateRouterPrefix } from './externals.js';
|
||||
import { publicDir, srcDir, srcFiles } from './setup/index.js';
|
||||
import { environment, isOntimeCloud, isProduction, updateRouterPrefix } from './externals.js';
|
||||
import { ONTIME_VERSION } from './ONTIME_VERSION.js';
|
||||
import { consoleSuccess, consoleHighlight, consoleError } from './utils/console.js';
|
||||
|
||||
@@ -53,8 +53,14 @@ if (!canLog) {
|
||||
console.log(`Ontime public directory at ${publicDir.root} `);
|
||||
}
|
||||
|
||||
// calls an update to the client router prefix
|
||||
updateRouterPrefix();
|
||||
/**
|
||||
* When running in Ontime cloud, the client is not at the root segment
|
||||
* ie: https://cloud.getontime.com/client-hash/timer
|
||||
* This means:
|
||||
* - changing the base path in the index.html file
|
||||
* - prepending all express routes with the given prefix
|
||||
*/
|
||||
const prefix = updateRouterPrefix();
|
||||
|
||||
// Create express APP
|
||||
const app = express();
|
||||
@@ -75,20 +81,20 @@ app.use(express.urlencoded({ extended: true }));
|
||||
app.use(express.json({ limit: '1mb' }));
|
||||
|
||||
// Implement route endpoints
|
||||
app.use('/data', appRouter); // router for application data
|
||||
app.use('/api', integrationRouter); // router for integrations
|
||||
app.use(`${prefix}/data`, appRouter); // router for application data
|
||||
app.use(`${prefix}/api`, integrationRouter); // router for integrations
|
||||
|
||||
// serve static external files
|
||||
app.use('/external', express.static(publicDir.externalDir));
|
||||
app.use('/user', express.static(publicDir.userDir));
|
||||
|
||||
// if the user reaches to the root, we show a 404
|
||||
app.use('/external', (req, res) => {
|
||||
app.use(`${prefix}/external`, express.static(publicDir.externalDir));
|
||||
app.use(`${prefix}/external`, (req, res) => {
|
||||
// if the user reaches to the root, we show a 404
|
||||
res.status(404).send(`${req.originalUrl} not found`);
|
||||
});
|
||||
app.use(`${prefix}/user`, express.static(publicDir.userDir));
|
||||
|
||||
// serve static - react, in dev/test mode we fetch the React app from module
|
||||
app.use(
|
||||
prefix,
|
||||
expressStaticGzip(srcDir.clientDir, {
|
||||
enableBrotli: true,
|
||||
orderPreference: ['br'],
|
||||
@@ -111,8 +117,8 @@ app.use(
|
||||
}),
|
||||
);
|
||||
|
||||
app.get('*', (_req, res) => {
|
||||
res.sendFile(resolve(srcDir.clientDir, 'index.html'));
|
||||
app.get(`${prefix}/*`, (_req, res) => {
|
||||
res.sendFile(srcFiles.clientIndexHtml);
|
||||
});
|
||||
|
||||
// Implement catch all
|
||||
@@ -183,7 +189,7 @@ export const startServer = async (
|
||||
const portError = resultPort !== desiredPort;
|
||||
await getDataProvider().setSettings({ ...settings, serverPort: resultPort });
|
||||
|
||||
socket.init(expressServer);
|
||||
socket.init(expressServer, prefix);
|
||||
|
||||
/**
|
||||
* Module initialises the services and provides initial payload for the store
|
||||
@@ -209,7 +215,6 @@ export const startServer = async (
|
||||
playback: SimplePlayback.Stop,
|
||||
direction: SimpleDirection.CountDown,
|
||||
},
|
||||
frozen: false,
|
||||
ping: -1,
|
||||
});
|
||||
|
||||
@@ -228,10 +233,10 @@ export const startServer = async (
|
||||
runtimeService.init(maybeRestorePoint);
|
||||
|
||||
const nif = getNetworkInterfaces();
|
||||
consoleSuccess(`Local: http://localhost:${resultPort}/editor`);
|
||||
consoleSuccess(`Local: http://localhost:${resultPort}${prefix}/editor`);
|
||||
for (const key in nif) {
|
||||
const address = nif[key].address;
|
||||
consoleSuccess(`Network: http://${address}:${resultPort}/editor`);
|
||||
consoleSuccess(`Network: http://${address}:${resultPort}${prefix}/editor`);
|
||||
}
|
||||
|
||||
const returnMessage = `Ontime is listening on port ${resultPort}`;
|
||||
@@ -253,16 +258,6 @@ export const startIntegrations = async () => {
|
||||
// if a config is not provided, we use the persisted one
|
||||
const { osc, http } = getDataProvider().getData();
|
||||
|
||||
if (osc) {
|
||||
logger.info(LogOrigin.Tx, 'Initialising OSC Integration...');
|
||||
try {
|
||||
oscIntegration.init(osc);
|
||||
integrationService.register(oscIntegration);
|
||||
} catch (error) {
|
||||
logger.error(LogOrigin.Tx, 'OSC Integration initialisation failed');
|
||||
}
|
||||
}
|
||||
|
||||
if (http) {
|
||||
logger.info(LogOrigin.Tx, 'Initialising HTTP Integration...');
|
||||
try {
|
||||
@@ -272,6 +267,21 @@ export const startIntegrations = async () => {
|
||||
logger.error(LogOrigin.Tx, `HTTP Integration initialisation failed: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (isOntimeCloud) {
|
||||
logger.info(LogOrigin.Tx, 'Skipping OSC in Cloud environment...');
|
||||
return;
|
||||
}
|
||||
|
||||
if (osc) {
|
||||
logger.info(LogOrigin.Tx, 'Initialising OSC Integration...');
|
||||
try {
|
||||
oscIntegration.init(osc);
|
||||
integrationService.register(oscIntegration);
|
||||
} catch (error) {
|
||||
logger.error(LogOrigin.Tx, 'OSC Integration initialisation failed');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -37,6 +37,14 @@ export class SimpleTimer {
|
||||
return this.state;
|
||||
}
|
||||
|
||||
public addTime(millis: number): SimpleTimerState {
|
||||
this.state.duration += millis;
|
||||
// the value of current will be overridden when update is called,
|
||||
// but if we are in pause or stop state it will not be changed so we do it here
|
||||
this.state.current += millis;
|
||||
return this.state;
|
||||
}
|
||||
|
||||
public setDirection(direction: SimpleDirection, timeNow: number): SimpleTimerState {
|
||||
// if we are playing, we need to reset the targets
|
||||
if (this.state.playback === SimplePlayback.Start) {
|
||||
|
||||
@@ -177,5 +177,60 @@ describe('SimpleTimer count-down', () => {
|
||||
playback: SimplePlayback.Start,
|
||||
});
|
||||
});
|
||||
|
||||
test('adding time affects final result', () => {
|
||||
timer.reset();
|
||||
|
||||
timer.setTime(1000);
|
||||
timer.start(0);
|
||||
timer.update(100);
|
||||
expect(timer.state).toMatchObject({ current: 900, duration: 1000 });
|
||||
|
||||
timer.addTime(1000);
|
||||
timer.update(200);
|
||||
expect(timer.state).toMatchObject({ current: 1800, duration: 2000 });
|
||||
|
||||
timer.update(300);
|
||||
expect(timer.state).toMatchObject({ current: 1700, duration: 2000 });
|
||||
|
||||
timer.stop();
|
||||
expect(timer.state).toMatchObject({ current: 1000, duration: 1000 });
|
||||
});
|
||||
|
||||
test('adding time affects paused timer', () => {
|
||||
timer.reset();
|
||||
|
||||
timer.setTime(1000);
|
||||
timer.start(0);
|
||||
timer.update(100);
|
||||
expect(timer.state).toMatchObject({ current: 900, duration: 1000 });
|
||||
|
||||
timer.pause(200);
|
||||
expect(timer.state).toMatchObject({ current: 900, duration: 1000 });
|
||||
|
||||
timer.addTime(1000);
|
||||
timer.update(200);
|
||||
expect(timer.state).toMatchObject({ current: 1900, duration: 2000 });
|
||||
|
||||
timer.start(300);
|
||||
expect(timer.state).toMatchObject({ current: 1800, duration: 2000 });
|
||||
});
|
||||
|
||||
test('adding time affects stopped timer, but returns to initial valuses when stopped again', () => {
|
||||
timer.reset();
|
||||
|
||||
timer.setTime(1000);
|
||||
expect(timer.state).toMatchObject({ current: 1000, duration: 1000 });
|
||||
|
||||
timer.addTime(1000);
|
||||
expect(timer.state).toMatchObject({ current: 2000, duration: 2000 });
|
||||
|
||||
timer.start(0);
|
||||
timer.update(100);
|
||||
expect(timer.state).toMatchObject({ current: 1900, duration: 2000 });
|
||||
|
||||
timer.stop();
|
||||
expect(timer.state).toMatchObject({ current: 1000, duration: 1000 });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { MILLIS_PER_MINUTE } from 'ontime-utils';
|
||||
|
||||
export const timerConfig = {
|
||||
skipLimit: 1000, // threshold of skip for recalculating
|
||||
skipLimit: 1000, // threshold of skip for recalculating, values lower than updateRate can cause issues with rolling over midnight
|
||||
updateRate: 32, // how often do we update the timer
|
||||
notificationRate: 1000, // how often do we notify clients and integrations
|
||||
triggerAhead: 10, // how far ahead do we trigger the end event
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
*/
|
||||
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
import { resolve } from 'node:path';
|
||||
|
||||
import { srcFiles } from './setup/index.js';
|
||||
|
||||
// =================================================
|
||||
// resolve running environment
|
||||
@@ -13,25 +14,26 @@ export const isTest = Boolean(process.env.IS_TEST);
|
||||
export const environment = isTest ? 'test' : env;
|
||||
export const isDocker = env === 'docker';
|
||||
export const isProduction = isDocker || (env === 'production' && !isTest);
|
||||
|
||||
export const isOntimeCloud = Boolean(process.env.IS_CLOUD);
|
||||
/**
|
||||
* Updates the router prefix in the index.html file
|
||||
* This is only needed in the cloud environment where the client is not at the root segment
|
||||
* ie: https://cloud.getontime.com/client-hash/timer
|
||||
*/
|
||||
export function updateRouterPrefix(prefix: string | undefined = process.env.ROUTER_PREFIX) {
|
||||
export function updateRouterPrefix(prefix: string | undefined = process.env.ROUTER_PREFIX): string {
|
||||
if (!prefix) {
|
||||
return;
|
||||
return '';
|
||||
}
|
||||
|
||||
const indexFile = resolve('.', 'client', 'index.html');
|
||||
try {
|
||||
const data = readFileSync(indexFile, { encoding: 'utf-8', flag: 'r' }).replace(
|
||||
/<base href="[^"]*">/g,
|
||||
`<base href="${prefix}>"`,
|
||||
const data = readFileSync(srcFiles.clientIndexHtml, { encoding: 'utf-8', flag: 'r' }).replace(
|
||||
'<base href="/" />',
|
||||
`<base href="/${prefix}/" />`,
|
||||
);
|
||||
writeFileSync(indexFile, data, { encoding: 'utf-8', flag: 'w' });
|
||||
writeFileSync(srcFiles.clientIndexHtml, data, { encoding: 'utf-8', flag: 'w' });
|
||||
} catch (_error) {
|
||||
/** unhandled */
|
||||
}
|
||||
|
||||
return `/${prefix}`;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { SimpleDirection, SimpleTimerState } from 'ontime-types';
|
||||
import { SimpleDirection, SimplePlayback, SimpleTimerState } from 'ontime-types';
|
||||
|
||||
import { SimpleTimer } from '../../classes/simple-timer/SimpleTimer.js';
|
||||
import { eventStore } from '../../stores/EventStore.js';
|
||||
@@ -57,6 +57,15 @@ export class AuxTimerService {
|
||||
return this.timer.setTime(duration);
|
||||
}
|
||||
|
||||
@broadcastReturn
|
||||
addTime(millis: number) {
|
||||
if (this.timer.state.playback === SimplePlayback.Start) {
|
||||
this.timer.addTime(millis);
|
||||
return this.timer.update(this.getTime());
|
||||
}
|
||||
return this.timer.addTime(millis);
|
||||
}
|
||||
|
||||
@broadcastReturn
|
||||
private update() {
|
||||
return this.timer.update(this.getTime());
|
||||
|
||||
@@ -128,18 +128,18 @@ export class OscIntegration implements IIntegration<OscSubscription, OSCSettings
|
||||
}
|
||||
|
||||
private shutdownTX() {
|
||||
logger.info(LogOrigin.Rx, 'Shutting down OSC integration');
|
||||
if (this.oscServer) {
|
||||
this.oscServer?.shutdown();
|
||||
this.oscServer = null;
|
||||
if (this.oscClient) {
|
||||
logger.info(LogOrigin.Tx, 'Shutting down OSC integration');
|
||||
this.oscClient?.close();
|
||||
this.oscClient = null;
|
||||
}
|
||||
}
|
||||
|
||||
private shutdownRX() {
|
||||
logger.info(LogOrigin.Tx, 'Shutting down OSC integration');
|
||||
if (this.oscClient) {
|
||||
this.oscClient?.close();
|
||||
this.oscClient = null;
|
||||
if (this.oscServer) {
|
||||
logger.info(LogOrigin.Rx, 'Shutting down OSC integration');
|
||||
this.oscServer?.shutdown();
|
||||
this.oscServer = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { DatabaseModel, LogOrigin, ProjectFileListResponse } from 'ontime-types';
|
||||
import { getErrorMessage } from 'ontime-utils';
|
||||
|
||||
import { copyFile, rename } from 'fs/promises';
|
||||
import { copyFile } from 'fs/promises';
|
||||
|
||||
import { logger } from '../../classes/Logger.js';
|
||||
import { publicDir } from '../../setup/index.js';
|
||||
import {
|
||||
appendToName,
|
||||
dockerSafeRename,
|
||||
ensureDirectory,
|
||||
generateUniqueFileName,
|
||||
getFileNameFromPath,
|
||||
@@ -93,7 +94,7 @@ async function handleCorruptedFile(filePath: string, fileName: string): Promise<
|
||||
|
||||
// and make a new file with the recovered data
|
||||
const newPath = appendToName(filePath, '(recovered)');
|
||||
await rename(filePath, newPath);
|
||||
await dockerSafeRename(filePath, newPath);
|
||||
return getFileNameFromPath(newPath);
|
||||
}
|
||||
|
||||
@@ -231,7 +232,7 @@ export async function renameProjectFile(originalFile: string, newFilename: strin
|
||||
}
|
||||
|
||||
const pathToRenamed = getPathToProject(newFilename);
|
||||
await rename(projectFilePath, pathToRenamed);
|
||||
await dockerSafeRename(projectFilePath, pathToRenamed);
|
||||
|
||||
// Update the last loaded project config if current loaded project is the one being renamed
|
||||
const isLoaded = await isLastLoadedProject(originalFile);
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
import { DatabaseModel, MaybeString, ProjectFile } from 'ontime-types';
|
||||
|
||||
import { existsSync } from 'fs';
|
||||
import { copyFile, readFile, rename, stat } from 'fs/promises';
|
||||
import { copyFile, readFile, stat } from 'fs/promises';
|
||||
import { extname, join } from 'path';
|
||||
|
||||
import { publicDir } from '../../setup/index.js';
|
||||
import { ensureDirectory, getFilesFromFolder, removeFileExtension } from '../../utils/fileManagement.js';
|
||||
import {
|
||||
dockerSafeRename,
|
||||
ensureDirectory,
|
||||
getFilesFromFolder,
|
||||
removeFileExtension,
|
||||
} from '../../utils/fileManagement.js';
|
||||
|
||||
/**
|
||||
* Handles the upload of a new project file
|
||||
@@ -14,13 +19,13 @@ import { ensureDirectory, getFilesFromFolder, removeFileExtension } from '../../
|
||||
*/
|
||||
export async function handleUploaded(filePath: string, name: string) {
|
||||
const newFilePath = join(publicDir.projectsDir, name);
|
||||
await rename(filePath, newFilePath);
|
||||
await dockerSafeRename(filePath, newFilePath);
|
||||
}
|
||||
|
||||
export async function handleImageUpload(filePath: string, name: string): Promise<string> {
|
||||
ensureDirectory(publicDir.logoDir);
|
||||
const newFilePath = join(publicDir.logoDir, name);
|
||||
await rename(filePath, newFilePath);
|
||||
await dockerSafeRename(filePath, newFilePath);
|
||||
|
||||
return name;
|
||||
}
|
||||
@@ -86,7 +91,7 @@ export async function copyCorruptFile(filePath: string, name: string): Promise<v
|
||||
*/
|
||||
export async function moveCorruptFile(filePath: string, name: string): Promise<void> {
|
||||
const newPath = join(publicDir.corruptDir, name);
|
||||
return rename(filePath, newPath);
|
||||
return dockerSafeRename(filePath, newPath);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -21,7 +21,6 @@ import { runtimeService } from '../runtime-service/RuntimeService.js';
|
||||
|
||||
import * as cache from './rundownCache.js';
|
||||
import { getPlayableEvents, getTimedEvents } from './rundownUtils.js';
|
||||
import { eventStore } from '../../stores/EventStore.js';
|
||||
|
||||
type PatchWithId = (Partial<OntimeEvent> | Partial<OntimeBlock> | Partial<OntimeDelay>) & { id: string };
|
||||
|
||||
@@ -275,7 +274,3 @@ export async function initRundown(rundown: Readonly<OntimeRundown>, customFields
|
||||
// notify timer of change
|
||||
notifyChanges({ timer: true, external: true, reload: true });
|
||||
}
|
||||
|
||||
export async function setFrozenState(state: boolean) {
|
||||
eventStore.set('frozen', state);
|
||||
}
|
||||
|
||||
@@ -99,10 +99,15 @@ class RuntimeService {
|
||||
});
|
||||
this.handleLoadNext();
|
||||
this.rollLoaded(keepOffset);
|
||||
} else if (skippedOutOfEvent(newState, this.lastIntegrationClockUpdate, timerConfig.skipLimit)) {
|
||||
} else if (
|
||||
// if there is no previous clock, we could not have skipped
|
||||
RuntimeService.previousState?.clock &&
|
||||
skippedOutOfEvent(newState, RuntimeService.previousState.clock, timerConfig.skipLimit)
|
||||
) {
|
||||
// if we have skipped out of the event, we will recall roll
|
||||
// to push the playback to the right place
|
||||
// this comes with the caveat that we will lose our runtime data
|
||||
logger.warning(LogOrigin.Playback, 'Time skip detected, reloading roll');
|
||||
this.roll(true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,6 +77,8 @@ export const srcDir = {
|
||||
} as const;
|
||||
|
||||
export const srcFiles = {
|
||||
/** Path to start index.html */
|
||||
clientIndexHtml: join(srcDir.clientDir, 'index.html'),
|
||||
/** Path to bundled CSS */
|
||||
cssOverride: join(srcDir.root, config.user, config.styles.directory, config.styles.filename),
|
||||
/** Path to bundled external readme */
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
import { cleanURL } from '../url.js';
|
||||
|
||||
describe('url is correctly formatted', () => {
|
||||
it('has no leading spaces', () => {
|
||||
const test = ' http://testing';
|
||||
const expected = 'http://testing';
|
||||
expect(cleanURL(test)).toBe(expected);
|
||||
});
|
||||
|
||||
it('has no trailing spaces', () => {
|
||||
const test = 'http://testing ';
|
||||
const expected = 'http://testing';
|
||||
expect(cleanURL(test)).toBe(expected);
|
||||
});
|
||||
|
||||
it('doesnt contain spaces', () => {
|
||||
const test = 'http://t e s t i n g';
|
||||
const expected = 'http://t%20e%20s%20t%20i%20n%20g';
|
||||
expect(cleanURL(test)).toBe(expected);
|
||||
});
|
||||
|
||||
it('only contains allowed characters', () => {
|
||||
const test = 'http://<>[]{}|^';
|
||||
const expected = 'http://';
|
||||
expect(cleanURL(test)).toBe(expected);
|
||||
});
|
||||
|
||||
it('begins with http://', () => {
|
||||
const test = 'ontime.com';
|
||||
const expected = 'http://ontime.com';
|
||||
expect(cleanURL(test)).toBe(expected);
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,5 @@
|
||||
import { existsSync, mkdirSync } from 'fs';
|
||||
import { readdir, copyFile } from 'fs/promises';
|
||||
import { existsSync, mkdirSync, PathLike } from 'fs';
|
||||
import { readdir, copyFile, unlink } from 'fs/promises';
|
||||
import { basename, extname, join, parse } from 'path';
|
||||
|
||||
/**
|
||||
@@ -105,3 +105,12 @@ export async function copyDirectory(src: string, dest: string) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* workaround avoids origin errors in docker deployments
|
||||
* EXDEV cross-device link not permitted
|
||||
*/
|
||||
export async function dockerSafeRename(oldPath: PathLike, newPath: PathLike) {
|
||||
await copyFile(oldPath, newPath);
|
||||
await unlink(oldPath);
|
||||
}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* @description Cleans given url
|
||||
* @param {string} url - URL to be checked
|
||||
* @returns {string} Sanitized url
|
||||
*/
|
||||
export const cleanURL = (url: string): string => {
|
||||
// trim whitespaces
|
||||
let sanitised = url.trim();
|
||||
|
||||
// clear any whitespaces
|
||||
sanitised = sanitised.split(' ').join('%20');
|
||||
|
||||
// contain only allowed characters
|
||||
sanitised = sanitised.replace(/([@\s<>[\]{}|\\^])+/g, '');
|
||||
|
||||
// starts with http://
|
||||
if (!sanitised.startsWith('http://')) sanitised = `http://${sanitised}`;
|
||||
|
||||
return sanitised;
|
||||
};
|
||||
@@ -1,5 +1,3 @@
|
||||
version: "3"
|
||||
|
||||
services:
|
||||
ontime:
|
||||
container_name: ontime
|
||||
|
||||
@@ -4,6 +4,10 @@ const fileToUpload = 'e2e/tests/fixtures/test-db.json';
|
||||
|
||||
test('project file upload', async ({ page }) => {
|
||||
await page.goto('http://localhost:4001/editor');
|
||||
|
||||
// close the welcome modal if it is open
|
||||
await page.keyboard.down('Escape');
|
||||
|
||||
await page.getByRole('button', { name: 'Edit' }).click();
|
||||
await page.getByRole('button', { name: 'Clear rundown' }).click();
|
||||
await page.getByRole('button', { name: 'Delete all' }).click();
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user