From 490e4957f4ee0c5f99ee41ade39963a81308c4b1 Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 28 Jun 2024 19:13:00 +1000 Subject: [PATCH] feat: click on qr codes now opens the lightbox lightbox now supports saving data blobs --- ts/components/SessionQRCode.tsx | 35 +++++++++----- .../dialog/edit-profile/EditProfileDialog.tsx | 7 +-- .../dialog/edit-profile/components.tsx | 18 ++++++- ts/components/lightbox/Lightbox.tsx | 2 +- ts/components/lightbox/LightboxGallery.tsx | 42 +++++++++++----- .../section/CategoryRecoveryPassword.tsx | 10 +++- ts/state/ducks/modalDialog.tsx | 1 + ts/util/{saveBWQRCode.tsx => qrCodes.tsx} | 48 +++++++++++++++---- 8 files changed, 122 insertions(+), 41 deletions(-) rename ts/util/{saveBWQRCode.tsx => qrCodes.tsx} (57%) diff --git a/ts/components/SessionQRCode.tsx b/ts/components/SessionQRCode.tsx index fdab8d311..90729cfb5 100644 --- a/ts/components/SessionQRCode.tsx +++ b/ts/components/SessionQRCode.tsx @@ -2,7 +2,7 @@ import { MouseEvent, useEffect, useRef, useState } from 'react'; import { QRCode } from 'react-qrcode-logo'; import styled, { CSSProperties } from 'styled-components'; import { THEME_GLOBALS } from '../themes/globals'; -import { saveBWQRCode } from '../util/saveBWQRCode'; +import { renderQRCode } from '../util/qrCodes'; import { AnimatedFlex } from './basic/Flex'; import { SessionIconType } from './icon'; @@ -27,11 +27,11 @@ export type SessionQRCodeProps = { hasLogo?: QRCodeLogoProps; logoImage?: string; logoSize?: number; + loading?: boolean; + onClick?: (fileName: string, dataUrl: string) => void; ariaLabel?: string; dataTestId?: string; style?: CSSProperties; - loading?: boolean; - saveWithTheme?: boolean; }; export function SessionQRCode(props: SessionQRCodeProps) { @@ -44,11 +44,11 @@ export function SessionQRCode(props: SessionQRCodeProps) { hasLogo, logoImage, logoSize, + loading, + onClick, ariaLabel, dataTestId, style, - loading, - saveWithTheme = false, } = props; const [logo, setLogo] = useState(logoImage); const [bgColor, setBgColor] = useState(backgroundColor); @@ -58,24 +58,33 @@ export function SessionQRCode(props: SessionQRCodeProps) { const qrCanvasSize = 1000; const canvasLogoSize = logoSize ? (qrCanvasSize * 0.25 * logoSize) / logoSize : 250; - const saveQRCode = () => { + const loadQRCodeDataUrl = async () => { const fileName = `${id}-${new Date().toISOString()}.jpg`; + let url = ''; + try { - if (saveWithTheme) { - qrRef.current?.download('jpg', fileName); - } else { - void saveBWQRCode(fileName, { + url = await renderQRCode( + { id: `${id}-save`, value, size, hasLogo, logoImage, logoSize, - }); - } + }, + fileName + ); } catch (err) { window.log.error(`QR code save failed! ${fileName}\n${err}`); } + return { fileName, url }; + }; + + const handleOnClick = async () => { + const { fileName, url } = await loadQRCodeDataUrl(); + if (onClick) { + onClick(fileName, url); + } }; useEffect(() => { @@ -108,7 +117,7 @@ export function SessionQRCode(props: SessionQRCodeProps) { title={window.i18n('clickToTrustContact')} onClick={(event: MouseEvent) => { event.preventDefault(); - void saveQRCode(); + void handleOnClick(); }} data-testId={dataTestId || 'session-qr-code'} initial={{ opacity: 0 }} diff --git a/ts/components/dialog/edit-profile/EditProfileDialog.tsx b/ts/components/dialog/edit-profile/EditProfileDialog.tsx index f6f8c86cc..25ace9726 100644 --- a/ts/components/dialog/edit-profile/EditProfileDialog.tsx +++ b/ts/components/dialog/edit-profile/EditProfileDialog.tsx @@ -103,9 +103,10 @@ const handleKeyEscape = ( loading: boolean, dispatch: Dispatch ) => { - if (loading) { + if (loading || mode === 'lightbox') { return; } + if (mode === 'edit') { setMode('default'); setProfileNameError(undefined); @@ -179,7 +180,7 @@ const updateDisplayName = async (newName: string) => { await SyncUtils.forceSyncConfigurationNowIfNeeded(true); }; -export type ProfileDialogModes = 'default' | 'edit' | 'qr'; +export type ProfileDialogModes = 'default' | 'edit' | 'qr' | 'lightbox'; export const EditProfileDialog = () => { const dispatch = useDispatch(); @@ -289,7 +290,7 @@ export const EditProfileDialog = () => { additionalClassName={mode === 'default' ? 'edit-profile-default' : undefined} > {mode === 'qr' ? ( - + ) : ( <> diff --git a/ts/components/dialog/edit-profile/components.tsx b/ts/components/dialog/edit-profile/components.tsx index df4d100f9..63adb50f7 100644 --- a/ts/components/dialog/edit-profile/components.tsx +++ b/ts/components/dialog/edit-profile/components.tsx @@ -1,17 +1,26 @@ import styled from 'styled-components'; import { useIconToImageURL } from '../../../hooks/useIconToImageURL'; +import { updateLightBoxOptions } from '../../../state/ducks/modalDialog'; +import { prepareQRCodeForLightBox } from '../../../util/qrCodes'; import { QRCodeLogoProps, SessionQRCode } from '../../SessionQRCode'; import { Avatar, AvatarSize } from '../../avatar/Avatar'; import { Flex } from '../../basic/Flex'; import { SpacerSM } from '../../basic/Text'; import { SessionIconButton } from '../../icon'; +import { ProfileDialogModes } from './EditProfileDialog'; const qrLogoProps: QRCodeLogoProps = { iconType: 'brandThin', iconSize: 42, }; -export const QRView = ({ sessionID }: { sessionID: string }) => { +export const QRView = ({ + sessionID, + setMode, +}: { + sessionID: string; + setMode: (mode: ProfileDialogModes) => void; +}) => { const { dataURL, iconSize, iconColor, backgroundColor, loading } = useIconToImageURL(qrLogoProps); return ( @@ -25,6 +34,13 @@ export const QRView = ({ sessionID }: { sessionID: string }) => { logoImage={dataURL} logoSize={iconSize} loading={loading} + onClick={(fileName, dataUrl) => { + const lightBoxOptions = prepareQRCodeForLightBox(fileName, dataUrl, () => { + setMode('edit'); + }); + window.inboxStore?.dispatch(updateLightBoxOptions(lightBoxOptions)); + setMode('lightbox'); + }} ariaLabel={'Account ID QR code'} dataTestId={'your-qr-code'} style={{ marginTop: '-1px' }} diff --git a/ts/components/lightbox/Lightbox.tsx b/ts/components/lightbox/Lightbox.tsx index 6d9245e24..ad4b261a7 100644 --- a/ts/components/lightbox/Lightbox.tsx +++ b/ts/components/lightbox/Lightbox.tsx @@ -41,7 +41,7 @@ const styles = { width: '100vw', height: '100vh', left: 0, - zIndex: 5, + zIndex: 150, // modals are 100 right: 0, top: 0, bottom: 0, diff --git a/ts/components/lightbox/LightboxGallery.tsx b/ts/components/lightbox/LightboxGallery.tsx index 12ea7ce0b..0aada9d97 100644 --- a/ts/components/lightbox/LightboxGallery.tsx +++ b/ts/components/lightbox/LightboxGallery.tsx @@ -9,6 +9,7 @@ import { useSelectedConversationKey } from '../../state/selectors/selectedConver import { MIME } from '../../types'; import { AttachmentTypeWithPath } from '../../types/Attachment'; import { saveAttachmentToDisk } from '../../util/attachmentsUtil'; +import { saveURLAsFile } from '../../util/saveURLAsFile'; export interface MediaItemType { objectURL?: string; @@ -24,10 +25,11 @@ export interface MediaItemType { type Props = { media: Array; selectedIndex?: number; + onClose?: () => void; }; export const LightboxGallery = (props: Props) => { - const { media, selectedIndex = -1 } = props; + const { media, selectedIndex = -1, onClose } = props; const [currentIndex, setCurrentIndex] = useState(-1); const selectedConversation = useSelectedConversationKey(); @@ -40,6 +42,9 @@ export const LightboxGallery = (props: Props) => { }, []); const selectedMedia = media[currentIndex]; + const objectURL = selectedMedia?.objectURL || 'images/alert-outline.svg'; + const isDataBlob = objectURL.startsWith('data:'); + const firstIndex = 0; const lastIndex = media.length - 1; @@ -55,12 +60,22 @@ export const LightboxGallery = (props: Props) => { }, [currentIndex, lastIndex]); const handleSave = useCallback(() => { - if (!selectedConversation) { - return; - } const mediaItem = media[currentIndex]; - void saveAttachmentToDisk({ ...mediaItem, conversationId: selectedConversation }); - }, [currentIndex, media, selectedConversation]); + + if (isDataBlob && mediaItem.objectURL) { + saveURLAsFile({ + filename: mediaItem.attachment.fileName, + url: mediaItem.objectURL, + document, + }); + } else { + if (!selectedConversation) { + return; + } + + void saveAttachmentToDisk({ ...mediaItem, conversationId: selectedConversation }); + } + }, [currentIndex, isDataBlob, media, selectedConversation]); useKey( 'ArrowRight', @@ -68,7 +83,7 @@ export const LightboxGallery = (props: Props) => { onNext?.(); }, undefined, - [currentIndex] + [onNext, currentIndex] ); useKey( 'ArrowLeft', @@ -76,18 +91,21 @@ export const LightboxGallery = (props: Props) => { onPrevious?.(); }, undefined, - [currentIndex] + [onPrevious, currentIndex] ); - useKey( 'Escape', () => { dispatch(updateLightBoxOptions(null)); + if (onClose) { + onClose(); + } }, undefined, - [currentIndex] + [currentIndex, updateLightBoxOptions, dispatch, onClose] ); - if (!selectedConversation) { + + if (!isDataBlob && !selectedConversation) { return null; } @@ -95,7 +113,7 @@ export const LightboxGallery = (props: Props) => { if (currentIndex === -1) { return null; } - const objectURL = selectedMedia?.objectURL || 'images/alert-outline.svg'; + const { attachment } = selectedMedia; const caption = attachment?.caption; diff --git a/ts/components/settings/section/CategoryRecoveryPassword.tsx b/ts/components/settings/section/CategoryRecoveryPassword.tsx index c87229320..d9abcb06d 100644 --- a/ts/components/settings/section/CategoryRecoveryPassword.tsx +++ b/ts/components/settings/section/CategoryRecoveryPassword.tsx @@ -6,11 +6,15 @@ import styled from 'styled-components'; import { useIconToImageURL } from '../../../hooks/useIconToImageURL'; import { usePasswordModal } from '../../../hooks/usePasswordModal'; import { mnDecode } from '../../../session/crypto/mnemonic'; -import { updateHideRecoveryPasswordModel } from '../../../state/ducks/modalDialog'; +import { + updateHideRecoveryPasswordModel, + updateLightBoxOptions, +} from '../../../state/ducks/modalDialog'; import { showSettingsSection } from '../../../state/ducks/section'; import { useHideRecoveryPasswordEnabled } from '../../../state/selectors/settings'; import { useIsDarkTheme } from '../../../state/selectors/theme'; import { THEME_GLOBALS } from '../../../themes/globals'; +import { prepareQRCodeForLightBox } from '../../../util/qrCodes'; import { getCurrentRecoveryPhrase } from '../../../util/storage'; import { QRCodeLogoProps, SessionQRCode } from '../../SessionQRCode'; import { AnimatedFlex } from '../../basic/Flex'; @@ -116,6 +120,10 @@ export const SettingsCategoryRecoveryPassword = () => { logoImage={dataURL} logoSize={iconSize} loading={loading} + onClick={(fileName, dataUrl) => { + const lightBoxOptions = prepareQRCodeForLightBox(fileName, dataUrl); + window.inboxStore?.dispatch(updateLightBoxOptions(lightBoxOptions)); + }} ariaLabel={'Recovery Password QR Code'} dataTestId={'session-recovery-password'} /> diff --git a/ts/state/ducks/modalDialog.tsx b/ts/state/ducks/modalDialog.tsx index 5f04f0d2a..5eb505db8 100644 --- a/ts/state/ducks/modalDialog.tsx +++ b/ts/state/ducks/modalDialog.tsx @@ -46,6 +46,7 @@ export type LightBoxOptions = { media: Array; attachment: AttachmentTypeWithPath; selectedIndex?: number; + onClose?: () => void; } | null; export type ModalState = { diff --git a/ts/util/saveBWQRCode.tsx b/ts/util/qrCodes.tsx similarity index 57% rename from ts/util/saveBWQRCode.tsx rename to ts/util/qrCodes.tsx index 135c6f115..76da7c742 100644 --- a/ts/util/saveBWQRCode.tsx +++ b/ts/util/qrCodes.tsx @@ -1,10 +1,43 @@ import { createRoot } from 'react-dom/client'; import { SessionQRCode, SessionQRCodeProps } from '../components/SessionQRCode'; import { convertIconToImageURL } from '../hooks/useIconToImageURL'; +import { UserUtils } from '../session/utils'; import { sleepFor } from '../session/utils/Promise'; -import { saveURLAsFile } from './saveURLAsFile'; +import { LightBoxOptions } from '../state/ducks/modalDialog'; + +export function prepareQRCodeForLightBox(fileName: string, url: string, onClose?: () => void) { + const attachment = { + fileName, + url, + fileSize: '', + path: url, + id: 0, + contentType: 'image/jpeg', + screenshot: null, + thumbnail: null, + }; + const lightBoxOptions: LightBoxOptions = { + media: [ + { + index: 0, + objectURL: url, + contentType: 'image/jpeg', + attachment, + messageSender: UserUtils.getOurPubKeyStrFromCache(), + messageTimestamp: -1, + messageId: '', + }, + ], + attachment, + onClose, + }; + + return lightBoxOptions; +} + +export async function renderQRCode(props: SessionQRCodeProps, filename: string): Promise { + let url = ''; -export async function saveBWQRCode(filename: string, props: SessionQRCodeProps): Promise { try { const root = document.querySelector('#root'); const divElement = document.createElement('div'); @@ -34,14 +67,7 @@ export async function saveBWQRCode(filename: string, props: SessionQRCodeProps): const qrCanvas = root?.querySelector(`#${props.id}-canvas`); if (qrCanvas) { - const url = (qrCanvas as HTMLCanvasElement).toDataURL('image/jpeg'); - if (url) { - saveURLAsFile({ - filename, - url, - document, - }); - } + url = (qrCanvas as HTMLCanvasElement).toDataURL('image/jpeg'); } else { throw Error('QR Code canvas not found'); } @@ -51,4 +77,6 @@ export async function saveBWQRCode(filename: string, props: SessionQRCodeProps): } catch (err) { window.log.error(`[saveBWQRCode] failed for ${filename}`, err); } + + return url; }