src_minplayer.controller.js.html in HTML5 Media 7
1 /** The minplayer namespace. */
2 var minplayer = minplayer || {};
3
4 /**
5 * @constructor
6 * @extends minplayer.display
7 * @class This is the base minplayer controller. Other controllers can derive
8 * from the base and either build on top of it or simply define the elements
9 * that this base controller uses.
10 *
11 * @param {object} context The jQuery context.
12 * @param {object} options This components options.
13 */
14 minplayer.controller = function(context, options) {
15
16 // Derive from display
17 minplayer.display.call(this, 'controller', context, options);
18 };
19
20 /** Derive from minplayer.display. */
21 minplayer.controller.prototype = new minplayer.display();
22
23 /** Reset the constructor. */
24 minplayer.controller.prototype.constructor = minplayer.controller;
25
26 /**
27 * A static function that will format a time value into a string time format.
28 *
29 * @param {integer} time An integer value of time.
30 * @return {string} A string representation of the time.
31 */
32 minplayer.formatTime = function(time) {
33 time = time || 0;
34 var seconds = 0, minutes = 0, hour = 0, timeString = '';
35
36 hour = Math.floor(time / 3600);
37 time -= (hour * 3600);
38 minutes = Math.floor(time / 60);
39 time -= (minutes * 60);
40 seconds = Math.floor(time % 60);
41
42 if (hour) {
43 timeString += String(hour);
44 timeString += ':';
45 }
46
47 timeString += (minutes >= 10) ? String(minutes) : ('0' + String(minutes));
48 timeString += ':';
49 timeString += (seconds >= 10) ? String(seconds) : ('0' + String(seconds));
50 return {time: timeString, units: ''};
51 };
52
53 /**
54 * @see minplayer.display#getElements
55 * @return {object} The elements defined by this display.
56 */
57 minplayer.controller.prototype.getElements = function() {
58 var elements = minplayer.display.prototype.getElements.call(this);
59 return jQuery.extend(elements, {
60 play: null,
61 pause: null,
62 fullscreen: null,
63 seek: null,
64 progress: null,
65 volume: null,
66 timer: null
67 });
68 };
69
70 /**
71 * @see minplayer.plugin#construct
72 */
73 minplayer.controller.prototype.construct = function() {
74
75 // Call the minplayer plugin constructor.
76 minplayer.display.prototype.construct.call(this);
77
78 // Set the plugin name within the options.
79 this.options.pluginName = 'controller';
80
81 // Keep track of if we are dragging...
82 this.dragging = false;
83
84 // Keep track of the current volume.
85 this.vol = 0;
86
87 // If they have a seek bar.
88 if (this.elements.seek) {
89
90 // Create the seek bar slider control.
91 this.seekBar = this.elements.seek.slider({
92 range: 'min',
93 create: function(event, ui) {
94 jQuery('.ui-slider-range', event.target).addClass('ui-state-active');
95 }
96 });
97 }
98
99 // If they have a volume bar.
100 if (this.elements.volume) {
101
102 // Create the volume bar slider control.
103 this.volumeBar = this.elements.volume.slider({
104 range: 'min',
105 orientation: 'vertical'
106 });
107 }
108
109 // Get the player plugin.
110 this.get('player', function(player) {
111
112 // If they have a fullscreen button.
113 if (this.elements.fullscreen) {
114
115 // Bind to the click event.
116 minplayer.click(this.elements.fullscreen.unbind(), function() {
117 player.toggleFullScreen();
118 }).css({'pointer' : 'hand'});
119 }
120 });
121
122 // Get the media plugin.
123 this.get('media', function(media) {
124
125 // Only bind if this player does not have its own play loader.
126 if (!media.hasController()) {
127
128 // If they have a pause button
129 if (this.elements.pause) {
130
131 // Bind to the click on this button.
132 minplayer.click(this.elements.pause.unbind(), (function(controller) {
133 return function(event) {
134 event.preventDefault();
135 controller.playPause(false, media);
136 };
137 })(this));
138
139 // Bind to the pause event of the media.
140 media.bind('pause', (function(controller) {
141 return function(event) {
142 controller.setPlayPause(true);
143 };
144 })(this));
145 }
146
147 // If they have a play button
148 if (this.elements.play) {
149
150 // Bind to the click on this button.
151 minplayer.click(this.elements.play.unbind(), (function(controller) {
152 return function(event) {
153 event.preventDefault();
154 controller.playPause(true, media);
155 };
156 })(this));
157
158 // Bind to the play event of the media.
159 media.bind('playing', (function(controller) {
160 return function(event) {
161 controller.setPlayPause(false);
162 };
163 })(this));
164 }
165
166 // If they have a duration, then trigger on duration change.
167 if (this.elements.duration) {
168
169 // Bind to the duration change event.
170 media.bind('durationchange', (function(controller) {
171 return function(event, data) {
172 controller.setTimeString('duration', data.duration);
173 };
174 })(this));
175
176 // Set the timestring to the duration.
177 media.getDuration((function(controller) {
178 return function(duration) {
179 controller.setTimeString('duration', duration);
180 };
181 })(this));
182 }
183
184 // If they have a progress element.
185 if (this.elements.progress) {
186
187 // Bind to the progress event.
188 media.bind('progress', (function(controller) {
189 return function(event, data) {
190 var percent = data.total ? (data.loaded / data.total) * 100 : 0;
191 controller.elements.progress.width(percent + '%');
192 };
193 })(this));
194 }
195
196 // If they have a seek bar or timer, bind to the timeupdate.
197 if (this.seekBar || this.elements.timer) {
198
199 // Bind to the time update event.
200 media.bind('timeupdate', (function(controller) {
201 return function(event, data) {
202 if (!controller.dragging) {
203 var value = 0;
204 if (data.duration) {
205 value = (data.currentTime / data.duration) * 100;
206 }
207
208 // Update the seek bar if it exists.
209 if (controller.seekBar) {
210 controller.seekBar.slider('option', 'value', value);
211 }
212
213 controller.setTimeString('timer', data.currentTime);
214 }
215 };
216 })(this));
217 }
218
219 // If they have a seekBar element.
220 if (this.seekBar) {
221
222 // Register the events for the control bar to control the media.
223 this.seekBar.slider({
224 start: (function(controller) {
225 return function(event, ui) {
226 controller.dragging = true;
227 };
228 })(this),
229 stop: (function(controller) {
230 return function(event, ui) {
231 controller.dragging = false;
232 media.getDuration(function(duration) {
233 media.seek((ui.value / 100) * duration);
234 });
235 };
236 })(this),
237 slide: (function(controller) {
238 return function(event, ui) {
239 media.getDuration(function(duration) {
240 var time = (ui.value / 100) * duration;
241 if (!controller.dragging) {
242 media.seek(time);
243 }
244 controller.setTimeString('timer', time);
245 });
246 };
247 })(this)
248 });
249 }
250
251 // Setup the mute button.
252 if (this.elements.mute) {
253 minplayer.click(this.elements.mute, (function(controller) {
254 return function(event) {
255 event.preventDefault();
256 var value = controller.volumeBar.slider('option', 'value');
257 if (value > 0) {
258 controller.vol = value;
259 controller.volumeBar.slider('option', 'value', 0);
260 media.setVolume(0);
261 }
262 else {
263 controller.volumeBar.slider('option', 'value', controller.vol);
264 media.setVolume(controller.vol / 100);
265 }
266 };
267 })(this));
268 }
269
270 // Setup the volume bar.
271 if (this.volumeBar) {
272
273 // Create the slider.
274 this.volumeBar.slider({
275 slide: function(event, ui) {
276 media.setVolume(ui.value / 100);
277 }
278 });
279
280 media.bind('volumeupdate', (function(controller) {
281 return function(event, vol) {
282 controller.volumeBar.slider('option', 'value', (vol * 100));
283 };
284 })(this));
285
286 // Set the volume to match that of the player.
287 media.getVolume((function(controller) {
288 return function(vol) {
289 controller.volumeBar.slider('option', 'value', (vol * 100));
290 };
291 })(this));
292 }
293 }
294 else {
295
296 // Hide this controller.
297 this.hide();
298 }
299 });
300
301 // We are now ready.
302 this.ready();
303 };
304
305 /**
306 * Sets the play and pause state of the control bar.
307 *
308 * @param {boolean} state TRUE - Show Play, FALSE - Show Pause.
309 */
310 minplayer.controller.prototype.setPlayPause = function(state) {
311 var css = '';
312 if (this.elements.play) {
313 css = state ? 'inherit' : 'none';
314 this.elements.play.css('display', css);
315 }
316 if (this.elements.pause) {
317 css = state ? 'none' : 'inherit';
318 this.elements.pause.css('display', css);
319 }
320 };
321
322 /**
323 * Plays or pauses the media.
324 *
325 * @param {bool} state true => play, false => pause.
326 * @param {object} media The media player object.
327 */
328 minplayer.controller.prototype.playPause = function(state, media) {
329 var type = state ? 'play' : 'pause';
330 this.display.trigger(type);
331 this.setPlayPause(!state);
332 if (media) {
333 media[type]();
334 }
335 };
336
337 /**
338 * Sets the time string on the control bar.
339 *
340 * @param {string} element The name of the element to set.
341 * @param {number} time The total time amount to set.
342 */
343 minplayer.controller.prototype.setTimeString = function(element, time) {
344 if (this.elements[element]) {
345 this.elements[element].text(minplayer.formatTime(time).time);
346 }
347 };
348
File
player/doc/symbols/src/src_minplayer.controller.js.html
View source
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
.KEYW {color: #933;}
.COMM {color: #bbb; font-style: italic;}
.NUMB {color: #393;}
.STRN {color: #393;}
.REGX {color: #339;}
.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
</style></head><body><pre><span class='line'> 1</span> <span class="COMM">/** The minplayer namespace. */</span><span class="WHIT">
<span class='line'> 2</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">minplayer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 3</span>
<span class='line'> 4</span> </span><span class="COMM">/**
<span class='line'> 5</span> * @constructor
<span class='line'> 6</span> * @extends minplayer.display
<span class='line'> 7</span> * @class This is the base minplayer controller. Other controllers can derive
<span class='line'> 8</span> * from the base and either build on top of it or simply define the elements
<span class='line'> 9</span> * that this base controller uses.
<span class='line'> 10</span> *
<span class='line'> 11</span> * @param {object} context The jQuery context.
<span class='line'> 12</span> * @param {object} options This components options.
<span class='line'> 13</span> */</span><span class="WHIT">
<span class='line'> 14</span> </span><span class="NAME">minplayer.controller</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">context</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 15</span>
<span class='line'> 16</span> </span><span class="WHIT"> </span><span class="COMM">// Derive from display</span><span class="WHIT">
<span class='line'> 17</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.display.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'controller'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">context</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 18</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 19</span>
<span class='line'> 20</span> </span><span class="COMM">/** Derive from minplayer.display. */</span><span class="WHIT">
<span class='line'> 21</span> </span><span class="NAME">minplayer.controller.prototype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">minplayer.display</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 22</span>
<span class='line'> 23</span> </span><span class="COMM">/** Reset the constructor. */</span><span class="WHIT">
<span class='line'> 24</span> </span><span class="NAME">minplayer.controller.prototype.constructor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer.controller</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 25</span>
<span class='line'> 26</span> </span><span class="COMM">/**
<span class='line'> 27</span> * A static function that will format a time value into a string time format.
<span class='line'> 28</span> *
<span class='line'> 29</span> * @param {integer} time An integer value of time.
<span class='line'> 30</span> * @return {string} A string representation of the time.
<span class='line'> 31</span> */</span><span class="WHIT">
<span class='line'> 32</span> </span><span class="NAME">minplayer.formatTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">time</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 33</span> </span><span class="WHIT"> </span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 34</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">seconds</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">minutes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">hour</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">timeString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 35</span>
<span class='line'> 36</span> </span><span class="WHIT"> </span><span class="NAME">hour</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.floor</span><span class="PUNC">(</span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">3600</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 37</span> </span><span class="WHIT"> </span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">hour</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">3600</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 38</span> </span><span class="WHIT"> </span><span class="NAME">minutes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.floor</span><span class="PUNC">(</span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 39</span> </span><span class="WHIT"> </span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">minutes</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 40</span> </span><span class="WHIT"> </span><span class="NAME">seconds</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.floor</span><span class="PUNC">(</span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 41</span>
<span class='line'> 42</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">hour</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 43</span> </span><span class="WHIT"> </span><span class="NAME">timeString</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">hour</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 44</span> </span><span class="WHIT"> </span><span class="NAME">timeString</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">':'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 45</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 46</span>
<span class='line'> 47</span> </span><span class="WHIT"> </span><span class="NAME">timeString</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">minutes</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">minutes</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">'0'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">minutes</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 48</span> </span><span class="WHIT"> </span><span class="NAME">timeString</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">':'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 49</span> </span><span class="WHIT"> </span><span class="NAME">timeString</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">seconds</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">seconds</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">'0'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">seconds</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 50</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">time</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">timeString</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">units</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 51</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 52</span>
<span class='line'> 53</span> </span><span class="COMM">/**
<span class='line'> 54</span> * @see minplayer.display#getElements
<span class='line'> 55</span> * @return {object} The elements defined by this display.
<span class='line'> 56</span> */</span><span class="WHIT">
<span class='line'> 57</span> </span><span class="NAME">minplayer.controller.prototype.getElements</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 58</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">elements</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer.display.prototype.getElements.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 59</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">jQuery.extend</span><span class="PUNC">(</span><span class="NAME">elements</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 60</span> </span><span class="WHIT"> </span><span class="NAME">play</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 61</span> </span><span class="WHIT"> </span><span class="NAME">pause</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 62</span> </span><span class="WHIT"> </span><span class="NAME">fullscreen</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 63</span> </span><span class="WHIT"> </span><span class="NAME">seek</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 64</span> </span><span class="WHIT"> </span><span class="NAME">progress</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 65</span> </span><span class="WHIT"> </span><span class="NAME">volume</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 66</span> </span><span class="WHIT"> </span><span class="NAME">timer</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="WHIT">
<span class='line'> 67</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 68</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 69</span>
<span class='line'> 70</span> </span><span class="COMM">/**
<span class='line'> 71</span> * @see minplayer.plugin#construct
<span class='line'> 72</span> */</span><span class="WHIT">
<span class='line'> 73</span> </span><span class="NAME">minplayer.controller.prototype.construct</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 74</span>
<span class='line'> 75</span> </span><span class="WHIT"> </span><span class="COMM">// Call the minplayer plugin constructor.</span><span class="WHIT">
<span class='line'> 76</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.display.prototype.construct.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 77</span>
<span class='line'> 78</span> </span><span class="WHIT"> </span><span class="COMM">// Set the plugin name within the options.</span><span class="WHIT">
<span class='line'> 79</span> </span><span class="WHIT"> </span><span class="NAME">this.options.pluginName</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'controller'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 80</span>
<span class='line'> 81</span> </span><span class="WHIT"> </span><span class="COMM">// Keep track of if we are dragging...</span><span class="WHIT">
<span class='line'> 82</span> </span><span class="WHIT"> </span><span class="NAME">this.dragging</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 83</span>
<span class='line'> 84</span> </span><span class="WHIT"> </span><span class="COMM">// Keep track of the current volume.</span><span class="WHIT">
<span class='line'> 85</span> </span><span class="WHIT"> </span><span class="NAME">this.vol</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 86</span>
<span class='line'> 87</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a seek bar.</span><span class="WHIT">
<span class='line'> 88</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.seek</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 89</span>
<span class='line'> 90</span> </span><span class="WHIT"> </span><span class="COMM">// Create the seek bar slider control.</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="WHIT"> </span><span class="NAME">this.seekBar</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.elements.seek.slider</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 92</span> </span><span class="WHIT"> </span><span class="NAME">range</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'min'</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 93</span> </span><span class="WHIT"> </span><span class="NAME">create</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ui</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 94</span> </span><span class="WHIT"> </span><span class="NAME">jQuery</span><span class="PUNC">(</span><span class="STRN">'.ui-slider-range'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event.target</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">addClass</span><span class="PUNC">(</span><span class="STRN">'ui-state-active'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 95</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 96</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 97</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 98</span>
<span class='line'> 99</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a volume bar.</span><span class="WHIT">
<span class='line'>100</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.volume</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>101</span>
<span class='line'>102</span> </span><span class="WHIT"> </span><span class="COMM">// Create the volume bar slider control.</span><span class="WHIT">
<span class='line'>103</span> </span><span class="WHIT"> </span><span class="NAME">this.volumeBar</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.elements.volume.slider</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>104</span> </span><span class="WHIT"> </span><span class="NAME">range</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'min'</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>105</span> </span><span class="WHIT"> </span><span class="NAME">orientation</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'vertical'</span><span class="WHIT">
<span class='line'>106</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>107</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>108</span>
<span class='line'>109</span> </span><span class="WHIT"> </span><span class="COMM">// Get the player plugin.</span><span class="WHIT">
<span class='line'>110</span> </span><span class="WHIT"> </span><span class="NAME">this.get</span><span class="PUNC">(</span><span class="STRN">'player'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">player</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>111</span>
<span class='line'>112</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a fullscreen button.</span><span class="WHIT">
<span class='line'>113</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.fullscreen</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>114</span>
<span class='line'>115</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the click event.</span><span class="WHIT">
<span class='line'>116</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.click</span><span class="PUNC">(</span><span class="NAME">this.elements.fullscreen.unbind</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>117</span> </span><span class="WHIT"> </span><span class="NAME">player.toggleFullScreen</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>118</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">css</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="STRN">'pointer'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'hand'</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>119</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>120</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>121</span>
<span class='line'>122</span> </span><span class="WHIT"> </span><span class="COMM">// Get the media plugin.</span><span class="WHIT">
<span class='line'>123</span> </span><span class="WHIT"> </span><span class="NAME">this.get</span><span class="PUNC">(</span><span class="STRN">'media'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">media</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>124</span>
<span class='line'>125</span> </span><span class="WHIT"> </span><span class="COMM">// Only bind if this player does not have its own play loader.</span><span class="WHIT">
<span class='line'>126</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">media.hasController</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>127</span>
<span class='line'>128</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a pause button</span><span class="WHIT">
<span class='line'>129</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.pause</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>130</span>
<span class='line'>131</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the click on this button.</span><span class="WHIT">
<span class='line'>132</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.click</span><span class="PUNC">(</span><span class="NAME">this.elements.pause.unbind</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>133</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>134</span> </span><span class="WHIT"> </span><span class="NAME">event.preventDefault</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>135</span> </span><span class="WHIT"> </span><span class="NAME">controller.playPause</span><span class="PUNC">(</span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">media</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>136</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>137</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>138</span>
<span class='line'>139</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the pause event of the media.</span><span class="WHIT">
<span class='line'>140</span> </span><span class="WHIT"> </span><span class="NAME">media.bind</span><span class="PUNC">(</span><span class="STRN">'pause'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>141</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>142</span> </span><span class="WHIT"> </span><span class="NAME">controller.setPlayPause</span><span class="PUNC">(</span><span class="KEYW">true</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>143</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>144</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>145</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>146</span>
<span class='line'>147</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a play button</span><span class="WHIT">
<span class='line'>148</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.play</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>149</span>
<span class='line'>150</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the click on this button.</span><span class="WHIT">
<span class='line'>151</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.click</span><span class="PUNC">(</span><span class="NAME">this.elements.play.unbind</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>152</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>153</span> </span><span class="WHIT"> </span><span class="NAME">event.preventDefault</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>154</span> </span><span class="WHIT"> </span><span class="NAME">controller.playPause</span><span class="PUNC">(</span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">media</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>155</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>156</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>157</span>
<span class='line'>158</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the play event of the media.</span><span class="WHIT">
<span class='line'>159</span> </span><span class="WHIT"> </span><span class="NAME">media.bind</span><span class="PUNC">(</span><span class="STRN">'playing'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>160</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>161</span> </span><span class="WHIT"> </span><span class="NAME">controller.setPlayPause</span><span class="PUNC">(</span><span class="KEYW">false</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>162</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>163</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>164</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>165</span>
<span class='line'>166</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a duration, then trigger on duration change.</span><span class="WHIT">
<span class='line'>167</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.duration</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>168</span>
<span class='line'>169</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the duration change event.</span><span class="WHIT">
<span class='line'>170</span> </span><span class="WHIT"> </span><span class="NAME">media.bind</span><span class="PUNC">(</span><span class="STRN">'durationchange'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>171</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>172</span> </span><span class="WHIT"> </span><span class="NAME">controller.setTimeString</span><span class="PUNC">(</span><span class="STRN">'duration'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data.duration</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>173</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>174</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>175</span>
<span class='line'>176</span> </span><span class="WHIT"> </span><span class="COMM">// Set the timestring to the duration.</span><span class="WHIT">
<span class='line'>177</span> </span><span class="WHIT"> </span><span class="NAME">media.getDuration</span><span class="PUNC">(</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>178</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">duration</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>179</span> </span><span class="WHIT"> </span><span class="NAME">controller.setTimeString</span><span class="PUNC">(</span><span class="STRN">'duration'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">duration</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>180</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>181</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>182</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>183</span>
<span class='line'>184</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a progress element.</span><span class="WHIT">
<span class='line'>185</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.progress</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>186</span>
<span class='line'>187</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the progress event.</span><span class="WHIT">
<span class='line'>188</span> </span><span class="WHIT"> </span><span class="NAME">media.bind</span><span class="PUNC">(</span><span class="STRN">'progress'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>189</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>190</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">percent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.total</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data.loaded</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">data.total</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>191</span> </span><span class="WHIT"> </span><span class="NAME">controller.elements.progress.width</span><span class="PUNC">(</span><span class="NAME">percent</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'%'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>192</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>193</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>194</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>195</span>
<span class='line'>196</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a seek bar or timer, bind to the timeupdate.</span><span class="WHIT">
<span class='line'>197</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.seekBar</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">this.elements.timer</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>198</span>
<span class='line'>199</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the time update event.</span><span class="WHIT">
<span class='line'>200</span> </span><span class="WHIT"> </span><span class="NAME">media.bind</span><span class="PUNC">(</span><span class="STRN">'timeupdate'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>201</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>202</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">controller.dragging</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>203</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">value</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>204</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data.duration</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>205</span> </span><span class="WHIT"> </span><span class="NAME">value</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data.currentTime</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">data.duration</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>206</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>207</span>
<span class='line'>208</span> </span><span class="WHIT"> </span><span class="COMM">// Update the seek bar if it exists.</span><span class="WHIT">
<span class='line'>209</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">controller.seekBar</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>210</span> </span><span class="WHIT"> </span><span class="NAME">controller.seekBar.slider</span><span class="PUNC">(</span><span class="STRN">'option'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'value'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">value</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>211</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>212</span>
<span class='line'>213</span> </span><span class="WHIT"> </span><span class="NAME">controller.setTimeString</span><span class="PUNC">(</span><span class="STRN">'timer'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data.currentTime</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>214</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>215</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>216</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>217</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>218</span>
<span class='line'>219</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a seekBar element.</span><span class="WHIT">
<span class='line'>220</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.seekBar</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>221</span>
<span class='line'>222</span> </span><span class="WHIT"> </span><span class="COMM">// Register the events for the control bar to control the media.</span><span class="WHIT">
<span class='line'>223</span> </span><span class="WHIT"> </span><span class="NAME">this.seekBar.slider</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>224</span> </span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>225</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ui</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>226</span> </span><span class="WHIT"> </span><span class="NAME">controller.dragging</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>227</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>228</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>229</span> </span><span class="WHIT"> </span><span class="NAME">stop</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>230</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ui</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>231</span> </span><span class="WHIT"> </span><span class="NAME">controller.dragging</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>232</span> </span><span class="WHIT"> </span><span class="NAME">media.getDuration</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">duration</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>233</span> </span><span class="WHIT"> </span><span class="NAME">media.seek</span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">ui.value</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">duration</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>234</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>235</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>236</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>237</span> </span><span class="WHIT"> </span><span class="NAME">slide</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>238</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ui</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>239</span> </span><span class="WHIT"> </span><span class="NAME">media.getDuration</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">duration</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>240</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">time</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">ui.value</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">duration</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>241</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">controller.dragging</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>242</span> </span><span class="WHIT"> </span><span class="NAME">media.seek</span><span class="PUNC">(</span><span class="NAME">time</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>243</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>244</span> </span><span class="WHIT"> </span><span class="NAME">controller.setTimeString</span><span class="PUNC">(</span><span class="STRN">'timer'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">time</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>245</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>246</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>247</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>248</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>249</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>250</span>
<span class='line'>251</span> </span><span class="WHIT"> </span><span class="COMM">// Setup the mute button.</span><span class="WHIT">
<span class='line'>252</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.mute</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>253</span> </span><span class="WHIT"> </span><span class="NAME">minplayer.click</span><span class="PUNC">(</span><span class="NAME">this.elements.mute</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>254</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>255</span> </span><span class="WHIT"> </span><span class="NAME">event.preventDefault</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>256</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">value</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">controller.volumeBar.slider</span><span class="PUNC">(</span><span class="STRN">'option'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'value'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>257</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">value</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>258</span> </span><span class="WHIT"> </span><span class="NAME">controller.vol</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">value</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>259</span> </span><span class="WHIT"> </span><span class="NAME">controller.volumeBar.slider</span><span class="PUNC">(</span><span class="STRN">'option'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'value'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>260</span> </span><span class="WHIT"> </span><span class="NAME">media.setVolume</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>261</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>262</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>263</span> </span><span class="WHIT"> </span><span class="NAME">controller.volumeBar.slider</span><span class="PUNC">(</span><span class="STRN">'option'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'value'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">controller.vol</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>264</span> </span><span class="WHIT"> </span><span class="NAME">media.setVolume</span><span class="PUNC">(</span><span class="NAME">controller.vol</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>265</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>266</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>267</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>268</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>269</span>
<span class='line'>270</span> </span><span class="WHIT"> </span><span class="COMM">// Setup the volume bar.</span><span class="WHIT">
<span class='line'>271</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.volumeBar</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>272</span>
<span class='line'>273</span> </span><span class="WHIT"> </span><span class="COMM">// Create the slider.</span><span class="WHIT">
<span class='line'>274</span> </span><span class="WHIT"> </span><span class="NAME">this.volumeBar.slider</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>275</span> </span><span class="WHIT"> </span><span class="NAME">slide</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ui</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>276</span> </span><span class="WHIT"> </span><span class="NAME">media.setVolume</span><span class="PUNC">(</span><span class="NAME">ui.value</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>277</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>278</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>279</span>
<span class='line'>280</span> </span><span class="WHIT"> </span><span class="NAME">media.bind</span><span class="PUNC">(</span><span class="STRN">'volumeupdate'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>281</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">vol</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>282</span> </span><span class="WHIT"> </span><span class="NAME">controller.volumeBar.slider</span><span class="PUNC">(</span><span class="STRN">'option'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'value'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">vol</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>283</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>284</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>285</span>
<span class='line'>286</span> </span><span class="WHIT"> </span><span class="COMM">// Set the volume to match that of the player.</span><span class="WHIT">
<span class='line'>287</span> </span><span class="WHIT"> </span><span class="NAME">media.getVolume</span><span class="PUNC">(</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">controller</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>288</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">vol</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>289</span> </span><span class="WHIT"> </span><span class="NAME">controller.volumeBar.slider</span><span class="PUNC">(</span><span class="STRN">'option'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'value'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">vol</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>290</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>291</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>292</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>293</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>294</span> </span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>295</span>
<span class='line'>296</span> </span><span class="WHIT"> </span><span class="COMM">// Hide this controller.</span><span class="WHIT">
<span class='line'>297</span> </span><span class="WHIT"> </span><span class="NAME">this.hide</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>298</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>299</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>300</span>
<span class='line'>301</span> </span><span class="WHIT"> </span><span class="COMM">// We are now ready.</span><span class="WHIT">
<span class='line'>302</span> </span><span class="WHIT"> </span><span class="NAME">this.ready</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>303</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>304</span>
<span class='line'>305</span> </span><span class="COMM">/**
<span class='line'>306</span> * Sets the play and pause state of the control bar.
<span class='line'>307</span> *
<span class='line'>308</span> * @param {boolean} state TRUE - Show Play, FALSE - Show Pause.
<span class='line'>309</span> */</span><span class="WHIT">
<span class='line'>310</span> </span><span class="NAME">minplayer.controller.prototype.setPlayPause</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">state</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>311</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">css</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>312</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.play</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>313</span> </span><span class="WHIT"> </span><span class="NAME">css</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">state</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'inherit'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>314</span> </span><span class="WHIT"> </span><span class="NAME">this.elements.play.css</span><span class="PUNC">(</span><span class="STRN">'display'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">css</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>315</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>316</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements.pause</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>317</span> </span><span class="WHIT"> </span><span class="NAME">css</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">state</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'inherit'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>318</span> </span><span class="WHIT"> </span><span class="NAME">this.elements.pause.css</span><span class="PUNC">(</span><span class="STRN">'display'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">css</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>319</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>320</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>321</span>
<span class='line'>322</span> </span><span class="COMM">/**
<span class='line'>323</span> * Plays or pauses the media.
<span class='line'>324</span> *
<span class='line'>325</span> * @param {bool} state true => play, false => pause.
<span class='line'>326</span> * @param {object} media The media player object.
<span class='line'>327</span> */</span><span class="WHIT">
<span class='line'>328</span> </span><span class="NAME">minplayer.controller.prototype.playPause</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">state</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">media</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>329</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">state</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'play'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'pause'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>330</span> </span><span class="WHIT"> </span><span class="NAME">this.display.trigger</span><span class="PUNC">(</span><span class="NAME">type</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>331</span> </span><span class="WHIT"> </span><span class="NAME">this.setPlayPause</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">state</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>332</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">media</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>333</span> </span><span class="WHIT"> </span><span class="NAME">media</span><span class="PUNC">[</span><span class="NAME">type</span><span class="PUNC">]</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>334</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>335</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>336</span>
<span class='line'>337</span> </span><span class="COMM">/**
<span class='line'>338</span> * Sets the time string on the control bar.
<span class='line'>339</span> *
<span class='line'>340</span> * @param {string} element The name of the element to set.
<span class='line'>341</span> * @param {number} time The total time amount to set.
<span class='line'>342</span> */</span><span class="WHIT">
<span class='line'>343</span> </span><span class="NAME">minplayer.controller.prototype.setTimeString</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">element</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">time</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>344</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.elements</span><span class="PUNC">[</span><span class="NAME">element</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>345</span> </span><span class="WHIT"> </span><span class="NAME">this.elements</span><span class="PUNC">[</span><span class="NAME">element</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">text</span><span class="PUNC">(</span><span class="NAME">minplayer.formatTime</span><span class="PUNC">(</span><span class="NAME">time</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">time</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>346</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>347</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>348</span> </span></pre></body></html>
