var myDir = new IriSP.Model.Directory(),
myProject = myDir.remoteSource({
url: "data/rigoletto.json",
serializer: IriSP.serializers.ldt
});
myProject.onLoad(function() {
$(".project-title").text(myProject.title);
var myMedia = myProject.getCurrentMedia();
IriSP.htmlPlayer(
myMedia,
$(".video-container"),
{
width: 1000,
height: 560,
autostart: true
}
);
myMedia.on("timeupdate", function(t) {
var progress = $(".progress-indicator"),
pos = ($(".chapters-bar").width() - 2 * progress.width()) * t / myMedia.duration;
progress.css("left",pos);
});
myMedia.on("play", function() {
$(".play-button").addClass("pause");
});
myMedia.on("pause", function() {
$(".play-button").removeClass("pause");
});
var tags = myProject.getTags().sortBy(function(t) {
return - t.getRelated("annotation").length;
}).slice(0,12),
tagTemplate = _.template('<li data-tag-id="<%- id %>" class="tag"><%- title %></li>'),
clickedTag = null,
lastTag = null;
$(".tags-list").html(tags.map(tagTemplate).join(""));
$("body").click(function() {
if (clickedTag) {
$(".chapter").removeClass("found");
clickedTag = null;
}
});
function showTag(tagId) {
$(".chapter").removeClass("found");
var tag = myProject.getElement(tagId);
if (tag) {
tag.getRelated("annotation").forEach(function(a) {
a.trigger("found-tags");
});
}
lastTag = tagId;
}
$(".tag").hover(function() {
showTag($(this).attr("data-tag-id"));
}, function() {
showTag(clickedTag);
}).click(function() {
clickedTag = lastTag;
return false;
});
var chapters = myProject.getAnnotationsByTypeTitle("chapitrage"),
chapterTemplate = _.template(
'<li class="chapter" style="left: <%- 100*begin/getMedia().duration %>%; width: <%- 100*getDuration()/getMedia().duration %>%;">'
+ '<div class="chapter-block"></div><div class="chapter-title"><%- title %></div></li>'
),
chapterList = $(".chapters-list"),
hoveredChapter = null,
currentChapter = null,
currentChapterI = 0;
function highlightChapter() {
$(".chapter").removeClass("active");
if (hoveredChapter || currentChapter) {
(hoveredChapter || currentChapter).addClass("active");
}
}
chapters.forEach(function(chapter, i) {
var element = $(chapterTemplate(chapter));
element.click(function() {
myMedia.setCurrentTime(chapter.begin);
}).hover(function() {
hoveredChapter = element;
highlightChapter();
}, function() {
hoveredChapter = null;
highlightChapter();
});
chapter.on("enter", function() {
currentChapter = element;
currentChapterI = i;
if (i) {
$(".prev-chapter").removeClass("inactive");
} else {
$(".prev-chapter").addClass("inactive");
}
if (i < chapters.length - 1) {
$(".next-chapter").removeClass("inactive");
} else {
$(".next-chapter").addClass("inactive");
}
highlightChapter();
});
chapter.on("leave", function() {
currentChapter = null;
highlightChapter();
});
chapter.on("found-tags", function() {
element.addClass("found");
});
chapterList.append(element);
});
$(".prev-chapter").click(function() {
if (i) {
myMedia.setCurrentTime(chapters[currentChapterI - 1].begin);
}
});
$(".next-chapter").click(function() {
if (i < chapters.length - 1) {
myMedia.setCurrentTime(chapters[currentChapterI + 1].begin);
}
});
$(".play-button").click(function() {
if (myMedia.paused) {
myMedia.play();
} else {
myMedia.pause();
}
});
$(".progress-indicator").draggable({
axis: "x",
containment: "parent",
drag: function(e, ui) {
var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".chapters-bar").width() - 2 * ui.helper.width() );
myMedia.setCurrentTime(t);
}
});
$(".play-button").click(function() {
$(this).toggleClass("pause");
});
var pictoTemplate = _.template(
'<li class="<%- type %>"><span class="picto"><a href="#"></a></span>'
+ '<span class="picto-title"><%- annotation.title %></span></li>'
);
var chipTemplate = _.template(
'<li class="chip <%- type %>" style="left: <%- pos %>%"><span class="chip-circle">'
+ '</span><span class="chip-title"><%- annotation.title %></span></li>'
);
var annotations = myProject.getAnnotationsByTypeTitle("annotations");
annotations.forEach(function(annotation) {
var annotationinfo = {
annotation: annotation,
open: false,
pos: 100 * annotation.begin / annotation.getMedia().duration
};
switch(annotation.content.mimetype) {
case "application/x-ldt-slideshow":
annotationinfo.type = "slideshow";
break;
}
annotationinfo.picto = $(pictoTemplate(annotationinfo)).appendTo(".pictolist");
annotationinfo.chip = $(chipTemplate(annotationinfo)).appendTo(".chips-list");
annotationinfo.both = annotationinfo.picto.add(annotationinfo.chip);
annotationinfo.both.click(function() {
openAnnotation(annotationinfo);
})
.hover(function() {
annotationinfo.both.addClass("hover");
}, function() {
annotationinfo.both.removeClass("hover");
});
annotation.on("enter", function() {
annotationinfo.picto.show();
});
annotation.on("leave", function() {
annotationinfo.picto.hide();
});
});
function openAnnotation(annotationinfo) {
if (annotationinfo.open) {
annotationinfo.open = false;
closeAnnotation(true);
return;
}
if (myMedia.currentTime < annotationinfo.annotation.begin || myMedia.currentTime > annotationinfo.annotation.end) {
myMedia.setCurrentTime(annotationinfo.annotation.begin);
}
annotationinfo.open = true;
myMedia.pause();
closeAnnotation(false);
annotationinfo.both.addClass("current");
$(".chapters-bar").addClass("annotation-onscreen");
switch (annotationinfo.type) {
case "slideshow":
slideshow(annotationinfo.annotation);
break;
}
}
function slideshow(data) {
var currentslide = 0,
slideInterval,
playing = false,
loaded = false,
slides = data.content.images
slideShowElement = $(".annotation-templates .slideshow-annotation").clone();
slideShowElement.appendTo($(".main-video"));
function checkloaded() {
if (loaded) {
return;
}
loaded = slides.reduce(function(mem, slide) {
return (mem && !!slide.image && !!slide.image.width);
}, true);
if (loaded) {
showCurrentImage();
if (data.autostart) {
togglePlay();
}
}
}
slides.forEach(function(slide) {
slide.image = new Image();
slide.image.onload = checkloaded;
slide.image.src = slide.url;
});
checkloaded();
function resizeImage() {
var imgel = slideShowElement.find(".slideshow-image");
imgel.css("margin-top","");
var w = imgel.width(),
h = imgel.height();
slideShowElement.find(".slideshow-center").css("height","");
slideShowElement.find(".slideshow-description").css("margin-left",w);
var h2 = slideShowElement.find(".slideshow-center").height();
if (h < h2) {
imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
}
}
function showCurrentImage() {
var slide = slides[currentslide];
slideShowElement.find(".slideshow-image").attr({
src: slide.image.src,
title: slide.title,
alt: slide.title
});
slideShowElement.find(".slideshow-title").text(slide.title);
slideShowElement.find(".slideshow-description").html(
slide.description.split(/\n/gm).map(function(l) {
return '<p>' + _.escape(l) + '</p>';
}).join("")
);
resizeImage();
}
function nextImage() {
currentslide = (currentslide + 1) % slides.length;
showCurrentImage();
}
function togglePlay() {
playing = !playing;
clearInterval(slideInterval);
if (playing) {
slideInterval = setInterval(nextImage,data["slide-duration"]);
slideShowElement.find(".slideshow-play-pause").addClass("pause");
} else {
slideShowElement.find(".slideshow-play-pause").removeClass("pause");
}
}
slideShowElement.find(".slideshow-next").click(nextImage);
slideShowElement.find(".slideshow-previous").click(function() {
currentslide = (currentslide ? currentslide : slides.length) - 1;
showCurrentImage();
});
slideShowElement.find(".slideshow-play-pause").click(togglePlay);
slideShowElement.find(".close-annotation").click(closeAnnotation);
slideShowElement.find(".annotation-title").text(data.title);
}
function closeAnnotation(e) {
$(".chip").removeClass("current");
$(".chapters-bar").removeClass("annotation-onscreen");
$(".main-video .annotation").remove();
if (!!e) {
myMedia.play();
}
}
});