web/res/metadataplayer/Controller.js
changeset 719 d0d3a9369f84
parent 694 e9400c80e1e4
child 955 5171f8825985
equal deleted inserted replaced
718:930e6ee2dca1 719:d0d3a9369f84
    54         mute: "Mute",
    54         mute: "Mute",
    55         unmute: "Unmute",
    55         unmute: "Unmute",
    56         annotate: "Annotate",
    56         annotate: "Annotate",
    57         search: "Search",
    57         search: "Search",
    58         elapsed_time: "Elapsed time",
    58         elapsed_time: "Elapsed time",
    59         total_time: "Total time",
    59         total_time: "Total duration",
    60         volume: "Volume",
    60         volume: "Volume",
    61         volume_control: "Volume control"
    61         volume_control: "Volume control"
    62     },
    62     },
    63     fr: {
    63     fr: {
    64         play_pause: "Lecture/Pause",
    64         play_pause: "Lecture/Pause",
    67         pause: "Pause",
    67         pause: "Pause",
    68         mute: "Couper le son",
    68         mute: "Couper le son",
    69         unmute: "Activer le son",
    69         unmute: "Activer le son",
    70         annotate: "Annoter",
    70         annotate: "Annoter",
    71         search: "Rechercher",
    71         search: "Rechercher",
    72         elapsed_time: "Durée écoulée",
    72         elapsed_time: "Temps écoulé",
    73         total_time: "Durée totale",
    73         total_time: "Durée totale",
    74         volume: "Niveau sonore",
    74         volume: "Niveau sonore",
    75         volume_control: "Réglage du niveau sonore"
    75         volume_control: "Réglage du niveau sonore"
    76     }
    76     }
    77 };
    77 };
    90     this.onMediaEvent("play","playButtonUpdater");
    90     this.onMediaEvent("play","playButtonUpdater");
    91     this.onMediaEvent("pause","playButtonUpdater");
    91     this.onMediaEvent("pause","playButtonUpdater");
    92     this.onMediaEvent("volumechange","volumeUpdater");
    92     this.onMediaEvent("volumechange","volumeUpdater");
    93     this.onMediaEvent("timeupdate","timeDisplayUpdater");
    93     this.onMediaEvent("timeupdate","timeDisplayUpdater");
    94     this.onMediaEvent("loadedmetadata","volumeUpdater");
    94     this.onMediaEvent("loadedmetadata","volumeUpdater");
    95     this.onMdpEvent("search.matchFound","searchMatch");
       
    96     this.onMdpEvent("search.noMatchFound","searchNoMatch");
       
    97     this.onMdpEvent("search.triggeredSearch","triggeredSearch");
       
    98     this.onMdpEvent("search.cleared","hideSearchBlock");
       
    99     
    95     
   100     // handle clicks
    96     // handle clicks
   101     this.$playButton.click(this.functionWrapper("playHandler"));
    97     this.$playButton.click(this.functionWrapper("playHandler"));
   102     
    98     
   103     this.$.find(".Ldt-Ctrl-Annotate").click(function() {
    99     this.$.find(".Ldt-Ctrl-Annotate").click(function() {
   155         function() {
   151         function() {
   156             _this.player.trigger("Player.MouseOut");
   152             _this.player.trigger("Player.MouseOut");
   157         });
   153         });
   158     
   154     
   159     this.timeDisplayUpdater(new IriSP.Model.Time(0));
   155     this.timeDisplayUpdater(new IriSP.Model.Time(0));
   160     /* some players - including jwplayer - save the state of the mute button between sessions */
   156     
   161    //TODO: MOVE TO THE PLAYER/
   157     var annotations = this.source.getAnnotations();
   162     window.setTimeout(this.functionWrapper("volumeUpdater"), 1000);
   158     annotations.on("search", function(_text) {
       
   159         _this.$searchInput.val(_text);
       
   160         _this.showSearchBlock();
       
   161     });
       
   162     annotations.on("found", function(_text) {
       
   163         _this.$searchInput.css('background-color','#e1ffe1');
       
   164     });
       
   165     annotations.on("not-found", function(_text) {
       
   166         _this.$searchInput.css('background-color', "#d62e3a");
       
   167     });
       
   168     annotations.on("search-cleared", function() {
       
   169         _this.hideSearchBlock();
       
   170     });
   163    
   171    
   164 };
   172 };
   165 
   173 
   166 /* Update the elasped time div */
   174 /* Update the elasped time div */
   167 IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) {
   175 IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) {
   199         this.media.pause();
   207         this.media.pause();
   200     }  
   208     }  
   201 };
   209 };
   202 
   210 
   203 IriSP.Widgets.Controller.prototype.muteHandler = function() {
   211 IriSP.Widgets.Controller.prototype.muteHandler = function() {
   204     if (this.media.getMuted()) {
   212     this.media.setMuted(!this.media.getMuted());
   205         this.media.unmute();
       
   206     } else {
       
   207         this.media.mute();
       
   208     }
       
   209 };
   213 };
   210 
   214 
   211 IriSP.Widgets.Controller.prototype.volumeUpdater = function() {
   215 IriSP.Widgets.Controller.prototype.volumeUpdater = function() {
   212     var _muted = this.media.getMuted(),
   216     var _muted = this.media.getMuted(),
   213         _vol = this.media.getVolume();
   217         _vol = this.media.getVolume();
   227 };
   231 };
   228 
   232 
   229 IriSP.Widgets.Controller.prototype.showSearchBlock = function() {
   233 IriSP.Widgets.Controller.prototype.showSearchBlock = function() {
   230     this.$searchBlock.animate({ width:"160px" }, 200);
   234     this.$searchBlock.animate({ width:"160px" }, 200);
   231     this.$searchInput.css('background-color','#fff');
   235     this.$searchInput.css('background-color','#fff');
   232    
       
   233     this.$searchInput.focus();
   236     this.$searchInput.focus();
   234     
       
   235     // we need this variable because some widgets can find a match in
       
   236     // their data while at the same time others don't. As we want the
       
   237     // search field to become green when there's a match, we need a 
       
   238     // variable to remember that we had one.
       
   239     this._positiveMatch = false;
       
   240 
       
   241     // tell the world the field is open
       
   242     this.player.trigger("search.open");
       
   243 };
   237 };
   244 
   238 
   245 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() {
   239 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() {
   246     this.$searchBlock.animate( { width: 0 }, 200);
   240     this.$searchBlock.animate( { width: 0 }, 200);
   247     this._positiveMatch = false;
       
   248     this.player.trigger("search.closed");
       
   249 };
   241 };
   250 
   242 
   251 /** react to clicks on the search button */
   243 /** react to clicks on the search button */
   252 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() {
   244 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() {
   253     if ( !this.$searchBlock.width() ) {
   245     if ( !this.$searchBlock.width() ) {
   254         this.showSearchBlock();
   246         this.showSearchBlock();
   255         var _val = this.$searchInput.val();
   247         var _val = this.$searchInput.val();
   256         if (_val) {
   248         if (_val) {
   257             this.player.trigger("search", _val); // trigger the search to make it more natural.
   249             this.source.getAnnotations().search(_val);
   258         }
   250         }
   259 	} else {
   251 	} else {
   260         this.hideSearchBlock();
   252         this.hideSearchBlock();
   261     }
   253     }
   262 };
   254 };
   272     this._positiveMatch = false;
   264     this._positiveMatch = false;
   273     
   265     
   274     // do nothing if the search field is empty, instead of highlighting everything.
   266     // do nothing if the search field is empty, instead of highlighting everything.
   275     if (_val !== this.lastSearchValue) {
   267     if (_val !== this.lastSearchValue) {
   276         if (_val) {
   268         if (_val) {
   277             this.player.trigger("search", _val);
   269             this.source.getAnnotations().search(_val);
   278         } else {
   270         } else {
   279             this.player.trigger("search.cleared");
   271             this.source.getAnnotations().trigger("clear-search");
   280             this.$searchInput.css('background-color','');
   272             this.$searchInput.css('background-color','');
   281         }
   273         }
   282     }
   274     }
   283     this.lastSearchValue = _val;
   275     this.lastSearchValue = _val;
   284 };
   276 };
   285 
   277 
   286 /**
       
   287   handler for the IriSP.search.found message, which is sent by some views when they
       
   288   highlight a match.
       
   289 */
       
   290 IriSP.Widgets.Controller.prototype.searchMatch = function() {
       
   291     this._positiveMatch = true;
       
   292     this.$searchInput.css('background-color','#e1ffe1');
       
   293 };
       
   294 
       
   295 /** the same, except that no value could be found */
       
   296 IriSP.Widgets.Controller.prototype.searchNoMatch = function() {
       
   297     if (this._positiveMatch !== true) {
       
   298         this.$searchInput.css('background-color', "#d62e3a");
       
   299     }
       
   300 };
       
   301 
       
   302 /** react to an IriSP.Player.triggeredSearch - that is, when
       
   303     a widget ask the.Player to do a search on his behalf */
       
   304 IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) {
       
   305     this.showSearchBlock();
       
   306     this.$searchInput.attr('value', searchString);      
       
   307     this.player.trigger("search", searchString); // trigger the search to make it more natural.
       
   308 };
       
   309 
       
   310