      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