From fe65fd3eaac70024f57a67bacc77315876df3206 Mon Sep 17 00:00:00 2001
From: Ken Powers <ken@signal.org>
Date: Thu, 19 Dec 2019 18:27:02 -0500
Subject: [PATCH] Sticker creator updates: new 200 sticker max, WebP supported

---
 _locales/en/messages.json                  | 17 ++++++++++++++-
 js/modules/web_api.js                      | 22 +++++++++++---------
 package.json                               | 15 ++++++++++----
 sticker-creator/app/stages/AppStage.scss   |  6 ++++++
 sticker-creator/app/stages/AppStage.tsx    |  9 ++++++++
 sticker-creator/app/stages/DropStage.tsx   | 21 ++++++++++++++++++-
 sticker-creator/app/stages/MetaStage.tsx   | 10 ++++++---
 sticker-creator/components/StickerGrid.tsx |  2 +-
 sticker-creator/elements/DropZone.tsx      |  2 +-
 sticker-creator/elements/Typography.scss   | 10 +++++++++
 sticker-creator/elements/Typography.tsx    | 11 +++++++++-
 sticker-creator/preload.js                 | 16 +++++++++++----
 sticker-creator/store/ducks/stickers.ts    | 24 +++++++++++++++++++---
 sticker-creator/util/preload.ts            |  3 +++
 yarn.lock                                  | 11 ++++++++--
 15 files changed, 148 insertions(+), 31 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index e520ce83a..ee1eeea28 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -2212,7 +2212,7 @@
   },
   "StickerCreator--DropStage--help": {
     "message":
-      "Stickers must be in PNG format with a transparent background and 512x512 pixels. Recommended margin is 16px.",
+      "Stickers must be in PNG or WebP format with a transparent background and 512x512 pixels. Recommended margin is 16px.",
     "description": "Help text for the drop stage of the sticker creator"
   },
   "StickerCreator--DropStage--showMargins": {
@@ -2220,6 +2220,16 @@
     "description":
       "Text for the show margins toggle on the drop stage of the sticker creator"
   },
+  "StickerCreator--DropStage--addMore": {
+    "message": "Add $count$ or more",
+    "description": "Text to show user how many more stickers they must add",
+    "placeholders": {
+      "hashtag": {
+        "content": "$1",
+        "example": "4"
+      }
+    }
+  },
   "StickerCreator--EmojiStage--title": {
     "message": "Add an emoji to each sticker",
     "description": "Title for the drop stage of the sticker creator"
@@ -2340,6 +2350,11 @@
       }
     }
   },
