|
1
|
1 |
/* |
|
|
2 |
* |
|
|
3 |
* Copyright 2010 Institut de recherche et d'innovation |
|
|
4 |
* contributor(s) : Samuel Huron |
|
|
5 |
* |
|
|
6 |
* contact@iri.centrepompidou.fr |
|
|
7 |
* http://www.iri.centrepompidou.fr |
|
|
8 |
* |
|
|
9 |
* This software is a computer program whose purpose is to show and add annotations on a video . |
|
|
10 |
* This software is governed by the CeCILL-C license under French law and |
|
|
11 |
* abiding by the rules of distribution of free software. You can use, |
|
|
12 |
* modify and/ or redistribute the software under the terms of the CeCILL-C |
|
|
13 |
* license as circulated by CEA, CNRS and INRIA at the following URL |
|
|
14 |
* "http://www.cecill.info". |
|
|
15 |
* |
|
|
16 |
* The fact that you are presently reading this means that you have had |
|
|
17 |
* knowledge of the CeCILL-C license and that you accept its terms. |
|
|
18 |
*/ |
|
|
19 |
|
|
|
20 |
|
|
|
21 |
|
|
|
22 |
|
|
|
23 |
if(window.__IriSP === undefined ){ var __IriSP={};} |
|
|
24 |
|
|
|
25 |
// Player Configuration |
|
|
26 |
__IriSP.config = { |
|
|
27 |
metadata:{ |
|
|
28 |
format:'cinelab', |
|
|
29 |
src:'http://exp.iri.centrepompidou.fr/franceculture/franceculture/ldt/cljson/id/ef4dcc2e-8d3b-11df-8a24-00145ea4a2be', |
|
|
30 |
load:'jsonp' |
|
|
31 |
}, |
|
|
32 |
gui:{ |
|
|
33 |
width:650, |
|
|
34 |
height:0, |
|
|
35 |
mode:'radio', |
|
|
36 |
container:'LdtPlayer', |
|
|
37 |
debug:false, |
|
|
38 |
css:'../src/css/LdtPlayer.css' |
|
|
39 |
}, |
|
|
40 |
player:{ |
|
|
41 |
type:'jwplayer', |
|
|
42 |
src:'../res/swf/player.swf' |
|
|
43 |
}, |
|
|
44 |
module:null |
|
|
45 |
}; |
|
|
46 |
|
|
|
47 |
__IriSP.lib = { |
|
|
48 |
jQuery:"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", |
|
|
49 |
jQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js", |
|
|
50 |
jQueryToolTip:"http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js", |
|
|
51 |
swfObject:"http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js", |
|
|
52 |
cssjQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" |
|
|
53 |
}; |
|
|
54 |
|
|
|
55 |
// Player Variable |
|
|
56 |
__IriSP.LdtShareTool = ""+ |
|
|
57 |
"\n<a onclick=\"__IriSP.MyApiPlayer.share('delicious');\" title='partager avec delicious'><span class='share shareDelicious'> </span></a>"+ |
|
|
58 |
"\n<a onclick=\"__IriSP.MyApiPlayer.share('facebook');\" title='partager avec facebook'> <span class='share shareFacebook'> </span></a>"+ |
|
|
59 |
"\n<a onclick=\"__IriSP.MyApiPlayer.share('twitter');\" title='partager avec twitter'> <span class='share shareTwitter'> </span></a>"+ |
|
|
60 |
"\n<a onclick=\"__IriSP.MyApiPlayer.share('myspace');\" title='partager avec Myspace'> <span class='share shareMySpace'> </span></a>"+ |
|
|
61 |
"\n<a onclick=\"__IriSP.MyApiPlayer.share('jamespot');\" title='partager avec JamesPot'> <span class='share shareJamesPot'> </span></a>"; |
|
|
62 |
|
|
|
63 |
// Official instance - to refactor ? |
|
|
64 |
__IriSP.MyLdt = null; |
|
|
65 |
__IriSP.MyTags = null; |
|
|
66 |
__IriSP.MyApiPlayer = null; |
|
|
67 |
__IriSP.player = null; |
|
|
68 |
|
|
|
69 |
// genral var (old code) - to refactor |
|
|
70 |
__IriSP.Durration = null; |
|
|
71 |
__IriSP.playerLdtWidth= null; |
|
|
72 |
__IriSP.playerLdtHeight= null; |
|
|
73 |
|
|
|
74 |
|
|
|
75 |
|
|
|
76 |
|
|
|
77 |
|
|
|
78 |
__IriSP.init = function (config){ |
|
|
79 |
|
|
|
80 |
__IriSP.config = config; |
|
|
81 |
var metadataSrc = __IriSP.config.metadata.src; |
|
|
82 |
var guiContainer = __IriSP.config.gui.container; |
|
|
83 |
var guiMode = __IriSP.config.gui.mode; |
|
|
84 |
var guiLdtShareTool = __IriSP.LdtShareTool; |
|
|
85 |
// Localize jQuery variable |
|
|
86 |
__IriSP.jQuery = null; |
|
|
87 |
|
|
|
88 |
|
|
|
89 |
/******** Load jQuery if not present *********/ |
|
|
90 |
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') { |
|
|
91 |
var script_tag = document.createElement('script'); |
|
|
92 |
script_tag.setAttribute("type","text/javascript"); |
|
|
93 |
script_tag.setAttribute("src",__IriSP.lib.jQuery); |
|
|
94 |
//"http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"); |
|
|
95 |
script_tag.onload = scriptLibHandler; |
|
|
96 |
script_tag.onreadystatechange = function () { // Same thing but for IE |
|
|
97 |
if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
|
98 |
scriptLibHandler(); |
|
|
99 |
|
|
|
100 |
} |
|
|
101 |
}; |
|
|
102 |
// Try to find the head, otherwise default to the documentElement |
|
|
103 |
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); |
|
|
104 |
} else { |
|
|
105 |
// The jQuery version on the window is the one we want to use |
|
|
106 |
__IriSP.jQuery = window.jQuery; |
|
|
107 |
scriptLibHandler(); |
|
|
108 |
} |
|
|
109 |
|
|
|
110 |
/******** Called once jQuery has loaded ******/ |
|
|
111 |
function scriptLibHandler() { |
|
|
112 |
|
|
|
113 |
var script_jqUi_tooltip = document.createElement('script'); |
|
|
114 |
script_jqUi_tooltip.setAttribute("type","text/javascript"); |
|
|
115 |
script_jqUi_tooltip.setAttribute("src",__IriSP.lib.jQueryToolTip); |
|
|
116 |
script_jqUi_tooltip.onload = scriptLoadHandler; |
|
|
117 |
script_jqUi_tooltip.onreadystatechange = function () { // Same thing but for IE |
|
|
118 |
if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
|
119 |
scriptLoadHandler("jquery.tools.min.js loded"); |
|
|
120 |
} |
|
|
121 |
}; |
|
|
122 |
|
|
|
123 |
var script_swfObj = document.createElement('script'); |
|
|
124 |
script_swfObj.setAttribute("type","text/javascript"); |
|
|
125 |
script_swfObj.setAttribute("src",__IriSP.lib.swfObject); |
|
|
126 |
script_swfObj.onload = scriptLoadHandler; |
|
|
127 |
script_swfObj.onreadystatechange = function () { // Same thing but for IE |
|
|
128 |
if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
|
129 |
scriptLoadHandler("swfobject.js loded"); |
|
|
130 |
} |
|
|
131 |
}; |
|
|
132 |
|
|
|
133 |
var script_jqUi = document.createElement('script'); |
|
|
134 |
script_jqUi.setAttribute("type","text/javascript"); |
|
|
135 |
script_jqUi.setAttribute("src",__IriSP.lib.jQueryUI); |
|
|
136 |
script_jqUi.onload = scriptLoadHandler; |
|
|
137 |
script_jqUi.onreadystatechange = function () { // Same thing but for IE |
|
|
138 |
if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
|
139 |
scriptLoadHandler("jquery-ui.min.js loded"); |
|
|
140 |
} |
|
|
141 |
}; |
|
|
142 |
|
|
|
143 |
|
|
|
144 |
|
|
|
145 |
|
|
|
146 |
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_jqUi_tooltip); |
|
|
147 |
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_jqUi); |
|
|
148 |
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_swfObj); |
|
|
149 |
|
|
|
150 |
|
|
|
151 |
}; |
|
|
152 |
|
|
|
153 |
/******** Called once all lib are loaded ******/ |
|
|
154 |
var loadLib = 0; |
|
|
155 |
function scriptLoadHandler(Mylib) { |
|
|
156 |
//alert(Mylib); |
|
|
157 |
loadLib +=1; |
|
|
158 |
if(loadLib===3){ |
|
|
159 |
main(); |
|
|
160 |
}else { |
|
|
161 |
// __IriSP.jQuery('#'+__IriSP.config.gui.container).html("Loading library ..."); |
|
|
162 |
} |
|
|
163 |
}; |
|
|
164 |
|
|
|
165 |
/******** Our main function ********/ |
|
|
166 |
function main() { |
|
|
167 |
|
|
|
168 |
|
|
|
169 |
// Make __IriSP.jQuery and restore window.jQuery |
|
|
170 |
__IriSP.jQuery = window.jQuery.noConflict(true); |
|
|
171 |
// Call MY Jquery |
|
|
172 |
__IriSP.jQuery(document).ready(function($) { |
|
|
173 |
|
|
|
174 |
/******* Load CSS *******/ |
|
|
175 |
var css_link_jquery = __IriSP.jQuery("<link>", { |
|
|
176 |
rel: "stylesheet", |
|
|
177 |
type: "text/css", |
|
|
178 |
href: __IriSP.lib.cssjQueryUI, |
|
|
179 |
'class': "dynamic_css" |
|
|
180 |
}); |
|
|
181 |
var css_link_custom = __IriSP.jQuery("<link>", { |
|
|
182 |
rel: "stylesheet", |
|
|
183 |
type: "text/css", |
|
|
184 |
href: __IriSP.config.gui.css, |
|
|
185 |
'class': "dynamic_css" |
|
|
186 |
}); |
|
|
187 |
|
|
|
188 |
css_link_jquery.appendTo('head'); |
|
|
189 |
css_link_custom.appendTo('head'); |
|
|
190 |
|
|
|
191 |
// to see dynamicly loaded css on IE |
|
|
192 |
if ($.browser.msie) { |
|
|
193 |
$('.dynamic_css').clone().appendTo('head'); |
|
|
194 |
} |
|
|
195 |
|
|
|
196 |
//__IriSP.trace("main","ready createMyHtml"); |
|
|
197 |
|
|
|
198 |
__IriSP.createMyHtml(); |
|
|
199 |
//__IriSP.trace("main","end createMyHtml"); |
|
|
200 |
|
|
|
201 |
/******* Load Metadata *******/ |
|
|
202 |
|
|
|
203 |
__IriSP.jQuery.ajax({ |
|
|
204 |
dataType: 'jsonp', |
|
|
205 |
url:metadataSrc, |
|
|
206 |
success : function(json){ |
|
|
207 |
|
|
|
208 |
__IriSP.trace("ajax","success"); |
|
|
209 |
|
|
|
210 |
// START PARSING ----------------------- |
|
|
211 |
if(json === ""){ |
|
|
212 |
alert("ERREUR DE CHARGEMENT JSON"); |
|
|
213 |
} else { |
|
|
214 |
|
|
|
215 |
|
|
|
216 |
// # CREATE MEDIA // |
|
|
217 |
// # JUSTE ONE PLAYER FOR THE MOMENT // |
|
|
218 |
//__IriSP.jQuery("<div></div>").appendTo("#output"); |
|
|
219 |
var MyMedia = new __IriSP.Media( |
|
|
220 |
json.medias[0].id, |
|
|
221 |
json.medias[0].href, |
|
|
222 |
json.medias[0]['meta']['dc:duration'], |
|
|
223 |
json.medias[0]['dc:title'], |
|
|
224 |
json.medias[0]['dc:description']); |
|
|
225 |
|
|
|
226 |
__IriSP.trace("__IriSP.MyApiPlayer", |
|
|
227 |
__IriSP.config.gui.width+" " |
|
|
228 |
+ __IriSP.config.gui.height + " " |
|
|
229 |
+ json.medias[0].href + " " |
|
|
230 |
+ json.medias[0]['meta']['dc:duration'] + " " |
|
|
231 |
+ json.medias[0]['meta']['item']['value']); |
|
|
232 |
|
|
|
233 |
// Create APIplayer |
|
|
234 |
__IriSP.MyApiPlayer = new __IriSP.APIplayer( |
|
|
235 |
__IriSP.config.gui.width, |
|
|
236 |
__IriSP.config.gui.height, |
|
|
237 |
json.medias[0].href, |
|
|
238 |
json.medias[0]['meta']['dc:duration'], |
|
|
239 |
json.medias[0]['meta']['item']['value']); |
|
|
240 |
|
|
|
241 |
// # CREATE THE FIRST LINE // |
|
|
242 |
__IriSP.trace("__IriSP.init.main","__IriSP.Ligne"); |
|
|
243 |
__IriSP.MyLdt = new __IriSP.Ligne ( |
|
|
244 |
json['annotation-types'][0].id, |
|
|
245 |
json['annotation-types'][0]['dc:title'], |
|
|
246 |
json['annotation-types'][0]['dc:description'], |
|
|
247 |
json.medias[0]['meta']['dc:duration']); |
|
|
248 |
|
|
|
249 |
// CREATE THE TAG CLOUD // |
|
|
250 |
__IriSP.trace("__IriSP.init.main","__IriSP.Tags"); |
|
|
251 |
__IriSP.MyTags = new __IriSP.Tags (json.tags); |
|
|
252 |
|
|
|
253 |
// CREATE THE ANNOTATIONS // |
|
|
254 |
// JUSTE FOR THE FIRST TYPE // |
|
|
255 |
__IriSP.jQuery.each(json.annotations, function(i,item) { |
|
|
256 |
if (item.meta['id-ref'] == __IriSP.MyLdt.id) { |
|
|
257 |
//__IriSP.trace("__IriSP.init.main","__IriSP.MyLdt.addAnnotation"); |
|
|
258 |
__IriSP.MyLdt.addAnnotation( |
|
|
259 |
item.id, |
|
|
260 |
item.begin, |
|
|
261 |
item.end, |
|
|
262 |
item.media, |
|
|
263 |
item.content.title, |
|
|
264 |
item.content.description, |
|
|
265 |
item.content.color, |
|
|
266 |
item.tags); |
|
|
267 |
} |
|
|
268 |
//MyTags.addAnnotation(item); |
|
|
269 |
}); |
|
|
270 |
__IriSP.jQuery.each(json.lists, function(i,item) { |
|
|
271 |
__IriSP.trace("lists",""); |
|
|
272 |
}); |
|
|
273 |
__IriSP.jQuery.each(json.views, function(i,item) { |
|
|
274 |
__IriSP.trace("views",""); |
|
|
275 |
}); |
|
|
276 |
} |
|
|
277 |
// END PARSING ----------------------- // |
|
|
278 |
|
|
|
279 |
|
|
|
280 |
},error : function(data){ |
|
|
281 |
alert("ERROR : "+data); |
|
|
282 |
} |
|
|
283 |
}); |
|
|
284 |
|
|
|
285 |
|
|
|
286 |
}); |
|
|
287 |
} |
|
|
288 |
|
|
|
289 |
}; |
|
|
290 |
|
|
|
291 |
|
|
|
292 |
__IriSP.createMyHtml = function(){ |
|
|
293 |
var width = __IriSP.config.gui.width; |
|
|
294 |
|
|
|
295 |
// AUDIO */ |
|
|
296 |
// PB dans le html : ; |
|
|
297 |
__IriSP.jQuery( "<div id='Ldt-Root'>\n"+ |
|
|
298 |
" <div id='Ldt-PlaceHolder'>\n"+ |
|
|
299 |
" <a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player \n"+ |
|
|
300 |
" </div>\n"+ |
|
|
301 |
" <div id='Ldt-controler' class='demo'>\n"+ |
|
|
302 |
" <div class='Ldt-Control1' >\n"+ |
|
|
303 |
" <button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause </button>\n"+ |
|
|
304 |
" <button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button>\n"+ |
|
|
305 |
" </div>\n"+ |
|
|
306 |
" <div id='Ldt-Annotations' class='ui-slider'>\n"+ |
|
|
307 |
" <div id='slider-range-min'></div>\n"+ |
|
|
308 |
" </div>\n"+ |
|
|
309 |
" <div class='Ldt-Control2'>\n"+ |
|
|
310 |
" <button id='ldt-CtrlLink'> Partager </button>\n"+ |
|
|
311 |
" <button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button>\n"+ |
|
|
312 |
" </div>\n"+ |
|
|
313 |
" <div class='cleaner'> \;</div> \n"+ |
|
|
314 |
" <div id='Ldt-Show-Arrow-container'>\n"+ |
|
|
315 |
" <div id='Ldt-Show-Arrow'> </div>\n"+ |
|
|
316 |
" </div>\n"+ |
|
|
317 |
"</div>\n"+ |
|
|
318 |
"<div>\n"+ |
|
|
319 |
" <div id='ldt-Show'> </div>\n"+ |
|
|
320 |
" <div id='Ldt-ShowAnnotation-audio' class='demo' >\n"+ |
|
|
321 |
" <div id='Ldt-SaTitle'></div>\n"+ |
|
|
322 |
" <div id='Ldt-SaDescription'></div>\n"+ |
|
|
323 |
" <div class='cleaner'><!-- \;--></div>\n"+ |
|
|
324 |
" </div>\n"+ |
|
|
325 |
" <div id='Ldt-SaKeyword'>\n"+ |
|
|
326 |
" <div id='Ldt-SaKeywordText'> </div>\n"+ |
|
|
327 |
" <div class='cleaner'></div>\n"+ |
|
|
328 |
" <div id='Ldt-SaShareTools'>\n"+ |
|
|
329 |
" \n"+ |
|
|
330 |
" "+__IriSP.LdtShareTool+"\n"+ |
|
|
331 |
" \n"+ |
|
|
332 |
" </div>\n"+ |
|
|
333 |
" <div class='cleaner'></div>"+ |
|
|
334 |
"</div> "+ |
|
|
335 |
//"<div id='Ldt-Tags'> Mots clefs : </div>"+ |
|
|
336 |
"</div>"+ |
|
|
337 |
"<div id='Ldt-output'></div>").appendTo("#"+__IriSP.config.gui.container); |
|
|
338 |
|
|
|
339 |
__IriSP.trace("__IriSP.createHtml","end"); |
|
|
340 |
|
|
|
341 |
__IriSP.jQuery("#Ldt-Annotations").width(width-(75*2)); |
|
|
342 |
__IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2)); |
|
|
343 |
__IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10); |
|
|
344 |
__IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10); |
|
|
345 |
__IriSP.jQuery("#Ldt-SaKeyword").width(width-10); |
|
|
346 |
__IriSP.jQuery("#Ldt-controler").width(width-10); |
|
|
347 |
__IriSP.jQuery("#Ldt-Control").attr("z-index","100"); |
|
|
348 |
__IriSP.jQuery("#Ldt-controler").hide(); |
|
|
349 |
|
|
|
350 |
__IriSP.jQuery("<div id='Ldt-load-container'><div id='Ldt-loader'> </div> Chargement... </div>").appendTo("#Ldt-ShowAnnotation-audio"); |
|
|
351 |
|
|
|
352 |
if(__IriSP.config.gui.mode=='radio'){ |
|
|
353 |
__IriSP.jQuery("#Ldt-load-container").attr("width",__IriSP.config.gui.width); |
|
|
354 |
} |
|
|
355 |
// Show or not the output |
|
|
356 |
if(__IriSP.config.gui.debug===true){ |
|
|
357 |
__IriSP.jQuery("#Ldt-output").show(); |
|
|
358 |
} else { |
|
|
359 |
__IriSP.jQuery("#Ldt-output").hide(); |
|
|
360 |
} |
|
|
361 |
|
|
|
362 |
}; |
|
|
363 |
|
|
|
364 |
__IriSP.Media = function (id,url,duration,title,description){ |
|
|
365 |
this.id = id; |
|
|
366 |
this.url = url; |
|
|
367 |
this.title = title; |
|
|
368 |
this.description = description; |
|
|
369 |
this.duration = duration; |
|
|
370 |
this.lignes = new Array(); |
|
|
371 |
|
|
|
372 |
__IriSP.trace("__IriSP.Media","Media ID : "+id); |
|
|
373 |
__IriSP.trace("__IriSP.Media","Media URL : "+url); |
|
|
374 |
__IriSP.trace("__IriSP.Media","Media title : "+title); |
|
|
375 |
} |
|
|
376 |
__IriSP.Media.prototype.createPlayerMedia = function (width,height,MyStreamer,MySwfPath){ |
|
|
377 |
__IriSP.MyApiPlayer = new __IriSP.APIplayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); |
|
|
378 |
//createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); |
|
|
379 |
} |
|
|
380 |
__IriSP.Media.prototype.getMediaDuration = function (){ |
|
|
381 |
return (this.duration); |
|
|
382 |
} |
|
|
383 |
__IriSP.Media.prototype.getMediaTitle = function (){ |
|
|
384 |
return (this.title); |
|
|
385 |
} |
|
|
386 |
|
|
|
387 |
|
|
|
388 |
|
|
|
389 |
/* INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON () */ |
|
|
390 |
__IriSP.createInterface = function(width,height,duration){ |
|
|
391 |
|
|
|
392 |
__IriSP.jQuery("#Ldt-controler").show(); |
|
|
393 |
//__IriSP.jQuery("#Ldt-Root").css('display','visible'); |
|
|
394 |
__IriSP.trace("__IriSP.createInterface",width+","+height+","+duration+","); |
|
|
395 |
|
|
|
396 |
__IriSP.jQuery("#Ldt-ShowAnnotation").click(function () { |
|
|
397 |
//__IriSP.jQuery(this).slideUp(); |
|
|
398 |
}); |
|
|
399 |
|
|
|
400 |
var LdtpPlayerY = __IriSP.jQuery("#Ldt-PlaceHolder").attr("top"); |
|
|
401 |
var LdtpPlayerX = __IriSP.jQuery("#Ldt-PlaceHolder").attr("left"); |
|
|
402 |
__IriSP.jQuery("#slider-range-min").slider({ //range: "min", |
|
|
403 |
value: 0, |
|
|
404 |
min: 1, |
|
|
405 |
max: duration/1000,//1:54:52.66 = 3600+3240+ |
|
|
406 |
step: 0.1, |
|
|
407 |
slide: function(event, ui) { |
|
|
408 |
|
|
|
409 |
//__IriSP.jQuery("#amount").val(ui.value+" s"); |
|
|
410 |
//player.sendEvent('SEEK', ui.value) |
|
|
411 |
__IriSP.MyApiPlayer.seek(ui.value); |
|
|
412 |
//changePageUrlOffset(ui.value); |
|
|
413 |
//player.sendEvent('PAUSE') |
|
|
414 |
} |
|
|
415 |
}); |
|
|
416 |
__IriSP.trace("__IriSP.createInterface","ICI"); |
|
|
417 |
__IriSP.jQuery("#amount").val(__IriSP.jQuery("#slider-range-min").slider("value")+" s"); |
|
|
418 |
__IriSP.jQuery(".Ldt-Control1 button:first").button({ |
|
|
419 |
icons: { |
|
|
420 |
primary: 'ui-icon-play' |
|
|
421 |
}, |
|
|
422 |
text: false |
|
|
423 |
}).next().button({ |
|
|
424 |
icons: { |
|
|
425 |
primary: 'ui-icon-seek-next' |
|
|
426 |
}, |
|
|
427 |
text: false |
|
|
428 |
}); |
|
|
429 |
__IriSP.jQuery(".Ldt-Control2 button:first").button({ |
|
|
430 |
icons: { |
|
|
431 |
primary: 'ui-icon-transferthick-e-w'//, |
|
|
432 |
//secondary: 'ui-icon-volume-off' |
|
|
433 |
}, |
|
|
434 |
text: false |
|
|
435 |
}).next().button({ |
|
|
436 |
icons: { |
|
|
437 |
primary: 'ui-icon-volume-on' |
|
|
438 |
}, |
|
|
439 |
text: false |
|
|
440 |
}); |
|
|
441 |
|
|
|
442 |
// /!\ PB A MODIFIER |
|
|
443 |
//__IriSP.MyTags.draw(); |
|
|
444 |
__IriSP.trace("__IriSP.createInterface","ICI2"); |
|
|
445 |
__IriSP.jQuery("#ldt-CtrlPlay").attr("style","background-color:#CD21C24;"); |
|
|
446 |
|
|
|
447 |
__IriSP.jQuery("#Ldt-load-container").hide(); |
|
|
448 |
|
|
|
449 |
if(__IriSP.config.gui.mode=="radio" & __IriSP.jQuery.browser.msie!=true){ |
|
|
450 |
__IriSP.jQuery("#Ldtplayer1").attr("height","0"); |
|
|
451 |
} |
|
|
452 |
__IriSP.trace("__IriSP.createInterface","3"); |
|
|
453 |
|
|
|
454 |
__IriSP.trace("__IriSP.createInterface","END"); |
|
|
455 |
|
|
|
456 |
} |
|
|
457 |
|
|
|
458 |
|
|
|
459 |
/* API player - work in progress ... need refactoring of code */ |
|
|
460 |
__IriSP.APIplayer = function (width,height,url,duration,streamerPath,MySwfPath){ |
|
|
461 |
|
|
|
462 |
|
|
|
463 |
this.player = null; |
|
|
464 |
this.hashchangeUpdate = null; |
|
|
465 |
|
|
|
466 |
this.width = width; |
|
|
467 |
this.height = height; |
|
|
468 |
this.url = url; |
|
|
469 |
this.duration = duration; |
|
|
470 |
this.streamerPath = streamerPath; |
|
|
471 |
this.MySwfPath = MySwfPath; |
|
|
472 |
|
|
|
473 |
__IriSP.MyApiPlayer = this; |
|
|
474 |
|
|
|
475 |
__IriSP.createPlayer(width,height,this.url,this.duration,this.streamerPath,this.MySwfPath); |
|
|
476 |
__IriSP.trace("__IriSP.APIplayer","__IriSP.createPlayer"); |
|
|
477 |
|
|
|
478 |
} |
|
|
479 |
__IriSP.APIplayer.prototype.ready = function(player){ |
|
|
480 |
|
|
|
481 |
//__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady"," __IriSP.createInterface"); |
|
|
482 |
__IriSP.createInterface(this.width,this.height,this.duration); |
|
|
483 |
__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady","END __IriSP.createInterface"); |
|
|
484 |
|
|
|
485 |
|
|
|
486 |
// hashchange EVENT |
|
|
487 |
if (window.addEventListener){ |
|
|
488 |
|
|
|
489 |
// pour FIREFOX hashchange EVENT |
|
|
490 |
window.addEventListener("hashchange", function() { |
|
|
491 |
var url = window.location.href; |
|
|
492 |
var time = __IriSP.retrieveTimeFragment(url); |
|
|
493 |
__IriSP.trace("__IriSP.APIplayer.prototype.ready",time); |
|
|
494 |
if(__IriSP.MyApiPlayer.hashchangeUpdate==null){ |
|
|
495 |
__IriSP.MyApiPlayer.seek(time); |
|
|
496 |
}else{ |
|
|
497 |
__IriSP.MyApiPlayer.hashchangeUpdate=null; |
|
|
498 |
} |
|
|
499 |
}, false); |
|
|
500 |
|
|
|
501 |
} |
|
|
502 |
else if (window.attachEvent){ |
|
|
503 |
// FOR IE hashchange EVENT |
|
|
504 |
|
|
|
505 |
window.attachEvent("onhashchange", function() { |
|
|
506 |
__IriSP.trace("hashchange",time); |
|
|
507 |
var url = window.location.href; |
|
|
508 |
var time = __IriSP.retrieveTimeFragment(url); |
|
|
509 |
if(__IriSP.MyApiPlayer.hashchangeUpdate==null){ |
|
|
510 |
__IriSP.MyApiPlayer.seek(time); |
|
|
511 |
}else{ |
|
|
512 |
__IriSP.MyApiPlayer.hashchangeUpdate=null; |
|
|
513 |
} |
|
|
514 |
}, false); |
|
|
515 |
} |
|
|
516 |
|
|
|
517 |
} |
|
|
518 |
__IriSP.APIplayer.prototype.pause = function(){ |
|
|
519 |
this.hashchangeUpdate = true; |
|
|
520 |
__IriSP.player.sendEvent('PAUSE'); |
|
|
521 |
} |
|
|
522 |
__IriSP.APIplayer.prototype.play = function(){ |
|
|
523 |
this.hashchangeUpdate = true; |
|
|
524 |
__IriSP.player.sendEvent('PLAY'); |
|
|
525 |
} |
|
|
526 |
__IriSP.APIplayer.prototype.mute = function(){ |
|
|
527 |
__IriSP.player.sendEvent('MUTE'); |
|
|
528 |
} |
|
|
529 |
__IriSP.APIplayer.prototype.share = function(network){ |
|
|
530 |
|
|
|
531 |
var MyMessage = "Je regarde :"; |
|
|
532 |
var MyURLNow = window.location.href; |
|
|
533 |
var shareURL; |
|
|
534 |
//alert(network+" : "+MyURLNow); |
|
|
535 |
|
|
|
536 |
if(network == "facebook"){ |
|
|
537 |
shareURL = "http://www.facebook.com/share.php?u="; |
|
|
538 |
}else if(network == "twitter"){ |
|
|
539 |
shareURL = "http://twitter.com/home?status="+MyMessage; |
|
|
540 |
}else if(network == "myspace"){ |
|
|
541 |
shareURL ="http://www.myspace.com/Modules/PostTo/Pages/?u="; |
|
|
542 |
}else if(network == "delicious"){ |
|
|
543 |
shareURL = "http://delicious.com/save?url="; |
|
|
544 |
}else if(network == "JameSpot"){ |
|
|
545 |
shareURL = "http://www.jamespot.com/?action=spotit&u="; |
|
|
546 |
//alert(network+" non actif pour l'instant : "+MyURLNow); |
|
|
547 |
} |
|
|
548 |
|
|
|
549 |
window.location.href = shareURL+encodeURIComponent(MyURLNow); |
|
|
550 |
} |
|
|
551 |
__IriSP.APIplayer.prototype.seek = function (time){ |
|
|
552 |
__IriSP.player.sendEvent('SEEK', time); |
|
|
553 |
this.changePageUrlOffset(time); |
|
|
554 |
} |
|
|
555 |
__IriSP.APIplayer.prototype.update = function (time){ |
|
|
556 |
this.hashchangeUpdate = true; |
|
|
557 |
__IriSP.player.sendEvent('SEEK', time); |
|
|
558 |
} |
|
|
559 |
__IriSP.APIplayer.prototype.changePageUrlOffset = function (time) { |
|
|
560 |
//alert(time); |
|
|
561 |
__IriSP.trace("__IriSP.APIplayer.prototype.changePageUrlOffset","CHANGE URL "+time); |
|
|
562 |
window.location.hash = "#t=" + time; |
|
|
563 |
window.location.href = window.location.href; |
|
|
564 |
} |
|
|
565 |
|
|
|
566 |
/* MEDIA FRAGMENT FUNCTION */ |
|
|
567 |
|
|
|
568 |
__IriSP.jumpToTimeoffset = function (form) { |
|
|
569 |
var time = form.time.value; |
|
|
570 |
__IriSP.MyApiPlayer.changePageUrlOffset(time); |
|
|
571 |
} |
|
|
572 |
__IriSP.retrieveTimeFragment = function (url) { |
|
|
573 |
var pageoffset = 0; |
|
|
574 |
var offsettime = 0; |
|
|
575 |
|
|
|
576 |
if (url.split("#")[1] != null) { |
|
|
577 |
pageoffset = url.split("#")[1]; |
|
|
578 |
if (pageoffset.substring(2) != null) { |
|
|
579 |
offsettime = pageoffset.substring(2); |
|
|
580 |
} |
|
|
581 |
} |
|
|
582 |
return offsettime; |
|
|
583 |
} |
|
|
584 |
__IriSP.ignoreTimeFragment = function(url){ |
|
|
585 |
if (url.split("#")[1] != null) { |
|
|
586 |
var pageurl= url.split("#")[0]; |
|
|
587 |
} |
|
|
588 |
return pageurl; |
|
|
589 |
} |
|
|
590 |
|
|
|
591 |
|
|
|
592 |
|
|
|
593 |
/* CODE SPECIAL JW PLAYER creation + listener */ |
|
|
594 |
|
|
|
595 |
__IriSP.currentPosition = 0; |
|
|
596 |
__IriSP.currentVolume = 50; |
|
|
597 |
__IriSP.player = null; |
|
|
598 |
__IriSP.startPosition = null; |
|
|
599 |
|
|
|
600 |
__IriSP.createPlayer = function (width,height,url,duration,streamerPath,MySwfPath) { |
|
|
601 |
|
|
|
602 |
__IriSP.trace("__IriSP.createPlayer","start"); |
|
|
603 |
|
|
|
604 |
__IriSP.myUrlFragment = url.split(streamerPath); |
|
|
605 |
var file = __IriSP.myUrlFragment[1]; |
|
|
606 |
var streamer = streamerPath; |
|
|
607 |
|
|
|
608 |
var flashvars = { |
|
|
609 |
streamer:streamer, |
|
|
610 |
file:file, |
|
|
611 |
live:"true", |
|
|
612 |
autostart:"true", |
|
|
613 |
controlbar:"none", |
|
|
614 |
playerready:"__IriSP.playerReady" |
|
|
615 |
} |
|
|
616 |
|
|
|
617 |
var params = { |
|
|
618 |
allowfullscreen:"true", |
|
|
619 |
allowscriptaccess:"always", |
|
|
620 |
wmode:"transparent" |
|
|
621 |
} |
|
|
622 |
|
|
|
623 |
var attributes = { |
|
|
624 |
id:"Ldtplayer1", |
|
|
625 |
name:"Ldtplayer1" |
|
|
626 |
} |
|
|
627 |
|
|
|
628 |
__IriSP.trace("__IriSP.createPlayer","SWFOBJECT src:"+__IriSP.config.player.src+" " +width+" "+height); |
|
|
629 |
swfobject.embedSWF(__IriSP.config.player.src, "Ldt-PlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes); |
|
|
630 |
|
|
|
631 |
// need a methode to |
|
|
632 |
// re execute if this swf call does'nt work |
|
|
633 |
} |
|
|
634 |
__IriSP.playerReady = function (thePlayer) { |
|
|
635 |
|
|
|
636 |
//__IriSP.trace("__IriSP.playerReady","PLAYER READY !!!!!!!!!!!!"); |
|
|
637 |
__IriSP.player = window.document[thePlayer.id]; |
|
|
638 |
//__IriSP.trace("__IriSP.playerReady","API CALL "+__IriSP.player); |
|
|
639 |
__IriSP.MyApiPlayer.ready(__IriSP.player); |
|
|
640 |
//__IriSP.trace("__IriSP.playerReady","API CALL END "); |
|
|
641 |
|
|
|
642 |
var url = document.location.href; |
|
|
643 |
var time = __IriSP.retrieveTimeFragment(url); |
|
|
644 |
//__IriSP.trace("__IriSP.playerReady"," "+url+" "+time ); |
|
|
645 |
__IriSP.startPosition = time; |
|
|
646 |
//__IriSP.trace("__IriSP.playerReady"," LISTENER LAUCHER"); |
|
|
647 |
__IriSP.addListeners(); |
|
|
648 |
//__IriSP.trace("__IriSP.playerReady"," LISTENER END"); |
|
|
649 |
|
|
|
650 |
} |
|
|
651 |
__IriSP.addListeners = function () { |
|
|
652 |
if (__IriSP.player) { |
|
|
653 |
__IriSP.trace("__IriSP.addListeners","ADD Listener "); |
|
|
654 |
__IriSP.player.addModelListener("TIME", "__IriSP.positionListener"); |
|
|
655 |
__IriSP.player.addControllerListener("VOLUME", "__IriSP.volumeListener"); |
|
|
656 |
__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor'); |
|
|
657 |
} else { |
|
|
658 |
__IriSP.setTimeout("addListeners()",100); |
|
|
659 |
} |
|
|
660 |
|
|
|
661 |
// et changer les boutons |
|
|
662 |
} |
|
|
663 |
__IriSP.stateMonitor = function (obj) { |
|
|
664 |
|
|
|
665 |
if(obj.newstate == 'PAUSED') |
|
|
666 |
{ |
|
|
667 |
__IriSP.trace("__IriSP.stateMonitor","PAUSE"); |
|
|
668 |
__IriSP.MyApiPlayer.changePageUrlOffset(__IriSP.currentPosition); |
|
|
669 |
|
|
|
670 |
} else if (obj.newstate == 'PLAYING'){ |
|
|
671 |
// une fois la video prete a lire la déplacer au bon timecode |
|
|
672 |
if(__IriSP.startPosition!=null){ |
|
|
673 |
__IriSP.MyApiPlayer.update(__IriSP.startPosition); |
|
|
674 |
__IriSP.startPosition = null; |
|
|
675 |
} |
|
|
676 |
} else if (obj.newstate == 'BUFFERING'){ |
|
|
677 |
__IriSP.trace("__IriSP.stateMonitor","BUFFERING : "); |
|
|
678 |
//changePageUrlOffset(currentPosition); |
|
|
679 |
} |
|
|
680 |
|
|
|
681 |
} |
|
|
682 |
__IriSP.positionListener = function(obj) { |
|
|
683 |
//__IriSP.trace("__IriSP.positionListener",obj.position); |
|
|
684 |
__IriSP.currentPosition = obj.position; |
|
|
685 |
var tmp = document.getElementById("posit"); |
|
|
686 |
if (tmp) { tmp.innerHTML = "position: " + __IriSP.currentPosition; } |
|
|
687 |
__IriSP.jQuery("#slider-range-min").slider("value", obj.position); |
|
|
688 |
__IriSP.jQuery("#amount").val(obj.position+" s"); |
|
|
689 |
// afficher annotation |
|
|
690 |
__IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
|
691 |
} |
|
|
692 |
__IriSP.volumeListener = function (obj) { |
|
|
693 |
__IriSP.currentVolume = obj.percentage; |
|
|
694 |
var tmp = document.getElementById("vol"); |
|
|
695 |
if (tmp) { tmp.innerHTML = "volume: " + __IriSP.currentVolume; } |
|
|
696 |
} |
|
|
697 |
|
|
|
698 |
|
|
|
699 |
|
|
|
700 |
|
|
|
701 |
/* UTIL */ |
|
|
702 |
// code from http://stackoverflow.com/questions/822452/strip-html-from-text-javascript |
|
|
703 |
__IriSP.stripHtml = function(s){ |
|
|
704 |
return s.replace(/\\&/g, '&').replace(/\\</g, '<').replace(/\\>/g, '>').replace(/\\t/g, ' ').replace(/\\n/g, '<br />').replace(/'/g, ''').replace(/"/g, '"'); |
|
|
705 |
} |
|
|
706 |
// conversion de couleur Decimal vers HexaDecimal || 000 si fff |
|
|
707 |
__IriSP.DEC_HEXA_COLOR = function (dec){ |
|
|
708 |
var hexa='0123456789ABCDEF',hex=''; |
|
|
709 |
var tmp; |
|
|
710 |
while (dec>15){ |
|
|
711 |
tmp = dec-(Math.floor(dec/16))*16; |
|
|
712 |
hex = hexa.charAt(tmp)+hex; |
|
|
713 |
dec = Math.floor(dec/16); |
|
|
714 |
} |
|
|
715 |
hex = hexa.charAt(dec)+hex; |
|
|
716 |
if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ } |
|
|
717 |
return(hex); |
|
|
718 |
} |
|
|
719 |
|
|
|
720 |
|
|
|
721 |
|
|
|
722 |
/* CLASS Ligne (annotationType) */ |
|
|
723 |
|
|
|
724 |
__IriSP.LDTligne = null; |
|
|
725 |
__IriSP.Ligne = function (id,title,description,duration){ |
|
|
726 |
this.id = id; |
|
|
727 |
this.title = title; |
|
|
728 |
this.description = description; |
|
|
729 |
// |
|
|
730 |
this.annotations = new Array(); |
|
|
731 |
this.duration = duration; |
|
|
732 |
__IriSP.LDTligne = this; |
|
|
733 |
__IriSP.trace("__IriSP.Ligne","CREATE "+__IriSP.LDTligne); |
|
|
734 |
} |
|
|
735 |
__IriSP.Ligne.prototype.addAnnotation = function (id,begin,end,media,title,description,color,tags){ |
|
|
736 |
var myAnnotation = new __IriSP.Annotation(id,begin,end,media,title,description,color,tags,this.duration); |
|
|
737 |
this.annotations.push(myAnnotation); |
|
|
738 |
//__IriSP.trace("__IriSP.Ligne.prototype.addAnnotation ","add annotation "+title); |
|
|
739 |
} |
|
|
740 |
__IriSP.Ligne.prototype.onClickLigneAnnotation = function(id){ |
|
|
741 |
//changePageUrlOffset(currentPosition); |
|
|
742 |
//player.sendEvent('SEEK', this.start); |
|
|
743 |
//__IriSP.trace("SEEK",this.start); |
|
|
744 |
} |
|
|
745 |
__IriSP.Ligne.prototype.searchLigneAnnotation = function(id){ |
|
|
746 |
/*for (){ |
|
|
747 |
}*/ |
|
|
748 |
} |
|
|
749 |
__IriSP.Ligne.prototype.listAnnotations = function(){ |
|
|
750 |
|
|
|
751 |
} |
|
|
752 |
__IriSP.Ligne.prototype.nextAnnotation = function (){ |
|
|
753 |
var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1; |
|
|
754 |
var annotationCible = this.annotations[annotationCibleNumber]; |
|
|
755 |
|
|
|
756 |
if(annotationCibleNumber<this.annotations.length-1){ |
|
|
757 |
annotationCible.begin |
|
|
758 |
__IriSP.player .sendEvent('SEEK', annotationCible.begin/1000); |
|
|
759 |
__IriSP.trace("LIGNE ","| next = "+annotationCibleNumber+" - "+this.annotations.length+" | seek :"+annotationCible.begin/1000); |
|
|
760 |
}else{ |
|
|
761 |
__IriSP.player .sendEvent('SEEK', this.annotations[0].begin/1000); |
|
|
762 |
} |
|
|
763 |
|
|
|
764 |
|
|
|
765 |
} |
|
|
766 |
__IriSP.Ligne.prototype.numAnnotation = function (annotationCible){ |
|
|
767 |
for (var i=0; i < this.annotations.length; ++i){ |
|
|
768 |
if(annotationCible == this.annotations[i]){ |
|
|
769 |
return i; |
|
|
770 |
} |
|
|
771 |
} |
|
|
772 |
} |
|
|
773 |
__IriSP.Ligne.prototype.checkTime = function(time){ |
|
|
774 |
var annotationTempo = -1; |
|
|
775 |
//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",time); |
|
|
776 |
|
|
|
777 |
for (var i=0; i < this.annotations.length; ++i){ |
|
|
778 |
var annotationTempo = this.annotations[i]; |
|
|
779 |
if (time>annotationTempo.begin/1000 && time<annotationTempo.end/1000){ |
|
|
780 |
|
|
|
781 |
// different form the previous |
|
|
782 |
if(annotationTempo!=this.annotationOldRead){ |
|
|
783 |
this.annotationOldRead = annotationTempo; |
|
|
784 |
//__IriSP.trace("Check : ","annotation ici : "+i+" title "+annotationTempo.title); |
|
|
785 |
//__IriSP.jQuery('#Ldt-ShowAnnotation').slideUp(); |
|
|
786 |
//http://api.jquery.com/delay/ -> 1.4 |
|
|
787 |
//__IriSP.jQuery("#Ldt-SaTitle").delay(100).text(annotationTempo.title); |
|
|
788 |
//__IriSP.jQuery("#Ldt-SaDescription").delay(100).text(annotationTempo.description); |
|
|
789 |
//__IriSP.jQuery('#Ldt-ShowAnnotation').delay(100).slideDown(); |
|
|
790 |
//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",annotationTempo.title+" "+annotationTempo.description ); |
|
|
791 |
__IriSP.jQuery("#Ldt-SaTitle").text(annotationTempo.title); |
|
|
792 |
__IriSP.jQuery("#Ldt-SaDescription").text(annotationTempo.description); |
|
|
793 |
|
|
|
794 |
__IriSP.jQuery("#Ldt-SaDescription").text(annotationTempo.description); |
|
|
795 |
__IriSP.jQuery("#Ldt-SaKeywordText").html("Mots clefs : "+annotationTempo.htmlTags); |
|
|
796 |
|
|
|
797 |
//__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown(); |
|
|
798 |
var startPourcent = annotationTempo.timeToPourcent((annotationTempo.begin*1+(annotationTempo.end*1-annotationTempo.begin*1)/2),annotationTempo.duration*1); |
|
|
799 |
__IriSP.jQuery("#Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000); |
|
|
800 |
//alert(startPourcent); |
|
|
801 |
var tempolinkurl = __IriSP.ignoreTimeFragment(window.location.href)+"#t="+(this.annotations[i].begin/1000); |
|
|
802 |
} |
|
|
803 |
break; |
|
|
804 |
} |
|
|
805 |
|
|
|
806 |
} |
|
|
807 |
// si il y en a pas : retractation du volet |
|
|
808 |
if( annotationTempo == -1){ |
|
|
809 |
if(annotationTempo!=this.annotationOldRead){ |
|
|
810 |
__IriSP.trace("Check : ","pas d'annotation ici "); |
|
|
811 |
__IriSP.jQuery('#Ldt-ShowAnnotation').slideUp(); |
|
|
812 |
this.annotationOldRead = annotationTempo; |
|
|
813 |
} |
|
|
814 |
} |
|
|
815 |
|
|
|
816 |
} |
|
|
817 |
|
|
|
818 |
|
|
|
819 |
/* CLASS Annotation */ |
|
|
820 |
|
|
|
821 |
__IriSP.Annotation = function (){ |
|
|
822 |
var id = null; |
|
|
823 |
var begin = null; |
|
|
824 |
var end = null; |
|
|
825 |
var media = null; |
|
|
826 |
var description = null; |
|
|
827 |
var title = null; |
|
|
828 |
var color = null; |
|
|
829 |
var tags = null; |
|
|
830 |
__IriSP.trace("annotation ","r�ussi") |
|
|
831 |
} |
|
|
832 |
__IriSP.Annotation = function(id,begin,end,media,title,description,color,tags,duration){ |
|
|
833 |
this.id = id; |
|
|
834 |
this.begin = begin; |
|
|
835 |
this.end = end; |
|
|
836 |
this.media = media; |
|
|
837 |
this.description = description; |
|
|
838 |
this.title = title; |
|
|
839 |
this.color = color; |
|
|
840 |
this.tags = tags; |
|
|
841 |
this.htmlTags = ""; |
|
|
842 |
this.duration = duration; |
|
|
843 |
// draw it |
|
|
844 |
this.draw(); |
|
|
845 |
this.drawTags(); |
|
|
846 |
// |
|
|
847 |
__IriSP.trace("Annotation created : ",id); |
|
|
848 |
} |
|
|
849 |
__IriSP.Annotation.prototype.draw = function(){ |
|
|
850 |
//alert (this.duration); |
|
|
851 |
var startPourcent = this.timeToPourcent(this.begin,this.duration); // temps du media |
|
|
852 |
var endPourcent = this.timeToPourcent(this.end,this.duration)-startPourcent; |
|
|
853 |
var titleForDiv = this.title.substr(0,55); |
|
|
854 |
|
|
|
855 |
__IriSP.jQueryAnnotationTemplate = "<div title='"+__IriSP.stripHtml(titleForDiv)+"' id='"+this.id+"' class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' width='100%' style=\"left:"+startPourcent+"%; width:"+endPourcent+"%; padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background:#"+__IriSP.DEC_HEXA_COLOR(this.color)+";\" onClick=\"__IriSP.MyApiPlayer.seek('"+Math.round(this.begin/1000)+"');__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown();\" ></div> "; |
|
|
856 |
//alert(this.color+" : "+DEC_HEXA_COLOR(this.color)); |
|
|
857 |
|
|
|
858 |
__IriSP.jQuerytoolTipTemplate = "<div class='Ldt-tooltip'>" |
|
|
859 |
+"<div class='title'>"+__IriSP.stripHtml(this.title)+"</div>" |
|
|
860 |
+"<div class='time'>"+this.begin+" : "+this.end+"</div>" |
|
|
861 |
+"<div class='description'>"+__IriSP.stripHtml(this.description)+"</div>" |
|
|
862 |
+"</div>"; |
|
|
863 |
|
|
|
864 |
|
|
|
865 |
__IriSP.jQuery("<div>"+__IriSP.jQueryAnnotationTemplate+"</div>").appendTo("#Ldt-Annotations"); |
|
|
866 |
// TOOLTIP BUG ! |
|
|
867 |
|
|
|
868 |
__IriSP.jQuery("#"+this.id).tooltip({ effect: 'slide'}); |
|
|
869 |
|
|
|
870 |
|
|
|
871 |
__IriSP.jQuery("#"+this.id).fadeTo(0,0.3); |
|
|
872 |
__IriSP.jQuery("#"+this.id).mouseover(function() { |
|
|
873 |
__IriSP.jQuery("#"+this.id).animate({opacity: 0.6}, 5) |
|
|
874 |
}).mouseout(function(){ |
|
|
875 |
__IriSP.jQuery("#"+this.id).animate({opacity: 0.3}, 5) |
|
|
876 |
}); |
|
|
877 |
__IriSP.trace("__IriSP.Annotation.prototype.draw","ADD ANOTATION : "+this.begin+" "+this.end+" "+__IriSP.stripHtml(this.title)+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration); |
|
|
878 |
|
|
|
879 |
} |
|
|
880 |
__IriSP.Annotation.prototype.drawTags = function(){ |
|
|
881 |
var KeywordPattern = '<a href=\"\"> '+' </a>'; |
|
|
882 |
|
|
|
883 |
//__IriSP.trace(" !? Tags : ",this.tags); |
|
|
884 |
|
|
|
885 |
if (this.tags!=undefined){ |
|
|
886 |
for (var i = 0; i < this.tags.length; ++i){ |
|
|
887 |
|
|
|
888 |
//this.htmlTags += '<span onclick=\"ShowTag('+this.tags[i]['id-ref']+');\" > '+MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , "; |
|
|
889 |
this.htmlTags += '<span> '+__IriSP.MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , "; |
|
|
890 |
|
|
|
891 |
} |
|
|
892 |
} |
|
|
893 |
} |
|
|
894 |
__IriSP.Annotation.prototype.tootTipAnnotation = function() { |
|
|
895 |
// 1 chercher le div correspondant |
|
|
896 |
// 2 y mettre les information |
|
|
897 |
return this.color + ' ' + this.type + ' apple'; |
|
|
898 |
} |
|
|
899 |
__IriSP.Annotation.prototype.onRollOverAnnotation = function (){ |
|
|
900 |
this.tootTip(); |
|
|
901 |
} |
|
|
902 |
__IriSP.Annotation.prototype.timeToPourcent = function(time,timetotal){ |
|
|
903 |
return (parseInt(Math.round(time/timetotal*100))); |
|
|
904 |
} |
|
|
905 |
|
|
|
906 |
|
|
|
907 |
/* CLASS Tags */ |
|
|
908 |
|
|
|
909 |
__IriSP.Tags = function(object){ |
|
|
910 |
this.myTags = object; |
|
|
911 |
this.htmlTags = null; |
|
|
912 |
this.weigthMax = 0; |
|
|
913 |
//this.mySegments = new array(); |
|
|
914 |
} |
|
|
915 |
__IriSP.Tags.prototype.addAnnotation = function (annotation){ |
|
|
916 |
for (var i = 0; i < this.myTags.length; ++i){ |
|
|
917 |
this.myTags[i].mySegments = new Array(); |
|
|
918 |
if (annotation.tags!=null){ |
|
|
919 |
for (var j = 0; j < annotation.tags.length; ++j){ |
|
|
920 |
if (this.myTags[i]['id'] == annotation.tags[j]['id-ref']){ |
|
|
921 |
this.myTags[i].mySegments.push([annotation.begin,annotation.end,annotation.id]); |
|
|
922 |
var weigthTempo = this.myTags[i].mySegments.length |
|
|
923 |
var tempo = this.myTags[i].mySegments[weigthTempo-1]; |
|
|
924 |
//__IriSP.trace ("__IriSP.Tags.prototype.addAnnotation "," "+this.myTags[i]['meta']['dc:title']+" "+this.myTags[i]['id']+" : "+tempo[0]+" - "+tempo[1]); |
|
|
925 |
|
|
|
926 |
if (this.weigthMax < weigthTempo ){ |
|
|
927 |
this.weigthMax = weigthTempo; |
|
|
928 |
} |
|
|
929 |
} |
|
|
930 |
} |
|
|
931 |
} |
|
|
932 |
} |
|
|
933 |
} |
|
|
934 |
__IriSP.Tags.prototype.getTitle = function (id){ |
|
|
935 |
for (var i = 0; i < this.myTags.length; ++i){ |
|
|
936 |
if(this.myTags[i]['id']==id){ |
|
|
937 |
return(this.myTags[i]['meta']['dc:title']); |
|
|
938 |
} |
|
|
939 |
} |
|
|
940 |
|
|
|
941 |
} |
|
|
942 |
__IriSP.Tags.prototype.draw = function (){ |
|
|
943 |
|
|
|
944 |
__IriSP.trace("__IriSP.Tags.prototype.draw"," !!! WELL START " ); |
|
|
945 |
for (var i = 0; i < this.myTags.length; ++i){ |
|
|
946 |
__IriSP.trace("__IriSP.Tags.prototype.draw"," ADD Tags : "+this.myTags[i]['id']); |
|
|
947 |
if(this.myTags[i]['id']!=null){ |
|
|
948 |
this.htmlTags += '<span onclick=\"MyTags.show( \''+this.myTags[i]['id'] |
|
|
949 |
+'\');\" style=\"font-size:' +((this.myTags[i].mySegments.length/this.weigthMax*10)+8) |
|
|
950 |
+'px;\" alt=\"'+this.myTags[i].mySegments.length |
|
|
951 |
+'\"> '+this.myTags[i]['meta']['dc:title']+' </span>'+' , '; |
|
|
952 |
} |
|
|
953 |
} |
|
|
954 |
|
|
|
955 |
__IriSP.jQuery('#Ldt-Tags').html(this.htmlTags); |
|
|
956 |
__IriSP.trace("__IriSP.Tags.prototype.draw"," !!!! END WMAX= "+this.weigthMax ); |
|
|
957 |
|
|
|
958 |
} |
|
|
959 |
__IriSP.Tags.prototype.show = function (id){ |
|
|
960 |
|
|
|
961 |
var timeStartOffsetA = 100000000000000000000; |
|
|
962 |
var timeStartOffsetB = 100000000000000000000; |
|
|
963 |
var timeEndOffsetA = 0; |
|
|
964 |
var timeEndOffsetB = 0; |
|
|
965 |
var timeStartID; |
|
|
966 |
var timeEndID; |
|
|
967 |
var WidthPourCent; |
|
|
968 |
var leftPourCent; |
|
|
969 |
var timeStartOffset; |
|
|
970 |
|
|
|
971 |
// case 1 : seul segment |
|
|
972 |
// case 2 : 2 ou X segments |
|
|
973 |
|
|
|
974 |
|
|
|
975 |
for (var i = 0; i < this.myTags.length; ++i){ |
|
|
976 |
if (this.myTags[i]['id']==id){ |
|
|
977 |
__IriSP.trace("######### TAG DRAWing : "," END" ); |
|
|
978 |
|
|
|
979 |
for (var j = 0; j < this.myTags[i].mySegments.length; ++j){ |
|
|
980 |
if(timeStartOffset> this.myTags[i].mySegments[j][0]){ |
|
|
981 |
timeStartOffsetA = this.myTags[i].mySegments[j][0]; |
|
|
982 |
timeStartOffsetB = this.myTags[i].mySegments[j][1]; |
|
|
983 |
timeStartID = this.myTags[i].mySegments[j][2] |
|
|
984 |
} |
|
|
985 |
if(timeStartOffset> this.myTags[i].mySegments[j][0]){ |
|
|
986 |
timeEndOffsetA = this.myTags[i].mySegments[j][0]; |
|
|
987 |
timeEndOffsetB = this.myTags[i].mySegments[j][1]; |
|
|
988 |
timeEndID = this.myTags[i].mySegments[j][2] |
|
|
989 |
} |
|
|
990 |
} |
|
|
991 |
|
|
|
992 |
} |
|
|
993 |
} |
|
|
994 |
|
|
|
995 |
// ------------------------------------------------- |
|
|
996 |
// |
|
|
997 |
// ------------------------------------------------- |
|
|
998 |
|
|
|
999 |
leftPourCent = __IriSP.timeToPourcent((timeStartOffsetA*1+(timeStartOffsetB-timeStartOffsetA)/2),__IriSP.MyLdt.duration); |
|
|
1000 |
WidthPourCent = __IriSP.timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),__IriSP.MyLdt.duration)-leftPourCent; |
|
|
1001 |
//WidthPourCent = timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),MyLdt.duration)-startPourcent; |
|
|
1002 |
__IriSP.jQuery("#Ldt-Show-Tags").css('left',leftPourCent+'%'); |
|
|
1003 |
__IriSP.jQuery("#Ldt-Show-Tags").css('width',WidthPourCent+'%'); |
|
|
1004 |
// like arrow script |
|
|
1005 |
|
|
|
1006 |
|
|
|
1007 |
|
|
|
1008 |
} |
|
|
1009 |
|
|
|
1010 |
|
|
|
1011 |
/* CLASS TRACE */ |
|
|
1012 |
|
|
|
1013 |
__IriSP.traceNum=0; |
|
|
1014 |
__IriSP.trace = function(msg,value){ |
|
|
1015 |
|
|
|
1016 |
if(__IriSP.config.gui.debug===true){ |
|
|
1017 |
__IriSP.traceNum += 1; |
|
|
1018 |
__IriSP.jQuery("<div>"+__IriSP.traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output"); |
|
|
1019 |
} |
|
|
1020 |
|
|
|
1021 |
} |
|
|
1022 |
|
|
|
1023 |
|
|
|
1024 |
|
|
|
1025 |
|
|
|
1026 |
|
|
|
1027 |
|