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(new IriSP.Model.Time(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(); |
171 this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_time.toString()); |
175 |
|
176 _elapsedTime.setSeconds(_curTime); |
|
177 |
|
178 this.$.find(".Ldt-Ctrl-Time-Elapsed").html(_elapsedTime.toString()); |
|
179 this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString()); |
172 this.$.find(".Ldt-Ctrl-Time-Total").html(_totalTime.toString()); |
180 this._previousSecond = _curTime; |
|
181 }; |
173 }; |
182 |
174 |
183 /* update the icon of the button - separate function from playHandler |
175 /* update the icon of the button - separate function from playHandler |
184 because in some cases (for instance, when the user directly clicks on |
176 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 |
177 the jwplayer window) we have to change the icon without playing/pausing |
186 */ |
178 */ |
187 IriSP.Widgets.Controller.prototype.playButtonUpdater = function() { |
179 IriSP.Widgets.Controller.prototype.playButtonUpdater = function() { |
188 |
180 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 */ |
181 /* the background sprite is changed by adding/removing the correct classes */ |
193 this.$playButton |
182 this.$playButton |
194 .attr("title", this.l10n.play) |
183 .attr("title", this.l10n.play) |
195 .removeClass("Ldt-Ctrl-Play-PauseState") |
184 .removeClass("Ldt-Ctrl-Play-PauseState") |
196 .addClass("Ldt-Ctrl-Play-PlayState"); |
185 .addClass("Ldt-Ctrl-Play-PlayState"); |
202 } |
191 } |
203 }; |
192 }; |
204 |
193 |
205 |
194 |
206 IriSP.Widgets.Controller.prototype.playHandler = function() { |
195 IriSP.Widgets.Controller.prototype.playHandler = function() { |
207 |
196 if (this.media.getPaused()) { |
208 var status = this.player.popcorn.media.paused; |
197 this.media.play(); |
209 |
|
210 if (status) { |
|
211 this.player.popcorn.play(); |
|
212 } else { |
198 } else { |
213 this.player.popcorn.pause(); |
199 this.media.pause(); |
214 } |
200 } |
215 }; |
201 }; |
216 |
202 |
217 IriSP.Widgets.Controller.prototype.muteHandler = function() { |
203 IriSP.Widgets.Controller.prototype.muteHandler = function() { |
218 this.player.popcorn.muted(!this.player.popcorn.muted()); |
204 if (this.media.getMuted()) { |
|
205 this.media.unmute(); |
|
206 } else { |
|
207 this.media.mute(); |
|
208 } |
219 }; |
209 }; |
220 |
210 |
221 IriSP.Widgets.Controller.prototype.volumeUpdater = function() { |
211 IriSP.Widgets.Controller.prototype.volumeUpdater = function() { |
222 var _muted = this.player.popcorn.muted(), |
212 var _muted = this.media.getMuted(), |
223 _vol = this.player.popcorn.volume(); |
213 _vol = this.media.getVolume(); |
224 if (_vol === false) { |
214 if (_vol === false) { |
225 _vol = .5; |
215 _vol = .5; |
226 } |
216 } |
227 var _soundCtl = this.$.find(".Ldt-Ctrl-Sound"); |
217 var _soundCtl = this.$.find(".Ldt-Ctrl-Sound"); |
228 _soundCtl.removeClass("Ldt-Ctrl-Sound-Mute Ldt-Ctrl-Sound-Half Ldt-Ctrl-Sound-Full"); |
218 _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 |
237 // search field to become green when there's a match, we need a |
248 // variable to remember that we had one. |
238 // variable to remember that we had one. |
249 this._positiveMatch = false; |
239 this._positiveMatch = false; |
250 |
240 |
251 // tell the world the field is open |
241 // tell the world the field is open |
252 this.player.popcorn.trigger("IriSP.search.open"); |
242 this.player.trigger("search.open"); |
253 }; |
243 }; |
254 |
244 |
255 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
245 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
256 this.$searchBlock.animate( { width: 0 }, 200); |
246 this.$searchBlock.animate( { width: 0 }, 200); |
257 this._positiveMatch = false; |
247 this._positiveMatch = false; |
258 this.player.popcorn.trigger("IriSP.search.closed"); |
248 this.player.trigger("search.closed"); |
259 }; |
249 }; |
260 |
250 |
261 /** react to clicks on the search button */ |
251 /** react to clicks on the search button */ |
262 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
252 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
263 if ( !this.$searchBlock.width() ) { |
253 if ( !this.$searchBlock.width() ) { |
264 this.showSearchBlock(); |
254 this.showSearchBlock(); |
265 var _val = this.$searchInput.val(); |
255 var _val = this.$searchInput.val(); |
266 if (_val) { |
256 if (_val) { |
267 this.player.popcorn.trigger("IriSP.search", _val); // trigger the search to make it more natural. |
257 this.player.trigger("search", _val); // trigger the search to make it more natural. |
268 } |
258 } |
269 } else { |
259 } else { |
270 this.hideSearchBlock(); |
260 this.hideSearchBlock(); |
271 } |
261 } |
272 }; |
262 }; |
282 this._positiveMatch = false; |
272 this._positiveMatch = false; |
283 |
273 |
284 // do nothing if the search field is empty, instead of highlighting everything. |
274 // do nothing if the search field is empty, instead of highlighting everything. |
285 if (_val !== this.lastSearchValue) { |
275 if (_val !== this.lastSearchValue) { |
286 if (_val) { |
276 if (_val) { |
287 this.player.popcorn.trigger("IriSP.search", _val); |
277 this.player.trigger("search", _val); |
288 } else { |
278 } else { |
289 this.player.popcorn.trigger("IriSP.search.cleared"); |
279 this.player.trigger("search.cleared"); |
290 this.$searchInput.css('background-color',''); |
280 this.$searchInput.css('background-color',''); |
291 } |
281 } |
292 } |
282 } |
293 this.lastSearchValue = _val; |
283 this.lastSearchValue = _val; |
294 }; |
284 }; |
312 /** react to an IriSP.Player.triggeredSearch - that is, when |
302 /** react to an IriSP.Player.triggeredSearch - that is, when |
313 a widget ask the.Player to do a search on his behalf */ |
303 a widget ask the.Player to do a search on his behalf */ |
314 IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) { |
304 IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) { |
315 this.showSearchBlock(); |
305 this.showSearchBlock(); |
316 this.$searchInput.attr('value', searchString); |
306 this.$searchInput.attr('value', searchString); |
317 this.player.popcorn.trigger("IriSP.search", searchString); // trigger the search to make it more natural. |
307 this.player.trigger("search", searchString); // trigger the search to make it more natural. |
318 }; |
308 }; |
319 |
309 |
320 |
310 |