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