AnnotationsList now updated to work with mashups new-model
authorveltr
Tue, 15 May 2012 15:50:19 +0200
branchnew-model
changeset 903 d9da52e20f7f
parent 902 14022f1d49ab
child 904 510ebab76fa3
AnnotationsList now updated to work with mashups
src/css/LdtPlayer-core.css
src/js/model.js
src/widgets/AnnotationsList.css
src/widgets/AnnotationsList.js
src/widgets/MediaList.js
test/mashup/fonts/DINBd.ttf
test/mashup/fonts/DINRg.ttf
test/mashup/player.htm
test/mashup/style.css
--- a/src/css/LdtPlayer-core.css	Mon May 14 16:59:07 2012 +0200
+++ b/src/css/LdtPlayer-core.css	Tue May 15 15:50:19 2012 +0200
@@ -9,7 +9,7 @@
 }
 
 .Ldt-Widget {
-    font-family: Arial, Helvetica, sans-serif;
+/*    font-family: Arial, Helvetica, sans-serif; */
     color: black;
     font-size: 12px;
 }
--- a/src/js/model.js	Mon May 14 16:59:07 2012 +0200
+++ b/src/js/model.js	Tue May 15 15:50:19 2012 +0200
@@ -573,6 +573,26 @@
     }
 }
 
+IriSP.Model.Mashup.prototype.getAnnotationAtTime = function(_time) {
+    var _list = this.segments.filter(function(_annotation) {
+        return _annotation.begin <= _time && _annotation.end > _time;
+    });
+    if (_list.length) {
+        return _list[0];
+    } else {
+        return undefined;
+    }
+}
+
+IriSP.Model.Mashup.prototype.getMediaAtTime = function(_time) {
+    var _annotation = this.getAnnotationAtTime(_time);
+    if (typeof _annotation !== "undefined") {
+        return _annotation.getMedia();
+    } else {
+        return undefined;
+    }
+}
+
 /* */
 
 IriSP.Model.Source = function(_config) {
--- a/src/widgets/AnnotationsList.css	Mon May 14 16:59:07 2012 +0200
+++ b/src/widgets/AnnotationsList.css	Tue May 15 15:50:19 2012 +0200
@@ -1,7 +1,7 @@
 /* AnnotationsListWidget */
 
 .Ldt-AnnotationsListWidget {
-    border: 1px solid #b6b8b8;
+    border: none; margin: 0; padding: 0;
     overflow: auto;
     max-height: 480px;
 }
--- a/src/widgets/AnnotationsList.js	Mon May 14 16:59:07 2012 +0200
+++ b/src/widgets/AnnotationsList.js	Tue May 15 15:50:19 2012 +0200
@@ -6,6 +6,7 @@
     this.throttledRefresh = IriSP._.throttle(function() {
         _this.refresh(false);
     }, 1500);
+    this.mashupMode = (this.source.currentMedia.elementType === "mashup");
 };
 
 IriSP.Widgets.AnnotationsList.prototype = new IriSP.Widgets.Widget();
@@ -92,6 +93,27 @@
     }, this.metadata));
 }
 
+IriSP.Widgets.AnnotationsList.prototype.ajaxMashup = function() {
+    var _currentTime = this.player.popcorn.currentTime();
+    if (typeof _currentTime == "undefined") {
+        _currentTime = 0;
+    }
+    var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
+    if (typeof _currentAnnotation !== "undefined" && _currentAnnotation.namespacedId.name !== this.lastMashupAnnotation) {
+        this.lastMashupAnnotation = _currentAnnotation.namespacedId.name;
+        var _currentMedia = _currentAnnotation.getMedia(),
+            _url = Mustache.to_html(this.ajax_url, {
+                media : _currentMedia.namespacedId.name,
+                begin : Math.max(0, _currentAnnotation.annotation.begin.milliseconds - this.ajax_granularity),
+                end : Math.min(_currentMedia.duration.milliseconds, _currentAnnotation.annotation.end.milliseconds + this.ajax_granularity)
+            });
+        console.log("Getting", _url);
+        this.currentSource = this.player.loadMetadata(IriSP._.defaults({
+            "url" : _url
+        }, this.metadata));
+    }
+}
+
 IriSP.Widgets.AnnotationsList.prototype.refresh = function(_forceRedraw) {
     _forceRedraw = (typeof _forceRedraw !== "undefined" && _forceRedraw);
     if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) {
@@ -102,7 +124,17 @@
     if (typeof _currentTime == "undefined") {
         _currentTime = 0;
     }
-    var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type, true) : this.currentSource.getAnnotations();
+    var _list = this.annotation_type ? this.currentSource.getAnnotationsByTypeTitle(this.annotation_type) : this.currentSource.getAnnotations();
+    if (this.mashupMode) {
+        var _currentAnnotation = this.source.currentMedia.getAnnotationAtTime(_currentTime * 1000);
+        if (typeof _currentAnnotation !== "undefined") {
+            _currentTime = _currentTime - _currentAnnotation.begin.getSeconds() + _currentAnnotation.annotation.begin.getSeconds();
+            var _mediaId = _currentAnnotation.getMedia().namespacedId.name;
+            _list = _list.filter(function(_annotation) {
+                return _annotation.getMedia().namespacedId.name === _mediaId;
+            });
+        }
+    }
     if (this.searchString) {
         _list = _list.searchByTextFields(this.searchString);
     }
@@ -163,6 +195,14 @@
                 });
     
         this.$.html(_html);
+        
+        /* Correct the empty tag bug */
+        this.$.find('.Ldt-AnnotationsList-Tag-Li').each(function() {
+            var _el = IriSP.jQuery(this);
+            if (!_el.text().replace(/(^\s+|\s+$)/g,'')) {
+                _el.detach();
+            }
+        });
     
         this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
             _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
