src/js/widgets/playerWidget.js
branchpopcorn-port
changeset 839 4357aac4eb19
parent 838 03b03865eb9b
child 842 4ae2247a59f4
equal deleted inserted replaced
838:03b03865eb9b 839:4357aac4eb19
    10             "mute": "Mute",
    10             "mute": "Mute",
    11             "unmute": "Unmute",
    11             "unmute": "Unmute",
    12             "annotate": "Annotate",
    12             "annotate": "Annotate",
    13             "search": "Search",
    13             "search": "Search",
    14             "elapsed_time": "Elapsed time",
    14             "elapsed_time": "Elapsed time",
    15             "total_time": "Total time"
    15             "total_time": "Total time",
       
    16             "volume": "Volume",
       
    17             "volume_control": "Volume control"
    16         },
    18         },
    17         "fr": {
    19         "fr": {
    18             "play_pause": "Lecture/Pause",
    20             "play_pause": "Lecture/Pause",
    19             "mute_unmute": "Couper/Activer le son",
    21             "mute_unmute": "Couper/Activer le son",
    20             "play": "Lecture",
    22             "play": "Lecture",
    22             "mute": "Couper le son",
    24             "mute": "Couper le son",
    23             "unmute": "Activer le son",
    25             "unmute": "Activer le son",
    24             "annotate": "Annoter",
    26             "annotate": "Annoter",
    25             "search": "Rechercher",
    27             "search": "Rechercher",
    26             "elapsed_time": "Durée écoulée",
    28             "elapsed_time": "Durée écoulée",
    27             "total_time": "Durée totale"
    29             "total_time": "Durée totale",
       
    30             "volume": "Niveau sonore",
       
    31             "volume_control": "Réglage du niveau sonore"
    28         }
    32         }
    29     }
    33     }
    30 );
    34 );
    31 
    35 
    32 
    36 
    52     
    56     
    53   // handle clicks by the user on the video.
    57   // handle clicks by the user on the video.
    54   this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
    58   this._Popcorn.listen("play", IriSP.wrap(this, this.playButtonUpdater));
    55   this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
    59   this._Popcorn.listen("pause", IriSP.wrap(this, this.playButtonUpdater));
    56   
    60   
    57   this._Popcorn.listen("volumechange", IriSP.wrap(this, this.muteButtonUpdater));
    61   this._Popcorn.listen("volumechange", IriSP.wrap(this, this.volumeUpdater));
    58 
    62 
    59   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater));  
    63   this._Popcorn.listen("timeupdate", IriSP.wrap(this, this.timeDisplayUpdater));  
    60   // update the time display for the first time.
    64   // update the time display for the first time.
    61   this._Popcorn.listen("loadedmetadata", IriSP.wrap(this, this.timeDisplayUpdater));
    65   this._Popcorn.listen("loadedmetadata", IriSP.wrap(this, this.timeDisplayUpdater));
    62   
    66   
    68   this.selector.find(".Ldt-CtrlPlay").click(function() { self.playHandler.call(self); });
    72   this.selector.find(".Ldt-CtrlPlay").click(function() { self.playHandler.call(self); });
    69   this.selector.find(".Ldt-CtrlAnnotate").click(function() 
    73   this.selector.find(".Ldt-CtrlAnnotate").click(function() 
    70                                             { self._Popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); });
    74                                             { self._Popcorn.trigger("IriSP.PlayerWidget.AnnotateButton.clicked"); });
    71   this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); });
    75   this.selector.find(".Ldt-CtrlSearch").click(function() { self.searchButtonHandler.call(self); });
    72   
    76   
    73   this.selector.find('.Ldt-CtrlSound').click(function() { self.muteHandler.call(self); } );
    77 	var _volctrl = this.selector.find(".Ldt-Ctrl-Volume-Control");
       
    78     this.selector.find('.Ldt-CtrlSound')
       
    79         .click(function() { self.muteHandler.call(self); } )
       
    80         .mouseover(function() {
       
    81             _volctrl.show();
       
    82         })
       
    83         .mouseout(function() {
       
    84             _volctrl.hide();
       
    85         });
       
    86     _volctrl.mouseover(function() {
       
    87         _volctrl.show();
       
    88     }).mouseout(function() {
       
    89         _volctrl.hide();
       
    90     });
    74   
    91   
    75   /*
    92   /*
    76   var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position();
    93   var searchButtonPos = this.selector.find(".Ldt-CtrlSearch").position();
    77   var searchBox = Mustache.to_html(IriSP.search_template, {margin_left : searchButtonPos.left + "px"});
    94   var searchBox = Mustache.to_html(IriSP.search_template, {margin_left : searchButtonPos.left + "px"});
    78   this.selector.find(".Ldt-CtrlSearch").after(searchBox);
    95   this.selector.find(".Ldt-CtrlSearch").after(searchBox);
    79   */
    96   */
    80   
    97   
    81   // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget)
    98   // trigger an IriSP.PlayerWidget.MouseOver to the widgets that are interested (i.e : sliderWidget)
    82   this.selector.hover(function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOver"); }, 
    99   this.selector.hover(function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOver"); }, 
    83                       function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOut"); });
   100                       function() { self._Popcorn.trigger("IriSP.PlayerWidget.MouseOut"); });
       
   101   this.selector.find(".Ldt-Ctrl-Volume-Cursor").draggable({
       
   102       axis: "x",
       
   103       drag: function(event, ui) {
       
   104           var _vol = Math.max(0, Math.min( 1, ui.position.left / (ui.helper.parent().width() - ui.helper.outerWidth())));
       
   105           ui.helper.attr("title",IriSP.i18n.getMessage('volume')+': ' + Math.floor(100*_vol) + '%');
       
   106           self._Popcorn.volume(_vol);
       
   107       },
       
   108       containment: "parent"
       
   109   });
    84  
   110  
    85   this.muteButtonUpdater(); /* some player - jwplayer notable - save the state of the mute button between sessions */
   111  setTimeout(function() {
       
   112      self.volumeUpdater();
       
   113  }, 1000); /* some player - jwplayer notable - save the state of the mute button between sessions */
    86 };
   114 };
    87 
   115 
    88 /* Update the elasped time div */
   116 /* Update the elasped time div */
    89 IriSP.PlayerWidget.prototype.timeDisplayUpdater = function() {
   117 IriSP.PlayerWidget.prototype.timeDisplayUpdater = function() {
    90   
   118   
   137     this._Popcorn.pause();
   165     this._Popcorn.pause();
   138   }  
   166   }  
   139 };
   167 };
   140 
   168 
   141 IriSP.PlayerWidget.prototype.muteHandler = function() {
   169 IriSP.PlayerWidget.prototype.muteHandler = function() {
   142   if (!this._Popcorn.muted()) {    
   170   this._Popcorn.mute(!this._Popcorn.muted());
   143       this._Popcorn.mute(true);
   171 };
       
   172 
       
   173 IriSP.PlayerWidget.prototype.volumeUpdater = function() {
       
   174     var _muted = this._Popcorn.muted(),
       
   175         _vol = this._Popcorn.volume();
       
   176     if (_vol === false) {
       
   177         _vol = .5;
       
   178     }
       
   179     var _soundCtl = this.selector.find(".Ldt-CtrlSound");
       
   180     _soundCtl.removeClass("Ldt-CtrlSound-Mute Ldt-CtrlSound-Half Ldt-CtrlSound-Full");
       
   181     if (_muted) {        
       
   182         _soundCtl.attr("title", IriSP.i18n.getMessage('unmute'))
       
   183             .addClass("Ldt-CtrlSound-Mute");    
   144     } else {
   184     } else {
   145       this._Popcorn.mute(false);
   185         _soundCtl.attr("title", IriSP.i18n.getMessage('mute'))
       
   186             .addClass(_vol < .5 ? "Ldt-CtrlSound-Half" : "Ldt-CtrlSound-Full" )
   146     }
   187     }
   147 };
   188     var _cursor = this.selector.find(".Ldt-Ctrl-Volume-Cursor");
   148 
   189     _cursor.css({
   149 IriSP.PlayerWidget.prototype.muteButtonUpdater = function() {
   190         "left": ( _muted ? 0 : Math.floor(_vol * (_cursor.parent().width() - _cursor.outerWidth())) ) + "px"
   150   var status = this._Popcorn.media.muted;
   191     })
   151   
       
   152   if ( status == true ){        
       
   153     this.selector.find(".Ldt-CtrlSound").attr("title", IriSP.i18n.getMessage('unmute'));
       
   154     this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-MuteState").addClass("Ldt-CtrlSound-SoundState");    
       
   155   } else {
       
   156     this.selector.find(".Ldt-CtrlSound").attr("title", IriSP.i18n.getMessage('mute'));
       
   157     this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-SoundState").addClass("Ldt-CtrlSound-MuteState");
       
   158   }  
       
   159 
       
   160   return;
       
   161 };
   192 };
   162 
   193 
   163 IriSP.PlayerWidget.prototype.showSearchBlock = function() {
   194 IriSP.PlayerWidget.prototype.showSearchBlock = function() {
   164   var self = this;
   195   var self = this;
   165   
   196