twitch-giphy

Read this in other languages: Portuguese

A Twitch chatbot that integrates the GIPHY's API to learn Typescript

Must Have

• - Interact with Twitch's chat
• - Capture a specific command from the users (everything that starts with !giphy)
• - Remove !giphy and take the remaining term
• - Send the remaining term to GIPHY
• - Return the first GIF from GIPHY'S API
• - Render the GIF on screen
• - Remove the GIF from screen 8 seconds later
• - Create a class in Typescript to deal with the chatbot/server
• - Allow other shortcuts to insert GIF on livestream (!giphy, !gif, #)
• - Modify GIF screen (Browser) to show the Username + Ballon HQ style around all GIF
• - Allow to determine different number of seconds for normal users and subscribers
• - Refactor to allow all streamers in the WORLD to make use of this WONDER of nature that REVOLVES Livestreams :)

Nice to have

• - Do a GIF row to make sure every GIFs will be displayed
• - Be able to set who can use the commands (everyone, only followers, only subs, VIPS, Mods etc.)
• - README in English
• - Automate a deploy to AWS (always available)
• - Implement X cooldown seconds to avoid FLOOD
• - Allow integration with other plataforms besides Twitch
• - Allow multiple commands (!gif, !giphy)
• - Allow define a PRICE to the command (BITs, Channel Points)

Configuring the Project

Configuring server

Before all, you need to config the API options from Twitch and Giphy.

Create a environment variables file (.env) indentical to file example and modify the informations according to the values below:

• TWITCH_USERNAME, your username or your bot's
• TWITCH_TOKEN, you can get from https://twitchapps.com/tmi/
• TWITCH_CHAT_CHANNEL, normally is the same as your username
• GIPHY_RATING, accept only the values 'y' | 'g' | 'pg' | 'pg-13' | 'r'
• GIPHY_TOKEN, you can get from https://developers.giphy.com/

With this config, when the chatbot be implemented on a service like aws, netlify or other plataform, it will be only necessary to define this values on the plataform.

Configuring exhibition

To customize the exhibition, go to file client/index.html and search for:

• It's not necessary to provide all the options, because they all have a default value

<script>
  window.addEventListener("load", () => {
    const options = {
      duration_default: 4, // Optional: value in seconds (default value is 4)
      duration_sub: 8, // Optional: value in seconds to subs (default value is 8)
      max_queue: 10, // Optional: quantidade máxima de gifs na fila (default value is 10)
      separator: ":", // Optional: separator between the user and the message (default value is :)
    };
    const twitch_giphy = new TwitchGiphy(options);
  });
</script>

Installing the dependencies

Open the terminal at the same directory that contains the file package.json, and execute:

npm i # short form to 'npm install'

Compiling the project

Open the terminal at the same directory that contains the file package.json, and execute:

npm run build

Executing the project

Open the terminal at the same directory that contains the file package.json, and execute:

npm start