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"
>