webshims-rails 1.11.3.1 → 1.11.6

data/vendor/assets/javascripts/webshims/shims/mediaelement-jaris.js

@@ -454,9 +454,9 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 	})();
 	
 	
-	var transformDimension = (function(){
+	var getComputedDimension = (function(){
 		var dimCache = {};
-		var getRealDims = function(data){
+		var getVideoDims = function(data){
 			var ret, poster, img;
 			if(dimCache[data.currentSrc]){
 				ret = dimCache[data.currentSrc];
@@ -481,54 +481,102 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 						} else {
 							delete dimCache[poster];
 						}
+						img.onload = null;
 					};
 					img.src = poster;
-					if(img.complete){
+					if(img.complete && img.onload){
 						img.onload();
 					}
 				}
 			}
 			return ret || {width: 300, height: data._elemNodeName == 'video' ? 150 : 50};
 		};
-		return function(data){
-			var realDims, ratio;
-			var ret = data.elemDimensions;
+		
+		var getCssStyle = function(elem, style){
+			return elem.style[style] || (elem.currentStyle && elem.currentStyle[style]) || (window.getComputedStyle && (window.getComputedStyle( elem, null ) || {} )[style]) || '';
+		};
+		var minMaxProps = ['minWidth', 'maxWidth', 'minHeight', 'maxHeight'];
+		
+		var addMinMax = function(elem, ret){
+			var i, prop;
+			var hasMinMax = false;
+			for (i = 0; i < 4; i++) {
+				prop = getCssStyle(elem, minMaxProps[i]);
+				if(parseFloat(prop, 10)){
+					hasMinMax = true;
+					ret[minMaxProps[i]] = prop;
+				}
+			}
+			return hasMinMax;
+		};
+		var retFn = function(data){
+			var videoDims, ratio, hasMinMax;
+			var elem = data._elem;
+			var autos = {
+				width: getCssStyle(elem, 'width') == 'auto',
+				height: getCssStyle(elem, 'height') == 'auto'
+			};
+			var ret  = {
+				width: !autos.width && $(elem).width(),
+				height: !autos.height && $(elem).height()
+			};
 			
-			if(ret.width == 'auto' || ret.height == 'auto'){
-				ret = $.extend({}, data.elemDimensions);
-				realDims = getRealDims(data);
-				ratio = realDims.width / realDims.height;
+			if(autos.width || autos.height){
+				videoDims = getVideoDims(data);
+				ratio = videoDims.width / videoDims.height;
 				
-				if(ret.width == 'auto' && ret.height == 'auto'){
-					ret = realDims;
-				} else if(ret.width == 'auto'){
-					data.shadowElem.css({height: ret.height});
-					ret.width = data.shadowElem.height() * ratio;
-				} else {
-					data.shadowElem.css({width: ret.width});
-					ret.height = data.shadowElem.width() / ratio;
+				if(autos.width && autos.height){
+					ret.width = videoDims.width;
+					ret.height = videoDims.height;
+				} else if(autos.width){
+					ret.width = ret.height * ratio;
+				} else if(autos.height){
+					ret.height = ret.width / ratio;
+				}
+				
+				if(addMinMax(elem, ret)){
+					data.shadowElem.css(ret);
+					if(autos.width){
+						ret.width = data.shadowElem.height() * ratio;
+					} 
+					if(autos.height){
+						ret.height = ((autos.width) ? ret.width :  data.shadowElem.width()) / ratio;
+					}
+					if(autos.width && autos.height){
+						data.shadowElem.css(ret);
+						ret.height = data.shadowElem.width() / ratio;
+						ret.width = ret.height * ratio;
+						
+						data.shadowElem.css(ret);
+						ret.width = data.shadowElem.height() * ratio;
+						ret.height = ret.width / ratio;
+						
+					}
+					if(!Modernizr.video){
+						ret.width = data.shadowElem.width();
+						ret.height = data.shadowElem.height();
+					}
 				}
 			}
 			return ret;
 		};
+		
+		return retFn;
 	})();
+	
 	var setElementDimension = function(data, hasControls){
 		var dims;
-		var elem = data._elem;
+		
 		var box = data.shadowElem;
-		$(elem)[hasControls ? 'addClass' : 'removeClass']('webshims-controls');
+		$(data._elem)[hasControls ? 'addClass' : 'removeClass']('webshims-controls');
 
-		if(data.isActive == 'third'){
+		if(data.isActive == 'third' || data.activating == 'third'){
 			if(data._elemNodeName == 'audio' && !hasControls){
 				box.css({width: 0, height: 0});
 			} else {
-				data.elemDimensions = {
-					width: elem.style.width || $.attr(elem, 'width') || $(elem).width(),
-					height: elem.style.height || $.attr(elem, 'height') || $(elem).height()
-				};
-				dims = transformDimension(data);
-				dims.minWidth = elem.style.minWidth;
-				dims.minHeight = elem.style.minHeight;
+				data._elem.style.display = '';
+				dims = getComputedDimension(data);
+				data._elem.style.display = 'none';
 				box.css(dims);
 			}
 		}
@@ -587,6 +635,8 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 			}, 1);
 			return;
 		}
+		
+		var attrStyle = {};
 
 		if(loadedSwf < 1){
 			loadedSwf = 1;
@@ -597,7 +647,8 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 			data = webshims.data(elem, 'mediaelement');
 		}
 		
-		if($.attr(elem, 'height') || $.attr(elem, 'width')){
+		if((attrStyle.height = $.attr(elem, 'height') || '') || (attrStyle.width = $.attr(elem, 'width') || '')){
+			$(elem).css(attrStyle);
 			webshims.warn("width or height content attributes used. Webshims prefers the usage of CSS (computed styles or inline styles) to detect size of a video/audio. It's really more powerfull.");
 		}
 		
@@ -704,7 +755,7 @@ webshims.register('mediaelement-jaris', function($, webshims, window, document,
 			box.insertBefore(elem);
 			
 			if(hasNative){
-				$.extend(data, {volume: $.prop(elem, 'volume'), muted: $.prop(elem, 'muted'), paused: $.prop(elem, 'paused')});
+				$.extend(data, {volume: $.prop(elem, 'volume'), muted: $.prop(elem, 'muted')});
 			}
 			
 			webshims.addShadowDom(elem, box);

data/vendor/assets/javascripts/webshims/shims/mediaelement-yt.js

@@ -85,9 +85,9 @@ var resetSwfProps = (function(){
 })();
 
 
-var transformDimension = (function(){
+var getComputedDimension = (function(){
 	var dimCache = {};
-	var getRealDims = function(data){
+	var getVideoDims = function(data){
 		var ret, poster, img;
 		if(dimCache[data.currentSrc]){
 			ret = dimCache[data.currentSrc];
@@ -108,61 +108,108 @@ var transformDimension = (function(){
 					};
 					
 					if(dimCache[poster].height && dimCache[poster].width){
-						setElementDimension(data);
+						setElementDimension(data, $.prop(data._elem, 'controls'));
 					} else {
 						delete dimCache[poster];
 					}
+					img.onload = null;
 				};
 				img.src = poster;
-				if(img.complete){
+				if(img.complete && img.onload){
 					img.onload();
 				}
 			}
 		}
 		return ret || {width: 300, height: data._elemNodeName == 'video' ? 150 : 50};
 	};
-	return function(data){
-		var realDims, ratio;
-		var ret = data.elemDimensions;
+	
+	var getCssStyle = function(elem, style){
+		return elem.style[style] || (elem.currentStyle && elem.currentStyle[style]) || (window.getComputedStyle && (window.getComputedStyle( elem, null ) || {} )[style]) || '';
+	};
+	var minMaxProps = ['minWidth', 'maxWidth', 'minHeight', 'maxHeight'];
+	
+	var addMinMax = function(elem, ret){
+		var i, prop;
+		var hasMinMax = false;
+		for (i = 0; i < 4; i++) {
+			prop = getCssStyle(elem, minMaxProps[i]);
+			if(parseFloat(prop, 10)){
+				hasMinMax = true;
+				ret[minMaxProps[i]] = prop;
+			}
+		}
+		return hasMinMax;
+	};
+	var retFn = function(data){
+		var videoDims, ratio, hasMinMax;
+		var elem = data._elem;
+		var autos = {
+			width: getCssStyle(elem, 'width') == 'auto',
+			height: getCssStyle(elem, 'height') == 'auto'
+		};
+		var ret  = {
+			width: !autos.width && $(elem).width(),
+			height: !autos.height && $(elem).height()
+		};
 		
-		if(ret.width == 'auto' || ret.height == 'auto'){
-			ret = $.extend({}, data.elemDimensions);
-			realDims = getRealDims(data);
-			ratio = realDims.width / realDims.height;
+		if(autos.width || autos.height){
+			videoDims = getVideoDims(data);
+			ratio = videoDims.width / videoDims.height;
+			
+			if(autos.width && autos.height){
+				ret.width = videoDims.width;
+				ret.height = videoDims.height;
+			} else if(autos.width){
+				ret.width = ret.height * ratio;
+			} else if(autos.height){
+				ret.height = ret.width / ratio;
+			}
 			
-			if(ret.width == 'auto' && ret.height == 'auto'){
-				ret = realDims;
-			} else if(ret.width == 'auto'){
-				data.shadowElem.css({height: ret.height});
-				ret.width = data.shadowElem.height() * ratio;
-			} else {
-				data.shadowElem.css({width: ret.width});
-				ret.height = data.shadowElem.width() / ratio;
+			if(addMinMax(elem, ret)){
+				data.shadowElem.css(ret);
+				if(autos.width){
+					ret.width = data.shadowElem.height() * ratio;
+				} 
+				if(autos.height){
+					ret.height = ((autos.width) ? ret.width :  data.shadowElem.width()) / ratio;
+				}
+				if(autos.width && autos.height){
+					data.shadowElem.css(ret);
+					ret.height = data.shadowElem.width() / ratio;
+					ret.width = ret.height * ratio;
+					
+					data.shadowElem.css(ret);
+					ret.width = data.shadowElem.height() * ratio;
+					ret.height = ret.width / ratio;
+					
+				}
+				if(!Modernizr.video){
+					ret.width = data.shadowElem.width();
+					ret.height = data.shadowElem.height();
+				}
 			}
 		}
 		return ret;
 	};
+	
+	return retFn;
 })();
 
-	var setElementDimension = function(data){
-		var dims;
-		var elem = data._elem;
-		var box = data.shadowElem;
-		
-		if(data.isActive == 'third'){
-			if(data && data._ytAPI && data._ytAPI.getPlaybackQuality){
-				window.ytapi = data._ytAPI
-			}
-			data.elemDimensions = {
-				width: elem.style.width || $.attr(elem, 'width') || $(elem).width(),
-				height: elem.style.height || $.attr(elem, 'height') || $(elem).height()
-			};
-			dims = transformDimension(data);
-			dims.minWidth = elem.style.minWidth;
-			dims.minHeight = elem.style.minHeight;
-			box.css(dims);
+var setElementDimension = function(data){
+	var dims;
+	var elem = data._elem;
+	var box = data.shadowElem;
+	if(data.isActive == 'third'){
+		if(data && data._ytAPI && data._ytAPI.getPlaybackQuality){
+			window.ytapi = data._ytAPI;
 		}
-	};
+		
+		data._elem.style.display = '';
+		dims = getComputedDimension(data);
+		data._elem.style.display = 'none';
+		box.css(dims);
+	}
+};
 
 var getYtDataFromElem = function(elem){
 	try {
@@ -174,8 +221,10 @@ var getYtDataFromElem = function(elem){
 	return (data && data.isActive == 'third') ? data : null;
 };
 
-var getYtId = function(src){
+var qualReg = /vq\=(small|medium|large|hd720|hd1080|highres)/i;
+var getYtParams = function(src){
 	var found;
+	var qual = (src.match(qualReg) || ['', ''])[1].toLowerCase();;
 	src = src.split('?');
 	if(src[0].indexOf('youtube.com/watch') != -1 && src[1]){
 		src = src[1].split('&');
@@ -201,9 +250,12 @@ var getYtId = function(src){
 		});
 	}
 	if(!found){
-		webshims.warn('no youtube id found: '+ src);
+		webshims.error('no youtube id found: '+ src);
 	}
-	return src;
+	return {
+		videoId: src,
+		suggestedQuality: qual
+	};
 };
 
 var startAutoPlay = function(data){
@@ -325,10 +377,14 @@ var qualityLevels = {
 	hd1080: {
 		height: 1080,
 		width: 1920 // 1440
+	},
+	highres: {
+		height: 1080,
+		width: 1920 // 1440
 	}
 };
 
-var addYtAPI = function(mediaElm, elemId, data, ytID){
+var addYtAPI = function(mediaElm, elemId, data, ytParams){
 	ytAPI.done(function(){
 		var handleBuffered = function(){
 			var buffered, bufFac;
@@ -391,6 +447,9 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 				}
 			}, 350);
 		};
+		
+		data._metatrys = 0;
+		
 		data._ytAPI = new YT.Player(elemId, {
 			height: '100%',
 			width: '100%',
@@ -405,7 +464,7 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 				controls: $.prop(mediaElm, 'controls') ? 1:0
 			},
 			
-			videoId: ytID,
+			videoId: ytParams.videoId,
 			events: {
 				'onReady': function(e){
 					startAutoPlay(data);
@@ -414,11 +473,17 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 				},
 				
 				'onStateChange': function(e){
-					if(!e.target.getDuration){return;}
+					if(!e.target.getDuration){
+						return;
+					}
 					var callMeta;
 					if(!data._metadata){
+						if(ytParams.suggestedQuality){
+							data._ytAPI.setPlaybackQuality(ytParams.suggestedQuality);
+						}
 						var duration = e.target.getDuration();
 						var quality = e.target.getPlaybackQuality();
+						
 						if(duration){
 							data._metadata = true;
 							data.duration = duration;
@@ -431,14 +496,21 @@ var addYtAPI = function(mediaElm, elemId, data, ytID){
 							
 							callMeta = true;
 							if(!qualityLevels[quality]){
-								quality = 'large';
+								quality = 'medium';
 							}
 							data.videoHeight = qualityLevels[quality].height;
 							data.videoWidth = qualityLevels[quality].width;
 						}
-						
+						if( duration && data._metatrys < 3 && (quality == 'unknown' || (ytParams.suggestedQuality && quality != ytParams.suggestedQuality)) ){
+							data._metatrys++;
+							data._metadata = false;
+							callMeta = false;
+						} else {
+							data._metatrys = 0;
+						}
 					}
 					
+					
 					if(callMeta){
 						$(mediaElm)
 							.trigger('durationchange')
@@ -498,19 +570,26 @@ mediaelement.createSWF = function(mediaElem, src, data){
 		data = webshims.data(mediaElem, 'mediaelement');
 	}
 	var elemId = 'yt-'+ webshims.getID(mediaElem);
-	var ytID = getYtId(src.src);
+	var ytParams = getYtParams(src.src);
 	var hasControls = $.prop(mediaElem, 'controls');
+	var attrStyle = {};
+	
+	if((attrStyle.height = $.attr(mediaElem, 'height') || '') || (attrStyle.width = $.attr(mediaElem, 'width') || '')){
+		$(mediaElem).css(attrStyle);
+		webshims.warn("width or height content attributes used. Webshims prefers the usage of CSS (computed styles or inline styles) to detect size of a video/audio. It's really more powerfull.");
+	}
+	
 	if(data){
 		mediaelement.setActive(mediaElem, 'third', data);
 		resetSwfProps(data);
 		data.currentSrc = src.srcProp;
 		if(hasControls != data._hasControls){
 			data.shadowElem.html('<div id="'+ elemId +'">');
-			addYtAPI(mediaElem, elemId, data, ytID);
+			addYtAPI(mediaElem, elemId, data, ytParams);
 		} else {
 			ytAPI.done(function(){
-				if(data._ytAPI.cueVideoByUrl){
-					data._ytAPI.cueVideoByUrl(ytID);
+				if(data._ytAPI.cueVideoById){
+					data._ytAPI.cueVideoById(ytParams);
 				}
 			});
 		}
@@ -566,17 +645,15 @@ mediaelement.createSWF = function(mediaElem, src, data){
 	}));
 	
 	
-	
-	setElementDimension(data);
-	
-	
 	webshims.addShadowDom(mediaElem, box);
 	mediaelement.setActive(mediaElem, 'third', data);
 	addMediaToStopEvents(mediaElem);
 	
 	box.insertBefore(mediaElem);
 	
-	addYtAPI(mediaElem, elemId, data, ytID);
+	setElementDimension(data);
+	
+	addYtAPI(mediaElem, elemId, data, ytParams);
 	$(mediaElem)
 		.on('updatemediaelementdimensions loadedmetadata emptied', setDimension)
 		.onWSOff('updateshadowdom', setDimension)