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