Skip to content
This repository was archived by the owner on Jul 22, 2026. It is now read-only.

Commit e7f4028

Browse files
authored
Merge pull request #31 from izzy/feature/update-notifications
Added update notifications
2 parents 576406a + d28d186 commit e7f4028

4 files changed

Lines changed: 116 additions & 16 deletions

File tree

README.md

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,30 +28,39 @@ To get started with using this method go to https://chat.bean.tools/generator.ht
2828
Supported settings are as follows. To use them just add them as URL parameters, e.g.
2929

3030
```
31-
file:///C:/path/to/stream-chat/chat.html?default_color=FF0000&bubbles=true
31+
file:///C:/path/to/stream-chat/chat.html?sb_enabled=true&bubbles=true
3232
```
3333

3434
#### Config options
3535

36+
**IMPORTANT**: If you have been using version 0.1.7 or older your options likely won't work anymore. No worries, you can convert your old settings by opening the generator.html file and pasting the old URL, then clicking on "Load Settings" - this will give you a new URL you can then copy into OBS.
37+
38+
3639
| option | default | valid options | description | example |
3740
|--------------------|----------------------|---------------|------------------------------------------------------------------------------------------------|----------------------------------|
38-
| `ws_uri` | ws://localhost:8080/ | uri | The Streamer.Bot's local websocket URL | `ws_uri=ws://localhost:8080/` |
41+
| `sb_enabled` | true | boolean | Enable Streamer.Bot integration | `sb_enabled=true` |
42+
| `sb_ws_uri` | ws://localhost:8080/ | uri | The Streamer.Bot's local websocket URL | `ws_uri=ws://localhost:8080/` |
43+
| `sb_twitch` | true | boolean | Enable Streamer.Bot Twitch Messsages | `sb_twitch=true` |
44+
| `sb_youtube` | true | boolean | Enable Streamer.Bot YouTube Messsages | `sb_youtube=true` |
45+
| `version_check` | true | boolean | Checks for new versions when starting the overlay and displays a warning when a new version is available | `version_check=true` |
46+
| `version_alert` | false | boolean | Uses a popup instead of the obnoxiously large notification. CAREFUL: If you have the overlay setup more than once or reload the overlay frequently this might be a bad idea | `version_alert=true` |
3947
| `direction` | | horizontal | Set to "horizontal" this will scroll the text from right to left instead of bottom to top | `direction=horizontal` |
4048
| `bubbles` | false | boolean | Displays bubbles instead of the standard chat log display | `bubbles=true` |
4149
| `background` | | color | Background of the whole chat page. Careful: By default this will be overridden by OBS | `background=000000` |
42-
| `background_color` | | color | If set overrides all chat bubble colours | `background_color=FF0000` |
50+
| `bubble_color` | | color | If set overrides all chat bubble colours | `bubble_color=FF0000` |
4351
| `text_color` | | color | If set overrides all user name colours | `text_color=FF0000` |
4452
| `msg_color` | | color | If set overrides all message text colours | `msg_color=FF0000` |
4553
| `default_color` | | color | This sets the default background/bubble colour for users who don't have a colour set | `default_color=FF0000` |
4654
| `badges` | true | boolean | If set to false this disable broadcaster/VIP/moderator badges | `badges=false` |
47-
| `badges_left` | false | boolean | Moves broadcaster/VIP/moderator badges to the left | `badges_left=true` |
55+
| `badges_left` | false | boolean | Moves broadcaster/VIP/moderator badges to the left | `badges_left=true` |
4856
| `highlights` | true | boolean | If set to false this disables visual difference for highlighted messages | `highlights=false` |
57+
| `announcements` | true | boolean | If set to false this disables announcement messages | `announcements=false` |
4958
| `timestamp` | false | boolean | If set to true displays the time of the message | `timestamp=true` |
5059
| `timestamp_locale` | en-US | locale | The regional setting to use for the message time | `timestamp_locale=de-DE` |
5160
| `cmdprefix` | | string | A prefix for bot commands. If this is set, chat messages starting with this won't be displayed | `cmdprefix=!` |
5261
| `bots` | | string | A comma-separated list of accounts whose messages will not be shown(case-insensitive) | `bots=streamelements,streamlabs` |
5362
| `fade_duration` | | number | Time in seconds until messages are removed | `fade_duration=60` |
54-
| `max_messages` | | number | Maximum number of messages before old ones get deleted | `max_messages=10` |
63+
| `max_messages` | | number | Maximum number of messages before old ones get deleted | `max_messages=10` |
5564
| `fontfamily` | Open Sans | string | set (any locally installed) font | `fontfamily=Calibri` |
5665
| `fontsize` | large | number/string | CSS class font-size value (e.g. x-large, 2em, 22px) | `fontsize=22px` |
5766
| `emote_size` | 1.4rem | number/string | CSS class size value (e.g. 2em, 22px) | `emote_size=22px` |
@@ -67,7 +76,7 @@ file:///C:/path/to/stream-chat/chat.html?default_color=FF0000&bubbles=true
6776

