      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