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