6877
### I've read this README but I still have questions/problems, where can I get help?
6978

70-
If you have a Github account, opening an issue is the best way to give feedback. Otherwise you can join my [Discord](https://discord.gg/yRTM7H2tek) and ask you question in #development or send me a message on [Twitter](https://twitter.com/angry_izzy).
79+
If you have a Github account, opening an issue is the best way to give feedback. Otherwise feel free to join my [Discord](https://discord.gg/yRTM7H2tek) and ask your questions in #development.
7180

7281
### Contributors / Thanks
7382

chat.html

Lines changed: 91 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,19 @@
8787
font-weight: bold;
8888

8989
}
90+
91+
#version-notice {
92+
width: 100%;
93+
position: absolute;
94+
top: 0;
95+
left: 0;
96+
background: #ffc39a;
97+
padding: 1rem;
98+
font-size: 2rem;
99+
font-weight: bold;
100+
color: #950000;
101+
box-sizing: border-box;
102+
}
90103
</style>
91104

92105
<style type="text" id="enable-bubbles">
@@ -180,12 +193,55 @@
180193

181194
<body>
182195
<div id="chat"></div>
196+
<div id="version-notice" style="display: none;"></div>
183197

184198
<script>
199+
const STREAMCHAT_VERSION = '0.2.0';
200+
const STREAMCHAT_GH_USER = 'izzy';
201+
const STREAMCHAT_GH_REPO = 'stream-chat';
202+
203+
/**
204+
* Checks the current version of streamchat against the latest release on GitHub.
205+
* @returns {string} A message indicating whether the current version is up to date or not.
206+
*/
207+
async function version_check() {
208+
const res = await fetch(`https://api.github.com/repos/${STREAMCHAT_GH_USER}/${STREAMCHAT_GH_REPO}/releases/latest`)
209+
.then(response => response.json())
210+
.then(data => {
211+
const version = data.tag_name.replace(/^v/i, "");
212+
const version_parts = version.split('.');
213+
const current_version_parts = STREAMCHAT_VERSION.split('.');
214+
let upToDate = true;
215+
216+
if (version_parts[0] > current_version_parts[0]) {
217+
console.debug(`${STREAMCHAT_GH_REPO} version ${STREAMCHAT_VERSION} is outdated. There is a major update to version ${data.tag_name} available.`);
218+
upToDate = false;
219+
} else if ((version_parts[0] === current_version_parts[0] && version_parts[1] > current_version_parts[1]) ||
220+
(version_parts[0] === current_version_parts[0] && version_parts[1] === current_version_parts[1] && version_parts[2] > current_version_parts[2]))
221+
{
222+
console.debug(`${STREAMCHAT_GH_REPO} version ${STREAMCHAT_VERSION} is outdated. Please update to version ${data.tag_name}`);
223+
upToDate = false;
224+
} else {
225+
console.debug(`${STREAMCHAT_GH_REPO} version ${STREAMCHAT_VERSION} is up to date or newer than the latest release ${data.tag_name}`);
226+
}
227+
228+
return {version: version, upToDate: upToDate, error: null};
229+
}).catch(error => {
230+
console.error(error);
231+
return {version: 'unknown', upToDate: false, error: error};
232+
});
233+
return res;
234+
}
235+
185236
function getRnd(max, min = 0) {
186237
return Math.floor(Math.random() * (max - min + 1) + min);
187238
}
188239

