Changeset View
Changeset View
Standalone View
Standalone View
native/media/multimedia.react.js
| Show All 10 Lines | |||||
| import EncryptedImage from './encrypted-image.react.js'; | import EncryptedImage from './encrypted-image.react.js'; | ||||
| import RemoteImage from './remote-image.react.js'; | import RemoteImage from './remote-image.react.js'; | ||||
| import { type InputState, InputStateContext } from '../input/input-state.js'; | import { type InputState, InputStateContext } from '../input/input-state.js'; | ||||
| type Source = | type Source = | ||||
| | { | | { | ||||
| +kind: 'uri', | +kind: 'uri', | ||||
| +uri: string, | +uri: string, | ||||
| +thumbHash?: ?string, | |||||
| } | } | ||||
| | { | | { | ||||
| +kind: 'encrypted', | +kind: 'encrypted', | ||||
| +holder: string, | +holder: string, | ||||
| +encryptionKey: string, | +encryptionKey: string, | ||||
| +thumbHash?: ?string, | |||||
| }; | }; | ||||
| type BaseProps = { | type BaseProps = { | ||||
| +mediaInfo: MediaInfo | AvatarMediaInfo, | +mediaInfo: MediaInfo | AvatarMediaInfo, | ||||
| +spinnerColor: string, | +spinnerColor: string, | ||||
| }; | }; | ||||
| type Props = { | type Props = { | ||||
| ...BaseProps, | ...BaseProps, | ||||
| // withInputState | // withInputState | ||||
| ▲ Show 20 Lines • Show All 74 Lines • ▼ Show 20 Lines | render() { | ||||
| } | } | ||||
| return <View style={styles.container}>{images}</View>; | return <View style={styles.container}>{images}</View>; | ||||
| } | } | ||||
| renderSource(source: Source, invisibleLoad?: boolean = false) { | renderSource(source: Source, invisibleLoad?: boolean = false) { | ||||
| if (source.kind === 'encrypted') { | if (source.kind === 'encrypted') { | ||||
| return ( | return ( | ||||
| <EncryptedImage | <EncryptedImage | ||||
| thumbHash={source.thumbHash} | |||||
| holder={source.holder} | holder={source.holder} | ||||
| encryptionKey={source.encryptionKey} | encryptionKey={source.encryptionKey} | ||||
| onLoad={this.onLoad} | onLoad={this.onLoad} | ||||
| spinnerColor={this.props.spinnerColor} | spinnerColor={this.props.spinnerColor} | ||||
| style={styles.image} | style={styles.image} | ||||
| invisibleLoad={invisibleLoad} | invisibleLoad={invisibleLoad} | ||||
| key={source.holder} | key={source.holder} | ||||
| /> | /> | ||||
| ); | ); | ||||
| } | } | ||||
| const { uri } = source; | const { uri, thumbHash } = source; | ||||
| const placeholder = thumbHash ? { thumbhash: thumbHash } : null; | |||||
| if (uri.startsWith('http')) { | if (uri.startsWith('http')) { | ||||
| return ( | return ( | ||||
| <RemoteImage | <RemoteImage | ||||
| uri={uri} | uri={uri} | ||||
| onLoad={this.onLoad} | onLoad={this.onLoad} | ||||
| placeholder={placeholder} | |||||
| spinnerColor={this.props.spinnerColor} | spinnerColor={this.props.spinnerColor} | ||||
| style={styles.image} | style={styles.image} | ||||
| invisibleLoad={invisibleLoad} | invisibleLoad={invisibleLoad} | ||||
| key={uri} | key={uri} | ||||
| /> | /> | ||||
| ); | ); | ||||
| } else { | } else { | ||||
| return ( | return ( | ||||
| <Image | <Image | ||||
| source={{ uri }} | source={{ uri }} | ||||
| onLoad={this.onLoad} | onLoad={this.onLoad} | ||||
| placeholder={placeholder} | |||||
| style={styles.image} | style={styles.image} | ||||
| key={uri} | key={uri} | ||||
| /> | /> | ||||
| ); | ); | ||||
| } | } | ||||
| } | } | ||||
| onLoad = () => { | onLoad = () => { | ||||
| ▲ Show 20 Lines • Show All 54 Lines • Show Last 20 Lines | |||||