# HG changeset patch # User durandn # Date 1441113017 -7200 # Node ID d8339b45edc4cbc62357a3835a01c65f8d9393ad # Parent 967ac73327dcf857d1d7d37bfd675a3fde781ef0 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. diff -r 967ac73327dc -r d8339b45edc4 src/js/html-player.js --- 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"); }); - }; diff -r 967ac73327dc -r d8339b45edc4 src/js/model.js --- 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 */ diff -r 967ac73327dc -r d8339b45edc4 src/widgets/PopcornPlayer.js --- 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() { diff -r 967ac73327dc -r d8339b45edc4 src/widgets/Segments.js --- 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" }); }; +