view johndyer-mediaelement-13fa20a/src/js/mep-feature-contextmenu.js @ 25:4a4bd554b4c1 tip

Closing this sub branch.

/*
* ContextMenu Plugin
* 
*
*/

	
mejs.MepDefaults.contextMenuItems = [
	// demo of a fullscreen option
	{ 
		render: function(player) {
			
			// check for fullscreen plugin
			if (typeof player.enterFullScreen == 'undefined')
				return null;
		
			if (player.isFullScreen) {
				return "Turn off Fullscreen";
			} else {
				return "Go Fullscreen";
			}
		},
		click: function(player) {
			if (player.isFullScreen) {
				player.exitFullScreen();
			} else {
				player.enterFullScreen();
			}
		}
	}
	,
	// demo of a mute/unmute button
	{ 
		render: function(player) {
			if (player.media.muted) {
				return "Unmute";
			} else {
				return "Mute";
			}
		},
		click: function(player) {
			if (player.media.muted) {
				player.setMuted(false);
			} else {
				player.setMuted(true);
			}
		}
	},
	// separator
	{
		isSeparator: true
	}
	,
	// demo of simple download video
	{ 
		render: function(player) {
			return "Download Video";
		},
		click: function(player) {
			window.location.href = player.media.currentSrc;
		}
	}	

];


(function($) {



	MediaElementPlayer.prototype.buildcontextmenu = function(player, controls, layers, media) {
		
		// create context menu
		player.contextMenu = $('<div class="mejs-contextmenu"></div>')
							.appendTo($('body'))
							.hide();
		
		// create events for showing context menu
		player.container.bind('contextmenu', function(e) {
			e.preventDefault();
			player.renderContextMenu(e.clientX, e.clientY);
			return false;
		});
		player.container.bind('click', function() {
			player.contextMenu.hide();
		});	
	}
	
	MediaElementPlayer.prototype.renderContextMenu = function(x,y) {
		
		// alway re-render the items so that things like "turn fullscreen on" and "turn fullscreen off" are always written correctly
		var t = this,
			html = '',
			items = t.options.contextMenuItems;
		
		for (var i=0, il=items.length; i<il; i++) {
			
			if (items[i].isSeparator) {
				html += '<div class="mejs-contextmenu-separator"></div>';
			} else {
			
				var rendered = items[i].render(t);
			
				// render can return null if the item doesn't need to be used at the moment
				if (rendered != null) {
					html += '<div class="mejs-contextmenu-item" data-itemindex="' + i + '">' + rendered + '</div>';
				}
			}
		}
		
		// position and show the context menu
		t.contextMenu
			.empty()
			.append($(html))
			.css({top:y, left:x})
			.show()
			
		// bind events
		t.contextMenu.find('.mejs-contextmenu-item').click(function() {
			// which one is this?
			var itemIndex = parseInt( $(this).data('itemindex'), 10 );
			
			// perform click action
			t.options.contextMenuItems[itemIndex].click(t);
			
			// close
			t.contextMenu.hide();
		});
		
	}
	
})(mejs.$);