# HG changeset patch # User veltr # Date 1340979772 -7200 # Node ID b3ee7d1b472a4e9df6fdc242d40eafbe5767e507 # Parent 096c06aea8b52356920e7539900cdd1475702960 UI improvements diff -r 096c06aea8b5 -r b3ee7d1b472a assets/psd/pin-cross.psd Binary file assets/psd/pin-cross.psd has changed diff -r 096c06aea8b5 -r b3ee7d1b472a src/js/players/player.jwplayer.js --- a/src/js/players/player.jwplayer.js Wed Jun 27 19:03:37 2012 +0200 +++ b/src/js/players/player.jwplayer.js Fri Jun 29 16:22:52 2012 +0200 @@ -28,12 +28,18 @@ _this.trigger("loadedmetadata"); }, onTime: function() { + if (_this.media.paused && _player.getState() === "PLAYING") { + _this.media.paused = false; + _this.trigger("play"); + } _this.trigger("timeupdate"); }, onPlay: function() { + _this.media.paused = false; _this.trigger("play"); }, onPause: function() { + _this.media.paused = true; _this.trigger("pause"); }, onSeek: function() { diff -r 096c06aea8b5 -r b3ee7d1b472a src/js/serializers/ldt_annotate.js --- a/src/js/serializers/ldt_annotate.js Wed Jun 27 19:03:37 2012 +0200 +++ b/src/js/serializers/ldt_annotate.js Fri Jun 29 16:22:52 2012 +0200 @@ -19,7 +19,6 @@ }, tags: _data.getTagTexts(), media: _data.getMedia().id, - title: _data.title, type_title: _annType.title, type: ( typeof _annType.dont_send_id !== "undefined" && _annType.dont_send_id ? "" : _annType.id ) } @@ -52,8 +51,8 @@ if (typeof _data.annotations == "object" && _data.annotations && _data.annotations.length) { var _anndata = _data.annotations[0], _ann = new IriSP.Model.Annotation(_anndata.id, _source); - _ann.title = _anndata.content.title || ""; _ann.description = _anndata.content.data || ""; + _ann.title = _data.creator; _ann.created = new Date(_data.meta.created); _ann.setMedia(_anndata.media, _source); var _anntypes = _source.getAnnotationTypes(true).searchByTitle(_anndata.type_title); diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/Annotation.css --- a/src/widgets/Annotation.css Wed Jun 27 19:03:37 2012 +0200 +++ b/src/widgets/Annotation.css Fri Jun 29 16:22:52 2012 +0200 @@ -23,6 +23,26 @@ font-weight: bold; } +.Ldt-Annotation-Cleared { + clear: both; +} + +.Ldt-Annotation-MaxMinButton { + float: right; margin: 5px 5px 0; width: 17px; height: 17px; background: url(img/widget-control.png); background-position: 0 -51px; cursor: hand; +} + +.Ldt-Annotation-MaxMinButton:hover { + background-position: -17px -51px; +} + +.Ldt-Annotation-Minimized div.Ldt-Annotation-MaxMinButton { + background-position: 0 -34px; +} + +.Ldt-Annotation-Minimized div.Ldt-Annotation-MaxMinButton:hover { + background-position: -17px -34px; +} + .Ldt-Annotation-Inner h3.Ldt-Annotation-MashupOrigin { font-size: 12px; } @@ -36,11 +56,15 @@ } .Ldt-Annotation-Inner p { - margin: 5px 0; font-size: 12px; + font-size: 12px; } -.Ldt-Annotation-ShareIcons { - float: right; +.Ldt-Annotation-Label { + font-size: 12px; font-weight: bold; max-width: 90px; float: left; clear: left; +} + +.Ldt-Annotation-Labelled { + margin: 5px 0 0 90px; clear: right; } .Ldt-Annotation-Share { @@ -75,16 +99,8 @@ font-size: 12px; } -.Ldt-Annotation-NoTags { - display: none; -} - -.Ldt-Annotation-TagTitle { - margin: 5px 0 2px; font-size: 12px; -} - ul.Ldt-Annotation-Tags { - display: inline; list-style: none; padding: 0; margin: 5px 0; + list-style: none; padding: 0; } li.Ldt-Annotation-TagLabel { diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/Annotation.js --- a/src/widgets/Annotation.js Wed Jun 27 19:03:37 2012 +0200 +++ b/src/widgets/Annotation.js Fri Jun 29 16:22:52 2012 +0200 @@ -3,42 +3,54 @@ IriSP.Widgets.Annotation = function(player, config) { IriSP.Widgets.Widget.call(this, player, config); this.lastAnnotation = false; + this.minimized = this.start_minimized || false; + this.bounds = [ 0, 0 ]; }; IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget(); IriSP.Widgets.Annotation.prototype.messages = { - "fr": { + fr: { + share_: "Partager :", share_on: "Partager sur", watching: "Je regarde ", on_site: " sur ", - tags: "Mots-clés :", + tags_: "Mots-clés :", + description_: "Description :", excerpt_from: "Extrait de :" }, - "en": { + en: { + share_: "Share:", share_on: "Share on", watching: "I'm watching ", on_site: " on ", - tags: "Keywords:", + tags_: "Keywords:", + description_: "Description:", excerpt_from: "Excerpt from:" } } IriSP.Widgets.Annotation.prototype.template = '
' - + '
' + + '
' + + '
' + + '

