Tweaks

3 files changed, 23 insertions, 15 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 98009041..0d6a2481 100644
--- a/src/js/plyr.js
+++ b/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('.', '');
@@ -1150,8 +1158,7 @@
                         break;
                 }
 
-                var label = document.createTextNode('% ' + suffix.toLowerCase());
-                progress.appendChild(label);
+                progress.textContent = '% ' + suffix.toLowerCase();
             }
 
             elements.display[type] = progress;
@@ -1228,8 +1235,7 @@
                         class: config.classes.tooltip
                     });
 
-                    var value = document.createTextNode('00:00');
-                    tooltip.appendChild(value);
+                    tooltip.textContent = '00:00';
                     container.appendChild(tooltip);
                 }
 
@@ -1819,7 +1825,7 @@
                 var content = createElement('span');
 
                 // Empty the container
-                captions.innerHTML = '';
+                emptyElement(captions);
 
                 // Default to empty
                 if (is.undefined(caption)) {
@@ -1837,7 +1843,7 @@
                 captions.appendChild(content);
 
                 // Force redraw (for Safari)
-                var redraw = captions.offsetHeight;
+                // var redraw = captions.offsetHeight;
             }
         }
 
@@ -1957,8 +1963,10 @@
 
             // Set global
             plyr.captionsEnabled = show;
-            elements.buttons.captions_menu.innerHTML = show ? 'Off' : 'On';
-            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(elements.buttons.captions, plyr.captionsEnabled);
@@ -3321,14 +3329,14 @@
             plyr.secs = ('0' + plyr.secs).slice(-2);
             plyr.mins = ('0' + plyr.mins).slice(-2);
 
-            // Generate display
-            var display = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
+            // Generate label
+            var label = (displayHours ? plyr.hours + ':' : '') + plyr.mins + ':' + plyr.secs;
 
             // Render
-            element.innerHTML = display;
+            element.textContent = label;
 
             // Return for looping
-            return display;
+            return label;
         }
 
         // Show the duration on metadataloaded
diff --git a/src/less/variables.less b/src/less/variables.less
index 5abe3464..bcc80a02 100644
--- a/src/less/variables.less
+++ b/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);
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index da75f11a..39b147da 100644
--- a/src/scss/variables.scss
+++ b/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;