@lumiastream/lumia-types 3.3.7-alpha.5 → 3.3.7-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-overlays/custom-overlays-cheatsheet.md +1 -1
- package/dist/custom-overlays/custom-overlays-documentation.md +13 -1
- package/dist/custom-overlays/custom-overlays.d.ts +233 -1
- package/dist/custom-overlays/gpt-instructions.md +1 -1
- package/dist/custom-overlays.d.js +5 -0
- package/dist/custom-overlays.d.ts +233 -1
- package/dist/esm/custom-overlays.d.js +5 -0
- package/package.json +1 -1
|
@@ -87,7 +87,7 @@ Include these two helper aliases in your embeddings so the model can quickly map
|
|
|
87
87
|
"required": ["type", "label"],
|
|
88
88
|
"properties": {
|
|
89
89
|
"type": {
|
|
90
|
-
"enum": ["input", "number", "checkbox", "dropdown", "multiselect", "colorpicker", "fontpicker", "slider"]
|
|
90
|
+
"enum": ["input", "textarea", "number", "checkbox", "dropdown", "multiselect", "colorpicker", "fontpicker", "slider", "imageupload", "soundupload", "videoupload", "actionbutton"]
|
|
91
91
|
},
|
|
92
92
|
"label": { "type": "string" },
|
|
93
93
|
"value": {},
|
|
@@ -394,7 +394,7 @@ A field object can now contain these properties:
|
|
|
394
394
|
|
|
395
395
|
| Property | Required | Purpose | Example |
|
|
396
396
|
| --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
|
|
397
|
-
| **`type`** | ✅ | UI control to render. Must be one of the `FieldType` enum values (`input`, `number`, `checkbox`, `dropdown`, `multiselect`, `colorpicker`, `fontpicker`, `slider`).
|
|
397
|
+
| **`type`** | ✅ | UI control to render. Must be one of the `FieldType` enum values (`input`, `textarea`, `number`, `checkbox`, `dropdown`, `multiselect`, `colorpicker`, `fontpicker`, `slider`, `imageupload`, `soundupload`, `videoupload`, `actionbutton`). | `"type": "dropdown"` |
|
|
398
398
|
| **`label`** | ✅ | Human-readable name shown in the sidebar. | `"label": "Favorite Color:"` |
|
|
399
399
|
| **`value`** | ❌ | Default value that appears the first time the user opens the overlay (also pre populates `Overlay.data`). Omit it to leave the field blank/unchecked on first load. | `"value": 18` |
|
|
400
400
|
| **`options`** | ☑️\* | Key value map of selectable choices. Required **only** for `dropdown`, `multiselect` and `slider`; ignored for other types. For `slider`, `options` supports `step`, `min`, `max`, `prefix`, `suffix`. | `"options": { "step": 5, "min": 0, "max": 100 }` |
|
|
@@ -706,6 +706,18 @@ const myUserColor = '{{userSelectedColor}}';
|
|
|
706
706
|
|
|
707
707
|
---
|
|
708
708
|
|
|
709
|
+
## Module Flavors
|
|
710
|
+
|
|
711
|
+
Custom overlay modules carry an optional `content.flavor` field that tells the runtime which compatibility layer (if any) to load before executing your HTML/CSS/JS. Most overlays you write from scratch don't set this — the field is mainly used by automated import flows.
|
|
712
|
+
|
|
713
|
+
| `flavor` value | Set by | What the runtime does |
|
|
714
|
+
| ----------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
715
|
+
| _undefined_ / missing | Hand-authored Lumia custom overlays | Runs your JS directly with the Lumia `Overlay.*` API available on `window.Overlay`. Use this by default. |
|
|
716
|
+
| `'streamelements'` | StreamElements import wizard | Loads the SE compatibility shim before your JS runs: jQuery, Lodash, GSAP, a `SE_API` polyfill with `store`/`counters`, the `fieldData` object, the SE event reshape (`onWidgetLoad` / `onEventReceived` listeners), and listener-name aliasing so widgets coded against `subscriber-latest` etc. still fire. Useful for "I dragged in an SE widget and I want it to keep working as I tune it over." |
|
|
717
|
+
| `'ai-generated'` | The wizard's "Generate with AI" step | Plain Lumia runtime (same as undefined), tagged so the editor can label the layer as AI-authored in disclosures. No runtime difference from the default flavor — purely a provenance marker. |
|
|
718
|
+
|
|
719
|
+
If you're inspecting an imported overlay's JSON and see `"flavor": "streamelements"`, that's why it can call `SE_API.store.set(...)`, `jQuery`, etc. — none of those are part of the native Lumia overlay API, but the shim makes them available for that specific layer.
|
|
720
|
+
|
|
709
721
|
## Code ID
|
|
710
722
|
|
|
711
723
|
The codeId is primarily meant to be used when talking to Lumia Stream. It is used to store storage data, it is used when calling send overlay content that will only send to overlays with that specific code id. It can be retrieved within the overlay using `Overlay.on('overlaycontent', (data) => {...})`
|
|
@@ -25,9 +25,10 @@ export enum CustomTabs {
|
|
|
25
25
|
export enum ConfigsFieldType {
|
|
26
26
|
/** Text input field */
|
|
27
27
|
INPUT = 'input',
|
|
28
|
+
/** Multi-line text area for long-form content. */
|
|
29
|
+
TEXTAREA = 'textarea',
|
|
28
30
|
/** Numeric input field */
|
|
29
31
|
NUMBER = 'number',
|
|
30
|
-
// IMAGE = 'image',
|
|
31
32
|
/** Boolean checkbox */
|
|
32
33
|
CHECKBOX = 'checkbox',
|
|
33
34
|
/** Single-select dropdown menu */
|
|
@@ -40,8 +41,239 @@ export enum ConfigsFieldType {
|
|
|
40
41
|
FONTPICKER = 'fontpicker',
|
|
41
42
|
/** Number Slider widget */
|
|
42
43
|
SLIDER = 'slider',
|
|
44
|
+
/** Image upload picker. Value is the uploaded asset URL. */
|
|
45
|
+
IMAGEUPLOAD = 'imageupload',
|
|
46
|
+
/** Audio upload picker. Value is the uploaded asset URL. */
|
|
47
|
+
SOUNDUPLOAD = 'soundupload',
|
|
48
|
+
/** Video upload picker. Value is the uploaded asset URL. */
|
|
49
|
+
VIDEOUPLOAD = 'videoupload',
|
|
50
|
+
/** Action trigger button. No persisted value; renders a clickable
|
|
51
|
+
* control that custom JS can bind to via `Overlay.on('configAction', …)`. */
|
|
52
|
+
ACTIONBUTTON = 'actionbutton',
|
|
43
53
|
}
|
|
44
54
|
|
|
55
|
+
/**
|
|
56
|
+
* Conditional render rule for a config field.
|
|
57
|
+
* The field is shown only when `Overlay.data[key]` strictly equals one of `equals`
|
|
58
|
+
* (scalar) or intersects with `equals` (when either side is an array).
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* { key: 'mode', equals: 'advanced' }
|
|
62
|
+
* { key: 'platform', equals: ['twitch', 'kick'] }
|
|
63
|
+
*/
|
|
64
|
+
export interface ConfigVisibleIf {
|
|
65
|
+
/** Key of another config field to read from `Overlay.data`. */
|
|
66
|
+
key: string;
|
|
67
|
+
/** Value (or list of values) that triggers visibility. */
|
|
68
|
+
equals: string | number | boolean | Array<string | number | boolean>;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/** Properties common to every config field, regardless of `type`. */
|
|
72
|
+
export interface BaseConfigField {
|
|
73
|
+
/** Human-readable name shown next to the control in the Configs sidebar. */
|
|
74
|
+
label: string;
|
|
75
|
+
/**
|
|
76
|
+
* Display order priority. Lower numbers appear first.
|
|
77
|
+
* Fields without `order` render after ordered fields, sorted alphabetically by key.
|
|
78
|
+
*/
|
|
79
|
+
order?: number;
|
|
80
|
+
/**
|
|
81
|
+
* Conditional render rule. When set, the field renders only when
|
|
82
|
+
* `Overlay.data[visibleIf.key]` matches `visibleIf.equals`.
|
|
83
|
+
*/
|
|
84
|
+
visibleIf?: ConfigVisibleIf;
|
|
85
|
+
/**
|
|
86
|
+
* Hard-hide rule. When `true`, the field is never displayed in the Configs
|
|
87
|
+
* sidebar, but its `value` still flows into `Overlay.data` for internal use.
|
|
88
|
+
* Useful for locking event subscriptions or advanced settings.
|
|
89
|
+
*/
|
|
90
|
+
hidden?: boolean;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/** Single-line text input. Supports Lumia variable insertion. */
|
|
94
|
+
export interface InputConfigField extends BaseConfigField {
|
|
95
|
+
type: ConfigsFieldType.INPUT | 'input';
|
|
96
|
+
/** Default text value. Omit to leave blank on first load. */
|
|
97
|
+
value?: string;
|
|
98
|
+
/** Placeholder text shown when the input is empty. */
|
|
99
|
+
placeholder?: string;
|
|
100
|
+
/**
|
|
101
|
+
* When `true`, renders a variable-enabled input. Users can insert Lumia
|
|
102
|
+
* variables (e.g. `{{username}}`) via a picker triggered by a `{}` adornment.
|
|
103
|
+
*/
|
|
104
|
+
enableVariables?: boolean;
|
|
105
|
+
/**
|
|
106
|
+
* Curated variable list to surface at the top of the picker.
|
|
107
|
+
* System/function variables remain available below. Has no effect unless
|
|
108
|
+
* `enableVariables` is also `true`.
|
|
109
|
+
*/
|
|
110
|
+
allowedVariables?: string[];
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/** Numeric input spinner. */
|
|
114
|
+
export interface NumberConfigField extends BaseConfigField {
|
|
115
|
+
type: ConfigsFieldType.NUMBER | 'number';
|
|
116
|
+
/** Default numeric value. */
|
|
117
|
+
value?: number;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/** Checkbox toggle. */
|
|
121
|
+
export interface CheckboxConfigField extends BaseConfigField {
|
|
122
|
+
type: ConfigsFieldType.CHECKBOX | 'checkbox';
|
|
123
|
+
/** Default checked state. */
|
|
124
|
+
value?: boolean;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/** Single-select dropdown menu. */
|
|
128
|
+
export interface DropdownConfigField extends BaseConfigField {
|
|
129
|
+
type: ConfigsFieldType.DROPDOWN | 'dropdown';
|
|
130
|
+
/** Default selected option key. */
|
|
131
|
+
value?: string;
|
|
132
|
+
/** Map of option keys to display labels. */
|
|
133
|
+
options: Record<string, string>;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/** Multi-select dropdown. */
|
|
137
|
+
export interface MultiselectConfigField extends BaseConfigField {
|
|
138
|
+
type: ConfigsFieldType.MULTISELECT | 'multiselect';
|
|
139
|
+
/** Default selected option keys. */
|
|
140
|
+
value?: string[];
|
|
141
|
+
/** Map of option keys to display labels. */
|
|
142
|
+
options: Record<string, string>;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/** Color picker widget. Value is a hex/rgba string. */
|
|
146
|
+
export interface ColorpickerConfigField extends BaseConfigField {
|
|
147
|
+
type: ConfigsFieldType.COLORPICKER | 'colorpicker';
|
|
148
|
+
/** Default color (hex like `#ff4076` or rgba). */
|
|
149
|
+
value?: string;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/** Font picker that loads Google fonts on demand. Value is the font family name. */
|
|
153
|
+
export interface FontpickerConfigField extends BaseConfigField {
|
|
154
|
+
type: ConfigsFieldType.FONTPICKER | 'fontpicker';
|
|
155
|
+
/** Default font family name (e.g. `Roboto`). */
|
|
156
|
+
value?: string;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/** Slider numeric-range options. */
|
|
160
|
+
export interface SliderOptions {
|
|
161
|
+
/** Minimum value. */
|
|
162
|
+
min?: number;
|
|
163
|
+
/** Maximum value. */
|
|
164
|
+
max?: number;
|
|
165
|
+
/** Step increment between values. */
|
|
166
|
+
step?: number;
|
|
167
|
+
/** String prefixed to the displayed value (e.g. `$`). */
|
|
168
|
+
prefix?: string;
|
|
169
|
+
/** String suffixed to the displayed value (e.g. `px`). */
|
|
170
|
+
suffix?: string;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/** Number slider with min/max/step and optional value adornments. */
|
|
174
|
+
export interface SliderConfigField extends BaseConfigField {
|
|
175
|
+
type: ConfigsFieldType.SLIDER | 'slider';
|
|
176
|
+
/** Default numeric value. */
|
|
177
|
+
value?: number;
|
|
178
|
+
/** Range and adornment options. */
|
|
179
|
+
options: SliderOptions;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/** Multi-line textarea for long-form text input. Supports variables. */
|
|
183
|
+
export interface TextareaConfigField extends BaseConfigField {
|
|
184
|
+
type: ConfigsFieldType.TEXTAREA | 'textarea';
|
|
185
|
+
/** Default text value. Omit to leave blank on first load. */
|
|
186
|
+
value?: string;
|
|
187
|
+
/** Placeholder text shown when the textarea is empty. */
|
|
188
|
+
placeholder?: string;
|
|
189
|
+
/** Visible row count for the textarea. Defaults to 4 in the renderer. */
|
|
190
|
+
rows?: number;
|
|
191
|
+
/**
|
|
192
|
+
* When `true`, renders a variable-enabled textarea. Users can insert Lumia
|
|
193
|
+
* variables (e.g. `{{username}}`) via a picker triggered by a `{}` adornment.
|
|
194
|
+
*/
|
|
195
|
+
enableVariables?: boolean;
|
|
196
|
+
/**
|
|
197
|
+
* Curated variable list to surface at the top of the picker. Has no effect
|
|
198
|
+
* unless `enableVariables` is also `true`.
|
|
199
|
+
*/
|
|
200
|
+
allowedVariables?: string[];
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/** Image upload picker. Value is the uploaded asset's URL. */
|
|
204
|
+
export interface ImageuploadConfigField extends BaseConfigField {
|
|
205
|
+
type: ConfigsFieldType.IMAGEUPLOAD | 'imageupload';
|
|
206
|
+
/** Default image URL. */
|
|
207
|
+
value?: string;
|
|
208
|
+
/** Optional comma-separated accept hint, e.g. `image/png,image/jpeg`. */
|
|
209
|
+
accept?: string;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/** Audio clip upload picker. Value is the uploaded asset's URL. */
|
|
213
|
+
export interface SounduploadConfigField extends BaseConfigField {
|
|
214
|
+
type: ConfigsFieldType.SOUNDUPLOAD | 'soundupload';
|
|
215
|
+
/** Default audio URL. */
|
|
216
|
+
value?: string;
|
|
217
|
+
/** Optional comma-separated accept hint, e.g. `audio/mpeg,audio/ogg`. */
|
|
218
|
+
accept?: string;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/** Video upload picker. Value is the uploaded asset's URL. */
|
|
222
|
+
export interface VideouploadConfigField extends BaseConfigField {
|
|
223
|
+
type: ConfigsFieldType.VIDEOUPLOAD | 'videoupload';
|
|
224
|
+
/** Default video URL. */
|
|
225
|
+
value?: string;
|
|
226
|
+
/** Optional comma-separated accept hint, e.g. `video/mp4,video/webm`. */
|
|
227
|
+
accept?: string;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Action trigger button. The control surface is a labelled button; clicking it
|
|
232
|
+
* dispatches an event the overlay's custom JS can subscribe to via
|
|
233
|
+
* `Overlay.on('configAction', ({ key }) => …)`. No persisted value.
|
|
234
|
+
*/
|
|
235
|
+
export interface ActionbuttonConfigField extends BaseConfigField {
|
|
236
|
+
type: ConfigsFieldType.ACTIONBUTTON | 'actionbutton';
|
|
237
|
+
/** Optional button-text override. Defaults to the field `label`. */
|
|
238
|
+
buttonLabel?: string;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Discriminated union of every config-field shape the renderer accepts.
|
|
243
|
+
* Use this when typing the `configs` map for a Lumia custom overlay.
|
|
244
|
+
*
|
|
245
|
+
* @example
|
|
246
|
+
* const configs: ConfigsSchema = {
|
|
247
|
+
* font: { type: 'fontpicker', label: 'Font', value: 'Roboto' },
|
|
248
|
+
* size: {
|
|
249
|
+
* type: 'slider',
|
|
250
|
+
* label: 'Font size',
|
|
251
|
+
* value: 48,
|
|
252
|
+
* options: { min: 10, max: 120, step: 2, suffix: 'px' },
|
|
253
|
+
* },
|
|
254
|
+
* };
|
|
255
|
+
*/
|
|
256
|
+
export type ConfigField =
|
|
257
|
+
| InputConfigField
|
|
258
|
+
| TextareaConfigField
|
|
259
|
+
| NumberConfigField
|
|
260
|
+
| CheckboxConfigField
|
|
261
|
+
| DropdownConfigField
|
|
262
|
+
| MultiselectConfigField
|
|
263
|
+
| ColorpickerConfigField
|
|
264
|
+
| FontpickerConfigField
|
|
265
|
+
| SliderConfigField
|
|
266
|
+
| ImageuploadConfigField
|
|
267
|
+
| SounduploadConfigField
|
|
268
|
+
| VideouploadConfigField
|
|
269
|
+
| ActionbuttonConfigField;
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* The configs map a custom overlay declares in its Configs tab.
|
|
273
|
+
* Keys become accessible at runtime as `Overlay.data[key]`.
|
|
274
|
+
*/
|
|
275
|
+
export type ConfigsSchema = Record<string, ConfigField>;
|
|
276
|
+
|
|
45
277
|
/**
|
|
46
278
|
* Core event types that overlays can listen to.
|
|
47
279
|
* Used as discriminants for the overlay event system.
|
|
@@ -35,7 +35,7 @@ Source of truth (in order): this file > `gpt-instructions-extended.md` (long-for
|
|
|
35
35
|
- **HTML**: body content only. Stable IDs/classes. No inline `<script>` or `<style>`.
|
|
36
36
|
- **CSS**: stylesheet only. Unquoted CSS variables for colors/sizes/numbers. Quoted only where CSS requires a string (`font-family: "{{font}}";`).
|
|
37
37
|
- **JS**: top-level JS. Use `Overlay.data` for Data values. Use `textContent`/`createElement`/`appendChild` for any chat, alert, or user-generated text — never `innerHTML` with user input. `fetch` is allowed.
|
|
38
|
-
- **Configs**: field types: `input`, `number`, `checkbox`, `dropdown`, `multiselect`, `colorpicker`, `fontpicker`, `slider`. Required: `type`, `label`. Use `value` for defaults. `dropdown`/`multiselect` need `options`. `slider` needs `options.min`/`max` (usually `step`/`prefix`/`suffix`). Use `order` to control sidebar order. Use `visibleIf` for conditional fields. Keys must be machine-friendly (no spaces).
|
|
38
|
+
- **Configs**: field types: `input`, `textarea`, `number`, `checkbox`, `dropdown`, `multiselect`, `colorpicker`, `fontpicker`, `slider`, `imageupload`, `soundupload`, `videoupload`, `actionbutton`. Required: `type`, `label`. Use `value` for defaults. `dropdown`/`multiselect` need `options`. `slider` needs `options.min`/`max` (usually `step`/`prefix`/`suffix`). `imageupload`/`soundupload`/`videoupload` accept an `accept` MIME hint. `actionbutton` has no `value` — bind it via `Overlay.on('configAction', ({ key }) => …)`. Use `order` to control sidebar order. Use `visibleIf` for conditional fields. Keys must be machine-friendly (no spaces).
|
|
39
39
|
- **Data**: every Configs key must have a matching Data key with a matching default. Data can hold internal values that aren't in Configs (rare).
|
|
40
40
|
|
|
41
41
|
## Variables
|
|
@@ -10,6 +10,7 @@ exports.CustomTabs = {
|
|
|
10
10
|
};
|
|
11
11
|
exports.ConfigsFieldType = {
|
|
12
12
|
INPUT: "input",
|
|
13
|
+
TEXTAREA: "textarea",
|
|
13
14
|
NUMBER: "number",
|
|
14
15
|
CHECKBOX: "checkbox",
|
|
15
16
|
DROPDOWN: "dropdown",
|
|
@@ -17,4 +18,8 @@ exports.ConfigsFieldType = {
|
|
|
17
18
|
COLORPICKER: "colorpicker",
|
|
18
19
|
FONTPICKER: "fontpicker",
|
|
19
20
|
SLIDER: "slider",
|
|
21
|
+
IMAGEUPLOAD: "imageupload",
|
|
22
|
+
SOUNDUPLOAD: "soundupload",
|
|
23
|
+
VIDEOUPLOAD: "videoupload",
|
|
24
|
+
ACTIONBUTTON: "actionbutton",
|
|
20
25
|
};
|
|
@@ -25,9 +25,10 @@ export enum CustomTabs {
|
|
|
25
25
|
export enum ConfigsFieldType {
|
|
26
26
|
/** Text input field */
|
|
27
27
|
INPUT = 'input',
|
|
28
|
+
/** Multi-line text area for long-form content. */
|
|
29
|
+
TEXTAREA = 'textarea',
|
|
28
30
|
/** Numeric input field */
|
|
29
31
|
NUMBER = 'number',
|
|
30
|
-
// IMAGE = 'image',
|
|
31
32
|
/** Boolean checkbox */
|
|
32
33
|
CHECKBOX = 'checkbox',
|
|
33
34
|
/** Single-select dropdown menu */
|
|
@@ -40,8 +41,239 @@ export enum ConfigsFieldType {
|
|
|
40
41
|
FONTPICKER = 'fontpicker',
|
|
41
42
|
/** Number Slider widget */
|
|
42
43
|
SLIDER = 'slider',
|
|
44
|
+
/** Image upload picker. Value is the uploaded asset URL. */
|
|
45
|
+
IMAGEUPLOAD = 'imageupload',
|
|
46
|
+
/** Audio upload picker. Value is the uploaded asset URL. */
|
|
47
|
+
SOUNDUPLOAD = 'soundupload',
|
|
48
|
+
/** Video upload picker. Value is the uploaded asset URL. */
|
|
49
|
+
VIDEOUPLOAD = 'videoupload',
|
|
50
|
+
/** Action trigger button. No persisted value; renders a clickable
|
|
51
|
+
* control that custom JS can bind to via `Overlay.on('configAction', …)`. */
|
|
52
|
+
ACTIONBUTTON = 'actionbutton',
|
|
43
53
|
}
|
|
44
54
|
|
|
55
|
+
/**
|
|
56
|
+
* Conditional render rule for a config field.
|
|
57
|
+
* The field is shown only when `Overlay.data[key]` strictly equals one of `equals`
|
|
58
|
+
* (scalar) or intersects with `equals` (when either side is an array).
|
|
59
|
+
*
|
|
60
|
+
* @example
|
|
61
|
+
* { key: 'mode', equals: 'advanced' }
|
|
62
|
+
* { key: 'platform', equals: ['twitch', 'kick'] }
|
|
63
|
+
*/
|
|
64
|
+
export interface ConfigVisibleIf {
|
|
65
|
+
/** Key of another config field to read from `Overlay.data`. */
|
|
66
|
+
key: string;
|
|
67
|
+
/** Value (or list of values) that triggers visibility. */
|
|
68
|
+
equals: string | number | boolean | Array<string | number | boolean>;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/** Properties common to every config field, regardless of `type`. */
|
|
72
|
+
export interface BaseConfigField {
|
|
73
|
+
/** Human-readable name shown next to the control in the Configs sidebar. */
|
|
74
|
+
label: string;
|
|
75
|
+
/**
|
|
76
|
+
* Display order priority. Lower numbers appear first.
|
|
77
|
+
* Fields without `order` render after ordered fields, sorted alphabetically by key.
|
|
78
|
+
*/
|
|
79
|
+
order?: number;
|
|
80
|
+
/**
|
|
81
|
+
* Conditional render rule. When set, the field renders only when
|
|
82
|
+
* `Overlay.data[visibleIf.key]` matches `visibleIf.equals`.
|
|
83
|
+
*/
|
|
84
|
+
visibleIf?: ConfigVisibleIf;
|
|
85
|
+
/**
|
|
86
|
+
* Hard-hide rule. When `true`, the field is never displayed in the Configs
|
|
87
|
+
* sidebar, but its `value` still flows into `Overlay.data` for internal use.
|
|
88
|
+
* Useful for locking event subscriptions or advanced settings.
|
|
89
|
+
*/
|
|
90
|
+
hidden?: boolean;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/** Single-line text input. Supports Lumia variable insertion. */
|
|
94
|
+
export interface InputConfigField extends BaseConfigField {
|
|
95
|
+
type: ConfigsFieldType.INPUT | 'input';
|
|
96
|
+
/** Default text value. Omit to leave blank on first load. */
|
|
97
|
+
value?: string;
|
|
98
|
+
/** Placeholder text shown when the input is empty. */
|
|
99
|
+
placeholder?: string;
|
|
100
|
+
/**
|
|
101
|
+
* When `true`, renders a variable-enabled input. Users can insert Lumia
|
|
102
|
+
* variables (e.g. `{{username}}`) via a picker triggered by a `{}` adornment.
|
|
103
|
+
*/
|
|
104
|
+
enableVariables?: boolean;
|
|
105
|
+
/**
|
|
106
|
+
* Curated variable list to surface at the top of the picker.
|
|
107
|
+
* System/function variables remain available below. Has no effect unless
|
|
108
|
+
* `enableVariables` is also `true`.
|
|
109
|
+
*/
|
|
110
|
+
allowedVariables?: string[];
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/** Numeric input spinner. */
|
|
114
|
+
export interface NumberConfigField extends BaseConfigField {
|
|
115
|
+
type: ConfigsFieldType.NUMBER | 'number';
|
|
116
|
+
/** Default numeric value. */
|
|
117
|
+
value?: number;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/** Checkbox toggle. */
|
|
121
|
+
export interface CheckboxConfigField extends BaseConfigField {
|
|
122
|
+
type: ConfigsFieldType.CHECKBOX | 'checkbox';
|
|
123
|
+
/** Default checked state. */
|
|
124
|
+
value?: boolean;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/** Single-select dropdown menu. */
|
|
128
|
+
export interface DropdownConfigField extends BaseConfigField {
|
|
129
|
+
type: ConfigsFieldType.DROPDOWN | 'dropdown';
|
|
130
|
+
/** Default selected option key. */
|
|
131
|
+
value?: string;
|
|
132
|
+
/** Map of option keys to display labels. */
|
|
133
|
+
options: Record<string, string>;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/** Multi-select dropdown. */
|
|
137
|
+
export interface MultiselectConfigField extends BaseConfigField {
|
|
138
|
+
type: ConfigsFieldType.MULTISELECT | 'multiselect';
|
|
139
|
+
/** Default selected option keys. */
|
|
140
|
+
value?: string[];
|
|
141
|
+
/** Map of option keys to display labels. */
|
|
142
|
+
options: Record<string, string>;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/** Color picker widget. Value is a hex/rgba string. */
|
|
146
|
+
export interface ColorpickerConfigField extends BaseConfigField {
|
|
147
|
+
type: ConfigsFieldType.COLORPICKER | 'colorpicker';
|
|
148
|
+
/** Default color (hex like `#ff4076` or rgba). */
|
|
149
|
+
value?: string;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/** Font picker that loads Google fonts on demand. Value is the font family name. */
|
|
153
|
+
export interface FontpickerConfigField extends BaseConfigField {
|
|
154
|
+
type: ConfigsFieldType.FONTPICKER | 'fontpicker';
|
|
155
|
+
/** Default font family name (e.g. `Roboto`). */
|
|
156
|
+
value?: string;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/** Slider numeric-range options. */
|
|
160
|
+
export interface SliderOptions {
|
|
161
|
+
/** Minimum value. */
|
|
162
|
+
min?: number;
|
|
163
|
+
/** Maximum value. */
|
|
164
|
+
max?: number;
|
|
165
|
+
/** Step increment between values. */
|
|
166
|
+
step?: number;
|
|
167
|
+
/** String prefixed to the displayed value (e.g. `$`). */
|
|
168
|
+
prefix?: string;
|
|
169
|
+
/** String suffixed to the displayed value (e.g. `px`). */
|
|
170
|
+
suffix?: string;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/** Number slider with min/max/step and optional value adornments. */
|
|
174
|
+
export interface SliderConfigField extends BaseConfigField {
|
|
175
|
+
type: ConfigsFieldType.SLIDER | 'slider';
|
|
176
|
+
/** Default numeric value. */
|
|
177
|
+
value?: number;
|
|
178
|
+
/** Range and adornment options. */
|
|
179
|
+
options: SliderOptions;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/** Multi-line textarea for long-form text input. Supports variables. */
|
|
183
|
+
export interface TextareaConfigField extends BaseConfigField {
|
|
184
|
+
type: ConfigsFieldType.TEXTAREA | 'textarea';
|
|
185
|
+
/** Default text value. Omit to leave blank on first load. */
|
|
186
|
+
value?: string;
|
|
187
|
+
/** Placeholder text shown when the textarea is empty. */
|
|
188
|
+
placeholder?: string;
|
|
189
|
+
/** Visible row count for the textarea. Defaults to 4 in the renderer. */
|
|
190
|
+
rows?: number;
|
|
191
|
+
/**
|
|
192
|
+
* When `true`, renders a variable-enabled textarea. Users can insert Lumia
|
|
193
|
+
* variables (e.g. `{{username}}`) via a picker triggered by a `{}` adornment.
|
|
194
|
+
*/
|
|
195
|
+
enableVariables?: boolean;
|
|
196
|
+
/**
|
|
197
|
+
* Curated variable list to surface at the top of the picker. Has no effect
|
|
198
|
+
* unless `enableVariables` is also `true`.
|
|
199
|
+
*/
|
|
200
|
+
allowedVariables?: string[];
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/** Image upload picker. Value is the uploaded asset's URL. */
|
|
204
|
+
export interface ImageuploadConfigField extends BaseConfigField {
|
|
205
|
+
type: ConfigsFieldType.IMAGEUPLOAD | 'imageupload';
|
|
206
|
+
/** Default image URL. */
|
|
207
|
+
value?: string;
|
|
208
|
+
/** Optional comma-separated accept hint, e.g. `image/png,image/jpeg`. */
|
|
209
|
+
accept?: string;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
/** Audio clip upload picker. Value is the uploaded asset's URL. */
|
|
213
|
+
export interface SounduploadConfigField extends BaseConfigField {
|
|
214
|
+
type: ConfigsFieldType.SOUNDUPLOAD | 'soundupload';
|
|
215
|
+
/** Default audio URL. */
|
|
216
|
+
value?: string;
|
|
217
|
+
/** Optional comma-separated accept hint, e.g. `audio/mpeg,audio/ogg`. */
|
|
218
|
+
accept?: string;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/** Video upload picker. Value is the uploaded asset's URL. */
|
|
222
|
+
export interface VideouploadConfigField extends BaseConfigField {
|
|
223
|
+
type: ConfigsFieldType.VIDEOUPLOAD | 'videoupload';
|
|
224
|
+
/** Default video URL. */
|
|
225
|
+
value?: string;
|
|
226
|
+
/** Optional comma-separated accept hint, e.g. `video/mp4,video/webm`. */
|
|
227
|
+
accept?: string;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* Action trigger button. The control surface is a labelled button; clicking it
|
|
232
|
+
* dispatches an event the overlay's custom JS can subscribe to via
|
|
233
|
+
* `Overlay.on('configAction', ({ key }) => …)`. No persisted value.
|
|
234
|
+
*/
|
|
235
|
+
export interface ActionbuttonConfigField extends BaseConfigField {
|
|
236
|
+
type: ConfigsFieldType.ACTIONBUTTON | 'actionbutton';
|
|
237
|
+
/** Optional button-text override. Defaults to the field `label`. */
|
|
238
|
+
buttonLabel?: string;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Discriminated union of every config-field shape the renderer accepts.
|
|
243
|
+
* Use this when typing the `configs` map for a Lumia custom overlay.
|
|
244
|
+
*
|
|
245
|
+
* @example
|
|
246
|
+
* const configs: ConfigsSchema = {
|
|
247
|
+
* font: { type: 'fontpicker', label: 'Font', value: 'Roboto' },
|
|
248
|
+
* size: {
|
|
249
|
+
* type: 'slider',
|
|
250
|
+
* label: 'Font size',
|
|
251
|
+
* value: 48,
|
|
252
|
+
* options: { min: 10, max: 120, step: 2, suffix: 'px' },
|
|
253
|
+
* },
|
|
254
|
+
* };
|
|
255
|
+
*/
|
|
256
|
+
export type ConfigField =
|
|
257
|
+
| InputConfigField
|
|
258
|
+
| TextareaConfigField
|
|
259
|
+
| NumberConfigField
|
|
260
|
+
| CheckboxConfigField
|
|
261
|
+
| DropdownConfigField
|
|
262
|
+
| MultiselectConfigField
|
|
263
|
+
| ColorpickerConfigField
|
|
264
|
+
| FontpickerConfigField
|
|
265
|
+
| SliderConfigField
|
|
266
|
+
| ImageuploadConfigField
|
|
267
|
+
| SounduploadConfigField
|
|
268
|
+
| VideouploadConfigField
|
|
269
|
+
| ActionbuttonConfigField;
|
|
270
|
+
|
|
271
|
+
/**
|
|
272
|
+
* The configs map a custom overlay declares in its Configs tab.
|
|
273
|
+
* Keys become accessible at runtime as `Overlay.data[key]`.
|
|
274
|
+
*/
|
|
275
|
+
export type ConfigsSchema = Record<string, ConfigField>;
|
|
276
|
+
|
|
45
277
|
/**
|
|
46
278
|
* Core event types that overlays can listen to.
|
|
47
279
|
* Used as discriminants for the overlay event system.
|
|
@@ -8,6 +8,7 @@ export const CustomTabs = {
|
|
|
8
8
|
|
|
9
9
|
export const ConfigsFieldType = {
|
|
10
10
|
INPUT: "input",
|
|
11
|
+
TEXTAREA: "textarea",
|
|
11
12
|
NUMBER: "number",
|
|
12
13
|
CHECKBOX: "checkbox",
|
|
13
14
|
DROPDOWN: "dropdown",
|
|
@@ -15,5 +16,9 @@ export const ConfigsFieldType = {
|
|
|
15
16
|
COLORPICKER: "colorpicker",
|
|
16
17
|
FONTPICKER: "fontpicker",
|
|
17
18
|
SLIDER: "slider",
|
|
19
|
+
IMAGEUPLOAD: "imageupload",
|
|
20
|
+
SOUNDUPLOAD: "soundupload",
|
|
21
|
+
VIDEOUPLOAD: "videoupload",
|
|
22
|
+
ACTIONBUTTON: "actionbutton",
|
|
18
23
|
};
|
|
19
24
|
|