Fix display for current language on change

src/js/controls.js

@@ -542,12 +542,7 @@ const controls = {
 
         switch (setting) {
             case 'captions':
-                value = this.captions.language;
+                value = this.captions.enabled ? this.captions.language : '';
-
-                if (!this.captions.enabled) {
-                    value = '';
-                }
-
                 break;
 
             default:
@@ -578,19 +573,19 @@ const controls = {
             list = pane && pane.querySelector('ul');
         }
 
+        // Update the label
+        if (!utils.is.empty(value)) {
+            const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
+            label.innerHTML = controls.getLabel.call(this, setting, value);
+        }
+
         // Find the radio option
         const target = list && list.querySelector(`input[value="${value}"]`);
 
-        if (!utils.is.htmlElement(target)) {
+        if (utils.is.htmlElement(target)) {
-            return;
-        }
-
             // Check it
             target.checked = true;
-
+        }
-        // Find the label
-        const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`);
-        label.innerHTML = controls.getLabel.call(this, setting, value);
     },
 
     // Set the looping options

src/js/listeners.js

@@ -282,6 +282,12 @@ const listeners = {
             );
         }
 
+        // Volume change
+        utils.on(this.media, 'volumechange', () => {
+            // Save to storage
+            storage.set.call(this, { volume: this.volume, muted: this.muted });
+        });
+
         // Speed change
         utils.on(this.media, 'ratechange', () => {
             // Update UI
@@ -302,16 +308,13 @@ const listeners = {
 
         // Caption language change
         utils.on(this.media, 'languagechange', () => {
+            // Update UI
+            controls.updateSetting.call(this, 'captions');
+
             // Save to storage
             storage.set.call(this, { language: this.language });
         });
 
-        // Volume change
-        utils.on(this.media, 'volumechange', () => {
-            // Save to storage
-            storage.set.call(this, { volume: this.volume, muted: this.muted });
-        });
-
         // Captions toggle
         utils.on(this.media, 'captionsenabled captionsdisabled', () => {
             // Update UI

src/js/plugins/vimeo.js

@@ -275,8 +275,8 @@ const vimeo = {
             player.media.buffered = data.percent;
             utils.dispatchEvent.call(player, player.media, 'progress');
 
+            // Check all loaded
             if (parseInt(data.percent, 10) === 1) {
-                // Trigger event
                 utils.dispatchEvent.call(player, player.media, 'canplaythrough');
             }
         });

src/less/components/captions.less

@@ -16,6 +16,7 @@
     padding: @plyr-control-spacing;
     transform: translateY(-(@plyr-control-spacing * 4));
     transition: transform 0.4s ease-in-out;
+    animation: plyr-fade-in 0.3s ease;
     color: @plyr-captions-color;
     font-size: @plyr-font-size-captions-small;
     text-align: center;

src/less/lib/animation.less

@@ -19,3 +19,13 @@
         opacity: 1;
     }
 }
+
+@keyframes plyr-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}