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           jQuery(this).hide();
 89           media.play();
 90         });
 91       }
 92 
 93       // Bind to the player events to control the play loader.
 94       media.ubind(this.uuid + ':loadstart', (function(playLoader) {
 95         return function(event) {
 96           playLoader.busy.setFlag('media', true);
 97           playLoader.bigPlay.setFlag('media', true);
 98           playLoader.previewFlag.setFlag('media', true);
 99           playLoader.checkVisibility();
100         };
101       })(this));
102       media.ubind(this.uuid + ':waiting', (function(playLoader) {
103         return function(event) {
104           playLoader.busy.setFlag('media', true);
105           playLoader.checkVisibility();
106         };
107       })(this));
108       media.ubind(this.uuid + ':loadeddata', (function(playLoader) {
109         return function(event) {
110           playLoader.busy.setFlag('media', false);
111           playLoader.checkVisibility();
112         };
113       })(this));
114       media.ubind(this.uuid + ':playing', (function(playLoader) {
115         return function(event) {
116           playLoader.busy.setFlag('media', false);
117           playLoader.bigPlay.setFlag('media', false);
118           if (media.mediaFile.type !== 'audio') {
119             playLoader.previewFlag.setFlag('media', false);
120           }
121           playLoader.checkVisibility();
122         };
123       })(this));
124       media.ubind(this.uuid + ':pause', (function(playLoader) {
125         return function(event) {
126           playLoader.bigPlay.setFlag('media', true);
127           playLoader.checkVisibility();
128         };
129       })(this));
130     }
131     else {
132 
133       // Hide the display.
134       this.enabled = false;
135       this.hide(this.elements.busy);
136       this.hide(this.elements.bigPlay);
137       this.hide(this.elements.preview);
138       this.hide();
139     }
140   });
141 };
142 
143 /**
144  * Loads the preview image.
145  *
146  * @return {boolean} Returns true if an image was loaded, false otherwise.
147  */
148 minplayer.playLoader.prototype.loadPreview = function() {
149 
150   // Ignore if disabled.
151   if (!this.enabled) {
152     return;
153   }
154 
155   // If the preview element exists.
156   if (this.elements.preview) {
157 
158     // If there is a preview to show...
159     if (this.options.preview) {
160 
161       // Say that this has a preview.
162       this.elements.preview.addClass('has-preview').show();
163 
164       // Create a new preview image.
165       this.preview = new minplayer.image(this.elements.preview, this.options);
166 
167       // Create the image.
168       this.preview.load(this.options.preview);
169       return true;
170     }
171     else {
172 
173       // Hide the preview.
174       this.elements.preview.hide();
175     }
176   }
177 
178   return false;
179 };
180 
181 /**
182  * Hide or show certain elements based on the state of the busy and big play
183  * button.
184  */
185 minplayer.playLoader.prototype.checkVisibility = function() {
186 
187   // Ignore if disabled.
188   if (!this.enabled) {
189     return;
190   }
191 
192   // Hide or show the busy cursor based on the flags.
193   if (this.busy.flag) {
194     this.elements.busy.show();
195   }
196   else {
197     this.elements.busy.hide();
198   }
199 
200   // Hide or show the big play button based on the flags.
201   if (this.bigPlay.flag) {
202     this.elements.bigPlay.show();
203   }
204   else {
205     this.elements.bigPlay.hide();
206   }
207 
208   if (this.previewFlag.flag) {
209     this.elements.preview.show();
210   }
211   else {
212     this.elements.preview.hide();
213   }
214 
215   // Show the control either flag is set.
216   if (this.bigPlay.flag || this.busy.flag || this.previewFlag.flag) {
217     this.display.show();
218   }
219 
220   // Hide the whole control if both flags are 0.
221   if (!this.bigPlay.flag && !this.busy.flag && !this.previewFlag.flag) {
222     this.display.hide();
223   }
224 };
225