85 this.$searchBlock = this.$.find(".Ldt-Ctrl-Search"); |
85 this.$searchBlock = this.$.find(".Ldt-Ctrl-Search"); |
86 this.$searchInput = this.$.find(".Ldt-Ctrl-SearchInput"); |
86 this.$searchInput = this.$.find(".Ldt-Ctrl-SearchInput"); |
87 this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar"); |
87 this.$volumeBar = this.$.find(".Ldt-Ctrl-Volume-Bar"); |
88 |
88 |
89 // handle events |
89 // handle events |
90 this.bindPopcorn("play","playButtonUpdater"); |
90 this.onMediaEvent("play","playButtonUpdater"); |
91 this.bindPopcorn("pause","playButtonUpdater"); |
91 this.onMediaEvent("pause","playButtonUpdater"); |
92 this.bindPopcorn("volumechange","volumeUpdater"); |
92 this.onMediaEvent("volumechange","volumeUpdater"); |
93 this.bindPopcorn("timeupdate","timeDisplayUpdater"); |
93 this.onMediaEvent("timeupdate","timeDisplayUpdater"); |
94 this.bindPopcorn("loadedmetadata","timeDisplayUpdater"); |
94 this.onMediaEvent("loadedmetadata","volumeUpdater"); |
95 this.bindPopcorn("loadedmetadata","volumeUpdater"); |
95 this.onMdpEvent("search.matchFound","searchMatch"); |
96 this.bindPopcorn("IriSP.search.matchFound","searchMatch"); |
96 this.onMdpEvent("search.noMatchFound","searchNoMatch"); |
97 this.bindPopcorn("IriSP.search.noMatchFound","searchNoMatch"); |
97 this.onMdpEvent("search.triggeredSearch","triggeredSearch"); |
98 this.bindPopcorn("IriSP.search.triggeredSearch","triggeredSearch"); |
98 this.onMdpEvent("search.cleared","hideSearchBlock"); |
99 this.bindPopcorn("IriSP.search.cleared","hideSearchBlock"); |
|
100 |
99 |
101 // handle clicks |
100 // handle clicks |
102 this.$playButton.click(this.functionWrapper("playHandler")); |
101 this.$playButton.click(this.functionWrapper("playHandler")); |
103 |
102 |
104 this.$.find(".Ldt-Ctrl-Annotate").click(function() { |
103 this.$.find(".Ldt-Ctrl-Annotate").click(function() { |
105 _this.player.popcorn.trigger("IriSP.CreateAnnotation.toggle"); |
104 _this.player.trigger("CreateAnnotation.toggle"); |
106 }); |
105 }); |
107 this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler")); |
106 this.$.find(".Ldt-Ctrl-SearchBtn").click(this.functionWrapper("searchButtonHandler")); |
108 |
107 |
109 this.$searchInput.keyup(this.functionWrapper("searchHandler")); |
108 this.$searchInput.keyup(this.functionWrapper("searchHandler")); |
110 |
109 |
141 |
140 |
142 // Allow Volume Cursor Dragging |
141 // Allow Volume Cursor Dragging |
143 this.$volumeBar.slider({ |
142 this.$volumeBar.slider({ |
144 slide: function(event, ui) { |
143 slide: function(event, ui) { |
145 _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%'); |
144 _this.$volumeBar.attr("title",_this.l10n.volume+': ' + ui.value + '%'); |
146 _this.player.popcorn.volume(ui.value / 100); |
145 _this.media.setVolume(ui.value / 100); |
147 }, |
146 }, |
148 stop: this.functionWrapper("volumeUpdater") |
147 stop: this.functionWrapper("volumeUpdater") |
149 }); |
148 }); |
150 |
149 |
151 // trigger an IriSP.Player.MouseOver to the widgets that are interested (i.e : sliderWidget) |
150 // trigger an IriSP.Player.MouseOver to the widgets that are interested (i.e : sliderWidget) |
152 this.$.hover( |
151 this.$.hover( |
153 function() { |
152 function() { |
154 _this.player.popcorn.trigger("IriSP.Player.MouseOver"); |
153 _this.player.trigger("Player.MouseOver"); |
155 }, |
154 }, |
156 function() { |
155 function() { |
157 _this.player.popcorn.trigger("IriSP.Player.MouseOut"); |
156 _this.player.trigger("Player.MouseOut"); |
158 }); |
157 }); |
|
158 |
|
159 this.timeDisplayUpdater(0); |
159 /* some players - including jwplayer - save the state of the mute button between sessions */ |
160 /* some players - including jwplayer - save the state of the mute button between sessions */ |
160 |
161 //TODO: MOVE TO THE PLAYER/ |
161 window.setTimeout(this.functionWrapper("volumeUpdater"), 1000); |
162 window.setTimeout(this.functionWrapper("volumeUpdater"), 1000); |
162 |
163 |
163 }; |
164 }; |
164 |
165 |
165 /* Update the elasped time div */ |
166 /* Update the elasped time div */ |
166 IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function() { |
167 IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) { |
167 var _curTime = this.player.popcorn.roundTime(); |
|
168 if (typeof this._previousSecond !== "undefined" && _curTime === this._previousSecond) { |
|
169 return; |
|
170 } |
|
171 |
168 |
172 // we get it at each call because it may change. |
169 // we get it at each call because it may change. |
173 var _totalTime = this.source.getDuration(), |
170 var _totalTime = this.media.duration; |
174 _elapsedTime = new IriSP.Model.Time(); |
|
175 |
171 |
176 _elapsedTime.setSeconds(_curTime); |
172 this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_time.toString()); |
177 |
|
178 this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_elapsedTime.toString()); |
|
179 this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString()); |
173 this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString()); |
180 this._previousSecond = _curTime; |
|
181 }; |
174 }; |
182 |
175 |
183 /* update the icon of the button - separate function from playHandler |
176 /* update the icon of the button - separate function from playHandler |
184 because in some cases (for instance, when the user directly clicks on |
177 because in some cases (for instance, when the user directly clicks on |
185 the jwplayer window) we have to change the icon without playing/pausing |
178 the jwplayer window) we have to change the icon without playing/pausing |
186 */ |
179 */ |
187 IriSP.Widgets.Controller.prototype.playButtonUpdater = function() { |
180 IriSP.Widgets.Controller.prototype.playButtonUpdater = function() { |
188 |
181 if (this.media.getPaused()) { |
189 var status = this.player.popcorn.media.paused; |
|
190 |
|
191 if (status) { |
|
192 /* the background sprite is changed by adding/removing the correct classes */ |
182 /* the background sprite is changed by adding/removing the correct classes */ |
193 this.$playButton |
183 this.$playButton |
194 .attr("title", this.l10n.play) |
184 .attr("title", this.l10n.play) |
195 .removeClass("Ldt-Ctrl-Play-PauseState") |
185 .removeClass("Ldt-Ctrl-Play-PauseState") |
196 .addClass("Ldt-Ctrl-Play-PlayState"); |
186 .addClass("Ldt-Ctrl-Play-PlayState"); |
202 } |
192 } |
203 }; |
193 }; |
204 |
194 |
205 |
195 |
206 IriSP.Widgets.Controller.prototype.playHandler = function() { |
196 IriSP.Widgets.Controller.prototype.playHandler = function() { |
207 |
197 if (this.media.getPaused()) { |
208 var status = this.player.popcorn.media.paused; |
198 this.media.play(); |
209 |
|
210 if (status) { |
|
211 this.player.popcorn.play(); |
|
212 } else { |
199 } else { |
213 this.player.popcorn.pause(); |
200 this.media.pause(); |
214 } |
201 } |
215 }; |
202 }; |
216 |
203 |
217 IriSP.Widgets.Controller.prototype.muteHandler = function() { |
204 IriSP.Widgets.Controller.prototype.muteHandler = function() { |
218 this.player.popcorn.muted(!this.player.popcorn.muted()); |
205 if (this.media.getMuted()) { |
|
206 this.media.unmute(); |
|
207 } else { |
|
208 this.media.mute(); |
|
209 } |
219 }; |
210 }; |
220 |
211 |
221 IriSP.Widgets.Controller.prototype.volumeUpdater = function() { |
212 IriSP.Widgets.Controller.prototype.volumeUpdater = function() { |
222 var _muted = this.player.popcorn.muted(), |
213 var _muted = this.media.getMuted(), |
223 _vol = this.player.popcorn.volume(); |
214 _vol = this.media.getVolume(); |
224 if (_vol === false) { |
215 if (_vol === false) { |
225 _vol = .5; |
216 _vol = .5; |
226 } |
217 } |
227 var _soundCtl = this.$.find(".Ldt-Ctrl-Sound"); |
218 var _soundCtl = this.$.find(".Ldt-Ctrl-Sound"); |
228 _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full"); |
219 _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full"); |
247 // search field to become green when there's a match, we need a |
238 // search field to become green when there's a match, we need a |
248 // variable to remember that we had one. |
239 // variable to remember that we had one. |
249 this._positiveMatch = false; |
240 this._positiveMatch = false; |
250 |
241 |
251 // tell the world the field is open |
242 // tell the world the field is open |
252 this.player.popcorn.trigger("IriSP.search.open"); |
243 this.player.trigger("search.open"); |
253 }; |
244 }; |
254 |
245 |
255 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
246 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
256 this.$searchBlock.animate( { width: 0 }, 200); |
247 this.$searchBlock.animate( { width: 0 }, 200); |
257 this._positiveMatch = false; |
248 this._positiveMatch = false; |
258 this.player.popcorn.trigger("IriSP.search.closed"); |
249 this.player.trigger("search.closed"); |
259 }; |
250 }; |
260 |
251 |
261 /** react to clicks on the search button */ |
252 /** react to clicks on the search button */ |
262 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
253 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
263 if ( !this.$searchBlock.width() ) { |
254 if ( !this.$searchBlock.width() ) { |
264 this.showSearchBlock(); |
255 this.showSearchBlock(); |
265 var _val = this.$searchInput.val(); |
256 var _val = this.$searchInput.val(); |
266 if (_val) { |
257 if (_val) { |
267 this.player.popcorn.trigger("IriSP.search", _val); // trigger the search to make it more natural. |
258 this.player.trigger("search", _val); // trigger the search to make it more natural. |
268 } |
259 } |
269 } else { |
260 } else { |
270 this.hideSearchBlock(); |
261 this.hideSearchBlock(); |
271 } |
262 } |
272 }; |
263 }; |
282 this._positiveMatch = false; |
273 this._positiveMatch = false; |
283 |
274 |
284 // do nothing if the search field is empty, instead of highlighting everything. |
275 // do nothing if the search field is empty, instead of highlighting everything. |
285 if (_val !== this.lastSearchValue) { |
276 if (_val !== this.lastSearchValue) { |
286 if (_val) { |
277 if (_val) { |
287 this.player.popcorn.trigger("IriSP.search", _val); |
278 this.player.trigger("search", _val); |
288 } else { |
279 } else { |
289 this.player.popcorn.trigger("IriSP.search.cleared"); |
280 this.player.trigger("search.cleared"); |
290 this.$searchInput.css('background-color',''); |
281 this.$searchInput.css('background-color',''); |
291 } |
282 } |
292 } |
283 } |
293 this.lastSearchValue = _val; |
284 this.lastSearchValue = _val; |
294 }; |
285 }; |
312 /** react to an IriSP.Player.triggeredSearch - that is, when |
303 /** react to an IriSP.Player.triggeredSearch - that is, when |
313 a widget ask the.Player to do a search on his behalf */ |
304 a widget ask the.Player to do a search on his behalf */ |
314 IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) { |
305 IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) { |
315 this.showSearchBlock(); |
306 this.showSearchBlock(); |
316 this.$searchInput.attr('value', searchString); |
307 this.$searchInput.attr('value', searchString); |
317 this.player.popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural. |
308 this.player.trigger("search", searchString); // trigger the search to make it more natural. |
318 }; |
309 }; |
319 |
310 |
320 |
311 |