Merge remote-tracking branch 'origin/develop' into update/feature-flags-and-new-posts

src/index.js

@@ -46,7 +46,7 @@ import ErrorPage from './js/pages/Error';
  * Settings
  */
 import { loadSetting } from './js/utils/settings';
-import { SETTING_KEY_TOGGLE_OFFLINE, SETTING_KEY_DARK_MODE } from './js/constants';
+import { SETTING_KEY_TOGGLE_OFFLINE, SETTING_KEY_DARK_MODE, CAST_BUTTON_HIDDEN_CLASSNAME } from './js/constants';
 
 /**
  * Custom Elements definition.
@@ -170,16 +170,31 @@ window.kinoInitGoogleCast = (function kinoInitGoogleCastIIFE() {
   return () => {
     if (!castButtonPromise) {
       castButtonPromise = new Promise((resolve) => {
+        const castButton = document.createElement('button');
+        const castCustomElement = document.createElement('google-cast-launcher');
+
+        castButton.setAttribute('aria-label', 'Cast this video');
+        castButton.appendChild(castCustomElement);
+
+        const applyCastState = () => {
+          const castState = window.cast.framework.CastContext.getInstance().getCastState();
+
+          castButton.classList.toggle(
+            CAST_BUTTON_HIDDEN_CLASSNAME,
+            castState === 'NO_DEVICES_AVAILABLE',
+          );
+        };
+
         const initCastApi = () => {
           window.cast.framework.CastContext.getInstance().setOptions({
             receiverApplicationId: window.chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
           });
 
-          const castButton = document.createElement('button');
-          const castCustomElement = document.createElement('google-cast-launcher');
-
-          castButton.setAttribute('aria-label', 'Cast this video');
-          castButton.appendChild(castCustomElement);
+          window.cast.framework.CastContext.getInstance().addEventListener(
+            window.cast.framework.CastContextEventType.CAST_STATE_CHANGED,
+            applyCastState,
+          );
+          applyCastState();
 
           resolve(castButton);
         };

src/js/classes/DownloadManager.js

@@ -226,7 +226,11 @@ export default class DownloadManager {
    */
   forcePause() {
     this.pause();
-    this.internal.videoDownloader.downloading = false;
+
+    if (document) {
+      const pauseEvent = new CustomEvent('pausedownload', { detail: this.videoId });
+      document.dispatchEvent(pauseEvent);
+    }
   }
 
   /**

src/js/classes/VideoDownloaderRegistry.js

@@ -27,6 +27,10 @@ export default class VideoDownloaderRegistry {
   constructor({ connectionStatus }) {
     this.instances = new Map();
     this.connectionStatus = connectionStatus;
+
+    if (document) {
+      document.addEventListener('pausedownload', this.onPauseDownload.bind(this));
+    }
   }
 
   /**
@@ -67,4 +71,18 @@ export default class VideoDownloaderRegistry {
   destroyAll() {
     this.instances.clear();
   }
+
+  /**
+   * When a pause request is received, we need to pause the download.
+   *
+   * @param {CustomEvent} e Pause event.
+   * @param {string} e.detail Video ID.
+   */
+  onPauseDownload(e) {
+    const downloaderInstance = this.get(e.detail);
+
+    if (downloaderInstance) {
+      downloaderInstance.downloading = false;
+    }
+  }
 }

src/js/constants.js

@@ -137,6 +137,7 @@ export const PIP_CLASSNAME = 'picture-in-picture';
 export const CAST_CLASSNAME = 'cast';
 export const CAST_HAS_TARGET_NAME = 'cast-has-target';
 export const CAST_TARGET_NAME = 'cast-target-name';
+export const CAST_BUTTON_HIDDEN_CLASSNAME = 'hidden';
 
 /**
  * Stats overlay.

src/js/web-components/video-player/VideoPlayer.css

@@ -38,6 +38,10 @@
   border: none;
 }
 
+:host .floating-buttons > button.hidden {
+  display: none;
+}
+
 button google-cast-launcher {
   height: 24px;
   width: auto;

src/js/web-components/video-player/VideoPlayer.js

@@ -32,7 +32,7 @@ import decryptVideo from '../../utils/decryptVideo';
 import { getMediaConfigurationAudio, getMediaConfigurationVideo } from '../../utils/getMediaConfiguration';
 import getDecodingInfo from '../../utils/getDecodingInfo';
 
-export default class extends HTMLElement {
+export default class VideoPlayer extends HTMLElement {
   /**
    * @param {VideoDownloader} downloader Video downloader associated with the current video.
    */
@@ -424,6 +424,10 @@ export default class extends HTMLElement {
       pipButton.disabled = true;
       try {
         if (this !== document.pictureInPictureElement) {
+          // If another video is already in PiP, pause it.
+          if (document.pictureInPictureElement instanceof VideoPlayer) {
+            document.pictureInPictureElement.videoElement.pause();
+          }
           await this.videoElement.requestPictureInPicture();
         } else {
           await document.exitPictureInPicture();