V LIVE Video Rotation

Adds buttons and keyboard shortcuts to rotate and flip the video.
当前为 2020-06-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        V LIVE Video Rotation
// @description Adds buttons and keyboard shortcuts to rotate and flip the video.
// @version     1.3
// @author      aqmx
// @namespace   aqmx
// @license     MIT
// @match       *://www.vlive.tv/video/*
// @grant       GM_addStyle
// ==/UserScript==
 
 
GM_addStyle(`
.vlive_info {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
}
.vlive_info .tit {
	display: block;
	margin-bottom: 9px;
}
.vlive_info .status_area {
	display: inline-flex;
	align-items: center;
}
.vlive_info .ico_blue {
	margin-right: unset;
}
.vlive_info .txt, .vlive_info .like, .vlive_info .date {
	margin-top: 0;
}
.vlive_info .icon_play, .vlive_info .icon_like {
	margin-top: 1px;
}
 
#video-rotation-controls {
	position: relative;
	display: inline-block;
	margin-left: 15px;
	z-index: 1;
}
#video-rotation-controls button {
	font-size: 20px;
	background: #f5f5f5;
	border: 1px solid #d9d9d9;
	color: #414141;
	margin-top: -4px;
	line-height: 22px;
	height: 24px;
	width: 24px;
	outline: 0;
}
#video-rotation-controls button:not(:last-child) {
	margin-right: 3px;
}
`);
 
 
let directions = {
	left: 'r270',
	up: 'r0',
	right: 'r90',
	down: 'r180',
	flipH: 'flipH',
	flipV: 'flipV',
}
let rotations = {
	r90: 'rotate(90deg)',
	r180: 'rotate(180deg)',
	r270: 'rotate(270deg)',
};
let scaling = {
	flipH: 'scaleX(-1)',
	flipV: 'scaleY(-1)',
	portrait: 'scale(1.759)',
	landscape: 'scale(0.559)',
};
 
/*let brightnessPercent = 100;
let brightness = {
	up: 5,
	down: -5,
	reset: 0,
}*/
 
let shortcutsEnabled = true;
let shortcuts = {
	'Numpad8': directions.up,
	'Numpad2': directions.down,
	'Numpad4': directions.left,
	'Numpad6': directions.right,
	'Numpad9': directions.flipH,
	'Numpad3': directions.flipV,
}
let stylesheet = null;
 
 
(() => {
	stylesheet = document.createElement('style');
	document.head.appendChild(stylesheet);
 
	let getAllSubsets = arr => arr.reduce((subsets, value) => subsets.concat(subsets.map(set => [...set, value])), [[]]).slice(1);
	let scalings = getAllSubsets(Object.keys(scaling));
 
	for (let rule in rotations) {
		stylesheet.sheet.insertRule(`video.${rule} { transform: ${rotations[rule]}; }`, stylesheet.sheet.cssRules.length);
		for (let scalingSet of scalings) {
			stylesheet.sheet.insertRule(`video.${rule}.${scalingSet.reduce((s, v) => s+'.'+v)} { transform: ${rotations[rule] + scalingSet.reduce((s, v) => s+' '+scaling[v], '')}; }`, stylesheet.sheet.cssRules.length);
		}
	}
 
	let flips = getAllSubsets([directions.flipH, directions.flipV]);
	for (let flipSet of flips) {
		stylesheet.sheet.insertRule(`video.${flipSet.reduce((s, v) => s+'.'+v)} { transform:${flipSet.reduce((s, v) => s+' '+scaling[v], '')}; }`, stylesheet.sheet.cssRules.length);
	}
})();
 
function addButton() {
	let btnArea = document.querySelector('#content .vlive_section .vlive_info .btn_area');
	if (!btnArea) {
		setTimeout(addButton, 500);
		return;
	}
 
	let btnDirections = [
		[directions.left, '🠘'],
		[directions.up, '🠙'],
		[directions.right, '🠚'],
		[directions.down, '🠛'],
		[directions.flipV, '🡙'],
		[directions.flipH, '🡘'],
	];
	/*let btnBrightness = [
		['up', '+'],
		['down', '−'],
		['reset', '⟳'],
	];*/
 
	let div = document.createElement('div');
	div.id = 'video-rotation-controls';
	for (let entry of btnDirections) {
		let btn = document.createElement('button');
		btn.dataset.direction = entry[0];
		btn.textContent = entry[1];
		div.appendChild(btn);
	}
	/*for (let entry of btnBrightness) {
		let btn = document.createElement('button');
		btn.dataset.brightness = entry[0];
		btn.textContent = entry[1];
		div.appendChild(btn);
	}*/
 
	btnArea.parentNode.insertBefore(div, btnArea);
 
	div.addEventListener('click', function(e) {
		if (e.target.tagName.toLowerCase() != 'button') {
			return;
		}
		else if (e.target.dataset.direction) {
			rotateVideo(e.target.dataset.direction);
		}
		/*else if (e.target.dataset.brightness) {
			changeBrightness(e.target.dataset.brightness);
		}*/
	});
}
 
function rotateVideo(direction) {
	let video = document.querySelector('.u_rmcplayer_video video') || document.querySelector('.vwplayer_vlivelive .videoBox video');
	if (!video) return;
	let flip = [directions.flipH, directions.flipV].includes(direction);
 
	if (flip) {
		video.classList.toggle(direction);
	}
	else {
		video.classList.remove(directions.left, directions.right, directions.down, 'portrait', 'landscape');
		if (direction != directions.up) {
			video.classList.add(direction);
			if ([directions.left, directions.right].includes(direction)) {
				video.classList.add(video.videoHeight > video.videoWidth ? 'portrait' : 'landscape');
			}
		}
	}
}
 
/*function changeBrightness(value) {
	let video = document.querySelector('.u_rmcplayer_video video') || document.querySelector('.vwplayer_vlivelive .videoBox video');
	if (!video) return;
 
	if (brightness[value]) {
		brightnessPercent += brightness[value];
		video.style.filter = 'brightness('+brightnessPercent+'%)';
	}
	else {
		brightnessPercent = 100;
		video.style.filter = null;
	}
}*/
 
addButton();
 
 
// Shortcuts
window.addEventListener('keydown', function(e) {
	if (shortcuts[e.code] && shortcutsEnabled) {
		rotateVideo(shortcuts[e.code]);
	}
	else if (e.code == 'Pause') {
		shortcutsEnabled = !shortcutsEnabled;
	}
});