mediaelement_rails 0.8.0 → 0.8.1

data/app/assets/stylesheets/mediaelement_rails/mediaelementplayer.css.erb

@@ -1,3 +1,13 @@
+.mejs-offscreen{
+/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). */
+	position: absolute !important;
+	top: -10000px;
+	left: -10000px;
+	overflow: hidden;
+	width: 1px;
+	height: 1px;
+}
+
 .mejs-container {
 	position: relative;
 	background: #000;
@@ -97,7 +107,7 @@
 	background: url(<%= asset_path "mediaelement_rails/bigplay.svg" %>) no-repeat;
 }
 
-.no-svg .mejs-overlay-button { 
+.no-svg .mejs-overlay-button {
 	background-image: url(<%= asset_path "mediaelement_rails/bigplay.png" %>);
 }
 
@@ -143,11 +153,11 @@
 	background: url(<%= asset_path "mediaelement_rails/background.png" %>);
 	background: rgba(0, 0, 0, 0.7);
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7)));
-	background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 
+	background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
 	background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
-	background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 
-	background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 	
-	background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 	
+	background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
+	background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
+	background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
 	height: 30px;
 	width: 100%;
 }
@@ -181,11 +191,11 @@
 	background: transparent url(<%= asset_path "mediaelement_rails/controls.svg" %>) no-repeat;
 }
 
-.no-svg .mejs-controls .mejs-button button { 
+.no-svg .mejs-controls .mejs-button button {
 	background-image: url(<%= asset_path "mediaelement_rails/controls.png" %>);
 }
 
-/* :focus for accessibility */
+	/* :focus for accessibility */
 .mejs-controls .mejs-button button:focus {
 	outline: dotted 1px #999;
 }
@@ -198,7 +208,7 @@
 	display: block;
 	height: 17px;
 	width: auto;
-	padding: 8px 3px 0 3px ;
+	padding: 10px 3px 0 3px ;
 	overflow: hidden;
 	text-align: center;
 	-moz-box-sizing: content-box;
@@ -206,7 +216,7 @@
 	box-sizing: content-box;
 }
 
-.mejs-container .mejs-controls .mejs-time span {
+.mejs-container .mejs-controls .mejs-time a {
 	color: #fff;
 	font-size: 11px;
 	line-height: 12px;
@@ -238,7 +248,7 @@
 	padding-top: 5px;
 }
 
-.mejs-controls .mejs-time-rail span {
+.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a {
 	display: block;
 	position: absolute;
 	width: 180px;
@@ -254,7 +264,7 @@
 	background: #333;
 	background: rgba(50,50,50,0.8);
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
-	background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 
+	background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
 	background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
 	background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
 	background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
@@ -289,7 +299,7 @@
 .mejs-controls .mejs-time-rail .mejs-time-loaded {
 	background: #3caac8;
 	background: rgba(60,170,200,0.8);
-	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8))); 
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8)));
 	background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
 	background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
 	background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8));
@@ -303,7 +313,7 @@
 	background: rgba(255,255,255,0.8);
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
 	background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
-	background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 
+	background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
 	background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
 	background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
 	background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
@@ -473,10 +483,13 @@
 }
 
 /* horizontal version */
-.mejs-controls div.mejs-horizontal-volume-slider {
+.mejs-controls a.mejs-horizontal-volume-slider {
 	height: 26px;
-	width: 60px;
+	width: 56px;
 	position: relative;
+    display: block;
+    float: left;
+    vertical-align: middle;
 }
 
 .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
@@ -490,11 +503,11 @@
 	font-size: 1px;
 	-webkit-border-radius: 2px;
 	-moz-border-radius: 2px;
-	border-radius: 2px;	
+	border-radius: 2px;
 	background: #333;
 	background: rgba(50,50,50,0.8);
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
-	background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); 
+	background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
 	background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
 	background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
 	background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
@@ -517,7 +530,7 @@
 	background: rgba(255,255,255,0.8);
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
 	background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
-	background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); 
+	background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
 	background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
 	background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
 	background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
@@ -541,13 +554,13 @@
 	visibility: hidden;
 	position: absolute;
 	bottom: 26px;
-	right: -10px;
-	width: 130px;
+	right: -51px;
+	width: 85px;
 	height: 100px;
 	background: url(<%= asset_path "mediaelement_rails/background.png" %>);
 	background: rgba(50,50,50,0.7);
 	border: solid 1px transparent;
-	padding: 10px;
+	padding: 10px 10px 0 10px;
 	overflow: hidden;
 	-webkit-border-radius: 0;
 	-moz-border-radius: 0;
@@ -584,7 +597,7 @@
 }
 
 .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
-	width: 100px;
+	width: 55px;
 	float: left;
 	padding: 4px 0 0 0;
 	line-height: 15px;
@@ -616,8 +629,8 @@
 	background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
 	background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
 	background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7));
-	background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); 
-	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);		
+	background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7));
+	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000);
 	overflow: hidden;
 	border: 0;
 }
@@ -645,7 +658,7 @@
 	background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
 	background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6));
 	background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
-	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);		
+	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
 }
 
 .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
@@ -672,8 +685,8 @@
 	bottom: 0;
 	left: 0;
 	text-align:center;
-	line-height: 22px;
-	font-size: 12px;
+	line-height: 20px;
+	font-size: 16px;
 	color: #fff;
 }
 
