wyrian/js/libs/soundmanager/demo/page-player/script/optional-page-player-metadata.js

142 lines
4.9 KiB
JavaScript
Raw Normal View History

// SoundManager 2: Page Player demo, MetaData UI prototype
/*jslint white: false, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, newcap: true, immed: true */
/*global pagePlayer, document, window */
var Metadata = function(oSound) {
var self = this,
pl = pagePlayer,
oLI = oSound._data.oLI,
o = oLI.getElementsByTagName('ul')[0],
oItems = o.getElementsByTagName('li'),
oTemplate = document.createElement('div'),
oTemplate2 = document.createElement('div'),
oTemplate3 = document.createElement('div'),
oDuration, i;
oTemplate.innerHTML = '<span>&nbsp;</span>';
oTemplate.className = 'annotation';
oTemplate2.innerHTML = '<span>&nbsp;</span>';
oTemplate2.className = 'annotation alt';
oTemplate3.className = 'note';
this.totalTime = 0;
this.data = [];
this.data.givenDuration = null;
this.data.currentItem = null;
this.data.mainTitle = oSound._data.oLink.innerHTML;
this.strToTime = function(sTime) {
var segments = sTime.split(':'),
seconds = 0, i;
for (i=segments.length; i--;) {
seconds += parseInt(segments[i],10)*Math.pow(60,segments.length-1-i); // hours, minutes
}
return seconds;
};
// make stuff
this.createElements = function() {
var oFrag = document.createDocumentFragment(),
oNode = null,
oNodeSpan = null,
oNode2 = null, i;
for (i=0; i<self.data.length; i++) {
oNode = (i%2===0?oTemplate:oTemplate2).cloneNode(true);
oNodeSpan = oNode.getElementsByTagName('span')[0];
oNode.rel = i;
self.data[i].o = oNode;
oNode2 = oTemplate3.cloneNode(true);
if (i%2===0) {
oNode2.className = 'note alt';
}
oNode2.innerHTML = this.data[i].title;
// evil old-skool event handlers, css:hover-only ideally would be nice excluding IE 6
oNode.onmouseover = self.mouseover;
oNode.onmouseout = self.mouseout;
this.data[i].oNote = oNode2;
oSound._data.oControls.appendChild(oNode2);
oFrag.appendChild(oNode);
}
self.refresh();
oSound._data.oStatus.appendChild(oFrag);
};
this.refreshMetadata = function(oSound) {
// Display info as appropriate
var i, j, index = null,
now = oSound.position,
metadata = oSound._data.metadata.data;
for (i=0, j=metadata.length; i<j; i++) {
if (now >= metadata[i].startTimeMS && now <= metadata[i].endTimeMS) {
index = i;
break;
}
}
if (index !== metadata.currentItem) {
// update
oSound._data.oLink.innerHTML = metadata.mainTitle+' <span class="metadata"><span class="sm2_divider"> | </span><span class="sm2_metadata">'+metadata[index].title+'</span></span>';
pl.setPageTitle(metadata[index].title+' | '+metadata.mainTitle);
metadata.currentItem = index;
}
};
this.refresh = function() {
var offset = 0,
relWidth = null,
duration = (self.data.givenDuration?self.data.givenDuration:oSound.durationEstimate), i;
for (i=0; i<self.data.length; i++) {
if (duration) {
relWidth = (((self.data[i].duration*1000)/duration)*100);
self.data[i].o.style.left = (offset?offset+'%':'-2px');
self.data[i].oNote.style.left = (offset?offset+'%':'0px');
offset += relWidth;
}
}
};
this.mouseover = function(e) {
self.data[this.rel].oNote.style.visibility = 'hidden';
self.data[this.rel].oNote.style.display = 'inline-block';
self.data[this.rel].oNote.style.marginLeft = -parseInt(self.data[this.rel].oNote.offsetWidth/2,10)+'px';
self.data[this.rel].oNote.style.visibility = 'visible';
};
this.mouseout = function() {
self.data[this.rel].oNote.style.display = 'none';
};
// ----
for (i=0; i<oItems.length; i++) {
this.data[i] = {
o: null,
title: oItems[i].getElementsByTagName('p')[0].innerHTML,
startTime: oItems[i].getElementsByTagName('span')[0].innerHTML,
startSeconds: self.strToTime(oItems[i].getElementsByTagName('span')[0].innerHTML.replace(/[()]/g,'')),
duration: 0,
durationMS: null,
startTimeMS: null,
endTimeMS: null,
oNote: null
};
}
oDuration = pl.getByClassName('duration','div',oLI);
this.data.givenDuration = (oDuration.length?self.strToTime(oDuration[0].innerHTML)*1000:0);
for (i=0; i<this.data.length; i++) {
this.data[i].duration = parseInt(this.data[i+1]?this.data[i+1].startSeconds:(self.data.givenDuration?self.data.givenDuration:oSound.durationEstimate)/1000,10)-this.data[i].startSeconds;
this.data[i].startTimeMS = this.data[i].startSeconds*1000;
this.data[i].durationMS = this.data[i].duration*1000;
this.data[i].endTimeMS = this.data[i].startTimeMS+this.data[i].durationMS;
this.totalTime += this.data[i].duration;
}
// ----
this.createElements();
this.refresh();
}; // MetaData();