|
1 /* |
|
2 * Copyright 2010 Institut de recherche et d'innovation |
|
3 * contributor(s) : Samuel Huron |
|
4 * Use Silvia Pfeiffer 's javascript mediafragment implementation |
|
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 if ( window.IriSP === undefined && window.__IriSP === undefined ) { |
|
21 var IriSP = {}; |
|
22 var __IriSP = IriSP; /* for backward compatibility */ |
|
23 } |
|
24 |
|
25 |
|
26 // Official instance - to refactor ? |
|
27 IriSP.MyLdt = null; |
|
28 IriSP.MyTags = null; |
|
29 IriSP.MyApiPlayer = null; |
|
30 IriSP.player = null; |
|
31 |
|
32 // genral var (old code) - to refactor |
|
33 IriSP.Durration = null; |
|
34 IriSP.playerLdtWidth = null; |
|
35 IriSP.playerLdtHeight = null; |
|
36 |
|
37 |
|
38 IriSP.init = function ( config ) { |
|
39 if ( config === null ) { |
|
40 IriSP.config = IriSP.configDefault; |
|
41 } else { |
|
42 |
|
43 IriSP.config = config; |
|
44 |
|
45 if ( IriSP.config.player.params == null ) { |
|
46 IriSP.config.player.params = IriSP.configDefault.player.params; |
|
47 } |
|
48 |
|
49 if ( IriSP.config.player.flashvars == null ) { |
|
50 IriSP.config.player.flashvars = IriSP.configDefault.player.flashvars; |
|
51 } |
|
52 |
|
53 if ( IriSP.config.player.attributes == null ) { |
|
54 IriSP.config.player.attributes = IriSP.configDefault.player.attributes; |
|
55 } |
|
56 } |
|
57 |
|
58 var metadataSrc = IriSP.config.metadata.src; |
|
59 var guiContainer = IriSP.config.gui.container; |
|
60 var guiMode = IriSP.config.gui.mode; |
|
61 var guiLdtShareTool = IriSP.LdtShareTool; |
|
62 |
|
63 // Localize jQuery variable |
|
64 IriSP.jQuery = null; |
|
65 |
|
66 /* FIXME : to refactor using popcorn.getscript ? */ |
|
67 /******** Load jQuery if not present *********/ |
|
68 if ( window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2' ) { |
|
69 |
|
70 var script_tag = document.createElement( 'script' ); |
|
71 script_tag.setAttribute( "type", "text/javascript" ); |
|
72 script_tag.setAttribute( "src", IriSP.lib.jQuery ); |
|
73 |
|
74 script_tag.onload = scriptLibHandler; |
|
75 script_tag.onreadystatechange = function () { // Same thing but for IE |
|
76 if ( this.readyState == 'complete' || this.readyState == 'loaded' ) { |
|
77 scriptLibHandler(); |
|
78 } |
|
79 }; |
|
80 |
|
81 // Try to find the head, otherwise default to the documentElement |
|
82 ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_tag ); |
|
83 } else { |
|
84 // The jQuery version on the window is the one we want to use |
|
85 IriSP.jQuery = window.jQuery; |
|
86 scriptLibHandler(); |
|
87 } |
|
88 |
|
89 /******** Called once jQuery has loaded ******/ |
|
90 function scriptLibHandler() { |
|
91 |
|
92 var script_jqUi_tooltip = document.createElement( 'script' ); |
|
93 script_jqUi_tooltip.setAttribute( "type", "text/javascript" ); |
|
94 script_jqUi_tooltip.setAttribute( "src", IriSP.lib.jQueryToolTip ); |
|
95 script_jqUi_tooltip.onload = scriptLoadHandler; |
|
96 script_jqUi_tooltip.onreadystatechange = function () { // Same thing but for IE |
|
97 if ( this.readyState == 'complete' || this.readyState == 'loaded' ) { |
|
98 scriptLoadHandler( "jquery.tools.min.js loded" ); |
|
99 } |
|
100 }; |
|
101 |
|
102 var script_swfObj = document.createElement('script'); |
|
103 script_swfObj.setAttribute( "type","text/javascript" ); |
|
104 script_swfObj.setAttribute( "src",IriSP.lib.swfObject ); |
|
105 script_swfObj.onload = scriptLoadHandler; |
|
106 script_swfObj.onreadystatechange = function () { // Same thing but for IE |
|
107 if ( this.readyState == 'complete' || this.readyState == 'loaded' ) { |
|
108 scriptLoadHandler( "swfobject.js loded" ); |
|
109 } |
|
110 }; |
|
111 |
|
112 var script_jqUi = document.createElement( 'script' ); |
|
113 script_jqUi.setAttribute( "type","text/javascript" ); |
|
114 script_jqUi.setAttribute( "src",IriSP.lib.jQueryUI ); |
|
115 script_jqUi.onload = scriptLoadHandler; |
|
116 script_jqUi.onreadystatechange = function () { // Same thing but for IE |
|
117 if ( this.readyState == 'complete' || this.readyState == 'loaded' ) { |
|
118 scriptLoadHandler( "jquery-ui.min.js loded" ); |
|
119 } |
|
120 }; |
|
121 |
|
122 |
|
123 ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_jqUi_tooltip); |
|
124 ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_jqUi ); |
|
125 ( document.getElementsByTagName("head")[0] || document.documentElement ).appendChild( script_swfObj ); |
|
126 |
|
127 |
|
128 }; |
|
129 |
|
130 /******** Called once all lib are loaded ******/ |
|
131 var loadLib = 0; |
|
132 /* FIXME : ugly */ |
|
133 function scriptLoadHandler( Mylib ) { |
|
134 //alert(Mylib); |
|
135 loadLib +=1; |
|
136 if( loadLib===3 ) { |
|
137 main(); |
|
138 } |
|
139 }; |
|
140 |
|
141 /******** Our main function ********/ |
|
142 function main() { |
|
143 |
|
144 |
|
145 // Make our own IriSP.jQuery and restore window.jQuery if there was one. |
|
146 IriSP.jQuery = window.jQuery.noConflict( true ); |
|
147 // Call ours Jquery |
|
148 IriSP.jQuery( document ).ready( function($) { |
|
149 |
|
150 /******* Load CSS *******/ |
|
151 var css_link_jquery = IriSP.jQuery( "<link>", { |
|
152 rel: "stylesheet", |
|
153 type: "text/css", |
|
154 href: IriSP.lib.cssjQueryUI, |
|
155 'class': "dynamic_css" |
|
156 } ); |
|
157 var css_link_custom = IriSP.jQuery( "<link>", { |
|
158 rel: "stylesheet", |
|
159 type: "text/css", |
|
160 href: IriSP.config.gui.css, |
|
161 'class': "dynamic_css" |
|
162 } ); |
|
163 |
|
164 css_link_jquery.appendTo( 'head' ); |
|
165 css_link_custom.appendTo( 'head' ); |
|
166 |
|
167 // to see dynamicly loaded css on IE |
|
168 if ( $.browser.msie ) { |
|
169 $( '.dynamic_css' ).clone().appendTo( 'head' ); |
|
170 } |
|
171 |
|
172 //__IriSP.trace("main","ready createMyHtml"); |
|
173 |
|
174 IriSP.createPlayerChrome(); |
|
175 |
|
176 /******* Load Metadata *******/ |
|
177 IriSP.getMetadata(); |
|
178 |
|
179 }); |
|
180 } |
|
181 |
|
182 }; |
|
183 |
|
184 |
|
185 __IriSP.Media = function ( id, url, duration, title, description ) { |
|
186 this.id = id; |
|
187 this.url = url; |
|
188 this.title = title; |
|
189 this.description = description; |
|
190 this.duration = duration; |
|
191 this.lignes = new Array(); |
|
192 |
|
193 IriSP.trace( "__IriSP.Media" , "Media ID : "+id); |
|
194 IriSP.trace( "__IriSP.Media" , "Media URL : "+url); |
|
195 IriSP.trace( "__IriSP.Media" , "Media title : "+title); |
|
196 }; |
|
197 |
|
198 __IriSP.Media.prototype.createPlayerMedia = function ( width, height, MyStreamer, MySwfPath) { |
|
199 IriSP.MyApiPlayer = new __IriSP.APIplayer( width, height, this.url, this.duration, MyStreamer, MySwfPath); |
|
200 //createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); |
|
201 }; |
|
202 |
|
203 __IriSP.Media.prototype.getMediaDuration = function () { |
|
204 return (this.duration); |
|
205 }; |
|
206 |
|
207 __IriSP.Media.prototype.getMediaTitle = function (){ |
|
208 return (this.title); |
|
209 }; |
|
210 |
|
211 |
|
212 |
|
213 |
|
214 |
|
215 |
|
216 /* FIXME : API player - work in progress ... need refactoring of code */ |
|
217 __IriSP.APIplayer = function ( width, height, url, duration, streamerPath, MySwfPath){ |
|
218 |
|
219 |
|
220 this.player = null; |
|
221 this.hashchangeUpdate = null; |
|
222 |
|
223 this.width = width; |
|
224 this.height = height; |
|
225 this.url = url; |
|
226 this.duration = duration; |
|
227 this.streamerPath = streamerPath; |
|
228 this.MySwfPath = MySwfPath; |
|
229 |
|
230 IriSP.MyApiPlayer = this; |
|
231 |
|
232 IriSP.createPlayer( this.url, this.streamerPath ); |
|
233 IriSP.trace( "__IriSP.APIplayer", "__IriSP.createPlayer" ); |
|
234 |
|
235 //__IriSP.config.player |
|
236 /* |
|
237 - dailymotion // &enableApi=1&chromeless=1 |
|
238 - youtube |
|
239 - html5 |
|
240 - flowplayer |
|
241 - jwplayer |
|
242 */ |
|
243 |
|
244 }; |
|
245 |
|
246 __IriSP.APIplayer.prototype.ready = function( player ) { |
|
247 |
|
248 //__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady"," __IriSP.createInterface"); |
|
249 IriSP.createInterface( this.width, this.height, this.duration ); |
|
250 //__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady","END __IriSP.createInterface"); |
|
251 |
|
252 // hashchange EVENT |
|
253 if ( window.addEventListener ){ |
|
254 |
|
255 // for firefox hashchange EVENT |
|
256 window.addEventListener( "hashchange", function() { |
|
257 var url = window.location.href; |
|
258 var time = IriSP.retrieveTimeFragment( url ); |
|
259 IriSP.trace( "__IriSP.APIplayer.prototype.ready", time ); |
|
260 if( IriSP.MyApiPlayer.hashchangeUpdate==null ){ |
|
261 IriSP.MyApiPlayer.seek( time ); |
|
262 |
|
263 } else { |
|
264 IriSP.MyApiPlayer.hashchangeUpdate = null; |
|
265 } |
|
266 }, false ); |
|
267 |
|
268 } else if (window.attachEvent){ |
|
269 // for ie hashchange EVENT |
|
270 window.attachEvent( "onhashchange", function() { |
|
271 IriSP.trace( "hashchange",time ); |
|
272 var url = window.location.href; |
|
273 var time = IriSP.retrieveTimeFragment( url ); |
|
274 if( IriSP.MyApiPlayer.hashchangeUpdate == null ){ |
|
275 IriSP.MyApiPlayer.seek(time); |
|
276 } else { |
|
277 IriSP.MyApiPlayer.hashchangeUpdate = null; |
|
278 } |
|
279 }, false); |
|
280 } |
|
281 |
|
282 // Search |
|
283 //__IriSP.jQuery("#LdtSearchInput").change(function() {__IriSP.Search(this.value);}); |
|
284 //__IriSP.jQuery("#LdtSearchInput").live('change', function(event) {__IriSP.Search(this.value);}); |
|
285 IriSP.jQuery( "#LdtSearchInput" ).keydown( function() { IriSP.Search( this.value );} ); |
|
286 IriSP.jQuery("#LdtSearchInput").keyup( function() { IriSP.Search( this.value );} ); |
|
287 |
|
288 }; |
|
289 |
|
290 __IriSP.APIplayer.prototype.pause = function(){ |
|
291 this.hashchangeUpdate = true; |
|
292 IriSP.player.sendEvent( 'PAUSE' ); |
|
293 }; |
|
294 |
|
295 __IriSP.APIplayer.prototype.play = function() { |
|
296 this.hashchangeUpdate = true; |
|
297 //__IriSP.trace("__IriSP.config.player.type",__IriSP.config.player.type); |
|
298 if( IriSP.config.player.type=='jwplayer' ){ |
|
299 |
|
300 IriSP.player.sendEvent( 'PLAY' ); |
|
301 |
|
302 } else if(IriSP.config.player.type == 'dailymotion' |
|
303 || IriSP.config.player.type == 'youtube' ) { |
|
304 |
|
305 var status = IriSP.player.getPlayerState(); |
|
306 IriSP.trace( "__IriSP.APIplayer.prototype.play.status", status); |
|
307 if ( status != 1 ){ |
|
308 IriSP.player.playVideo(); |
|
309 } else { |
|
310 IriSP.player.pauseVideo(); |
|
311 } |
|
312 } |
|
313 }; |
|
314 |
|
315 __IriSP.APIplayer.prototype.mute = function() { |
|
316 IriSP.player.sendEvent( 'MUTE' ); |
|
317 |
|
318 //alert(__IriSP.jQuery(".ui-icon-volume-on").css("background-position-x")); |
|
319 /* FIXME : remove hardcoded values */ |
|
320 if ( IriSP.jQuery( ".ui-icon-volume-on" ).css( "background-position" ) == "-144px -160px" ){ |
|
321 IriSP.jQuery(" .ui-icon-volume-on ").css(" background-position ", "-130px -160px"); |
|
322 } else { |
|
323 IriSP.jQuery( ".ui-icon-volume-on" ).css( "background-position", "-144px -160px" ); |
|
324 } |
|
325 }; |
|
326 |
|
327 /* FIXME : rename */ |
|
328 __IriSP.APIplayer.prototype.share = function( network ) { |
|
329 |
|
330 /* FIXME : remove hardcoded */ |
|
331 var MyMessage = encodeURIComponent( "J'écoute Les Retours du Dimanche : " ); |
|
332 var MyURLNow = window.location.href; |
|
333 var shareURL = null; |
|
334 //alert(network+" : "+MyURLNow); |
|
335 |
|
336 /* FIXME : use a sharing library */ |
|
337 if(network == "facebook"){ |
|
338 shareURL = "http://www.facebook.com/share.php?u="; |
|
339 }else if(network == "twitter"){ |
|
340 shareURL = "http://twitter.com/home?status="+MyMessage; |
|
341 }else if(network == "myspace"){ |
|
342 shareURL ="http://www.myspace.com/Modules/PostTo/Pages/?u="; |
|
343 }else if(network == "delicious"){ |
|
344 shareURL = "http://delicious.com/save?url="; |
|
345 }else if(network == "JameSpot"){ |
|
346 shareURL = "http://www.jamespot.com/?action=spotit&u="; |
|
347 //alert(network+" non actif pour l'instant : "+MyURLNow); |
|
348 } |
|
349 |
|
350 if (shareURL != null) |
|
351 window.open( shareURL+encodeURIComponent(MyURLNow) ); |
|
352 //window.location.href = shareURL+encodeURIComponent(MyURLNow); |
|
353 }; |
|
354 |
|
355 __IriSP.APIplayer.prototype.seek = function (time) { |
|
356 |
|
357 if( time==0 ) { time=1; } |
|
358 |
|
359 IriSP.trace( "__IriSP.APIplayer.prototype.seek", time ); |
|
360 |
|
361 if( IriSP.config.player.type=='jwplayer') { |
|
362 //__IriSP.MyApiPlayer.play() |
|
363 IriSP.player.sendEvent( 'SEEK', time ); |
|
364 } else if( IriSP.config.player.type=='dailymotion' |
|
365 || IriSP.config.player.type=='youtube' ) { |
|
366 IriSP.player.seekTo( time ); |
|
367 } |
|
368 |
|
369 this.changePageUrlOffset( time ); |
|
370 }; |
|
371 |
|
372 __IriSP.APIplayer.prototype.update = function (time) { |
|
373 |
|
374 if( time != 0 ) { |
|
375 this.hashchangeUpdate = true; |
|
376 |
|
377 IriSP.trace( "__IriSP.APIplayer.prototype.update" ,time); |
|
378 IriSP.player.sendEvent( 'SEEK', time ); |
|
379 } |
|
380 }; |
|
381 |
|
382 __IriSP.APIplayer.prototype.changePageUrlOffset = function ( time ) { |
|
383 //alert(time); |
|
384 IriSP.trace( "__IriSP.APIplayer.prototype.changePageUrlOffset" , "CHANGE URL "+ time); |
|
385 |
|
386 window.location.hash = "#t=" + time; |
|
387 window.location.href = window.location.href; |
|
388 |
|
389 }; |
|
390 |
|
391 /* Media Fragment functionality by Silvia Pfeiffer */ |
|
392 |
|
393 IriSP.jumpToTimeoffset = function ( form ) { |
|
394 var time = form.time.value; |
|
395 IriSP.MyApiPlayer.changePageUrlOffset( time ); |
|
396 }; |
|
397 |
|
398 IriSP.retrieveTimeFragment = function ( url ) { |
|
399 var pageoffset = 0; |
|
400 var offsettime = 0; |
|
401 |
|
402 if ( url.split("#")[1] != null ) { |
|
403 pageoffset = url.split( "#" )[1]; |
|
404 if ( pageoffset.substring( 2 ) != null ) { |
|
405 offsettime = pageoffset.substring( 2 ); |
|
406 } |
|
407 } |
|
408 return offsettime; |
|
409 }; |
|
410 |
|
411 IriSP.ignoreTimeFragment = function( url ){ |
|
412 |
|
413 var pageurl = url; |
|
414 |
|
415 if ( url.split( "#" )[1] != null ) { |
|
416 pageurl = url.split( "#" )[0]; |
|
417 } |
|
418 |
|
419 return pageurl; |
|
420 }; |
|
421 |
|
422 |
|
423 /* code specific to jwplayer / creation and listener */ |
|
424 |
|
425 IriSP.currentPosition = 0; |
|
426 IriSP.currentVolume = 50; |
|
427 IriSP.player = null; |
|
428 IriSP.startPosition = null; |
|
429 IriSP.firstplay = false; |
|
430 |
|
431 |
|
432 |
|
433 IriSP.createPlayer = function ( url, streamerPath ) { |
|
434 if( IriSP.config.player.type=='dailymotion' ) { |
|
435 IriSP.config.player.src = IriSP.config.player.src+"&chromeless=1&enableApi=1"; |
|
436 } else if ( IriSP.config.player.type=='youtube' ){ |
|
437 IriSP.config.player.src = IriSP.config.player.src+"&enablejsapi=1&version=3"; |
|
438 } |
|
439 |
|
440 IriSP.trace( "__IriSP.createPlayer", "start" ); |
|
441 |
|
442 IriSP.myUrlFragment = url.split( streamerPath ); |
|
443 |
|
444 var configTemp = IriSP.jQuery.extend( true, {}, IriSP.config ); |
|
445 configTemp.player.flashvars.autostart = "true"; |
|
446 configTemp.player.flashvars.streamer = streamerPath; |
|
447 configTemp.player.flashvars.file = IriSP.myUrlFragment[1]; |
|
448 |
|
449 var flashvars = configTemp.player.flashvars; |
|
450 var params = configTemp.player.params; |
|
451 var attributes = configTemp.player.attributes; |
|
452 |
|
453 IriSP.trace( |
|
454 "__IriSP.createPlayer", |
|
455 "SWFOBJECT src:"+ |
|
456 IriSP.config.player.src+ |
|
457 " " +IriSP.config.gui.width+ |
|
458 " " +IriSP.config.gui.height |
|
459 ); |
|
460 |
|
461 swfobject.embedSWF( |
|
462 IriSP.config.player.src, |
|
463 "Ldt-PlaceHolder", |
|
464 IriSP.config.gui.width, |
|
465 IriSP.config.gui.height, |
|
466 "9.0.115", // FIXME : de-hardcode version ? |
|
467 false, |
|
468 flashvars, |
|
469 params, |
|
470 attributes |
|
471 ); |
|
472 |
|
473 // need a methode to |
|
474 // re execute if this swf call does'nt work |
|
475 }; |
|
476 |
|
477 |
|
478 /* jw player api */ |
|
479 IriSP.playerReady = function (thePlayer) { |
|
480 |
|
481 //__IriSP.trace("__IriSP.playerReady","PLAYER READY !!!!!!!!!!!!"); |
|
482 IriSP.player = window.document[thePlayer.id]; |
|
483 //__IriSP.trace("__IriSP.playerReady","API CALL "+__IriSP.player); |
|
484 IriSP.MyApiPlayer.ready( IriSP.player ); |
|
485 //__IriSP.trace("__IriSP.playerReady","API CALL END "); |
|
486 |
|
487 var url = document.location.href; |
|
488 var time = IriSP.retrieveTimeFragment( url ); |
|
489 //__IriSP.trace("__IriSP.playerReady"," "+url+" "+time ); |
|
490 IriSP.startPosition = time; |
|
491 //__IriSP.trace("__IriSP.playerReady"," LISTENER LAUCHER"); |
|
492 IriSP.addListeners(); |
|
493 //__IriSP.trace("__IriSP.playerReady"," LISTENER END"); |
|
494 |
|
495 }; |
|
496 |
|
497 IriSP.addListeners = function () { |
|
498 if ( IriSP.player ) { |
|
499 IriSP.trace("__IriSP.addListeners","ADD Listener "); |
|
500 IriSP.player.addModelListener( "TIME", "__IriSP.positionListener"); |
|
501 IriSP.player.addControllerListener( "VOLUME", "__IriSP.volumeListener" ); |
|
502 IriSP.player.addModelListener( 'STATE', '__IriSP.stateMonitor' ); |
|
503 } else { |
|
504 IriSP.setTimeout( "__IriSP.addListeners()", 100 ); |
|
505 } |
|
506 |
|
507 // et changer les boutons |
|
508 }; |
|
509 |
|
510 IriSP.stateMonitor = function ( obj ) { |
|
511 |
|
512 if(obj.newstate == 'PAUSED') { |
|
513 IriSP.trace( "__IriSP.stateMonitor", "PAUSE" ); |
|
514 IriSP.MyApiPlayer.changePageUrlOffset( IriSP.currentPosition ); |
|
515 IriSP.jQuery( ".ui-icon-play" ).css( "background-position","0px -160px" ); |
|
516 |
|
517 } else if (obj.newstate == 'PLAYING' ){ |
|
518 |
|
519 IriSP.trace( "__IriSP.stateMonitor", "PLAYING "+IriSP.startPosition ); |
|
520 |
|
521 // force buffering even if autostart is disabled. |
|
522 if ( IriSP.config.player.flashvars.autostart == "false" && IriSP.firstplay == false && IriSP.startPosition == 0 ) { |
|
523 IriSP.trace("__IriSP.stateMonitor","first stop ???"); |
|
524 IriSP.MyApiPlayer.play(); |
|
525 IriSP.firstplay = true; |
|
526 IriSP.MyLdt.checkTime( 1 ); |
|
527 } |
|
528 |
|
529 // once that the video is loaded, move it to the correct timecode |
|
530 if( IriSP.startPosition!=null ){ |
|
531 IriSP.MyApiPlayer.update( IriSP.startPosition ); |
|
532 IriSP.startPosition = null; |
|
533 } |
|
534 |
|
535 |
|
536 IriSP.jQuery( ".ui-icon-play" ).css( "background-position", "-16px -160px" ); |
|
537 } else if (obj.newstate == 'BUFFERING'){ |
|
538 IriSP.trace( "__IriSP.stateMonitor", "BUFFERING : "+IriSP.config.player.flashvars.autostart ); |
|
539 //changePageUrlOffset(currentPosition); |
|
540 } |
|
541 |
|
542 }; |
|
543 |
|
544 IriSP.positionListener = function(obj) { |
|
545 //__IriSP.trace("__IriSP.positionListener",obj.position); |
|
546 IriSP.currentPosition = obj.position; |
|
547 var tmp = document.getElementById( "posit" ); |
|
548 if (tmp) { tmp.innerHTML = "position: " + IriSP.currentPosition; } |
|
549 IriSP.jQuery( "#slider-range-min" ).slider( "value", obj.position); |
|
550 IriSP.jQuery( "#amount" ).val(obj.position+" s"); |
|
551 // display annotation |
|
552 IriSP.MyLdt.checkTime( IriSP.currentPosition ); |
|
553 |
|
554 }; |
|
555 |
|
556 IriSP.volumeListener = function (obj) { |
|
557 IriSP.currentVolume = obj.percentage; |
|
558 var tmp = document.getElementById("vol"); |
|
559 if (tmp) { tmp.innerHTML = "volume: " + IriSP.currentVolume; } |
|
560 }; |
|
561 |
|
562 |
|
563 /* dailymotion api */ |
|
564 onDailymotionPlayerReady = function (playerid) { |
|
565 |
|
566 //alert(playerid); |
|
567 IriSP.player = document.getElementById( IriSP.config.player.attributes.id ); |
|
568 IriSP.MyApiPlayer.ready( IriSP.player ); |
|
569 |
|
570 var url = document.location.href; |
|
571 var time = IriSP.retrieveTimeFragment( url ); |
|
572 IriSP.startPosition = time; |
|
573 IriSP.DailymotionAddListeners(); |
|
574 |
|
575 IriSP.MyApiPlayer.ready(playerid); |
|
576 }; |
|
577 |
|
578 IriSP.DailymotionAddListeners = function () { |
|
579 if ( IriSP.player ) { |
|
580 IriSP.trace( "__IriSP.addListeners","ADD Listener " ); |
|
581 //__IriSP.player.addEventListener("onStateChange", "__IriSP.DailymotionPositionListener"); |
|
582 setTimeout( "__IriSP.DailymotionPositionListener()", 100); |
|
583 IriSP.DailymotionPositionListener(); |
|
584 /* FIXME : works only with jwplayer */ |
|
585 IriSP.player.addModelListener( "VOLUME", "__IriSP.volumeListener" ); |
|
586 //__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor'); |
|
587 } else { |
|
588 IriSP.setTimeout( "__IriSP.DailymotionAddListeners()", 100); |
|
589 } |
|
590 }; |
|
591 |
|
592 IriSP.DailymotionPositionListener = function() { |
|
593 |
|
594 IriSP.currentPosition = IriSP.player.getCurrentTime(); |
|
595 //__IriSP.trace("__IriSP.DailymotionPositionListener",__IriSP.currentPosition); |
|
596 //__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition); |
|
597 |
|
598 IriSP.jQuery( "#slider-range-min" ).slider( "value" , IriSP.currentPosition); |
|
599 IriSP.jQuery( "#amount" ).val( IriSP.currentPosition+" s" ); |
|
600 // afficher annotation |
|
601 /*__IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
602 */ |
|
603 |
|
604 setTimeout( "__IriSP.DailymotionPositionListener()", 10 ); |
|
605 }; |
|
606 |
|
607 /* youtube api */ |
|
608 onYouTubePlayerReady= function (playerid){ |
|
609 |
|
610 var url = document.location.href; |
|
611 var time = IriSP.retrieveTimeFragment( url ); |
|
612 IriSP.player = document.getElementById( IriSP.config.player.attributes.id ); |
|
613 IriSP.startPosition = time; |
|
614 |
|
615 IriSP.MyApiPlayer.ready( IriSP.player ); |
|
616 |
|
617 IriSP.MyApiPlayer.seek( time ); |
|
618 IriSP.MyApiPlayer.play(); |
|
619 |
|
620 |
|
621 IriSP.YouTubeAddListeners(); |
|
622 IriSP.trace( "onYouTubePlayerReady=", time); |
|
623 //__IriSP.MyApiPlayer.ready(playerid); |
|
624 }; |
|
625 |
|
626 IriSP.YouTubeAddListeners = function () { |
|
627 if ( IriSP.player ) { |
|
628 IriSP.trace( "__IriSP.addListeners", "ADD Listener " ); |
|
629 IriSP.player.addEventListener( "onStateChange", "__IriSP.YouTubeStateMonitor" ); |
|
630 setTimeout( "__IriSP.YouTubePositionListener()", 100 ); |
|
631 |
|
632 /* FIXME : works only with jwplayer */ |
|
633 IriSP.player.addModelListener( "VOLUME", "__IriSP.volumeListener" ); |
|
634 //__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor'); |
|
635 } else { |
|
636 } |
|
637 }; |
|
638 |
|
639 IriSP.YouTubePositionListener = function() { |
|
640 |
|
641 IriSP.currentPosition = IriSP.player.getCurrentTime(); |
|
642 //__IriSP.trace("__IriSP.YouTubePositionListener",__IriSP.currentPosition); |
|
643 //__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition); |
|
644 |
|
645 IriSP.MyLdt.checkTime(IriSP.currentPosition); |
|
646 IriSP.jQuery( "#slider-range-min" ).slider( "value", IriSP.currentPosition ); |
|
647 IriSP.jQuery( "#amount" ).val( IriSP.currentPosition+" s" ); |
|
648 // afficher annotation |
|
649 IriSP.MyLdt.checkTime( IriSP.currentPosition ); |
|
650 |
|
651 |
|
652 setTimeout( "__IriSP.YouTubePositionListener()", 10 ); |
|
653 }; |
|
654 |
|
655 IriSP.YouTubeStateMonitor = function (obj) { |
|
656 IriSP.player.addModelListener( '__IriSP.YouTubeStateMonitor ', newstate ); |
|
657 //alert(newstate+" "+obj.newstate); |
|
658 if(newstate == '2') { |
|
659 IriSP.trace("__IriSP.stateMonitor","PAUSE"); |
|
660 IriSP.MyApiPlayer.changePageUrlOffset( IriSP.currentPosition ); |
|
661 |
|
662 } else if (newstate == '1' || newstate == '1') { |
|
663 // une fois la video prete a lire la déplacer au bon timecode |
|
664 if( IriSP.startPosition!=null ) { |
|
665 IriSP.MyApiPlayer.update( IriSP.startPosition ); |
|
666 IriSP.startPosition = null; |
|
667 } |
|
668 } else if (newstate == '3'){ |
|
669 IriSP.trace("__IriSP.stateMonitor","BUFFERING : "); |
|
670 //changePageUrlOffset(currentPosition); |
|
671 } |
|
672 |
|
673 }; |
|
674 |
|
675 |
|
676 /* utils */ |
|
677 // code from http://stackoverflow.com/questions/822452/strip-html-from-text-javascript |
|
678 /* FIXME: maybe make it a little more robust */ |
|
679 IriSP.stripHtml = function(s){ |
|
680 return s.replace(/\\&/g, '&').replace(/\\</g, '<').replace(/\\>/g, '>').replace(/\\t/g, ' ').replace(/\\n/g, '<br />').replace(/'/g, ''').replace(/"/g, '"'); |
|
681 }; |
|
682 |
|
683 // conversion de couleur Decimal vers HexaDecimal || 000 si fff |
|
684 /* FIXME : move it somewhere else */ |
|
685 IriSP.DEC_HEXA_COLOR = function (dec) { |
|
686 var hexa='0123456789ABCDEF',hex=''; |
|
687 var tmp; |
|
688 while (dec>15){ |
|
689 tmp = dec-(Math.floor(dec/16))*16; |
|
690 hex = hexa.charAt(tmp)+hex; |
|
691 dec = Math.floor(dec/16); |
|
692 } |
|
693 hex = hexa.charAt(dec)+hex; |
|
694 if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ } |
|
695 return(hex); |
|
696 }; |
|
697 |
|
698 |
|
699 /* Search methods */ |
|
700 IriSP.SearchOldValue=""; |
|
701 IriSP.searchblockOpen=false; |
|
702 IriSP.searchblock = function () { |
|
703 IriSP.trace( "__IriSP.searchblock", IriSP.searchblockOpen ); |
|
704 |
|
705 if ( IriSP.searchblockOpen == false ) { |
|
706 IriSP.jQuery( ".ui-icon-search" ).css( "background-position", "-144px -112px" ); |
|
707 //__IriSP.jQuery("#LdtSearch").animate({height:26},250); |
|
708 IriSP.jQuery("#LdtSearch").show(250); |
|
709 /* FIXME : refactor this */ |
|
710 IriSP.jQuery("#LdtSearchInput").css('background-color','#fff'); |
|
711 IriSP.jQuery("#LdtSearchInput").focus(); |
|
712 IriSP.jQuery("#LdtSearchInput").attr('value',IriSP.SearchOldValue); |
|
713 IriSP.Search(IriSP.SearchOldValue); |
|
714 IriSP.searchblockOpen = true; |
|
715 } else { |
|
716 IriSP.SearchOldValue = IriSP.jQuery("#LdtSearchInput").attr('value'); |
|
717 IriSP.jQuery("#LdtSearchInput").attr('value',''); |
|
718 IriSP.SearchClean(); |
|
719 IriSP.jQuery(".ui-icon-search").css("background-position","-160px -112px"); |
|
720 //__IriSP.jQuery("#LdtSearch").animate({height:0},250); |
|
721 IriSP.jQuery("#LdtSearch").hide(250); |
|
722 IriSP.searchblockOpen = false; |
|
723 } |
|
724 }; |
|
725 |
|
726 /* Search with typeahead */ |
|
727 IriSP.Search = function ( value ){ |
|
728 |
|
729 annotations = IriSP.LDTligne.annotations; |
|
730 |
|
731 IriSP.trace("__IriSP.Search", annotations.length+" "+value); |
|
732 |
|
733 var found = 0; |
|
734 var findmem = 0; |
|
735 var factor = 0; |
|
736 IriSP.trace(value,value.length); |
|
737 var valueS = value.toLowerCase(); |
|
738 IriSP.trace("__IriSP.Search", annotations.length+" "+valueS); |
|
739 if(valueS.length>=3){ |
|
740 |
|
741 for (var i=0; i < annotations.length; ++i){ |
|
742 annotation = annotations[i]; |
|
743 |
|
744 IriSP.jQuery("#output2").text(annotation.title+" ?= "+value); |
|
745 |
|
746 chaine1 = annotation.title.toLowerCase(); |
|
747 chaine2 = annotation.description.toLowerCase(); |
|
748 chaine3 = annotation.htmlTags.toLowerCase(); |
|
749 |
|
750 if(chaine1.indexOf(valueS,0) !=-1){ |
|
751 found+=1; |
|
752 } |
|
753 if(chaine2.indexOf(valueS,0) !=-1){ |
|
754 found+=1; |
|
755 } |
|
756 if(chaine3.indexOf(valueS,0) !=-1){ |
|
757 found+=1; |
|
758 } |
|
759 |
|
760 findmem += found; |
|
761 if(found>0){ |
|
762 factor = found*8; |
|
763 IriSP.jQuery("#"+annotation.id).dequeue(); |
|
764 IriSP.jQuery("#"+annotation.id).animate({height:factor},200); |
|
765 IriSP.jQuery("#"+annotation.id).css('border','2px'); |
|
766 IriSP.jQuery("#"+annotation.id).css('border-color','red'); |
|
767 IriSP.jQuery("#"+annotation.id).animate({opacity:0.6},200); |
|
768 |
|
769 IriSP.trace("!!!!!!!!!!!!!!!!!!"," ?= "+annotation.id); |
|
770 IriSP.jQuery("#LdtSearchInput").css('background-color','#e1ffe1'); |
|
771 }else { |
|
772 IriSP.jQuery("#"+annotation.id).dequeue(); |
|
773 IriSP.jQuery("#"+annotation.id).animate({height:0},250); |
|
774 IriSP.jQuery("#"+annotation.id).animate({opacity:0.3},200); |
|
775 } |
|
776 |
|
777 found = 0; |
|
778 } |
|
779 if(findmem==0){ |
|
780 IriSP.jQuery("#LdtSearchInput").css('background-color','#f6f6f6'); |
|
781 } |
|
782 |
|
783 } else if(value.length==0){ |
|
784 IriSP.SearchClean(); |
|
785 IriSP.jQuery("#LdtSearchInput").css('background-color','#fff'); |
|
786 } else { |
|
787 IriSP.SearchClean(); |
|
788 IriSP.jQuery("#LdtSearchInput").css('background-color','#f6f6f6'); |
|
789 } |
|
790 }; |
|
791 |
|
792 IriSP.SearchClean = function (){ |
|
793 annotations = IriSP.LDTligne.annotations; |
|
794 |
|
795 for (var i=0; i < annotations.length; ++i){ |
|
796 annotation = annotations[i]; |
|
797 IriSP.jQuery("#"+annotation.id).dequeue(); |
|
798 IriSP.jQuery("#"+annotation.id).animate({height:0},100); |
|
799 IriSP.jQuery("#"+annotation.id).css('border','0px'); |
|
800 IriSP.jQuery("#"+annotation.id).css('border-color','red'); |
|
801 IriSP.jQuery("#"+annotation.id).animate({opacity:0.3},100); |
|
802 } |
|
803 }; |
|
804 |
|
805 |
|
806 IriSP.SearchThisSegment = function (annotation){ |
|
807 /* FIXME: to implement */ |
|
808 IriSP.jQuery("#LdtSearchInput").text(annotation.title); |
|
809 IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",annotation.title); |
|
810 /*__IriSP.jQuery("#Ldt-SaDescription").text(annotationTempo.description); |
|
811 __IriSP.jQuery("#Ldt-SaKeywordText").html("Mots clefs : "+annotationTempo.htmlTags);*/ |
|
812 }; |
|
813 |
|
814 |
|
815 /* CLASS Ligne (annotationType) */ |
|
816 |
|
817 IriSP.LDTligne = null; |
|
818 __IriSP.Ligne = function( id, title, description, duration ) { |
|
819 this.id = id; |
|
820 this.title = title; |
|
821 this.description = description; |
|
822 // |
|
823 this.annotations = new Array(); |
|
824 this.duration = duration; |
|
825 this.annotationOldRead = ""; |
|
826 IriSP.LDTligne = this; |
|
827 IriSP.trace("__IriSP.Ligne","CREATE "+IriSP.LDTligne); |
|
828 }; |
|
829 |
|
830 __IriSP.Ligne.prototype.addAnnotation = function ( id, begin, end, media, title, description, color, tags ) { |
|
831 var myAnnotation = new __IriSP.Annotation(id,begin,end,media,title,description,color,tags,this.duration); |
|
832 this.annotations.push(myAnnotation); |
|
833 //__IriSP.trace("__IriSP.Ligne.prototype.addAnnotation ","add annotation "+title); |
|
834 }; |
|
835 |
|
836 __IriSP.Ligne.prototype.onClickLigneAnnotation = function( id ) { |
|
837 /* TODO implement */ |
|
838 //changePageUrlOffset(currentPosition); |
|
839 //player.sendEvent('SEEK', this.start); |
|
840 //__IriSP.trace("SEEK",this.start); |
|
841 }; |
|
842 |
|
843 __IriSP.Ligne.prototype.searchLigneAnnotation = function( id ) { |
|
844 /* TODO implement */ |
|
845 /*for (){ |
|
846 }*/ |
|
847 }; |
|
848 |
|
849 __IriSP.Ligne.prototype.listAnnotations = function() { |
|
850 /* TODO implement */ |
|
851 }; |
|
852 |
|
853 __IriSP.Ligne.prototype.nextAnnotation = function () { |
|
854 |
|
855 var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1; |
|
856 var annotationCible = this.annotations[annotationCibleNumber]; |
|
857 |
|
858 if( annotationCibleNumber<this.annotations.length-1 ){ |
|
859 IriSP.player.sendEvent( 'SEEK', annotationCible.begin/1000 ); |
|
860 IriSP.trace( "LIGNE ", "| next = "+annotationCibleNumber+" - "+this.annotations.length+" | seek :"+annotationCible.begin/1000); |
|
861 } else { |
|
862 IriSP.player.sendEvent( 'SEEK', this.annotations[0].begin/1000); |
|
863 } |
|
864 |
|
865 }; |
|
866 |
|
867 __IriSP.Ligne.prototype.numAnnotation = function (annotationCible){ |
|
868 for (var i=0; i < this.annotations.length; ++i){ |
|
869 if(annotationCible == this.annotations[i]){ |
|
870 return i; |
|
871 } |
|
872 } |
|
873 }; |
|
874 |
|
875 __IriSP.Ligne.prototype.checkTime = function(time){ |
|
876 |
|
877 var annotationTempo = -1; |
|
878 //__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",time); |
|
879 //__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",this.annotations.length); |
|
880 |
|
881 for (var i=0; i < this.annotations.length; ++i){ |
|
882 annotationTempo = this.annotations[i]; |
|
883 |
|
884 //__IriSP.SearchThisSegment(annotationTempo); |
|
885 |
|
886 if (time>annotationTempo.begin/1000 && time<annotationTempo.end/1000){ |
|
887 |
|
888 // different form the previous |
|
889 if(annotationTempo!=this.annotationOldRead){ |
|
890 this.annotationOldRead = annotationTempo; |
|
891 IriSP.jQuery("#Ldt-SaTitle").text(annotationTempo.title); |
|
892 IriSP.jQuery("#Ldt-SaDescription").text(annotationTempo.description); |
|
893 IriSP.jQuery("#Ldt-SaKeywordText").html("Mots clefs : "+annotationTempo.htmlTags); |
|
894 |
|
895 //__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown(); |
|
896 var startPourcent = annotationTempo.timeToPourcent((annotationTempo.begin*1+(annotationTempo.end*1-annotationTempo.begin*1)/2),annotationTempo.duration*1); |
|
897 IriSP.jQuery("#Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000); |
|
898 IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000); |
|
899 //alert(startPourcent); |
|
900 var tempolinkurl = IriSP.ignoreTimeFragment(window.location.href)+"#t="+(this.annotations[i].begin/1000); |
|
901 } |
|
902 break; |
|
903 } else { |
|
904 annotationTempo = -1; |
|
905 } |
|
906 |
|
907 } |
|
908 // si il y en a pas : retractation du volet |
|
909 if( annotationTempo == -1){ |
|
910 if(annotationTempo != this.annotationOldRead){ |
|
911 IriSP.trace("Check : ","pas d'annotation ici "); |
|
912 IriSP.jQuery("#Ldt-SaTitle").text(""); |
|
913 IriSP.jQuery("#Ldt-SaDescription").text(""); |
|
914 IriSP.jQuery("#Ldt-SaKeywordText").html(""); |
|
915 IriSP.jQuery('#Ldt-ShowAnnotation').slideUp(); |
|
916 if(this.annotationOldRead){ |
|
917 IriSP.jQuery("#"+this.annotationOldRead.id).animate({alpha:'70%'},1000); |
|
918 } |
|
919 //__IriSP.jQuery("#Ldt-Show-Arrow").animate({left:'0%'},1000); |
|
920 this.annotationOldRead = annotationTempo; |
|
921 } |
|
922 } |
|
923 //__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",annotationTempo); |
|
924 }; |
|
925 |
|
926 |
|
927 /* CLASS Annotation */ |
|
928 |
|
929 __IriSP.Annotation = function (){ |
|
930 var id = null; |
|
931 var begin = null; |
|
932 var end = null; |
|
933 var media = null; |
|
934 var description = null; |
|
935 var title = null; |
|
936 var color = null; |
|
937 var tags = null; |
|
938 IriSP.trace("annotation ","réussi"); |
|
939 }; |
|
940 |
|
941 __IriSP.Annotation = function( id, begin, end, media, title, description, color, tags, duration ){ |
|
942 this.id = id; |
|
943 this.begin = begin; |
|
944 this.end = end; |
|
945 this.media = media; |
|
946 this.description = description; |
|
947 this.title = title; |
|
948 this.color = color; |
|
949 this.tags = tags; |
|
950 this.htmlTags = ""; |
|
951 this.duration = duration; |
|
952 // draw it |
|
953 this.draw(); |
|
954 this.drawTags(); |
|
955 // |
|
956 IriSP.trace("Annotation created : ",id); |
|
957 }; |
|
958 |
|
959 __IriSP.Annotation.prototype.draw = function(){ |
|
960 //alert (this.duration); |
|
961 var startPourcent = this.timeToPourcent(this.begin,this.duration); // temps du media |
|
962 var endPourcent = this.timeToPourcent(this.end,this.duration)-startPourcent; |
|
963 var divTitle = this.title.substr(0,55); |
|
964 |
|
965 //IriSP.jQueryAnnotationTemplate = "<div title='"+IriSP.stripHtml(titleForDiv)+"' |
|
966 //id='"+this.id+"' class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' |
|
967 //width='100%' style=\"left:"+startPourcent+"%; width:"+endPourcent+"%; |
|
968 //padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; |
|
969 //background:#"+IriSP.DEC_HEXA_COLOR(this.color)+";\" |
|
970 //onClick=\"__IriSP.MyApiPlayer.seek('"+Math.round(this.begin/1000)+"'); |
|
971 //__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown();\" ></div> "; |
|
972 //alert(this.color+" : "+DEC_HEXA_COLOR(this.color)); |
|
973 |
|
974 IriSP.jQueryAnnotationTemplate = Mustache.to_html(IriSP.annotation_template, |
|
975 {"divTitle" : divTitle, "id" : this.id, "startPourcent" : startPourcent, |
|
976 "endPourcent" : endPourcent, "hexa_color" : IriSP.DEC_HEXA_COLOR(this.color), |
|
977 "seekPlace" : Math.round(this.begin/1000)}); |
|
978 |
|
979 IriSP.jQuerytoolTipTemplate = Mustache.to_html(IriSP.tooltip_template, |
|
980 {"title" : this.title, "begin" : this.begin, "end" : this.end, |
|
981 "description": this.description}); |
|
982 |
|
983 |
|
984 IriSP.jQuery("<div>"+IriSP.jQueryAnnotationTemplate+"</div>").appendTo("#Ldt-Annotations"); |
|
985 // TOOLTIP BUG ! |
|
986 |
|
987 IriSP.jQuery("#"+this.id).tooltip({ effect: 'slide'}); |
|
988 |
|
989 |
|
990 IriSP.jQuery("#"+this.id).fadeTo(0,0.3); |
|
991 IriSP.jQuery("#"+this.id).mouseover(function() { |
|
992 IriSP.jQuery("#"+this.id).animate({opacity: 0.6}, 5); |
|
993 }).mouseout(function(){ |
|
994 IriSP.jQuery("#"+this.id).animate({opacity: 0.3}, 5); |
|
995 }); |
|
996 IriSP.trace("__IriSP.Annotation.prototype.draw","ADD ANOTATION : "+this.begin+" "+this.end+" "+IriSP.stripHtml(this.title)+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration); |
|
997 |
|
998 }; |
|
999 |
|
1000 __IriSP.Annotation.prototype.drawTags = function(){ |
|
1001 /* FIXME : to implement */ |
|
1002 var KeywordPattern = '<a href=\"\"> '+' </a>'; |
|
1003 |
|
1004 //__IriSP.trace(" !? Tags : ",this.tags); |
|
1005 |
|
1006 if (this.tags!=undefined){ |
|
1007 for (var i = 0; i < this.tags.length; ++i){ |
|
1008 |
|
1009 //this.htmlTags += '<span onclick=\"ShowTag('+this.tags[i]['id-ref']+');\" > '+MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , "; |
|
1010 this.htmlTags += '<span> '+IriSP.MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , "; |
|
1011 |
|
1012 } |
|
1013 } |
|
1014 }; |
|
1015 |
|
1016 __IriSP.Annotation.prototype.tootTipAnnotation = function() { |
|
1017 // 1 chercher le div correspondant |
|
1018 // 2 y mettre les information |
|
1019 return this.color + ' ' + this.type + ' apple'; |
|
1020 }; |
|
1021 |
|
1022 __IriSP.Annotation.prototype.onRollOverAnnotation = function (){ |
|
1023 this.tootTip(); |
|
1024 }; |
|
1025 |
|
1026 __IriSP.Annotation.prototype.timeToPourcent = function(time,timetotal){ |
|
1027 return (parseInt(Math.round(time/timetotal*100))); |
|
1028 }; |
|
1029 |
|
1030 |
|
1031 /* CLASS Tags */ |
|
1032 |
|
1033 __IriSP.Tags = function(object){ |
|
1034 this.myTags = object; |
|
1035 this.htmlTags = null; |
|
1036 this.weigthMax = 0; |
|
1037 //this.mySegments = new array(); |
|
1038 }; |
|
1039 |
|
1040 __IriSP.Tags.prototype.addAnnotation = function (annotation){ |
|
1041 for (var i = 0; i < this.myTags.length; ++i){ |
|
1042 this.myTags[i].mySegments = new Array(); |
|
1043 if (annotation.tags!=null){ |
|
1044 for (var j = 0; j < annotation.tags.length; ++j){ |
|
1045 if (this.myTags[i]['id'] == annotation.tags[j]['id-ref']){ |
|
1046 this.myTags[i].mySegments.push([annotation.begin,annotation.end,annotation.id]); |
|
1047 var weigthTempo = this.myTags[i].mySegments.length; |
|
1048 var tempo = this.myTags[i].mySegments[weigthTempo-1]; |
|
1049 //__IriSP.trace ("__IriSP.Tags.prototype.addAnnotation "," "+this.myTags[i]['meta']['dc:title']+" "+this.myTags[i]['id']+" : "+tempo[0]+" - "+tempo[1]); |
|
1050 |
|
1051 if (this.weigthMax < weigthTempo ){ |
|
1052 this.weigthMax = weigthTempo; |
|
1053 } |
|
1054 } |
|
1055 } |
|
1056 } |
|
1057 } |
|
1058 }; |
|
1059 |
|
1060 __IriSP.Tags.prototype.getTitle = function (id){ |
|
1061 for (var i = 0; i < this.myTags.length; ++i){ |
|
1062 if(this.myTags[i]['id']==id){ |
|
1063 return(this.myTags[i]['meta']['dc:title']); |
|
1064 } |
|
1065 } |
|
1066 |
|
1067 }; |
|
1068 |
|
1069 __IriSP.Tags.prototype.draw = function (){ |
|
1070 |
|
1071 IriSP.trace("__IriSP.Tags.prototype.draw"," !!! WELL START " ); |
|
1072 for (var i = 0; i < this.myTags.length; ++i){ |
|
1073 IriSP.trace("__IriSP.Tags.prototype.draw"," ADD Tags : "+this.myTags[i]['id']); |
|
1074 if(this.myTags[i]['id']!=null){ |
|
1075 this.htmlTags += '<span onclick=\"MyTags.show( \''+this.myTags[i]['id'] |
|
1076 +'\');\" style=\"font-size:' +((this.myTags[i].mySegments.length/this.weigthMax*10)+8) |
|
1077 +'px;\" alt=\"'+this.myTags[i].mySegments.length |
|
1078 +'\"> '+this.myTags[i]['meta']['dc:title']+' </span>'+' , '; |
|
1079 } |
|
1080 } |
|
1081 |
|
1082 IriSP.jQuery('#Ldt-Tags').html(this.htmlTags); |
|
1083 IriSP.trace("__IriSP.Tags.prototype.draw"," !!!! END WMAX= "+this.weigthMax ); |
|
1084 |
|
1085 }; |
|
1086 |
|
1087 __IriSP.Tags.prototype.show = function (id){ |
|
1088 |
|
1089 var timeStartOffsetA = 100000000000000000000; |
|
1090 var timeStartOffsetB = 100000000000000000000; |
|
1091 var timeEndOffsetA = 0; |
|
1092 var timeEndOffsetB = 0; |
|
1093 var timeStartID; |
|
1094 var timeEndID; |
|
1095 var WidthPourCent; |
|
1096 var leftPourCent; |
|
1097 var timeStartOffset; |
|
1098 |
|
1099 // case 1 : seul segment |
|
1100 // case 2 : 2 ou X segments |
|
1101 |
|
1102 |
|
1103 for (var i = 0; i < this.myTags.length; ++i){ |
|
1104 if (this.myTags[i]['id']==id){ |
|
1105 IriSP.trace("######### TAG DRAWing : "," END" ); |
|
1106 |
|
1107 for (var j = 0; j < this.myTags[i].mySegments.length; ++j){ |
|
1108 if(timeStartOffset> this.myTags[i].mySegments[j][0]){ |
|
1109 timeStartOffsetA = this.myTags[i].mySegments[j][0]; |
|
1110 timeStartOffsetB = this.myTags[i].mySegments[j][1]; |
|
1111 timeStartID = this.myTags[i].mySegments[j][2] |
|
1112 } |
|
1113 if(timeStartOffset> this.myTags[i].mySegments[j][0]){ |
|
1114 timeEndOffsetA = this.myTags[i].mySegments[j][0]; |
|
1115 timeEndOffsetB = this.myTags[i].mySegments[j][1]; |
|
1116 timeEndID = this.myTags[i].mySegments[j][2] |
|
1117 } |
|
1118 } |
|
1119 |
|
1120 } |
|
1121 } |
|
1122 |
|
1123 // ------------------------------------------------- |
|
1124 // |
|
1125 // ------------------------------------------------- |
|
1126 |
|
1127 leftPourCent = IriSP.timeToPourcent((timeStartOffsetA*1+(timeStartOffsetB-timeStartOffsetA)/2),IriSP.MyLdt.duration); |
|
1128 WidthPourCent = IriSP.timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),IriSP.MyLdt.duration)-leftPourCent; |
|
1129 //WidthPourCent = timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),MyLdt.duration)-startPourcent; |
|
1130 IriSP.jQuery("#Ldt-Show-Tags").css('left',leftPourCent+'%'); |
|
1131 IriSP.jQuery("#Ldt-Show-Tags").css('width',WidthPourCent+'%'); |
|
1132 IriSP.jQuery("#Ldt-Show-Tags").text('joijoij'); |
|
1133 // like arrow script |
|
1134 |
|
1135 |
|
1136 |
|
1137 }; |
|
1138 |
|
1139 |
|
1140 IriSP.annotation_template = "<div title='{{divTitle}}' id='{{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:#{{hexa_color}};' onClick='IriSP.MyApiPlayer.seek({{seekPlace}});IriSP.jQuery(\"#Ldt-ShowAnnotation\").slideDown();'></div>"; |
|
1141 IriSP.annotation_loading_template = "<div id='Ldt-load-container'><div id='Ldt-loader'> </div> Chargement... </div>"; |
|
1142 IriSP.radio_template = "<div id='Ldt-Root'> <div id='Ldt-PlaceHolder'> <a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player </div> <div id='Ldt-controler' class='demo'> <div class='Ldt-Control1'> <button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause</button> <button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button> </div> <div id='Ldt-Annotations' class='ui-slider'> <div id='slider-range-min'></div> </div> <div class='Ldt-Control2'> <button id='ldt-CtrlLink' onclick='__IriSP.searchblock()'> Rechercher</button> <button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button> </div> <div class='cleaner'> </div> <div id='Ldt-Show-Arrow-container'> <div id='Ldt-Show-Arrow'></div> </div> </div> <div> <div id='ldt-Show'></div> <div id='Ldt-ShowAnnotation-audio' class='demo'> <div id='Ldt-SaTitle'></div> <div id='Ldt-SaDescription'></div> <div class='cleaner'> <!-- \;--> </div> </div> <div id='Ldt-SaKeyword'> <div id='Ldt-SaKeywordText'></div> <div class='cleaner'></div> <div id='Ldt-SaShareTools'>{{{share_template}}}</div> <div class='cleaner'></div> </div> <div id='Ldt-Tags'>Mots clefs :</div> </div> <div id='Ldt-output' style='clear: left; float: none; position: relative; height: 200px; width: {{width}}px; overflow: scroll;'> </div>"; |
|
1143 IriSP.search_template = "<div id='LdtSearchContainer' style='margin-left: 445px; position: absolute;'> <div id='LdtSearch' style='display: none; background-color: #EEE; width: 165px; boder: 1px; border-color: #CFCFCF; position: absolute; text-align: center;'> <input id='LdtSearchInput' style='margin-top: 2px; margin-bottom: 2px;' /> </div></div><div class='cleaner'></div>"; |
|
1144 IriSP.share_template = "<a onclick='__IriSP.MyApiPlayer.share(\'delicious\');' title='partager avec delicious'><span class='share shareDelicious'> </span></a> <a onclick='__IriSP.MyApiPlayer.share(\'facebook\');' title='partager avec facebook'> <span class='share shareFacebook'> </span></a><a onclick='__IriSP.MyApiPlayer.share(\'twitter\');' title='partager avec twitter'> <span class='share shareTwitter'> </span></a><a onclick='__IriSP.MyApiPlayer.share(\'myspace\');' title='partager avec Myspace'> <span class='share shareMySpace'> </span></a>"; |
|
1145 IriSP.tooltip_template = " <div class='Ldt-tooltip'><div class='title'>{{title}}</div><div class='time'>{{begin}} : {{end}} </div><div class='description'>{{description}}</div></div>"; |
|
1146 IriSP.video_template = "<div id='LdtSearchContainer' style='margin-top: {{heightS}} px; margin-left: 445px; position: absolute;'> <div id='LdtSearch' style='background-color: #EEE; display: none; width: 165px; boder: 1px; border-color: #CFCFCF; position: absolute; text-align: center; z-index: 999;'> <input id='LdtSearchInput' style='margin-top: 2px; margin-bottom: 2px;' /> </div></div><div id='Ldt-Root'> <div id='Ldt-PlaceHolder'> <a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player </div> <div id='Ldt-controler' class='demo'> <div class='Ldt-Control1'> <button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause</button> <button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button> </div> <div id='Ldt-Annotations' class='ui-slider'> <div id='slider-range-min'></div> </div> <div class='Ldt-Control2'> <button id='ldt-CtrlLink' onclick='__IriSP.searchblock()'> Rechercher</button> <button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button> </div> <div class='cleaner'> \;</div> <div id='Ldt-Show-Arrow-container'> <div id='Ldt-Show-Arrow'></div> </div> </div> <div> <div id='ldt-Show'></div> <div id='Ldt-ShowAnnotation-audio' class='demo'> <div id='Ldt-SaTitle'></div> <div id='Ldt-SaDescription'></div> <div class='cleaner'> <!-- \;--> </div> </div> <div id='Ldt-SaKeyword'> <div id='Ldt-SaKeywordText'></div> <div class='cleaner'></div> <div id='Ldt-SaShareTools'>{{{share_template}}}</div> <div class='cleaner'></div> </div> <div id='Ldt-Tags'>Mots clefs :</div> </div> <div id='Ldt-output'></div>";/* |
|
1147 mustache.js — Logic-less templates in JavaScript |
|
1148 |
|
1149 See http://mustache.github.com/ for more info. |
|
1150 */ |
|
1151 |
|
1152 var Mustache = function() { |
|
1153 var Renderer = function() {}; |
|
1154 |
|
1155 Renderer.prototype = { |
|
1156 otag: "{{", |
|
1157 ctag: "}}", |
|
1158 pragmas: {}, |
|
1159 buffer: [], |
|
1160 pragmas_implemented: { |
|
1161 "IMPLICIT-ITERATOR": true |
|
1162 }, |
|
1163 context: {}, |
|
1164 |
|
1165 render: function(template, context, partials, in_recursion) { |
|
1166 // reset buffer & set context |
|
1167 if(!in_recursion) { |
|
1168 this.context = context; |
|
1169 this.buffer = []; // TODO: make this non-lazy |
|
1170 } |
|
1171 |
|
1172 // fail fast |
|
1173 if(!this.includes("", template)) { |
|
1174 if(in_recursion) { |
|
1175 return template; |
|
1176 } else { |
|
1177 this.send(template); |
|
1178 return; |
|
1179 } |
|
1180 } |
|
1181 |
|
1182 template = this.render_pragmas(template); |
|
1183 var html = this.render_section(template, context, partials); |
|
1184 if(in_recursion) { |
|
1185 return this.render_tags(html, context, partials, in_recursion); |
|
1186 } |
|
1187 |
|
1188 this.render_tags(html, context, partials, in_recursion); |
|
1189 }, |
|
1190 |
|
1191 /* |
|
1192 Sends parsed lines |
|
1193 */ |
|
1194 send: function(line) { |
|
1195 if(line !== "") { |
|
1196 this.buffer.push(line); |
|
1197 } |
|
1198 }, |
|
1199 |
|
1200 /* |
|
1201 Looks for %PRAGMAS |
|
1202 */ |
|
1203 render_pragmas: function(template) { |
|
1204 // no pragmas |
|
1205 if(!this.includes("%", template)) { |
|
1206 return template; |
|
1207 } |
|
1208 |
|
1209 var that = this; |
|
1210 var regex = new RegExp(this.otag + "%([\\w-]+) ?([\\w]+=[\\w]+)?" + |
|
1211 this.ctag, "g"); |
|
1212 return template.replace(regex, function(match, pragma, options) { |
|
1213 if(!that.pragmas_implemented[pragma]) { |
|
1214 throw({message: |
|
1215 "This implementation of mustache doesn't understand the '" + |
|
1216 pragma + "' pragma"}); |
|
1217 } |
|
1218 that.pragmas[pragma] = {}; |
|
1219 if(options) { |
|
1220 var opts = options.split("="); |
|
1221 that.pragmas[pragma][opts[0]] = opts[1]; |
|
1222 } |
|
1223 return ""; |
|
1224 // ignore unknown pragmas silently |
|
1225 }); |
|
1226 }, |
|
1227 |
|
1228 /* |
|
1229 Tries to find a partial in the curent scope and render it |
|
1230 */ |
|
1231 render_partial: function(name, context, partials) { |
|
1232 name = this.trim(name); |
|
1233 if(!partials || partials[name] === undefined) { |
|
1234 throw({message: "unknown_partial '" + name + "'"}); |
|
1235 } |
|
1236 if(typeof(context[name]) != "object") { |
|
1237 return this.render(partials[name], context, partials, true); |
|
1238 } |
|
1239 return this.render(partials[name], context[name], partials, true); |
|
1240 }, |
|
1241 |
|
1242 /* |
|
1243 Renders inverted (^) and normal (#) sections |
|
1244 */ |
|
1245 render_section: function(template, context, partials) { |
|
1246 if(!this.includes("#", template) && !this.includes("^", template)) { |
|
1247 return template; |
|
1248 } |
|
1249 |
|
1250 var that = this; |
|
1251 // CSW - Added "+?" so it finds the tighest bound, not the widest |
|
1252 var regex = new RegExp(this.otag + "(\\^|\\#)\\s*(.+)\\s*" + this.ctag + |
|
1253 "\n*([\\s\\S]+?)" + this.otag + "\\/\\s*\\2\\s*" + this.ctag + |
|
1254 "\\s*", "mg"); |
|
1255 |
|
1256 // for each {{#foo}}{{/foo}} section do... |
|
1257 return template.replace(regex, function(match, type, name, content) { |
|
1258 var value = that.find(name, context); |
|
1259 if(type == "^") { // inverted section |
|
1260 if(!value || that.is_array(value) && value.length === 0) { |
|
1261 // false or empty list, render it |
|
1262 return that.render(content, context, partials, true); |
|
1263 } else { |
|
1264 return ""; |
|
1265 } |
|
1266 } else if(type == "#") { // normal section |
|
1267 if(that.is_array(value)) { // Enumerable, Let's loop! |
|
1268 return that.map(value, function(row) { |
|
1269 return that.render(content, that.create_context(row), |
|
1270 partials, true); |
|
1271 }).join(""); |
|
1272 } else if(that.is_object(value)) { // Object, Use it as subcontext! |
|
1273 return that.render(content, that.create_context(value), |
|
1274 partials, true); |
|
1275 } else if(typeof value === "function") { |
|
1276 // higher order section |
|
1277 return value.call(context, content, function(text) { |
|
1278 return that.render(text, context, partials, true); |
|
1279 }); |
|
1280 } else if(value) { // boolean section |
|
1281 return that.render(content, context, partials, true); |
|
1282 } else { |
|
1283 return ""; |
|
1284 } |
|
1285 } |
|
1286 }); |
|
1287 }, |
|
1288 |
|
1289 /* |
|
1290 Replace {{foo}} and friends with values from our view |
|
1291 */ |
|
1292 render_tags: function(template, context, partials, in_recursion) { |
|
1293 // tit for tat |
|
1294 var that = this; |
|
1295 |
|
1296 var new_regex = function() { |
|
1297 return new RegExp(that.otag + "(=|!|>|\\{|%)?([^\\/#\\^]+?)\\1?" + |
|
1298 that.ctag + "+", "g"); |
|
1299 }; |
|
1300 |
|
1301 var regex = new_regex(); |
|
1302 var tag_replace_callback = function(match, operator, name) { |
|
1303 switch(operator) { |
|
1304 case "!": // ignore comments |
|
1305 return ""; |
|
1306 case "=": // set new delimiters, rebuild the replace regexp |
|
1307 that.set_delimiters(name); |
|
1308 regex = new_regex(); |
|
1309 return ""; |
|
1310 case ">": // render partial |
|
1311 return that.render_partial(name, context, partials); |
|
1312 case "{": // the triple mustache is unescaped |
|
1313 return that.find(name, context); |
|
1314 default: // escape the value |
|
1315 return that.escape(that.find(name, context)); |
|
1316 } |
|
1317 }; |
|
1318 var lines = template.split("\n"); |
|
1319 for(var i = 0; i < lines.length; i++) { |
|
1320 lines[i] = lines[i].replace(regex, tag_replace_callback, this); |
|
1321 if(!in_recursion) { |
|
1322 this.send(lines[i]); |
|
1323 } |
|
1324 } |
|
1325 |
|
1326 if(in_recursion) { |
|
1327 return lines.join("\n"); |
|
1328 } |
|
1329 }, |
|
1330 |
|
1331 set_delimiters: function(delimiters) { |
|
1332 var dels = delimiters.split(" "); |
|
1333 this.otag = this.escape_regex(dels[0]); |
|
1334 this.ctag = this.escape_regex(dels[1]); |
|
1335 }, |
|
1336 |
|
1337 escape_regex: function(text) { |
|
1338 // thank you Simon Willison |
|
1339 if(!arguments.callee.sRE) { |
|
1340 var specials = [ |
|
1341 '/', '.', '*', '+', '?', '|', |
|
1342 '(', ')', '[', ']', '{', '}', '\\' |
|
1343 ]; |
|
1344 arguments.callee.sRE = new RegExp( |
|
1345 '(\\' + specials.join('|\\') + ')', 'g' |
|
1346 ); |
|
1347 } |
|
1348 return text.replace(arguments.callee.sRE, '\\$1'); |
|
1349 }, |
|
1350 |
|
1351 /* |
|
1352 find `name` in current `context`. That is find me a value |
|
1353 from the view object |
|
1354 */ |
|
1355 find: function(name, context) { |
|
1356 name = this.trim(name); |
|
1357 |
|
1358 // Checks whether a value is thruthy or false or 0 |
|
1359 function is_kinda_truthy(bool) { |
|
1360 return bool === false || bool === 0 || bool; |
|
1361 } |
|
1362 |
|
1363 var value; |
|
1364 if(is_kinda_truthy(context[name])) { |
|
1365 value = context[name]; |
|
1366 } else if(is_kinda_truthy(this.context[name])) { |
|
1367 value = this.context[name]; |
|
1368 } |
|
1369 |
|
1370 if(typeof value === "function") { |
|
1371 return value.apply(context); |
|
1372 } |
|
1373 if(value !== undefined) { |
|
1374 return value; |
|
1375 } |
|
1376 // silently ignore unkown variables |
|
1377 return ""; |
|
1378 }, |
|
1379 |
|
1380 // Utility methods |
|
1381 |
|
1382 /* includes tag */ |
|
1383 includes: function(needle, haystack) { |
|
1384 return haystack.indexOf(this.otag + needle) != -1; |
|
1385 }, |
|
1386 |
|
1387 /* |
|
1388 Does away with nasty characters |
|
1389 */ |
|
1390 escape: function(s) { |
|
1391 s = String(s === null ? "" : s); |
|
1392 return s.replace(/&(?!\w+;)|["'<>\\]/g, function(s) { |
|
1393 switch(s) { |
|
1394 case "&": return "&"; |
|
1395 case "\\": return "\\\\"; |
|
1396 case '"': return '"'; |
|
1397 case "'": return '''; |
|
1398 case "<": return "<"; |
|
1399 case ">": return ">"; |
|
1400 default: return s; |
|
1401 } |
|
1402 }); |
|
1403 }, |
|
1404 |
|
1405 // by @langalex, support for arrays of strings |
|
1406 create_context: function(_context) { |
|
1407 if(this.is_object(_context)) { |
|
1408 return _context; |
|
1409 } else { |
|
1410 var iterator = "."; |
|
1411 if(this.pragmas["IMPLICIT-ITERATOR"]) { |
|
1412 iterator = this.pragmas["IMPLICIT-ITERATOR"].iterator; |
|
1413 } |
|
1414 var ctx = {}; |
|
1415 ctx[iterator] = _context; |
|
1416 return ctx; |
|
1417 } |
|
1418 }, |
|
1419 |
|
1420 is_object: function(a) { |
|
1421 return a && typeof a == "object"; |
|
1422 }, |
|
1423 |
|
1424 is_array: function(a) { |
|
1425 return Object.prototype.toString.call(a) === '[object Array]'; |
|
1426 }, |
|
1427 |
|
1428 /* |
|
1429 Gets rid of leading and trailing whitespace |
|
1430 */ |
|
1431 trim: function(s) { |
|
1432 return s.replace(/^\s*|\s*$/g, ""); |
|
1433 }, |
|
1434 |
|
1435 /* |
|
1436 Why, why, why? Because IE. Cry, cry cry. |
|
1437 */ |
|
1438 map: function(array, fn) { |
|
1439 if (typeof array.map == "function") { |
|
1440 return array.map(fn); |
|
1441 } else { |
|
1442 var r = []; |
|
1443 var l = array.length; |
|
1444 for(var i = 0; i < l; i++) { |
|
1445 r.push(fn(array[i])); |
|
1446 } |
|
1447 return r; |
|
1448 } |
|
1449 } |
|
1450 }; |
|
1451 |
|
1452 return({ |
|
1453 name: "mustache.js", |
|
1454 version: "0.3.1-dev", |
|
1455 |
|
1456 /* |
|
1457 Turns a template and view into HTML |
|
1458 */ |
|
1459 to_html: function(template, view, partials, send_fun) { |
|
1460 var renderer = new Renderer(); |
|
1461 if(send_fun) { |
|
1462 renderer.send = send_fun; |
|
1463 } |
|
1464 renderer.render(template, view, partials); |
|
1465 if(!send_fun) { |
|
1466 return renderer.buffer.join("\n"); |
|
1467 } |
|
1468 } |
|
1469 }); |
|
1470 }(); |
|
1471 /* utils.js - various utils that don't belong anywhere else */ |
|
1472 |
|
1473 /* trace function, for debugging */ |
|
1474 |
|
1475 IriSP.traceNum = 0; |
|
1476 IriSP.trace = function( msg, value ) { |
|
1477 |
|
1478 if( IriSP.config.gui.debug === true ) { |
|
1479 IriSP.traceNum += 1; |
|
1480 IriSP.jQuery( "<div>"+IriSP.traceNum+" - "+msg+" : "+value+"</div>" ).appendTo( "#Ldt-output" ); |
|
1481 } |
|
1482 }; |
|
1483 |
|
1484 /* data.js - this file deals with how the players gets and sends data */ |
|
1485 |
|
1486 IriSP.getMetadata = function() { |
|
1487 |
|
1488 IriSP.jQuery.ajax({ |
|
1489 dataType: IriSP.config.metadata.load, |
|
1490 url:IriSP.config.metadata.src, |
|
1491 success : function( json ){ |
|
1492 |
|
1493 IriSP.trace( "ajax", "success" ); |
|
1494 |
|
1495 // START PARSING ----------------------- |
|
1496 if( json === "" ){ |
|
1497 alert( "Json load error" ); |
|
1498 } else { |
|
1499 // # CREATE MEDIA // |
|
1500 // # JUSTE ONE PLAYER FOR THE MOMENT // |
|
1501 //__IriSP.jQuery("<div></div>").appendTo("#output"); |
|
1502 var MyMedia = new __IriSP.Media( |
|
1503 json.medias[0].id, |
|
1504 json.medias[0].href, |
|
1505 json.medias[0]['meta']['dc:duration'], |
|
1506 json.medias[0]['dc:title'], |
|
1507 json.medias[0]['dc:description']); |
|
1508 |
|
1509 IriSP.trace( "__IriSP.MyApiPlayer", |
|
1510 IriSP.config.gui.width+" " |
|
1511 + IriSP.config.gui.height + " " |
|
1512 + json.medias[0].href + " " |
|
1513 + json.medias[0]['meta']['dc:duration'] + " " |
|
1514 + json.medias[0]['meta']['item']['value']); |
|
1515 |
|
1516 // Create APIplayer |
|
1517 IriSP.MyApiPlayer = new __IriSP.APIplayer ( |
|
1518 IriSP.config.gui.width, |
|
1519 IriSP.config.gui.height, |
|
1520 json.medias[0].href, |
|
1521 json.medias[0]['meta']['dc:duration'], |
|
1522 json.medias[0]['meta']['item']['value']); |
|
1523 |
|
1524 // # CREATE THE FIRST LINE // |
|
1525 IriSP.trace( "__IriSP.init.main","__IriSP.Ligne" ); |
|
1526 IriSP.MyLdt = new __IriSP.Ligne( |
|
1527 json['annotation-types'][0].id, |
|
1528 json['annotation-types'][0]['dc:title'], |
|
1529 json['annotation-types'][0]['dc:description'], |
|
1530 json.medias[0]['meta']['dc:duration']); |
|
1531 |
|
1532 // CREATE THE TAG CLOUD // |
|
1533 IriSP.trace( "__IriSP.init.main","__IriSP.Tags" ); |
|
1534 IriSP.MyTags = new __IriSP.Tags( json.tags ); |
|
1535 |
|
1536 // CREATE THE ANNOTATIONS // |
|
1537 // JUSTE FOR THE FIRST TYPE // |
|
1538 /* FIXME: make it support more than one ligne de temps */ |
|
1539 IriSP.jQuery.each( json.annotations, function(i,item) { |
|
1540 if (item.meta['id-ref'] == IriSP.MyLdt.id) { |
|
1541 //__IriSP.trace("__IriSP.init.main","__IriSP.MyLdt.addAnnotation"); |
|
1542 IriSP.MyLdt.addAnnotation( |
|
1543 item.id, |
|
1544 item.begin, |
|
1545 item.end, |
|
1546 item.media, |
|
1547 item.content.title, |
|
1548 item.content.description, |
|
1549 item.content.color, |
|
1550 item.tags); |
|
1551 } |
|
1552 //MyTags.addAnnotation(item); |
|
1553 } ); |
|
1554 IriSP.jQuery.each( json.lists, function(i,item) { |
|
1555 IriSP.trace("lists",""); |
|
1556 } ); |
|
1557 IriSP.jQuery.each( json.views, function(i,item) { |
|
1558 IriSP.trace("views",""); |
|
1559 } ); |
|
1560 } |
|
1561 // END PARSING ----------------------- // |
|
1562 |
|
1563 |
|
1564 }, error : function(data){ |
|
1565 alert("ERROR : "+data); |
|
1566 } |
|
1567 }); |
|
1568 |
|
1569 }/* site.js - all our site-dependent config : player chrome, cdn locations, etc...*/ |
|
1570 |
|
1571 IriSP.lib = { |
|
1572 jQuery:"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", |
|
1573 jQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js", |
|
1574 jQueryToolTip:"http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js", |
|
1575 swfObject:"http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js", |
|
1576 cssjQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" |
|
1577 }; |
|
1578 |
|
1579 //Player Configuration |
|
1580 IriSP.config = undefined; |
|
1581 IriSP.configDefault = { |
|
1582 metadata:{ |
|
1583 format:'cinelab', |
|
1584 src:'', |
|
1585 load:'jsonp' |
|
1586 }, |
|
1587 gui:{ |
|
1588 width:650, |
|
1589 height:0, |
|
1590 mode:'radio', |
|
1591 container:'LdtPlayer', |
|
1592 debug:false, |
|
1593 css:'../src/css/LdtPlayer.css' |
|
1594 }, |
|
1595 player:{ |
|
1596 type:'jwplayer', |
|
1597 src:'../res/swf/player.swf', |
|
1598 params:{ |
|
1599 allowfullscreen:"true", |
|
1600 allowscriptaccess:"always", |
|
1601 wmode:"transparent" |
|
1602 }, |
|
1603 flashvars:{ |
|
1604 streamer:"streamer", |
|
1605 file:"file", |
|
1606 live:"true", |
|
1607 autostart:"false", |
|
1608 controlbar:"none", |
|
1609 playerready:"IriSP.playerReady" |
|
1610 }, |
|
1611 attributes:{ |
|
1612 id:"Ldtplayer1", |
|
1613 name:"Ldtplayer1" |
|
1614 } |
|
1615 }, |
|
1616 module:null |
|
1617 }; |
|
1618 |
|
1619 /* ui.js - ui related functions */ |
|
1620 |
|
1621 /* FIXME: use an sharing library */ |
|
1622 IriSP.LdtShareTool = IriSP.share_template; /* the contents come from share.html */ |
|
1623 |
|
1624 IriSP.createPlayerChrome = function(){ |
|
1625 var width = IriSP.config.gui.width; |
|
1626 var height = IriSP.config.gui.height; |
|
1627 var heightS = IriSP.config.gui.height-20; |
|
1628 |
|
1629 // AUDIO */ |
|
1630 // PB dans le html : ; |
|
1631 IriSP.trace( "__IriSP.createMyHtml",IriSP.config.gui.container ); |
|
1632 |
|
1633 |
|
1634 /* FIXME : factor this in another file */ |
|
1635 if( IriSP.config.gui.mode=="radio" ){ |
|
1636 |
|
1637 IriSP.jQuery( "#"+IriSP.config.gui.container ).before(IriSP.search_template); |
|
1638 var radioPlayer = Mustache.to_html(IriSP.radio_template, {"share_template" : IriSP.share_template}); |
|
1639 IriSP.jQuery(radioPlayer).appendTo("#"+IriSP.config.gui.container); |
|
1640 |
|
1641 // special tricks for IE 7 |
|
1642 if (IriSP.jQuery.browser.msie==true && IriSP.jQuery.browser.version=="7.0"){ |
|
1643 //LdtSearchContainer |
|
1644 //__IriSP.jQuery("#LdtPlayer").attr("margin-top","50px"); |
|
1645 IriSP.jQuery("#Ldt-Root").css("padding-top","25px"); |
|
1646 IriSP.trace("__IriSP.createHtml","IE7 SPECIAL "); |
|
1647 } |
|
1648 } else if(IriSP.config.gui.mode=="video") { |
|
1649 |
|
1650 var videoPlayer = Mustache.to_html(IriSP.video_template, {"share_template" : IriSP.share_template, "heightS" : heightS}); |
|
1651 IriSP.jQuery(videoPlayer).appendTo("#"+IriSP.config.gui.container); |
|
1652 } |
|
1653 |
|
1654 /* FIXME : move it elsewhere */ |
|
1655 IriSP.trace("__IriSP.createHtml",IriSP.jQuery.browser.msie+" "+IriSP.jQuery.browser.version); |
|
1656 IriSP.trace("__IriSP.createHtml","end"); |
|
1657 IriSP.jQuery("#Ldt-Annotations").width(width-(75*2)); |
|
1658 IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2)); |
|
1659 IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10); |
|
1660 IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10); |
|
1661 IriSP.jQuery("#Ldt-SaKeyword").width(width-10); |
|
1662 IriSP.jQuery("#Ldt-controler").width(width-10); |
|
1663 IriSP.jQuery("#Ldt-Control").attr("z-index","100"); |
|
1664 IriSP.jQuery("#Ldt-controler").hide(); |
|
1665 |
|
1666 IriSP.jQuery(IriSP.annotation_loading_template).appendTo("#Ldt-ShowAnnotation-audio"); |
|
1667 |
|
1668 if(IriSP.config.gui.mode=='radio'){ |
|
1669 IriSP.jQuery("#Ldt-load-container").attr("width",IriSP.config.gui.width); |
|
1670 } |
|
1671 // Show or not the output |
|
1672 if(IriSP.config.gui.debug===true){ |
|
1673 IriSP.jQuery("#Ldt-output").show(); |
|
1674 } else { |
|
1675 IriSP.jQuery("#Ldt-output").hide(); |
|
1676 } |
|
1677 |
|
1678 }; |
|
1679 |
|
1680 |
|
1681 /* create the buttons and the slider */ |
|
1682 IriSP.createInterface = function( width, height, duration ) { |
|
1683 |
|
1684 IriSP.jQuery( "#Ldt-controler" ).show(); |
|
1685 //__IriSP.jQuery("#Ldt-Root").css('display','visible'); |
|
1686 IriSP.trace( "__IriSP.createInterface" , width+","+height+","+duration+"," ); |
|
1687 |
|
1688 IriSP.jQuery( "#Ldt-ShowAnnotation").click( function () { |
|
1689 //__IriSP.jQuery(this).slideUp(); |
|
1690 } ); |
|
1691 |
|
1692 var LdtpPlayerY = IriSP.jQuery("#Ldt-PlaceHolder").attr("top"); |
|
1693 var LdtpPlayerX = IriSP.jQuery("#Ldt-PlaceHolder").attr("left"); |
|
1694 |
|
1695 IriSP.jQuery( "#slider-range-min" ).slider( { //range: "min", |
|
1696 value: 0, |
|
1697 min: 1, |
|
1698 max: duration/1000,//1:54:52.66 = 3600+3240+ |
|
1699 step: 0.1, |
|
1700 slide: function(event, ui) { |
|
1701 |
|
1702 //__IriSP.jQuery("#amount").val(ui.value+" s"); |
|
1703 //player.sendEvent('SEEK', ui.value) |
|
1704 IriSP.MyApiPlayer.seek(ui.value); |
|
1705 //changePageUrlOffset(ui.value); |
|
1706 //player.sendEvent('PAUSE') |
|
1707 } |
|
1708 } ); |
|
1709 |
|
1710 IriSP.trace("__IriSP.createInterface","ICI"); |
|
1711 IriSP.jQuery("#amount").val(IriSP.jQuery("#slider-range-min").slider("value")+" s"); |
|
1712 IriSP.jQuery(".Ldt-Control1 button:first").button({ |
|
1713 icons: { |
|
1714 primary: 'ui-icon-play' |
|
1715 }, |
|
1716 text: false |
|
1717 }).next().button({ |
|
1718 icons: { |
|
1719 primary: 'ui-icon-seek-next' |
|
1720 }, |
|
1721 text: false |
|
1722 }); |
|
1723 IriSP.jQuery(".Ldt-Control2 button:first").button({ |
|
1724 icons: { |
|
1725 primary: 'ui-icon-search'//, |
|
1726 //secondary: 'ui-icon-volume-off' |
|
1727 }, |
|
1728 text: false |
|
1729 }).next().button({ |
|
1730 icons: { |
|
1731 primary: 'ui-icon-volume-on' |
|
1732 }, |
|
1733 text: false |
|
1734 }); |
|
1735 |
|
1736 // /!\ PB A MODIFIER |
|
1737 //__IriSP.MyTags.draw(); |
|
1738 IriSP.trace("__IriSP.createInterface","ICI2"); |
|
1739 IriSP.jQuery( "#ldt-CtrlPlay" ).attr( "style", "background-color:#CD21C24;" ); |
|
1740 |
|
1741 IriSP.jQuery( "#Ldt-load-container" ).hide(); |
|
1742 |
|
1743 if( IriSP.config.gui.mode=="radio" & IriSP.jQuery.browser.msie != true ) { |
|
1744 IriSP.jQuery( "#Ldtplayer1" ).attr( "height", "0" ); |
|
1745 } |
|
1746 IriSP.trace( "__IriSP.createInterface" , "3" ); |
|
1747 |
|
1748 IriSP.trace( "__IriSP.createInterface", "END" ); |
|
1749 |
|
1750 }; |