168 stop: function() { |
173 stop: function() { |
169 // IriSP.Widgets.Controller.prototype.volumeUpdater |
174 // IriSP.Widgets.Controller.prototype.volumeUpdater |
170 } |
175 } |
171 }); |
176 }); |
172 |
177 |
|
178 $(".Ldt-Ctrl-Play").click(function() { |
|
179 if (currentMedia) { |
|
180 if (currentMedia.getPaused()) { |
|
181 currentMedia.play(); |
|
182 } else { |
|
183 currentMedia.pause(); |
|
184 } |
|
185 } |
|
186 }); |
|
187 |
|
188 /* Slice Widget */ |
|
189 var sliceSlider = $(".Ldt-Slice"), |
|
190 sliceStartTime; |
|
191 |
|
192 function setTangles(sliderValues) { |
|
193 //TODO: Move to Annotation.on("changebounds") |
|
194 if (currentMedia) { |
|
195 startTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[0] / slidersRange), |
|
196 endTime = new IriSP.Model.Time(currentMedia.duration * sliderValues[1] / slidersRange), |
|
197 duration = new IriSP.Model.Time(endTime - startTime); |
|
198 $(".tangle-start").text(startTime.toString()).attr("data-milliseconds",startTime.milliseconds); |
|
199 $(".tangle-end").text(endTime.toString()).attr("data-milliseconds",endTime.milliseconds); |
|
200 $(".tangle-duration").text(duration.toString()).attr("data-milliseconds",duration.milliseconds); |
|
201 } |
|
202 } |
|
203 |
|
204 sliceSlider.slider({ |
|
205 range: true, |
|
206 values: [0, slidersRange], |
|
207 min: 0, |
|
208 max: slidersRange, |
|
209 change: function(event, ui) { |
|
210 setTangles(ui.values); // Not the right place to put it |
|
211 }, |
|
212 start: function() { |
|
213 if (currentMedia) { |
|
214 if (!currentMedia.getPaused()) { |
|
215 currentMedia.pause(); |
|
216 } |
|
217 // sliceStartTime = currentMedia.getCurrentTime(); |
|
218 } |
|
219 }, |
|
220 slide: function(event, ui) { |
|
221 if (currentMedia) { |
|
222 var t = currentMedia.duration * ui.value / slidersRange; |
|
223 currentMedia.setCurrentTime(t); |
|
224 } |
|
225 setTangles(ui.values); |
|
226 }, |
|
227 stop: function() { |
|
228 if (currentMedia && sliceStartTime) { |
|
229 // currentMedia.setCurrentTime(sliceStartTime); |
|
230 } |
|
231 } |
|
232 }); |
|
233 |
|
234 sliceSlider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle"); |
|
235 sliceSlider.find(".ui-slider-handle:last").addClass("Ldt-Slice-right-handle"); |
|
236 |
|
237 /* UI Events */ |
|
238 |
|
239 function onCurrentMediaPlay() { |
|
240 $(".Ldt-Ctrl-Play") |
|
241 .attr("title", "Pause") |
|
242 .removeClass("Ldt-Ctrl-Play-PlayState") |
|
243 .addClass("Ldt-Ctrl-Play-PauseState") |
|
244 } |
|
245 |
|
246 function onCurrentMediaPause() { |
|
247 $(".Ldt-Ctrl-Play") |
|
248 .attr("title", "Lecture") |
|
249 .removeClass("Ldt-Ctrl-Play-PauseState") |
|
250 .addClass("Ldt-Ctrl-Play-PlayState") |
|
251 } |
|
252 |
|
253 function onCurrentMediaTimeupdate(_time) { |
|
254 $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString()); |
|
255 timeSlider.slider("value",slidersRange * _time / currentMedia.duration); |
|
256 } |
|
257 |
173 /* Set current Media */ |
258 /* Set current Media */ |
174 var currentMedia; |
259 var currentMedia; |
175 |
260 |
176 function setMedia(mediaid) { |
261 function setMedia(mediaid) { |
|
262 $(".col-left .item-video").removeClass("active"); |
|
263 $(".tutorial").hide(); |
|
264 $("video").hide(); |
|
265 if (currentMedia) { |
|
266 currentMedia.pause(); |
|
267 } |
177 currentMedia = project.getElement(mediaid); |
268 currentMedia = project.getElement(mediaid); |
178 if (currentMedia.elementType == "media") { |
269 if (currentMedia.elementType == "media") { |
179 $("video").hide(); |
270 $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active"); |
180 var currentvideo = $('video[data-media-id="' + mediaid + '"]'); |
271 showSegmentation(); |
181 console.log(currentvideo); |
272 var currentvideo = $('#video_' + mediaid); |
182 } |
273 if (!currentvideo.length) { |
|
274 addMediaPlayer(currentMedia); |
|
275 currentvideo = $('#video_' + mediaid); |
|
276 } |
|
277 $(".tab-media-title").text(currentMedia.title); |
|
278 sliceSlider.slider("values",[0, slidersRange]); |
|
279 } |
|
280 currentvideo.show(); |
|
281 $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString()); |
|
282 onCurrentMediaTimeupdate(currentMedia.getCurrentTime()); |
|
283 onCurrentMediaPause(); |
183 } |
284 } |
184 |
285 |
185 function addMediaPlayer(media) { |
286 function addMediaPlayer(media) { |
|
287 var videoid = "video_" + media.id, |
|
288 videoEl = $('<video>'), |
|
289 width = $(".video").width(), |
|
290 height = $(".video").height(), |
|
291 mp4_file = media.video.replace(/\.webm$/i,'.mp4'), |
|
292 webm_file = media.video.replace(/\.mp4$/i,'.webm'), |
|
293 mp4_src = $('<source>'), |
|
294 webm_src = $('<source>'); |
|
295 mp4_src.attr({ |
|
296 src: mp4_file, |
|
297 type: "video/mp4" |
|
298 }); |
|
299 webm_src.attr({ |
|
300 src: webm_file, |
|
301 type: "video/webm" |
|
302 }); |
|
303 videoEl.attr({ |
|
304 id : videoid, |
|
305 width : width, |
|
306 height : height |
|
307 }).css({ |
|
308 position : "absolute", |
|
309 left: 0, |
|
310 top: 0, |
|
311 width : width, |
|
312 height : height |
|
313 }); |
|
314 videoEl.append(mp4_src).append(webm_src); |
|
315 $(".video").append(videoEl); |
|
316 |
|
317 var popcorn = Popcorn("#" + videoid); |
|
318 |
|
319 // Binding functions to Popcorn |
|
320 |
|
321 media.on("setcurrenttime", function(_milliseconds) { |
|
322 popcorn.currentTime(_milliseconds / 1000); |
|
323 }); |
|
324 |
|
325 media.on("setvolume", function(_vol) { |
|
326 popcorn.volume(_vol); |
|
327 media.volume = _vol; |
|
328 }); |
|
329 |
|
330 media.on("setmuted", function(_muted) { |
|
331 popcorn.muted(_muted); |
|
332 media.muted = _muted; |
|
333 }); |
|
334 |
|
335 media.on("setplay", function() { |
|
336 popcorn.play(); |
|
337 }); |
|
338 |
|
339 media.on("setpause", function() { |
|
340 popcorn.pause(); |
|
341 }); |
|
342 |
|
343 // Binding Popcorn events to media |
|
344 |
|
345 function getVolume() { |
|
346 media.muted = popcorn.muted(); |
|
347 media.volume = popcorn.volume(); |
|
348 } |
|
349 |
|
350 popcorn.on("loadedmetadata", function() { |
|
351 getVolume(); |
|
352 media.trigger("loadedmetadata"); |
|
353 media.trigger("volumechange"); |
|
354 }) |
|
355 |
|
356 popcorn.on("timeupdate", function() { |
|
357 media.trigger("timeupdate", new IriSP.Model.Time(1000*popcorn.currentTime())); |
|
358 }); |
|
359 |
|
360 popcorn.on("volumechange", function() { |
|
361 getVolume(); |
|
362 media.trigger("volumechange"); |
|
363 }) |
|
364 |
|
365 popcorn.on("play", function() { |
|
366 media.trigger("play"); |
|
367 }); |
|
368 |
|
369 popcorn.on("pause", function() { |
|
370 media.trigger("pause"); |
|
371 }); |
|
372 |
|
373 popcorn.on("seeked", function() { |
|
374 media.trigger("seeked"); |
|
375 }); |
|
376 |
|
377 // Binding UI Events to Media |
|
378 |
|
379 media.on("play", function() { |
|
380 if (media === currentMedia) { |
|
381 onCurrentMediaPlay(); |
|
382 } |
|
383 }); |
|
384 |
|
385 media.on("pause", function() { |
|
386 if (media === currentMedia) { |
|
387 onCurrentMediaPause(); |
|
388 } |
|
389 }); |
|
390 |
|
391 media.on("timeupdate", function(_time) { |
|
392 if (media === currentMedia) { |
|
393 onCurrentMediaTimeupdate(_time); |
|
394 } |
|
395 }) |
186 |
396 |
187 } |
397 } |
188 /* Click on media items */ |
398 /* Click on media items */ |
189 |
399 |
190 $(".col-left").on("click", ".item-video", function() { |
400 $(".col-left").on("click", ".item-video", function() { |