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