integration/js/mashupcore.js
changeset 43 5a5024bc74e6
parent 41 3ec2343f2b85
child 45 f39df810caab
--- a/integration/js/mashupcore.js	Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/js/mashupcore.js	Fri Nov 16 19:23:20 2012 +0100
@@ -42,7 +42,7 @@
                 mashup.setCurrentTime(mashup.duration);
             }
             changeCurrentAnnotation();
-            mashup.trigger("enter-annotation",mashupCurrentAnnotation);
+            mashup.trigger("enter-annotation",mashup.currentAnnotation);
         }
         
     }
@@ -109,11 +109,15 @@
         })
         .mouseout(timeSliderMouseOut);
     timeSlider.mousemove(function(_e) {
-            var _x = _e.pageX - timeSlider.offset().left,
-                _t = new IriSP.Model.Time(
-                );
-            timeTooltip.text(_t.toString()).css("left",_x);
-        });
+        if (!currentMedia) {
+            return;
+        }
+        var _x = _e.pageX - timeSlider.offset().left,
+            _t = new IriSP.Model.Time(
+                Math.max(0, currentMedia.duration * Math.min(1, _x / timeSlider.width()))
+            );
+        timeTooltip.text(_t.toString()).css("left",_x);
+    });
     
     $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
     
@@ -210,17 +214,6 @@
         }
     });
     
-    $(".Ldt-Ctrl-SetIn").click(function() {
-        if (currentMedia && currentSegment) {
-            currentSegment.setBegin(currentMedia.getCurrentTime());
-        }
-    });
-    $(".Ldt-Ctrl-SetOut").click(function() {
-        if (currentMedia && currentSegment) {
-            currentSegment.setEnd(currentMedia.getCurrentTime());
-        }
-    });
-    
     /* UI Events */
 
     function onCurrentMediaPlay() {
@@ -245,17 +238,16 @@
     /* Mashup Player */
    
     mashup.currentMedia = null;
-   
-    var mashupCurrentAnnotation = null,
-        mashupSegmentBegin,
+    mashup.currentAnnotation = null;
+    mashup.seeking = false;
+    var mashupSegmentBegin,
         mashupSegmentEnd,
         mashupTimecode = 0,
-        mashupSeeking = false,
         seekdiv = $(".video-wait"),
         mashupTimedelta;
     
     function showSeek() {
-        if (mashupSeeking) {
+        if (currentMedia.seeking) {
             seekdiv.show();
         }
     }
@@ -279,11 +271,11 @@
             }
             return;
         }
-        mashupCurrentAnnotation = _annotation;
-        mashupSegmentBegin = mashupCurrentAnnotation.annotation.begin.milliseconds;
-        mashupSegmentEnd = mashupCurrentAnnotation.annotation.end.milliseconds;
-        mashupTimedelta = mashupSegmentBegin - mashupCurrentAnnotation.begin.milliseconds;
-        mashup.currentMedia = mashupCurrentAnnotation.getMedia();
+        mashup.currentAnnotation = _annotation;
+        mashupSegmentBegin = mashup.currentAnnotation.annotation.begin.milliseconds;
+        mashupSegmentEnd = mashup.currentAnnotation.annotation.end.milliseconds;
+        mashupTimedelta = mashupSegmentBegin - mashup.currentAnnotation.begin.milliseconds;
+        mashup.currentMedia = mashup.currentAnnotation.getMedia();
         
         project.getMedias().forEach(function(_media) {
             if (_media !== mashup.currentMedia) {
@@ -299,7 +291,7 @@
         
         if (!mashup.paused) {
             mashup.currentMedia.play();
-            mashupSeeking = true;
+            mashup.seeking = true;
             setTimeout(showSeek,200);
         }
         mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
@@ -355,6 +347,8 @@
         media.on("setcurrenttime", function(_milliseconds) {
             if (media.loaded) {
                 popcorn.currentTime(_milliseconds / 1000);
+                media.seeking = true;
+                setTimeout(showSeek,200);
             }
         });
         
@@ -469,10 +463,10 @@
         
         media.on("seeked", function() {
             media.seeking = false;
-            if (mashup === currentMedia && media === mashup.currentMedia && mashupSeeking) {
-                mashupSeeking = false;
-                seekdiv.hide();
+            if (mashup === currentMedia && media === mashup.currentMedia && mashup.seeking) {
+                mashup.seeking = false;
             }
+            seekdiv.hide();
         });
         
         media.on("volumechange", function() {
@@ -576,14 +570,20 @@
         if (!annotation) {
             return;
         }
+        var segment = mashup.getAnnotation(annotation);
         $(".annotation[data-segment-id='" + annotation.id + "']").addClass("active");
+        $(".mashup-tooltip").show().css({
+            left: (100 * ( segment.begin + segment.end ) / ( 2 * mashup.duration ) ) + "%"
+        });
+        $(".mashup-tooltip .segment-tooltip").text(annotation.title);
     });
     
     project.on("mouseout-annotation", function() {
-        if (currentMedia === mashup && mashupCurrentAnnotation) {
+        if (currentMedia === mashup && mashup.currentAnnotation) {
             $(".annotation").removeClass("active");
-            $(".item-video.annotation[data-segment-id='" + mashupCurrentAnnotation.annotation.id + "']").addClass("active");
+            $(".item-video.annotation[data-segment-id='" + mashup.currentAnnotation.annotation.id + "']").addClass("active");
         }
+        $(".mashup-tooltip").hide();
     });
     
     project.on("click-annotation", function(annotation) {
@@ -616,15 +616,37 @@
         currentMedia.trigger("pause");
     });
     
-    $(".frise")
-    .on("mouseover", ".frise-segment", function() {
-        project.trigger("mouseover-annotation", project.getElement($(this).attr("data-segment-id")));
+    var mouseoverSegment;
+    
+    $(".mashup-frise")
+    .mousemove(function(evt) {
+        if (!mashup.duration.milliseconds) {
+            return;
+        }
+        var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+        if (segment) {
+            if (segment !== mouseoverSegment) {
+                project.trigger("mouseover-annotation", segment.annotation);
+            }
+        } else {
+            if (mouseoverSegment) {
+                project.trigger("mouseout-annotation");
+            }
+        }
+        mouseoverSegment = segment;
     })
-    .on("mouseout", ".frise-segment", function() {
+    .mouseleave(function() {
         project.trigger("mouseout-annotation");
+        mouseoverSegment = undefined;
     })
-    .on("click", ".frise-segment", function() {
-        project.trigger("click-annotation", project.getElement($(this).attr("data-segment-id")));
+    .click(function(evt) {
+        if (!mashup.duration.milliseconds) {
+            return;
+        }
+        var el = $(this), t = ( evt.pageX - el.offset().left ) * mashup.duration / el.width(), segment = mashup.getAnnotationAtTime(t);
+        if (segment) {
+            project.trigger("click-annotation", segment.annotation);
+        }
     });
     
     mashup.trigger("add");