show most used emotes of twitch chat
Special credits to twitch.tv/omeiaum for the idea, i just coded it
'dvd mode' may NOT work properly in Firefox, please prefer chromium based browsers (like Chrome)
TY <3
If don't want to download just reach at homepage and start using!
- Dowload both tmi.js, manifest.json and ppShow.html
- OR clone the repo (click on code -> download zip)
- OR go to Releases and download the latest
manifest is not required, but if you want to host it somewhere it will enable some PWA features
- Open the ppShow.html with your browser
- type the channel name in the input and click "connect"
- You may wanto to click on settings to change:
- theme (dark/light)
- minimal amount of mentions to show an emote
- zero the emote count after a certain amount of messages
- enable 'dvd mode' to make image bounce on your screen sides
- change speed, speed random multiplier and leave or not the trace
- enable debug to print messages on devTools console (inspect/ctrl+shift+i/F12 key -> console)
- change emote size
these options are available to change directly in the code, look at the object data: { options: {...}}
-
Emotes not changing/appearing or it's too slow/fast?
- Click on options and change 'minimal aount os mentions' and 'Zero the count...' to lower/higher numbers
-
'DVD Mode'?
- Bounce the image on screen sides, just like the dvd logo, but with emotes
- Click on options and mark the "DVD Stant-by bouncing" to enable
- Mark "Don't clear canvas" to keep the path as the image moves
-
Hotkeys:
- 'Esc' to close popups (options and news)
- 'o' to show/hide options
- 'c' to connect/disconnect
- 'h' to show/hide connection info
- 'n' to show/hide news announcement card
can be disabled in options
auto disabled if an input (text fields, checkbox...) is focused
- Other
-
add a #hash with channel in URL, it will be setted as channel
- if 'autoconnect' is enabled will get priority over options
- Usage:
add #<channel> in URL - Example:
https://pp-show.vercel.app/#gnitoon
-
add ?hide=news,info to hide changelog popup
-
add ?autoConnect=true to toggle autoConnect when page is loaded
- requires reload to take effect, you can remove it then
-
to use both hide and autoConnect do it like this:
https://pp-show.vercel.app?hide=news&autoConnect=true#channel
-
code is a bit 'beginner' friendly, major part of JavaScript code commented/roughly explained
-
If you need a older version go to /archive/ppShow[version].html
- Example: ´https://pp-show.vercel.app/archive/ppShow101b.html´
- this is made to directly open without going back in commits or downloading release
-
Both options 'zero after messages' and 'min. mentions' affect how often they will appear on screen keeping low values (ex: -1 and 5) in both will make it change faster.
This will depend on chat speed and the ammount of messages.
For most cases 5~ and 20~ will be good for 'emote bursts'
That is, zero the count every 20 messages and if have more than 5 mentions show it
- Image not being redrawn sometimes - Emote not change in canvas on Firefox
- No support to Edge legacy
Easier to distribute, better just download one file and open it. And i could just copy and paste the entire code to update without starting a local git repo.
now, really, don't do that for larger projects. cases like this, a small application is 'fine' i guess, but don't do that if is not needed.
i do not code like that always.
tags isn't that great for spacing too i know, but is less tedious than mess with CSS for a simple thing
- oMeiaUm
- Vue.js framework
- tmijs package (to connect with twitch chat)
- BetterTTV (emotes and APIs)
- FrankerFaceZ (channel info)
- developpaper.com('dvd mode' code base)
- Icon (favicon) by me, based on a random emote from "ppS" bttv search, made with random pixelArt online tool