--- a/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/LdtPlayer-core.js Thu Jun 07 11:42:33 2012 +0200
@@ -29,7 +29,7 @@
/* The Metadataplayer Object, single point of entry, replaces IriSP.init_player */
-IriSP.Metadataplayer = function(config, video_metadata) {
+IriSP.Metadataplayer = function(config) {
IriSP.log("IriSP.Metadataplayer constructor");
for (var key in IriSP.guiDefaults) {
if (IriSP.guiDefaults.hasOwnProperty(key) && !config.gui.hasOwnProperty(key)) {
@@ -38,7 +38,6 @@
}
var _container = document.getElementById(config.gui.container);
_container.innerHTML = '<h3 class="Ldt-Loader">Loading... Chargement...</h3>';
- this.video_metadata = video_metadata;
this.sourceManager = new IriSP.Model.Directory();
this.config = config;
this.callbackQueue = [];
@@ -116,7 +115,7 @@
IriSP.loadCss(IriSP.getLib("cssjQueryUI"));
IriSP.loadCss(this.config.gui.css);
- this.videoData = this.loadMetadata(this.video_metadata);
+ this.videoData = this.loadMetadata(this.config.player.metadata);
this.$ = IriSP.jQuery('#' + this.config.gui.container);
this.$.css({
"width": this.config.gui.width,
@@ -240,7 +239,7 @@
IriSP.jQuery("#" + containerDiv).append(_videoEl);
pop = Popcorn("#" + _tmpId);
break;
-
+
case "html5-audio":
var _tmpId = Popcorn.guid("audio"),
_videoEl = IriSP.jQuery('<audio>');
@@ -268,7 +267,7 @@
delete opts.video;
if(!opts.hasOwnProperty("flashplayer")) {
- opts.flashplayer = IriSP.jwplayer_swf_path;
+ opts.flashplayer = IriSP.getLib("jwPlayerSWF");
}
if(!opts.hasOwnProperty("controlbar.position")) {
@@ -1478,7 +1477,8 @@
popcorn : "popcorn-complete.min.js",
jwplayer : "jwplayer.js",
raphael : "raphael-min.js",
- tracemanager : "tracemanager.js"
+ tracemanager : "tracemanager.js",
+ jwPlayerSWF : "player.swf"
},
locations : {
// use to define locations outside defautl_dir
@@ -2066,91 +2066,7 @@
break;
}
-};/* Used when Putting annotations on the platform */
-
-if (typeof IriSP.serializers === "undefined") {
- IriSP.serializers = {}
-}
-
-IriSP.serializers.ldt_annotate = {
- types : {
- annotation : {
- serialized_name : "annotations",
- serializer : function(_data, _source) {
- return {
- begin: _data.begin.milliseconds,
- end: _data.end.milliseconds,
- content: {
- data: _data.description
- },
- tags: _data.getTagTexts(),
- media: _source.unNamespace(_data.getMedia().id),
- title: _data.title,
- type_title: _data.getAnnotationType().title,
- type: _source.unNamespace(_data.getAnnotationType().id)
- }
- }
- }
- },
- serialize : function(_source) {
- var _res = {},
- _this = this;
- _source.forEach(function(_list, _typename) {
- if (typeof _this.types[_typename] !== "undefined") {
- _res[_this.types[_typename].serialized_name] = _list.map(function(_el) {
- return _this.types[_typename].serializer(_el, _source);
- });
- }
- });
- _res.meta = {
- creator: _source.creator,
- created: _source.created
- }
- return JSON.stringify(_res);
- },
- deSerialize : function(_data, _source) {
- if (typeof _data == "string") {
- _data = JSON.parse(_data);
- }
- _source.addList('tag', new IriSP.Model.List(_source.directory));
- _source.addList('annotationType', new IriSP.Model.List(_source.directory));
- _source.addList('annotation', new IriSP.Model.List(_source.directory));
- 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.created = new Date(_data.meta.created);
- _ann.setMedia(_anndata.media, _source);
- var _anntypes = _source.getAnnotationTypes(true).searchByTitle(_anndata.type_title);
- if (_anntypes.length) {
- var _anntype = _anntypes[0];
- } else {
- var _anntype = new IriSP.Model.AnnotationType(_anndata.type, _source);
- _anntype.title = _anndata.type_title;
- _source.getAnnotationTypes().push(_anntype);
- }
- _ann.setAnnotationType(_anntype.id);
- var _tagIds = IriSP._(_anndata.tags).map(function(_title) {
- var _tags = _source.getTags(true).searchByTitle(_title);
- if (_tags.length) {
- var _tag = _tags[0];
- }
- else {
- _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'),_source);
- _tag.title = _title;
- _source.getTags().push(_tag);
- }
- return _tag.id;
- });
- _ann.setTags(_tagIds);
- _ann.setBegin(_anndata.begin);
- _ann.setEnd(_anndata.end);
- _ann.creator = _data.meta.creator;
- _source.getAnnotations().push(_ann);
- }
- }
-}/* LDT Platform Serializer */
+};/* LDT Platform Serializer */
if (typeof IriSP.serializers === "undefined") {
IriSP.serializers = {}
@@ -2251,6 +2167,9 @@
if (typeof _data.meta["dc:source"] !== "undefined" && typeof _data.meta["dc:source"].content !== "undefined") {
_res.source = JSON.parse(_data.meta["dc:source"].content);
}
+ if (typeof _data.audio !== "undefined" && _data.audio.href) {
+ _res.audio = _data.audio;
+ }
return _res;
},
serializer : function(_data, _source) {
@@ -2273,7 +2192,8 @@
return {
"id-ref" : _source.unNamespace(_id)
}
- })
+ }),
+ audio : _data.audio
}
}
},
@@ -2345,3 +2265,88 @@
}
}
+/* Used when Putting annotations on the platform */
+
+if (typeof IriSP.serializers === "undefined") {
+ IriSP.serializers = {}
+}
+
+IriSP.serializers.ldt_annotate = {
+ types : {
+ annotation : {
+ serialized_name : "annotations",
+ serializer : function(_data, _source) {
+ return {
+ begin: _data.begin.milliseconds,
+ end: _data.end.milliseconds,
+ content: {
+ data: _data.description
+ },
+ tags: _data.getTagTexts(),
+ media: _source.unNamespace(_data.getMedia().id),
+ title: _data.title,
+ type_title: _data.getAnnotationType().title,
+ type: _source.unNamespace(_data.getAnnotationType().id)
+ }
+ }
+ }
+ },
+ serialize : function(_source) {
+ var _res = {},
+ _this = this;
+ _source.forEach(function(_list, _typename) {
+ if (typeof _this.types[_typename] !== "undefined") {
+ _res[_this.types[_typename].serialized_name] = _list.map(function(_el) {
+ return _this.types[_typename].serializer(_el, _source);
+ });
+ }
+ });
+ _res.meta = {
+ creator: _source.creator,
+ created: _source.created
+ }
+ return JSON.stringify(_res);
+ },
+ deSerialize : function(_data, _source) {
+ if (typeof _data == "string") {
+ _data = JSON.parse(_data);
+ }
+ _source.addList('tag', new IriSP.Model.List(_source.directory));
+ _source.addList('annotationType', new IriSP.Model.List(_source.directory));
+ _source.addList('annotation', new IriSP.Model.List(_source.directory));
+ 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.created = new Date(_data.meta.created);
+ _ann.setMedia(_anndata.media, _source);
+ var _anntypes = _source.getAnnotationTypes(true).searchByTitle(_anndata.type_title);
+ if (_anntypes.length) {
+ var _anntype = _anntypes[0];
+ } else {
+ var _anntype = new IriSP.Model.AnnotationType(_anndata.type, _source);
+ _anntype.title = _anndata.type_title;
+ _source.getAnnotationTypes().push(_anntype);
+ }
+ _ann.setAnnotationType(_anntype.id);
+ var _tagIds = IriSP._(_anndata.tags).map(function(_title) {
+ var _tags = _source.getTags(true).searchByTitle(_title);
+ if (_tags.length) {
+ var _tag = _tags[0];
+ }
+ else {
+ _tag = new IriSP.Model.Tag(_title.replace(/\W/g,'_'),_source);
+ _tag.title = _title;
+ _source.getTags().push(_tag);
+ }
+ return _tag.id;
+ });
+ _ann.setTags(_tagIds);
+ _ann.setBegin(_anndata.begin);
+ _ann.setEnd(_anndata.end);
+ _ann.creator = _data.meta.creator;
+ _source.getAnnotations().push(_ann);
+ }
+ }
+}
\ No newline at end of file
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotations.js Thu Jun 07 11:42:33 2012 +0200
@@ -52,7 +52,9 @@
+ '<div class="Musitag-shadow"></div>'
+ '<div class="Musitag-color Musitag-' + _annotation.color_tag + '"></div>'
+ '<div class="Musitag-emoticon Musitag-' + _annotation.emoticon_tag + '"></div>'
- + '</div><div class="Musitag-Annotations-Balloon"></div></div>';
+ + '</div>'
+ + ( typeof _annotation.audio !== "undefined" && _annotation.audio.href ? '<div class="Musitag-Annotations-Balloon"></div>' : '' )
+ + '</div>';
}).join('');
_html += '</div>';
}
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.css Thu Jun 07 11:42:33 2012 +0200
@@ -8,7 +8,7 @@
}
.Musitag-Annotator-section {
- float: left; width: 197px;
+ float: left;
}
.Musitag-Annotator-separator {
@@ -20,24 +20,21 @@
}
.Musitag-Annotator-section h3 {
- font-size: 24px; text-align: center; margin: 0 10px;
+ font-size: 24px; text-align: center; margin: 0 10px; width: 160px;
}
.Musitag-Annotator-selector {
- margin: 12px 8px;
+ width: 168px; margin: 12px 5px;
}
.Musitag-Annotator-tagInSelector {
- float: left; margin: 5px;
+ float: left; margin: 2px;
}
.Musitag-Annotator-record {
- width: 135px; height: 135px; background: url(../img/record.png);
- margin: 35px 31px; cursor: pointer;
-}
-
-.Musitag-Annotator-record:hover {
- background-position: 0 -135px;
+ width: 220px; height: 160px;
+ margin: 25px 0;
+ z-index: 20;
}
.Musitag-Annotator-Note {
--- a/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/static/tralalere/metadataplayer/MusitagAnnotator.js Thu Jun 07 11:42:33 2012 +0200
@@ -68,7 +68,33 @@
+ '<div class="Musitag-Annotator-section">'
+ ' <h2>3</h2>'
+ ' <h3>Enregistre<br />ta voix</h3>'
- + ' <div class="Musitag-Annotator-record"></div>'
+ + ' <div class="Musitag-Annotator-record">'
+
+ + ' <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="220" height="140" id="record_mic" align="middle">'
+ + ' <param name="movie" value="../../script/record_mic/record_mic.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=true">'
+ + ' <embed src="../../script/record_mic/record_mic.swf" quality="high" bgcolor="#ffffff"'
+ + ' width="220" height="140" name="ExternalInterfaceExample" align="middle"'
+ + ' play="true" loop="false" quality="high" allowScriptAccess="always" '
+ + ' type="application/x-shockwave-flash" allowFullScreen="true" wmode="transparent" '
+ + ' flashvars="playVisible=true"'
+ + ' pluginspage="http://www.macromedia.com/go/getflashplayer">'
+ + ' </embed>'
+ + ' </object>'
+
+
+ +'</div>'
+ '</div>'
+ '<div class="Musitag-Annotator-separator"></div>'
+ '<div class="Musitag-Annotator-section">'
@@ -78,7 +104,7 @@
+ ' <div class="Musitag-container-80 Musitag-Annotator-tagInSend">'
+ ' <div class="Musitag-shadow"></div>'
+ ' <div class="Musitag-color"></div>'
- + ' <div class="Musitag-emoticon hidden"></div>'
+ + ' <div class="Musitag-emoticon"></div>'
+ ' </div>'
+ ' </div>'
+ '</div>'
@@ -96,20 +122,38 @@
this.bindPopcorn("timeupdate","onTimeupdate");
this.bindPopcorn("IriSP.MusitagAnnotator.hide","hide");
this.bindPopcorn("IriSP.MusitagAnnotator.show","show");
+ this.recorder = this.$.find("embed")[0];
+
+ var _this = this;
+
this.$.find('.Musitag-Annotator-tagInSelector').click(function() {
var _class = IriSP.jQuery(this).children(':last-child').attr('class'),
- _classes = _class.split(' ');
+ _classes = _class.split(' '),
+ _type = _classes[0].replace(/^\w+-/,""),
+ _value = _classes[1].replace(/^\w+-/,"");
+ _this.annotation[_type] = _value;
+ _this.checkAnnotation();
IriSP.jQuery('.Musitag-Annotator-tagInSend .' + _classes[0]).attr('class',_class);
IriSP.jQuery(this).siblings().removeClass('down')
.children(':last-child').css('opacity',.35);
IriSP.jQuery(this).addClass('down')
.children(':last-child').css('opacity',1);
});
- var _this = this;
+
this.$.find('.Musitag-Annotator-close').click(function() {
+ _this.recorder.stopRecord();
_this.hide();
_this.player.popcorn.trigger("IriSP.MusitagAndYou.show");
- })
+ });
+
+ this.$.find('.Musitag-Annotator-Note').click(function() {
+ _this.recorder.stopRecord();
+ });
+
+ window.setAudioUrl = function(_url) {
+ _this.annotation.audio_url = _url;
+ console.log(_url);
+ }
}
IriSP.Widgets.MusitagAnnotator.prototype.onTimeupdate = function() {
@@ -118,8 +162,23 @@
this.main_div.css("margin-left",Math.max(this.min_left, Math.min(this.max_right - this.main_width, _x - this.main_width / 2))+"px");
}
+IriSP.Widgets.MusitagAnnotator.prototype.checkAnnotation = function() {
+ var _res = this.annotation.emoticon && this.annotation.color;
+ this.$.find('.Musitag-Annotator-Note').css("opacity", _res ? 1 : .5);
+ return _res;
+}
+
IriSP.Widgets.MusitagAnnotator.prototype.show = function() {
this.$.show();
+ this.$.find('.Musitag-Annotator-tagInSelector').removeClass("down");
+ this.$.find(".Musitag-Annotator-tagInSend .Musitag-color").attr("class","Musitag-color");
+ this.$.find(".Musitag-Annotator-tagInSend .Musitag-emoticon").attr("class","Musitag-emoticon hidden");
+ this.annotation = {
+ audio_url: false,
+ emoticon: false,
+ color: false
+ };
+ this.checkAnnotation();
this.position_bar.slideDown(200);
}
--- a/web/tralalere/templates/base.html Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/templates/base.html Thu Jun 07 11:42:33 2012 +0200
@@ -15,6 +15,8 @@
{% block main_content %}
{% endblock %}
</div>
+{% block end_body %}
+{% endblock %}
</body>
</html>
\ No newline at end of file
--- a/web/tralalere/templates/home.html Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/templates/home.html Thu Jun 07 11:42:33 2012 +0200
@@ -13,7 +13,7 @@
<img class="home-media-image" src="{{im.url}}" width="{{ im.width }}" height="{{ im.height }}" />
</a>
<h3>
- <a href="#">{{content.title}}</a>
+ <a href="{% url player content.iri_id %}">{{content.title}}</a>
</h3>
<h4>
<a href="#">{{content.description}}</a>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/web/tralalere/templates/player.html Thu Jun 07 11:42:33 2012 +0200
@@ -0,0 +1,85 @@
+{% extends "base.html" %}
+{% load thumbnail %}
+{% block js_import %}
+ <script type="text/javascript" src="{{STATIC_URL}}tralalere/metadataplayer/LdtPlayer-core.js"></script>
+{% endblock %}
+{% block main_content %}
+{% thumbnail content.image "135x120" format="PNG" crop="center" as im %}
+ <div class="player-header">
+ <div class="player-topleft">
+ <h1>Musitag</h1>
+ <div class="back-home">
+ <a href="{% url home %}">Liste des chansons</a>
+ </div>
+ </div>
+ <div class="player-album">
+ <img src="{{im.url}}" />
+ <h2>{{content.title}}</h2>
+ <h3>{{content.description}}</h3>
+ <div id="player-elements"></div>
+ </div>
+ </div>
+
+ <div class="player-timeline">
+ <div id="controller-widget"></div>
+ <div id="slider-widget"></div>
+ </div>
+ <div class="player-belowtl">
+ <div id="player-annotations"></div>
+ <div id="player-andyou"></div>
+ <div id="player-annotator"></div>
+ </div>
+{% endthumbnail %}
+{% endblock %}
+
+{% block end_body %}
+ <script type="text/javascript">
+ IriSP.libFiles.defaultDir = "{{STATIC_URL}}tralalere/js";
+ IriSP.widgetsDir = "metadataplayer";
+ var _metadata = {
+ url: '{% url projectjson_id content.front_project.ldt_id %}',
+ format: 'ldt'
+ };
+ var _config = {
+ gui: {
+ width : 1,
+ height : 1,
+ container : 'player-elements',
+ default_options: {
+ metadata: _metadata
+ },
+ css : '{{STATIC_URL}}tralalere/metadataplayer/LdtPlayer-core.css',
+ widgets: [
+ {
+ type: "Controller",
+ container: "controller-widget"
+ },
+ {
+ type: "Slider",
+ container: "slider-widget",
+ minimize_timeout: false
+ },
+ {
+ type: "MusitagAnnotations",
+ container: "player-annotations"
+ },
+ {
+ type: "MusitagAndYou",
+ container: "player-andyou"
+ },
+ {
+ type: "MusitagAnnotator",
+ container: "player-annotator"
+ }
+ ]
+ },
+ player:{
+ type: 'jwplayer',
+ height: 1,
+ width: 1,
+ metadata: _metadata
+ }
+ };
+ var _myPlayer = new IriSP.Metadataplayer(_config);
+ </script>
+{% endblock %}
\ No newline at end of file
--- a/web/tralalere/urls.py Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/urls.py Thu Jun 07 11:42:33 2012 +0200
@@ -35,7 +35,8 @@
(r'^accounts/', include('social_auth.urls')),
url(r'^accounts/login/$',pf_login,{'template_name': 'registration/login.html'},name='auth_login'),
(r'^oauth/', include('oauth_provider.urls')),
- url(r'^home$', 'tralalere.views.home', name='home'),
+ url(r'^home$', 'tralalere.views.home', name='home'),
+ url(r'^player/(?P<contentid>[\w\d-]+)$', 'tralalere.views.player', name='player'),
(r'^/?$', 'django.views.generic.simple.redirect_to', {'url': 'home'}),
#(r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.STATIC_ROOT}),
--- a/web/tralalere/views.py Thu Jun 07 09:21:38 2012 +0200
+++ b/web/tralalere/views.py Thu Jun 07 11:42:33 2012 +0200
@@ -7,4 +7,10 @@
contents = Content.objects.filter(front_project__state = 2)
- return render_to_response('home.html', {'contents': contents}, context_instance=RequestContext(request))
\ No newline at end of file
+ return render_to_response('home.html', {'contents': contents}, context_instance=RequestContext(request))
+
+def player(request, contentid):
+
+ content = Content.objects.get_by_natural_key(contentid)
+
+ return render_to_response('player.html', {'content': content}, context_instance=RequestContext(request))
\ No newline at end of file