feat: picture in picture availability for video players

- add buildMenuForVideo method in contextMenuBuilder.ts
- add picture in picture context menu entry which toggles picture in picture mode

1 files changed, 38 insertions, 0 deletions

diff --git a/src/webview/contextMenuBuilder.ts b/src/webview/contextMenuBuilder.ts
index d18bc56f9..0d8b659f0 100644
--- a/src/webview/contextMenuBuilder.ts
+++ b/src/webview/contextMenuBuilder.ts
@@ -249,6 +249,10 @@ export class ContextMenuBuilder {
       return this.buildMenuForImage(info);
     }
 
+    if (info.mediaType === 'video') {
+      return this.buildMenuForVideo(info);
+    }
+
     if (
       info.isEditable ||
       (info.inputFieldType && info.inputFieldType !== 'none')
@@ -407,6 +411,40 @@ export class ContextMenuBuilder {
   }
 
   /**
+   * Builds a menu applicable to a video.
+   *
+   * @return {Menu}  The `Menu`
+   */
+  buildMenuForVideo(
+    menuInfo: IContextMenuParams,
+  ): Electron.CrossProcessExports.Menu {
+    const menu = new Menu();
+    const video = document.querySelectorAll('video')[0];
+
+    if (
+      document.pictureInPictureEnabled &&
+      !video.disablePictureInPicture &&
+      this.isSrcUrlValid(menuInfo)
+    ) {
+      menu.append(
+        new MenuItem({
+          type: 'checkbox',
+          label: 'Picture in picture',
+          enabled: true,
+          checked: !!document.pictureInPictureElement,
+          click: async () => {
+            await (document.pictureInPictureElement
+              ? document.exitPictureInPicture()
+              : video.requestPictureInPicture());
+          },
+        }),
+      );
+    }
+
+    return menu;
+  }
+
+  /**
    * Checks if the current text selection contains a single misspelled word and
    * if so, adds suggested spellings as individual menu items.
    */