src/js/widgets/playerWidget.js
branchpopcorn-port
changeset 398 d1883378b822
parent 355 d8df77c40676
child 416 f3237cce149e
equal deleted inserted replaced
397:eb54152c2cfa 398:d1883378b822
    22     
    22     
    23   // handle clicks by the user on the video.
    23   // handle clicks by the user on the video.
    24   this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
    24   this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
    25   this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
    25   this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
    26   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater));
    26   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater));
    27   this._Popcorn.listen("IriSP.SegmentsWidget.matchFound", IriSP.wrap(this, this.searchMatch));
    27   this._Popcorn.listen("IriSP.search.matchFound", IriSP.wrap(this, this.searchMatch));
    28   this._Popcorn.listen("IriSP.SegmentsWidget.noMatchFound", IriSP.wrap(this, this.searchNoMatch));
    28   this._Popcorn.listen("IriSP.search.noMatchFound", IriSP.wrap(this, this.searchNoMatch));
    29   
    29   
    30   
    30   
    31   this.selector.find(".Ldt-CtrlPlay").click(function() { self.playHandler.call(self); });
    31   this.selector.find(".Ldt-CtrlPlay").click(function() { self.playHandler.call(self); });
    32   this.selector.find(".Ldt-CtrlNext").click(function() { });
    32   this.selector.find(".Ldt-CtrlNext").click(function() { });
    33   this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); });
    33   this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); });
   122       this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
   122       this._Popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
   123       
   123       
   124       this._searchBlockOpen = true;           
   124       this._searchBlockOpen = true;           
   125       this.selector.find(".LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } );
   125       this.selector.find(".LdtSearchInput").bind('keyup', null, function() { self.searchHandler.call(self); } );
   126       
   126       
       
   127       // we need this variable because some widget can find a match in
       
   128       // their data while at the same time other's don't. As we want the
       
   129       // search field to become green when there's a match, we need a 
       
   130       // variable to remember that we had one.
       
   131       this._positiveMatch = false;
       
   132 
   127       // tell the world the field is open
   133       // tell the world the field is open
   128       this._Popcorn.trigger("IriSP.search.open");
   134       this._Popcorn.trigger("IriSP.search.open");
   129       
   135       
   130 	} else {
   136 	} else {
   131       this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
   137       this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
   134       this.selector.find(".LdtSearch").hide(100);
   140       this.selector.find(".LdtSearch").hide(100);
   135       
   141       
   136       // unbind the watcher event.
   142       // unbind the watcher event.
   137       this.selector.find(".LdtSearchInput").unbind('keypress set');
   143       this.selector.find(".LdtSearchInput").unbind('keypress set');
   138       this._searchBlockOpen = false;
   144       this._searchBlockOpen = false;
       
   145 
       
   146       this._positiveMatch = false;
   139       
   147       
   140       this._Popcorn.trigger("IriSP.search.closed");
   148       this._Popcorn.trigger("IriSP.search.closed");
   141   }
   149   }
   142 };
   150 };
   143 
   151 
   144 /* this handler is called whenever the content of the search
   152 /* this handler is called whenever the content of the search
   145    field changes */
   153    field changes */
   146 IriSP.PlayerWidget.prototype.searchHandler = function() {
   154 IriSP.PlayerWidget.prototype.searchHandler = function() {
   147   this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
   155   this._searchLastValue = this.selector.find(".LdtSearchInput").attr('value');
       
   156   this._positiveMatch = false;
   148   
   157   
   149   // do nothing if the search field is empty, instead of highlighting everything.
   158   // do nothing if the search field is empty, instead of highlighting everything.
   150   if (this._searchLastValue == "") {
   159   if (this._searchLastValue == "") {
   151     this._Popcorn.trigger("IriSP.search.cleared");
   160     this._Popcorn.trigger("IriSP.search.cleared");
   152     this.selector.find(".LdtSearchInput").css('background-color','');
   161     this.selector.find(".LdtSearchInput").css('background-color','');
   158 /*
   167 /*
   159   handler for the IriSP.search.found message, which is sent by some views when they
   168   handler for the IriSP.search.found message, which is sent by some views when they
   160   highlight a match.
   169   highlight a match.
   161 */
   170 */
   162 IriSP.PlayerWidget.prototype.searchMatch = function() {
   171 IriSP.PlayerWidget.prototype.searchMatch = function() {
       
   172   this._positiveMatch = true;
   163   this.selector.find(".LdtSearchInput").css('background-color','#e1ffe1');
   173   this.selector.find(".LdtSearchInput").css('background-color','#e1ffe1');
   164 }
   174 }
   165 
   175 
   166 /* the same, except that no value could be found */
   176 /* the same, except that no value could be found */
   167 IriSP.PlayerWidget.prototype.searchNoMatch = function() {
   177 IriSP.PlayerWidget.prototype.searchNoMatch = function() {
   168   this.selector.find(".LdtSearchInput").css('background-color', "#d62e3a");
   178   if (this._positiveMatch !== true)
       
   179     this.selector.find(".LdtSearchInput").css('background-color', "#d62e3a");
   169 }
   180 }
   170 
   181