+  "StickerCreator--Toasts--animated": {
+    "message": "Animated stickers are not currently supported",
+    "description":
+      "Text for the toast when an image that is animated was dropped"
+  },
   "StickerCreator--Toasts--tooLarge": {
     "message": "Dropped image is too large",
     "description":
diff --git a/js/modules/web_api.js b/js/modules/web_api.js
index 425689131..419f99390 100644
--- a/js/modules/web_api.js
+++ b/js/modules/web_api.js
@@ -6,7 +6,7 @@ const { Agent } = require('https');
 const is = require('@sindresorhus/is');
 const { redactPackId } = require('./stickers');
 
-/* global Signal, Buffer, setTimeout, log, _, getGuid */
+/* global Signal, Buffer, setTimeout, log, _, getGuid, PQueue */
 
 /* eslint-disable more/no-then, no-bitwise, no-nested-ternary */
 
@@ -936,7 +936,6 @@ function initialize({
       // This is going to the CDN, not the service, so we use _outerAjax
       await _outerAjax(`${cdnUrl}/`, {
         ...manifestParams,
-        key: 'stickers/asdfasdf/manifest.proto',
         certificateAuthority,
         proxyUrl,
         timeout: 0,
@@ -945,17 +944,20 @@ function initialize({
       });
 
       // Upload stickers
+      const queue = new PQueue({ concurrency: 3 });
       await Promise.all(
         stickers.map(async (s, id) => {
           const stickerParams = makePutParams(s, encryptedStickers[id]);
-          await _outerAjax(`${cdnUrl}/`, {
-            ...stickerParams,
-            certificateAuthority,
-            proxyUrl,
-            timeout: 0,
-            type: 'POST',
-            processData: false,
-          });
+          await queue.add(async () =>
+            _outerAjax(`${cdnUrl}/`, {
+              ...stickerParams,
+              certificateAuthority,
+              proxyUrl,
+              timeout: 0,
+              type: 'POST',
+              processData: false,
+            })
+          );
           if (onProgress) {
             onProgress();
           }
diff --git a/package.json b/package.json
index b5255d851..75e48c889 100644
--- a/package.json
+++ b/package.json
@@ -131,7 +131,7 @@
     "testcheck": "1.0.0-rc.2",
     "tmp": "0.0.33",
     "to-arraybuffer": "1.0.1",
-    "typeface-inter": "^3.10.0",
+    "typeface-inter": "3.10.0",
     "underscore": "1.9.0",
     "uuid": "3.3.2",
     "websocket": "1.0.28"
@@ -141,7 +141,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-class-properties": "7.7.4",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.3.3",
     "@storybook/addon-actions": "5.1.11",
@@ -177,6 +177,7 @@
     "@types/redux-logger": "3.0.7",
     "@types/rimraf": "2.0.2",
     "@types/semver": "5.5.0",
+    "@types/sharp": "0.23.1",
     "@types/sinon": "4.3.1",
     "@types/storybook__addon-actions": "3.4.3",
     "@types/storybook__addon-knobs": "5.0.3",
@@ -265,7 +266,10 @@
       "bundleVersion": "1"
     },
     "win": {
-      "asarUnpack": ["node_modules/spellchecker/vendor/hunspell_dictionaries", "node_modules/sharp"],
+      "asarUnpack": [
+        "node_modules/spellchecker/vendor/hunspell_dictionaries",
+        "node_modules/sharp"
+      ],
       "artifactName": "${name}-win-${version}.${ext}",
       "certificateSubjectName": "Signal",
       "publisherName": "Signal (Quiet Riddle Ventures, LLC)",
@@ -298,7 +302,10 @@
       "desktop": {
         "StartupWMClass": "Signal"
       },
-      "asarUnpack": ["node_modules/spellchecker/vendor/hunspell_dictionaries", "node_modules/sharp"],
+      "asarUnpack": [
+        "node_modules/spellchecker/vendor/hunspell_dictionaries",
+        "node_modules/sharp"
+      ],
       "target": [
         "deb"
       ],
diff --git a/sticker-creator/app/stages/AppStage.scss b/sticker-creator/app/stages/AppStage.scss
index b5884166e..8e814586e 100644
--- a/sticker-creator/app/stages/AppStage.scss
+++ b/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;
 }
diff --git a/sticker-creator/app/stages/AppStage.tsx b/sticker-creator/app/stages/AppStage.tsx
index 34d1749b8..0f22b5d89 100644
--- a/sticker-creator/app/stages/AppStage.tsx
+++ b/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}
diff --git a/sticker-creator/app/stages/DropStage.tsx b/sticker-creator/app/stages/DropStage.tsx
index 72f69a25a..041b36dad 100644
--- a/sticker-creator/app/stages/DropStage.tsx
+++ b/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>
   );
 };
diff --git a/sticker-creator/app/stages/MetaStage.tsx b/sticker-creator/app/stages/MetaStage.tsx
index 805290c22..4915a07d4 100644
--- a/sticker-creator/app/stages/MetaStage.tsx
+++ b/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(
diff --git a/sticker-creator/components/StickerGrid.tsx b/sticker-creator/components/StickerGrid.tsx
index 460310167..260e499e4 100644
--- a/sticker-creator/components/StickerGrid.tsx
+++ b/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) => {
diff --git a/sticker-creator/elements/DropZone.tsx b/sticker-creator/elements/DropZone.tsx
index a9ff8aaa8..5c400d5f0 100644
--- a/sticker-creator/elements/DropZone.tsx
+++ b/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(
diff --git a/sticker-creator/elements/Typography.scss b/sticker-creator/elements/Typography.scss
index e9eba5d8a..0814d03b1 100644
--- a/sticker-creator/elements/Typography.scss
+++ b/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;
+  }
+}
diff --git a/sticker-creator/elements/Typography.tsx b/sticker-creator/elements/Typography.tsx
index f4416feb3..75d874622 100644
--- a/sticker-creator/elements/Typography.tsx
+++ b/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}
diff --git a/sticker-creator/preload.js b/sticker-creator/preload.js
index 6137aca77..26fbc968a 100644
--- a/sticker-creator/preload.js
+++ b/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(
diff --git a/sticker-creator/store/ducks/stickers.ts b/sticker-creator/store/ducks/stickers.ts
index ff7068bfc..19b39e654 100644
--- a/sticker-creator/store/ducks/stickers.ts
+++ b/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,
diff --git a/sticker-creator/util/preload.ts b/sticker-creator/util/preload.ts
index fbb4eba5e..aa8c37259 100644
--- a/sticker-creator/util/preload.ts
+++ b/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 = (
diff --git a/yarn.lock b/yarn.lock
index 0da1ef404..d81d9990e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -334,7 +334,7 @@
     "@babel/helper-create-class-features-plugin" "^7.5.5"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-class-properties@^7.7.4":
+"@babel/plugin-proposal-class-properties@7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.7.4.tgz#2f964f0cb18b948450362742e33e15211e77c2ba"
   integrity sha512-EcuXeV4Hv1X3+Q1TsuOmyyxeTRiSqurGJ26+I/FW1WbymmRRapVORm6x1Zl3iDIHyRxEs+VXWp6qnlcfcJSbbw==
@@ -2003,6 +2003,13 @@
     "@types/express-serve-static-core" "*"
     "@types/mime" "*"
 
+"@types/sharp@0.23.1":
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/@types/sharp/-/sharp-0.23.1.tgz#1e02560371d6603adc121389512f0745028aa507"
+  integrity sha512-iBRM9RjRF9pkIkukk6imlxfaKMRuiRND8L0yYKl5PJu5uLvxuNzp5f0x8aoTG5VX85M8O//BwbttzFVZL1j/FQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/sinon@4.3.1":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-4.3.1.tgz#32458f9b166cd44c23844eee4937814276f35199"
@@ -15947,7 +15954,7 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typeface-inter@^3.10.0:
+typeface-inter@3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/typeface-inter/-/typeface-inter-3.10.0.tgz#04a55d62e2dc3f60db3afab5d8a547e067692bc6"
   integrity sha512-WuXE+TaJLB8pdMuvIVY3LfT5UQqndR8+Js0xfhNpdXlsEx0Abwd1bzg4w4YWl2eoOmmLYrRpx6UJJ7a7/q6wZQ==