' + + '( - )

' + + '

{{l10n.excerpt_from}} ' + + '( - )

' + + '
{{l10n.description_}}
' + + '

' + + '
' + + '
{{l10n.tags_}}
    ' + + '
    {{l10n.share_}}

    ' + '' + '' + '' - + '

    ' - + '( - )

    ' - + '

    {{l10n.excerpt_from}} ' - + '( - )

    ' - + '

    ' - + '
    {{l10n.tags}}
      '; + + '

      '; IriSP.Widgets.Annotation.prototype.defaults = { annotation_type : "chap", + start_minimized: false, show_top_border : false, site_name : "Lignes de Temps" } @@ -50,6 +62,8 @@ this.bindPopcorn("IriSP.Annotation.show","show"); this.bindPopcorn("IriSP.Annotation.minimize","minimize"); this.bindPopcorn("IriSP.Annotation.maximize","maximize"); + this.bindPopcorn("IriSP.Annotation.getBounds","sendBounds"); + this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize")); this.onTimeupdate(); } @@ -59,7 +73,7 @@ if (_list.length) { if (_list[0].id !== this.lastAnnotation) { this.drawAnnotation(_list[0]); - this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _list[0].begin.valueOf(), _list[0].end.valueOf() ]); + this.bounds = [ _list[0].begin.valueOf(), _list[0].end.valueOf() ]; } this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: ( _list[0].begin + _list[0].end ) / 2}); } @@ -67,8 +81,13 @@ this.lastAnnotation = false; this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty"); this.player.popcorn.trigger("IriSP.Arrow.updatePosition",{widget: this.type, time: _time}); - this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",[ _time, _time ]); + this.bounds = [ _time, _time ]; } + this.sendBounds(); +} + +IriSP.Widgets.Annotation.prototype.sendBounds = function() { + this.player.popcorn.trigger("IriSP.Annotation.boundsChanged",this.bounds); } IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) { @@ -97,10 +116,16 @@ _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,'')); }); } else { - this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-NoTags"); + this.$.find(".Ldt-Annotation-Tags-Block").hide(); } this.$.find(".Ldt-Annotation-Title").html(_annotation.title); - this.$.find(".Ldt-Annotation-Description").html(_annotation.description); + var _desc = _annotation.description.replace(/(^\s+|\s+$)/g,''); + if (_desc) { + this.$.find(".Ldt-Annotation-Description-Block").show(); + this.$.find(".Ldt-Annotation-Description").html(_desc); + } else { + this.$.find(".Ldt-Annotation-Description-Block").hide(); + } this.$.find(".Ldt-Annotation-Begin").html(_annotation.begin.toString()); this.$.find(".Ldt-Annotation-End").html(_annotation.end.toString()); if (_annotation.elementType === "mashedAnnotation") { @@ -125,10 +150,20 @@ this.$.slideDown(); } +IriSP.Widgets.Annotation.prototype.toggleSize = function() { + if (this.minimized) { + this.maximize(); + } else { + this.minimize(); + } +} + IriSP.Widgets.Annotation.prototype.minimize = function() { + this.minimized = true; this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized"); } IriSP.Widgets.Annotation.prototype.maximize = function() { + this.minimized = false; this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized"); } \ No newline at end of file diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/AnnotationsList.js --- a/src/widgets/AnnotationsList.js Wed Jun 27 19:03:37 2012 +0200 +++ b/src/widgets/AnnotationsList.js Fri Jun 29 16:22:52 2012 +0200 @@ -167,18 +167,27 @@ _this.foreign_url, { project : _annotation.project, - media : _annotation.media.id.replace(/^.*:/,''), + media : _annotation.media.id, annotation : _annotation.id, - annotationType : _annotation.annotationType.id.replace(/^.*:/,'') + annotationType : _annotation.annotationType.id } ) : '#id=' + _annotation.id ) ); + var _title = _annotation.title.replace(_annotation.description,''), + _description = _annotation.description; + if (!_annotation.title) { + _title = _annotation.creator; + } + if (!_annotation.description && _annotation.creator) { + _description = _annotation.title; + _title = _annotation.creator; + } var _res = { id : _annotation.id, - title : _annotation.title.replace(_annotation.description,''), - description : _annotation.description, + title : _title, + description : _description, begin : _annotation.begin.toString(), end : _annotation.end.toString(), thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail, diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/CreateAnnotation.css --- a/src/widgets/CreateAnnotation.css Wed Jun 27 19:03:37 2012 +0200 +++ b/src/widgets/CreateAnnotation.css Fri Jun 29 16:22:52 2012 +0200 @@ -26,7 +26,7 @@ min-height: 150px; } -.Ldt-CreateAnnotation-Title { +.Ldt-CreateAnnotation-Title, .Ldt-CreateAnnotation-Creator { margin-right: 2px; font-size: 14px; font-weight: bold; diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/CreateAnnotation.js --- a/src/widgets/CreateAnnotation.js Wed Jun 27 19:03:37 2012 +0200 +++ b/src/widgets/CreateAnnotation.js Fri Jun 29 16:22:52 2012 +0200 @@ -1,17 +1,23 @@ -/* TODO: Add Social Network Sharing and from field */ +/* TODO: Add Social Network Sharing, Finish Current Timecode Sync & Arrow Takeover */ IriSP.Widgets.CreateAnnotation = function(player, config) { IriSP.Widgets.Widget.call(this, player, config); - this.lastAnnotation = false; }; IriSP.Widgets.CreateAnnotation.prototype = new IriSP.Widgets.Widget(); IriSP.Widgets.CreateAnnotation.prototype.defaults = { - show_title_field : true, + show_title_field : false, /* For the moment, titles can't be sent to ldtplatform */ + show_creator_field : true, + start_visible : true, + always_visible : true, + sync_on_slice_widget : true, /* If false, syncs on current timecode */ + takeover_arrow : false, + minimize_annotation_widget : false, creator_name : "", creator_avatar : "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png", tags : false, + pause_on_write : true, max_tags : 8, polemics : [{ keyword: "++", @@ -41,10 +47,11 @@ en: { from_time: "from", to_time: "to", + at_time: "at", submit: "Submit", add_keywords_: "Add keywords:", add_polemic_keywords_: "Add polemic keywords:", - your_name: "Your name", + your_name_: "Your name:", no_title: "Annotate this video", type_title: "Annotation title", type_description: "Type the full description of your annotation here.", @@ -61,10 +68,11 @@ fr: { from_time: "de", to_time: "à", + at_time: "à", submit: "Envoyer", add_keywords_: "Ajouter des mots-clés :", add_polemic_keywords_: "Ajouter des mots-clés polémiques :", - your_name: "Votre nom", + your_name_: "Votre nom :", no_title: "Annoter cette vidéo", type_title: "Titre de l'annotation", type_description: "Rédigez le contenu de votre annotation ici.", @@ -85,8 +93,9 @@ + '
      ' + '

      {{#show_title_field}}{{/show_title_field}}' + '{{^show_title_field}}{{l10n.no_title}} {{/show_title_field}}' - + ' {{l10n.from_time}} ' - + ' {{l10n.to_time}}

      ' + + ' {{#sync_on_slice_widget}}{{l10n.from_time}} {{/sync_on_slice_widget}}{{^sync_on_slice_widget}}{{l10n.at_time}} {{/sync_on_slice_widget}} 00:00' + + '{{#sync_on_slice_widget}} {{l10n.to_time}} 00:00{{/sync_on_slice_widget}}' + + '{{#show_creator_field}}

      {{l10n.your_name_}}

      {{/show_creator_field}}' + '' + '
      ' + '' @@ -96,8 +105,8 @@ + '{{#polemics}}
    • {{keyword}}
      • {{/polemics}}{{/polemics.length}}' + '
      ' + '
      {{l10n.wait_while_processing}}
      ' - + '
      {{l10n.error_while_contacting}}
      ' - + '
      {{l10n.annotation_saved}}
      ' + + '
      {{^always_visible}}{{/always_visible}}
      {{l10n.error_while_contacting}}
      ' + + '
      {{^always_visible}}{{/always_visible}}
      {{l10n.annotation_saved}}
      ' + ''; IriSP.Widgets.CreateAnnotation.prototype.draw = function() { @@ -126,9 +135,17 @@ if (this.show_title_field) { this.$.find(".Ldt-CreateAnnotation-Title").bind("change keyup input paste", this.functionWrapper("onTitleChange")); } + if (this.show_creator_field) { + this.$.find(".Ldt-CreateAnnotation-Creator").bind("change keyup input paste", this.functionWrapper("onCreatorChange")); + } - this.$.hide(); - this.hide(); + if (this.start_visible) { + this.show(); + } else { + this.$.hide(); + this.hide(); + } + this.bindPopcorn("IriSP.CreateAnnotation.toggle","toggle"); this.bindPopcorn("IriSP.Slice.boundsChanged","onBoundsChanged"); this.begin = new IriSP.Model.Time(); @@ -145,25 +162,38 @@ this.visible = true; this.showScreen('Main'); this.$.find(".Ldt-CreateAnnotation-Description").val("").css("border-color", "#666666"); - this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666"); + if (this.show_title_field) { + this.$.find(".Ldt-CreateAnnotation-Title").val("").css("border-color", "#666666"); + } + if (this.show_creator_field) { + this.$.find(".Ldt-CreateAnnotation-Creator").val(this.creator_name).css("border-color", "#666666"); + } this.$.find(".Ldt-CreateAnnotation-TagLi, .Ldt-CreateAnnotation-PolemicLi").removeClass("selected"); this.$.slideDown(); - this.player.popcorn.trigger("IriSP.Annotation.minimize"); + if (this.minimize_annotation_widget) { + this.player.popcorn.trigger("IriSP.Annotation.minimize"); + } this.player.popcorn.trigger("IriSP.Slice.show"); } IriSP.Widgets.CreateAnnotation.prototype.hide = function() { - this.visible = false; - this.$.slideUp(); - this.player.popcorn.trigger("IriSP.Annotation.maximize"); - this.player.popcorn.trigger("IriSP.Slice.hide"); + if (!this.always_visible) { + this.visible = false; + this.$.slideUp(); + if (this.minimize_annotation_widget) { + this.player.popcorn.trigger("IriSP.Annotation.maximize"); + } + this.player.popcorn.trigger("IriSP.Slice.hide"); + } } IriSP.Widgets.CreateAnnotation.prototype.toggle = function() { - if (this.visible) { - this.hide(); - } else { - this.show(); + if (!this.always_visible) { + if (this.visible) { + this.hide(); + } else { + this.show(); + } } } @@ -186,6 +216,12 @@ this.onDescriptionChange(); } +IriSP.Widgets.CreateAnnotation.prototype.pauseOnWrite = function() { + if (this.pause_on_write && !this.player.popcorn.media.paused) { + this.player.popcorn.pause(); + } +} + IriSP.Widgets.CreateAnnotation.prototype.onDescriptionChange = function() { var _field = this.$.find(".Ldt-CreateAnnotation-Description"), _contents = _field.val(); @@ -198,6 +234,7 @@ IriSP.jQuery(this).removeClass("selected"); } }); + this.pauseOnWrite(); return !!_contents; } @@ -205,11 +242,21 @@ var _field = this.$.find(".Ldt-CreateAnnotation-Title"), _contents = _field.val(); _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); + this.pauseOnWrite(); + return !!_contents; +} + + +IriSP.Widgets.CreateAnnotation.prototype.onCreatorChange = function() { + var _field = this.$.find(".Ldt-CreateAnnotation-Creator"), + _contents = _field.val(); + _field.css("border-color", !!_contents ? "#666666" : "#ff0000"); + this.pauseOnWrite(); return !!_contents; } IriSP.Widgets.CreateAnnotation.prototype.onSubmit = function() { - if (!this.onDescriptionChange() || (!this.onTitleChange() && this.show_title_field)) { + if (!this.onDescriptionChange() || (this.show_title_field && !this.onTitleChange()) || (this.show_creator_field && !this.onCreatorChange())) { return; } @@ -230,13 +277,17 @@ _annotation.setMedia(this.source.currentMedia.id); _annotation.setAnnotationType(_annotationType.id); if (this.show_title_field) { - _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val() + _annotation.title = this.$.find(".Ldt-CreateAnnotation-Title").val(); } _annotation.created = new Date(); _annotation.description = this.$.find(".Ldt-CreateAnnotation-Description").val(); _annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected").map(function() { return IriSP.jQuery(this).attr("tag-id")})); - _export.creator = this.creator_name; + if (this.show_creator_field) { + _export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val(); + } else { + _export.creator = this.creator_name; + } _export.created = new Date(); _exportedAnnotations.push(_annotation); _export.addList("annotation",_exportedAnnotations); @@ -255,6 +306,9 @@ _export.getAnnotations().removeElement(_annotation, true); _export.deSerialize(_data); _this.source.merge(_export); + if (this.pause_on_write && this.player.popcorn.media.paused) { + this.player.popcorn.play(); + } _this.player.popcorn.trigger("IriSP.AnnotationsList.refresh"); }, error: function(_xhr, _error, _thrown) { diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/Slice.css --- a/src/widgets/Slice.css Wed Jun 27 19:03:37 2012 +0200 +++ b/src/widgets/Slice.css Fri Jun 29 16:22:52 2012 +0200 @@ -5,18 +5,18 @@ } .Ldt-Slice .ui-slider-handle { - width: 6px; height: 20px; top: 0; border: none; margin: 0; padding: 0; background: url(img/slice-handles.png); + width: 7px; height: 20px; top: 0; border: none; margin: 0; padding: 0; background: url(img/slice-handles.png); border-radius: 0; } .ui-slider-handle.Ldt-Slice-left-handle { - margin-left: -6px; + margin-left: -7px; } .ui-slider-handle.Ldt-Slice-right-handle { - margin-left: 0; background-position: -6px 0; + margin-left: 0; background-position: -7px 0; } .Ldt-Slice .ui-slider-range { - background: url(img/pinstripe.png); + background: url(img/pinstripe-purple.png); } diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/Slice.js --- a/src/widgets/Slice.js Wed Jun 27 19:03:37 2012 +0200 +++ b/src/widgets/Slice.js Fri Jun 29 16:22:52 2012 +0200 @@ -9,7 +9,14 @@ IriSP.Widgets.Slice.prototype = new IriSP.Widgets.Widget(); IriSP.Widgets.Slice.prototype.defaults = { - start_visible : false + start_visible : false, + pause_on_change : true, + live_update : true + /* Shall the bounds change each time + the Annotation Widget sends an update (true) + or only when "show" is triggered (false) ? + - true is to be recommended when the widget is permanently displayed. + */ }; IriSP.Widgets.Slice.prototype.draw = function() { @@ -35,6 +42,11 @@ time:Math.floor((ui.values[0]+ui.values[1])/2) }); _this.player.popcorn.trigger("IriSP.Slice.boundsChanged",[ui.values[0], ui.values[1]]); + }, + start: function() { + if (_this.pause_on_change && !_this.player.popcorn.media.paused) { + _this.player.popcorn.pause(); + } } }); this.$slider.find(".ui-slider-handle:first").addClass("Ldt-Slice-left-handle"); @@ -47,6 +59,7 @@ this.bindPopcorn("IriSP.Slice.show","show"); this.bindPopcorn("IriSP.Slice.hide","hide"); this.bindPopcorn("IriSP.Annotation.boundsChanged","storeBounds"); + this.trigger("IriSP.Annotation.getBounds"); }; IriSP.Widgets.Slice.prototype.show = function() { @@ -63,4 +76,7 @@ IriSP.Widgets.Slice.prototype.storeBounds = function(_values) { this.min = _values[0]; this.max = _values[1]; + if (this.live_update) { + this.$slider.slider("values", [this.min, this.max]); + } } \ No newline at end of file diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/img/pinstripe-purple.png Binary file src/widgets/img/pinstripe-purple.png has changed diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/img/slice-handles.png Binary file src/widgets/img/slice-handles.png has changed diff -r 096c06aea8b5 -r b3ee7d1b472a src/widgets/img/widget-control.png Binary file src/widgets/img/widget-control.png has changed