3 var directory = new IriSP.Model.Directory(), |
3 var directory = new IriSP.Model.Directory(), |
4 project = directory.remoteSource({ |
4 project = directory.remoteSource({ |
5 url: options.url, |
5 url: options.url, |
6 serializer: IriSP.serializers.ldt |
6 serializer: IriSP.serializers.ldt |
7 }), |
7 }), |
8 mashup; |
8 mashup, |
|
9 mediatemplate = _.template('<li class="item-video media" data-media-id="<%= media.id %>">' |
|
10 + '<a href="#"><img alt="<%= media.title %>" src="<%= media.thumbnail %>"></a><div class="video-info">' |
|
11 + '<h3 class="title-video"><a href="#"><%= media.title %></a></h3><p class="description"><%= media.description %></p>' |
|
12 + '<p class="time-length">Durée : <span><%= media.duration.toString() %></span></p><div class="frise">' |
|
13 + '<div class="frise-overflow"><div class="frise-segments"><%= segments %></div></div></div></div></li>'); |
|
14 segmenttemplate = _.template('<div style="background-color:<%= annotation.color %>; left:<%= left %>%; width: <%= width %>%;"' |
|
15 + ' class="frise-segment annotation" data-segment-id="<%= annotation.id %>" title="<%= annotation.title %>"></div>') |
9 |
16 |
10 project.onLoad(function() { |
17 project.onLoad(function() { |
11 mashup = project.getMashups()[0]; |
18 mashup = project.getMashups()[0]; |
12 IriSP.mashupcore(project, mashup); |
19 IriSP.mashupcore(project, mashup); |
13 project.trigger("set-current",mashup); |
20 project.trigger("set-current",mashup); |
15 $(".info-title a").text(mashup.title); |
22 $(".info-title a").text(mashup.title); |
16 $(".info-duration td").text(mashup.duration.toString()); |
23 $(".info-duration td").text(mashup.duration.toString()); |
17 $(".info-author a").text(mashup.creator); |
24 $(".info-author a").text(mashup.creator); |
18 $(".info-description td").text(mashup.description); |
25 $(".info-description td").text(mashup.description); |
19 |
26 |
|
27 var html = ''; |
|
28 mashup.getMedias().forEach(function(media) { |
|
29 var segments = mashup.segments.filter(function(segment) { |
|
30 return segment.getMedia() === media; |
|
31 }); |
|
32 var segmentshtml = '', k = media.duration ? (100 / media.duration) : 0; |
|
33 segments.forEach(function(segment) { |
|
34 var vizdata = { |
|
35 annotation: segment.annotation, |
|
36 left: k * segment.annotation.begin, |
|
37 width: k * segment.annotation.getDuration() |
|
38 } |
|
39 segmentshtml += segmenttemplate(vizdata); |
|
40 }); |
|
41 var mediadata = { |
|
42 media: media, |
|
43 segments: segmentshtml |
|
44 } |
|
45 html += mediatemplate(mediadata); |
|
46 }); |
|
47 |
|
48 $(".list-video").html(html); |
|
49 |
|
50 project.on("mouseover-annotation", function(annotation) { |
|
51 var mediaid = annotation.getMedia().id; |
|
52 $(".media").removeClass("active"); |
|
53 $(".media[data-media-id='" + mediaid + "']").addClass("active"); |
|
54 }); |
|
55 |
|
56 project.on("mouseout-annotation", function(annotation) { |
|
57 $(".media").removeClass("active"); |
|
58 var mediaid = mashup.currentMedia.id; |
|
59 $(".media[data-media-id='" + mediaid + "']").addClass("active"); |
|
60 }); |
|
61 |
|
62 $(".list-video .frise-segment") |
|
63 .mouseover(function() { |
|
64 project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id"))); |
|
65 }) |
|
66 .click(function() { |
|
67 project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id"))); |
|
68 }); |
|
69 |
|
70 $(".item-video") |
|
71 .mouseover(function() { |
|
72 $(".media").removeClass("active"); |
|
73 }) |
|
74 .mouseout(function() { |
|
75 project.trigger("mouseout-annotation"); |
|
76 }) |
|
77 |
|
78 |
20 }); |
79 }); |
21 } |
80 } |