Sticker creator updates: new 200 sticker max, WebP supported

sticker-creator/app/stages/AppStage.scss

@@ -29,6 +29,12 @@
   align-items: center;
 }
 
+.footer-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .button {
   margin-left: 12px;
 }

sticker-creator/app/stages/AppStage.tsx

@@ -3,6 +3,8 @@ import * as styles from './AppStage.scss';
 import { history } from '../../util/history';
 import { Button } from '../../elements/Button';
 import { useI18n } from '../../util/i18n';
+import { Text } from '../../elements/Typography';
+import { stickersDuck } from '../../store';
 
 export type Props = {
   readonly children: React.ReactNode;
@@ -56,6 +58,8 @@ export const AppStage = (props: Props) => {
     [prev]
   );
 
+  const addMoreCount = stickersDuck.useAddMoreCount();
+
   return (
     <>
       <main className={getClassName(props)}>{children}</main>
@@ -65,6 +69,11 @@ export const AppStage = (props: Props) => {
             {prevText || i18n('StickerCreator--AppStage--prev')}
           </Button>
         ) : null}
+        {addMoreCount > 0 ? (
+          <Text secondary={true}>
+            {i18n('StickerCreator--DropStage--addMore', [addMoreCount])}
+          </Text>
+        ) : null}
         {next || onNext ? (
           <Button
             className={styles.button}

sticker-creator/app/stages/DropStage.tsx

@@ -10,16 +10,28 @@ import { stickersDuck } from '../../store';
 import { useI18n } from '../../util/i18n';
 
 const renderToaster = ({
+  hasAnimated,
   hasTooLarge,
   numberAdded,
   resetStatus,
   i18n,
 }: {
+  hasAnimated: boolean;
   hasTooLarge: boolean;
   numberAdded: number;
   resetStatus: () => unknown;
   i18n: ReturnType<typeof useI18n>;
 }) => {
+  if (hasAnimated) {
+    return (
+      <div className={appStyles.toaster}>
+        <Toast onClick={resetStatus}>
+          {i18n('StickerCreator--Toasts--animated')}
+        </Toast>
+      </div>
+    );
+  }
+
   if (hasTooLarge) {
     return (
       <div className={appStyles.toaster}>
@@ -48,6 +60,7 @@ export const DropStage = () => {
   const stickerPaths = stickersDuck.useStickerOrder();
   const stickersReady = stickersDuck.useStickersReady();
   const haveStickers = stickerPaths.length > 0;
+  const hasAnimated = stickersDuck.useHasAnimated();
   const hasTooLarge = stickersDuck.useHasTooLarge();
   const numberAdded = stickersDuck.useImageAddedCount();
   const [showGuide, setShowGuide] = React.useState<boolean>(true);
@@ -73,7 +86,13 @@ export const DropStage = () => {
       <div className={styles.main}>
         <StickerGrid mode="add" showGuide={showGuide} />
       </div>
-      {renderToaster({ hasTooLarge, numberAdded, resetStatus, i18n })}
+      {renderToaster({
+        hasAnimated,
+        hasTooLarge,
+        numberAdded,
+        resetStatus,
+        i18n,
+      })}
     </AppStage>
   );
 };

sticker-creator/app/stages/MetaStage.tsx

@@ -22,15 +22,19 @@ export const MetaStage = () => {
 
   const onDrop = React.useCallback(
     async ([{ path }]: Array<FileWithPath>) => {
-      const webp = await convertToWebp(path);
-      actions.setCover(webp);
+      try {
+        const webp = await convertToWebp(path);
+        actions.setCover(webp);
+      } catch (e) {
+        actions.removeSticker(path);
+      }
     },
     [actions]
   );
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
-    accept: ['image/png'],
+    accept: ['image/png', 'image/webp'],
   });
 
   const onNext = React.useCallback(

sticker-creator/components/StickerGrid.tsx

@@ -11,7 +11,7 @@ import { stickersDuck } from '../store';
 import { DropZone, Props as DropZoneProps } from '../elements/DropZone';
 import { convertToWebp } from '../util/preload';
 
-const queue = new PQueue({ concurrency: 5 });
+const queue = new PQueue({ concurrency: 3 });
 
 const SmartStickerFrame = SortableElement(
   ({ id, showGuide, mode }: StickerFrameProps) => {

sticker-creator/elements/DropZone.tsx

@@ -34,7 +34,7 @@ export const DropZone = (props: Props) => {
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop: handleDrop,
-    accept: ['image/png'],
+    accept: ['image/png', 'image/webp'],
   });
 
   React.useEffect(

sticker-creator/elements/Typography.scss

@@ -63,3 +63,13 @@
   composes: text;
   text-align: center;
 }
+
+.secondary {
+  @include light-theme() {
+    color: $color-gray-60;
+  }
+
+  @include dark-theme() {
+    color: $color-gray-25;
+  }
+}

sticker-creator/elements/Typography.tsx

@@ -10,6 +10,7 @@ export type HeadingProps = React.HTMLProps<HTMLHeadingElement>;
 export type ParagraphProps = React.HTMLProps<HTMLParagraphElement> & {
   center?: boolean;
   wide?: boolean;
+  secondary?: boolean;
 };
 export type SpanProps = React.HTMLProps<HTMLSpanElement>;
 
@@ -30,10 +31,18 @@ export const H2 = React.memo(
 );
 
 export const Text = React.memo(
-  ({ children, className, center, wide, ...rest }: Props & ParagraphProps) => (
+  ({
+    children,
+    className,
+    center,
+    wide,
+    secondary,
+    ...rest
+  }: Props & ParagraphProps) => (
     <p
       className={classnames(
         center ? styles.textCenter : styles.text,
+        secondary ? styles.secondary : null,
         className
       )}
       {...rest}

sticker-creator/preload.js

@@ -5,6 +5,7 @@ const pify = require('pify');
 const { readFile } = require('fs');
 const config = require('url').parse(window.location.toString(), true).query;
 const { noop, uniqBy } = require('lodash');
+const pMap = require('p-map');
 const { deriveStickerPackKey } = require('../js/modules/crypto');
 const { makeGetter } = require('../preload_utils');
 
@@ -16,6 +17,7 @@ window.PROTO_ROOT = '../../protos';
 window.getEnvironment = () => config.environment;
 window.getVersion = () => config.version;
 window.getGuid = require('uuid/v4');
+window.PQueue = require('p-queue');
 
 window.localeMessages = ipc.sendSync('locale-data');
 
@@ -38,8 +40,11 @@ const WebAPI = initializeWebAPI({
 });
 
 window.convertToWebp = async (path, width = 512, height = 512) => {
-  const pngBuffer = await pify(readFile)(path);
-  const buffer = await sharp(pngBuffer)
+  const imgBuffer = await pify(readFile)(path);
+  const sharpImg = sharp(imgBuffer);
+  const meta = await sharpImg.metadata();
+
+  const buffer = await sharpImg
     .resize({
       width,
       height,
@@ -53,6 +58,7 @@ window.convertToWebp = async (path, width = 512, height = 512) => {
     path,
     buffer,
     src: `data:image/webp;base64,${buffer.toString('base64')}`,
+    meta,
   };
 };
 
@@ -110,8 +116,10 @@ window.encryptAndUpload = async (
     encryptionKey,
     iv
   );
-  const encryptedStickers = await Promise.all(
-    uniqueStickers.map(({ webp }) => encrypt(webp.buffer, encryptionKey, iv))
+  const encryptedStickers = await pMap(
+    uniqueStickers,
+    ({ webp }) => encrypt(webp.buffer, encryptionKey, iv),
+    { concurrency: 3 }
   );
 
   const packId = await server.putStickers(

sticker-creator/store/ducks/stickers.ts

@@ -9,7 +9,7 @@ import {
 } from 'redux-ts-utils';
 import { useDispatch, useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
-import { clamp, pull, take, uniq } from 'lodash';
+import { clamp, isNumber, pull, take, uniq } from 'lodash';
 import { SortEnd } from 'react-sortable-hoc';
 import arrayMove from 'array-move';
 import { AppState } from '../reducer';
@@ -24,6 +24,7 @@ export const addWebp = createAction<WebpData>('stickers/addSticker');
 export const removeSticker = createAction<string>('stickers/removeSticker');
 export const moveSticker = createAction<SortEnd>('stickers/moveSticker');
 export const setCover = createAction<WebpData>('stickers/setCover');
+export const resetCover = createAction<WebpData>('stickers/resetCover');
 export const setEmoji = createAction<{ id: string; emoji: EmojiPickDataType }>(
   'stickers/setEmoji'
 );
@@ -34,7 +35,7 @@ export const resetStatus = createAction<void>('stickers/resetStatus');
 export const reset = createAction<void>('stickers/reset');
 
 export const minStickers = 4;
-export const maxStickers = 40;
+export const maxStickers = 200;
 export const maxByteSize = 100 * 1024;
 
 export type State = {
@@ -45,6 +46,7 @@ export type State = {
   readonly packId: string;
   readonly packKey: string;
   readonly tooLarge: number;
+  readonly animated: number;
   readonly imagesAdded: number;
   readonly data: {
     readonly [src: string]: {
@@ -62,6 +64,7 @@ const defaultState: State = {
   packId: '',
   packKey: '',
   tooLarge: 0,
+  animated: 0,
   imagesAdded: 0,
 };
 
@@ -91,7 +94,11 @@ export const reducer = reduceReducers<State>(
     }),
 
     handleAction(addWebp, (state, { payload }) => {
-      if (payload.buffer.byteLength > maxByteSize) {
+      if (isNumber(payload.meta.pages)) {
+        state.animated = clamp(state.animated + 1, 0, state.order.length);
+        pull(state.order, payload.path);
+        delete state.data[payload.path];
+      } else if (payload.buffer.byteLength > maxByteSize) {
         state.tooLarge = clamp(state.tooLarge + 1, 0, state.order.length);
         pull(state.order, payload.path);
         delete state.data[payload.path];
@@ -126,6 +133,10 @@ export const reducer = reduceReducers<State>(
       state.cover = payload;
     }),
 
+    handleAction(resetCover, state => {
+      adjustCover(state);
+    }),
+
     handleAction(setEmoji, (state, { payload }) => {
       const data = state.data[payload.id];
       if (data) {
@@ -148,6 +159,7 @@ export const reducer = reduceReducers<State>(
 
     handleAction(resetStatus, state => {
       state.tooLarge = 0;
+      state.animated = 0;
       state.imagesAdded = 0;
     }),
 
@@ -202,8 +214,14 @@ const selectUrl = createSelector(
 export const usePackUrl = () => useSelector(selectUrl);
 export const useHasTooLarge = () =>
   useSelector(({ stickers }: AppState) => stickers.tooLarge > 0);
+export const useHasAnimated = () =>
+  useSelector(({ stickers }: AppState) => stickers.animated > 0);
 export const useImageAddedCount = () =>
   useSelector(({ stickers }: AppState) => stickers.imagesAdded);
+export const useAddMoreCount = () =>
+  useSelector(({ stickers }: AppState) =>
+    clamp(minStickers - stickers.order.length, 0, minStickers)
+  );
 
 const selectOrderedData = createSelector(
   ({ stickers }: AppState) => stickers.order,

sticker-creator/util/preload.ts

@@ -1,7 +1,10 @@
+import { Metadata } from 'sharp';
+
 export type WebpData = {
   buffer: Buffer;
   src: string;
   path: string;
+  meta: Metadata & { pages?: number }; // Pages is not currently in the sharp metadata type
 };
 
 export type ConvertToWebpFn = (