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.

twitch-bottom-chat.user.js

// ==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);