src_minplayer.controllers.base.js.html in HTML5 Media 7
1 /** The minplayer namespace. */
2 var minplayer = minplayer || {};
3
4 /** Define the controllers object. */
5 minplayer.controllers = minplayer.controllers || {};
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.controllers.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.controllers.base;
25
26 /** Derive from minplayer.display. */
27 minplayer.controllers.base.prototype = new minplayer.display();
28
29 /** Reset the constructor. */
30 minplayer.controllers.base.prototype.constructor = minplayer.controllers.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.controllers.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.controllers.base.prototype.construct = function() {
80
81 // Call the minplayer plugin constructor.
82 minplayer.display.prototype.construct.call(this);
83
84 // If they have a fullscreen button.
85 if (this.elements.fullscreen) {
86
87 // Bind to the click event.
88 this.elements.fullscreen.bind('click', {obj: this}, function(event) {
89 var isFull = event.data.obj.elements.player.hasClass('fullscreen');
90 if (isFull) {
91 event.data.obj.elements.player.removeClass('fullscreen');
92 }
93 else {
94 event.data.obj.elements.player.addClass('fullscreen');
95 }
96 event.data.obj.trigger('fullscreen', !isFull);
97 }).css({'pointer' : 'hand'});
98 }
99
100 // Keep track of if we are dragging...
101 this.dragging = false;
102
103 // If they have a seek bar.
104 if (this.elements.seek) {
105
106 // Create the seek bar slider control.
107 this.seekBar = this.elements.seek.slider({
108 range: 'min'
109 });
110 }
111
112 // If they have a volume bar.
113 if (this.elements.volume) {
114
115 // Create the volume bar slider control.
116 this.volumeBar = this.elements.volume.slider({
117 range: 'min',
118 orientation: 'vertical'
119 });
120 }
121
122 // Get the media plugin.
123 this.get('media', function(media) {
124
125 var _this = this;
126
127 // If they have a pause button
128 if (this.elements.pause) {
129
130 // Bind to the click on this button.
131 this.elements.pause.bind('click', {obj: this}, function(event) {
132 event.preventDefault();
133 event.data.obj.playPause(false, media);
134 });
135
136 // Bind to the pause event of the media.
137 media.bind('pause', {obj: this}, function(event) {
138 event.data.obj.setPlayPause(true);
139 });
140 }
141
142 // If they have a play button
143 if (this.elements.play) {
144
145 // Bind to the click on this button.
146 this.elements.play.bind('click', {obj: this}, function(event) {
147 event.preventDefault();
148 event.data.obj.playPause(true, media);
149 });
150
151 // Bind to the play event of the media.
152 media.bind('playing', {obj: this}, function(event) {
153 event.data.obj.setPlayPause(false);
154 });
155 }
156
157 // If they have a duration, then trigger on duration change.
158 if (this.elements.duration) {
159
160 // Bind to the duration change event.
161 media.bind('durationchange', {obj: this}, function(event, data) {
162 event.data.obj.setTimeString('duration', data.duration);
163 });
164
165 // Set the timestring to the duration.
166 media.getDuration(function(duration) {
167 _this.setTimeString('duration', duration);
168 });
169 }
170
171 // If they have a progress element.
172 if (this.elements.progress) {
173
174 // Bind to the progress event.
175 media.bind('progress', {obj: this}, function(event, data) {
176 var percent = data.total ? (data.loaded / data.total) * 100 : 0;
177 event.data.obj.elements.progress.width(percent + '%');
178 });
179 }
180
181 // If they have a seek bar or timer, bind to the timeupdate.
182 if (this.seekBar || this.elements.timer) {
183
184 // Bind to the time update event.
185 media.bind('timeupdate', {obj: this}, function(event, data) {
186 if (!event.data.obj.dragging) {
187 var value = 0;
188 if (data.duration) {
189 value = (data.currentTime / data.duration) * 100;
190 }
191
192 // Update the seek bar if it exists.
193 if (event.data.obj.seekBar) {
194 event.data.obj.seekBar.slider('option', 'value', value);
195 }
196
197 event.data.obj.setTimeString('timer', data.currentTime);
198 }
199 });
200 }
201
202 // If they have a seekBar element.
203 if (this.seekBar) {
204
205 // Register the events for the control bar to control the media.
206 this.seekBar.slider({
207 start: function(event, ui) {
208 _this.dragging = true;
209 },
210 stop: function(event, ui) {
211 _this.dragging = false;
212 media.getDuration(function(duration) {
213 media.seek((ui.value / 100) * duration);
214 });
215 },
216 slide: function(event, ui) {
217 media.getDuration(function(duration) {
218 var time = (ui.value / 100) * duration;
219 if (!_this.dragging) {
220 media.seek(time);
221 }
222 _this.setTimeString('timer', time);
223 });
224 }
225 });
226 }
227
228 // Setup the volume bar.
229 if (this.volumeBar) {
230
231 // Create the slider.
232 this.volumeBar.slider({
233 slide: function(event, ui) {
234 media.setVolume(ui.value / 100);
235 }
236 });
237
238 // Set the volume to match that of the player.
239 media.getVolume(function(vol) {
240 _this.volumeBar.slider('option', 'value', (vol * 100));
241 });
242 }
243 });
244
245 // We are now ready.
246 this.ready();
247 };
248
249 /**
250 * Sets the play and pause state of the control bar.
251 *
252 * @param {boolean} state TRUE - Show Play, FALSE - Show Pause.
253 */
254 minplayer.controllers.base.prototype.setPlayPause = function(state) {
255 var css = '';
256 if (this.elements.play) {
257 css = state ? 'inherit' : 'none';
258 this.elements.play.css('display', css);
259 }
260 if (this.elements.pause) {
261 css = state ? 'none' : 'inherit';
262 this.elements.pause.css('display', css);
263 }
264 };
265
266 /**
267 * Plays or pauses the media.
268 *
269 * @param {bool} state true => play, false => pause.
270 * @param {object} media The media player object.
271 */
272 minplayer.controllers.base.prototype.playPause = function(state, media) {
273 var type = state ? 'play' : 'pause';
274 this.display.trigger(type);
275 this.setPlayPause(!state);
276 if (media) {
277 media[type]();
278 }
279 };
280
281 /**
282 * Sets the time string on the control bar.
283 *
284 * @param {string} element The name of the element to set.
285 * @param {number} time The total time amount to set.
286 */
287 minplayer.controllers.base.prototype.setTimeString = function(element, time) {
288 if (this.elements[element]) {
289 this.elements[element].text(minplayer.formatTime(time).time);
290 }
291 };
292
File
player/doc/symbols/src/src_minplayer.controllers.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 controllers object. */</span><span class="WHIT">
<span class='line'> 5</span> </span><span class="NAME">minplayer.controllers</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer.controllers</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.controllers.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.controllers.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.controllers.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.controllers.base.prototype.constructor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minplayer.controllers.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.controllers.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.controllers.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">// If they have a fullscreen button.</span><span class="WHIT">
<span class='line'> 85</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'> 86</span>
<span class='line'> 87</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the click event.</span><span class="WHIT">
<span class='line'> 88</span> </span><span class="WHIT"> </span><span class="NAME">this.elements.fullscreen.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">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 89</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">isFull</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.data.obj.elements.player.hasClass</span><span class="PUNC">(</span><span class="STRN">'fullscreen'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 90</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">isFull</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="WHIT"> </span><span class="NAME">event.data.obj.elements.player.removeClass</span><span class="PUNC">(</span><span class="STRN">'fullscreen'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 92</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 93</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'> 94</span> </span><span class="WHIT"> </span><span class="NAME">event.data.obj.elements.player.addClass</span><span class="PUNC">(</span><span class="STRN">'fullscreen'</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="NAME">event.data.obj.trigger</span><span class="PUNC">(</span><span class="STRN">'fullscreen'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">isFull</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="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'> 98</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 99</span>
<span class='line'>100</span> </span><span class="WHIT"> </span><span class="COMM">// Keep track of if we are dragging...</span><span class="WHIT">
<span class='line'>101</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'>102</span>
<span class='line'>103</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a seek bar.</span><span class="WHIT">
<span class='line'>104</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'>105</span>
<span class='line'>106</span> </span><span class="WHIT"> </span><span class="COMM">// Create the seek bar slider control.</span><span class="WHIT">
<span class='line'>107</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'>108</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'>109</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>110</span> </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 volume bar.</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.volume</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">// Create the volume bar slider control.</span><span class="WHIT">
<span class='line'>116</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'>117</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'>118</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'>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><span class="WHIT"> </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="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'>126</span>
<span class='line'>127</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a pause button</span><span class="WHIT">
<span class='line'>128</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'>129</span>
<span class='line'>130</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the click on this button.</span><span class="WHIT">
<span class='line'>131</span> </span><span class="WHIT"> </span><span class="NAME">this.elements.pause.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">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>132</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'>133</span> </span><span class="WHIT"> </span><span class="NAME">event.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'>134</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>135</span>
<span class='line'>136</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the pause event of the media.</span><span class="WHIT">
<span class='line'>137</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">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>138</span> </span><span class="WHIT"> </span><span class="NAME">event.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'>139</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>140</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>141</span>
<span class='line'>142</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a play button</span><span class="WHIT">
<span class='line'>143</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'>144</span>
<span class='line'>145</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the click on this button.</span><span class="WHIT">
<span class='line'>146</span> </span><span class="WHIT"> </span><span class="NAME">this.elements.play.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">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>147</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'>148</span> </span><span class="WHIT"> </span><span class="NAME">event.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'>149</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>150</span>
<span class='line'>151</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the play event of the media.</span><span class="WHIT">
<span class='line'>152</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">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.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'>154</span> </span><span class="WHIT"> </span><span class="PUNC">}</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="WHIT">
<span class='line'>156</span>
<span class='line'>157</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'>158</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'>159</span>
<span class='line'>160</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the duration change event.</span><span class="WHIT">
<span class='line'>161</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">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'>162</span> </span><span class="WHIT"> </span><span class="NAME">event.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'>163</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>164</span>
<span class='line'>165</span> </span><span class="WHIT"> </span><span class="COMM">// Set the timestring to the duration.</span><span class="WHIT">
<span class='line'>166</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'>167</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'>168</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>169</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>170</span>
<span class='line'>171</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a progress element.</span><span class="WHIT">
<span class='line'>172</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'>173</span>
<span class='line'>174</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the progress event.</span><span class="WHIT">
<span class='line'>175</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">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'>176</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'>177</span> </span><span class="WHIT"> </span><span class="NAME">event.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'>178</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>179</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>180</span>
<span class='line'>181</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'>182</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'>183</span>
<span class='line'>184</span> </span><span class="WHIT"> </span><span class="COMM">// Bind to the time update event.</span><span class="WHIT">
<span class='line'>185</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">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'>186</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">event.data.obj.dragging</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>187</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'>188</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'>189</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'>190</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>191</span>
<span class='line'>192</span> </span><span class="WHIT"> </span><span class="COMM">// Update the seek bar if it exists.</span><span class="WHIT">
<span class='line'>193</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.data.obj.seekBar</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>194</span> </span><span class="WHIT"> </span><span class="NAME">event.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'>195</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>196</span>
<span class='line'>197</span> </span><span class="WHIT"> </span><span class="NAME">event.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'>198</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>199</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>200</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>201</span>
<span class='line'>202</span> </span><span class="WHIT"> </span><span class="COMM">// If they have a seekBar element.</span><span class="WHIT">
<span class='line'>203</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'>204</span>
<span class='line'>205</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'>206</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'>207</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'>208</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'>209</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>210</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'>211</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'>212</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'>213</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'>214</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</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="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'>217</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'>218</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'>219</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'>220</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'>221</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>222</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'>223</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>224</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>225</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>226</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>227</span>
<span class='line'>228</span> </span><span class="WHIT"> </span><span class="COMM">// Setup the volume bar.</span><span class="WHIT">
<span class='line'>229</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'>230</span>
<span class='line'>231</span> </span><span class="WHIT"> </span><span class="COMM">// Create the slider.</span><span class="WHIT">
<span class='line'>232</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'>233</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'>234</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'>235</span> </span><span class="WHIT"> </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="WHIT">
<span class='line'>237</span>
<span class='line'>238</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'>239</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'>240</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'>241</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>242</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>243</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>244</span>
<span class='line'>245</span> </span><span class="WHIT"> </span><span class="COMM">// We are now ready.</span><span class="WHIT">
<span class='line'>246</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'>247</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>248</span>
<span class='line'>249</span> </span><span class="COMM">/**
<span class='line'>250</span> * Sets the play and pause state of the control bar.
<span class='line'>251</span> *
<span class='line'>252</span> * @param {boolean} state TRUE - Show Play, FALSE - Show Pause.
<span class='line'>253</span> */</span><span class="WHIT">
<span class='line'>254</span> </span><span class="NAME">minplayer.controllers.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'>255</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'>256</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'>257</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'>258</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'>259</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>260</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'>261</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'>262</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'>263</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>264</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>265</span>
<span class='line'>266</span> </span><span class="COMM">/**
<span class='line'>267</span> * Plays or pauses the media.
<span class='line'>268</span> *
<span class='line'>269</span> * @param {bool} state true => play, false => pause.
<span class='line'>270</span> * @param {object} media The media player object.
<span class='line'>271</span> */</span><span class="WHIT">
<span class='line'>272</span> </span><span class="NAME">minplayer.controllers.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'>273</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'>274</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'>275</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'>276</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'>277</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'>278</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>279</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>280</span>
<span class='line'>281</span> </span><span class="COMM">/**
<span class='line'>282</span> * Sets the time string on the control bar.
<span class='line'>283</span> *
<span class='line'>284</span> * @param {string} element The name of the element to set.
<span class='line'>285</span> * @param {number} time The total time amount to set.
<span class='line'>286</span> */</span><span class="WHIT">
<span class='line'>287</span> </span><span class="NAME">minplayer.controllers.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'>288</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'>289</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'>290</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>291</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>292</span> </span></pre></body></html>
