28 resizeVideo(); |
28 resizeVideo(); |
29 |
29 |
30 var timeSlider = $("#progressBar"), |
30 var timeSlider = $("#progressBar"), |
31 slidersRange = 1000, |
31 slidersRange = 1000, |
32 wasPaused = true, |
32 wasPaused = true, |
33 lastVal = 0, |
33 lastVal = 0; |
34 isClicking = false; |
|
35 timeSlider.slider({ |
34 timeSlider.slider({ |
36 range: "min", |
35 range: "min", |
37 value: 0, |
36 value: 0, |
38 min: 0, |
37 min: 0, |
39 max: slidersRange, |
38 max: slidersRange, |
40 slide: function(event, ui) { |
39 slide: function(event, ui) { |
41 if (isClicking && Math.abs(lastVal - ui.value) > 10) { |
40 currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange); |
42 isClicking = false; |
|
43 } |
|
44 if (!isClicking && currentMedia) { |
|
45 currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange); |
|
46 } |
|
47 }, |
|
48 start: function(event, ui) { |
|
49 isClicking = true; |
|
50 lastVal = ui.value; |
|
51 }, |
|
52 stop: function(event, ui) { |
|
53 if (isClicking && currentMedia) { |
|
54 timeSlider.slider("value", slidersRange * currentMedia.getCurrentTime() / currentMedia.duration); |
|
55 playOrPause(); |
|
56 } |
|
57 isClicking = false; |
|
58 } |
41 } |
59 }); |
42 }); |
60 |
43 |
61 function playOrPause() { |
44 function playOrPause() { |
62 if (currentMedia) { |
45 if (currentMedia) { |
127 }); |
110 }); |
128 |
111 |
129 $(window).on("resize", resizeTagsDrag); |
112 $(window).on("resize", resizeTagsDrag); |
130 resizeTagsDrag(); |
113 resizeTagsDrag(); |
131 |
114 |
132 var taginput = $("#form_tag input[type=text]"); |
115 var taginput = $("#form_tag input[type=text]"), |
|
116 replacerx; |
133 taginput.autocomplete({ |
117 taginput.autocomplete({ |
134 source: function(params, response) { |
118 source: function(params, response) { |
135 var rx = new RegExp(params.term,"gi"); |
119 var charsub = [ '[aáàâä]', '[cç]', '[eéèêë]', '[iíìîï]', '[oóòôö]' ], |
|
120 term = params.term.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1'); |
|
121 _(charsub).each(function(chars) { |
|
122 var tmprx = new RegExp(chars,"gim"); |
|
123 term = term.replace(tmprx, chars); |
|
124 }); |
|
125 var searchrx = new RegExp("(^|\\s)" + term, "i"); |
|
126 replacerx = new RegExp("(^|\\s)(" + term + ")", "gi"); |
136 response( |
127 response( |
137 _(globalTags) |
128 _(globalTags) |
138 .chain() |
129 .chain() |
139 .keys() |
130 .keys() |
140 .filter(function(tag) { |
131 .filter(function(tag) { |
141 return rx.test(tag) |
132 return searchrx.test(tag) |
142 }) |
133 }) |
143 .shuffle() |
134 .sortBy(_.identity) |
144 .first(5) |
|
145 .value() |
135 .value() |
146 ); |
136 ); |
147 } |
137 } |
148 }); |
138 }).data("autocomplete")._renderItem = function(ul, item) { |
|
139 return $( "<li>" ) |
|
140 .data( "item.autocomplete", item ) |
|
141 .append( "<a>" + item.label.replace(replacerx, '$1<b>$2</b>') + "</a>" ) |
|
142 .appendTo( ul ); |
|
143 }; |
149 taginput.on("keyup input paste", function() { |
144 taginput.on("keyup input paste", function() { |
150 taginput.val(taginput.val().toUpperCase()); |
145 taginput.val(taginput.val().toUpperCase()); |
151 }); |
146 }); |
152 $("#form_tag").on("submit", function() { |
147 $("#form_tag").on("submit", function() { |
153 var _tagvalue = taginput.val().toUpperCase(); |
148 var _tagvalue = taginput.val().toUpperCase(); |
|
149 taginput.val(""); |
154 if (_tagvalue && currentSegment) { |
150 if (_tagvalue && currentSegment) { |
155 /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ |
151 /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ |
156 var _exportedAnnotations = new IriSP.Model.List(directory), |
152 var _exportedAnnotations = new IriSP.Model.List(directory), |
157 /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */ |
153 /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */ |
158 _export = directory.newLocalSource({ |
154 _export = directory.newLocalSource({ |
175 _annotation.setBegin(currentSegment.begin); |
171 _annotation.setBegin(currentSegment.begin); |
176 _annotation.setEnd(currentSegment.end); |
172 _annotation.setEnd(currentSegment.end); |
177 |
173 |
178 _annotation.setAnnotationType(_annotationType.id); |
174 _annotation.setAnnotationType(_annotationType.id); |
179 |
175 |
180 _annotation.title = _tagvalue; |
176 _annotation.title = currentSegment.title; |
181 _annotation.created = new Date(); /* Date de création de l'annotation */ |
177 _annotation.created = new Date(); /* Date de création de l'annotation */ |
182 _annotation.description = _tagvalue; |
178 _annotation.description = _tagvalue; |
183 |
179 |
184 _annotation.setTags([_tag.id]); /*Liste des ids de tags */ |
180 _annotation.setTags([_tag.id]); /*Liste des ids de tags */ |
185 |
181 |
186 /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */ |
182 _annotation.creator = "theend"; |
187 _export.creator = "theend"; |
183 _annotation.created = new Date(); |
188 _export.created = new Date(); |
|
189 /* Ajout de l'annotation à la liste à exporter */ |
184 /* Ajout de l'annotation à la liste à exporter */ |
190 _exportedAnnotations.push(_annotation); |
185 _exportedAnnotations.push(_annotation); |
191 /* Ajout de la liste à exporter à l'objet Source */ |
186 /* Ajout de la liste à exporter à l'objet Source */ |
192 _export.addList("annotation",_exportedAnnotations); |
187 _export.addList("annotation",_exportedAnnotations); |
193 |
188 |
297 if (typeof IriSP.video_url_transform === "function") { |
292 if (typeof IriSP.video_url_transform === "function") { |
298 videourl = IriSP.video_url_transform(media.video); |
293 videourl = IriSP.video_url_transform(media.video); |
299 } |
294 } |
300 var videoid = "video_" + media.id, |
295 var videoid = "video_" + media.id, |
301 videoEl = $('<video>'), |
296 videoEl = $('<video>'), |
302 seekCache = undefined, |
|
303 mp4_file = videourl.replace(/\.webm$/i,'.mp4'), |
297 mp4_file = videourl.replace(/\.webm$/i,'.mp4'), |
304 webm_file = videourl.replace(/\.mp4$/i,'.webm'), |
298 webm_file = videourl.replace(/\.mp4$/i,'.webm'), |
305 mp4_src = $('<source>'), |
299 mediaEl = videoEl[0], |
306 webm_src = $('<source>'); |
300 can_play_mp4 = !!mediaEl.canPlayType('video/mp4'), |
307 |
301 can_play_webm = !!mediaEl.canPlayType('video/webm'); |
308 mp4_src.attr({ |
302 |
309 src: mp4_file, |
|
310 type: "video/mp4" |
|
311 }) |
|
312 webm_src.attr({ |
|
313 src: webm_file, |
|
314 type: "video/webm" |
|
315 }); |
|
316 |
|
317 videoEl.attr({ |
303 videoEl.attr({ |
318 id : videoid |
304 id : videoid |
319 }).css({ |
305 }).css({ |
320 position : "absolute", |
306 position : "absolute", |
321 left: 0, |
307 left: 0, |
322 top: 0, |
308 top: 0, |
323 width : "100%", |
309 width : "100%", |
324 height : "100%" |
310 height : "100%" |
325 }); |
311 }); |
326 videoEl.append(mp4_src).append(webm_src); |
312 |
|
313 if (can_play_mp4 && can_play_webm) { |
|
314 var mp4_src = $('<source>'), |
|
315 webm_src = $('<source>'); |
|
316 mp4_src.attr({ |
|
317 src: mp4_file, |
|
318 type: "video/mp4" |
|
319 }); |
|
320 webm_src.attr({ |
|
321 src: webm_file, |
|
322 type: "video/webm" |
|
323 }); |
|
324 |
|
325 videoEl.append(mp4_src).append(webm_src); |
|
326 } else { |
|
327 videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file); |
|
328 } |
|
329 |
327 $("#video_sequence").append(videoEl); |
330 $("#video_sequence").append(videoEl); |
328 var mediaEl = videoEl[0]; |
|
329 |
331 |
330 media.show = function() { |
332 media.show = function() { |
331 videoEl.show(); |
333 videoEl.show(); |
332 } |
334 } |
333 media.hide = function() { |
335 media.hide = function() { |
413 }); |
415 }); |
414 |
416 |
415 // Binding UI Events and Mashup Playing to Media |
417 // Binding UI Events and Mashup Playing to Media |
416 |
418 |
417 media.on("play", function() { |
419 media.on("play", function() { |
418 $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").addClass("pause"); |
420 $("#btnPlayPause, .video-wait").addClass("pause"); |
419 }); |
421 }); |
420 |
422 |
421 media.on("pause", function() { |
423 media.on("pause", function() { |
422 $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").removeClass("pause"); |
424 $("#btnPlayPause, .video-wait").removeClass("pause"); |
423 }); |
425 }); |
424 |
426 |
425 media.on("timeupdate", function(_time) { |
427 media.on("timeupdate", function(_time) { |
426 $("#current").text(_time.toString()); |
428 $("#current").text(_time.toString()); |
427 if (!isClicking) { |
429 timeSlider.slider("value", slidersRange * _time / media.duration); |
428 timeSlider.slider("value", slidersRange * _time / media.duration); |
430 }); |
429 } |
431 |
430 }); |
|
431 |
|
432 } |
432 } |
433 |
433 |
434 } |
434 } |