From 29de50c12a264084848a51f6d3b4738f45b5d7d3 Mon Sep 17 00:00:00 2001 From: Ken Powers Date: Thu, 16 May 2019 15:32:11 -0700 Subject: [PATCH] Stickers Co-authored-by: scott@signal.org Co-authored-by: ken@signal.org --- _locales/en/messages.json | 104 ++ app/attachment_channel.js | 18 +- app/attachments.js | 53 +- app/sql.js | 527 +++++++++- app/sql_channel.js | 8 +- background.html | 3 +- fixtures/512x515-thumbs-up-lincoln.webp | Bin 0 -> 38226 bytes fixtures/kitten-1-64-64.jpg | Bin 0 -> 1476 bytes fixtures/kitten-2-64-64.jpg | Bin 0 -> 8817 bytes fixtures/kitten-3-64-64.jpg | Bin 0 -> 9212 bytes images/badge-filled-16.svg | 7 + images/check-circle-filled-16.svg | 11 + images/chevron-left-12.svg | 6 + images/chevron-right-12.svg | 6 + images/more-h.svg | 8 + images/plus-20.svg | 6 + images/recent-outline.svg | 7 + images/sticker-filled.svg | 10 + js/background.js | 126 ++- js/message_controller.js | 4 + js/models/conversations.js | 78 +- js/models/messages.js | 129 ++- js/modules/attachment_downloads.js | 44 +- js/modules/crypto.js | 33 + js/modules/data.d.ts | 18 + js/modules/data.js | 51 + js/modules/link_previews.js | 32 +- js/modules/signal.js | 42 + js/modules/stickers.d.ts | 1 + js/modules/stickers.js | 495 +++++++++ js/modules/types/attachment.js | 2 +- js/modules/types/conversation.js | 11 +- js/modules/types/message.js | 93 +- js/modules/web_api.js | 130 ++- js/storage.js | 14 + js/views/conversation_view.js | 299 ++++-- js/views/inbox_view.js | 14 + js/views/message_view.js | 18 +- js/views/react_wrapper_view.js | 13 +- libtextsecure/crypto.js | 7 +- libtextsecure/message_receiver.js | 35 + libtextsecure/protobufs.js | 1 + libtextsecure/sendmessage.js | 128 ++- main.js | 39 +- package.json | 7 +- preload.js | 13 +- protos/SignalService.proto | 37 +- protos/Stickers.proto | 13 + styleguide.config.js | 7 +- stylesheets/_conversation.scss | 5 + stylesheets/_global.scss | 4 + stylesheets/_ios.scss | 12 +- stylesheets/_mixins.scss | 6 +- stylesheets/_modules.scss | 994 +++++++++++++++++- stylesheets/_theme_dark.scss | 6 +- stylesheets/_variables.scss | 1 + ts/components/ConfirmationDialog.md | 16 + ts/components/ConfirmationDialog.tsx | 117 +++ ts/components/ConfirmationModal.tsx | 89 ++ ts/components/conversation/ExpireTimer.tsx | 7 +- ts/components/conversation/Image.md | 48 + ts/components/conversation/Image.tsx | 31 +- ts/components/conversation/ImageGrid.md | 23 + ts/components/conversation/ImageGrid.tsx | 25 +- ts/components/conversation/Message.md | 576 ++++++++-- ts/components/conversation/Message.tsx | 92 +- ts/components/conversation/Timestamp.tsx | 5 +- ts/components/stickers/StickerButton.md | 271 +++++ ts/components/stickers/StickerButton.tsx | 255 +++++ ts/components/stickers/StickerManager.md | 178 ++++ ts/components/stickers/StickerManager.tsx | 107 ++ .../stickers/StickerManagerPackRow.tsx | 129 +++ .../stickers/StickerPackInstallButton.tsx | 29 + ts/components/stickers/StickerPicker.md | 321 ++++++ ts/components/stickers/StickerPicker.tsx | 282 +++++ ts/components/stickers/StickerPreviewModal.md | 29 + .../stickers/StickerPreviewModal.tsx | 165 +++ ts/shims/storage.ts | 9 + ts/shims/textsecure.ts | 77 ++ ts/state/actions.ts | 16 +- ts/state/ducks/conversations.ts | 8 +- ts/state/ducks/items.ts | 121 +++ ts/state/ducks/search.ts | 8 +- ts/state/ducks/stickers.ts | 463 ++++++++ ts/state/ducks/user.ts | 9 +- ts/state/reducer.ts | 37 +- ts/state/roots/createStickerButton.tsx | 16 + ts/state/roots/createStickerManager.tsx | 16 + ts/state/roots/createStickerPreviewModal.tsx | 16 + ts/state/selectors/stickers.ts | 206 ++++ ts/state/selectors/user.ts | 10 + ts/state/smart/StickerButton.tsx | 48 + ts/state/smart/StickerManager.tsx | 28 + ts/state/smart/StickerPreviewModal.tsx | 54 + ts/styleguide/StyleGuideUtil.ts | 22 + ts/types/MIME.ts | 1 + ts/util/lint/exceptions.json | 486 ++++----- ts/util/lint/linter.ts | 1 + tslint.json | 3 + yarn.lock | 79 +- 100 files changed, 7572 insertions(+), 693 deletions(-) create mode 100644 fixtures/512x515-thumbs-up-lincoln.webp create mode 100644 fixtures/kitten-1-64-64.jpg create mode 100644 fixtures/kitten-2-64-64.jpg create mode 100644 fixtures/kitten-3-64-64.jpg create mode 100644 images/badge-filled-16.svg create mode 100644 images/check-circle-filled-16.svg create mode 100644 images/chevron-left-12.svg create mode 100644 images/chevron-right-12.svg create mode 100644 images/more-h.svg create mode 100644 images/plus-20.svg create mode 100644 images/recent-outline.svg create mode 100644 images/sticker-filled.svg create mode 100644 js/modules/stickers.d.ts create mode 100644 js/modules/stickers.js create mode 100644 protos/Stickers.proto create mode 100644 ts/components/ConfirmationDialog.md create mode 100644 ts/components/ConfirmationDialog.tsx create mode 100644 ts/components/ConfirmationModal.tsx create mode 100644 ts/components/stickers/StickerButton.md create mode 100644 ts/components/stickers/StickerButton.tsx create mode 100644 ts/components/stickers/StickerManager.md create mode 100644 ts/components/stickers/StickerManager.tsx create mode 100644 ts/components/stickers/StickerManagerPackRow.tsx create mode 100644 ts/components/stickers/StickerPackInstallButton.tsx create mode 100644 ts/components/stickers/StickerPicker.md create mode 100644 ts/components/stickers/StickerPicker.tsx create mode 100644 ts/components/stickers/StickerPreviewModal.md create mode 100644 ts/components/stickers/StickerPreviewModal.tsx create mode 100644 ts/shims/storage.ts create mode 100644 ts/shims/textsecure.ts create mode 100644 ts/state/ducks/items.ts create mode 100644 ts/state/ducks/stickers.ts create mode 100644 ts/state/roots/createStickerButton.tsx create mode 100644 ts/state/roots/createStickerManager.tsx create mode 100644 ts/state/roots/createStickerPreviewModal.tsx create mode 100644 ts/state/selectors/stickers.ts create mode 100644 ts/state/smart/StickerButton.tsx create mode 100644 ts/state/smart/StickerManager.tsx create mode 100644 ts/state/smart/StickerPreviewModal.tsx diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e67f64278..2e7f67311 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1730,5 +1730,109 @@ "example": "Alice, Bob" } } + }, + "message--getNotificationText--stickers": { + "message": "Sticker message", + "description": + "Shown in notifications and in the left pane instead of sticker image." + }, + "stickers--toast--InstallFailed": { + "message": "Sticker pack could not be installed", + "description": + "Shown in a toast if the user attempts to install a sticker pack and it fails" + }, + "stickers--StickerManager--InstalledPacks": { + "message": "Installed Stickers", + "description": + "Shown in the sticker pack manager above your installed sticker packs." + }, + "stickers--StickerManager--InstalledPacks--Empty": { + "message": "No stickers installed", + "description": + "Shown in the sticker pack manager when you don't have any installed sticker packs." + }, + "stickers--StickerManager--BlessedPacks": { + "message": "Signal Artist Series", + "description": + "Shown in the sticker pack manager above the default sticker packs." + }, + "stickers--StickerManager--BlessedPacks--Empty": { + "message": "No Signal Artist stickers available", + "description": + "Shown in the sticker pack manager when there are no blessed sticker packs available." + }, + "stickers--StickerManager--ReceivedPacks": { + "message": "Stickers You Received", + "description": + "Shown in the sticker pack manager above sticker packs which you have received in messages." + }, + "stickers--StickerManager--ReceivedPacks--Empty": { + "message": "Stickers from incoming messages will appear here", + "description": + "Shown in the sticker pack manager when you have not received any sticker packs in messages." + }, + "stickers--StickerManager--Install": { + "message": "Install", + "description": + "Shown in the sticker pack manager next to sticker packs which can be installed." + }, + "stickers--StickerManager--Uninstall": { + "message": "Uninstall", + "description": + "Shown in the sticker pack manager next to sticker packs which are already installed." + }, + "stickers--StickerManager--UninstallWarning": { + "message": + "You may not be able to re-install this sticker pack if you no longer have the source message.", + "description": + "Shown in the sticker pack manager next to sticker packs which are already installed." + }, + "stickers--StickerManager--Introduction--Title": { + "message": "Introducing Stickers", + "description": + "Shown as the title on a tooltip when the user upgrades to a version of Signal supporting stickers." + }, + "stickers--StickerManager--Introduction--Body": { + "message": "Why use words when you can use stickers?", + "description": + "Shown as the body on a tooltip when the user upgrades to a version of Signal supporting stickers." + }, + "stickers--StickerPicker--DownloadError": { + "message": "Some stickers could not be downloaded.", + "description": + "Shown in the sticker picker when one or more stickers could not be downloaded." + }, + "stickers--StickerPicker--DownloadPending": { + "message": "Installing sticker pack...", + "description": + "Shown in the sticker picker when one or more stickers are still downloading." + }, + "stickers--StickerPicker--Empty": { + "message": "No stickers found", + "description": + "Shown in the sticker picker when there are no stickers to show." + }, + "stickers--StickerPicker--Hint": { + "message": "New sticker packs from your messages are available to install", + "description": + "Shown in the sticker picker the first time you have received new packs you can install." + }, + "stickers--StickerPicker--NoPacks": { + "message": "No sticker packs found", + "description": + "Shown in the sticker picker when there are no installed sticker packs." + }, + "stickers--StickerPicker--NoRecents": { + "message": "Recently used stickers will appear here.", + "description": + "Shown in the sticker picker when there are no recent stickers to show." + }, + "stickers--StickerPreview--Title": { + "message": "Sticker Pack", + "description": "The title that appears in the sticker pack preview modal." + }, + "confirmation-dialog--Cancel": { + "message": "Cancel", + "description": "Appears on the cancel button in confirmation dialogs." } } diff --git a/app/attachment_channel.js b/app/attachment_channel.js index c5e229751..672b531a3 100644 --- a/app/attachment_channel.js +++ b/app/attachment_channel.js @@ -11,6 +11,7 @@ module.exports = { let initialized = false; const ERASE_ATTACHMENTS_KEY = 'erase-attachments'; +const ERASE_STICKERS_KEY = 'erase-stickers'; const CLEANUP_ORPHANED_ATTACHMENTS_KEY = 'cleanup-orphaned-attachments'; async function initialize({ configDir, cleanupOrphanedAttachments }) { @@ -19,12 +20,10 @@ async function initialize({ configDir, cleanupOrphanedAttachments }) { } initialized = true; - console.log('Ensure attachments directory exists'); - await Attachments.ensureDirectory(configDir); - const attachmentsDir = Attachments.getPath(configDir); + const stickersDir = Attachments.getStickersPath(configDir); - ipcMain.on(ERASE_ATTACHMENTS_KEY, async event => { + ipcMain.on(ERASE_ATTACHMENTS_KEY, event => { try { rimraf.sync(attachmentsDir); event.sender.send(`${ERASE_ATTACHMENTS_KEY}-done`); @@ -35,6 +34,17 @@ async function initialize({ configDir, cleanupOrphanedAttachments }) { } }); + ipcMain.on(ERASE_STICKERS_KEY, event => { + try { + rimraf.sync(stickersDir); + event.sender.send(`${ERASE_STICKERS_KEY}-done`); + } catch (error) { + const errorForDisplay = error && error.stack ? error.stack : error; + console.log(`erase stickers error: ${errorForDisplay}`); + event.sender.send(`${ERASE_STICKERS_KEY}-done`, error); + } + }); + ipcMain.on(CLEANUP_ORPHANED_ATTACHMENTS_KEY, async event => { try { await cleanupOrphanedAttachments(); diff --git a/app/attachments.js b/app/attachments.js index f8b8627fe..f6ea69f65 100644 --- a/app/attachments.js +++ b/app/attachments.js @@ -8,6 +8,7 @@ const toArrayBuffer = require('to-arraybuffer'); const { map, isArrayBuffer, isString } = require('lodash'); const PATH = 'attachments.noindex'; +const STICKER_PATH = 'stickers.noindex'; exports.getAllAttachments = async userDataPath => { const dir = exports.getPath(userDataPath); @@ -17,6 +18,14 @@ exports.getAllAttachments = async userDataPath => { return map(files, file => path.relative(dir, file)); }; +exports.getAllStickers = async userDataPath => { + const dir = exports.getStickersPath(userDataPath); + const pattern = path.join(dir, '**', '*'); + + const files = await pify(glob)(pattern, { nodir: true }); + return map(files, file => path.relative(dir, file)); +}; + // getPath :: AbsolutePath -> AbsolutePath exports.getPath = userDataPath => { if (!isString(userDataPath)) { @@ -25,12 +34,12 @@ exports.getPath = userDataPath => { return path.join(userDataPath, PATH); }; -// ensureDirectory :: AbsolutePath -> IO Unit -exports.ensureDirectory = async userDataPath => { +// getStickersPath :: AbsolutePath -> AbsolutePath +exports.getStickersPath = userDataPath => { if (!isString(userDataPath)) { throw new TypeError("'userDataPath' must be a string"); } - await fse.ensureDir(exports.getPath(userDataPath)); + return path.join(userDataPath, STICKER_PATH); }; // createReader :: AttachmentsPath -> @@ -56,6 +65,30 @@ exports.createReader = root => { }; }; +exports.copyIntoAttachmentsDirectory = root => { + if (!isString(root)) { + throw new TypeError("'root' must be a path"); + } + + return async sourcePath => { + if (!isString(sourcePath)) { + throw new TypeError('sourcePath must be a string'); + } + + const name = exports.createName(); + const relativePath = exports.getRelativePath(name); + const absolutePath = path.join(root, relativePath); + const normalized = path.normalize(absolutePath); + if (!normalized.startsWith(root)) { + throw new Error('Invalid relative path'); + } + + await fse.ensureFile(normalized); + await fse.copy(sourcePath, normalized); + return relativePath; + }; +}; + // createWriterForNew :: AttachmentsPath -> // ArrayBuffer -> // IO (Promise RelativePath) @@ -142,6 +175,20 @@ exports.deleteAll = async ({ userDataPath, attachments }) => { console.log(`deleteAll: deleted ${attachments.length} files`); }; +exports.deleteAllStickers = async ({ userDataPath, stickers }) => { + const deleteFromDisk = exports.createDeleter( + exports.getStickersPath(userDataPath) + ); + + for (let index = 0, max = stickers.length; index < max; index += 1) { + const file = stickers[index]; + // eslint-disable-next-line no-await-in-loop + await deleteFromDisk(file); + } + + console.log(`deleteAllStickers: deleted ${stickers.length} files`); +}; + // createName :: Unit -> IO String exports.createName = () => { const buffer = crypto.randomBytes(32); diff --git a/app/sql.js b/app/sql.js index 29a34535e..2197d32fb 100644 --- a/app/sql.js +++ b/app/sql.js @@ -1,4 +1,4 @@ -const path = require('path'); +const { join } = require('path'); const mkdirp = require('mkdirp'); const rimraf = require('rimraf'); const sql = require('@journeyapps/sqlcipher'); @@ -8,7 +8,15 @@ const { remove: removeUserConfig } = require('./user_config'); const pify = require('pify'); const uuidv4 = require('uuid/v4'); -const { map, isObject, isString, fromPairs, forEach, last } = require('lodash'); +const { + forEach, + fromPairs, + isNumber, + isObject, + isString, + last, + map, +} = require('lodash'); // To get long stack traces // https://github.com/mapbox/node-sqlite3/wiki/API#sqlite3verbose @@ -104,6 +112,17 @@ module.exports = { removeAttachmentDownloadJob, removeAllAttachmentDownloadJobs, + createOrUpdateStickerPack, + updateStickerPackStatus, + createOrUpdateSticker, + updateStickerLastUsed, + addStickerPackReference, + deleteStickerPackReference, + deleteStickerPack, + getAllStickerPacks, + getAllStickers, + getRecentStickers, + removeAll, removeAllConfiguration, @@ -112,6 +131,7 @@ module.exports = { getMessagesWithFileAttachments, removeKnownAttachments, + removeKnownStickers, }; function generateUUID() { @@ -179,6 +199,9 @@ async function setupSQLCipher(instance, { key }) { // https://www.zetetic.net/sqlcipher/sqlcipher-api/#key await instance.run(`PRAGMA key = "x'${key}'";`); + + // Because foreign key support is not enabled by default! + await instance.run('PRAGMA foreign_keys = ON;'); } async function updateToSchemaVersion1(currentVersion, instance) { @@ -635,6 +658,83 @@ async function updateToSchemaVersion11(currentVersion, instance) { console.log('updateToSchemaVersion11: success!'); } +async function updateToSchemaVersion12(currentVersion, instance) { + if (currentVersion >= 12) { + return; + } + + console.log('updateToSchemaVersion12: starting...'); + await instance.run('BEGIN TRANSACTION;'); + + await instance.run(`CREATE TABLE sticker_packs( + id TEXT PRIMARY KEY, + key TEXT NOT NULL, + + author STRING, + coverStickerId INTEGER, + createdAt INTEGER, + downloadAttempts INTEGER, + installedAt INTEGER, + lastUsed INTEGER, + status STRING, + stickerCount INTEGER, + title STRING + );`); + + await instance.run(`CREATE TABLE stickers( + id INTEGER NOT NULL, + packId TEXT NOT NULL, + + emoji STRING, + height INTEGER, + isCoverOnly INTEGER, + lastUsed INTEGER, + path STRING, + width INTEGER, + + PRIMARY KEY (id, packId), + CONSTRAINT stickers_fk + FOREIGN KEY (packId) + REFERENCES sticker_packs(id) + ON DELETE CASCADE + );`); + + await instance.run(`CREATE INDEX stickers_recents + ON stickers ( + lastUsed + ) WHERE lastUsed IS NOT NULL;`); + + await instance.run(`CREATE TABLE sticker_references( + messageId STRING, + packId TEXT, + CONSTRAINT sticker_references_fk + FOREIGN KEY(packId) + REFERENCES sticker_packs(id) + ON DELETE CASCADE + );`); + + await instance.run('PRAGMA schema_version = 12;'); + await instance.run('COMMIT TRANSACTION;'); + console.log('updateToSchemaVersion12: success!'); +} + +async function updateToSchemaVersion13(currentVersion, instance) { + if (currentVersion >= 13) { + return; + } + + console.log('updateToSchemaVersion13: starting...'); + await instance.run('BEGIN TRANSACTION;'); + + await instance.run( + 'ALTER TABLE sticker_packs ADD COLUMN attemptedStatus STRING;' + ); + + await instance.run('PRAGMA schema_version = 13;'); + await instance.run('COMMIT TRANSACTION;'); + console.log('updateToSchemaVersion13: success!'); +} + const SCHEMA_VERSIONS = [ updateToSchemaVersion1, updateToSchemaVersion2, @@ -647,6 +747,8 @@ const SCHEMA_VERSIONS = [ updateToSchemaVersion9, updateToSchemaVersion10, updateToSchemaVersion11, + updateToSchemaVersion12, + updateToSchemaVersion13, ]; async function updateSchema(instance) { @@ -689,12 +791,12 @@ async function initialize({ configDir, key, messages }) { throw new Error('initialize: message is required!'); } - indexedDBPath = path.join(configDir, 'IndexedDB'); + indexedDBPath = join(configDir, 'IndexedDB'); - const dbDir = path.join(configDir, 'sql'); + const dbDir = join(configDir, 'sql'); mkdirp.sync(dbDir); - filePath = path.join(dbDir, 'db.sqlite'); + filePath = join(dbDir, 'db.sqlite'); try { const sqlInstance = await openDatabase(filePath); @@ -773,7 +875,7 @@ async function removeIndexedDBFiles() { ); } - const pattern = path.join(indexedDBPath, '*.leveldb'); + const pattern = join(indexedDBPath, '*.leveldb'); rimraf.sync(pattern); indexedDBPath = null; } @@ -1507,6 +1609,7 @@ async function getOutgoingWithoutExpiresAt() { } async function getNextExpiringMessage() { + // Note: we avoid 'IS NOT NULL' here because it does seem to bypass our index const rows = await db.all(` SELECT json FROM messages WHERE expires_at > 0 @@ -1658,6 +1761,8 @@ async function removeAllUnprocessed() { await db.run('DELETE FROM unprocessed;'); } +// Attachment Downloads + const ATTACHMENT_DOWNLOADS_TABLE = 'attachment_downloads'; async function getNextAttachmentDownloadJobs(limit, options = {}) { const timestamp = options.timestamp || Date.now(); @@ -1724,6 +1829,359 @@ async function removeAllAttachmentDownloadJobs() { return removeAllFromTable(ATTACHMENT_DOWNLOADS_TABLE); } +// Stickers + +async function createOrUpdateStickerPack(pack) { + const { + attemptedStatus, + author, + coverStickerId, + createdAt, + downloadAttempts, + id, + installedAt, + key, + lastUsed, + status, + stickerCount, + title, + } = pack; + if (!id) { + throw new Error( + 'createOrUpdateStickerPack: Provided data did not have a truthy id' + ); + } + + await db.run( + `INSERT OR REPLACE INTO sticker_packs ( + attemptedStatus, + author, + coverStickerId, + createdAt, + downloadAttempts, + id, + installedAt, + key, + lastUsed, + status, + stickerCount, + title + ) values ( + $attemptedStatus, + $author, + $coverStickerId, + $createdAt, + $downloadAttempts, + $id, + $installedAt, + $key, + $lastUsed, + $status, + $stickerCount, + $title + )`, + { + $attemptedStatus: attemptedStatus, + $author: author, + $coverStickerId: coverStickerId, + $createdAt: createdAt || Date.now(), + $downloadAttempts: downloadAttempts || 1, + $id: id, + $installedAt: installedAt, + $key: key, + $lastUsed: lastUsed || null, + $status: status, + $stickerCount: stickerCount, + $title: title, + } + ); +} +async function updateStickerPackStatus(id, status, options) { + // Strange, but an undefined parameter gets coerced into null via ipc + const timestamp = (options || {}).timestamp || Date.now(); + const installedAt = status === 'installed' ? timestamp : null; + + await db.run( + `UPDATE sticker_packs + SET status = $status, installedAt = $installedAt + WHERE id = $id; + )`, + { + $id: id, + $status: status, + $installedAt: installedAt, + } + ); +} +async function createOrUpdateSticker(sticker) { + const { + emoji, + height, + id, + isCoverOnly, + lastUsed, + packId, + path, + width, + } = sticker; + if (!isNumber(id)) { + throw new Error( + 'createOrUpdateSticker: Provided data did not have a numeric id' + ); + } + if (!packId) { + throw new Error( + 'createOrUpdateSticker: Provided data did not have a truthy id' + ); + } + + await db.run( + `INSERT OR REPLACE INTO stickers ( + emoji, + height, + id, + isCoverOnly, + lastUsed, + packId, + path, + width + ) values ( + $emoji, + $height, + $id, + $isCoverOnly, + $lastUsed, + $packId, + $path, + $width + )`, + { + $emoji: emoji, + $height: height, + $id: id, + $isCoverOnly: isCoverOnly, + $lastUsed: lastUsed, + $packId: packId, + $path: path, + $width: width, + } + ); +} +async function updateStickerLastUsed(packId, stickerId, lastUsed) { + await db.run( + `UPDATE stickers + SET lastUsed = $lastUsed + WHERE id = $id AND packId = $packId;`, + { + $id: stickerId, + $packId: packId, + $lastUsed: lastUsed, + } + ); + await db.run( + `UPDATE sticker_packs + SET lastUsed = $lastUsed + WHERE id = $id;`, + { + $id: packId, + $lastUsed: lastUsed, + } + ); +} +async function addStickerPackReference(messageId, packId) { + if (!messageId) { + throw new Error( + 'addStickerPackReference: Provided data did not have a truthy messageId' + ); + } + if (!packId) { + throw new Error( + 'addStickerPackReference: Provided data did not have a truthy packId' + ); + } + + await db.run( + `INSERT OR REPLACE INTO sticker_references ( + messageId, + packId + ) values ( + $messageId, + $packId + )`, + { + $messageId: messageId, + $packId: packId, + } + ); +} +async function deleteStickerPackReference(messageId, packId) { + if (!messageId) { + throw new Error( + 'addStickerPackReference: Provided data did not have a truthy messageId' + ); + } + if (!packId) { + throw new Error( + 'addStickerPackReference: Provided data did not have a truthy packId' + ); + } + + try { + // We use an immediate transaction here to immediately acquire an exclusive lock, + // which would normally only happen when we did our first write. + + // We need this to ensure that our five queries are all atomic, with no other changes + // happening while we do it: + // 1. Delete our target messageId/packId references + // 2. Check the number of references still pointing at packId + // 3. If that number is zero, get pack from sticker_packs database + // 4. If it's not installed, then grab all of its sticker paths + // 5. If it's not installed, then sticker pack (which cascades to all stickers and + // references) + await db.run('BEGIN IMMEDIATE TRANSACTION;'); + + await db.run( + `DELETE FROM sticker_references + WHERE messageId = $messageId AND packId = $packId;`, + { + $messageId: messageId, + $packId: packId, + } + ); + + const countRow = await db.get( + `SELECT count(*) FROM sticker_references + WHERE packId = $packId;`, + { $packId: packId } + ); + if (!countRow) { + throw new Error( + 'deleteStickerPackReference: Unable to get count of references' + ); + } + const count = countRow['count(*)']; + if (count > 0) { + await db.run('COMMIT TRANSACTION'); + return null; + } + + const packRow = await db.get( + `SELECT status FROM sticker_packs + WHERE id = $packId;`, + { $packId: packId } + ); + if (!packRow) { + console.log('deleteStickerPackReference: did not find referenced pack'); + await db.run('COMMIT TRANSACTION'); + return null; + } + const { status } = packRow; + + if (status === 'installed') { + await db.run('COMMIT TRANSACTION'); + return null; + } + + const stickerPathRows = await db.all( + `SELECT path FROM stickers + WHERE packId = $packId;`, + { + $packId: packId, + } + ); + await db.run( + `DELETE FROM sticker_packs + WHERE id = $packId;`, + { $packId: packId } + ); + + await db.run('COMMIT TRANSACTION;'); + + return (stickerPathRows || []).map(row => row.path); + } catch (error) { + await db.run('ROLLBACK;'); + throw error; + } +} +async function deleteStickerPack(packId) { + if (!packId) { + throw new Error( + 'deleteStickerPack: Provided data did not have a truthy packId' + ); + } + + try { + // We use an immediate transaction here to immediately acquire an exclusive lock, + // which would normally only happen when we did our first write. + + // We need this to ensure that our two queries are atomic, with no other changes + // happening while we do it: + // 1. Grab all of target pack's sticker paths + // 2. Delete sticker pack (which cascades to all stickers and references) + await db.run('BEGIN IMMEDIATE TRANSACTION;'); + + const stickerPathRows = await db.all( + `SELECT path FROM stickers + WHERE packId = $packId;`, + { + $packId: packId, + } + ); + await db.run( + `DELETE FROM sticker_packs + WHERE id = $packId;`, + { $packId: packId } + ); + + await db.run('COMMIT TRANSACTION;'); + + return (stickerPathRows || []).map(row => row.path); + } catch (error) { + await db.run('ROLLBACK;'); + throw error; + } +} +async function getStickerCount() { + const row = await db.get('SELECT count(*) from stickers;'); + + if (!row) { + throw new Error('getStickerCount: Unable to get count of stickers'); + } + + return row['count(*)']; +} +async function getAllStickerPacks() { + const rows = await db.all( + `SELECT * FROM sticker_packs + ORDER BY installedAt DESC, createdAt DESC` + ); + + return rows || []; +} +async function getAllStickers() { + const rows = await db.all( + `SELECT * FROM stickers + ORDER BY packId ASC, id ASC` + ); + + return rows || []; +} +async function getRecentStickers({ limit } = {}) { + // Note: we avoid 'IS NOT NULL' here because it does seem to bypass our index + const rows = await db.all( + `SELECT stickers.* FROM stickers + JOIN sticker_packs on stickers.packId = sticker_packs.id + WHERE stickers.lastUsed > 0 AND sticker_packs.status = 'installed' + ORDER BY stickers.lastUsed DESC + LIMIT $limit`, + { + $limit: limit || 24, + } + ); + + return rows || []; +} + // All data in database async function removeAll() { let promise; @@ -1741,6 +2199,9 @@ async function removeAll() { db.run('DELETE FROM unprocessed;'), db.run('DELETE FROM attachment_downloads;'), db.run('DELETE FROM messages_fts;'), + db.run('DELETE FROM stickers;'), + db.run('DELETE FROM sticker_packs;'), + db.run('DELETE FROM sticker_references;'), db.run('COMMIT TRANSACTION;'), ]); }); @@ -1818,7 +2279,7 @@ async function getMessagesWithFileAttachments(conversationId, { limit }) { } function getExternalFilesForMessage(message) { - const { attachments, contact, quote, preview } = message; + const { attachments, contact, quote, preview, sticker } = message; const files = []; forEach(attachments, attachment => { @@ -1866,6 +2327,14 @@ function getExternalFilesForMessage(message) { }); } + if (sticker && sticker.data && sticker.data.path) { + files.push(sticker.data.path); + + if (sticker.data.thumbnail && sticker.data.thumbnail.path) { + files.push(sticker.data.thumbnail.path); + } + } + return files; } @@ -1972,3 +2441,47 @@ async function removeKnownAttachments(allAttachments) { return Object.keys(lookup); } + +async function removeKnownStickers(allStickers) { + const lookup = fromPairs(map(allStickers, file => [file, true])); + const chunkSize = 50; + + const total = await getStickerCount(); + console.log( + `removeKnownStickers: About to iterate through ${total} stickers` + ); + + let count = 0; + let complete = false; + let rowid = 0; + + while (!complete) { + // eslint-disable-next-line no-await-in-loop + const rows = await db.all( + `SELECT rowid, path FROM stickers + WHERE rowid > $rowid + ORDER BY rowid ASC + LIMIT $chunkSize;`, + { + $rowid: rowid, + $chunkSize: chunkSize, + } + ); + + const files = map(rows, row => row.path); + forEach(files, file => { + delete lookup[file]; + }); + + const lastSticker = last(rows); + if (lastSticker) { + ({ rowid } = lastSticker); + } + complete = rows.length < chunkSize; + count += rows.length; + } + + console.log(`removeKnownStickers: Done processing ${count} stickers`); + + return Object.keys(lookup); +} diff --git a/app/sql_channel.js b/app/sql_channel.js index 128ab3a59..d781b9ad6 100644 --- a/app/sql_channel.js +++ b/app/sql_channel.js @@ -1,4 +1,5 @@ const electron = require('electron'); +const Queue = require('p-queue'); const sql = require('./sql'); const { remove: removeUserConfig } = require('./user_config'); const { remove: removeEphemeralConfig } = require('./ephemeral_config'); @@ -14,6 +15,8 @@ let initialized = false; const SQL_CHANNEL_KEY = 'sql-channel'; const ERASE_SQL_KEY = 'erase-sql-key'; +const queue = new Queue({ concurrency: 1 }); + function initialize() { if (initialized) { throw new Error('sqlChannels: already initialized!'); @@ -29,7 +32,10 @@ function initialize() { ); } - const result = await fn(...args); + // Note: we queue here to keep multi-query operations atomic. Without it, any + // multistage data operation (even within a BEGIN/COMMIT) can become interleaved, + // since all requests share one database connection. + const result = await queue.add(() => fn(...args)); event.sender.send(`${SQL_CHANNEL_KEY}-done`, jobId, null, result); } catch (error) { const errorForDisplay = error && error.stack ? error.stack : error; diff --git a/background.html b/background.html index d8ffd6392..ced91eeb6 100644 --- a/background.html +++ b/background.html @@ -119,6 +119,7 @@
+
@@ -524,7 +525,7 @@ - +
diff --git a/fixtures/512x515-thumbs-up-lincoln.webp b/fixtures/512x515-thumbs-up-lincoln.webp new file mode 100644 index 0000000000000000000000000000000000000000..b5df889adbbc093d657c3b0675ebed88b350b139 GIT binary patch literal 38226 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�Z(8*ok(MrsTSV@=O8x-VI< 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ΝfH zGS4GoW@1WmZhBRTFFm+h5je5Y;vo+{n$5V-00006v*Ap1yFdH;lg0D!SJ$VlCxpRu zL! zq$k;5&4A&3DlD?!58dD**iCLAu;%e4^8G65Fg5p-7N9YnWpa3NPatQh03{9ng=S?} z-PuS05TIWx{JP9!HQ28Xj=C%3mdGgG-t*)Bi+X*CMBC1X#&B64iD(=-UZ&fyt(|6S zi=%Q);pR!HX16S^la=~8PGiV!#~6(`Y*{;9_u%gtcv=RO2qeA;vR2Zk__nezX@ZCN a4suH?%aGU^8mmUZWdL0O0wQ1l0001zas>bY literal 0 HcmV?d00001 diff --git a/fixtures/kitten-1-64-64.jpg b/fixtures/kitten-1-64-64.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7a5d70d76c3f7c78aa1efbdafab6302fa7faa010 GIT binary patch literal 1476 zcmex=_1P|rX?qqI0P zFI~aY%U!`Mz|~!$%*;qrN1?DZF(yimrOX!XqN1l2cOC z(lau%ic3n%$}1|Xnp;}i+B-VCCQY6)b=ve9GiNPYykzOJeA&aSFc^aar4&0M~|O8efIpt%U2&ieg5+G+xH(oe}VkP$iNKo7TjlO z{t^WGi;0DWnS~wXFGi+vAZ8Y1VO2C_6LJh>Pb?HxGHT=yahkYr<3UbkKb$@|Xn~>>1Wdsl8p=U^lhOI=QDWi?Nnt zO9!{gL=VfvJI`N+rtULXmwWT7|A!6dZasTy{@hHIzRs;$K$f6Ob^<1!q_s% zlYwj5u9h~p*fX}3%TMSP?+llCaz*dq?VN<&Ra{Tk>ZeT3mXujuz^}GV;mSI(J8PF{ zOEBvy%3t}eyAr!i&gz^m6`YmnGiQRWJ=da>_uf8TY#4}Vy3^ow@!HtX`z;@_u+3h`PLgSp2iI=->_6Hgs5Q{j{VaZh$#`>_&`sSp& zC%V{EV;*lW{%V>hc`xR$jzZs4Uzh1Y7q7jvnlMM`%*F*Tx(ryeDnD#@7d@P1v~}tv z?&6*=mj9-}d5?xA~yx#Vn~Jj+!e|bnb?mR^7YAk=Q%8 zP^Y;_--o|y_Y$ovqrY?S+5GA&d>fs+v-^7Tq|J@Xg-oV(E54j|&uQ`l+ed@grr&1$BGd2=%(^pajm q6~8Q;ad$h<$Ee*``gpy}HqH5JYd4j974yV94?-@B literal 0 HcmV?d00001 diff --git a/fixtures/kitten-2-64-64.jpg b/fixtures/kitten-2-64-64.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2585e8e58f3657a09356f64fd3f33f65c0caa639 GIT binary patch literal 8817 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 + + + + diff --git a/images/check-circle-filled-16.svg b/images/check-circle-filled-16.svg new file mode 100644 index 000000000..1683ea0bd --- /dev/null +++ b/images/check-circle-filled-16.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/images/chevron-left-12.svg b/images/chevron-left-12.svg new file mode 100644 index 000000000..ae4e9ecf1 --- /dev/null +++ b/images/chevron-left-12.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/images/chevron-right-12.svg b/images/chevron-right-12.svg new file mode 100644 index 000000000..9c39ac443 --- /dev/null +++ b/images/chevron-right-12.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/images/more-h.svg b/images/more-h.svg new file mode 100644 index 000000000..ecd45dec7 --- /dev/null +++ b/images/more-h.svg @@ -0,0 +1,8 @@ + + + + + + + diff --git a/images/plus-20.svg b/images/plus-20.svg new file mode 100644 index 000000000..340d982d6 --- /dev/null +++ b/images/plus-20.svg @@ -0,0 +1,6 @@ + + + + + diff --git a/images/recent-outline.svg b/images/recent-outline.svg new file mode 100644 index 000000000..24c26edab --- /dev/null +++ b/images/recent-outline.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/images/sticker-filled.svg b/images/sticker-filled.svg new file mode 100644 index 000000000..b647a4138 --- /dev/null +++ b/images/sticker-filled.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/js/background.js b/js/background.js index 8b45fe824..cdc937810 100644 --- a/js/background.js +++ b/js/background.js @@ -296,6 +296,24 @@ // Shut down the data interface cleanly await window.Signal.Data.shutdown(); }, + + installStickerPack: async (id, key) => { + const status = window.Signal.Stickers.getStickerPackStatus(id); + + if (status === 'installed') { + return; + } + + if (status === 'advertised') { + await window.reduxActions.stickers.installStickerPack(id, key, { + fromSync: true, + }); + } else { + await window.Signal.Stickers.downloadStickerPack(id, key, { + finalStatus: 'installed', + }); + } + }, }; const currentVersion = window.getVersion(); @@ -303,18 +321,23 @@ newVersion = !lastVersion || currentVersion !== lastVersion; await storage.put('version', currentVersion); - if (newVersion) { - if ( - lastVersion && - window.isBeforeVersion(lastVersion, 'v1.15.0-beta.5') - ) { - await window.Signal.Logs.deleteAll(); - window.restart(); - } - + if (newVersion && lastVersion) { window.log.info( `New version detected: ${currentVersion}; previous: ${lastVersion}` ); + + if (window.isBeforeVersion(lastVersion, 'v1.25.0')) { + // Stickers flags + await Promise.all([ + storage.put('showStickersIntroduction', true), + storage.put('showStickerPickerHint', true), + ]); + } + + if (window.isBeforeVersion(lastVersion, 'v1.15.0-beta.5')) { + await window.Signal.Logs.deleteAll(); + window.restart(); + } } if (isIndexedDBPresent) { @@ -395,6 +418,7 @@ try { await Promise.all([ ConversationController.load(), + Signal.Stickers.load(), textsecure.storage.protocol.hydrateCaches(), ]); } catch (error) { @@ -418,7 +442,11 @@ conversations: { conversationLookup: Signal.Util.makeLookup(conversations, 'id'), }, + items: storage.getItemsState(), + stickers: Signal.Stickers.getInitialState(), user: { + attachmentsPath: window.baseAttachmentsPath, + stickersPath: window.baseStickersPath, regionCode: window.storage.get('regionCode'), ourNumber: textsecure.storage.user.getNumber(), i18n: window.i18n, @@ -437,10 +465,18 @@ Signal.State.Ducks.conversations.actions, store.dispatch ); + actions.items = Signal.State.bindActionCreators( + Signal.State.Ducks.items.actions, + store.dispatch + ); actions.user = Signal.State.bindActionCreators( Signal.State.Ducks.user.actions, store.dispatch ); + actions.stickers = Signal.State.bindActionCreators( + Signal.State.Ducks.stickers.actions, + store.dispatch + ); const { conversationAdded, @@ -759,6 +795,7 @@ messageReceiver.addEventListener('progress', onProgress); messageReceiver.addEventListener('configuration', onConfiguration); messageReceiver.addEventListener('typing', onTyping); + messageReceiver.addEventListener('sticker-pack', onStickerPack); window.Signal.AttachmentDownloads.start({ getMessageReceiver: () => messageReceiver, @@ -770,6 +807,10 @@ PASSWORD ); + if (connectCount === 1) { + window.Signal.Stickers.downloadQueuedPacks(); + } + // On startup after upgrading to a new version, request a contact sync // (but only if we're not the primary device) if ( @@ -831,11 +872,34 @@ Whisper.events.trigger('contactsync'); }); + const ourNumber = textsecure.storage.user.getNumber(); + const { wrap, sendOptions } = ConversationController.prepareForSend( + ourNumber, + { syncMessage: true } + ); + + const installedStickerPacks = window.Signal.Stickers.getInstalledStickerPacks(); + if (installedStickerPacks.length) { + const operations = installedStickerPacks.map(pack => ({ + packId: pack.id, + packKey: pack.key, + installed: true, + })); + + wrap( + window.textsecure.messaging.sendStickerPackSync( + operations, + sendOptions + ) + ).catch(error => { + window.log.error( + 'Failed to send installed sticker packs via sync message', + error && error.stack ? error.stack : error + ); + }); + } + if (Whisper.Import.isComplete()) { - const { wrap, sendOptions } = ConversationController.prepareForSend( - textsecure.storage.user.getNumber(), - { syncMessage: true } - ); wrap( textsecure.messaging.sendRequestConfigurationSyncMessage(sendOptions) ).catch(error => { @@ -942,6 +1006,42 @@ } } + async function onStickerPack(ev) { + const packs = ev.stickerPacks || []; + + packs.forEach(pack => { + const { id, key, isInstall, isRemove } = pack || {}; + + if (!id || !key || (!isInstall && !isRemove)) { + window.log.warn( + 'Received malformed sticker pack operation sync message' + ); + return; + } + + const status = window.Signal.Stickers.getStickerPackStatus(id); + + if (status === 'installed' && isRemove) { + window.reduxActions.stickers.uninstallStickerPack(id, key, { + fromSync: true, + }); + } else if (isInstall) { + if (status === 'advertised') { + window.reduxActions.stickers.installStickerPack(id, key, { + fromSync: true, + }); + } else { + window.Signal.Stickers.downloadStickerPack(id, key, { + finalStatus: 'installed', + fromSync: true, + }); + } + } + }); + + ev.confirm(); + } + async function onContactReceived(ev) { const details = ev.contactDetails; diff --git a/js/message_controller.js b/js/message_controller.js index 18d58cde9..d871bcc83 100644 --- a/js/message_controller.js +++ b/js/message_controller.js @@ -12,6 +12,10 @@ const HOUR = MINUTE * 60; function register(id, message) { + if (!id || !message) { + return message; + } + const existing = messageLookup[id]; if (existing) { messageLookup[id] = { diff --git a/js/models/conversations.js b/js/models/conversations.js index 5a0feec1d..c2a3bc895 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -35,12 +35,14 @@ PhoneNumber, } = window.Signal.Types; const { - upgradeMessageSchema, - loadAttachmentData, - getAbsoluteAttachmentPath, - writeNewAttachmentData, deleteAttachmentData, + getAbsoluteAttachmentPath, + loadAttachmentData, + readStickerData, + upgradeMessageSchema, + writeNewAttachmentData, } = window.Signal.Migrations; + const { addStickerPackReference } = window.Signal.Data; const COLORS = [ 'red', @@ -761,7 +763,7 @@ return _.without(this.get('members'), me); }, - async getQuoteAttachment(attachments, preview) { + async getQuoteAttachment(attachments, preview, sticker) { if (attachments && attachments.length) { return Promise.all( attachments @@ -817,6 +819,23 @@ ); } + if (sticker && sticker.data && sticker.data.path) { + const { path, contentType } = sticker.data; + + return [ + { + contentType, + // Our protos library complains about this field being undefined, so we + // force it to null + fileName: null, + thumbnail: { + ...(await loadAttachmentData(sticker.data)), + objectUrl: getAbsoluteAttachmentPath(path), + }, + }, + ]; + } + return []; }, @@ -825,6 +844,7 @@ const contact = quotedMessage.getContact(); const attachments = quotedMessage.get('attachments'); const preview = quotedMessage.get('preview'); + const sticker = quotedMessage.get('sticker'); const body = quotedMessage.get('body'); const embeddedContact = quotedMessage.get('contact'); @@ -837,11 +857,46 @@ author: contact.id, id: quotedMessage.get('sent_at'), text: body || embeddedContactName, - attachments: await this.getQuoteAttachment(attachments, preview), + attachments: await this.getQuoteAttachment( + attachments, + preview, + sticker + ), }; }, - sendMessage(body, attachments, quote, preview) { + async sendStickerMessage(packId, stickerId) { + const packData = window.Signal.Stickers.getStickerPack(packId); + const stickerData = window.Signal.Stickers.getSticker(packId, stickerId); + if (!stickerData || !packData) { + window.log.warn( + `Attempted to send nonexistent (${packId}, ${stickerId}) sticker!` + ); + return; + } + + const { key } = packData; + const { path, width, height } = stickerData; + const arrayBuffer = await readStickerData(path); + + const sticker = { + packId, + stickerId, + packKey: key, + data: { + size: arrayBuffer.byteLength, + data: arrayBuffer, + contentType: 'image/webp', + width, + height, + }, + }; + + this.sendMessage(null, [], null, [], sticker); + window.reduxActions.stickers.useSticker(packId, stickerId); + }, + + sendMessage(body, attachments, quote, preview, sticker) { this.clearTypingTimers(); const destination = this.id; @@ -863,6 +918,7 @@ now ); + // Here we move attachments to disk const messageWithSchema = await upgradeMessageSchema({ type: 'outgoing', body, @@ -874,6 +930,7 @@ received_at: now, expireTimer, recipients, + sticker, }); if (this.isPrivate()) { @@ -885,6 +942,9 @@ }; const model = this.addSingleMessage(attributes); + if (sticker) { + await addStickerPackReference(model.id, sticker.packId); + } const message = MessageController.register(model.id, model); await window.Signal.Data.saveMessage(message.attributes, { forceSave: true, @@ -935,6 +995,7 @@ finalAttachments, quote, preview, + sticker, now, expireTimer, profileKey @@ -955,6 +1016,7 @@ finalAttachments, quote, preview, + sticker, now, expireTimer, profileKey, @@ -968,6 +1030,7 @@ finalAttachments, quote, preview, + sticker, now, expireTimer, profileKey, @@ -1271,6 +1334,7 @@ [], null, [], + null, message.get('sent_at'), expireTimer, profileKey, diff --git a/js/models/messages.js b/js/models/messages.js index 36d6e1c76..c2b675f19 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -27,8 +27,16 @@ loadAttachmentData, loadQuoteData, loadPreviewData, + loadStickerData, upgradeMessageSchema, } = window.Signal.Migrations; + const { + copyStickerToAttachments, + deletePackReference, + downloadStickerPack, + getStickerPackStatus, + } = window.Signal.Stickers; + const { addStickerPackReference } = window.Signal.Data; const { bytesFromString } = window.Signal.Crypto; window.AccountCache = Object.create(null); @@ -389,6 +397,29 @@ // It doesn't need anything right now! return {}; }, + getAttachmentsForMessage() { + const sticker = this.get('sticker'); + if (sticker && sticker.data) { + const { data } = sticker; + + // We don't show anything if we're still loading a sticker + if (data.pending || !data.path) { + return []; + } + + return [ + { + ...data, + url: getAbsoluteAttachmentPath(data.path), + }, + ]; + } + + const attachments = this.get('attachments') || []; + return attachments + .filter(attachment => !attachment.error) + .map(attachment => this.getPropsForAttachment(attachment)); + }, getPropsForMessage() { const phoneNumber = this.getSource(); const contact = this.findAndFormatContact(phoneNumber); @@ -408,12 +439,13 @@ const conversation = this.getConversation(); const isGroup = conversation && !conversation.isPrivate(); - const attachments = this.get('attachments') || []; + const sticker = this.get('sticker'); return { text: this.createNonBreakingLastSeparator(this.get('body')), textPending: this.get('bodyPending'), id: this.id, + isSticker: Boolean(sticker), direction: this.isIncoming() ? 'incoming' : 'outgoing', timestamp: this.get('sent_at'), status: this.getMessagePropStatus(), @@ -423,9 +455,7 @@ authorProfileName: contact.profileName, authorPhoneNumber: contact.phoneNumber, conversationType: isGroup ? 'group' : 'direct', - attachments: attachments - .filter(attachment => !attachment.error) - .map(attachment => this.getPropsForAttachment(attachment)), + attachments: this.getAttachmentsForMessage(), previews: this.getPropsForPreview(), quote: this.getPropsForQuote(), authorAvatarPath, @@ -584,6 +614,7 @@ return previews.map(preview => ({ ...preview, + isStickerPack: window.Signal.LinkPreviews.isStickerPack(preview.url), domain: window.Signal.LinkPreviews.getDomain(preview.url), image: preview.image ? this.getPropsForAttachment(preview.image) : null, })); @@ -708,6 +739,9 @@ if (this.get('attachments').length > 0) { return i18n('mediaMessage'); } + if (this.get('sticker')) { + return i18n('message--getNotificationText--stickers'); + } if (this.isExpirationTimerUpdate()) { const { expireTimer } = this.get('expirationTimerUpdate'); if (!expireTimer) { @@ -775,6 +809,16 @@ MessageController.unregister(this.id); this.unload(); await deleteExternalMessageFiles(this.attributes); + + const sticker = this.get('sticker'); + if (!sticker) { + return; + } + + const { packId } = sticker; + if (packId) { + await deletePackReference(this.id, packId); + } }, unload() { if (this.quotedMessage) { @@ -968,6 +1012,7 @@ const quoteWithData = await loadQuoteData(this.get('quote')); const previewWithData = await loadPreviewData(this.get('preview')); + const stickerWithData = await loadStickerData(this.get('sticker')); // Special-case the self-send case - we send only a sync message if (recipients.length === 1 && recipients[0] === this.OUR_NUMBER) { @@ -978,6 +1023,7 @@ attachments, quoteWithData, previewWithData, + stickerWithData, this.get('sent_at'), this.get('expireTimer'), profileKey @@ -996,6 +1042,7 @@ attachments, quoteWithData, previewWithData, + stickerWithData, this.get('sent_at'), this.get('expireTimer'), profileKey, @@ -1013,6 +1060,7 @@ attachments, quote: quoteWithData, preview: previewWithData, + sticker: stickerWithData, needsSync: !this.get('synced'), expireTimer: this.get('expireTimer'), profileKey, @@ -1058,6 +1106,7 @@ const quoteWithData = await loadQuoteData(this.get('quote')); const previewWithData = await loadPreviewData(this.get('preview')); + const stickerWithData = await loadStickerData(this.get('sticker')); // Special-case the self-send case - we send only a sync message if (number === this.OUR_NUMBER) { @@ -1067,6 +1116,7 @@ attachments, quoteWithData, previewWithData, + stickerWithData, this.get('sent_at'), this.get('expireTimer'), profileKey @@ -1083,6 +1133,7 @@ attachments, quoteWithData, previewWithData, + stickerWithData, this.get('sent_at'), this.get('expireTimer'), profileKey, @@ -1405,8 +1456,62 @@ }; } + let sticker = this.get('sticker'); + if (sticker) { + count += 1; + const { packId, stickerId, packKey } = sticker; + + const status = getStickerPackStatus(packId); + let data; + + if (status && status !== 'pending' && status !== 'error') { + try { + const copiedSticker = await copyStickerToAttachments( + packId, + stickerId + ); + data = { + ...copiedSticker, + contentType: 'image/webp', + }; + } catch (error) { + window.log.error( + `Problem copying sticker (${packId}, ${stickerId}) to attachments:`, + error && error.stack ? error.stack : error + ); + } + } + if (!data) { + data = await window.Signal.AttachmentDownloads.addJob(sticker.data, { + messageId, + type: 'sticker', + index: 0, + }); + } + if (!status) { + // kick off the download without waiting + downloadStickerPack(packId, packKey, { messageId }); + } else { + await addStickerPackReference(messageId, packId); + } + + sticker = { + ...sticker, + packId, + data, + }; + } + if (count > 0) { - this.set({ bodyPending, attachments, preview, contact, quote, group }); + this.set({ + bodyPending, + attachments, + preview, + contact, + quote, + group, + sticker, + }); await window.Signal.Data.saveMessage(this.attributes, { Message: Whisper.Message, @@ -1481,7 +1586,6 @@ } const queryAttachments = queryMessage.get('attachments') || []; - if (queryAttachments.length > 0) { const queryFirst = queryAttachments[0]; const { thumbnail } = queryFirst; @@ -1507,6 +1611,14 @@ } } + const sticker = queryMessage.get('sticker'); + if (sticker && sticker.data && sticker.data.path) { + firstAttachment.thumbnail = { + ...sticker.data, + copied: true, + }; + } + return message; }, @@ -1617,9 +1729,10 @@ hasAttachments: dataMessage.hasAttachments, hasFileAttachments: dataMessage.hasFileAttachments, hasVisualMediaAttachments: dataMessage.hasVisualMediaAttachments, - quote: dataMessage.quote, preview, + quote: dataMessage.quote, schemaVersion: dataMessage.schemaVersion, + sticker: dataMessage.sticker, }); if (type === 'outgoing') { const receipts = Whisper.DeliveryReceipts.forMessage( @@ -1841,7 +1954,7 @@ Whisper.Message.LONG_MESSAGE_CONTENT_TYPE = 'text/x-signal-plain'; Whisper.Message.getLongMessageAttachment = ({ body, attachments, now }) => { - if (body.length <= 2048) { + if (!body || body.length <= 2048) { return { body, attachments, diff --git a/js/modules/attachment_downloads.js b/js/modules/attachment_downloads.js index e4356dc83..6b17e808f 100644 --- a/js/modules/attachment_downloads.js +++ b/js/modules/attachment_downloads.js @@ -1,6 +1,14 @@ -/* global Whisper, Signal, setTimeout, clearTimeout, MessageController */ +/* global + ConversationController, + Whisper, + Signal, + setTimeout, + clearTimeout, + MessageController +*/ const { isFunction, isNumber, omit } = require('lodash'); +const { computeHash } = require('./types/conversation'); const getGuid = require('uuid/v4'); const { getMessageById, @@ -356,17 +364,41 @@ async function _addAttachmentToMessage(message, attachment, { type, index }) { } if (type === 'group-avatar') { - const group = message.get('group'); - if (!group) { - throw new Error("_addAttachmentToMessage: group didn't exist"); + const conversationId = message.get('conversationid'); + const conversation = ConversationController.get(conversationId); + if (!conversation) { + logger.warn("_addAttachmentToMessage: conversation didn't exist"); } - const existingAvatar = group.avatar; + const existingAvatar = conversation.get('avatar'); if (existingAvatar && existingAvatar.path) { await Signal.Migrations.deleteAttachmentData(existingAvatar.path); } - _replaceAttachment(group, 'avatar', attachment, logPrefix); + const data = await Signal.Migrations.loadAttachmentData(attachment.path); + conversation.set({ + avatar: { + ...attachment, + hash: await computeHash(data), + }, + }); + await Signal.Data.updateConversation( + conversationId, + conversation.attributes, + { + Conversation: Whisper.Conversation, + } + ); + return; + } + + if (type === 'sticker') { + const sticker = message.get('sticker'); + if (!sticker) { + throw new Error("_addAttachmentToMessage: sticker didn't exist"); + } + + _replaceAttachment(sticker, 'data', attachment, logPrefix); return; } diff --git a/js/modules/crypto.js b/js/modules/crypto.js index 181d2d6f2..3bfb41678 100644 --- a/js/modules/crypto.js +++ b/js/modules/crypto.js @@ -7,6 +7,7 @@ module.exports = { arrayBufferToBase64, typedArrayToArrayBuffer, base64ToArrayBuffer, + bytesFromHexString, bytesFromString, concatenateBytes, constantTimeEqual, @@ -16,6 +17,7 @@ module.exports = { decryptFile, decryptSymmetric, deriveAccessKey, + deriveStickerPackKey, encryptAesCtr, encryptDeviceName, encryptAttachment, @@ -25,8 +27,10 @@ module.exports = { getAccessKeyVerifier, getFirstBytes, getRandomBytes, + getRandomValue, getViewOfArrayBuffer, getZeroes, + hexFromBytes, highBitsToInt, hmacSha256, intsToByteHighAndLow, @@ -58,6 +62,25 @@ function bytesFromString(string) { function stringFromBytes(buffer) { return dcodeIO.ByteBuffer.wrap(buffer).toString('utf8'); } +function hexFromBytes(buffer) { + return dcodeIO.ByteBuffer.wrap(buffer).toString('hex'); +} +function bytesFromHexString(string) { + return dcodeIO.ByteBuffer.wrap(string, 'hex').toArrayBuffer(); +} + +async function deriveStickerPackKey(packKey) { + const salt = getZeroes(32); + const info = bytesFromString('Sticker Pack'); + + const [part1, part2] = await libsignal.HKDF.deriveSecrets( + packKey, + salt, + info + ); + + return concatenateBytes(part1, part2); +} // High-level Operations @@ -366,6 +389,16 @@ function getRandomBytes(n) { return bytes; } +function getRandomValue(low, high) { + const diff = high - low; + const bytes = new Uint32Array(1); + window.crypto.getRandomValues(bytes); + + // Because high and low are inclusive + const mod = diff + 1; + return bytes[0] % mod + low; +} + function getZeroes(n) { const result = new Uint8Array(n); diff --git a/js/modules/data.d.ts b/js/modules/data.d.ts index 1cec9dcb9..92c613496 100644 --- a/js/modules/data.d.ts +++ b/js/modules/data.d.ts @@ -1,2 +1,20 @@ export function searchMessages(query: string): Promise>; export function searchConversations(query: string): Promise>; + +export function updateStickerLastUsed( + packId: string, + stickerId: number, + time: number +): Promise; +export function updateStickerPackStatus( + packId: string, + status: 'advertised' | 'installed' | 'error' | 'pending', + options?: { timestamp: number } +): Promise; + +export function getRecentStickers(): Promise< + Array<{ + id: number; + packId: string; + }> +>; diff --git a/js/modules/data.js b/js/modules/data.js index 973042e1c..b6db7200f 100644 --- a/js/modules/data.js +++ b/js/modules/data.js @@ -27,6 +27,7 @@ const DATABASE_UPDATE_TIMEOUT = 2 * 60 * 1000; // two minutes const SQL_CHANNEL_KEY = 'sql-channel'; const ERASE_SQL_KEY = 'erase-sql-key'; const ERASE_ATTACHMENTS_KEY = 'erase-attachments'; +const ERASE_STICKERS_KEY = 'erase-stickers'; const CLEANUP_ORPHANED_ATTACHMENTS_KEY = 'cleanup-orphaned-attachments'; const _jobs = Object.create(null); @@ -138,6 +139,17 @@ module.exports = { removeAttachmentDownloadJob, removeAllAttachmentDownloadJobs, + createOrUpdateStickerPack, + updateStickerPackStatus, + createOrUpdateSticker, + updateStickerLastUsed, + addStickerPackReference, + deleteStickerPackReference, + deleteStickerPack, + getAllStickerPacks, + getAllStickers, + getRecentStickers, + removeAll, removeAllConfiguration, @@ -884,6 +896,44 @@ async function removeAllAttachmentDownloadJobs() { await channels.removeAllAttachmentDownloadJobs(); } +// Stickers + +async function createOrUpdateStickerPack(pack) { + await channels.createOrUpdateStickerPack(pack); +} +async function updateStickerPackStatus(packId, status, options) { + await channels.updateStickerPackStatus(packId, status, options); +} +async function createOrUpdateSticker(sticker) { + await channels.createOrUpdateSticker(sticker); +} +async function updateStickerLastUsed(packId, stickerId, timestamp) { + await channels.updateStickerLastUsed(packId, stickerId, timestamp); +} +async function addStickerPackReference(messageId, packId) { + await channels.addStickerPackReference(messageId, packId); +} +async function deleteStickerPackReference(messageId, packId) { + const paths = await channels.deleteStickerPackReference(messageId, packId); + return paths; +} +async function deleteStickerPack(packId) { + const paths = await channels.deleteStickerPack(packId); + return paths; +} +async function getAllStickerPacks() { + const packs = await channels.getAllStickerPacks(); + return packs; +} +async function getAllStickers() { + const stickers = await channels.getAllStickers(); + return stickers; +} +async function getRecentStickers() { + const recentStickers = await channels.getRecentStickers(); + return recentStickers; +} + // Other async function removeAll() { @@ -903,6 +953,7 @@ async function removeOtherData() { await Promise.all([ callChannel(ERASE_SQL_KEY), callChannel(ERASE_ATTACHMENTS_KEY), + callChannel(ERASE_STICKERS_KEY), ]); } diff --git a/js/modules/link_previews.js b/js/modules/link_previews.js index 3ab33cfed..07246a6ad 100644 --- a/js/modules/link_previews.js +++ b/js/modules/link_previews.js @@ -18,6 +18,7 @@ module.exports = { isLinkInWhitelist, isMediaLinkInWhitelist, isLinkSneaky, + isStickerPack, }; const SUPPORTED_DOMAINS = [ @@ -37,7 +38,9 @@ const SUPPORTED_DOMAINS = [ 'pinterest.com', 'www.pinterest.com', 'pin.it', + 'signal.org', ]; + function isLinkInWhitelist(link) { try { const url = new URL(link); @@ -61,6 +64,10 @@ function isLinkInWhitelist(link) { } } +function isStickerPack(link) { + return (link || '').startsWith('https://signal.org/addstickers/'); +} + const SUPPORTED_MEDIA_DOMAINS = /^([^.]+\.)*(ytimg.com|cdninstagram.com|redd.it|imgur.com|fbcdn.net|pinimg.com)$/i; function isMediaLinkInWhitelist(link) { try { @@ -138,28 +145,33 @@ function getDomain(url) { const MB = 1024 * 1024; const KB = 1024; -function getChunkPattern(size) { +function getChunkPattern(size, initialOffset) { if (size > MB) { - return _getRequestPattern(size, MB); + return _getRequestPattern(size, MB, initialOffset); } else if (size > 500 * KB) { - return _getRequestPattern(size, 500 * KB); + return _getRequestPattern(size, 500 * KB, initialOffset); } else if (size > 100 * KB) { - return _getRequestPattern(size, 100 * KB); + return _getRequestPattern(size, 100 * KB, initialOffset); } else if (size > 50 * KB) { - return _getRequestPattern(size, 50 * KB); + return _getRequestPattern(size, 50 * KB, initialOffset); } else if (size > 10 * KB) { - return _getRequestPattern(size, 10 * KB); + return _getRequestPattern(size, 10 * KB, initialOffset); } else if (size > KB) { - return _getRequestPattern(size, KB); + return _getRequestPattern(size, KB, initialOffset); } - throw new Error(`getChunkPattern: Unsupported size: ${size}`); + return { + start: { + start: initialOffset, + end: size - 1, + }, + }; } -function _getRequestPattern(size, increment) { +function _getRequestPattern(size, increment, initialOffset) { const results = []; - let offset = 0; + let offset = initialOffset || 0; while (size - offset > increment) { results.push({ start: offset, diff --git a/js/modules/signal.js b/js/modules/signal.js index 7d81b01a9..0d816c4da 100644 --- a/js/modules/signal.js +++ b/js/modules/signal.js @@ -9,6 +9,7 @@ const Emoji = require('../../ts/util/emoji'); const IndexedDB = require('./indexeddb'); const Notifications = require('../../ts/notifications'); const OS = require('../../ts/OS'); +const Stickers = require('./stickers'); const Settings = require('./settings'); const Util = require('../../ts/util'); const { migrateToSQL } = require('./migrate_to_sql'); @@ -69,8 +70,20 @@ const { // State const { createLeftPane } = require('../../ts/state/roots/createLeftPane'); +const { + createStickerButton, +} = require('../../ts/state/roots/createStickerButton'); +const { + createStickerManager, +} = require('../../ts/state/roots/createStickerManager'); +const { + createStickerPreviewModal, +} = require('../../ts/state/roots/createStickerPreviewModal'); + const { createStore } = require('../../ts/state/createStore'); const conversationsDuck = require('../../ts/state/ducks/conversations'); +const itemsDuck = require('../../ts/state/ducks/items'); +const stickersDuck = require('../../ts/state/ducks/stickers'); const userDuck = require('../../ts/state/ducks/user'); // Migrations @@ -112,6 +125,7 @@ function initializeMigrations({ } const { getPath, + getStickersPath, createReader, createAbsolutePathGetter, createWriterForNew, @@ -130,25 +144,40 @@ function initializeMigrations({ const loadAttachmentData = Type.loadData(readAttachmentData); const loadPreviewData = MessageType.loadPreviewData(loadAttachmentData); const loadQuoteData = MessageType.loadQuoteData(loadAttachmentData); + const loadStickerData = MessageType.loadStickerData(loadAttachmentData); const getAbsoluteAttachmentPath = createAbsolutePathGetter(attachmentsPath); const deleteOnDisk = Attachments.createDeleter(attachmentsPath); const writeNewAttachmentData = createWriterForNew(attachmentsPath); + const copyIntoAttachmentsDirectory = Attachments.copyIntoAttachmentsDirectory( + attachmentsPath + ); + + const stickersPath = getStickersPath(userDataPath); + const writeNewStickerData = createWriterForNew(stickersPath); + const getAbsoluteStickerPath = createAbsolutePathGetter(stickersPath); + const deleteSticker = Attachments.createDeleter(stickersPath); + const readStickerData = createReader(stickersPath); return { attachmentsPath, + copyIntoAttachmentsDirectory, deleteAttachmentData: deleteOnDisk, deleteExternalMessageFiles: MessageType.deleteAllExternalFiles({ deleteAttachmentData: Type.deleteData(deleteOnDisk), deleteOnDisk, }), + deleteSticker, getAbsoluteAttachmentPath, + getAbsoluteStickerPath, getPlaceholderMigrations, getCurrentVersion, loadAttachmentData, loadMessage: MessageType.createAttachmentLoader(loadAttachmentData), loadPreviewData, loadQuoteData, + loadStickerData, readAttachmentData, + readStickerData, run, processNewAttachment: attachment => MessageType.processNewAttachment(attachment, { @@ -161,6 +190,13 @@ function initializeMigrations({ makeVideoScreenshot, logger, }), + processNewSticker: stickerData => + MessageType.processNewSticker(stickerData, { + writeNewStickerData, + getAbsoluteStickerPath, + getImageDimensions, + logger, + }), upgradeMessageSchema: (message, options = {}) => { const { maxVersion } = options; @@ -227,10 +263,15 @@ exports.setup = (options = {}) => { const Roots = { createLeftPane, + createStickerButton, + createStickerManager, + createStickerPreviewModal, }; const Ducks = { conversations: conversationsDuck, + items: itemsDuck, user: userDuck, + stickers: stickersDuck, }; const State = { bindActionCreators, @@ -278,6 +319,7 @@ exports.setup = (options = {}) => { RefreshSenderCertificate, Settings, State, + Stickers, Types, Util, Views, diff --git a/js/modules/stickers.d.ts b/js/modules/stickers.d.ts new file mode 100644 index 000000000..ced60aa43 --- /dev/null +++ b/js/modules/stickers.d.ts @@ -0,0 +1 @@ +export function maybeDeletePack(packId: string): Promise; diff --git a/js/modules/stickers.js b/js/modules/stickers.js new file mode 100644 index 000000000..9c8928013 --- /dev/null +++ b/js/modules/stickers.js @@ -0,0 +1,495 @@ +/* global + textsecure, + Signal, + log, + reduxStore, + reduxActions, + URL +*/ + +const BLESSED_PACKS = {}; + +const { isNumber, pick, reject, groupBy } = require('lodash'); +const pMap = require('p-map'); +const Queue = require('p-queue'); +const qs = require('qs'); + +const { makeLookup } = require('../../ts/util/makeLookup'); +const { base64ToArrayBuffer, deriveStickerPackKey } = require('./crypto'); +const { + addStickerPackReference, + createOrUpdateSticker, + createOrUpdateStickerPack, + deleteStickerPack, + deleteStickerPackReference, + getAllStickerPacks, + getAllStickers, + getRecentStickers, + updateStickerPackStatus, +} = require('./data'); + +module.exports = { + BLESSED_PACKS, + copyStickerToAttachments, + deletePack, + deletePackReference, + downloadStickerPack, + getDataFromLink, + getInitialState, + getInstalledStickerPacks, + getSticker, + getStickerPack, + getStickerPackStatus, + load, + maybeDeletePack, + downloadQueuedPacks, + redactPackId, +}; + +let initialState = null; +let packsToDownload = null; +const downloadQueue = new Queue({ concurrency: 1 }); + +async function load() { + const [packs, recentStickers] = await Promise.all([ + getPacksForRedux(), + getRecentStickersForRedux(), + ]); + + initialState = { + packs, + recentStickers, + blessedPacks: BLESSED_PACKS, + }; + + packsToDownload = capturePacksToDownload(packs); +} + +function getDataFromLink(link) { + const { hash } = new URL(link); + if (!hash) { + return null; + } + + const data = hash.slice(1); + const params = qs.parse(data); + + return { + id: params.pack_id, + key: params.pack_key, + }; +} + +function getInstalledStickerPacks() { + const state = reduxStore.getState(); + const { stickers } = state; + const { packs } = stickers; + if (!packs) { + return []; + } + + const values = Object.values(packs); + return values.filter(pack => pack.status === 'installed'); +} + +function downloadQueuedPacks() { + const ids = Object.keys(packsToDownload); + ids.forEach(id => { + const { key, status } = packsToDownload[id]; + + // The queuing is done inside this function, no need to await here + downloadStickerPack(id, key, { finalStatus: status }); + }); + + packsToDownload = {}; +} + +function capturePacksToDownload(existingPackLookup) { + const toDownload = Object.create(null); + + // First, ensure that blessed packs are in good shape + const blessedIds = Object.keys(BLESSED_PACKS); + blessedIds.forEach(id => { + const existing = existingPackLookup[id]; + if ( + !existing || + (existing.status !== 'advertised' && existing.status !== 'installed') + ) { + toDownload[id] = { + id, + ...BLESSED_PACKS[id], + }; + } + }); + + // Then, find error cases in packs we already know about + const existingIds = Object.keys(existingPackLookup); + existingIds.forEach(id => { + if (toDownload[id]) { + return; + } + + const existing = existingPackLookup[id]; + if (doesPackNeedDownload(existing)) { + toDownload[id] = { + id, + key: existing.key, + status: existing.attemptedStatus, + }; + } + }); + + return toDownload; +} + +function doesPackNeedDownload(pack) { + if (!pack) { + return true; + } + + const stickerCount = Object.keys(pack.stickers || {}).length; + return ( + !pack.status || + pack.status === 'error' || + pack.status === 'pending' || + !pack.stickerCount || + stickerCount < pack.stickerCount + ); +} + +async function getPacksForRedux() { + const [packs, stickers] = await Promise.all([ + getAllStickerPacks(), + getAllStickers(), + ]); + + const stickersByPack = groupBy(stickers, sticker => sticker.packId); + const fullSet = packs.map(pack => ({ + ...pack, + stickers: makeLookup(stickersByPack[pack.id] || [], 'id'), + })); + + return makeLookup(fullSet, 'id'); +} + +async function getRecentStickersForRedux() { + const recent = await getRecentStickers(); + return recent.map(sticker => ({ + packId: sticker.packId, + stickerId: sticker.id, + })); +} + +function getInitialState() { + return initialState; +} + +function redactPackId(packId) { + return `[REDACTED]${packId.slice(-3)}`; +} + +function getReduxStickerActions() { + const actions = reduxActions; + + if (actions && actions.stickers) { + return actions.stickers; + } + + return {}; +} + +async function decryptSticker(packKey, ciphertext) { + const binaryKey = base64ToArrayBuffer(packKey); + const derivedKey = await deriveStickerPackKey(binaryKey); + const plaintext = await textsecure.crypto.decryptAttachment( + ciphertext, + derivedKey + ); + + return plaintext; +} + +async function downloadSticker(packId, packKey, proto) { + const ciphertext = await textsecure.messaging.getSticker(packId, proto.id); + const plaintext = await decryptSticker(packKey, ciphertext); + const sticker = await Signal.Migrations.processNewSticker(plaintext); + + return { + ...pick(proto, ['id', 'emoji']), + ...sticker, + packId, + }; +} + +async function downloadStickerPack(packId, packKey, options = {}) { + // This will ensure that only one download process is in progress at any given time + return downloadQueue.add(async () => { + try { + await doDownloadStickerPack(packId, packKey, options); + } catch (error) { + log.error( + 'doDownloadStickerPack threw an error:', + error && error.stack ? error.stack : error + ); + } + }); +} + +async function doDownloadStickerPack(packId, packKey, options = {}) { + const { messageId, fromSync } = options; + const { + stickerAdded, + stickerPackAdded, + stickerPackUpdated, + installStickerPack, + } = getReduxStickerActions(); + + const finalStatus = options.finalStatus || 'advertised'; + + const existing = getStickerPack(packId); + if (!doesPackNeedDownload(existing)) { + log.warn( + `Download for pack ${redactPackId( + packId + )} requested, but it does not need re-download. Skipping.` + ); + return; + } + + const downloadAttempts = (existing ? existing.downloadAttempts || 0 : 0) + 1; + if (downloadAttempts > 3) { + log.warn( + `Refusing to attempt another download for pack ${redactPackId( + packId + )}, attempt number ${downloadAttempts}` + ); + + if (existing.status !== 'error') { + await updateStickerPackStatus(packId, 'error'); + stickerPackUpdated(packId, { + status: 'error', + }); + } + + return; + } + + let coverProto; + let coverStickerId; + let coverIncludedInList; + let nonCoverStickers; + + try { + const ciphertext = await textsecure.messaging.getStickerPackManifest( + packId + ); + const plaintext = await decryptSticker(packKey, ciphertext); + const proto = textsecure.protobuf.StickerPack.decode(plaintext); + const firstStickerProto = proto.stickers ? proto.stickers[0] : null; + const stickerCount = proto.stickers.length; + + coverProto = proto.cover || firstStickerProto; + coverStickerId = coverProto ? coverProto.id : null; + + if (!coverProto || !isNumber(coverStickerId)) { + throw new Error( + `Sticker pack ${redactPackId( + packId + )} is malformed - it has no cover, and no stickers` + ); + } + + nonCoverStickers = reject( + proto.stickers, + sticker => !isNumber(sticker.id) || sticker.id === coverStickerId + ); + + coverIncludedInList = nonCoverStickers.length < stickerCount; + + // status can be: + // - 'pending' + // - 'advertised' + // - 'error' + // - 'installed' + const pack = { + id: packId, + key: packKey, + attemptedStatus: finalStatus, + coverStickerId, + downloadAttempts, + stickerCount, + status: 'pending', + ...pick(proto, ['title', 'author']), + }; + await createOrUpdateStickerPack(pack); + stickerPackAdded(pack); + + if (messageId) { + await addStickerPackReference(messageId, packId); + } + } catch (error) { + log.error( + `Error downloading manifest for sticker pack ${redactPackId(packId)}:`, + error && error.stack ? error.stack : error + ); + + const pack = { + id: packId, + key: packKey, + attemptedStatus: finalStatus, + downloadAttempts, + status: 'error', + }; + await createOrUpdateStickerPack(pack); + stickerPackAdded(pack); + + return; + } + + // We have a separate try/catch here because we're starting to download stickers here + // and we want to preserve more of the pack on an error. + try { + const downloadStickerJob = async stickerProto => { + const stickerInfo = await downloadSticker(packId, packKey, stickerProto); + const sticker = { + ...stickerInfo, + isCoverOnly: !coverIncludedInList && stickerInfo.id === coverStickerId, + }; + await createOrUpdateSticker(sticker); + stickerAdded(sticker); + }; + + // Download the cover first + await downloadStickerJob(coverProto); + + // Then the rest + await pMap(nonCoverStickers, downloadStickerJob, { concurrency: 3 }); + + if (finalStatus === 'installed') { + await installStickerPack(packId, packKey, { fromSync }); + } else { + // Mark the pack as complete + await updateStickerPackStatus(packId, finalStatus); + stickerPackUpdated(packId, { + status: finalStatus, + }); + } + } catch (error) { + log.error( + `Error downloading stickers for sticker pack ${redactPackId(packId)}:`, + error && error.stack ? error.stack : error + ); + + const errorState = 'error'; + await updateStickerPackStatus(packId, errorState); + if (stickerPackUpdated) { + stickerPackUpdated(packId, { + state: errorState, + }); + } + } +} + +function getStickerPack(packId) { + const state = reduxStore.getState(); + const { stickers } = state; + const { packs } = stickers; + if (!packs) { + return null; + } + + return packs[packId]; +} + +function getStickerPackStatus(packId) { + const pack = getStickerPack(packId); + if (!pack) { + return null; + } + + return pack.status; +} + +function getSticker(packId, stickerId) { + const state = reduxStore.getState(); + const { stickers } = state; + const { packs } = stickers; + const pack = packs[packId]; + + if (!pack || !pack.stickers) { + return null; + } + + return pack.stickers[stickerId]; +} + +async function copyStickerToAttachments(packId, stickerId) { + const sticker = getSticker(packId, stickerId); + if (!sticker) { + return null; + } + + const { path } = sticker; + const absolutePath = Signal.Migrations.getAbsoluteStickerPath(path); + const newPath = await Signal.Migrations.copyIntoAttachmentsDirectory( + absolutePath + ); + + return { + ...sticker, + path: newPath, + }; +} + +// In the case where a sticker pack is uninstalled, we want to delete it if there are no +// more references left. We'll delete a nonexistent reference, then check if there are +// any references left, just like usual. +async function maybeDeletePack(packId) { + // This hardcoded string is fine because message ids are GUIDs + await deletePackReference('NOT-USED', packId); +} + +// We don't generally delete packs outright; we just remove references to them, and if +// the last reference is deleted, we finally then remove the pack itself from database +// and from disk. +async function deletePackReference(messageId, packId) { + const isBlessed = Boolean(BLESSED_PACKS[packId]); + if (isBlessed) { + return; + } + + // This call uses locking to prevent race conditions with other reference removals, + // or an incoming message creating a new message->pack reference + const paths = await deleteStickerPackReference(messageId, packId); + + // If we don't get a list of paths back, then the sticker pack was not deleted + if (!paths) { + return; + } + + const { removeStickerPack } = getReduxStickerActions(); + removeStickerPack(packId); + + await pMap(paths, Signal.Migrations.deleteSticker, { + concurrency: 3, + }); +} + +// The override; doesn't honor our ref-counting scheme - just deletes it all. +async function deletePack(packId) { + const isBlessed = Boolean(BLESSED_PACKS[packId]); + if (isBlessed) { + return; + } + + // This call uses locking to prevent race conditions with other reference removals, + // or an incoming message creating a new message->pack reference + const paths = await deleteStickerPack(packId); + + const { removeStickerPack } = getReduxStickerActions(); + removeStickerPack(packId); + + await pMap(paths, Signal.Migrations.deleteSticker, { + concurrency: 3, + }); +} diff --git a/js/modules/types/attachment.js b/js/modules/types/attachment.js index 48af3a17b..09b410416 100644 --- a/js/modules/types/attachment.js +++ b/js/modules/types/attachment.js @@ -179,7 +179,7 @@ exports.loadData = readAttachmentData => { } const data = await readAttachmentData(attachment.path); - return Object.assign({}, attachment, { data }); + return Object.assign({}, attachment, { data, size: data.byteLength }); }; }; diff --git a/js/modules/types/conversation.js b/js/modules/types/conversation.js index 29ec499f4..8607d99dc 100644 --- a/js/modules/types/conversation.js +++ b/js/modules/types/conversation.js @@ -140,11 +140,12 @@ async function deleteExternalFiles(conversation, options = {}) { } module.exports = { - deleteExternalFiles, - migrateConversation, - maybeUpdateAvatar, - maybeUpdateProfileAvatar, - createLastMessageUpdate, arrayBufferToBase64, base64ToArrayBuffer, + computeHash, + createLastMessageUpdate, + deleteExternalFiles, + maybeUpdateAvatar, + maybeUpdateProfileAvatar, + migrateConversation, }; diff --git a/js/modules/types/message.js b/js/modules/types/message.js index 382f899db..202080d58 100644 --- a/js/modules/types/message.js +++ b/js/modules/types/message.js @@ -308,7 +308,33 @@ const toVersion9 = exports._withSchemaVersion({ }); const toVersion10 = exports._withSchemaVersion({ schemaVersion: 10, - upgrade: exports._mapPreviewAttachments(Attachment.migrateDataToFileSystem), + upgrade: async (message, context) => { + const processPreviews = exports._mapPreviewAttachments( + Attachment.migrateDataToFileSystem + ); + const processSticker = async (stickerMessage, stickerContext) => { + const { sticker } = stickerMessage; + if (!sticker || !sticker.data || !sticker.data.data) { + return stickerMessage; + } + + return { + ...stickerMessage, + sticker: { + ...sticker, + data: await Attachment.migrateDataToFileSystem( + sticker.data, + stickerContext + ), + }, + }; + }; + + const previewProcessed = await processPreviews(message, context); + const stickerProcessed = await processSticker(previewProcessed, context); + + return stickerProcessed; + }, }); const VERSIONS = [ @@ -462,6 +488,44 @@ exports.processNewAttachment = async ( return finalAttachment; }; +exports.processNewSticker = async ( + stickerData, + { + writeNewStickerData, + getAbsoluteStickerPath, + getImageDimensions, + logger, + } = {} +) => { + if (!isFunction(writeNewStickerData)) { + throw new TypeError('context.writeNewStickerData is required'); + } + if (!isFunction(getAbsoluteStickerPath)) { + throw new TypeError('context.getAbsoluteStickerPath is required'); + } + if (!isFunction(getImageDimensions)) { + throw new TypeError('context.getImageDimensions is required'); + } + if (!isObject(logger)) { + throw new TypeError('context.logger is required'); + } + + const path = await writeNewStickerData(stickerData); + const absolutePath = await getAbsoluteStickerPath(path); + + const { width, height } = await getImageDimensions({ + objectUrl: absolutePath, + logger, + }); + + return { + contentType: 'image/webp', + path, + width, + height, + }; +}; + exports.createAttachmentLoader = loadAttachmentData => { if (!isFunction(loadAttachmentData)) { throw new TypeError( @@ -532,6 +596,23 @@ exports.loadPreviewData = loadAttachmentData => { }; }; +exports.loadStickerData = loadAttachmentData => { + if (!isFunction(loadAttachmentData)) { + throw new TypeError('loadStickerData: loadAttachmentData is required'); + } + + return async sticker => { + if (!sticker || !sticker.data) { + return null; + } + + return { + ...sticker, + data: await loadAttachmentData(sticker.data), + }; + }; +}; + exports.deleteAllExternalFiles = ({ deleteAttachmentData, deleteOnDisk }) => { if (!isFunction(deleteAttachmentData)) { throw new TypeError( @@ -546,7 +627,7 @@ exports.deleteAllExternalFiles = ({ deleteAttachmentData, deleteOnDisk }) => { } return async message => { - const { attachments, quote, contact, preview } = message; + const { attachments, quote, contact, preview, sticker } = message; if (attachments && attachments.length) { await Promise.all(attachments.map(deleteAttachmentData)); @@ -590,6 +671,14 @@ exports.deleteAllExternalFiles = ({ deleteAttachmentData, deleteOnDisk }) => { }) ); } + + if (sticker && sticker.data && sticker.data.path) { + await deleteOnDisk(sticker.data.path); + + if (sticker.data.thumbnail && sticker.data.thumbnail.path) { + await deleteOnDisk(sticker.data.thumbnail.path); + } + } }; }; diff --git a/js/modules/web_api.js b/js/modules/web_api.js index c864ce060..56fdd95a3 100644 --- a/js/modules/web_api.js +++ b/js/modules/web_api.js @@ -4,8 +4,9 @@ const ProxyAgent = require('proxy-agent'); const { Agent } = require('https'); const is = require('@sindresorhus/is'); +const { redactPackId } = require('./stickers'); -/* global Buffer, setTimeout, log, _, getGuid */ +/* global Signal, Buffer, setTimeout, log, _, getGuid */ /* eslint-disable more/no-then, no-bitwise, no-nested-ternary */ @@ -175,16 +176,12 @@ function getContentType(response) { function _promiseAjax(providedUrl, options) { return new Promise((resolve, reject) => { const url = providedUrl || `${options.host}/${options.path}`; - if (options.disableLogs) { - log.info( - `${options.type} [REDACTED_URL]${ - options.unauthenticated ? ' (unauth)' : '' - }` - ); + + const unauthLabel = options.unauthenticated ? ' (unauth)' : ''; + if (options.redactUrl) { + log.info(`${options.type} ${options.redactUrl(url)}${unauthLabel}`); } else { - log.info( - `${options.type} ${url}${options.unauthenticated ? ' (unauth)' : ''}` - ); + log.info(`${options.type} ${url}${unauthLabel}`); } const timeout = @@ -282,10 +279,10 @@ function _promiseAjax(providedUrl, options) { if (options.responseType === 'json') { if (options.validateResponse) { if (!_validateResponse(result, options.validateResponse)) { - if (options.disableLogs) { + if (options.redactUrl) { log.info( options.type, - '[REDACTED_URL]', + options.redactUrl(url), response.status, 'Error' ); @@ -304,10 +301,10 @@ function _promiseAjax(providedUrl, options) { } } if (response.status >= 0 && response.status < 400) { - if (options.disableLogs) { + if (options.redactUrl) { log.info( options.type, - '[REDACTED_URL]', + options.redactUrl(url), response.status, 'Success' ); @@ -324,8 +321,13 @@ function _promiseAjax(providedUrl, options) { return resolve(result, response.status); } - if (options.disableLogs) { - log.info(options.type, '[REDACTED_URL]', response.status, 'Error'); + if (options.redactUrl) { + log.info( + options.type, + options.redactUrl(url), + response.status, + 'Error' + ); } else { log.error(options.type, url, response.status, 'Error'); } @@ -340,8 +342,8 @@ function _promiseAjax(providedUrl, options) { }); }) .catch(e => { - if (options.disableLogs) { - log.error(options.type, '[REDACTED_URL]', 0, 'Error'); + if (options.redactUrl) { + log.error(options.type, options.redactUrl(url), 0, 'Error'); } else { log.error(options.type, url, 0, 'Error'); } @@ -435,6 +437,7 @@ function initialize({ function connect({ username: initialUsername, password: initialPassword }) { let username = initialUsername; let password = initialPassword; + const PARSE_RANGE_HEADER = /\/(\d+)$/; // Thanks, function hoisting! return { @@ -449,8 +452,9 @@ function initialize({ getProfile, getProfileUnauth, getProvisioningSocket, - getProxiedSize, getSenderCertificate, + getSticker, + getStickerPackManifest, makeProxiedRequest, putAttachment, registerKeys, @@ -834,6 +838,33 @@ function initialize({ }); } + function redactStickerUrl(stickerUrl) { + return stickerUrl.replace( + /(\/stickers\/)([^/]+)(\/)/, + (match, begin, packId, end) => `${begin}${redactPackId(packId)}${end}` + ); + } + + function getSticker(packId, stickerId) { + return _outerAjax(`${cdnUrl}/stickers/${packId}/full/${stickerId}`, { + certificateAuthority, + proxyUrl, + responseType: 'arraybuffer', + type: 'GET', + redactUrl: redactStickerUrl, + }); + } + + function getStickerPackManifest(packId) { + return _outerAjax(`${cdnUrl}/stickers/${packId}/manifest.proto`, { + certificateAuthority, + proxyUrl, + responseType: 'arraybuffer', + type: 'GET', + redactUrl: redactStickerUrl, + }); + } + async function getAttachment(id) { // This is going to the CDN, not the service, so we use _outerAjax return _outerAjax(`${cdnUrl}/attachments/${id}`, { @@ -918,45 +949,64 @@ function initialize({ return attachmentIdString; } - // eslint-disable-next-line no-shadow - async function getProxiedSize(url) { - const result = await _outerAjax(url, { - processData: false, - responseType: 'arraybufferwithdetails', - proxyUrl: contentProxyUrl, - type: 'HEAD', - disableLogs: true, - }); + function getHeaderPadding() { + const length = Signal.Crypto.getRandomValue(1, 64); + let characters = ''; - const { response } = result; - if (!response.headers || !response.headers.get) { - throw new Error('getProxiedSize: Problem retrieving header value'); + for (let i = 0, max = length; i < max; i += 1) { + characters += String.fromCharCode( + Signal.Crypto.getRandomValue(65, 122) + ); } - const size = response.headers.get('content-length'); - return parseInt(size, 10); + return characters; } // eslint-disable-next-line no-shadow - function makeProxiedRequest(url, options = {}) { + async function makeProxiedRequest(url, options = {}) { const { returnArrayBuffer, start, end } = options; - let headers; + const headers = { + 'X-SignalPadding': getHeaderPadding(), + }; if (_.isNumber(start) && _.isNumber(end)) { - headers = { - Range: `bytes=${start}-${end}`, - }; + headers.Range = `bytes=${start}-${end}`; } - return _outerAjax(url, { + const result = await _outerAjax(url, { processData: false, responseType: returnArrayBuffer ? 'arraybufferwithdetails' : null, proxyUrl: contentProxyUrl, type: 'GET', redirect: 'follow', - disableLogs: true, + redactUrl: () => '[REDACTED_URL]', headers, }); + + if (!returnArrayBuffer) { + return result; + } + + const { response } = result; + if (!response.headers || !response.headers.get) { + throw new Error('makeProxiedRequest: Problem retrieving header value'); + } + + const range = response.headers.get('content-range'); + const match = PARSE_RANGE_HEADER.exec(range); + + if (!match || !match[1]) { + throw new Error( + `makeProxiedRequest: Unable to parse total size from ${range}` + ); + } + + const totalSize = parseInt(match[1], 10); + + return { + totalSize, + result, + }; } function getMessageSocket() { diff --git a/js/storage.js b/js/storage.js index 017eee1b3..bea60767d 100644 --- a/js/storage.js +++ b/js/storage.js @@ -1,3 +1,4 @@ +/* global _ */ /* eslint-disable more/no-then */ // eslint-disable-next-line func-names @@ -24,6 +25,10 @@ items[key] = data; await window.Signal.Data.createOrUpdateItem(data); + + if (_.has(window, ['reduxActions', 'items', 'putItemExternal'])) { + window.reduxActions.items.putItemExternal(key, value); + } } function get(key, defaultValue) { @@ -46,6 +51,10 @@ delete items[key]; await window.Signal.Data.removeItemById(key); + + if (_.has(window, ['reduxActions', 'items', 'removeItemExternal'])) { + window.reduxActions.items.removeItemExternal(key); + } } function onready(callback) { @@ -77,6 +86,10 @@ callListeners(); } + function getItemsState() { + return _.clone(items); + } + function reset() { ready = false; items = Object.create(null); @@ -86,6 +99,7 @@ fetch, put, get, + getItemsState, remove, onready, reset, diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js index 78025a9d5..42d1d121c 100644 --- a/js/views/conversation_view.js +++ b/js/views/conversation_view.js @@ -104,6 +104,9 @@ ); this.listenTo(this.model.messageCollection, 'force-send', this.forceSend); this.listenTo(this.model.messageCollection, 'delete', this.deleteMessage); + this.listenTo(this.model.messageCollection, 'height-changed', () => + this.view.scrollToBottomIfNeeded() + ); this.listenTo( this.model.messageCollection, 'scroll-to-message', @@ -276,15 +279,18 @@ this.$('.send-message').blur(this.unfocusBottomBar.bind(this)); this.$emojiPanelContainer = this.$('.emoji-panel-container'); + + this.setupStickerPickerButton(); }, events: { keydown: 'onKeyDown', - 'submit .send': 'checkUnverifiedSendMessage', + 'submit .send': 'clickSend', 'input .send-message': 'updateMessageFieldSize', 'keydown .send-message': 'updateMessageFieldSize', 'keyup .send-message': 'onKeyUp', click: 'onClick', + 'click .sticker-button-placeholder': 'onClickStickerButtonPlaceholder', 'click .bottom-bar': 'focusMessageField', 'click .capture-audio .microphone': 'captureAudio', 'click .module-scroll-down': 'scrollToBottom', @@ -308,6 +314,28 @@ paste: 'onPaste', }, + setupStickerPickerButton() { + const props = { + onClickAddPack: () => this.showStickerManager(), + onPickSticker: (packId, stickerId) => + this.sendStickerMessage({ packId, stickerId }), + }; + + this.stickerButtonView = new Whisper.ReactWrapperView({ + className: 'sticker-button-wrapper', + JSX: Signal.State.Roots.createStickerButton(window.reduxStore, props), + }); + + // Finally, add it to the DOM + this.$('.sticker-button-placeholder').append(this.stickerButtonView.el); + }, + + // We need this, or clicking the sticker button will submit the form and send any + // mid-composition message content. + onClickStickerButtonPlaceholder(e) { + e.preventDefault(); + }, + onChooseAttachment(e) { if (e) { e.stopPropagation(); @@ -366,6 +394,13 @@ this.fileInput.remove(); this.titleView.remove(); + if (this.stickerButtonView) { + this.stickerButtonView.remove(); + } + + if (this.stickerPreviewModalView) { + this.stickerPreviewModalView.remove(); + } if (this.captureAudioView) { this.captureAudioView.remove(); @@ -1282,6 +1317,26 @@ dialog.focusCancel(); }, + showStickerPackPreview(packId) { + const props = { + packId, + onClose: () => { + this.stickerPreviewModalView.remove(); + }, + }; + + this.stickerPreviewModalView = new Whisper.ReactWrapperView({ + className: 'sticker-preview-modal-wrapper', + JSX: Signal.State.Roots.createStickerPreviewModal( + window.reduxStore, + props + ), + onClose: () => { + this.stickerPreviewModalView = null; + }, + }); + }, + showLightbox({ attachment, messageId }) { const message = this.model.messageCollection.get(messageId); if (!message) { @@ -1289,6 +1344,13 @@ `showLightbox: did not find message for id ${messageId}` ); } + const sticker = message.get('sticker'); + if (sticker) { + const { packId } = sticker; + this.showStickerPackPreview(packId); + return; + } + const { contentType, path } = attachment; if ( @@ -1400,6 +1462,21 @@ view.render(); }, + showStickerManager() { + const view = new Whisper.ReactWrapperView({ + className: ['sticker-manager-wrapper', 'panel'].join(' '), + JSX: Signal.State.Roots.createStickerManager(window.reduxStore), + onClose: () => { + this.resetPanel(); + this.updateHeader(); + }, + }); + + this.listenBack(view); + this.updateHeader(); + view.render(); + }, + showContactDetail({ contact, signalAccount }) { const view = new Whisper.ReactWrapperView({ Component: Signal.Components.ContactDetail, @@ -1449,6 +1526,8 @@ if (this.panels.length === 0) { this.$el.trigger('force-resize'); + // Make sure poppers are positioned properly + window.dispatchEvent(new Event('resize')); } }, @@ -1482,99 +1561,121 @@ } }, - showSendConfirmationDialog(e, contacts) { - let message; - const isUnverified = this.model.isUnverified(); + showSendAnywayDialog(contacts) { + return new Promise(resolve => { + let message; + const isUnverified = this.model.isUnverified(); - if (contacts.length > 1) { - if (isUnverified) { - message = i18n('changedSinceVerifiedMultiple'); + if (contacts.length > 1) { + if (isUnverified) { + message = i18n('changedSinceVerifiedMultiple'); + } else { + message = i18n('changedRecentlyMultiple'); + } } else { - message = i18n('changedRecentlyMultiple'); + const contactName = contacts.at(0).getTitle(); + if (isUnverified) { + message = i18n('changedSinceVerified', [contactName, contactName]); + } else { + message = i18n('changedRecently', [contactName, contactName]); + } } - } else { - const contactName = contacts.at(0).getTitle(); - if (isUnverified) { - message = i18n('changedSinceVerified', [contactName, contactName]); - } else { - message = i18n('changedRecently', [contactName, contactName]); - } - } - const dialog = new Whisper.ConfirmationDialogView({ - message, - okText: i18n('sendAnyway'), - resolve: () => { - this.checkUnverifiedSendMessage(e, { force: true }); - }, - reject: () => { - this.focusMessageFieldAndClearDisabled(); - }, + const dialog = new Whisper.ConfirmationDialogView({ + message, + okText: i18n('sendAnyway'), + resolve: () => resolve(true), + reject: () => resolve(false), + }); + + this.$el.prepend(dialog.el); + dialog.focusCancel(); }); - - this.$el.prepend(dialog.el); - dialog.focusCancel(); }, - async checkUnverifiedSendMessage(e, options = {}) { + async clickSend(e, options) { e.preventDefault(); + this.sendStart = Date.now(); this.$messageField.attr('disabled', true); - _.defaults(options, { force: false }); - - // This will go to the trust store for the latest identity key information, - // and may result in the display of a new banner for this conversation. try { - await this.model.updateVerified(); - const contacts = this.model.getUnverified(); - if (!contacts.length) { - this.checkUntrustedSendMessage(e, options); + const contacts = await this.getUntrustedContacts(options); + + if (contacts && contacts.length) { + const sendAnyway = await this.showSendAnywayDialog(contacts); + if (sendAnyway) { + this.clickSend(e, { force: true }); + return; + } + + this.focusMessageFieldAndClearDisabled(); return; } - if (options.force) { - await this.markAllAsVerifiedDefault(contacts); - this.checkUnverifiedSendMessage(e, options); - return; - } - - this.showSendConfirmationDialog(e, contacts); + this.sendMessage(e); } catch (error) { this.focusMessageFieldAndClearDisabled(); window.log.error( - 'checkUnverifiedSendMessage error:', + 'clickSend error:', error && error.stack ? error.stack : error ); } }, - async checkUntrustedSendMessage(e, options = {}) { - _.defaults(options, { force: false }); - + async sendStickerMessage(options = {}) { try { - const contacts = await this.model.getUntrusted(); - if (!contacts.length) { - this.sendMessage(e); + const contacts = await this.getUntrustedContacts(options); + + if (contacts && contacts.length) { + const sendAnyway = await this.showSendAnywayDialog(contacts); + if (sendAnyway) { + this.sendStickerMessage({ ...options, force: true }); + } + return; } - if (options.force) { - await this.markAllAsApproved(contacts); - this.sendMessage(e); - return; - } - - this.showSendConfirmationDialog(e, contacts); + const { packId, stickerId } = options; + this.model.sendStickerMessage(packId, stickerId); } catch (error) { - this.focusMessageFieldAndClearDisabled(); window.log.error( - 'checkUntrustedSendMessage error:', + 'clickSend error:', error && error.stack ? error.stack : error ); } }, + async getUntrustedContacts(options = {}) { + // This will go to the trust store for the latest identity key information, + // and may result in the display of a new banner for this conversation. + await this.model.updateVerified(); + const unverifiedContacts = this.model.getUnverified(); + + if (options.force) { + if (unverifiedContacts.length) { + await this.markAllAsVerifiedDefault(unverifiedContacts); + // We only want force to break us through one layer of checks + // eslint-disable-next-line no-param-reassign + options.force = false; + } + } else if (unverifiedContacts.length) { + return unverifiedContacts; + } + + const untrustedContacts = await this.model.getUntrusted(); + + if (options.force) { + if (untrustedContacts.length) { + await this.markAllAsApproved(untrustedContacts); + } + } else if (untrustedContacts.length) { + return untrustedContacts; + } + + return null; + }, + toggleEmojiPanel(e) { e.preventDefault(); if (!this.emojiPanel) { @@ -1839,14 +1940,29 @@ async makeChunkedRequest(url) { const PARALLELISM = 3; - const size = await textsecure.messaging.getProxiedSize(url); - const chunks = await Signal.LinkPreviews.getChunkPattern(size); + const first = await textsecure.messaging.makeProxiedRequest(url, { + start: 0, + end: Signal.Crypto.getRandomValue(1023, 2047), + returnArrayBuffer: true, + }); + const { totalSize, result } = first; + const initialOffset = result.data.byteLength; + const firstChunk = { + start: 0, + end: initialOffset, + ...result, + }; + + const chunks = await Signal.LinkPreviews.getChunkPattern( + totalSize, + initialOffset + ); let results = []; const jobs = chunks.map(chunk => async () => { const { start, end } = chunk; - const result = await textsecure.messaging.makeProxiedRequest(url, { + const jobResult = await textsecure.messaging.makeProxiedRequest(url, { start, end, returnArrayBuffer: true, @@ -1854,7 +1970,7 @@ return { ...chunk, - ...result, + ...jobResult.result, }; }); @@ -1878,7 +1994,9 @@ } const { contentType } = results[0]; - const data = Signal.LinkPreviews.assembleChunks(results); + const data = Signal.LinkPreviews.assembleChunks( + [firstChunk].concat(results) + ); return { contentType, @@ -1886,7 +2004,58 @@ }; }, + async getStickerPackPreview(url) { + const isPackValid = pack => + pack && (pack.status === 'advertised' || pack.status === 'installed'); + + try { + const { id, key } = window.Signal.Stickers.getDataFromLink(url); + const keyBytes = window.Signal.Crypto.bytesFromHexString(key); + const keyBase64 = window.Signal.Crypto.arrayBufferToBase64(keyBytes); + + const existing = window.Signal.Stickers.getStickerPack(id); + if (!isPackValid(existing)) { + await window.Signal.Stickers.downloadStickerPack(id, keyBase64); + } + + const pack = window.Signal.Stickers.getStickerPack(id); + if (!isPackValid(pack)) { + return null; + } + if (pack.key !== keyBase64) { + return null; + } + + const { title, coverStickerId } = pack; + const sticker = pack.stickers[coverStickerId]; + const data = await window.Signal.Migrations.readStickerData( + sticker.path + ); + + return { + title, + url, + image: { + ...sticker, + data, + size: data.byteLength, + contentType: 'image/webp', + }, + }; + } catch (error) { + window.log.error( + 'getStickerPackPreview error:', + error && error.stack ? error.stack : error + ); + return null; + } + }, + async getPreview(url) { + if (window.Signal.LinkPreviews.isStickerPack(url)) { + return this.getStickerPackPreview(url); + } + let html; try { html = await textsecure.messaging.makeProxiedRequest(url); diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js index 07df7db3c..a372c01ce 100644 --- a/js/views/inbox_view.js +++ b/js/views/inbox_view.js @@ -13,6 +13,12 @@ window.Whisper = window.Whisper || {}; + Whisper.StickerPackInstallFailedToast = Whisper.ToastView.extend({ + render_attributes() { + return { toastMessage: i18n('stickers--toast--InstallFailed') }; + }, + }); + Whisper.ConversationStack = Whisper.View.extend({ className: 'conversation-stack', open(conversation) { @@ -36,6 +42,8 @@ $el.prependTo(this.el); } conversation.trigger('opened'); + // Make sure poppers are positioned properly + window.dispatchEvent(new Event('resize')); }, }); @@ -92,6 +100,12 @@ this.$el.addClass('expired'); } + Whisper.events.on('pack-install-failed', () => { + const toast = new Whisper.StickerPackInstallFailedToast(); + toast.$el.appendTo(this.$el); + toast.render(); + }); + this.setupLeftPane(); }, render_attributes: { diff --git a/js/views/message_view.js b/js/views/message_view.js index 1f82933f8..ef1b26d57 100644 --- a/js/views/message_view.js +++ b/js/views/message_view.js @@ -16,6 +16,12 @@ this.listenTo(this.model, 'destroy', this.onDestroy); this.listenTo(this.model, 'unload', this.onUnload); this.listenTo(this.model, 'expired', this.onExpired); + + this.updateHiddenSticker(); + }, + updateHiddenSticker() { + const sticker = this.model.get('sticker'); + this.isHiddenSticker = sticker && (!sticker.data || !sticker.data.path); }, onChange() { this.addId(); @@ -94,7 +100,17 @@ const update = () => { const info = this.getRenderInfo(); - this.childView.update(info.props); + this.childView.update(info.props, () => { + if (!this.isHiddenSticker) { + return; + } + + this.updateHiddenSticker(); + + if (!this.isHiddenSticker) { + this.model.trigger('height-changed'); + } + }); }; this.listenTo(this.model, 'change', update); diff --git a/js/views/react_wrapper_view.js b/js/views/react_wrapper_view.js index a256fff18..7d108fb15 100644 --- a/js/views/react_wrapper_view.js +++ b/js/views/react_wrapper_view.js @@ -38,12 +38,23 @@ this.hasRendered = false; }, - update(props) { + update(props, cb) { const updatedProps = this.augmentProps(props); const reactElement = this.JSX ? this.JSX : React.createElement(this.Component, updatedProps); ReactDOM.render(reactElement, this.el, () => { + if (cb) { + try { + cb(); + } catch (error) { + window.log.error( + 'ReactWrapperView.update error:', + error && error.stack ? error.stack : error + ); + } + } + if (this.hasRendered) { return; } diff --git a/libtextsecure/crypto.js b/libtextsecure/crypto.js index 7183330a9..82c52547a 100644 --- a/libtextsecure/crypto.js +++ b/libtextsecure/crypto.js @@ -90,10 +90,11 @@ return verifyMAC(ivAndCiphertext, macKey, mac, 32) .then(() => { - if (!theirDigest) { - throw new Error('Failure: Ask sender to update Signal and resend.'); + if (theirDigest) { + return verifyDigest(encryptedBin, theirDigest); } - return verifyDigest(encryptedBin, theirDigest); + + return null; }) .then(() => decrypt(aesKey, ciphertext, iv)); }, diff --git a/libtextsecure/message_receiver.js b/libtextsecure/message_receiver.js index 4974d416d..01e2f6cf9 100644 --- a/libtextsecure/message_receiver.js +++ b/libtextsecure/message_receiver.js @@ -1110,6 +1110,11 @@ MessageReceiver.prototype.extend({ return this.handleVerified(envelope, syncMessage.verified); } else if (syncMessage.configuration) { return this.handleConfiguration(envelope, syncMessage.configuration); + } else if (syncMessage.stickerPackOperation) { + return this.handleStickerPackOperation( + envelope, + syncMessage.stickerPackOperation + ); } throw new Error('Got empty SyncMessage'); }, @@ -1120,6 +1125,19 @@ MessageReceiver.prototype.extend({ ev.configuration = configuration; return this.dispatchAndWait(ev); }, + handleStickerPackOperation(envelope, operations) { + const ENUM = textsecure.protobuf.SyncMessage.StickerPackOperation.Type; + window.log.info('got sticker pack operation sync message'); + const ev = new Event('sticker-pack'); + ev.confirm = this.removeFromCache.bind(this, envelope); + ev.stickerPacks = operations.map(operation => ({ + id: operation.packId ? operation.packId.toString('hex') : null, + key: operation.packKey ? operation.packKey.toString('base64') : null, + isInstall: operation.type === ENUM.INSTALL, + isRemove: operation.type === ENUM.REMOVE, + })); + return this.dispatchAndWait(ev); + }, handleVerified(envelope, verified) { const ev = new Event('verified'); ev.confirm = this.removeFromCache.bind(this, envelope); @@ -1231,6 +1249,10 @@ MessageReceiver.prototype.extend({ const encrypted = await this.server.getAttachment(attachment.id); const { key, digest, size } = attachment; + if (!digest) { + throw new Error('Failure: Ask sender to update Signal and resend.'); + } + const data = await textsecure.crypto.decryptAttachment( encrypted, window.Signal.Crypto.base64ToArrayBuffer(key), @@ -1400,6 +1422,19 @@ MessageReceiver.prototype.extend({ ); } + const { sticker } = decrypted; + if (sticker) { + if (sticker.packId) { + sticker.packId = sticker.packId.toString('hex'); + } + if (sticker.packKey) { + sticker.packKey = sticker.packKey.toString('base64'); + } + if (sticker.data) { + sticker.data = this.cleanAttachment(sticker.data); + } + } + return Promise.all(promises).then(() => decrypted); /* eslint-enable no-bitwise, no-param-reassign */ }, diff --git a/libtextsecure/protobufs.js b/libtextsecure/protobufs.js index 80c91e9e5..71c63f823 100644 --- a/libtextsecure/protobufs.js +++ b/libtextsecure/protobufs.js @@ -35,6 +35,7 @@ loadProtoBufs('SignalService.proto'); loadProtoBufs('SubProtocol.proto'); loadProtoBufs('DeviceMessages.proto'); + loadProtoBufs('Stickers.proto'); // Just for encrypting device names loadProtoBufs('DeviceName.proto'); diff --git a/libtextsecure/sendmessage.js b/libtextsecure/sendmessage.js index df6e114be..9490f9f19 100644 --- a/libtextsecure/sendmessage.js +++ b/libtextsecure/sendmessage.js @@ -1,4 +1,4 @@ -/* global _, textsecure, WebAPI, libsignal, OutgoingMessage, window */ +/* global _, textsecure, WebAPI, libsignal, OutgoingMessage, window, dcodeIO */ /* eslint-disable more/no-then, no-bitwise */ @@ -13,18 +13,26 @@ function stringToArrayBuffer(str) { } return res; } +function hexStringToArrayBuffer(string) { + return dcodeIO.ByteBuffer.wrap(string, 'hex').toArrayBuffer(); +} +function base64ToArrayBuffer(string) { + return dcodeIO.ByteBuffer.wrap(string, 'base64').toArrayBuffer(); +} function Message(options) { - this.body = options.body; this.attachments = options.attachments || []; - this.quote = options.quote; - this.preview = options.preview; - this.group = options.group; - this.flags = options.flags; - this.recipients = options.recipients; - this.timestamp = options.timestamp; + this.body = options.body; this.expireTimer = options.expireTimer; + this.flags = options.flags; + this.group = options.group; + this.needsSync = options.needsSync; + this.preview = options.preview; this.profileKey = options.profileKey; + this.quote = options.quote; + this.recipients = options.recipients; + this.sticker = options.sticker; + this.timestamp = options.timestamp; if (!(this.recipients instanceof Array)) { throw new Error('Invalid recipient list'); @@ -102,6 +110,16 @@ Message.prototype = { proto.group.id = stringToArrayBuffer(this.group.id); proto.group.type = this.group.type; } + if (this.sticker) { + proto.sticker = new textsecure.protobuf.DataMessage.Sticker(); + proto.sticker.packId = hexStringToArrayBuffer(this.sticker.packId); + proto.sticker.packKey = base64ToArrayBuffer(this.sticker.packKey); + proto.sticker.stickerId = this.sticker.stickerId; + + if (this.sticker.attachmentPointer) { + proto.sticker.data = this.sticker.attachmentPointer; + } + } if (Array.isArray(this.preview)) { proto.preview = this.preview.map(preview => { const item = new textsecure.protobuf.DataMessage.Preview(); @@ -154,8 +172,6 @@ function MessageSender(username, password) { this.pendingMessages = {}; } -const DISABLE_PADDING = true; - MessageSender.prototype = { constructor: MessageSender, @@ -166,8 +182,8 @@ MessageSender.prototype = { ); }, - getPaddedAttachment(data) { - if (DISABLE_PADDING) { + getPaddedAttachment(data, shouldPad) { + if (!shouldPad) { return data; } @@ -178,7 +194,7 @@ MessageSender.prototype = { return window.Signal.Crypto.concatenateBytes(data, padding); }, - async makeAttachmentPointer(attachment) { + async makeAttachmentPointer(attachment, shouldPad = false) { if (typeof attachment !== 'object' || attachment == null) { return Promise.resolve(undefined); } @@ -197,7 +213,7 @@ MessageSender.prototype = { ); } - const padded = this.getPaddedAttachment(data); + const padded = this.getPaddedAttachment(data, shouldPad); const key = libsignal.crypto.getRandomBytes(64); const iv = libsignal.crypto.getRandomBytes(16); @@ -286,6 +302,32 @@ MessageSender.prototype = { } }, + async uploadSticker(message) { + try { + const { sticker } = message; + + if (!sticker || !sticker.data) { + return; + } + + const shouldPad = true; + // eslint-disable-next-line no-param-reassign + message.sticker = { + ...sticker, + attachmentPointer: await this.makeAttachmentPointer( + sticker.data, + shouldPad + ), + }; + } catch (error) { + if (error instanceof Error && error.name === 'HTTPError') { + throw new textsecure.MessageError(message, error); + } else { + throw error; + } + } + }, + uploadThumbnails(message) { const makePointer = this.makeAttachmentPointer.bind(this); const { quote } = message; @@ -323,6 +365,7 @@ MessageSender.prototype = { this.uploadAttachments(message), this.uploadThumbnails(message), this.uploadLinkPreviews(message), + this.uploadSticker(message), ]).then( () => new Promise((resolve, reject) => { @@ -510,6 +553,13 @@ MessageSender.prototype = { return this.server.getAvatar(path); }, + getSticker(packId, stickerId) { + return this.server.getSticker(packId, stickerId); + }, + getStickerPackManifest(packId) { + return this.server.getStickerPackManifest(packId); + }, + sendRequestConfigurationSyncMessage(options) { const myNumber = textsecure.storage.user.getNumber(); const myDevice = textsecure.storage.user.getDeviceId(); @@ -698,6 +748,41 @@ MessageSender.prototype = { return Promise.resolve(); }, + async sendStickerPackSync(operations, options) { + const myDevice = textsecure.storage.user.getDeviceId(); + if (myDevice === 1 || myDevice === '1') { + return null; + } + + const myNumber = textsecure.storage.user.getNumber(); + const ENUM = textsecure.protobuf.SyncMessage.StickerPackOperation.Type; + + const packOperations = operations.map(item => { + const { packId, packKey, installed } = item; + + const operation = new textsecure.protobuf.SyncMessage.StickerPackOperation(); + operation.packId = hexStringToArrayBuffer(packId); + operation.packKey = base64ToArrayBuffer(packKey); + operation.type = installed ? ENUM.INSTALL : ENUM.REMOVE; + + return operation; + }); + + const syncMessage = this.createSyncMessage(); + syncMessage.stickerPackOperation = packOperations; + + const contentMessage = new textsecure.protobuf.Content(); + contentMessage.syncMessage = syncMessage; + + const silent = true; + return this.sendIndividualProto( + myNumber, + contentMessage, + Date.now(), + silent, + options + ); + }, syncVerification(destination, state, identityKey, options) { const myNumber = textsecure.storage.user.getNumber(); const myDevice = textsecure.storage.user.getDeviceId(); @@ -795,6 +880,7 @@ MessageSender.prototype = { attachments, quote, preview, + sticker, timestamp, expireTimer, profileKey, @@ -807,6 +893,7 @@ MessageSender.prototype = { attachments, quote, preview, + sticker, expireTimer, profileKey, flags, @@ -821,6 +908,7 @@ MessageSender.prototype = { this.uploadAttachments(message), this.uploadThumbnails(message), this.uploadLinkPreviews(message), + this.uploadSticker(message), ]); return message.toArrayBuffer(); @@ -832,6 +920,7 @@ MessageSender.prototype = { attachments, quote, preview, + sticker, timestamp, expireTimer, profileKey, @@ -845,6 +934,7 @@ MessageSender.prototype = { attachments, quote, preview, + sticker, expireTimer, profileKey, }, @@ -928,6 +1018,7 @@ MessageSender.prototype = { attachments, quote, preview, + sticker, timestamp, expireTimer, profileKey, @@ -942,6 +1033,7 @@ MessageSender.prototype = { attachments, quote, preview, + sticker, expireTimer, profileKey, group: { @@ -1098,9 +1190,6 @@ MessageSender.prototype = { makeProxiedRequest(url, options) { return this.server.makeProxiedRequest(url, options); }, - getProxiedSize(url) { - return this.server.getProxiedSize(url); - }, }; window.textsecure = window.textsecure || {}; @@ -1142,10 +1231,11 @@ textsecure.MessageSender = function MessageSenderWrapper(username, password) { this.sendDeliveryReceipt = sender.sendDeliveryReceipt.bind(sender); this.sendReadReceipts = sender.sendReadReceipts.bind(sender); this.makeProxiedRequest = sender.makeProxiedRequest.bind(sender); - this.getProxiedSize = sender.getProxiedSize.bind(sender); this.getMessageProto = sender.getMessageProto.bind(sender); - this._getAttachmentSizeBucket = sender._getAttachmentSizeBucket.bind(sender); + this.getSticker = sender.getSticker.bind(sender); + this.getStickerPackManifest = sender.getStickerPackManifest.bind(sender); + this.sendStickerPackSync = sender.sendStickerPackSync.bind(sender); }; textsecure.MessageSender.prototype = { diff --git a/main.js b/main.js index 35395ab36..b1a06001e 100644 --- a/main.js +++ b/main.js @@ -5,6 +5,7 @@ const url = require('url'); const os = require('os'); const fs = require('fs'); const crypto = require('crypto'); +const qs = require('qs'); const _ = require('lodash'); const pify = require('pify'); @@ -398,13 +399,16 @@ ipc.on('show-window', () => { showWindow(); }); -let updatesStarted = false; -ipc.on('ready-for-updates', async () => { - if (updatesStarted) { - return; +ipc.once('ready-for-updates', async () => { + // First, install requested sticker pack + if (process.argv.length > 1) { + const [incomingUrl] = process.argv; + if (incomingUrl.startsWith('sgnl://')) { + handleSgnlLink(incomingUrl); + } } - updatesStarted = true; + // Second, start checking for app updates try { await updater.start(getMainWindow, locale.messages, logger); } catch (error) { @@ -714,6 +718,13 @@ app.on('ready', async () => { userDataPath, attachments: orphanedAttachments, }); + + const allStickers = await attachments.getAllStickers(userDataPath); + const orphanedStickers = await sql.removeKnownStickers(allStickers); + await attachments.deleteAllStickers({ + userDataPath, + stickers: orphanedStickers, + }); } await attachmentChannel.initialize({ @@ -840,6 +851,12 @@ app.on('web-contents-created', (createEvent, contents) => { }); }); +app.setAsDefaultProtocolClient('sgnl'); +app.on('open-url', (event, incomingUrl) => { + event.preventDefault(); + handleSgnlLink(incomingUrl); +}); + ipc.on('set-badge-count', (event, count) => { app.setBadgeCount(count); }); @@ -1011,3 +1028,15 @@ function installSettingsSetter(name) { } }); } + +function handleSgnlLink(incomingUrl) { + const { host: command, query } = url.parse(incomingUrl); + const args = qs.parse(query); + if (command === 'addstickers' && mainWindow && mainWindow.webContents) { + const { pack_id: packId, pack_key: packKeyHex } = args; + const packKey = Buffer.from(packKeyHex, 'hex').toString('base64'); + mainWindow.webContents.send('add-sticker-pack', { packId, packKey }); + } else { + console.error('Unhandled sgnl link'); + } +} diff --git a/package.json b/package.json index e1fdd8aae..b71dfdc35 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "bunyan": "1.8.12", "classnames": "2.2.5", "config": "1.28.1", - "electron-context-menu": "^0.11.0", + "electron-context-menu": "0.11.0", "electron-editor-context-menu": "1.1.1", "electron-is-dev": "0.3.0", "emoji-datasource": "4.0.0", @@ -80,12 +80,16 @@ "node-gyp": "3.8.0", "node-sass": "4.9.3", "os-locale": "2.1.0", + "p-map": "2.1.0", + "p-queue": "5.0.0", "pify": "3.0.0", "protobufjs": "6.8.6", "proxy-agent": "3.0.3", + "qs": "6.5.1", "react": "16.8.3", "react-contextmenu": "2.11.0", "react-dom": "16.8.3", + "react-popper": "^1.3.3", "react-redux": "6.0.1", "react-virtualized": "9.21.0", "read-last-lines": "1.3.0", @@ -158,7 +162,6 @@ "node-sass-import-once": "1.2.0", "nyc": "11.4.1", "prettier": "1.12.0", - "qs": "6.5.1", "react-docgen-typescript": "1.2.6", "react-styleguidist": "7.0.1", "sinon": "4.4.2", diff --git a/preload.js b/preload.js index 2efbcc3d3..48a516565 100644 --- a/preload.js +++ b/preload.js @@ -150,6 +150,14 @@ ipc.on('delete-all-data', () => { } }); +ipc.on('add-sticker-pack', (_event, info) => { + const { packId, packKey } = info; + const { installStickerPack } = window.Events; + if (installStickerPack) { + installStickerPack(packId, packKey); + } +}); + ipc.on('get-ready-for-shutdown', async () => { const { shutdown } = window.Events || {}; if (!shutdown) { @@ -271,9 +279,12 @@ window.moment.updateLocale(locale, { }); window.moment.locale(locale); +const userDataPath = app.getPath('userData'); +window.baseAttachmentsPath = Attachments.getPath(userDataPath); +window.baseStickersPath = Attachments.getStickersPath(userDataPath); window.Signal = Signal.setup({ Attachments, - userDataPath: app.getPath('userData'), + userDataPath, getRegionCode: () => window.storage.get('regionCode'), logger: window.log, }); diff --git a/protos/SignalService.proto b/protos/SignalService.proto index cbcb0256b..83d9646b3 100644 --- a/protos/SignalService.proto +++ b/protos/SignalService.proto @@ -162,6 +162,13 @@ message DataMessage { optional AttachmentPointer image = 3; } + message Sticker { + optional bytes packId = 1; + optional bytes packKey = 2; + optional uint32 stickerId = 3; + optional AttachmentPointer data = 4; + } + optional string body = 1; repeated AttachmentPointer attachments = 2; optional GroupContext group = 3; @@ -172,6 +179,7 @@ message DataMessage { optional Quote quote = 8; repeated Contact contact = 9; repeated Preview preview = 10; + optional Sticker sticker = 11; } message NullMessage { @@ -265,15 +273,26 @@ message SyncMessage { optional bool linkPreviews = 4; } - optional Sent sent = 1; - optional Contacts contacts = 2; - optional Groups groups = 3; - optional Request request = 4; - repeated Read read = 5; - optional Blocked blocked = 6; - optional Verified verified = 7; - optional Configuration configuration = 9; - optional bytes padding = 8; + message StickerPackOperation { + enum Type { + INSTALL = 0; + REMOVE = 1; + } + optional bytes packId = 1; + optional bytes packKey = 2; + optional Type type = 3; + } + + optional Sent sent = 1; + optional Contacts contacts = 2; + optional Groups groups = 3; + optional Request request = 4; + repeated Read read = 5; + optional Blocked blocked = 6; + optional Verified verified = 7; + optional Configuration configuration = 9; + optional bytes padding = 8; + repeated StickerPackOperation stickerPackOperation = 10; } message AttachmentPointer { diff --git a/protos/Stickers.proto b/protos/Stickers.proto new file mode 100644 index 000000000..82dfa0dbf --- /dev/null +++ b/protos/Stickers.proto @@ -0,0 +1,13 @@ +package signalservice; + +message StickerPack { + message Sticker { + optional uint32 id = 1; + optional string emoji = 2; + } + + optional string title = 1; + optional string author = 2; + optional Sticker cover = 3; + repeated Sticker stickers = 4; +} diff --git a/styleguide.config.js b/styleguide.config.js index c58cf7d82..c73a1ea88 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -21,6 +21,11 @@ module.exports = { description: 'Display media and documents in a conversation', components: 'ts/components/conversation/media-gallery/[^_]*.tsx', }, + { + name: 'Stickers', + description: 'All components related to stickers', + components: 'ts/components/stickers/[^_]*.tsx', + }, { name: 'Utility', description: 'Utility components used across the application', @@ -73,7 +78,7 @@ module.exports = { }, { // To test handling of attachments, we need arraybuffers in memory - test: /\.(gif|mp3|mp4|txt|jpg|jpeg|png)$/, + test: /\.(gif|mp3|mp4|txt|jpg|jpeg|png|webp)$/, loader: 'arraybuffer-loader', }, ], diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss index 1ff50bd01..965080574 100644 --- a/stylesheets/_conversation.scss +++ b/stylesheets/_conversation.scss @@ -51,6 +51,11 @@ } } +// Make sure the main panel is hidden when other panels are in the dom +.panel + .main.panel { + display: none; +} + .message-detail-wrapper { height: calc(100% - 48px); width: 100%; diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 5b1d19ee1..3a8d869e9 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -630,3 +630,7 @@ $loading-height: 16px; .inbox { position: relative; } + +.overflow-hidden { + overflow: hidden; +} diff --git a/stylesheets/_ios.scss b/stylesheets/_ios.scss index cbd61cfaa..b97c34dd7 100644 --- a/stylesheets/_ios.scss +++ b/stylesheets/_ios.scss @@ -43,6 +43,9 @@ .module-message__metadata__date--with-image-no-caption { color: $color-white; } + .module-message__metadata__date--with-sticker { + color: $color-gray-60; + } .module-message__metadata__status-icon--sending { @include color-svg('../images/sending.svg', $color-white); @@ -61,6 +64,9 @@ .module-message__metadata__status-icon--with-image-no-caption { background-color: $color-white; } + .module-message__metadata__status-icon--with-sticker { + background-color: $color-gray-60; + } .module-message__generic-attachment__file-name { color: $color-white; @@ -81,10 +87,12 @@ .module-expire-timer { background-color: $color-white-08; } - .module-expire-timer--incoming { background-color: $color-gray-60; } + .module-expire-timer--with-sticker { + background-color: $color-gray-60; + } .module-quote--outgoing { border-left-color: $color-white; @@ -188,7 +196,6 @@ .module-message__metadata__date { color: $color-white-08; } - .module-message__metadata__date--incoming { color: $color-gray-25; } @@ -203,7 +210,6 @@ .module-expire-timer { background-color: $color-white-08; } - .module-expire-timer--incoming { background-color: $color-gray-25; } diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss index a585ad5bc..72b6f5f7c 100644 --- a/stylesheets/_mixins.scss +++ b/stylesheets/_mixins.scss @@ -34,7 +34,11 @@ } @mixin dark-theme() { - body.dark-theme & { + .dark-theme & { @content; } } + +@mixin popper-shadow() { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0 rgba(0, 0, 0, 0.33); +} diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 5f5ce4b73..0e8c0caa2 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -157,6 +157,10 @@ min-width: 0px; } +.module-message__container--with-sticker { + padding-bottom: 0px; +} + .module-message__container--outgoing { background-color: $color-light-10; } @@ -201,31 +205,53 @@ } .module-message__attachment-container { - // Entirely to ensure that images are centered if they aren't full width of bubble + // To ensure that images are centered if they aren't full width of bubble text-align: center; position: relative; - margin-left: -12px; - margin-right: -12px; - margin-top: -10px; - margin-bottom: -10px; + margin: { + left: -12px; + right: -12px; + top: -10px; + bottom: -10px; + } border-radius: 16px; overflow: hidden; background-color: $color-white; + + &--with-content-below { + margin-bottom: 7px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + + &--with-content-above { + margin-top: 4px; + border-top-left-radius: 0px; + border-top-right-radius: 0px; + } } -.module-message__attachment-container--with-content-below { - margin-bottom: 7px; - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; -} +.module-message__sticker-container { + // To ensure that images are centered if they aren't full width of bubble + text-align: center; -.module-message__attachment-container--with-content-above { - margin-top: 4px; - border-top-left-radius: 0px; - border-top-right-radius: 0px; + margin: { + left: -12px; + right: -12px; + top: -9px; + bottom: -5px; + } + + &--with-content-below { + margin-bottom: 5px; + } + + &--with-content-above { + margin-top: 4px; + } } .module-message__img-attachment { @@ -440,10 +466,32 @@ overflow-y: hidden; white-space: nowrap; text-overflow: ellipsis; + + &__profile-name { + font-style: italic; + } } -.module-message__author__profile-name { - font-style: italic; +.module-message__author_with_sticker { + color: $color-gray-90; + font-size: 13px; + font-weight: 300; + line-height: 18px; + height: 18px; + overflow-x: hidden; + overflow-y: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + // Stickers are pretty narrow, so we allow this one element of a sticker + // message to go wider than normal. + // There's a tension here, since this is width and not max-width; things will + // look bad for RTL users if we make it too wide. + width: 300px; + + &__profile-name { + font-style: italic; + } } .module-message__text { @@ -451,7 +499,6 @@ font-size: 14px; line-height: 18px; text-align: start; - overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; @@ -2160,13 +2207,16 @@ .module-image { overflow: hidden; - background-color: $color-white; position: relative; display: inline-block; margin: 1px; vertical-align: middle; } +.module-image--with-background { + background-color: $color-white; +} + .module-image__caption-icon { position: absolute; top: 6px; @@ -2318,6 +2368,10 @@ margin-bottom: -5px; } +.module-image-grid--with-sticker { + padding: 8px; +} + .module-image-grid__column { display: inline-flex; flex-direction: column; @@ -3119,6 +3173,910 @@ outline: none; } +// Module: StickerPicker + +.module-sticker-picker { + width: 332px; + height: 400px; + border-radius: 8px; + display: grid; + grid-template-rows: 44px 1fr; + grid-template-columns: 1fr; + user-select: none; + overflow: hidden; + z-index: 2; + margin-bottom: 6px; + + @include popper-shadow(); + + @include light-theme { + background: $color-gray-02; + } + + @include dark-theme { + background: $color-gray-75; + } +} + +.module-sticker-picker__header { + display: flex; + flex-direction: row; + padding: 0 8px; + justify-content: flex-start; + align-items: center; +} + +.module-sticker-picker__header__packs { + width: 288px; + overflow: hidden; + position: relative; + + &__slider { + display: flex; + flex-direction: row; + transform: translateX(0); + transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); + } +} + +.module-sticker-picker__header__button { + width: 28px; + height: 28px; + border: 0; + border-radius: 8px; + display: flex; + justify-content: center; + align-items: center; + background: none; + margin-right: 4px; + + &:active, + &:focus { + outline: none; + } + + &--selected { + @include light-theme { + background: $color-gray-10; + } + @include dark-theme { + background: $color-gray-60; + } + } + + &--recents, + &--add-pack { + &::after { + content: ''; + display: block; + min-width: 20px; + min-height: 20px; + } + } + + &--recents { + &::after { + @include light-theme { + @include color-svg('../images/recent-outline.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/recent-outline.svg', $color-gray-25); + } + } + } + + &--add-pack { + &::after { + @include light-theme { + @include color-svg('../images/plus-20.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/plus-20.svg', $color-gray-25); + } + } + } + + &--prev-page, + &--next-page { + top: 0; + margin: 0; + border-radius: 0; + + &::after { + content: ''; + display: block; + min-width: 12px; + min-height: 12px; + } + + @include light-theme { + background: $color-gray-02; + } + + @include dark-theme { + background: $color-gray-75; + } + } + + &--prev-page { + position: absolute; + left: 0; + + &::after { + @include light-theme { + @include color-svg('../images/chevron-left-12.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/chevron-left-12.svg', $color-gray-25); + } + } + } + + &--next-page { + position: absolute; + right: 0; + + &::after { + @include light-theme { + @include color-svg('../images/chevron-right-12.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/chevron-right-12.svg', $color-gray-25); + } + } + } + + &--error { + position: relative; + + &::before { + display: block; + content: ''; + width: 12px; + height: 12px; + position: absolute; + left: 14px; + top: 2px; + @include color-svg('../images/error-filled.svg', $color-core-red); + } + } + + &--hint { + position: relative; + &::before { + display: block; + content: ''; + position: absolute; + top: 0; + right: 0; + width: 14px; + height: 14px; + border-radius: 7px; + background: $color-signal-blue; + } + } +} + +.module-sticker-picker__header__button__image { + min-width: 20px; + min-height: 20px; + max-width: 20px; + max-height: 20px; +} + +.module-sticker-picker__body { + position: relative; + + &__content { + width: 332px; + height: 356px; + padding: 8px 20px 16px 16px; + overflow-y: auto; + display: grid; + grid-gap: 8px; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: 68px; + + &--under-text { + height: 320px; + } + + &--under-long-text { + height: 304px; + } + } + + &__cell { + border: none; + background: none; + padding: 0; + width: 68px; + height: 68px; + display: flex; + justify-content: center; + align-items: center; + + &__image, + &__placeholder { + width: 100%; + height: 100%; + } + + &__placeholder { + border-radius: 4px; + + @include light-theme() { + background-color: $color-gray-05; + } + + @include dark-theme() { + background-color: $color-gray-60; + } + } + } + + &--empty { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + &__text { + font-family: Roboto; + font-weight: 300; + font-size: 14px; + text-align: center; + padding: 8px 16px 12px 0; + + @include light-theme() { + color: $color-gray-60; + } + + @include dark-theme() { + color: $color-gray-25; + } + + &:only-child { + padding: 0 0 28px 0; // header height to offset the text so it is centered in the whole picker + } + + &--error { + @include light-theme() { + color: $color-core-red; + } + @include dark-theme() { + color: $color-core-red; + } + } + + &--hint { + @include light-theme() { + color: $color-signal-blue; + } + + @include dark-theme() { + color: $color-signal-blue; + } + } + + &--pin { + padding: 8px 16px 12px 0px; + position: absolute; + top: 0; + } + } +} + +// Module: StickerManager + +.module-sticker-manager { + padding: 0 16px; +} + +.module-sticker-manager__text { + height: 18px; + font-size: 13px; + font-weight: normal; + font-family: Roboto; + letter-spacing: 0px; + line-height: 18px; + + @include light-theme() { + color: $color-gray-60; + } + + @include dark-theme() { + color: $color-gray-25; + } + + &--heading { + font-size: 14px; + font-weight: 300; + + @include light-theme() { + color: $color-gray-90; + } + + @include dark-theme() { + color: $color-gray-05; + } + } +} + +.module-sticker-manager__empty { + display: flex; + justify-content: center; + align-items: center; + height: 64px; + border-radius: 8px; + font-family: Roboto-Light; + font-size: 13px; + + @include light-theme { + background: $color-gray-02; + color: $color-gray-60; + } + + @include dark-theme { + background: $color-gray-90; + color: $color-gray-25; + } +} + +.module-sticker-manager__pack-row { + display: flex; + flex-direction: row; + padding: 16px 0; + + &:hover { + cursor: pointer; + } + + & + & { + border-top: 1px solid $color-gray-15; + } + + &__cover { + width: 48px; + height: 48px; + } + + &__meta { + flex-grow: 1; + display: flex; + flex-direction: column; + + &:not(:first-child) { + padding: 0 12px; + } + + &__title { + flex: 1; + } + + &__author { + flex: 1; + font-family: Roboto-Light; + font-size: 13px; + + @include light-theme() { + color: $color-gray-60; + } + + @include dark-theme() { + color: $color-gray-25; + } + } + + &__blessed-icon { + height: 16px; + width: 16px; + display: inline-block; + margin-left: 3px; + vertical-align: top; + background-image: url('../images/check-circle-filled-16.svg'); + } + } + + &__controls { + flex-shrink: 1; + display: flex; + justify-content: center; + align-items: center; + + &__button { + background: none; + border: 0; + &--menu { + &:after { + content: ''; + display: block; + min-width: 24px; + min-height: 24px; + @include light-theme { + @include color-svg('../images/more-h.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/more-h.svg', $color-gray-25); + } + } + } + } + } +} + +.module-sticker-manager__install-button { + background: none; + border: 0; + font-family: Roboto; + color: $color-gray-90; + font-weight: 300; + font-size: 13px; + height: 24px; + background: $color-gray-05; + border-radius: 12px; + display: flex; + justify-content: center; + align-items: center; + padding: 0 12px; + + @include dark-theme { + color: $color-gray-05; + background: $color-gray-75; + } + + &--blue { + @include light-theme { + background: $color-signal-blue; + color: $color-white; + } + @include dark-theme { + background: $color-signal-blue; + color: $color-white; + } + } +} + +.module-sticker-manager__preview-modal { + &__overlay { + background: rgba(0, 0, 0, 0.4); + position: fixed; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 5; + } + + &__container { + position: relative; + border-radius: 8px; + box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); + width: 440px; + height: 360px; + overflow: hidden; + display: flex; + flex-direction: column; + + @include light-theme { + background: $color-white; + } + @include dark-theme { + background: $color-gray-75; + } + + &__header { + display: flex; + flex-direction: row; + height: 36px; + padding: 0 8px 0 16px; + justify-content: space-between; + align-items: center; + + &__text { + font-weight: 300; + font-size: 14px; + color: $color-gray-90; + @include dark-theme { + color: $color-gray-05; + } + } + + &__close-button { + border: none; + width: 20px; + height: 20px; + @include light-theme { + @include color-svg('../images/x.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/x.svg', $color-gray-05); + } + } + } + + &__sticker-grid { + width: 100%; + display: grid; + grid-gap: 8px; + grid-template-columns: repeat(4, 1fr); + overflow-y: auto; + padding: 0 16px 80px 16px; + + &__cell { + width: 96px; + height: 96px; + + &__image { + width: 100%; + height: 100%; + } + } + } + + &__meta-overlay { + border-radius: 4px; + width: 408px; + height: 52px; + position: absolute; + left: 16px; + bottom: 16px; + padding: 0 12px; + display: flex; + flex-direction: row; + align-items: center; + + @include light-theme { + background: $color-gray-05; + } + + @include dark-theme { + background: $color-gray-60; + } + + &__info { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; + + &__title { + margin: 0; + font-size: 16px; + font-weight: 300; + height: 20px; + line-height: 20px; + + @include light-theme { + color: $color-gray-90; + } + + @include dark-theme { + color: $color-gray-05; + } + } + + &__author { + margin: 0; + font-family: Roboto-Light; + font-size: 13px; + height: 18px; + line-height: 18px; + + @include light-theme { + color: $color-gray-60; + } + + @include dark-theme { + color: $color-gray-25; + } + } + + &__blessed-icon { + height: 16px; + width: 16px; + display: inline-block; + margin-left: 3px; + vertical-align: top; + + @include light-theme { + background-image: url('../images/check-circle-filled-16.svg'); + } + + @include dark-theme { + background-image: url('../images/check-circle-filled-16.svg'); + } + } + } + + &__install { + flex-shrink: 1; + } + } + } +} + +// Module: Sticker button (launches the sticker picker) + +.sticker-button-wrapper { + height: 36px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 6px; +} + +.module-sticker-button__button { + border: 0; + background: none; + width: 32px; + height: 32px; + border-radius: 16px; + display: flex; + justify-content: center; + align-items: center; + opacity: 0.5; + + &:hover { + opacity: 1; + } + + &:after { + display: block; + content: ''; + width: 24px; + height: 24px; + + @include light-theme { + @include color-svg('../images/sticker-filled.svg', $color-gray-60); + } + @include dark-theme { + @include color-svg('../images/sticker-filled.svg', $color-gray-25); + } + } + + &--active { + @include light-theme() { + background: $color-gray-10; + } + + @include dark-theme() { + background: $color-gray-75; + } + + opacity: 1; + } +} + +.module-sticker-button__tooltip { + height: 34px; + display: flex; + justify-content: center; + align-items: center; + padding: 7px 12px; + border-radius: 8px; + margin-bottom: 6px; + z-index: 1; + + @include light-theme { + background: $color-white; + } + + @include dark-theme { + background: $color-gray-75; + } + + @include popper-shadow(); + + &__triangle { + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 8px 8px 0 8px; + + @include light-theme { + border-color: $color-white transparent transparent transparent; + } + + @include dark-theme { + border-color: $color-gray-75 transparent transparent transparent; + } + + &--top-end { + top: 34px; + } + + &--introduction { + top: 72px; + } + } + + &__image { + width: 20px; + height: 20px; + } + + &__text { + margin-left: 4px; + font-size: 14px; + cursor: default; + + @include light-theme { + color: $color-gray-90; + } + + @include dark-theme { + color: $color-gray-05; + } + + &__title { + font-weight: 300; + } + } + + &--introduction { + width: 420px; + height: 72px; + display: flex; + flex-direction: row; + + &__image { + width: 52px; + height: 52px; + background: #eaeaea; + } + + &__meta { + flex-grow: 1; + padding: 0 12px; + display: flex; + flex-direction: column; + justify-content: center; + + @include light-theme { + color: $color-gray-90; + } + + @include dark-theme { + color: $color-gray-05; + } + + &__title { + margin: 0; + font-size: 14px; + font-weight: 300; + height: 16px; + line-height: 20px; + } + + &__subtitle { + margin-top: 3px; + font-size: 14px; + height: 16px; + } + } + + &__close { + flex-shrink: 1; + height: 100%; + &__button { + width: 20px; + height: 20px; + border: none; + + @include light-theme { + @include color-svg('../images/x.svg', $color-gray-60); + } + + @include dark-theme { + @include color-svg('../images/x.svg', $color-gray-05); + } + } + } + } +} + +// Module: confirmation dialog +.module-confirmation-dialog { + &__overlay { + background: rgba(0, 0, 0, 0.4); + position: fixed; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 5; + } + + &__container { + width: 360px; + padding: 12px 16px; + border-radius: 8px; + @include popper-shadow(); + + @include light-theme() { + background: $color-white; + color: $color-gray-90; + } + + @include dark-theme() { + background: $color-gray-75; + color: $color-gray-05; + } + + &__content { + margin-bottom: 20px; + } + + &__buttons { + display: flex; + flex-direction: row; + justify-content: flex-end; + + &__button { + margin-left: 4px; + border-radius: 14px; + height: 28px; + padding: 5px 12px; + display: flex; + justify-content: center; + align-items: center; + font-size: 13px; + font-weight: 500; + font-family: Roboto; + + @include light-theme() { + background: $color-white; + color: $color-gray-60; + border: 1px solid $color-gray-60; + } + + @include dark-theme() { + background: $color-gray-75; + color: $color-gray-25; + border: 1px solid $color-gray-25; + } + + &--negative { + @include light-theme() { + border: none; + background: $color-core-red; + color: $color-white; + } + + @include dark-theme() { + border: none; + background: $color-core-red; + color: $color-white; + } + } + + &--affirmative { + @include light-theme() { + border: none; + background: $color-core-green; + color: $color-white; + } + + @include dark-theme() { + border: none; + background: $color-core-green; + color: $color-white; + } + } + } + } + } +} + // Third-party module: react-contextmenu .react-contextmenu { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index a13fe80d3..afe5e61d3 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -695,6 +695,10 @@ body.dark-theme { color: $color-white; } + .module-message__author_with_sticker { + color: $color-gray-05; + } + .module-message__text { color: $color-dark-05; a { @@ -1351,7 +1355,7 @@ body.dark-theme { // Module: Image - .module-image { + .module-image--with-background { background-color: $color-black; } diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index e7c13bf25..edd888c84 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -42,6 +42,7 @@ $color-signal-blue-050: rgba($color-signal-blue, 0.5); $color-white: #ffffff; $color-gray-02: #f8f9f9; $color-gray-05: #eeefef; +$color-gray-10: #e1e2e3; $color-gray-15: #d5d6d6; $color-gray-25: #bbbdbe; $color-gray-45: #898a8c; diff --git a/ts/components/ConfirmationDialog.md b/ts/components/ConfirmationDialog.md new file mode 100644 index 000000000..328ce1027 --- /dev/null +++ b/ts/components/ConfirmationDialog.md @@ -0,0 +1,16 @@ +#### All Options + +```jsx + + console.log('onClose')} + onAffirmative={() => console.log('onAffirmative')} + affirmativeText="Affirm" + onNegative={() => console.log('onNegative')} + negativeText="Negate" + > + asdf child + + +``` diff --git a/ts/components/ConfirmationDialog.tsx b/ts/components/ConfirmationDialog.tsx new file mode 100644 index 000000000..c35408be1 --- /dev/null +++ b/ts/components/ConfirmationDialog.tsx @@ -0,0 +1,117 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { LocalizerType } from '../types/Util'; + +export type OwnProps = { + readonly i18n: LocalizerType; + readonly children: React.ReactNode; + readonly affirmativeText?: string; + readonly onAffirmative?: () => unknown; + readonly onClose: () => unknown; + readonly negativeText?: string; + readonly onNegative?: () => unknown; +}; + +export type Props = OwnProps; + +function focusRef(el: HTMLElement | null) { + if (el) { + el.focus(); + } +} + +export const ConfirmationDialog = React.memo( + ({ + i18n, + onClose, + children, + onAffirmative, + onNegative, + affirmativeText, + negativeText, + }: Props) => { + React.useEffect( + () => { + const handler = ({ key }: KeyboardEvent) => { + if (key === 'Escape') { + onClose(); + } + }; + document.addEventListener('keyup', handler); + + return () => { + document.removeEventListener('keyup', handler); + }; + }, + [onClose] + ); + + const handleCancel = React.useCallback( + (e: React.MouseEvent) => { + if (e.target === e.currentTarget) { + onClose(); + } + }, + [onClose] + ); + + const handleNegative = React.useCallback( + () => { + onClose(); + if (onNegative) { + onNegative(); + } + }, + [onClose, onNegative] + ); + + const handleAffirmative = React.useCallback( + () => { + onClose(); + if (onAffirmative) { + onAffirmative(); + } + }, + [onClose, onAffirmative] + ); + + return ( +
+
+ {children} +
+
+ + {onNegative && negativeText ? ( + + ) : null} + {onAffirmative && affirmativeText ? ( + + ) : null} +
+
+ ); + } +); diff --git a/ts/components/ConfirmationModal.tsx b/ts/components/ConfirmationModal.tsx new file mode 100644 index 000000000..844dbae23 --- /dev/null +++ b/ts/components/ConfirmationModal.tsx @@ -0,0 +1,89 @@ +import * as React from 'react'; +import { createPortal } from 'react-dom'; +import { ConfirmationDialog } from './ConfirmationDialog'; +import { LocalizerType } from '../types/Util'; + +export type OwnProps = { + readonly i18n: LocalizerType; + readonly children: React.ReactNode; + readonly affirmativeText?: string; + readonly onAffirmative?: () => unknown; + readonly onClose: () => unknown; + readonly negativeText?: string; + readonly onNegative?: () => unknown; +}; + +export type Props = OwnProps; + +export const ConfirmationModal = React.memo( + // tslint:disable-next-line max-func-body-length + ({ + i18n, + onClose, + children, + onAffirmative, + onNegative, + affirmativeText, + negativeText, + }: Props) => { + const [root, setRoot] = React.useState(null); + + React.useEffect(() => { + const div = document.createElement('div'); + document.body.appendChild(div); + setRoot(div); + + return () => { + document.body.removeChild(div); + setRoot(null); + }; + }, []); + + React.useEffect( + () => { + const handler = ({ key }: KeyboardEvent) => { + if (key === 'Escape') { + onClose(); + } + }; + document.addEventListener('keyup', handler); + + return () => { + document.removeEventListener('keyup', handler); + }; + }, + [onClose] + ); + + const handleCancel = React.useCallback( + (e: React.MouseEvent) => { + if (e.target === e.currentTarget) { + onClose(); + } + }, + [onClose] + ); + + return root + ? createPortal( +
+ + {children} + +
, + root + ) + : null; + } +); diff --git a/ts/components/conversation/ExpireTimer.tsx b/ts/components/conversation/ExpireTimer.tsx index cd66055fd..05a7c6a98 100644 --- a/ts/components/conversation/ExpireTimer.tsx +++ b/ts/components/conversation/ExpireTimer.tsx @@ -5,9 +5,10 @@ import { getIncrement, getTimerBucket } from '../../util/timer'; interface Props { withImageNoCaption: boolean; + withSticker: boolean; expirationLength: number; expirationTimestamp: number; - direction: 'incoming' | 'outgoing'; + direction?: 'incoming' | 'outgoing'; } export class ExpireTimer extends React.Component { @@ -44,6 +45,7 @@ export class ExpireTimer extends React.Component { expirationLength, expirationTimestamp, withImageNoCaption, + withSticker, } = this.props; const bucket = getTimerBucket(expirationTimestamp, expirationLength); @@ -56,7 +58,8 @@ export class ExpireTimer extends React.Component { `module-expire-timer--${direction}`, withImageNoCaption ? 'module-expire-timer--with-image-no-caption' - : null + : null, + withSticker ? 'module-expire-timer--with-sticker' : null )} /> ); diff --git a/ts/components/conversation/Image.md b/ts/components/conversation/Image.md index 9e3c39a7d..3dfa78032 100644 --- a/ts/components/conversation/Image.md +++ b/ts/components/conversation/Image.md @@ -418,3 +418,51 @@
``` + +### No border, no background + +```jsx + +
+
+ console.log('onClick')} + onClickClose={attachment => console.log('onClickClose', attachment)} + url={util.squareStickerObjectUrl} + i18n={util.i18n} + /> +
+
+ console.log('onClick')} + onClickClose={attachment => console.log('onClickClose', attachment)} + url={util.squareStickerObjectUrl} + i18n={util.i18n} + /> +
+
+ console.log('onClick')} + onClickClose={attachment => console.log('onClickClose', attachment)} + url={util.squareStickerObjectUrl} + i18n={util.i18n} + /> +
+
+ +``` diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx index d94d682fc..376170213 100644 --- a/ts/components/conversation/Image.tsx +++ b/ts/components/conversation/Image.tsx @@ -15,6 +15,8 @@ interface Props { overlayText?: string; + noBorder?: boolean; + noBackground?: boolean; bottomOverlay?: boolean; closeButton?: boolean; curveBottomLeft?: boolean; @@ -49,6 +51,8 @@ export class Image extends React.Component { darkOverlay, height, i18n, + noBackground, + noBorder, onClick, onClickClose, onError, @@ -74,6 +78,7 @@ export class Image extends React.Component { }} className={classNames( 'module-image', + !noBackground ? 'module-image--with-background' : null, canClick ? 'module-image__with-click-handler' : null, curveBottomLeft ? 'module-image--curved-bottom-left' : null, curveBottomRight ? 'module-image--curved-bottom-right' : null, @@ -113,18 +118,20 @@ export class Image extends React.Component { alt={i18n('imageCaptionIconAlt')} /> ) : null} -
+ {!noBorder ? ( +
+ ) : null} {closeButton ? (
; ``` + +### Sticker + +``` +const attachments = [ + { + url: util.squareStickerObjectUrl, + contentType: 'image/webp', + width: 512, + height: 512, + }, +]; + +
+
+ +
+
+
+ +
+
; +``` diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx index 41ad9e62e..617dde074 100644 --- a/ts/components/conversation/ImageGrid.tsx +++ b/ts/components/conversation/ImageGrid.tsx @@ -20,6 +20,8 @@ interface Props { withContentAbove?: boolean; withContentBelow?: boolean; bottomOverlay?: boolean; + isSticker?: boolean; + stickerSize?: number; i18n: LocalizerType; @@ -34,6 +36,8 @@ export class ImageGrid extends React.Component { attachments, bottomOverlay, i18n, + isSticker, + stickerSize, onError, onClick, withContentAbove, @@ -56,25 +60,31 @@ export class ImageGrid extends React.Component { if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) { const { height, width } = getImageDimensions(attachments[0]); + const finalHeight = isSticker ? stickerSize : height; + const finalWidth = isSticker ? stickerSize : width; + return (
{getAlt(attachments[0], { i18n={i18n} attachment={attachments[0]} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveTopLeft={curveTopLeft} curveBottomLeft={curveBottomLeft} playIconOverlay={isVideoAttachment(attachments[0])} @@ -104,6 +115,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[1], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveTopRight={curveTopRight} curveBottomRight={curveBottomRight} playIconOverlay={isVideoAttachment(attachments[1])} @@ -125,6 +137,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[0], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveTopLeft={curveTopLeft} curveBottomLeft={curveBottomLeft} attachment={attachments[0]} @@ -152,6 +165,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[2], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveBottomRight={curveBottomRight} height={99} width={99} @@ -201,6 +215,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[2], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveBottomLeft={curveBottomLeft} playIconOverlay={isVideoAttachment(attachments[2])} height={149} @@ -214,6 +229,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[3], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveBottomRight={curveBottomRight} playIconOverlay={isVideoAttachment(attachments[3])} height={149} @@ -268,6 +284,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[2], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveBottomLeft={curveBottomLeft} playIconOverlay={isVideoAttachment(attachments[2])} height={99} @@ -281,6 +298,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[3], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} playIconOverlay={isVideoAttachment(attachments[3])} height={99} width={98} @@ -293,6 +311,7 @@ export class ImageGrid extends React.Component { alt={getAlt(attachments[4], i18n)} i18n={i18n} bottomOverlay={withBottomOverlay} + noBorder={isSticker} curveBottomRight={curveBottomRight} playIconOverlay={isVideoAttachment(attachments[4])} height={99} diff --git a/ts/components/conversation/Message.md b/ts/components/conversation/Message.md index aacf7c89c..578baa092 100644 --- a/ts/components/conversation/Message.md +++ b/ts/components/conversation/Message.md @@ -569,7 +569,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} /> @@ -590,7 +590,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} /> @@ -611,7 +611,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} /> @@ -632,7 +632,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} onDownload={() => console.log('onDownload')} onReply={() => console.log('onReply')} /> @@ -662,7 +662,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -682,7 +682,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -699,7 +699,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -717,7 +717,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -735,7 +735,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -754,7 +754,306 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} + /> +
    • + +``` + +#### Sticker + +Stickers have no background, but they have all the standard message bubble features. + +```jsx + +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +     +``` + +#### Sticker with collapsed metadata + +First set is in a 1:1 conversation, second set is in a group. + +```jsx + +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +     +``` + +#### Sticker with pending image + +A sticker with no attachments (what our selectors produce for a pending sticker) is not displayed at all. + +```jsx + +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} + /> +
    • +
  • + console.log('showVisualAttachment')} />
    • @@ -784,7 +1083,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -813,7 +1112,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -848,7 +1147,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -889,7 +1188,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -936,7 +1235,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -967,7 +1266,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -997,7 +1296,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1033,7 +1332,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1075,7 +1374,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1123,7 +1422,7 @@ First, showing the metadata overlay on dark and light images, then a message wit height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1150,7 +1449,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1168,7 +1467,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1186,7 +1485,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1204,7 +1503,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1229,7 +1528,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1248,7 +1547,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1278,7 +1577,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1309,7 +1608,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1333,7 +1632,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1351,7 +1650,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1369,7 +1668,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1387,7 +1686,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1412,7 +1711,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1431,7 +1730,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1450,7 +1749,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1470,7 +1769,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1488,7 +1787,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} expirationLength={5 * 60 * 1000} expirationTimestamp={Date.now() + 5 * 60 * 1000} /> @@ -1509,7 +1808,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} expirationLength={5 * 60 * 1000} expirationTimestamp={Date.now() + 5 * 60 * 1000} /> @@ -1535,7 +1834,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1553,7 +1852,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1571,7 +1870,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1589,7 +1888,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1614,7 +1913,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1633,7 +1932,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1652,7 +1951,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1671,7 +1970,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 50, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1698,7 +1997,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1719,7 +2018,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1742,7 +2041,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1765,7 +2064,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1794,7 +2093,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1816,7 +2115,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1839,7 +2138,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1862,7 +2161,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -1889,7 +2188,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1909,7 +2208,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1930,7 +2229,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1951,7 +2250,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1973,7 +2272,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -1995,7 +2294,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2018,7 +2317,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2041,7 +2340,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2068,7 +2367,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2089,7 +2388,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2111,7 +2410,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2133,7 +2432,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co height: 240, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2160,7 +2459,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2180,7 +2479,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2202,7 +2501,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2224,7 +2523,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2249,7 +2548,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2268,7 +2567,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2291,7 +2590,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2311,7 +2610,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2334,7 +2633,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2351,7 +2650,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2368,7 +2667,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2385,7 +2684,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2407,7 +2706,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2423,7 +2722,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2439,7 +2738,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2455,7 +2754,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2484,7 +2783,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2503,7 +2802,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2522,7 +2821,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2541,7 +2840,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2561,7 +2860,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2580,7 +2879,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2622,7 +2921,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2640,7 +2939,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2658,7 +2957,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2676,7 +2975,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2701,7 +3000,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2720,7 +3019,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2737,7 +3036,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • @@ -2754,7 +3053,7 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
    • @@ -2778,8 +3077,8 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={isDangerous => - console.log('onClickAttachment - isDangerous:', isDangerous) + showVisualAttachment={isDangerous => + console.log('showVisualAttachment - isDangerous:', isDangerous) } /> @@ -2798,8 +3097,8 @@ Voice notes are not shown any differently from audio attachments. fileSize: '3.05 KB', }, ]} - onClickAttachment={isDangerous => - console.log('onClickAttachment - isDangerous:', isDangerous) + showVisualAttachment={isDangerous => + console.log('showVisualAttachment - isDangerous:', isDangerous) } /> @@ -2915,6 +3214,62 @@ Voice notes are not shown any differently from audio attachments. ``` +#### Link previews, stickers url + +Sticker link previews are forced to use the small link preview form, no matter the image size. + +```jsx + +
  • + console.log('onClickLinkPreview', url)} + /> +
    • +
  • + console.log('onClickLinkPreview', url)} + /> +
    • +     +``` + #### Link previews, small image ```jsx @@ -3228,6 +3583,19 @@ Note that the author avatar goes away if `collapseMetadata` is set. authorAvatarPath={util.gifObjectUrl} /> +
  • + +
  • console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} authorAvatarPath={util.gifObjectUrl} />
    • @@ -3309,7 +3677,7 @@ Note that the author avatar goes away if `collapseMetadata` is set. height: 1200, }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} authorAvatarPath={util.gifObjectUrl} /> @@ -3327,7 +3695,7 @@ Note that the author avatar goes away if `collapseMetadata` is set. contentType: 'audio/mp3', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} authorAvatarPath={util.gifObjectUrl} /> @@ -3348,7 +3716,7 @@ Note that the author avatar goes away if `collapseMetadata` is set. fileSize: '3.05 KB', }, ]} - onClickAttachment={() => console.log('onClickAttachment')} + showVisualAttachment={() => console.log('showVisualAttachment')} />
  • diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 62314d963..e140c8470 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -39,11 +39,13 @@ interface Trigger { // Same as MIN_WIDTH in ImageGrid.tsx const MINIMUM_LINK_PREVIEW_IMAGE_WIDTH = 200; +const STICKER_SIZE = 128; interface LinkPreviewType { title: string; domain: string; url: string; + isStickerPack: boolean; image?: AttachmentType; } @@ -51,6 +53,7 @@ export type PropsData = { id: string; text?: string; textPending?: boolean; + isSticker: boolean; direction: 'incoming' | 'outgoing'; timestamp: number; status?: 'sending' | 'sent' | 'delivered' | 'read' | 'error'; @@ -223,6 +226,7 @@ export class Message extends React.PureComponent { expirationLength, expirationTimestamp, i18n, + isSticker, status, text, textPending, @@ -234,8 +238,9 @@ export class Message extends React.PureComponent { } const isShowingImage = this.isShowingImage(); - const withImageNoCaption = Boolean(!text && isShowingImage); + const withImageNoCaption = Boolean(!isSticker && !text && isShowingImage); const showError = status === 'error' && direction === 'outgoing'; + const metadataDirection = isSticker ? undefined : direction; return (
    { { i18n={i18n} timestamp={timestamp} extended={true} - direction={direction} + direction={metadataDirection} withImageNoCaption={withImageNoCaption} + withSticker={isSticker} module="module-message__metadata__date" /> )} {expirationLength && expirationTimestamp ? ( ) : null} @@ -287,6 +297,9 @@ export class Message extends React.PureComponent { className={classNames( 'module-message__metadata__status-icon', `module-message__metadata__status-icon--${status}`, + isSticker + ? 'module-message__metadata__status-icon--with-sticker' + : null, withImageNoCaption ? 'module-message__metadata__status-icon--with-image-no-caption' : null @@ -302,24 +315,33 @@ export class Message extends React.PureComponent { authorName, authorPhoneNumber, authorProfileName, + collapseMetadata, conversationType, direction, i18n, + isSticker, } = this.props; + if (collapseMetadata) { + return; + } + const title = authorName ? authorName : authorPhoneNumber; if (direction !== 'incoming' || conversationType !== 'group' || !title) { return null; } + const suffix = isSticker ? '_with_sticker' : ''; + const moduleName = `module-message__author${suffix}`; + return ( -
    +
    @@ -329,15 +351,16 @@ export class Message extends React.PureComponent { // tslint:disable-next-line max-func-body-length cyclomatic-complexity public renderAttachment() { const { - id, attachments, - text, collapseMetadata, conversationType, direction, i18n, + id, quote, showVisualAttachment, + isSticker, + text, } = this.props; const { imageBroken } = this.state; @@ -359,23 +382,31 @@ export class Message extends React.PureComponent { ((isImage(attachments) && hasImage(attachments)) || (isVideo(attachments) && hasVideoScreenshot(attachments))) ) { + const prefix = isSticker ? 'sticker' : 'attachment'; + const bottomOverlay = !isSticker && !collapseMetadata; + return (
    { @@ -494,7 +525,10 @@ export class Message extends React.PureComponent { const previewHasImage = first.image && isImageAttachment(first.image); const width = first.image && first.image.width; - const isFullSizeImage = width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH; + const isFullSizeImage = + !first.isStickerPack && + width && + width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH; return (
    { disableMenu, downloadAttachment, id, + isSticker, replyToMessage, timestamp, } = this.props; @@ -783,7 +818,10 @@ export class Message extends React.PureComponent { const firstAttachment = attachments && attachments[0]; const downloadButton = - !multipleAttachments && firstAttachment && !firstAttachment.pending ? ( + !isSticker && + !multipleAttachments && + firstAttachment && + !firstAttachment.pending ? (
    { downloadAttachment({ @@ -850,6 +888,7 @@ export class Message extends React.PureComponent { downloadAttachment, i18n, id, + isSticker, deleteMessage, showMessageDetail, replyToMessage, @@ -866,7 +905,7 @@ export class Message extends React.PureComponent { const menu = ( - {!multipleAttachments && attachments && attachments[0] ? ( + {!isSticker && !multipleAttachments && attachments && attachments[0] ? ( { } public getWidth(): number | undefined { - const { attachments, previews } = this.props; + const { attachments, isSticker, previews } = this.props; if (attachments && attachments.length) { + if (isSticker) { + // Padding is 8px, on both sides + return STICKER_SIZE + 8 * 2; + } + const dimensions = getGridDimensions(attachments); if (dimensions) { return dimensions.width; @@ -949,6 +993,7 @@ export class Message extends React.PureComponent { const { width } = first.image; if ( + !first.isStickerPack && isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH @@ -999,11 +1044,13 @@ export class Message extends React.PureComponent { const { authorPhoneNumber, authorColor, + attachments, direction, id, + isSticker, timestamp, } = this.props; - const { expired, expiring } = this.state; + const { expired, expiring, imageBroken } = this.state; // This id is what connects our triple-dot click with our associated pop-up menu. // It needs to be unique. @@ -1013,6 +1060,10 @@ export class Message extends React.PureComponent { return null; } + if (isSticker && (imageBroken || !attachments || !attachments.length)) { + return null; + } + const width = this.getWidth(); const isShowingImage = this.isShowingImage(); @@ -1029,8 +1080,9 @@ export class Message extends React.PureComponent {
    { module, timestamp, withImageNoCaption, + withSticker, extended, } = this.props; const moduleName = module || 'module-timestamp'; @@ -61,7 +63,8 @@ export class Timestamp extends React.Component { className={classNames( moduleName, direction ? `${moduleName}--${direction}` : null, - withImageNoCaption ? `${moduleName}--with-image-no-caption` : null + withImageNoCaption ? `${moduleName}--with-image-no-caption` : null, + withSticker ? `${moduleName}--with-sticker` : null )} title={moment(timestamp).format('llll')} > diff --git a/ts/components/stickers/StickerButton.md b/ts/components/stickers/StickerButton.md new file mode 100644 index 000000000..cf5b1badc --- /dev/null +++ b/ts/components/stickers/StickerButton.md @@ -0,0 +1,271 @@ +#### Default + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + cover: sticker1, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'bar', + cover: sticker2, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'baz', + cover: sticker3, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + + +
    + + console.log('onPickSticker', { packId, stickerId }) + } + clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')} + onClickAddPack={() => console.log('onClickAddPack')} + recentStickers={[abeSticker, sticker1, sticker2, sticker3]} + /> +
    +    ; +``` + +#### No Installed Packs + +When there are no installed packs the button should call the `onClickAddPack` +callback. + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + cover: sticker1, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'bar', + cover: sticker2, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'baz', + cover: sticker3, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + + +
    + + console.log('onPickSticker', { packId, stickerId }) + } + clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')} + onClickAddPack={() => console.log('onClickAddPack')} + recentStickers={[abeSticker, sticker1, sticker2, sticker3]} + /> +
    +    ; +``` + +#### No Advertised Packs and No Installed Packs + +When there are no advertised packs and no installed packs the button should not render anything. + +```jsx + + + console.log('onPickSticker', { packId, stickerId }) + } + clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')} + onClickAddPack={() => console.log('onClickAddPack')} + recentStickers={[]} + /> + +``` + +#### Installed Pack Tooltip + +When a pack is installed there should be a tooltip saying as such. + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + title: 'Abe', + cover: abeSticker, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...abeSticker, id })), + }, + { + id: 'bar', + cover: sticker1, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'baz', + cover: sticker2, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'qux', + cover: sticker3, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + + +
    + + console.log('onPickSticker', { packId, stickerId }) + } + clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')} + onClickAddPack={() => console.log('onClickAddPack')} + recentStickers={[]} + /> +
    +    ; +``` + +#### New Installation Splash Tooltip + +When the application is updated or freshly installed there should be a tooltip +showing the user the sticker button. + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + title: 'Abe', + cover: abeSticker, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...abeSticker, id })), + }, + { + id: 'bar', + cover: sticker1, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'baz', + cover: sticker2, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'qux', + cover: sticker3, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + + +
    + + console.log('onPickSticker', { packId, stickerId }) + } + clearInstalledStickerPack={() => console.log('clearInstalledStickerPack')} + onClickAddPack={() => console.log('onClickAddPack')} + recentStickers={[]} + showIntroduction + clearShowIntroduction={() => console.log('clearShowIntroduction')} + /> +
    +    ; +``` diff --git a/ts/components/stickers/StickerButton.tsx b/ts/components/stickers/StickerButton.tsx new file mode 100644 index 000000000..89aaf9936 --- /dev/null +++ b/ts/components/stickers/StickerButton.tsx @@ -0,0 +1,255 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { noop } from 'lodash'; +import { Manager, Popper, Reference } from 'react-popper'; +import { createPortal } from 'react-dom'; +import { StickerPicker } from './StickerPicker'; +import { StickerPackType, StickerType } from '../../state/ducks/stickers'; +import { LocalizerType } from '../../types/Util'; + +export type OwnProps = { + readonly i18n: LocalizerType; + readonly receivedPacks: ReadonlyArray; + readonly installedPacks: ReadonlyArray; + readonly installedPack?: StickerPackType | null; + readonly recentStickers: ReadonlyArray; + readonly clearInstalledStickerPack: () => unknown; + readonly onClickAddPack: () => unknown; + readonly onPickSticker: (packId: string, stickerId: number) => unknown; + readonly showIntroduction?: boolean; + readonly clearShowIntroduction: () => unknown; + readonly showPickerHint: boolean; + readonly clearShowPickerHint: () => unknown; +}; + +export type Props = OwnProps; + +export const StickerButton = React.memo( + // tslint:disable-next-line max-func-body-length + ({ + i18n, + clearInstalledStickerPack, + onClickAddPack, + onPickSticker, + recentStickers, + receivedPacks, + installedPack, + installedPacks, + showIntroduction, + clearShowIntroduction, + showPickerHint, + clearShowPickerHint, + }: Props) => { + const [open, setOpen] = React.useState(false); + const [popperRoot, setPopperRoot] = React.useState( + null + ); + + const handleClickButton = React.useCallback( + () => { + // Clear tooltip state + clearInstalledStickerPack(); + + // Handle button click + if (installedPacks.length === 0) { + onClickAddPack(); + } else if (popperRoot) { + setOpen(false); + } else { + setOpen(true); + } + }, + [ + clearInstalledStickerPack, + onClickAddPack, + installedPacks, + popperRoot, + setOpen, + ] + ); + + const handlePickSticker = React.useCallback( + (packId: string, stickerId: number) => { + setOpen(false); + onPickSticker(packId, stickerId); + }, + [setOpen, onPickSticker] + ); + + const handleClickAddPack = React.useCallback( + () => { + setOpen(false); + if (showPickerHint) { + clearShowPickerHint(); + } + onClickAddPack(); + }, + [onClickAddPack, showPickerHint, clearShowPickerHint] + ); + + const handleClearIntroduction = React.useCallback( + () => { + clearInstalledStickerPack(); + clearShowIntroduction(); + }, + [clearInstalledStickerPack, clearShowIntroduction] + ); + + // Create popper root and handle outside clicks + React.useEffect( + () => { + if (open) { + const root = document.createElement('div'); + setPopperRoot(root); + document.body.appendChild(root); + const handleOutsideClick = ({ target }: MouseEvent) => { + if (!root.contains(target as Node)) { + setOpen(false); + } + }; + document.addEventListener('click', handleOutsideClick); + + return () => { + document.body.removeChild(root); + document.removeEventListener('click', handleOutsideClick); + setPopperRoot(null); + }; + } + + return noop; + }, + [open, setOpen, setPopperRoot] + ); + + // Clear the installed pack after one minute + React.useEffect( + () => { + if (installedPack) { + // tslint:disable-next-line:no-string-based-set-timeout + const timerId = setTimeout(clearInstalledStickerPack, 60 * 1000); + + return () => { + clearTimeout(timerId); + }; + } + + return noop; + }, + [installedPack, clearInstalledStickerPack] + ); + + if (installedPacks.length + receivedPacks.length === 0) { + return null; + } + + return ( + + + {({ ref }) => ( +
    +
    +
    + )} + + ) : null} + {open && popperRoot + ? createPortal( + + {({ ref, style }) => ( + + )} + , + popperRoot + ) + : null} + + ); + } +); diff --git a/ts/components/stickers/StickerManager.md b/ts/components/stickers/StickerManager.md new file mode 100644 index 000000000..719f0dca4 --- /dev/null +++ b/ts/components/stickers/StickerManager.md @@ -0,0 +1,178 @@ +#### Default + +```jsx +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + cover: sticker1, + title: 'Foo', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'bar', + cover: sticker2, + title: 'Baz', + author: 'Foo McBarrington (Official)', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'baz', + cover: sticker3, + title: 'Third', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + +const receivedPacks = packs.map(p => ({ ...p, status: 'advertised' })); +const installedPacks = packs.map(p => ({ ...p, status: 'installed' })); +const blessedPacks = packs.map(p => ({ + ...p, + status: 'advertised', + isBlessed: true, +})); + + + console.log('installStickerPack', id)} + uninstallStickerPack={id => console.log('uninstallStickerPack', id)} + /> +; +``` + +#### No Advertised Packs + +```jsx +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + cover: sticker1, + title: 'Foo', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'bar', + cover: sticker2, + title: 'Baz', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'baz', + cover: sticker3, + title: 'Baz', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + +const installedPacks = packs.map(p => ({ ...p, status: 'installed' })); +const noPacks = []; + + + console.log('installStickerPack', id)} + uninstallStickerPack={id => console.log('uninstallStickerPack', id)} + /> +; +``` + +#### No Installed Packs + +```jsx +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + cover: sticker1, + title: 'Foo', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'bar', + cover: sticker2, + title: 'Baz', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'baz', + cover: sticker3, + title: 'Baz', + author: 'Foo McBarrington', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + +const receivedPacks = packs.map(p => ({ ...p, status: 'installed' })); +const noPacks = []; + + + console.log('installStickerPack', id)} + /> +; +``` + +#### No Packs at All + +```jsx +const noPacks = []; + + +
    + console.log('installStickerPack', id)} + uninstallStickerPack={id => console.log('uninstallStickerPack', id)} + /> +
    +    ; +``` diff --git a/ts/components/stickers/StickerManager.tsx b/ts/components/stickers/StickerManager.tsx new file mode 100644 index 000000000..8450a9533 --- /dev/null +++ b/ts/components/stickers/StickerManager.tsx @@ -0,0 +1,107 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { StickerManagerPackRow } from './StickerManagerPackRow'; +import { StickerPreviewModal } from './StickerPreviewModal'; +import { LocalizerType } from '../../types/Util'; +import { StickerPackType } from '../../state/ducks/stickers'; + +export type OwnProps = { + readonly installedPacks: ReadonlyArray; + readonly receivedPacks: ReadonlyArray; + readonly blessedPacks: ReadonlyArray; + readonly installStickerPack: (packId: string, packKey: string) => unknown; + readonly uninstallStickerPack: (packId: string, packKey: string) => unknown; + readonly i18n: LocalizerType; +}; + +export type Props = OwnProps; + +export const StickerManager = React.memo( + ({ + installedPacks, + receivedPacks, + blessedPacks, + installStickerPack, + uninstallStickerPack, + i18n, + }: Props) => { + const [ + packToPreview, + setPackToPreview, + ] = React.useState(null); + + const clearPackToPreview = React.useCallback( + () => { + setPackToPreview(null); + }, + [setPackToPreview] + ); + + const previewPack = React.useCallback( + (pack: StickerPackType) => { + setPackToPreview(pack); + }, + [clearPackToPreview] + ); + + return ( + <> + {packToPreview ? ( + + ) : null} +
    + {[ + { + i18nKey: 'stickers--StickerManager--InstalledPacks', + i18nEmptyKey: 'stickers--StickerManager--InstalledPacks--Empty', + packs: installedPacks, + }, + { + i18nKey: 'stickers--StickerManager--BlessedPacks', + i18nEmptyKey: 'stickers--StickerManager--BlessedPacks--Empty', + packs: blessedPacks, + }, + { + i18nKey: 'stickers--StickerManager--ReceivedPacks', + i18nEmptyKey: 'stickers--StickerManager--ReceivedPacks--Empty', + packs: receivedPacks, + }, + ].map(section => ( + +

    + {i18n(section.i18nKey)} +

    + {section.packs.length > 0 ? ( + section.packs.map(pack => ( + + )) + ) : ( +
    + {i18n(section.i18nEmptyKey)} +
    + )} +     + ))} +
    + + ); + } +); diff --git a/ts/components/stickers/StickerManagerPackRow.tsx b/ts/components/stickers/StickerManagerPackRow.tsx new file mode 100644 index 000000000..536d6cfda --- /dev/null +++ b/ts/components/stickers/StickerManagerPackRow.tsx @@ -0,0 +1,129 @@ +import * as React from 'react'; +import { StickerPackInstallButton } from './StickerPackInstallButton'; +import { ConfirmationModal } from '../ConfirmationModal'; +import { LocalizerType } from '../../types/Util'; +import { StickerPackType } from '../../state/ducks/stickers'; + +export type OwnProps = { + readonly i18n: LocalizerType; + readonly pack: StickerPackType; + readonly onClickPreview?: (sticker: StickerPackType) => unknown; + readonly installStickerPack?: (packId: string, packKey: string) => unknown; + readonly uninstallStickerPack?: (packId: string, packKey: string) => unknown; +}; + +export type Props = OwnProps; + +export const StickerManagerPackRow = React.memo( + // tslint:disable-next-line max-func-body-length + ({ + installStickerPack, + uninstallStickerPack, + onClickPreview, + pack, + i18n, + }: Props) => { + const { id, key, isBlessed } = pack; + const [uninstalling, setUninstalling] = React.useState(false); + + const clearUninstalling = React.useCallback( + () => { + setUninstalling(false); + }, + [setUninstalling] + ); + + const handleInstall = React.useCallback( + (e: React.MouseEvent) => { + e.stopPropagation(); + if (installStickerPack) { + installStickerPack(id, key); + } + }, + [installStickerPack, pack] + ); + + const handleUninstall = React.useCallback( + (e: React.MouseEvent) => { + e.stopPropagation(); + if (isBlessed && uninstallStickerPack) { + uninstallStickerPack(id, key); + } else { + setUninstalling(true); + } + }, + [setUninstalling, id, key, isBlessed] + ); + + const handleConfirmUninstall = React.useCallback( + () => { + clearUninstalling(); + if (uninstallStickerPack) { + uninstallStickerPack(id, key); + } + }, + [id, key, clearUninstalling] + ); + + const handleClickPreview = React.useCallback( + () => { + if (onClickPreview) { + onClickPreview(pack); + } + }, + [onClickPreview, pack] + ); + + return ( + <> + {uninstalling ? ( + + {i18n('stickers--StickerManager--UninstallWarning')} + + ) : null} +
    + {pack.title} +
    +
    + {pack.title} + {pack.isBlessed ? ( + + ) : null} +
    +
    + {pack.author} +
    +
    +
    + {pack.status === 'advertised' ? ( + + ) : ( + + )} +
    +
    + + ); + } +); diff --git a/ts/components/stickers/StickerPackInstallButton.tsx b/ts/components/stickers/StickerPackInstallButton.tsx new file mode 100644 index 000000000..ea19b030d --- /dev/null +++ b/ts/components/stickers/StickerPackInstallButton.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import classNames from 'classnames'; +import { LocalizerType } from '../../types/Util'; + +export type OwnProps = { + readonly installed: boolean; + readonly i18n: LocalizerType; + readonly blue?: boolean; +}; + +export type Props = OwnProps & React.HTMLProps; + +export const StickerPackInstallButton = React.forwardRef< + HTMLButtonElement, + Props +>(({ i18n, installed, blue, ...props }: Props, ref) => ( + +)); diff --git a/ts/components/stickers/StickerPicker.md b/ts/components/stickers/StickerPicker.md new file mode 100644 index 000000000..bd93ecb8d --- /dev/null +++ b/ts/components/stickers/StickerPicker.md @@ -0,0 +1,321 @@ +#### Default + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + cover: sticker1, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'bar', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'baz', + cover: sticker3, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, + { + id: 'qux', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'quux', + cover: sticker3, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'corge', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'grault', + cover: sticker1, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'garply', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'waldo', + cover: sticker3, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, + { + id: 'fred', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'plugh', + cover: sticker1, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'xyzzy', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'thud', + cover: abeSticker, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...abeSticker, id })), + }, + { + id: 'banana', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'apple', + cover: sticker1, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'strawberry', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'tombrady', + cover: abeSticker, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...abeSticker, id })), + }, +]; + + + console.log('onClickAddPack')} + onPickSticker={(packId, stickerId) => + console.log('onPickSticker', { packId, stickerId }) + } + /> +; +``` + +#### No Recently Used Stickers + +The sticker picker defaults to the first pack when there are no recent stickers. + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const sticker1 = { id: 1, url: util.kitten164ObjectUrl, packId: 'foo' }; +const sticker2 = { id: 2, url: util.kitten264ObjectUrl, packId: 'bar' }; +const sticker3 = { id: 3, url: util.kitten364ObjectUrl, packId: 'baz' }; + +const packs = [ + { + id: 'foo', + cover: sticker1, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker1, id })), + }, + { + id: 'bar', + cover: sticker2, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker2, id })), + }, + { + id: 'baz', + cover: sticker3, + stickerCount: 101, + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...sticker3, id })), + }, +]; + + + console.log('onClickAddPack')} + onPickSticker={(packId, stickerId) => + console.log('onPickSticker', { packId, stickerId }) + } + /> +; +``` + +#### Empty + +```jsx + + console.log('onClickAddPack')} + onPickSticker={(packId, stickerId) => + console.log('onPickSticker', { packId, stickerId }) + } + /> + +``` + +#### Pending Download + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const packs = [ + { + id: 'tombrady', + status: 'pending', + cover: abeSticker, + stickerCount: 30, + stickers: [abeSticker], + }, +]; + + + console.log('onClickAddPack')} + onPickSticker={(packId, stickerId) => + console.log('onPickSticker', { packId, stickerId }) + } + /> +; +``` + +#### Picker Hint + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const packs = [ + { + id: 'tombrady', + cover: abeSticker, + stickerCount: 100, + stickers: Array(100) + .fill(0) + .map((_el, i) => ({ ...abeSticker, id: i })), + }, +]; + + + console.log('onClickAddPack')} + onPickSticker={(packId, stickerId) => + console.log('onPickSticker', { packId, stickerId }) + } + showPickerHint={true} + /> +; +``` + +#### Pack With Error + +```jsx +const abeSticker = { id: 4, url: util.squareStickerObjectUrl, packId: 'abe' }; +const packs = [ + { + id: 'tombrady', + status: 'error', + cover: abeSticker, + stickerCount: 3, + stickers: [], + }, + { + id: 'foo', + status: 'error', + cover: abeSticker, + stickerCount: 3, + stickers: [abeSticker], + }, +]; + + + console.log('onClickAddPack')} + onPickSticker={(packId, stickerId) => + console.log('onPickSticker', { packId, stickerId }) + } + /> +; +``` diff --git a/ts/components/stickers/StickerPicker.tsx b/ts/components/stickers/StickerPicker.tsx new file mode 100644 index 000000000..abc92860d --- /dev/null +++ b/ts/components/stickers/StickerPicker.tsx @@ -0,0 +1,282 @@ +/* tslint:disable:max-func-body-length */ +/* tslint:disable:cyclomatic-complexity */ +import * as React from 'react'; +import classNames from 'classnames'; +import { StickerPackType, StickerType } from '../../state/ducks/stickers'; +import { LocalizerType } from '../../types/Util'; + +export type OwnProps = { + readonly i18n: LocalizerType; + readonly onClickAddPack: () => unknown; + readonly onPickSticker: (packId: string, stickerId: number) => unknown; + readonly packs: ReadonlyArray; + readonly recentStickers: ReadonlyArray; + readonly showPickerHint?: boolean; +}; + +export type Props = OwnProps & Pick, 'style'>; + +function useTabs(tabs: ReadonlyArray, initialTab = tabs[0]) { + const [tab, setTab] = React.useState(initialTab); + const handlers = React.useMemo( + () => + tabs.map(t => () => { + setTab(t); + }), + tabs + ); + + return [tab, handlers] as [T, ReadonlyArray<() => void>]; +} + +const PACKS_PAGE_SIZE = 7; +const PACK_ICON_WIDTH = 32; +const PACK_PAGE_WIDTH = PACKS_PAGE_SIZE * PACK_ICON_WIDTH; + +function getPacksPageOffset(page: number, packs: number): number { + if (page === 0) { + return 0; + } + + if (isLastPacksPage(page, packs)) { + return ( + PACK_PAGE_WIDTH * (Math.floor(packs / PACKS_PAGE_SIZE) - 1) + + (packs % PACKS_PAGE_SIZE - 1) * PACK_ICON_WIDTH + ); + } + + return page * PACK_ICON_WIDTH * PACKS_PAGE_SIZE; +} + +function isLastPacksPage(page: number, packs: number): boolean { + return page === Math.floor(packs / PACKS_PAGE_SIZE); +} + +export const StickerPicker = React.memo( + React.forwardRef( + ( + { + i18n, + packs, + recentStickers, + onClickAddPack, + onPickSticker, + showPickerHint, + style, + }: Props, + ref + ) => { + const tabIds = React.useMemo( + () => ['recents', ...packs.map(({ id }) => id)], + packs + ); + const [currentTab, [recentsHandler, ...packsHandlers]] = useTabs( + tabIds, + // If there are no recent stickers, default to the first sticker pack, unless there are no sticker packs. + tabIds[recentStickers.length > 0 ? 0 : Math.min(1, tabIds.length)] + ); + const selectedPack = packs.find(({ id }) => id === currentTab); + const { + stickers = recentStickers, + title: packTitle = 'Recent Stickers', + } = + selectedPack || {}; + + const [packsPage, setPacksPage] = React.useState(0); + const onClickPrevPackPage = React.useCallback( + () => { + setPacksPage(i => i - 1); + }, + [setPacksPage] + ); + const onClickNextPackPage = React.useCallback( + () => { + setPacksPage(i => i + 1); + }, + [setPacksPage] + ); + + const isEmpty = stickers.length === 0; + const downloadError = + selectedPack && + selectedPack.status === 'error' && + selectedPack.stickerCount !== selectedPack.stickers.length; + const pendingCount = + selectedPack && selectedPack.status === 'pending' + ? selectedPack.stickerCount - stickers.length + : 0; + + const hasPacks = packs.length > 0; + const isRecents = hasPacks && currentTab === 'recents'; + const showPendingText = pendingCount > 0; + const showDownlaodErrorText = downloadError; + const showEmptyText = !downloadError && isEmpty; + const showText = + showPendingText || showDownlaodErrorText || showEmptyText; + const showLongText = showPickerHint; + + return ( +
    +
    +
    +
    + {hasPacks ? ( + + ))} +
    + {packsPage > 0 ? ( +
    +
    +
    + {showPickerHint ? ( +
    + {i18n('stickers--StickerPicker--Hint')} +
    + ) : null} + {!hasPacks ? ( +
    + {i18n('stickers--StickerPicker--NoPacks')} +
    + ) : null} + {pendingCount > 0 ? ( +
    + {i18n('stickers--StickerPicker--DownloadPending')} +
    + ) : null} + {downloadError ? ( +
    + {stickers.length > 0 + ? i18n('stickers--StickerPicker--DownloadError') + : i18n('stickers--StickerPicker--Empty')} +
    + ) : null} + {hasPacks && showEmptyText ? ( +
    + {isRecents + ? i18n('stickers--StickerPicker--NoRecents') + : i18n('stickers--StickerPicker--Empty')} +
    + ) : null} + {!isEmpty ? ( +
    + {stickers.map(({ packId, id, url }) => ( + + ))} + {Array(pendingCount) + .fill(0) + .map((_, i) => ( +
    + ))} +
    + ) : null} +
    +
    + ); + } + ) +); diff --git a/ts/components/stickers/StickerPreviewModal.md b/ts/components/stickers/StickerPreviewModal.md new file mode 100644 index 000000000..90737b0d7 --- /dev/null +++ b/ts/components/stickers/StickerPreviewModal.md @@ -0,0 +1,29 @@ +#### Not yet installed + +```jsx +const abeSticker = { url: util.squareStickerObjectUrl, packId: 'abe' }; + +const pack = { + id: 'foo', + cover: abeSticker, + title: 'Foo', + isBlessed: true, + author: 'Foo McBarrington', + status: 'advertised', + stickers: Array(101) + .fill(0) + .map((n, id) => ({ ...abeSticker, id })), +}; + + + console.log('onClose')} + installStickerPack={(...args) => console.log('installStickerPack', ...args)} + uninstallStickerPack={(...args) => + console.log('uninstallStickerPack', ...args) + } + i18n={util.i18n} + pack={pack} + /> +; +``` diff --git a/ts/components/stickers/StickerPreviewModal.tsx b/ts/components/stickers/StickerPreviewModal.tsx new file mode 100644 index 000000000..bc51282a2 --- /dev/null +++ b/ts/components/stickers/StickerPreviewModal.tsx @@ -0,0 +1,165 @@ +import * as React from 'react'; +import { createPortal } from 'react-dom'; +import { StickerPackInstallButton } from './StickerPackInstallButton'; +import { ConfirmationDialog } from '../ConfirmationDialog'; +import { LocalizerType } from '../../types/Util'; +import { StickerPackType } from '../../state/ducks/stickers'; + +export type OwnProps = { + readonly onClose: () => unknown; + readonly installStickerPack: (packId: string, packKey: string) => unknown; + readonly uninstallStickerPack: (packId: string, packKey: string) => unknown; + readonly pack: StickerPackType; + readonly i18n: LocalizerType; +}; + +export type Props = OwnProps; + +function focusRef(el: HTMLElement | null) { + if (el) { + el.focus(); + } +} + +export const StickerPreviewModal = React.memo( + // tslint:disable-next-line max-func-body-length + ({ + onClose, + pack, + i18n, + installStickerPack, + uninstallStickerPack, + }: Props) => { + const [root, setRoot] = React.useState(null); + const [confirmingUninstall, setConfirmingUninstall] = React.useState(false); + + React.useEffect(() => { + const div = document.createElement('div'); + document.body.appendChild(div); + setRoot(div); + + return () => { + document.body.removeChild(div); + setRoot(null); + }; + }, []); + + const isInstalled = pack.status === 'installed'; + const handleToggleInstall = React.useCallback( + () => { + if (isInstalled) { + setConfirmingUninstall(true); + } else { + installStickerPack(pack.id, pack.key); + onClose(); + } + }, + [isInstalled, pack, setConfirmingUninstall, installStickerPack, onClose] + ); + + const handleUninstall = React.useCallback( + () => { + uninstallStickerPack(pack.id, pack.key); + setConfirmingUninstall(false); + // onClose is called by the confirmation modal + }, + [uninstallStickerPack, setConfirmingUninstall, pack] + ); + + React.useEffect( + () => { + const handler = ({ key }: KeyboardEvent) => { + if (key === 'Escape') { + onClose(); + } + }; + + document.addEventListener('keyup', handler); + + return () => { + document.removeEventListener('keyup', handler); + }; + }, + [onClose] + ); + + const handleClickToClose = React.useCallback( + (e: React.MouseEvent) => { + if (e.target === e.currentTarget) { + onClose(); + } + }, + [onClose] + ); + + return root + ? createPortal( +
    + {confirmingUninstall ? ( + + {i18n('stickers--StickerManager--UninstallWarning')} + + ) : ( +
    +
    +

    + {i18n('stickers--StickerPreview--Title')} +

    +
    +
    + {pack.stickers.map(({ id, url }) => ( +
    + {pack.title} +
    + ))} +
    +
    +
    +

    + {pack.title} + {pack.isBlessed ? ( + + ) : null} +

    +

    + {pack.author} +

    +
    +
    + +
    +
    +
    + )} +
    , + root + ) + : null; + } +); diff --git a/ts/shims/storage.ts b/ts/shims/storage.ts new file mode 100644 index 000000000..35c25b898 --- /dev/null +++ b/ts/shims/storage.ts @@ -0,0 +1,9 @@ +export async function put(key: string, value: any) { + // @ts-ignore + return window.storage.put(key, value); +} + +export async function remove(key: string) { + // @ts-ignore + return window.storage.remove(key); +} diff --git a/ts/shims/textsecure.ts b/ts/shims/textsecure.ts new file mode 100644 index 000000000..8ae9eac0a --- /dev/null +++ b/ts/shims/textsecure.ts @@ -0,0 +1,77 @@ +type LoggerType = (...args: Array) => void; + +type TextSecureType = { + storage: { + user: { + getNumber: () => string; + }; + }; + messaging: { + sendStickerPackSync: ( + operations: Array<{ + packId: string; + packKey: string; + installed: boolean; + }>, + options: Object + ) => Promise; + }; +}; + +type ConversationControllerType = { + prepareForSend: ( + id: string, + options: Object + ) => { + wrap: (promise: Promise) => Promise; + sendOptions: Object; + }; +}; + +interface ShimmedWindow extends Window { + log: { + error: LoggerType; + info: LoggerType; + }; + textsecure: TextSecureType; + ConversationController: ConversationControllerType; +} + +export function sendStickerPackSync( + packId: string, + packKey: string, + installed: boolean +) { + const { ConversationController, textsecure, log } = window as ShimmedWindow; + const ourNumber = textsecure.storage.user.getNumber(); + const { wrap, sendOptions } = ConversationController.prepareForSend( + ourNumber, + { syncMessage: true } + ); + + if (!textsecure.messaging) { + log.error( + 'shim: Cannot call sendStickerPackSync, textsecure.messaging is falsey' + ); + + return; + } + + wrap( + textsecure.messaging.sendStickerPackSync( + [ + { + packId, + packKey, + installed, + }, + ], + sendOptions + ) + ).catch(error => { + log.error( + 'shim: Error calling sendStickerPackSync:', + error && error.stack ? error.stack : error + ); + }); +} diff --git a/ts/state/actions.ts b/ts/state/actions.ts index ee562e3a2..39dfc2fdd 100644 --- a/ts/state/actions.ts +++ b/ts/state/actions.ts @@ -1,15 +1,13 @@ -import { bindActionCreators, Dispatch } from 'redux'; - -import { actions as search } from './ducks/search'; import { actions as conversations } from './ducks/conversations'; +import { actions as items } from './ducks/items'; +import { actions as search } from './ducks/search'; +import { actions as stickers } from './ducks/stickers'; import { actions as user } from './ducks/user'; -const actions = { - ...search, +export const mapDispatchToProps = { ...conversations, + ...items, + ...search, + ...stickers, ...user, }; - -export function mapDispatchToProps(dispatch: Dispatch): Object { - return bindActionCreators(actions, dispatch); -} diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 3c825e53e..229be1c49 100644 --- a/ts/state/ducks/conversations.ts +++ b/ts/state/ducks/conversations.ts @@ -1,3 +1,4 @@ +import { AnyAction } from 'redux'; import { omit } from 'lodash'; import { trigger } from '../../shims/events'; @@ -127,6 +128,7 @@ type ShowArchivedConversationsActionType = { }; export type ConversationActionType = + | AnyAction | ConversationAddedActionType | ConversationChangedActionType | ConversationRemovedActionType @@ -256,13 +258,9 @@ function getEmptyState(): ConversationsStateType { } export function reducer( - state: ConversationsStateType, + state: ConversationsStateType = getEmptyState(), action: ConversationActionType ): ConversationsStateType { - if (!state) { - return getEmptyState(); - } - if (action.type === 'CONVERSATION_ADDED') { const { payload } = action; const { id, data } = payload; diff --git a/ts/state/ducks/items.ts b/ts/state/ducks/items.ts new file mode 100644 index 000000000..c42f97c3d --- /dev/null +++ b/ts/state/ducks/items.ts @@ -0,0 +1,121 @@ +import { omit } from 'lodash'; +import * as storageShim from '../../shims/storage'; + +// State + +export type ItemsStateType = { + readonly [key: string]: any; +}; + +// Actions + +type ItemPutAction = { + type: 'items/PUT'; + payload: Promise; +}; + +type ItemPutExternalAction = { + type: 'items/PUT_EXTERNAL'; + payload: { + key: string; + value: any; + }; +}; + +type ItemRemoveAction = { + type: 'items/REMOVE'; + payload: Promise; +}; + +type ItemRemoveExternalAction = { + type: 'items/REMOVE_EXTERNAL'; + payload: string; +}; + +type ItemsResetAction = { + type: 'items/RESET'; +}; + +export type ItemsActionType = + | ItemPutAction + | ItemPutExternalAction + | ItemRemoveAction + | ItemRemoveExternalAction + | ItemsResetAction; + +// Action Creators + +export const actions = { + putItem, + putItemExternal, + removeItem, + removeItemExternal, + resetItems, +}; + +function putItem(key: string, value: any): ItemPutAction { + return { + type: 'items/PUT', + payload: storageShim.put(key, value), + }; +} + +function putItemExternal(key: string, value: any): ItemPutExternalAction { + return { + type: 'items/PUT_EXTERNAL', + payload: { + key, + value, + }, + }; +} + +function removeItem(key: string): ItemRemoveAction { + return { + type: 'items/REMOVE', + payload: storageShim.remove(key), + }; +} + +function removeItemExternal(key: string): ItemRemoveExternalAction { + return { + type: 'items/REMOVE_EXTERNAL', + payload: key, + }; +} + +function resetItems(): ItemsResetAction { + return { type: 'items/RESET' }; +} + +// Reducer + +function getEmptyState(): ItemsStateType { + return {}; +} + +export function reducer( + state: ItemsStateType = getEmptyState(), + action: ItemsActionType +): ItemsStateType { + if (action.type === 'items/PUT_EXTERNAL') { + const { payload } = action; + + return { + ...state, + [payload.key]: payload.value, + }; + } + + if (action.type === 'items/REMOVE_EXTERNAL') { + const { payload } = action; + + return omit(state, payload); + } + + if (action.type === 'items/RESET') { + return getEmptyState(); + } + + return state; +} diff --git a/ts/state/ducks/search.ts b/ts/state/ducks/search.ts index 51517f72a..9bd372075 100644 --- a/ts/state/ducks/search.ts +++ b/ts/state/ducks/search.ts @@ -1,3 +1,4 @@ +import { AnyAction } from 'redux'; import { omit, reject } from 'lodash'; import { normalize } from '../../types/PhoneNumber'; @@ -63,6 +64,7 @@ type ClearSearchActionType = { }; export type SEARCH_TYPES = + | AnyAction | SearchResultsFulfilledActionType | UpdateSearchTermActionType | ClearSearchActionType @@ -218,13 +220,9 @@ function getEmptyState(): SearchStateType { } export function reducer( - state: SearchStateType | undefined, + state: SearchStateType = getEmptyState(), action: SEARCH_TYPES ): SearchStateType { - if (!state) { - return getEmptyState(); - } - if (action.type === 'SEARCH_CLEAR') { return getEmptyState(); } diff --git a/ts/state/ducks/stickers.ts b/ts/state/ducks/stickers.ts new file mode 100644 index 000000000..a06602f67 --- /dev/null +++ b/ts/state/ducks/stickers.ts @@ -0,0 +1,463 @@ +import { Dictionary, omit, reject } from 'lodash'; +import { + getRecentStickers, + updateStickerLastUsed, + updateStickerPackStatus, +} from '../../../js/modules/data'; +import { maybeDeletePack } from '../../../js/modules/stickers'; +import { sendStickerPackSync } from '../../shims/textsecure'; +import { trigger } from '../../shims/events'; + +// State + +export type StickerDBType = { + readonly id: number; + readonly packId: string; + + readonly emoji: string; + readonly isCoverOnly: string; + readonly lastUsed: number; + readonly path: string; +}; + +export type StickerPackDBType = { + readonly id: string; + readonly key: string; + + readonly attemptedStatus: string; + readonly author: string; + readonly coverStickerId: number; + readonly createdAt: number; + readonly downloadAttempts: number; + readonly installedAt: number | null; + readonly lastUsed: number; + readonly status: 'advertised' | 'installed' | 'pending' | 'error'; + readonly stickerCount: number; + readonly stickers: Dictionary; + readonly title: string; +}; + +export type RecentStickerType = { + readonly stickerId: number; + readonly packId: string; +}; + +export type StickersStateType = { + readonly installedPack: string | null; + readonly packs: Dictionary; + readonly recentStickers: Array; + readonly blessedPacks: Dictionary; +}; + +// These are for the React components + +export type StickerType = { + readonly id: number; + readonly packId: string; + readonly emoji: string; + readonly url: string; +}; + +export type StickerPackType = { + readonly id: string; + readonly key: string; + readonly title: string; + readonly author: string; + readonly isBlessed: boolean; + readonly cover: StickerType; + readonly lastUsed: number; + readonly status: 'advertised' | 'installed' | 'pending' | 'error'; + readonly stickers: Array; + readonly stickerCount: number; +}; + +// Actions + +type StickerPackAddedAction = { + type: 'stickers/STICKER_PACK_ADDED'; + payload: StickerPackDBType; +}; + +type StickerAddedAction = { + type: 'stickers/STICKER_ADDED'; + payload: StickerDBType; +}; + +type InstallStickerPackPayloadType = { + packId: string; + status: 'installed'; + installedAt: number; + recentStickers: Array; +}; +type InstallStickerPackAction = { + type: 'stickers/INSTALL_STICKER_PACK'; + payload: Promise; +}; +type InstallStickerPackFulfilledAction = { + type: 'stickers/INSTALL_STICKER_PACK_FULFILLED'; + payload: InstallStickerPackPayloadType; +}; +type ClearInstalledStickerPackAction = { + type: 'stickers/CLEAR_INSTALLED_STICKER_PACK'; +}; + +type UninstallStickerPackPayloadType = { + packId: string; + status: 'advertised'; + installedAt: null; + recentStickers: Array; +}; +type UninstallStickerPackAction = { + type: 'stickers/UNINSTALL_STICKER_PACK'; + payload: Promise; +}; +type UninstallStickerPackFulfilledAction = { + type: 'stickers/UNINSTALL_STICKER_PACK_FULFILLED'; + payload: UninstallStickerPackPayloadType; +}; + +type StickerPackUpdatedAction = { + type: 'stickers/STICKER_PACK_UPDATED'; + payload: { packId: string; patch: Partial }; +}; + +type StickerPackRemovedAction = { + type: 'stickers/REMOVE_STICKER_PACK'; + payload: string; +}; + +type UseStickerPayloadType = { + packId: string; + stickerId: number; + time: number; +}; +type UseStickerAction = { + type: 'stickers/USE_STICKER'; + payload: Promise; +}; +type UseStickerFulfilledAction = { + type: 'stickers/USE_STICKER_FULFILLED'; + payload: UseStickerPayloadType; +}; + +export type StickersActionType = + | ClearInstalledStickerPackAction + | StickerAddedAction + | StickerPackAddedAction + | InstallStickerPackFulfilledAction + | UninstallStickerPackFulfilledAction + | StickerPackUpdatedAction + | StickerPackRemovedAction + | UseStickerFulfilledAction; + +// Action Creators + +export const actions = { + clearInstalledStickerPack, + removeStickerPack, + stickerAdded, + stickerPackAdded, + installStickerPack, + uninstallStickerPack, + stickerPackUpdated, + useSticker, +}; + +function removeStickerPack(id: string): StickerPackRemovedAction { + return { + type: 'stickers/REMOVE_STICKER_PACK', + payload: id, + }; +} + +function stickerAdded(payload: StickerDBType): StickerAddedAction { + return { + type: 'stickers/STICKER_ADDED', + payload, + }; +} + +function stickerPackAdded(payload: StickerPackDBType): StickerPackAddedAction { + const { status, attemptedStatus } = payload; + + // We do this to trigger a toast, which is still done via Backbone + if (status === 'error' && attemptedStatus === 'installed') { + trigger('pack-install-failed'); + } + + return { + type: 'stickers/STICKER_PACK_ADDED', + payload, + }; +} + +function installStickerPack( + packId: string, + packKey: string, + options: { fromSync: boolean } | null = null +): InstallStickerPackAction { + return { + type: 'stickers/INSTALL_STICKER_PACK', + payload: doInstallStickerPack(packId, packKey, options), + }; +} +async function doInstallStickerPack( + packId: string, + packKey: string, + options: { fromSync: boolean } | null +): Promise { + const { fromSync } = options || { fromSync: false }; + + const status = 'installed'; + const timestamp = Date.now(); + await updateStickerPackStatus(packId, status, { timestamp }); + + if (!fromSync) { + // Kick this off, but don't wait for it + sendStickerPackSync(packId, packKey, true); + } + + const recentStickers = await getRecentStickers(); + + return { + packId, + installedAt: timestamp, + status, + recentStickers: recentStickers.map(item => ({ + packId: item.packId, + stickerId: item.id, + })), + }; +} +function uninstallStickerPack( + packId: string, + packKey: string, + options: { fromSync: boolean } | null = null +): UninstallStickerPackAction { + return { + type: 'stickers/UNINSTALL_STICKER_PACK', + payload: doUninstallStickerPack(packId, packKey, options), + }; +} +async function doUninstallStickerPack( + packId: string, + packKey: string, + options: { fromSync: boolean } | null +): Promise { + const { fromSync } = options || { fromSync: false }; + + const status = 'advertised'; + await updateStickerPackStatus(packId, status); + + // If there are no more references, it should be removed + await maybeDeletePack(packId); + + if (!fromSync) { + // Kick this off, but don't wait for it + sendStickerPackSync(packId, packKey, false); + } + + const recentStickers = await getRecentStickers(); + + return { + packId, + status, + installedAt: null, + recentStickers: recentStickers.map(item => ({ + packId: item.packId, + stickerId: item.id, + })), + }; +} +function clearInstalledStickerPack(): ClearInstalledStickerPackAction { + return { type: 'stickers/CLEAR_INSTALLED_STICKER_PACK' }; +} + +function stickerPackUpdated( + packId: string, + patch: Partial +): StickerPackUpdatedAction { + return { + type: 'stickers/STICKER_PACK_UPDATED', + payload: { + packId, + patch, + }, + }; +} + +function useSticker( + packId: string, + stickerId: number, + time = Date.now() +): UseStickerAction { + return { + type: 'stickers/USE_STICKER', + payload: doUseSticker(packId, stickerId, time), + }; +} +async function doUseSticker( + packId: string, + stickerId: number, + time = Date.now() +): Promise { + await updateStickerLastUsed(packId, stickerId, time); + + return { + packId, + stickerId, + time, + }; +} + +// Reducer + +function getEmptyState(): StickersStateType { + return { + installedPack: null, + packs: {}, + recentStickers: [], + blessedPacks: {}, + }; +} + +// tslint:disable-next-line max-func-body-length +export function reducer( + state: StickersStateType = getEmptyState(), + action: StickersActionType +): StickersStateType { + if (action.type === 'stickers/STICKER_PACK_ADDED') { + const { payload } = action; + const newPack = { + stickers: {}, + ...payload, + }; + + return { + ...state, + packs: { + ...state.packs, + [payload.id]: newPack, + }, + }; + } + + if (action.type === 'stickers/STICKER_ADDED') { + const { payload } = action; + const packToUpdate = state.packs[payload.packId]; + + return { + ...state, + packs: { + ...state.packs, + [packToUpdate.id]: { + ...packToUpdate, + stickers: { + ...packToUpdate.stickers, + [payload.id]: payload, + }, + }, + }, + }; + } + + if (action.type === 'stickers/STICKER_PACK_UPDATED') { + const { payload } = action; + const packToUpdate = state.packs[payload.packId]; + + return { + ...state, + packs: { + ...state.packs, + [packToUpdate.id]: { + ...packToUpdate, + ...payload.patch, + }, + }, + }; + } + + if ( + action.type === 'stickers/INSTALL_STICKER_PACK_FULFILLED' || + action.type === 'stickers/UNINSTALL_STICKER_PACK_FULFILLED' + ) { + const { payload } = action; + const { installedAt, packId, status, recentStickers } = payload; + const { packs } = state; + const existingPack = packs[packId]; + + // A pack might be deleted as part of the uninstall process + if (!existingPack) { + return { + ...state, + installedPack: + state.installedPack === packId ? null : state.installedPack, + recentStickers, + }; + } + + return { + ...state, + installedPack: packId, + packs: { + ...packs, + [packId]: { + ...packs[packId], + status, + installedAt, + }, + }, + recentStickers, + }; + } + + if (action.type === 'stickers/CLEAR_INSTALLED_STICKER_PACK') { + return { + ...state, + installedPack: null, + }; + } + + if (action.type === 'stickers/REMOVE_STICKER_PACK') { + const { payload } = action; + + return { + ...state, + packs: omit(state.packs, payload), + }; + } + + if (action.type === 'stickers/USE_STICKER_FULFILLED') { + const { payload } = action; + const { packId, stickerId, time } = payload; + const { recentStickers, packs } = state; + + const filteredRecents = reject( + recentStickers, + item => item.packId === packId && item.stickerId === stickerId + ); + const pack = packs[packId]; + const sticker = pack.stickers[stickerId]; + + return { + ...state, + recentStickers: [payload, ...filteredRecents], + packs: { + ...state.packs, + [packId]: { + ...pack, + lastUsed: time, + stickers: { + ...pack.stickers, + [stickerId]: { + ...sticker, + lastUsed: time, + }, + }, + }, + }, + }; + } + + return state; +} diff --git a/ts/state/ducks/user.ts b/ts/state/ducks/user.ts index 4123170cd..fe8c685d3 100644 --- a/ts/state/ducks/user.ts +++ b/ts/state/ducks/user.ts @@ -1,8 +1,11 @@ +import { AnyAction } from 'redux'; import { LocalizerType } from '../../types/Util'; // State export type UserStateType = { + attachmentsPath: string; + stickersPath: string; ourNumber: string; regionCode: string; i18n: LocalizerType; @@ -18,7 +21,7 @@ type UserChangedActionType = { }; }; -export type UserActionType = UserChangedActionType; +export type UserActionType = AnyAction | UserChangedActionType; // Action Creators @@ -40,6 +43,8 @@ function userChanged(attributes: { function getEmptyState(): UserStateType { return { + attachmentsPath: 'missing', + stickersPath: 'missing', ourNumber: 'missing', regionCode: 'missing', i18n: () => 'missing', @@ -47,7 +52,7 @@ function getEmptyState(): UserStateType { } export function reducer( - state: UserStateType, + state: UserStateType = getEmptyState(), action: UserActionType ): UserStateType { if (!state) { diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index 965c27937..098b7e483 100644 --- a/ts/state/reducer.ts +++ b/ts/state/reducer.ts @@ -1,25 +1,48 @@ import { combineReducers } from 'redux'; -import { reducer as search, SearchStateType } from './ducks/search'; import { + ConversationActionType, ConversationsStateType, reducer as conversations, } from './ducks/conversations'; +import { + ItemsActionType, + ItemsStateType, + reducer as items, +} from './ducks/items'; +import { + reducer as search, + SEARCH_TYPES as SearchActionType, + SearchStateType, +} from './ducks/search'; +import { + reducer as stickers, + StickersActionType, + StickersStateType, +} from './ducks/stickers'; import { reducer as user, UserStateType } from './ducks/user'; export type StateType = { - search: SearchStateType; conversations: ConversationsStateType; + items: ItemsStateType; + search: SearchStateType; + stickers: StickersStateType; user: UserStateType; }; +export type ActionsType = + | ItemsActionType + | ConversationActionType + | StickersActionType + | SearchActionType; + export const reducers = { - search, conversations, + items, + search, + stickers, user, }; -// Making this work would require that our reducer signature supported AnyAction, not -// our restricted actions -// @ts-ignore -export const reducer = combineReducers(reducers); +// @ts-ignore: AnyAction breaks strong type checking inside reducers +export const reducer = combineReducers(reducers); diff --git a/ts/state/roots/createStickerButton.tsx b/ts/state/roots/createStickerButton.tsx new file mode 100644 index 000000000..ade6bb62e --- /dev/null +++ b/ts/state/roots/createStickerButton.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Provider } from 'react-redux'; + +import { Store } from 'redux'; + +import { SmartStickerButton } from '../smart/StickerButton'; + +// Workaround: A react component's required properties are filtering up through connect() +// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363 +const FilteredStickerButton = SmartStickerButton as any; + +export const createStickerButton = (store: Store, props: Object) => ( + + + +); diff --git a/ts/state/roots/createStickerManager.tsx b/ts/state/roots/createStickerManager.tsx new file mode 100644 index 000000000..47523e361 --- /dev/null +++ b/ts/state/roots/createStickerManager.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Provider } from 'react-redux'; + +import { Store } from 'redux'; + +import { SmartStickerManager } from '../smart/StickerManager'; + +// Workaround: A react component's required properties are filtering up through connect() +// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363 +const FilteredStickerManager = SmartStickerManager as any; + +export const createStickerManager = (store: Store) => ( + + + +); diff --git a/ts/state/roots/createStickerPreviewModal.tsx b/ts/state/roots/createStickerPreviewModal.tsx new file mode 100644 index 000000000..9ce2de21a --- /dev/null +++ b/ts/state/roots/createStickerPreviewModal.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Provider } from 'react-redux'; + +import { Store } from 'redux'; + +import { SmartStickerPreviewModal } from '../smart/StickerPreviewModal'; + +// Workaround: A react component's required properties are filtering up through connect() +// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31363 +const FilteredStickerPreviewModal = SmartStickerPreviewModal as any; + +export const createStickerPreviewModal = (store: Store, props: Object) => ( + + + +); diff --git a/ts/state/selectors/stickers.ts b/ts/state/selectors/stickers.ts new file mode 100644 index 000000000..7734832b8 --- /dev/null +++ b/ts/state/selectors/stickers.ts @@ -0,0 +1,206 @@ +import { join } from 'path'; +import { + compact, + Dictionary, + filter, + map, + orderBy, + reject, + sortBy, + values, +} from 'lodash'; +import { createSelector } from 'reselect'; + +import { StateType } from '../reducer'; +import { + RecentStickerType, + StickerDBType, + StickerPackDBType, + StickerPackType, + StickersStateType, + StickerType, +} from '../ducks/stickers'; +import { getStickersPath } from './user'; + +const getSticker = ( + packs: Dictionary, + packId: string, + stickerId: number, + stickerPath: string +): StickerType | undefined => { + const pack = packs[packId]; + if (!pack) { + return; + } + + const sticker = pack.stickers[stickerId]; + if (!sticker) { + return; + } + + return translateStickerFromDB(sticker, stickerPath); +}; + +const translateStickerFromDB = ( + sticker: StickerDBType, + stickerPath: string +): StickerType => { + const { id, packId, emoji, path } = sticker; + + return { + id, + packId, + emoji, + url: join(stickerPath, path), + }; +}; + +export const translatePackFromDB = ( + pack: StickerPackDBType, + packs: Dictionary, + blessedPacks: Dictionary, + stickersPath: string +) => { + const { id, stickers, coverStickerId } = pack; + + // Sometimes sticker packs have a cover which isn't included in their set of stickers. + // We don't want to show cover-only images when previewing or picking from a pack. + const filteredStickers = reject( + values(stickers), + sticker => sticker.isCoverOnly + ); + const translatedStickers = map(filteredStickers, sticker => + translateStickerFromDB(sticker, stickersPath) + ); + + return { + ...pack, + isBlessed: Boolean(blessedPacks[id]), + cover: getSticker(packs, id, coverStickerId, stickersPath), + stickers: sortBy(translatedStickers, sticker => sticker.id), + }; +}; + +const filterAndTransformPacks = ( + packs: Dictionary, + packFilter: (sticker: StickerPackDBType) => boolean, + packSort: (sticker: StickerPackDBType) => any, + blessedPacks: Dictionary, + stickersPath: string +): Array => { + const list = filter(packs, packFilter); + const sorted = orderBy(list, packSort, ['desc']); + + const ready = sorted.map(pack => + translatePackFromDB(pack, packs, blessedPacks, stickersPath) + ); + + // We're explicitly forcing pack.cover to be truthy here, but TypeScript doesn't + // understand that. + return ready.filter(pack => Boolean(pack.cover)) as Array; +}; + +const getStickers = (state: StateType) => state.stickers; + +export const getPacks = createSelector( + getStickers, + (stickers: StickersStateType) => stickers.packs +); + +const getRecents = createSelector( + getStickers, + (stickers: StickersStateType) => stickers.recentStickers +); + +export const getBlessedPacks = createSelector( + getStickers, + (stickers: StickersStateType) => stickers.blessedPacks +); + +export const getRecentStickers = createSelector( + getRecents, + getPacks, + getStickersPath, + ( + recents: Array, + packs: Dictionary, + stickersPath: string + ) => { + return compact( + recents.map(({ packId, stickerId }) => { + return getSticker(packs, packId, stickerId, stickersPath); + }) + ); + } +); + +export const getInstalledStickerPacks = createSelector( + getPacks, + getBlessedPacks, + getStickersPath, + ( + packs: Dictionary, + blessedPacks: Dictionary, + stickersPath: string + ): Array => { + return filterAndTransformPacks( + packs, + pack => pack.status === 'installed', + pack => pack.installedAt, + blessedPacks, + stickersPath + ); + } +); + +export const getRecentlyInstalledStickerPack = createSelector( + getInstalledStickerPacks, + getStickers, + (packs, { installedPack: packId }) => { + if (!packId) { + return null; + } + + return packs.find(({ id }) => id === packId) || null; + } +); + +export const getReceivedStickerPacks = createSelector( + getPacks, + getBlessedPacks, + getStickersPath, + ( + packs: Dictionary, + blessedPacks: Dictionary, + stickersPath: string + ): Array => { + return filterAndTransformPacks( + packs, + pack => + (pack.status === 'advertised' || pack.status === 'pending') && + !blessedPacks[pack.id], + pack => pack.createdAt, + blessedPacks, + stickersPath + ); + } +); + +export const getBlessedStickerPacks = createSelector( + getPacks, + getBlessedPacks, + getStickersPath, + ( + packs: Dictionary, + blessedPacks: Dictionary, + stickersPath: string + ): Array => { + return filterAndTransformPacks( + packs, + pack => blessedPacks[pack.id] && pack.status !== 'installed', + pack => pack.createdAt, + blessedPacks, + stickersPath + ); + } +); diff --git a/ts/state/selectors/user.ts b/ts/state/selectors/user.ts index 67478ab9f..636cd34df 100644 --- a/ts/state/selectors/user.ts +++ b/ts/state/selectors/user.ts @@ -21,3 +21,13 @@ export const getIntl = createSelector( getUser, (state: UserStateType): LocalizerType => state.i18n ); + +export const getAttachmentsPath = createSelector( + getUser, + (state: UserStateType): string => state.attachmentsPath +); + +export const getStickersPath = createSelector( + getUser, + (state: UserStateType): string => state.stickersPath +); diff --git a/ts/state/smart/StickerButton.tsx b/ts/state/smart/StickerButton.tsx new file mode 100644 index 000000000..d9ee73604 --- /dev/null +++ b/ts/state/smart/StickerButton.tsx @@ -0,0 +1,48 @@ +import { connect } from 'react-redux'; +import { get } from 'lodash'; +import { mapDispatchToProps } from '../actions'; +import { StickerButton } from '../../components/stickers/StickerButton'; +import { StateType } from '../reducer'; + +import { getIntl } from '../selectors/user'; +import { + getInstalledStickerPacks, + getReceivedStickerPacks, + getRecentlyInstalledStickerPack, + getRecentStickers, +} from '../selectors/stickers'; + +const mapStateToProps = (state: StateType) => { + const receivedPacks = getReceivedStickerPacks(state); + const installedPacks = getInstalledStickerPacks(state); + const recentStickers = getRecentStickers(state); + const installedPack = getRecentlyInstalledStickerPack(state); + const showIntroduction = get( + state.items, + ['showStickersIntroduction', 'value'], + false + ); + const showPickerHint = + get(state.items, ['showStickerPickerHint', 'value'], false) && + receivedPacks.length > 0; + + return { + receivedPacks, + installedPack, + installedPacks, + recentStickers, + showIntroduction, + showPickerHint, + i18n: getIntl(state), + }; +}; + +const smart = connect(mapStateToProps, { + ...mapDispatchToProps, + clearShowIntroduction: () => + mapDispatchToProps.removeItem('showStickersIntroduction'), + clearShowPickerHint: () => + mapDispatchToProps.removeItem('showStickerPickerHint'), +}); + +export const SmartStickerButton = smart(StickerButton); diff --git a/ts/state/smart/StickerManager.tsx b/ts/state/smart/StickerManager.tsx new file mode 100644 index 000000000..6e042a228 --- /dev/null +++ b/ts/state/smart/StickerManager.tsx @@ -0,0 +1,28 @@ +import { connect } from 'react-redux'; +import { mapDispatchToProps } from '../actions'; +import { StickerManager } from '../../components/stickers/StickerManager'; +import { StateType } from '../reducer'; + +import { getIntl } from '../selectors/user'; +import { + getBlessedStickerPacks, + getInstalledStickerPacks, + getReceivedStickerPacks, +} from '../selectors/stickers'; + +const mapStateToProps = (state: StateType) => { + const blessedPacks = getBlessedStickerPacks(state); + const receivedPacks = getReceivedStickerPacks(state); + const installedPacks = getInstalledStickerPacks(state); + + return { + blessedPacks, + receivedPacks, + installedPacks, + i18n: getIntl(state), + }; +}; + +const smart = connect(mapStateToProps, mapDispatchToProps); + +export const SmartStickerManager = smart(StickerManager); diff --git a/ts/state/smart/StickerPreviewModal.tsx b/ts/state/smart/StickerPreviewModal.tsx new file mode 100644 index 000000000..2e94c3cbe --- /dev/null +++ b/ts/state/smart/StickerPreviewModal.tsx @@ -0,0 +1,54 @@ +import { connect } from 'react-redux'; +import { mapDispatchToProps } from '../actions'; +import { StickerPreviewModal } from '../../components/stickers/StickerPreviewModal'; +import { StateType } from '../reducer'; + +import { getIntl, getStickersPath } from '../selectors/user'; +import { + getBlessedPacks, + getPacks, + translatePackFromDB, +} from '../selectors/stickers'; + +type ExternalProps = { + packId: string; + readonly onClose: () => unknown; +}; + +const mapStateToProps = (state: StateType, props: ExternalProps) => { + const { packId } = props; + const stickersPath = getStickersPath(state); + const packs = getPacks(state); + const blessedPacks = getBlessedPacks(state); + const pack = packs[packId]; + + if (!pack) { + throw new Error(`Cannot find pack ${packId}`); + } + const translated = translatePackFromDB( + pack, + packs, + blessedPacks, + stickersPath + ); + + return { + ...props, + pack: { + ...translated, + cover: translated.cover + ? translated.cover + : { + id: 0, + url: 'nonexistent', + packId, + emoji: 'WTF', + }, + }, + i18n: getIntl(state), + }; +}; + +const smart = connect(mapStateToProps, mapDispatchToProps); + +export const SmartStickerPreviewModal = smart(StickerPreviewModal); diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts index 49faa0a42..84af75a16 100644 --- a/ts/styleguide/StyleGuideUtil.ts +++ b/ts/styleguide/StyleGuideUtil.ts @@ -41,6 +41,10 @@ import landscape from '../../fixtures/koushik-chowdavarapu-105425-unsplash.jpg'; // 800×1200 const landscapeObjectUrl = makeObjectUrl(landscape, 'image/png'); +// @ts-ignore +import squareSticker from '../../fixtures/512x515-thumbs-up-lincoln.webp'; +const squareStickerObjectUrl = makeObjectUrl(squareSticker, 'image/webp'); + // @ts-ignore import landscapeGreen from '../../fixtures/1000x50-green.jpeg'; const landscapeGreenObjectUrl = makeObjectUrl(landscapeGreen, 'image/jpeg'); @@ -57,6 +61,16 @@ const landscapeRedObjectUrl = makeObjectUrl(landscapeRed, 'image/png'); import portraitTeal from '../../fixtures/50x1000-teal.jpeg'; const portraitTealObjectUrl = makeObjectUrl(portraitTeal, 'image/png'); +// @ts-ignore +import kitten164 from '../../fixtures/kitten-1-64-64.jpg'; +const kitten164ObjectUrl = makeObjectUrl(kitten164, 'image/jpeg'); +// @ts-ignore +import kitten264 from '../../fixtures/kitten-2-64-64.jpg'; +const kitten264ObjectUrl = makeObjectUrl(kitten264, 'image/jpeg'); +// @ts-ignore +import kitten364 from '../../fixtures/kitten-3-64-64.jpg'; +const kitten364ObjectUrl = makeObjectUrl(kitten364, 'image/jpeg'); + function makeObjectUrl(data: ArrayBuffer, contentType: string): string { const blob = new Blob([data], { type: contentType, @@ -66,6 +80,12 @@ function makeObjectUrl(data: ArrayBuffer, contentType: string): string { } export { + kitten164, + kitten164ObjectUrl, + kitten264, + kitten264ObjectUrl, + kitten364, + kitten364ObjectUrl, mp3, mp3ObjectUrl, gif, @@ -76,6 +96,8 @@ export { mp4ObjectUrlV2, png, pngObjectUrl, + squareSticker, + squareStickerObjectUrl, txt, txtObjectUrl, landscape, diff --git a/ts/types/MIME.ts b/ts/types/MIME.ts index a083e19cd..dcf968138 100644 --- a/ts/types/MIME.ts +++ b/ts/types/MIME.ts @@ -6,6 +6,7 @@ export const AUDIO_AAC = 'audio/aac' as MIMEType; export const AUDIO_MP3 = 'audio/mp3' as MIMEType; export const IMAGE_GIF = 'image/gif' as MIMEType; export const IMAGE_JPEG = 'image/jpeg' as MIMEType; +export const IMAGE_WEBP = 'image/webp' as MIMEType; export const VIDEO_MP4 = 'video/mp4' as MIMEType; export const VIDEO_QUICKTIME = 'video/quicktime' as MIMEType; diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 67e2a28c1..2e7cfe0c3 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -203,46 +203,6 @@ "updated": "2018-09-19T18:13:29.628Z", "reasonDetail": "Interacting with already-existing DOM nodes" }, - { - "rule": "jQuery-wrap(", - "path": "js/modules/crypto.js", - "line": " return dcodeIO.ByteBuffer.wrap(arrayBuffer).toString('base64');", - "lineNumber": 45, - "reasonCategory": "falseMatch", - "updated": "2018-10-05T23:12:28.961Z" - }, - { - "rule": "jQuery-wrap(", - "path": "js/modules/crypto.js", - "line": " return dcodeIO.ByteBuffer.wrap(base64string, 'base64').toArrayBuffer();", - "lineNumber": 48, - "reasonCategory": "falseMatch", - "updated": "2018-10-05T23:12:28.961Z" - }, - { - "rule": "jQuery-wrap(", - "path": "js/modules/crypto.js", - "line": " return dcodeIO.ByteBuffer.wrap(key, 'binary').toArrayBuffer();", - "lineNumber": 52, - "reasonCategory": "falseMatch", - "updated": "2018-10-05T23:12:28.961Z" - }, - { - "rule": "jQuery-wrap(", - "path": "js/modules/crypto.js", - "line": " return dcodeIO.ByteBuffer.wrap(string, 'utf8').toArrayBuffer();", - "lineNumber": 56, - "reasonCategory": "falseMatch", - "updated": "2018-10-05T23:12:28.961Z" - }, - { - "rule": "jQuery-wrap(", - "path": "js/modules/crypto.js", - "line": " return dcodeIO.ByteBuffer.wrap(buffer).toString('utf8');", - "lineNumber": 59, - "reasonCategory": "falseMatch", - "updated": "2018-10-05T23:12:28.961Z" - }, { "rule": "jQuery-append(", "path": "js/modules/debuglogs.js", @@ -267,6 +227,14 @@ "reasonCategory": "falseMatch", "updated": "2018-09-19T18:13:29.628Z" }, + { + "rule": "jQuery-load(", + "path": "js/modules/stickers.js", + "line": "async function load() {", + "lineNumber": 53, + "reasonCategory": "falseMatch", + "updated": "2019-04-26T17:48:30.675Z" + }, { "rule": "jQuery-$(", "path": "js/permissions_popup_start.js", @@ -501,7 +469,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " let $el = this.$(`#${id}`);", - "lineNumber": 27, + "lineNumber": 33, "reasonCategory": "usageTrusted", "updated": "2018-09-19T21:59:32.770Z", "reasonDetail": "Protected from arbitrary input" @@ -510,7 +478,7 @@ "rule": "jQuery-prependTo(", "path": "js/views/inbox_view.js", "line": " $el.prependTo(this.el);", - "lineNumber": 36, + "lineNumber": 42, "reasonCategory": "usageTrusted", "updated": "2018-09-19T18:13:29.628Z", "reasonDetail": "Interacting with already-existing DOM nodes" @@ -519,7 +487,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " this.$('.message').text(message);", - "lineNumber": 48, + "lineNumber": 56, "reasonCategory": "usageTrusted", "updated": "2018-09-19T21:59:32.770Z", "reasonDetail": "Protected from arbitrary input" @@ -528,7 +496,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " el: this.$('.conversation-stack'),", - "lineNumber": 65, + "lineNumber": 73, "reasonCategory": "usageTrusted", "updated": "2018-09-19T21:59:32.770Z", "reasonDetail": "Protected from arbitrary input" @@ -537,7 +505,7 @@ "rule": "jQuery-prependTo(", "path": "js/views/inbox_view.js", "line": " this.appLoadingScreen.$el.prependTo(this.el);", - "lineNumber": 72, + "lineNumber": 80, "reasonCategory": "usageTrusted", "updated": "2018-09-19T18:13:29.628Z", "reasonDetail": "Interacting with already-existing DOM nodes" @@ -546,7 +514,7 @@ "rule": "jQuery-append(", "path": "js/views/inbox_view.js", "line": " .append(this.networkStatusView.render().el);", - "lineNumber": 87, + "lineNumber": 95, "reasonCategory": "usageTrusted", "updated": "2018-09-19T18:13:29.628Z", "reasonDetail": "Interacting with already-existing DOM nodes" @@ -555,16 +523,25 @@ "rule": "jQuery-prependTo(", "path": "js/views/inbox_view.js", "line": " banner.$el.prependTo(this.$el);", - "lineNumber": 91, + "lineNumber": 99, "reasonCategory": "usageTrusted", "updated": "2018-09-19T18:13:29.628Z", "reasonDetail": "Interacting with already-existing DOM nodes" }, + { + "rule": "jQuery-appendTo(", + "path": "js/views/inbox_view.js", + "line": " toast.$el.appendTo(this.$el);", + "lineNumber": 105, + "reasonCategory": "usageTrusted", + "updated": "2019-05-10T00:25:51.515Z", + "reasonDetail": "Interacting with already-existing DOM nodes" + }, { "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " this.$('.left-pane-placeholder').append(this.leftPaneView.el);", - "lineNumber": 111, + "lineNumber": 125, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -573,7 +550,7 @@ "rule": "jQuery-append(", "path": "js/views/inbox_view.js", "line": " this.$('.left-pane-placeholder').append(this.leftPaneView.el);", - "lineNumber": 111, + "lineNumber": 125, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -582,7 +559,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " if (e && this.$(e.target).closest('.placeholder').length) {", - "lineNumber": 152, + "lineNumber": 166, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -591,7 +568,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " this.$('#header, .gutter').addClass('inactive');", - "lineNumber": 156, + "lineNumber": 170, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -600,7 +577,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " this.$('.conversation-stack').addClass('inactive');", - "lineNumber": 160, + "lineNumber": 174, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -609,7 +586,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " this.$('.conversation:first .menu').trigger('close');", - "lineNumber": 162, + "lineNumber": 176, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -618,7 +595,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " if (e && this.$(e.target).closest('.capture-audio').length > 0) {", - "lineNumber": 182, + "lineNumber": 196, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -627,7 +604,7 @@ "rule": "jQuery-$(", "path": "js/views/inbox_view.js", "line": " this.$('.conversation:first .recorder').trigger('close');", - "lineNumber": 185, + "lineNumber": 199, "reasonCategory": "usageTrusted", "updated": "2019-03-08T23:49:08.796Z", "reasonDetail": "Protected from arbitrary input" @@ -887,7 +864,7 @@ "rule": "jQuery-append(", "path": "js/views/message_view.js", "line": " this.$el.append(this.childView.el);", - "lineNumber": 123, + "lineNumber": 139, "reasonCategory": "usageTrusted", "updated": "2018-09-19T18:13:29.628Z", "reasonDetail": "Interacting with already-existing DOM nodes" @@ -1335,7 +1312,7 @@ "rule": "jQuery-wrap(", "path": "libtextsecure/crypto.js", "line": " const data = dcodeIO.ByteBuffer.wrap(", - "lineNumber": 205, + "lineNumber": 206, "reasonCategory": "falseMatch", "updated": "2018-09-19T18:13:29.628Z" }, @@ -1343,7 +1320,7 @@ "rule": "jQuery-wrap(", "path": "libtextsecure/crypto.js", "line": " return dcodeIO.ByteBuffer.wrap(padded)", - "lineNumber": 219, + "lineNumber": 220, "reasonCategory": "falseMatch", "updated": "2018-09-19T18:13:29.628Z" }, @@ -1379,6 +1356,22 @@ "reasonCategory": "falseMatch", "updated": "2018-09-19T18:13:29.628Z" }, + { + "rule": "jQuery-wrap(", + "path": "libtextsecure/sendmessage.js", + "line": " return dcodeIO.ByteBuffer.wrap(string, 'hex').toArrayBuffer();", + "lineNumber": 17, + "reasonCategory": "falseMatch", + "updated": "2019-04-26T17:48:30.675Z" + }, + { + "rule": "jQuery-wrap(", + "path": "libtextsecure/sendmessage.js", + "line": " return dcodeIO.ByteBuffer.wrap(string, 'base64').toArrayBuffer();", + "lineNumber": 20, + "reasonCategory": "falseMatch", + "updated": "2019-04-26T17:48:30.675Z" + }, { "rule": "jQuery-wrap(", "path": "libtextsecure/sync_request.js", @@ -1825,7 +1818,7 @@ "lineNumber": 31, "reasonCategory": "usageTrusted", "updated": "2019-03-22T19:15:12.445Z", - "reasonDetail": "" + "reasonDetail": "It's usage of bluebird that's the problem, not bluebird itself with this rule" }, { "rule": "thenify-multiArgs", @@ -1897,7 +1890,7 @@ "lineNumber": 3519, "reasonCategory": "usageTrusted", "updated": "2019-03-22T19:15:12.445Z", - "reasonDetail": "" + "reasonDetail": "Usage of bluebird is the problem with this rule, not bluebird itself" }, { "rule": "thenify-multiArgs", @@ -2509,143 +2502,105 @@ { "rule": "jQuery-$(", "path": "node_modules/core-js/build/index.js", - "line": " if (name.indexOf(ns + \".\") === 0 && !in$(name, experimental)) {", - "lineNumber": 36, + "line": " if (name.indexOf(ns + \".\") === 0 && !in$(name, experimental)) {", + "lineNumber": 43, "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-$(", "path": "node_modules/core-js/build/index.js", "line": " function in$(x, xs){", - "lineNumber": 99, + "lineNumber": 93, "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/core.js", - "line": "\t return wrap(tag);", - "lineNumber": 391, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "line": "\t return wrap(uid(arguments.length > 0 ? arguments[0] : undefined));", + "lineNumber": 1082, + "reasonCategory": "falseMatch" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/core.js", - "line": "\t return wrap(wks(name));", - "lineNumber": 408, + "line": "\t symbolStatics[it] = useNative ? sym : wrap(sym);", + "lineNumber": 1135, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" - }, - { - "rule": "jQuery-$(", - "path": "node_modules/core-js/client/core.js", - "line": "\t if(!NPCG)separator2 = new RegExp('^' + separatorCopy.source + '$(?!\\\\s)', flags);", - "lineNumber": 3893, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/core.js", "line": "\t setTimeout: wrap(global.setTimeout),", - "lineNumber": 7226, + "lineNumber": 4496, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" - }, - { - "rule": "jQuery-$(", - "path": "node_modules/core-js/client/core.min.js", - "lineNumber": 8, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/library.js", - "line": "\t return wrap(tag);", - "lineNumber": 379, + "line": "\t return wrap(uid(arguments.length > 0 ? arguments[0] : undefined));", + "lineNumber": 1033, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/library.js", - "line": "\t return wrap(wks(name));", - "lineNumber": 396, + "line": "\t symbolStatics[it] = useNative ? sym : wrap(sym);", + "lineNumber": 1086, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/library.js", "line": "\t setTimeout: wrap(global.setTimeout),", - "lineNumber": 6749, + "lineNumber": 4136, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" - }, - { - "rule": "jQuery-$(", - "path": "node_modules/core-js/client/library.min.js", - "lineNumber": 8, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/shim.js", - "line": "\t return wrap(tag);", - "lineNumber": 377, + "line": "\t return wrap(uid(arguments.length > 0 ? arguments[0] : undefined));", + "lineNumber": 1068, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/shim.js", - "line": "\t return wrap(wks(name));", - "lineNumber": 394, + "line": "\t symbolStatics[it] = useNative ? sym : wrap(sym);", + "lineNumber": 1121, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" - }, - { - "rule": "jQuery-$(", - "path": "node_modules/core-js/client/shim.js", - "line": "\t if(!NPCG)separator2 = new RegExp('^' + separatorCopy.source + '$(?!\\\\s)', flags);", - "lineNumber": 3879, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/client/shim.js", "line": "\t setTimeout: wrap(global.setTimeout),", - "lineNumber": 7212, + "lineNumber": 4482, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" - }, - { - "rule": "jQuery-$(", - "path": "node_modules/core-js/client/shim.min.js", - "lineNumber": 8, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/library/modules/es6.symbol.js", - "line": " return wrap(tag);", + "line": " return wrap(uid(arguments.length > 0 ? arguments[0] : undefined));", "lineNumber": 142, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/library/modules/es6.symbol.js", - "line": " return wrap(wks(name));", - "lineNumber": 159, + "line": " symbolStatics[it] = useNative ? sym : wrap(sym);", + "lineNumber": 195, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", @@ -2653,31 +2608,23 @@ "line": " setTimeout: wrap(global.setTimeout),", "lineNumber": 18, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" - }, - { - "rule": "jQuery-$(", - "path": "node_modules/core-js/modules/es6.regexp.split.js", - "line": " if(!NPCG)separator2 = new RegExp('^' + separatorCopy.source + '$(?!\\\\s)', flags);", - "lineNumber": 36, - "reasonCategory": "falseMatch", - "updated": "2018-09-19T21:59:32.770Z" + "updated": "2019-04-26T19:26:59.689Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/modules/es6.symbol.js", - "line": " return wrap(tag);", + "line": " return wrap(uid(arguments.length > 0 ? arguments[0] : undefined));", "lineNumber": 142, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", "path": "node_modules/core-js/modules/es6.symbol.js", - "line": " return wrap(wks(name));", - "lineNumber": 159, + "line": " symbolStatics[it] = useNative ? sym : wrap(sym);", + "lineNumber": 195, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:18:14.550Z" }, { "rule": "jQuery-wrap(", @@ -2685,7 +2632,78 @@ "line": " setTimeout: wrap(global.setTimeout),", "lineNumber": 18, "reasonCategory": "falseMatch", - "updated": "2018-09-19T18:13:29.628Z" + "updated": "2019-04-26T19:26:59.689Z" + }, + { + "rule": "fbjs-createNodesFromMarkup", + "path": "node_modules/create-react-context/node_modules/fbjs/lib/createNodesFromMarkup.js", + "line": "function createNodesFromMarkup(markup, handleScript) {", + "lineNumber": 51, + "reasonCategory": "falseMatch", + "updated": "2019-04-26T19:18:14.550Z" + }, + { + "rule": "fbjs-createNodesFromMarkup", + "path": "node_modules/create-react-context/node_modules/fbjs/lib/createNodesFromMarkup.js", + "line": " !!!dummyNode ? process.env.NODE_ENV !== 'production' ? invariant(false, 'createNodesFromMarkup dummy not initialized') : invariant(false) : void 0;", + "lineNumber": 53, + "reasonCategory": "falseMatch", + "updated": "2019-04-26T19:18:14.550Z" + }, + { + "rule": "DOM-innerHTML", + "path": "node_modules/create-react-context/node_modules/fbjs/lib/createNodesFromMarkup.js", + "line": " node.innerHTML = wrap[1] + markup + wrap[2];", + "lineNumber": 58, + "reasonCategory": "falseMatch", + "updated": "2019-04-26T19:18:14.550Z" + }, + { + "rule": "DOM-innerHTML", + "path": "node_modules/create-react-context/node_modules/fbjs/lib/createNodesFromMarkup.js", + "line": " node.innerHTML = markup;", + "lineNumber": 65, + "reasonCategory": "falseMatch", + "updated": "2019-04-26T19:18:14.550Z" + }, + { + "rule": "fbjs-createNodesFromMarkup", + "path": "node_modules/create-react-context/node_modules/fbjs/lib/createNodesFromMarkup.js", + "line": " !handleScript ? process.env.NODE_ENV !== 'production' ? invariant(false, 'createNodesFromMarkup(...): Unexpected