--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/embed_player.html Wed Sep 26 19:46:04 2012 +0200
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/embed_player.html Wed Sep 26 19:52:15 2012 +0200
@@ -8,6 +8,7 @@
IriSP.libFiles.defaultDir = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}js/";
IriSP.libFiles.locations.jwPlayerSWF = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}swf/player.swf";
+IriSP.libFiles.locations.recordMicSwf = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}swf/record_mic.swf";
IriSP.libFiles.locations.zeroClipboardSwf = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}swf/ZeroClipboard10.swf";
IriSP.libFiles.locations.cssjQueryUI = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}css/jq-css/themes/base/jquery-ui.css"
IriSP.language = '{{LANGUAGE_CODE}}';
@@ -63,13 +64,6 @@
type: "Segments",
annotation_type: ["chap","découpage"]
},{
- type: "Slice",
- start_visible : false,
- live_update : true
- },{
- type: "Arrow",
- base_height: 3
- },{
type: "Annotation",
start_minimized: true,
site_name : "Lignes de Temps",
@@ -82,7 +76,9 @@
api_endpoint_template: "{% url annotation_api_empty %}{% templatetag openvariable %}id{% templatetag closevariable %}.json",
api_method: "PUT",
after_send_timeout: 8000,
+ show_mic_record: false,
close_after_send: false,
+ slice_annotation_type: ["chap","découpage"],
tag_titles: ["#amateur", "#digital-humanities"],
creator_name: '{{request.user.username}}',
creator_avatar: '{% thumbnail request.user.get_profile.image "48x48" format="PNG" crop="center" as im %}{{WEB_URL}}{{ im.url }}{% endthumbnail %}' || "https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png"
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css Wed Sep 26 19:46:04 2012 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.css Wed Sep 26 19:52:15 2012 +0200
@@ -8,6 +8,11 @@
.Ldt-AnnotationsListWidget a {
text-decoration: none;
}
+
+.Ldt-AnnotationsList-Audio {
+ width: 1px; height: 1px;
+}
+
ul.Ldt-AnnotationsList-ul {
list-style: none;
padding: 2px;
@@ -84,4 +89,14 @@
.Ldt-AnnotationsList-Tag-Li:hover span {
background-position: right -23px;
+}
+
+.Ldt-AnnotationsList-Play {
+ width: 125px; height: 20px; margin: 2px 0 2px 82px; text-align: center;
+ padding: 3px 5px 0 20px; font-size: 12px; cursor: pointer;
+ background: url(img/voiceannotation.png); color: #333333;
+}
+
+.Ldt-AnnotationsList-Play:hover {
+ background-position: 0 bottom;
}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js Wed Sep 26 19:46:04 2012 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js Wed Sep 26 19:52:15 2012 +0200
@@ -17,7 +17,7 @@
ajax_url : false,
/* number of milliseconds before/after the current timecode when calling the segment API
*/
- ajax_granularity : 300000,
+ ajax_granularity : 600000,
default_thumbnail : "",
/* URL when the annotation is not in the current project,
* e.g. http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/{{media}}/{{project}}/{{annotationType}}#id={{annotation}}
@@ -25,8 +25,9 @@
foreign_url : "",
annotation_type : false,
refresh_interval : 0,
- limit_count : 10,
+ limit_count : 20,
newest_first : false,
+ show_audio: true,
polemics : [{
keyword: "++",
background_color: "#c9ecc6"
@@ -42,8 +43,20 @@
}]
};
+IriSP.Widgets.AnnotationsList.prototype.messages = {
+ en: {
+ voice_annotation: "Voice Annotation",
+ now_playing: "Now playing..."
+ },
+ fr: {
+ voice_annotation: "Annotation Vocale",
+ now_playing: "Lecture en cours..."
+ }
+}
+
IriSP.Widgets.AnnotationsList.prototype.template =
'<div class="Ldt-AnnotationsListWidget">'
+ + '{{#show_audio}}<div class="Ldt-AnnotationsList-Audio"></div>{{/show_audio}}'
+ '<ul class="Ldt-AnnotationsList-ul">'
+ '</ul>'
+ '</div>';
@@ -71,6 +84,7 @@
+ '{{/tags}}'
+ '</ul>'
+ '{{/tags.length}}'
+ + '{{#audio}}<div class="Ldt-AnnotationsList-Play" data-audio={{audio}}>{{l10n.voice_annotation}}</div>{{/audio}}'
+ '</li>';
IriSP.Widgets.AnnotationsList.prototype.onSearch = function(searchString) {
@@ -205,7 +219,9 @@
thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
url : _url,
tags : _annotation.getTagTexts(),
- specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : "")
+ specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
+ audio : (_this.show_audio && _annotation.audio && _annotation.audio.href && _annotation.audio.href != "null" ? _annotation.audio.href : undefined),
+ l10n: _this.l10n
};
var _html = Mustache.to_html(_this.annotationTemplate, _data);
var _el = IriSP.jQuery(_html);
@@ -237,7 +253,20 @@
this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
_this.player.trigger("search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
- })
+ });
+
+ this.$.find(".Ldt-AnnotationsList-Play").click(function() {
+ var _el = IriSP.jQuery(this),
+ _audiofile = _el.attr("data-audio").replace(_this.rtmp_streamer,"");
+ _el.text(_this.l10n.now_playing);
+ _this.jwplayer.load({
+ file: _audiofile,
+ streamer: _this.rtmp_streamer
+ });
+ _this.jwplayer.play(true);
+ _this.media.pause();
+ _this.jw_paused_media = true;
+ });
if(this.searchString) {
var _searchRe = IriSP.Model.regexpFromTextOrArray(this.searchString);
@@ -266,14 +295,46 @@
this.renderTemplate();
+ var _this = this;
+
+ if (this.show_audio) {
+ var _tmpId = "jwplayer-" + IriSP.Model.getUID();
+ this.$.find(".Ldt-AnnotationsList-Audio").attr("id", _tmpId);
+ this.jwplayer = jwplayer(_tmpId);
+ this.jwplayer.setup({
+ flashplayer: IriSP.getLib("jwPlayerSWF"),
+ width: 1,
+ height: 1,
+ provider: "rtmp",
+ events: {
+ onIdle: function() {
+ if (_this.jw_paused_media) {
+ _this.jw_paused_media = false;
+ _this.media.play();
+ }
+ _this.$.find(".Ldt-AnnotationsList-Play").text(_this.l10n.voice_annotation)
+ }
+ }
+ });
+ this.jw_paused_media = false;
+ }
+
this.list_$ = this.$.find(".Ldt-AnnotationsList-ul");
+
this.onMdpEvent("search", "onSearch");
this.onMdpEvent("search.closed", "onSearch");
this.onMdpEvent("search.cleared", "onSearch");
- this.onMdpEvent("AnnotationsList.refresh","refresh");
-
- var _this = this;
+ this.onMdpEvent("AnnotationsList.refresh", function() {
+ if (_this.ajax_url) {
+ if (_this.mashupMode) {
+ _this.ajaxMashup();
+ } else {
+ _this.ajaxSource();
+ }
+ }
+ _this.throttledRefresh();
+ });
if (this.ajax_url) {
if (this.mashupMode) {
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css Wed Sep 26 19:46:04 2012 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.css Wed Sep 26 19:52:15 2012 +0200
@@ -84,11 +84,11 @@
border: 1px solid #bbbbbb;
}
-.Ldt-CreateAnnotation-Tags, .Ldt-CreateAnnotation-Polemics {
- width: 520px;
+.Ldt-CreateAnnotation-RecBlock {
+ width: 220px; float: left;
}
-.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle {
+.Ldt-CreateAnnotation-TagTitle, .Ldt-CreateAnnotation-PolemicTitle, .Ldt-CreateAnnotation-RecLabel {
display: block; margin: 5px 0 2px; font-size: 12px;
}
--- a/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Wed Sep 26 19:46:04 2012 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/CreateAnnotation.js Wed Sep 26 19:52:15 2012 +0200
@@ -13,6 +13,8 @@
always_visible : false,
show_slice : true,
show_arrow : true,
+ show_mic_record: false,
+ show_mic_play: false,
minimize_annotation_widget : true,
creator_name : "",
creator_avatar : "",
@@ -99,11 +101,35 @@
+ '<h3><span class="Ldt-CreateAnnotation-h3Left">{{#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">{{#show_slice}}{{l10n.from_time}} {{/show_slice}}{{^show_slice}}{{l10n.at_time}} {{/show_slice}} <span class="Ldt-CreateAnnotation-Begin">00:00</span>'
- + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">00:00</span>{{/show_slice}}</span></span>'
+ + '{{#show_slice}} {{l10n.to_time}} <span class="Ldt-CreateAnnotation-End">{{end}}</span>{{/show_slice}}</span></span>'
+ '{{#show_creator_field}}{{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}}" />'
+ + '{{#show_mic_record}}<div class="Ldt-CreateAnnotation-RecBlock"><div class="Ldt-CreateAnnotation-RecLabel">Add voice annotation</div>'
+ + ' <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="160">'
+ + ' <param name="movie" value="{{record_swf}}" />'
+ + ' <param name="quality" value="high" />'
+ + ' <param name="bgcolor" value="#ffffff" />'
+ + ' <param name="play" value="true" />'
+ + ' <param name="loop" value="true" />'
+ + ' <param name="wmode" value="transparent" />'
+ + ' <param name="scale" value="showall" />'
+ + ' <param name="menu" value="true" />'
+ + ' <param name="devicefont" value="false" />'
+ + ' <param name="salign" value="" />'
+ + ' <param name="allowScriptAccess" value="always" />'
+ + ' <param name="allowFullScreen" value="true" />'
+ + ' <param name="flashvars" value="playVisible={{show_mic_play}}">'
+ + ' <embed src="{{record_swf}}"" quality="high" bgcolor="#ffffff"'
+ + ' width="220" height="160" name="ExternalInterfaceExample" align="middle"'
+ + ' play="true" loop="false" quality="high" allowScriptAccess="always" '
+ + ' type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
+ + ' flashvars="playVisible={{show_mic_play}}"'
+ + ' pluginspage="http://www.macromedia.com/go/getflashplayer">'
+ + ' </embed>'
+ + ' </object>'
+ + '</div>{{/show_mic_record}}'
+ '{{#tags.length}}<div class="Ldt-CreateAnnotation-Tags"><div class="Ldt-CreateAnnotation-TagTitle">{{l10n.add_keywords_}}</div><ul class="Ldt-CreateAnnotation-TagList">'
+ '{{#tags}}<li class="Ldt-CreateAnnotation-TagLi" tag-id="{{id}}"><span class="Ldt-CreateAnnotation-TagButton">{{title}}</span></li>{{/tags}}</ul></div>{{/tags.length}}'
+ '{{#polemics.length}}<div class="Ldt-CreateAnnotation-Polemics"><div class="Ldt-CreateAnnotation-PolemicTitle">{{l10n.add_polemic_keywords_}}</div><ul class="Ldt-CreateAnnotation-PolemicList">'
@@ -116,6 +142,10 @@
IriSP.Widgets.CreateAnnotation.prototype.draw = function() {
var _this = this;
+
+ this.begin = new IriSP.Model.Time();
+ this.end = this.source.getDuration();
+
if (this.tag_titles && !this.tags) {
this.tags = IriSP._(this.tag_titles).map(function(_tag_title) {
var _tag,
@@ -140,7 +170,15 @@
});
/* We have to use the map function because Mustache doesn't like our tags object */
}
+ this.record_swf = IriSP.getLib("recordMicSwf");
this.renderTemplate();
+ if (this.show_mic_record) {
+ this.recorder = this.$.find("embed")[0];
+
+ window.setAudioUrl = function(_url) {
+ _this.audio_url = _url;
+ }
+ }
if (this.show_slice) {
this.insertSubwidget(
this.$.find(".Ldt-CreateAnnotation-Slice"),
@@ -196,8 +234,6 @@
}
this.onMdpEvent("CreateAnnotation.toggle","toggle");
- this.begin = new IriSP.Model.Time();
- this.end = this.source.getDuration();
this.$.find("form").submit(this.functionWrapper("onSubmit"));
}
@@ -224,6 +260,9 @@
}
IriSP.Widgets.CreateAnnotation.prototype.hide = function() {
+ if (this.recorder) {
+ this.recorder.stopRecord();
+ }
if (!this.always_visible) {
this.visible = false;
this.$.slideUp();
@@ -301,6 +340,10 @@
return;
}
+ if (this.recorder) {
+ this.recorder.stopRecord();
+ }
+
var _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */
_export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */
_annotation = new IriSP.Model.Annotation(false, _export), /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */
@@ -334,6 +377,14 @@
_annotation.setTags(this.$.find(".Ldt-CreateAnnotation-TagLi.selected")
.map(function() { return IriSP.jQuery(this).attr("tag-id")})); /*Liste des ids de tags */
+ if (this.audio_url) {
+ _annotation.audio = {
+ src: "mic",
+ mimetype: "audio/mp3",
+ href: this.audio_url
+ };
+ }
+
/* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */
if (this.show_creator_field) {
_export.creator = this.$.find(".Ldt-CreateAnnotation-Creator").val();
--- a/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js Wed Sep 26 19:46:04 2012 +0200
+++ b/src/ldt/ldt/static/ldt/metadataplayer/LdtPlayer-core.js Wed Sep 26 19:52:15 2012 +0200
@@ -1188,7 +1188,8 @@
paper: "paper.js",
jqueryMousewheel: "jquery.mousewheel.min.js",
renkanPublish: "renkan-publish.js",
- processing: "processing-1.3.6.min.js"
+ processing: "processing-1.3.6.min.js",
+ recordMicSwf: "record_mic.swf"
},
locations : {
// use to define locations outside default_dir
@@ -1227,6 +1228,9 @@
MashupPlayer: {
noCss: true
},
+ AnnotationsList: {
+ requires: [ "jwplayer" ]
+ },
Sparkline: {
noCss: true,
requires: [ "raphael" ]
Binary file src/ldt/ldt/static/ldt/metadataplayer/img/voiceannotation.png has changed
Binary file src/ldt/ldt/static/ldt/swf/record_mic.swf has changed
