☰

V LIVE Video Rotation

Adds buttons and keyboard shortcuts to rotate and flip the video.

// ==UserScript==
// @name        V LIVE Video Rotation
// @description Adds buttons and keyboard shortcuts to rotate and flip the video.
// @version     1.10
// @author      aqmx
// @namespace   aqmx
// @license     MIT
// @match       https://www.vlive.tv/*
// @grant       GM_addStyle
// ==/UserScript==


GM_addStyle(`
#video-rotation-controls {
	margin-left: 15px;
}
#video-rotation-controls button {
	font-size: 20px;
	background: #f5f5f5;
	border: 1px solid #d9d9d9;
	color: #414141;
	line-height: 22px;
	height: 24px;
	width: 24px;
	outline: 0;
}
#video-rotation-controls button:not(:last-child) {
	margin-right: 3px;
}
#playerBoxArea > .u_rmcplayer:fullscreen div[id*=".videoArea"],
#playerBoxArea > .vwplayer_vlivelive:fullscreen .videoBox {
    height: calc(100% - 4px);
    width: calc(100% - 4px);
}
`);


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.77777)',
	landscape: 'scale(0.5625)',
};

/*let brightnessPercent = 100;
let brightness = {
	up: 5,
	down: -5,
	reset: 0,
}*/

let attempts = 0;
let controlsID = 'video-rotation-controls';
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;
let timer = 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);
	}

	addButtons();

	// Re-add buttons if page changes
	window.history.pushState = function() {
		History.prototype.pushState.apply(history, arguments);
		attempts = 0;
		setTimeout(addButtons, 2000);
	}
})();

function addButtons() {
	clearTimeout(timer);
	let btnArea = document.querySelector('[class^="video_content"] [class^="video_detail"] [class^="post_detail_reaction_info"]');

	if (!btnArea) {
		if (++attempts < 10) {
			timer = setTimeout(addButtons, 500);
		}
		return;
	}
	else if (document.getElementById(controlsID)) {
		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 = controlsID;
	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.style.justifyContent = 'initial';
	btnArea.appendChild(div);
}

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;
	}
}*/

window.addEventListener('click', function(e) {
	if (e.target.parentNode.id != controlsID || 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);
	}*/
}, true);


// Shortcuts
window.addEventListener('keydown', function(e) {
	let stopPropagation = false;
	if (shortcuts[e.code] && shortcutsEnabled) {
		rotateVideo(shortcuts[e.code]);
		stopPropagation = true;
	}
	else if (e.code == 'Pause') {
		shortcutsEnabled = !shortcutsEnabled;
		stopPropagation = true;
	}

	if (stopPropagation) {
		e.preventDefault();
		e.stopPropagation();
	}
}, true);