webshims-rails 1.14.3 → 1.14.4

data/vendor/assets/javascripts/webshims/shims/jme/alternate-media.js

@@ -0,0 +1,184 @@
+webshim.ready('jmebase es5', function(){
+	var webshim = window.webshim;
+	var $ = webshim.$;
+	var jme = $.jme;
+
+	jme.defineProp('currentAlternateSrc', {
+		readonly: true,
+		get: function(elem){
+			var ret, prop;
+			var data = jme.data(elem);
+			var alternateSrces = data.media.jmeFn('getAlternateSrcData');
+			var currentSrc = data.media.prop('currentSrc');
+
+			if(currentSrc){
+				$.each(alternateSrces.groups, function(groupName, group){
+					if(group.srces.indexOf(currentSrc) != -1){
+						ret = group;
+					}
+				});
+			} else {
+				for(prop in alternateSrces.groups){
+					ret = alternateSrces[prop];
+					break;
+				}
+			}
+			return ret;
+		}
+	});
+
+
+	jme.defineMethod('getAlternateSrcData', function(srces){
+		var ret = {groups: {}, groupLength: 0};
+		var data = jme.data(this);
+
+		if(!srces){
+			srces = data.media.jmeProp('srces');
+		}
+
+		srces.forEach(function(src){
+			var group = src['data-alternate'];
+
+			if(!ret.groups[group]){
+				ret.groupLength++;
+				ret.groups[group] = {
+					group: group,
+					label: group,
+					srces: []
+				};
+			}
+
+			if(src['data-label'] || src.title){
+				ret.groups[group].label = src['data-label'] || src.title;
+			}
+
+			ret.groups[group].srces.push(src.src);
+		});
+		ret.srces = srces;
+		return ret;
+
+	});
+
+	jme.defineMethod('orderAlternateByName', function(names, srces){
+		var data = jme.data(this);
+
+		if(!srces){
+			srces = data.media.jmeProp('srces');
+		}
+		if(!Array.isArray(names)){
+			names = [names];
+		}
+		names.reverse();
+		srces.sort(function(src1, src2){
+			return names.indexOf(src2['data-alternate']) - names.indexOf(src1['data-alternate']);
+		});
+		data.media.jmeProp('srces', srces);
+		return srces;
+	});
+
+	jme.defineMethod('switchAlternateByName', function(names, srces){
+		var data = jme.data(this);
+		var isPaused = data.media.prop('paused');
+		var currentTime = data.media.prop('currentTime');
+		$(this).jmeFn('orderAlternateByName', names, srces);
+
+		if(currentTime > 1){
+			data.media.play();
+			data.media.one('loadedmetadata', function(){
+				if(isPaused){
+					data.media.pause();
+				}
+				data.media.prop('currentTime', currentTime);
+			});
+		}
+		if(!isPaused){
+			data.media.play();
+		}
+	});
+
+
+	function flattenSrces(src){
+		return src.src || src;
+	}
+
+	function isSameSrces(newSrces, oldScres){
+		var ret = true;
+		if(oldScres && newSrces.length === oldScres.length){
+			newSrces = newSrces.map(flattenSrces);
+			$.each(oldScres, function(i, src){
+				if(newSrces.indexOf(src.src || src) == -1){
+					ret = false;
+					return false;
+				}
+			});
+		} else {
+			ret = false;
+		}
+		return ret;
+	}
+
+	var radioGroup = 0;
+
+	function createGroupList(group){
+		return '<li role="presentation"><label><input type="radio" name="alternate-'+ radioGroup +'" value="'+ group.group +'" /><span>'+ group.label +'</span></label></li>';
+	}
+
+	jme.addToConfigmenu('alternate-media', function($container, media, base, menu){
+		var $menu, timer, alternateSrcData;
+
+		var itemChange = function(e){
+			var value = $.prop(e.target, 'value');
+			if(value && alternateSrcData && alternateSrcData.groups[value]){
+				media.jmeFn('switchAlternateByName', value, alternateSrcData.srces);
+				menu.hide();
+			}
+		};
+		var updateMenuItem = function(){
+			var current;
+			if($menu){
+				current = media.jmeProp('currentAlternateSrc');
+				if(current && current.group){
+					$('[value="'+ current.group +'"]', $menu).prop('checked', true);
+				}
+
+			}
+		};
+		var updateMenu = function(data){
+			if(!$menu || !alternateSrcData || !isSameSrces(data.srces, alternateSrcData.srces)){
+				alternateSrcData = data;
+				radioGroup++;
+
+				var list = $.map(alternateSrcData.groups, createGroupList);
+				if($menu){
+					$menu.remove();
+				}
+				$menu = $('<div class="media-submenu"><ul>'+ list.join('') +'</ul></div>').appendTo($container);
+				$menu.on('change', itemChange);
+			}
+			updateMenuItem();
+		};
+
+		var addRemoveMenu = function(){
+			var data = media.jmeFn('getAlternateSrcData');
+			if(data.groupLength){
+				updateMenu(data);
+			} else if($menu) {
+				$menu.remove();
+				$menu = null;
+				alternateSrcData = null;
+			}
+		};
+		var timedAddRemove = function(){
+			clearTimeout(timer);
+			timer = setTimeout(addRemoveMenu);
+		};
+		addRemoveMenu();
+		media.on('loadstart emptied', timedAddRemove);
+		media.on('loadedmetadata', updateMenuItem);
+	});
+
+
+	webshim.ready('jme-base', function(){
+		webshim.isReady('alternate-media', true);
+	});
+});

