From 11b3a0ece162675f9f460d10b6420725be60427f Mon Sep 17 00:00:00 2001 From: William Grant Date: Tue, 11 Jun 2024 13:25:55 +1000 Subject: [PATCH] feat: upgraded react-qrcode-logo to v3 --- package.json | 8 +- ts/components/SessionQRCode.tsx | 139 ++++++++---------- .../dialog/edit-profile/components.tsx | 2 +- .../section/CategoryRecoveryPassword.tsx | 2 +- yarn.lock | 12 +- 5 files changed, 74 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index 09bcbd2ff..6f5886f3b 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "react-h5-audio-player": "^3.2.0", "react-intersection-observer": "^9.7.0", "react-mentions": "^4.4.9", - "react-qrcode-logo": "^2.10.0", + "react-qrcode-logo": "^3.0.0", "react-redux": "8.0.4", "react-toastify": "^6.0.9", "react-use": "^17.4.0", @@ -269,7 +269,11 @@ "StartupWMClass": "Session" }, "asarUnpack": "node_modules/spellchecker/vendor/hunspell_dictionaries", - "target": ["deb", "rpm", "freebsd"], + "target": [ + "deb", + "rpm", + "freebsd" + ], "icon": "build/icon-linux.icns" }, "asarUnpack": [ diff --git a/ts/components/SessionQRCode.tsx b/ts/components/SessionQRCode.tsx index d6f6a3c9e..bcaaeb1b8 100644 --- a/ts/components/SessionQRCode.tsx +++ b/ts/components/SessionQRCode.tsx @@ -1,34 +1,10 @@ -import { isEmpty } from 'lodash'; -import { MouseEvent, useCallback, useEffect, useState } from 'react'; +import { MouseEvent, useRef } from 'react'; import { QRCode } from 'react-qrcode-logo'; -import useMount from 'react-use/lib/useMount'; -import styled, { CSSProperties } from 'styled-components'; +import { CSSProperties } from 'styled-components'; import { ThemeStateType } from '../themes/constants/colors'; -import { THEME_GLOBALS, getThemeValue } from '../themes/globals'; -import { saveQRCode } from '../util/saveQRCode'; -import { checkDarkTheme } from '../util/theme'; +import { THEME_GLOBALS } from '../themes/globals'; import { AnimatedFlex } from './basic/Flex'; -/** AnimatedFlex because we fade in the QR code to hide the logo flickering on first render - * The container controls the visible width and height of the QR code because we lose quality if the html canvas size is too small so we scale down with CSS. - */ -const StyledQRView = styled(AnimatedFlex)<{ - canvasId?: string; - size?: number; - backgroundColor?: string; -}>` - cursor: pointer; - border-radius: 10px; - overflow: hidden; - - ${props => props.backgroundColor && ` background-color: ${props.backgroundColor}`}; - ${props => props.size && `width: ${props.size + 20}px; height: ${props.size + 20}px; }`} - ${props => - props.canvasId && - props.size && - `#${props.canvasId} { width: ${props.size}px !important; height: ${props.size}px !important; }`} -`; - export type SessionQRCodeProps = { id: string; value: string; @@ -64,90 +40,95 @@ export function SessionQRCode(props: SessionQRCodeProps) { style, } = props; - const [svgDataURL, setSvgDataURL] = useState(''); - const [currentTheme, setCurrentTheme] = useState(theme); - const [loading, setLoading] = useState(false); + const qrRef = useRef(null); + + // const [svgDataURL, setSvgDataURL] = useState(''); + // const [currentTheme, setCurrentTheme] = useState(theme); + // const [loading, setLoading] = useState(false); - const loadLogoImage = useCallback(async () => { - if (logoImage && logoIsSVG) { - setLoading(true); - try { - const response = await fetch(logoImage); - let svgString = await response.text(); + // const loadLogoImage = useCallback(async () => { + // if (logoImage && logoIsSVG) { + // setLoading(true); + // try { + // const response = await fetch(logoImage); + // let svgString = await response.text(); - if (!ignoreTheme && theme && !isEmpty(theme)) { - svgString = svgString.replaceAll( - 'black', - getThemeValue( - checkDarkTheme(theme) ? '--background-primary-color' : '--text-primary-color' - ) - ); - } + // if (!ignoreTheme && theme && !isEmpty(theme)) { + // svgString = svgString.replaceAll( + // 'black', + // getThemeValue( + // checkDarkTheme(theme) ? '--background-primary-color' : '--text-primary-color' + // ) + // ); + // } - setSvgDataURL(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`); - } catch (error) { - window.log.error('Error fetching the QR Code logo which is an svg:', error); - } - setLoading(false); - } - }, [ignoreTheme, logoImage, logoIsSVG, theme]); + // setSvgDataURL(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`); + // } catch (error) { + // window.log.error('Error fetching the QR Code logo which is an svg:', error); + // } + // setLoading(false); + // } + // }, [ignoreTheme, logoImage, logoIsSVG, theme]); - useMount(() => { - void loadLogoImage(); - }); + // useMount(() => { + // void loadLogoImage(); + // }); - useEffect(() => { - if (theme && theme !== currentTheme) { - setCurrentTheme(theme); - void loadLogoImage(); - } - }, [currentTheme, loadLogoImage, theme]); + // useEffect(() => { + // if (theme && theme !== currentTheme) { + // setCurrentTheme(theme); + // void loadLogoImage(); + // } + // }, [currentTheme, loadLogoImage, theme]); const qrCanvasSize = 1000; const canvasLogoWidth = logoWidth && logoHeight ? (qrCanvasSize * 0.25 * logoWidth) / logoHeight : undefined; const canvasLogoHeight = logoHeight ? (qrCanvasSize * 0.25 * logoHeight) / logoHeight : undefined; + // We use an AnimatedFlex because we fade in the QR code to hide the logo flickering on first render return ( - ) => { event.preventDefault(); - void saveQRCode(id, { - ...props, - id: `temp-${props.id}`, - backgroundColor: 'white', - foregroundColor: 'black', - ignoreTheme: true, - style: { display: 'none' }, - }); + qrRef.current?.download('jpg', id); }} - initial={{ opacity: 0 }} - animate={{ opacity: loading ? 0 : 1 }} - transition={{ duration: THEME_GLOBALS['--default-duration-seconds'] }} data-testId={dataTestId || 'session-qr-code'} style={style} > window.log.debug(`WIP: [SessionQRCode] logo loaded`, e)} + style={{ + borderRadius: '10px', + cursor: 'pointer', + overflow: 'hidden', + width: size, + height: size, + }} /> - + ); } diff --git a/ts/components/dialog/edit-profile/components.tsx b/ts/components/dialog/edit-profile/components.tsx index 5ee3df0f2..9df6de5ed 100644 --- a/ts/components/dialog/edit-profile/components.tsx +++ b/ts/components/dialog/edit-profile/components.tsx @@ -15,7 +15,7 @@ export const QRView = ({ sessionID }: { sessionID: string }) => { {