YouTube Rotate 90°

把Youtube影片旋轉0°、90°、180°、270°，讓你輕鬆觀看影片!
当前为 2024-09-03 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         YouTube Rotate 90°
// @namespace    http://tampermonkey.net/
// @version      1.7
// @description  把Youtube影片旋轉0°、90°、180°、270°，讓你輕鬆觀看影片!
// @author       zaqwsx2205
// @match        https://*.youtube.com/*
// @match        https://*.youtube.com/watch?v=*
// @match        https://www.youtube.com/embed/*
// @match        https://www.youtube-nocookie.com/embed/*
// @grant        none
// ==/UserScript==
 
(function () {
    'use strict';
 
    var click = 0;
    var safeURL = location.href;
    var svgicon = `<svg version="1.1" x="0px" y="0px" viewBox="0 0 453.227 453.227" style="enable-background:new 0 0 453.227 453.227;" xml:space="preserve" width="50%" height="100%" class=""><g><g><g><g><path d="M139.453,120.747L1.107,259.093L139.453,397.44L277.8,259.093L139.453,120.747z M61.373,259.093l77.973-77.973     l78.08,77.973l-77.973,77.973L61.373,259.093z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/><path d="M395.88,125.44C358.333,88,309.267,69.227,260.093,69.227V0l-90.56,90.56l90.56,90.453v-69.12     c38.187,0,76.48,14.613,105.6,43.733c58.347,58.347,58.347,152.853,0,211.2c-29.12,29.12-67.413,43.733-105.6,43.733     c-20.693,0-41.28-4.373-60.48-12.907l-31.787,31.787c28.587,15.787,60.373,23.787,92.267,23.787 c49.173,0,98.24-18.773,135.787-56.213C470.867,322.027,470.867,200.427,395.88,125.44z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/></g></g></g></g> </svg>`;
 
    if (window.trustedTypes && window.trustedTypes.createPolicy && !window.trustedTypes.defaultPolicy) {
        window.trustedTypes.createPolicy('default', {
            createHTML: string => string
        });
    }
 
    buildHTML();
    observeURL();
 
    function buildHTML() {
        document.querySelectorAll('.video-div, .video-div1, .video-div2, .transform90').forEach(function (element) {
            element.remove();
        });
 
        let container = document.body;
        let div = document.createElement('div');
        div.classList.add('video-div2');
        container.appendChild(div);
        div.innerHTML = `<style>
        .ytp-autohide .transform90-top {
            opacity: 0 !important; 
            -moz-transition: opacity .1s cubic-bezier(0.4,0.0,1,1) !important; 
            -webkit-transition: opacity .1s cubic-bezier(0.4,0.0,1,1) !important; 
            transition: opacity .1s cubic-bezier(0.4,0.0,1,1) !important;
        }
        .ytp-transform90-icon {
            margin: auto !important; 
            width: 36px !important; 
            height: 36px !important; 
            position: relative !important;
        }
        .ytp-big-mode .ytp-transform90-icon {
            width: 54px !important; 
            height: 54px !important;
        }
        .ytp-transform90-title {
            font-weight: 500 !important; 
            text-align: center !important; 
            font-size: 14px !important;
        }
        .ytp-big-mode .ytp-transform90-title {
            font-size: 20px !important;
        }
        .ytp-miniplayer-scrim .transform90-miniplayer{
            position: absolute;
            width: 60px;
            height: 40px;
            padding: 8px;
            z-index: 67;
            top: 0;
            left: 40px;
        }
    </style>`;
 
        if (document.querySelectorAll('.ytp-embed').length > 0) {
            let chromeTopButtons = document.querySelector('.ytp-chrome-top-buttons');
            let button = document.createElement('button');
            button.classList.add('ytp-button', 'transform90', 'transform90-top');
            button.setAttribute('data-tooltip-opaque', 'true');
            button.setAttribute('aria-label', '');
            button.style.width = 'auto';
            button.style.height = 'auto';
 
            let iconDiv = document.createElement('div');
            iconDiv.classList.add('ytp-transform90-icon');
            iconDiv.style.transform = 'scaleX(-1)';
            iconDiv.innerHTML = `${svgicon}`;
 
            let titleDiv = document.createElement('div');
            titleDiv.classList.add('ytp-transform90-title');
            titleDiv.textContent = 'Video Rotate 90°';
 
            button.appendChild(iconDiv);
            button.appendChild(titleDiv);
 
            chromeTopButtons.prepend(button);
        } else if (document.querySelector('.ytd-miniplayer #player-container #ytd-player')) {
            let scrim = document.querySelector('.ytp-miniplayer-scrim');
            let button = document.createElement('button');
            button.classList.add('transform90', 'ytp-play-button', 'ytp-button', 'transform90-miniplayer');
            button.title = 'Video Rotate 90°';
            button.setAttribute('aria-label', 'Video Rotate 90°');
            button.style.display = 'inline-flex';
            button.style.justifyContent = 'center';
            button.style.transform = 'scaleX(-1)';
            button.innerHTML = `${svgicon}`;
 
            scrim.prepend(button);
        } else {
            let chromeControls = document.querySelector('.ytp-chrome-controls .ytp-right-controls');
            if (chromeControls != null) {
                let button = document.createElement('button');
                button.classList.add('transform90', 'ytp-button');
                button.title = 'Video Rotate 90°';
                button.setAttribute('aria-label', 'Video Rotate 90°');
                button.style.display = 'inline-flex';
                button.style.justifyContent = 'center';
                button.style.transform = 'scaleX(-1)';
                button.innerHTML = `${svgicon}`;
 
                chromeControls.prepend(button);
            }
        }
 
        document.querySelectorAll('.transform90').forEach(function (button) {
            button.addEventListener('click', function () {
                click++;
                transform(click);
            });
        });
    }
 
 
    function transform(x) {
        document.querySelectorAll('.video-div, .video-div1').forEach(function (el) {
            el.remove();
        });
 
        switch (x) {
            case 1:
                addVideoRotateStyles(90);
                transform90();
                break;
            case 2:
                addVideoRotateStyles(180);
                break;
            case 3:
                addVideoRotateStyles(270);
                transform90();
                break;
            case 4:
                click = 0;
                break;
        }
    }
 
    function addVideoRotateStyles(degrees) {
        var container = document.querySelector('.html5-video-container');
        var videoDiv = document.createElement('div');
        var videoDiv1 = document.createElement('div');
 
        videoDiv.className = 'video-div';
        videoDiv1.className = 'video-div1';
 
        container.appendChild(videoDiv);
        container.appendChild(videoDiv1);
 
        var styleContent = `
            .html5-video-container {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                height: 100% !important;
            }
            .video-stream {
                position: relative !important;
                transform: rotate(${degrees}deg) !important;
                height: auto !important;
                left: 0 !important;
                top: 0 !important;
            }
        `;
 
        videoDiv.innerHTML = `<style>${styleContent}</style>`;
    }
 
    function transform90() {
        setTimeout(function () {
            var container = document.querySelector('.html5-video-container');
            var width = container.offsetWidth;
            var height = container.offsetHeight;
            var wh = width - height;
            var videoDiv1 = document.querySelector('.video-div1');
 
            if (videoDiv1) {
                videoDiv1.innerHTML = '<style>.video-stream{width:calc(100% - ' + wh + 'px)!important;}</style>';
            }
        }, 20);
    }
 
    function observeURL() {
        var composeBox = document.querySelector('#player-container video');
        var composeObserver = new MutationObserver(function (mutationsList) {
            if (safeURL !== location.href) {
                safeURL = location.href;
                click = 0;
                buildHTML();
            }
        });
 
        if (!composeBox) {
            window.setTimeout(observeURL, 500);
            return;
        }
 
        var config = { characterData: true, childList: true, attributes: true };
        composeObserver.observe(composeBox, config);
    }
 
    window.addEventListener('resize', function () {
        transform(click);
    });
 
    document.addEventListener("fullscreenchange", function (event) {
        transform(click);
    });
 
    /*document.querySelectorAll(".ytp-size-button").forEach(function (element) {
        element.addEventListener('click', function () {
            transform(click);
        });
    });*/
 
})();