codelinered/twitch-chatbot

Twitch Chatbot made with Vue Skeleton

1.16.0 2024-04-13 05:58 UTC

Requires

• php: ^7.4
• vrana/adminer: 4.6.2

MIT

• CodelineRed

• jquery
• bootstrap
• FontAwesome
• twitch
• docker
• gulp
• vue
• chatbot
• vue router
• twitch-tmi
• vue i18n

README

Visit screenshots for an inside look.

This application based on Vue Skeleton (1.x).

This software is meant to be installed on your local machine. If you want to install on a public web server, please secure public folder by .htpasswd or something similar.

Table of contents

• Included Third Party Code
• Install Guides
  • Install Production Build (Recommended)
  • Install Main/ Develop Build
  • Install with Docker (optional)
• chatbot.js
• Project Commands
• Ports
• chatbot.json
• gulpfile.json
• Chatbot Commands
  • Chatbot Commands for Streamer and Moderators
  • Custom Command Options for Streamer and Moderators
  • Bot List Options for Streamer and Moderators
• Web UI Features
  • Chat
  • Commands
  • Custom Commands
  • Counter
  • Playlist
  • Poll
  • Raffle
  • Bots
  • Statistics
• import-videos-folder.js
• migration.js
• Localization
• Links
• Audio Files
• Known Issues

Included

• jQuery 3
• Bootstrap 4
• Font Awesome 5
• LazyLoad 17
• CSS User Agent 2
• Moment 2
• Datatables 1
• Sqlite3 5
• Vue 2
• Vue Router 3
• Vue i18n 8
• Vue Datetime Picker 2
• Vue SFC 1

Install Production Build (Recommended)

Required

• Node.js >= 12.20
• npm npm i npm@latest -g

Open console on your OS and navigate to the place where you want to install the project.

With Composer

php composer create-project --ignore-platform-reqs --no-dev codelinered/twitch-chatbot twitch-chatbot "dev-production"
cd twitch-chatbot
npm i --only=prod

Add username, tmiToken, your channel and other channels to src/app/chatbot.json

node migration.js
node chatbot.js

With GIT

git clone https://github.com/CodelineRed/twitch-chatbot.git
cd twitch-chatbot
git checkout production
npm i --only=prod

Add username, tmiToken, your channel and other channels to src/app/chatbot.json

node migration.js
node chatbot.js

With ZIP

Unix

wget -O tcb-prod.zip https://github.com/CodelineRed/twitch-chatbot/archive/production.zip
unzip tcb-prod.zip

Windows 10+

curl -L -o tcb-prod.zip https://github.com/CodelineRed/twitch-chatbot/archive/production.zip
tar -xf tcb-prod.zip

All OS

cd twitch-chatbot-production
npm i --only=prod

Add username, tmiToken, your channel and other channels to src/app/chatbot.json

node migration.js
node chatbot.js

Generate tmiToken and click on "Connect".
If you need PHP, you have to go to Install with Docker.

Install Main/ Develop Build

Required

• Node.js >= 12.20
• npm npm i npm@latest -g
• gulp-cli npm i gulp-cli@latest -g

Open 2 consoles on your OS and navigate to the place where you want to install the project.

With Composer

php composer create-project --ignore-platform-reqs codelinered/twitch-chatbot twitch-chatbot
cd twitch-chatbot
npm i
gulp build

Add username, tmiToken, your channel and other channels to src/app/chatbot.json

node migration.js
node chatbot.js

in 2nd console

gulp

With GIT

git clone https://github.com/CodelineRed/twitch-chatbot.git
cd twitch-chatbot
git checkout main
npm i
gulp build

Add username, tmiToken, your channel and other channels to src/app/chatbot.json

node migration.js
node chatbot.js

in 2nd console

gulp

With ZIP

Unix

wget -O tcb-main.zip https://github.com/CodelineRed/twitch-chatbot/archive/main.zip
unzip tcb-main.zip

Windows 10+

curl -L -o tcb-main.zip https://github.com/CodelineRed/twitch-chatbot/archive/main.zip
tar -xf tcb-main.zip

All OS

cd twitch-chatbot-main
npm i
gulp build

Add username, tmiToken, your channel and other channels to src/app/chatbot.json

node migration.js
node chatbot.js

in 2nd console

gulp

Generate tmiToken and click on "Connect".
Open localhost:3000 for Web UI.

Install with Docker (optional)

Required

• Docker
• Node.js >= 12.20
• npm npm i npm@latest -g

Open console on your OS and navigate to the unzipped or cloned app folder.

Unix

systemctl docker start
docker-compose up -d
docker run --rm --interactive --tty --volume $PWD:/app composer install --no-dev
docker exec -ti twitch-chatbot php /var/www/vendor/vrana/adminer/compile.php
-- Ignore error messages --
mv adminer-4.6.2.php ./adminer

Windows 10+

"c:\path\to\Docker Desktop.exe"
docker-compose up -d
docker run --rm --interactive --tty --volume %cd%:/app composer install --no-dev
docker exec -ti twitch-chatbot php /var/www/vendor/vrana/adminer/compile.php
-- Ignore error messages --
move adminer-4.6.2.php ./adminer

All OS

$ npm i
$ gulp build
$ node migration.js
$ node chatbot.js

chatbot.js Options

Project Commands

Ports

chatbot.json

gulpfile.json

Chatbot Commands

Chatbot Commands for Streamer and Moderators

Custom Command Options for Streamer and Moderators

Bot List Options for Streamer and Moderators

Web UI Features

Chat

