把Youtube影片旋轉0°、90°、180°、270°，讓你輕鬆觀看影片!
目前為
// ==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);
});
});*/
})();