Metadataplayer bugfixes
authorRaphael Velt <raph.velt@gmail.com>
Fri, 25 Jan 2013 18:49:33 +0100
changeset 778 525f00c2d6ac
parent 777 edbb8df3a091
child 779 e13084ff318b
Metadataplayer bugfixes
web/polemicaltimeline.php
web/res/metadataplayer/Annotation.css
web/res/metadataplayer/Annotation.js
web/res/metadataplayer/AnnotationsList.css
web/res/metadataplayer/AnnotationsList.js
web/res/metadataplayer/LdtPlayer-core.css
web/res/metadataplayer/LdtPlayer-core.js
web/res/metadataplayer/MultiSegments.js
web/res/metadataplayer/Tweet.js
--- a/web/polemicaltimeline.php	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/polemicaltimeline.php	Fri Jan 25 18:49:33 2013 +0100
@@ -180,10 +180,10 @@
                 //foreign_url : "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}",
                 container: "AnnotationsListContainer"
             },
-            {
+/*            {
                 type: "Slideshare",
                 container: "Slideshare"
-            },
+        }, */
 <?php endif; ?>
 <?php endif; ?>
             { type: "Mediafragment"},
--- a/web/res/metadataplayer/Annotation.css	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/Annotation.css	Fri Jan 25 18:49:33 2013 +0100
@@ -6,10 +6,6 @@
     margin: 0;
 }
 
-.Ldt-Annotation-Highlight {
-    background: #ffa0fc;
-}
-
 .Ldt-Annotation-Widget.Ldt-Annotation-ShowTop {
     border-top-style: solid;
     padding-top: 1px;
--- a/web/res/metadataplayer/Annotation.js	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/Annotation.js	Fri Jan 25 18:49:33 2013 +0100
@@ -76,17 +76,12 @@
             return;
         }
         var title = currentAnnotation.title,
-            description = currentAnnotation.description.replace(/(^\s+|\s+$)/g,'');
-        if (currentAnnotation.found) {
-            var rgxp = _this.source.getAnnotations().regexp || /^$/,
-                repl = '<span class="Ldt-Annotation-Highlight">$1</span>';
-            title = title.replace(rgxp,repl);
-            description = description.replace(rgxp,repl).replace(/[\n\r]+/gm,'<br />');
-        }
-        _this.$.find(".Ldt-Annotation-Title").html(title || "(" + _this.l10n.untitled + ")");
+            description = currentAnnotation.description.replace(/(^\s+|\s+$)/g,''),
+            rx = (currentAnnotation.found ? (_this.source.getAnnotations().regexp || false) : false);
+        _this.$.find(".Ldt-Annotation-Title").html(IriSP.textFieldHtml(title,rx)  || "(" + _this.l10n.untitled + ")");
         if (description) {
             _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
-            _this.$.find(".Ldt-Annotation-Description").html(description);
+            _this.$.find(".Ldt-Annotation-Description").html(IriSP.textFieldHtml(description,rx));
         } else {
             _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
         }
@@ -156,7 +151,7 @@
         this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
     }
     
-    this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow" }, "arrow");
+    this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow", width: this.width }, "arrow");
     this.onMediaEvent("timeupdate",timeupdate);
     this.onMdpEvent("Annotation.hide","hide");
     this.onMdpEvent("Annotation.show","show");
--- a/web/res/metadataplayer/AnnotationsList.css	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/AnnotationsList.css	Fri Jan 25 18:49:33 2013 +0100
@@ -25,9 +25,6 @@
 .Ldt-AnnotationsList-li.selected {
     background-image: url(img/pinstripe-grey.png);
 }
-.Ldt-AnnotationsList-highlight {
-    background: #FFA0FC;
-}
 .Ldt-AnnotationsList-ThumbContainer {
     float: left;
     width: 80px;
@@ -54,14 +51,25 @@
     margin: 2px 2px 0 82px;
     font-weight: bold;
 }
