Well, I just deleted over 56,000 comments from my database. I hope I didn’t delete any ACTUAL comments. Fucking spammers. I may have some new stuff to post soon. I have been working with AngularJS recently…Might be cooking up something fun.
Category Archives: javascript
Checking for global scope leak
Last night I got a wild hair and wanted to write a bit of code for fun. Basically I wanted to see what variables were added to the global scope by different libs and bits of code. Basically you can run this and it will tell you if you have accidentally left off a var or added something to the global namspace in some other way. It is rather simple, it does add a var to the global, but I remove that at the end so you don’t see funny results.
To run it, simply replace the:
with whichever files you wish to check. The code is pretty simple:
I Don’t Like Being Told What I Can and Can’t Do
I was trying to update my Netflix autoplay bookmarklet since the autoplay feature that Netflix came out with is…not great. What I found was that Netflix tried to disable the console. Well, that became a more interesting problem to solve…and quite an easy one too. The code Netflix uses to disable the console is:
(function () { try { var $_console$$ = console; Object.defineProperty(window, "console", { get: function () { if ($_console$$._commandLineAPI) throw "Sorry, for security reasons, the script console is deactivated on netflix.com"; return $_console$$ }, set: function ($val$$) { $_console$$ = $val$$ } }) } catch ($ignore$$) {} })();
To undo this is actually really simple, we just need to set the getter/setter back to 'undefined' and everything is happy:
Object.defineProperty(window, "console", { get: undefined, set: undefined });
And of course this is easy to make into a bookmarklet like so:
Enable Console
Sorry Netflix =)
Netflix added autoplay!
Hey I don’t need to update my bookmarklet any more. Actually, I was going to update it again, but I had an interview with them and they told me it was about to happen, so that was why I didn’t bother! Didn’t know if I should post that before it happened though. It was fun though, thanks everybody for enjoying it!
Fixed Netflix Autoplay Bookmarklet!
As promised, here is the new fixed version of my bookmarklet:
Netflix Autoplay Bookmarklet
Please note I can no longer tell when the episode is almost over, so I am now just timing the entire length of play. You will now see a countdown telling you when it will change to the next episode. This means a few things:
* If you pause the show, or it takes a long time to buffer, or is has to buffer in the middle, the timer will be off and it will switch early. There are some things you can do about this, first, you will see ‘||’ next to the timer, clicking it will pause the countdown, clicking again will unpause it, so if you walk away, be sure to click this. Also, you can click the countdown and type a new time into it, you can either give a number of seconds, or enter time in the mm:ss format.
Also, next to the pause button you will see a ‘-‘ most of you can ignore this, but if you have a lot of problems with buffering taking a really long time or something, you can also click the ‘-‘ and enter a number of seconds there. This will be added to what the bookmarklet thinks is the length of each episode to allow for buffering and such. By default 10 seconds is added to allow the episodes to load properly.
I have not done extensive testing on this, so there could very will be some bugs. If you find any, let me know.
(function(undefined){
//Takes our countdown timer and converts it to mm:ss and displays to user
function updateTime() {
var seconds = (countdownTimer % 60) + '';
if(seconds.length === 0)
seconds = '00';
else if(seconds.length === 1)
seconds = '0' + seconds;
timerNode.innerHTML = Math.floor(countdownTimer / 60) + ':' + seconds;
}
//Grabs the data for the episode matching the ID passed in
function getCurrentEpisodeData(episodeId) {
var episode, i = 0, j = 0;
if(episodeData && episodeData.video && episodeData.video.seasons) {
for(i=0; i<episodeData.video.seasons.length; i++) { for(j=0; j<episodeData.video.seasons[i].episodes.length; j++) { if(episodeData.video.seasons[i].episodes[j].id === episodeId) { episode = episodeData.video.seasons[i].episodes[j]; break; } } if(episode) break; } } return episode; } //Grabs the data for the episode following the one with the ID passed in function getNextEpisodeData(episodeId) { var episode, i = 0, j = 0, found = false; if(episodeData && episodeData.video && episodeData.video.seasons) { for(i=0; i<episodeData.video.seasons.length; i++) { for(j=0; j<episodeData.video.seasons[i].episodes.length; j++) { if(episodeData.video.seasons[i].episodes[j].id === episodeId) { found = true; } else if(found) { episode = episodeData.video.seasons[i].episodes[j]; break; } } if(episode) break; } } return episode; } //base64 decoder function decode64(input) { var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=', output = '', chr1, chr2, chr3 = '', enc1, enc2, enc3, enc4 = '', i = 0, base64test = /[^A-Za-z0-9\+\/\=]/g; input = input.replace(base64test, ''); do { enc1 = keyStr.indexOf(input.charAt(i++)); enc2 = keyStr.indexOf(input.charAt(i++)); enc3 = keyStr.indexOf(input.charAt(i++)); enc4 = keyStr.indexOf(input.charAt(i++)); chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ''; enc1 = enc2 = enc3 = enc4 = ''; } while (i<input.length); return unescape(output); } if(window.NetflixAutoplayLoaded) { alert('Autoplay already loaded.'); //return false; } else { window.NetflixAutoplayLoaded = true; } //resize the player so we can see the text we are about to insert under it document.getElementById('SLPlayer').style.height = (window.innerHeight - 35) + 'px'; document.getElementById('SLPlayerWrapper').style.height = (window.innerHeight - 35) + 'px'; document.getElementById('page-content').style.height = (window.innerHeight - 35) + 'px'; //create the text and other shizzy we want var autoplayElement = document.body.appendChild(document.createElement('div')); autoplayElement.id = 'NetflixAutoplayContainer'; autoplayElement.innerHTML = '
Time left until switch: 00:00 || -
';
var timerNode = document.getElementById('NetflixAutoplayTimer');
var autoplayText = document.getElementById('NetflixAutoplay');
var pauseButton = document.getElementById('NetflixAutoPauser');
var delay = document.getElementById('NetflixAutoDelay');
//the number of seconds to wait for the show to buffer on load
var timerDelay = 10;
//Pull the current episode information and the full series data for us
var episodeData = JSON.parse(decode64(netflix.Silverlight.MoviePlayer.getPlugin().settings.metadata));
var currentEppId = (/,EpisodeMovieId=\d*/.exec(netflix.Silverlight.MoviePlayer.getPlugin().settings.initParams)[0]).split('=')[1];
//gets data for current & next epps
var currentEpp = getCurrentEpisodeData(currentEppId);
var nextEpp = getNextEpisodeData(currentEpp.id);
var paused = false; //bool to see if paused
var done = false; //bool to see if finished autoplay
var editingTime = false; //bool to check if user is editing time
//Javascript to execute to change episode
var ini = document.getElementsByTagName('script');
ini = ini[ini.length-1].innerHTML;
//Set the countdown till next episode + the pause we need for buffer
function updateCountdown() {
countdownTimer = parseInt(currentEpp.runtime, 10) + timerDelay;
}
var countdownTimer = 0; //episode length timer
updateCountdown(); //Sets the count down timer for current episode
//Prompt user for number of episodes
var numToWatch = 3;
function getNumberOfEpisodesToWatch() {
var newNum;
do {
newNum = prompt('How many episodes would you like to play?', numToWatch);
} while (isNaN(newNum));
numToWatch = parseInt(newNum, 10);
//set the text
if(numToWatch > 0) {
autoplayText.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch;
if(done) { //if we have already finished, restart
done = false;
switchEpps();
}
} else {
autoplayText.innerHTML = 'Netflix autoplay off';
}
}
//ask the user for the number of episodes they want
getNumberOfEpisodesToWatch();
//handler for pause button
function pause() {
if(pauseButton.innerHTML === '||') {
paused = true;
pauseButton.innerHTML = '>';
} else {
paused = false;
pauseButton.innerHTML = '||';
}
}
//handles editing the buffer delay
function delayEdit(e) {
if((!e.keyCode || e.keyCode === 13) && !isNaN(delay.innerHTML)) {
timerDelay = parseInt(delay.innerHTML, 10);
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}
}
//handler for editing time left to play
function editTime(e) {
timerNode.contentEditable=true;
editingTime = true;
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}
//handles updating time left to play after user edit
function endEdit(e) {
if(timerNode.contentEditable.toString() === 'true' && (e.type === 'blur' || e.keyCode === 13)) {
timerNode.contentEditable = false;
editingTime = false;
var time = timerNode.innerHTML;
if(time.indexOf(':') >0) { //converts minutes:seconds into time
time = time.split(':');
countdownTimer = parseInt(time[0], 10)*60 + parseInt(time[1], 10);
} else { //converts just seconds into time
if(!isNaN(time)) {
countdownTimer = parseInt(time, 10);
}
}
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
return false;
}
}
//Does everything to change to the next episode
function switchEpps() {
//setup the script for the next epp
ini = ini.replace(/,EpisodeMovieId=\d*/,',EpisodeMovieId=' + nextEpp.id);
//switch out data to the new epps
currentEpp = nextEpp;
nextEpp = getNextEpisodeData(currentEpp.id);
//Switch to next epp & update text
if(currentEpp) {
autoplayText.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch;
updateCountdown();
eval(ini);
nextEppTimer();
} else {
autoplayText.innerHTML = 'There does not seem to be a next episode.';
}
}
//Main loop, updates our timer and stuff, switches to next epp when necessary, yadayda
function nextEppTimer() {
setTimeout(function() {
if(isNaN(countdownTimer) || isNaN(numToWatch)) {
autoplayText.innerHTML = 'NUMBERS DO NOT WORK THAT WAY! GOOD NIGHT!';
nextEppTimer();
return;
}
if(countdownTimer <= 0) { if(numToWatch-- > 0) {
switchEpps();
} else {
done = true;
autoplayText.innerHTML = 'Netflix autoplay completed.';
numToWatch = 0;
}
} else {
if(!editingTime && !paused) {
countdownTimer--;
updateTime();
}
nextEppTimer();
}
}, 1000);
}
//attach the events we need
autoplayText.addEventListener('click', getNumberOfEpisodesToWatch, false);
pauseButton.addEventListener('click', pause, false);
timerNode.addEventListener('click', editTime, false);
timerNode.addEventListener('blur', endEdit, false);
timerNode.addEventListener('keypress', endEdit, false);
delay.addEventListener('blur', delayEdit, false);
delay.addEventListener('keyup', delayEdit, false);
//START EVERYTHING!
nextEppTimer();
})();
I Know My Netflix Bookmarklet Broken!
Yes folks, I know. I am sorry, the new player they released last week broke it. I too was sad to discover this, I mean I didn’t really make it for you all, I made it because I wanted it! I really didn’t know if anybody was actually using it, but seeings as my site has maintained traffic at pretty much double by highest day ever EVERY DAY since Netflix broke it, I guess other people like it too. Netflix changed a lot of things, some of it easy to fix, some not as much. Shit happens; que sera sera.
YES, I HAVE A FIX! It is not done yet. I think it will be better in some ways, worse in others. I promise you all (baring catastrophe) it will be out this week.
Thanks to everybody leaving comments and sending me emails telling me that you love it, were upset that it broke, and really want me to fix it! It is amazing to have people actually getting enough enjoyment out of something I made to do those things!
TL;DR: Fix will be out this week.
I Githubed myself!
(Githubbed?) Well, I finally took the time to throw my bookmarklet up on Github, I have some more projects I may add soon, but for now, if you want to fork my bookmarklet, I have it here:
https://github.com/rtpmatt/Netflix-Autoplay-Bookmarklet
Also, getting on Github with windows was not as easy as they made it sound, I had to generate keys using puttygen, doing it through GIT bash did not work at all like Ghithub’s documentation lead me to believe.
Netflix Autoplay Bookmarklet – With Multiple Season Support!
Not content to leave well enough alone, I was hacking on my bookmarklet some more. It can now handle crossing between seasons. There is also a bit less guessing going on now, so I am more confident in it.
For the record, I want to say, I hope Netflix does not get upset about this, if they want me to remove it I will.
To use this:
1. Drag the link below on to your bookmarks bar.
2. Start watching a TV show on Netflix.
3. Click the bookmark and enter then number of episodes you want to watch.
Note: I have now tested this in IE. It does NOT work. But you wouldn’t use IE anyway, would you?
Netflix Autoplay Bookmarklet – With Multiple Season Support![/raw]
javascript:(function(netflix, undefined) {
var seasonId = 0,
episodeId = 0,
numWatched = 0,
numToWatch = 3,
epIdRegex = /,EpisodeMovieId=\d*,/,
idregx = /\d+/,
done = false,
sl,
init,
currrentEpisodeId,
currentMovieId,
seasons,
showData,
waitTimer,
node;
if(!netflix || !netflix.Silverlight || !netflix.Silverlight.MoviePlayer || !netflix.Silverlight.MoviePlayer.getPlugin() || !netflix.Silverlight.MoviePlayer.getPlugin().settings.initParams) {
alert('You do not appear to have a show playing, please start a show first');
return;
}
//grab the things we need
sl = netflix.Silverlight.MoviePlayer.getPlugin().getScriptInterface();
init = netflix.Silverlight.MoviePlayer.getPlugin().settings.initParams;
currrentEpisodeId = parseInt(idregx.exec(epIdRegex.exec(init)), 10);
currentMovieId = parseInt(netflix.Silverlight.MoviePlayer.getPlugin().settings.movieId, 10);
//Check if the user has already loded teh bookmarklet
var autoplayElement = document.getElementById('NetflixAutoplay');
if(autoplayElement) {
alert('You have already loaded the autoplay bookmarklet, click the text at the botton to change number of episodes.');
return;
}
//grab the metadata and decode it
try {
showData = JSON.parse(decode64(netflix.Silverlight.MoviePlayer.getPlugin().settings.metadata));
} catch(e) {
alert('Error processing data =(');
return;
}
if(showData.Movie) {
alert('This appears to be a movie not a TV show. This bookmarklet only works on TV show.');
return;
}
//set our pointest to match the episode we are currently on
seasons = showData.Show.Seasons;
for(seasonId = 0; seasonId < seasons.length; seasonId++) { for(episodeId = 0; episodeId < seasons[seasonId].Episodes.length; episodeId++) { if(seasons[seasonId].Episodes[episodeId].MovieId === currentMovieId || seasons[seasonId].Episodes[episodeId].MovieId === currrentEpisodeId) { done = true; break; } } if(done) { break; } } //check if we were able to find the episode the user is on if(seasonId === seasons.length) { alert('Error: Already of final episode, or episode data could not be found.'); return; } //Prompt user for number of episodes function getNumberOfEpisodesToWatch() { var newNum; do { newNum = prompt('How many episodes would you like to play?', (numToWatch - numWatched)); } while (isNaN(newNum)); numWatched = 0; numToWatch = parseInt(newNum, 10); //set the text if(numToWatch > 0) {
autoplayElement.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch;
} else {
autoplayElement.innerHTML = 'Netflix autoplay off';
}
}
//create the text that shows how many episodes left & insert it
node = document.createElement('span');
autoplayElement = document.body.appendChild(node);
autoplayElement.id = 'NetflixAutoplay';
autoplayElement.innerHTML = 'Netflix autoplay on, Episodes left: ' + numToWatch;
//attach a click handler so people can change number of episodes
autoplayElement.addEventListener('click', getNumberOfEpisodesToWatch, false);
//prompt the user for number of episodes for the first time
getNumberOfEpisodesToWatch();
//handle when the episode ends
sl.OnMovieWatched = function() {
if(numWatched < numToWatch && !waitTimer) { //Check if done autoplaying waitTimer = setTimeout(function() { //Set our timer so we do not end early var epp, numLeft; //move episode/season counters properly if(seasons[seasonId].Episodes[episodeId+1]) { episodeId++; } else { episodeId = 0; seasonId++; } //if there is a next episode, grab it if(seasons[seasonId] && seasons[seasonId].Episodes[episodeId]) { epp = seasons[seasonId].Episodes[episodeId]; } //if there is a next episode, play it and update the text if (epp) { sl.PlayMovie({movieId: epp.MovieId, episodeMovieId: 0, trackId: 0}); numWatched++; numLeft = numToWatch - numWatched; if(numLeft > 0) {
autoplayElement.innerHTML = 'Netflix autoplay on, Episodes left: ' + numLeft;
} else {
autoplayElement.innerHTML = 'Netflix autoplay completed.';
}
}
//cleanup
clearTimeout(waitTimer);
waitTimer = null;
}, 2*60*1000);
}
};
//This is just a bse64 decoder
function decode64(input) {
var keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
output = '',
chr1, chr2, chr3 = '',
enc1, enc2, enc3, enc4 = '',
i = 0,
base64test = /[^A-Za-z0-9\+\/\=]/g;
input = input.replace(base64test, '');
do {
enc1 = keyStr.indexOf(input.charAt(i++));
enc2 = keyStr.indexOf(input.charAt(i++));
enc3 = keyStr.indexOf(input.charAt(i++));
enc4 = keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4; output = output + String.fromCharCode(chr1); if (enc3 != 64) { output = output + String.fromCharCode(chr2); } if (enc4 != 64) { output = output + String.fromCharCode(chr3); } chr1 = chr2 = chr3 = ''; enc1 = enc2 = enc3 = enc4 = ''; } while (i<input.length); return unescape(output); } })(window.netflix);
In addition to handling moving between seasons, it now also adds a little text below the movie to tell you that it is on. You can click this text to change the number of episodes it will play. Entering 0 for the number of episodes will turn this off.
Netflix Autoplay Bookmarklet!
I have updated this plugin, please use the new BETTER version – Click Here
Netflix is awesome, most of the time the fact that I have to click the “Play next episode” button does not bother me, usually I am at my computer anyway. But, if you are like me, you enjoy throwing on a show (say Futurama) and having a few episodes play while you go to sleep. The ~22 minutes an episode is just not enough, I like to have about 3 play. Netflix does not have a way for me to do this. I thought to myself “How hard could this be?” and spent the rest of the night throwing this baby together:
Netflix Autoplay Bookmarklet
If you don’t know how bookmarklets work, simply drag the above link onto you link bar.
To use it, just start an episode of the show you want to watch, click the bookmark, enter the number of episodes you want it to play, then just let it run. It should keep playing episodes, until either the season ends, or it reaches the number you entered.
javascript:(function(){
var eppsWatched = 1,
movieIDrgx = /movieid=\d*[&|#]/,
trackIDrgx = /trkid=\d*[&|#]/,
episoIDrgx = /episodeMovieId=\d*[&|#]/,
idregx = /\d+/,
epps, movieId, trkId, eppId, sl, tmp;
//grab netflix JS interface for player
try {
sl = netflix.Silverlight.MoviePlayer.getPlugin().getScriptInterface() || false;
} catch (e) {
sl = false;
}
if(!sl) {
alert('Please start the first episode you wish to watch.');
} else {
epps = prompt('How many episodes would you like to play?', '3'),
//number of episodes the user wants to watch
epps = parseInt(epps, 10);
//extract the IDs from the url
movieId = parseInt((idregx.exec(movieIDrgx.exec(window.location)) || [0])[0], 10);
eppId = parseInt((idregx.exec(episoIDrgx.exec(window.location)) || [0])[0], 10);
trkId = parseInt((idregx.exec(trackIDrgx.exec(window.location)) || [0])[0], 10);
//add even to movie finished
sl.OnMovieWatched = function() {
var waiting = null; //make our timeer
//check if we have finished watching
if(eppsWatched < epps) {
//move to the next episode
if(trkId !== 0) {
trkId++;
}
if(eppId !== 0) {
eppId++;
}
if(movieId !== 0) {
movieId++;
}
if(!waiting) { //this event triggers about 2 minutes before the end of a show - and multiple times, my guess it is how they move their index to know they should start with the next epp next time
waiting = setTimeout(function() {
//tell netflix to play the next epp
sl.PlayMovie({movieId: movieId, episodeMovieId: eppId, trackId: trkId});
//increment our episode counter
eppsWatched++;
clearTimeout(waiting);
waiting = null;
},2*60*1000);
}
}
}
}
})();
Some caveats:
This works for me in Chrome and Firefox, if you are using some other shitty browser, or an old version and it does not work for you, I don't care. Use a better browser.
There is a good chance this does not work with all shows. In fact I would be shock if it worked on all shows. If you find a show it does not work on, feel free to let me know and I might take a look! If you want to fix it yourself and send me the update, even better!
So, Netflix could easily stop this from working, but I hope they don't. Fortunately, probably only about 3 people read my blog, so I think this should be pretty safe!
How did I figure this out? Well, I don't want to type that up right now, so it will have to wait for another post.
Cascading form require/validation
I ran into an interesting problem recently dealing with some complicated form validation. The issue was that we had several forms with fields that were required or optional based on if other inputs were filled out, with the requirements falling in a specific order. I came up with an interesting solution that looks at a data-ignore-validation attribute on the current form element and, if it exists will check the form element(s) with that name to see if they are filled out, or if they have a similar data-ignore-validation attribute meaning they can possibly be ignored as well. We have a nice little recursive solution that will check all of the form elements in a chain to see if the current one can be ignored.
All we need to do is send the following function the form element to be checked as well as our form, and it will tell us if the element passed in should be ignored.
[sourcecode language=’javascript’]
function ignoreField(elem, form) {
//if we have an data-ignore-validation property, we can ignore _this_ .val() if the field with the name = ignore-validation has a .val() set
var ignoreOn = $(elem).data(‘ignoreValidation’);
if(ignoreOn) {
ignoreOn = ignoreOn.split(‘,’);
//We use this var to hold the complete list of for elements we need to check
var $ignoreFields = $();
//get all of the fields this one can be ignored on
for(var i = 0; i < ignoreOn.length; i++) {
$ignoreFields = $ignoreFields.add(form.find('input[name="'+ignoreOn[i]+'"], select[name="'+ignoreOn[i]+'"]'));
}
//(recursively) check if any of the fields in the ignoreValidation have a value set
for(var i = 0; i < $ignoreFields.length; i++) {
if($ignoreFields.val()) {
return true;
}
return ignoreField($ignoreFields.eq(i), form);
}
}
return false;
}
[/sourcecode]
Of course we do have an issue here where an inexperienced developer could put in a circular reference and we would end up with and infinite loop, but I leave it to you to either fix that issue, or just be smart enough not to do that.