15 | {cue
16 | .filter((message) => Boolean(message.userId))
17 | .map((message, i) => (
18 |
21 | ) : (
22 |
23 | {cue
24 | .filter((message) => Boolean(message.userId))
25 | .map((message, i) => (
26 |
29 | )
30 | ) : (
31 |
32 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | .subscriber {
2 | text-shadow: 0 0 5 #8205B4
3 | }
4 |
--------------------------------------------------------------------------------
/src/certs/cert.pem:
--------------------------------------------------------------------------------
1 | -----BEGIN CERTIFICATE-----
2 | MIIEWTCCAsGgAwIBAgIRAPnC98Z+upvYh8ynufZvUW4wDQYJKoZIhvcNAQELBQAw
3 | gY8xHjAcBgNVBAoTFW1rY2VydCBkZXZlbG9wbWVudCBDQTEyMDAGA1UECwwpY2hy
4 | aXN0aWFuQGNocmlzLW5vdGUgKENocmlzdGlhbiBWaWxsZWdhcykxOTA3BgNVBAMM
5 | MG1rY2VydCBjaHJpc3RpYW5AY2hyaXMtbm90ZSAoQ2hyaXN0aWFuIFZpbGxlZ2Fz
6 | KTAeFw0yMzEwMTkwMjEwMjVaFw0yNjAxMTkwMjEwMjVaMF0xJzAlBgNVBAoTHm1r
7 | Y2VydCBkZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTEyMDAGA1UECwwpY2hyaXN0aWFu
8 | QGNocmlzLW5vdGUgKENocmlzdGlhbiBWaWxsZWdhcykwggEiMA0GCSqGSIb3DQEB
9 | AQUAA4IBDwAwggEKAoIBAQDLmzNB0mQJyj1lyT0BboB1Yr7QxCLXfBN4ihU0gkFq
10 | 0AEXIPfXs3A6Bg1eAo9f0mI1yiv4YRq7gJpU0BDv/ez11B0ioDWoZluPOLjXVBen
11 | BpZo/kPMz2Ex3cnS5x8SJTbGqmuPdED3PKJ0SeASIEORP1M/7FfeB1DFRED5Ruy7
12 | s9LXLho6DgauS8DAdsp0wWd0GyKmICeNQ5g2Xtdp4X6MJjbHVRn2qnwBrHnR3piW
13 | PDJJ7hbzy7SznVQ6Yc75FMGw6eiMvWetDLI6w7u6d9khVXdbcea/cVTrwsqbCoha
14 | PdHAvusJNjUCPQd8a8xyxo13j8m5fXuKrkBeu4s8bv8DAgMBAAGjYTBfMA4GA1Ud
15 | DwEB/wQEAwIFoDATBgNVHSUEDDAKBggrBgEFBQcDATAfBgNVHSMEGDAWgBQuxcrE
16 | 5RAeWPr82v618Da3rJGjOTAXBgNVHREEEDAOggxub3RlYm9vay5uZXQwDQYJKoZI
17 | hvcNAQELBQADggGBADK0dzCFG76KKq0fNvmPi1Jaqrq0l2iSdAgew8ZuF9XsustX
18 | WKtZ7A9tsoVJ3dQtZB29S/kPetX4voejsymuBlVtObl64Gviu1FY5TXfiP3X70C7
19 | /JT/bfYw6WclR7LoZnZaDEqA/91sMkUsNF27nj0tpyX//87Rf3wbuCP4KwBGolXu
20 | tRxqy18LwMPU4kpkr8wS9VT79ndUfo0+w6JBtfw1FC6P7hnMVDmJwSk5YiEf82nS
21 | bza6Kdk9X6ZUmxL/J0mSSTEBet8xr1K/mL6whKSkNyMWAnK8Yj3GZjDCHhv1h2jN
22 | /CwRxRUCPDdaOWz83FAtzh1nqDz+VBZ2n75+Hw/v28cuPXshXcE2UV70Q9B7jYSo
23 | ZBXQigqIGQu2J9SZ+yNFFPyh2geAb8CfWVTtFua5yhptafEhyRcwMZqgWu+7IFl2
24 | z3DN8D+UrY/nANZ4vogKjaGSd4E4HQD/Gib5T5FEcbt1uVIk9OInUVw9kG/97B1S
25 | ijMmDNFKb6lD60ajRA==
26 | -----END CERTIFICATE-----
27 |
--------------------------------------------------------------------------------
/src/certs/key.pem:
--------------------------------------------------------------------------------
1 | -----BEGIN PRIVATE KEY-----
2 | MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDLmzNB0mQJyj1l
3 | yT0BboB1Yr7QxCLXfBN4ihU0gkFq0AEXIPfXs3A6Bg1eAo9f0mI1yiv4YRq7gJpU
4 | 0BDv/ez11B0ioDWoZluPOLjXVBenBpZo/kPMz2Ex3cnS5x8SJTbGqmuPdED3PKJ0
5 | SeASIEORP1M/7FfeB1DFRED5Ruy7s9LXLho6DgauS8DAdsp0wWd0GyKmICeNQ5g2
6 | Xtdp4X6MJjbHVRn2qnwBrHnR3piWPDJJ7hbzy7SznVQ6Yc75FMGw6eiMvWetDLI6
7 | w7u6d9khVXdbcea/cVTrwsqbCohaPdHAvusJNjUCPQd8a8xyxo13j8m5fXuKrkBe
8 | u4s8bv8DAgMBAAECggEAFVJQYNE2dqv+F/2l7NN0klZf4x7XAzfUFihnphMJ5LSZ
9 | mKF0MttwojLmDXU5LHCspjNgvWb11LLX9o+/ZlJyESBAWNLsK5FkfzASc0I0I+KV
10 | t7MAyJ7i78TpELPxVgYdoVpRXzluYDWyUXk3BM7qJHi8MBKA9RhRBgdqwnAB9Hnl
11 | hac12EJxMNf6ztW2U2b4fcjm1JMHmIqh1clvoBq8CiJvGd3jRIdUDmknDWjjTLIJ
12 | /NoGxEXpf1l3wmUmTqzRxiGybae9/ykxwm3tpv7HBXv1sklwPUlYbIPZRluf8YqU
13 | vqIF5vOpHHaTAuTwn6Bjc/THLNbhgCuU4We/lGiQiQKBgQDh2mJLPnOMoFfig/sE
14 | szptBuu9R1Ythwakvi0UxqATN8Lm9sBGFv6N5LdeUsG/zbq5gqrL5nlBSQgAtHNw
15 | WDqH3JTslyZjcS/Ypd9VORV5Zr2XlzIyfPc3GWPAjueJIvA+TiZ0IF5pbQBl9q/d
16 | UBYwMHXQpw9yZC+SUhvwIl3o9QKBgQDmyJ8Qw91EVGiifHkxVEKbzUJSelwnn20+
17 | DovnD6Pjx+4jme9j/bbf/E+VYHP+b5qM2cOMxBx78tjM8c91M8c5Arepu9dDPVj+
18 | AHs1C+fpn2a0OgEq0GMmS133ILsZ4WDQF4OXz3T7NlqHbmKddiHCBCL+uAJL4Xvq
19 | 7QFyvFwtFwKBgQCUKJ6ynZVPeyAsCEhzHOAHBbM/x7xQwXMqP1dzeZkpAjtpKBWZ
20 | 5Ru4GYHw7nkLSfpkF8PTXq3MlgwZ6kaQPFCpL5rCWaVlNqschDOtxHTB3xQgjZ7w
21 | X+oMyysU9qoM3E6dkMbJBzLoFglc2ickF5V2p1OiPPV1JSPP6O1K6kCQwQKBgQC+
22 | queIEVoAdwBPpij2kVfKouV1gPQcJEI78Aaz6p8LtIVR0n8OjHIHUcxqbFrIzmnQ
23 | jqVZ6jhiSzvE7s7oVNP2jQEycSeivM+GYt1n8SM0R+axZe7K8YnI/KFwaBFMi4DR
24 | y2uEA/jxB3H5zEAbOZsgUQych2gWSv93E0KMCYTaFwKBgQCrlrt5qjeMx23jFW13
25 | uUOQbMwDYP67xXB7uQgXIAct4DQ4cZIY4/V1qpTXErU0VEkRUfeR3JciPjaXmDWn
26 | s71+4E2D3GivmxZkO7EjWQijjTuHRjrfUwuxqryuvvP6vWuZ8dNRATop0bJWfy+b
27 | 24ezzhcwt6Qqua3yrfO8QAbDzw==
28 | -----END PRIVATE KEY-----
29 |
--------------------------------------------------------------------------------
/src/certs/notebook.net.crt:
--------------------------------------------------------------------------------
1 | -----BEGIN CERTIFICATE-----
2 | MIIDSjCCAjKgAwIBAgIURY+CVD2bHq8nvaPVTLdHbvl/CbwwDQYJKoZIhvcNAQEL
3 | BQAwFzEVMBMGA1UEAwwMbm90ZWJvb2submV0MB4XDTIzMTAxOTAyMzM1M1oXDTIz
4 | MTExODAyMzM1M1owFzEVMBMGA1UEAwwMbm90ZWJvb2submV0MIIBIjANBgkqhkiG
5 | 9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwG0jZSOcxtQuBKXzk3SREQmPyPfBsqmkiahx
6 | /ftqKvw+d5zeckb0jUZuAfOROJJcKLPennrUD08xbPL9zCk9zJjyqdGK6ItVzFa5
7 | ewOYFO78ety2riBYUpmQmxkd7hnp5BAH9uP4dIdbRPuFEl3qDw/M++fmWBoZTIp4
8 | W3WkF5YITAbgylKRs8OWK9FNcmNPSnV9yqb7rVmFxNbNx40ipqk5X7FP5hei09FW
9 | V/w1g3GiA9nJuR3KMfdaSuudMO1ktPqKHq/k8m6SPxunIwLsLN4JXtVbbzk7NYFn
10 | cBo0U+DpC23BUmh0nv7jGmavgTGFDjq5f6QMljDY860XwFMXZwIDAQABo4GNMIGK
11 | MB0GA1UdDgQWBBSvMf8gqyVv2yr/btq26e8XoqPcYDA8BgNVHSMENTAzoRukGTAX
12 | MRUwEwYDVQQDDAxub3RlYm9vay5uZXSCFEWPglQ9mx6vJ72j1Uy3R275fwm8MAkG
13 | A1UdEwQCMAAwCwYDVR0PBAQDAgTwMBMGA1UdJQQMMAoGCCsGAQUFBwMBMA0GCSqG
14 | SIb3DQEBCwUAA4IBAQCB1dgkM4xKvEV0faHPKhBf65QNjf5Jif24h6Sh7DW955xM
15 | GcaZB/KcuFiZYPclfduy5pT1uuZkE1A5B+il8quptz5fLhV4q1FAgFAd0rVmxR1q
16 | PMRqWPhRQwGJvZWSg+xzU5invPklCd3SjpDNcl8pFF072oa9CRNbqUV04XB8cf9c
17 | 35pxFenY2kWA2LPX7QV9weKfIRTu9AEoRYzuRGapMz1iC/0ZXjN9IzmU1k4ZkLrf
18 | MPKPgLIm9V0Uh6yyKoBG25MVEF6ijfyqcbh/U0ainDUaHMEjGe1/4bmWOewE8jiM
19 | nlFVpV69vYqFAyYpf058lMfMJ8QJx0VK+1vkhDJD
20 | -----END CERTIFICATE-----
21 |
--------------------------------------------------------------------------------
/src/certs/notebook.net.key:
--------------------------------------------------------------------------------
1 | -----BEGIN PRIVATE KEY-----
2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDAbSNlI5zG1C4E
3 | pfOTdJERCY/I98GyqaSJqHH9+2oq/D53nN5yRvSNRm4B85E4klwos96eetQPTzFs
4 | 8v3MKT3MmPKp0Yroi1XMVrl7A5gU7vx63LauIFhSmZCbGR3uGenkEAf24/h0h1tE
5 | +4USXeoPD8z75+ZYGhlMinhbdaQXlghMBuDKUpGzw5Yr0U1yY09KdX3KpvutWYXE
6 | 1s3HjSKmqTlfsU/mF6LT0VZX/DWDcaID2cm5Hcox91pK650w7WS0+ooer+TybpI/
7 | G6cjAuws3gle1VtvOTs1gWdwGjRT4OkLbcFSaHSe/uMaZq+BMYUOOrl/pAyWMNjz
8 | rRfAUxdnAgMBAAECggEAAvZrMhZvRnxjzPyFGIMV7K46AX0XBVopR1lJkAB77Pd/
9 | OrY2konXIAmyjeMjHDzcoF/MkKIRe77bYvMGx0rnQawlKEoqmlPy2TeImYU/pSrc
10 | xkN5qIqk8XidylWDqXPKrxE0Hi/6VkjzNcetj8/UV7EFledHG5ojQ5NqMPZJtXc5
11 | /aQZz9eQ/rYaupaUiiu3M2ihUn8NoVG4F9+lYeGDHi/UPKDDW5kWqM7kepY9AkOn
12 | EatRUC5r9gxZwB22/xINqWZP9h4p/THaF4SwiNsgEsCfGun9pWkT2TRI8WTUmlmI
13 | J3Jkqz7p63G3+13cpKmrFDuTf9tl1+ndVmseTXNCyQKBgQD50ePVJKB7BRuy1h53
14 | vtqS3XZsgpqATWLgZQ/h/NNl/xR8oVxV/6kCkvR8ThduT2A/KO8MBFcBe1vDaFdd
15 | W8eZgcjS+mzgRrOjF9q4sn+Q9ThbpGF/d7OKbSPnLCMoiN99vS6tT6YYxspS8wDK
16 | QO11e1sL6vGU+oPDN/Awp1WqSwKBgQDFL8ZS9MJeKOwGrenb2oqr5xOv0nuT5A+o
17 | xpkv6G/n3N/7zY4Q5Y7IXeZrjOIW/yCGSzcdOw9Pkj9JowgrVgXktd1j0D/yT+zX
18 | +KAPyqs1MN/Q2+s3teE3b0biByFq5BbbdCo+eRjViaUa6kq+zoWV0J1Fs2xDhGiE
19 | iSHz5JTV1QKBgQDmL1FAeYktER3egJB+QWrgXBLcFNMLWUK8BCLIVc7rckeMNpn/
20 | 25v89S80wjewuo6yY6MvbWhFw0ZgHOoy6XhWp1FFpN1hIYQvyLEN8dq81FZjimkT
21 | rFXQPJQSU4bpuIRFNWWm53bh6XlPSPz3Xy/tSgYwSwDiBpoV7JryGZ1DVQKBgCwj
22 | i5NaMn/9TQgZufV6r/vW1/NNfFgYfuDaw8OTlikiqgildJ2XpSR40HFWse1P4qnt
23 | AENMyxqWtA/5rIR21w7hHtOO9CF7fprBjqK6TSS08gTAlaB82BMel5FU40gYEn3B
24 | PQuK8+Io04p4045ukDx+3BWUGjHq27J/N9huXFqZAoGBAOvSY9nn1ir5bQ1m4TeP
25 | xtMCkyxKxIHXzP13IYzjOstft8zwbQpmhDIC/9e1fdR3QbaSFo6AZcpu+HlvysCV
26 | +WXQ7eJFAnt6quQzV6IUFyZFAcvDS9xbL3PaLDyi7g7ARU/wOQPMOJrFFtmQ6Y64
27 | IfXgzYM+4CGybmRgXHjPD7G1
28 | -----END PRIVATE KEY-----
29 |
--------------------------------------------------------------------------------
/src/commands/filter_user.js:
--------------------------------------------------------------------------------
1 | import { bannedUsersContainer } from '../filters/users_filter'
2 |
3 | function addFilteredUser(message) {
4 | const { msg, mod, streamer } = message
5 | if (mod || streamer) {
6 | const userNames = msg.toLowerCase().split(' ')
7 | bannedUsersContainer.addBannedUsers(userNames)
8 | }
9 | return true
10 | }
11 | function removeFilteredUser(message) {
12 | const { msg, mod, streamer } = message
13 | if (mod || streamer) {
14 | const userNames = msg.toLowerCase().split(' ')
15 | bannedUsersContainer.removeBannedUsers(userNames)
16 | }
17 | return true
18 | }
19 |
20 | const filterUsers = {
21 | addFilteredUser,
22 | removeFilteredUser
23 | }
24 | export default filterUsers
25 |
--------------------------------------------------------------------------------
/src/commands/speak.js:
--------------------------------------------------------------------------------
1 | import getVariable, { TTS, TTS_ACCENT, TTS_INDEX } from '../lib/get_variable'
2 | import tts from '../lib/tts'
3 | import ttsConfigVault from '../lib/new_tts_config_vault'
4 |
5 | const ttsEnabled = getVariable(TTS)
6 | const ttsAccent = getVariable(TTS_ACCENT) || 'es-AR'
7 | // eslint-disable-next-line prefer-const
8 | let ttsIndex = Number(getVariable(TTS_INDEX))
9 | ttsIndex > 0 && (ttsIndex -= 1)
10 |
11 | // eslint-disable-next-line no-unused-vars
12 | const [ACCENT_OR_MODIFIER, VARIANT] = [0, 1]
13 |
14 | // const isAAccent = /^[a-zA-Z]{1,2}-[a-zA-Z]{1,2}$/g
15 |
16 | function isAlphabetCharacter(char) {
17 | return /^[a-zA-Z]$/.test(char)
18 | }
19 |
20 | function normalize(accent) {
21 | console.log(accent)
22 | const chars = accent.split('')
23 | if (
24 | chars.length === 5 &&
25 | chars.reduce(
26 | (prev, char, index) =>
27 | prev && (index === 2 ? char === '-' : isAlphabetCharacter(char)),
28 | true
29 | )
30 | ) {
31 | let [prev, post] = accent.split('-')
32 | prev = prev.toLowerCase()
33 | post = post.toUpperCase()
34 | return `${prev}-${post}`
35 | }
36 | return 'nt-VD'
37 | }
38 |
39 | function isAnAccent(toEvaluate) {
40 | const result = tts.isAValidVoice(toEvaluate)
41 | return result
42 | }
43 |
44 | /*
45 | function isAnModifier (toEvaluate) {
46 | return toEvaluate[0] === '-'
47 | }
48 | */
49 |
50 | const ACC = 0
51 | const VAR = 1
52 |
53 | function config(message) {
54 | const { msg, userName } = message
55 | const words = msg.split(' ').map((word) => word.trim())
56 | const acce = normalize(words[ACC])
57 | const vari = Math.ceil(Number(words[VAR])) || 1
58 | const valid = tts.isAValidVoice(acce) && tts.isAValidVariant(acce, vari)
59 | console.log(acce, vari, valid, userName)
60 | if (valid) {
61 | ttsConfigVault.setConfig(userName, acce, !isNaN(vari) ? vari : 1)
62 | }
63 | return true
64 | }
65 |
66 | function reset({ userName }) {
67 | ttsConfigVault.resetConfig(userName)
68 | return true
69 | }
70 |
71 | function speak(message) {
72 | // los uqe votaron que no, la tienen adentro - Sonny - 8/7/2024
73 | const { msg, userName } = message
74 |
75 | if (ttsEnabled) {
76 | const config = ttsConfigVault.getConfig(userName)
77 | let accent = config ? config.accent : ttsAccent
78 | let variant = config ? config.variant : ttsIndex || 1
79 | const words = msg
80 | .replace('!speak ', '')
81 | .split(' ')
82 | .map((word) => word.trim())
83 | if (isAnAccent(words[0])) {
84 | accent = normalize(String(words.splice(0, 1)))
85 | if (!Number.isNaN(Number(words[0]))) {
86 | variant = Number(words.splice(0, 1))
87 | }
88 | }
89 | message.speak = {
90 | toRead: words.join(' ').trim().replaceAll(':3', 'AliMoyi'),
91 | accent,
92 | variant
93 | }
94 | return false
95 | }
96 | }
97 |
98 | const TextToSpeak = {
99 | speak,
100 | reset,
101 | config
102 | }
103 |
104 | export default TextToSpeak
105 |
--------------------------------------------------------------------------------
/src/components/Message.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React, { useState } from 'react'
3 | import renderBadges from '../lib/render_badges'
4 | import getAvatar from '../lib/get_avatar'
5 | import './message.css'
6 | import getVariable, { DEFAULT_AVATAR } from '../lib/get_variable'
7 |
8 | const defaultAvatar = getVariable(DEFAULT_AVATAR)
9 |
10 | function _getOrnament(badges) {
11 | if (badges.includes('mod')) return 'from-twitch-mod to-twitch-mod_light'
12 | if (badges.includes('vip')) return 'from-twitch-vip to-twitch-vip_light'
13 | if (badges.includes('broadcaster'))
14 | return 'from-twitch-brd to-twitch-brd_light'
15 | if (badges.includes('subscriber'))
16 | return 'from-twitch-sub to-twitch-sub_light'
17 | return ' from-[#111] to-[#333]'
18 | }
19 |
20 | export default function Message({ message, i }) {
21 | const avatar = getAvatar(message.userId)
22 | const badges = renderBadges(message.badges)
23 | const [loaded, setLoaded] = useState(false)
24 | return (
25 | No Render
33 |
31 | {badges[0] && badges[0]('absolute top-2 left-11')}
32 |
84 | )
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/StyleMessage.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/prop-types */
2 | import React, { useState } from 'react'
3 | import renderBadges from '../lib/render_badges'
4 | import getAvatar from '../lib/get_avatar'
5 | import './message.css'
6 | import getVariable, { DEFAULT_AVATAR } from '../lib/get_variable'
7 |
8 | const defaultAvatar = getVariable(DEFAULT_AVATAR)
9 |
10 | function _getOrnament(badges) {
11 | if (badges.includes('mod')) return 'moderator'
12 | if (badges.includes('vip')) return 'vip'
13 | if (badges.includes('broadcaster')) return 'broadcaster'
14 | if (badges.includes('subscriber')) return 'subscriber'
15 | return 'viewer'
16 | }
17 |
18 | export default function StyledMessage({ message, i }) {
19 | const avatar = getAvatar(message.userId)
20 | const badges = renderBadges(message.badges)
21 | const [loaded, setLoaded] = useState(false)
22 | return (
23 |
33 |
64 |
38 | 
{
42 | setLoaded(true)
43 | }}
44 | />
45 | 
50 |
51 |
61 | {message.displayName}
62 |
63 |
69 |
83 |
72 |
82 |
73 | {badges.slice(1, badges.length).map((badge, i) => badge('ml-1', i))}
74 |
75 |
81 |
28 | {badges[0] && badges[0]('message_userBadge-primary', 0, true)}
29 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/src/components/message.css:
--------------------------------------------------------------------------------
1 | .newMessage {
2 | animation-name: newMessage;
3 | animation-duration: 250ms;
4 | animation-iteration-count: 1;
5 | }
6 |
7 | @keyframes newMessage {
8 | 0% {
9 | opacity: 0;
10 | }
11 | 100% {
12 | opacity: 1;
13 | }
14 | }
15 |
16 | .dieingMessage {
17 | animation-name: newMessage;
18 | animation-duration: 300ms;
19 | animation-iteration-count: 1;
20 | }
21 |
22 | @keyframes dieingMessage {
23 | 0% {
24 | opacity: 1;
25 | }
26 | 100% {
27 | opacity: 0;
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/filters/commands_filter.js:
--------------------------------------------------------------------------------
1 | import { commandsContainer } from '../lib/containers.js'
2 | import TextToSpeak from '../commands/speak.js'
3 | import filterUsers from '../commands/filter_user.js'
4 | import getVariable, { CHAR_COMMANDS } from '../lib/get_variable.js'
5 |
6 | const charCommands = getVariable(CHAR_COMMANDS)?.split(',') || []
7 |
8 | commandsContainer.addCommand('!speak', TextToSpeak.speak)
9 | commandsContainer.addCommand('!speak -config', TextToSpeak.config)
10 | commandsContainer.addCommand('!speak -reset', TextToSpeak.reset)
11 | commandsContainer.addCommand('!iacaiate', filterUsers.addFilteredUser)
12 | commandsContainer.addCommand('!iahabla', filterUsers.removeFilteredUser)
13 |
14 | function isA3thPartyCommand(msg) {
15 | return !msg.includes('!hit @jp__is') && charCommands.includes(msg[0])
16 | } // Pablo (A.K.A. e4yttuh) was here
17 |
18 | export default function commandsFilter(message) {
19 | const { msg, isABot } = message
20 | const isAValidMessage = typeof msg === 'string'
21 | let isACommand = false
22 | if (isAValidMessage && !isABot) {
23 | const command = commandsContainer.foundCommand(msg)
24 | isACommand =
25 | (command && command(message)) ||
26 | (command ? false : isA3thPartyCommand(msg))
27 | }
28 | return isACommand
29 | }
30 |
--------------------------------------------------------------------------------
/src/filters/is_not_a_message.js:
--------------------------------------------------------------------------------
1 | export default function isNotAMessage({ msg }) {
2 | return !msg
3 | }
4 |
--------------------------------------------------------------------------------
/src/filters/users_filter.js:
--------------------------------------------------------------------------------
1 | import getVariable, { BOTS, CHANNEL } from '../lib/get_variable'
2 |
3 | const channel = getVariable(CHANNEL)
4 |
5 | const userDefinedBots = getVariable(BOTS)?.split(',')
6 | const defaultBots = ['nightbot', 'streamelements', 'el_pato_bot', 'afordibot']
7 |
8 | const bots = userDefinedBots
9 | ? [...userDefinedBots, ...defaultBots]
10 | : defaultBots
11 |
12 | class BannedUsersContainer {
13 | #bannedUsers = []
14 | constructor(users = []) {
15 | this.#bannedUsers.push(...users)
16 | }
17 |
18 | get bannedUsers() {
19 | return this.#bannedUsers
20 | }
21 |
22 | set bannedUsers(users) {
23 | this.#bannedUsers = users
24 | }
25 |
26 | addBannedUser(user) {
27 | if (!this.bannedUsers.includes(user) && user !== channel) {
28 | this.bannedUsers.push(user)
29 | }
30 | }
31 |
32 | addBannedUsers(users) {
33 | const filteredUsers = users.filter(
34 | (user) => !this.#bannedUsers.includes(user) && user !== channel
35 | )
36 | if (filteredUsers.length > 0) {
37 | this.bannedUsers.push(...filteredUsers)
38 | }
39 | }
40 |
41 | removeBannedUser(user) {
42 | if (!bots.includes(user)) {
43 | const index = this.bannedUsers.indexOf(user)
44 | if (index > -1) {
45 | this.bannedUsers.splice(index, 1)
46 | }
47 | }
48 | }
49 |
50 | removeBannedUsers(users) {
51 | const filteredUsers = users.filter((user) => !bots.includes(user))
52 | if (filteredUsers.length > 0) {
53 | this.bannedUsers = this.bannedUsers.filter(
54 | (user) => !filteredUsers.includes(user)
55 | )
56 | }
57 | }
58 | }
59 |
60 | export const bannedUsersContainer = new BannedUsersContainer(bots)
61 |
62 | export default function usersFilter(msg) {
63 | if (bannedUsersContainer.bannedUsers.includes(msg.userName)) {
64 | msg.isABot = true
65 | return true
66 | }
67 | return false
68 | }
69 |
--------------------------------------------------------------------------------
/src/hooks/use_connect_websocket_to_twitch_irc.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 | import useWebSocket, { ReadyState } from 'react-use-websocket'
3 | import getVariable, {
4 | ACCESS_TOKEN,
5 | CHANNEL,
6 | CLIENT_ID,
7 | REDIRECT_URI
8 | } from '../lib/get_variable'
9 |
10 | export default function useConnectWebSocketToTwitchIRC() {
11 | const redirectUri = getVariable(REDIRECT_URI)
12 | const accessToken = getVariable(ACCESS_TOKEN)
13 | const clientId = getVariable(CLIENT_ID)
14 | const channel = getVariable(CHANNEL)
15 |
16 | /*
17 | Si no tengo el token para acceder al contenido del chat abro el OAuth de
18 | twitch para conseguirlo. Espero que por param de la URL me llegue el
19 | token de acceso gracias OAuth de Twitch si no lo tengo espero recibir el
20 | param CLientID o tenerlo ya el LocalStorage (registrado ya como APP en
21 | la consola de Twitch) para ejecutar el OAuth y recibir el Token
22 | */
23 |
24 | if (accessToken === undefined) {
25 | const URL = `https://id.twitch.tv/oauth2/authorize?response_type=token&client_id=${clientId}&redirect_uri=${redirectUri}&scope=chat%3Aread`
26 |
27 | if ('navigation' in window) {
28 | // eslint-disable-next-line no-undef
29 | navigation.navigate(URL)
30 | } else {
31 | window.location.href = URL
32 | }
33 | }
34 |
35 | /*
36 | Una vez tengo el Token de acceso a twitch abro un websocket para
37 | conectarme al IRC, autenticarme y empezar a recibir los mensajes.
38 | */
39 | const [logged, setLogged] = useState(false)
40 | const webSocket = useWebSocket(
41 | redirectUri
42 | ? 'wss://irc-ws.chat.twitch.tv:443'
43 | : 'ws://irc-ws.chat.twitch.tv:80',
44 | {
45 | share: true,
46 | shouldReconnect: () => true
47 | }
48 | )
49 | const { sendMessage, lastMessage, readyState } = webSocket
50 |
51 | useEffect(() => {
52 | if (accessToken && !logged && readyState === ReadyState.OPEN) {
53 | sendMessage(
54 | 'CAP REQ :twitch.tv/membership twitch.tv/tags twitch.tv/commands'
55 | )
56 | sendMessage(`PASS oauth:${accessToken}`)
57 | sendMessage('NICK ChrisVDev_OBS-Chat')
58 | sendMessage(`JOIN #${channel}`)
59 | setLogged(true)
60 | }
61 | if (readyState !== ReadyState.OPEN) setLogged(false)
62 | }, [logged, webSocket])
63 |
64 | /*
65 | Una vez autenticado separo los mensajes del chat de el resto de la info
66 | que me pasa el IRC. Importante -> de paso contesto al PING para que Twitch
67 | no me cierre la conexión.
68 | */
69 | const [message, setMessage] = useState('') // ultimo mensaje
70 | useEffect(() => {
71 | if (readyState === ReadyState.OPEN && logged) {
72 | lastMessage &&
73 | lastMessage.data.includes('PRIVMSG') &&
74 | // PRIVMSG son los mensajes de los usuarios en el canal
75 | setMessage(lastMessage.data) // guardo el ultimo mensaje
76 | lastMessage &&
77 | lastMessage.data.includes('PING') &&
78 | sendMessage('PONG :tmi.twitch.tv')
79 | }
80 | }, [lastMessage])
81 |
82 | return message
83 | /*
84 | trigereo una nueva actualización del componente que lo consuma solo si hay un
85 | mensaje nuevo
86 | */
87 | }
88 |
--------------------------------------------------------------------------------
/src/hooks/use_message_logic.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | // eslint-disable-next-line max-len
3 | import useConnectWebSocketToTwitchIRC from './use_connect_websocket_to_twitch_irc.js'
4 | import messagePreProcessor from '../lib/message_pre_processor.js'
5 | import messageFilters from '../lib/massage_filters.js'
6 | import messageToRenderProcessor from '../lib/message_to_render_processor.js'
7 | import usersFilter from '../filters/users_filter.js'
8 | import commandsFilter from '../filters/commands_filter.js'
9 | import isNotAMessage from '../filters/is_not_a_message.js'
10 | import ttsAlwaysOn from '../middlewares/tts_always_on.js'
11 | import antiGoose from '../middlewares/anti_ganzos.js'
12 | import action from '../middlewares/action.js'
13 | import usernamePlacer from '../middlewares/username_placer.js'
14 | import renderCommands from '../middlewares/render_commands.js'
15 | import getMessageEmojis from '../middlewares/get_message_emojis.js'
16 | import linkRemover from '../middlewares/link_remover.js'
17 | import longWordsRemover from '../middlewares/long_words_remover.js'
18 | import preloadUserData from '../middlewares/avatar_placer.js'
19 | import messageCleaner from '../middlewares/message_cleaner.js'
20 | import speakMessageRender from '../middlewares/speak_message_render.js'
21 | import filterHTMLTags from '../middlewares/filter_html_tags.js'
22 | import placeEmojis from '../middlewares/place_emojis.js'
23 | import placeHTML from '../middlewares/place_html.js'
24 | import placeHearts from '../middlewares/place_hearts.js'
25 | import patoBotMiddleware from '../middlewares/pato_bot_middleware.js'
26 | import toTTS from '../middlewares/to_tts.js'
27 | import getVariable, {
28 | CHANNEL,
29 | HTMLI,
30 | PATO_BOT,
31 | TTS_ALWAYS_ON
32 | } from '../lib/get_variable.js'
33 |
34 | const channel = getVariable(CHANNEL)
35 | const patoBot = getVariable(PATO_BOT)
36 | const htmli = getVariable(HTMLI)
37 | const TTSAlwaysOn = getVariable(TTS_ALWAYS_ON)
38 |
39 | messagePreProcessor.setChannel(channel)
40 | messagePreProcessor.useMiddleware(getMessageEmojis)
41 | messagePreProcessor.useMiddleware(preloadUserData)
42 | messagePreProcessor.useMiddleware(linkRemover) // hay que arreglar
43 | messagePreProcessor.useMiddleware(longWordsRemover)
44 | messagePreProcessor.useMiddleware(antiGoose)
45 | messagePreProcessor.useMiddleware(usernamePlacer)
46 | messagePreProcessor.useMiddleware(action)
47 |
48 | messageFilters.addFilter(isNotAMessage)
49 | messageFilters.addFilter(usersFilter)
50 | messageFilters.addFilter(commandsFilter)
51 |
52 | messageToRenderProcessor.useMiddleware(ttsAlwaysOn)
53 | messageToRenderProcessor.useMiddleware(renderCommands)
54 | messageToRenderProcessor.useMiddleware(messageCleaner)
55 | !TTSAlwaysOn && messageToRenderProcessor.useMiddleware(speakMessageRender)
56 | messageToRenderProcessor.useMiddleware(filterHTMLTags)
57 | messageToRenderProcessor.useMiddleware(placeHearts)
58 | messageToRenderProcessor.useMiddleware(placeEmojis)
59 | htmli && messageToRenderProcessor.useMiddleware(placeHTML)
60 | patoBot && messageToRenderProcessor.useMiddleware(patoBotMiddleware)
61 | messageToRenderProcessor.useMiddleware(toTTS)
62 |
63 | export default function useMessageLogic() {
64 | const message = useConnectWebSocketToTwitchIRC(channel)
65 | const [messageToRender, setMessageToRender] = useState({})
66 | useEffect(() => {
67 | const income = messagePreProcessor.processMessage(message)
68 |
69 | if (messageFilters.mustBeFiltered(income)) {
70 | setMessageToRender(messageToRenderProcessor.processMessage(income))
71 | }
72 | }, [message])
73 | return messageToRender
74 | }
75 |
--------------------------------------------------------------------------------
/src/hooks/use_message_queue.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useCallback } from 'react'
2 | import useMessageLogic from './use_message_logic'
3 |
4 | export default function useMessageQueue() {
5 | const message = useMessageLogic()
6 | const [queue, setQueue] = useState([])
7 | const [, setInter] = useState(0)
8 | const onRefresh = useCallback(
9 | (cue) =>
10 | cue.map((message) =>
11 | message.ttl === 1
12 | ? { ...message, dieing: true }
13 | : { ...message, new: false }
14 | ),
15 | []
16 | )
17 | useEffect(() => {
18 | message.msg &&
19 | setQueue((lastQueue) => [
20 | ...lastQueue,
21 | { ...message, ttl: 10, new: true }
22 | ])
23 | }, [message])
24 | useEffect(() => {
25 | setInter(
26 | setInterval(() => {
27 | setQueue((lastQueue) =>
28 | onRefresh(
29 | lastQueue
30 | .map((message) => ({ ...message, ttl: message.ttl - 1 }))
31 | .filter((message) => message.ttl > 0)
32 | )
33 | )
34 | }, 2000)
35 | )
36 | }, [])
37 | return queue
38 | }
39 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: Inter;
3 | font-style: normal;
4 | font-weight: 400;
5 | src:
6 | url(./fonts/inter-latin-variable-wghtOnly-normal.woff2)
7 | format('woff2-variations'),
8 | url(./fonts/inter-latin-400-normal.woff2) format('woff2'),
9 | url(./fonts/inter-latin-400-normal.woff) format('woff');
10 | unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da,
11 | u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215,
12 | u+feff, u+fffd;
13 | }
14 | @tailwind base;
15 | @tailwind components;
16 | @tailwind utilities;
17 |
18 | body {
19 | background-color: #2d2d2d;
20 | }
21 |
--------------------------------------------------------------------------------
/src/lib/channel_resources.js:
--------------------------------------------------------------------------------
1 | import getVariable, { CHANNEL, ACCESS_TOKEN, CLIENT_ID } from './get_variable'
2 | import axios from 'axios'
3 |
4 | const channel = getVariable(CHANNEL)
5 | const accessToken = getVariable(ACCESS_TOKEN)
6 | const clientId = getVariable(CLIENT_ID)
7 |
8 | const config = {
9 | headers: {
10 | Authorization: `Bearer ${accessToken}`,
11 | 'Client-Id': clientId
12 | }
13 | }
14 |
15 | class ChannelResources {
16 | constructor() {
17 | this.channelData = {}
18 | this.badges = []
19 | axios
20 | .get(`https://api.twitch.tv/helix/users?login=${channel}`, config)
21 | .then(({ data }) => {
22 | this.channelData = data.data[0]
23 | // eslint-disable-next-line max-len
24 | axios
25 | .get(
26 | `https://api.twitch.tv/helix/chat/badges?broadcaster_id=${this.channelData.id}`,
27 | config
28 | )
29 | .then(({ data }) => {
30 | this.badges = [
31 | ...this.badges,
32 | ...data.data.map(({ set_id: setId, versions }) => ({
33 | id: setId,
34 | url: versions[0].image_url_2x
35 | }))
36 | ]
37 | })
38 | })
39 | axios
40 | .get(`https://api.twitch.tv/helix/chat/badges/global`, config)
41 | .then(({ data }) => {
42 | this.badges = [
43 | ...this.badges,
44 | ...data.data.map(({ set_id: setId, versions }) => ({
45 | id: setId,
46 | url: versions[0].image_url_2x
47 | }))
48 | ]
49 | })
50 | }
51 | }
52 |
53 | const channelResources = new ChannelResources()
54 |
55 | export default channelResources
56 |
--------------------------------------------------------------------------------
/src/lib/commands_container.js:
--------------------------------------------------------------------------------
1 | class ComManzContainer {
2 | #commands = {}
3 | #EXEC = Symbol('exec')
4 | #splitKeys(message) {
5 | return message.trim().split(/\s+/)
6 | }
7 |
8 | addCommand(command, cb) {
9 | const keys = this.#splitKeys(command)
10 | let lastRef = this.#commands
11 | keys.forEach((key) => {
12 | if (lastRef[key]) {
13 | lastRef = lastRef[key]
14 | } else {
15 | lastRef[key] = {}
16 | lastRef = lastRef[key]
17 | }
18 | })
19 | lastRef[this.#EXEC] = cb
20 | }
21 |
22 | foundCommand(message) {
23 | const keys = this.#splitKeys(message)
24 | let lastRef = this.#commands
25 | let keyIndex = 0
26 | const searchCommand = () => {
27 | if (lastRef) {
28 | if (lastRef[keys[keyIndex]]) {
29 | lastRef = lastRef[keys[keyIndex]]
30 | keyIndex++
31 | return searchCommand()
32 | }
33 | if (lastRef[this.#EXEC]) return lastRef[this.#EXEC]
34 | return false
35 | }
36 | }
37 | const command = searchCommand()
38 | return command
39 | ? (message) => {
40 | message.msg = keys.slice(keyIndex).join(' ')
41 | return command(message)
42 | }
43 | : false
44 | }
45 | }
46 |
47 | export default ComManzContainer
48 |
--------------------------------------------------------------------------------
/src/lib/commands_container_sonny.js:
--------------------------------------------------------------------------------
1 | // Based on the logic of a code madded from SonnyArg, THX <3
2 |
3 | class Trigger {
4 | constructor(pattern, priority, execute) {
5 | this.pattern = pattern
6 | this.execute = execute
7 | this.priority = priority
8 | }
9 |
10 | test(msg) {
11 | const result = /^!comando1\s+hola(?:\s+(.+))?$/i.test(msg)
12 | console.log(typeof msg, this.pattern instanceof RegExp, result)
13 | return result
14 | }
15 |
16 | getArgs(msg) {
17 | let ref, ref1
18 | const match = (ref = this.pattern.exec(msg)) != null ? ref : ['']
19 | const capture = (ref1 = match[1]) != null ? ref1 : ''
20 | if (!/\S/.test(capture)) {
21 | return []
22 | }
23 | return capture.split(/\s+/)
24 | }
25 | }
26 |
27 | function escapeRegex(string) {
28 | return string.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
29 | }
30 |
31 | function buildTrigger(command, execute) {
32 | let words
33 | words = command.split(' ')
34 | words = words.map((word) => escapeRegex(word))
35 | const regex = new RegExp('^!' + words.join('\\s+') + '(?:\\s+(.+))?$', 'i')
36 | console.log(regex)
37 | const priority = words.length
38 | return new Trigger(regex, priority, execute)
39 | }
40 |
41 | class CommandsContainer {
42 | #commands = []
43 | addCommand(command, cb) {
44 | this.#commands.push(buildTrigger(command, cb))
45 | this.#commands.sort(
46 | ({ priority: priorityA }, { priority: priorityB }) =>
47 | priorityB - priorityA
48 | )
49 | }
50 |
51 | matchCommand(message) {
52 | return this.#commands.find((trigger) => trigger.test(message))
53 | }
54 |
55 | executeIfFound(message) {
56 | const trigger = this.matchCommand(message)
57 | if (trigger && typeof trigger.execute === 'function')
58 | return trigger.execute(trigger.getArgs(message))
59 | return false
60 | }
61 | }
62 |
63 | export default CommandsContainer
64 |
--------------------------------------------------------------------------------
/src/lib/containers.js:
--------------------------------------------------------------------------------
1 | import ComManzContainer from './commands_container.js'
2 |
3 | export const commandsContainer = new ComManzContainer()
4 | export const renderCommandsContainer = new ComManzContainer()
5 |
--------------------------------------------------------------------------------
/src/lib/get_avatar.js:
--------------------------------------------------------------------------------
1 | import userDataStorage from './users_data_storage'
2 | import getVariable, { DEFAULT_AVATAR } from './get_variable'
3 |
4 | const defaultAvatar = getVariable(DEFAULT_AVATAR)
5 |
6 | export default function getAvatar(userId) {
7 | const avatar = userDataStorage
8 | .getUserData(userId)
9 | .profileImageUrl?.replaceAll('300', '70')
10 | return avatar
11 | ? avatar.includes('user-default-pictures')
12 | ? defaultAvatar
13 | : avatar
14 | : defaultAvatar
15 | }
16 |
--------------------------------------------------------------------------------
/src/lib/get_url_params.js:
--------------------------------------------------------------------------------
1 | export default function getURLParams() {
2 | const url = new URL(document.location.href.replace('#', '?'))
3 | const params = {}
4 | url.searchParams.forEach((value, name) => (params[name] = value))
5 | return params
6 | }
7 |
--------------------------------------------------------------------------------
/src/lib/get_variable.js:
--------------------------------------------------------------------------------
1 | import getURLParams from './get_url_params'
2 | const VARIABLES = 'variables'
3 |
4 | // config de twitch
5 | export const REDIRECT_URI = 'redirect_uri'
6 | export const SECRET = 'secret'
7 | export const CLIENT_ID = 'client_id'
8 | export const ACCESS_TOKEN = 'access_token'
9 | export const CHANNEL = 'channel'
10 |
11 | // estilos
12 | export const DEFAULT_AVATAR = 'default_avatar'
13 | export const STYLE = 'style'
14 |
15 | // funciones
16 | export const PATO_BOT = 'pato_bot'
17 | export const TTS = 'tts'
18 | export const TTS_INDEX = 'tts_index'
19 | export const TTS_ACCENT = 'tts_accent'
20 | export const TTS_ALWAYS_ON = 'tts_always_on'
21 | export const TTS_MENTIONS = 'tts_mentions'
22 | export const RENDER = 'render'
23 | export const BOTS = 'bots'
24 | export const HTMLI = 'htmli'
25 | export const CHAR_COMMANDS = 'char_commands'
26 |
27 | let variables = JSON.parse(localStorage.getItem(VARIABLES)) || {}
28 |
29 | variables = { ...variables, ...getURLParams() }
30 |
31 | Object.keys(variables).forEach((key) => {
32 | if (typeof variables[key] === 'string') {
33 | if (variables[key].toLowerCase() === 'true') variables[key] = true
34 | if (`${variables[key]}`.toLowerCase() === 'false') variables[key] = false
35 | }
36 | })
37 |
38 | typeof variables[TTS_INDEX] === 'string' &&
39 | (variables[TTS_INDEX] = Number(variables[TTS_INDEX]) || 1)
40 |
41 | localStorage.setItem(VARIABLES, JSON.stringify(variables))
42 |
43 | const env = {
44 | redirect_uri: import.meta.env.VITE_REDIRECT_URI || 'http://localhost:5173/',
45 | secret: import.meta.env.VITE_SECRET,
46 | client_id: import.meta.env.VITE_CLIENT_ID,
47 | access_token: import.meta.env.VITE_ACCESS_TOKEN,
48 | channel: import.meta.env.VITE_CHANNEL
49 | }
50 |
51 | variables[DEFAULT_AVATAR] ??= './assets/st-chrisvdev.gif'
52 |
53 | Object.keys(env).forEach((key) => {
54 | if (env[key]) variables[key] = env[key]
55 | })
56 |
57 | const activeByDefault = [TTS, PATO_BOT, RENDER]
58 |
59 | activeByDefault.forEach((key) => {
60 | if (variables[key] === undefined) variables[key] = true
61 | })
62 |
63 | export default function getVariable(variable) {
64 | return variables[variable]
65 | }
66 |
--------------------------------------------------------------------------------
/src/lib/massage_filters.js:
--------------------------------------------------------------------------------
1 | class MessageFilters {
2 | constructor() {
3 | this.filters = []
4 | }
5 |
6 | addFilter(cb) {
7 | this.filters.push(cb)
8 | }
9 |
10 | mustBeFiltered(message) {
11 | return !this.filters.reduce((prev, cb) => {
12 | const res = cb(message)
13 | return res || prev
14 | }, false)
15 | }
16 | }
17 |
18 | const messageFilters = new MessageFilters()
19 |
20 | export default messageFilters
21 |
--------------------------------------------------------------------------------
/src/lib/message_pre_processor.js:
--------------------------------------------------------------------------------
1 | function toCamelCase(key) {
2 | const words = key.split('-')
3 | if (words.length > 1) {
4 | for (let i = 1; i < words.length; i++)
5 | words[i] = words[i].replace(words[i][0], words[i][0].toUpperCase())
6 | return words.join('')
7 | }
8 | return key
9 | }
10 |
11 | function apiDecoupler(rawObjMsg) {
12 | return {
13 | msg: rawObjMsg.msg,
14 | badgeInfo: rawObjMsg['@badgeInfo'],
15 | badges: rawObjMsg.badges,
16 | clientNonce: rawObjMsg.clientNonce,
17 | color: rawObjMsg.color,
18 | displayName: rawObjMsg.displayName,
19 | emotes: rawObjMsg.emotes,
20 | firstMsg: rawObjMsg.firstMsg,
21 | flags: rawObjMsg.flags,
22 | id: rawObjMsg.id,
23 | mod: rawObjMsg.mod === '1',
24 | vip: rawObjMsg.vip,
25 | streamer: rawObjMsg.badges?.includes('broadcaster'),
26 | returningChatter: rawObjMsg.returningChatter,
27 | roomId: rawObjMsg.roomId,
28 | subscriber: rawObjMsg.subscriber,
29 | tmiSentTs: rawObjMsg.tmiSentTs,
30 | turbo: rawObjMsg.turbo,
31 | userId: rawObjMsg.userId,
32 | userType: rawObjMsg.userType,
33 | replyParentDisplayName: rawObjMsg.replyParentDisplayName,
34 | replyParentMsgBody: rawObjMsg.replyParentMsgBody,
35 | replyParentMsgId: rawObjMsg.replyParentMsgId,
36 | replyParentUserId: rawObjMsg.replyParentUserId,
37 | replyParentUserLogin: rawObjMsg.replyParentUserLogin,
38 | replyThreadParentMsgId: rawObjMsg.replyThreadParentMsgId,
39 | replyThreadParentUserLogin: rawObjMsg.replyThreadParentUserLogin,
40 | emoteOnly: rawObjMsg.emoteOnly
41 | }
42 | }
43 |
44 | class MessagePreProcessor {
45 | constructor() {
46 | this.middlewares = []
47 | this.channel = ''
48 | }
49 |
50 | _mkMsgObj = (rawMsg) => {
51 | const [data, msg] = rawMsg.split(`PRIVMSG #${this.channel} :`)
52 | const rawObjMsg = { msg }
53 | data.split(';').forEach((element) => {
54 | if (element) {
55 | const [key, value] = element.split('=')
56 | rawObjMsg[toCamelCase(key)] = value
57 | }
58 | })
59 | console.log(rawObjMsg)
60 | return apiDecoupler(rawObjMsg)
61 | }
62 |
63 | setChannel(channel) {
64 | this.channel = channel
65 | }
66 |
67 | useMiddleware(cb) {
68 | this.middlewares.push(cb)
69 | }
70 |
71 | processMessage(rawMessage) {
72 | let message = this._mkMsgObj(rawMessage)
73 | this.middlewares.forEach((cb) => {
74 | message = cb(message)
75 | })
76 | return message
77 | }
78 | }
79 |
80 | const messagePreProcessor = new MessagePreProcessor()
81 |
82 | export default messagePreProcessor
83 |
--------------------------------------------------------------------------------
/src/lib/message_to_render_processor.js:
--------------------------------------------------------------------------------
1 | class MessageToRenderProcessor {
2 | constructor() {
3 | this.middlewares = []
4 | }
5 |
6 | useMiddleware(cb) {
7 | this.middlewares.push(cb)
8 | }
9 |
10 | processMessage(rawMessage) {
11 | let message = rawMessage
12 | this.middlewares.forEach((cb) => {
13 | message = cb(message)
14 | })
15 | return message
16 | }
17 | }
18 |
19 | const messageToRenderProcessor = new MessageToRenderProcessor()
20 |
21 | export default messageToRenderProcessor
22 |
--------------------------------------------------------------------------------
/src/lib/new_tts_config_vault.js:
--------------------------------------------------------------------------------
1 | import tts from './tts.js'
2 |
3 | const VAULT = 'TTS'
4 |
5 | class TTSConfigVault {
6 | #vault
7 | #ls_outdated
8 | constructor() {
9 | this.#vault = JSON.parse(localStorage.getItem(VAULT))
10 | if (!this.#vault) {
11 | this.#vault = {}
12 | localStorage.setItem(VAULT, '{}')
13 | }
14 | this.#ls_outdated = false
15 | }
16 |
17 | getVault() {
18 | return this.#vault
19 | }
20 |
21 | #LSVaultListener(event) {
22 | console.log('se ha cambiado en LS')
23 | if (event.key === VAULT) {
24 | if (JSON.stringify(this.#vault) === event.newValue) {
25 | this.#ls_outdated = false
26 | window.removeEventListener('storage', this.#LSVaultListener)
27 | console.log('Memoria y LS son iguales')
28 | } else {
29 | localStorage.setItem(VAULT, JSON.stringify(this.#vault))
30 | console.log('Memoria y LS son diferentes')
31 | }
32 | this.#ls_outdated = false
33 | }
34 | }
35 |
36 | #lsIsOutdated() {
37 | console.log('se ha cambiado en memoria', this.#vault)
38 | if (!this.#ls_outdated)
39 | window.addEventListener('storage', this.#LSVaultListener)
40 | this.#ls_outdated = true
41 | localStorage.setItem(VAULT, JSON.stringify(this.#vault))
42 | }
43 |
44 | getConfig(userName) {
45 | if (this.getVault()[userName]) {
46 | return this.getVault()[userName]
47 | } else return null
48 | }
49 |
50 | setConfig(userName, accent, variant) {
51 | if (tts.isAValidVoice(accent)) {
52 | this.#vault[userName] = {
53 | accent,
54 | variant: tts.isAValidVariant(accent, variant) ? variant : 1
55 | }
56 | this.#lsIsOutdated()
57 | }
58 | }
59 |
60 | resetConfig(userName) {
61 | if (this.#vault[userName]) {
62 | this.#vault[userName] = undefined
63 | this.#ls_outdated = true
64 | }
65 |
66 | this.#lsIsOutdated()
67 | }
68 | }
69 |
70 | const ttsConfigVault = new TTSConfigVault()
71 |
72 | export default ttsConfigVault
73 |
--------------------------------------------------------------------------------
/src/lib/regex_dynamic.js:
--------------------------------------------------------------------------------
1 | // by sonnyARG 😎
2 |
3 | export default function regexDynamic(palabra) {
4 | if (typeof palabra !== 'string') return null
5 | let rgxLetras = ``
6 | ;[...palabra].forEach((letra) => {
7 | // eslint-disable-next-line no-useless-escape
8 | rgxLetras += `[\s]*` + letra
9 | })
10 | return new RegExp('(' + rgxLetras + ')', 'gi')
11 | }
12 |
--------------------------------------------------------------------------------
/src/lib/render_badges.js:
--------------------------------------------------------------------------------
1 | import { createElement } from 'react'
2 | import channelResources from './channel_resources'
3 |
4 | function getBadges(badges) {
5 | return badges.split(',').map((badge) => badge.split('/')[0])
6 | }
7 |
8 | const getBadge = (id) =>
9 | channelResources.badges.filter((badge) => badge.id === id)[0]
10 |
11 | const renderBadge = (id) =>
12 | getBadge(id)
13 | ? (className, key, noStyle) =>
14 | createElement(
15 | 'img',
16 | {
17 | key: `badges_${id}_${key}`,
18 | className: `${
19 | noStyle ? 'message_userBadge' : 'z-10 h-5 w-5'
20 | } ${className}`,
21 | src: `${getBadge(id).url}`,
22 | alt: `${id}`
23 | },
24 | null
25 | )
26 | : undefined
27 |
28 | export default function renderBadges(badgesStr) {
29 | const badges = getBadges(badgesStr)
30 | return badges.map((badge) => {
31 | return renderBadge(badge)
32 | })
33 | }
34 |
--------------------------------------------------------------------------------
/src/lib/render_emoji.js:
--------------------------------------------------------------------------------
1 | export default function renderEmoji(id) {
2 | // eslint-disable-next-line max-len
3 | return `
30 |
57 |
31 | {
35 | setLoaded(true)
36 | }}
37 | />
38 |
43 |
44 |
54 | {message.displayName}
55 |
56 |
58 |
73 |
59 |
72 |
60 | {badges
61 | .slice(1, badges.length)
62 | .map((badge, i) => badge('message_userBadge-others', i, true))}
63 |
64 |
71 | 
`
4 | }
5 |
--------------------------------------------------------------------------------
/src/lib/tts.js:
--------------------------------------------------------------------------------
1 | class TTS {
2 | #voices
3 | #onReady
4 | #ready
5 | #whenSinthReady
6 | constructor() {
7 | this.#voices = {}
8 | this.#onReady = []
9 | this.#ready = false
10 | this.#whenSinthReady = () => {
11 | speechSynthesis.getVoices().forEach((voice) => {
12 | const { lang } = voice
13 | if (lang.length === 5)
14 | this.#voices[lang]
15 | ? (this.#voices[lang] += 1)
16 | : (this.#voices[lang] = 1)
17 | this.#ready = true
18 | this.#onReady.forEach((cb) => {
19 | cb(this.#voices)
20 | })
21 | speechSynthesis.removeEventListener(
22 | 'voiceschanged',
23 | this.#whenSinthReady
24 | )
25 | })
26 | }
27 | speechSynthesis.addEventListener('voiceschanged', this.#whenSinthReady)
28 | }
29 |
30 | speak(msj, accent, variant) {
31 | const toSpeak = new SpeechSynthesisUtterance(msj)
32 | toSpeak.voice = this.#voices[accent]
33 | ? variant <= this.#voices[accent]
34 | ? speechSynthesis.getVoices().filter((voice) => voice.lang === accent)[
35 | variant - 1
36 | ]
37 | : speechSynthesis
38 | .getVoices()
39 | .filter((voice) => voice.lang === accent)[0]
40 | : speechSynthesis.getVoices()[0]
41 | speechSynthesis.speak(toSpeak)
42 | }
43 |
44 | getVoices() {
45 | return structuredClone(this.#voices)
46 | }
47 |
48 | whenReady(cb) {
49 | this.#ready ? cb(this.#voices) : this.#onReady.push(cb)
50 | }
51 |
52 | isAValidVoice(voice) {
53 | return Boolean(this.#voices[voice])
54 | }
55 |
56 | isAValidVariant(accent, variant) {
57 | if (this.isAValidVoice(accent)) {
58 | return variant <= this.#voices[accent] && variant > 0
59 | }
60 | return false
61 | }
62 | }
63 |
64 | const tts = new TTS()
65 |
66 | export default tts
67 |
--------------------------------------------------------------------------------
/src/lib/tts_config_vault.js:
--------------------------------------------------------------------------------
1 | /*
2 | Aquí estaba aprendiendo por primera vez lo que es una clase con métodos estáticos
3 | asi que me los puse a implementar por aprenderlos. No me juzgues, es por amor a
4 | incorporar conocimiento nuevo. Para que veas que se hacer Singletons mírate el
5 | TTS.js
6 | */
7 |
8 | import tts from './tts.js'
9 |
10 | const VAULT = 'TTS'
11 |
12 | export default class TTSConfigVault {
13 | static getVault() {
14 | let vault = JSON.parse(localStorage.getItem(VAULT))
15 | if (!vault) {
16 | vault = {}
17 | localStorage.setItem(VAULT, '{}')
18 | }
19 | return vault
20 | }
21 |
22 | static getConfig(userName) {
23 | if (this.getVault()[userName]) {
24 | return this.getVault()[userName]
25 | } else return null
26 | }
27 |
28 | static setConfig(userName, accent, variant) {
29 | if (tts.isAValidVoice(accent)) {
30 | const vault = this.getVault()
31 |
32 | vault[userName] = {
33 | accent,
34 | variant: tts.isAValidVariant(accent, variant) ? variant : 1
35 | }
36 | localStorage.setItem(VAULT, JSON.stringify(vault))
37 | }
38 | }
39 |
40 | static resetConfig(userName) {
41 | if (this.getVault()[userName]) {
42 | const vault = this.getVault()
43 | vault[userName] = undefined
44 | localStorage.setItem(VAULT, JSON.stringify(vault))
45 | }
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/src/lib/users_data_storage.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import getVariable, { ACCESS_TOKEN, CLIENT_ID } from './get_variable'
3 |
4 | const clientId = getVariable(CLIENT_ID)
5 | const accessToken = getVariable(ACCESS_TOKEN)
6 |
7 | function apiDecoupler(rawUserData) {
8 | return {
9 | id: rawUserData.id,
10 | login: rawUserData.login,
11 | displayName: rawUserData.display_name,
12 | type: rawUserData.type,
13 | broadcasterType: rawUserData.broadcaster_type,
14 | description: rawUserData.description,
15 | profileImageUrl: rawUserData.profile_image_url,
16 | offlineImageUrl: rawUserData.offline_image_url,
17 | viewCount: rawUserData.view_count,
18 | createdAt: rawUserData.created_at
19 | }
20 | }
21 |
22 | class UsersDataStorage {
23 | #storage
24 | constructor() {
25 | this.#storage = {}
26 | }
27 |
28 | getUserData(userId) {
29 | if (!this.#storage[userId]) {
30 | axios({
31 | url: `https://api.twitch.tv/helix/users?id=${userId}`,
32 | method: 'GET',
33 | headers: {
34 | Authorization: `Bearer ${accessToken}`,
35 | 'Client-Id': clientId
36 | }
37 | }).then((response) => {
38 | this.#storage[userId] = apiDecoupler(response.data.data[0])
39 | })
40 | return apiDecoupler({})
41 | }
42 | return this.#storage[userId]
43 | }
44 | }
45 |
46 | const userDataStorage = new UsersDataStorage()
47 |
48 | export default userDataStorage
49 |
--------------------------------------------------------------------------------
/src/main.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')).render(
7 |