comparison johndyer-mediaelement-13fa20a/src/js/mep-feature-backlight.js @ 0:032bc65ebafc

added core components

+(function($) {
+
+	$.extend(mejs.MepDefaults, {
+		backlightBackground: [0,0,0],
+		backlightHorizontalLights: 5,
+		backlightVerticalLights: 5,
+		backlightSize: 50,
+		backlightTimeout: 200
+	});
+
+
+
+	MediaElementPlayer.prototype.buildbacklight = function(player, controls, layers, media) {
+		if (!player.isVideo)
+			return;
+
+		//http://www.splashnology.com/blog/html5/382.html
+
+		var 
+			mediaContainer = player.container.find('.mejs-mediaelement').parent(),
+			border = $('<div class="mejs-border"></div>')
+				.prependTo(mediaContainer)
+				.css('position','absolute')
+				.css('top','-10px')
+				.css('left','-10px')
+				.css('border','solid 10px #010101')
+				.width(player.width).height(player.height),
+			glowBase = $('<div class="mejs-backlight-glow"></div>')
+				.prependTo(mediaContainer)
+				.css('position','absolute')
+				.css('display','none')
+				.css('top',0)
+				.css('left',0)
+				.width(player.width).height(player.height),
+			base = $('<div class="mejs-backlight"></div>')
+				.prependTo(mediaContainer)
+				.css('position','absolute')
+				.css('top',0)
+				.css('left',0)
+				.width(player.width).height(player.height),
+
+			i,
+			copyCanvas = document.createElement('canvas'),
+			copyContext = copyCanvas.getContext('2d'),
+			pixels,
+			keepUpdating = true,
+			isActive = true,
+			timer = null,
+			glowCanvas = document.createElement('canvas'),
+			glowContext = glowCanvas.getContext('2d'),
+			size = player.options.backlightSize,
+			backgroundColor = player.options.backlightBackground,
+			gradient,
+			width = player.width,
+			height = player.height;
+
+		// set sizes
+		copyCanvas.width = width;
+		copyCanvas.height = height;
+		glowCanvas.width = width + size + size;
+		glowCanvas.height = height + size + size;
+
+		// draw glow overlay
+		// top
+		gradient = addGlow(backgroundColor,glowContext.createLinearGradient(size, size, size, 0));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(size, size, width, -size); 
+
+		// tr
+		gradient = addGlow(backgroundColor,glowContext.createRadialGradient(width+size, size, 0, width+size, size, size));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(width+size, size, size, -size); 
+
+		// right
+		gradient = addGlow(backgroundColor,glowContext.createLinearGradient(width+size, size, width+size+size, size));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(width+size, size, size, height); 
+
+		// br
+		gradient = addGlow(backgroundColor,glowContext.createRadialGradient(width+size, height+size, 0, width+size, height+size, size));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(width+size, height+size, size, size); 
+
+		// bottom
+		var gradient = addGlow(backgroundColor,glowContext.createLinearGradient(size, size+height, size, size+height+size));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(size, size+height, width, size); 
+
+		// bl
+		gradient = addGlow(backgroundColor,glowContext.createRadialGradient(size, height+size, 0, size, height+size, size));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(0, height+size, size, size); 
+
+		// left
+		gradient = addGlow(backgroundColor,glowContext.createLinearGradient(size, size, 0, size));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(size, size, -size, height); 
+
+		// tl
+		gradient = addGlow(backgroundColor,glowContext.createRadialGradient(size, size, 0, size, size, size));
+		glowContext.fillStyle = gradient; 
+		glowContext.fillRect(0, 0, size, size); 
+
+		$(glowCanvas)
+			.css('position','absolute')
+			.css('top',-size)
+			.css('left',-size)
+			.appendTo(glowBase);
+
+
+		// add toggle control
+		$('<div class="mejs-backlight-button mejs-backlight-active"><span></span></div>')
+			.appendTo(controls)
+			.click(function() {
+				if (isActive) {
+					delete timer;
+					timer = null;
+					base.hide();
+					glowBase.hide();
+					$(this)
+						.removeClass('mejs-backlight-active')
+						.addClass('mejs-backlight-inactive')
+				} else {
+					updateLights();
+					base.show();
+					glowBase.show();
+					$(this)
+						.removeClass('mejs-backlight-inactive')
+						.addClass('mejs-backlight-active')
+				}
+				isActive = !isActive;
+			});
+
+
+		// http://www.splashnology.com/blog/html5/382.html
+		function updateLights() {
+
+			// get a copy of video
+			copyContext.drawImage(media, 0, 0, media.width, media.height);
+
+			// create the gradient lights
+			addLights(base, copyCanvas, copyContext, 
+				player.options.backlightVerticalLights, 
+				player.options.backlightHorizontalLights, 
+				player.options.backlightSize, 
+				30);
+
+			if (keepUpdating && isActive) {
+				timer = setTimeout(updateLights, player.options.backlightTimeout);
+			}
+		}
+
+
+
+
+		//setTimeout(updateLights, timeOut);
+
+		media.addEventListener('play',function() {
+			if (isActive) {
+				keepUpdating = true;
+				updateLights();
+				glowBase.css('display','');
+			}
+		}, false);
+		media.addEventListener('pause',function() {
+			keepUpdating = false;
+		}, false);
+		media.addEventListener('ended',function() {
+			keepUpdating = false;
+		}, false);
+
+	};
+
+
+
+	function addLights(base, canvas, context, vBlocks, hBlocks, size, depth) {
+		base.empty();
+
+		var 
+			lightsCanvas = document.createElement('canvas'),
+			lightsContext = lightsCanvas.getContext('2d'),
+			width = canvas.width,
+			height = canvas.height,
+			g,
+			topLights = getMidColors(canvas, context, hBlocks, depth, 'top'),
+			bottomLights = getMidColors(canvas, context, hBlocks, depth, 'bottom'),
+			leftLights = getMidColors(canvas, context, vBlocks, depth, 'left'),
+			rightLights = getMidColors(canvas, context, vBlocks, depth, 'right'),
+			corners = [],
+			stopSize = 0;
+
+		lightsCanvas.width = width + size + size;
+		lightsCanvas.height = height + size + size;
+		lightsContext.globalCompositeOperation = 'xor'; //'darker'; //'lighter';
+
+		// draw four gradients
+		// create corners
+		corners.push(averageColor(topLights[topLights.length-1], rightLights[0]) );
+		corners.push(averageColor(bottomLights[bottomLights.length-1], rightLights[rightLights.length-1]) );
+		corners.push(averageColor(bottomLights[0], leftLights[leftLights.length-1]) );
+		corners.push(averageColor(topLights[0], leftLights[0]) );
+
+		// top
+		stopSize = 1 / topLights.length;
+		gradient = context.createLinearGradient(size, size, width+size, size);
+		gradient.addColorStop(0, 'rgb(' + adjustColor(corners[3]).join(',') + ')');
+		for (var i = 0, il = topLights.length; i < il; i++) {
+			gradient.addColorStop(i * stopSize + stopSize/2, 'rgb(' + adjustColor(topLights[i]).join(',') + ')');
+		}
+		gradient.addColorStop(1.0, 'rgb(' + adjustColor(corners[0]).join(',') + ')');
+		lightsContext.fillStyle = gradient;
+		lightsContext.fillRect(size, 0, width, size);
+
+		// right
+		gradient = context.createLinearGradient(size+width, size, size+width, size+height);
+		gradient.addColorStop(0, 'rgb(' + adjustColor(corners[0]).join(',') + ')');
+		for (var i = 0, il = rightLights.length; i < il; i++) {
+			gradient.addColorStop(i * stopSize + stopSize/2, 'rgb(' + adjustColor(rightLights[i]).join(',') + ')');
+		}
+		gradient.addColorStop(1.0, 'rgb(' + adjustColor(corners[1]).join(',') + ')');
+		lightsContext.fillStyle = gradient;
+		lightsContext.fillRect(size+width, size, size+width+size, height);
+
+
+		// bottom
+		gradient = context.createLinearGradient(size, size+height, size+width, size+height);
+		gradient.addColorStop(0, 'rgb(' + adjustColor(corners[2]).join(',') + ')');
+		for (var i = 0, il = bottomLights.length; i < il; i++) {
+			gradient.addColorStop(i * stopSize + stopSize/2, 'rgb(' + adjustColor(bottomLights[i]).join(',') + ')');
+		}
+		gradient.addColorStop(1.0, 'rgb(' + adjustColor(corners[1]).join(',') + ')');
+		lightsContext.fillStyle = gradient;
+		lightsContext.fillRect(size, size+height, width, size);
+
+		// left
+		gradient = context.createLinearGradient(size, size, size, size+height);
+		gradient.addColorStop(0, 'rgb(' + adjustColor(corners[3]).join(',') + ')');
+		for (var i = 0, il = leftLights.length; i < il; i++) {
+			gradient.addColorStop(i * stopSize + stopSize/2, 'rgb(' + adjustColor(leftLights[i]).join(',') + ')');
+		}
+		gradient.addColorStop(1.0, 'rgb(' + adjustColor(corners[2]).join(',') + ')');
+		lightsContext.fillStyle = gradient;
+		lightsContext.fillRect(0, size, size, height);
+
+		// corners
+
+		// top right
+		lightsContext.fillStyle = 'rgb(' + adjustColor(corners[0]).join(',') + ')';
+		lightsContext.fillRect(width+size, 0, size+width+size, size);
+
+		// bottom right
+		lightsContext.fillStyle = 'rgb(' + adjustColor(corners[1]).join(',') + ')';
+		lightsContext.fillRect(width+size, size+height, size+width+size, size+height+size);
+
+		// bottom left
+		lightsContext.fillStyle = 'rgb(' + adjustColor(corners[2]).join(',') + ')';
+		lightsContext.fillRect(0, size+height, size, size+height+size);
+
+		// top left
+		lightsContext.fillStyle = 'rgb(' + adjustColor(corners[3]).join(',') + ')';
+		lightsContext.fillRect(0, 0, size, size);
+
+
+
+
+
+		$(lightsCanvas)
+			.css('position','absolute')
+			.css('top',-size)
+			.css('left',-size)
+			.appendTo(base);
+	}
+
+	function addGlow(color, g) {
+		g.addColorStop(0.0, 'rgba(' + color.join(',') + ',0)');
+		g.addColorStop(1.0, 'rgba(' + color.join(',') + ',1)');
+		return g;
+	}
+
+
+
+
+	function getMidColors(canvas, context, blocks, blockDepth, side) {
+		var width = canvas.width,
+			height = canvas.height,
+			blockHeight = (side == 'top' || side == 'bottom') ? blockDepth : Math.ceil(height / blocks), // height of the analyzed block
+			blockWidth = (side == 'top' || side == 'bottom') ? Math.ceil(width / blocks) : blockDepth,
+			result = [],
+			imgdata,
+			i;
+
+		if (side == 'top' || side == 'bottom') {
+			for (i = 0; i < blocks; i++) {
+				try {
+					imgdata = context.getImageData(i*blockWidth, (side == 'top') ? 0 : height - blockHeight , blockWidth, blockHeight);
+					result.push( 
+						calcMidColor(imgdata.data)
+					);
+				} catch (e) {
+					console.log(e);
+				}
+			}
+		} else {
+
+			for (i = 0; i < blocks; i++) {
+				try {
+					imgdata = context.getImageData( (side == 'right') ? width - blockWidth : 0, i*blockHeight, blockWidth, blockHeight);
+					result.push( 
+						calcMidColor(imgdata.data)
+					);
+				} catch (e) {
+					console.log(e);
+				}
+
+			}
+		}
+
+
+		return result;
+	}
+
+	function averageColor(c1,c2) {
+		var result = 
+			[(c1[0] + c2[0]) / 2, 
+			 (c1[1] + c2[1]) / 2,  
+			 (c1[2] + c2[2]) / 2];
+			 
+		return result;
+	}
+
+	// average color for a block
+	function calcMidColorVertical(data, from, to) {
+		var result = [0, 0, 0];
+		var totalPixels = (to - from) / 4;
+
+		for (var i = from; i <= to; i += 4) {
+			result[0] += data[i];
+			result[1] += data[i + 1];
+			result[2] += data[i + 2];
+		}
+
+		result[0] = Math.round(result[0] / totalPixels);
+		result[1] = Math.round(result[1] / totalPixels);
+		result[2] = Math.round(result[2] / totalPixels);
+
+		return result;
+	}
+
+	// average color for a block
+	function calcMidColor(data) {
+		var result = [0, 0, 0];
+		var totalPixels = data.length;
+
+		for (var i = 0; i < totalPixels; i += 4) {
+			result[0] += data[i];
+			result[1] += data[i + 1];
+			result[2] += data[i + 2];
+		}
+
+		result[0] = Math.round(result[0] / totalPixels);
+		result[1] = Math.round(result[1] / totalPixels);
+		result[2] = Math.round(result[2] / totalPixels);
+
+		return result;
+	}
+
+	function adjustColor(color) {
+		//if (color[0] <= 2 && color[2] <= 2 && color[3] <= 2)
+		//	return color;
+
+		color = rgb2hsv(color);
+		color[1] = Math.min(100, color[1] * 1.2); //1.4); // saturation
+		color[2] = 80; //Math.min(100, color[2] * 2.7); //2.7); // brightness
+		return hsv2rgb(color);
+	}
+
+	function rgb2hsv(color) {
+		var r = color[0] / 255,
+			g = color[1] / 255,
+			b = color[2] / 255,
+
+			x, val, d1, d2, hue, sat, val;
+
+		x = Math.min(Math.min(r, g), b);
+		val = Math.max(Math.max(r, g), b);
+		//if (x == val)
+		//	throw Error('h is undefined');
+
+		d1 = (r == x) ? g-b : ((g == x) ? b-r : r-g);
+		d2 = (r == x) ? 3 : ((g == x) ? 5 : 1);
+
+		hue = Math.floor((d2 - d1 / (val - x)) * 60) % 360;
+		sat = Math.floor(((val - x) / val) * 100);
+		val = Math.floor(val * 100);
+		return [hue, sat, val];
+	}
+
+	/**
+	 * Convers HSV color to RGB model
+	 * @param {Number[]} RGB color
+	 * @return {Number[]} HSV color
+	 */
+	function hsv2rgb(color) {
+		var h = color[0],
+			s = color[1],
+			v = color[2];
+
+		var r, g, a, b, c, s = s / 100, v = v / 100, h = h / 360;
+
+		if (s > 0) {
+			if (h >= 1) h=0;
+
+			h = 6 * h;
+			var f = h - Math.floor(h);
+			a = Math.round(255 * v * (1 - s));
+			b = Math.round(255 * v * (1 - (s * f)));
+			c = Math.round(255 * v * (1 - (s * (1 - f))));
+			v = Math.round(255 * v);
+
+			switch (Math.floor(h)) {
+				case 0: r = v; g = c; b = a; break;
+				case 1: r = b; g = v; b = a; break;
+				case 2: r = a; g = v; b = c; break;
+				case 3: r = a; g = b; b = v; break;
+				case 4: r = c; g = a; b = v; break;
+				case 5: r = v; g = a; b = b; break;
+			}
+
+			return [r || 0, g || 0, b || 0];
+
+		} else {
+			v = Math.round(v * 255);
+			return [v, v, v];
+		}
+	}
+
+})(mejs.$);