feat: parse timeToEnd from excel

refactor: extract time-to-end
refactor: smaller settings
2026-09-09 16:19:47 +00:00 · 2024-12-16 13:38:49 +01:00 · 2024-12-16 13:38:46 +01:00 · 2024-12-15 11:04:15 +01:00 · 2024-12-15 11:04:15 +01:00 · 2024-12-15 11:04:15 +01:00
213 changed files with 2917 additions and 1703 deletions
@@ -39,6 +39,7 @@ dist/
 # docker utils
 ontime-db
 ontime-external/
+ontime-data/

 # versioning file
 **/ONTIME_VERSION.js
@@ -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.7.1",
+    "version": "3.9.5",
    "author": "Carlos Valente",
    "description": "Time keeping for live events",
    "repository": "https://github.com/cpvalente/ontime",
@@ -1,37 +1,27 @@
 <!doctype html>
-<html lang='en'>
-<head>
-  <meta charset='utf-8' />
-  <link rel='icon' href='/favicon.ico' />
-  <meta name='viewport' content='width=device-width, initial-scale=1' />
-  <meta name='theme-color' content='#121212' />
-  <meta name='ontime' content='ontime - event timer manager' />
-  <link rel='apple-touch-icon' href='/logo192.png' />
-  <link
-    rel='icon'
-    type='image/png'
-    sizes='32x32'
-    href='/favicon-32x32.png'
-  />
-  <link
-    rel='icon'
-    type='image/png'
-    sizes='16x16'
-    href='/favicon-16x16.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.7.1",
+  "version": "3.9.5",
  "private": true,
  "type": "module",
  "dependencies": {
@@ -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": "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",
@@ -87,9 +87,9 @@
    "sass": "^1.57.1",
    "typescript": "catalog:",
    "vite": "^5.2.11",
-    "vite-plugin-compression2": "^0.12.0",
+    "vite-plugin-compression2": "^1.3.3",
    "vite-plugin-svgr": "^4.2.0",
    "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.6.0"
+    "vitest": "catalog:"
  }
 }
@@ -4,18 +4,11 @@
  "icons": [
    {
      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "ontime-logo.png",
+      "type": "image/png"
    }
  ],
  "scope": "/",
@@ -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'));
@@ -32,12 +32,14 @@ const Timeline = React.lazy(() => import('./views/timeline/TimelinePage'));
 const Public = React.lazy(() => import('./features/viewers/public/Public'));
 const Lower = React.lazy(() => import('./features/viewers/lower-thirds/LowerThird'));
 const StudioClock = React.lazy(() => import('./features/viewers/studio/StudioClock'));
+const ProjectInfo = React.lazy(() => import('./views/project-info/ProjectInfo'));

 const STimer = withPreset(withData(TimerView));
 const SMinimalTimer = withPreset(withData(MinimalTimerView));
 const SClock = withPreset(withData(ClockView));
 const SCountdown = withPreset(withData(Countdown));
 const SBackstage = withPreset(withData(Backstage));
+const SProjectInfo = withPreset(withData(ProjectInfo));
 const SPublic = withPreset(withData(Public));
 const SLowerThird = withPreset(withData(Lower));
 const SStudio = withPreset(withData(StudioClock));
@@ -142,6 +144,14 @@ export default function AppRouter() {
            </ViewLoader>
          }
        />
+        <Route
+          path='/info'
+          element={
+            <ViewLoader>
+              <SProjectInfo />
+            </ViewLoader>
+          }
+        />

        {/*/!* Protected Routes *!/*/}
        <Route path='/editor' element={<Editor />} />
@@ -1,3 +1,5 @@
+import { serverURL } from '../../externals';
+
 // keys in tanstack store
 export const APP_INFO = ['appinfo'];
 export const APP_SETTINGS = ['appSettings'];
@@ -14,19 +16,7 @@ export const URL_PRESETS = ['urlpresets'];
 export const VIEW_SETTINGS = ['viewSettings'];
 export const CLIENT_LIST = ['clientList'];

-// resolve location
-const location = window.location;
-const socketProtocol = location.protocol === 'https:' ? 'wss' : 'ws';
-export const isProduction = import.meta.env.MODE === 'production';
-export const isDev = !isProduction;
-export const isLocalhost = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
-
-// resolve port
-const STATIC_PORT = 4001;
-export const serverPort = isProduction ? location.port : STATIC_PORT;
-export const serverURL = `${location.protocol}//${location.hostname}:${serverPort}`;
-export const websocketUrl = `${socketProtocol}://${location.hostname}:${serverPort}/ws`;
-
+// API URLs
 export const apiEntryUrl = `${serverURL}/data`;

 export const projectDataURL = `${serverURL}/project`;
@@ -36,3 +26,4 @@ export const ontimeURL = `${serverURL}/ontime`;
 export const userAssetsPath = 'user';
 export const cssOverridePath = 'styles/override.css';
 export const overrideStylesURL = `${serverURL}/${userAssetsPath}/${cssOverridePath}`;
+export const projectLogoPath = `${serverURL}/${userAssetsPath}/logo`;
@@ -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';
@@ -112,6 +112,14 @@ export async function loadProject(filename: string): Promise<MessageResponse> {
  return res.data;
 }

+/**
+ * HTTP request to load the demo project file
+ */
+export async function loadDemo(): Promise<MessageResponse> {
+  const res = await axios.post(`${dbPath}/demo`);
+  return res.data;
+}
+
 /**
 * HTTP request to duplicate a project file
 */
@@ -1,5 +1,5 @@
 import axios, { AxiosResponse } from 'axios';
-import { ProjectData } from 'ontime-types';
+import { ProjectData, ProjectLogoResponse } from 'ontime-types';

 import { apiEntryUrl } from './constants';

