animefreak.resizer.user.js

// ==UserScript==
// @name Animefreak Resizer
// @namespace http://tcode.se/scripts
// @description	Option to resize videos.
// @include	http://www.animefreak.tv/*
// @version	0.3
// @grant	none
// @noframes
// @run-at document-end
// ==/UserScript==


window.addEventListener('load', function() {
	// Unneeded style change, but makes it look so much better.
	document.getElementsByClassName("wrapper")[0].style.padding = "15px";
	
	// Elements
	var container = document.getElementById("primary");
	var player = document.getElementById("player");
	
	// There are (atleast) two different routes for players.
	// The first is using a frame and an inner player.
	var frame = player.getElementsByTagName("iframe")[0];
	var inner = frame.contentDocument.body.getElementsByTagName("div")[0];
	var innerPlayer = frame.contentDocument.getElementById("player");
	// Another is through an embedded object.
	var mpl = document.getElementById("mpl");
	
	// They really, really, really like to wrap a lot
	// of elements with the same reduncent width and height properties.
	var rek = document.getElementById("rek");
	
	// Use a wrapper for common tasks.
	var video = inner ? frame : mpl;
	
	// Resizer
	var resize = function resize() {
		// Change the container width so that videos can take up the entire width.
		container.style.width = "auto";
	
		// Change ratio for the video
		var ratio = container.clientWidth / video.clientWidth;
	
		// The new dimensions.
		var width = (video.clientWidth * ratio) + "px";
		var height = (video.clientHeight * ratio) + "px";
	
		// Update the player dimensions.
		video.setAttribute("width", width);
		video.setAttribute("height", height);
	
		if (inner) {
			// And then the inner player wrapper.
			inner.style.width = width;
			inner.style.height = height;
		}
	
		if (innerPlayer) {
			// And then the inner player.
			innerPlayer.style.width = width;
			innerPlayer.style.height = height;
		}
		
		if (rek) {
			rek.style.width = "auto";
			rek.style.height = "auto";
		}
	};
	
	
	// Resizer button
	var button = document.createElement("div");
	button.innerHTML = "Resizer";
	button.style.color = "white";
	button.style.textAlign = "center";
	button.style.background = "#673ab7";
	button.style.border = "1px solid #311b92";
	button.style.padding = "15px";
	button.style.margin = "15px 0";
	button.style.cursor = "pointer";
	button.onclick = resize;
	// Add the button.
	player.insertBefore(button, video);
}, false);