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

feat: share link from cuesheet

Browse Source
This commit is contained in:
Carlos Valente
2025-07-03 10:52:20 +02:00
committed by Carlos Valente
parent 84b73fc02a
commit c6c1e4a5d7
12 changed files with 130 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/dialog/Dialog.module.scss
+1 -1
View File
@@ -13,7 +13,7 @@
color: $ui-white;
border-radius: 3px;
box-shadow: $box-shadow-l1;
border: 1px solid $gray-1200;
border: 1px solid $gray-1100;
}
.backdrop {
apps/client/src/common/components/modal/Modal.module.scss
+1 -2
View File
@@ -3,7 +3,6 @@
top: 50%;
left: 50%;
z-index: $zindex-dialog;
transform: translate(-50%, -50%);
padding-inline: 1rem;
@@ -14,7 +13,7 @@
color: $ui-white;
border-radius: 3px;
box-shadow: $box-shadow-l1;
border: 1px solid $gray-1200;
border: 1px solid $gray-1100;
}
.backdrop {
apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
+1 -1
View File
@@ -32,7 +32,7 @@
background-color: $gray-1250;
color: $ui-white;
border-right: 1px solid $gray-1200;
border-right: 1px solid $gray-1100;
&[data-open] {
transform: translateX(0%);
apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss
+1 -1
View File
@@ -38,7 +38,7 @@
background-color: $gray-1250;
color: $ui-white;
border-left: 1px solid $gray-1200;
border-left: 1px solid $gray-1100;
&[data-open] {
transform: translateX(0%);
apps/client/src/common/hooks-query/useUrlPresets.ts
+6 -1
View File
@@ -4,7 +4,11 @@ import { queryRefetchIntervalSlow } from '../../ontimeConfig';
import { URL_PRESETS } from '../api/constants';
import { getUrlPresets } from '../api/urlPresets';
export default function useUrlPresets() {
interface FetchProps {
skip?: boolean;
}
export default function useUrlPresets({ skip = false }: FetchProps = {}) {
const { data, status, isError, refetch } = useQuery({
queryKey: URL_PRESETS,
queryFn: getUrlPresets,
@@ -13,6 +17,7 @@ export default function useUrlPresets() {
retryDelay: (attempt) => attempt * 2500,
refetchInterval: queryRefetchIntervalSlow,
networkMode: 'always',
enabled: !skip,
});
return { data: data ?? [], status, isError, refetch };
apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.module.scss
+5
View File
@@ -12,3 +12,8 @@
color: $label-gray;
user-select: text;
}
.copiableLink {
user-select: text;
color: $ui-white;
}
apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.tsx
+30 -43
View File
@@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import QRCode from 'react-qr-code';
@@ -8,8 +8,6 @@ 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';
import { preventEscape } from '../../../../common/utils/keyEvent';
import { linkToOtherHost } from '../../../../common/utils/linkUtils';
@@ -18,6 +16,12 @@ import * as Panel from '../../panel-utils/PanelUtils';
import style from './GenerateLinkForm.module.scss';
interface GenerateLinkFormProps {
hostOptions: { value: string; label: string }[];
pathOptions: { value: string; label: string }[];
isLockedToView?: boolean;
}
interface GenerateLinkFormOptions {
baseUrl: string;
path: string;
@@ -27,9 +31,7 @@ interface GenerateLinkFormOptions {
type GenerateLinkState = 'pending' | 'loading' | 'success' | 'error';
export default function GenerateLinkForm() {
const { data: infoData } = useInfo();
const { data: urlPresetData } = useUrlPresets();
export default function GenerateLinkForm({ hostOptions, pathOptions, isLockedToView }: GenerateLinkFormProps) {
const [formState, setFormState] = useState<GenerateLinkState>('pending');
const [url, setUrl] = useState(serverURL);
@@ -43,7 +45,7 @@ export default function GenerateLinkForm() {
mode: 'onChange',
defaultValues: {
baseUrl: currentHostName,
path: 'timer',
path: isLockedToView ? pathOptions[0].value : 'timer',
lock: false,
authenticate: false,
},
@@ -70,37 +72,20 @@ 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>}
<Info>
<Panel.Paragraph>
You can generate a link to share with your team or to use in automation (such as companion).
</Panel.Paragraph>
</Info>
{!isLockedToView ? (
<Info>
<Panel.Paragraph>
You can generate a link to share with your team or to use in automation (such as companion).
</Panel.Paragraph>
</Info>
) : (
<Info>
<Panel.Paragraph>You can generate a link to share with your team</Panel.Paragraph>
</Info>
)}
<Panel.ListGroup>
<Panel.ListItem>
<Panel.Field
@@ -114,13 +99,15 @@ export default function GenerateLinkForm() {
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 options={pathOptions} value={watch('path')} onValueChange={(value) => setValue('path', value)} />
</Panel.ListItem>
{isLockedToView ? (
<input type='hidden' value={watch('path')} />
) : (
<Panel.ListItem>
<Panel.Field title='Ontime view' description='Which view or preset will the link point to' />
<Select options={pathOptions} value={watch('path')} onValueChange={(value) => setValue('path', value)} />
</Panel.ListItem>
)}
<Panel.ListItem>
<Panel.Field
title='Lock navigation'
@@ -145,7 +132,7 @@ export default function GenerateLinkForm() {
</Button>
<div className={style.column}>
<QRCode size={172} value={url} className={style.qrCode} />
<div>{url}</div>
<div className={style.copiableLink}>{url}</div>
</div>
</Panel.ListItem>
</Panel.ListGroup>
apps/client/src/features/app-settings/panel/network-panel/GenerateLinkFormExport.tsx
+42
View File
@@ -0,0 +1,42 @@
import { useMemo } from 'react';
import useInfo from '../../../../common/hooks-query/useInfo';
import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
import GenerateLinkForm from './GenerateLinkForm';
interface GenerateLinkFormExportProps {
lockedPath?: { value: string; label: string };
}
export default function GenerateLinkFormExport({ lockedPath }: GenerateLinkFormExportProps) {
const { data: infoData } = useInfo();
const { data: urlPresetData } = useUrlPresets({ skip: lockedPath === undefined });
const hostOptions = useMemo(
() =>
infoData.networkInterfaces.map((nif) => ({
value: nif.address,
label: `${nif.name} - ${nif.address}`,
})),
[infoData.networkInterfaces],
);
const pathOptions = useMemo(() => {
if (lockedPath) {
return [{ value: lockedPath.value, label: lockedPath.label }];
}
return [
{ 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}`,
})),
];
}, [lockedPath, urlPresetData]);
return <GenerateLinkForm hostOptions={hostOptions} pathOptions={pathOptions} isLockedToView={Boolean(lockedPath)} />;
}
apps/client/src/features/app-settings/panel/network-panel/NetworkLogPanel.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ import type { PanelBaseProps } from '../../panel-list/PanelList';
import * as Panel from '../../panel-utils/PanelUtils';
import ClientControlPanel from '../client-control-panel/ClientControlPanel';
import GenerateLinkForm from './GenerateLinkForm';
import GenerateLinkFormExport from './GenerateLinkFormExport';
import InfoNif from './NetworkInterfaces';
import LogExport from './NetworkLogExport';
@@ -37,7 +37,7 @@ export default function NetworkLogPanel({ location }: PanelBaseProps) {
<InfoNif />
</>
)}
<GenerateLinkForm />
<GenerateLinkFormExport />
</Panel.Card>
</Panel.Section>
</div>
apps/client/src/features/operator/edit-modal/EditModal.module.scss
+1 -1
View File
@@ -13,7 +13,7 @@
color: $ui-white;
border-radius: 3px;
box-shadow: $box-shadow-l1;
border: 1px solid $gray-1200;
border: 1px solid $gray-1100;
}
.title {
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetShareModal.tsx
+37
View File
@@ -0,0 +1,37 @@
import { useDisclosure } from '@mantine/hooks';
import Button from '../../../../common/components/buttons/Button';
import RotatedLink from '../../../../common/components/icons/RotatedLink';
import Modal from '../../../../common/components/modal/Modal';
import useInfo from '../../../../common/hooks-query/useInfo';
import useUrlPresets from '../../../../common/hooks-query/useUrlPresets';
import GenerateLinkFormExport from '../../../../features/app-settings/panel/network-panel/GenerateLinkFormExport';
function CuesheetShareModal() {
const { data: infoData } = useInfo();
const { data: urlPresetData } = useUrlPresets();
const [isOpen, handler] = useDisclosure();
// Don't render the modal content until it's open and data is loaded
const showModalContent = isOpen && infoData && urlPresetData;
return (
<>
<Button variant='subtle' onClick={handler.open}>
<RotatedLink />
Share...
</Button>
<Modal
isOpen={isOpen}
onClose={handler.close}
title='Share cuesheet view'
showCloseButton
bodyElements={
showModalContent ? <GenerateLinkFormExport lockedPath={{ value: 'cuesheet', label: 'Cuesheet' }} /> : null
}
/>
</>
);
}
export default CuesheetShareModal;
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetTableSettings.tsx
+3 -7
View File
@@ -7,10 +7,11 @@ import { OntimeEntry } from 'ontime-types';
import Button from '../../../../common/components/buttons/Button';
import Checkbox from '../../../../common/components/checkbox/Checkbox';
import * as Editor from '../../../../common/components/editor-utils/EditorUtils';
import RotatedLink from '../../../../common/components/icons/RotatedLink';
import PopoverContents from '../../../../common/components/popover/Popover';
import { usePersistedCuesheetOptions } from '../../cuesheet.options';
import CuesheetShareModal from './CuesheetShareModal';
import style from './CuesheetTableSettings.module.scss';
interface CuesheetTableSettingsProps {
@@ -41,13 +42,8 @@ function CuesheetTableSettings({
<div className={style.inline}>
<ViewSettingsFollowButton />
<Editor.Separator orientation='vertical' />
<Button variant='subtle'>
<RotatedLink />
Share...
</Button>
<CuesheetShareModal />
</div>
</div>
);