I have a small piece of code, and the problem is that I don't know how to organize it. There are tons of tutorials about JS code organization but I feel that those are for large scale apps. Also, I'm not sure if having the setInterval
function where it is now is a big no no, can you come up with some critique/ideas?
YUI().use('node', function (Y) {
// Access DOM nodes.
var chapterTime = [0, 30, 49, 68, 90, 105, 127, 153, 182, 209],
buttons = Y.one('ul'),
currentChapter = 0,
prevChapter = 0,
myPlayer = videojs('example_video_1');
buttons.delegate('click', function () {
var button_name = this.ancestor().get('id'),
chapter = button_name.slice(1);
playChapter(chapterTime[chapter-1], this);
}, 'a');
function playChapter(chTime, chButton) {
myPlayer.play();
setTimeout(function(){ myPlayer.currentTime(chTime); },100);
Y.all('#nav a').setStyle('backgroundColor', "#999");
chButton.setStyle('backgroundColor', '#666');
}
setInterval(function(){
var playbackTime = myPlayer.currentTime(),
i = 0,
chapterFound = false;
//console.log(chapterTime);
while (i <= 9 && chapterFound == false){
if (playbackTime >= chapterTime[i] && playbackTime < chapterTime[i+1]){
currentChapter = i + 1;
chapterFound = true;
} else {
i++;
}
}
if (currentChapter != prevChapter){
var button = Y.one('#c' + currentChapter);
Y.all('#nav a').setStyle('backgroundColor', '#999');
button.one('a').setStyle('backgroundColor', '#666');
prevChapter = currentChapter;
}
},1000);
});