-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(feedback): Inject preact from feedbackModal into feedbackScreensh…
…ot integration (#12535) I believe the error we're seeing in #12534 is from having preact bundled twice: once into the Modal integration, and then again into the Screenshot one. This PR updates the Screenshot code so that it requires preact to be injected into it, which should reduce the bundle size of that integration, but also solve the bug because there will only be one instance of preact and it's state within the sdk. Fixes #12534
- Loading branch information
Showing
9 changed files
with
129 additions
and
112 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 40 additions & 34 deletions
74
packages/feedback/src/screenshot/components/useTakeScreenshot.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,51 @@ | ||
| // biome-ignore lint/nursery/noUnusedImports: reason | ||
| import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars | ||
| import { useEffect } from 'preact/hooks'; | ||
| import type * as Hooks from 'preact/hooks'; | ||
| import { DOCUMENT, NAVIGATOR, WINDOW } from '../../constants'; | ||
|
|
||
| interface FactoryParams { | ||
| hooks: typeof Hooks; | ||
| } | ||
|
|
||
| interface Props { | ||
| onBeforeScreenshot: () => void; | ||
| onScreenshot: (imageSource: HTMLVideoElement) => void; | ||
| onAfterScreenshot: () => void; | ||
| onError: (error: Error) => void; | ||
| } | ||
|
|
||
| export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: 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, | ||
| // @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab | ||
| monitorTypeSurfaces: 'exclude', | ||
| preferCurrentTab: true, | ||
| selfBrowserSurface: 'include', | ||
| surfaceSwitching: 'exclude', | ||
| }); | ||
| type UseTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props) => void; | ||
|
|
||
| const video = DOCUMENT.createElement('video'); | ||
| await new Promise<void>((resolve, reject) => { | ||
| video.srcObject = stream; | ||
| video.onloadedmetadata = () => { | ||
| onScreenshot(video); | ||
| stream.getTracks().forEach(track => track.stop()); | ||
| resolve(); | ||
| }; | ||
| video.play().catch(reject); | ||
| }); | ||
| onAfterScreenshot(); | ||
| }; | ||
| export function useTakeScreenshotFactory({ hooks }: FactoryParams): UseTakeScreenshot { | ||
| return function useTakeScreenshot({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props) { | ||
| hooks.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, | ||
| // @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab | ||
| monitorTypeSurfaces: 'exclude', | ||
| preferCurrentTab: true, | ||
| selfBrowserSurface: 'include', | ||
| surfaceSwitching: 'exclude', | ||
| }); | ||
|
|
||
| takeScreenshot().catch(onError); | ||
| }, []); | ||
| }; | ||
| const video = DOCUMENT.createElement('video'); | ||
| await new Promise<void>((resolve, reject) => { | ||
| video.srcObject = stream; | ||
| video.onloadedmetadata = () => { | ||
| onScreenshot(video); | ||
| stream.getTracks().forEach(track => track.stop()); | ||
| resolve(); | ||
| }; | ||
| video.play().catch(reject); | ||
| }); | ||
| onAfterScreenshot(); | ||
| }; | ||
|
|
||
| takeScreenshot().catch(onError); | ||
| }, []); | ||
| }; | ||
| } |
Oops, something went wrong.