data/vendor/assets/javascripts/webshims/shims/jme/{b.js → base.js}

@@ -1,4 +1,4 @@
-webshims.register('jme', function($, webshims, window, doc, undefined){
+webshims.register('jmebase', function($, webshims, window, doc, undefined){
 	"use strict";
 	var props = {};
 	var fns = {};
@@ -9,8 +9,11 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 	
 	webshims.cfg.mediaelement.jme = options;
 
+	if(!$.jme){
+		$.jme = {};
+	}
 
-	$.jme = {
+	$.extend($.jme, {
 		pluginsClasses: [],
 		pluginsSel: '',
 		plugins: {},
@@ -56,6 +59,10 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 			}
 			this.runPlugin('.'+plugin.className);
 		},
+		configmenuPlugins: {},
+		addToConfigmenu: function(name, create){
+			this.configmenuPlugins[name] = create;
+		},
 		defineMethod: function(name, fn){
 			fns[name] = fn;
 		},
@@ -95,7 +102,7 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 				}
 			}
 		}
-	};
+	});
 
 	$.fn.jmeProp = function(name, value){
 		return $.access( this, $.jme.prop, name, value, arguments.length > 1 );
@@ -105,6 +112,10 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 		var args = slice.call( arguments, 1 );
 		var ret;
 		this.each(function(){
+			if(!$.jme.data(this).media){
+				$(this).closest(baseSelector).jmePlayer();
+				webshims.warn('jmeFn called to early or on wrong element!');
+			}
 			ret = (fns[fn] || $.prop(this, fn)).apply(this, args);
 			if(ret !== undefined){
 				return false;
@@ -182,11 +193,9 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 	$.fn.jmePlayer = function(opts){
 
 		return this.each(function(){
-			if(opts){
-				$.jme.data(this, $.extend(true, {}, opts));
-			}
 
-			var mediaUpdateFn, canPlay, removeCanPlay, canplayTimer, lastState, stopEmptiedEvent;
+
+			var mediaUpdateFn, canPlay, removeCanPlay, canplayTimer, lastState, stopEmptiedEvent, forceRender;
 			var media = $('audio, video', this).eq(0);
 			var base = $(this);
 
@@ -198,7 +207,9 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 			mediaData.player = base;
 			mediaData.media = media;
 			if(!jmeData.media){
-
+				forceRender = function(){
+					base[0].className = base[0].className;
+				};
 				removeCanPlay = function(){
 					media.off('canplay', canPlay);
 					clearTimeout(canplayTimer);
@@ -257,6 +268,7 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 					if(state){
 						lastState = state;
 						base.attr('data-state', state);
+						setTimeout(forceRender);
 					}
 				};
 
@@ -340,16 +352,16 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 				return [{src: src}];
 			}
 			srces = $.map($('source', data.media).get(), function(source){
+				var i, len;
 				var src = {
 					src: $.prop(source, 'src')
 				};
-				var tmp = $.attr(source, 'media');
-				if(tmp){
-					src.media = tmp;
-				}
-				tmp = $.attr(source, 'type');
-				if(tmp){
-					src.type = tmp;
+				var attributes = source.attributes;
+
+				for(i = 0, len = attributes.length; i < len; i++){
+					if(!('specified' in attributes[i]) || attributes[i].specified){
+						src[attributes[i].nodeName] = attributes[i].nodeValue;
+					}
 				}
 				return src;
 			});
@@ -421,16 +433,15 @@ webshims.register('jme', function($, webshims, window, doc, undefined){
 			data.player.triggerHandler('controlsadded');
 		}
 	});
-	webshims.isReady('jme', true);
-	webshims.addReady($.jme.initJME);
-	webshims._polyfill(['mediaelement']);
-	webshims.isReady('jme-base', true);
-
-	if(webshims.cfg.debug !== false){
-		$(function(){
-			if(document.getElementsByTagName('video').length && !document.querySelector(baseSelector)){
-				webshims.warn("found video element but video wasn't wrapped inside a ."+ baseSelector +" element. Will not add control UI");
-			}
-		});
-	}
+
+	webshims.ready('DOM mediaelement', function(){
+		webshims.isReady('jme', true);
+		webshims.addReady($.jme.initJME);
+		webshims.isReady('jme-base', true);
+
+		if(webshims.cfg.debug !== false && document.getElementsByTagName('video').length && !document.querySelector(baseSelector)){
+			webshims.warn("found video element but video wasn't wrapped inside a ."+ baseSelector +" element. Will not add control UI");
+		}
+	});
+
 });

data/vendor/assets/javascripts/webshims/shims/jme/controls.css

@@ -1,5 +1,5 @@
 /* thx to http://icomoon.io */
-.mediaplayer[data-state="waiting"] > .jme-media-overlay, .mediaplayer .fullscreen, .mediaplayer .fullscreen.state-exitfullscreen, .mediaplayer[data-state="idle"] > .jme-media-overlay, .mediaplayer button.play-pause, .mediaplayer button.play-pause.state-playing, .mediaplayer .mute-unmute, .mediaplayer[data-volume="medium"] .mute-unmute, .mediaplayer[data-volume="low"] .mute-unmute, .mediaplayer[data-volume="no"] .mute-unmute, .mediaplayer .state-unmute.mute-unmute, .mediaplayer .captions, .mediaplayer .subtitle-menu button[aria-checked="true"], .mediaplayer .subtitle-menu button, .mediaplayer .playlist-next, .mediaplayer .playlist-prev, .mediaplayer[data-state="ended"] > .jme-media-overlay {
+.mediaplayer[data-state="waiting"] > .jme-media-overlay, .mediaplayer .fullscreen, .mediaplayer .fullscreen.state-exitfullscreen, .mediaplayer .mediaconfigmenu, .mediaplayer[data-state="idle"] > .jme-media-overlay, .mediaplayer button.play-pause, .mediaplayer button.play-pause.state-playing, .mediaplayer .mute-unmute, .mediaplayer[data-volume="medium"] .mute-unmute, .mediaplayer[data-volume="low"] .mute-unmute, .mediaplayer[data-volume="no"] .mute-unmute, .mediaplayer .state-unmute.mute-unmute, .mediaplayer .captions, .mediaplayer .subtitle-menu button[aria-checked="true"], .mediaplayer .subtitle-menu button, .mediaplayer .playlist-next, .mediaplayer .playlist-prev, .mediaplayer .chapters, .mediaplayer[data-state="ended"] > .jme-media-overlay {
   font-family: 'jme';
   speak: none;
   font-style: normal;
@@ -25,6 +25,10 @@
   content: "\e605";
 }
 
+.mediaplayer .mediaconfigmenu:before {
+  content: "\e606";
+}
+
 .mediaplayer[data-state="idle"] > .jme-media-overlay:before {
   content: "\e608";
 }
@@ -77,6 +81,10 @@
   content: "\e603";
 }
 
+.mediaplayer .chapters:before {
+  content: "\e615";
+}
+
 .mediaplayer[data-state="ended"] > .jme-media-overlay:before {
   content: "\e601";
 }
@@ -168,6 +176,40 @@
   display: none;
 }
 
+.mediaplayer {
+  /*
+  	.mediachapter-bar {
+  		position: absolute;
+  		top: 0;
+  		left: 0;
+  		right: 0;
+  		bottom: 0;
+  		padding: 0;
+  		margin: 0;
+  		list-style: none;
+  
+  		ul, li {
+  			position: relative;
+  			padding: 0;
+  			margin: 0;
+  			height: 100%;
+  			float: left;
+  			list-style: none;
+  		}
+  		ul {
+  			width: 100%;
+  		}
+  		li {
+  			background: rgba(255, 255, 255, 0.2);
+  		}
+  
+  
+  		span {
+  			display: none;
+  		}
+  	}
+  */
+}
 .mediaplayer button {
   overflow: visible;
   -webkit-appearance: none;
@@ -190,8 +232,10 @@
   font-size: 400%;
   color: #f6f6f6;
   text-align: center;
+  background: url(../styles/transparent.png) \9;
 }
 .mediaplayer > .jme-media-overlay:before {
+  content: '\0020';
   position: absolute;
   display: block;
   width: 1em;
@@ -199,6 +243,7 @@
   top: 50%;
   left: 50%;
   margin: -0.5em 0 0 -0.5em;
+  background: url(../styles/transparent.png) \9;
   text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
 }
 .mediaplayer[data-playersize="x-large"] > .jme-media-overlay {
@@ -219,20 +264,31 @@
 .mediaplayer[data-state="idle"] {
   cursor: pointer;
 }
-.mediaplayer[data-state="idle"].has-ytposter > .jme-media-overlay:before {
+.mediaplayer[data-state="idle"] > .jme-media-overlay {
+  background-position: 1px 1px;
+}
+.mediaplayer[data-state="idle"].has-ytposter.no-backgroundsize > .jme-media-overlay:before {
   content: "";
+  background-position: 2px 2px;
 }
 .mediaplayer[data-state="ended"] {
   cursor: pointer;
 }
+.mediaplayer[data-state="ended"] > .jme-media-overlay {
+  background-position: 3px 3px;
+}
 .mediaplayer[data-state="waiting"] {
   cursor: default;
 }
 .mediaplayer[data-state="waiting"] > .jme-media-overlay {
+  background-position: 4px 4px;
+}
+.mediaplayer[data-state="waiting"] > .jme-media-overlay:before {
   animation-name: jmespin;
   animation-iteration-count: infinite;
   animation-duration: 1100ms;
   animation-timing-function: linear;
+  background-position: 5px 5px;
 }
 .mediaplayer[data-state="playing"][data-useractivity="false"] .jme-controlbar {
   opacity: 0;
@@ -245,6 +301,21 @@
 .mediaplayer[data-state="playing"][data-useractivity="false"] .cue-display span.cue-wrapper {
   bottom: -35px;
 }
+.mediaplayer .ws-poster {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #000 no-repeat center / contain;
+}
+.mediaplayer.initial-state .ws-poster {
+  display: block;
+}
+.mediaplayer.no-poster .ws-poster, .mediaplayer.no-backgroundsize div.ws-poster {
+  display: none;
+}
 .mediaplayer > .jme-controlbar {
   position: absolute;
   left: 0;
@@ -288,12 +359,10 @@
 .mediaplayer .playlist-container {
   display: none;
 }
-.mediaplayer.has-playlist .playlist-container {
+.mediaplayer .playlist-box,
+.mediaplayer .playlist-button-container, .mediaplayer.has-playlist .playlist-container {
   display: table-cell;
 }
-.mediaplayer .playlist-box {
-  width: 3.09em;
-}
 .mediaplayer .no-volume-api .volume-container,
 .mediaplayer .no-volume-api .mute-container {
   padding: 0;
@@ -302,6 +371,12 @@
 .mediaplayer .no-volume-api .volume-slider {
   display: none;
 }
+.mediaplayer .chapters-container {
+  display: none;
+}
+.mediaplayer.has-chapter-tracks .chapters-container {
+  display: table-cell;
+}
 .mediaplayer .captions[role="checkbox"] {
   color: #999;
 }
@@ -318,66 +393,82 @@
 .mediaplayer[data-tracks="many"] .captions[role="checkbox"] {
   display: none;
 }
-.mediaplayer .subtitle-controls {
+.mediaplayer .mediamenu-wrapper {
   position: relative;
   zoom: 1;
 }
-.mediaplayer .subtitle-menu {
+.mediaplayer .mediamenu {
   position: absolute;
   bottom: 1.75em;
-  margin-bottom: 10px;
+  margin-bottom: 3px;
   width: 400px;
   right: -0.625em;
   visibility: hidden;
 }
-.mediaplayer .subtitle-menu ul, .mediaplayer .subtitle-menu li {
+.mediaplayer .mediamenu h5 {
+  font-size: 100%;
+  margin: 0.3125em 0;
+  padding: 0;
+}
+.mediaplayer .mediamenu ul, .mediaplayer .mediamenu li {
   margin: 0;
   padding: 0;
   list-style: none;
 }
-.mediaplayer .subtitle-menu button {
+.mediaplayer .mediamenu li > ul {
+  margin-left: 10px;
+}
+.mediaplayer .mediamenu button {
   position: relative;
+  display: block;
   zoom: 1;
-  width: auto;
+  width: 100%;
+  text-align: left;
   height: auto;
   padding: 2px;
   font-size: 81.3%;
 }
-.mediaplayer .subtitle-menu button:before {
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0 5px 0 0;
-}
-.mediaplayer .subtitle-menu > div {
+.mediaplayer .mediamenu > div {
   position: relative;
   zoom: 1;
   visibility: hidden;
   float: right;
-  padding: 0.1875em 0.3125em 0.3125em;
+  padding: 0.3125em;
   background: #333;
   background: rgba(0, 0, 0, 0.6);
   opacity: 0;
-  transform: translateY(30%);
+  transform: translateY(-3%);
   transition: all 200ms;
 }
-.mediaplayer .subtitle-menu > div:after {
-  content: " ";
-  position: absolute;
-  display: block;
-  bottom: -0.625em;
-  right: 0.8125em;
-  width: 0px;
-  height: 0px;
-  border-style: solid;
-  border-width: 0.625em 0.5em 0 0.5em;
-  border-color: #333 transparent transparent transparent;
-  border-color: rgba(0, 0, 0, 0.6) transparent transparent transparent;
-}
-.mediaplayer .subtitle-menu.visible-menu > div {
+.mediaplayer .mediamenu > div > .media-submenu {
+  margin: 0.3125em 0;
+  padding: 0.3125em 0;
+  border-top: 0.0625em solid #eeeeee;
+  border-top: 0.0625em solid rgba(255, 255, 255, 0.4);
+}
+.mediaplayer .mediamenu > div > .media-submenu:first-child {
+  margin-top: 0;
+  border-top: none;
+}
+.mediaplayer .mediamenu > div iframe {
+  visibility: inherit !important;
+}
+.mediaplayer .mediamenu.visible-menu > div {
   visibility: visible;
   opacity: 1;
   transform: translateY(0);
 }
+.mediaplayer .subtitle-menu button:before {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 5px 0 0;
+}
+.mediaplayer .mediaconfig-container {
+  display: none;
+}
+.mediaplayer.has-config-menu .mediaconfig-container {
+  display: table-cell;
+}
 .mediaplayer .buffer-progress {
   position: absolute;
   top: 0;
@@ -409,7 +500,6 @@
 }
 .mediaplayer .time-select {
   display: inline-block;
-  width: 0;
   overflow: hidden;
   text-align: center;
   visibility: hidden;
@@ -418,14 +508,14 @@
   background: #333;
   background: rgba(0, 0, 0, 0.6);
   color: #eee;
-}
-.mediaplayer .time-select.show-time-select {
-  margin: 0 0 4px -1.55em;
+  bottom: 1.25em;
+  margin: 0 0 4px 0;
   padding: 0.25em 0.125em 0.125em;
   min-width: 2.8em;
+}
+.mediaplayer .time-select.show-time-select {
   opacity: 1;
   visibility: visible;
-  bottom: 1.25em;
 }
 .mediaplayer .ws-range-track {
   top: 0;