metadataplayer: comparison src/widgets/AnnotationsList.js

Mercurial Mercurial > metadataplayer / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

src/widgets/AnnotationsList.js

changeset 1075	92cb33eb7a75
parent 1072	ac1eacb3aa33
child 1076	510fd2a482f4

equal deleted inserted replaced

-:231ea5ea7de4
+:92cb33eb7a75
 import Mustache from "mustache";
 import _ from "lodash";
 import jQuery from "jquery";
+const IsImageOk = function (img) {
+// During the onload event, IE correctly identifies any images that
+// weren’t downloaded as not complete. Others should too. Gecko-based
+// browsers act like NS4 in that they report this incorrectly.
+if (!img.complete) {
+return false;
+}
+// However, they do have two very useful properties: naturalWidth and
+// naturalHeight. These give the true size of the image. If it failed
+// to load, either of these should be zero.
+if (img.naturalWidth === 0) {
+return false;
+}
+// No other way of checking: assume it’s ok.
+return true;
+}
 const AnnotationsList = function (ns) {
+const thumbnailBuffer = {};
 return class extends ns.Widgets.Widget {
 constructor(player, config) {
 super(player, config);
 this.lastIds = [];
 var _this = this;
 static annotationTemplate =
 '<li class="Ldt-AnnotationsList-li Ldt-Highlighter-Annotation Ldt-TraceMe" data-annotation="{{ id }}" data-begin="{{ begin_ms }}" data-end="{{ end_ms }}" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">' +
 '<div data-annotation="{{ id }}" class="Ldt-AnnotationsList-ThumbContainer Ldt-AnnotationsList-Annotation-Screen Ldt-AnnotationsList-Annotation-ScreenMain">' +
 '<a {{#url}}href="{{url}}"{{/url}} draggable="true">' +
-'<img title="{{^external}}{{ begin }} - {{ end }}{{/external}}{{#external}}{{l10n.external_annotation}}{{/external}}" class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />' +
+'<img title="{{^external}}{{ begin }} - {{ end }}{{/external}}{{#external}}{{l10n.external_annotation}}{{/external}}" class="Ldt-AnnotationsList-Thumbnail" id="{{thumbnailId}}" />' +
 '{{#external}}<div title="{{l10n.external_annotation}}" class="Ldt-AnnotationsList-External-Icon"></div>{{/external}}' +
 "</a>" +
 "</div>" +
 "{{#allow_annotations_deletion}}" +
 '<div data-annotation="{{ id }}" class="Ldt-AnnotationsList-DeleteButton">&#10006;</div>' +
 * Import annotations
 */
 importAnnotations() {
 var widget = this;
 var $ = jQuery;
-var textarea = $("<textarea>");
+var textarea = jQuery("<textarea>");
-var el = $("<div>")
+var el = jQuery("<div>")
 .append(
-$("<span>")
+jQuery("<span>")
 .addClass("importAnnotationsLabel")
 .text(widget.messages.import_annotations)
 )
 .addClass("importContainer")
 .dialog({
 height: 400,
 buttons: [
 {
 text: "Close",
 click: function () {
-$(this).dialog("close");
+jQuery(this).dialog("close");
 },
 },
 // { text: "Load", click: function () {
 //     // TODO
 //     // http://www.html5rocks.com/en/tutorials/file/dndfiles/?redirect_from_locale=fr
 _annotation.begin / 1000.0,
 _external =
 _annotation.project != _this.source.projectId ? true : false,
 _title = "",
 _description = _annotation.description,
+_thumbnailId = `thumb_${_annotation.id}`,
 _thumbnail =
 typeof _annotation.thumbnail !== "undefined" &&
 _annotation.thumbnail
 ? _annotation.thumbnail
 : _this.default_thumbnail;
 if (_this.show_creator) {
 if (_annotation.creator) {
 var _users = [],
 _user = {},
 _creator = "";
 end: _annotation.end.toString(),
 created: _created,
 show_timecode: _this.show_timecode,
 show_end_time: _this.show_end_time,
 show_title: _this.show_title && _title,
-thumbnail: _thumbnail,
+thumbnailId: _thumbnailId,
 url: _url,
 tags: _tags,
 specific_style:
 typeof _bgcolor !== "undefined"
 ? "background-color: " + _bgcolor
 },
 _onunselect = function () {
 _this.$.find(".Ldt-AnnotationsList-li").removeClass("selected");
 };
 _el
-.mouseover(function () {
+.on("mouseover",function () {
 _annotation.trigger("select");
 })
-.mouseout(function () {
+.on("mouseout",function () {
 _annotation.trigger("unselect");
 })
-.click(function () {
+.on("click",function () {
 if (_this.filter_by_segments && _this.media.getTimeRange()) {
 _ann_time = (_annotation.begin + _annotation.end) / 2;
 if (
 _ann_time <= _this.media.getTimeRange()[0] ||
 _ann_time >= _this.media.getTimeRange()[1]
 }
 }
 _annotation.trigger("click");
 })
 .appendTo(_this.list_$);
+let img = thumbnailBuffer[_thumbnail];
+if(typeof(img) == "undefined") {
+img = new Image();
+thumbnailBuffer[_thumbnail] = img;
+}
+console.log("Thumnailimg", jQuery(`#${_thumbnailId}`,_el).attr('src'));
+if(img.src && IsImageOk(img)) {
+jQuery(`#${_thumbnailId}`,_el).attr('src', img.src);
+} else {
+img.onload = function() {
+jQuery(`#${_thumbnailId}`,_el).attr('src', img.src);
+};
+img.onerror = function() {
+img.src = _this.default_thumbnail;
+const elthumbnail = jQuery(`#${_thumbnailId}`,_el);
+elthumbnail.attr('src', _this.default_thumbnail);
+};
+img.src = _thumbnail;
+}
 ns.attachDndData(_el.find("[draggable]"), {
 title: _title,
 description: _description,
 uri: _url,
 image: _annotation.thumbnail,
 // have to specify the ancestor before which we can
 // insert the input widget.
 if (insertion_point === undefined) insertion_point = _this;
 // Insert input element
-var input_element = $(
+var input_element = jQuery(
 _this.dataset.editable_type === "multiline"
 ? "<textarea>"
 : "<input>"
 )
 .addClass("editableInput")
-.insertBefore($(insertion_point));
+.insertBefore(jQuery(insertion_point));
 input_element[0].value = _this.dataset.editable_value;
-$(input_element).show().focus();
+jQuery(input_element).show().focus();
-$(_this).addClass("editing");
+jQuery(_this).addClass("editing");
 function feedback(color) {
 // Give some feedback
-$(_this).removeClass("editing");
+jQuery(_this).removeClass("editing");
 input_element.remove();
-var previous_color = $(_this).css("background-color");
+var previous_color = jQuery(_this).css("background-color");
-$(_this)
+jQuery(_this)
 .stop()
 .css("background-color", color)
 .animate({ backgroundColor: previous_color }, 1000);
 }
 return;
 }
 }
 _this.dataset.editable_value = n;
 n = val;
-$(_this).text(val);
+jQuery(_this).text(val);
 }
 // We cannot use .getElement since it fetches
 // elements from the global Directory
 var an = get_local_annotation(_this.dataset.editable_id);
 widget.player.addLocalAnnotation(an);
 widget.player.trigger("Annotation.update", an);
 feedback(feedback_ok);
 }
 }
-$(input_element)
+jQuery(input_element)
 .bind("keydown", function (e) {
 if (e.which == 13) {
 e.preventDefault();
 validateChanges();
 } else if (e.which == 27) {
 if (widget.on_edit) {
 var _annotation = get_local_annotation(this.dataset.editable_id);
 widget.on_edit(_annotation);
 } else {
 // Edit annotation title. We have to specify the insertion point.
-var element = $(this)
+var element = jQuery(this)
 .parents(".Ldt-AnnotationsList-li")
 .find(".Ldt-AnnotationsList-TitleContent.Ldt-live-editable");
 edit_element(element[0]);
 }
 });
 url: _url,
 type: widget.api_method,
 contentType: "application/json",
 data: _export.serialize(),
 success: function (_data) {
-$(this).addClass("published");
+jQuery(this).addClass("published");
 // Save the published information
 var an = get_local_annotation(_annotation.id);
 // FIXME: handle "published" tag
 an.setTags(["published"]);
 save_local_annotations();

metadataplayer