Twitch Auto Pause/Play Toggle for Tab Switch

Pauses / Plays Video When Mouse Leaves Focus of Tab
Wrap lines
// ==UserScript==
// @name          Twitch Auto Pause/Play Toggle for Tab Switch
// @namespace     http://userstyles.org
// @description   Pauses / Plays Video When Mouse Leaves Focus of Tab
// @author        636597
// @include       *://*.twitch.tv/*
// @run-at        document-start
// @version       0.6
// ==/UserScript==
 
 
var PLAYING = true;
var PAUSE_PLAY_BUTTON_ELEMENT = false;
var CHECKING_FOCUS = true;
var BUTTON_ELEMENT = false;
 
function toggleCheckFocus() {
	if ( CHECKING_FOCUS ) {
		console.log( "Stopping Observing the Focus" );
		clearObserver();
		if ( !PLAYING ) {
			PAUSE_PLAY_BUTTON_ELEMENT.click();
			PLAYING = true;
		}
		BUTTON_ELEMENT.innerHTML = "Observe Focus";
	}
	else {
		console.log( "Starting Observing the Focus" );
		loadObserver();
		BUTTON_ELEMENT.innerHTML = "Stop Observing Focus";
	}
	CHECKING_FOCUS = !CHECKING_FOCUS;
}
function addToggleCheckFocusButton() {
	//var title_element = document.querySelector( 'h2[data-a-target="stream-title"]' );
	var title_element = document.querySelector( 'div[data-test-selector="chat-input-buttons-container"' )
	if ( !title_element ) { return; }
	var id = "toggle-check-focus";
	var element_string = '<button id="' + id + '">Stop Observing Focus</button>';
	var template = document.createElement( "template" );
	template.innerHTML = element_string;
	title_element.insertBefore( template.content ,  title_element.childNodes[ title_element.childNodes.length - 1 ] );
	BUTTON_ELEMENT = document.body.querySelector( "#" + id );
	BUTTON_ELEMENT.addEventListener( "click" , function( event ) {
		toggleCheckFocus();
	});
}
 
// function checkFocus() {
// 	if ( document.hasFocus() ) {
// 		// console.log( "tab enter" );
// 		// console.log( "PLAYING === " + PLAYING );
// 		if ( !PLAYING ) {
// 			console.log( "Tab Entered: Toggling Play State" );
// 			PAUSE_PLAY_BUTTON_ELEMENT.click();
// 			PLAYING = true;
// 		}
// 	} else {
// 		// console.log( "tab leave" );
// 		// console.log( "PLAYING === " + PLAYING );
// 		if ( PLAYING ) {
// 			console.log( "Tab Left: Toggling Play State" );
// 			PAUSE_PLAY_BUTTON_ELEMENT.click();
// 			PLAYING = false;
// 		}
// 	}
// }
 
// Maybe It Be Converted to Observer Somehow
var observer_interval = false;
function clearObserver() {
	//clearInterval( observer_interval );
	document.removeEventListener( "mouseout" , mouseout_event_listener );
}
function mouseout_event_listener( e ) {
	e = e ? e : window.event;
	var from = e.relatedTarget || e.toElement;
	if ( !from || from.nodeName == "HTML" ) {
		if ( PLAYING ) {
			console.log( "Mouse Out: Toggling Play State" );
			PAUSE_PLAY_BUTTON_ELEMENT.click();
			PLAYING = false;
		}
	}
	else {
		if ( !PLAYING ) {
			console.log( "Mouse Entered: Toggling Play State" );
			PAUSE_PLAY_BUTTON_ELEMENT.click();
			PLAYING = true;
		}
	}
}
function loadObserver() {
	console.log( PAUSE_PLAY_BUTTON_ELEMENT );
	if ( !PAUSE_PLAY_BUTTON_ELEMENT ) { return; }
	//observer_interval = setInterval( checkFocus , 1000 );
	document.addEventListener( "mouseout" , mouseout_event_listener );
}
 
// Init
(function() {
	var ready = setInterval(function(){
		PAUSE_PLAY_BUTTON_ELEMENT = document.querySelector( 'button[data-a-target="player-play-pause-button"]' );
		if ( !PAUSE_PLAY_BUTTON_ELEMENT ) { return; }
		clearInterval( ready );
		addToggleCheckFocusButton();
		loadObserver();
	} , 2 );
	setTimeout( function() {
		clearInterval( ready );
	} , 10000 );
})();
欢迎访问Greasy Fork镜像
