Example of Layout class for Kaltura EmbedPlayer

mw.LayoutManager.js

var playerConfig = {
  components: [{"width":"100%","height":"30","type":"Container","id":"Controls","relativeTo":"ControlBarContainer","position":"firstChild"},{"type":"ToggleButton","id":"htmlPlayBtn","state":"playerStatus.isPlaying()","actionOn":"doPause","actionOff":"doPlay","cssClass":"btn","cssClassOn":"icon-pause","cssClassOff":"icon-play","relativeTo":"Controls","position":"firstChild"},{"height":"22","type":"ToggleButton","id":"htmlFullScreenBtn","state":"playerStatus.isInFullScreen()","actionOn":"closeFullScreen","actionOff":"openFullScreen","cssClass":"btn pull-right","cssClassOn":"icon-contract","cssClassOff":"icon-expand","relativeTo":"Controls","position":"lastChild"},{"width":"100%","height":"10","type":"Scrubber","id":"htmlScrubber","relativeTo":"Controls","position":"lastChild"},{"width":"60","height":"12","format":"mm:ss","type":"Label","id":"htmlCurrentTimeLabel","relativeTo":"Controls","position":"lastChild"},{"width":"60","height":"12","format":"mm:ss","type":"Label","id":"htmlDurationLabel","relativeTo":"Controls","position":"lastChild"},{"width":"20","height":"20","type":"VolumeBar","id":"htmlVolumeBar","relativeTo":"Controls","position":"lastChild"},{"kClick":"navigate('http://www.kaltura.com')","width":"100","height":"50","type":"Button","id":"htmlKalturaLogo","href":"http://www.kaltura.com/","relativeTo":"Controls","position":"lastChild"},{"type":"Button","id":"htmlLargePlayBtn","action":"doPlay","kShow":"playerStatus.isState([\"start\",\"pause\"])","cssClass":"btn-large icon-play-2","relativeTo":"VideoHolder","position":"firstChild"},{"type":"Button","id":"htmlReplay","action":"doPlay","kShow":"playerStatus.isState('end')","cssClass":"btn-large icon-spinner","relativeTo":"VideoHolder","position":"firstChild"}]
};
mw.Layout = {
  	init: function( components, options ) {
			this.components = components;
      this.options = options;
		},
		getComponent: function( component ) {
			if( Components[component.type] ) 
				return new mw.Components[component.type]( component ).get();

			console.log('Component of type "' + component.type + '" was not defined.');
			return false;
		},
		addComponent: function( $component, $container, insertMode ) {
			switch( insertMode ) {
				case 'firstChild': 
					$container.prepend( $component );
					break;
				case 'lastChild':
					$container.append( $component );
					break;
				case 'before':
					$container.before( $component );
					break;
				case 'after':
					$container.after( $component );
					break;				
			}
		},
		draw: function() {
			var _this = this;
			var totalComponents = this.components.length;
			var addedComponents = 0;
			var lastRunAddedComponents = 0;
			var firstRun = true;
			console.log('Total Components: ' + totalComponents, this.components);
			while( totalComponents > 0 && addedComponents < totalComponents 
				&& ( lastRunAddedComponents > 0 || firstRun ) ) {

				firstRun = false;
				lastRunAddedComponents = 0;
				var addedItems = [];

				// Go over components
				$.each(this.components, function(idx, component) {

					// Set default DOM container and position
					if( ! component.relativeTo ) {
						component.relativeTo = 'VideoHolder';
					}
					if( ! component.position ) {
						component.position = 'lastChild';
					}
					
					var $container = $('#' + component.relativeTo );

					// Check if we found a container
					if( ! $container.length ) {
						console.log('Container: #' + component.relativeTo + ' not found');
						return true;
					}

					// Get component DOM element
					var $component = _this.getComponent(component);

					// Add component to DOM if we got a component
					if( $component ) {
						_this.addComponent( $component, $container, component.position );
						addedItems.push(idx);
						lastRunAddedComponents++;
					}
				});

				// Delete components that were added
				$.each(addedItems, function() {
					_this.components.splice(this, 1);
				});

				addedComponents += lastRunAddedComponents;
				console.log('Added components: ' + addedComponents + ', last added: ' + lastRunAddedComponents);
			}
		}
	};
	
	// Init Layout
	Layout.init(playerConfig.components, {
		container: $('#container')
	});
	Layout.draw();