☰

Vertical Stream Magic

Adjust Twitch streams for a vertical orientated monitor.

当前为 2017-01-23 提交的版本，查看 最新版本。

// ==UserScript==
// @name          Vertical Stream Magic
// @namespace     http://greasyfork.org/users/2240-doodles
// @author        Doodles
// @version       2
// @description   Adjust Twitch streams for a vertical orientated monitor.
// @include       *://www.twitch.tv/*
// @require       https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
// @grant         none
// @updateVersion 2
// ==/UserScript==

this.$ = this.jQuery = jQuery.noConflict(true);
$(document).ready(function () {
	'use strict';
	verticalStreamMagic();
	var observer = new MutationObserver(verticalStreamMagic);
	observer.observe(document.body, {childList: true});
	$(window).resize(resizeIframes);
	function resizeIframes() {
		if($("iframe#vsmStream").length !== 0){
			var _width = window.innerWidth;
			var _height = window.innerHeight;
			var streamFrameHeight = Math.floor((_width / 16) * 9);
			$( "iframe#vsmStream" ).attr("width", _width).attr("height", streamFrameHeight);
			$( "iframe#vsmChat" ).attr("width", _width).attr("height", _height - streamFrameHeight);
		}
	}	
	function verticalStreamMagic() {
		if($("iframe#vsmStream").length === 0){
			if($("div.js-chat-interface").length !== 0 && document.URL.split("twitch.tv/")[1].split("/").length == 1 && window.top == window.self){
				var channelName = document.URL.split("twitch.tv/")[1].split("/")[0].split("&")[0].split("#")[0];
				$('script').each(function () { $(this).remove(); });
				$('body').html('' +
					'<iframe src="https://player.twitch.tv/?channel='+channelName+'" id="vsmStream" height="450" width="800" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>' + 
					'<iframe src="https://www.twitch.tv/'+channelName+'/chat?popout=" id="vsmChat" height="450" width="800" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>' +
				'');
				$('head').html('<title>'+channelName+'</title>');
				$('<style></style>').prop('type', 'text/css').html('' +
					'html { height:100%; }body{padding:0 0 0 0;margin:0 0 0 0;background-color:#333;}iframe#vsmStream, iframe#vsmChat{padding:0 0 0 0;margin:0 0 0 0;display:block;}' +
				'').appendTo('head');
				resizeIframes();
			}
		}
	}
});