Skip to content

Commit

Permalink
Merge pull request #31 from izzy/feature/update-notifications
Browse files Browse the repository at this point in the history 
Added update notifications
  • Loading branch information
@izzy
izzy authored Jan 9, 2023
2 parents 576406a + d28d186 commit e7f4028
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 16 deletions.
21 changes: 15 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,30 +28,39 @@ To get started with using this method go to https://chat.bean.tools/generator.ht
Supported settings are as follows. To use them just add them as URL parameters, e.g.

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

#### Config options

**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.


| option | default | valid options | description | example |
|--------------------|----------------------|---------------|------------------------------------------------------------------------------------------------|----------------------------------|
| `ws_uri` | ws://localhost:8080/ | uri | The Streamer.Bot's local websocket URL | `ws_uri=ws://localhost:8080/` |
| `sb_enabled` | true | boolean | Enable Streamer.Bot integration | `sb_enabled=true` |
| `sb_ws_uri` | ws://localhost:8080/ | uri | The Streamer.Bot's local websocket URL | `ws_uri=ws://localhost:8080/` |
| `sb_twitch` | true | boolean | Enable Streamer.Bot Twitch Messsages | `sb_twitch=true` |
| `sb_youtube` | true | boolean | Enable Streamer.Bot YouTube Messsages | `sb_youtube=true` |
| `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` |
| `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` |
| `direction` | | horizontal | Set to "horizontal" this will scroll the text from right to left instead of bottom to top | `direction=horizontal` |
| `bubbles` | false | boolean | Displays bubbles instead of the standard chat log display | `bubbles=true` |
| `background` | | color | Background of the whole chat page. Careful: By default this will be overridden by OBS | `background=000000` |
| `background_color` | | color | If set overrides all chat bubble colours | `background_color=FF0000` |
| `bubble_color` | | color | If set overrides all chat bubble colours | `bubble_color=FF0000` |
| `text_color` | | color | If set overrides all user name colours | `text_color=FF0000` |
| `msg_color` | | color | If set overrides all message text colours | `msg_color=FF0000` |
| `default_color` | | color | This sets the default background/bubble colour for users who don't have a colour set | `default_color=FF0000` |
| `badges` | true | boolean | If set to false this disable broadcaster/VIP/moderator badges | `badges=false` |
| `badges_left` | false | boolean | Moves broadcaster/VIP/moderator badges to the left | `badges_left=true` |
| `badges_left` | false | boolean | Moves broadcaster/VIP/moderator badges to the left | `badges_left=true` |
| `highlights` | true | boolean | If set to false this disables visual difference for highlighted messages | `highlights=false` |
| `announcements` | true | boolean | If set to false this disables announcement messages | `announcements=false` |
| `timestamp` | false | boolean | If set to true displays the time of the message | `timestamp=true` |
| `timestamp_locale` | en-US | locale | The regional setting to use for the message time | `timestamp_locale=de-DE` |
| `cmdprefix` | | string | A prefix for bot commands. If this is set, chat messages starting with this won't be displayed | `cmdprefix=!` |
| `bots` | | string | A comma-separated list of accounts whose messages will not be shown(case-insensitive) | `bots=streamelements,streamlabs` |
| `fade_duration` | | number | Time in seconds until messages are removed | `fade_duration=60` |
| `max_messages` | | number | Maximum number of messages before old ones get deleted | `max_messages=10` |
| `max_messages` | | number | Maximum number of messages before old ones get deleted | `max_messages=10` |
| `fontfamily` | Open Sans | string | set (any locally installed) font | `fontfamily=Calibri` |
| `fontsize` | large | number/string | CSS class font-size value (e.g. x-large, 2em, 22px) | `fontsize=22px` |
| `emote_size` | 1.4rem | number/string | CSS class size value (e.g. 2em, 22px) | `emote_size=22px` |
Expand All @@ -67,7 +76,7 @@ file:///C:/path/to/stream-chat/chat.html?default_color=FF0000&bubbles=true

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

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).
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.

### Contributors / Thanks

Expand Down
96 changes: 91 additions & 5 deletions chat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,19 @@
font-weight: bold;

}

#version-notice {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #ffc39a;
padding: 1rem;
font-size: 2rem;
font-weight: bold;
color: #950000;
box-sizing: border-box;
}
</style>

<style type="text" id="enable-bubbles">
Expand Down Expand Up @@ -180,12 +193,55 @@

<body>
<div id="chat"></div>
<div id="version-notice" style="display: none;"></div>

<script>
const STREAMCHAT_VERSION = '0.2.0';
const STREAMCHAT_GH_USER = 'izzy';
const STREAMCHAT_GH_REPO = 'stream-chat';

/**
* Checks the current version of streamchat against the latest release on GitHub.
* @returns {string} A message indicating whether the current version is up to date or not.
*/
async function version_check() {
const res = await fetch(`https://api.github.com/repos/${STREAMCHAT_GH_USER}/${STREAMCHAT_GH_REPO}/releases/latest`)
.then(response => response.json())
.then(data => {
const version = data.tag_name.replace(/^v/i, "");
const version_parts = version.split('.');
const current_version_parts = STREAMCHAT_VERSION.split('.');
let upToDate = true;

if (version_parts[0] > current_version_parts[0]) {
console.debug(`${STREAMCHAT_GH_REPO} version ${STREAMCHAT_VERSION} is outdated. There is a major update to version ${data.tag_name} available.`);
upToDate = false;
} else if ((version_parts[0] === current_version_parts[0] && version_parts[1] > current_version_parts[1]) ||
(version_parts[0] === current_version_parts[0] && version_parts[1] === current_version_parts[1] && version_parts[2] > current_version_parts[2]))
{
console.debug(`${STREAMCHAT_GH_REPO} version ${STREAMCHAT_VERSION} is outdated. Please update to version ${data.tag_name}`);
upToDate = false;
} else {
console.debug(`${STREAMCHAT_GH_REPO} version ${STREAMCHAT_VERSION} is up to date or newer than the latest release ${data.tag_name}`);
}

return {version: version, upToDate: upToDate, error: null};
}).catch(error => {
console.error(error);
return {version: 'unknown', upToDate: false, error: error};
});
return res;
}

