');
- _subconfig.container = IriSP.guid(this.container + '_' + _subconfig.type + '_');
+ _subconfig.container = IriSP._.uniqueId(this.container + '_' + _subconfig.type + '_');
_div.id = _subconfig.container;
- this.selector.append(_div);
- this[_subconfig.type] = new IriSP.Widgets(_player, _subconfig);
+ this.$.append(_div);
+ this[_subconfig.type] = new IriSP.Widgets(player, _subconfig);
}
}
};
+IriSP.Widget.prototype.functionWrapper = function(_name) {
+ var _this = this,
+ _function = this[_name];
+ if (typeof _function !== "undefined") {
+ return function() {
+ return _function.apply(_this, Array.prototype.slice.call(arguments, 0));
+ }
+ } else {
+ console.log("Error, Unknown function IriSP." + this.type + "." + _name)
+ }
+}
+
+IriSP.Widget.prototype.bindPopcorn = function(_popcornEvent, _functionName) {
+ this.player.popcorn.listen(_popcornEvent, this.functionWrapper(_functionName))
+}
+
/**
* This method responsible of drawing a widget on screen.
*/
diff -r a525cc2214e7 -r 2c025db10a10 src/js/widgets/annotationsListWidget.js
--- a/src/js/widgets/annotationsListWidget.js Tue Apr 17 20:19:46 2012 +0200
+++ b/src/js/widgets/annotationsListWidget.js Wed Apr 18 18:58:44 2012 +0200
@@ -1,23 +1,16 @@
-IriSP.AnnotationsListWidget = function(Popcorn, config, Serializer) {
- IriSP.Widget.call(this, Popcorn, config, Serializer);
- this.__counter = 0;
- this.__oldList = [];
- this.searchRe = null;
- this._ajax_cache = [];
- var _this = this;
-
- this._Popcorn.listen("IriSP.search", function(searchString) {
- _this.searchHandler(searchString);
- });
- this._Popcorn.listen("IriSP.search.closed", function() {
- _this.searchHandler(false);
- });
- this._Popcorn.listen("IriSP.search.cleared", function() {
- _this.searchHandler(false);
- });
+IriSP.AnnotationsListWidget = function(player, config) {
+ IriSP.Widget.call(this, player, config);
+ this.bindPopcorn("IriSP.search", "searchHandler");
+ this.bindPopcorn("IriSP.search.closed", "searchHandler");
+ this.bindPopcorn("IriSP.search.cleared", "searchHandler");
+ this.searchString = false;
+ this.lastIds = [];
+ var _this = this;
+ this.throttledRefresh = IriSP._.throttle(function() {
+ _this.refresh(false);
+ }, 1500);
};
-
IriSP.AnnotationsListWidget.prototype = new IriSP.Widget();
IriSP.AnnotationsListWidget.prototype.clear = function() {
@@ -27,254 +20,293 @@
};
IriSP.AnnotationsListWidget.prototype.searchHandler = function(searchString) {
- this.searchRe = (searchString && searchString.length) ? IriSP.regexpFromText(searchString) : null;
- if (this.ajax_mode && !this.cinecast_version) {
- var _this = this,
- _annotations = (
- this.searchRe === null
- ? this._ajax_cache
- : IriSP.underscore.filter(this._ajax_cache, function(_a) {
- return (_this.searchRe.test(_a.desc) || _this.searchRe.test(_a.title));
- })
- );
- this.do_redraw(_annotations);
- if (_annotations.length) {
- this._Popcorn.trigger("IriSP.search.matchFound");
- } else {
- this._Popcorn.trigger("IriSP.search.noMatchFound");
- }
- } else {
- this.drawList();
- }
+ this.searchString = typeof searchString !== "undefined" ? searchString : '';
+ var _n = this.refresh(true);
+ if (this.searchString) {
+ if (_n) {
+ this.player.popcorn.trigger("IriSP.search.matchFound");
+ } else {
+ this.player.popcorn.trigger("IriSP.search.noMatchFound");
+ }
+ }
}
-
/** effectively redraw the widget - called by drawList */
IriSP.AnnotationsListWidget.prototype.do_redraw = function(list) {
- var _html = IriSP.templToHTML(
- IriSP.annotationsListWidget_template, {
- annotations: list
- }),
- _this = this;
-
+/* var _html = IriSP.templToHTML(IriSP.annotationsListWidget_template, {
+ annotations : list
+ }), _this = this;
+
this.selector.html(_html);
-
+
this.selector.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
- _this._Popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().trim());
+ _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().trim());
})
-
- if (this.searchRe !== null) {
- this.selector.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description")
- .each(function() {
- var _$ = IriSP.jQuery(this);
- _$.html(_$.text().trim().replace(_this.searchRe, '
$1'))
- })
- }
+ if(this.searchRe !== null) {
+ this.selector.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
+ var _$ = IriSP.jQuery(this);
+ _$.html(_$.text().trim().replace(_this.searchRe, '
$1'))
+ })
+ } */
};
IriSP.AnnotationsListWidget.prototype.transformAnnotation = function(a) {
- var _this = this;
+/* var _this = this;
return {
"id" : a.id,
- "title": this.cinecast_version ? IriSP.get_aliased(a.meta, ['creator_name', 'creator']) : a.content.title,
+ "title" : this.cinecast_version ? IriSP.get_aliased(a.meta, ['creator_name', 'creator']) : a.content.title,
"desc" : this.cinecast_version ? a.content.data : a.content.description,
- "begin": IriSP.msToTime(a.begin),
+ "begin" : IriSP.msToTime(a.begin),
"end" : IriSP.msToTime(a.end),
- "thumbnail" : (typeof a.meta == "object" && typeof a.meta.thumbnail == "string") ? a.meta.thumbnail : this.default_thumbnail,
- "url" : (typeof a.meta == "object" && typeof a.meta.url == "string") ? a.meta.url : null,
- "created_at" :(typeof a.meta == "object" && typeof a.meta.created == "string") ? Date.parse(a.meta.created.replace(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}\:\d{2}\:\d{2}).*$/,"$2/$3/$1 $4 UTC+0000")) : null,
- "tags": typeof a.tags == "object"
- ? IriSP.underscore(a.tags)
- .chain()
- .map(function(_t) {
- if (typeof _t == "string") {
- return _t.replace(/^.*:/,'#');
- } else {
- if (typeof _t['id-ref'] != "undefined") {
- var _f = IriSP.underscore.find(_this._serializer._data.tags, function(_tag) {
- return _tag.id == _t['id-ref'];
- });
- if (typeof _f != "undefined") {
- return IriSP.get_aliased(_f.meta, ['dc:title', 'title']);
- }
- }
+ "thumbnail" : ( typeof a.meta == "object" && typeof a.meta.thumbnail == "string") ? a.meta.thumbnail : this.default_thumbnail,
+ "url" : ( typeof a.meta == "object" && typeof a.meta.url == "string") ? a.meta.url : null,
+ "created_at" : ( typeof a.meta == "object" && typeof a.meta.created == "string") ? Date.parse(a.meta.created.replace(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}\:\d{2}\:\d{2}).*$/, "$2/$3/$1 $4 UTC+0000")) : null,
+ "tags" : typeof a.tags == "object" ? IriSP.underscore(a.tags).chain().map(function(_t) {
+ if( typeof _t == "string") {
+ return _t.replace(/^.*:/, '#');
+ } else {
+ if( typeof _t['id-ref'] != "undefined") {
+ var _f = IriSP.underscore.find(_this._serializer._data.tags, function(_tag) {
+ return _tag.id == _t['id-ref'];
+ });
+ if( typeof _f != "undefined") {
+ return IriSP.get_aliased(_f.meta, ['dc:title', 'title']);
}
- return null;
- })
- .filter(function(_t) {
- return _t !== null && _t !== ""
- })
- .value()
- : []
- }
+ }
+ }
+ return null;
+ }).filter(function(_t) {
+ return _t !== null && _t !== ""
+ }).value() : []
+ } */
}
-
/** draw the annotation list */
IriSP.AnnotationsListWidget.prototype.drawList = function(force_redraw) {
- var _this = this;
-
-// var view_type = this._serializer.getContributions();
- var annotations = this._serializer._data.annotations;
- var currentTime = this._Popcorn.currentTime();
- var list = [];
+/* var _this = this;
+
+ // var view_type = this._serializer.getContributions();
+ var annotations = this._serializer._data.annotations;
+ var currentTime = this.player.popcorn.currentTime();
+ var list = [];
-/* if (typeof(view_type) === "undefined") {
- return;
-} */
- for (i = 0; i < annotations.length; i++) {
- var obj = this.transformAnnotation(annotations[i]);
- obj.iterator = i;
- obj.distance = Math.abs((annotations[i].end + annotations[i].begin) / 2000 - currentTime);
- if (!this.cinecast_version || annotations[i].type == "cinecast:UserAnnotation") {
- list.push(obj);
+ for( i = 0; i < annotations.length; i++) {
+ var obj = this.transformAnnotation(annotations[i]);
+ obj.iterator = i;
+ obj.distance = Math.abs((annotations[i].end + annotations[i].begin) / 2000 - currentTime);
+ if(!this.cinecast_version || annotations[i].type == "cinecast:UserAnnotation") {
+ list.push(obj);
+ }
+
}
-
- }
-
- if (this.searchRe !== null) {
+
+ if(this.searchRe !== null) {
list = list.filter(function(_a) {
- return (_this.searchRe.test(_a.desc) || _this.searchRe.test(_a.title));
+ return (_this.searchRe.test(_a.desc) || _this.searchRe.test(_a.title));
});
- if (list.length) {
- this._Popcorn.trigger("IriSP.search.matchFound");
- } else {
- this._Popcorn.trigger("IriSP.search.noMatchFound");
- }
+ if(list.length) {
+ this.player.popcorn.trigger("IriSP.search.matchFound");
+ } else {
+ this.player.popcorn.trigger("IriSP.search.noMatchFound");
+ }
}
- list = IriSP.underscore(list)
- .chain()
- .sortBy(function(_o) {
+ list = IriSP.underscore(list).chain().sortBy(function(_o) {
return _o.distance;
- })
- .first(10)
- .sortBy(function(_o) {
- return (_this.cinecast_version ? - _o.created_at : _o.iterator);
- })
- .value();
- var idList = IriSP.underscore.pluck(list, "id").sort();
+ }).first(10).sortBy(function(_o) {
+ return (_this.cinecast_version ? -_o.created_at : _o.iterator);
+ }).value();
+ var idList = IriSP.underscore.pluck(list, "id").sort();
- if (!IriSP.underscore.isEqual(this.__oldList, idList) || this.lastSearch !== this.searchRe || typeof(force_redraw) !== "undefined") {
- this.do_redraw(list);
- this.__oldList = idList;
- this.lastSearch = this.searchRe;
- }
- /* save for next call */
-
-
+ if(!IriSP.underscore.isEqual(this.__oldList, idList) || this.lastSearch !== this.searchRe || typeof (force_redraw) !== "undefined") {
+ this.do_redraw(list);
+ this.__oldList = idList;
+ this.lastSearch = this.searchRe;
+ }
+ /* save for next call */
+
};
IriSP.AnnotationsListWidget.prototype.ajaxRedraw = function(timecode) {
- /* the seeked signal sometimes passes an argument - depending on if we're using
+ /* the seeked signal sometimes passes an argument - depending on if we're using
our popcorn lookalike or the real thing - if it's the case, use it as it's
more precise than currentTime which sometimes contains the place we where at */
- if (IriSP.null_or_undefined(timecode) || typeof(timecode) != "number") {
- var tcode = this._Popcorn.currentTime();
- } else {
- var tcode = timecode;
- }
-
-
- /* the platform gives us a special url - of the type : http://path/{{media}}/{{begin}}/{{end}}
+ if(IriSP.null_or_undefined(timecode) || typeof (timecode) != "number") {
+ var tcode = this.player.popcorn.currentTime();
+ } else {
+ var tcode = timecode;
+ }
+
+ /* the platform gives us a special url - of the type : http://path/{{media}}/{{begin}}/{{end}}
we double the braces using regexps and we feed it to mustache to build the correct url
we have to do that because the platform only knows at run time what view it's displaying.
- */
-
- var media_id = this.currentMedia()["id"];
- var duration = this.getDuration();
-
- var begin_timecode = (Math.floor(tcode) - 300) * 1000;
- if (begin_timecode < 0)
- begin_timecode = 0;
-
- var end_timecode = (Math.floor(tcode) + 300) * 1000;
- if (end_timecode > duration)
- end_timecode = duration;
-
- var templ = Mustache.to_html(this.ajax_url, {media: media_id, begin: begin_timecode,
- end: end_timecode});
+ */
+
+ var media_id = this.currentMedia()["id"];
+ var duration = this.getDuration();
+
+ var begin_timecode = (Math.floor(tcode) - 300) * 1000;
+ if(begin_timecode < 0)
+ begin_timecode = 0;
+
+ var end_timecode = (Math.floor(tcode) + 300) * 1000;
+ if(end_timecode > duration)
+ end_timecode = duration;
- /* we create on the fly a serializer to get the ajax */
- var serializer = new IriSP.JSONSerializer(IriSP.__dataloader, templ);
- serializer.sync(IriSP.wrap(this, function(json) { this.processJson(json, serializer) }));
+ var templ = Mustache.to_html(this.ajax_url, {
+ media : media_id,
+ begin : begin_timecode,
+ end : end_timecode
+ });
+
+ /* we create on the fly a serializer to get the ajax */
+ var serializer = new IriSP.JSONSerializer(IriSP.__dataloader, templ);
+ serializer.sync(IriSP.wrap(this, function(json) {
+ this.processJson(json, serializer)
+ }));
};
-
/** process the received json - it's a bit hackish */
IriSP.AnnotationsListWidget.prototype.processJson = function(json, serializer) {
- /* FIXME: DRY the whole thing */
- var annotations = serializer._data.annotations;
- if (IriSP.null_or_undefined(annotations))
- return;
-
- /*
- commented in case we wanted to discriminate against some annotation types.
- var view_types = serializer.getIds("Contributions");
- */
- var l = [];
-
- var media = this.currentMedia()["id"];
-
- for (i = 0; i < annotations.length; i++) {
- var obj = this.transformAnnotation(annotations[i])
- if (typeof obj.url == "undefined" || !obj.url) {
- /* only if the annotation isn't present in the document create an
+ /* FIXME: DRY the whole thing */
+/* var annotations = serializer._data.annotations;
+ if(IriSP.null_or_undefined(annotations))
+ return;
+
+ /*
+ commented in case we wanted to discriminate against some annotation types.
+ var view_types = serializer.getIds("Contributions");
+ */
+ var l = [];
+
+ var media = this.currentMedia()["id"];
+
+ for( i = 0; i < annotations.length; i++) {
+ var obj = this.transformAnnotation(annotations[i])
+ if( typeof obj.url == "undefined" || !obj.url) {
+ /* only if the annotation isn't present in the document create an
external link */
- if (this.annotations_ids.indexOf(obj.id.toLowerCase()) == -1) {
- // braindead url; jacques didn't want to create a new one in the platform,
- // so we append the cutting id to the url.
- obj.url = this.project_url + "/" + media + "/" +
- annotations[i].meta.project + "/" +
- annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;
-
- // obj.url = document.location.href.split("#")[0] + "/" + annotation.meta.project;
- }
- }
- l.push(obj);
- }
- this._ajax_cache = l;
- this.do_redraw(l);
+ if(this.annotations_ids.indexOf(obj.id.toLowerCase()) == -1) {
+ // braindead url; jacques didn't want to create a new one in the platform,
+ // so we append the cutting id to the url.
+ obj.url = this.project_url + "/" + media + "/" + annotations[i].meta.project + "/" + annotations[i].meta["id-ref"] + '#id=' + annotations[i].id;
+
+ // obj.url = document.location.href.split("#")[0] + "/" + annotation.meta.project;
+ }
+ }
+ l.push(obj);
+ }
+ this._ajax_cache = l;
+ this.do_redraw(l);
};
+
+IriSP.AnnotationsListWidget.prototype.ajaxSource = function() {
+ var _url = Mustache.to_html(this.ajax_url, {
+ media : this.source.currentMedia.namespacedId.name,
+ begin : 0,
+ end : 0
+ });
+ console.log(_url);
+}
+
+IriSP.AnnotationsListWidget.prototype.refresh = function(_forceRedraw) {
+ if (this.currentSource.status !== IriSP.Model._SOURCE_STATUS_READY) {
+ return 0;
+ }
+ var _this = this,
+ _list = undefined,
+ _currentTime = this.player.popcorn.currentTime();
+ if (typeof _currentTime == "undefined") {
+ _currentTime = 0;
+ }
+ if (this.annotation_type) {
+ _list = this.currentSource.getAnnotationsByTypeTitle(this.annotation_type);
+ }
+ if (typeof _list === "undefined") {
+ _list = this.currentSource.getAnnotations();
+ }
+ if (this.searchString) {
+ _list = _list.searchByTextFields(this.searchString);
+ }
+ if (this.limit_count) {
+ _list = _list.sortBy(function(_annotation) {
+ return Math.abs(_annotation.begin.getSeconds() - _currentTime);
+ }).slice(0, this.limit_count)
+ }
+ if (this.newest_first) {
+ _list = _list.sortBy(function(_annotation) {
+ return -_annotation.created.valueOf();
+ });
+ } else {
+ _list = _list.sortBy(function(_annotation) {
+ return _annotation.begin.milliseconds;
+ });
+ }
+ var _ids = _list.idIndex;
+ if (!_forceRedraw && IriSP._.isEqual(_ids, this.lastIds)) {
+ return _list.length;
+ }
+
+ /* This part only gets executed if the list needs updating */
+ this.lastIds = _ids;
+
+ var _html = IriSP.templToHTML(
+ IriSP.annotationsListWidget_template,
+ {
+ annotations : _list.map(function(_annotation) {
+ var _res = {
+ id : _annotation.id,
+ title : _annotation.title.replace(_annotation.description,''),
+ description : _annotation.description,
+ begin : _annotation.begin.toString(),
+ end : _annotation.end.toString(),
+ thumbnail : typeof _annotation.thumbnail !== "undefined" ? _annotation.thumbnail : _this.default_thumbnail,
+ url : typeof _annotation.url !== "undefined" ? _annotation.thumbnail : '#' + _annotation.namespacedId.name,
+ tags : _annotation.getTagTexts()
+ }
+ return _res;
+ })
+ });
+
+ this.$.html(_html);
+
+ this.$.find('.Ldt-AnnotationsList-Tag-Li').click(function() {
+ _this.player.popcorn.trigger("IriSP.search.triggeredSearch", IriSP.jQuery(this).text().replace(/(^\s+|\s+$)/g,''));
+ })
+
+ if(this.searchString) {
+ var _searchRe = new RegExp('(' + this.searchString.replace(/(\W)/gm,'\\$1') + ')','gim');
+ this.$.find(".Ldt-AnnotationsList-Title a, .Ldt-AnnotationsList-Description").each(function() {
+ var _$ = IriSP.jQuery(this);
+ _$.html(_$.text().replace(/(^\s+|\s+$)/g,'').replace(_searchRe, '
$1'))
+ })
+ }
+
+ return _list.length;
+}
+
IriSP.AnnotationsListWidget.prototype.draw = function() {
-
- /* build a table of the annotations present in the document for faster
- lookup
- */
- this.annotations_ids = IriSP.underscore(this._serializer._data.annotations).map(function(_a) {
- return _a.id.toLowerCase();
- });
-
- var _this = this;
+ var _this = this;
+
+ if (this.ajax_url && this.ajax_granularity) {
+ this.ajaxSource();
+ } else {
+ this.currentSource = this.source;
+ }
+
+ if (this.refresh_interval) {
+ window.setInterval(function() {
+ _this.currentSource.get()
+ }, this.refresh_interval);
+ }
- if (!this.ajax_mode || this.cinecast_version) {
- var _throttled = IriSP.underscore.throttle(function() {
- _this.drawList();
- }, 1500);
- _throttled();
- this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", _throttled);
- this._Popcorn.listen("timeupdate", _throttled);
- if (this.cinecast_version) {
- window.setInterval(function() {
- var _tmpSerializer = new IriSP.JSONSerializer(IriSP.__dataloader, _this._config.metadata.src, true);
- _tmpSerializer.sync(function(json) {
- IriSP.underscore(json.annotations).each(function(_a) {
- var _j = _this.annotations_ids.indexOf(_a.id);
- if (_j == -1) {
- _this._serializer._data.annotations.push(_a);
- _this.annotations_ids.push(_a.id);
- } else {
- _this._serializer._data.annotations[_j] = _a;
- }
- _throttled();
- });
- }, true); // true is for force_refresh
- },this.refresh_interval);
- }
- } else {
- /* update the widget when the video has finished loading and when it's seeked and paused */
- this._Popcorn.listen("seeked", IriSP.wrap(this, this.ajaxRedraw));
- this._Popcorn.listen("loadedmetadata", IriSP.wrap(this, this.ajaxRedraw));
- this._Popcorn.listen("paused", IriSP.wrap(this, this.ajaxRedraw));
+ var _events = [
+ "IriSP.createAnnotationWidget.addedAnnotation",
+ "timeupdate",
+ "seeked",
+ "loadedmetadata"
+ ];
+ for (var _i = 0; _i < _events.length; _i++) {
+ this.player.popcorn.listen(_events[_i], this.throttledRefresh);
+ }
- this._Popcorn.listen("IriSP.createAnnotationWidget.addedAnnotation", IriSP.wrap(this, this.ajaxRedraw));
- }
+ this.throttledRefresh();
-};
\ No newline at end of file
+};
diff -r a525cc2214e7 -r 2c025db10a10 src/js/widgets/helloWorldWidget.js
--- a/src/js/widgets/helloWorldWidget.js Tue Apr 17 20:19:46 2012 +0200
+++ b/src/js/widgets/helloWorldWidget.js Wed Apr 18 18:58:44 2012 +0200
@@ -1,15 +1,30 @@
-IriSP.HelloWorldWidget = function(Popcorn, config, Serializer) {
- IriSP.Widget.call(this, Popcorn, config, Serializer);
+IriSP.i18n.addMessages({
+ "fr": {
+ "Hello" : "Bonjour,"
+ },
+ "en" : {
+ "Hello" : "Hello,"
+ }
+})
+
+IriSP.HelloWorldWidget = function(player, config) {
+ console.log("Calling IriSP.Widget's constructor from IriSP.HelloWorldWidget");
+ IriSP.Widget.call(this, player, config);
+ if (typeof this.text == "undefined") {
+ this.text = 'world'
+ }
}
IriSP.HelloWorldWidget.prototype = new IriSP.Widget();
IriSP.HelloWorldWidget.prototype.draw = function() {
- this.selector
- .append('Hello, world')
- .css({
- "text-align" : "center",
- "padding": "10px 0",
- "font-size" : "14px"
- });
+ var _tmpl = '
{{l10n.Hello}} {{text}}
Looks like we have {{source.contents.annotation.length}} annotations in this feed
'
+ _html = IriSP.templToHTML(_tmpl, this);
+ this.$.append(_html);
+ this.$.find('p').css({
+ "text-align" : "center",
+ "margin": "10px 0",
+ "font-size" : "14px"
+ });
+ console.log("HelloWorldWidget was drawn");
}
diff -r a525cc2214e7 -r 2c025db10a10 src/js/widgets/playerWidget.js
--- a/src/js/widgets/playerWidget.js Tue Apr 17 20:19:46 2012 +0200
+++ b/src/js/widgets/playerWidget.js Wed Apr 18 18:58:44 2012 +0200
@@ -34,49 +34,49 @@
);
-IriSP.PlayerWidget = function(Popcorn, config, Serializer) {
- IriSP.Widget.call(this, Popcorn, config, Serializer);
+IriSP.PlayerWidget = function(player, config) {
+ IriSP.Widget.call(this, player, config);
- this._searchBlockOpen = false;
this._searchLastValue = "";
};
IriSP.PlayerWidget.prototype = new IriSP.Widget();
IriSP.PlayerWidget.prototype.draw = function() {
- var self = this;
- var width = this.width;
- var height = this.height;
- var heightS = this.height-20;
-
- var playerTempl = IriSP.templToHTML(IriSP.player_template, this._config);
- this.selector.append(playerTempl);
-
- this.selector.children(".Ldt-controler").show();
+ var _this = this,
+ _html = IriSP.templToHTML(IriSP.player_template, this);
+
+ this.$.append(_html);
+
+ // Define blocks
+ this.$playButton = this.$.find(".Ldt-CtrlPlay");
+ this.$searchBlock = this.$.find(".LdtSearch");
+ this.$searchInput = this.$.find(".LdtSearchInput");
+ this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar");
- // handle clicks by the user on the video.
- this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
- this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
+ // handle events
+ this.bindPopcorn("play","playButtonUpdater");
+ this.bindPopcorn("pause","playButtonUpdater");
+ this.bindPopcorn("volumechange","volumeUpdater");
+ this.bindPopcorn("timeupdate","timeDisplayUpdater");
+ this.bindPopcorn("loadedmetadata","timeDisplayUpdater");
+ this.bindPopcorn("IriSP.search.matchFound","searchMatch");
+ this.bindPopcorn("IriSP.search.noMatchFound","searchNoMatch");
+ this.bindPopcorn("IriSP.search.triggeredSearch","triggeredSearch");
+
+ // handle clicks
+ this.$playButton.click(this.functionWrapper("playHandler"));
+
+ this.$.find(".Ldt-CtrlAnnotate").click(function() {
+ _this.player.popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked");
+ });
+ this.$.find(".Ldt-CtrlSearch").click(this.functionWrapper("searchButtonHandler"));
+
+ this.$searchInput.keyup(this.functionWrapper("searchHandler") );
- this._Popcorn.listen("volumechange", IriSP.wrap(this, this.volumeUpdater));
-
- this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater));
- // update the time display for the first time.
- this._Popcorn.listen("loadedmetadata", IriSP.wrap(this, this.timeDisplayUpdater));
-
- this._Popcorn.listen("IriSP.search.matchFound", IriSP.wrap(this, this.searchMatch));
- this._Popcorn.listen("IriSP.search.noMatchFound", IriSP.wrap(this, this.searchNoMatch));
- this._Popcorn.listen("IriSP.search.triggeredSearch", IriSP.wrap(this, this.triggeredSearch));
-
-
- this.selector.find(".Ldt-CtrlPlay").click(function() { self.playHandler.call(self); });
- this.selector.find(".Ldt-CtrlAnnotate").click(function()
- { self._Popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); });
- this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); });
-
- var _volctrl = this.selector.find(".Ldt-Ctrl-Volume-Control");
- this.selector.find('.Ldt-CtrlSound')
- .click(function() { self.muteHandler.call(self); } )
+ var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control");
+ this.$.find('.Ldt-CtrlSound')
+ .click(this.functionWrapper("muteHandler"))
.mouseover(function() {
_volctrl.show();
})
@@ -89,51 +89,44 @@
_volctrl.hide();
});
- /*
- var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position();
- var searchBox = Mustache.to_html(IriSP.search_template, {margin_left : searchButtonPos.left + "px"});
- this.selector.find(".Ldt-CtrlSearch").after(searchBox);
- */
-
- // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget)
- this.selector.hover(function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOver"); },
- function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOut"); });
- this.selector.find(".Ldt-Ctrl-Volume-Cursor").draggable({
- axis: "x",
- drag: function(event, ui) {
- var _vol = Math.max(0, Math.min( 1, ui.position.left / (ui.helper.parent().width() - ui.helper.outerWidth())));
- ui.helper.attr("title",IriSP.i18n.getMessage('volume')+': ' + Math.floor(100*_vol) + '%');
- self._Popcorn.volume(_vol);
- },
- containment: "parent"
- });
-
- setTimeout(function() {
- self.volumeUpdater();
- }, 1000); /* some player - jwplayer notable - save the state of the mute button between sessions */
+
+ // Allow Volume Cursor Dragging
+ this.$volumeBar.slider({
+ slide: function(event, ui) {
+ _this.$volumeBar.attr("title",IriSP.i18n.getMessage('volume')+': ' + ui.value + '%');
+ _this.player.popcorn.volume(ui.value / 100);
+ },
+ stop: this.functionWrapper("volumeUpdater")
+ });
+
+ // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget)
+ this.$.hover(
+ function() {
+ _this.player.popcorn.trigger("IriSP.PlayerWidget.MouseOver");
+ },
+ function() {
+ _this.player.popcorn.trigger("IriSP.PlayerWidget.MouseOut");
+ });
+ setTimeout(this.functionWrapper("volumeUpdater"), 1000);
+ /* some players - including jwplayer - save the state of the mute button between sessions */
};
/* Update the elasped time div */
IriSP.PlayerWidget.prototype.timeDisplayUpdater = function() {
+ var _curTime = this.player.popcorn.roundTime();
+ if (typeof this._previousSecond !== "undefined" && _curTime === this._previousSecond) {
+ return;
+ }
- if (this._previousSecond === undefined) {
- this._previousSecond = this._Popcorn.roundTime();
- }
- else {
- /* we're still in the same second, so it's not necessary to update time */
- if (this._Popcorn.roundTime() == this._previousSecond)
- return;
-
- }
+ // we get it at each call because it may change.
+ var _totalTime = this.source.getDuration(),
+ _elapsedTime = new IriSP.Model.Time();
+
+ _elapsedTime.setSeconds(_curTime);
- // we get it at each call because it may change.
- var duration = this.getDuration() / 1000;
- var totalTime = IriSP.secondsToTime(duration);
- var elapsedTime = IriSP.secondsToTime(this._Popcorn.currentTime());
-
- this.selector.find(".Ldt-ElapsedTime").html(elapsedTime.toString());
- this.selector.find(".Ldt-TotalTime").html(totalTime.toString());
- this._previousSecond = this._Popcorn.roundTime();
+ this.$.find(".Ldt-ElapsedTime").html(_elapsedTime.toString());
+ this.$.find(".Ldt-TotalTime").html(_totalTime.toString());
+ this._previousSecond = _curTime;
};
/* update the icon of the button - separate function from playHandler
@@ -141,42 +134,46 @@
the jwplayer window) we have to change the icon without playing/pausing
*/
IriSP.PlayerWidget.prototype.playButtonUpdater = function() {
- var status = this._Popcorn.media.paused;
+
+ var status = this.player.popcorn.media.paused;
- if ( status == true ){
+ if (status) {
/* the background sprite is changed by adding/removing the correct classes */
- this.selector.find(".Ldt-CtrlPlay").attr("title", IriSP.i18n.getMessage('play'));
- this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PauseState").addClass("Ldt-CtrlPlay-PlayState");
- } else {
- this.selector.find(".Ldt-CtrlPlay").attr("title", IriSP.i18n.getMessage('pause'));
- this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PlayState").addClass("Ldt-CtrlPlay-PauseState");
- }
-
- return;
+ this.$playButton
+ .attr("title", IriSP.i18n.getMessage('play'))
+ .removeClass("Ldt-CtrlPlay-PauseState")
+ .addClass("Ldt-CtrlPlay-PlayState");
+ } else {
+ this.$playButton
+ .attr("title", IriSP.i18n.getMessage('pause'))
+ .removeClass("Ldt-CtrlPlay-PlayState")
+ .addClass("Ldt-CtrlPlay-PauseState");
+ }
};
IriSP.PlayerWidget.prototype.playHandler = function() {
- var status = this._Popcorn.media.paused;
+
+ var status = this.player.popcorn.media.paused;
- if ( status == true ){
- this._Popcorn.play();
- } else {
- this._Popcorn.pause();
- }
+ if (status) {
+ this.player.popcorn.play();
+ } else {
+ this.player.popcorn.pause();
+ }
};
IriSP.PlayerWidget.prototype.muteHandler = function() {
- this._Popcorn.mute(!this._Popcorn.muted());
+ this.player.popcorn.mute(!this.player.popcorn.muted());
};
IriSP.PlayerWidget.prototype.volumeUpdater = function() {
- var _muted = this._Popcorn.muted(),
- _vol = this._Popcorn.volume();
+ var _muted = this.player.popcorn.muted(),
+ _vol = this.player.popcorn.volume();
if (_vol === false) {
_vol = .5;
}
- var _soundCtl = this.selector.find(".Ldt-CtrlSound");
+ var _soundCtl = this.$.find(".Ldt-CtrlSound");
_soundCtl.removeClass("Ldt-CtrlSound-Mute Ldt-CtrlSound-Half Ldt-CtrlSound-Full");
if (_muted) {
_soundCtl.attr("title", IriSP.i18n.getMessage('unmute'))
@@ -185,77 +182,60 @@
_soundCtl.attr("title", IriSP.i18n.getMessage('mute'))
.addClass(_vol < .5 ? "Ldt-CtrlSound-Half" : "Ldt-CtrlSound-Full" )
}
- var _cursor = this.selector.find(".Ldt-Ctrl-Volume-Cursor");
- _cursor.css({
- "left": ( _muted ? 0 : Math.floor(_vol * (_cursor.parent().width() - _cursor.outerWidth())) ) + "px"
- })
+ this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol);
};
IriSP.PlayerWidget.prototype.showSearchBlock = function() {
- var self = this;
-
- if (this._searchBlockOpen == false) {
- this.selector.find(".LdtSearch").show("blind", { direction: "horizontal"}, 100);
- this.selector.find(".LdtSearchInput").css('background-color','#fff');
+ this.$searchBlock.show("blind", { direction: "horizontal"}, 100);
+ this.$searchInput.css('background-color','#fff');
- this._searchBlockOpen = true;
- this.selector.find(".LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } );
- this.selector.find(".LdtSearchInput").focus();
+ this.$searchInput.focus();
- // we need this variable because some widget can find a match in
- // their data while at the same time other's don't. As we want the
+ // we need this variable because some widgets can find a match in
+ // their data while at the same time others don't. As we want the
// search field to become green when there's a match, we need a
// variable to remember that we had one.
this._positiveMatch = false;
// tell the world the field is open
- this._Popcorn.trigger("IriSP.search.open");
- }
+ this.player.popcorn.trigger("IriSP.search.open");
};
IriSP.PlayerWidget.prototype.hideSearchBlock = function() {
- if (this._searchBlockOpen == true) {
- this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
- this.selector.find(".LdtSearchInput").attr('value','');
- this.selector.find(".LdtSearch").hide("blind", { direction: "horizontal"}, 75);
-
- // unbind the watcher event.
- this.selector.find(".LdtSearchInput").unbind('keypress set');
- this._searchBlockOpen = false;
+ this._searchLastValue = this.$searchInput.val();
+ this.$searchInput.val('');
+ this.$searchBlock.hide("blind", { direction: "horizontal"}, 75);
this._positiveMatch = false;
- this._Popcorn.trigger("IriSP.search.closed");
- }
+ this.player.popcorn.trigger("IriSP.search.closed");
};
/** react to clicks on the search button */
IriSP.PlayerWidget.prototype.searchButtonHandler = function() {
- var self = this;
-
- /* show the search field if it is not shown */
- if ( this._searchBlockOpen == false ) {
- this.showSearchBlock();
- this.selector.find(".LdtSearchInput").attr('value', this._searchLastValue);
- this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
+
+ if ( this.$searchBlock.is(":hidden") ) {
+ this.showSearchBlock();
+ this.$searchInput.val(this._searchLastValue);
+ this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
} else {
- this.hideSearchBlock();
- }
+ this.hideSearchBlock();
+ }
};
/** this handler is called whenever the content of the search
field changes */
IriSP.PlayerWidget.prototype.searchHandler = function() {
- this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
- this._positiveMatch = false;
+ this._searchLastValue = this.$searchInput.val();
+ this._positiveMatch = false;
- // do nothing if the search field is empty, instead of highlighting everything.
- if (this._searchLastValue == "") {
- this._Popcorn.trigger("IriSP.search.cleared");
- this.selector.find(".LdtSearchInput").css('background-color','');
- } else {
- this._Popcorn.trigger("IriSP.search", this._searchLastValue);
- }
+ // do nothing if the search field is empty, instead of highlighting everything.
+ if (this._searchLastValue == "") {
+ this.player.popcorn.trigger("IriSP.search.cleared");
+ this.$searchInput.css('background-color','');
+ } else {
+ this.player.popcorn.trigger("IriSP.search", this._searchLastValue);
+ }
};
/**
@@ -263,22 +243,23 @@
highlight a match.
*/
IriSP.PlayerWidget.prototype.searchMatch = function() {
- this._positiveMatch = true;
- this.selector.find(".LdtSearchInput").css('background-color','#e1ffe1');
+ this._positiveMatch = true;
+ this.$searchInput.css('background-color','#e1ffe1');
};
/** the same, except that no value could be found */
IriSP.PlayerWidget.prototype.searchNoMatch = function() {
- if (this._positiveMatch !== true)
- this.selector.find(".LdtSearchInput").css('background-color', "#d62e3a");
+ if (this._positiveMatch !== true) {
+ this.$searchInput.css('background-color', "#d62e3a");
+ }
};
/** react to an IriSP.Player.triggeredSearch - that is, when
a widget ask the PlayerWidget to do a search on his behalf */
IriSP.PlayerWidget.prototype.triggeredSearch = function(searchString) {
- this.showSearchBlock();
- this.selector.find(".LdtSearchInput").attr('value', searchString);
- this._Popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural.
+ this.showSearchBlock();
+ this.$searchInput.attr('value', searchString);
+ this.player.popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural.
};
diff -r a525cc2214e7 -r 2c025db10a10 src/templates/annotationsListWidget.html
--- a/src/templates/annotationsListWidget.html Tue Apr 17 20:19:46 2012 +0200
+++ b/src/templates/annotationsListWidget.html Wed Apr 18 18:58:44 2012 +0200
@@ -3,8 +3,6 @@
@@ -14,16 +12,12 @@ {{end}}