# HG changeset patch
# User veltr
# Date 1369736809 -7200
# Node ID d708a1da0ea2da3ced5f05ffa04f78423aed7f7a
# Parent  eddf4d5db8752bd066282c11a0537f5cff584771
Added Dailymotion, Vimeo, etc.

diff -r eddf4d5db875 -r d708a1da0ea2 player/css/styles.css
--- a/player/css/styles.css	Mon May 27 18:54:46 2013 +0200
+++ b/player/css/styles.css	Tue May 28 12:26:49 2013 +0200
@@ -375,16 +375,16 @@
 
 /* Audio annotation */
 
-.audio-description {
+.audio-annotation .media-description {
     font-family: Georgia, 'Times New Roman', serif;
     margin: 35px 45px; font-size: 15px;
 }
 
-.audio-frame {
+.audio-annotation .media-frame {
     margin: 0 45px;
 }
 
-.audio-description p {
+.audio-annotation p {
     margin-bottom: 10px;
 }
 
@@ -404,8 +404,12 @@
     float: left;
 }
 
-.video-frame {
-    float: left; width: 650px;
+.video-annotation .media-frame {
+    float: left; width: 650px; max-height: 487px;
+}
+
+.video-annotation video {
+    width: 650px; max-height: 487px;
 }
 
 .slideshow-image {
@@ -454,7 +458,7 @@
     max-height: 452px; overflow: auto;
 }
 
-.video-description {
+.video-annotation .media-description {
     max-height: 487px; overflow: auto;
 }
 
diff -r eddf4d5db875 -r d708a1da0ea2 player/data/rigoletto.json
--- a/player/data/rigoletto.json	Mon May 27 18:54:46 2013 +0200
+++ b/player/data/rigoletto.json	Tue May 28 12:26:49 2013 +0200
@@ -115,7 +115,7 @@
     "medias": [
         {
             "origin": "0",
-            "url": "video/rigoletto.mp4",
+            "url": "http://www.iri.centrepompidou.fr/dev/~veltr/festivalaix/player/video/rigoletto.mp4",
             "http://advene.liris.cnrs.fr/ns/frame_of_reference/ms": "o=0",
             "meta": {
                 "dc:contributor": "IRI",
@@ -294,7 +294,7 @@
                 "mimetype": "application/x-ldt-slideshow",
                 "description": "",
                 "title": "Diaporama sur la mer",
-                "slide-duration": 3000,
+                "slideduration": 3000,
                 "autostart": false,
                 "images": [
                     {
@@ -491,6 +491,73 @@
             },
             "tags": [],
             "id": "annotation-13"
+        }, {
+            "content": {
+                "mimetype": "application/x-ldt-video",
+                "description": "Courtisans, race vile et damnée.",
+                "title": "Cortigiani, vil razza sur Vimeo",
+                "autostart": true,
+                "url": "http://vimeo.com/23268865"
+            },
+            "begin": 160000,
+            "end": 280000,
+            "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-14"
+        }, {
+            "content": {
+                "mimetype": "application/x-ldt-video",
+                "description": "La femme est changeante\nTelle une plume au vent,\nElle change de ton - et d'idée.\nToujours un aimable,\nGracieux visage,\nEn larmes ou en rire, - est mensonger.",
+                "title": "La donna è mobile sur Dailymotion",
+                "autostart": true,
+                "url": "http://www.dailymotion.com/video/xgs10f_the-three-tenors-la-donna-e-mobile_music"
+            },
+            "begin": 180000,
+            "end": 300000,
+            "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-15"
+        }, {
+            "content": {
+                "mimetype": "application/x-ldt-slideshow",
+                "description": "",
+                "title": "Portrait de Giuseppe Verdi",
+                "slide-duration": 3000,
+                "autostart": false,
+                "images": [
+                    {
+                        "url": "http://upload.wikimedia.org/wikipedia/commons/5/51/Verdi.jpg",
+                        "title": "Portrait de Giuseppe Verdi par Giovanni Boldini",
+                        "description": "Giuseppe Fortunino Francesco Verdi est un compositeur romantique italien, né le 10 octobre 1813 à Roncole et mort le 27 janvier 1901 à Milan. Son œuvre, composée essentiellement d’opéras, unissant le pouvoir mélodique à la profondeur psychologique et légendaire, est une des plus importantes de toute l'histoire du théâtre musical."
+                    }
+                ]
+            },
+            "begin": 260000,
+            "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-16"
         }
     ],
     "annotation-types": [
diff -r eddf4d5db875 -r d708a1da0ea2 player/index.html
--- a/player/index.html	Mon May 27 18:54:46 2013 +0200
+++ b/player/index.html	Tue May 28 12:26:49 2013 +0200
@@ -54,13 +54,6 @@
                     <div class="text-contents"></div>
                 </div>
                 
-                <div class="annotation audio-annotation">
-                    <a href="#" class="close-annotation">&times;</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">&times;</a>
                     <h2 class="annotation-title"></h2>
@@ -92,14 +85,21 @@
                         <div class="slideshow-title"></div>
                     </div>
                 </div>
+                
+                <div class="annotation audio-annotation">
+                    <a href="#" class="close-annotation">&times;</a>
+                    <h2 class="annotation-title"></h2>
+                    <div class="media-frame"></div>
+                    <div class="media-description"></div>
+                </div>
 
                 <div class="annotation video-annotation">
                     <a href="#" class="close-annotation">&times;</a>
                     <h2 class="annotation-title"></h2>
                     <div class="video-center">
-                        <div class="video-frame">
+                        <div class="media-frame">
                         </div>
-                        <div class="video-description">
+                        <div class="media-description">
                         </div>
                     </div>
                 </div>
diff -r eddf4d5db875 -r d708a1da0ea2 player/js/player.js
--- a/player/js/player.js	Mon May 27 18:54:46 2013 +0200
+++ b/player/js/player.js	Tue May 28 12:26:49 2013 +0200
@@ -16,7 +16,16 @@
         {
             width: 1000,
             height: 560,
-            autostart: true
+            autostart: true,
+            url_transform: function(src) {
+                return [{
+                    type: "video/mp4",
+                    src: src.replace(/\.[\d\w]+$/,'.mp4')
+                }, {
+                    type: "video/webm",
+                    src: src.replace(/\.[\d\w]+$/,'.webm')
+                }];
+            }
         }
     );
     
@@ -124,13 +133,13 @@
     });
     
     $(".prev-chapter").click(function() {
-        if (i) {
+        if (currentChapterI) {
             myMedia.setCurrentTime(chapters[currentChapterI - 1].begin);
         }
         return false;
     });
     $(".next-chapter").click(function() {
-        if (i < chapters.length - 1) {
+        if (currentChapterI < chapters.length - 1) {
             myMedia.setCurrentTime(chapters[currentChapterI + 1].begin);
         }
         return false;
@@ -243,13 +252,13 @@
         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","");
@@ -262,7 +271,7 @@
                         imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
                     }
                 }
-               
+                
                 var showCurrentImage = function() {
                     var slide = slides[currentslide];
                     annotationDiv.find(".slideshow-image").attr({
@@ -278,23 +287,23 @@
                     );
                     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"]);
+                        slideInterval = setInterval(nextImage,Math.max(1000,annotationinfo.annotation.content.slideduration || 0));
                         annotationDiv.find(".slideshow-play-pause").addClass("pause");
                     } else {
                         annotationDiv.find(".slideshow-play-pause").removeClass("pause");
                     }
                 }
-               
+                
                 var checkloaded = function() {
                     if (loaded) {
                         return;
@@ -304,49 +313,57 @@
                     }, true);
                     if (loaded) {
                         showCurrentImage();
-                        if (annotationinfo.annotation.autostart) {
+                        if (annotationinfo.annotation.autostart && slides.length > 1) {
                             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);
+                
+                if (slides.length > 1) {
+                    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);
+                } else {
+                    annotationDiv.find(".slideshow-next, .slideshow-previous, .slideshow-play-pause").hide();
+                }
                 
             break;
             
+            case "audio":
             case "video":
             
+                var src = annotationinfo.annotation.content.url;
+            
                 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 htmlTemplate = _.template(
+                    '<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
                 );
                 
-                var videoW = 650, videoH = 400;
+                var mediaW = (annotationinfo.type === "audio" ? "100%" : "650"),
+                    mediaH = (annotationinfo.type === "audio" ? "60" : "420");
         
-                annotationDiv.find(".video-description").html(
+                annotationDiv.find(".media-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),
+                if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(src)) {
+                    var urlparts = src.split(/[?&]/g),
                         ytid = "",
                         vtest = /^v=/;
                     urlparts.slice(1).forEach(function(p) {
@@ -357,38 +374,54 @@
                     if (!ytid) {
                         ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0];
                     }
-                    annotationDiv.find(".video-frame").html(youtubeTemplate({
+                    annotationDiv.find(".media-frame").html(youtubeTemplate({
                         ytid: ytid,
-                        width: videoW,
-                        height: videoH,
+                        width: mediaW,
+                        height: mediaH,
                         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
-                }));
+                if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) {
+                    $.ajax({
+                        url: "http://vimeo.com/api/oembed.json",
+                        dataType: "jsonp",
+                        data: {
+                            width: mediaW,
+                            height: mediaH,
+                            url: src,
+                            autoplay: +annotationinfo.annotation.content.autostart,
+                            color: "be4477",
+                            portrait: false,
+                            title: false,
+                            byline: false
+                        },
+                        success: function(data) {
+                            annotationDiv.find(".media-frame").html(data.html);
+                        }
+                    });
+                    return;
+                }
                 
-            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\.)?dailymotion/.test(src)) {
+                    $.ajax({
+                        url: "http://www.dailymotion.com/services/oembed",
+                        dataType: "jsonp",
+                        data: {
+                            format: "json",
+                            maxwidth: mediaW,
+                            maxheight: 487,
+                            url: src
+                        },
+                        success: function(data) {
+                            annotationDiv.find(".media-frame").html(data.html);
+                        }
+                    });
+                    return;
+                }
                 
-                if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(annotationinfo.annotation.content.url)) {
+                if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) {
                     $.ajax({
                         url: "http://soundcloud.com/oembed",
                         dataType: "jsonp",
@@ -397,20 +430,33 @@
                             show_comments: false,
                             auto_play: annotationinfo.annotation.content.autostart,
                             show_artwork: false,
-                            url: annotationinfo.annotation.content.url,
+                            url: src,
                             color: "63be6c"
                         },
                         success: function(data) {
-                            annotationDiv.find(".audio-frame").html(data.html);
+                            annotationDiv.find(".media-frame").html(data.html);
                         }
-                    }
-                    );
+                    });
                     return;
                 }
-               
-                annotationDiv.find(".audio-frame").html(htmlAudioTemplate({
-                    src: annotationinfo.annotation.content.url,
-                    autoplay: ""+annotationinfo.annotation.content.autostart
+                
+                var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1],
+                    mimetype = annotationinfo.type + "/" + extension,
+                    fallbacks = { "video/webm": "mp4", "video/mp4": "webm" },
+                    canPlay = document.createElement("video").canPlayType(mimetype);
+                
+                if (!canPlay) {
+                    src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]);
+                }
+                
+                console.log(mimetype, canPlay, src);
+                
+                annotationDiv.find(".media-frame").html(htmlTemplate({
+                    type: annotationinfo.type,
+                    src: src,
+                    width: mediaW,
+                    height: mediaH,
+                    autoplay: "" + annotationinfo.annotation.content.autostart
                 }));
                 
             break;
@@ -446,15 +492,23 @@
             break;
         }
     }
+    
+    $(".video-container").click(function() {
+        if (currentAnnotation) {
+            closeAnnotation(true);
+        }
+        return false;
+    });
    
     function closeAnnotation(e) {
         currentAnnotation = null;
         $(".chip, .pictolist li").removeClass("current");
         $(".chapters-bar").removeClass("annotation-onscreen");
-        $(".main-video .annotation").remove();
+        $(".main-video .annotation").hide().remove();
         if (!!e) {
             myMedia.play();
         }
+        return false;
     }
    
 });