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