-h3.Ldt-AnnotationsList-Title a {
+
+.Ldt-AnnotationsList-Title a {
     color: #0068c4;
 }
+
 p.Ldt-AnnotationsList-Description {
     margin: 2px 0 2px 82px;
     font-size: 12px;
     color: #333333;
 }
+
+.Ldt-AnnotationsList-Description a {
+    color: #0068c4;
+}
+
+.Ldt-AnnotationsList-Description a:hover {
+    text-decoration: underline; color: #800000;
+}
+
 ul.Ldt-AnnotationsList-Tags {
     list-style: none;
     padding: 0;
--- a/web/res/metadataplayer/AnnotationsList.js	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/AnnotationsList.js	Fri Jan 25 18:49:33 2013 +0100
@@ -71,9 +71,9 @@
     + '</div>'
     + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'
     + '<h3 class="Ldt-AnnotationsList-Title">'
-    + '<a href="{{url}}">{{title}}</a>'
+    + '<a href="{{url}}">{{{title}}}</a>'
     + '</h3>'
-    + '<p class="Ldt-AnnotationsList-Description">{{description}}</p>'
+    + '<p class="Ldt-AnnotationsList-Description">{{{description}}}</p>'
     + '{{#tags.length}}'
     + '<ul class="Ldt-AnnotationsList-Tags">'
     + '{{#tags}}'
@@ -202,8 +202,8 @@
             var _data = {
                 id : _annotation.id,
                 media_id : _annotation.getMedia().id,
-                title : _title,
-                description : _description,
+                title : IriSP.textFieldHtml(_title),
+                description : IriSP.textFieldHtml(_description),
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
                 thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
@@ -265,10 +265,11 @@
         });
         
         if (this.source.getAnnotations().searching) {
+            var rx = _this.source.getAnnotations().regexp || false;
             this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
                 var _$ = IriSP.jQuery(this);
-                _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_this.source.getAnnotations().regexp, '<span class="Ldt-AnnotationsList-highlight">$1</span>'))
-            })
+                _$.html(IriSP.textFieldHtml(_$.text(), rx));
+            });
         }
     }
     
--- a/web/res/metadataplayer/LdtPlayer-core.css	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/LdtPlayer-core.css	Fri Jan 25 18:49:33 2013 +0100
@@ -12,4 +12,8 @@
 /*    font-family: Arial, Helvetica, sans-serif; */
     color: black;
     font-size: 12px;
-}
\ No newline at end of file
+}
+
+.Ldt-Highlight {
+    background: #ffa0fc;
+}
--- a/web/res/metadataplayer/LdtPlayer-core.js	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/LdtPlayer-core.js	Fri Jan 25 18:49:33 2013 +0100
@@ -246,6 +246,79 @@
     }
 }
 
