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) {
$(".found").removeClass("found");
clickedTag = null;
}
});
function showTag(tagId) {
$(".found").removeClass("found");
var tag = myProject.getElement(tagId);
if (tag) {
tag.getRelated("annotation").forEach(function(a) {
a.trigger("found-tags");
});
$(".tag[data-tag-id="+tagId+"]").addClass("found");
}
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);
}
return false;
});
$(".next-chapter").click(function() {
if (i < chapters.length - 1) {
myMedia.setCurrentTime(chapters[currentChapterI + 1].begin);
}
return false;
});
$(".play-button").click(function() {
if (myMedia.paused) {
myMedia.play();
} else {
myMedia.pause();
}
return false;
});
$(".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);
}
});
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 %><%- left %>" style="left: <%- pos %>%"><span class="chip-circle">'
+ '</span><span class="chip-title"><%- annotation.title %></span></li>'
);
var annotations = myProject.getAnnotationsByTypeTitle("annotations");
var annotationinfos = annotations.map(function(annotation) {
var annotationinfo = {
annotation: annotation,
open: false,
pos: 100 * annotation.begin / annotation.getMedia().duration
};
annotationinfo.left = (annotationinfo.pos > 80 ? " left": "");
switch(annotation.content.mimetype) {
case "application/x-ldt-slideshow":
annotationinfo.type = "slideshow";
break;
case "application/x-ldt-video":
annotationinfo.type = "video";
break;
case "application/x-ldt-audio":
annotationinfo.type = "audio";
break;
case "application/x-ldt-links":
annotationinfo.type = "link";
break;
default:
annotationinfo.type = "text";
}
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();
});
annotation.on("found-tags", function() {
annotationinfo.both.addClass("found");
});
return annotationinfo;
});
currentAnnotation = null;
function openAnnotation(annotationinfo) {
if (currentAnnotation === annotationinfo) {
closeAnnotation(true);
return;
}
if (myMedia.currentTime < annotationinfo.annotation.begin || myMedia.currentTime > annotationinfo.annotation.end) {
myMedia.setCurrentTime(annotationinfo.annotation.begin);
}
myMedia.pause();
closeAnnotation(false);
currentAnnotation = annotationinfo;
annotationinfo.both.addClass("current");
$(".chapters-bar").addClass("annotation-onscreen");
var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
annotationDiv.appendTo($(".main-video"));
annotationDiv.find(".close-annotation").click(closeAnnotation);
annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
switch (annotationinfo.type) {
case "slideshow":
var currentslide = 0,
slideInterval,
playing = false,
loaded = false,
slides = annotationinfo.annotation.content.images;
var resizeImage = function() {
var imgel = annotationDiv.find(".slideshow-image");
imgel.css("margin-top","");
var w = imgel.width(),
h = imgel.height();
annotationDiv.find(".slideshow-center").css("height","");
annotationDiv.find(".slideshow-description").css("margin-left",w);
var h2 = annotationDiv.find(".slideshow-center").height();
if (h < h2) {
imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
}
}
var showCurrentImage = function() {
var slide = slides[currentslide];
annotationDiv.find(".slideshow-image").attr({
src: slide.image.src,
title: slide.title,
alt: slide.title
});
annotationDiv.find(".slideshow-title").text(slide.title);
annotationDiv.find(".slideshow-description").html(
slide.description.split(/\n/gm).map(function(l) {
return '<p>' + _.escape(l) + '</p>';
}).join("")
);
resizeImage();
}
var nextImage = function() {
currentslide = (currentslide + 1) % slides.length;
showCurrentImage();
}
var togglePlay = function() {
playing = !playing;
clearInterval(slideInterval);
if (playing) {
slideInterval = setInterval(nextImage,annotationinfo.annotation["slide-duration"]);
annotationDiv.find(".slideshow-play-pause").addClass("pause");
} else {
annotationDiv.find(".slideshow-play-pause").removeClass("pause");
}
}
var checkloaded = function() {
if (loaded) {
return;
}
loaded = slides.reduce(function(mem, slide) {
return (mem && !!slide.image && !!slide.image.width);
}, true);
if (loaded) {
showCurrentImage();
if (annotationinfo.annotation.autostart) {
togglePlay();
}
}
}
slides.forEach(function(slide) {
slide.image = new Image();
slide.image.onload = checkloaded;
slide.image.src = slide.url;
});
checkloaded();
annotationDiv.find(".slideshow-next").click(nextImage);
annotationDiv.find(".slideshow-previous").click(function() {
currentslide = (currentslide ? currentslide : slides.length) - 1;
showCurrentImage();
});
annotationDiv.find(".slideshow-play-pause").click(togglePlay);
break;
case "video":
var youtubeTemplate = _.template(
'<iframe width="<%- width %>" height="<%- height %>" src="http://www.youtube.com/embed/<%- ytid %>?rel=0&autoplay=<%- autoplay %>" frameborder="0"></iframe>'
);
var htmlVideoTemplate = _.template(
'<video width="<%- width %>" controls="true" autoplay="<%- autoplay %>"><source src="<%- mp4vid %>" type="video/mp4" /><source src="<%- webmvid %>" type="video/webm" /></video>'
);
var videoW = 650, videoH = 400;
annotationDiv.find(".video-description").html(
annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
return '<p>' + _.escape(l) + '</p>';
}).join("")
);
if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(annotationinfo.annotation.content.url)) {
var urlparts = annotationinfo.annotation.content.url.split(/[?&]/g),
ytid = "",
vtest = /^v=/;
urlparts.slice(1).forEach(function(p) {
if (/^v=/.test(p)) {
ytid = p.replace(vtest,"");
}
});
if (!ytid) {
ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0];
}
annotationDiv.find(".video-frame").html(youtubeTemplate({
ytid: ytid,
width: videoW,
height: videoH,
autoplay: +annotationinfo.annotation.content.autostart
}));
return;
}
annotationDiv.find(".video-frame").html(htmlVideoTemplate({
mp4vid: annotationinfo.annotation.content.url.replace(/\.webm$/,'.mp4'),
webmvid: annotationinfo.annotation.content.url.replace(/\.mp4$/,'.webm'),
width: videoW,
height: videoH,
autoplay: ""+annotationinfo.annotation.content.autostart
}));
break;
case "audio":
var htmlAudioTemplate = _.template(
'<video width="100%" height="30" controls="true" autoplay="<%- autoplay %>" src="<%- src %>" />'
);
annotationDiv.find(".audio-description").html(
annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
return '<p>' + _.escape(l) + '</p>';
}).join("")
);
if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(annotationinfo.annotation.content.url)) {
$.ajax({
url: "http://soundcloud.com/oembed",
dataType: "jsonp",
data: {
format: "js",
show_comments: false,
auto_play: annotationinfo.annotation.content.autostart,
show_artwork: false,
url: annotationinfo.annotation.content.url,
color: "63be6c"
},
success: function(data) {
annotationDiv.find(".audio-frame").html(data.html);
}
}
);
return;
}
annotationDiv.find(".audio-frame").html(htmlAudioTemplate({
src: annotationinfo.annotation.content.url,
autoplay: ""+annotationinfo.annotation.content.autostart
}));
break;
case "text":
var text = annotationinfo.annotation.content.text || annotationinfo.annotation.description;
switch (annotationinfo.annotation.content.markup) {
case "html":
annotationDiv.find(".text-contents").html(text);
break;
default:
annotationDiv.find(".text-contents").html(
text.split(/\n/gm).map(function(l) {
return '<p>' + _.escape(l) + '</p>';
}).join("")
);
break;
}
annotationDiv.find(".text-contents a").attr("target","_blank");
break;
case "link":
var linkTemplate = _.template('<p><a href="<%- url %>" target="_blank"><%- title %></a></p>');
annotationDiv.find(".link-contents").html(
annotationinfo.annotation.content.links.map(linkTemplate).join("")
);
break;
}
}
function closeAnnotation(e) {
currentAnnotation = null;
$(".chip, .pictolist li").removeClass("current");
$(".chapters-bar").removeClass("annotation-onscreen");
$(".main-video .annotation").remove();
if (!!e) {
myMedia.play();
}
}
});