UI improvements new-model
authorveltr
Fri, 29 Jun 2012 16:22:52 +0200
branchnew-model
changeset 923 b3ee7d1b472a
parent 922 096c06aea8b5
child 924 64c2eaafe5e2
UI improvements
assets/psd/pin-cross.psd
src/js/players/player.jwplayer.js
src/js/serializers/ldt_annotate.js
src/widgets/Annotation.css
src/widgets/Annotation.js
src/widgets/AnnotationsList.js
src/widgets/CreateAnnotation.css
src/widgets/CreateAnnotation.js
src/widgets/Slice.css
src/widgets/Slice.js
src/widgets/img/pinstripe-purple.png
src/widgets/img/slice-handles.png
src/widgets/img/widget-control.png
Binary file assets/psd/pin-cross.psd has changed
--- 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() {
--- 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);
--- 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 {
--- 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 =
     '<div class="Ldt-Annotation-Widget {{#show_top_border}}Ldt-Annotation-ShowTop{{/show_top_border}}">'
-    + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty"><div class="Ldt-Annotation-ShareIcons Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty">'
+    + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
+    + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
+    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
+    + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
+    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'
+    + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'
+    + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'
+    + '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>'
+    + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'
+    + '<div class="Ldt-Annotation-Label">{{l10n.tags_}}</div><ul class="Ldt-Annotation-Labelled Ldt-Annotation-Tags"></ul>'
+    + '</div><div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"><div class="Ldt-Annotation-Label">{{l10n.share_}}</div><p class="Ldt-Annotation-Labelled">'
     + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Fb Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>'
     + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Twitter Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>'
     + '<a href="#" target="_blank" class="Ldt-Annotation-Share Ldt-Annotation-Gplus Ldt-TraceMe" title="{{l10n.share_on}} Google+"></a>'
-    + '</div><h3 class="Ldt-Annotation-HiddenWhenEmpty"><span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time">'
-    + '( <span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span> )</span></h3>'
-    + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time">'
-    + '( <span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span> )</span></h3>'
-    + '<p class="Ldt-Annotation-Description Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></p>'
-    + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-NoTags"><div class="Ldt-Annotation-TagTitle">{{l10n.tags}}</div><ul class="Ldt-Annotation-Tags"></ul></div></div></div>';
+    + '</p></div></div></div></div>';
 
 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
--- 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,
--- 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;
--- 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&nbsp;:",
         add_polemic_keywords_: "Ajouter des mots-clés polémiques&nbsp;:",
-        your_name: "Votre nom",
+        your_name_: "Votre nom&nbsp;:",
         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 @@
     + '<form class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Main">'
     + '<h3>{{#show_title_field}}<input class="Ldt-CreateAnnotation-Title" placeholder="{{l10n.type_title}}" />{{/show_title_field}}'
     + '{{^show_title_field}}<span class="Ldt-CreateAnnotation-NoTitle">{{l10n.no_title}} </span>{{/show_title_field}}'
-    + ' <span class="Ldt-CreateAnnotation-Times">{{l10n.from_time}} <span class="Ldt-CreateAnnotation-Begin"></span>'
-    + ' {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End"></span></span></h3>'
+    + ' <span class="Ldt-CreateAnnotation-Times">{{#sync_on_slice_widget}}{{l10n.from_time}} {{/sync_on_slice_widget}}{{^sync_on_slice_widget}}{{l10n.at_time}} {{/sync_on_slice_widget}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
+    + '{{#sync_on_slice_widget}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/sync_on_slice_widget}}</span></h3>'
+    + '{{#show_creator_field}}<h3>{{l10n.your_name_}} <input class="Ldt-CreateAnnotation-Creator" value="{{creator_name}}" /></h3>{{/show_creator_field}}'
     + '<textarea class="Ldt-CreateAnnotation-Description" placeholder="{{l10n.type_description}}"></textarea>'
     + '<div class="Ldt-CreateAnnotation-Avatar"><img src="{{creator_avatar}}" title="{{creator_name}}"></img></div>'
     + '<input type="submit" class="Ldt-CreateAnnotation-Submit" value="{{l10n.submit}}" />'
@@ -96,8 +105,8 @@
     + '{{#polemics}}<li class="Ldt-CreateAnnotation-PolemicLi" style="background-color: {{background_color}}; color: {{text_color}}">{{keyword}}</li>{{/polemics}}</ul></div>{{/polemics.length}}'
     + '<div style="clear: both;"></div></form>'
     + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Wait"><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.wait_while_processing}}</div></div>'
-    + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Error"><a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.error_while_contacting}}</div></div>'
-    + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Saved"><a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a><div class="Ldt-CreateAnnotation-InnerBox">{{l10n.annotation_saved}}</div></div>'
+    + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Error">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.error_while_contacting}}</div></div>'
+    + '<div class="Ldt-CreateAnnotation-Screen Ldt-CreateAnnotation-Saved">{{^always_visible}}<a title="{{l10n.close_widget}}" class="Ldt-CreateAnnotation-Close" href="#"></a>{{/always_visible}}<div class="Ldt-CreateAnnotation-InnerBox">{{l10n.annotation_saved}}</div></div>'
     + '</div></div>';
     
 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) {
--- 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);
 }
 
--- 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
Binary file src/widgets/img/pinstripe-purple.png has changed
Binary file src/widgets/img/slice-handles.png has changed
Binary file src/widgets/img/widget-control.png has changed