player/js/player.js
changeset 71 af98a6dc9381
parent 65 1da0c1382b07
child 74 0405878fde82
--- a/player/js/player.js	Wed Jun 26 11:35:56 2013 +0200
+++ b/player/js/player.js	Thu Jun 27 11:51:46 2013 +0200
@@ -86,6 +86,7 @@
     }).click(function() {
         if (clickedTag) {
             $(".found").removeClass("found");
+            $(".timelines").removeClass("searching");
             clickedTag = null;
         }
         return false;
@@ -98,10 +99,13 @@
         $(".found").removeClass("found");
         var tag = myProject.getElement(tagId);
         if (tag) {
+            $(".timelines").addClass("searching");
             tag.getRelated("annotation").forEach(function(a) {
                 a.trigger("found-tags");
             });
             $(".tag[data-tag-id="+tagId+"]").addClass("found");
+        } else {
+            $(".timelines").removeClass("searching");
         }
         lastTag = tagId;
     }
@@ -293,10 +297,28 @@
         annotationDiv.find(".close-annotation").click(closeAnnotation);
         annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
         
-                
-        var positionDiv = function() {
+        annotationinfo.positionDiv = function() {
+            var mainH = $(".main-video").height()
+            switch (annotationinfo.type) {
+                case "video":
+                    var mediaW = annotationDiv.find(".media-frame").width(),
+                        mediaH = Math.floor(Math.min(mainH - 70, mediaW * 9 / 16));
+                    annotationDiv.find("iframe, video").attr({
+                        width: mediaW,
+                        height: mediaH
+                    });
+                    annotationDiv.find(".media-description").css({
+                       height: mediaH 
+                    });
+                break;
+                case "text":
+                    annotationDiv.find(".text-contents").css({
+                        "max-height": mainH - 140
+                    });
+                break;
+            }
             annotationDiv.css({
-                top: Math.floor(($(".main-video").height() - annotationDiv.height())/2)+"px"
+                top: Math.floor((mainH - annotationDiv.height())/2)+"px"
             });
         }
         
@@ -409,11 +431,11 @@
                 );
                 
                 var htmlTemplate = _.template(
-                    '<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
+                    '<<%- type %> width="<%- width %>" height="<%- height %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
                 );
                 
-                var mediaW = (annotationinfo.type === "audio" ? "100%" : "650"),
-                    mediaH = (annotationinfo.type === "audio" ? "60" : "420");
+                var mediaW = (annotationinfo.type === "audio" ? "100%" : annotationDiv.find(".media-frame").width()),
+                    mediaH = (annotationinfo.type === "audio" ? "60" : Math.floor(Math.min($(".main-video").height() - 70, mediaW * 9 / 16)));
         
                 annotationDiv.find(".media-description").html(
                     annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
@@ -458,7 +480,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv();
+                            annotationinfo.positionDiv();
                         }
                     });
                     break;
@@ -471,12 +493,12 @@
                         data: {
                             format: "json",
                             maxwidth: mediaW,
-                            maxheight: 487,
+                            maxheight: mediaH,
                             url: src
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv();
+                            annotationinfo.positionDiv();
                         }
                     });
                     break;
@@ -496,7 +518,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv();
+                            annotationinfo.positionDiv();
                         }
                     });
                     break;
@@ -520,7 +542,7 @@
                 }));
                 
                 media.on("loadedmetadata", function() {
-                    positionDiv();
+                    annotationinfo.positionDiv();
                 });
                 
                 preventRightClick(media);
@@ -546,9 +568,6 @@
                     break;
                 }
                 annotationDiv.find(".text-contents a").attr("target","_blank");
-                annotationDiv.find(".text-contents").css({
-                    "max-height": $(".main-video").height() - 140
-                });
                 
             break;
             
@@ -558,14 +577,12 @@
                 
                 annotationDiv.find(".link-contents").html(
                     annotationinfo.annotation.content.links.map(linkTemplate).join("")
-                ).css({
-                    "max-height": $(".main-video").height() - 140
-                });
+                );
                 
             break;
         }
         
-        positionDiv();
+        annotationinfo.positionDiv();
         
     }
     
@@ -600,7 +617,23 @@
     }
     
     $(".full-screen").click(fullScreen);
+    $(".top-bar").dblclick(fullScreen);
     
+    var fsel = document.querySelector("body"),
+        fsRequestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+        fsCapable = false;
+        
+    for (var i = 0; i < fsRequestMethods.length; i++) {
+        if (typeof fsel[fsRequestMethods[i]] === "function") {
+            fsCapable = true;
+            break;
+        }
+    }
+    
+    if (!fsCapable) {
+        $(".full-screen").remove();
+    }
+            
     $(".about").click(function() {
         closeAnnotation();
         var aboutBox = $(".annotation-templates .about-box").clone().appendTo($(".main-video"));
@@ -650,6 +683,9 @@
             left: dw,
             bottom: dh
         });
+        if (currentAnnotation) {
+            currentAnnotation.positionDiv();
+        }
     }
     
     $(".video-container video").on("loadedmetadata",repositionElements);