240+
/**
241+
* @param {string} p The search parameter name
242+
* @param {boolean} d The default value
243+
* @returns {boolean} The value of the search parameter, or the default value if the parameter is not set.
244+
*/
189245
function searchParamIsTrue(p, d = false) {
190246
let v = new URLSearchParams(window.location.search).get(p);
191247
if (v === undefined || v === null) {
@@ -299,16 +355,16 @@
299355
'youtube': false,
300356
'websocket': '',
301357
};
302-
if (streamerbotEnabled === searchParamIsTrue("sb_enabled")) {
358+
if (streamerbotEnabled === searchParamIsTrue("sb_enabled", true)) {
303359
let sb_ws_uri = 'ws://localhost:8080/';
304360
if (url.searchParams.get("sb_ws_uri") !== null) {
305361
sb_ws_uri = decodeURI(url.searchParams.get("sb_ws_uri"));
306362
}
307363

308364
streamerbotConfig = {
309365
'enabled': streamerbotEnabled,
310-
'twitch': searchParamIsTrue("sb_twitch", false),
311-
'youtube': searchParamIsTrue("sb_youtube", false),
366+
'twitch': searchParamIsTrue("sb_twitch", true),
367+
'youtube': searchParamIsTrue("sb_youtube", true),
312368
'websocket': sb_ws_uri
313369
}
314370
}
@@ -340,7 +396,7 @@
340396
'max_messages': searchParamOrDefault("max_messages", false),
341397
'pronouns': searchParamIsTrue("pronouns", true),
342398
'highlights': searchParamIsTrue("highlights", true),
343-
'announcements': searchParamIsTrue("announcements", false),
399+
'announcements': searchParamIsTrue("announcements", true),
344400
'badges': {
345401
'enabled': searchParamIsTrue("badges", true),
346402
'left': searchParamIsTrue("badges_left"),
@@ -356,12 +412,17 @@
356412
'bots': bot_list,
357413
},
358414
'debug': searchParamIsTrue("debug"),
359-
415+
'version': {
416+
'current': STREAMCHAT_VERSION,
417+
'check': searchParamIsTrue("version_check", true),
418+
'alert': searchParamIsTrue("version_alert", false),
419+
}
360420
}
361421
}
362422

363423
const config = parseURL();
364424

425+
console.debug(`Starting stream chat version ${STREAMCHAT_VERSION}`);
365426
console.debug(['Loaded config', config]);
366427

367428
let socket, pronouns_users = {},
@@ -1263,6 +1324,31 @@
12631324
} else {
12641325
initializeConnections();
12651326
}
1327+
1328+
if (config["version"]["check"] === true) {
1329+
version_check().then(version => {
1330+
let version_el = document.getElementById("version-notice");
1331+
let message = '';
1332+
let display = 'none';
1333+
1334+
console.log(version);
1335+
if (version.upToDate === false) {
1336+
display = "block";
1337+
message = `You are using version ${STREAMCHAT_VERSION} of ${STREAMCHAT_GH_REPO}.` +
1338+
`There is a new version available. Please update to the latest version ${version.version}.`;
1339+
} else if (version.error) {
1340+
display = "block";
1341+
message = `There was an error checking for updates. Error: ${version.error}`;
1342+
}
1343+
1344+
if (config["version"]["alert"] === true && message !== '') {
1345+
alert(message);
1346+
} else {
1347+
version_el.style.display = display;
1348+
version_el.innerHTML = message;
1349+
}
1350+
});
1351+
}
12661352
</script>
12671353
</body>
12681354

