finek / wide-twitch-clips

Browser extension that removes useless empty space around twitch player.

Wide Twitch Clips

I dont know what twitch was thinking making so much empty space on clips player page. This small extension fixes that. Basically, it makes this look like that.

this still works like a charm after twitch design update

Installation

There is 2 different ways to use this.

Userscript (any browser, easy and preferred)

If you never used userscripts before i recommend you reading this Userscript Beginners HOWTO first.

1. Make sure you have Tampermonkey installed (or any other userscripts extension).
2. Open openuserjs.org/scripts/efOne/Wide_Twitch_Clips.
3. On that page click "Install".
4. Profit.

All credit for userscript goes to camjac251 which he published here

---

Chrome Extension (with Devmode enabled)

1. Download and save anywhere you want.
2. Open link - chrome://extensions
3. Enable developer mode (screenshot).
4. Press LOAD UNPACKED.
5. Profit.

wide-twitch-clips's Issues

Userscript

I converted your extension into a userscript. It might be easier for those who don't use chrome or to enable the developer mode

// ==UserScript==
// @name         Wide Twitch Clips
// @namespace    https://github.com/FiNEk/wide-twitch-clips
// @version      1
// @description  Full Page Twitch Clips Player
// @author       FiNEk
// @match        *://clips.twitch.tv/*
// @grant        none
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

(function() {
    addGlobalStyle('.clips-watch {margin-top: 2rem;min-width: 100%!important;}');
    addGlobalStyle('.clips-sidebar {height: 45vw!important;}');
    addGlobalStyle('.clips-top-nav {display: none;}');
    addGlobalStyle('#root > div > div {padding-top: 0!important;}');
    addGlobalStyle('#root > div > div > div > div.simplebar-scroll-content > div > div > main > div > div > div.tw-align-items-center.tw-flex.tw-justify-content-end.tw-mg-y-1.tw-relative.tw-z-above {display: none!important;}');
})();