Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple script to modify a Twitch channel so the video will be on top and the chat on bottom, useful for vertical monitor setup. Currently only for theater mode.
// ==UserScript==
// @name Twitch bottom chat
// @namespace kyuucr-twitch-bottom-chat
// @description Set video top and chat on bottom, useful for vertical monitor setup.
// @include https://www.twitch.tv/*
// @exclude https://www.twitch.tv
// @exclude https://www.twitch.tv/directory*
// @exclude https://www.twitch.tv/messages*
// @exclude https://www.twitch.tv/subscription*
// @exclude https://www.twitch.tv/settings*
// @exclude https://www.twitch.tv/logout*
// @exclude https://www.twitch.tv/*/manager*
// @exclude https://www.twitch.tv/*/dashboard*
// @version 4
// @updateURL https://gist.githubusercontent.com/kyuucr/44a04f4ea632ccc5ce6f0fba8a490d9e/raw/twitch-bottom-chat.user.js
// @grant none
// @run-at document-idle
// ==/UserScript==
var POTRAIT_THRESHOLD = 0.9
var turnOn = function() {
console.log("Twitch bottom chat script turning on");
let container;
// right column
container = document.querySelector("#right_col");
container.setAttribute("style", "width:100%; height:50%; top:50%");
// main column
container = document.querySelector("#main_col");
container.setAttribute("style", "width:100%; height:50%");
// player
container = document.querySelector("#player");
container.setAttribute("style", "width:100% !important; height:50%");
// metabar
container = document.querySelector(".cn-metabar__more");
container.setAttribute("style", "max-width:100%; bottom:calc(50% + 55px);");
}
var turnOff = function() {
console.log("Twitch bottom chat script turning off");
let container;
// right column
container = document.querySelector("#right_col");
container.setAttribute("style", "");
// main column
container = document.querySelector("#main_col");
container.setAttribute("style", "");
// player
container = document.querySelector("#player");
container.setAttribute("style", "");
// metabar
container = document.querySelector(".cn-metabar__more");
container.setAttribute("style", "");
}
var onScreenSizeChange = function() {
if (screen.width / screen.height < POTRAIT_THRESHOLD) {
turnOn();
} else {
turnOff();
}
}
window.onresize = onScreenSizeChange;
window.setTimeout(onScreenSizeChange, 3000);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.