generator.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta charset="utf-8" />
66
<meta http-equiv="x-ua-compatible" content="ie=edge" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<title></title>
8+
<title>stream-chat link generator</title>
99

1010
<style>
1111
html {
@@ -176,7 +176,7 @@
176176
top: 1rem;
177177
border-radius: 1rem;
178178
box-shadow: 0px 0px 4px #700;
179-
z-index: 1;
179+
z-index: 9999;
180180
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
181181
}
182182

@@ -186,15 +186,16 @@
186186

187187
.group {
188188
display: block;
189-
position: relative;
190-
transform: scaleY(1);
191189
height: 100%;
192190
opacity: 1;
191+
z-index: 1;
193192
}
194193

195194
.group h2 {
196195
border-bottom: 2px solid;
197196
border-image-slice: 1;
197+
position: relative;
198+
z-index: 1;
198199
}
199200

200201
.group-open {

generator.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ const groups = {
4444
}
4545

4646
const fields = [
47+
{ group: groups.Integrations, label: "Check for new stream-chat versions", name: "version_check", type: "checkbox", defaultValue: true, help: "Checks for new versions when starting the overlay and displays a warning when a new version is available." },
48+
{ group: groups.Integrations, label: "Use an alert popup for new versions(read the notice!)", name: "version_alert", type: "checkbox", defaultValue: false, help: "Uses a popup instead of the obnoxiously large notification. CAREFUL: If you have the overlay setup more than once or reload the overlay frequently this might be a bad idea!" },
4749
{ group: groups.Integrations, label: "Streamer.Bot enabled", name: "sb_enabled", type: "checkbox", defaultValue: true, help: "Enables Streamer.Bot websocket integration when active." },
4850

4951
{ group: groups.StreamerBot, label: "Websocket URI", name: "sb_websocket", type: "text", defaultValue: "ws://localhost:8080", help: "The address of your Streamer.Bot. See Streamer.Bot -> Server/Clients -> Websocket Server. Should look like 'ws://ADDRESS:PORT/ENDPOINT" },
@@ -62,7 +64,8 @@ const fields = [
6264
{ group: groups.Theme, label: "Default Color", name: "default_color", type: "color", nullable: true, help: "This sets the default background/bubble colour for users who don't have a colour set" },
6365
{ group: groups.Theme, label: "Badges", name: "badges", type: "checkbox", help: "If set to false this disable broadcaster/VIP/moderator badges"},
6466
{ group: groups.Theme, label: "Badges on the left", name: "badges_left", type: "checkbox", help: "Moves broadcaster/VIP/moderator badges to the left"},
65-
{ group: groups.Theme, label: "Highlights", name: "highlights", type: "checkbox", defaultValue: false, help: "If set to false this disables visual difference for highlighted messages" },
67+
{ group: groups.Theme, label: "Highlights", name: "highlights", type: "checkbox", defaultValue: true, help: "If set to false this disables visual difference for highlighted messages" },
68+
{ group: groups.Theme, label: "Announcements", name: "announcements", type: "checkbox", defaultValue: true, help: "If set to false this disables announcement messages" },
6669
{ group: groups.Theme, label: "Timestamp", name: "timestamp", type: "checkbox", defaultValue: false, help: "If set to true displays the time of the message" },
6770
{ group: groups.Theme, label: "Timestamp locale", name: "timestamp_locale", type: "text", defaultValue: "en-US", help: "The regional setting to use for the message time as ISO 639-1 language code." },
6871
{ group: groups.Theme, label: "Fade duration", name: "fade_duration", type: "number", nullable: true, help: "Time in seconds until messages are removed" },
@@ -341,6 +344,7 @@ const loadFromUrl = () => {
341344
generateURL();
342345

343346
showToast("Loaded from url!", "success");
347+
loadUrlEl.value = "";
344348
}
345349

346350
copyButton.addEventListener("click", copyToClipBoard)

0 commit comments

Comments
 (0)