cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-11 02:13:48 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

refactor: migrate related components

Browse Source
This commit is contained in:
Carlos Valente
2025-07-03 09:00:00 +02:00
committed by Carlos Valente
parent cd8e014f08
commit 84b73fc02a
23 changed files with 346 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/buttons/BaseButtonStyles.module.scss
+19
View File
@@ -81,6 +81,25 @@
}
.ghosted {
background: transparent;
color: $blue-500;
&:hover:not(:disabled):not(:active) {
background: $gray-1000;
color: $blue-500;
}
&:active:not(:disabled) {
background: $gray-1100;
border-color: $gray-1250;
}
&:disabled {
opacity: $opacity-disabled;
}
}
.ghosted-white {
background: transparent;
color: $ui-white;
apps/client/src/common/components/buttons/Button.module.scss
+31
View File
@@ -2,6 +2,7 @@
@import './BaseButtonStyles.module.scss';
.baseButton {
position: relative;
display: flex;
align-items: center;
justify-content: center;
@@ -25,6 +26,36 @@
outline: 2px solid $blue-500;
outline-offset: 2px;
}
&.loading {
cursor: wait;
.content {
opacity: 0;
}
}
}
.content {
display: flex;
align-items: center;
gap: inherit;
}
.loadingOverlay {
position: absolute;
display: grid;
place-content: center;
}
.spinner {
animation: spin 1s linear infinite;
stroke-dasharray: 8;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.small {
apps/client/src/common/components/buttons/Button.tsx
+30 -15
View File
@@ -1,29 +1,44 @@
import { ButtonHTMLAttributes, forwardRef } from 'react';
import { IoEllipseOutline } from 'react-icons/io5';
import { cx } from '../../utils/styleUtils';
import style from './Button.module.scss';
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted';
variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted' | 'ghosted-white';
size?: 'small' | 'medium' | 'large' | 'xlarge';
fluid?: boolean;
loading?: boolean;
}
const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const { className, children, variant = 'subtle', size = 'medium', fluid, ...buttonProps } = props;
return (
<button
ref={ref}
className={cx([style.baseButton, style[variant], style[size], fluid && style.fluid, className])}
type='button'
{...buttonProps}
>
{children}
</button>
);
});
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ className, children, variant = 'subtle', size = 'medium', fluid, loading, ...buttonProps }, ref) => {
return (
<button
ref={ref}
className={cx([
style.baseButton,
style[variant],
style[size],
fluid && style.fluid,
loading && style.loading,
className,
])}
type='button'
disabled={loading || buttonProps.disabled}
{...buttonProps}
>
<span className={style.content}>{children}</span>
{loading && (
<div className={style.loadingOverlay}>
<IoEllipseOutline className={style.spinner} />
</div>
)}
</button>
);
},
);
Button.displayName = 'Button';
apps/client/src/common/components/buttons/IconButton.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { cx } from '../../utils/styleUtils';
import style from './IconButton.module.scss';
interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted';
variant?: 'primary' | 'subtle' | 'subtle-white' | 'destructive' | 'subtle-destructive' | 'ghosted' | 'ghosted-white';
size?: 'small' | 'medium' | 'large' | 'xlarge';
}
apps/client/src/common/components/input/textarea/Textarea.module.scss
+47
View File
@@ -0,0 +1,47 @@
@use '../../../../theme/viewerDefs' as *;
.textarea {
box-sizing: border-box;
display: block;
font-size: 1rem;
font-weight: 400;
color: $gray-200;
border-radius: $component-border-radius-md;
border: 1px solid transparent;
padding-inline: 0.5em;
outline: none;
&:hover:not(:disabled) {
background-color: $gray-1100;
}
&:focus:not(:read-only) {
background-color: $gray-1000;
border: 1px solid $blue-500;
}
&:disabled {
opacity: 0.4;
cursor: not-allowed;
}
&::placeholder {
color: $gray-500;
letter-spacing: 0;
}
}
.subtle {
background-color: $gray-1200;
}
.ghosted {
background-color: transparent;
padding: 0;
}
.fluid {
width: 100%;
}
apps/client/src/common/components/input/textarea/Textarea.tsx
+31
View File
@@ -0,0 +1,31 @@
import { forwardRef, TextareaHTMLAttributes } from 'react';
import { cx } from '../../../utils/styleUtils';
import style from './Textarea.module.scss';
export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
variant?: 'subtle' | 'ghosted';
fluid?: boolean;
resize?: 'none' | 'both' | 'horizontal' | 'vertical';
}
const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function TextArea(
{ className, variant = 'subtle', fluid, rows = 5, resize = 'none', style: customStyle, ...textareaProps },
ref,
) {
return (
<textarea
ref={ref}
autoCorrect='off'
autoComplete='off'
spellCheck='false'
rows={rows}
style={{ ...customStyle, resize }}
className={cx([style.textarea, style[variant], fluid && style.fluid, className])}
{...textareaProps}
/>
);
});
export default Textarea;
apps/client/src/common/components/select/Select.module.scss
+3 -3
View File
@@ -17,11 +17,11 @@
font-size: calc(1rem - 2px);
white-space: nowrap;
&:hover:not(:disabled) {
&:hover:not([data-disabled]) {
background-color: $gray-1100;
}
&:active {
&:active:not([data-disabled]) {
background-color: $gray-1000;
}
@@ -29,7 +29,7 @@
background-color: $gray-1000;
}
&:disabled {
&[data-disabled] {
opacity: 0.4;
cursor: not-allowed;
}
apps/client/src/common/components/select/Select.tsx
+13 -23
View File
@@ -4,25 +4,17 @@ import { Select as BaseSelect } from '@base-ui-components/react/select';
import styles from './Select.module.scss';
interface SelectProps<T extends string | null = string> {
defaultValue?: T;
interface SelectProps<T> extends Omit<BaseSelect.Root.Props<T>, 'items'> {
// overload items to not allow undefined values
options: {
value: NonNullable<T>;
value: T;
label: string;
disabled?: boolean; // exposed to allow creating a non-selectable option
}[];
value?: T;
onChange?: (value: NonNullable<T>) => void;
}
export default function Select<T extends string | null = string>({
defaultValue,
options,
value,
onChange,
}: SelectProps<T>) {
export default function Select<T>({ options, ...selectRootProps }: SelectProps<T>) {
return (
<BaseSelect.Root items={options} defaultValue={defaultValue} onValueChange={onChange} value={value}>
<BaseSelect.Root items={options} {...selectRootProps}>
<BaseSelect.Trigger className={styles.select}>
<BaseSelect.Value />
<BaseSelect.Icon className={styles.selectIcon}>
@@ -33,16 +25,14 @@ export default function Select<T extends string | null = string>({
<BaseSelect.Positioner side='bottom' align='start'>
<BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
<BaseSelect.Popup className={styles.popup}>
{options.map((option) => {
return (
<BaseSelect.Item key={option.value} className={styles.item} value={option.value}>
<BaseSelect.ItemIndicator className={styles.itemIndicator}>
<IoCheckmark className={styles.itemIndicatorIcon} />
</BaseSelect.ItemIndicator>
<BaseSelect.ItemText className={styles.itemLabel}>{option.label}</BaseSelect.ItemText>
</BaseSelect.Item>
);
})}
{options.map(({ label, value }) => (
<BaseSelect.Item key={String(value)} className={styles.item} value={value}>
<BaseSelect.ItemIndicator className={styles.itemIndicator}>
<IoCheckmark className={styles.itemIndicatorIcon} />
</BaseSelect.ItemIndicator>
<BaseSelect.ItemText className={styles.itemLabel}>{label}</BaseSelect.ItemText>
</BaseSelect.Item>
))}
</BaseSelect.Popup>
<BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
</BaseSelect.Positioner>
apps/client/src/features/app-settings/panel-content/PanelContent.tsx
+5 -6
View File
@@ -1,6 +1,7 @@
import { PropsWithChildren } from 'react';
import { IoClose } from 'react-icons/io5';
import { Button } from '@chakra-ui/react';
import Button from '../../../common/components/buttons/Button';
import style from './PanelContent.module.scss';
@@ -8,14 +9,12 @@ interface PanelContentProps {
onClose: () => void;
}
export default function PanelContent(props: PropsWithChildren<PanelContentProps>) {
const { onClose, children } = props;
export default function PanelContent({ onClose, children }: PropsWithChildren<PanelContentProps>) {
return (
<div className={style.contentWrapper}>
<div className={style.corner}>
<Button onClick={onClose} aria-label='close' rightIcon={<IoClose />} variant='ontime-subtle'>
Close settings
<Button size='large' onClick={onClose}>
Close settings <IoClose />
</Button>
</div>
<div className={style.content}>{children}</div>
apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.tsx
+44 -37
View File
@@ -1,11 +1,13 @@
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { useForm } from 'react-hook-form';
import QRCode from 'react-qr-code';
import { Button, Select, Switch } from '@chakra-ui/react';
import { generateUrl } from '../../../../common/api/session';
import { maybeAxiosError } from '../../../../common/api/utils';
import Button from '../../../../common/components/buttons/Button';
import Info from '../../../../common/components/info/Info';
import Select from '../../../../common/components/select/Select';
import Switch from '../../../../common/components/switch/Switch';
import useInfo from '../../../../common/hooks-query/useInfo';
import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
import copyToClipboard from '../../../../common/utils/copyToClipboard';
@@ -33,14 +35,15 @@ export default function GenerateLinkForm() {
const {
handleSubmit,
register,
setError,
watch,
setValue,
formState: { errors },
} = useForm<GenerateLinkFormOptions>({
mode: 'onChange',
defaultValues: {
baseUrl: currentHostName,
path: '',
path: 'timer',
lock: false,
authenticate: false,
},
@@ -67,6 +70,29 @@ export default function GenerateLinkForm() {
}
};
const hostOptions = useMemo(
() =>
infoData.networkInterfaces.map((nif) => ({
value: nif.address,
label: `${nif.name} - ${nif.address}`,
})),
[infoData.networkInterfaces],
);
const pathOptions = useMemo(
() => [
{ value: 'timer', label: 'Timer' },
{ value: 'cuesheet', label: 'Cuesheet' },
{ value: 'op', label: 'Operator' },
{ value: '', label: 'Companion' },
...urlPresetData.map((preset) => ({
value: preset.alias,
label: `Preset: ${preset.alias}`,
})),
],
[urlPresetData],
);
return (
<Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={(event) => preventEscape(event)}>
{errors.root && <Panel.Error>{errors.root.message}</Panel.Error>}
@@ -81,59 +107,40 @@ export default function GenerateLinkForm() {
title='Host IP'
description={`Which IP address will be used${isOntimeCloud ? ' (not applicable in Ontime Cloud)' : ''}`}
/>
<Select variant='ontime' isDisabled={isOntimeCloud} size='sm' {...register('baseUrl')}>
{infoData.networkInterfaces.map((nif) => {
return (
<option key={nif.name} value={nif.address}>
{`${nif.name} - ${nif.address}`}
</option>
);
})}
</Select>
<Select
disabled={isOntimeCloud}
options={hostOptions}
value={watch('baseUrl')}
onValueChange={(value) => setValue('baseUrl', value)}
/>
</Panel.ListItem>
<Panel.ListItem>
<Panel.Field
title='URL Preset'
description='Which preset will the link point to (will default to /timer if none is given)'
/>
<Select variant='ontime' size='sm' {...register('path')}>
<option key='timer' value='timer'>
Timer
</option>
<option key='companion' value=''>
Companion
</option>
{urlPresetData.map((preset) => {
return (
<option key={preset.alias} value={preset.alias}>
{`Preset: ${preset.alias}`}
</option>
);
})}
</Select>
<Select options={pathOptions} value={watch('path')} onValueChange={(value) => setValue('path', value)} />
</Panel.ListItem>
<Panel.ListItem>
<Panel.Field
title='Lock navigation'
description='Prevent showing navigation (will only work for non production URLs)'
/>
<Switch variant='ontime' size='lg' {...register('lock')} />
<Switch name='lock' checked={watch('lock')} onCheckedChange={(checked) => setValue('lock', checked)} />
</Panel.ListItem>
<Panel.ListItem>
<Panel.Field title='Authenticate' description='Whether the URL should be pre-authenticated' />
<Switch variant='ontime' size='lg' {...register('authenticate')} />
<Switch
name='authenticate'
checked={watch('authenticate')}
onCheckedChange={(checked) => setValue('authenticate', checked)}
/>
</Panel.ListItem>
</Panel.ListGroup>
<Panel.ListGroup>
<Panel.ListItem>
<Panel.Field title='Generate link' description='Fill form and generate link and QR code' />
<Button
variant='ontime-filled'
size='sm'
isLoading={formState === 'loading'}
type='submit'
style={{ alignSelf: 'end' }}
>
<Button variant='primary' loading={formState === 'loading'} type='submit' style={{ alignSelf: 'end' }}>
{formState === 'success' ? 'Link copied to clipboard!' : 'Update share link'}
</Button>
<div className={style.column}>
apps/client/src/features/app-settings/panel/network-panel/NetworkLogExport.tsx
+3 -8
View File
@@ -1,7 +1,7 @@
import { MouseEvent } from 'react';
import { IoArrowUp } from 'react-icons/io5';
import { Button } from '@chakra-ui/react';
import Button from '../../../../common/components/buttons/Button';
import { handleLinks } from '../../../../common/utils/linkUtils';
import Log from '../../../log/Log';
import * as Panel from '../../panel-utils/PanelUtils';
@@ -18,13 +18,8 @@ export default function LogExport() {
<Panel.Card>
<Panel.SubHeader>
Event log
<Button
variant='ontime-subtle'
size='sm'
rightIcon={<IoArrowUp className={style.iconRotate} />}
onClick={extract}
>
Extract
<Button onClick={extract}>
Extract <IoArrowUp className={style.iconRotate} />
</Button>
</Panel.SubHeader>
<Panel.Divider />
apps/client/src/features/app-settings/panel/project-panel/ManageProjects.tsx
+6 -14
View File
@@ -1,10 +1,10 @@
import { ChangeEvent, useRef, useState } from 'react';
import { IoAdd } from 'react-icons/io5';
import { useSearchParams } from 'react-router-dom';
import { Button, Input } from '@chakra-ui/react';
import { uploadProjectFile } from '../../../../common/api/db';
import { invalidateAllCaches, maybeAxiosError } from '../../../../common/api/utils';
import Button from '../../../../common/components/buttons/Button';
import { validateProjectFile } from '../../../../common/utils/uploadUtils';
import * as Panel from '../../panel-utils/PanelUtils';
@@ -57,7 +57,7 @@ export default function ManageProjects() {
return (
<Panel.Section>
<Input
<input
ref={fileInputRef}
style={{ display: 'none' }}
type='file'
@@ -70,22 +70,14 @@ export default function ManageProjects() {
Manage projects
<Panel.InlineElements>
<Button
variant='ontime-subtle'
onClick={handleSelectFile}
size='sm'
isDisabled={Boolean(loading) || isCreatingProject}
isLoading={loading === 'import'}
disabled={Boolean(loading) || isCreatingProject}
loading={loading === 'import'}
>
Import
</Button>
<Button
variant='ontime-subtle'
onClick={handleToggleCreate}
size='sm'
isDisabled={Boolean(loading) || isCreatingProject}
rightIcon={<IoAdd />}
>
New
<Button onClick={handleToggleCreate} disabled={Boolean(loading) || isCreatingProject}>
New <IoAdd />
</Button>
</Panel.InlineElements>
</Panel.SubHeader>
apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx
+16 -48
View File
@@ -1,12 +1,14 @@
import { useEffect, useState } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { IoTrash } from 'react-icons/io5';
import { Button, Input, Textarea } from '@chakra-ui/react';
import { IoAdd, IoTrash } from 'react-icons/io5';
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 Button from '../../../../common/components/buttons/Button';
import Input from '../../../../common/components/input/input/Input';
import Textarea from '../../../../common/components/input/textarea/Textarea';
import { preventEscape } from '../../../../common/utils/keyEvent';
import { documentationUrl } from '../../../../externals';
import * as Panel from '../../panel-utils/PanelUtils';
@@ -86,10 +88,10 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
<Panel.Title>
Create new project
<Panel.InlineElements>
<Button onClick={onClose} variant='ontime-ghosted' size='sm' isDisabled={isSubmitting}>
<Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
Cancel
</Button>
<Button isDisabled={!isValid} type='submit' isLoading={isSubmitting} variant='ontime-filled' size='sm'>
<Button disabled={!isValid} type='submit' loading={isSubmitting} variant='primary'>
Create project
</Button>
</Panel.InlineElements>
@@ -98,53 +100,31 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
<Panel.Section className={style.innerColumn}>
<label>
Project title
<Input
variant='ontime-filled'
size='sm'
maxLength={50}
placeholder='Your project name'
autoComplete='off'
{...register('title')}
/>
<Input fluid maxLength={50} placeholder='Your project name' {...register('title')} />
</label>
<label>
Project description
<Input
variant='ontime-filled'
size='sm'
maxLength={100}
placeholder='Euro Love, Malmö 2024'
autoComplete='off'
{...register('description')}
/>
<Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
</label>
<label>
Backstage info
<Textarea
variant='ontime-filled'
size='sm'
fluid
maxLength={150}
placeholder='Wi-Fi password: 1234'
autoComplete='off'
resize='none'
resize='vertical'
{...register('backstageInfo')}
/>
</label>
<label>
Backstage QR code Url
<Input
variant='ontime-filled'
size='sm'
placeholder={documentationUrl}
autoComplete='off'
{...register('backstageUrl')}
/>
<Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
</label>
<Panel.Section>
<Panel.ListItem>
<Panel.Field title='Custom data' description='Add custom data for your project' />
<Button variant='ontime-subtle' onClick={handleAddCustom}>
+
<Button onClick={handleAddCustom}>
Add <IoAdd />
</Button>
</Panel.ListItem>
{fields.map((field, idx) => (
@@ -152,25 +132,13 @@ export default function ProjectCreateForm(props: ProjectCreateFromProps) {
<Panel.Paragraph>{idx + 1}.</Panel.Paragraph>
<label>
Title
<Input
variant='ontime-filled'
size='sm'
placeholder={field.title}
autoComplete='off'
{...register(`custom.${idx}.title` as const)}
/>
<Input placeholder={field.title} {...register(`custom.${idx}.title` as const)} />
</label>
<label>
Value
<Input
variant='ontime-filled'
size='sm'
placeholder={field.value}
autoComplete='off'
{...register(`custom.${idx}.value` as const)}
/>
<Input placeholder={field.value} autoComplete='off' {...register(`custom.${idx}.value` as const)} />
</label>
<Button variant='ontime-ghosted' onClick={() => remove(idx)}>
<Button variant='ghosted' onClick={() => remove(idx)}>
<IoTrash />
</Button>
</div>
apps/client/src/features/app-settings/panel/project-panel/ProjectData.tsx
+39 -79
View File
@@ -1,12 +1,14 @@
import { ChangeEvent, useEffect, useRef } from 'react';
import { useFieldArray, useForm } from 'react-hook-form';
import { IoAdd, IoDownloadOutline, IoTrash } from 'react-icons/io5';
import { Button, Input, Textarea } from '@chakra-ui/react';
import { type ProjectData } from 'ontime-types';
import { projectLogoPath } from '../../../../common/api/constants';
import { postProjectData, uploadProjectLogo } from '../../../../common/api/project';
import { maybeAxiosError } from '../../../../common/api/utils';
import Button from '../../../../common/components/buttons/Button';
import Input from '../../../../common/components/input/input/Input';
import Textarea from '../../../../common/components/input/textarea/Textarea';
import useProjectData from '../../../../common/hooks-query/useProjectData';
import { preventEscape } from '../../../../common/utils/keyEvent';
import { validateLogo } from '../../../../common/utils/uploadUtils';
@@ -112,16 +114,10 @@ export default function ProjectData() {
<Panel.SubHeader>
Project data
<Panel.InlineElements>
<Button variant='ontime-ghosted' size='sm' onClick={onReset} isDisabled={isSubmitting || !isDirty}>
<Button onClick={onReset} disabled={isSubmitting || !isDirty}>
Revert to saved
</Button>
<Button
variant='ontime-filled'
size='sm'
type='submit'
isDisabled={!isDirty || !isValid}
isLoading={isSubmitting}
>
<Button variant='primary' type='submit' disabled={!isDirty || !isValid} loading={isSubmitting}>
Save
</Button>
</Panel.InlineElements>
@@ -132,20 +128,16 @@ export default function ProjectData() {
<label>
Project title
<Input
variant='ontime-filled'
size='sm'
fluid
maxLength={50}
placeholder='Project title is shown in production views'
autoComplete='off'
{...register('title')}
/>
</label>
<Panel.Section style={{ marginTop: 0 }}>
<label>
Project logo
<Input
variant='ontime-filled'
size='sm'
<input
type='file'
style={{ display: 'none' }}
accept='image/*'
@@ -161,25 +153,17 @@ export default function ProjectData() {
<>
<img src={`${projectLogoPath}/${watch('projectLogo')}`} />
<Button
size='sm'
variant='ontime-filled'
isDisabled={isSubmitting || !watch('projectLogo')}
leftIcon={<IoTrash />}
variant='subtle-destructive'
disabled={isSubmitting || !watch('projectLogo')}
onClick={handleDeleteLogo}
type='button'
>
<IoTrash />
Delete
</Button>
</>
) : (
<Button
variant='ontime-filled'
size='sm'
isDisabled={isSubmitting}
leftIcon={<IoDownloadOutline />}
onClick={handleClickUpload}
type='button'
>
<Button disabled={isSubmitting} onClick={handleClickUpload} type='button'>
<IoDownloadOutline />
Upload logo
</Button>
)}
@@ -187,44 +171,30 @@ export default function ProjectData() {
</Panel.Card>
</label>
</Panel.Section>
<label>
Project description
<Input
variant='ontime-filled'
size='sm'
maxLength={100}
placeholder='Euro Love, Malmö 2024'
autoComplete='off'
{...register('description')}
/>
<Input fluid maxLength={100} placeholder='Euro Love, Malmö 2024' {...register('description')} />
</label>
<label>
Backstage info
<Textarea
variant='ontime-filled'
size='sm'
fluid
maxLength={150}
placeholder='Wi-Fi password: 1234'
autoComplete='off'
resize='none'
resize='vertical'
{...register('backstageInfo')}
/>
</label>
<label>
Backstage QR code URL
<Input
variant='ontime-filled'
size='sm'
placeholder={documentationUrl}
autoComplete='off'
{...register('backstageUrl')}
/>
<Input fluid placeholder={documentationUrl} {...register('backstageUrl')} />
</label>
<Panel.Section style={{ marginTop: 0 }}>
<Panel.ListItem>
<Panel.Field title='Custom data' description='' />
<Button leftIcon={<IoAdd />} size='sm' variant='ontime-subtle' onClick={handleAddCustom}>
Add
<Button onClick={handleAddCustom}>
Add <IoAdd />
</Button>
</Panel.ListItem>
{fields.length > 0 &&
@@ -237,41 +207,31 @@ export default function ProjectData() {
| undefined;
return (
<div key={field.id} className={style.customDataItem}>
<div>
<div className={style.titleRow}>
<label>
Title
<Input
variant='ontime-filled'
size='sm'
defaultValue={field.title}
placeholder='Title of your custom data'
autoComplete='off'
{...register(`custom.${idx}.title`, {
required: { value: true, message: 'Field cannot be empty' },
})}
/>
</label>
<Button
size='sm'
variant='ontime-subtle'
color='#FA5656' // $red-500
onClick={() => remove(idx)}
leftIcon={<IoTrash />}
>
Delete Entry
</Button>
</div>
{rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
<div className={style.titleRow}>
<label>
Title
<Input
fluid
defaultValue={field.title}
placeholder='Title of your custom data'
{...register(`custom.${idx}.title`, {
required: { value: true, message: 'Field cannot be empty' },
})}
/>
</label>
<Button variant='subtle-destructive' onClick={() => remove(idx)}>
<IoTrash />
Delete Entry
</Button>
</div>
{rowErrors?.title?.message && <Panel.Error>{rowErrors.title.message}</Panel.Error>}
<label>
Value
<Textarea
variant='ontime-filled'
resize='none'
size='sm'
fluid
rows={3}
resize='vertical'
defaultValue={field.value}
autoComplete='off'
placeholder='Text of your custom data'
{...register(`custom.${idx}.value`, {
required: { value: true, message: 'Field cannot be empty' },
apps/client/src/features/control/message/TimerViewControl.tsx
+7 -9
View File
@@ -61,14 +61,6 @@ function SecondarySourceControl() {
}
};
const changeValue = (newValue: SecondarySource) => {
// we can only update the remote if it is enabled
if (secondarySource !== null) {
setMessage.timerSecondarySource(newValue);
}
setValue(newValue);
};
return (
<>
<Select
@@ -79,7 +71,13 @@ function SecondarySourceControl() {
{ value: 'aux3', label: 'Aux 3' },
{ value: 'secondary', label: 'Secondary message' },
]}
onChange={changeValue}
onValueChange={(value) => {
// we can only update the remote if it is enabled
if (secondarySource !== null) {
setMessage.timerSecondarySource(value as SecondarySource);
}
setValue(value as SecondarySource);
}}
/>
<Button
variant={secondarySource !== null ? 'primary' : 'subtle'}
apps/client/src/features/log/Log.tsx
+14 -14
View File
@@ -1,7 +1,7 @@
import { useCallback, useState } from 'react';
import { Button } from '@chakra-ui/react';
import { LogOrigin } from 'ontime-types';
import Button from '../../common/components/buttons/Button';
import { clearLogs, useLogData } from '../../common/stores/logger';
import * as Panel from '../app-settings/panel-utils/PanelUtils';
@@ -52,8 +52,8 @@ export default function Log() {
<>
<Panel.InlineElements className={style.buttonBar}>
<Button
variant={showUser ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showUser ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowUser((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.User)}
onContextMenu={(e) => e.preventDefault()}
@@ -61,8 +61,8 @@ export default function Log() {
{LogOrigin.User}
</Button>
<Button
variant={showClient ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showClient ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowClient((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Client)}
onContextMenu={(e) => e.preventDefault()}
@@ -70,8 +70,8 @@ export default function Log() {
{LogOrigin.Client}
</Button>
<Button
variant={showServer ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showServer ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowServer((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Server)}
onContextMenu={(e) => e.preventDefault()}
@@ -79,8 +79,8 @@ export default function Log() {
{LogOrigin.Server}
</Button>
<Button
variant={showPlayback ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showPlayback ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowPlayback((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Playback)}
onContextMenu={(e) => e.preventDefault()}
@@ -88,8 +88,8 @@ export default function Log() {
{LogOrigin.Playback}
</Button>
<Button
variant={showRx ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showRx ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowRx((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Rx)}
onContextMenu={(e) => e.preventDefault()}
@@ -97,15 +97,15 @@ export default function Log() {
{LogOrigin.Rx}
</Button>
<Button
variant={showTx ? 'ontime-filled' : 'ontime-outlined'}
size='xs'
variant={showTx ? 'primary' : 'subtle'}
size='small'
onClick={() => setShowTx((s) => !s)}
onAuxClick={() => disableOthers(LogOrigin.Tx)}
onContextMenu={(e) => e.preventDefault()}
>
{LogOrigin.Tx}
</Button>
<Button variant='ontime-subtle' size='xs' onClick={clearLogs}>
<Button variant='subtle-destructive' size='small' onClick={clearLogs}>
Clear
</Button>
</Panel.InlineElements>
apps/client/src/features/overview/composite/OverviewWrapper.tsx
+4 -4
View File
@@ -1,7 +1,6 @@
import { PropsWithChildren, ReactNode } from 'react';
import { ErrorBoundary } from '@sentry/react';
import { Playback } from 'ontime-types';
import { millisToString } from 'ontime-utils';
import { isPlaybackActive, millisToString } from 'ontime-utils';
import { useIsOnline, useRuntimePlaybackOverview, useTimer } from '../../../common/hooks/useSocket';
import useProjectData from '../../../common/hooks-query/useProjectData';
@@ -72,8 +71,9 @@ export function ProgressOverview() {
export function RuntimeOverview() {
const { clock, offset, playback } = useRuntimePlaybackOverview();
const offsetText = getOffsetText(offset);
const offsetClasses = cx([style.offset, playback !== Playback.Stop && (offset < 0 ? style.behind : style.ahead)]);
const isPlaying = isPlaybackActive(playback);
const offsetText = getOffsetText(isPlaying ? offset : null);
const offsetClasses = cx([style.offset, isPlaying && (offset < 0 ? style.behind : style.ahead)]);
return (
<>
apps/client/src/features/rundown/entry-editor/composite/EventEditorTimes.tsx
+2 -2
View File
@@ -102,7 +102,7 @@ function EventEditorTimes({
<Editor.Label htmlFor='endAction'>End Action</Editor.Label>
<Select
value={endAction}
onChange={(value) => handleSubmit('endAction', value)}
onValueChange={(value) => handleSubmit('endAction', value)}
options={[
{ value: EndAction.None, label: 'None' },
{ value: EndAction.LoadNext, label: 'Load next event' },
@@ -138,7 +138,7 @@ function EventEditorTimes({
<Editor.Label htmlFor='timerType'>Timer Type</Editor.Label>
<Select
value={timerType}
onChange={(value) => handleSubmit('timerType', value)}
onValueChange={(value) => handleSubmit('timerType', value)}
options={[
{ value: TimerType.CountDown, label: 'Count down' },
{ value: TimerType.CountUp, label: 'Count up' },
apps/client/src/features/rundown/entry-editor/composite/EventEditorTriggers.tsx
+26 -6
View File
@@ -1,4 +1,4 @@
import { Fragment, useCallback, useState } from 'react';
import { Fragment, useCallback, useMemo, useState } from 'react';
import { IoAlertCircle, IoCheckmarkCircle, IoTrash } from 'react-icons/io5';
import { Tooltip } from '@chakra-ui/react';
import { TimerLifeCycle, timerLifecycleValues, Trigger } from 'ontime-types';
@@ -66,18 +66,38 @@ function EventTriggerForm({ eventId, triggers }: EventTriggerFormProps) {
const validationError = getValidationError(cycleValue, automationId);
const triggerOptions = useMemo(
() => [
{ value: null, label: 'Select Trigger' },
...eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle })),
],
[], // eventTriggerOptions is a constant, no need for dependency
);
const automationOptions = useMemo(
() => [
{ value: null, label: 'Select Automation' },
...Object.values(automationSettings.automations).map(({ id, title }) => ({ value: id, label: title })),
],
[automationSettings.automations], // This needs to be a dependency as it can change
);
return (
<div className={style.triggerForm}>
<Select
value={cycleValue}
onChange={(value) => setCycleValue(value)}
options={eventTriggerOptions.map((cycle) => ({ value: cycle, label: cycle }))}
onValueChange={(value) => {
if (value !== null) setCycleValue(value);
}}
options={triggerOptions}
/>
<Select
value={automationId}
onChange={(value) => setAutomationId(value)}
options={Object.values(automationSettings.automations).map(({ id, title }) => ({ value: id, label: title }))}
value={automationId ?? null}
onValueChange={(value) => {
if (value !== null) setAutomationId(value);
}}
options={automationOptions}
/>
<Button
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
+1 -3
View File
@@ -50,9 +50,7 @@ function EditableImage({ initialValue, updateValue }: EditableImageProps) {
return (
<div className={style.imageCell}>
<div className={style.overlay}>
<Button variant='subtle-white' onClick={openInNewTab}>
Preview
</Button>
<Button onClick={openInNewTab}>Preview</Button>
<Button variant='subtle-destructive' onClick={() => handleUpdate('')}>
Delete
</Button>
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx
+2 -2
View File
@@ -72,7 +72,7 @@ function ViewSettings() {
<Popover.Root>
<Popover.Trigger
render={
<Button variant='ghosted'>
<Button variant='ghosted-white'>
<IoSettingsOutline /> Settings
<IoChevronDown />
</Button>
@@ -140,7 +140,7 @@ function ColumnSettings({
<Popover.Root>
<Popover.Trigger
render={
<Button variant='ghosted'>
<Button variant='ghosted-white'>
<IoOptions /> View
<IoChevronDown />
</Button>
apps/server/src/api-data/session/session.validation.ts
+1 -2
View File
@@ -1,10 +1,9 @@
import { body } from 'express-validator';
import { requestValidationFunction } from '../validation-utils/validationFunction.js';
export const validateGenerateUrl = [
body('baseUrl').isString().trim().notEmpty(),
body('path').isString().trim().notEmpty(),
body('path').isString().trim(),
body('lock').isBoolean(),
body('authenticate').isBoolean(),
e2e/tests/features/301-spreadsheet-import.spec.ts
+1 -1
View File
@@ -24,7 +24,7 @@ test('sheet file upload', async ({ page }) => {
await page.getByRole('button', { name: 'Import preview' }).click();
await page.getByRole('button', { name: 'Apply' }).click();
await page.getByRole('button', { name: 'Return' }).click();
await page.getByLabel('close').click();
await page.getByRole('button', { name: 'Close settings' }).click();
// asset test events
const firstTitle = page.getByTestId('entry-1').getByTestId('block__title');