YouTube Rotate 90°

Youtube影片旋轉90°
目前为 2019-11-15 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         YouTube Rotate 90°
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Youtube影片旋轉90°
// @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/*
// @require https://code.jquery.com/jquery-3.4.1.min.js
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    var width;
    var height;
    var heightTest;
    var bool = false;
    var safeTest = location.href;
 
    function transform90(){
        setTimeout(function(){
            width = $(".html5-video-container").outerWidth();
            height = $(".html5-video-container").outerHeight();
            heightTest = width - height;
            $(".video-test1").html('<style>.video-stream{width:calc(100% - '+heightTest+'px)!important;}</style>');
        }, 20);
    }
 
    function build(){
        $(".video-test, .video-test1, .video-test2, .transform90").remove();
 
        if($(".ytp-embed").length > 0){
            $(".html5-video-container").append('<div class="video-test2"></div>');
            $(".video-test2").html('<style>.ytp-autohide .transform90-top{opacity: 0;-moz-transition: opacity .1s cubic-bezier(0.4,0.0,1,1);-webkit-transition: opacity .1s cubic-bezier(0.4,0.0,1,1);transition: opacity .1s cubic-bezier(0.4,0.0,1,1);}.ytp-transform90-icon {margin: auto;width: 36px;height: 36px;position: relative;}.ytp-big-mode .ytp-transform90-icon {width: 54px;height: 54px;} .ytp-transform90-title{font-weight: 500;text-align: center;font-size: 14px;} .ytp-big-mode .ytp-transform90-title{font-size: 20px;}</style>');
            $('.ytp-chrome-top-buttons').prepend('<button class="ytp-button transform90 transform90-top" data-tooltip-opaque="true" aria-label="" style="width: auto;height: auto;"><div class="ytp-transform90-icon" style="transform:scaleX(-1);"><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></div><div class="ytp-transform90-title">Video Rotate 90°</div></button>');
        }else{
            $(".ytp-right-controls").prepend('<button class="transform90 ytp-button" title="Video Rotate 90°" aria-label="Video Rotate 90°" style="display: inline-flex;justify-content: center; transform:scaleX(-1);"><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></button>');
        }
 
        $('.transform90').on("click", function() {
            bool = !bool;
            if(bool){
                $(".html5-video-container").append('<div class="video-test"></div>');
                $(".html5-video-container").append('<div class="video-test1"></div>');
                $(".video-test").html('<style>.html5-video-container {display: flex;justify-content: center;align-items: center;height: 100%;}.video-stream{position:relative !important; transform:rotate(90deg); height:auto !important; left:0 !important; top:0 !important;}</style>');
                transform90();
            }else{
                $(".video-test, .video-test1").remove();
            }
        });
 
    }
 
    function observeTEST() {
        var composeBox = $('#player-container video')[0];
        var composeObserver = new MutationObserver(function(e) {
            if(safeTest != location.href){
                safeTest = location.href;
                bool = false;
                build();
            }
        });
        if(!composeBox) {
            window.setTimeout(observeTEST,500);
            return;
        }
        var config = {characterData: true, childList: true, attributes: true};
        composeObserver.observe(composeBox,config);
    }
 
    $(document).ready(function(){
        build();
        observeTEST();
 
        $(window).resize( function () {
            if(bool){
                transform90();
            }
        });
 
        document.addEventListener("fullscreenchange", function( event ) {
            if(bool){
                transform90();
            }
        });
 
        $(".ytp-size-button").click(function(){
            if(bool){
                transform90();
            }
        });
 
    });
    
})();