Page MenuHomePhorge
Files F32902434

D7225.1768190486.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D7225.1768190486.diff
View Options

diff --git a/native/media/encrypted-image.react.js b/native/media/encrypted-image.react.js
new file mode 100644
--- /dev/null
+++ b/native/media/encrypted-image.react.js
@@ -0,0 +1,120 @@
+// @flow
+
+import { Image } from 'expo-image';
+import * as React from 'react';
+import { View, StyleSheet, ActivityIndicator } from 'react-native';
+
+import { decryptMedia } from './encryption-utils.js';
+import { useSelector } from '../redux/redux-utils.js';
+import type { ImageStyle } from '../types/styles.js';
+
+type BaseProps = {
+ +holder: string,
+ +encryptionKey: string,
+ +onLoad: (uri: string) => void,
+ +spinnerColor: string,
+ +style: ImageStyle,
+ +invisibleLoad: boolean,
+};
+type Props = {
+ ...BaseProps,
+};
+
+function EncryptedImage(props: Props): React.Node {
+ const { holder, encryptionKey, onLoad: onLoadProp } = props;
+
+ const connectionStatus = useSelector(state => state.connection.status);
+ const [prevConnectionStatus, setPrevConnectionStatus] =
+ React.useState(connectionStatus);
+ const [attempt, setAttempt] = React.useState(0);
+
+ const [source, setSource] = React.useState(null);
+
+ if (connectionStatus !== prevConnectionStatus) {
+ // attempt reload after connection is restored
+ if (!source && connectionStatus === 'connected') {
+ setAttempt(it => it + 1);
+ }
+ setPrevConnectionStatus(connectionStatus);
+ }
+
+ React.useEffect(() => {
+ let isMounted = true;
+ setSource(null);
+
+ const loadDecrypted = async () => {
+ const { result } = await decryptMedia(holder, encryptionKey, {
+ destination: 'data_uri',
+ });
+ // TODO: decide what to do if decryption fails
+ if (result.success && isMounted) {
+ setSource({ uri: result.uri });
+ }
+ };
+
+ loadDecrypted();
+
+ return () => {
+ isMounted = false;
+ };
+ }, [attempt, holder, encryptionKey]);
+
+ const onLoad = React.useCallback(() => {
+ onLoadProp && onLoadProp(holder);
+ }, [holder, onLoadProp]);
+
+ if (source) {
+ return (
+ <Image
+ source={source}
+ onLoad={onLoad}
+ style={props.style}
+ key={attempt}
+ />
+ );
+ }
+ if (props.invisibleLoad) {
+ return (
+ <Image
+ source={source}
+ onLoad={onLoad}
+ style={[props.style, styles.invisible]}
+ key={attempt}
+ />
+ );
+ }
+
+ return (
+ <View style={styles.container}>
+ <View style={styles.spinnerContainer}>
+ <ActivityIndicator color={props.spinnerColor} size="large" />
+ </View>
+ <Image
+ source={source}
+ onLoad={onLoad}
+ style={props.style}
+ key={attempt}
+ />
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ invisible: {
+ opacity: 0,
+ },
+ spinnerContainer: {
+ alignItems: 'center',
+ bottom: 0,
+ justifyContent: 'center',
+ left: 0,
+ position: 'absolute',
+ right: 0,
+ top: 0,
+ },
+});
+
+export default EncryptedImage;

File Metadata

Mime Type
text/plain
Expires
Mon, Jan 12, 4:01 AM (9 h, 16 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5921643
Default Alt Text
D7225.1768190486.diff (2 KB)

Event Timeline