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 jQuery(this).hide(); 89 media.play(); 90 }); 91 } 92 93 // Bind to the player events to control the play loader. 94 media.ubind(this.uuid + ':loadstart', (function(playLoader) { 95 return function(event) { 96 playLoader.busy.setFlag('media', true); 97 playLoader.bigPlay.setFlag('media', true); 98 playLoader.previewFlag.setFlag('media', true); 99 playLoader.checkVisibility(); 100 }; 101 })(this)); 102 media.ubind(this.uuid + ':waiting', (function(playLoader) { 103 return function(event) { 104 playLoader.busy.setFlag('media', true); 105 playLoader.checkVisibility(); 106 }; 107 })(this)); 108 media.ubind(this.uuid + ':loadeddata', (function(playLoader) { 109 return function(event) { 110 playLoader.busy.setFlag('media', false); 111 playLoader.checkVisibility(); 112 }; 113 })(this)); 114 media.ubind(this.uuid + ':playing', (function(playLoader) { 115 return function(event) { 116 playLoader.busy.setFlag('media', false); 117 playLoader.bigPlay.setFlag('media', false); 118 if (media.mediaFile.type !== 'audio') { 119 playLoader.previewFlag.setFlag('media', false); 120 } 121 playLoader.checkVisibility(); 122 }; 123 })(this)); 124 media.ubind(this.uuid + ':pause', (function(playLoader) { 125 return function(event) { 126 playLoader.bigPlay.setFlag('media', true); 127 playLoader.checkVisibility(); 128 }; 129 })(this)); 130 } 131 else { 132 133 // Hide the display. 134 this.enabled = false; 135 this.hide(this.elements.busy); 136 this.hide(this.elements.bigPlay); 137 this.hide(this.elements.preview); 138 this.hide(); 139 } 140 }); 141 }; 142 143 /** 144 * Loads the preview image. 145 * 146 * @return {boolean} Returns true if an image was loaded, false otherwise. 147 */ 148 minplayer.playLoader.prototype.loadPreview = function() { 149 150 // Ignore if disabled. 151 if (!this.enabled) { 152 return; 153 } 154 155 // If the preview element exists. 156 if (this.elements.preview) { 157 158 // If there is a preview to show... 159 if (this.options.preview) { 160 161 // Say that this has a preview. 162 this.elements.preview.addClass('has-preview').show(); 163 164 // Create a new preview image. 165 this.preview = new minplayer.image(this.elements.preview, this.options); 166 167 // Create the image. 168 this.preview.load(this.options.preview); 169 return true; 170 } 171 else { 172 173 // Hide the preview. 174 this.elements.preview.hide(); 175 } 176 } 177 178 return false; 179 }; 180 181 /** 182 * Hide or show certain elements based on the state of the busy and big play 183 * button. 184 */ 185 minplayer.playLoader.prototype.checkVisibility = function() { 186 187 // Ignore if disabled. 188 if (!this.enabled) { 189 return; 190 } 191 192 // Hide or show the busy cursor based on the flags. 193 if (this.busy.flag) { 194 this.elements.busy.show(); 195 } 196 else { 197 this.elements.busy.hide(); 198 } 199 200 // Hide or show the big play button based on the flags. 201 if (this.bigPlay.flag) { 202 this.elements.bigPlay.show(); 203 } 204 else { 205 this.elements.bigPlay.hide(); 206 } 207 208 if (this.previewFlag.flag) { 209 this.elements.preview.show(); 210 } 211 else { 212 this.elements.preview.hide(); 213 } 214 215 // Show the control either flag is set. 216 if (this.bigPlay.flag || this.busy.flag || this.previewFlag.flag) { 217 this.display.show(); 218 } 219 220 // Hide the whole control if both flags are 0. 221 if (!this.bigPlay.flag && !this.busy.flag && !this.previewFlag.flag) { 222 this.display.hide(); 223 } 224 }; 225