@@ -19,3 +19,18 @@ export async function getProjectData(): Promise<ProjectData> {
 export async function postProjectData(data: ProjectData): Promise<AxiosResponse<ProjectData>> {
  return axios.post(projectPath, data);
 }
+
+/**
+ * HTTP request to upload a project logo
+ */
+export async function uploadProjectLogo(file: File): Promise<AxiosResponse<ProjectLogoResponse>> {
+  const formData = new FormData();
+  formData.append('image', file);
+  const response = await axios.post(`${projectPath}/upload`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
+
+  return response;
+}
@@ -5,6 +5,7 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import { useEmitLog } from '../../../stores/logger';

 interface TimeInputProps<T extends string> {
+  id?: T;
  name: T;
  submitHandler: (field: T, value: string) => void;
  time?: number;
@@ -15,7 +16,7 @@ interface TimeInputProps<T extends string> {
 }

 export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
-  const { name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
+  const { id, name, submitHandler, time = 0, placeholder, disabled, align = 'center', className } = props;
  const { emitError } = useEmitLog();
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [value, setValue] = useState<string>('');
@@ -117,6 +118,7 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {

  return (
    <Input
+      id={id}
      disabled={disabled}
      size='sm'
      ref={inputRef}
@@ -1,8 +1,7 @@
-import { useEffect, useState } from 'react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';

-import { debounce } from '../../utils/debounce';
+import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';

 import style from './NavigationMenu.module.scss';

@@ -13,32 +12,10 @@ interface FloatingNavigationProps {

 export default function FloatingNavigation(props: FloatingNavigationProps) {
  const { toggleMenu, toggleSettings } = props;
-  const [showButton, setShowButton] = useState(false);
-
-  // show on mouse move
-  useEffect(() => {
-    let fadeOut: NodeJS.Timeout | null = null;
-    const setShowMenuTrue = () => {
-      setShowButton(true);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-      fadeOut = setTimeout(() => setShowButton(false), 3000);
-    };
-
-    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
-
-    document.addEventListener('mousemove', debouncedShowMenu);
-    return () => {
-      document.removeEventListener('mousemove', debouncedShowMenu);
-      if (fadeOut) {
-        clearTimeout(fadeOut);
-      }
-    };
-  }, []);
+  const isButtonShown = useFadeOutOnInactivity();

  return (
-    <div className={`${style.buttonContainer} ${!showButton ? style.hidden : ''}`}>
+    <div className={`${style.buttonContainer} ${!isButtonShown ? style.hidden : ''}`}>
      <button
        onClick={toggleMenu}
        aria-label='toggle menu'
@@ -38,6 +38,16 @@ $button-size: 3rem;
  border-radius: 3px;
 }

+.lockIcon {
+  font-size: 1.5rem;
+  display: grid;
+  place-content: center;
+  border-radius: 3px;
+  background-color: transparent;
+  color: $active-indicator;
+  cursor: default;
+}
+
 .navButton {
  @extend .button;
  z-index: 3;
@@ -17,15 +17,15 @@ 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 } from '../../../externals';
 import { navigatorConstants } from '../../../viewerConfig';
-import { isLocalhost, serverPort } from '../../api/constants';
 import useClickOutside from '../../hooks/useClickOutside';
 import { useElectronEvent } from '../../hooks/useElectronEvent';
 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,15 @@
+import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
+
+import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
+
+import style from './NavigationMenu.module.scss';
+
+export default function ViewLockedIcon() {
+  const isLockIconShown = useFadeOutOnInactivity();
+
+  return (
+    <div className={`${style.buttonContainer} ${!isLockIconShown ? style.hidden : ''}`}>
+      <IoLockClosedOutline className={style.lockIcon} />
+    </div>
+  );
+}
@@ -2,13 +2,18 @@ import { memo, useCallback } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useDisclosure } from '@chakra-ui/react';

+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
+import ViewLockedIcon from './ViewLockedIcon';

 function ViewNavigationMenu() {
  const [searchParams, setSearchParams] = useSearchParams();
  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();

+  const isViewLocked = isStringBoolean(searchParams.get('locked'));
+
  const showEditFormDrawer = useCallback(() => {
    searchParams.set('edit', 'true');
    setSearchParams(searchParams);
@@ -16,6 +21,10 @@ function ViewNavigationMenu() {

  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());

+  if (isViewLocked) {
+    return <ViewLockedIcon />;
+  }
+
  return (
    <>
      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
@@ -1,6 +1,6 @@
 import { PropsWithChildren, useCallback, useContext } from 'react';

-import { isLocalhost } from '../../api/constants';
+import { isLocalhost } from '../../../externals';
 import { AppContext } from '../../context/AppContext';

 import PinPage from './PinPage';
@@ -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>
+  );
+}
@@ -0,0 +1,11 @@
+import { projectLogoPath } from '../../api/constants';
+
+interface ViewLogoProps {
+  name: string;
+  className: string;
+}
+
+export default function ViewLogo(props: ViewLogoProps) {
+  const { name, className } = props;
+  return <img src={`${projectLogoPath}/${name}`} className={className} />;
+}
@@ -55,7 +55,7 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOp
      // unfortunately this means we run all the strings through the sanitation
      const valueWithoutHash = sanitiseColour(value);
      if (defaultValues[id] !== valueWithoutHash) {
-        handleValueString(id, value);
+        handleValueString(id, valueWithoutHash);
      }
    }
  });
@@ -115,8 +115,6 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
    const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
    const newSearchParams = getURLSearchParamsFromObj(newParamsObject, viewOptions);
    setSearchParams(newSearchParams);
-
-    onClose();
  };

  return (
@@ -2,7 +2,8 @@ import { useQuery } from '@tanstack/react-query';
 import { dayInMs } from 'ontime-utils';

 import { version } from '../../../../../package.json';
-import { APP_VERSION, isLocalhost } from '../api/constants';
+import { isLocalhost } from '../../externals';
+import { APP_VERSION } from '../api/constants';
 import { getLatestVersion, HasUpdate } from '../api/external';

 const placeholder: HasUpdate & { hasUpdates: boolean } = { url: '', version: '', hasUpdates: false };
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { ProjectFileListResponse } from 'ontime-types';

@@ -22,3 +23,23 @@ export function useProjectList() {
  });
  return { data: data ?? placeholderProjectList, status, refetch };
 }
+
+export function useOrderedProjectList() {
+  const response = useProjectList();
+  const { files, lastLoadedProject } = response.data;
+
+  const reorderedProjectFiles = useMemo(() => {
+    if (!files.length) return [];
+
+    const currentlyLoadedIndex = files.findIndex((project) => project.filename === lastLoadedProject);
+
+    if (currentlyLoadedIndex === -1) return files;
+
+    const projectFiles = [...files];
+    const current = projectFiles.splice(currentlyLoadedIndex, 1)[0];
+
+    return [current, ...projectFiles];
+  }, [files, lastLoadedProject]);
+
+  return { ...response, data: { reorderedProjectFiles, lastLoadedProject: response.data.lastLoadedProject } };
+}
@@ -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]);
 };
@@ -1,6 +1,8 @@
 import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';

+import { addDialog } from '../stores/dialogStore';
+
 const isElectron = window.process?.type === 'renderer';
 const ipcRenderer = isElectron ? window.require('electron').ipcRenderer : null;

@@ -24,6 +26,12 @@ export function useElectronListener() {
      ipcRenderer.on('request-editor-location', (_event: unknown, location: string) => {
        navigate(location, { relative: 'route' });
      });
+
+      ipcRenderer.on('dialog', (_event: unknown, dialog: string) => {
+        if (dialog === 'welcome') {
+          addDialog('welcome');
+        }
+      });
    }

    // Clean the listener after the component is dismounted
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import { debounce } from '../../common/utils/debounce';
+
+export const useFadeOutOnInactivity = () => {
+  const [isMouseMoved, setIsMouseMoved] = useState(false);
+
+  // show on mouse move
+  useEffect(() => {
+    let fadeOut: NodeJS.Timeout | null = null;
+    const setShowMenuTrue = () => {
+      setIsMouseMoved(true);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+      fadeOut = setTimeout(() => setIsMouseMoved(false), 3000);
+    };
+
+    const debouncedShowMenu = debounce(setShowMenuTrue, 1000);
+
+    document.addEventListener('mousemove', debouncedShowMenu);
+    return () => {
+      document.removeEventListener('mousemove', debouncedShowMenu);
+      if (fadeOut) {
+        clearTimeout(fadeOut);
+      }
+    };
+  }, []);
+
+  return isMouseMoved;
+};
@@ -6,7 +6,7 @@

 import { useMemo, useRef } from 'react';

-import { isDev } from '../api/constants';
+import { isDev } from '../../externals';

 type noop = (this: any, ...args: any[]) => any;

@@ -65,6 +65,7 @@ export const useMessagePreview = () => {
    showExternalMessage: state.message.timer.secondarySource === 'external' && Boolean(state.message.external),
    showTimerMessage: state.message.timer.visible && Boolean(state.message.timer.text),
    timerType: state.eventNow?.timerType ?? null,
+    isTimeToEnd: state.eventNow?.isTimeToEnd ?? false,
  });

  return useRuntimeStore(featureSelector);
@@ -230,3 +231,20 @@ export const useTimelineStatus = () => {

  return useRuntimeStore(featureSelector);
 };
+
+export const usePing = () => {
+  const featureSelector = (state: RuntimeStore) => ({
+    ping: state.ping,
+  });
+
+  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);
+};
@@ -7,4 +7,5 @@ export const projectDataPlaceholder: ProjectData = {
  publicInfo: '',
  backstageUrl: '',
  backstageInfo: '',
+  projectLogo: null,
 };
@@ -15,4 +15,5 @@ export type ViewExtendedTimer = {

  clock: number;
  timerType: TimerType;
+  isTimeToEnd: boolean;
 };
@@ -0,0 +1,24 @@
+import { MaybeString } from 'ontime-types';
+import { create } from 'zustand';
+
+interface DialogStore {
+  showDialog: MaybeString;
+  setDialog: (name: string) => void;
+  clearDialog: () => void;
+}
+
+/**
+ * Used to allow the server to show a dialog in the client
+ */
+export const useDialogStore = create<DialogStore>((set) => ({
+  showDialog: null,
+  clearDialog: () => set({ showDialog: null }),
+  setDialog: (name) => set({ showDialog: name }),
+}));
+
+/**
+ * Allows setting a dialog to show (outside react)
+ */
+export function addDialog(name: string): void {
+  useDialogStore.getState().setDialog(name);
+}
@@ -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 });
+}
@@ -17,6 +17,7 @@ export const cloneEvent = (event: OntimeEvent, after?: string): ClonedEvent => {
    timeEnd: event.timeEnd,
    timerType: event.timerType,
    timeStrategy: event.timeStrategy,
+    isTimeToEnd: event.isTimeToEnd,
    linkStart: event.linkStart,
    endAction: event.endAction,
    isPublic: event.isPublic,
@@ -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();
+}
@@ -1,6 +1,7 @@
 import { Log, RundownCached, RuntimeStore } from 'ontime-types';

-import { CLIENT_LIST, CUSTOM_FIELDS, isProduction, RUNDOWN, RUNTIME, websocketUrl } from '../api/constants';
+import { isProduction, websocketUrl } from '../../externals';
+import { CLIENT_LIST, CUSTOM_FIELDS, RUNDOWN, RUNTIME } from '../api/constants';
 import { invalidateAllCaches } from '../api/utils';
 import { ontimeQueryClient } from '../queryClient';
 import {
@@ -11,8 +12,9 @@ import {
  setClientRedirect,
  setClients,
 } 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;
@@ -37,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');
@@ -69,6 +72,12 @@ export const connectSocket = () => {
      }

      switch (type) {
+        case 'pong': {
+          const offset = (new Date().getTime() - new Date(payload).getTime()) * 0.5;
+          patchRuntimeProperty('ping', offset);
+          updateDevTools({ ping: offset });
+          break;
+        }
        case 'client-id': {
          if (typeof payload === 'string') {
            setClientId(payload);
@@ -111,69 +120,77 @@ export const connectSocket = () => {
          break;
        }

+        case 'dialog': {
+          if (payload.dialog === 'welcome') {
+            addDialog('welcome');
+          }
+          break;
+        }
+
        case 'ontime-log': {
          addLog(payload as Log);
          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;
        }
@@ -225,3 +242,15 @@ function updateDevTools(newData: Partial<RuntimeStore>) {
    }));
  }
 }
