Added support for defining a "time range" for a Playable to set the time boundaries of what can be played by the diffenrent players (Popcorn and HtmlPlayer for now). Added option in Segment widget to define a timerange on click.
--- a/src/js/html-player.js Fri Sep 18 14:02:21 2015 +0200
+++ b/src/js/html-player.js Tue Sep 01 15:10:17 2015 +0200
@@ -62,6 +62,20 @@
}
});
+ media.on("settimerange", function(_timeRange){
+ media.timeRange = _timeRange;
+ try {
+ if (media.getCurrentTime() > _timeRange[0] || media.getCurrentTime() < _timeRange){
+ mediaEl.currentTime = (_timeRange[0] / 1000);
+ }
+ } catch (err) {
+ }
+ })
+
+ media.on("resettimerange", function(){
+ media.timeRange = false;
+ })
+
media.on("setplay", function() {
try {
mediaEl.play();
@@ -115,5 +129,4 @@
media.trigger("seeked");
});
-
};
--- a/src/js/model.js Fri Sep 18 14:02:21 2015 +0200
+++ b/src/js/model.js Tue Sep 01 15:10:17 2015 +0200
@@ -576,6 +576,7 @@
this.volume = .5;
this.paused = true;
this.muted = false;
+ this.timeRange = false;
this.loadedMetadata = false;
var _this = this;
this.on("play", function() {
@@ -600,6 +601,18 @@
_a.trigger("enter");
_this.trigger("enter-annotation",_a);
});
+
+ if (_this.getTimeRange()){
+ if (_this.getTimeRange()[0] > _time) {
+ _this.pause();
+ _this.setCurrentTime(_this.getTimeRange()[0]);
+ }
+ if (_this.getTimeRange()[1] < _time){
+ _this.pause();
+ _this.setCurrentTime(_this.getTimeRange()[1]);
+ }
+ }
+
});
this.on("loadedmetadata", function() {
_this.loadedMetadata = true;
@@ -624,6 +637,10 @@
return this.muted;
};
+Playable.prototype.getTimeRange = function() {
+ return this.timeRange;
+}
+
Playable.prototype.setCurrentTime = function(_time) {
this.trigger("setcurrenttime",_time);
};
@@ -636,6 +653,16 @@
this.trigger("setmuted",_muted);
};
+Playable.prototype.setTimeRange = function(_timeBegin, _timeEnd) {
+ if ((_timeBegin < _timeEnd)&&(_timeBegin >= 0)&&(_timeEnd>0)){
+ return this.trigger("settimerange", [_timeBegin, _timeEnd]);
+ }
+}
+
+Playable.prototype.resetTimeRange = function() {
+ return this.trigger("resettimerange");
+}
+
Playable.prototype.play = function() {
this.trigger("setplay");
};
@@ -659,6 +686,17 @@
};
extendPrototype(Media, Playable);
+/* */
+
+var Media = Model.Media = function(_id, _source) {
+ Playable.call(this, _id, _source);
+ this.elementType = 'media';
+ this.duration = new Time();
+ this.video = '';
+ var _this = this;
+};
+
+extendPrototype(Media, Playable);
/* Default functions to be overriden by players */
--- a/src/widgets/PopcornPlayer.js Fri Sep 18 14:02:21 2015 +0200
+++ b/src/widgets/PopcornPlayer.js Tue Sep 01 15:10:17 2015 +0200
@@ -101,6 +101,20 @@
_popcorn.pause();
});
+ _media.on("settimerange", function(_timeRange){
+ _media.timeRange = _timeRange;
+ try {
+ if (_media.getCurrentTime() > _timeRange[0] || _media.getCurrentTime() < _timeRange){
+ _popcorn.currentTime(_timeRange[0] / 1000);
+ }
+ } catch (err) {
+ }
+ })
+
+ _media.on("resettimerange", function(){
+ _media.timeRange = false;
+ })
+
// Binding Popcorn events to media
function getVolume() {
--- a/src/widgets/Segments.js Fri Sep 18 14:02:21 2015 +0200
+++ b/src/widgets/Segments.js Tue Sep 01 15:10:17 2015 +0200
@@ -14,8 +14,10 @@
overlap: .25,
found_color: "#FF00FC",
faded_found_color: "#ff80fc",
- // Display creator info in segment tooltip
- show_creator: true
+ selected_color: "#74d600",
+ faded_selected_color: "#baf9b5",
+ no_tooltip: false,
+ use_timerange: false,
};
IriSP.Widgets.Segments.prototype.template =
@@ -79,7 +81,7 @@
color : color,
medcolor: medcolor,
lowcolor: lowcolor,
- text: ((_this.show_creator && _annotation.creator) ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
+ text: (_annotation.creator ? (_annotation.creator + " : ") : "" ) + _fulltext.replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{120,140})[\s].+$/m,'$1…'),
left : _left,
width : _width,
top: _top,
@@ -91,17 +93,40 @@
};
var _html = Mustache.to_html(_this.annotationTemplate, _data),
_el = IriSP.jQuery(_html);
- _el.mouseover(function() {
+ _el.mouseover(function() {
_annotation.trigger("select");
- _this.player.trigger('annotation-select', _annotation);
})
.mouseout(function() {
_annotation.trigger("unselect");
- _this.player.trigger('annotation-unselect', _annotation);
})
.click(function() {
+ if(_this.use_timerange){
+ if(!_this.media.getTimeRange()){
+ _this.media.setTimeRange(_annotation.begin, _annotation.end)
+ _this.$segments.each(function(){
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ })
+ _el.css("background", _this.selected_color).addClass("selected");
+ }
+ else if (_this.media.getTimeRange()[0]==_annotation.begin || _this.media.getTimeRange()[1]==_annotation.end){
+ _this.media.resetTimeRange();
+ _this.$segments.each(function(){
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ _annotation.trigger("select");
+ })
+ }
+ else {
+ _this.media.setTimeRange(_annotation.begin, _annotation.end);
+ _this.$segments.each(function(){
+ var _segment = IriSP.jQuery(this);
+ _segment.css("background", lowcolor).removeClass("selected");
+ })
+ _el.css("background", _this.selected_color).addClass("selected");
+ }
+ }
_annotation.trigger("click");
- _this.player.trigger('annotation-click', _annotation);
})
.appendTo(list_$);
IriSP.attachDndData(_el, {
@@ -118,9 +143,13 @@
_segment.css({
background: _segment.hasClass("found") ? _this.faded_found_color : _segment.attr("data-low-color")
});
+ _segment.css({
+ background: _segment.hasClass("selected") ? _this.faded_selected_color : _segment.attr("data-low-color")
+ })
});
_el.css({
background: _el.hasClass("found") ? _this.found_color: color,
+ background: _el.hasClass("selected") ? _this.selected_color: color,
"z-index": ++zindex
});
if (_this.tooltip) {
@@ -134,6 +163,7 @@
_this.$segments.each(function() {
var _segment = IriSP.jQuery(this);
_segment.css("background", _segment.hasClass("found") ? _this.found_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
+ _segment.css("background", _segment.hasClass("selected") ? _this.selected_color : _segment.attr(searching ? "data-low-color" : "data-medium-color"));
});
});
_annotation.on("found", function() {
@@ -150,15 +180,17 @@
background : this.background,
margin: "1px 0"
});
- this.insertSubwidget(
- this.$.find(".Ldt-Segments-Tooltip"),
- {
- type: "Tooltip",
- min_x: 0,
- max_x: this.width
- },
- "tooltip"
- );
+ if (!this.no_tooltip){
+ this.insertSubwidget(
+ this.$.find(".Ldt-Segments-Tooltip"),
+ {
+ type: "Tooltip",
+ min_x: 0,
+ max_x: this.width
+ },
+ "tooltip"
+ );
+ }
this.$segments = this.$.find('.Ldt-Segments-Segment');
this.source.getAnnotations().on("search", function() {
searching = true;
@@ -172,9 +204,10 @@
});
};
-IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
+IriSP.Widgets.Segments.prototype.onTimeupdate = function(_time) {
var _x = Math.floor( this.width * _time / this.media.duration);
this.$.find('.Ldt-Segments-Position').css({
left: _x + "px"
});
};
+