src/js/widgets/playerWidget.js
branchnew-model
changeset 874 38b65761a7d5
parent 870 2c025db10a10
equal deleted inserted replaced
872:d777d05a16e4 874:38b65761a7d5
    47         _html = IriSP.templToHTML(IriSP.player_template, this);
    47         _html = IriSP.templToHTML(IriSP.player_template, this);
    48     
    48     
    49     this.$.append(_html);
    49     this.$.append(_html);
    50     
    50     
    51     // Define blocks
    51     // Define blocks
    52     this.$playButton = this.$.find(".Ldt-CtrlPlay");
    52     this.$playButton = this.$.find(".Ldt-Ctrl-Play");
    53     this.$searchBlock = this.$.find(".LdtSearch");
    53     this.$searchBlock = this.$.find(".Ldt-Ctrl-Search");
    54     this.$searchInput = this.$.find(".LdtSearchInput");
    54     this.$searchInput = this.$.find(".Ldt-Ctrl-SearchInput");
    55     this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar");
    55     this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar");
    56     
    56     
    57     // handle events
    57     // handle events
    58     this.bindPopcorn("play","playButtonUpdater");
    58     this.bindPopcorn("play","playButtonUpdater");
    59     this.bindPopcorn("pause","playButtonUpdater");
    59     this.bindPopcorn("pause","playButtonUpdater");
    65     this.bindPopcorn("IriSP.search.triggeredSearch","triggeredSearch");
    65     this.bindPopcorn("IriSP.search.triggeredSearch","triggeredSearch");
    66     
    66     
    67     // handle clicks
    67     // handle clicks
    68     this.$playButton.click(this.functionWrapper("playHandler"));
    68     this.$playButton.click(this.functionWrapper("playHandler"));
    69     
    69     
    70     this.$.find(".Ldt-CtrlAnnotate").click(function() {
    70     this.$.find(".Ldt-Ctrl-Annotate").click(function() {
    71         _this.player.popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked");
    71         _this.player.popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked");
    72     });
    72     });
    73     this.$.find(".Ldt-CtrlSearch").click(this.functionWrapper("searchButtonHandler"));
    73     this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler"));
    74     
    74     
    75     this.$searchInput.keyup(this.functionWrapper("searchHandler") );
    75     this.$searchInput.keyup(this.functionWrapper("searchHandler") );
    76   
    76   
    77 	var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control");
    77 	var _volctrl = this.$.find(".Ldt-Ctrl-Volume-Control");
    78     this.$.find('.Ldt-CtrlSound')
    78     this.$.find('.Ldt-Ctrl-Sound')
    79         .click(this.functionWrapper("muteHandler"))
    79         .click(this.functionWrapper("muteHandler"))
    80         .mouseover(function() {
    80         .mouseover(function() {
    81             _volctrl.show();
    81             _volctrl.show();
    82         })
    82         })
    83         .mouseout(function() {
    83         .mouseout(function() {
   122     var _totalTime = this.source.getDuration(),
   122     var _totalTime = this.source.getDuration(),
   123         _elapsedTime = new IriSP.Model.Time();
   123         _elapsedTime = new IriSP.Model.Time();
   124         
   124         
   125     _elapsedTime.setSeconds(_curTime);
   125     _elapsedTime.setSeconds(_curTime);
   126   
   126   
   127     this.$.find(".Ldt-ElapsedTime").html(_elapsedTime.toString());
   127     this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_elapsedTime.toString());
   128     this.$.find(".Ldt-TotalTime").html(_totalTime.toString());
   128     this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString());
   129     this._previousSecond = _curTime;
   129     this._previousSecond = _curTime;
   130 };
   130 };
   131 
   131 
   132 /* update the icon of the button - separate function from playHandler
   132 /* update the icon of the button - separate function from playHandler
   133    because in some cases (for instance, when the user directly clicks on
   133    because in some cases (for instance, when the user directly clicks on
   139   
   139   
   140     if (status) {
   140     if (status) {
   141     /* the background sprite is changed by adding/removing the correct classes */
   141     /* the background sprite is changed by adding/removing the correct classes */
   142         this.$playButton
   142         this.$playButton
   143             .attr("title", IriSP.i18n.getMessage('play'))
   143             .attr("title", IriSP.i18n.getMessage('play'))
   144             .removeClass("Ldt-CtrlPlay-PauseState")
   144             .removeClass("Ldt-Ctrl-Play-PauseState")
   145             .addClass("Ldt-CtrlPlay-PlayState");
   145             .addClass("Ldt-Ctrl-Play-PlayState");
   146     } else {
   146     } else {
   147         this.$playButton
   147         this.$playButton
   148             .attr("title", IriSP.i18n.getMessage('pause'))
   148             .attr("title", IriSP.i18n.getMessage('pause'))
   149             .removeClass("Ldt-CtrlPlay-PlayState")
   149             .removeClass("Ldt-Ctrl-Play-PlayState")
   150             .addClass("Ldt-CtrlPlay-PauseState");
   150             .addClass("Ldt-Ctrl-Play-PauseState");
   151     }
   151     }
   152 };
   152 };
   153 
   153 
   154 
   154 
   155 IriSP.PlayerWidget.prototype.playHandler = function() {
   155 IriSP.PlayerWidget.prototype.playHandler = function() {
   171     var _muted = this.player.popcorn.muted(),
   171     var _muted = this.player.popcorn.muted(),
   172         _vol = this.player.popcorn.volume();
   172         _vol = this.player.popcorn.volume();
   173     if (_vol === false) {
   173     if (_vol === false) {
   174         _vol = .5;
   174         _vol = .5;
   175     }
   175     }
   176     var _soundCtl = this.$.find(".Ldt-CtrlSound");
   176     var _soundCtl = this.$.find(".Ldt-Ctrl-Sound");
   177     _soundCtl.removeClass("Ldt-CtrlSound-Mute Ldt-CtrlSound-Half Ldt-CtrlSound-Full");
   177     _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full");
   178     if (_muted) {        
   178     if (_muted) {        
   179         _soundCtl.attr("title", IriSP.i18n.getMessage('unmute'))
   179         _soundCtl.attr("title", IriSP.i18n.getMessage('unmute'))
   180             .addClass("Ldt-CtrlSound-Mute");    
   180             .addClass("Ldt-Ctrl-Sound-Mute");    
   181     } else {
   181     } else {
   182         _soundCtl.attr("title", IriSP.i18n.getMessage('mute'))
   182         _soundCtl.attr("title", IriSP.i18n.getMessage('mute'))
   183             .addClass(_vol < .5 ? "Ldt-CtrlSound-Half" : "Ldt-CtrlSound-Full" )
   183             .addClass(_vol < .5 ? "Ldt-Ctrl-Sound-Half" : "Ldt-Ctrl-Sound-Full" )
   184     }
   184     }
   185     this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol);
   185     this.$volumeBar.slider("value", _muted ? 0 : 100 * _vol);
   186 };
   186 };
   187 
   187 
   188 IriSP.PlayerWidget.prototype.showSearchBlock = function() {
   188 IriSP.PlayerWidget.prototype.showSearchBlock = function() {
   211     this.player.popcorn.trigger("IriSP.search.closed");
   211     this.player.popcorn.trigger("IriSP.search.closed");
   212 };
   212 };
   213 
   213 
   214 /** react to clicks on the search button */
   214 /** react to clicks on the search button */
   215 IriSP.PlayerWidget.prototype.searchButtonHandler = function() {
   215 IriSP.PlayerWidget.prototype.searchButtonHandler = function() {
   216     
       
   217     if ( this.$searchBlock.is(":hidden") ) {
   216     if ( this.$searchBlock.is(":hidden") ) {
   218         this.showSearchBlock();
   217         this.showSearchBlock();
   219         this.$searchInput.val(this._searchLastValue);      
   218         this.$searchInput.val(this._searchLastValue);      
   220         this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
   219         this.player.popcorn.trigger("IriSP.search", this._searchLastValue); // trigger the search to make it more natural.
   221 	} else {
   220 	} else {