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