11 }; |
11 }; |
12 |
12 |
13 IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
13 IriSP.SegmentsWidget.prototype = new IriSP.Widget(); |
14 |
14 |
15 /* Get the width of a segment, in pixels. */ |
15 /* Get the width of a segment, in pixels. */ |
16 IriSP.SegmentsWidget.prototype.segmentToPixel(annotation) { |
16 IriSP.SegmentsWidget.prototype.segmentToPixel = function(annotation) { |
|
17 var begin = Math.round((+ annotation.begin) / 1000); |
|
18 var end = Math.round((+ annotation.end) / 1000); |
17 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
19 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
18 var id = annotation.id; |
20 |
19 var startPourcent = IriSP.timeToPourcent(begin, duration); |
21 var startPourcent = IriSP.timeToPourcent(begin, duration); |
20 var startPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)); |
22 var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100)); |
21 |
23 |
22 /* surprisingly, the following code doesn't work on webkit - for some reason, most of the |
|
23 boxes are 3 pixels smaller. |
|
24 */ |
|
25 var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); |
24 var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); |
26 var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)); |
25 var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)); |
|
26 |
|
27 return endPixel; |
|
28 }; |
|
29 |
|
30 /* compute the total length of a group of segments */ |
|
31 IriSP.SegmentsWidget.prototype.segmentsLength = function(segmentsList) { |
|
32 var self = this; |
|
33 var total = 0; |
|
34 |
|
35 for (var i = 0; i < segmentsList.length; i++) |
|
36 total += self.segmentToPixel(segmentsList[i].annotation); |
|
37 |
|
38 return total; |
27 }; |
39 }; |
28 |
40 |
29 IriSP.SegmentsWidget.prototype.draw = function() { |
41 IriSP.SegmentsWidget.prototype.draw = function() { |
30 |
42 |
31 var self = this; |
43 var self = this; |
32 var annotations = this._serializer._data.annotations; |
44 var annotations = this._serializer._data.annotations; |
33 |
45 |
34 this.selector.addClass("Ldt-SegmentsWidget"); |
46 this.selector.addClass("Ldt-SegmentsWidget"); |
35 |
|
36 /* in case we have different types of annotations, we want to display only the first type */ |
|
37 /* the next two lines are a bit verbose because for some test data, _serializer.data.view is either |
|
38 null or undefined. |
|
39 */ |
|
40 var view; |
|
41 |
|
42 if (typeof(this._serializer._data.views) !== "undefined" && this._serializer._data.views !== null) |
|
43 view = this._serializer._data.views[0]; |
|
44 |
|
45 var view_type = ""; |
|
46 |
|
47 if(typeof(view) !== "undefined" && typeof(view.annotation_types) !== "undefined" && view.annotation_types.length > 1) { |
|
48 view_type = view.annotation_types[0]; |
|
49 } |
|
50 |
|
51 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
47 this.selector.append(Mustache.to_html(IriSP.overlay_marker_template)); |
|
48 |
|
49 var view_type = this._serializer.getNonTweetIds()[0]; |
52 |
50 |
53 this.positionMarker = this.selector.children(":first"); |
51 this.positionMarker = this.selector.children(":first"); |
54 |
52 |
55 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); |
53 this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.positionUpdater)); |
56 |
54 |
57 |
55 |
58 var i = 0; |
56 var i = 0; |
59 var totalWidth = this.selector.width(); |
57 |
60 var onePxPercent = 100 / totalWidth; /* the value of a pixel, in percents */ |
|
61 |
|
62 var segments_annotations = []; |
58 var segments_annotations = []; |
63 |
59 |
64 for (i = 0; i < annotations.length; i++) { |
60 for (i = 0; i < annotations.length; i++) { |
65 var annotation = annotations[i]; |
61 var annotation = annotations[i]; |
66 |
62 |
68 if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" |
64 if (view_type != "" && typeof(annotation.meta) !== "undefined" && typeof(annotation.meta["id-ref"]) !== "undefined" |
69 && annotation.meta["id-ref"] != view_type) { |
65 && annotation.meta["id-ref"] != view_type) { |
70 continue; |
66 continue; |
71 } |
67 } |
72 |
68 |
73 segments_annotations.push(annotation); |
69 segments_annotations.push({annotation: annotation, pixelValue: this.segmentToPixel(annotation)}); |
|
70 } |
|
71 |
|
72 var totalWidth = this.selector.width() - segments_annotations.length; |
|
73 |
|
74 var currentWidth = IriSP.underscore.reduce(segments_annotations, function(memo, segment) { return memo + segment.pixelValue; }, 0); |
|
75 while(currentWidth > totalWidth) { |
|
76 var max = IriSP.underscore.max(segments_annotations, function(segment) { return segment.pixelValue; }); |
|
77 max.pixelValue -= 1; |
|
78 currentWidth = IriSP.underscore.reduce(segments_annotations, function(memo, segment) { return memo + segment.pixelValue; }, 0); |
|
79 } |
|
80 |
|
81 console.log(currentWidth); |
|
82 for (i = 0; i < segments_annotations.length; i++) { |
|
83 |
|
84 var annotation = segments_annotations[i].annotation; |
74 var begin = Math.round((+ annotation.begin) / 1000); |
85 var begin = Math.round((+ annotation.begin) / 1000); |
75 var end = Math.round((+ annotation.end) / 1000); |
86 var end = Math.round((+ annotation.end) / 1000); |
76 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
87 var duration = this._serializer.currentMedia().meta["dc:duration"] / 1000; |
77 var id = annotation.id; |
88 var id = annotation.id; |
78 var startPourcent = IriSP.timeToPourcent(begin, duration); |
89 var startPourcent = IriSP.timeToPourcent(begin, duration); |
79 |
90 var startPixel = Math.floor(this.selector.parent().width() * (startPourcent / 100)); |
80 /* surprisingly, the following code doesn't work on webkit - for some reason, most of the |
91 |
81 boxes are 3 pixels smaller. |
92 var pourcentWidth = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); |
82 */ |
93 //var pxWidth = Math.floor(this.selector.parent().width() * (pourcentWidth / 100)); |
83 var endPourcent = Math.floor(IriSP.timeToPourcent(end, duration) - startPourcent); |
94 var pxWidth = segments_annotations[i].pixelValue; |
84 var endPixel = Math.floor(this.selector.parent().width() * (endPourcent / 100)) - 2; |
95 |
85 |
96 /* don't show annotation with an empty length */ |
86 if (i == 0) { |
97 if (pxWidth === 0) |
87 |
98 continue; |
88 endPourcent -= onePxPercent; |
99 |
89 } |
|
90 |
|
91 var divTitle = (annotation.content.title + " - " + annotation.content.description).substr(0,55); |
100 var divTitle = (annotation.content.title + " - " + annotation.content.description).substr(0,55); |
92 |
101 |
93 if (typeof(annotation.content.color) !== "undefined") |
102 if (typeof(annotation.content.color) !== "undefined") |
94 var color = annotation.content.color; |
103 var color = annotation.content.color; |
95 else |
104 else |
101 hexa_color = "333"; |
110 hexa_color = "333"; |
102 if (hexa_color.length == 4) |
111 if (hexa_color.length == 4) |
103 hexa_color = hexa_color + '00'; |
112 hexa_color = hexa_color + '00'; |
104 |
113 |
105 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
114 var annotationTemplate = Mustache.to_html(IriSP.annotation_template, |
106 {"divTitle" : divTitle, "id" : id, "startPourcent" : startPourcent, |
115 {"divTitle" : divTitle, "id" : id, "startPixel" : startPixel, |
107 "endPixel" : endPixel, "hexa_color" : hexa_color, |
116 "pxWidth" : pxWidth, "hexa_color" : hexa_color, |
108 "seekPlace" : Math.round(begin/1000)}); |
117 "seekPlace" : Math.round(begin/1000)}); |
109 |
118 |
110 this.selector.append(annotationTemplate); |
119 this.selector.append(annotationTemplate); |
111 |
120 |
112 // IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |
121 // IriSP.jQuery("#" + id).tooltip({ effect: 'slide'}); |