--- a/player/js/player.js Fri May 24 18:49:09 2013 +0200
+++ b/player/js/player.js Mon May 27 18:54:46 2013 +0200
@@ -43,18 +43,19 @@
$("body").click(function() {
if (clickedTag) {
- $(".chapter").removeClass("found");
+ $(".found").removeClass("found");
clickedTag = null;
}
});
function showTag(tagId) {
- $(".chapter").removeClass("found");
+ $(".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;
}
@@ -117,7 +118,7 @@
highlightChapter();
});
chapter.on("found-tags", function() {
- element.addClass("found");
+ element.addClass("found");
});
chapterList.append(element);
});
@@ -126,11 +127,13 @@
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() {
@@ -139,6 +142,7 @@
} else {
myMedia.pause();
}
+ return false;
});
$(".progress-indicator").draggable({
@@ -149,9 +153,6 @@
myMedia.setCurrentTime(t);
}
});
- $(".play-button").click(function() {
- $(this).toggleClass("pause");
- });
var pictoTemplate = _.template(
'<li class="<%- type %>"><span class="picto"><a href="#"></a></span>'
@@ -159,22 +160,34 @@
);
var chipTemplate = _.template(
- '<li class="chip <%- type %>" style="left: <%- pos %>%"><span class="chip-circle">'
+ '<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");
- annotations.forEach(function(annotation) {
+ 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");
@@ -193,12 +206,17 @@
annotation.on("leave", function() {
annotationinfo.picto.hide();
});
+ annotation.on("found-tags", function() {
+ annotationinfo.both.addClass("found");
+ });
+ return annotationinfo;
});
+ currentAnnotation = null;
+
function openAnnotation(annotationinfo) {
- if (annotationinfo.open) {
- annotationinfo.open = false;
+ if (currentAnnotation === annotationinfo) {
closeAnnotation(true);
return;
}
@@ -207,113 +225,231 @@
myMedia.setCurrentTime(annotationinfo.annotation.begin);
}
- annotationinfo.open = true;
-
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":
- slideshow(annotationinfo.annotation);
+
+ 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 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");
+ currentAnnotation = null;
+ $(".chip, .pictolist li").removeClass("current");
$(".chapters-bar").removeClass("annotation-onscreen");
$(".main-video .annotation").remove();
if (!!e) {