Twitch Clips Player

Twitch Clips Player Overlay

This grabs your Twitch clips and plays them one after the other in a loop. Keep your viewers entertained on your BRB or starting soon scenes.

FEATURES:

!clipso @teklynk to play a clip from a channel while the clips reel is playing. This will immediately play the clip from the channel and then continue on with the rest of the clips reel.
Control the clips from Twitch chat. !clipskip, !clippause, !clipplay, !clipreload. Limited to Mods and Streamer.
Show clips from channels that you follow. Grabs the most recent 700 channels that you follow.
Use a custom command to start the clips reel and restrict it to Mods only.
Type "!mycommand @teklynk @coolstreamer @gamer123 @tekbot" which will play the clips reel for only those channels.
Type "!mycommand" while the clips reel is playing to skip to the next clip.
Type "!mycommand stop" to stop the clips player.
Date Range option: This will grab a clip from within the last 5days, 10day, 30days... If no clips exist, then skip to the next channel.
Show clip details panel: This will display a panel in the lower third of the overlay that contains details about the clip. This can use variables:{channel},{title},{game},{creator_name},{created_at}.

In OBS, set the browser source to: "Shutdown source when not visible" and "Refresh browser when scene becomes active". This will prevent the clips player from playing in the background. It will also reload/refresh the clips player when the source becomes active.

Custom CSS (Copy and paste into the OBS browser source Custom CSS section and modify as needed. CSS Tutorial)

#container {
    display: block;
    padding: 4px;
    margin: 4px;
    text-align: center;
}

video {
    width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 10px;
}

#text-container {
    width: 100%;
    position: absolute;
    top: 10vw;
}

.title-text {
    font-family: Basic, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 5vw;
    word-wrap: break-word;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px #000;
}

#details-container {
    position: absolute;
    top: 36vw;
    background: #00000090;
    padding: 12px 24px 12px 24px;
    margin-right: 24px;
    border-radius: 0px 24px 24px 0px;
    width: auto;
    animation: fadeout 15s forwards;
}

#details-container .details-text {
    font-family: Basic, Helvetica, sans-serif;
    font-weight: bold;
    word-wrap: break-word;
    color: #fff;
    text-align: left;
    text-shadow: 2px 2px #000;
}

#details-container .details-text.item-0 {
    font-size: 3vw;
    font-weight: bold;
}

#details-container .details-text.item-1 {
    font-size: 2.5vw;
    font-weight: normal;
}

#details-container .details-text.item-2 {
    font-size: 2vw;
    font-weight: normal;
}

#details-container .details-text.item-3 {
    font-size: 1.5vw;
    font-weight: normal;
}