Page MenuHomePhabricator
Differential D7201

[web][keyserver] Webpack config and client logic to access opaque-ke2 WASM bindings
ClosedPublic
Actions

Authored by ashoat on Mar 27 2023, 11:09 AM.
Tags
None
Referenced Files
F5575706: D7201.diff
Sat, Apr 12, 6:30 PM
Unknown Object (File)
Wed, Apr 9, 12:53 AM
Unknown Object (File)
Wed, Apr 9, 12:08 AM
Unknown Object (File)
Tue, Apr 8, 10:57 PM
Unknown Object (File)
Tue, Apr 8, 10:26 PM
Unknown Object (File)
Tue, Apr 8, 10:07 PM
Unknown Object (File)
Tue, Apr 8, 9:56 PM
Unknown Object (File)
Fri, Mar 21, 4:14 AM
View All Files
Subscribers
• jon
tomek

Details

Reviewers
• jon
atul
varun
Commits
rCOMM506aacc7ccc0: [web][keyserver] Webpack config and client logic to access opaque-ke2 WASM…
Summary

This diff makes it possible to call the WASM bindings from web!

Depends on D7197

Test Plan
  1. I tested on both dev and prod
  2. I made sure that in both, the Network tab of Chrome dev tools showed the WASM correctly downloaded
  3. I tested with this patch and made sure there were no errors in both dev and prod

Diff Detail

