Skip to content

Commit

Permalink
#48 Added Scrollback and Scrollback Length
Browse files Browse the repository at this point in the history
  • Loading branch information
@izzy
izzy committed Jun 15, 2023
1 parent 1941358 commit c447cfe
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 11 deletions.
84 changes: 73 additions & 11 deletions chat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,33 @@
background-color: #ff827c;
box-sizing: border-box;
}

#scrollback-resume {
box-sizing: border-box;
position: absolute;
bottom: 0;
right: 0;
width: 100%;

padding: 1rem;

color: white;
background: rgba(0,0,0,0.8);
font-size: 1.2rem;
font-weight: bold;
text-align: center;
}

#scrollback-resume:hover > .float-up-down {
position: relative;
bottom: 0;
animation: float-up-down 1s infinite alternate;
}

@keyframes float-up-down {
0% { bottom: -3px; }
100% { bottom: 7px; }
}
</style>

<style type="text" id="enable-bubbles">
Expand Down Expand Up @@ -208,11 +235,14 @@

<body>
<div id="chat"></div>
<div id="scrollback-resume" style="display: none;" onclick="document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;">
<span class="float-up-down">⬇️</span> Back to present <span class="float-up-down">⬇️</span>
</div>
<div id="version-notice" style="display: none;"></div>
<div id="connection-status" style="display: none;"></div>

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

Expand Down Expand Up @@ -532,6 +562,11 @@
'family': searchParamOrDefault("fontfamily", "Open Sans"),
'size': searchParamOrDefault("fontsize", "large")
},
'scrollback': {
'enabled': searchParamIsTrue("scrollback", false),
'length': parseInt(searchParamOrDefault("scrollback_length", 100)),
}

},
'exclusion': {
'cmdprefix': cmdprefix,
Expand All @@ -552,7 +587,7 @@
console.debug(['Loaded config', config]);

let socket, pronouns_users = {},
pronouns;
pronouns, scroll_paused = false;

// Fill the pronoun cache
// TODO: Handle errors on this
Expand Down Expand Up @@ -840,8 +875,27 @@

document.getElementById('chat').appendChild(div_message);

const element = document.getElementById('chat');
element.scrollTop = element.scrollHeight;
const chat = document.getElementById('chat');

if (config['ui']['scrollback']['enabled'] === false ||
(config['ui']['scrollback']['enabled'] === true && scroll_paused === false)) {
chat.scrollTop = chat.scrollHeight;
}
}

if (config['ui']['scrollback']['enabled'] === true) {
document.getElementById('chat').addEventListener('scroll', () => {
const chat = document.getElementById('chat');
const scrollheight = chat.childNodes[chat.childNodes.length - 1].offsetHeight;

if (chat.scrollTop + window.innerHeight < chat.scrollHeight - scrollheight) {
scroll_paused = true;
document.getElementById('scrollback-resume').style.display = 'block';
} else {
scroll_paused = false;
document.getElementById('scrollback-resume').style.display = 'none';
}
});
}

let StreamerBot = {
Expand Down Expand Up @@ -1002,13 +1056,14 @@
}