+
+/**
+ * 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 });
+}
@@ -34,7 +34,7 @@ export function validateProjectFile(file: File) {

  // Limit file size of a project file to around 1MB
  if (file.size > 1_000_000) {
-    throw new Error('File size limit (10MB) exceeded');
+    throw new Error('File size limit (1MB) exceeded');
  }
 }

@@ -45,3 +45,19 @@ export function isExcelFile(file: File | null) {
 export function isOntimeFile(file: File | null) {
  return file?.name.endsWith('.json');
 }
+
+/**
+ * Collection of rules for pre-validating a project file
+ * @param file
+ */
+export function validateLogo(file: File) {
+  // Check if file is empty
+  if (file.size === 0) {
+    throw new Error('File is empty');
+  }
+
+  // Limit file size of a project file to around 1MB
+  if (file.size > 1_000_000) {
+    throw new Error('File size limit (1MB) exceeded');
+  }
+}
@@ -1,6 +1,75 @@
+/**
+ * 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';
+export const discordUrl = 'https://discord.com/invite/eje3CSUEXm';

 export const documentationUrl = 'https://docs.getontime.no';
 export const customFieldsDocsUrl = 'https://docs.getontime.no/features/custom-fields/';
+
+// resolve environment
+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 isDockerImage = Boolean(import.meta.env.VITE_IS_DOCKER);
+export const isOntimeCloud = window.location.hostname.includes('cloud.getontime.no');
+
+// resolve entrypoint URLs
+
+/**
+ * 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;
+}
@@ -35,9 +35,9 @@ export function Paragraph({ children }: { children: ReactNode }) {
  return <p className={style.paragraph}>{children}</p>;
 }

-export function Card({ children, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
+export function Card({ children, className, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
  return (
-    <div className={style.card} {...props}>
+    <div className={cx([style.card, className])} {...props}>
      {children}
    </div>
  );
@@ -1,5 +1,5 @@
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
-import { documentationUrl, githubUrl, websiteUrl } from '../../../../externals';
+import { discordUrl, documentationUrl, githubUrl, websiteUrl } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

 import AppVersion from './AppVersion';
@@ -19,6 +19,7 @@ export default function AboutPanel() {
        <Panel.SubHeader>Links</Panel.SubHeader>
        <ExternalLink href={documentationUrl}>Read the docs</ExternalLink>
        <ExternalLink href={githubUrl}>Follow the project on GitHub</ExternalLink>
+        <ExternalLink href={discordUrl}>Discord server</ExternalLink>
      </Panel.Section>
      <Panel.Section>
        <Panel.SubHeader>Current version</Panel.SubHeader>
@@ -1,6 +1,6 @@
-import { version } from '../../../../../package.json';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
 import useAppVersion from '../../../../common/hooks-query/useAppVersion';
+import { appVersion } from '../../../../externals';
 import * as Panel from '../../panel-utils/PanelUtils';

 export default function AppVersion() {
@@ -9,7 +9,7 @@ export default function AppVersion() {
  if (isError) {
    return (
      <Panel.Paragraph>
-        {`You are currently using Ontime version ${version}`}
+        {`You are currently using Ontime version ${appVersion}`}
        <Panel.Error>{`Could not fetch version information: ${isError}`}</Panel.Error>
      </Panel.Paragraph>
    );
@@ -18,7 +18,7 @@ export default function AppVersion() {
  if (data.hasUpdates) {
    return (
      <>
-        <Panel.Paragraph>{`You are currently using Ontime version ${version}.`}</Panel.Paragraph>
+        <Panel.Paragraph>{`You are currently using Ontime version ${appVersion}.`}</Panel.Paragraph>
        <Panel.Paragraph>
          {`A new version ${data.version} is available.`}
          <ExternalLink href={data.url}> Please visit the release page to download</ExternalLink>
@@ -27,5 +27,5 @@ export default function AppVersion() {
    );
  }

-  return <Panel.Paragraph>{`You are currently using the latest version of Ontime: ${version}`}</Panel.Paragraph>;
+  return <Panel.Paragraph>{`You are currently using the latest version of Ontime: ${appVersion}`}</Panel.Paragraph>;
 }
@@ -155,6 +155,7 @@ export default function GeneralPanelForm() {
                <option value='es'>Spanish</option>
                <option value='sv'>Swedish</option>
                <option value='pl'>Polish</option>
+                <option value='zh'>Chinese (Simplified)</option>
              </Select>
            </Panel.ListItem>
          </Panel.ListGroup>
@@ -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 />

@@ -88,7 +88,6 @@ export default function EditorSettingsForm() {
              >
                <option value={TimerType.CountDown}>Count down</option>
                <option value={TimerType.CountUp}>Count up</option>
-                <option value={TimerType.TimeToEnd}>Time to end</option>
                <option value={TimerType.Clock}>Clock</option>
                <option value={TimerType.None}>None</option>
              </Select>
@@ -1,9 +1,9 @@
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';

-import { serverPort } from '../../../../common/api/constants';
 import CopyTag from '../../../../common/components/copy-tag/CopyTag';
 import useInfo from '../../../../common/hooks-query/useInfo';
-import { openLink } from '../../../../common/utils/linkUtils';
+import { linkToOtherHost, openLink } from '../../../../common/utils/linkUtils';
+import { isLocalhost } from '../../../../externals';

 import style from './NetworkInterfaces.module.scss';

@@ -14,8 +14,10 @@ export default function InfoNif() {

  return (
    <div className={style.interfaces}>
-      {data?.networkInterfaces?.map((nif) => {
-        const address = `http://${nif.address}:${serverPort}`;
+      {data.networkInterfaces.map((nif) => {
+        // interfaces outside localhost wont have access
+        if (nif.name === 'localhost' && !isLocalhost) return null;
+        const address = linkToOtherHost(nif.address);

        return (
          <CopyTag
@@ -1,4 +1,9 @@
+import { useEffect } from 'react';
+
 import useScrollIntoView from '../../../../common/hooks/useScrollIntoView';
+import { usePing } from '../../../../common/hooks/useSocket';
+import { socketSendJson } from '../../../../common/utils/socket';
+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';
@@ -14,6 +19,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
    <>
      <Panel.Header>Network</Panel.Header>
      <Panel.Section>
+        {isDockerImage && <OntimeCloudStats />}
        <Panel.Paragraph>Ontime is streaming on the following network interfaces</Panel.Paragraph>
      </Panel.Section>
      <InfoNif />
@@ -26,3 +32,29 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
    </>
  );
 }
+
+function OntimeCloudStats() {
+  const { ping } = usePing();
+
+  /**
+   * Send immediate ping request, and keep sending on an interval
+   */
+  useEffect(() => {
+    socketSendJson('ping', new Date());
+
+    const doPing = setInterval(() => {
+      socketSendJson('ping', new Date());
+    }, 5000);
+
+    return () => {
+      clearInterval(doPing);
+    };
+  }, []);
+
+  return (
+    <Panel.SubHeader>
+      Ontime cloud
+      <Panel.Description>Current ping: {ping}ms</Panel.Description>
+    </Panel.SubHeader>
+  );
+}
@@ -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')}
          />
