diff --git a/src/extension/options-page/DashboardDialogs/DialogBase.tsx b/src/extension/options-page/DashboardDialogs/DialogBase.tsx
index 2b9d07032fe9..ed8899df9391 100644
--- a/src/extension/options-page/DashboardDialogs/DialogBase.tsx
+++ b/src/extension/options-page/DashboardDialogs/DialogBase.tsx
@@ -126,6 +126,18 @@ export function DialogRouter(props: DialogRouterProps) {
history.push(onExit || '..')
}
+ const ChildrenComponent = React.memo(
+ function ChildrenComponent() {
+ return (
+ <>
+ {Component && }
+ {children || null}
+ >
+ )
+ },
+ () => !routeMatching,
+ )
+
return (
)
diff --git a/src/utils/hooks/useQRCodeScan.tsx b/src/utils/hooks/useQRCodeScan.tsx
index ccf5fd2575f4..e82942d25aeb 100644
--- a/src/utils/hooks/useQRCodeScan.tsx
+++ b/src/utils/hooks/useQRCodeScan.tsx
@@ -17,6 +17,12 @@ export function useQRCodeScan(
const [mediaStream, setMediaStream] = useState(null)
useEffect(() => {
+ function stop() {
+ if (mediaStream) {
+ mediaStream.getTracks().forEach(x => x.stop())
+ }
+ video.current!.pause()
+ }
async function start() {
if (permission !== 'granted' || !video.current) return
try {
@@ -27,24 +33,15 @@ export function useQRCodeScan(
audio: false,
video: device === null ? { facingMode: 'environment' } : { deviceId: device },
})
- setMediaStream(media)
+ return setMediaStream(media)
}
video.current.srcObject = media
video.current.play()
} catch (e) {
console.error(e)
- setMediaStream(null)
- video.current.srcObject = null
- video.current.pause()
+ stop()
}
}
- function stop() {
- if (mediaStream) {
- mediaStream.getTracks().forEach(x => x.stop())
- setMediaStream(null)
- }
- video.current!.pause()
- }
if (!video.current) return
if (!isScanning) return stop()