function remove_old_messages() {
let chat = document.getElementById('chat');
let messages = chat.getElementsByClassName('chat-message');
const chat = document.getElementById('chat');
const messages = chat.getElementsByClassName('chat-message');
let messages_to_remove = [];

// Remove old messages when there are more than the max_messages setting
if (config['ui']['max_messages'] !== false) {
let max_messages = config['ui']['max_messages'];
const max_messages = config['ui']['max_messages'];

if (messages.length > max_messages) {
for (let i = 0; i < messages.length - max_messages; i++) {
messages_to_remove.push(messages[i]);
Expand All @@ -1017,14 +1072,17 @@
}

for (let i = 0; i < messages.length; i++) {

// Remove messages that are outside the bounding box
// bottom when vertical scrolling is enabled,
// right when horizontal scrolling is enabled
if ((config['ui']['direction'] === 'vertical' && messages[i].getBoundingClientRect().bottom < 0) ||
(config['ui']['direction'] === 'horizontal' && messages[i].getBoundingClientRect().right < 0)
) {
messages_to_remove.push(messages[i]);
if (config['ui']['scrollback']['enabled'] === false ||
(messages.length > config['ui']['scrollback']['length'] &&
i < messages.length - config['ui']['scrollback']['length']
)
) {
messages_to_remove.push(messages[i]);
}
}

// Remove messages that are older than the max age (fade_duration)
Expand Down Expand Up @@ -1160,6 +1218,10 @@
addCSSRule(config['ui']['colors']['highlight']['text'], `${highlight} ${username}`, 'color', true);
addCSSRule(config['ui']['colors']['highlight']['background'], highlight, 'background-color');

// Rules for scrollback
if (config['ui']['scrollback']['enabled'] === true) {
addCSSRule(config['ui']['scrollback']['length'], '#chat', 'overflow: auto;');
}
}

function initializeConnections() {
Expand Down
35 changes: 35 additions & 0 deletions generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ let fields = [
{ group: groups.Chat, label: "Bots", name: "bots", type: "text", nullable: true, help: "A comma-separated list of accounts whose messages will not be shown(case-insensitive)" },

{ group: groups.Theme, label: "Direction (horizontal if enabled)", name: "direction", type: "checkbox", help: "Set to 'horizontal' this will scroll the text from right to left instead of bottom to top" },
{ group: groups.Theme, label: "Allow Scrollback", name: "scrollback", type: "checkbox", defaultValue: false, help: "If set to true this enables scrolling backwards in chat. Useful for chat monitoring. Not available with vertical chat or bubbles." },
{ group: groups.Theme, label: "Scrollback length", name: "scrollback_length", type: "number", defaultValue: 100, help: "The number of messages to keep in scrollback" },
{ group: groups.Theme, label: "Bubbles", name: "bubbles", type: "checkbox", help: "Displays bubbles instead of the standard chat log" },
{ 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"},
Expand Down Expand Up @@ -467,9 +469,42 @@ announcements.addEventListener("change", (e) => {
bubbles.dispatchEvent(new Event("change"));

const directionEl = document.querySelector("input[name=direction]");
const scrollback = document.querySelector("input[name=scrollback]");
const scrollback_length = document.querySelector("input[name=scrollback_length]").parentNode;

directionEl.addEventListener("change", (e) => {
changeDirection(e.target.checked);

if (e.target.checked) {
scrollback.parentNode.parentNode.style.display = "none";
scrollback_length.style.display = "none";
} else {
scrollback.parentNode.parentNode.style.display = "";
scrollback_length.style.display = "";
}
});

scrollback.addEventListener("change", (e) => {
if (e.target.checked) {
scrollback_length.style.display = "";

// We do not support scrollback with many other options to avoid
// issues with layout or scrolling behaviour.
bubbles.checked = false;
bubbles.dispatchEvent(new Event("change"));
bubbles.parentNode.parentNode.style.display = "none";

directionEl.checked = false;
directionEl.dispatchEvent(new Event("change"));
directionEl.parentNode.parentNode.style.display = "none";

} else {
scrollback_length.style.display = "none";
bubbles.parentNode.parentNode.style.display = "";
directionEl.parentNode.parentNode.style.display = "";
}
});
scrollback.dispatchEvent(new Event("change"));

const sb_enabled = document.querySelector("input[name=sb_enabled]");

Expand Down
3 changes: 3 additions & 0 deletions options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ file:///C:/path/to/stream-chat/chat.html?sb_enabled=true&bubbles=true
| `announcements` | true | boolean | If set to false this disables announcement messages | `announcements=false` |
| `announcement_color` | | color | This sets the colour for announcement messages | `announcement_color=FF0000` |
| `announcement_bg_color` | | color | This sets the background/bubble colour for announcement messages | `announcement_bg_color=FF0000` |
| `scrollback` | false | boolean | If set to true this enables the scrollback feature | `scrollback=true` |
| `scrollback_length`| 100 | number | This sets the number of messages to keep in scrollback | `scrollback_length=100` |
| `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=!` |
Expand All @@ -50,6 +52,7 @@ file:///C:/path/to/stream-chat/chat.html?sb_enabled=true&bubbles=true
| `emote_size` | 1.4rem | number/string | CSS class size value (e.g. 2em, 22px) | `emote_size=22px` |
| `version_check` | true | boolean | Check for new stream-chat versions on startup | `version_check=false` |
| `version_alert` | false | boolean | Use an alert popup for new versions(can be clicked away, but be careful, might open several windows!) | `version_alert=true` |

#### Types

`color`: 6-digit HEX colour code without the '#'
Expand Down

0 comments on commit c447cfe

Please sign in to comment.