@@ -1,11 +1,16 @@
-import { useEffect } from 'react';
+import { ChangeEvent, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { Button, Input, Textarea } from '@chakra-ui/react';
+import { IoDownloadOutline } from '@react-icons/all-files/io5/IoDownloadOutline';
+import { IoTrash } from '@react-icons/all-files/io5/IoTrash';
 import { type ProjectData } from 'ontime-types';

-import { postProjectData } from '../../../../common/api/project';
+import { projectLogoPath } from '../../../../common/api/constants';
+import { postProjectData, uploadProjectLogo } from '../../../../common/api/project';
 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';
@@ -17,8 +22,10 @@ export default function ProjectData() {
    handleSubmit,
    register,
    reset,
-    formState: { isSubmitting, isValid, isDirty },
+    formState: { isSubmitting, isValid, isDirty, errors },
    setError,
+    watch,
+    setValue,
  } = useForm({
    defaultValues: data,
    values: data,
@@ -34,6 +41,42 @@ export default function ProjectData() {
    }
  }, [data, reset]);

+  const handleUploadProjectLogo = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    try {
+      validateLogo(file);
+      const response = await uploadProjectLogo(file);
+
+      setValue('projectLogo', response.data.logoFilename, {
+        shouldDirty: true,
+      });
+    } catch (error) {
+      const message = maybeAxiosError(error);
+      setError('projectLogo', { message });
+    }
+  };
+
+  const { ref, ...projectLogoRest } = register('projectLogo');
+
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleClickUpload = () => {
+    uploadInputRef.current?.click();
+  };
+
+  const handleDeleteLogo = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setValue('projectLogo', null, {
+      shouldDirty: true,
+    });
+  };
+
  const onSubmit = async (formData: ProjectData) => {
    try {
      await postProjectData(formData);
@@ -86,6 +129,53 @@ export default function ProjectData() {
              {...register('title')}
            />
          </label>
+          <Panel.Section style={{ marginTop: 0 }}>
+            <label>
+              Project logo
+              <Input
+                variant='ontime-filled'
+                size='sm'
+                type='file'
+                style={{ display: 'none' }}
+                accept='image/*'
+                {...projectLogoRest}
+                ref={(e) => {
+                  ref(e);
+                  uploadInputRef.current = e;
+                }}
+                onChange={handleUploadProjectLogo}
+              />
+              <Panel.Card className={style.uploadLogoCard}>
+                {watch('projectLogo') ? (
+                  <>
+                    <img src={`${projectLogoPath}/${watch('projectLogo')}`} />
+                    <Button
+                      size='sm'
+                      variant='ontime-filled'
+                      isDisabled={isSubmitting || !watch('projectLogo')}
+                      leftIcon={<IoTrash />}
+                      onClick={handleDeleteLogo}
+                      type='button'
+                    >
+                      Delete
+                    </Button>
+                  </>
+                ) : (
+                  <Button
+                    variant='ontime-filled'
+                    size='sm'
+                    isDisabled={isSubmitting}
+                    leftIcon={<IoDownloadOutline />}
+                    onClick={handleClickUpload}
+                    type='button'
+                  >
+                    Upload logo
+                  </Button>
+                )}
+                {errors?.projectLogo?.message && <Panel.Error>{errors.projectLogo.message}</Panel.Error>}
+              </Panel.Card>
+            </label>
+          </Panel.Section>
          <label>
            Project description
            <Input
@@ -114,7 +204,7 @@ export default function ProjectData() {
            <Input
              variant='ontime-filled'
              size='sm'
-              placeholder='www.getontime.no'
+              placeholder={websiteUrl}
              autoComplete='off'
              {...register('publicUrl')}
            />
@@ -136,7 +226,7 @@ export default function ProjectData() {
            <Input
              variant='ontime-filled'
              size='sm'
-              placeholder='http://docs.getontime.no'
+              placeholder={documentationUrl}
              autoComplete='off'
              {...register('backstageUrl')}
            />
@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';

-import { useProjectList } from '../../../../common/hooks-query/useProjectList';
+import { useOrderedProjectList } from '../../../../common/hooks-query/useProjectList';
 import * as Panel from '../../panel-utils/PanelUtils';

 import ProjectListItem, { EditMode } from './ProjectListItem';
@@ -8,8 +8,7 @@ import ProjectListItem, { EditMode } from './ProjectListItem';
 import style from './ProjectPanel.module.scss';

 export default function ProjectList() {
-  const { data, refetch } = useProjectList();
-  const { files, lastLoadedProject } = data;
+  const { data, refetch } = useOrderedProjectList();

  const [editingMode, setEditingMode] = useState<EditMode | null>(null);
  const [editingFilename, setEditingFilename] = useState<string | null>(null);
@@ -28,16 +27,6 @@ export default function ProjectList() {
    await refetch();
  };

-  const reorderedProjectFiles = useMemo(() => {
-    if (!data.files?.length) return [];
-
-    const currentlyLoadedIndex = files.findIndex((project) => project.filename === lastLoadedProject);
-    const projectFiles = [...files];
-    const current = projectFiles.splice(currentlyLoadedIndex, 1)?.[0];
-
-    return [current, ...projectFiles];
-  }, [data.files?.length, files, lastLoadedProject]);
-
  return (
    <Panel.Table>
      <thead>
@@ -48,7 +37,7 @@ export default function ProjectList() {
        </tr>
      </thead>
      <tbody>
-        {reorderedProjectFiles.map((project) => (
+        {data.reorderedProjectFiles.map((project) => (
          <ProjectListItem
            key={project.filename}
            filename={project.filename}
@@ -58,7 +47,7 @@ export default function ProjectList() {
            onRefetch={handleRefetch}
            editingFilename={editingFilename}
            editingMode={editingMode}
-            current={project.filename === lastLoadedProject}
+            current={project.filename === data.lastLoadedProject}
          />
        ))}
      </tbody>
@@ -61,3 +61,26 @@
    gap: 1rem;
  }
 }
+
+.flex {
+  display: flex;
+  gap: 1rem;
+  height: 100px;
+}
+
+.uploadLogoCard {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  background-color: $gray-1350;
+  border: 1px solid $white-10;
+  border-radius: 3px;
+
+  img {
+    max-width: 250px;
+    height: auto;
+  }
+}
@@ -10,8 +10,8 @@ import {
  useDisclosure,
 } from '@chakra-ui/react';

-import { isLocalhost } from '../../../../common/api/constants';
 import { useElectronEvent } from '../../../../common/hooks/useElectronEvent';
+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>
@@ -11,6 +11,7 @@ export const namedImportMap = {
  Duration: 'duration',
  Cue: 'cue',
  Title: 'title',
+  'Time to end': 'time to end',
  'Is Public': 'public',
  Skip: 'skip',
  Note: 'notes',
@@ -47,6 +48,7 @@ export function convertToImportMap(namedImportMap: NamedImportMap): ImportMap {
    duration: namedImportMap.Duration,
    cue: namedImportMap.Cue,
    title: namedImportMap.Title,
+    isTimeToEnd: namedImportMap['Time to end'],
    isPublic: namedImportMap['Is Public'],
    skip: namedImportMap.Skip,
    note: namedImportMap.Note,
@@ -40,6 +40,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
          <th>Duration</th>
          <th>Warning Time</th>
          <th>Danger Time</th>
+          <th>Is Time to End</th>
          <th>Is Public</th>
          <th>Skip</th>
          <th>Colour</th>
@@ -71,6 +72,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
          }
          eventIndex += 1;
          const colour = event.colour ? getAccessibleColour(event.colour) : {};
+          const isTimeToEnd = booleanToText(event.isTimeToEnd);
          const isPublic = booleanToText(event.isPublic);
          const skip = booleanToText(event.skip);

@@ -93,6 +95,7 @@ export default function PreviewRundown(props: PreviewRundownProps) {
                <td>{millisToString(event.duration)}</td>
                <td>{millisToString(event.timeWarning)}</td>
                <td>{millisToString(event.timeDanger)}</td>
+                <td className={style.center}>{isTimeToEnd && <Tag>{isTimeToEnd}</Tag>}</td>
                <td className={style.center}>{isPublic && <Tag>{isPublic}</Tag>}</td>
                <td>{skip && <Tag>{skip}</Tag>}</td>
                <td style={{ ...colour }}>{event.colour}</td>
@@ -114,6 +114,7 @@ export default function QuickStart(props: QuickStartProps) {
                  <option value='es'>Spanish</option>
                  <option value='sv'>Swedish</option>
                  <option value='pl'>Polish</option>
+                  <option value='zh'>Chinese (Simplified)</option>
                </Select>
              </Panel.ListItem>
            </Panel.ListGroup>
@@ -16,7 +16,7 @@ import { Corner } from '../../editors/editor-utils/EditorUtils';
 import style from './MessageControl.module.scss';

 export default function TimerPreview() {
-  const { blink, blackout, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
+  const { blink, blackout, isTimeToEnd, phase, showAuxTimer, showExternalMessage, showTimerMessage, timerType } =
    useMessagePreview();
  const { data } = useViewSettings();

@@ -24,11 +24,11 @@ export default function TimerPreview() {

  const main = (() => {
    if (showTimerMessage) return 'Message';
+    if (timerType === TimerType.None) return timerPlaceholder;
    if (phase === TimerPhase.Pending) return 'Standby to start';
    if (phase === TimerPhase.Overtime && data.endMessage) return 'Custom end message';
-    if (timerType === TimerType.TimeToEnd) return 'Time to end';
    if (timerType === TimerType.Clock) return 'Clock';
-    if (timerType === TimerType.None) return timerPlaceholder;
+    if (isTimeToEnd) return 'Target event scheduled end';
    return 'Timer';
  })();

@@ -74,12 +74,16 @@ export default function TimerPreview() {
        <Tooltip label='Time type: Clock' openDelay={tooltipDelayMid} shouldWrapChildren>
          <IoTime className={style.statusIcon} data-active={timerType === TimerType.Clock} />
        </Tooltip>
-        <Tooltip label='Time type: Time to end' openDelay={tooltipDelayMid} shouldWrapChildren>
-          <IoFlag className={style.statusIcon} data-active={timerType === TimerType.TimeToEnd} />
-        </Tooltip>
        <Tooltip label='Time type: None' openDelay={tooltipDelayMid} shouldWrapChildren>
          <IoBan className={style.statusIcon} data-active={timerType === TimerType.None} />
        </Tooltip>
+        <Tooltip
+          label={isTimeToEnd ? 'Count to schedule' : 'Count from start'}
+          openDelay={tooltipDelayMid}
+          shouldWrapChildren
+        >
+          <IoFlag className={style.statusIcon} data-active={isTimeToEnd} />
+        </Tooltip>
      </div>
    </div>
  );
@@ -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,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);
@@ -13,6 +13,7 @@ import useAppSettingsNavigation from '../app-settings/useAppSettingsNavigation';
 import { EditorOverview } from '../overview/Overview';

 import Finder from './finder/Finder';
+import WelcomePlacement from './welcome/WelcomePlacement';

 import styles from './Editor.module.scss';

@@ -55,6 +56,7 @@ export default function Editor() {

  return (
    <div className={styles.mainContainer} data-testid='event-editor'>
+      <WelcomePlacement />
      <Finder isOpen={isFinderOpen} onClose={onFinderClose} />
      <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
      <EditorOverview>
@@ -20,3 +20,20 @@
    outline: 2px solid $gray-1000;
  }
 }
+
+.header {
+  font-size: 1.5rem;
+}
+
+.title {
+  font-size: 1rem;
+  color: $ui-white;
+}
+
+.label {
+  display: block;
+  font-size: calc(1rem - 3px);
+  color: $label-gray;
+  margin-bottom: 0.25rem;
+  max-width: max-content; // prevent label from taking entire row
+}
@@ -1,3 +1,4 @@
+import type { LabelHTMLAttributes, ReactNode } from 'react';
 import { IoArrowUp } from '@react-icons/all-files/io5/IoArrowUp';
 import { type IconBaseProps } from '@react-icons/all-files/lib';

@@ -8,3 +9,16 @@ import style from './EditorUtils.module.scss';
 export function Corner({ className, ...elementProps }: IconBaseProps) {
  return <IoArrowUp className={cx([style.corner, className])} {...elementProps} />;
 }
+
+export function Title({ children }: { children: ReactNode }) {
+  return <h3 className={style.title}>{children}</h3>;
+}
+
+export function Label({ children, className, ...elementProps }: LabelHTMLAttributes<HTMLLabelElement>) {
+  const classes = cx([style.label, className]);
+  return (
+    <label className={classes} {...elementProps}>
+      {children}
+    </label>
+  );
+}
@@ -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();
@@ -0,0 +1,65 @@
+.sections {
+  display: grid;
+  grid-template-columns: 1fr 5fr;
+  gap: 2rem;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.header {
+  font-size: 1.5rem;
+}
+
+.logo {
+  max-width: 100px;
+  height: auto;
+}
+
+.buttonRow {
+  margin-top: 1rem;
+  display: flex;
+  gap: 1rem;
+  justify-content: end;
+}
+
+.tableContainer {
+  height: 350px;
+  max-height: 350px;
+  overflow-y: auto;
+}
+
+.table {
+  width: 100%;
+
+  tbody {
+    background-color: $gray-1300;
+    tr {
+      &:has(:hover) {
+        background-color: $gray-1350;
+      }
+    }
+  }
+
+  tr {
+    height: 2rem;
+  }
+
+  th,
+  td {
+    padding-inline: 0.5rem;
+  }
+
+  th {
+    text-align: left;
+    font-size: calc(1rem - 3px);
+    color: $label-gray;
+  }
+}
+
+.current {
+  background-color: $blue-700;
+}
@@ -0,0 +1,99 @@
+import { useNavigate } from 'react-router-dom';
+import { Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay } from '@chakra-ui/react';
+
+import { loadDemo, loadProject } from '../../../common/api/db';
+import { invalidateAllCaches } from '../../../common/api/utils';
+import ExternalLink from '../../../common/components/external-link/ExternalLink';
+import { appVersion, discordUrl, documentationUrl, websiteUrl } from '../../../externals';
+
+import ImportProjectButton from './composite/ImportProjectButton';
+import WelcomeProjectList from './composite/WelcomeProjectList';
+
+import style from './Welcome.module.scss';
+
+interface WelcomeProps {
+  onClose: () => void;
+}
+
+export default function Welcome(props: WelcomeProps) {
+  const { onClose } = props;
+  const navigate = useNavigate();
+
+  /** handle cleanup actions before request closing the modal */
+  const handleClose = () => {
+    onClose();
+  };
+
+  /** handle loading a selected project */
+  const handleLoadProject = async (filename: string) => {
+    try {
+      await loadProject(filename);
+      await invalidateAllCaches();
+      handleClose();
+    } catch (_error) {
+      /** no error handling for now */
+    }
+  };
+
+  /** handle loading the demo project */
+  const handleLoadDemo = async () => {
+    try {
+      await loadDemo();
+      await invalidateAllCaches();
+      handleClose();
+    } catch (_error) {
+      /** no error handling for now */
+    }
+  };
+
+  /** handle redirect to create modal */
+  const handleCallCreate = () => {
+    navigate('/editor?settings=project__create');
+    handleClose();
+  };
+
+  return (
+    <Modal isOpen onClose={handleClose} closeOnOverlayClick={false} variant='ontime'>
+      <ModalOverlay />
+      <ModalContent maxWidth='max(640px, 40vw)'>
+        <ModalCloseButton />
+        <ModalBody>
+          <div className={style.sections}>
+            <div className={style.column}>
+              <img src='ontime-logo.png' alt='ontime' className={style.logo} />
+              <div>Ontime v{appVersion}</div>
+              <ExternalLink href={websiteUrl}>Website</ExternalLink>
+              <ExternalLink href={documentationUrl}>Read the docs</ExternalLink>
+              <ExternalLink href={discordUrl}>Discord server</ExternalLink>
+            </div>
+            <div className={style.column}>
+              <div className={style.header}>Welcome to Ontime</div>
+              <div className={style.tableContainer}>
+                <table className={style.table}>
+                  <thead>
+                    <tr>
+                      <th>Project Name</th>
+                      <th>Last Used</th>
+                      <th />
+                    </tr>
+                  </thead>
+                  <WelcomeProjectList loadProject={handleLoadProject} onClose={handleClose} />
+                </table>
+              </div>
+
+              <div className={style.buttonRow}>
+                <ImportProjectButton onFinish={handleClose} />
+                <Button size='sm' variant='ontime-subtle' onClick={handleLoadDemo}>
+                  Load demo project
+                </Button>
+                <Button size='sm' variant='ontime-filled' onClick={handleCallCreate}>
+                  Create new...
+                </Button>
+              </div>
+            </div>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}
@@ -0,0 +1,14 @@
+import { useDialogStore } from '../../../common/stores/dialogStore';
+
+import Welcome from './Welcome';
+
+export default function WelcomePlacement() {
+  const showDialog = useDialogStore((state) => state.showDialog);
+  const clearDialog = useDialogStore((state) => state.clearDialog);
+
+  if (!showDialog) {
+    return null;
+  }
+
+  return <Welcome onClose={clearDialog} />;
+}
@@ -0,0 +1,58 @@
+/**
+ * Handles importing of a project in the welcome modal
+ * the logic is mostly duplicated from ManageProjects.tsx
+ */
+
+import { ChangeEvent, useRef } from 'react';
+import { Button, Input } from '@chakra-ui/react';
+
+import { uploadProjectFile } from '../../../../common/api/db';
+import { invalidateAllCaches } from '../../../../common/api/utils';
+import { validateProjectFile } from '../../../../common/utils/uploadUtils';
+
+interface ImportProjectButtonProps {
+  onFinish: () => void;
+}
+
+export default function ImportProjectButton(props: ImportProjectButtonProps) {
+  const { onFinish } = props;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSelectFile = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleImport = async (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target?.files?.[0];
+    if (!selectedFile) {
+      return;
+    }
+
+    try {
+      validateProjectFile(selectedFile);
+      await uploadProjectFile(selectedFile);
+    } catch (error) {
+      /** we do not handle errors here */
+    } finally {
+      await invalidateAllCaches();
+      onFinish();
+    }
+  };
+
+  return (
+    <>
+      <Input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type='file'
+        onChange={handleImport}
+        accept='.json'
+        data-testid='file-input'
+      />
+
+      <Button size='sm' variant='ontime-subtle' onClick={handleSelectFile}>
+        Import project
+      </Button>
+    </>
+  );
+}
@@ -0,0 +1,46 @@
+import { Button } from '@chakra-ui/react';
+
+import { useOrderedProjectList } from '../../../../common/hooks-query/useProjectList';
+
+import style from '../Welcome.module.scss';
+
+interface WelcomeProjectListProps {
+  loadProject: (filename: string) => Promise<void>;
+  onClose: () => void;
+}
+
+export default function WelcomeProjectList(props: WelcomeProjectListProps) {
+  const { loadProject, onClose } = props;
+  const { data } = useOrderedProjectList();
+
+  return (
+    <tbody>
+      {data.reorderedProjectFiles.map((project) => {
+        if (project.filename === data.lastLoadedProject) {
+          return (
+            <tr className={style.current} key={project.filename}>
+              <td>{project.filename}</td>
+              <td>Loaded from last session</td>
+              <td>
+                <Button variant='ontime-subtle' size='sm' onClick={onClose}>
+                  Continue
+                </Button>
+              </td>
+            </tr>
+          );
+        }
+        return (
+          <tr key={project.filename}>
+            <td>{project.filename}</td>
+            <td>{new Date(project.updatedAt).toLocaleString()}</td>
+            <td>
+              <Button variant='ontime-subtle' size='sm' onClick={() => loadProject(project.filename)}>
+                Load
+              </Button>
+            </td>
+          </tr>
+        );
+      })}
+    </tbody>
+  );
+}
@@ -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>
@@ -214,8 +214,8 @@ export default function Rundown({ data }: RundownProps) {
    ['alt + D', () => insertAtId(SupportedEvent.Delay, cursor), { preventDefault: true }],
    ['alt + shift + D', () => insertAtId(SupportedEvent.Delay, cursor, true), { preventDefault: true }],

-    ['mod + C', () => setEntryCopyId(cursor), { preventDefault: true }],
-    ['mod + V', () => insertCopyAtId(cursor, entryCopyId), { preventDefault: true }],
+    ['mod + C', () => setEntryCopyId(cursor)],
+    ['mod + V', () => insertCopyAtId(cursor, entryCopyId)],
    ['mod + shift + V', () => insertCopyAtId(cursor, entryCopyId, true), { preventDefault: true }],

    ['alt + backspace', () => deleteAtCursor(cursor), { preventDefault: true }],
@@ -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;
@@ -148,6 +150,7 @@ export default function RundownEntry(props: RundownEntryProps) {
  if (data.type === SupportedEvent.Event) {
    return (
      <EventBlock
+        eventId={data.id}
        eventIndex={eventIndex}
        cue={data.cue}
        timeStart={data.timeStart}
@@ -155,7 +158,7 @@ export default function RundownEntry(props: RundownEntryProps) {
        duration={data.duration}
        timeStrategy={data.timeStrategy}
        linkStart={data.linkStart}
-        eventId={data.id}
+        isTimeToEnd={data.isTimeToEnd}
        isPublic={data.isPublic}
        endAction={data.endAction}
        timerType={data.timerType}
@@ -24,13 +24,14 @@ import RundownIndicators from './RundownIndicators';
 import style from './EventBlock.module.scss';

 interface EventBlockProps {
+  eventId: string;
  cue: string;
  timeStart: number;
  timeEnd: number;
  duration: number;
  timeStrategy: TimeStrategy;
  linkStart: MaybeString;
-  eventId: string;
+  isTimeToEnd: boolean;
  eventIndex: number;
  isPublic: boolean;
  endAction: EndAction;
@@ -68,6 +69,7 @@ export default function EventBlock(props: EventBlockProps) {
    duration,
    timeStrategy,
    linkStart,
+    isTimeToEnd,
    isPublic = true,
    eventIndex,
    endAction,
@@ -286,6 +288,7 @@ export default function EventBlock(props: EventBlockProps) {
          timeEnd={timeEnd}
          duration={duration}
          linkStart={linkStart}
+          isTimeToEnd={isTimeToEnd}
          timeStrategy={timeStrategy}
          eventId={eventId}
          eventIndex={eventIndex}
@@ -23,12 +23,13 @@ import EventBlockProgressBar from './composite/EventBlockProgressBar';
 import style from './EventBlock.module.scss';

 interface EventBlockInnerProps {
+  eventId: string;
  timeStart: number;
  timeEnd: number;
  duration: number;
  timeStrategy: TimeStrategy;
  linkStart: MaybeString;
-  eventId: string;
+  isTimeToEnd: boolean;
  eventIndex: number;
  isPublic: boolean;
  endAction: EndAction;
@@ -43,14 +44,15 @@ interface EventBlockInnerProps {
  isRolling: boolean;
 }

-const EventBlockInner = (props: EventBlockInnerProps) => {
+function EventBlockInner(props: EventBlockInnerProps) {
  const {
+    eventId,
    timeStart,
    timeEnd,
    duration,
    timeStrategy,
    linkStart,
-    eventId,
+    isTimeToEnd,
    isPublic = true,
    endAction,
    timerType,
@@ -91,7 +93,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
          delay={delay}
          timeStrategy={timeStrategy}
          linkStart={linkStart}
-          timerType={timerType}
+          isTimeToEnd={isTimeToEnd}
        />
      </div>
      <div className={style.titleSection}>
@@ -122,6 +124,11 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
              <EndActionIcon action={endAction} className={style.statusIcon} />
            </span>
          </Tooltip>
+          <Tooltip label={`${isTimeToEnd ? 'Time to End' : 'Count from start'}`} openDelay={tooltipDelayMid}>
+            <span>
+              <IoFlag className={`${style.statusIcon} ${isTimeToEnd ? style.active : style.disabled}`} />
+            </span>
+          </Tooltip>
          <Tooltip label={`${isPublic ? 'Event is public' : 'Event is private'}`} openDelay={tooltipDelayMid}>
            <span>
              <IoPeople className={`${style.statusIcon} ${isPublic ? style.active : style.disabled}`} />
@@ -131,7 +138,7 @@ const EventBlockInner = (props: EventBlockInnerProps) => {
      </div>
    </>
  );
-};
+}

 export default memo(EventBlockInner);

@@ -162,9 +169,5 @@ function TimerIcon(props: { type: TimerType; className: string }) {
  if (type === TimerType.None) {
    return <IoBan className={className} />;
  }
-  if (type === TimerType.TimeToEnd) {
-    const classes = cx([style.active, className]);
-    return <IoFlag className={classes} />;
-  }
  return <IoArrowDown className={className} />;
 }
@@ -16,7 +16,7 @@
  flex: 1;
  display: flex;
  flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
  overflow-y: auto;
 }

@@ -38,13 +38,7 @@
  display: flex;
  flex-direction: column;
  gap: 1rem;
-}
-
-.inputLabel {
-  display: block;
-  font-size: calc(1rem - 3px);
-  color: $label-gray;
-  margin-bottom: 0.25rem;
+  margin-top: 0.5rem;
 }

 .decorated {
@@ -58,7 +52,6 @@
 .delayLabel {
  font-size: calc(1rem - 3px);
  color: $ontime-delay-text;
-  margin-top: 0.25rem;

  &::after {
    content: '\200b';
@@ -66,13 +59,12 @@
 }

 .switchLabel {
-  font-size: calc(1rem - 3px);
-  color: $label-gray;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: max-content;
  cursor: pointer;
+  height: 30px; // manually match the height of a text input
 }

 .inline {
@@ -8,6 +8,7 @@ import { useEventAction } from '../../../common/hooks/useEventAction';
 import useCustomFields from '../../../common/hooks-query/useCustomFields';
 import useRundown from '../../../common/hooks-query/useRundown';
 import { getAccessibleColour } from '../../../common/utils/styleUtils';
+import * as Editor from '../../editors/editor-utils/EditorUtils';
 import { useEventSelection } from '../useEventSelection';

 import EventEditorTimes from './composite/EventEditorTimes';
@@ -82,6 +83,7 @@ export default function EventEditor() {
          duration={event.duration}
          timeStrategy={event.timeStrategy}
          linkStart={event.linkStart}
+          isTimeToEnd={event.isTimeToEnd}
          delay={event.delay ?? 0}
          isPublic={event.isPublic}
          endAction={event.endAction}
@@ -100,7 +102,7 @@ export default function EventEditor() {
        />
        <div className={style.column}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <span>Custom Fields</span>
+            <Editor.Title>Custom Fields</Editor.Title>
            <Button variant='ontime-subtle' size='sm' onClick={handleOpenCustomManager}>
              Manage
            </Button>
@@ -6,6 +6,7 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
 import { useEventAction } from '../../../../common/hooks/useEventAction';
 import { millisToDelayString } from '../../../../common/utils/dateConfig';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import TimeInputFlow from '../../time-input-flow/TimeInputFlow';

 import style from '../EventEditor.module.scss';
@@ -17,6 +18,7 @@ interface EventEditorTimesProps {
  duration: number;
  timeStrategy: TimeStrategy;
  linkStart: MaybeString;
+  isTimeToEnd: boolean;
  delay: number;
  isPublic: boolean;
  endAction: EndAction;
@@ -25,9 +27,9 @@ interface EventEditorTimesProps {
  timeDanger: number;
 }

-type HandledActions = 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';
+type HandledActions = 'isTimeToEnd' | 'timerType' | 'endAction' | 'isPublic' | 'timeWarning' | 'timeDanger';

-const EventEditorTimes = (props: EventEditorTimesProps) => {
+function EventEditorTimes(props: EventEditorTimesProps) {
  const {
    eventId,
    timeStart,
@@ -35,6 +37,7 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
    duration,
    timeStrategy,
    linkStart,
+    isTimeToEnd,
    delay,
    isPublic,
    endAction,
@@ -50,6 +53,11 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
      return;
    }

+    if (field === 'isTimeToEnd') {
+      updateEvent({ id: eventId, isTimeToEnd: !(value as boolean) });
+      return;
+    }
+
    if (field === 'timeWarning' || field === 'timeDanger') {
      const newTime = parseUserTime(value as string);
      updateEvent({ id: eventId, [field]: newTime });
@@ -70,79 +78,115 @@ const EventEditorTimes = (props: EventEditorTimesProps) => {
    : '';

  return (
-    <div className={style.column}>
-      <div>
-        <div className={style.inputLabel}>Event schedule</div>
-        <div className={style.inline}>
-          <TimeInputFlow
-            eventId={eventId}
-            timeStart={timeStart}
-            timeEnd={timeEnd}
-            duration={duration}
-            timeStrategy={timeStrategy}
-            linkStart={linkStart}
-            delay={delay}
-            timerType={timerType}
-          />
+    <>
+      <div className={style.column}>
+        <div>
+          <Editor.Label>Event schedule</Editor.Label>
+          <div className={style.inline}>
+            <TimeInputFlow
+              eventId={eventId}
+              timeStart={timeStart}
+              timeEnd={timeEnd}
+              duration={duration}
+              timeStrategy={timeStrategy}
+              linkStart={linkStart}
+              delay={delay}
+              isTimeToEnd={isTimeToEnd}
+            />
+          </div>
+          <div className={style.delayLabel}>{delayLabel}</div>
        </div>
-        <div className={style.delayLabel}>{delayLabel}</div>
-      </div>

-      <div className={style.splitTwo}>
-        <div>
-          <label className={style.inputLabel} htmlFor='timeWarning'>
-            Warning Time
-          </label>
-          <TimeInput name='timeWarning' submitHandler={handleSubmit} time={timeWarning} placeholder='Duration' />
-        </div>
-        <div>
-          <label className={style.inputLabel}>Timer Type</label>
-          <Select
-            size='sm'
-            name='timerType'
-            value={timerType}
-            onChange={(event) => handleSubmit('timerType', event.target.value)}
-            variant='ontime'
-          >
-            <option value={TimerType.CountDown}>Count down</option>
-            <option value={TimerType.CountUp}>Count up</option>
-            <option value={TimerType.TimeToEnd}>Time to end</option>
-            <option value={TimerType.Clock}>Clock</option>
-            <option value={TimerType.None}>None</option>
-          </Select>
-        </div>
-        <div>
-          <label className={style.inputLabel} htmlFor='timeDanger'>
-            Danger Time
-          </label>
-          <TimeInput name='timeDanger' submitHandler={handleSubmit} time={timeDanger} placeholder='Duration' />
-        </div>
-        <div>
-          <label className={style.inputLabel}>End Action</label>
-          <Select
-            size='sm'
-            name='endAction'
-            value={endAction}
-            onChange={(event) => handleSubmit('endAction', event.target.value)}
-            variant='ontime'
-          >
-            <option value={EndAction.None}>None</option>
-            <option value={EndAction.Stop}>Stop</option>
-            <option value={EndAction.LoadNext}>Load Next</option>
-            <option value={EndAction.PlayNext}>Play Next</option>
-          </Select>
+        <Editor.Title>Event behaviour</Editor.Title>
+        <div className={style.splitTwo}>
+          <div>
+            <Editor.Label htmlFor='endAction'>End Action</Editor.Label>
+            <Select
+              id='endAction'
+              size='sm'
+              name='endAction'
+              value={endAction}
+              onChange={(event) => handleSubmit('endAction', event.target.value)}
+              variant='ontime'
+            >
+              <option value={EndAction.None}>None</option>
+              <option value={EndAction.Stop}>Stop rundown</option>
+              <option value={EndAction.LoadNext}>Load next event</option>
+              <option value={EndAction.PlayNext}>Play next event</option>
+            </Select>
+          </div>
+          <div>
+            <Editor.Label htmlFor='timeToEnd'>Target Event Scheduled End</Editor.Label>
+            <Editor.Label className={style.switchLabel}>
+              <Switch
+                id='timeToEnd'
+                size='md'
+                isChecked={isTimeToEnd}
+                onChange={() => handleSubmit('isTimeToEnd', isTimeToEnd)}
+                variant='ontime'
+              />
+              {isTimeToEnd ? 'On' : 'Off'}
+            </Editor.Label>
+          </div>
        </div>
      </div>
+      <div className={style.column}>
+        <Editor.Title>Display options</Editor.Title>
+        <div className={style.splitTwo}>
+          <div>
+            <Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
+            <Select
+              size='sm'
+              id='timerType'
+              name='timerType'
+              value={timerType}
+              onChange={(event) => handleSubmit('timerType', event.target.value)}
+              variant='ontime'
+            >
+              <option value={TimerType.CountDown}>Count down</option>
+              <option value={TimerType.CountUp}>Count up</option>
+              <option value={TimerType.Clock}>Clock</option>
+              <option value={TimerType.None}>None</option>
+            </Select>
+          </div>
+          <div>
+            <Editor.Label htmlFor='timeWarning'>Warning Time</Editor.Label>
+            <TimeInput
+              id='timeWarning'
+              name='timeWarning'
+              submitHandler={handleSubmit}
+              time={timeWarning}
+              placeholder='Duration'
+            />
+          </div>

-      <div>
-        <span className={style.inputLabel}>Event Visibility</span>
-        <label className={style.switchLabel}>
-          <Switch size='md' isChecked={isPublic} onChange={() => handleSubmit('isPublic', isPublic)} variant='ontime' />
-          {isPublic ? 'Public' : 'Private'}
-        </label>
+          <div>
+            <Editor.Label htmlFor='isPublic'>Event Visibility</Editor.Label>
+            <Editor.Label className={style.switchLabel}>
+              <Switch
+                id='isPublic'
+                size='md'
+                isChecked={isPublic}
+                onChange={() => handleSubmit('isPublic', isPublic)}
+                variant='ontime'
+              />
+              {isPublic ? 'Public' : 'Private'}
+            </Editor.Label>
+          </div>
+          <div>
+            <Editor.Label htmlFor='timeDanger'>Danger Time</Editor.Label>
+            <TimeInput
+              id='timeDanger'
+              name='timeDanger'
+              submitHandler={handleSubmit}
+              time={timeDanger}
+              placeholder='Duration'
+            />
+          </div>
+        </div>
      </div>
-    </div>
+    </>
  );
-};
+}

 export default memo(EventEditorTimes);
@@ -3,6 +3,7 @@ import { Input } from '@chakra-ui/react';
 import { sanitiseCue } from 'ontime-utils';

 import SwatchSelect from '../../../../common/components/input/colour-input/SwatchSelect';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import { type EditorUpdateFields } from '../EventEditor';

 import EventTextArea from './EventTextArea';
@@ -28,11 +29,10 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {

  return (
    <div className={style.column}>
+      <Editor.Title>Event data</Editor.Title>
      <div className={style.splitTwo}>
        <div>
-          <label className={style.inputLabel} htmlFor='eventId'>
-            Event ID (read only)
-          </label>
+          <Editor.Label htmlFor='eventId'>Event ID (read only)</Editor.Label>
          <Input
            id='eventId'
            size='sm'
@@ -45,7 +45,7 @@ const EventEditorTitles = (props: EventEditorTitlesProps) => {
        <EventTextInput field='cue' label='Cue' initialValue={cue} submitHandler={cueSubmitHandler} maxLength={10} />
      </div>
      <div>
-        <label className={style.inputLabel}>Colour</label>
+        <Editor.Label>Colour</Editor.Label>
        <SwatchSelect name='colour' value={colour} handleChange={handleSubmit} />
      </div>
      <EventTextInput field='title' label='Title' initialValue={title} submitHandler={handleSubmit} />
@@ -1,12 +1,10 @@
-import { CSSProperties, useCallback, useRef } from 'react';
+import { type CSSProperties, useCallback, useRef } from 'react';

 import { AutoTextArea } from '../../../../common/components/input/auto-text-area/AutoTextArea';
 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
-import { cx } from '../../../../common/utils/styleUtils';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import { EditorUpdateFields } from '../EventEditor';

-import style from '../EventEditor.module.scss';
-
 interface CountedTextAreaProps {
  className?: string;
  field: EditorUpdateFields;
@@ -24,13 +22,12 @@ export default function EventTextArea(props: CountedTextAreaProps) {
  const { value, onChange, onBlur, onKeyDown } = useReactiveTextInput(initialValue, submitCallback, ref, {
    submitOnCtrlEnter: true,
  });
-  const classes = cx([style.inputLabel, className]);

  return (
    <div>
-      <label className={classes} htmlFor={field} style={givenStyles}>
+      <Editor.Label className={className} htmlFor={field} style={givenStyles}>
        {label}
-      </label>
+      </Editor.Label>
      <AutoTextArea
        id={field}
        inputref={ref}
@@ -2,10 +2,9 @@ import { useCallback, useRef } from 'react';
 import { Input, InputProps } from '@chakra-ui/react';

 import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput';
+import * as Editor from '../../../editors/editor-utils/EditorUtils';
 import { EditorUpdateFields } from '../EventEditor';

-import style from '../EventEditor.module.scss';
-
 interface EventTextInputProps extends InputProps {
  field: EditorUpdateFields;
  label: string;
@@ -24,9 +23,7 @@ export default function EventTextInput(props: EventTextInputProps) {

  return (
    <div>
-      <label className={style.inputLabel} htmlFor={field}>
-        {label}
-      </label>
+      <Editor.Label htmlFor={field}>{label}</Editor.Label>
      <Input
        id={field}
        ref={ref}
@@ -5,7 +5,7 @@ import { IoLink } from '@react-icons/all-files/io5/IoLink';
 import { IoLockClosed } from '@react-icons/all-files/io5/IoLockClosed';
 import { IoLockOpenOutline } from '@react-icons/all-files/io5/IoLockOpenOutline';
 import { IoUnlink } from '@react-icons/all-files/io5/IoUnlink';
-import { MaybeString, TimerType, TimeStrategy } from 'ontime-types';
+import { MaybeString, TimeStrategy } from 'ontime-types';

 import TimeInputWithButton from '../../../common/components/input/time-input/TimeInputWithButton';
 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -16,19 +16,19 @@ import style from './TimeInputFlow.module.scss';

 interface EventBlockTimerProps {
  eventId: string;
+  isTimeToEnd: boolean;
  timeStart: number;
  timeEnd: number;
  duration: number;
  timeStrategy: TimeStrategy;
  linkStart: MaybeString;
  delay: number;
-  timerType: TimerType;
 }

 type TimeActions = 'timeStart' | 'timeEnd' | 'duration';

-const TimeInputFlow = (props: EventBlockTimerProps) => {
-  const { eventId, timeStart, timeEnd, duration, timeStrategy, linkStart, delay, timerType } = props;
+function TimeInputFlow(props: EventBlockTimerProps) {
+  const { eventId, isTimeToEnd, timeStart, timeEnd, duration, timeStrategy, linkStart, delay } = props;
  const { updateEvent, updateTimer } = useEventAction();

  // In sync with EventEditorTimes
@@ -49,8 +49,8 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
    warnings.push('Over midnight');
  }

-  if (timerType === TimerType.TimeToEnd) {
-    warnings.push('Time to end');
+  if (isTimeToEnd) {
+    warnings.push('Target event scheduled end');
  }

  const hasDelay = delay !== 0;
@@ -128,6 +128,6 @@ const TimeInputFlow = (props: EventBlockTimerProps) => {
      )}
    </>
  );
-};
+}

 export default memo(TimeInputFlow);
@@ -9,6 +9,7 @@ import {
  Settings,
  SimpleTimerState,
  SupportedEvent,
+  TimerType,
  ViewSettings,
 } from 'ontime-types';
 import { useStore } from 'zustand';
@@ -74,16 +75,14 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
    const selectedId = eventNow?.id ?? null;
    const nextId = eventNext?.id ?? null;

-    /******************************************/
-    /***  + TimeManagerType                     ***/
-    /***  WRAP INFORMATION RELATED TO TIME  ***/
-    /***  --------------------------------  ***/
-    /******************************************/
-
-    const TimeManagerType = {
+    /**
+     * Contains an extended timer object with properties from the current event
+     */
+    const timeManagerType: ViewExtendedTimer = {
      ...timer,
      clock,
-      timerType: eventNow?.timerType ?? null,
+      timerType: eventNow?.timerType ?? TimerType.CountDown,
+      isTimeToEnd: eventNow?.isTimeToEnd ?? false,
    };

    return (
@@ -108,7 +107,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
          runtime={runtime}
          selectedId={selectedId}
          settings={settings}
-          time={TimeManagerType}
+          time={timeManagerType}
          viewSettings={viewSettings}
        />
      </>
@@ -29,6 +29,12 @@
    font-size: clamp(32px, 4.5vw, 64px);
    font-weight: 600;
    display: flex;
+    gap: 1rem;
+  }
+
+  .logo {
+    max-width: min(200px, 20vw);
+    max-height: min(100px, 20vh);
  }

  .clock-container {
@@ -10,6 +10,7 @@ import Schedule from '../../../common/components/schedule/Schedule';
 import { ScheduleProvider } from '../../../common/components/schedule/ScheduleContext';
 import ScheduleNav from '../../../common/components/schedule/ScheduleNav';
 import TitleCard from '../../../common/components/title-card/TitleCard';
+import ViewLogo from '../../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
@@ -27,19 +28,19 @@ import './Backstage.scss';
 export const MotionTitleCard = motion(TitleCard);

 interface BackstageProps {
-  customFields: CustomFields;
-  isMirrored: boolean;
-  eventNow: OntimeEvent | null;
-  eventNext: OntimeEvent | null;
-  time: ViewExtendedTimer;
  backstageEvents: OntimeEvent[];
-  selectedId: string | null;
+  customFields: CustomFields;
+  eventNext: OntimeEvent | null;
+  eventNow: OntimeEvent | null;
  general: ProjectData;
+  isMirrored: boolean;
+  time: ViewExtendedTimer;
+  selectedId: string | null;
  settings: Settings | undefined;
 }

 export default function Backstage(props: BackstageProps) {
-  const { customFields, isMirrored, eventNow, eventNext, time, backstageEvents, selectedId, general, settings } = props;
+  const { backstageEvents, customFields, eventNext, eventNow, general, time, isMirrored, selectedId, settings } = props;

  const { getLocalizedString } = useTranslation();
  const [blinkClass, setBlinkClass] = useState(false);
@@ -81,6 +82,7 @@ export default function Backstage(props: BackstageProps) {
    <div className={`backstage ${isMirrored ? 'mirror' : ''}`} data-testid='backstage-view'>
      <ViewParamsEditor viewOptions={backstageOptions} />
      <div className='project-header'>
+        {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
        {general.title}
        <div className='clock-container'>
          <div className='label'>{getLocalizedString('common.time_now')}</div>
@@ -13,10 +13,18 @@
  place-content: center;

  .clock {
-    font-family: var(--font-family-bold-override, $timer-bold-font-family) ;
+    font-family: var(--font-family-bold-override, $timer-bold-font-family);
    font-size: 20vw;
    position: relative;
    color: var(--timer-color-override, $timer-color);
    letter-spacing: 0.05em;
  }
+
+  .logo {
+    position: absolute;
+    top: 2vw;
+    left: 2vw;
+    max-width: min(200px, 20vw);
+    max-height: min(100px, 20vh);
+  }
 }
@@ -1,6 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
-import { Settings } from 'ontime-types';
+import { ProjectData, Settings } from 'ontime-types';

+import ViewLogo from '../../../common/components/view-logo/ViewLogo';
 import ViewParamsEditor from '../../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../../common/hooks/useWindowTitle';
 import { ViewExtendedTimer } from '../../../common/models/TimeManager.type';
@@ -13,13 +14,14 @@ import { getClockOptions } from './clock.options';
 import './Clock.scss';

 interface ClockProps {
+  general: ProjectData;
  isMirrored: boolean;
  time: ViewExtendedTimer;
  settings: Settings | undefined;
 }

 export default function Clock(props: ClockProps) {
-  const { isMirrored, time, settings } = props;
+  const { general, isMirrored, time, settings } = props;
  const [searchParams] = useSearchParams();

  useWindowTitle('Clock');
@@ -122,6 +124,7 @@ export default function Clock(props: ClockProps) {
      }}
      data-testid='clock-view'
    >
+      {general?.projectLogo && <ViewLogo name={general.projectLogo} className='logo' />}
      <ViewParamsEditor viewOptions={clockOptions} />
      <SuperscriptTime
        time={clock}
@@ -5,16 +5,22 @@ import type { ViewExtendedTimer } from '../../../common/models/TimeManager.type'
 import { timerPlaceholder, timerPlaceholderMin } from '../../../common/utils/styleUtils';
 import { formatTime } from '../../../common/utils/time';

-type TimerTypeParams = Pick<ViewExtendedTimer, 'timerType' | 'current' | 'elapsed' | 'clock'>;
+type TimerTypeParams = Pick<ViewExtendedTimer, 'isTimeToEnd' | 'timerType' | 'current' | 'elapsed' | 'clock'>;

 export function getTimerByType(freezeEnd: boolean, timerObject?: TimerTypeParams): number | null {
  if (!timerObject) {
    return null;
  }

+  if (timerObject.isTimeToEnd) {
+    if (timerObject.current === null) {
+      return null;
+    }
+    return freezeEnd ? Math.max(timerObject.current, 0) : timerObject.current;
+  }
+
  switch (timerObject.timerType) {
    case TimerType.CountDown:
-    case TimerType.TimeToEnd:
      if (timerObject.current === null) {
        return null;
      }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Carlos Valente	9813643c96	feat: parse timeToEnd from excel	2024-12-16 13:38:49 +01:00
Carlos Valente	b88c2a6bd8	refactor: extract time-to-end	2024-12-16 13:38:46 +01:00
Carlos Valente	ed65a4db67	refactor: smaller settings	2024-12-15 11:04:15 +01:00
Carlos Valente	4a70bcfe64	chore: remove unused	2024-12-15 11:04:15 +01:00
Carlos Valente	89e68c3b0e	fix: correct aria label	2024-12-15 11:04:15 +01:00
Carlos Valente	976dc9cbde	refactor: tweak header style	2024-12-15 11:04:15 +01:00
Carlos Valente	3701ba5174	refactor: handle missing data	2024-12-15 11:04:15 +01:00
Carlos Valente	acc6ba63ba	refactor: keep drawer open on submit	2024-12-15 11:04:15 +01:00
Carlos Valente	6c5afcb8d9	refactor: improve empty state for pages	2024-12-15 09:55:52 +01:00
Carlos Valente	d46dfcf82e	refactor: improve redirect	2024-12-14 08:25:53 +01:00
Carlos Valente	4c6acc4013	refactor: improve active styles for navigation buttons	2024-12-13 11:24:03 +01:00
Carlos Valente	26a24449de	refactor: prevent modal close on click outside	2024-12-13 10:40:16 +01:00
Carlos Valente	a1fb642441	bump version to 3.9.5	2024-12-13 10:40:16 +01:00
Carlos Valente	b64b154330	refactor: disable shutdown	2024-12-13 10:39:58 +01:00
Carlos Valente	5032cbf65a	refactor: prevent instantiating unavailable services	2024-12-13 10:39:58 +01:00
Carlos Valente	466360f9d1	chore: note service limitations	2024-12-13 10:39:58 +01:00
Carlos Valente	ef2ea9a1da	fix: recover edit menu and shortcuts	2024-12-13 10:39:45 +01:00
Carlos Valente	fb83f48752	refactor: maintain an isOnline flag in client	2024-12-13 10:39:30 +01:00
Carlos Valente	c1d53b0e55	refactor: improve empty state for project info	2024-12-13 10:12:06 +01:00
Alex Christoffer Rasmussen	7915cc822d	Dockersafe rename (#1370 ) * add dockerSafeRename function * replace all rename functions * add explanation to function	2024-12-10 23:27:51 +01:00
Carlos Valente	7dbf64d100	chore: restructure directory	2024-12-10 15:53:53 +01:00
Carlos Valente	6ffbf2af9d	chore: move files to new structure	2024-12-10 15:53:53 +01:00
Carlos Valente	fa7ec623f1	bump version to 3.9.4	2024-12-08 08:52:18 +01:00
Carlos Valente	bfb9b51073	fix: secure protocol resolution	2024-12-08 08:52:18 +01:00
Carlos Valente	8bc3f5a56c	Fix links (#1366 ) * chore: remove unused code * bump version to 3.9.3 * chore: use constant links * refactor: build links * chore: ignore ontime-data	2024-12-06 16:48:35 +01:00
Carlos Valente	acf1afb5e9	fix: prevent overflow	2024-12-06 14:54:41 +01:00
Carlos Valente	d8e2a8d092	bump version to 3.9.2	2024-12-04 21:41:49 +01:00
Carlos Valente	8e587128a1	refactor: ensure element height	2024-12-04 21:41:49 +01:00
Alex Christoffer Rasmussen	607bc40673	create addTime function in simple timer (#1363 ) * create addTime function in simple timer	2024-12-04 20:25:49 +01:00
Carlos Valente	e6aa7404f7	chore: correct documentation	2024-12-04 19:49:49 +01:00
Carlos Valente	d622a7738f	refactor: remove deprecated field	2024-12-04 19:49:49 +01:00
Carlos Valente	b9ba416366	refactor: add prefix to relative assets refactor: add prefix to server entrypoints refactor: add prefix to express router refactor: add prefix to router basename	2024-12-04 19:49:49 +01:00
Carlos Valente	b3ce247f54	bump version to 3.9.1	2024-12-02 14:45:57 +01:00
Carlos Valente	82a2660fbc	fix: router prefix	2024-12-02 14:45:57 +01:00
Carlos Valente	1e8706aa73	feat: allow add time to aux timer	2024-12-02 13:30:22 +01:00
Carlos Valente	7dec32aea7	bump version to 3.9.0	2024-12-02 13:30:11 +01:00
Carlos Valente	7e4cf6ffce	refactor: improve time added display	2024-12-01 21:06:33 +01:00
Carlos Valente	e6dfe9c363	fix: rolling over midnight wrongly classified as skip	2024-12-01 21:06:33 +01:00
Carlos Valente	29e682ee06	refactor: remove frozen implementation	2024-11-30 22:31:18 +01:00
Carlos Valente	55d349877b	fix: prevent stale data in finder	2024-11-30 22:30:19 +01:00
Alex Christoffer Rasmussen	8f2a93d6a3	FIX: OSC TX and RX shutdown was swapped (#1352 )	2024-11-30 22:27:36 +01:00
Carlos Valente	6529a05e2a	fix: previous eventid is any entry	2024-11-30 21:59:53 +01:00
Alex Christoffer Rasmussen	0f5c47bc82	Small fixes (#1345 ) * cleanup: remove console log * use UI Index	2024-11-30 10:11:36 +01:00
Carlos Valente	f561e52bb5	refactor: prevent caching html files	2024-11-29 19:36:39 +01:00
Carlos Valente	35f4472daa	chore: define test workspaces	2024-11-29 19:36:39 +01:00
Carlos Valente	272f788c15	refactor: split vendor	2024-11-29 19:36:39 +01:00
Carlos Valente	85b71627a8	refactor: exclude html from compression	2024-11-29 19:36:39 +01:00
Carlos Valente	6e51e5083b	refactor: allow route prefix	2024-11-29 19:36:39 +01:00
Ary Neto	1f998fda74	reverted unnecessary change	2024-11-28 22:10:48 +01:00
Ary Neto	e7b5baa49a	fix: file picker opening on delete	2024-11-28 22:10:48 +01:00
Carlos Valente	f3f4cdb19f	feat: add support for chinese	2024-11-25 09:55:07 +01:00
Carlos Valente	b489214004	refactor: allow copy-paste in interface	2024-11-25 09:54:43 +01:00
Carlos Valente	cc55414b57	refactor: show project description	2024-11-25 09:54:43 +01:00
Carlos Valente	e694cb7556	refactor: style tweaks to cuesheet	2024-11-25 09:54:43 +01:00
Carlos Valente	988100c1d9	chore: remove extra character	2024-11-25 09:54:04 +01:00
Carlos Valente	b4eabfae72	feat: trigger welcome modal from electron	2024-11-25 09:54:04 +01:00
Carlos Valente	22fe65c655	feat: show welcome screen on first login	2024-11-25 09:54:04 +01:00
Carlos Valente	7bf90d669a	refactor: expose api for loading demo project	2024-11-25 09:54:04 +01:00
Carlos Valente	a518dc4882	refactor: consolidate event editor styles	2024-11-25 09:54:04 +01:00
Carlos Valente	dd5ffb2f47	refactor: improve app data	2024-11-25 09:54:04 +01:00
Carlos Valente	c5a5eab225	refactor: extract utility hook	2024-11-25 09:54:04 +01:00
Carlos Valente	5d6345717f	chore: update ontime assets	2024-11-25 09:54:04 +01:00
asharonbaltazar	4c88f90a15	feat(ui): disable menu buttons with `locked` param (#1332 ) * feat: add lock icon when param `locked=true` * chore: move `isViewLocked` logic up the component tree * chore: remove extra container from lock icon * chore: move fading logic into separate hook * chore: move locked icon into separate component * chore: rename variables	2024-11-18 09:49:49 -05:00
Carlos Valente	238eb49b5c	bump version to 3.8.0	2024-11-18 14:57:40 +01:00
Carlos Valente	7aec3e0d73	feat: project info view	2024-11-18 14:56:30 +01:00
Carlos Valente	312b294a61	refactor: update test	2024-11-18 14:56:30 +01:00
Carlos Valente	9bfa3e9f8e	feat: implement logo in all views	2024-11-18 13:48:05 +01:00
Carlos Valente	9a2cfb59e7	fix: issue with colour string sanitation	2024-11-18 13:12:50 +01:00
Ary	a6e1cbbbce	Upload corporate logo (#1314 ) * feat: upload logo to project data --------- Co-authored-by: Carlos Valente <carlosvalente@pm.me>	2024-11-17 22:55:20 +01:00
Carlos Valente	8dd448db44	feat: implement naive client ping	2024-11-17 21:41:10 +01:00
Carlos Valente	d87542dcf7	refactor: add cloud runtime	2024-11-17 21:41:10 +01:00