mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Sticker pack download: require just one successful sticker download

Browse source
This commit is contained in:
Scott Nonnenberg 2022-03-16 12:18:16 -07:00 • committed by GitHub
parent 3620309f22
commit 5a7196e464
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 159 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

97
ts/components/stickers/StickerPreviewModal.stories.tsx
View file

@ -17,27 +17,30 @@ import {
const i18n = setupI18n('en', enMessages);
storiesOf('Components/Stickers/StickerPreviewModal', module).add('Full', () => {
const book = storiesOf('Components/Stickers/StickerPreviewModal', module);
const abeSticker = {
id: -1,
emoji: '🎩',
url: squareStickerUrl,
packId: 'abe',
};
const wideSticker = {
id: -2,
emoji: '🤯',
url: landscapeGreenUrl,
packId: 'wide',
};
const tallSticker = {
id: -3,
emoji: '🔥',
url: portraitTealUrl,
packId: 'tall',
};
book.add('Full', () => {
const title = text('title', 'Foo');
const author = text('author', 'Foo McBarrington');
const abeSticker = {
id: -1,
emoji: '🎩',
url: squareStickerUrl,
packId: 'abe',
};
const wideSticker = {
id: -2,
emoji: '🤯',
url: landscapeGreenUrl,
packId: 'wide',
};
const tallSticker = {
id: -3,
emoji: '🔥',
url: portraitTealUrl,
packId: 'tall',
};
const pack = {
id: 'foo',
@ -69,3 +72,59 @@ storiesOf('Components/Stickers/StickerPreviewModal', module).add('Full', () => {
/>
);
});
book.add('Just four stickers', () => {
const title = text('title', 'Foo');
const author = text('author', 'Foo McBarrington');
const pack = {
id: 'foo',
key: 'foo',
lastUsed: Date.now(),
cover: abeSticker,
title,
isBlessed: true,
author,
status: 'downloaded' as const,
stickerCount: 101,
stickers: [abeSticker, abeSticker, abeSticker, abeSticker],
};
return (
<StickerPreviewModal
onClose={action('onClose')}
installStickerPack={action('installStickerPack')}
uninstallStickerPack={action('uninstallStickerPack')}
downloadStickerPack={action('downloadStickerPack')}
i18n={i18n}
pack={pack}
/>
);
});
book.add('Initial download', () => {
return (
<StickerPreviewModal
onClose={action('onClose')}
installStickerPack={action('installStickerPack')}
uninstallStickerPack={action('uninstallStickerPack')}
downloadStickerPack={action('downloadStickerPack')}
i18n={i18n}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
pack={{} as any}
/>
);
});
book.add('Pack deleted', () => {
return (
<StickerPreviewModal
onClose={action('onClose')}
installStickerPack={action('installStickerPack')}
uninstallStickerPack={action('uninstallStickerPack')}
downloadStickerPack={action('downloadStickerPack')}
i18n={i18n}
pack={undefined}
/>
);
});

31
ts/components/stickers/StickerPreviewModal.tsx
View file

@ -28,6 +28,10 @@ export type OwnProps = {
export type Props = OwnProps;
function renderBody({ pack, i18n }: Props) {
if (!pack) {
return null;
}
if (pack && pack.status === 'error') {
return (
<div className="module-sticker-manager__preview-modal__container__error">
@ -36,7 +40,7 @@ function renderBody({ pack, i18n }: Props) {
);
}
if (!pack || pack.stickerCount === 0 || !isNumber(pack.stickerCount)) {
if (pack.stickerCount === 0 || !isNumber(pack.stickerCount)) {
return <Spinner svgSize="normal" />;
}
@ -54,15 +58,16 @@ function renderBody({ pack, i18n }: Props) {
/>
</div>
))}
{range(pack.stickerCount - pack.stickers.length).map(i => (
<div
key={`placeholder-${i}`}
className={classNames(
'module-sticker-manager__preview-modal__container__sticker-grid__cell',
'module-sticker-manager__preview-modal__container__sticker-grid__cell--placeholder'
)}
/>
))}
{pack.status === 'pending' &&
range(pack.stickerCount - pack.stickers.length).map(i => (
<div
key={`placeholder-${i}`}
className={classNames(
'module-sticker-manager__preview-modal__container__sticker-grid__cell',
'module-sticker-manager__preview-modal__container__sticker-grid__cell--placeholder'
)}
/>
))}
</div>
);
}
@ -110,6 +115,12 @@ export const StickerPreviewModal = React.memo((props: Props) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
React.useEffect(() => {
if (!pack) {
onClose();
}
}, [pack, onClose]);
const isInstalled = Boolean(pack && pack.status === 'installed');
const handleToggleInstall = React.useCallback(() => {
if (!pack) {