From af0015a31bbbff5537b2f1e68e0c6ee8f7cf1896 Mon Sep 17 00:00:00 2001 From: Gnitoon <80431627+Gnitoon@users.noreply.github.com> Date: Tue, 23 Mar 2021 23:38:27 -0300 Subject: [PATCH] v1.0.1d - Stay onFocus so i can take a unBlurred pic + Spining emote (i heard "it's spinning there in the screen" in a stream...) you can change spin speed in options - Removed onfocus and onblur events on input elements and added a condition to cheeck if the element is a input on keypress event + some comment lines added to code + Added github repository link in options, next to license --- README.md | 204 ++++++++++++++++++++++++++++------------------------ index.html | 148 ++++++++++++++++++++++---------------- ppShow.html | 148 ++++++++++++++++++++++---------------- 3 files changed, 285 insertions(+), 215 deletions(-) diff --git a/README.md b/README.md index fe0c1e3..4ff47c5 100644 --- a/README.md +++ b/README.md @@ -1,95 +1,109 @@ -# ppShow -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 - - -## BASIC USAGE: - -### If don't want to download just reach at [homepage](https://pp-show.vercel.app) and start using! - -1. Dowload both tmi.js, manifest.json and ppShow.html - * OR clone the repo (click on code -> download zip) - * OR go to [Releases](https://github.com/Gnitoon/ppShow/releases) and download the latest - -_manifest is not required, but if you want to host it somewhere it will enable some PWA features_ - - -2. Open the ppShow.html with your browser -3. 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_ - -## DEMO video -https://user-images.githubusercontent.com/80431627/110715426-fbfaa980-81e3-11eb-951f-cb03c3c89904.mp4 -![](https://user-images.githubusercontent.com/80431627/110715426-fbfaa980-81e3-11eb-951f-cb03c3c89904.mp4) - -## IMPORTANT NOTICE: -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 - -## Known issues -* Image not being redrawn sometimes - Emote not change in canvas on Firefox -* No support to Edge legacy - -## Why everything in one file (HTML, Js, CSS)? -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_ - - -## Credits: -* 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 - - -## LICENSE: MIT - +# ppShow +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 + + +## BASIC USAGE: + +### If don't want to download just reach at [homepage](https://pp-show.vercel.app) and start using! + +1. Dowload both tmi.js, manifest.json and ppShow.html + * OR clone the repo (click on code -> download zip) + * OR go to [Releases](https://github.com/Gnitoon/ppShow/releases) and download the latest + +_manifest is not required, but if you want to host it somewhere it will enable some PWA features_ + + +2. Open the ppShow.html with your browser +3. 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 # in URL` + - Example: + `https://pp-show.vercel.app/#gnitoon` + + * 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_ + +## DEMO video +https://user-images.githubusercontent.com/80431627/110715426-fbfaa980-81e3-11eb-951f-cb03c3c89904.mp4 +![](https://user-images.githubusercontent.com/80431627/110715426-fbfaa980-81e3-11eb-951f-cb03c3c89904.mp4) + +## IMPORTANT NOTICE: +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 + +## Known issues +* Image not being redrawn sometimes - Emote not change in canvas on Firefox +* No support to Edge legacy + +## Why everything in one file (HTML, Js, CSS)? +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_ + + +## Credits: +* 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 + + +## LICENSE: MIT + diff --git a/index.html b/index.html index 88035ca..398c1ff 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + @@ -318,6 +318,26 @@ } + + /* spinning animation */ + @keyframes spinner { + from { transform: rotate(0); } + to { transform: rotate(360deg); } + } + @-moz-keyframes spinner{ + from { transform: rotate(0); } + to { transform: rotate(360deg); } + } + @-webkit-keyframes spinner{ + from { transform: rotate(0); } + to { transform: rotate(360deg); } + } + .spinning { + animation: spinner 1500ms linear infinite; + -webkit-animation: spinner 1500ms linear infinite; + -moz-animation: spinner 1500ms linear infinite; + } + #canvas-cont{ position: absolute; top: 0; @@ -326,7 +346,7 @@ width: 99vw; z-index: -1; } - #dvd-like{ + #dvd-like{ width: 100%; height: 100%; } @@ -431,8 +451,6 @@ min="-1" @change="saveLocal('miMentions', $event.target.value)" - @focus="inFocus" - @blur="inBlur" >
@@ -453,8 +471,6 @@ min="-1" @change="saveLocal('msgTreshold', $event.target.value)" - @focus="inFocus" - @blur="inBlur" >
this will help to use only most recent ones @@ -472,8 +488,6 @@ v-model="options.theme" @change="saveLocal('theme', $event.target.value)" - @focus="inFocus" - @blur="inBlur" >