Page MenuHomePhabricator
Differential D7489

[native] Fix construction of `MediaLibrarySelection`
ClosedPublic
Actions

Authored by atul on Apr 18 2023, 9:19 AM.
Tags
None
Referenced Files
Unknown Object (File)
Fri, Mar 28, 7:38 AM
Unknown Object (File)
Mar 2 2025, 5:32 PM
Unknown Object (File)
Mar 2 2025, 5:32 PM
Unknown Object (File)
Mar 2 2025, 5:32 PM
Unknown Object (File)
Mar 2 2025, 5:23 PM
Unknown Object (File)
Feb 24 2025, 5:24 PM
Unknown Object (File)
Feb 24 2025, 5:23 PM
Unknown Object (File)
Feb 24 2025, 5:23 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
Commits
rCOMM580f1174065e: [native] Fix construction of `MediaLibrarySelection`
Summary

When addressing feedback on D7476 mistakenly set retries to currentTime when it should remain 0.

Test Plan

NA

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
components/
2 lines

Diff 25278

View Options

native/components/edit-avatar.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import 'react-circular-progressbar/dist/styles.css'; import 'react-circular-progressbar/dist/styles.css';
import { AlertCircle as AlertCircleIcon } from 'react-feather'; import { AlertCircle as AlertCircleIcon } from 'react-feather';
import type { Shape } from 'lib/types/core.js'; import type { Shape } from 'lib/types/core.js';
import type { EncryptedMediaType } from 'lib/types/media-types.js'; import type { EncryptedMediaType } from 'lib/types/media-types.js';
import { decryptMedia } from './encryption-utils.js'; import { decryptMedia } from './encryption-utils.js';
import LoadableVideo from './loadable-video.react.js'; import LoadableVideo from './loadable-video.react.js';
import css from './media.css'; import css from './media.css';
import LoadingIndicator from '../loading-indicator.react.js'; import LoadingIndicator from '../loading-indicator.react.js';
type Props = { type Props = {
+holder: string, +blobURI: string,
+encryptionKey: string, +encryptionKey: string,
+type: EncryptedMediaType, +type: EncryptedMediaType,
+thumbnailHolder?: ?string, +thumbnailBlobURI?: ?string,
+thumbnailEncryptionKey?: ?string, +thumbnailEncryptionKey?: ?string,
+placeholderSrc?: ?string, +placeholderSrc?: ?string,
+multimediaClassName?: string, +multimediaClassName?: string,
+elementStyle?: ?Shape<CSSStyleDeclaration>, +elementStyle?: ?Shape<CSSStyleDeclaration>,
}; };
function EncryptedMultimedia(props: Props): React.Node { function EncryptedMultimedia(props: Props): React.Node {
const { const {
holder, blobURI,
encryptionKey, encryptionKey,
placeholderSrc, placeholderSrc,
elementStyle, elementStyle,
multimediaClassName, multimediaClassName,
} = props; } = props;
const [source, setSource] = React.useState(null); const [source, setSource] = React.useState(null);
const videoRef = React.useRef(null); const videoRef = React.useRef(null);
React.useEffect(() => { React.useEffect(() => {
let isMounted = true, let isMounted = true,
uriToDispose; uriToDispose;
setSource(null); setSource(null);
const loadDecrypted = async () => { const loadDecrypted = async () => {
const { result } = await decryptMedia(holder, encryptionKey); const { result } = await decryptMedia(blobURI, encryptionKey);
if (!isMounted) { if (!isMounted) {
return; return;
} }
if (result.success) { if (result.success) {
const { uri } = result; const { uri } = result;
setSource({ uri }); setSource({ uri });
uriToDispose = uri; uriToDispose = uri;
} else { } else {
setSource({ error: result.reason }); setSource({ error: result.reason });
} }
}; };
loadDecrypted(); loadDecrypted();
return () => { return () => {
isMounted = false; isMounted = false;
if (uriToDispose) { if (uriToDispose) {
URL.revokeObjectURL(uriToDispose); URL.revokeObjectURL(uriToDispose);
} }
}; };
}, [holder, encryptionKey]); }, [blobURI, encryptionKey]);
// we need to update the video source when the source changes // we need to update the video source when the source changes
// because re-rendering the <source> element wouldn't reload parent <video> // because re-rendering the <source> element wouldn't reload parent <video>
React.useEffect(() => { React.useEffect(() => {
if (videoRef.current && source?.uri) { if (videoRef.current && source?.uri) {
videoRef.current.src = source.uri; videoRef.current.src = source.uri;
videoRef.current.load(); videoRef.current.load();
} }
Show All 16 Lines if (source?.error) {
errorIndicator = <AlertCircleIcon className={css.uploadError} size={36} />; errorIndicator = <AlertCircleIcon className={css.uploadError} size={36} />;
} }
let mediaNode; let mediaNode;
if (props.type === 'encrypted_photo') { if (props.type === 'encrypted_photo') {
mediaNode = ( mediaNode = (
<img <img
src={source?.uri ?? placeholderSrc} src={source?.uri ?? placeholderSrc}
key={holder} key={blobURI}
className={multimediaClassName} className={multimediaClassName}
style={elementStyle} style={elementStyle}
/> />
); );
} else { } else {
const { thumbnailHolder, thumbnailEncryptionKey } = props; const { thumbnailBlobURI, thumbnailEncryptionKey } = props;
invariant( invariant(
thumbnailHolder && thumbnailEncryptionKey, thumbnailBlobURI && thumbnailEncryptionKey,
'Thumbnail missing for encrypted video', 'Thumbnail missing for encrypted video',
); );
mediaNode = ( mediaNode = (
<LoadableVideo <LoadableVideo
uri={null} uri={null}
ref={videoRef} ref={videoRef}
key={holder} key={blobURI}
thumbnailSource={{ thumbnailHolder, thumbnailEncryptionKey }} thumbnailSource={{ thumbnailBlobURI, thumbnailEncryptionKey }}
elementStyle={elementStyle} elementStyle={elementStyle}
thumbHashDataURL={placeholderSrc} thumbHashDataURL={placeholderSrc}
multimediaClassName={multimediaClassName} multimediaClassName={multimediaClassName}
/> />
); );
} }
return ( return (
Show All 9 Lines