diff --git a/apps/client/src/common/components/view-params-editor/ParamInput.tsx b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
index 9820e040b..282e3212e 100644
--- a/apps/client/src/common/components/view-params-editor/ParamInput.tsx
+++ b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
@@ -42,24 +42,31 @@ export default function ParamInput(props: EditFormInputProps) {
}
if (type === 'number') {
- const { prefix } = paramField;
+ const { prefix, placeholder } = paramField;
const defaultNumberValue = searchParams.get(id) ?? defaultValue;
return (
{prefix && {prefix}}
-
+
);
}
const defaultStringValue = searchParams.get(id) ?? defaultValue;
- const { prefix } = paramField;
+ const { prefix, placeholder } = paramField;
return (
{prefix && {prefix}}
-
+
);
}
diff --git a/apps/client/src/common/components/view-params-editor/constants.ts b/apps/client/src/common/components/view-params-editor/constants.ts
index 4092a6002..64443ad67 100644
--- a/apps/client/src/common/components/view-params-editor/constants.ts
+++ b/apps/client/src/common/components/view-params-editor/constants.ts
@@ -20,7 +20,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
description: 'Background colour in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: '00000000',
+ placeholder: '00000000 (default)',
},
{
id: 'text',
@@ -28,7 +28,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
description: 'Text colour in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: 'fffff',
+ placeholder: 'fffff (default)',
},
{
id: 'textbg',
@@ -36,21 +36,21 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
description: 'Colour of text background in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: '00000000',
+ placeholder: '00000000 (default)',
},
{
id: 'font',
title: 'Font',
description: 'Font family, will use the fonts available in the system',
type: 'string',
- defaultValue: 'Arial Black',
+ placeholder: 'Arial Black (default)',
},
{
id: 'size',
title: 'Text Size',
description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
type: 'number',
- defaultValue: 1,
+ placeholder: '1 (default)',
},
{
id: 'alignx',
@@ -65,7 +65,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
title: 'Offset Horizontal',
description: 'Offsets the timer horizontal position by a given amount in pixels',
type: 'number',
- defaultValue: 0,
+ placeholder: '0 (default)',
},
{
id: 'aligny',
@@ -80,7 +80,7 @@ export const getClockOptions = (timeFormat: TimeFormat): ParamField[] => [
title: 'Offset Vertical',
description: 'Offsets the timer vertical position by a given amount in pixels',
type: 'number',
- defaultValue: 0,
+ placeholder: '0 (default)',
},
];
@@ -130,7 +130,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
description: 'Background colour in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: '00000000',
+ placeholder: '00000000 (default)',
},
{
id: 'text',
@@ -138,7 +138,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
description: 'Text colour in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: 'fffff',
+ placeholder: 'fffff (default)',
},
{
id: 'textbg',
@@ -146,21 +146,21 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
description: 'Colour of text background in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: '00000000',
+ placeholder: '00000000 (default)',
},
{
id: 'font',
title: 'Font',
description: 'Font family, will use the fonts available in the system',
type: 'string',
- defaultValue: 'Arial Black',
+ placeholder: 'Arial Black (default)',
},
{
id: 'size',
title: 'Text Size',
description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
type: 'number',
- defaultValue: 1,
+ placeholder: '1 (default)',
},
{
id: 'alignx',
@@ -175,7 +175,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
title: 'Offset Horizontal',
description: 'Offsets the timer horizontal position by a given amount in pixels',
type: 'number',
- defaultValue: 0,
+ placeholder: '0 (default)',
},
{
id: 'aligny',
@@ -190,7 +190,7 @@ export const MINIMAL_TIMER_OPTIONS: ParamField[] = [
title: 'Offset Vertical',
description: 'Offsets the timer vertical position by a given amount in pixels',
type: 'number',
- defaultValue: 0,
+ placeholder: '0 (default)',
},
{
id: 'hideovertime',
@@ -221,14 +221,14 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
title: 'Size',
description: 'Scales the current style (0.5 = 50% 1 = 100% 2 = 200%)',
type: 'number',
- defaultValue: 1,
+ placeholder: '1 (default)',
},
{
id: 'transition',
title: 'Transition',
description: 'Transition in time in seconds (default 3)',
type: 'number',
- defaultValue: 3,
+ placeholder: '3 (default)',
},
{
id: 'text',
@@ -236,7 +236,7 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
description: 'Text colour in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: '#fffffa',
+ placeholder: 'fffffa (default)',
},
{
id: 'bg',
@@ -244,7 +244,7 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
description: 'Text background colour in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: '00000033',
+ placeholder: '00000033 (default)',
},
{
id: 'key',
@@ -252,14 +252,14 @@ export const LOWER_THIRDS_OPTIONS: ParamField[] = [
description: 'Screen background colour in hexadecimal',
prefix: '#',
type: 'string',
- defaultValue: '00000033',
+ placeholder: '00000033 (default)',
},
{
id: 'fadeout',
title: 'Fadeout',
description: 'Time (in seconds) the lower third displays before fading out',
type: 'number',
- defaultValue: 3,
+ placeholder: '3 (default)',
},
];
@@ -284,7 +284,7 @@ export const getBackstageOptions = (timeFormat: TimeFormat): ParamField[] => [
title: 'Events per page',
description: 'Sets the number of events on the page, can cause overlow',
type: 'number',
- defaultValue: 7,
+ placeholder: '7 (default)',
},
];
@@ -309,7 +309,7 @@ export const getPublicOptions = (timeFormat: TimeFormat): ParamField[] => [
title: 'Events per page',
description: 'Sets the number of events on the page, can cause overlow',
type: 'number',
- defaultValue: 7,
+ placeholder: '7 (default)',
},
];
export const getStudioClockOptions = (timeFormat: TimeFormat): ParamField[] => [
diff --git a/apps/client/src/common/components/view-params-editor/types.ts b/apps/client/src/common/components/view-params-editor/types.ts
index 79b4354cd..9405297da 100644
--- a/apps/client/src/common/components/view-params-editor/types.ts
+++ b/apps/client/src/common/components/view-params-editor/types.ts
@@ -9,8 +9,8 @@ type OptionsField = {
values: Record;
defaultValue?: string;
};
-type StringField = { type: 'string'; defaultValue: string; prefix?: string };
-type NumberField = { type: 'number'; defaultValue: number; prefix?: string };
+type StringField = { type: 'string'; defaultValue?: string; prefix?: string; placeholder?: string };
+type NumberField = { type: 'number'; defaultValue?: number; prefix?: string; placeholder?: string };
type BooleanField = { type: 'boolean'; defaultValue: boolean };
export type ParamField = BaseField & (StringField | BooleanField | NumberField | OptionsField);