izzy / stream-chat Goto Github PK

/announcement messages don't show.

Not much of a functional issue but more of a documentation issue.

As discussed in #35, I'll put here what I think should be upgraded:

1. First of all, better differentiation between the standard vertical chat and others (the standard horizontal chat, bubble vertical, and bubble horizontal), because I have a slight issue, whenever I try to override the username color so the color for all usernames is the same in my vertical chat, even if I have two different links with different parameters(one for the vertical chat and one for the bubble vertical chat), I can't change it in any way (the "text_color" doesn't work), the only way for me to do it is in CSS and if I do that in the code, it will change my bubble username color as well since I modified the CSS part and I know it's not ok to do it like that, I tried even with "!important" and it changes the username color for every chat I'll make, another option is to just have two chat folders, one for my vertical chat, and one for the bubble chat, but that will be counter-productive, right?; So, in short, I'd love a better differentiation between each chat format;
2. More customization options for the bubble chat:
   • customizable border size, border radius, color (for example I use it without the border and with no rounder corners), maybe even a shadow field;
   • username font name & color.
3. Customizable announcement & highlight text options:
   • in my case, I'd want to have a specific announcement background color, message color & username color for all announcements, the same for the highlighted messages, and for now, that is not possible;
4. Maybe customizable icons (Subscriber, Bit Cheerer, Broadcaster, Moderator, VIP, Announcement, etc.).

For now, I'll keep the highlight & announcements off, and if the text_color (which affects the username from what I understand) will work for each individual link (for different chats), then the no. 1 issue for me will be solved, in my opinion, that's the biggest issue I encountered.

To make it easier for non-tech users to set up the overlay it would be best to have a config interface.

This could be implemented by having a config=true option that displays the options available to the user, a preview of what the messages would look like and a drag-me button that has the URL set as href so users can drag and drop the final configuration into OBS.

Additionally presets for the most-used combinations could be displayed next to the preview.

I see two options

• via localstorage(when available)
• Load settings via URL

When using the overlay for monitoring chat it would be good to have a certain amount of scroll back.

The goal is to remove any additional code just in place for bubble styling and building everything over a unified code base to make the code less cluttered. This should be a priority before #44.

Possible solutions include templating, CSS-variables and the new addCSSRule implemented in #41

Adds option "Reverse Flow" in the settings which depending on the settings will change flow like following:

• Bubbles
  • Bottom-Top -> Top-Bottom
  • Right-Left -> Left Right
• No Bubbles
  • Top-Bottom -> Bottom-Top
  • Right-Left -> Left Right

Not sure if this is possible with the current SB implementation.

It would be good to do opt-out notifications about new versions given that a lot of users won't notice a new version has been released.

Currently, new posts on a blank "canvas" are first displayed at the top. Then when the "canvas" is full, the chat is "pushed" upwards by the messages appearing at the bottom. The latter is "expected behavior" but it would be nice if there was an option to start the NEW chat messages on a blank "canvas" at the bottom.

Not released yet but could make the config interface easier. Relates to #4

See https://chromestatus.com/feature/6234451761692672

Add font-weight option for the following items:

• Username
• Pronoun
• Message Text

Pretty much everything has a colour customization option, so another one for .msg-text would just be consistent.

Is it possible to hide a message if said message is deleted, or if the user is timed out/banned? Current solution is to just refresh the browser source if one of those events happens.

Reproduced with sb_enabled=true&sb_twitch=true&highlights=true&announcements=true&text_color=ff0000&msg_color=002aff&direction=vertical&bubbles=false&debug=true

Discovered in #35

For the following items:

• Message Text
• Username
• Pronouns

#35

Unless the Websocket is connected there should be some form of UI element showing that the Overlay is either connecting or that the connection failed.

It would be good to have fonts configurable via the URL parameters. At least the following

• font-size
• font-family

Additional GFonts would be a nice-to-have.

Like on the left (vs our current default on the right).

In case of the non-bubble version this should probably even be the default.

When using emotes that are numbered variants like emote and emote2 in the following order the replacement breaks:

emote emote2 emote

I have a few feature requests.

• Ability to hide bot messages
• Ability to hide commands
• Ability to display larger emotes
• Fade messages after time

Hello! First of all, I wanted to say that I love this repo a lot! Thank you so much for all the work, it is awesome.

For a better understanding of what I want to do to use both the chat bubble and the vertical chat from the same chat.html, but with slightly different settings, and I want to keep it as simple as possible, with no badges, timestamps, pronouns or other things, just the username, text and emotes and maybe announcements to be displayed differently (which I saw it was added to the code already).

Now, getting to the issue at hand, the issues I encountered are:

• pronouns appear whatever I do;
• the username color remains the same (Twitch username color), even if I have set up the text_color in the link and the other text color variables in the browser source link;
• also this is more of a nice-to-have thing, but in case the user selects vertical/horizontal vs bubble, it would be nice to have a different set of settings for each, for example, I'd want the username to be bigger on the bubble chat and smaller on the vertical chat.

I can do those changes directly in the CSS part of the HTML myself, but that would be very ok since the repo is getting updated and I'll have to adapt what I wrote every time it gets an update.

Words break everywhere without any consideration for language(word-break: break-word).

See word-break and overflow-wrap

The offending line is:

https://github.com/izzy/stream-chat/blob/main/chat.html#L49

This project should probably have some preview images for the README and the social media preview.

A good example image should show that different customization options are available.

The social media preview image "should be at least 640×320px (1280×640px for best display)".

Should be an easy one, only needs to hook with a setting into the remove_old_messages()

Would be neat to have an option to display profile pictures next to the name or on the bubbles.

For now this is specifically for YT comments, but also for general independance in terms of what data sources the overlay can work with, so if a user has a different websocket data source that emits chat messages, it should be as easy as possible to extend the overlay to accept these.

Once this is done, the SB YouTube chat should be integrated as a test.

With the latest update, emotes don't display. I've tried with no arguments and with a bunch on.

chat.html?direction=horizontal&bubbles=true&badges=true&highlights=true&cmdprefix=!&bots=nightbot&fade_duration=120

Change to the file structure would look like themes/[name-of-theme]/index.{js,css}

index.js would contain a config array that will be merged with the config.

index.css will be added via JS.

The generator would need a list of themes and the theme should be added to the URL.

If someone send a long message the text doesn't do a word wrap when it reaches the end of the area defined.

EX: sd;lghkfsd;lkhsd;flkhsd;flkhsd;flkhsd;flkgs;dflgksd;flgksd;flgks;dflgksdl;fkg;sdlfkg;sdlfgsdfljkhg;seiuhgy;ser8urhg'sierthjs

Does not fit in a area off 300x500.

Screen shot attached of chat box and stream chat to show example.