Changeset View
Changeset View
Standalone View
Standalone View
web/media/multimedia-modal.react.js
| // @flow | // @flow | ||||
| import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { XCircle as XCircleIcon } from 'react-feather'; | import { XCircle as XCircleIcon } from 'react-feather'; | ||||
| import { useModalContext } from 'lib/components/modal-provider.react.js'; | import { useModalContext } from 'lib/components/modal-provider.react.js'; | ||||
| import { fetchableMediaURI } from 'lib/media/media-utils.js'; | |||||
| import type { EncryptedMediaType, MediaType } from 'lib/types/media-types.js'; | import type { EncryptedMediaType, MediaType } from 'lib/types/media-types.js'; | ||||
| import EncryptedMultimedia from './encrypted-multimedia.react.js'; | import EncryptedMultimedia from './encrypted-multimedia.react.js'; | ||||
| import css from './media.css'; | import css from './media.css'; | ||||
| type MediaInfo = | type MediaInfo = | ||||
| | { | | { | ||||
| +type: MediaType, | +type: MediaType, | ||||
| Show All 21 Lines | componentDidMount() { | ||||
| invariant(this.overlay, 'overlay ref unset'); | invariant(this.overlay, 'overlay ref unset'); | ||||
| this.overlay.focus(); | this.overlay.focus(); | ||||
| } | } | ||||
| render(): React.Node { | render(): React.Node { | ||||
| let mediaModalItem; | let mediaModalItem; | ||||
| const { media } = this.props; | const { media } = this.props; | ||||
| if (media.type === 'photo') { | if (media.type === 'photo') { | ||||
| mediaModalItem = <img src={media.uri} />; | const uri = fetchableMediaURI(media.uri); | ||||
| mediaModalItem = <img src={uri} />; | |||||
| } else if (media.type === 'video') { | } else if (media.type === 'video') { | ||||
| const uri = fetchableMediaURI(media.uri); | |||||
| mediaModalItem = ( | mediaModalItem = ( | ||||
| <video controls> | <video controls> | ||||
| <source src={media.uri} /> | <source src={uri} /> | ||||
| </video> | </video> | ||||
| ); | ); | ||||
| } else { | } else { | ||||
| invariant( | invariant( | ||||
| media.type === 'encrypted_photo' || media.type === 'encrypted_video', | media.type === 'encrypted_photo' || media.type === 'encrypted_video', | ||||
| 'invalid media type', | 'invalid media type', | ||||
| ); | ); | ||||
| const { type, holder, encryptionKey } = media; | const { type, holder, encryptionKey } = media; | ||||
| ▲ Show 20 Lines • Show All 52 Lines • Show Last 20 Lines | |||||