Page MenuHomePhabricator
Differential D5726

[web] Added on enter animation for typeahead overlay.
ClosedPublic
Actions

Authored by • przemek on Nov 25 2022, 3:40 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 29, 10:09 PM
Unknown Object (File)
Sat, Mar 29, 8:46 AM
Unknown Object (File)
Wed, Mar 12, 3:32 PM
Unknown Object (File)
Wed, Mar 5, 4:54 PM
Unknown Object (File)
Jan 30 2025, 9:05 AM
Unknown Object (File)
Jan 25 2025, 2:40 AM
Unknown Object (File)
Jan 23 2025, 11:08 AM
Unknown Object (File)
Jan 23 2025, 11:08 AM
View All Files
Subscribers
ashoat
atul
kamil
tomek

Details

Reviewers
tomek
atul
kamil
Commits
rCOMMfd77f5bcf28a: [web] Added on enter animation for typeahead overlay.
Summary

As specified in the design, added 100ms ease-in animation.

Test Plan

See video:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

Diff 18953

View Options

web/chat/mention-suggestion-tooltip.css

Show First 20 Lines • Show All 715 Lines • ▼ Show 20 Lines steps.push({
inputFilename: filename, inputFilename: filename,
outputMediaType: uploadResult && uploadResult.mediaType, outputMediaType: uploadResult && uploadResult.mediaType,
outputURI: uploadResult && uploadResult.uri, outputURI: uploadResult && uploadResult.uri,
outputDimensions: uploadResult && uploadResult.dimensions, outputDimensions: uploadResult && uploadResult.dimensions,
outputLoop: uploadResult && uploadResult.loop, outputLoop: uploadResult && uploadResult.loop,
hasWiFi, hasWiFi,
}); });
const promises = []; const cleanupPromises = [];
if (shouldDisposePath) { if (shouldDisposePath) {
// If processMedia needed to do any transcoding before upload, we dispose // If processMedia needed to do any transcoding before upload, we dispose
// of the resultant temporary file here. Since the transcoded temporary // of the resultant temporary file here. Since the transcoded temporary
// file is only used for upload, we can dispose of it after processMedia // file is only used for upload, we can dispose of it after processMedia
// (reportPromise) and the upload are complete // (reportPromise) and the upload are complete
promises.push( cleanupPromises.push(
(async () => { (async () => {
const disposeStep = await disposeTempFile(shouldDisposePath); const disposeStep = await disposeTempFile(shouldDisposePath);
steps.push(disposeStep); steps.push(disposeStep);
})(), })(),
); );
} }
// if there's a thumbnail we'll temporarily unlink it here // if there's a thumbnail we'll temporarily unlink it here
// instead of in media-utils, will be changed in later diffs // instead of in media-utils, will be changed in later diffs
if (processedMedia.mediaType === 'video') { if (processedMedia.mediaType === 'video') {
const { uploadThumbnailURI } = processedMedia; const { uploadThumbnailURI } = processedMedia;
promises.push( cleanupPromises.push(
(async () => { (async () => {
const disposeStep = await disposeTempFile(uploadThumbnailURI); const disposeStep = await disposeTempFile(uploadThumbnailURI);
steps.push(disposeStep); steps.push(disposeStep);
})(), })(),
); );
} }
if (selection.captureTime || selection.step === 'photo_paste') { if (selection.captureTime || selection.step === 'photo_paste') {
// If we are uploading a newly captured photo, we dispose of the original // If we are uploading a newly captured photo, we dispose of the original
// file here. Note that we try to save photo captures to the camera roll // file here. Note that we try to save photo captures to the camera roll
// if we have permission. Even if we fail, this temporary file isn't // if we have permission. Even if we fail, this temporary file isn't
// visible to the user, so there's no point in keeping it around. Since // visible to the user, so there's no point in keeping it around. Since
// the initial URI is used in rendering paths, we have to wait for it to // the initial URI is used in rendering paths, we have to wait for it to
// be replaced with the remote URI before we can dispose. Check out the // be replaced with the remote URI before we can dispose. Check out the
// Multimedia component to see how the URIs get switched out. // Multimedia component to see how the URIs get switched out.
const captureURI = selection.uri; const captureURI = selection.uri;
promises.push( cleanupPromises.push(
(async () => { (async () => {
const { const {
steps: clearSteps, steps: clearSteps,
result: capturePath, result: capturePath,
} = await this.waitForCaptureURIUnload(captureURI); } = await this.waitForCaptureURIUnload(captureURI);
steps.push(...clearSteps); steps.push(...clearSteps);
if (!capturePath) { if (!capturePath) {
return; return;
} }
const disposeStep = await disposeTempFile(capturePath); const disposeStep = await disposeTempFile(capturePath);
steps.push(disposeStep); steps.push(disposeStep);
})(), })(),
); );
} }
await Promise.all(promises); await Promise.all(cleanupPromises);
return await onUploadFinished(mediaMissionResult); return await onUploadFinished(mediaMissionResult);
} }
mediaProcessConfig(localMessageID: string, localID: string) { mediaProcessConfig(localMessageID: string, localID: string) {
const { hasWiFi, viewerID } = this.props; const { hasWiFi, viewerID } = this.props;
const onTranscodingProgress = (percent: number) => { const onTranscodingProgress = (percent: number) => {
this.setProgress(localMessageID, localID, 'transcoding', percent); this.setProgress(localMessageID, localID, 'transcoding', percent);
▲ Show 20 Lines • Show All 579 Lines • Show Last 20 Lines
View Options

web/chat/mention-suggestion-tooltip.react.js

Show First 20 Lines • Show All 715 Lines • ▼ Show 20 Lines steps.push({
inputFilename: filename, inputFilename: filename,
outputMediaType: uploadResult && uploadResult.mediaType, outputMediaType: uploadResult && uploadResult.mediaType,
outputURI: uploadResult && uploadResult.uri, outputURI: uploadResult && uploadResult.uri,
outputDimensions: uploadResult && uploadResult.dimensions, outputDimensions: uploadResult && uploadResult.dimensions,
outputLoop: uploadResult && uploadResult.loop, outputLoop: uploadResult && uploadResult.loop,
hasWiFi, hasWiFi,
}); });
const promises = []; const cleanupPromises = [];
if (shouldDisposePath) { if (shouldDisposePath) {
// If processMedia needed to do any transcoding before upload, we dispose // If processMedia needed to do any transcoding before upload, we dispose
// of the resultant temporary file here. Since the transcoded temporary // of the resultant temporary file here. Since the transcoded temporary
// file is only used for upload, we can dispose of it after processMedia // file is only used for upload, we can dispose of it after processMedia
// (reportPromise) and the upload are complete // (reportPromise) and the upload are complete
promises.push( cleanupPromises.push(
(async () => { (async () => {
const disposeStep = await disposeTempFile(shouldDisposePath); const disposeStep = await disposeTempFile(shouldDisposePath);
steps.push(disposeStep); steps.push(disposeStep);
})(), })(),
); );
} }
// if there's a thumbnail we'll temporarily unlink it here // if there's a thumbnail we'll temporarily unlink it here
// instead of in media-utils, will be changed in later diffs // instead of in media-utils, will be changed in later diffs
if (processedMedia.mediaType === 'video') { if (processedMedia.mediaType === 'video') {
const { uploadThumbnailURI } = processedMedia; const { uploadThumbnailURI } = processedMedia;
promises.push( cleanupPromises.push(
(async () => { (async () => {
const disposeStep = await disposeTempFile(uploadThumbnailURI); const disposeStep = await disposeTempFile(uploadThumbnailURI);
steps.push(disposeStep); steps.push(disposeStep);
})(), })(),
); );
} }
if (selection.captureTime || selection.step === 'photo_paste') { if (selection.captureTime || selection.step === 'photo_paste') {
// If we are uploading a newly captured photo, we dispose of the original // If we are uploading a newly captured photo, we dispose of the original
// file here. Note that we try to save photo captures to the camera roll // file here. Note that we try to save photo captures to the camera roll
// if we have permission. Even if we fail, this temporary file isn't // if we have permission. Even if we fail, this temporary file isn't
// visible to the user, so there's no point in keeping it around. Since // visible to the user, so there's no point in keeping it around. Since
// the initial URI is used in rendering paths, we have to wait for it to // the initial URI is used in rendering paths, we have to wait for it to
// be replaced with the remote URI before we can dispose. Check out the // be replaced with the remote URI before we can dispose. Check out the
// Multimedia component to see how the URIs get switched out. // Multimedia component to see how the URIs get switched out.
const captureURI = selection.uri; const captureURI = selection.uri;
promises.push( cleanupPromises.push(
(async () => { (async () => {
const { const {
steps: clearSteps, steps: clearSteps,
result: capturePath, result: capturePath,
} = await this.waitForCaptureURIUnload(captureURI); } = await this.waitForCaptureURIUnload(captureURI);
steps.push(...clearSteps); steps.push(...clearSteps);
if (!capturePath) { if (!capturePath) {
return; return;
} }
const disposeStep = await disposeTempFile(capturePath); const disposeStep = await disposeTempFile(capturePath);
steps.push(disposeStep); steps.push(disposeStep);
})(), })(),
); );
} }
await Promise.all(promises); await Promise.all(cleanupPromises);
return await onUploadFinished(mediaMissionResult); return await onUploadFinished(mediaMissionResult);
} }
mediaProcessConfig(localMessageID: string, localID: string) { mediaProcessConfig(localMessageID: string, localID: string) {
const { hasWiFi, viewerID } = this.props; const { hasWiFi, viewerID } = this.props;
const onTranscodingProgress = (percent: number) => { const onTranscodingProgress = (percent: number) => {
this.setProgress(localMessageID, localID, 'transcoding', percent); this.setProgress(localMessageID, localID, 'transcoding', percent);
▲ Show 20 Lines • Show All 579 Lines • Show Last 20 Lines