Show picture-in-picture btn only when the content has video

1. When playing an audio-only asset, the Picture-in-Picture button on
the UI shows up. Pressing the button, however, results in an error.
We should only display the Picture-in-Picture button when the content
has video.
2. When it's in the picture-in-picture mode and an audio only content is
loaded, both the main window and the picture-in-picture window get
stuck.
We should exit the picture-in-picture window when the audio only content
is loaded.

Closes #1849

Change-Id: I37bc82677108828a05ba26ad8aa081b90e137548

test/ui/ui_unit.js

@@ -293,6 +293,33 @@ describe('UI', function() {
         expect(display).not.toEqual('none');
       });
 
+      it('allows picture-in-picture only when the content has video',
+          async () => {
+        // Load fake content that contains only audio.
+        const manifest = new shaka.test.ManifestGenerator()
+            .addPeriod(/* startTime= */ 0)
+              .addVariant(/* id= */ 0)
+                .addAudio(/* id= */ 1)
+            .build();
+
+        const parser = new shaka.test.FakeManifestParser(manifest);
+        const factory = function() { return parser; };
+
+        await player.load(/* uri= */ 'fake', /* startTime= */ 0, factory);
+        const pipButtons =
+            videoContainer.getElementsByClassName('shaka-pip-button');
+        expect(pipButtons.length).toBe(1);
+        const pipButton = pipButtons[0];
+
+        // The picture-in-picture button should not be shown when the content
+        // only has audio.
+        expect(pipButton.classList.contains('shaka-hidden')).toBe(true);
+
+        // The picture-in-picture window should not be open when the content
+        // only has audio.
+        expect(document.pictureInPictureElement).toBeFalsy();
+      });
+
       it('is accessible', function() {
         for (let button of overflowMenu.childNodes) {
           expect(/** @type {!HTMLElement} */ (button)

ui/pip_button.js

@@ -104,6 +104,10 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
     this.eventManager.listen(this.controls, 'caststatuschange', (e) => {
         this.onCastStatusChange_(e);
       });
+
+    this.eventManager.listen(this.player, 'trackschanged', () => {
+        this.onTracksChanged_();
+      });
   }
 
 
@@ -199,6 +203,25 @@ shaka.ui.PipButton = class extends shaka.ui.Element {
       }
     }
   }
+
+
+  /**
+   * Display the picture-in-picture button only when the content contains video.
+   * If it's displaying in picture-in-picture mode, and an audio only content is
+   * loaded, exit the picture-in-picture display.
+   * @return {!Promise}
+   * @private
+   */
+  async onTracksChanged_() {
+    if (this.player && this.player.isAudioOnly()) {
+      shaka.ui.Utils.setDisplay(this.pipButton_, false);
+      if (document.pictureInPictureElement) {
+        await document.exitPictureInPicture();
+      }
+    } else {
+      shaka.ui.Utils.setDisplay(this.pipButton_, true);
+    }
+  }
 };