1 | // SoundManager 2: Page Player demo, MetaData UI prototype
|
---|
2 |
|
---|
3 | /*jslint white: false, onevar: true, undef: true, nomen: false, eqeqeq: true, plusplus: false, bitwise: true, newcap: true, immed: true */
|
---|
4 | /*global pagePlayer, document, window */
|
---|
5 |
|
---|
6 | var Metadata = function(oSound) {
|
---|
7 |
|
---|
8 | var self = this,
|
---|
9 | pl = pagePlayer,
|
---|
10 | oLI = oSound._data.oLI,
|
---|
11 | o = oLI.getElementsByTagName('ul')[0],
|
---|
12 | oItems = o.getElementsByTagName('li'),
|
---|
13 | oTemplate = document.createElement('div'),
|
---|
14 | oTemplate2 = document.createElement('div'),
|
---|
15 | oTemplate3 = document.createElement('div'),
|
---|
16 | oDuration, i;
|
---|
17 |
|
---|
18 | oTemplate.innerHTML = '<span> </span>';
|
---|
19 | oTemplate.className = 'annotation';
|
---|
20 | oTemplate2.innerHTML = '<span> </span>';
|
---|
21 | oTemplate2.className = 'annotation alt';
|
---|
22 | oTemplate3.className = 'note';
|
---|
23 |
|
---|
24 | this.totalTime = 0;
|
---|
25 | this.data = [];
|
---|
26 | this.data.givenDuration = null;
|
---|
27 | this.data.currentItem = null;
|
---|
28 | this.data.mainTitle = oSound._data.oLink.innerHTML;
|
---|
29 |
|
---|
30 | this.strToTime = function(sTime) {
|
---|
31 | var segments = sTime.split(':'),
|
---|
32 | seconds = 0, i;
|
---|
33 | for (i=segments.length; i--;) {
|
---|
34 | seconds += parseInt(segments[i],10)*Math.pow(60,segments.length-1-i); // hours, minutes
|
---|
35 | }
|
---|
36 | return seconds;
|
---|
37 | };
|
---|
38 |
|
---|
39 | // make stuff
|
---|
40 | this.createElements = function() {
|
---|
41 | var oFrag = document.createDocumentFragment(),
|
---|
42 | oNode = null,
|
---|
43 | oNodeSpan = null,
|
---|
44 | oNode2 = null, i;
|
---|
45 | for (i=0; i<self.data.length; i++) {
|
---|
46 | oNode = (i%2===0?oTemplate:oTemplate2).cloneNode(true);
|
---|
47 | oNodeSpan = oNode.getElementsByTagName('span')[0];
|
---|
48 | oNode.rel = i;
|
---|
49 | self.data[i].o = oNode;
|
---|
50 | oNode2 = oTemplate3.cloneNode(true);
|
---|
51 | if (i%2===0) {
|
---|
52 | oNode2.className = 'note alt';
|
---|
53 | }
|
---|
54 | oNode2.innerHTML = this.data[i].title;
|
---|
55 | // evil old-skool event handlers, css:hover-only ideally would be nice excluding IE 6
|
---|
56 | oNode.onmouseover = self.mouseover;
|
---|
57 | oNode.onmouseout = self.mouseout;
|
---|
58 | this.data[i].oNote = oNode2;
|
---|
59 | oSound._data.oControls.appendChild(oNode2);
|
---|
60 | oFrag.appendChild(oNode);
|
---|
61 | }
|
---|
62 | self.refresh();
|
---|
63 | oSound._data.oStatus.appendChild(oFrag);
|
---|
64 | };
|
---|
65 |
|
---|
66 | this.refreshMetadata = function(oSound) {
|
---|
67 | // Display info as appropriate
|
---|
68 | var i, j, index = null,
|
---|
69 | now = oSound.position,
|
---|
70 | metadata = oSound._data.metadata.data;
|
---|
71 | for (i=0, j=metadata.length; i<j; i++) {
|
---|
72 | if (now >= metadata[i].startTimeMS && now <= metadata[i].endTimeMS) {
|
---|
73 | index = i;
|
---|
74 | break;
|
---|
75 | }
|
---|
76 | }
|
---|
77 | if (index !== metadata.currentItem) {
|
---|
78 | // update
|
---|
79 | oSound._data.oLink.innerHTML = metadata.mainTitle+' <span class="metadata"><span class="sm2_divider"> | </span><span class="sm2_metadata">'+metadata[index].title+'</span></span>';
|
---|
80 | pl.setPageTitle(metadata[index].title+' | '+metadata.mainTitle);
|
---|
81 | metadata.currentItem = index;
|
---|
82 | }
|
---|
83 | };
|
---|
84 |
|
---|
85 | this.refresh = function() {
|
---|
86 | var offset = 0,
|
---|
87 | relWidth = null,
|
---|
88 | duration = (self.data.givenDuration?self.data.givenDuration:oSound.durationEstimate), i;
|
---|
89 | for (i=0; i<self.data.length; i++) {
|
---|
90 | if (duration) {
|
---|
91 | relWidth = (((self.data[i].duration*1000)/duration)*100);
|
---|
92 | self.data[i].o.style.left = (offset?offset+'%':'-2px');
|
---|
93 | self.data[i].oNote.style.left = (offset?offset+'%':'0px');
|
---|
94 | offset += relWidth;
|
---|
95 | }
|
---|
96 | }
|
---|
97 | };
|
---|
98 |
|
---|
99 | this.mouseover = function(e) {
|
---|
100 | self.data[this.rel].oNote.style.visibility = 'hidden';
|
---|
101 | self.data[this.rel].oNote.style.display = 'inline-block';
|
---|
102 | self.data[this.rel].oNote.style.marginLeft = -parseInt(self.data[this.rel].oNote.offsetWidth/2,10)+'px';
|
---|
103 | self.data[this.rel].oNote.style.visibility = 'visible';
|
---|
104 | };
|
---|
105 |
|
---|
106 | this.mouseout = function() {
|
---|
107 | self.data[this.rel].oNote.style.display = 'none';
|
---|
108 | };
|
---|
109 |
|
---|
110 | // ----
|
---|
111 |
|
---|
112 | for (i=0; i<oItems.length; i++) {
|
---|
113 | this.data[i] = {
|
---|
114 | o: null,
|
---|
115 | title: oItems[i].getElementsByTagName('p')[0].innerHTML,
|
---|
116 | startTime: oItems[i].getElementsByTagName('span')[0].innerHTML,
|
---|
117 | startSeconds: self.strToTime(oItems[i].getElementsByTagName('span')[0].innerHTML.replace(/[()]/g,'')),
|
---|
118 | duration: 0,
|
---|
119 | durationMS: null,
|
---|
120 | startTimeMS: null,
|
---|
121 | endTimeMS: null,
|
---|
122 | oNote: null
|
---|
123 | };
|
---|
124 | }
|
---|
125 |
|
---|
126 | oDuration = pl.getByClassName('duration','div',oLI);
|
---|
127 | this.data.givenDuration = (oDuration.length?self.strToTime(oDuration[0].innerHTML)*1000:0);
|
---|
128 |
|
---|
129 | for (i=0; i<this.data.length; i++) {
|
---|
130 | 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;
|
---|
131 | this.data[i].startTimeMS = this.data[i].startSeconds*1000;
|
---|
132 | this.data[i].durationMS = this.data[i].duration*1000;
|
---|
133 | this.data[i].endTimeMS = this.data[i].startTimeMS+this.data[i].durationMS;
|
---|
134 | this.totalTime += this.data[i].duration;
|
---|
135 | }
|
---|
136 |
|
---|
137 | // ----
|
---|
138 |
|
---|
139 | this.createElements();
|
---|
140 | this.refresh();
|
---|
141 |
|
---|
142 | }; // MetaData(); |
---|