ninja video grease script.

So I decided to mess around with NinjaVideo.net a bit and change the theme of it. I’d never wrote a Greasemonkey userscript before, but I’ve definitely wanted to try it. The object of this was specifically to change the way that the site looks, just the CSS, to remove the things that I don’t want and make have, over all, a cleaner interface.

NinjaVideo.net Original

set up.

So then, of course, we want to know how to set up this user script.
I called the file, ninjavideo.user.js, particularly after I realized that user scripts need that at the end of the file name. It sadly took about 10 minutes for that to actually become obvious. 


// ==UserScript==
// @name              NinjaVideo Skin
// @namespace         http://stanistan.com/plus/
// @description       Skin for ninjavideo.net
// @include           http://ninjavideo.net/*
// @include	      http://beta.ninjavideo.net/*
// @include	      http://*.ninjavideo.net/*

// ==/UserScript==

what i want.

A clean, ad-less, video centered design that I can accomplish with CSS.

I needed to include a CSS file to override ninjavideo’s own. Luckily, javascript is fantastic and one can append a css file to the <head> using this function: 


function append_css(p_file) {
	var v_css  = document.createElement('link');
	v_css.rel = 'stylesheet'
	v_css.type = 'text/css';
	v_css.href = p_file;
	document.getElementsByTagName('head')[0].appendChild(v_css);
}

Followed by: 

append_css('http://stanistan.com/projects/ninjavideo/ninjavideo.css');

My knowledge of javascript isn’t that amazing, so this in particular is fun for me especially to realize how completely someone can manipulate a document–post rendering using the language. I generally just use jQuery because of how awesome and simple it is. I realized that I would need some javascript for this because the <span> elements were styled inline, impossible to edit via an external stylesheet, really.

I knew that if I used jQuery, I could easily, with one line of code, change the color of these elements: $('span').css('color', '#333'); and voila all of these were done and the page was now much more readable. Then I had an idea that would actually be useful for the site, having the sidebar, on the TV SHOWS section, searchable. Now this would be tricky, even my limited knowledge of jQuery would need sprucing up. This would be my code for that: 


$(document).ready(function() {
	$('span').css('color', '#333');

	var form_html = '<p>Search: <input id="list_form" name="list_form" /gt;</p><ul id="form_value"></ul>';

	$('#left h3').after(form_html);

	$("#list_form").keyup(function() {
	    $("#left ul li").hide();
	    $("#left ul li:contains(" + this.value + ")").show();
	    if (this.value === '') {
	    	$("#left ul li").show();
	    }
	});
});

So the problem with this, or one of the problems with this, is that it is case sensitive. Another problem, perhaps a bigger one, is that I would have to end up including the jQuery library in this user script. And.. really? That’s just stupid. Makes the file a lot larger, and for what? I probably wouldn’t need that much raw javascript code anyway.

right.

So I set out to do this. Which was a lot of fun, and made me really appreciate jQuery for it’s simplicity and englishness, it was also just interesting to see how particular the language of javascript actually is. So here’s the complete rewrite, and it’s quite small, too. Maybe could be done better, but I’m pretty happy with it. 


function append_css(p_file) {
	var v_css  = document.createElement('link');
	v_css.rel = 'stylesheet'
	v_css.type = 'text/css';
	v_css.href = p_file;
	document.getElementsByTagName('head')[0].appendChild(v_css);
}

append_css('http://stanistan.com/projects/ninjavideo/ninjavideo.css');

var new_p = document.createElement('p');

var new_p_text = document.createTextNode('Search: ');
new_p.appendChild(new_p_text);

var inputField = document.createElement('input');
inputField.id = 'list_form';
inputField.name = 'list_form';
new_p.appendChild(inputField);

var beforeList = document.getElementById('left').getElementsByTagName('ul')[0];
document.getElementById('left').insertBefore(new_p, beforeList);

inputField.onkeyup = function(e) {
	var fieldValue = inputField.value.toLowerCase();
	var list = beforeList.getElementsByTagName('li');
	for (var i in list) {
		var link = list[i].getElementsByTagName('a')[0];
		var linkText = link.innerHTML.toLowerCase();
		list[i].style.display = "none";
		if (linkText.match(fieldValue)) {
			list[i].style.display = "block";
		}
	}
}

var spans = document.getElementsByTagName('span');
for (var i in spans) {
	spans[i].style.color = '#333';
}

NinjaVideo Fianl

Note: This hasn’t been tested in anything other than Google Chrome. So it probably works fine in the latest of Firefox, Safari, and not at all IE, you know, the whole box-shadow and border-radius things.

Also, AdBlock speeds up load time.

download ninjavideo.user.js
«
»

thoughts: