Merge branch 'develop' of github.com:Selz/plyr into develop

# Conflicts:
#	dist/plyr.js
#	src/js/plyr.js

src/js/plyr.js

@@ -492,7 +492,7 @@
 
         // Add text node
         if (is.string(text)) {
-            element.appendChild(document.createTextNode(text));
+            element.textContent = text;
         }
 
         // Return built element
@@ -508,6 +508,14 @@
         prependChild(parent, element);
     }
 
+    // Remove all child elements
+    function emptyElement(element) {
+        var length = element.childNodes.length;
+        while (length--) {
+            element.removeChild(element.lastChild);
+        }
+    }
+
     // Get a classname from selector
     function getClassname(selector) {
         return selector.replace('.', '');
@@ -981,8 +989,8 @@
                 attributes.forEach(function(attribute) {
                     insertElement(type, player.elements.media, attribute);
                 });
+                }
             }
-        }
 
         // Get icon URL
         function getIconUrl() {
@@ -1159,8 +1167,7 @@
                         break;
                 }
 
-                var label = document.createTextNode('% ' + suffix.toLowerCase());
+                progress.textContent = '% ' + suffix.toLowerCase();
-                progress.appendChild(label);
             }
 
             player.elements.display[type] = progress;
@@ -1389,7 +1396,7 @@
                                 config.tracks.forEach(function(track, index) {
                                     if (is.function(track)) {
                                         return;
-                                    }
+                }
 
                                     var option = createElement('li');
 
@@ -1404,7 +1411,7 @@
                                 });
                             }
                             break;
-                    }
+                }
 
                     pane.appendChild(options);
 
@@ -1937,7 +1944,7 @@
                 var content = createElement('span');
 
                 // Empty the container
-                captions.innerHTML = '';
+                emptyElement(captions);
 
                 // Default to empty
                 if (is.undefined(caption)) {
@@ -2079,6 +2086,10 @@
             //player.elements.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
             //TODO: display lang getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
 
+            // Set current language etc
+            //elements.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
+            //getElement('[data-captions="settings"]').innerHTML = getSubsLangValue();
+
             // Toggle state
             toggleState(player.elements.buttons.captions, player.captions.enabled);
 
@@ -3083,7 +3094,7 @@
             // It should be a number, but parse it just incase
             var duration = parseInt(config.duration);
 
-            // True duration
+                // True duration
             var mediaDuration = 0;
 
             // Only if duration available
@@ -3449,10 +3460,10 @@
             var display = (displayHours ? hours + ':' : '') + mins + ':' + secs;
 
             // Render
-            element.innerHTML = display;
+            element.textContent = label;
 
             // Return for looping
-            return display;
+            return label;
         }
 
         // Show the duration on metadataloaded

src/less/variables.less

@@ -17,7 +17,7 @@
 @plyr-font-size-base:                   16px;
 
 // Captions
-@plyr-captions-bg:                      fade(#000, 85%);
+@plyr-captions-bg:                      fade(#000, 60%);
 @plyr-captions-color:                   #fff;
 @plyr-font-size-captions-base:          @plyr-font-size-base;
 @plyr-font-size-captions-medium:        ceil(@plyr-font-size-base * 1.5);

src/scss/variables.scss

@@ -18,7 +18,7 @@ $plyr-font-size-small:                  14px !default;
 $plyr-font-size-base:                   16px !default;
 
 // Captions
-$plyr-captions-bg:                      transparentize(#000, .3) !default;
+$plyr-captions-bg:                      transparentize(#000, .4) !default;
 $plyr-captions-color:                   #fff !default;
 $plyr-font-size-captions-base:          $plyr-font-size-base !default;
 $plyr-font-size-captions-medium:        ceil($plyr-font-size-base * 1.5) !default;