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)); |
|
156 |
|
157 var annotations = this.source.getAnnotations(); |
|
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 }); |
160 |
171 |
161 }; |
172 }; |
162 |
173 |
163 /* Update the elasped time div */ |
174 /* Update the elasped time div */ |
164 IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) { |
175 IriSP.Widgets.Controller.prototype.timeDisplayUpdater = function(_time) { |
220 }; |
231 }; |
221 |
232 |
222 IriSP.Widgets.Controller.prototype.showSearchBlock = function() { |
233 IriSP.Widgets.Controller.prototype.showSearchBlock = function() { |
223 this.$searchBlock.animate({ width:"160px" }, 200); |
234 this.$searchBlock.animate({ width:"160px" }, 200); |
224 this.$searchInput.css('background-color','#fff'); |
235 this.$searchInput.css('background-color','#fff'); |
225 |
|
226 this.$searchInput.focus(); |
236 this.$searchInput.focus(); |
227 |
|
228 // we need this variable because some widgets can find a match in |
|
229 // their data while at the same time others don't. As we want the |
|
230 // search field to become green when there's a match, we need a |
|
231 // variable to remember that we had one. |
|
232 this._positiveMatch = false; |
|
233 |
|
234 // tell the world the field is open |
|
235 this.player.trigger("search.open"); |
|
236 }; |
237 }; |
237 |
238 |
238 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
239 IriSP.Widgets.Controller.prototype.hideSearchBlock = function() { |
239 this.$searchBlock.animate( { width: 0 }, 200); |
240 this.$searchBlock.animate( { width: 0 }, 200); |
240 this._positiveMatch = false; |
|
241 this.player.trigger("search.closed"); |
|
242 }; |
241 }; |
243 |
242 |
244 /** react to clicks on the search button */ |
243 /** react to clicks on the search button */ |
245 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
244 IriSP.Widgets.Controller.prototype.searchButtonHandler = function() { |
246 if ( !this.$searchBlock.width() ) { |
245 if ( !this.$searchBlock.width() ) { |
247 this.showSearchBlock(); |
246 this.showSearchBlock(); |
248 var _val = this.$searchInput.val(); |
247 var _val = this.$searchInput.val(); |
249 if (_val) { |
248 if (_val) { |
250 this.player.trigger("search", _val); // trigger the search to make it more natural. |
249 this.source.getAnnotations().search(_val); |
251 } |
250 } |
252 } else { |
251 } else { |
253 this.hideSearchBlock(); |
252 this.hideSearchBlock(); |
254 } |
253 } |
255 }; |
254 }; |
265 this._positiveMatch = false; |
264 this._positiveMatch = false; |
266 |
265 |
267 // 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. |
268 if (_val !== this.lastSearchValue) { |
267 if (_val !== this.lastSearchValue) { |
269 if (_val) { |
268 if (_val) { |
270 this.player.trigger("search", _val); |
269 this.source.getAnnotations().search(_val); |
271 } else { |
270 } else { |
272 this.player.trigger("search.cleared"); |
271 this.source.getAnnotations().trigger("clear-search"); |
273 this.$searchInput.css('background-color',''); |
272 this.$searchInput.css('background-color',''); |
274 } |
273 } |
275 } |
274 } |
276 this.lastSearchValue = _val; |
275 this.lastSearchValue = _val; |
277 }; |
276 }; |
278 |
277 |
279 /** |
|
280 handler for the IriSP.search.found message, which is sent by some views when they |
|
281 highlight a match. |
|
282 */ |
|
283 IriSP.Widgets.Controller.prototype.searchMatch = function() { |
|
284 this._positiveMatch = true; |
|
285 this.$searchInput.css('background-color','#e1ffe1'); |
|
286 }; |
|
287 |
|
288 /** the same, except that no value could be found */ |
|
289 IriSP.Widgets.Controller.prototype.searchNoMatch = function() { |
|
290 if (this._positiveMatch !== true) { |
|
291 this.$searchInput.css('background-color', "#d62e3a"); |
|
292 } |
|
293 }; |
|
294 |
|
295 /** react to an IriSP.Player.triggeredSearch - that is, when |
|
296 a widget ask the.Player to do a search on his behalf */ |
|
297 IriSP.Widgets.Controller.prototype.triggeredSearch = function(searchString) { |
|
298 this.showSearchBlock(); |
|
299 this.$searchInput.attr('value', searchString); |
|
300 this.player.trigger("search", searchString); // trigger the search to make it more natural. |
|
301 }; |
|
302 |
|
303 |
|