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