Repository
rCOMM Comm
Branch
arcpatch-D7197
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ashoat created this revision.Mar 27 2023, 11:09 AM
Herald added a subscriber: tomek. · View Herald TranscriptMar 27 2023, 11:09 AM
ashoat added inline comments.Mar 27 2023, 11:10 AM
web/crypto/opaque-utils.js
11–15 ↗(On Diff #24226)

Before landing, I'll make sure we don't execute this twice

ashoat edited the test plan for this revision. (Show Details)Mar 27 2023, 11:12 AM
Harbormaster returned this revision to the author for changes because remote builds failed.Mar 27 2023, 11:25 AM
Harbormaster failed remote builds in B17699: Diff 24226!
ashoat updated this revision to Diff 24233.EditedMar 27 2023, 1:16 PM
  1. Make sure we only download the WASM once
  2. Make sure of wasm-bindgen's --target web mode (updated in the parent diff) instead of implementing that ourselves
ashoat edited the test plan for this revision. (Show Details)Mar 27 2023, 1:19 PM
ashoat updated this revision to Diff 24234.Mar 27 2023, 1:27 PM

Add types

Harbormaster completed remote builds in B17705: Diff 24233.Mar 27 2023, 1:31 PM
ashoat added inline comments.Mar 27 2023, 1:41 PM
keyserver/src/responders/website-responders.js
88 ↗(On Diff #24234)

I modeled this after jsURL instead of olmFilename and sqljsFilename. The filename approach works well with Emscripten's locateFile utility, but not so well with wasm-bindgen (which has less tooling overall)

web/app.react.js
65 ↗(On Diff #24234)

We don't await here, which means that we'll execute initOpaque but ignore the result. This is good because it makes sure we start downloading the WASM as soon as possible. Note that we'll still need to call await initOpaque(); before executing any calls on the WASM

web/crypto/opaque-utils.js
14 ↗(On Diff #24234)

Now that we're using --target web, initOpaqueKe(opaqueURL) is all we really need. The rest of the code here makes sure we only ever call that once

web/flow-typed/npm/@commapp/opaque-ke-wasm_vx.x.x.js
6–19 ↗(On Diff #24234)

This is pulled from wasm-bindgen's TS output, with some slight modifications for Flow

23 ↗(On Diff #24234)

I typed this as mixed because it actually returns some sort of wasm object with a bunch of internal stuff. My impression is that we shouldn't use it directly, so I'm using mixed as a "opaque type" (basically telling the caller they can't really do anything with it)

web/package.json
38 ↗(On Diff #24234)

If we just say "@commapp/opaque-ke-wasm": "^0.0.3", yarn pulls it from our monorepo instead of using the published package. That's a problem because our monorepo doesn't have the built files, and we'd rather than affect the DevX by adding the build here to our build process. Instead we use this npm: alias to make sure the published package is used

Harbormaster completed remote builds in B17706: Diff 24234.Mar 27 2023, 1:42 PM
ashoat requested review of this revision.Mar 27 2023, 1:42 PM
ashoat added inline comments.Mar 27 2023, 2:02 PM
web/flow-typed/npm/@commapp/opaque-ke-wasm_vx.x.x.js
6–19 ↗(On Diff #24234)

TS output: https://gist.github.com/jonringer-comm/cab0614fdb54ac00b5f7692d0ae2ea2e

• jon added a comment.Mar 27 2023, 2:11 PM

Nothing looks super surprising here, thanks!

Not going to accept as someone with more js experience should review before landing.

ashoat added 1 blocking reviewer(s): atul.Mar 28 2023, 11:21 AM
atul accepted this revision.Mar 28 2023, 1:25 PM

Thanks for annotating the changes with explanations

This revision is now accepted and ready to land.Mar 28 2023, 1:25 PM
Closed by commit rCOMM506aacc7ccc0: [web][keyserver] Webpack config and client logic to access opaque-ke2 WASM… (authored by ashoat). · Explain WhyMar 28 2023, 1:41 PM
This revision was automatically updated to reflect the committed changes.
ashoat added a commit: rCOMM506aacc7ccc0: [web][keyserver] Webpack config and client logic to access opaque-ke2 WASM….

Revision Contents
Changeset List

PathSize
keyserver/
src/
responders/
6 lines
web/
3 lines
crypto/
19 lines
1 line
20 lines
5 lines

Diff 24233

View Options

keyserver/src/responders/website-responders.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
contentStringForMediaArray, contentStringForMediaArray,
multimediaMessagePreview, multimediaMessagePreview,
shimUploadURI,
} from '../../media/media-utils'; } from '../../media/media-utils';
import type { PlatformDetails } from '../../types/device-types'; import type { PlatformDetails } from '../../types/device-types';
import type { Media, Video, Image } from '../../types/media-types';
import { import {
messageTypes, messageTypes,
assertMessageType, assertMessageType,
isMediaMessageType, isMediaMessageType,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
MessageInfo, MessageInfo,
RawMessageInfo, RawMessageInfo,
RawMultimediaMessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
ImagesMessageData, ImagesMessageData,
RawImagesMessageInfo, RawImagesMessageInfo,
ImagesMessageInfo, ImagesMessageInfo,
} from '../../types/messages/images'; } from '../../types/messages/images';
import type { import type {
▲ Show 20 Lines • Show All 168 Lines • ▼ Show 20 Lines ): RawMediaMessageInfo | RawImagesMessageInfo {
} }
}, },
shimUnsupportedMessageInfo( shimUnsupportedMessageInfo(
rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo, rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo,
platformDetails: ?PlatformDetails, platformDetails: ?PlatformDetails,
): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo { ): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) { if (rawMessageInfo.type === messageTypes.IMAGES) {
const shimmedRawMessageInfo = shimMediaMessageInfo( return rawMessageInfo;
rawMessageInfo,
platformDetails,
);
return shimmedRawMessageInfo;
} else { } else {
ashoatUnsubmitted
Not Done
Inline Actions

Nit – I would remove this else block... the if has a return, so the else isn't necessary

ashoat: Nit – I would remove this `else` block... the `if` has a `return`, so the `else` isn't…
rohanAuthorUnsubmitted
Done
Inline Actions

Do you have a preference on merging the if statements or keeping the logic separate?

if (rawMessageInfo.type === messageTypes.IMAGES) {
  return rawMessageInfo;
}
if (hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}

vs.

if (rawMessageInfo.type === messageTypes.IMAGES || hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}
rohan: Do you have a preference on merging the if statements or keeping the logic separate? ```…
ashoatUnsubmitted
Not Done
Inline Actions

No strong preference. I would probably keep the former personally but I'm okay either way

ashoat: No strong preference. I would probably keep the former personally but I'm okay either way
const shimmedRawMessageInfo = shimMediaMessageInfo(
rawMessageInfo,
platformDetails,
);
// TODO figure out first native codeVersion supporting video playback // TODO figure out first native codeVersion supporting video playback
ashoatUnsubmitted
Not Done
Inline Actions

I think we can remove this TODO, right @atul?

ashoat: I think we can remove this `TODO`, right @atul?
atulUnsubmitted
Not Done
Inline Actions

Yes, sorry I should have remove that earlier.

atul: Yes, sorry I should have remove that earlier.
if (hasMinCodeVersion(platformDetails, 158)) { if (hasMinCodeVersion(platformDetails, 158)) {
return shimmedRawMessageInfo; return rawMessageInfo;
} }
const { id } = shimmedRawMessageInfo; const { id } = rawMessageInfo;
invariant(id !== null && id !== undefined, 'id should be set on server'); invariant(id !== null && id !== undefined, 'id should be set on server');
return { return {
type: messageTypes.UNSUPPORTED, type: messageTypes.UNSUPPORTED,
id, id,
threadID: shimmedRawMessageInfo.threadID, threadID: rawMessageInfo.threadID,
creatorID: shimmedRawMessageInfo.creatorID, creatorID: rawMessageInfo.creatorID,
time: shimmedRawMessageInfo.time, time: rawMessageInfo.time,
robotext: multimediaMessagePreview(shimmedRawMessageInfo), robotext: multimediaMessagePreview(rawMessageInfo),
unsupportedMessageInfo: shimmedRawMessageInfo, unsupportedMessageInfo: rawMessageInfo,
}; };
} }
}, },
unshimMessageInfo( unshimMessageInfo(
unwrapped: RawMediaMessageInfo | RawImagesMessageInfo, unwrapped: RawMediaMessageInfo | RawImagesMessageInfo,
messageInfo: RawMessageInfo, messageInfo: RawMessageInfo,
): ?RawMessageInfo { ): ?RawMessageInfo {
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Lines ): string {
); );
}, },
generatesNotifs: async () => pushTypes.NOTIF, generatesNotifs: async () => pushTypes.NOTIF,
includedInRepliesCount: true, includedInRepliesCount: true,
}); });
function shimMediaMessageInfo(
rawMessageInfo: RawMultimediaMessageInfo,
platformDetails: ?PlatformDetails,
): RawMultimediaMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) {
let uriChanged = false;
const newMedia: Image[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawImagesMessageInfo);
} else {
let uriChanged = false;
const newMedia: Media[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else if (singleMedia.type === 'photo') {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Video));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawMediaMessageInfo);
}
}
// Four photos were uploaded before dimensions were calculated server-side, // Four photos were uploaded before dimensions were calculated server-side,
// and delivered to clients without dimensions in the MultimediaMessageInfo. // and delivered to clients without dimensions in the MultimediaMessageInfo.
const preDimensionUploads = { const preDimensionUploads = {
'156642': { width: 1440, height: 1080 }, '156642': { width: 1440, height: 1080 },
'156649': { width: 720, height: 803 }, '156649': { width: 720, height: 803 },
'156794': { width: 720, height: 803 }, '156794': { width: 720, height: 803 },
'156877': { width: 574, height: 454 }, '156877': { width: 574, height: 454 },
}; };
View Options

web/app.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
contentStringForMediaArray, contentStringForMediaArray,
multimediaMessagePreview, multimediaMessagePreview,
shimUploadURI,
} from '../../media/media-utils'; } from '../../media/media-utils';
import type { PlatformDetails } from '../../types/device-types'; import type { PlatformDetails } from '../../types/device-types';
import type { Media, Video, Image } from '../../types/media-types';
import { import {
messageTypes, messageTypes,
assertMessageType, assertMessageType,
isMediaMessageType, isMediaMessageType,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
MessageInfo, MessageInfo,
RawMessageInfo, RawMessageInfo,
RawMultimediaMessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
ImagesMessageData, ImagesMessageData,
RawImagesMessageInfo, RawImagesMessageInfo,
ImagesMessageInfo, ImagesMessageInfo,
} from '../../types/messages/images'; } from '../../types/messages/images';
import type { import type {
▲ Show 20 Lines • Show All 168 Lines • ▼ Show 20 Lines ): RawMediaMessageInfo | RawImagesMessageInfo {
} }
}, },
shimUnsupportedMessageInfo( shimUnsupportedMessageInfo(
rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo, rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo,
platformDetails: ?PlatformDetails, platformDetails: ?PlatformDetails,
): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo { ): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) { if (rawMessageInfo.type === messageTypes.IMAGES) {
const shimmedRawMessageInfo = shimMediaMessageInfo( return rawMessageInfo;
rawMessageInfo,
platformDetails,
);
return shimmedRawMessageInfo;
} else { } else {
ashoatUnsubmitted
Not Done
Inline Actions

Nit – I would remove this else block... the if has a return, so the else isn't necessary

ashoat: Nit – I would remove this `else` block... the `if` has a `return`, so the `else` isn't…
rohanAuthorUnsubmitted
Done
Inline Actions

Do you have a preference on merging the if statements or keeping the logic separate?

if (rawMessageInfo.type === messageTypes.IMAGES) {
  return rawMessageInfo;
}
if (hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}

vs.

if (rawMessageInfo.type === messageTypes.IMAGES || hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}
rohan: Do you have a preference on merging the if statements or keeping the logic separate? ```…
ashoatUnsubmitted
Not Done
Inline Actions

No strong preference. I would probably keep the former personally but I'm okay either way

ashoat: No strong preference. I would probably keep the former personally but I'm okay either way
const shimmedRawMessageInfo = shimMediaMessageInfo(
rawMessageInfo,
platformDetails,
);
// TODO figure out first native codeVersion supporting video playback // TODO figure out first native codeVersion supporting video playback
ashoatUnsubmitted
Not Done
Inline Actions

I think we can remove this TODO, right @atul?

ashoat: I think we can remove this `TODO`, right @atul?
atulUnsubmitted
Not Done
Inline Actions

Yes, sorry I should have remove that earlier.

atul: Yes, sorry I should have remove that earlier.
if (hasMinCodeVersion(platformDetails, 158)) { if (hasMinCodeVersion(platformDetails, 158)) {
return shimmedRawMessageInfo; return rawMessageInfo;
} }
const { id } = shimmedRawMessageInfo; const { id } = rawMessageInfo;
invariant(id !== null && id !== undefined, 'id should be set on server'); invariant(id !== null && id !== undefined, 'id should be set on server');
return { return {
type: messageTypes.UNSUPPORTED, type: messageTypes.UNSUPPORTED,
id, id,
threadID: shimmedRawMessageInfo.threadID, threadID: rawMessageInfo.threadID,
creatorID: shimmedRawMessageInfo.creatorID, creatorID: rawMessageInfo.creatorID,
time: shimmedRawMessageInfo.time, time: rawMessageInfo.time,
robotext: multimediaMessagePreview(shimmedRawMessageInfo), robotext: multimediaMessagePreview(rawMessageInfo),
unsupportedMessageInfo: shimmedRawMessageInfo, unsupportedMessageInfo: rawMessageInfo,
}; };
} }
}, },
unshimMessageInfo( unshimMessageInfo(
unwrapped: RawMediaMessageInfo | RawImagesMessageInfo, unwrapped: RawMediaMessageInfo | RawImagesMessageInfo,
messageInfo: RawMessageInfo, messageInfo: RawMessageInfo,
): ?RawMessageInfo { ): ?RawMessageInfo {
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Lines ): string {
); );
}, },
generatesNotifs: async () => pushTypes.NOTIF, generatesNotifs: async () => pushTypes.NOTIF,
includedInRepliesCount: true, includedInRepliesCount: true,
}); });
function shimMediaMessageInfo(
rawMessageInfo: RawMultimediaMessageInfo,
platformDetails: ?PlatformDetails,
): RawMultimediaMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) {
let uriChanged = false;
const newMedia: Image[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawImagesMessageInfo);
} else {
let uriChanged = false;
const newMedia: Media[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else if (singleMedia.type === 'photo') {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Video));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawMediaMessageInfo);
}
}
// Four photos were uploaded before dimensions were calculated server-side, // Four photos were uploaded before dimensions were calculated server-side,
// and delivered to clients without dimensions in the MultimediaMessageInfo. // and delivered to clients without dimensions in the MultimediaMessageInfo.
const preDimensionUploads = { const preDimensionUploads = {
'156642': { width: 1440, height: 1080 }, '156642': { width: 1440, height: 1080 },
'156649': { width: 720, height: 803 }, '156649': { width: 720, height: 803 },
'156794': { width: 720, height: 803 }, '156794': { width: 720, height: 803 },
'156877': { width: 574, height: 454 }, '156877': { width: 574, height: 454 },
}; };
View Options