+IriSP.textFieldHtml = function(_text, _regexp, _extend) {
+    var list = [],
+        positions = [],
+        text = _text.replace(/(^\s+|\s+$)/g,'');
+    
+    function addToList(_rx, _startHtml, _endHtml) {
+        while(true) {
+            var result = _rx.exec(text);
+            if (!result) {
+                break;
+            }
+            var end = _rx.lastIndex,
+                start = result.index;
+            list.push({
+                start: start,
+                end: end,
+                startHtml: (typeof _startHtml === "function" ? _startHtml(result) : _startHtml),
+                endHtml: (typeof _endHtml === "function" ? _endHtml(result) : _endHtml)
+            });
+            positions.push(start);
+            positions.push(end);
+        }
+    }
+    
+    if (_regexp) {
+        addToList(_regexp, '<span class="Ldt-Highlight">', '</span>');
+    }
+    
+    addToList(/(https?:\/\/)?\w+\.\w+\S+/gm, function(matches) {
+        return '<a href="' + (matches[1] ? '' : 'http://') + matches[0] + '" target="_blank">'
+    }, '</a>');
+    addToList(/@([\d\w]{1,15})/gm, function(matches) {
+        return '<a href="http://twitter.com/' + matches[1] + '" target="_blank">'
+    }, '</a>');
+    addToList(/\*[^*]+\*/gm, '<b>', '</b>');
+    addToList(/[\n\r]+/gm, '', '<br />');
+    
+    IriSP._(_extend).each(function(x) {
+        addToList.apply(null, x);
+    });
+    
+    positions = IriSP._(positions)
+        .chain()
+        .uniq()
+        .sortBy(function(p) { return parseInt(p) })
+        .value();
+    
+    var res = "", lastIndex = 0;
+    
+    for (var i = 0; i < positions.length; i++) {
+        var pos = positions[i];
+        res += text.substring(lastIndex, pos);
+        for (var j = list.length - 1; j >= 0; j--) {
+            var item = list[j];
+            if (item.start < pos && item.end >= pos) {
+                res += item.endHtml;
+            }
+        }
+        for (var j = 0; j < list.length; j++) {
+            var item = list[j];
+            if (item.start <= pos && item.end > pos) {
+                res += item.startHtml;
+            }
+        }
+        lastIndex = pos;
+    }
+    
+    res += text.substring(lastIndex);
+    
+    return res;
+    
+}
+
 IriSP.log = function() {
     if (typeof console !== "undefined" && typeof IriSP.logging !== "undefined" && IriSP.logging) {
         console.log.apply(console, arguments);
@@ -272,11 +345,12 @@
     var uidbase = rand16(8) + "-" + rand16(4) + "-", uidincrement = Math.floor(Math.random()*0x10000);
     
     var charsub = [
-        [ 'a', 'á', 'à', 'â', 'ä' ],
-        [ 'c', 'ç' ],
-        [ 'e', 'é', 'è', 'ê', 'ë' ],
-        [ 'i', 'í', 'ì', 'î', 'ï' ],
-        [ 'o', 'ó', 'ò', 'ô', 'ö' ]
+        '[aáàâä]',
+        '[cç]',
+        '[eéèêë]',
+        '[iíìîï]',
+        '[oóòôö]',
+        '[uùûü]'
     ];
     
     var removeChars = [
@@ -324,10 +398,7 @@
             remrx = new RegExp(remsrc,"gm"),
             txt = _text.toLowerCase().replace(remrx,"")
             res = [],
-            charsrc = ns._(charsub).map(function(c) {
-                return "(" + c.join("|") + ")";
-            }),
-            charsrx = ns._(charsrc).map(function(c) {
+            charsrx = ns._(charsub).map(function(c) {
                 return new RegExp(c);
             }),
             src = "";
@@ -336,7 +407,7 @@
                 src += remsrc + "*";
             }
             var l = txt[j];
-            ns._(charsrc).each(function(v, k) {
+            ns._(charsub).each(function(v, k) {
                 l = l.replace(charsrx[k], v);
             });
             src += l;
@@ -476,7 +547,7 @@
  */
 Model.List.prototype.searchByTitle = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp = Model.regexpFromTextOrArray(_text, true);
+        _rgxp = Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         return _rgxp.test(_element.title);
     });
@@ -484,7 +555,7 @@
 
 Model.List.prototype.searchByDescription = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp = Model.regexpFromTextOrArray(_text, true);
+        _rgxp = Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         return _rgxp.test(_element.description);
     });
@@ -492,7 +563,7 @@
 
 Model.List.prototype.searchByTextFields = function(_text, _iexact) {
     var _iexact = _iexact || false,
-        _rgxp =  Model.regexpFromTextOrArray(_text, true);
+        _rgxp =  Model.regexpFromTextOrArray(_text, true, _iexact);
     return this.filter(function(_element) {
         var keywords = (_element.keywords || _element.getTagTexts() || []).join(", ");
         return _rgxp.test(_element.description) || _rgxp.test(_element.title) || _rgxp.test(keywords);
--- a/web/res/metadataplayer/MultiSegments.js	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/MultiSegments.js	Fri Jan 25 18:49:33 2013 +0100
@@ -79,7 +79,8 @@
                 line.segmentWidget,
                 IriSP._({
                     type: "Segments",
-                    annotation_type: _anntype
+                    annotation_type: _anntype,
+                    width: _this.width
                 }).extend(segmentsopts)
             );
             
@@ -87,7 +88,8 @@
                 line.annotationWidget,
                 IriSP._({
                     type: "Annotation",
-                    annotation_type: _anntype
+                    annotation_type: _anntype,
+                    width: _this.width
                 }).extend(annotationopts)
             );
             
--- a/web/res/metadataplayer/Tweet.js	Thu Jan 24 18:55:58 2013 +0100
+++ b/web/res/metadataplayer/Tweet.js	Fri Jan 25 18:49:33 2013 +0100
@@ -93,87 +93,51 @@
 
 IriSP.Widgets.Tweet.prototype.show = function(_tweet) {
     if (typeof _tweet !== "undefined" && typeof _tweet.source !== "undefined") {
-        var _entities = [];
-        for (var _i = 0; _i < _tweet.source.entities.hashtags.length; _i++) {
-            var _hash = _tweet.source.entities.hashtags[_i];
-            _entities.push({
-                is_link: true,
-                text: '#' + _hash.text,
-                url: 'http://twitter.com/search?q=%23' + encodeURIComponent(_hash.text),
-                indices: _hash.indices
-            });
-        }
-        for (var _i = 0; _i < _tweet.source.entities.urls.length; _i++) {
-            var _url = _tweet.source.entities.urls[_i],
-                _displayurl = (typeof _url.display_url !== "undefined" && _url.display_url !== null ? _url.display_url : _url.url),
-                _linkurl = (typeof _url.expanded_url !== "undefined" && _url.expanded_url !== null ? _url.expanded_url : _url.url);
-            _displayurl = _displayurl.replace(/^\w+:\/\//,'');
-            if (!/^\w+:\/\//.test(_linkurl)) {
-                _linkurl = 'http://' + _linkurl;
-            }
-            _entities.push({
-                is_link: true,
-                text: _displayurl,
-                url: _linkurl,
-                indices: _url.indices
-            });
-        }
-        for (var _i = 0; _i < _tweet.source.entities.user_mentions.length; _i++) {
-            var _user = _tweet.source.entities.user_mentions[_i];
-            _entities.push({
-                is_link: true,
-                text: '@' + _user.screen_name,
-                url: 'http://twitter.com/' + encodeURIComponent(_user.screen_name),
-                indices: _user.indices
-            });
-        }
-        for (var _i = 0; _i < this.polemics.length; _i++) {
-            for (var _j = 0; _j < this.polemics[_i].keywords.length; _j++) {
-                var _p = _tweet.source.text.indexOf(this.polemics[_i].keywords[_j]);
-                while (_p !== -1) {
-                    var _end = (_p + this.polemics[_i].keywords[_j].length);
-                    _entities.push({
-                        is_link: false,
-                        text: this.polemics[_i].keywords[_j],
-                        color: this.polemics[_i].color,
-                        indices: [_p, _end]
-                    });
-                    _p = _tweet.source.text.indexOf(this.polemics[_i].keywords[_j], _end);
-                }
-            }
-        }
-        _entities = IriSP._(_entities).sortBy(function(_entity) {
+        var extend = [
+            [
+                /#(\w+)/gm,
+                function(matches) {
+                    return '<a href="http://twitter.com/search?q=%23' + matches[1] + '" target="_blank">'
+                },
+                '</a>'
+            ]
+        ];
+        var _urls = IriSP._(_tweet.source.entities.urls).sortBy(function(_entity) {
             return _entity.indices[0];
         });
+        
         var _currentPos = 0,
             _txt = '';
-        for (var _i = 0; _i < _entities.length; _i++) {
-            if (_entities[_i].indices[0] >= _currentPos) {
-                _txt += _tweet.source.text.substring(_currentPos, _entities[_i].indices[0]);
-                _currentPos = _entities[_i].indices[1];
-                if (_entities[_i].is_link) {
-                    _txt += '<a href="' + _entities[_i].url + '" target="_blank">';
-                } else {
-                    _txt += '<span style="background:' + _entities[_i].color + '">';
-                }
-                _txt += _entities[_i].text;
-                if (_entities[_i].is_link) {
-                    _txt += '</a>';
-                } else {
-                    _txt += '</span>';
-                }
+        IriSP._(_urls).each(function(_url) {
+            if (_url.indices[0] >= _currentPos) {
+                _txt += _tweet.source.text.substring(_currentPos, _url.indices[0]);
+                _txt += (typeof _url.expanded_url !== "undefined" && _url.expanded_url !== null ? _url.expanded_url : _url.url);
+                _currentPos = _url.indices[1];
             }
-        }
+        });
         _txt += _tweet.source.text.substring(_currentPos);
-        this.$.find(".Ldt-Tweet-Avatar").attr("src",_tweet.source.user.profile_image_url);
-        this.$.find(".Ldt-Tweet-ScreenName").html('@'+_tweet.source.user.screen_name);
-        this.$.find(".Ldt-Tweet-ProfileLink").attr("href", "https://twitter.com/" + _tweet.source.user.screen_name);
-        this.$.find(".Ldt-Tweet-FullName").html(_tweet.source.user.name);
-        this.$.find(".Ldt-Tweet-Contents").html(_txt);
+        
+        for (var _i = 0; _i < this.polemics.length; _i++) {
+            var rx = IriSP.Model.regexpFromTextOrArray(this.polemics[_i].keywords);
+            extend.push([
+                rx,
+                '<span style="background: ' + this.polemics[_i].color + '">',
+                '</span>'
+            ]);
+        }
+        var rx = (_tweet.found ? (_this.source.getAnnotations().regexp || false) : false),
+            profile_url = _tweet.source.user ? _tweet.source.user.profile_image_url : _tweet.source.profile_image_url,
+            screen_name = _tweet.source.user ? _tweet.source.user.screen_name :_tweet.source.from_user,
+            user_name = _tweet.source.user ? _tweet.source.user.name :_tweet.source.from_user_name;
+        this.$.find(".Ldt-Tweet-Avatar").attr("src", profile_url);
+        this.$.find(".Ldt-Tweet-ScreenName").html('@' + screen_name);
+        this.$.find(".Ldt-Tweet-ProfileLink").attr("href", "https://twitter.com/" + screen_name);
+        this.$.find(".Ldt-Tweet-FullName").html(user_name);
+        this.$.find(".Ldt-Tweet-Contents").html(IriSP.textFieldHtml(_txt, rx, extend));
         this.$.find(".Ldt-Tweet-Time").html(this.l10n.original_time + new Date(_tweet.source.created_at).toLocaleTimeString() + " / " + this.l10n.video_time + _tweet.begin.toString());
         this.$.find(".Ldt-Tweet-Retweet").attr("href", "https://twitter.com/intent/retweet?tweet_id=" + _tweet.source.id_str);
         this.$.find(".Ldt-Tweet-Reply").attr("href", "https://twitter.com/intent/tweet?in_reply_to=" + _tweet.source.id_str);
-        this.$.find(".Ldt-Tweet-Original").attr("href", "https://twitter.com/" + _tweet.source.user.screen_name + "/status/" + _tweet.source.id_str);
+        this.$.find(".Ldt-Tweet-Original").attr("href", "https://twitter.com/" + screen_name + "/status/" + _tweet.source.id_str);
         this.player.trigger("Annotation.minimize");
         this.$.slideDown();
         this.cancelTimeout();