1 /** The minplayer namespace. */
  2 var minplayer = minplayer || {};
  3 
  4 /**
  5  * @constructor
  6  * @extends minplayer.display
  7  * @class The play loader base class, which is used to control the busy
  8  * cursor, big play button, and the opaque background which shows when the
  9  * player is paused.
 10  *
 11  * @param {object} context The jQuery context.
 12  * @param {object} options This components options.
 13  */
 14 minplayer.playLoader = function(context, options) {
 15 
 16   // Define the flags that control the busy cursor.
 17   this.busy = new minplayer.flags();
 18 
 19   // Define the flags that control the big play button.
 20   this.bigPlay = new minplayer.flags();
 21 
 22   // Define the flags the control the preview.
 23   this.previewFlag = new minplayer.flags();
 24 
 25   /** The preview image. */
 26   this.preview = null;
 27 
 28   /** If the playLoader is enabled. */
 29   this.enabled = true;
 30 
 31   // Derive from display
 32   minplayer.display.call(this, 'playLoader', context, options);
 33 };
 34 
 35 /** Derive from minplayer.display. */
 36 minplayer.playLoader.prototype = new minplayer.display();
 37 
 38 /** Reset the constructor. */
 39 minplayer.playLoader.prototype.constructor = minplayer.playLoader;
 40 
 41 /**
 42  * The constructor.
 43  */
 44 minplayer.playLoader.prototype.construct = function() {
 45 
 46   // Call the media display constructor.
 47   minplayer.display.prototype.construct.call(this);
 48 
 49   // Set the plugin name within the options.
 50   this.options.pluginName = 'playLoader';
 51 
 52   // Get the media plugin.
 53   this.initialize();
 54 
 55   // We are now ready.
 56   this.ready();
 57 };
 58 
 59 /**
 60  * Initialize the playLoader.
 61  */
 62 minplayer.playLoader.prototype.initialize = function() {
 63 
 64   // Get the media plugin.
 65   this.get('media', function(media) {
 66 
 67     // Only bind if this player does not have its own play loader.
 68     if (!media.hasPlayLoader(this.options.preview)) {
 69 
 70       // Enable the playLoader.
 71       this.enabled = true;
 72 
 73       // Get the poster image.
 74       if (!this.options.preview) {
 75         this.options.preview = media.elements.media.attr('poster');
 76       }
 77 
 78       // Reset the media's poster image.
 79       media.elements.media.attr('poster', '');
 80 
 81       // Load the preview image.
 82       this.loadPreview();
 83 
 84       // Trigger a play event when someone clicks on the controller.
 85       if (this.elements.bigPlay) {
 86         minplayer.click(this.elements.bigPlay.unbind(), function(event) {
 87           event.preventDefault();
 88           minplayer.showAll();
 89           jQuery(this).hide();
 90           media.play();
 91         });
 92       }
 93 
 94       // Bind to the player events to control the play loader.
 95       media.unbind('loadstart').bind('loadstart', (function(playLoader) {
 96         return function(event) {
 97           playLoader.busy.setFlag('media', true);
 98           playLoader.bigPlay.setFlag('media', true);
 99           playLoader.previewFlag.setFlag('media', true);
100           playLoader.checkVisibility();
101         };
102       })(this));
103       media.bind('waiting', (function(playLoader) {
104         return function(event) {
105           playLoader.busy.setFlag('media', true);
106           playLoader.checkVisibility();
107         };
108       })(this));
109       media.bind('loadeddata', (function(playLoader) {
110         return function(event) {
111           playLoader.busy.setFlag('media', false);
112           playLoader.checkVisibility();
113         };
114       })(this));
115       media.bind('playing', (function(playLoader) {
116         return function(event) {
117           playLoader.busy.setFlag('media', false);
118           playLoader.bigPlay.setFlag('media', false);
119           if (media.mediaFile.type !== 'audio') {
120             playLoader.previewFlag.setFlag('media', false);
121           }
122           playLoader.checkVisibility();
123         };
124       })(this));
125       media.bind('pause', (function(playLoader) {
126         return function(event) {
127           playLoader.bigPlay.setFlag('media', true);
128           playLoader.checkVisibility();
129         };
130       })(this));
131     }
132     else {
133 
134       // Hide the display.
135       this.enabled = false;
136       this.hide(this.elements.busy);
137       this.hide(this.elements.bigPlay);
138       this.hide(this.elements.preview);
139       this.hide();
140     }
141   });
142 };
143 
144 /**
145  * Loads the preview image.
146  *
147  * @return {boolean} Returns true if an image was loaded, false otherwise.
148  */
149 minplayer.playLoader.prototype.loadPreview = function() {
150 
151   // Ignore if disabled.
152   if (!this.enabled) {
153     return;
154   }
155 
156   // If the preview element exists.
157   if (this.elements.preview) {
158 
159     // If there is a preview to show...
160     if (this.options.preview) {
161 
162       // Say that this has a preview.
163       this.elements.preview.addClass('has-preview').show();
164 
165       // Create a new preview image.
166       this.preview = new minplayer.image(this.elements.preview, this.options);
167 
168       // Create the image.
169       this.preview.load(this.options.preview);
170       return true;
171     }
172     else {
173 
174       // Hide the preview.
175       this.elements.preview.hide();
176     }
177   }
178 
179   return false;
180 };
181 
182 /**
183  * Hide or show certain elements based on the state of the busy and big play
184  * button.
185  */
186 minplayer.playLoader.prototype.checkVisibility = function() {
187 
188   // Ignore if disabled.
189   if (!this.enabled) {
190     return;
191   }
192 
193   // Hide or show the busy cursor based on the flags.
194   if (this.busy.flag) {
195     this.elements.busy.show();
196   }
197   else {
198     this.elements.busy.hide();
199   }
200 
201   // Hide or show the big play button based on the flags.
202   if (this.bigPlay.flag) {
203     this.elements.bigPlay.show();
204   }
205   else {
206     this.elements.bigPlay.hide();
207   }
208 
209   if (this.previewFlag.flag) {
210     this.elements.preview.show();
211   }
212   else {
213     this.elements.preview.hide();
214   }
215 
216   // Show the control either flag is set.
217   if (this.bigPlay.flag || this.busy.flag || this.previewFlag.flag) {
218     this.display.show();
219   }
220 
221   // Hide the whole control if both flags are 0.
222   if (!this.bigPlay.flag && !this.busy.flag && !this.previewFlag.flag) {
223     this.display.hide();
224   }
225 };
226