refactor(picture-in-picture): audio mode change handler method

src/js/control-bar/picture-in-picture-toggle.js

@@ -36,21 +36,7 @@ class PictureInPictureToggle extends Button {
 
     this.on(player, ['enterpictureinpicture', 'leavepictureinpicture'], (e) => this.handlePictureInPictureChange(e));
     this.on(player, ['disablepictureinpicturechanged', 'loadedmetadata'], (e) => this.handlePictureInPictureEnabledChange(e));
-
-    this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => {
-      // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
-      const isSourceAudio = player.currentType().substring(0, 5) === 'audio';
-
-      if (isSourceAudio || player.audioPosterMode() || player.audioOnlyMode()) {
-        if (player.isInPictureInPicture()) {
-          player.exitPictureInPicture();
-        }
-        this.hide();
-      } else {
-        this.show();
-      }
-
-    });
+    this.on(player, ['loadedmetadata', 'audioonlymodechange', 'audiopostermodechange'], () => this.handlePictureInPictureAudioModeChange());
 
     // TODO: Deactivate button on player emptied event.
     this.disable();
@@ -66,6 +52,29 @@ class PictureInPictureToggle extends Button {
     return `vjs-picture-in-picture-control ${super.buildCSSClass()}`;
   }
 
+  /**
+   * Displays or hides the button depending on the audio mode detection.
+   * Exits picture-in-picture if it is enabled when switching to audio mode.
+   */
+  handlePictureInPictureAudioModeChange() {
+    // This audio detection will not detect HLS or DASH audio-only streams because there was no reliable way to detect them at the time
+    const isSourceAudio = this.player_.currentType().substring(0, 5) === 'audio';
+    const isAudioMode =
+      isSourceAudio || this.player_.audioPosterMode() || this.player_.audioOnlyMode();
+
+    if (!isAudioMode) {
+      this.show();
+
+      return;
+    }
+
+    if (this.player_.isInPictureInPicture()) {
+      this.player_.exitPictureInPicture();
+    }
+
+    this.hide();
+  }
+
   /**
    * Enables or disables button based on document.pictureInPictureEnabled property value
    * or on value returned by player.disablePictureInPicture() method.