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, 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 // Set the name of this plugin. 44 this.options.name = 'playLoader'; 45 46 // Call the media display constructor. 47 minplayer.display.prototype.construct.call(this); 48 49 // Add the preview to the options. 50 if (this.elements.preview) { 51 52 // Get the poster image. 53 if (!this.options.preview) { 54 this.options.preview = this.elements.media.attr('poster'); 55 } 56 57 // Reset the media's poster image. 58 this.elements.media.attr('poster', ''); 59 60 // If there is a preview to show... 61 if (this.options.preview) { 62 63 // Say that this has a preview. 64 this.elements.preview.addClass('has-preview').show(); 65 66 // Create a new preview image. 67 this.preview = new minplayer.image(this.elements.preview, this.options); 68 69 // Create the image. 70 this.preview.load(this.options.preview); 71 } 72 else { 73 74 // Hide the preview. 75 this.elements.preview.hide(); 76 } 77 } 78 }; 79 80 /** 81 * Hide or show certain elements based on the state of the busy and big play 82 * button. 83 */ 84 minplayer.playLoader.base.prototype.checkVisibility = function() { 85 86 // Hide or show the busy cursor based on the flags. 87 if (this.busy.flag) { 88 this.elements.busy.show(); 89 } 90 else { 91 this.elements.busy.hide(); 92 } 93 94 // Hide or show the big play button based on the flags. 95 if (this.bigPlay.flag) { 96 this.elements.bigPlay.show(); 97 } 98 else { 99 this.elements.bigPlay.hide(); 100 } 101 102 // Show the control either flag is set. 103 if (this.bigPlay.flag || this.busy.flag) { 104 this.display.show(); 105 } 106 107 // Hide the whole control if both flags are 0. 108 if (!this.bigPlay.flag && !this.busy.flag) { 109 this.display.hide(); 110 } 111 }; 112 113 /** 114 * @see minplayer.plugin#setPlayer 115 */ 116 minplayer.playLoader.base.prototype.setPlayer = function(player) { 117 minplayer.display.prototype.setPlayer.call(this, player); 118 119 // Only bind if this player does not have its own play loader. 120 if (!player.hasPlayLoader()) { 121 122 // Trigger a play event when someone clicks on the controller. 123 if (this.elements.bigPlay) { 124 this.elements.bigPlay.unbind(); 125 this.elements.bigPlay.bind('click', {player: player}, function(event) { 126 event.preventDefault(); 127 jQuery(this).hide(); 128 event.data.player.play(); 129 }); 130 } 131 132 // Bind to the player events to control the play loader. 133 player.bind('loadstart', {obj: this}, function(event) { 134 event.data.obj.busy.setFlag('media', true); 135 event.data.obj.bigPlay.setFlag('media', true); 136 if (event.data.obj.preview) { 137 event.data.obj.elements.preview.show(); 138 } 139 event.data.obj.checkVisibility(); 140 }); 141 player.bind('waiting', {obj: this}, function(event) { 142 event.data.obj.busy.setFlag('media', true); 143 event.data.obj.checkVisibility(); 144 }); 145 player.bind('loadeddata', {obj: this}, function(event) { 146 event.data.obj.busy.setFlag('media', false); 147 event.data.obj.checkVisibility(); 148 }); 149 player.bind('playing', {obj: this}, function(event) { 150 event.data.obj.busy.setFlag('media', false); 151 event.data.obj.bigPlay.setFlag('media', false); 152 if (event.data.obj.preview) { 153 event.data.obj.elements.preview.hide(); 154 } 155 event.data.obj.checkVisibility(); 156 }); 157 player.bind('pause', {obj: this}, function(event) { 158 event.data.obj.bigPlay.setFlag('media', true); 159 event.data.obj.checkVisibility(); 160 }); 161 } 162 else { 163 164 // Hide the busy cursor. 165 if (this.elements.busy) { 166 this.elements.busy.hide(); 167 } 168 169 // Hide the big play button. 170 if (this.elements.bigPlay) { 171 this.elements.bigPlay.unbind(); 172 this.elements.bigPlay.hide(); 173 } 174 175 // Hide the display. 176 this.display.hide(); 177 } 178 }; 179