integrate the take-screenshot function

Author: ryan953

packages/feedback2/src/constants/index.ts

@@ -7,6 +7,7 @@ export { DEFAULT_THEME } from './theme';
 // circular dependency between the browser and feedback packages
 export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 export const DOCUMENT = WINDOW.document;
+export const NAVIGATOR = WINDOW.navigator;
 
 export const ACTOR_LABEL = 'Report a Bug';
 export const CANCEL_BUTTON_LABEL = 'Cancel';

packages/feedback2/src/modal/createDialog.tsx

@@ -22,8 +22,32 @@ export function createDialog({ options, screenshotIntegration, sendFeedback, sha
   const el = DOCUMENT.createElement('div');
   const style = createDialogStyles();
 
+  const dialog = {
+    get el() {
+      return el;
+    },
+    appendToDom(): void {
+      if (!shadow.contains(style) && !shadow.contains(el)) {
+        shadow.appendChild(style);
+        shadow.appendChild(el);
+      }
+    },
+    removeFromDom(): void {
+      shadow.removeChild(el);
+      shadow.removeChild(style);
+    },
+    open() {
+      renderContent(true);
+      options.onFormOpen && options.onFormOpen();
+    },
+    close() {
+      renderContent(false);
+    },
+  };
+
+  const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h, dialog);
+
   const renderContent = (open: boolean): void => {
-    const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h);
     render(
       <DialogComponent
         screenshotInput={screenshotInput}
@@ -66,23 +90,5 @@ export function createDialog({ options, screenshotIntegration, sendFeedback, sha
     );
   };
 
-  return {
-    appendToDom(): void {
-      if (!shadow.contains(style) && !shadow.contains(el)) {
-        shadow.appendChild(style);
-        shadow.appendChild(el);
-      }
-    },
-    removeFromDom(): void {
-      shadow.removeChild(el);
-      shadow.removeChild(style);
-    },
-    open() {
-      renderContent(true);
-      options.onFormOpen && options.onFormOpen();
-    },
-    close() {
-      renderContent(false);
-    },
-  };
+  return dialog;
 }

packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts

@@ -16,6 +16,11 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   background: red;
   flex: 1 0 auto;
 }
+
+.editor .image {
+  width: 100%;
+  height: 100%;
+}
 `;
 
   return style;

packages/feedback2/src/screenshot/components/ScreenshotInput.tsx

@@ -1,24 +1,48 @@
 import type { ComponentType, VNode, h as hType } from 'preact';
-import { useEffect, useMemo, useRef } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
+import { useTakeScreenshot } from './useTakeScreenshot';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function makeInput(h: typeof hType, canvasEl: HTMLCanvasElement): ComponentType {
+export function makeInput(h: typeof hType, canvas: HTMLCanvasElement, dialog: Dialog): ComponentType {
+  console.log('makeInput');
+
   return function ScreenshotToggle(): VNode {
     const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
 
     const canvasContainerRef = useRef<HTMLDivElement>(null);
     useEffect(() => {
       const container = canvasContainerRef.current;
-      container && container.appendChild(canvasEl);
-      return () => container && container.removeChild(canvasEl);
-    }, [canvasEl]);
+      container && container.appendChild(canvas);
+      return () => container && container.removeChild(canvas);
+    }, [canvas]);
+
+    useTakeScreenshot({
+      onBeforeScreenshot: useCallback(() => {
+        dialog.el.style.display = 'none';
+      }, []),
+      onScreenshot: useCallback(
+        (imageSource: HTMLVideoElement) => {
+          const context = canvas.getContext('2d');
+          if (!context) {
+            throw new Error('Could not get canvas context');
+          }
+          // canvas.width = imageSource.videoWidth;
+          // canvas.height = imageSource.videoHeight;
+          context.drawImage(imageSource, 0, 0);
+        },
+        [canvas],
+      ),
+      onAfterScreenshot: useCallback(() => {
+        dialog.el.style.display = 'block';
+      }, []),
+    });
 
     return (
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
-        <input type="text" />
-        <div ref={canvasContainerRef} style={{ display: 'none' }} />
+        <div ref={canvasContainerRef} />
       </div>
     );
   };

packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx

@@ -0,0 +1,44 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { useEffect } from 'preact/hooks';
+import { DOCUMENT, NAVIGATOR, WINDOW } from '../../constants';
+
+interface Props {
+  onBeforeScreenshot: () => void;
+  onScreenshot: (imageSource: HTMLVideoElement) => void;
+  onAfterScreenshot: () => void;
+}
+
+export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot }: Props): void => {
+  useEffect(() => {
+    const takeScreenshot = async (): Promise<void> => {
+      onBeforeScreenshot();
+      const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
+        video: {
+          width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
+          height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
+        },
+        audio: false,
+        preferCurrentTab: true,
+        surfaceSwitching: 'exclude',
+      } as any);
+
+      await new Promise<void>((resolve, reject) => {
+        const video = DOCUMENT.createElement('video');
+        const videoTrack = stream.getVideoTracks()[0];
+        video.srcObject = new MediaStream([videoTrack]);
+        video.onloadedmetadata = () => {
+          onScreenshot(video);
+          stream.getTracks().forEach(track => track.stop());
+          resolve();
+        };
+        video.play().catch(reject);
+      });
+      onAfterScreenshot();
+    };
+
+    takeScreenshot().catch(_error => {
+      // TODO
+    });
+  }, []);
+};

packages/feedback2/src/screenshot/createInput.ts

@@ -1,21 +1,21 @@
 import type { Attachment } from '@sentry/types';
 import type { h as hType } from 'preact';
 import { DOCUMENT } from '../constants';
-import type { ScreenshotInput } from '../types';
+import type { Dialog, ScreenshotInput } from '../types';
 import { makeInput } from './components/ScreenshotInput';
 
 /**
  *
  */
-export function createInput(h: typeof hType): ScreenshotInput {
-  const canvasEl = DOCUMENT.createElement('canvas');
+export function createInput(h: typeof hType, dialog: Dialog): ScreenshotInput {
+  const canvas = DOCUMENT.createElement('canvas');
 
   return {
-    input: makeInput(h, canvasEl),
+    input: makeInput(h, canvas, dialog),
 
     value: async () => {
       const blob = await new Promise<Parameters<BlobCallback>[0]>(resolve => {
-        canvasEl.toBlob(resolve, 'image/png');
+        canvas.toBlob(resolve, 'image/png');
       });
       if (blob) {
         const data = new Uint8Array(await blob.arrayBuffer());

packages/feedback2/src/types/index.ts

@@ -60,6 +60,14 @@ export interface SendFeedbackOptions {
 }
 
 export interface Dialog {
+  /**
+   * The HTMLElement that is containing all the form content
+   */
+  el: HTMLElement;
+
+  /**
+   *
+   */
   appendToDom: () => void;
 
   removeFromDom: () => void;