@lumiastream/lumia-types 2.6.1 → 2.6.2
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/activity.types.d.ts
CHANGED
|
@@ -91,6 +91,8 @@ export declare enum LumiaActivityCommandTypes {
|
|
|
91
91
|
OVERLAY_SET_LAYER_VISIBILITY = "overlay-set-layer-visibility",
|
|
92
92
|
OVERLAY_SET_LAYER_POSITION = "overlay-set-layer-position",
|
|
93
93
|
OVERLAY_SET_CONTENT = "overlay-set-content",
|
|
94
|
+
OVERLAY_SCREENSHOT = "overlay-screenshot",
|
|
95
|
+
OVERLAY_SCREENSHOT_RESPONSE = "overlay-screenshot-response",// Response to OVERLAY_SCREENSHOT, internal
|
|
94
96
|
HUD_OVERLAY_CHANGE = "hud-overlay-change",
|
|
95
97
|
HUD_TOGGLE = "hud-toggle",
|
|
96
98
|
HUD_VOLUME_SET = "hud-volume-set",
|
package/dist/activity.types.js
CHANGED
|
@@ -100,6 +100,8 @@ var LumiaActivityCommandTypes;
|
|
|
100
100
|
LumiaActivityCommandTypes["OVERLAY_SET_LAYER_VISIBILITY"] = "overlay-set-layer-visibility";
|
|
101
101
|
LumiaActivityCommandTypes["OVERLAY_SET_LAYER_POSITION"] = "overlay-set-layer-position";
|
|
102
102
|
LumiaActivityCommandTypes["OVERLAY_SET_CONTENT"] = "overlay-set-content";
|
|
103
|
+
LumiaActivityCommandTypes["OVERLAY_SCREENSHOT"] = "overlay-screenshot";
|
|
104
|
+
LumiaActivityCommandTypes["OVERLAY_SCREENSHOT_RESPONSE"] = "overlay-screenshot-response";
|
|
103
105
|
// HUD Commands
|
|
104
106
|
LumiaActivityCommandTypes["HUD_OVERLAY_CHANGE"] = "hud-overlay-change";
|
|
105
107
|
LumiaActivityCommandTypes["HUD_TOGGLE"] = "hud-toggle";
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
This layer is a real-time, configurable overlay component with support for dynamic events. It includes five main tabs:
|
|
4
4
|
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
5
|
+
- **HTML** – Defines the static layout of the UI
|
|
6
|
+
- **CSS** – Custom styling rules
|
|
7
|
+
- **JS** – Handles real-time logic and event listeners
|
|
8
|
+
- **Configs** – Input schema used to customize the component
|
|
9
|
+
- **Data** – Holds the actual values for the defined fields
|
|
10
10
|
|
|
11
11
|
## Chat GPT Lumia Overlay Assistant
|
|
12
12
|
|
|
@@ -163,8 +163,8 @@ console.log(variable);
|
|
|
163
163
|
|
|
164
164
|
### What This Does
|
|
165
165
|
|
|
166
|
-
-
|
|
167
|
-
-
|
|
166
|
+
- Displays the initial data provided via `Overlay.data`
|
|
167
|
+
- Accepts incoming events in real time
|
|
168
168
|
|
|
169
169
|
### 📡 Event Handling
|
|
170
170
|
|
|
@@ -278,33 +278,33 @@ When building custom overlays, you have several options for storing and sharing
|
|
|
278
278
|
|
|
279
279
|
#### 1. `localStorage`
|
|
280
280
|
|
|
281
|
-
-
|
|
282
|
-
-
|
|
283
|
-
-
|
|
284
|
-
-
|
|
281
|
+
- **Scope:** Only available in the browser where the overlay is loaded (e.g., OBS, browser source, or streaming studio).
|
|
282
|
+
- **Persistence:** Data persists across page reloads in the same browser, but is not shared between different browsers or devices.
|
|
283
|
+
- **Use Case:** Storing user preferences or temporary data that doesn't need to sync across devices or overlays.
|
|
284
|
+
- **Limitations:** Not accessible by Lumia Stream itself or other overlays running elsewhere.
|
|
285
285
|
|
|
286
286
|
#### 2. **Lumia Stream Variables**
|
|
287
287
|
|
|
288
|
-
-
|
|
289
|
-
-
|
|
290
|
-
-
|
|
291
|
-
-
|
|
288
|
+
- **Scope:** Global within Lumia Stream. Variables can be accessed and updated by overlays, chatbots, commands, and other Lumia features.
|
|
289
|
+
- **Persistence:** Saved on the server and available across all overlays and sessions.
|
|
290
|
+
- **Use Case:** Sharing data between overlays, commands, and chatbots, or persisting state across restarts.
|
|
291
|
+
- **Limitations:** All variables are global—be careful with naming to avoid conflicts.
|
|
292
292
|
|
|
293
293
|
#### 3. `Overlay.callCommand`
|
|
294
294
|
|
|
295
|
-
-
|
|
296
|
-
-
|
|
297
|
-
-
|
|
298
|
-
-
|
|
295
|
+
- **Scope:** Triggers a Lumia Stream command, optionally passing custom data.
|
|
296
|
+
- **Persistence:** Depends on your command logic. You can implement your own storage or logic inside the command.
|
|
297
|
+
- **Use Case:** Advanced workflows where you want to process data or trigger actions in Lumia Stream, possibly updating variables or storage as part of the command.
|
|
298
|
+
- **Limitations:** Requires custom command setup in Lumia Stream.
|
|
299
299
|
|
|
300
300
|
#### 4. `Overlay.saveStorage` / `getStorage` / `deleteStorage`
|
|
301
301
|
|
|
302
|
-
-
|
|
303
|
-
-
|
|
304
|
-
-
|
|
305
|
-
-
|
|
306
|
-
-
|
|
307
|
-
-
|
|
302
|
+
- **Scope:** Persistent storage tied to your overlay's `codeId`. Data is saved on the local Lumia Stream server and is accessible from any overlay instance (e.g., OBS, browser, Meld) running on the same server.
|
|
303
|
+
- **Persistence:** Data persists across overlay reloads and is shared between all overlay clients connected to the same Lumia Stream instance.
|
|
304
|
+
- **Use Case:** Storing overlay-specific state or data that needs to be shared between multiple overlay clients or sessions.
|
|
305
|
+
- **Limitations:**
|
|
306
|
+
- Not accessible by Lumia Stream commands or chatbots (only overlays can read/write).
|
|
307
|
+
- Not synced to the cloud or between different Lumia Stream servers.
|
|
308
308
|
|
|
309
309
|
#### Summary Table
|
|
310
310
|
|
|
@@ -328,21 +328,21 @@ A field object can now contain these properties:
|
|
|
328
328
|
|
|
329
329
|
| Property | Required | Purpose | Example |
|
|
330
330
|
| --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
|
|
331
|
-
| **`type`** | ✅ | UI control to render. Must be one of the `FieldType` enum values (`input`, `number`, `checkbox`, `dropdown`, `multiselect`, `colorpicker`, `fontpicker`, `slider`).
|
|
331
|
+
| **`type`** | ✅ | UI control to render. Must be one of the `FieldType` enum values (`input`, `number`, `checkbox`, `dropdown`, `multiselect`, `colorpicker`, `fontpicker`, `slider`). | `"type": "dropdown"` |
|
|
332
332
|
| **`label`** | ✅ | Human-readable name shown in the sidebar. | `"label": "Favorite Color:"` |
|
|
333
333
|
| **`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` |
|
|
334
|
-
| **`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`.
|
|
334
|
+
| **`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 }` |
|
|
335
335
|
| **`order`** | ❌ | **Display order priority**. Fields with lower numbers appear first. Fields without `order` appear after ordered fields, sorted alphabetically by key. | `"order": 1` |
|
|
336
336
|
| **`visibleIf`** | ❌ | **Conditional render rule**. Field is shown **only if** `Overlay.data[visibleIf.key]` strictly equals one of the values in `visibleIf.equals`. | `"visibleIf": { "key": "targetKey", "equals": ["yes", "maybe"] }` |
|
|
337
337
|
| **`hidden`** | ❌ | **Hard-hide rule.** When set to `true`, the field is **never displayed** in the Configs sidebar, preventing end users from altering it. The value still flows into `Overlay.data`, so the overlay can rely on it internally.<br>Useful for locking event subscriptions or other advanced settings. | `"hidden": true` |
|
|
338
338
|
|
|
339
339
|
Additional properties for text inputs (`type: "input"`):
|
|
340
340
|
|
|
341
|
-
| Property | Required | Purpose
|
|
342
|
-
| ---------------------- | -------- |
|
|
343
|
-
| **`placeholder`** | ❌ | Placeholder text inside the input.
|
|
344
|
-
| **`enableVariables`** | ❌ | When `true`, renders a variable-enabled input that lets users insert variables (e.g., `{{username}}`) from a picker.
|
|
345
|
-
| **`allowedVariables`** | ❌ | When present with `enableVariables: true`, limits the top of the picker to this list. System/function variables are still available below.
|
|
341
|
+
| Property | Required | Purpose | Example |
|
|
342
|
+
| ---------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- |
|
|
343
|
+
| **`placeholder`** | ❌ | Placeholder text inside the input. | `"placeholder": "Enter title..."` |
|
|
344
|
+
| **`enableVariables`** | ❌ | When `true`, renders a variable-enabled input that lets users insert variables (e.g., `{{username}}`) from a picker. | `"enableVariables": true` |
|
|
345
|
+
| **`allowedVariables`** | ❌ | When present with `enableVariables: true`, limits the top of the picker to this list. System/function variables are still available below. | `"allowedVariables": ["username", "message"]` |
|
|
346
346
|
|
|
347
347
|
### Variable-enabled Input Fields
|
|
348
348
|
|
|
@@ -352,13 +352,13 @@ Example:
|
|
|
352
352
|
|
|
353
353
|
```json
|
|
354
354
|
{
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
355
|
+
"title": {
|
|
356
|
+
"type": "input",
|
|
357
|
+
"label": "Title",
|
|
358
|
+
"enableVariables": true,
|
|
359
|
+
"allowedVariables": ["username", "message"],
|
|
360
|
+
"placeholder": "Enter title or insert variables"
|
|
361
|
+
}
|
|
362
362
|
}
|
|
363
363
|
```
|
|
364
364
|
|
|
@@ -375,7 +375,7 @@ Before looking at the individual properties (type, label, value, options), remem
|
|
|
375
375
|
},
|
|
376
376
|
"platform": {
|
|
377
377
|
/* field object */
|
|
378
|
-
}
|
|
378
|
+
}
|
|
379
379
|
}
|
|
380
380
|
```
|
|
381
381
|
|
|
@@ -440,9 +440,9 @@ The key in the json an ddata must match the variable name used in the css
|
|
|
440
440
|
|
|
441
441
|
By default, config fields are displayed in alphabetical order by their key names. You can override this behavior using the `order` property:
|
|
442
442
|
|
|
443
|
-
-
|
|
444
|
-
-
|
|
445
|
-
-
|
|
443
|
+
- Fields with an `order` property are displayed first, sorted by their order value (ascending)
|
|
444
|
+
- Fields without an `order` property appear after all ordered fields, sorted alphabetically by key
|
|
445
|
+
- This allows you to prioritize important settings at the top of the configuration panel
|
|
446
446
|
|
|
447
447
|
#### Order Example
|
|
448
448
|
|
|
@@ -648,11 +648,11 @@ The codeId can only contain letters, numbers, hyphens, and underscores with a ma
|
|
|
648
648
|
|
|
649
649
|
## ✅ Use Cases
|
|
650
650
|
|
|
651
|
-
-
|
|
652
|
-
-
|
|
653
|
-
-
|
|
654
|
-
-
|
|
655
|
-
-
|
|
651
|
+
- Custom stream overlays for Twitch, YouTube, or other platforms
|
|
652
|
+
- Real-time dashboards for alerts and interactions
|
|
653
|
+
- Interactive visuals triggered by chat or external events
|
|
654
|
+
- Pokemon Catching Mini Game
|
|
655
|
+
- Duel Overlay to show matches on stream with your viewers
|
|
656
656
|
|
|
657
657
|
## Persisting Data
|
|
658
658
|
|
|
@@ -792,16 +792,16 @@ Our Overlays will work with various Game Engines including, but not limited to P
|
|
|
792
792
|
|
|
793
793
|
## 🧪 Tips
|
|
794
794
|
|
|
795
|
-
-
|
|
796
|
-
-
|
|
797
|
-
-
|
|
795
|
+
- Always sanitize HTML content if displaying user-generated input.
|
|
796
|
+
- Leverage custom CSS to match your stream or brand style.
|
|
797
|
+
- In custom code or overlay actions prefer to send data directly to the overlay without the store or variables if you do not need to persist the data
|
|
798
798
|
|
|
799
799
|
## 📦 Templates
|
|
800
800
|
|
|
801
801
|
You can get started quickly with one of the two built-in templates:
|
|
802
802
|
|
|
803
|
-
-
|
|
804
|
-
-
|
|
803
|
+
- **Custom Chatbox** – A base template for building a chatbox overlay that listens to messages.
|
|
804
|
+
- **Custom Alert** – A template for creating a fully custom alert layer that responds to selected events.
|
|
805
805
|
|
|
806
806
|
## Using API requests with Fetch
|
|
807
807
|
|