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   /** The preview image. */
 23   this.preview = null;
 24 
 25   // Derive from display
 26   minplayer.display.call(this, 'playLoader', context, options);
 27 };
 28 
 29 /** Derive from minplayer.display. */
 30 minplayer.playLoader.prototype = new minplayer.display();
 31 
 32 /** Reset the constructor. */
 33 minplayer.playLoader.prototype.constructor = minplayer.playLoader;
 34 
 35 /**
 36  * The constructor.
 37  */
 38 minplayer.playLoader.prototype.construct = function() {
 39 
 40   // Call the media display constructor.
 41   minplayer.display.prototype.construct.call(this);
 42 
 43   // Get the media plugin.
 44   this.get('media', function(media) {
 45 
 46     // Only bind if this player does not have its own play loader.
 47     if (!media.hasPlayLoader()) {
 48 
 49       // Get the poster image.
 50       if (!this.options.preview) {
 51         this.options.preview = media.elements.media.attr('poster');
 52       }
 53 
 54       // Reset the media's poster image.
 55       media.elements.media.attr('poster', '');
 56 
 57       // Load the preview image.
 58       this.loadPreview();
 59 
 60       // Trigger a play event when someone clicks on the controller.
 61       if (this.elements.bigPlay) {
 62         this.elements.bigPlay.unbind().bind('click', function(event) {
 63           event.preventDefault();
 64           jQuery(this).hide();
 65           media.play();
 66         });
 67       }
 68 
 69       // Bind to the player events to control the play loader.
 70       media.unbind('loadstart').bind('loadstart', (function(playLoader) {
 71         return function(event) {
 72           playLoader.busy.setFlag('media', true);
 73           playLoader.bigPlay.setFlag('media', true);
 74           if (playLoader.preview) {
 75             playLoader.elements.preview.show();
 76           }
 77           playLoader.checkVisibility();
 78         };
 79       })(this));
 80       media.bind('waiting', (function(playLoader) {
 81         return function(event) {
 82           playLoader.busy.setFlag('media', true);
 83           playLoader.checkVisibility();
 84         };
 85       })(this));
 86       media.bind('loadeddata', (function(playLoader) {
 87         return function(event) {
 88           playLoader.busy.setFlag('media', false);
 89           playLoader.checkVisibility();
 90         };
 91       })(this));
 92       media.bind('playing', (function(playLoader) {
 93         return function(event) {
 94           playLoader.busy.setFlag('media', false);
 95           playLoader.bigPlay.setFlag('media', false);
 96           if (playLoader.preview) {
 97             playLoader.elements.preview.hide();
 98           }
 99           playLoader.checkVisibility();
100         };
101       })(this));
102       media.bind('pause', (function(playLoader) {
103         return function(event) {
104           playLoader.bigPlay.setFlag('media', true);
105           playLoader.checkVisibility();
106         };
107       })(this));
108     }
109     else {
110 
111       // Hide the busy cursor.
112       if (this.elements.busy) {
113         this.elements.busy.unbind().hide();
114       }
115 
116       // Hide the big play button.
117       if (this.elements.bigPlay) {
118         this.elements.bigPlay.unbind().hide();
119       }
120 
121       // Hide the display.
122       this.display.unbind().hide();
123     }
124   });
125 
126   // We are now ready.
127   this.ready();
128 };
129 
130 /**
131  * Loads the preview image.
132  */
133 minplayer.playLoader.prototype.loadPreview = function() {
134 
135   // If the preview element exists.
136   if (this.elements.preview) {
137 
138     // If there is a preview to show...
139     if (this.options.preview) {
140 
141       // Say that this has a preview.
142       this.elements.preview.addClass('has-preview').show();
143 
144       // Create a new preview image.
145       this.preview = new minplayer.image(this.elements.preview, this.options);
146 
147       // Create the image.
148       this.preview.load(this.options.preview);
149     }
150     else {
151 
152       // Hide the preview.
153       this.elements.preview.hide();
154     }
155   }
156 };
157 
158 /**
159  * Hide or show certain elements based on the state of the busy and big play
160  * button.
161  */
162 minplayer.playLoader.prototype.checkVisibility = function() {
163 
164   // Hide or show the busy cursor based on the flags.
165   if (this.busy.flag) {
166     this.elements.busy.show();
167   }
168   else {
169     this.elements.busy.hide();
170   }
171 
172   // Hide or show the big play button based on the flags.
173   if (this.bigPlay.flag) {
174     this.elements.bigPlay.show();
175   }
176   else {
177     this.elements.bigPlay.hide();
178   }
179 
180   // Show the control either flag is set.
181   if (this.bigPlay.flag || this.busy.flag) {
182     this.display.show();
183   }
184 
185   // Hide the whole control if both flags are 0.
186   if (!this.bigPlay.flag && !this.busy.flag) {
187     this.display.hide();
188   }
189 };
190