let conf = {
    flipX: false,
    flipY: true,
    angle: 180,
};

function rotate(){
    let theaterButton = $('.ytp-size-button.ytp-button');
    if (theaterButton.title.includes("Theater")) {
        setTimeout(rotate, 200);
        return theaterButton.click();
    }

    let container = $("ytd-watch-flexy[theater]");
    let video = $(".html5-main-video");
    let {width,height} = video.style;

    if (conf.angle !== 0 && Math.abs(conf.angle) !== 180) {
        width = +width.slice(0, -2);
        height = +height.slice(0, -2);
        let maxWidth = window.innerHeight-169;

        if (width > maxWidth) {
            width = maxWidth;
            height = maxWidth / 16 * 9;
            video.style.width = width + 'px';
            video.style.height = height  + 'px'
        }

        video.style.top= (width - height) / 2 + 'px';
        container.classList.add("rotate");
    }

    container.classList.add("transform");
}

let $ = document.querySelector.bind(document);
let stylesheet = document.createElement("style");
stylesheet.innerHTML=`
[theater].rotate #player-theater-container.ytd-watch-flexy{ height:calc((16 / 9) * 100vw); }
[theater].transform .html5-main-video { transform: scaleX(${conf.flipX ? -1 : 1}) scaleY(${conf.flipY ? -1 : 1}) rotate(${conf.angle || 0 }deg); }`;

document.body.appendChild(stylesheet);
window.addEventListener("resize", () => setTimeout(rotate, 200)), rotate();