Twitchat
v15.0.0
For developpers, Twitchat exposes an API to receive events and control some features remotely.
Read its documentation.
/search/announce message featureCreate a data/credentials/credentials.json file and set the following content after filling values :
{
"server_port": 3018,
"admin_ids": ["YOUR_TWITCH_USER_ID"],
"csrf_key": "",
"twitch_client_id": "",
"twitch_client_secret": "",
"twitch_redirect_uri": "http://localhost:8080/oauth",
"twitch_scopes": [
"chat:read+user:read:chat",
"chat:edit+user:write:chat",
"moderator:manage:announcements",
"moderator:manage:chat_messages",
"moderator:manage:shoutouts",
"whispers:read",
"user:manage:whispers",
"moderator:read:chatters",
"channel:read:redemptions",
"channel:manage:redemptions",
"channel:manage:polls",
"channel:manage:predictions",
"moderator:manage:chat_settings",
"channel:moderate",
"channel:manage:moderators",
"channel:manage:vips",
"channel:manage:raids",
"channel:manage:broadcast",
"channel:read:hype_train",
"channel:edit:commercial",
"channel:read:subscriptions",
"user:read:emotes",
"user:read:follows",
"moderator:read:followers",
"user:read:moderated_channels",
"user:read:blocked_users",
"user:manage:blocked_users",
"user:edit:broadcast",
"moderator:manage:banned_users",
"moderator:manage:automod",
"moderator:manage:shield_mode",
"moderator:manage:unban_requests",
"clips:edit",
"channel:read:ads",
"channel:manage:ads",
"moderator:manage:blocked_terms",
"moderator:manage:warnings",
"moderator:read:moderators",
"moderator:read:vips",
"moderator:read:suspicious_users",
"bits:read"
],
"spotify_client_id": "",
"spotify_client_secret": "",
"spotify_scopes": "user-read-currently-playing user-modify-playback-state playlist-read-private playlist-modify-public playlist-modify-private",
"spotify_redirect_uri": "http://localhost:8080/spotify/auth",
"patreon_client_id": "",
"patreon_client_secret": "",
"patreon_scopes": "identity campaigns campaigns.members w:campaigns.webhook",
"patreon_redirect_uri": "http://localhost:8080/patreon/auth",
"patreon_client_id_server": "",
"patreon_client_secret_server": "",
"patreon_redirect_uri_server": "http://localhost:3018/api/patreon/serverauth",
"patreon_webhook_secret": "",
"patreon_cipherKey":"", //64 chars
"tenor_secret": "",
"youtube_key": "path/to/key.json",
"youtube_scopes": ["https://www.googleapis.com/auth/youtube.readonly", "https://www.googleapis.com/auth/youtube.force-ssl"],
"google_key": "path/to/key.json",
"paypal_client_id":"",
"paypal_client_secret":"",
"donors_remote_api_secret": "",
"contact_mail": "",
"discord_client_id":"",
"discord_public_key":"",
"discord_bot_token":"",
"streamlabs_client_id":"",
"streamlabs_client_secret":"",
"streamlabs_redirect_uri":"",
"streamelements_client_id":"",
"streamelements_client_secret":"",
"tipeee_client_id":"",
"tipeee_client_secret":"",
"tipeee_redirect_uri":"http://localhost:8080/tipeee/auth",
"tiltify_client_id":"",
"tiltify_client_secret":"",
"tiltify_webhook_verify":"",
"tiltify_webhook_id":"",
"tiltify_redirect_uri":"http://localhost:8080/tiltify/auth",
"tiltify_scopes":"public webhooks:write",
"tiltify_api_path":"https://v5api.tiltify.com"
}Create a twitch application and fill in the client_id and client_secret values.
Write anything you want in the csrf_key field, it will be used to secure twitch authentication from CSRF attacks.
Configure the redirect URI of the twitch application to:
http://localhost:8080/oauth
(adapt with the proper port and domain if deploying online)
Set the same value to the redirect_uri property of the credentials.json file.
You can also create a spotify application and fill in the spotify spotify_client_id and spotify_client_secret
By default the server listens on port 3018, you can change it on credentials.json and src_front/utils/Config.ts.
This project has been coded with VSCode.
It is recommended to install these plugins:
Vue Plugin: https://marketplace.visualstudio.com/items?itemName=Vue.volar
I18n-ally Plugin: https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally
npm install
npm run dev
npm run build
node server/boostrap.js
All the following MUST be done on a seperate folder from the GIT project.
Compile the project and push the content of the server folder on your server root.
Next to this file, create a public folder and push the content of your local dist folder inside it.
Also add the credentials folder inside a data older at the root of the project.
Create an env.conf file, just write prod inside, and push it at the root of the project.
Install all the production dependencies and run the server.
Here is the expected file structure:
─ root
├─ node_modules/
├─ public/
├─ utils/
├─ data/
├─ credentials/
├─ controllers/
├─ bootstrap.js
├─ env.conf
Just create a new folder under the i18n folder with the ISO 639-1 code of the language.
Read the next section to know how to translate labels
To make localization as easy as possible, a dedicated interface has been made that lists all available categories and labels with the possibility to edit them.
Any update on this interface triggers a rebuild of the compiled file as well as an update on any Twitchat page opened on the same browser.
The interface is only accessible to adminitrators and can be found here:
localhost:8080/labels
To get admin rights you must set your twitch user ID under the admin_ids array in the credentials.json file.
If you need to add new labels, you'll have to edit JSON sources.
All label files can be found under i18n folder.
They are splitted by language then by sections.
Any new file or folder structure can be added to this.
These are all merged into static/labels.json during the build process.
Files can have any name but all labels within it must be under a single property that will be the base path to use the label. The property name is usually the same as the file's name.
Example:
─ en
├─ global.json
├─ home.json/
├─ triggers.json/
global.json example:
{
"global":{
"hello":"World"
}
}home.json example:
{
"home":{
"lorem":"ipsum dolor sit amet"
}
}This will output this JSON file:
{
"en":{
"global":{
"hello":"World"
},
"hello":{
"lorem":"ipsum dolor sit amet"
}
}
}Run the following command:
npm run streamdeck_package
The compiled plugin will be there streamdeck_plugin/fr.Twitchat.streamDeckPlugin.