web/crypto/opaque-utils.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
contentStringForMediaArray, contentStringForMediaArray,
multimediaMessagePreview, multimediaMessagePreview,
shimUploadURI,
} from '../../media/media-utils'; } from '../../media/media-utils';
import type { PlatformDetails } from '../../types/device-types'; import type { PlatformDetails } from '../../types/device-types';
import type { Media, Video, Image } from '../../types/media-types';
import { import {
messageTypes, messageTypes,
assertMessageType, assertMessageType,
isMediaMessageType, isMediaMessageType,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
MessageInfo, MessageInfo,
RawMessageInfo, RawMessageInfo,
RawMultimediaMessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
ImagesMessageData, ImagesMessageData,
RawImagesMessageInfo, RawImagesMessageInfo,
ImagesMessageInfo, ImagesMessageInfo,
} from '../../types/messages/images'; } from '../../types/messages/images';
import type { import type {
▲ Show 20 Lines • Show All 168 Lines • ▼ Show 20 Lines ): RawMediaMessageInfo | RawImagesMessageInfo {
} }
}, },
shimUnsupportedMessageInfo( shimUnsupportedMessageInfo(
rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo, rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo,
platformDetails: ?PlatformDetails, platformDetails: ?PlatformDetails,
): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo { ): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) { if (rawMessageInfo.type === messageTypes.IMAGES) {
const shimmedRawMessageInfo = shimMediaMessageInfo( return rawMessageInfo;
rawMessageInfo,
platformDetails,
);
return shimmedRawMessageInfo;
} else { } else {
ashoatUnsubmitted
Not Done
Inline Actions

Nit – I would remove this else block... the if has a return, so the else isn't necessary

ashoat: Nit – I would remove this `else` block... the `if` has a `return`, so the `else` isn't…
rohanAuthorUnsubmitted
Done
Inline Actions

Do you have a preference on merging the if statements or keeping the logic separate?

if (rawMessageInfo.type === messageTypes.IMAGES) {
  return rawMessageInfo;
}
if (hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}

vs.

if (rawMessageInfo.type === messageTypes.IMAGES || hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}
rohan: Do you have a preference on merging the if statements or keeping the logic separate? ```…
ashoatUnsubmitted
Not Done
Inline Actions

No strong preference. I would probably keep the former personally but I'm okay either way

ashoat: No strong preference. I would probably keep the former personally but I'm okay either way
const shimmedRawMessageInfo = shimMediaMessageInfo(
rawMessageInfo,
platformDetails,
);
// TODO figure out first native codeVersion supporting video playback // TODO figure out first native codeVersion supporting video playback
ashoatUnsubmitted
Not Done
Inline Actions

I think we can remove this TODO, right @atul?

ashoat: I think we can remove this `TODO`, right @atul?
atulUnsubmitted
Not Done
Inline Actions

Yes, sorry I should have remove that earlier.

atul: Yes, sorry I should have remove that earlier.
if (hasMinCodeVersion(platformDetails, 158)) { if (hasMinCodeVersion(platformDetails, 158)) {
return shimmedRawMessageInfo; return rawMessageInfo;
} }
const { id } = shimmedRawMessageInfo; const { id } = rawMessageInfo;
invariant(id !== null && id !== undefined, 'id should be set on server'); invariant(id !== null && id !== undefined, 'id should be set on server');
return { return {
type: messageTypes.UNSUPPORTED, type: messageTypes.UNSUPPORTED,
id, id,
threadID: shimmedRawMessageInfo.threadID, threadID: rawMessageInfo.threadID,
creatorID: shimmedRawMessageInfo.creatorID, creatorID: rawMessageInfo.creatorID,
time: shimmedRawMessageInfo.time, time: rawMessageInfo.time,
robotext: multimediaMessagePreview(shimmedRawMessageInfo), robotext: multimediaMessagePreview(rawMessageInfo),
unsupportedMessageInfo: shimmedRawMessageInfo, unsupportedMessageInfo: rawMessageInfo,
}; };
} }
}, },
unshimMessageInfo( unshimMessageInfo(
unwrapped: RawMediaMessageInfo | RawImagesMessageInfo, unwrapped: RawMediaMessageInfo | RawImagesMessageInfo,
messageInfo: RawMessageInfo, messageInfo: RawMessageInfo,
): ?RawMessageInfo { ): ?RawMessageInfo {
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Lines ): string {
); );
}, },
generatesNotifs: async () => pushTypes.NOTIF, generatesNotifs: async () => pushTypes.NOTIF,
includedInRepliesCount: true, includedInRepliesCount: true,
}); });
function shimMediaMessageInfo(
rawMessageInfo: RawMultimediaMessageInfo,
platformDetails: ?PlatformDetails,
): RawMultimediaMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) {
let uriChanged = false;
const newMedia: Image[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawImagesMessageInfo);
} else {
let uriChanged = false;
const newMedia: Media[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else if (singleMedia.type === 'photo') {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Video));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawMediaMessageInfo);
}
}
// Four photos were uploaded before dimensions were calculated server-side, // Four photos were uploaded before dimensions were calculated server-side,
// and delivered to clients without dimensions in the MultimediaMessageInfo. // and delivered to clients without dimensions in the MultimediaMessageInfo.
const preDimensionUploads = { const preDimensionUploads = {
'156642': { width: 1440, height: 1080 }, '156642': { width: 1440, height: 1080 },
'156649': { width: 720, height: 803 }, '156649': { width: 720, height: 803 },
'156794': { width: 720, height: 803 }, '156794': { width: 720, height: 803 },
'156877': { width: 574, height: 454 }, '156877': { width: 574, height: 454 },
}; };
View Options

web/package.json

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
contentStringForMediaArray, contentStringForMediaArray,
multimediaMessagePreview, multimediaMessagePreview,
shimUploadURI,
} from '../../media/media-utils'; } from '../../media/media-utils';
import type { PlatformDetails } from '../../types/device-types'; import type { PlatformDetails } from '../../types/device-types';
import type { Media, Video, Image } from '../../types/media-types';
import { import {
messageTypes, messageTypes,
assertMessageType, assertMessageType,
isMediaMessageType, isMediaMessageType,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
MessageInfo, MessageInfo,
RawMessageInfo, RawMessageInfo,
RawMultimediaMessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types'; } from '../../types/message-types';
import type { import type {
ImagesMessageData, ImagesMessageData,
RawImagesMessageInfo, RawImagesMessageInfo,
ImagesMessageInfo, ImagesMessageInfo,
} from '../../types/messages/images'; } from '../../types/messages/images';
import type { import type {
▲ Show 20 Lines • Show All 168 Lines • ▼ Show 20 Lines ): RawMediaMessageInfo | RawImagesMessageInfo {
} }
}, },
shimUnsupportedMessageInfo( shimUnsupportedMessageInfo(
rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo, rawMessageInfo: RawMediaMessageInfo | RawImagesMessageInfo,
platformDetails: ?PlatformDetails, platformDetails: ?PlatformDetails,
): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo { ): RawMediaMessageInfo | RawImagesMessageInfo | RawUnsupportedMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) { if (rawMessageInfo.type === messageTypes.IMAGES) {
const shimmedRawMessageInfo = shimMediaMessageInfo( return rawMessageInfo;
rawMessageInfo,
platformDetails,
);
return shimmedRawMessageInfo;
} else { } else {
ashoatUnsubmitted
Not Done
Inline Actions

Nit – I would remove this else block... the if has a return, so the else isn't necessary

ashoat: Nit – I would remove this `else` block... the `if` has a `return`, so the `else` isn't…
rohanAuthorUnsubmitted
Done
Inline Actions

Do you have a preference on merging the if statements or keeping the logic separate?

if (rawMessageInfo.type === messageTypes.IMAGES) {
  return rawMessageInfo;
}
if (hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}

vs.

if (rawMessageInfo.type === messageTypes.IMAGES || hasMinCodeVersion(platformDetails, 158)) {
  return rawMessageInfo;
}
rohan: Do you have a preference on merging the if statements or keeping the logic separate? ```…
ashoatUnsubmitted
Not Done
Inline Actions

No strong preference. I would probably keep the former personally but I'm okay either way

ashoat: No strong preference. I would probably keep the former personally but I'm okay either way
const shimmedRawMessageInfo = shimMediaMessageInfo(
rawMessageInfo,
platformDetails,
);
// TODO figure out first native codeVersion supporting video playback // TODO figure out first native codeVersion supporting video playback
ashoatUnsubmitted
Not Done
Inline Actions

I think we can remove this TODO, right @atul?

ashoat: I think we can remove this `TODO`, right @atul?
atulUnsubmitted
Not Done
Inline Actions

Yes, sorry I should have remove that earlier.

atul: Yes, sorry I should have remove that earlier.
if (hasMinCodeVersion(platformDetails, 158)) { if (hasMinCodeVersion(platformDetails, 158)) {
return shimmedRawMessageInfo; return rawMessageInfo;
} }
const { id } = shimmedRawMessageInfo; const { id } = rawMessageInfo;
invariant(id !== null && id !== undefined, 'id should be set on server'); invariant(id !== null && id !== undefined, 'id should be set on server');
return { return {
type: messageTypes.UNSUPPORTED, type: messageTypes.UNSUPPORTED,
id, id,
threadID: shimmedRawMessageInfo.threadID, threadID: rawMessageInfo.threadID,
creatorID: shimmedRawMessageInfo.creatorID, creatorID: rawMessageInfo.creatorID,
time: shimmedRawMessageInfo.time, time: rawMessageInfo.time,
robotext: multimediaMessagePreview(shimmedRawMessageInfo), robotext: multimediaMessagePreview(rawMessageInfo),
unsupportedMessageInfo: shimmedRawMessageInfo, unsupportedMessageInfo: rawMessageInfo,
}; };
} }
}, },
unshimMessageInfo( unshimMessageInfo(
unwrapped: RawMediaMessageInfo | RawImagesMessageInfo, unwrapped: RawMediaMessageInfo | RawImagesMessageInfo,
messageInfo: RawMessageInfo, messageInfo: RawMessageInfo,
): ?RawMessageInfo { ): ?RawMessageInfo {
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Lines ): string {
); );
}, },
generatesNotifs: async () => pushTypes.NOTIF, generatesNotifs: async () => pushTypes.NOTIF,
includedInRepliesCount: true, includedInRepliesCount: true,
}); });
function shimMediaMessageInfo(
rawMessageInfo: RawMultimediaMessageInfo,
platformDetails: ?PlatformDetails,
): RawMultimediaMessageInfo {
if (rawMessageInfo.type === messageTypes.IMAGES) {
let uriChanged = false;
const newMedia: Image[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawImagesMessageInfo);
} else {
let uriChanged = false;
const newMedia: Media[] = [];
for (const singleMedia of rawMessageInfo.media) {
const shimmedURI = shimUploadURI(singleMedia.uri, platformDetails);
if (shimmedURI === singleMedia.uri) {
newMedia.push(singleMedia);
} else if (singleMedia.type === 'photo') {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Image));
uriChanged = true;
} else {
newMedia.push(({ ...singleMedia, uri: shimmedURI }: Video));
uriChanged = true;
}
}
if (!uriChanged) {
return rawMessageInfo;
}
return ({
...rawMessageInfo,
media: newMedia,
}: RawMediaMessageInfo);
}
}
// Four photos were uploaded before dimensions were calculated server-side, // Four photos were uploaded before dimensions were calculated server-side,
// and delivered to clients without dimensions in the MultimediaMessageInfo. // and delivered to clients without dimensions in the MultimediaMessageInfo.
const preDimensionUploads = { const preDimensionUploads = {
'156642': { width: 1440, height: 1080 }, '156642': { width: 1440, height: 1080 },
'156649': { width: 720, height: 803 }, '156649': { width: 720, height: 803 },
'156794': { width: 720, height: 803 }, '156794': { width: 720, height: 803 },
'156877': { width: 574, height: 454 }, '156877': { width: 574, height: 454 },
}; };
View Options

web/webpack.config.cjs

Loading...
View Options

yarn.lock

Loading...