diff --git a/_locales/en/messages.json b/_locales/en/messages.json index e67f64278cb7..2e7f67311d9e 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 c5e22975150a..672b531a3ea7 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 f8b8627fe899..f6ea69f6593b 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 29a34535e498..2197d32fba98 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 128ab3a5945c..d781b9ad693f 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 d8ffd6392371..ced91eeb686d 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 000000000000..b5df889adbbc Binary files /dev/null and b/fixtures/512x515-thumbs-up-lincoln.webp differ diff --git a/fixtures/kitten-1-64-64.jpg b/fixtures/kitten-1-64-64.jpg new file mode 100644 index 000000000000..7a5d70d76c3f Binary files /dev/null and b/fixtures/kitten-1-64-64.jpg differ diff --git a/fixtures/kitten-2-64-64.jpg b/fixtures/kitten-2-64-64.jpg new file mode 100644 index 000000000000..2585e8e58f36 Binary files /dev/null and b/fixtures/kitten-2-64-64.jpg differ diff --git a/fixtures/kitten-3-64-64.jpg b/fixtures/kitten-3-64-64.jpg new file mode 100644 index 000000000000..f9d3ef8389e6 Binary files /dev/null and b/fixtures/kitten-3-64-64.jpg differ diff --git a/images/badge-filled-16.svg b/images/badge-filled-16.svg new file mode 100644 index 000000000000..ae9cd05ad153 --- /dev/null +++ b/images/badge-filled-16.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/images/check-circle-filled-16.svg b/images/check-circle-filled-16.svg new file mode 100644 index 000000000000..1683ea0bd1eb --- /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 000000000000..ae4e9ecf1319 --- /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 000000000000..9c39ac4436b8 --- /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 000000000000..ecd45dec7774 --- /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 000000000000..340d982d64d0 --- /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 000000000000..24c26edab9d0 --- /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 000000000000..b647a4138a9b --- /dev/null +++ b/images/sticker-filled.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/js/background.js b/js/background.js index 8b45fe8245f6..cdc937810cf4 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 18d58cde9b15..d871bcc83396 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 5a0feec1d4f8..c2a3bc8956c1 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 36d6e1c76d40..c2b675f19644 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 e4356dc839e3..6b17e808fb6a 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 181d2d6f2c98..3bfb416789dc 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 1cec9dcb9754..92c613496a40 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 973042e1c201..b6db7200fbcd 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 3ab33cfed00c..07246a6ad3e5 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 7d81b01a9b8b..0d816c4dabaf 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 000000000000..ced60aa438b2 --- /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 000000000000..9c8928013b4c --- /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 48af3a17b510..09b41041663e 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 29ec499f4195..8607d99dc3c4 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 382f899dbf79..202080d58d04 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 c864ce06037a..56fdd95a3cef 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 017eee1b3f71..bea60767dd13 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 78025a9d5975..42d1d121c269 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 07df7db3c7b6..a372c01cee68 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 1f82933f8176..ef1b26d57e4b 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 a256fff1888c..7d108fb15332 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 7183330a97fd..82c52547adba 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 4974d416d80e..01e2f6cf91b0 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 80c91e9e5524..71c63f82327b 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 df6e114be1bf..9490f9f1991c 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 35395ab3696a..b1a06001e84c 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 e1fdd8aaeede..b71dfdc3525a 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 2efbcc3d3ec4..48a516565808 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 cbcb0256b063..83d9646b3054 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 000000000000..82dfa0dbf5ba --- /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 c58cf7d82a17..c73a1ea88d2f 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 1ff50bd01038..965080574d3a 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 5b1d19ee156e..3a8d869e98e0 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 cbd61cfaa48e..b97c34dd7b16 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 a585ad5bca98..72b6f5f7cbac 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 5f5ce4b737c5..0e8c0caa25c6 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 a13fe80d3104..afe5e61d376c 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 e7c13bf2500e..edd888c84ab7 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 000000000000..328ce1027831 --- /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 000000000000..c35408be17c9 --- /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 000000000000..844dbae23cc7 --- /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 cd66055fd835..05a7c6a985d0 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 9e3c39a7d05f..3dfa7803266e 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 d94d682fc85e..3761702131e8 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 41ad9e62e051..617dde0741be 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 aacf7c89c4fe..578baa092d5e 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 62314d963610..e140c8470e6f 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 000000000000..cf5b1badccf9 --- /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 000000000000..89aaf9936940 --- /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 000000000000..719f0dca40ba --- /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 000000000000..8450a95334c6 --- /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 000000000000..536d6cfda25a --- /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 000000000000..ea19b030de8b --- /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 000000000000..bd93ecb8d9aa --- /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 000000000000..abc92860db3d --- /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 000000000000..90737b0d7049 --- /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 000000000000..bc51282a2f5d --- /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 000000000000..35c25b89886e --- /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 000000000000..8ae9eac0ad78 --- /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 ee562e3a2756..39dfc2fdd9c4 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 3c825e53e7e4..229be1c49f50 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 000000000000..c42f97c3dda1 --- /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 51517f72ade6..9bd372075d4a 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 000000000000..a06602f67d17 --- /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 4123170cd4cb..fe8c685d3e07 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 965c27937ac6..098b7e4837c2 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 000000000000..ade6bb62ec80 --- /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 000000000000..47523e361429 --- /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 000000000000..9ce2de21ad3a --- /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 000000000000..7734832b885c --- /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 67478ab9ffed..636cd34df217 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 000000000000..d9ee73604338 --- /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 000000000000..6e042a228dec --- /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 000000000000..2e94c3cbe248 --- /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 49faa0a42c2c..84af75a16e6f 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 a083e19cd3b0..dcf968138ce0 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 67e2a28c1c6c..2e7cfe0c3e9a 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