• Timestamp
• Badges
• Custom User Color
• "/me" Messages in full color and italic style
• Cheers
• Subs, Resubs, Sub Gifts (random and specific), Gift Upgrades
• Bans, Timeouts, Deletes
• Now Hosting, Hosted By, Raided By, Unhost
• Clickable Links
• Twitch Emotes
• BetterTTV Emotes
• FrankerFaceZ Emotes
• Popout URL /channel/[channel]/chat to use browser source in OBS (No pixel recommendation)

Commands

• Cooldown
• Active State
• Last Execution Time

Custom Commands

• Add Command (only in chat)
• Remove Command
• Toggle Command
• Update Command (only in chat)

Counter

• Popout URL /channel/[channel]/counter to use browser source in OBS (Pixel recommendation: 400x400px)

Playlist

• Play Local MP4 files with localhost:3060 domain. (See docker-compose.videos-folder.yml)
• Play Twitch Clips and Videos (past broadcasts, highlights and video uploads)
• Play YouTube Videos
• Add Video
• Edit Video
• Skip Videos
• Move Videos
• Remove Video
• Remove Played Videos
• Remove Skipped Videos
• Add Playlist
• All Playlists
• Edit Playlist
• Switch Playlist
• Merge Playlists
• Remove Playlist
• Reset Playlist
• Clear Playlist
• playlistInfo Command
• Popout URL /channel/[channel]/player to use browser source in OBS (Pixel recommendation: 1920x1080px)
• Video name overlay in player
• Autofill video name, sub name and duration (Depence on videosFolder, youtubeToken and clientIdToken settings)
• Change stream title and / or game dynamic (If at least one Twitch account is connected to "Insanity Meets - Chatbot" App on Twitch)

Autofill

¹ example_video-2020.mp4 parsed to Example Video - 2020

Poll

• Start Poll
• Close Poll
• Remove Poll
• Copy Poll to Form
• All Polls Modal
• Announce Poll to Chat Button
• Result to Chat Button
• Animate Winner (If multiple options are equal than a random winner will be picked)
• Play Audio for Winner (Audio is only played in popout window)
• Play Audio loop for Poll (Audio is only played in popout window)
• Announce Winner to Chat
• Multiple Choice Yes/No
• Combine Poll with Raffle
• Start Datetime
• End Datetime
• Datime Picker
• Popout URL /channel/[channel]/poll to use browser source in OBS (Pixel recommendation: 1000x563px by max. 6 options)

Raffle

• Start Raffle
• Close Raffle
• Remove Raffle
• Copy Raffle to Form
• All Raffles Modal
• Announce Raffle to Chat Button
• Result to Chat Button
• Animate Winner
• Play Audio for Winner (Audio is only played in popout window)
• Play Audio loop for Poll (Audio is only played in popout window)
• Announce Winner to Chat
• Custom Keyword
• Multiplicators
• Start Datetime
• End Datetime
• Datime Picker
• Popout URL /channel/[channel]/raffle to use browser source in OBS (Pixel recommendation: 1000x563px)

Bots

• Own badge in Chat
• Preset of 5 Bots (Mod4YouBot, Moobot, Nightbot, StreamElements, Streamlabs)
• Bot autofilling with BetterTTV API

Statistics

• Display Viewer Count as Chart
• Top 15 Emotes All
• Top 15 Twitch Emotes
• Top 15 BTTV Emotes
• Top 15 FFZ Emotes
• Top 15 Chatters
• Top 15 Hashtags
• Top 15 Commands
• Amount of Subs
• Amount of New Subs
• Amount of New Paid Subs
• Amount of New Prime Subs
• Amount of Gifted Directly Subs
• Amount of Gifted Random Subs
• Amount of Resubs
• Amount of Paid Resubs
• Amount of Prime Resubs
• Amount of Purges
• Amount of Deleted Messages
• Amount of Timeout Meassages
• Amount of Timeout Users
• Amount of Banned Users
• Amount of New Users
• Amount of All Users
• Amount of Chat Messages
• Amount of Used Emotes
• Amount of Cheers
• Amount of Bits
• Viewer Minimum
• Viewer Maximum
• Viewer Average

import-videos-folder.js Options

Example execution: node import-videos-folder.js -c CodelineRed

Import Requirements:

• videosFolder in chatbot.json points to existing folder
• each folder under videosFolder corresponds to a playlist
• only MP4 files are allowed

The Script only imports videos which are not in the database.

migration.js Options

Example execution: node migration.js -d up

Localization

• Web UI: i18n-locales.js
• Web UI: langswitch.vue
• Node: locales.js

Links

• Twitch Messaging Interface
• Twitch TMI Token
• Twitch API Token
• Twitch API Reference
• YouTube API Token
• BetterTTV API
• FrankerFaceZ API
• Twitch Clip API
• Twitch Clip Embed
• Twitch Video Embed
• ESLint Js Rules
• ESLint Vue Rules
• ESLint Import Rules
• Sass Lint Rules
• Vue SFC
• Path to RegExp
• Moment Parsing (Date Format)
• SCSS Confetti

Audio Files

• Airy by CodelineRed
• Ambi EP by CodelineRed
• Big Clap
• Brassy by CodelineRed
• C-Space by CodelineRed
• Cheering and Clapping
• Ensemble by CodelineRed
• Fan Fare 1
• Fan Fare 2
• Fan Fare 3
• Freedom by Dracon
• Hope by Dracon
• Memory Palace by Dracon
• Peace by Dracon
• Valley by Dracon
• Voice of Doubt by Dracon
• Winner Deep Voice
• Winner Female Voice
• Winner Robot Voice

Known Issues

• Sometimes user are not inserted in channel_user_join. This is under investigation.
• Emotes in Chat component can flicker after new message was added
• An Emoji followed by a Twitch emote (e.g. 🧡 CoolCat) is wrong interpreted by emote.encodeTwitch()
  • The API sends a wrong userstate.emotes object