1 $(function() { |
1 var myDir = new IriSP.Model.Directory(), |
|
2 myProject = myDir.remoteSource({ |
|
3 url: "data/rigoletto.json", |
|
4 serializer: IriSP.serializers.ldt |
|
5 }); |
|
6 |
|
7 myProject.onLoad(function() { |
|
8 |
|
9 $(".project-title").text(myProject.title); |
|
10 |
|
11 var myMedia = myProject.getCurrentMedia(); |
|
12 |
|
13 IriSP.htmlPlayer( |
|
14 myMedia, |
|
15 $(".video-container"), |
|
16 { |
|
17 width: 1000, |
|
18 height: 560, |
|
19 autostart: true |
|
20 } |
|
21 ); |
|
22 |
|
23 myMedia.on("timeupdate", function(t) { |
|
24 var progress = $(".progress-indicator"), |
|
25 pos = ($(".chapters-bar").width() - 2 * progress.width()) * t / myMedia.duration; |
|
26 progress.css("left",pos); |
|
27 }); |
|
28 myMedia.on("play", function() { |
|
29 $(".play-button").addClass("pause"); |
|
30 }); |
|
31 myMedia.on("pause", function() { |
|
32 $(".play-button").removeClass("pause"); |
|
33 }); |
|
34 |
|
35 var tags = myProject.getTags().sortBy(function(t) { |
|
36 return - t.getRelated("annotation").length; |
|
37 }).slice(0,12), |
|
38 tagTemplate = _.template('<li data-tag-id="<%- id %>" class="tag"><%- title %></li>'), |
|
39 clickedTag = null, |
|
40 lastTag = null; |
|
41 |
|
42 $(".tags-list").html(tags.map(tagTemplate).join("")); |
|
43 |
|
44 $("body").click(function() { |
|
45 if (clickedTag) { |
|
46 $(".chapter").removeClass("found"); |
|
47 clickedTag = null; |
|
48 } |
|
49 }); |
|
50 |
|
51 function showTag(tagId) { |
|
52 $(".chapter").removeClass("found"); |
|
53 var tag = myProject.getElement(tagId); |
|
54 if (tag) { |
|
55 tag.getRelated("annotation").forEach(function(a) { |
|
56 a.trigger("found-tags"); |
|
57 }); |
|
58 } |
|
59 lastTag = tagId; |
|
60 } |
|
61 |
|
62 $(".tag").hover(function() { |
|
63 showTag($(this).attr("data-tag-id")); |
|
64 }, function() { |
|
65 showTag(clickedTag); |
|
66 }).click(function() { |
|
67 clickedTag = lastTag; |
|
68 return false; |
|
69 }); |
|
70 |
|
71 |
|
72 var chapters = myProject.getAnnotationsByTypeTitle("chapitrage"), |
|
73 chapterTemplate = _.template( |
|
74 '<li class="chapter" style="left: <%- 100*begin/getMedia().duration %>%; width: <%- 100*getDuration()/getMedia().duration %>%;">' |
|
75 + '<div class="chapter-block"></div><div class="chapter-title"><%- title %></div></li>' |
|
76 ), |
|
77 chapterList = $(".chapters-list"), |
|
78 hoveredChapter = null, |
|
79 currentChapter = null, |
|
80 currentChapterI = 0; |
|
81 |
|
82 function highlightChapter() { |
|
83 $(".chapter").removeClass("active"); |
|
84 if (hoveredChapter || currentChapter) { |
|
85 (hoveredChapter || currentChapter).addClass("active"); |
|
86 } |
|
87 } |
|
88 |
|
89 chapters.forEach(function(chapter, i) { |
|
90 var element = $(chapterTemplate(chapter)); |
|
91 element.click(function() { |
|
92 myMedia.setCurrentTime(chapter.begin); |
|
93 }).hover(function() { |
|
94 hoveredChapter = element; |
|
95 highlightChapter(); |
|
96 }, function() { |
|
97 hoveredChapter = null; |
|
98 highlightChapter(); |
|
99 }); |
|
100 chapter.on("enter", function() { |
|
101 currentChapter = element; |
|
102 currentChapterI = i; |
|
103 if (i) { |
|
104 $(".prev-chapter").removeClass("inactive"); |
|
105 } else { |
|
106 $(".prev-chapter").addClass("inactive"); |
|
107 } |
|
108 if (i < chapters.length - 1) { |
|
109 $(".next-chapter").removeClass("inactive"); |
|
110 } else { |
|
111 $(".next-chapter").addClass("inactive"); |
|
112 } |
|
113 highlightChapter(); |
|
114 }); |
|
115 chapter.on("leave", function() { |
|
116 currentChapter = null; |
|
117 highlightChapter(); |
|
118 }); |
|
119 chapter.on("found-tags", function() { |
|
120 element.addClass("found"); |
|
121 }); |
|
122 chapterList.append(element); |
|
123 }); |
|
124 |
|
125 $(".prev-chapter").click(function() { |
|
126 if (i) { |
|
127 myMedia.setCurrentTime(chapters[currentChapterI - 1].begin); |
|
128 } |
|
129 }); |
|
130 $(".next-chapter").click(function() { |
|
131 if (i < chapters.length - 1) { |
|
132 myMedia.setCurrentTime(chapters[currentChapterI + 1].begin); |
|
133 } |
|
134 }); |
|
135 |
|
136 $(".play-button").click(function() { |
|
137 if (myMedia.paused) { |
|
138 myMedia.play(); |
|
139 } else { |
|
140 myMedia.pause(); |
|
141 } |
|
142 }); |
|
143 |
2 $(".progress-indicator").draggable({ |
144 $(".progress-indicator").draggable({ |
3 axis: "x", |
145 axis: "x", |
4 containment: "parent" |
146 containment: "parent", |
|
147 drag: function(e, ui) { |
|
148 var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".chapters-bar").width() - 2 * ui.helper.width() ); |
|
149 myMedia.setCurrentTime(t); |
|
150 } |
5 }); |
151 }); |
6 $(".chips-list").on( { |
152 $(".chips-list").on( { |
7 mouseenter: function() { |
153 mouseenter: function() { |
8 $(".chip").css("opacity",.3); |
154 $(".chip").css("opacity",.3); |
9 $(this).css("opacity",1); |
155 $(this).css("opacity",1); |
39 credit: "Public domain" |
185 credit: "Public domain" |
40 } |
186 } |
41 ]; |
187 ]; |
42 |
188 |
43 function slideshow(data) { |
189 function slideshow(data) { |
44 var currentslide = 0, slideInterval, playing = false; |
190 var currentslide = 0, slideInterval, playing = false, loaded = false; |
45 |
191 |
46 $(".slideshow-image").load(function(e) { |
192 function checkloaded() { |
47 var imgData = data[currentslide], |
193 loaded = data.reduce(function(mem, slide) { |
48 el = $(this); |
194 return (mem && !!slide.image && !!slide.image.width); |
49 el.show(); |
195 }, true); |
50 var w = el.width(), |
196 if (loaded) { |
51 h = el.height(); |
197 showCurrentImage(); |
|
198 } |
|
199 } |
|
200 |
|
201 data.forEach(function(slide) { |
|
202 slide.image = new Image(); |
|
203 slide.image.onload = checkloaded; |
|
204 slide.image.src = slide.url; |
|
205 }); |
|
206 |
|
207 function resizeImage() { |
|
208 var imgel = $(".slideshow-image"); |
|
209 imgel.css("margin-top",""); |
|
210 var w = imgel.width(), |
|
211 h = imgel.height(); |
52 $(".slideshow-center").css("height",""); |
212 $(".slideshow-center").css("height",""); |
53 $(".slideshow-frame").css("width",w); |
|
54 $(".slideshow-description").css("margin-left",w); |
213 $(".slideshow-description").css("margin-left",w); |
55 $(".slideshow-credits").text(imgData.credit); |
214 var h2 = $(".slideshow-center").height(); |
56 $(".slideshow-title").text(imgData.title); |
215 if (h < h2) { |
|
216 imgel.css("margin-top",Math.floor((h2-h)/2)+"px"); |
|
217 } |
|
218 } |
|
219 |
|
220 function showCurrentImage() { |
|
221 var slide = data[currentslide]; |
|
222 $(".slideshow-image").attr({ |
|
223 src: slide.image.src, |
|
224 title: slide.title, |
|
225 alt: slide.title |
|
226 }); |
|
227 $(".slideshow-credits").text(slide.credit); |
|
228 $(".slideshow-title").text(slide.title); |
57 $(".slideshow-description").html( |
229 $(".slideshow-description").html( |
58 imgData.description.split(/\n/gm).map(function(l) { |
230 slide.description.split(/\n/gm).map(function(l) { |
59 return '<p>' + _.escape(l) + '</p>'; |
231 return '<p>' + _.escape(l) + '</p>'; |
60 }).join("") |
232 }).join("") |
61 ); |
233 ); |
62 var h2 = $(".slideshow-center").height(); |
234 resizeImage(); |
63 if (h < h2) { |
235 } |
64 $(".slideshow-image").css("margin-top",Math.floor((h2-h)/2)+"px"); |
236 |
65 } |
237 $(window).on("resize", resizeImage); |
66 }); |
|
67 |
|
68 function showCurrentImage() { |
|
69 $(".slideshow-center").css("height",$(".slideshow-center").height()); |
|
70 $(".slideshow-image").attr("src",data[currentslide].url).hide().css("margin-top",""); |
|
71 $(".slideshow-credits").empty(); |
|
72 $(".slideshow-title").empty(); |
|
73 $(".slideshow-description").empty(); |
|
74 } |
|
75 |
238 |
76 function nextImage() { |
239 function nextImage() { |
77 currentslide = (currentslide + 1) % data.length; |
240 currentslide = (currentslide + 1) % data.length; |
78 showCurrentImage(); |
241 showCurrentImage(); |
79 } |
242 } |