Picture-in-picture

src/js/constants.js

@@ -124,3 +124,8 @@ export const SETTING_KEY_DARK_MODE = 'dark-mode';
  * Event name signalling that data in IDB has changes.
  */
 export const IDB_DATA_CHANGED_EVENT = 'idb-data-changed';
+
+/**
+ * Picture in picture.
+ */
+export const PIP_CLASSNAME = 'picture-in-picture';

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

@@ -1,6 +1,7 @@
 :host {
   display: flex;
   align-items: center;
+  position: relative;
 }
 
 :host *:focus {
@@ -9,7 +10,63 @@
   outline-color: var(--accent);
 }
 
+:host .floating-buttons {
+  display: grid;
+  grid-auto-flow: column;
+  column-gap: 16px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+}
+
+@media (min-width: 720px) {
+  :host .floating-buttons {
+    top: 32px;
+    right: 32px;
+  }
+}
+
+:host .floating-buttons button {
+  border-radius: 8px;
+  background-color: var(--accent-background);
+  width: 48px;
+  height: 48px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  border: none;
+}
+
 video {
   width: 100%;
   height: auto;
 }
+
+.pip-overlay {
+  display: none;
+  position: absolute;
+  inset: 0;
+  background-color: var(--code-background);
+  color: var(--icon);
+  z-index: 1;
+  font-size: clamp(12px, 4vw, 24px);
+}
+
+.pip-overlay svg {
+  align-self: end;
+  width: clamp(40px, 20vw, 128px);
+  height: auto;
+}
+
+:host(.picture-in-picture) .pip-overlay {
+  display: grid;
+  justify-items: center;
+  row-gap: 16px;
+}
+
+@media (min-width: 720px) {
+  :host(.picture-in-picture) .pip-overlay {
+    row-gap: 32px;
+  }
+}

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

@@ -19,7 +19,10 @@ import Streamer from '../../classes/Streamer';
 import ParserMPD from '../../classes/ParserMPD';
 import selectSource from '../../utils/selectSource';
 
-import { MEDIA_SESSION_DEFAULT_ARTWORK } from '../../constants';
+import {
+  MEDIA_SESSION_DEFAULT_ARTWORK,
+  PIP_CLASSNAME,
+} from '../../constants';
 
 export default class extends HTMLElement {
   /**
@@ -86,6 +89,11 @@ export default class extends HTMLElement {
       ${this.getSourceHTML()}
       ${this.getTracksHTML()}
     </video>
+    <div class="floating-buttons"></div>
+    <div class="pip-overlay">
+      <svg viewBox="0 0 129 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M108.5 48V16a8.001 8.001 0 0 0-8-8h-84a8 8 0 0 0-8 8v68a8 8 0 0 0 8 8h20" stroke="var(--icon)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M52.5 112V72a8 8 0 0 1 8-8h52a8 8 0 0 1 8 8v40a8 8 0 0 1-8 8h-52a8 8 0 0 1-8-8Z" stroke="var(--icon)" stroke-width="3" stroke-miterlimit="10" stroke-linecap="square"/></svg>
+      This video is playing in picture in picture
+    </div>
     `;
 
     while (this.internal.root.firstChild) {
@@ -96,6 +104,13 @@ export default class extends HTMLElement {
     this.videoElement = this.internal.root.querySelector('video');
     this.videoElement.addEventListener('error', this.handleVideoError.bind(this), true);
 
+    const pipButton = this.createPiPButton();
+    const floatingButtonsBar = this.internal.root.querySelector('.floating-buttons');
+
+    if (pipButton) {
+      floatingButtonsBar.appendChild(pipButton);
+    }
+
     /**
      * Set up Media Session API integration.
      */
@@ -299,4 +314,50 @@ export default class extends HTMLElement {
       assetsOnly: true,
     });
   }
+
+  /**
+   * Returns a button that controls the PiP functionality.
+   *
+   * @returns {HTMLButtonElement|null} Button element or null when PiP not supported.
+   */
+  createPiPButton() {
+    if (!('pictureInPictureEnabled' in document)) {
+      return null;
+    }
+
+    const pipButton = document.createElement('button');
+    const setPipButton = () => {
+      pipButton.disabled = (this.videoElement.readyState === 0)
+        || !document.pictureInPictureEnabled
+        || this.videoElement.disablePictureInPicture;
+    };
+
+    pipButton.setAttribute('aria-label', 'Toggle picture in picture');
+    pipButton.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.25 15L20.25 21C20.25 21.3978 20.092 21.7794 19.8107 22.0607C19.5294 22.342 19.1478 22.5 18.75 22.5L3 22.5C2.60218 22.5 2.22064 22.342 1.93934 22.0607C1.65804 21.7794 1.5 21.3978 1.5 21L1.5 8.25C1.5 7.85217 1.65804 7.47064 1.93934 7.18934C2.22064 6.90803 2.60218 6.75 3 6.75L6.75 6.75" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.75 3L9.75 10.5C9.75 11.3284 10.4216 12 11.25 12L21 12C21.8284 12 22.5 11.3284 22.5 10.5L22.5 3C22.5 2.17157 21.8284 1.5 21 1.5L11.25 1.5C10.4216 1.5 9.75 2.17157 9.75 3Z" stroke="var(--accent)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="square"/><path d="M9 18.75V15H5.25" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.25 18.75L9 15" stroke="var(--accent)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
+    pipButton.addEventListener('click', async () => {
+      pipButton.disabled = true;
+      try {
+        if (this !== document.pictureInPictureElement) {
+          await this.videoElement.requestPictureInPicture();
+        } else {
+          await document.exitPictureInPicture();
+        }
+      } catch (error) {
+        /* eslint-disable-next-line no-console */
+        console.error(error);
+      } finally {
+        pipButton.disabled = false;
+      }
+    });
+
+    this.videoElement.addEventListener('loadedmetadata', setPipButton);
+    this.videoElement.addEventListener('emptied', setPipButton);
+    this.videoElement.addEventListener('enterpictureinpicture', () => this.classList.add(PIP_CLASSNAME));
+    this.videoElement.addEventListener('leavepictureinpicture', () => this.classList.remove(PIP_CLASSNAME));
+
+    setPipButton();
+
+    return pipButton;
+  }
 }