From c6c1e4a5d7f1162d2632412ed1b821a7ec253549 Mon Sep 17 00:00:00 2001 From: Carlos Valente Date: Thu, 3 Jul 2025 10:52:20 +0200 Subject: [PATCH] feat: share link from cuesheet --- .../components/dialog/Dialog.module.scss | 2 +- .../common/components/modal/Modal.module.scss | 3 +- .../NavigationMenu.module.scss | 2 +- .../ViewParamsEditor.module.scss | 2 +- .../src/common/hooks-query/useUrlPresets.ts | 7 +- .../GenerateLinkForm.module.scss | 5 ++ .../panel/network-panel/GenerateLinkForm.tsx | 73 ++++++++----------- .../network-panel/GenerateLinkFormExport.tsx | 42 +++++++++++ .../panel/network-panel/NetworkLogPanel.tsx | 4 +- .../operator/edit-modal/EditModal.module.scss | 2 +- .../CuesheetShareModal.tsx | 37 ++++++++++ .../CuesheetTableSettings.tsx | 10 +-- 12 files changed, 130 insertions(+), 59 deletions(-) create mode 100644 apps/client/src/features/app-settings/panel/network-panel/GenerateLinkFormExport.tsx create mode 100644 apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-settings/CuesheetShareModal.tsx diff --git a/apps/client/src/common/components/dialog/Dialog.module.scss b/apps/client/src/common/components/dialog/Dialog.module.scss index 0957539aa..8eab95871 100644 --- a/apps/client/src/common/components/dialog/Dialog.module.scss +++ b/apps/client/src/common/components/dialog/Dialog.module.scss @@ -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 { diff --git a/apps/client/src/common/components/modal/Modal.module.scss b/apps/client/src/common/components/modal/Modal.module.scss index d45cbb281..57b2b6373 100644 --- a/apps/client/src/common/components/modal/Modal.module.scss +++ b/apps/client/src/common/components/modal/Modal.module.scss @@ -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 { diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss index 613d8c298..9381f6bd6 100644 --- a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss +++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss @@ -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%); diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss index bf6604b6e..cd6e37914 100644 --- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss +++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss @@ -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%); diff --git a/apps/client/src/common/hooks-query/useUrlPresets.ts b/apps/client/src/common/hooks-query/useUrlPresets.ts index f43d6d511..c55b41ef3 100644 --- a/apps/client/src/common/hooks-query/useUrlPresets.ts +++ b/apps/client/src/common/hooks-query/useUrlPresets.ts @@ -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 }; diff --git a/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.module.scss b/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.module.scss index e6f932ec7..644aec555 100644 --- a/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.module.scss +++ b/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.module.scss @@ -12,3 +12,8 @@ color: $label-gray; user-select: text; } + +.copiableLink { + user-select: text; + color: $ui-white; +} \ No newline at end of file diff --git a/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.tsx b/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.tsx index e98ea7bc7..a309c62fe 100644 --- a/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.tsx +++ b/apps/client/src/features/app-settings/panel/network-panel/GenerateLinkForm.tsx @@ -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('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 ( preventEscape(event)}> {errors.root && {errors.root.message}} - - - You can generate a link to share with your team or to use in automation (such as companion). - - + {!isLockedToView ? ( + + + You can generate a link to share with your team or to use in automation (such as companion). + + + ) : ( + + You can generate a link to share with your team + + )} setValue('baseUrl', value)} /> - - - + ) : ( + + +