@@ -695,14 +708,14 @@
 }
 
 .mejs-captions-position-hover {
-	bottom: 45px;
+	bottom: 35px;
 }
 
 .mejs-captions-text {
 	padding: 3px 5px;
 	background: url(<%= asset_path "mediaelement_rails/background.png" %>);
-	background: rgba(20, 20, 20, 0.8);
-
+	background: rgba(20, 20, 20, 0.5);
+	white-space: pre-wrap;
 }
 /* End: Track (Captions and Chapters) */
 
@@ -766,7 +779,7 @@
 	height: 1px;
 	font-size: 0;
 	margin: 5px 6px;
-	background: #333;	
+	background: #333;
 }
 
 .mejs-contextmenu .mejs-contextmenu-item {
@@ -774,7 +787,7 @@
 	font-size: 12px;
 	padding: 4px 6px;
 	cursor: pointer;
-	color: #333;	
+	color: #333;
 }
 .mejs-contextmenu .mejs-contextmenu-item:hover {
 	background: #2C7C91;
@@ -868,3 +881,101 @@
 	cursor: pointer;
 }
 /* End: Postroll */
+
+
+/* Start: Speed */
+div.mejs-speed-button {
+	width: 46px !important;
+	position: relative;
+}
+
+.mejs-controls .mejs-button.mejs-speed-button button {
+	background: transparent;
+	width: 36px;
+	font-size: 11px;
+	line-height: normal;
+	color: #ffffff;
+}
+
+.mejs-controls .mejs-speed-button .mejs-speed-selector {
+	visibility: hidden;
+	position: absolute;
+	top: -100px;
+	left: -10px;
+	width: 60px;
+	height: 100px;
+	background: url(<%= asset_path "mediaelement_rails/background.png" %>);
+	background: rgba(50, 50, 50, 0.7);
+	border: solid 1px transparent;
+	padding: 0;
+	overflow: hidden;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+	border-radius: 0;
+}
+
+.mejs-controls .mejs-speed-button:hover > .mejs-speed-selector {
+	visibility: visible;
+}
+
+.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected {
+	color: rgba(33, 248, 248, 1);
+}
+
+.mejs-controls .mejs-speed-button .mejs-speed-selector ul {
+	margin: 0;
+	padding: 0;
+	display: block;
+	list-style-type: none !important;
+	overflow: hidden;
+}
+
+.mejs-controls .mejs-speed-button .mejs-speed-selector ul li {
+	margin: 0 0 6px 0;
+	padding: 0 10px;
+	list-style-type: none !important;
+	display: block;
+	color: #fff;
+	overflow: hidden;
+}
+
+.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input {
+	clear: both;
+	float: left;
+	margin: 3px 3px 0 5px;
+	display: none;
+}
+
+.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label {
+	width: 60px;
+	float: left;
+	padding: 4px 0 0 0;
+	line-height: 15px;
+	font-family: helvetica, arial;
+	font-size: 11.5px;
+	color: white;
+	margin-left: 5px;
+	cursor: pointer;
+}
+
+.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover {
+	background-color: rgb(200, 200, 200) !important;
+	background-color: rgba(255,255,255,.4) !important;
+}
+/* End: Speed */
+
+/* Start: Skip Back */
+
+.mejs-controls .mejs-button.mejs-skip-back-button {
+	background: transparent url(<%= asset_path "mediaelement_rails/skipback.png" %>) no-repeat;
+	background-position: 3px 3px;
+}
+.mejs-controls .mejs-button.mejs-skip-back-button button {
+	background: transparent;
+	font-size: 9px;
+	line-height: normal;
+	color: #ffffff;
+}
+
+/* End: Skip Back */
+

data/lib/mediaelement_rails/version.rb

@@ -1,3 +1,3 @@
 module MediaelementRails
-  VERSION = '0.8.0'
+  VERSION = '0.8.1'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mediaelement_rails
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.8.1
 platform: ruby
 authors:
 - Mark Oleson
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-04-12 00:00:00.000000000 Z
+date: 2015-05-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -140,14 +140,17 @@ files:
 - README.md
 - Rakefile
 - app/assets/images/mediaelement_rails/background.png
+- app/assets/images/mediaelement_rails/bigplay.fw.png
 - app/assets/images/mediaelement_rails/bigplay.png
 - app/assets/images/mediaelement_rails/bigplay.svg
 - app/assets/images/mediaelement_rails/controls-ted.png
 - app/assets/images/mediaelement_rails/controls-wmp-bg.png
 - app/assets/images/mediaelement_rails/controls-wmp.png
+- app/assets/images/mediaelement_rails/controls.fw.png
 - app/assets/images/mediaelement_rails/controls.png
 - app/assets/images/mediaelement_rails/controls.svg
 - app/assets/images/mediaelement_rails/loading.gif
+- app/assets/images/mediaelement_rails/skipback.png
 - app/assets/javascripts/mediaelement_rails/index.js
 - app/assets/javascripts/mediaelement_rails/mediaelement.js
 - app/assets/javascripts/mediaelement_rails/mediaelementplayer.js
@@ -221,7 +224,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.2.2
+rubygems_version: 2.4.6
 signing_key: 
 specification_version: 4
 summary: MediaElement.js for Rails