function getRnd(max, min = 0) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

/**
* @param {string} p The search parameter name
* @param {boolean} d The default value
* @returns {boolean} The value of the search parameter, or the default value if the parameter is not set.
*/
function searchParamIsTrue(p, d = false) {
let v = new URLSearchParams(window.location.search).get(p);
if (v === undefined || v === null) {
Expand Down Expand Up @@ -299,16 +355,16 @@
'youtube': false,
'websocket': '',
};
if (streamerbotEnabled === searchParamIsTrue("sb_enabled")) {
if (streamerbotEnabled === searchParamIsTrue("sb_enabled", true)) {
let sb_ws_uri = 'ws://localhost:8080/';
if (url.searchParams.get("sb_ws_uri") !== null) {
sb_ws_uri = decodeURI(url.searchParams.get("sb_ws_uri"));
}

streamerbotConfig = {
'enabled': streamerbotEnabled,
'twitch': searchParamIsTrue("sb_twitch", false),
'youtube': searchParamIsTrue("sb_youtube", false),
'twitch': searchParamIsTrue("sb_twitch", true),
'youtube': searchParamIsTrue("sb_youtube", true),
'websocket': sb_ws_uri
}
}
Expand Down Expand Up @@ -340,7 +396,7 @@
'max_messages': searchParamOrDefault("max_messages", false),
'pronouns': searchParamIsTrue("pronouns", true),
'highlights': searchParamIsTrue("highlights", true),
'announcements': searchParamIsTrue("announcements", false),
'announcements': searchParamIsTrue("announcements", true),
'badges': {
'enabled': searchParamIsTrue("badges", true),
'left': searchParamIsTrue("badges_left"),
Expand All @@ -356,12 +412,17 @@
'bots': bot_list,
},
'debug': searchParamIsTrue("debug"),

'version': {
'current': STREAMCHAT_VERSION,
'check': searchParamIsTrue("version_check", true),
'alert': searchParamIsTrue("version_alert", false),
}
}
}

const config = parseURL();

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

let socket, pronouns_users = {},
Expand Down Expand Up @@ -1263,6 +1324,31 @@
} else {
initializeConnections();
}

if (config["version"]["check"] === true) {
version_check().then(version => {
let version_el = document.getElementById("version-notice");
let message = '';
let display = 'none';

console.log(version);
if (version.upToDate === false) {
display = "block";
message = `You are using version ${STREAMCHAT_VERSION} of ${STREAMCHAT_GH_REPO}.` +
`There is a new version available. Please update to the latest version ${version.version}.`;
} else if (version.error) {
display = "block";
message = `There was an error checking for updates. Error: ${version.error}`;
}

if (config["version"]["alert"] === true && message !== '') {
alert(message);
} else {
version_el.style.display = display;
version_el.innerHTML = message;
}
});
}
</script>
</body>

Expand Down
9 changes: 5 additions & 4 deletions generator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<title>stream-chat link generator</title>

<style>
html {
Expand Down Expand Up @@ -176,7 +176,7 @@
top: 1rem;
border-radius: 1rem;
box-shadow: 0px 0px 4px #700;
z-index: 1;
z-index: 9999;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.25));
}

Expand All @@ -186,15 +186,16 @@

.group {
display: block;
position: relative;
transform: scaleY(1);
height: 100%;
opacity: 1;
z-index: 1;
}

.group h2 {
border-bottom: 2px solid;
border-image-slice: 1;
position: relative;
z-index: 1;
}

.group-open {
Expand Down
6 changes: 5 additions & 1 deletion generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ const groups = {
}

const fields = [
{ 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." },
{ 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!" },
{ group: groups.Integrations, label: "Streamer.Bot enabled", name: "sb_enabled", type: "checkbox", defaultValue: true, help: "Enables Streamer.Bot websocket integration when active." },

{ 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" },
Expand All @@ -62,7 +64,8 @@ const fields = [
{ 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" },
{ group: groups.Theme, label: "Badges", name: "badges", type: "checkbox", help: "If set to false this disable broadcaster/VIP/moderator badges"},
{ group: groups.Theme, label: "Badges on the left", name: "badges_left", type: "checkbox", help: "Moves broadcaster/VIP/moderator badges to the left"},
{ group: groups.Theme, label: "Highlights", name: "highlights", type: "checkbox", defaultValue: false, help: "If set to false this disables visual difference for highlighted messages" },
{ group: groups.Theme, label: "Highlights", name: "highlights", type: "checkbox", defaultValue: true, help: "If set to false this disables visual difference for highlighted messages" },
{ group: groups.Theme, label: "Announcements", name: "announcements", type: "checkbox", defaultValue: true, help: "If set to false this disables announcement messages" },
{ group: groups.Theme, label: "Timestamp", name: "timestamp", type: "checkbox", defaultValue: false, help: "If set to true displays the time of the message" },
{ 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." },
{ group: groups.Theme, label: "Fade duration", name: "fade_duration", type: "number", nullable: true, help: "Time in seconds until messages are removed" },
Expand Down Expand Up @@ -341,6 +344,7 @@ const loadFromUrl = () => {
generateURL();

showToast("Loaded from url!", "success");
loadUrlEl.value = "";
}

copyButton.addEventListener("click", copyToClipBoard)
Expand Down

0 comments on commit e7f4028

Please sign in to comment.