jan-h
9/24/2013 - 8:30 AM

Resize a SDL Media Manager player. http://jsfiddle.net/Jhorsman/4RN9C/

Resize a SDL Media Manager player. http://jsfiddle.net/Jhorsman/4RN9C/

/* 
Resize a SDL Media Manager player.
By: Jan Horsman (jhorsman@sdl.com)

The function setPlayerResizeEvent() performs the resize.
This solution is depending on JQuery which is loaded by the Media Manager
player anyway.

See the demo on http://jsfiddle.net/Jhorsman/4RN9C/

This helper can be used whenever you want to resize a SDL Media Manager
player in the brower, whithout having to change the dimensions in the
Media Manager outlet (settings of the player in SDL Media Manager).

In a responsive design a the window.resize could help to resize the player
dynamically.
    $(window).resize(function() {
        //calculate playerWidth and playerHeight based on responsive design logic
        resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight);
  	return false;
     });
*/

function setPlayerResizeEvent(playerContainerSelector, playerWidth, playerHeight, debug) {
	if (playerContainerSelector == "") {
		if(debug == true)
			console.debug("setPlayerResizeEvent: Invalid argument, playerContainerSelector is not set");
		return;
	}
	if (playerWidth == "" || playerHeight == "") {
		if(debug == true)
			console.debug("resizeMediaManagerPlayer: Invalid arguments, playerWidth and playerHeight are required; container name: " + playerContainerSelector + "; player width: " + playerWidth + "; player height: " + playerHeight);
		return;
	}
	setContainerDimensions(playerContainerSelector, playerWidth, playerHeight, debug);
	$j(playerContainerSelector).bind("player-ready", function() {
		resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight);
		showContainter(playerContainerSelector, debug);
	});
}

function setContainerDimensions(playerContainerSelector, playerWidth, playerHeight, debug) {
	if(debug == true)
		console.debug("setContainerDimensions; container name: " + playerContainerSelector + "; player width: " + playerWidth + "; player height: " + playerHeight);
	$j(playerContainerSelector).css({'opacity': 0, 'width': playerWidth, 'height': playerHeight});
}

function showContainter(playerContainerSelector, debug) {
	if(debug == true)
		console.debug("showContainter; container name: " + playerContainerSelector);
	$j(playerContainerSelector).fadeTo("fast", 1);
}

function resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight) {
	var mediaManagerPlaceholder = $j(playerContainerSelector).children().last()
	var projekktorPlayer = mediaManagerPlaceholder.children().first()

	//Rezise the player div, the media manager placeholder and the projekktor player
	$j(playerContainerSelector).css({ 'width': playerWidth, 'height': playerHeight });
	mediaManagerPlaceholder.css({ 'width': playerWidth, 'height': playerHeight });
	projekktorPlayer.css({ 'width': playerWidth, 'height': playerHeight });
}