Twitch Black Square Overlay - Hide On Screen Chat

TwitchBlackSquareOverlay.js

// ==UserScript==
// @name         Twitch Black Square Overlay - Chess24
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Overlay a black square on Twitch video streams
// @author       You
// @match        *://*.twitch.tv/chess24*
// @grant        none
// ==/UserScript==

function sleep( ms ) { return new Promise( resolve => setTimeout( resolve , ms ) ); }

function on_element( query_selector , check_interval=500 , timeout=20000 ) {
	return new Promise( function( resolve , reject ) {
		try {
			let READY_CHECK_INTERVAL = setInterval( function () {
				let element = document.querySelectorAll( query_selector );
				if ( element ) {
					if ( element[ 0 ] ) {
						clearInterval( READY_CHECK_INTERVAL );
						resolve( element[ 0 ] );
						return;
					}
				}
			} , check_interval );
			setTimeout( function () {
				clearInterval( READY_CHECK_INTERVAL );
				resolve();
				return;
			} , timeout );
		}
		catch( error ) { console.log( error ); resolve( false ); return; }
	});
}

function draw_overlay( settings , vpc ) {
	let exists = document.getElementById( "vpc-overlay" );
	if ( exists ) { exists.parentNode.removeChild( exists ); }

	let overlay = document.createElement( 'div' );
	overlay.id = "vpc-overlay";
	overlay.style.width = `${ settings.x_size }px`;
	overlay.style.height = `${ settings.y_size }px`;
	overlay.style.backgroundColor = settings.color;
	overlay.style.position = 'absolute';
	overlay.style.left = `${ settings.x_offset }px`;
	overlay.style.top = `${ settings.y_offset }px`;

	// Variables for Dragging
	let is_dragging = false;
	let offset_x , offset_y;
	let is_click = true;

	let drag = function( e ) {
		is_click = false;
		if ( is_dragging ) {
			let x = e.clientX - offset_x;
			let y = e.clientY - offset_y;
			overlay.style.left = `${ x }px`;
			overlay.style.top = `${ y }px`;
		}
	};

	overlay.addEventListener( 'mousedown' , ( e ) => {
		is_dragging = true;
		is_click = true;
		offset_x = e.clientX - parseInt( overlay.style.left );
		offset_y = e.clientY - parseInt( overlay.style.top );
		overlay.addEventListener( 'mousemove' , drag );
	});

	overlay.addEventListener( 'mouseup' , () => {
		is_dragging = false;
		if ( is_click ) { overlay.style.opacity = ( overlay.style.opacity === '0' ) ? '1' : '0'; }
		overlay.removeEventListener( 'mousemove' , drag );
	});

	// Variables for Resizing
	let is_resizing = false;
	let original_width , original_height , original_x , original_y , original_top , original_left , resize_dir;
	const corners = [ "top-left" , "top-right" , "bottom-left" , "bottom-right" ];
	const directions = [ [ -1 , -1 ] , [ 1 , -1 ] , [ -1 , 1 ] , [ 1 , 1 ] ];

	let resize = function( e ) {
		if ( is_resizing ) {
			let width_change = e.clientX - original_x;
			let height_change = e.clientY - original_y;

			if ( resize_dir[ 0 ] === -1 ) {
				overlay.style.left = `${ original_left + width_change }px`;
				overlay.style.width = `${ original_width - width_change }px`;
			} else {
				overlay.style.width = `${ original_width + width_change }px`;
			}

			if ( resize_dir[ 1 ] === -1 ) {
				overlay.style.top = `${ original_top + height_change }px`;
				overlay.style.height = `${ original_height - height_change }px`;
			} else {
				overlay.style.height = `${ original_height + height_change }px`;
			}
		}
	};

	let end_resize = function() {
		is_resizing = false;
		document.removeEventListener( 'mousemove' , resize );
	};
	corners.forEach( ( corner , index ) => {
		let resizer = document.createElement( 'div' );
		resizer.style.width = '10px';
		resizer.style.height = '10px';
		resizer.style.position = 'absolute';
		resizer.style.cursor = 'se-resize';
		resizer.style[ corner.split( "-" )[ 0 ] ] = '0';
		resizer.style[ corner.split( "-" )[ 1 ] ] = '0';
		overlay.appendChild( resizer );

		resizer.addEventListener( 'mousedown' , ( e ) => {
			is_resizing = true;
			resize_dir = directions[ index ];
			original_width = parseInt( overlay.style.width );
			original_height = parseInt( overlay.style.height );
			original_top = parseInt( overlay.style.top );
			original_left = parseInt( overlay.style.left );
			original_x = e.clientX;
			original_y = e.clientY;
			document.addEventListener( 'mousemove' , resize );
			document.addEventListener( 'mouseup' , end_resize );
		});
	});

	// Global mouseup to ensure it ends
	document.addEventListener( 'mouseup' , () => {
		if ( is_resizing ) { end_resize(); }
		if ( is_dragging ) {
			is_dragging = false;
			overlay.removeEventListener( 'mousemove' , drag );
		}
	});

	vpc.appendChild( overlay );
}

( async ()=> {
	let settings = {
		position: "bottom-left" ,
		x_size: 600 ,
		y_size: 79 ,
		x_offset: 600 ,
		y_offset: 0 ,
		color: "black"
	};
	let vpc = await on_element( ".video-player__container" , 500 , 20000 );
	if ( !vpc ) { return; }
	draw_overlay( settings , vpc );
	/*
	let title = await on_element( 'a[data-a-target="stream-game-link"]' , 500 , 20000 );
	if ( !title ) { alert( "no title ???" ); return; }
	[ "y_offset" , "x_offset" , "y_size" , "x_size" ].forEach( ( key ) => {
		let inputField = document.createElement( "input" );
		inputField.type = "text";
		inputField.value = settings[ key ];
		inputField.id = key;
		inputField.size = 4;
		inputField.setAttribute( 'style' , 'padding-left: 2px !important;' );
		inputField.addEventListener("input" , function ( e ) {
			settings[ key ] = parseInt( e.target.value , 10 );
			draw_overlay( settings , vpc );
		});
		title.parentNode.insertBefore( inputField , title.nextSibling );
	});
	let spacer = document.createElement( "span" );
	spacer.innerHTML = "  ";
	title.parentNode.insertBefore( spacer , title.nextSibling );
	*/
})();