fix(UI): Sync volume and mute values when loading a new content or casting (#8487)

Author: avelad

ui/mute_button.js

@@ -91,6 +91,16 @@ shaka.ui.MuteButton = class extends shaka.ui.Element {
       this.updateIcon_();
     });
 
+    this.eventManager.listen(this.player, 'loading', () => {
+      this.updateLocalizedStrings_();
+      this.updateIcon_();
+    });
+
+    this.eventManager.listen(this.controls, 'caststatuschanged', () => {
+      this.updateLocalizedStrings_();
+      this.updateIcon_();
+    });
+
     this.eventManager.listen(this.adManager,
         shaka.ads.Utils.AD_VOLUME_CHANGED, () => {
           this.updateLocalizedStrings_();

ui/volume_bar.js

@@ -40,6 +40,14 @@ shaka.ui.VolumeBar = class extends shaka.ui.RangeElement {
         'volumechange',
         () => this.onPresentationVolumeChange_());
 
+    this.eventManager.listen(this.player,
+        'loading',
+        () => this.onPresentationVolumeChange_());
+
+    this.eventManager.listen(this.controls,
+        'caststatuschanged',
+        () => this.onPresentationVolumeChange_());
+
     this.eventManager.listen(this.adManager,
         shaka.ads.Utils.AD_VOLUME_CHANGED,
         () => this.onAdVolumeChange_());