@@ -177,9 +217,13 @@
         }
     }
     
-    if (this.ajax_url && this.ajax_granularity) {
-        if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) {
-            this.ajaxSource();
+    if (this.ajax_url) {
+        if (this.mashupMode) {
+            this.ajaxMashup();
+        } else {
+            if (Math.abs(_currentTime - this.lastAjaxQuery) > (this.ajax_granularity / 2000)) {
+                this.ajaxSource();
+            }
         }
     }
     return _list.length;
@@ -193,8 +237,12 @@
     
     var _this = this;
     
-    if (this.ajax_url && this.ajax_granularity) {
-        this.ajaxSource();
+    if (this.ajax_url) {
+        if (this.mashupMode) {
+            this.ajaxMashup();
+        } else {
+            this.ajaxSource();
+        }
     } else {
         this.currentSource = this.source;
     }
--- a/src/widgets/MediaList.js	Mon May 14 16:59:07 2012 +0200
+++ b/src/widgets/MediaList.js	Tue May 15 15:50:19 2012 +0200
@@ -30,8 +30,8 @@
     + '<div class="Ldt-MediaList-Now-ThumbContainer"><a href="" target="_blank">'
     + '<img class="Ldt-MediaList-Now-Thumbnail" src="" /></a></div>'
     + '<h3 class="Ldt-MediaList-Now-Title"><a href="" target="_blank"></a></h3>'
-    + '<p class="Ldt-MediaList-Now-Description"></p></div>'
-    + '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></div></div>';
+    + '<p class="Ldt-MediaList-Now-Description"></p></div></div>'
+    + '<div class="Ldt-MediaList-Other"><h2></h2><hr /><ul class="Ldt-MediaList-OtherList"></ul></div>';
 
 IriSP.Widgets.MediaList.prototype.mediaTemplate =
     '<li class="Ldt-MediaList-OtherList-li"><div class="Ldt-MediaList-Other-ThumbContainer"><a href="{{url}}" target="_blank">'
@@ -58,8 +58,7 @@
     this.redraw();
 };
 
-IriSP.Widgets.MediaList.prototype.redraw = function() {
-    var _media = this.lastMedia ? this.source.getElement(this.lastMedia) : undefined;
+IriSP.Widgets.MediaList.prototype.redraw = function(_media) {
     if (typeof _media !== "undefined") {
         this.$.find('.Ldt-MediaList-Other h2').html(this.l10n.other_media);
         this.$.find('.Ldt-MediaList-NowPlaying').show();
@@ -76,8 +75,8 @@
         this.$.find('.Ldt-MediaList-NowPlaying').hide();
     }
     var _this = this,
-        _otherlist = this.source.getMedias().filter(function(_media) {
-            return (_media.id !== _this.lastMedia)
+        _otherlist = this.source.getMedias().filter(function(_m) {
+            return (_m.id !== _this.lastMedia)
         });
     if (_otherlist.length) {
         this.$.find('.Ldt-MediaList-Other').show();
@@ -99,15 +98,12 @@
 };
 
 IriSP.Widgets.MediaList.prototype.onTimeupdate = function() {
-    var _time = Math.floor(this.player.popcorn.currentTime() * 1000),
-        _list = this.getWidgetAnnotations().filter(function(_annotation) {
-            return _annotation.begin <= _time && _annotation.end > _time;
-        });
-    if (_list.length) {
-        var _media = _list[0].getMedia();
-        if (_media.id !== this.lastMedia) {
-            this.lastMedia = _media.id;
-            this.redraw();
-        }
+    var _media = this.source.currentMedia;
+    if (_media.elementType === "mashup") {
+        _media = _media.getMediaAtTime(this.player.popcorn.currentTime() * 1000);
+    }
+    if (typeof _media !== "undefined" && _media.id !== this.lastMedia) {
+        this.lastMedia = _media.id;
+        this.redraw(_media);
     }
 }
Binary file test/mashup/fonts/DINBd.ttf has changed
Binary file test/mashup/fonts/DINRg.ttf has changed
--- a/test/mashup/player.htm	Mon May 14 16:59:07 2012 +0200
+++ b/test/mashup/player.htm	Tue May 15 15:50:19 2012 +0200
@@ -37,6 +37,9 @@
             </div>
             <div class="coldroite">
                 <div id="mediaList"></div>
+                <h2>Annotations</h2>
+                <hr />
+                <div id="annotationList"></div>
             </div>
             <div class="footer">
                 <hr />
@@ -76,6 +79,13 @@
                 type: "MediaList",
                 container: "mediaList"
             },
+            {
+                type: "AnnotationsList",
+                container: "annotationList",
+                ajax_url: "http://ldt.iri.centrepompidou.fr/ldtplatform/api/ldt/segments/{{media}}/{{begin}}/{{end}}?callback=?",
+                ajax_granularity: 30000,
+                limit_count: 3
+            },
             { type: "Mediafragment" }
         ]
     },
--- a/test/mashup/style.css	Mon May 14 16:59:07 2012 +0200
+++ b/test/mashup/style.css	Tue May 15 15:50:19 2012 +0200
@@ -1,3 +1,17 @@
+@font-face {
+    font-family: DIN;
+    font-weight: normal;
+    font-style: normal;
+    src: url(fonts/DINRg.ttf);
+}
+
+@font-face {
+    font-family: DIN;
+    font-weight: bold;
+    font-style: normal;
+    src: url(fonts/DINBd.ttf);
+}
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -25,7 +39,7 @@
 
 body {
     background: url(img/background.png) repeat-x top #f8f6f7;
-    font-family: 'DIN-Regular', Helvetica, Arial, sans-serif;
+    font-family: DIN;
 }
 
 .main-container {