is2511/chatis

ChatIS v3 (the long awaited sequel) [WIP]

chatis's Issues

Suggestion for better text shadow

Instead of using text-shadow you can just use filter: drop-shadow(1px 1px 2px #333); on the #chat_container and it supports drop-shadow for 7tv paint names and also emotes which are both impossible with the text-shadow css currently used.

So essentially I recommend changing from using text-shadow settings to using the drop-shadow filter instead for better support.

Когда добавят интеграцию Ютуб? Чтобы сообщения оттуда тоже брались!

Last emote in chat appears giant in the background

Suggestion for much better text-stroke

The webkit-text-stroke that is currently used is terrible as it puts the stroke inside of the text instead of outlining the text. This means it reduces readability especially on larger sizes. I propose you instead use a combination of drop-shadow and text-shadow filters which can replicate a text-stroke but is actually properly on the outside of the text. The drop-shadow filters go on the name to support 7tv name paints and the text-shadow filters go on the message to avoid emotes getting a stroke applied. The text-stroke has 4 more axis to properly cover the entire text.

The only downside to this method is you can only use whole number pixels and because there is essentially one on each side the size is twice the pixel value. So this means it can only replicate the stroke sizes of 2 and 4 in the current system. But this does theoretically allow as large of a stroke as you want since it isn't placed inside the text.

Here is an example css code using this method

:root {
    --message-stroke: 2px; /*The stroke size of the message which is always 2x the stroke size of the name. Size of 2px is equal to the current stroke=2. 4px is equal to stroke=4.*/
    --message-stroke-min: -2px; /*The negative stroke size of the message which is always 2x the stroke size of the name. Size of -2px is equal to the current stroke=2. -4px is equal to stroke=4.*/
    --name-stroke: 1px; /*The stroke size of the name which has to be half the size of the message stroke because of how drop-shadows are calculated. Size of 1px is equal to the current stroke=2. 2px is equal to stroke=4.*/
    --name-stroke-min: -1px; /*The negative stroke size of the name which has to be half the size of the message stroke because of how drop-shadows are calculated. Size of -1px is equal to the current stroke=2. -2px is equal to stroke=4.*/
}

.nick {
    filter: 
        drop-shadow(var(--name-stroke-min) var(--name-stroke-min) 0 #000)
        drop-shadow(var(--name-stroke) var(--name-stroke-min) 0 #000)
        drop-shadow(var(--name-stroke) var(--name-stroke) 0 #000)
        drop-shadow(var(--name-stroke-min) var(--name-stroke) 0 #000);
}

.message, .colon {
    text-shadow:
        var(--message-stroke-min) var(--message-stroke-min) 0 #000,
        0 var(--message-stroke-min) 0 #000,
        var(--message-stroke) var(--message-stroke-min) 0 #000,
        var(--message-stroke) 0 0 #000,
        var(--message-stroke) var(--message-stroke) 0 #000,
        0 var(--message-stroke) 0 #000,
        var(--message-stroke-min) var(--message-stroke) 0 #000,
        var(--message-stroke-min) 0 0 #000;
}

And here is an example image comparing the current stroke method with this shadow method:

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): lock file maintenance

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency postcss to v8.4.38
• chore(deps): update dependency typescript to v4.9.5
• chore(deps): update dependency vite to v3.2.10
• fix(deps): update dependency solid-js to v1.8.17
• fix(deps): update dependency undici to v5.28.4
• chore(deps): update dependency vite to v5
• fix(deps): update dependency undici to v6
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @suid/vite-plugin to v0.2.0
• chore(deps): update dependency solid-start-cloudflare-pages to ^0.3.0
• chore(deps): update dependency solid-start-node to ^0.3.0
• fix(deps): update dependency @solidjs/meta to ^0.29.0
• fix(deps): update dependency @solidjs/router to ^0.13.0
• fix(deps): update dependency @suid/icons-material to ^0.7.0
• fix(deps): update dependency @suid/material to ^0.16.0
• fix(deps): update dependency solid-start to ^0.3.0
• chore(deps): update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @solidjs/meta ^0.28.2
• @solidjs/router ^0.7.0
• @suid/icons-material ^0.5.5
• @suid/material ^0.8.2
• solid-js ^1.6.8
• solid-start ^0.2.11
• undici ^5.14.0
• @suid/vite-plugin 0.1.1
• autoprefixer ^10.4.13
• postcss ^8.4.21
• solid-start-cloudflare-pages ^0.2.11
• solid-start-node ^0.2.11
• tailwindcss ^3.2.4
• typescript ^4.9.4
• vite ^3.0.0
• vite-plugin-solid ^2.5.0
• node >=16

---

• Check this box to trigger a request for Renovate to run again on this repository

[Feature Request] More settings to disable badges

I'd like the ability to disable subscriber and bit badges. Maybe you'd like to give more granularity for which badges to disable, Twitch Downloader has a good interface for this, allowing you to disable chat badges (bits, event badges) or sub badges individually, but just disabling all badges would be good enough for my use case

I've been able to disable badges through custom css but it would be nice for less technical users to have the option to disable them easily

[Feature Request] Allow showing bot commands

By default, user's bot commands are hidden, I'd like to be able to show them (messages beginning with commands like !info). Thank you!

emoji cdn broken

emoji's are acting funny in the chat, whatever was being used to serve them seems to have gone away (on my end atleast).
https://twemoji.maxcdn.com/v/13.1.0/72x72/1f307.png

Regex message filter (in-chat voting)

Hey!

When streamers play GTA V Chaos Mode, viewers vote (1-8) via chat for options on how to prevent the streamer from passing the game. As a result, the chat turns into a set of numbers, which complicates communication with the streamer and between each other. At the same time, in Chaos Mode, the popularity of the options is displayed in a separate block on the screen, so duplication occurs.

It is easy for viewers to avoid this by creating a rule in one of the extensions to filter messages using Regex: ^[1-8]$. I suggest adding the same feature for the chat overlay to avoid duplication and exclude unnecessary info. It will also improve the quality of the chat on VODs, which can be viewed years later.

7TV namepaint not showing per user sometimes

7TV namepaints don't work 100% of the time. Sometimes they just don't show for a user (consistently within a session, relative to the user).
The cause is yet unknown. I did transition (finally!) to 7TV EventAPI v3 last weekend, and haven't had the time to debug it much.

I'll investigate next weekend if I have the time.

This has a mirroring Trello card.

Add support to hide unlisted and private emotes from showing up

I would like an option to disable unlisted and private 7TV emotes from showing up in the overlay.
(Since they are mostly nsfw, they could get the streamer in trouble when they show up in the overlay on stream)