watch2gether greasemonkey script for: Larger player, hidden (toggleable) chat, playlist moved next to player, search results more space

watch2gether_big.user.js

// ==UserScript==
// @name         watch2gether big player
// @namespace    shameen.info
// @version      0.9.3
// @description  Larger player, hidden (toggleable) chat, playlist next to player, search results larger
// @author       Shameen
// @match        http://www.watch2gether.com/rooms/*
// @match        https://www.watch2gether.com/rooms/*
// @downloadURL  https://gist.github.com/shameen/447233b37a44bdca3356/raw/
// @require      https://code.jquery.com/jquery-2.1.4.min.js
// @grant        GM_addStyle
// ==/UserScript==

if (typeof GM_addStyle != 'function') {
    function GM_addStyle(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() {
    //add styles
    var css = `
/* ads */
.adsuserbar { display:none; }
/* hide chat */
#userbar-chat { display:none;max-height:100% !important;height:100%; }
/* make player huge, and playlist should be next to it
#player { width: 100% !important; }
#player-chat-row { max-height:75vh; height:75vh !important; }
#player-overflow { bottom:unset !important;top:0;}
body.top-search #player-overflow {bottom: 5% !important;}
/* playlist next to player now */
#playlist-history {display:flex;margin-bottom:0}
#playlist-history>.segment {max-height:100% !important;}

/* chat */
.sh-label-chattoggle {
    position:static;
    display:inline-block;
    padding: 0.2em;
    font-size: 12px;
    background-color: #fff;
    box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
    width:20%;
    width:max-content;
    cursor:pointer;
}
.topbar-search .form {width:60%;display:inline-block;}
#chat-messages { height: auto; }

/* search: top tabs */
#search-container {padding:0.25em;}
.w2g-app-drawer {margin-bottom:0.5em;}
.w2g-app-icon {height:auto;width:auto;padding:2px;margin-right:3px;}
.w2g-app-icon-image {height:1em;width:auto;display:inline-block;clear:none;}
.w2g-app-icon-text {display:inline;}

/* search results: video cards */
.videocard { width:19% !important; }
.videocard .header {letter-spacing:-0.5px;}
.videocard .meta {margin:0;padding:0;font-size:9px}

/* large display */
@media only screen and (min-width: 1400px) {
  .main-content > .ui.container {
    /*width: auto !important;*/
  }
}
`;
    //Main scripts (structure changes and/or new features)
    var $ = $ || window.jQuery;
    $(document).ready(function() {
        //apply css
        GM_addStyle(css);

        //this styling isnt always applied by the css
        $('#player').css('width','100%');
        $('#player-overflow').css('bottom','unset');

        //move playlist up next to player
        $('#playlist-history').detach().appendTo($('#player-chat-row').first());

        //toggle player when clicking floating chat name + ppl
        var chatToggle = $('#userbar-chat .label.w2g-users');
        chatToggle.removeClass('floating small').addClass('sh-label-chattoggle').detach().appendTo($('.topbar-search').first())
        chatToggle.on('click',function(e) {
            var toShow = !chatToggle.hasClass('active');
            if (toShow) {
                $('#userbar-chat').show('fast').css('width','40%');
                chatToggle.addClass('active');
                $('#player').css('width','60%');
            }
            else {
                $('#userbar-chat').hide('fast');
                chatToggle.removeClass('active');
                $('#player').css('width','100%');
            }
        });
    });
})();