1 IriSP.mashupcore = function(project, mashup) {

     2     

     3     var currentMedia,

     4         intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'),

     5         viztemplate = _.template('<div class="frise-segment annotation" data-segment-id="<%= segmentid %>" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>');

     6 

     7     function updateMashupUI() {

     8         var vizhtml = '', t = 0, k = mashup.duration ? (100 / mashup.duration) : 0;

     9         mashup.segments.forEach(function(_s) {

    10             var vizdata = {

    11                 left: k * t,

    12                 width: k * _s.duration,

    13                 color: _s.color,

    14                 segmentid: _s.annotation.id

    15             }

    16             vizhtml += viztemplate(vizdata);

    17             t += _s.duration.milliseconds;

    18         });

    19         

    20         var intervals = [ 1000, 2000, 5000, 10000, 30000, 60000, 120000, 300000, 600000, 900000, 1800000, 3600000, 7200000 ];

    21         

    22         function createIntervals(maxn) {

    23             for (var i = 0; i < intervals.length; i++) {

    24                 if (mashup.duration / intervals[i] <= maxn) {

    25                     var html = '';

    26                     for (var j = intervals[i]; j < mashup.duration; j += intervals[i]) {

    27                         html += intervaltemplate({ left: k * j, time: new IriSP.Model.Time(j) });

    28                     }

    29                     return html;

    30                 }

    31             }

    32             return "";

    33         }

    34         

    35         $(".mashup-total-duration").text(mashup.duration.toString());

    36         $(".mashup-frise .frise-segments").html(vizhtml);

    37         $(".mashup-frise .frise-indications").html(createIntervals(6));

    38         

    39         if (currentMedia === mashup) {

    40             $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());

    41             if (mashupTimecode > mashup.duration) {

    42                 mashup.setCurrentTime(mashup.duration);

    43             }

    44             changeCurrentAnnotation();

    45             mashup.trigger("enter-annotation",mashupCurrentAnnotation);

    46         }

    47         

    48     }

    49     

    50     /* Slider */

    51     

    52     var timeSlider = $(".Ldt-Slider"),

    53         timeSliderContainer = $(".Ldt-Slider-Container"),

    54         slidersRange = 920;

    55     timeSlider.slider({

    56         range: "min",

    57         value: 0,

    58         min: 0,

    59         max: slidersRange,

    60         slide: function(event, ui) {

    61             if (currentMedia) {

    62                 var t = currentMedia.duration * ui.value / slidersRange;

    63                 currentMedia.setCurrentTime(t);

    64             }

    65         }

    66     });

    67     

    68     var timeSliderHandle = timeSlider.find('.ui-slider-handle'),

    69         timeSliderMaximized = false,

    70         timeSliderTimeoutId = false,

    71         timeSliderMinimizedHeight = 4,

    72         timeSliderMaximizedHeight = 10,

    73         timeSliderTimeoutDuration = 1500,

    74         timeTooltip = $(".Ldt-Slider-Time");

    75     

    76     timeSliderContainer.css(calculateSliderCss(timeSliderMinimizedHeight));

    77     timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight));

    78     

    79     function timeSliderMouseOver() {

    80         if (timeSliderTimeoutId) {

    81             window.clearTimeout(timeSliderTimeoutId);

    82             timeSliderTimeoutId = false;

    83         }

    84         if (!timeSliderMaximized) {

    85            timeSliderAnimateToHeight(timeSliderMaximizedHeight);

    86            timeSliderMaximized = true;

    87         }

    88     }

    89     

    90     function timeSliderMouseOut() {

    91         timeTooltip.hide();

    92         if (timeSliderTimeoutId) {

    93             clearTimeout(timeSliderTimeoutId);

    94             timeSliderTimeoutId = false;

    95         }

    96         timeSliderTimeoutId = setTimeout(function() {

    97             if (timeSliderMaximized) {

    98                 timeSliderAnimateToHeight(timeSliderMinimizedHeight);

    99                 timeSliderMaximized = false;

   100             }

   101             timeSliderTimeoutId = false;

   102         }, timeSliderTimeoutDuration);

   103     }

   104     

   105     timeSliderContainer

   106         .mouseover(function() {

   107             timeTooltip.show();

   108             timeSliderMouseOver();

   109         })

   110         .mouseout(timeSliderMouseOut);

   111     timeSlider.mousemove(function(_e) {

   112             var _x = _e.pageX - timeSlider.offset().left,

   113                 _t = new IriSP.Model.Time(

   114                 );

   115             timeTooltip.text(_t.toString()).css("left",_x);

   116         });

   117     

   118     $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);

   119     

   120     function timeSliderAnimateToHeight(_height) {

   121         timeSliderContainer.stop().animate(

   122             calculateSliderCss(_height),

   123             500,

   124             function() {

   125                 IriSP.jQuery(this).css("overflow","visible");

   126             });

   127         timeSliderHandle.stop().animate(

   128             calculateHandleCss(_height),

   129             500,

   130             function() {

   131                 IriSP.jQuery(this).css("overflow","visible");

   132             });

   133     }

   134 

   135     function calculateSliderCss(_size) {

   136         return {

   137             height: _size + "px",

   138             "margin-top": (timeSliderMinimizedHeight - _size) + "px"

   139         };

   140     }

   141 

   142     function calculateHandleCss(_size) {

   143         return {

   144             height: (2 + _size) + "px",

   145             width: (2 + _size) + "px",

   146             "margin-left": -Math.ceil(2 + _size / 2) + "px" 

   147         }

   148     }

   149     

   150     /* Controller Widget */

   151    

   152     var volBlock = $(".Ldt-Ctrl-Volume-Control");

   153     

   154     $('.Ldt-Ctrl-Sound')

   155         .click(function() {

   156             if (currentMedia) {

   157                 currentMedia.setMuted(!currentMedia.getMuted());

   158             }

   159         })

   160         .mouseover(function() {

   161             volBlock.show();

   162         })

   163         .mouseout(function() {

   164             volBlock.hide();

   165         });

   166     volBlock.mouseover(function() {

   167         volBlock.show();

   168     }).mouseout(function() {

   169         volBlock.hide();

   170     });

   171     

   172     var volBar = $(".Ldt-Ctrl-Volume-Bar");

   173     

   174     function ctrlVolumeUpdater() {

   175         if (currentMedia) {

   176             var _muted = currentMedia.getMuted(),

   177                 _vol = currentMedia.getVolume();

   178             if (_vol === false) {

   179                 _vol = .5;

   180             }

   181             var _soundCtl = $(".Ldt-Ctrl-Sound");

   182             _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full");

   183             if (_muted) {        

   184                 _soundCtl.attr("title", "Activer le son")

   185                     .addClass("Ldt-Ctrl-Sound-Mute");    

   186             } else {

   187                 _soundCtl.attr("title", "Couper le son")

   188                     .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" )

   189             }

   190             volBar.slider("value", _muted ? 0 : 100 * _vol);

   191             volBar.attr("title",'Volume : ' + Math.floor(100 * _vol) + '%');

   192         }

   193     }

   194     

   195     volBar.slider({

   196         slide: function(event, ui) {

   197             if (currentMedia) {

   198                 currentMedia.setVolume(ui.value / 100);

   199             }

   200         }

   201     });

   202     

   203     $(".Ldt-Ctrl-Play").click(function() {

   204         if (currentMedia) {

   205             if (currentMedia.getPaused()) {        

   206                 currentMedia.play();

   207             } else {

   208                 currentMedia.pause();

   209             }

   210         }

   211     });

   212     

   213     $(".Ldt-Ctrl-SetIn").click(function() {

   214         if (currentMedia && currentSegment) {

   215             currentSegment.setBegin(currentMedia.getCurrentTime());

   216         }

   217     });

   218     $(".Ldt-Ctrl-SetOut").click(function() {

   219         if (currentMedia && currentSegment) {

   220             currentSegment.setEnd(currentMedia.getCurrentTime());

   221         }

   222     });

   223     

   224     /* UI Events */

   225 

   226     function onCurrentMediaPlay() {

   227         $(".Ldt-Ctrl-Play")

   228             .attr("title", "Pause")

   229             .removeClass("Ldt-Ctrl-Play-PlayState")

   230             .addClass("Ldt-Ctrl-Play-PauseState")

   231     }

   232     

   233     function onCurrentMediaPause() {

   234         $(".Ldt-Ctrl-Play")

   235             .attr("title", "Lecture")

   236             .removeClass("Ldt-Ctrl-Play-PauseState")

   237             .addClass("Ldt-Ctrl-Play-PlayState")

   238     }

   239     

   240     function onCurrentMediaTimeupdate(_time) {

   241         $(".Ldt-Ctrl-Time-Elapsed").text(_time.toString());

   242         timeSlider.slider("value",slidersRange * _time / currentMedia.duration);

   243     }

   244     

   245     /* Mashup Player */

   246    

   247     mashup.currentMedia = null;

   248    

   249     var mashupCurrentAnnotation = null,

   250         mashupSegmentBegin,

   251         mashupSegmentEnd,

   252         mashupTimecode = 0,

   253         mashupSeeking = false,

   254         seekdiv = $(".video-wait"),

   255         mashupTimedelta;

   256     

   257     function showSeek() {

   258         if (mashupSeeking) {

   259             seekdiv.show();

   260         }

   261     }

   262     

   263     function changeCurrentAnnotation() {

   264         if (mashupTimecode >= mashup.duration) {

   265             if (!mashup.paused) {

   266                 mashup.paused = true;

   267                 mashup.trigger("pause");

   268             }

   269             mashupTimecode = 0;

   270         }

   271         var _annotation = mashup.getAnnotationAtTime( mashupTimecode );

   272         if (typeof _annotation === "undefined") {

   273             if (mashup.currentMedia) {

   274                 mashup.currentMedia.pause();

   275                 if (!mashup.paused) {

   276                     mashup.paused = true;

   277                     mashup.trigger("pause");

   278                 }

   279             }

   280             return;

   281         }

   282         mashupCurrentAnnotation = _annotation;

   283         mashupSegmentBegin = mashupCurrentAnnotation.annotation.begin.milliseconds;

   284         mashupSegmentEnd = mashupCurrentAnnotation.annotation.end.milliseconds;

   285         mashupTimedelta = mashupSegmentBegin - mashupCurrentAnnotation.begin.milliseconds;

   286         mashup.currentMedia = mashupCurrentAnnotation.getMedia();

   287         

   288         project.getMedias().forEach(function(_media) {

   289             if (_media !== mashup.currentMedia) {

   290                 _media.hide();

   291                 _media.pause();

   292             } else {

   293                 _media.show();

   294             }

   295         });

   296         

   297         mashup.currentMedia.setCurrentTime( mashupTimecode + mashupTimedelta);

   298         mashup.currentMedia.seeking = true;

   299         

   300         if (!mashup.paused) {

   301             mashup.currentMedia.play();

   302             mashupSeeking = true;

   303             setTimeout(showSeek,200);

   304         }

   305         mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));

   306 

   307     }

   308     

   309     function addMedia(media) {

   310         if (media.has_player) {

   311             return;

   312         }

   313         media.has_player = true;

   314         var videoid = "video_" + media.id,

   315             videoEl = $('<video>'),

   316             width = $(".video").width(),

   317             height = $(".video").height(),

   318             mp4_file = media.video.replace(/\.webm$/i,'.mp4'),

   319             webm_file = media.video.replace(/\.mp4$/i,'.webm'),

   320             mp4_src = $('<source>'),

   321             webm_src = $('<source>');

   322         mp4_src.attr({

   323             src: mp4_file,

   324             type: "video/mp4"

   325         });

   326         webm_src.attr({

   327             src: webm_file,

   328             type: "video/webm"

   329         });

   330         videoEl.attr({

   331             id : videoid,

   332             width : width,

   333             height : height

   334         }).css({

   335             position : "absolute",

   336             left: 0,

   337             top: 0,

   338             width : width,

   339             height : height

   340         });

   341         videoEl.append(mp4_src).append(webm_src);

   342         $(".video").append(videoEl);

   343         

   344         media.show = function() {

   345             videoEl.show();

   346         }

   347         media.hide = function() {

   348             videoEl.hide();

   349         }

   350         

   351         var popcorn = Popcorn("#" + videoid);

   352         

   353         // Binding functions to Popcorn

   354         

   355         media.on("setcurrenttime", function(_milliseconds) {

   356             if (media.loaded) {

   357                 popcorn.currentTime(_milliseconds / 1000);

   358             }

   359         });

   360         

   361         media.on("setvolume", function(_vol) {

   362             media.volume = _vol;

   363             if (media.loaded) {

   364                 popcorn.volume(_vol);

   365             }

   366         });

   367         

   368         media.on("setmuted", function(_muted) {

   369             media.muted = _muted;

   370             if (media.loaded) {

   371                 popcorn.muted(_muted);

   372             }

   373         });

   374         

   375         media.on("setplay", function() {

   376             if (media.loaded) {

   377                 popcorn.play();

   378             }

   379         });

   380         

   381         media.on("setpause", function() {

   382             if (media.loaded) {

   383                 popcorn.pause();

   384             }

   385         });

   386         

   387         // Binding Popcorn events to media

   388         

   389         function getVolume() {

   390             media.muted = popcorn.muted();

   391             media.volume = popcorn.volume();

   392         }

   393         

   394         popcorn.on("loadedmetadata", function() {

   395             getVolume();

   396             media.loaded = true;

   397             media.trigger("loadedmetadata");

   398             media.trigger("volumechange");

   399         })

   400         

   401         popcorn.on("timeupdate", function() {

   402             media.trigger("timeupdate", new IriSP.Model.Time(1000*popcorn.currentTime()));

   403         });

   404         

   405         popcorn.on("volumechange", function() {

   406             getVolume();

   407             media.trigger("volumechange");

   408         })

   409         

   410         popcorn.on("play", function() {

   411             media.trigger("play");

   412         });

   413         

   414         popcorn.on("pause", function() {

   415             media.trigger("pause");

   416         });

   417         

   418         popcorn.on("seeked", function() {

   419             media.trigger("seeked");

   420         });

   421         

   422         // Binding UI Events and Mashup Playing to Media

   423         

   424         media.on("loadedmetadata", function() {

   425             if (media === currentMedia) {

   426                 seekdiv.hide();

   427             }

   428             mashup.checkLoaded();

   429         });

   430         

   431         media.on("play", function() {

   432             if (media === currentMedia) {

   433                 onCurrentMediaPlay();

   434             }

   435             if (mashup === currentMedia && media === mashup.currentMedia) {

   436                 mashup.trigger("play");

   437             }

   438         });

   439         

   440         media.on("pause", function() {

   441             if (media === currentMedia) {

   442                 onCurrentMediaPause();

   443             }

   444             if (mashup === currentMedia && media === mashup.currentMedia) {

   445                 mashup.trigger("pause");

   446             }

   447         });

   448         

   449         media.on("timeupdate", function(_time) {

   450             if (media === currentMedia) {

   451                 onCurrentMediaTimeupdate(_time);

   452             }

   453             if (mashup === currentMedia && !mashup.paused && media === mashup.currentMedia && !media.seeking) {

   454                 if ( _time < mashupSegmentEnd ) {

   455                     if ( _time >= mashupSegmentBegin ) {

   456                         mashupTimecode = _time - mashupTimedelta;

   457                     } else {

   458                         mashupTimecode = mashupSegmentBegin - mashupTimedelta;

   459                         media.setCurrentTime(mashupSegmentBegin);

   460                     }

   461                 } else {

   462                     mashupTimecode = mashupSegmentEnd - mashupTimedelta;

   463                     media.pause();

   464                     changeCurrentAnnotation();

   465                 }

   466                 mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));

   467             }

   468         });

   469         

   470         media.on("seeked", function() {

   471             media.seeking = false;

   472             if (mashup === currentMedia && media === mashup.currentMedia && mashupSeeking) {

   473                 mashupSeeking = false;

   474                 seekdiv.hide();

   475             }

   476         });

   477         

   478         media.on("volumechange", function() {

   479             if (media === currentMedia) {

   480                 ctrlVolumeUpdater();

   481             }

   482             mashup.muted = media.muted;

   483             mashup.volume = media.volume;

   484             mashup.trigger("volumechange");

   485         });

   486         

   487         project.on("set-current", function(_m) {

   488             if (_m !== media) {

   489                 media.hide();

   490             }

   491         });

   492         

   493     }

   494 

   495     // Mashup Events

   496     

   497     mashup.on("setcurrenttime", function(_milliseconds) {

   498         mashupTimecode = _milliseconds;

   499         changeCurrentAnnotation();

   500     });

   501     

   502     mashup.on("setvolume", function(_vol) {

   503         mashup.getMedias().forEach(function(_media) {

   504             _media.setVolume(_vol);

   505         });

   506         mashup.volume = _vol;

   507     });

   508     

   509     mashup.on("setmuted", function(_muted) {

   510         mashup.getMedias().forEach(function(_media) {

   511             _media.setMuted(_muted);

   512         });

   513         mashup.muted = _muted;

   514     });

   515     

   516     mashup.on("setplay", function() {

   517         mashup.paused = false;

   518         changeCurrentAnnotation();

   519     });

   520     

   521     mashup.on("setpause", function() {

   522         mashup.paused = true;

   523         if (mashup.currentMedia) {

   524             mashup.currentMedia.pause();

   525         }

   526     });

   527     

   528     mashup.on("loadedmetadata", function() {

   529         if (mashup === currentMedia) {

   530             changeCurrentAnnotation();

   531         }

   532     });

   533     

   534     /* Mashup Events to UI */

   535    

   536     mashup.on("play", function() {

   537         if (mashup === currentMedia) {

   538             onCurrentMediaPlay();

   539         }

   540     });

   541     

   542     mashup.on("pause", function() {

   543         if (mashup === currentMedia) {

   544             onCurrentMediaPause();

   545         }

   546     });

   547     

   548     mashup.on("timeupdate", function(_time) {

   549         if (mashup === currentMedia) {

   550             $(".frise-position").css("left",(100*_time/mashup.duration)+"%");

   551             onCurrentMediaTimeupdate(_time);

   552         }

   553     });

   554     

   555     mashup.on("add", function() {

   556         mashup.getMedias().forEach(addMedia);

   557     })

   558     

   559     mashup.on("change",updateMashupUI);

   560     

   561     mashup.on("enter-annotation", function(segment) {

   562         var a = segment.annotation;

   563         $(".annotation-title").text(a.title);

   564         $(".annotation-begin").text(a.begin.toString());

   565         $(".annotation-end").text(a.end.toString());

   566         $(".annotation-tags").text(a.keywords.join(", "));

   567         $(".annotation-media-title").text(a.getMedia().title);

   568         $(".annotation-description").text(a.description);

   569         var p = (segment.begin + segment.end) / (2 * mashup.duration);

   570         $(".mashup-description .pointer").css("left", (100 * p) + "%");

   571         project.trigger("mouseout-annotation");

   572     });

   573     

   574     project.on("mouseover-annotation", function(annotation) {

   575         $(".annotation").removeClass("active");

   576         if (!annotation) {

   577             return;

   578         }

   579         $(".annotation[data-segment-id='" + annotation.id + "']").addClass("active");

   580     });

   581     

   582     project.on("mouseout-annotation", function() {

   583         if (currentMedia === mashup && mashupCurrentAnnotation) {

   584             $(".annotation").removeClass("active");

   585             $(".item-video.annotation[data-segment-id='" + mashupCurrentAnnotation.annotation.id + "']").addClass("active");

   586         }

   587     });

   588     

   589     project.on("click-annotation", function(annotation) {

   590         if (!annotation) {

   591             return;

   592         }

   593         var segment = mashup.getAnnotation(annotation);

   594         project.trigger("set-current", mashup);

   595         if (segment) {

   596             mashup.setCurrentTime(segment.begin);

   597         }

   598     })

   599     

   600     project.on("set-current", function(media) {

   601         currentMedia = media;

   602         if (currentMedia.elementType === "media") {

   603             if (!media.has_player) {

   604                 addMedia(media);

   605             }

   606             media.show();

   607             if (!currentMedia.loaded) {

   608                 seekdiv.show();

   609             }

   610         }

   611         if (currentMedia.elementType === "mashup") {

   612             mashup.checkLoaded();

   613         }

   614         $(".Ldt-Ctrl-Time-Total").text(currentMedia.duration.toString());

   615         currentMedia.trigger("timeupdate",currentMedia.getCurrentTime());

   616         currentMedia.trigger("pause");

   617     });

   618     

   619     $(".frise")

   620     .on("mouseover", ".frise-segment", function() {

   621         project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id")));

   622     })

   623     .on("mouseout", ".frise-segment", function() {

   624         project.trigger("mouseout-annotation");

   625     })

   626     .on("click", ".frise-segment", function() {

   627         project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id")));

   628     });

   629     

   630     mashup.trigger("add");

   631     

   632 }