This is a Twitch Shout-Out generator and browser source overlay for OBS. This project uses TMI.js, JavaScript, HTML, and CSS. It is client-side code that can run locally (localhost) or on your own server.

NOTE: This project relies on a custom Twitch API Gateway server/service. You can host this service using Docker. Check out the project for more details. https://github.com/teklynk/twitch_api_public

• https://twitchshoutout.com
• https://twitch-shoutout.teklynk.com
• https://twitch-shoutout.teklynk.dev
• https://twitch-shoutout.pages.dev

• Clip Player: Plays a random or recent clip from the shouted-out channel.
• Queue System: Multiple shout-outs go into a queue and play sequentially.
• Fallback: If no clips match the filters (Date range/Featured), it falls back to the top most popular clips to ensure content plays.
• Chat Integration:
  • !watchclip: Play a specific clip link posted in chat.
  • !replayso: Replay the previous shout-out clip.
  • !stopclip: Immediately stop playback and reload the source (Mods/Streamer only).
• Auto-Shoutout: Automatically shout out streamers when they raid you (configurable min viewer count).
• Customization:
  • Date range filters for clips (e.g., last 30 days).
  • Prefer Featured clips.
  • Custom chat messages and overlay titles.
  • Clip details panel showing Game, Title, Creator, and Date.
  • CSS Theme options.

If you set Date Range AND Prefer featured clips, it will try to pull clips that are featured within the specified date range.

• Standard: !so @MrCoolStreamer or !so MrCoolStreamer
• Replay: !replayso, !soreplay, !clipreplay, !replayclip
• Stop: !stopclip, !sostop, !clipstop, !clipreload
• Watch: !watchclip <clip_url> or !watchclip to play a clip that was posted in chat.

(Note: The command trigger !so can be customized in the options)

1. Add a Browser Source in OBS.
2. Paste your generated URL.
3. Important: In the Browser Source properties:
   • Enable "Shutdown source when not visible".
   • Enable "Control audio via OBS".
   • Enable "Refresh browser when scene becomes active".
   • Set browser source window size to "1920x1080" and then resize/scale the browser source window.
4. Enable Browser Source Hardware Acceleration in OBS Settings -> Advanced for better performance.

This overlay requires a Twitch Access Token if you want it to send a shout-out message back into chat.

1. Generate a token here: https://twitchtokengenerator.com/
2. Select "Bot Chat Token".
3. Tip: If you want the response to come from your bot account, sign in to Twitch with that account before generating the token.

These parameters are generated by the configuration tool, but here is what they do:

Moving the clip details panel in OBS is quite straightforward. Since the overlay uses absolute positioning, you can easily override its location by adding a few lines of CSS to your browser source's Custom CSS field.

• In OBS, right-click your Twitch Clips Player browser source and select Properties.
• Scroll down to the Custom CSS text box.
• Paste one of the following snippets at the bottom of that box.

To move the panel to the Top-Right corner:

#details-container {
    top: 2vw !important;
    left: auto !important;
    right: 2vw !important;
}

To move the panel to the Bottom-Right corner:

#details-container {
    top: auto !important;
    bottom: 5vw !important;
    left: auto !important;
    right: 2vw !important;
}

To move the panel to the Bottom-Left corner:

#details-container {
    top: auto !important;
    bottom: 5vw !important;
    left: 2vw !important;
}

• The !important rule: Always include !important after your values. This ensures your custom settings override the built-in theme styles.
• Units (vw vs px): I recommend using vw (viewport width) units. This keeps the panel's position relative to the size of the video, so it stays in the same spot even if you resize the browser source in OBS.
• Fine-tuning: You can use decimal points (e.g., 42.5vw) for pixel-perfect placement!

You can run this project locally using Docker. A docker-compose.yml file is included.

docker-compose up -d --build

The project will be available at: http://localhost:5002

Stop and remove the container with:

docker-compose down