--- a/player/css/styles.css Fri May 24 18:49:09 2013 +0200
+++ b/player/css/styles.css Mon May 27 18:54:46 2013 +0200
@@ -84,7 +84,7 @@
}
.tags-title {
- line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;
+ line-height: 40px; padding: 0 15px; font-size: 11px; color: #cc40c0;
font-family: 'Futura-Medium'; text-transform: uppercase;
}
@@ -106,7 +106,11 @@
}
.tag:hover {
- color: #B8155F; background: #202020;
+ color: #cc40c0; background: #202020;
+}
+
+.tag.found {
+ color: #cc40c0;
}
/* Annotation colors */
@@ -152,9 +156,14 @@
border-radius: 19px; cursor: pointer;
}
+.found .picto {
+ box-shadow: 0 0 8px #ff00f0;
+ border: 2px solid #800078; padding: 5px;
+}
+
.picto-title {
margin-left: 10px; font-size: 12px; text-transform: uppercase;
- display: none; text-shadow: 0 0 2px #000000; font-family: 'Futura-Medium';
+ display: none; text-shadow: 0.3px 0.7px 0 rgba(0,0,0,.5), -0.3px -0.7px 0 rgba(200,200,200,.5); font-family: 'Futura-Medium';
}
.hover .picto-title {
@@ -165,11 +174,13 @@
background: url(../img/sprites.png); display: block; width: 24px; height: 24px;
}
-.video.hover .picto {
+.video.hover .picto ,
+.video.current .picto {
background: #be4477;
}
-.video.hover .picto a {
+.video.hover .picto a ,
+.video.current .picto a {
background-position: -24px 0;
}
@@ -177,11 +188,13 @@
background-position: 0 -24px;
}
-.audio.hover .picto {
+.audio.hover .picto,
+.audio.current .picto {
background: #63be6c;
}
-.audio.hover .picto a {
+.audio.hover .picto a ,
+.audio.current .picto a {
background-position: -24px -24px;
}
@@ -189,11 +202,13 @@
background-position: 0 -48px;
}
-.slideshow.hover .picto {
+.slideshow.hover .picto ,
+.slideshow.current .picto {
background: #f69058;
}
-.slideshow.hover .picto a {
+.slideshow.hover .picto a ,
+.slideshow.current .picto a {
background-position: -24px -48px;
}
@@ -201,11 +216,13 @@
background-position: 0 -72px;
}
-.text.hover .picto {
+.text.hover .picto ,
+.text.current .picto {
background: #5e90cb;
}
-.text.hover .picto a {
+.text.hover .picto a ,
+.text.current .picto a {
background-position: -24px -72px;
}
@@ -213,11 +230,13 @@
background-position: 0 -96px;
}
-.quote.hover .picto {
+.quote.hover .picto ,
+.quote.current .picto {
background: #00aeb5;
}
-.quote.hover .picto a {
+.quote.hover .picto a ,
+.quote.current .picto a {
background-position: -24px -96px;
}
@@ -225,11 +244,13 @@
background-position: 0 -120px;
}
-.link.hover .picto {
+.link.hover .picto ,
+.link.current .picto {
background: #8985bb;
}
-.link.hover .picto a {
+.link.hover .picto a ,
+.link.current .picto a {
background-position: -24px -120px;
}
@@ -252,32 +273,37 @@
font-weight: bold; font-size: 20px;
}
-.text-annotation, .slideshow-annotation, .video-annotation, .audio-annotation {
+.annotation {
left: 45px; top: 20px; right: 35px;
}
/* Text annotation */
-.text-annotation {
+.text-annotation,
+.link-annotation,
+.audio-annotation {
background: #ffffff; max-height: 522px; overflow: auto;
}
.text-annotation .close-annotation,
-.audio-annotation .close-annotation {
+.audio-annotation .close-annotation,
+.link-annotation .close-annotation {
color: #000000;
}
.text-annotation .close-annotation:hover,
-.audio-annotation .close-annotation:hover {
+.audio-annotation .close-annotation:hover,
+.link-annotation .close-annotation:hover {
color: #666666;
}
.text-annotation .annotation-title,
-.audio-annotation .annotation-title {
+.audio-annotation .annotation-title,
+.link-annotation .annotation-title {
font-size: 23px; margin: 24px 0;
}
-.text-annotation .annotation-contents {
+.text-contents {
font-family: Georgia, 'Times New Roman', serif;
margin: 0 45px 35px;
column-count: 2; column-gap: 60px;
@@ -285,23 +311,92 @@
-webkit-column-count: 2; -webkit-column-gap: 60px;
}
-.text-annotation p {
- margin-bottom: 10px;
+.text-contents p, .text-contents ul, .text-contents ol {
+ column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid;
+ margin-bottom: 10px; font-size: 15px;
+}
+
+.text-contents h2, .text-contents h3, .text-contents h4 {
+ font-family: 'Futura-Medium'; margin-bottom: 10px; line-height: 1.1em;
+ column-break-after:avoid; -moz-column-break-after:avoid; -webkit-column-break-after:avoid;
+ column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid;
+}
+
+.text-contents h2 {
+ font-size: 21px;
+}
+
+.text-contents h3 {
+ font-size: 18px;
+}
+
+.text-contents h4 {
+ font-size: 15px;
+}
+
+.text-contents b, .text-contents strong {
+ font-weight: bold;
+}
+
+.text-contents em, .text-contents i {
+ font-style: italic;
+}
+
+.text-contents a {
+ color: #5E90CB;
+}
+
+.text-contents ul {
+ list-style: disc; padding-left: 2em;
+}
+
+.text-contents ol {
+ list-style: decimal; padding-left: 2em;
+}
+
+.text-contents li {
+ list-style: inherit; margin: 2px 0;
+}
+
+/* Link annotation */
+
+.link-contents {
+ font-family: Georgia, 'Times New Roman', serif;
+ margin: 0 80px 35px;
+}
+
+.link-contents p {
+ text-align: center; font-size: 23px; margin: 30px 0;
+}
+
+.link-contents a {
+ color: #000000;
}
/* Audio annotation */
-.audio-annotation {
- background: #ffffff;
+.audio-description {
+ font-family: Georgia, 'Times New Roman', serif;
+ margin: 35px 45px; font-size: 15px;
+}
+
+.audio-frame {
+ margin: 0 45px;
+}
+
+.audio-description p {
+ margin-bottom: 10px;
}
/* Slideshow annotation */
-.slideshow-center {
+.slideshow-center,
+.video-center {
position: relative; background: rgba(0,0,0,.7);
}
-.slideshow-annotation .annotation-title {
+.slideshow-annotation .annotation-title,
+.video-annotation .annotation-title {
height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
}
@@ -309,6 +404,10 @@
float: left;
}
+.video-frame {
+ float: left; width: 650px;
+}
+
.slideshow-image {
max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
}
@@ -355,7 +454,12 @@
max-height: 452px; overflow: auto;
}
-.slideshow-center:after {
+.video-description {
+ max-height: 487px; overflow: auto;
+}
+
+.slideshow-center:after,
+.video-center:after {
content: "."; visibility: hidden; display: block; height: 1px; clear: both;
}
@@ -437,11 +541,7 @@
}
.chapter.found .chapter-block {
- background: #510829;
-}
-
-.chapter.found.active .chapter-block {
- background: #8a1249;
+ box-shadow: 0 0 20px rgba(255, 0, 240, .6) inset;
}
.annotation-onscreen .chapter-block {
@@ -460,7 +560,7 @@
}
.chip {
- position: absolute; top: 0;
+ position: absolute; top: 0; width: 1px;
}
.chip-circle {
@@ -472,8 +572,11 @@
display: none; font-family: 'Futura-Medium'; width: 200px; border-left: 1px solid; padding: 0 3px 4px; line-height: 9px;
}
-.chip.hover .chip-title,
-.chip.current .chip-title {
+.left .chip-title {
+ border-left: none; border-right: 1px solid; left: auto; right: 0; text-align: right;
+}
+
+.chip.hover .chip-title {
display: block;
}
@@ -486,6 +589,11 @@
opacity: 1;
}
+.found .chip-circle {
+ box-shadow: 0 0 8px #ff00f0;
+ border: 2px solid #800078; width: 9px; height: 9px;
+}
+
.video .chip-circle {
background: #be4477;
}
--- a/player/data/rigoletto.json Fri May 24 18:49:09 2013 +0200
+++ b/player/data/rigoletto.json Mon May 27 18:54:46 2013 +0200
@@ -91,6 +91,24 @@
"dc:creator": "IRI"
},
"id": "tag-london-symphony-orchestra"
+ }, {
+ "meta": {
+ "dc:contributor": "IRI",
+ "dc:created": "2012-05-07T10:11:06.727228",
+ "dc:title": "Air",
+ "dc:modified": "2012-05-07T10:11:06.727228",
+ "dc:creator": "IRI"
+ },
+ "id": "tag-air"
+ }, {
+ "meta": {
+ "dc:contributor": "IRI",
+ "dc:created": "2012-05-07T10:11:06.727228",
+ "dc:title": "Rigoletto (personnage)",
+ "dc:modified": "2012-05-07T10:11:06.727228",
+ "dc:creator": "IRI"
+ },
+ "id": "tag-rigoletto"
}
],
"lists": [],
@@ -182,6 +200,8 @@
"id-ref": "tag-duc-de-mantoue"
}, {
"id-ref": "tag-gilda"
+ }, {
+ "id-ref": "tag-rigoletto"
}
],
"color": "3355443",
@@ -232,6 +252,9 @@
"id-ref": "tag-duc-de-mantoue"
}, {
"id-ref": "tag-gilda"
+ },
+ {
+ "id-ref": "tag-air"
}
],
"color": "3355443",
@@ -294,7 +317,7 @@
]
},
"begin": 80000,
- "end": 95000,
+ "end": 200000,
"media": "media-01",
"meta": {
"dc:contributor": "perso",
@@ -305,6 +328,169 @@
},
"tags": [],
"id": "annotation-06"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-video",
+ "description": "Voici une description de la vidéo.\nYour bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.",
+ "title": "Le voyage dans la Lune",
+ "autostart": true,
+ "url": "http://www.iri.centrepompidou.fr/dev/~veltr/mashup/moon/melies.webm"
+ },
+ "begin": 200000,
+ "end": 320000,
+ "media": "media-01",
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "tags": [],
+ "id": "annotation-07"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-video",
+ "description": "Giuseppe Verdi\nRigoletto\nDirected by Jean-Pierre Ponnelle\n1982\nVienna Philharmonic Orchestra and Vienna State Opera Chorus\nConductor: Riccardo Chailly\nRigoletto: Ingvar Wixell\nDuke of Mantua: Luciano Pavarotti\nGilda: Edita Gruberova\nSparafucile: Ferruccio Furlanetto\nMaddalena: Victoria Vergara",
+ "title": "Cortigiani vil razza sur Youtube",
+ "autostart": true,
+ "url": "http://youtu.be/JULs5RoCEgM?t=3m36s"
+ },
+ "begin": 20000,
+ "end": 140000,
+ "media": "media-01",
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "tags": [
+ {
+ "id-ref": "tag-giuseppe-verdi"
+ },
+ {
+ "id-ref": "tag-air"
+ }, {
+ "id-ref": "tag-rigoletto"
+ }],
+ "id": "annotation-08"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-structured",
+ "description": "Ceci est un exemple d'annotation basique, n'utilisant pas les nouveaux types définis pour Aix.",
+ "title": "Annotation basique (LDT-Structured)"
+ },
+ "begin": 40000,
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "end": 160000,
+ "tags": [],
+ "color": "3355443",
+ "media": "media-01",
+ "id": "annotation-09"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-text",
+ "description": "",
+ "title": "Annotation avec texte enrichi",
+ "markup": "html",
+ "text": "<h2>Sous-titre de niveau 2 de l'annotation enrichie</h2><h3>Sous-titre de niveau 3 de l'annotation enrichie</h3><p>Paragraphe de l'annotation enrichie</p><p>Autre paragraphe de l'annotation enrichie</p><h4>Sous-titre de niveau 4 de l'annotation en texte enrichi</h4><p>Un paragraphe avec des balises <strong>strong</strong>, <em>em</em>, <i>i</i>, <u>u</u> et <b>b</b></p><ul><li>Element de liste</li><li>Element de liste</li></ul><ol><li>Element de liste</li><li>Element de liste</li></ol><p>Paragraphe avec un lien vers <a href='http://www.wikipedia.org/'>Wikipédia</a></p>"
+ },
+ "begin": 70000,
+ "end": 190000,
+ "media": "media-01",
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "tags": [],
+ "id": "annotation-10"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-links",
+ "description": "",
+ "title": "Quelques liens",
+ "links": [
+ {
+ "title": "Victor Hugo sur Wikipédia",
+ "url": "http://fr.wikipedia.org/wiki/Victor_Hugo"
+ }, {
+ "title": "Giuseppe Verdi sur Wikipédia",
+ "url": "http://fr.wikipedia.org/wiki/Giuseppe_Verdi"
+ }, {
+ "title": "Rigoletto sur Wikipédia",
+ "url": "http://fr.wikipedia.org/wiki/Rigoletto"
+ }
+ ]
+ },
+ "begin": 320000,
+ "end": 340000,
+ "media": "media-01",
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "tags": [
+ {
+ "id-ref": "tag-giuseppe-verdi"
+ },
+ {
+ "id-ref": "victor-hugo"
+ }],
+ "id": "annotation-11"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-audio",
+ "description": "La majorité anonyme, je veux dire le public, est beaucoup plus près de la minorité pensante que la minorité non-pensante et puissante ne le croite. Cette minorité non-pensante possède hélas tous les outils de propagande qui permettent de devenir une majorité.",
+ "title": "Citation de Cocteau",
+ "autostart": true,
+ "url": "http://www.iri.centrepompidou.fr/wp-content/uploads/2012/01/CitationCocteau.mp3"
+ },
+ "begin": 250000,
+ "end": 340000,
+ "media": "media-01",
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "tags": [],
+ "id": "annotation-12"
+ }, {
+ "content": {
+ "mimetype": "application/x-ldt-audio",
+ "description": "",
+ "title": "Cortigiani, vil razza sur Soundcloud",
+ "autostart": true,
+ "url": "https://soundcloud.com/dimitri-platanias/cortigiani-rigoletto-verdi"
+ },
+ "begin": 110000,
+ "end": 230000,
+ "media": "media-01",
+ "meta": {
+ "dc:contributor": "perso",
+ "id-ref": "annotation-type-02",
+ "dc:created": "2012-05-07T10:11:06.721324",
+ "dc:modified": "2012-05-07T10:11:06.721324",
+ "dc:creator": "perso"
+ },
+ "tags": [],
+ "id": "annotation-13"
}
],
"annotation-types": [
--- a/player/index.html Fri May 24 18:49:09 2013 +0200
+++ b/player/index.html Mon May 27 18:54:46 2013 +0200
@@ -50,10 +50,22 @@
<div class="annotation text-annotation">
<a href="#" class="close-annotation">×</a>
- <h2 class="annotation-title">Titre de l'annotation textuelle</h2>
- <div class="annotation-contents">
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
- <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
+ <h2 class="annotation-title"></h2>
+ <div class="text-contents"></div>
+ </div>
+
+ <div class="annotation audio-annotation">
+ <a href="#" class="close-annotation">×</a>
+ <h2 class="annotation-title"></h2>
+ <div class="audio-frame"></div>
+ <div class="audio-description"></div>
+ </div>
+
+ <div class="annotation link-annotation">
+ <a href="#" class="close-annotation">×</a>
+ <h2 class="annotation-title"></h2>
+ <div class="link-contents">
+
</div>
</div>
@@ -80,7 +92,18 @@
<div class="slideshow-title"></div>
</div>
</div>
-
+
+ <div class="annotation video-annotation">
+ <a href="#" class="close-annotation">×</a>
+ <h2 class="annotation-title"></h2>
+ <div class="video-center">
+ <div class="video-frame">
+ </div>
+ <div class="video-description">
+ </div>
+ </div>
+ </div>
+
</div>
</div>
</body>
--- 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) {