Fix display for current language on change

5 files changed, 31 insertions, 22 deletions

diff --git a/src/js/controls.js b/src/js/controls.js
index 503aecb8..7b1eada6 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -542,12 +542,7 @@ const controls = {
 
         switch (setting) {
             case 'captions':
-                value = this.captions.language;
-
-                if (!this.captions.enabled) {
-                    value = '';
-                }
-
+                value = this.captions.enabled ? this.captions.language : '';
                 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)) {
-            return;
+        if (utils.is.htmlElement(target)) {
+            // Check it
+            target.checked = true;
         }
-
-        // 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
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 7f64375c..186dd70d 100644
--- a/src/js/listeners.js
+++ b/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,14 +308,11 @@ const listeners = {
 
         // Caption language change
         utils.on(this.media, 'languagechange', () => {
-            // Save to storage
-            storage.set.call(this, { language: this.language });
-        });
+            // Update UI
+            controls.updateSetting.call(this, 'captions');
 
-        // Volume change
-        utils.on(this.media, 'volumechange', () => {
             // Save to storage
-            storage.set.call(this, { volume: this.volume, muted: this.muted });
+            storage.set.call(this, { language: this.language });
         });
 
         // Captions toggle
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 21d34beb..4ac2ce99 100644
--- a/src/js/plugins/vimeo.js
+++ b/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');
             }
         });
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
index 56e05ddf..ad0fc79f 100644
--- a/src/less/components/captions.less
+++ b/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;
diff --git a/src/less/lib/animation.less b/src/less/lib/animation.less
index 4165a7f7..4c8628e0 100644
--- a/src/less/lib/animation.less
+++ b/src/less/lib/animation.less
@@ -19,3 +19,13 @@
         opacity: 1;
     }
 }
+
+@keyframes plyr-fade-in {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}