Changeset View
Changeset View
Standalone View
Standalone View
web/media/multimedia.react.js
| // @flow | // @flow | ||||
| import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
| import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { CircularProgressbar } from 'react-circular-progressbar'; | import { CircularProgressbar } from 'react-circular-progressbar'; | ||||
| import 'react-circular-progressbar/dist/styles.css'; | import 'react-circular-progressbar/dist/styles.css'; | ||||
| import { | import { | ||||
| XCircle as XCircleIcon, | XCircle as XCircleIcon, | ||||
| AlertCircle as AlertCircleIcon, | AlertCircle as AlertCircleIcon, | ||||
| } from 'react-feather'; | } from 'react-feather'; | ||||
| import { | import { | ||||
| useModalContext, | useModalContext, | ||||
| type PushModal, | type PushModal, | ||||
| } from 'lib/components/modal-provider.react.js'; | } from 'lib/components/modal-provider.react.js'; | ||||
| import { fetchableMediaURI } from 'lib/media/media-utils.js'; | |||||
| import type { MediaType, EncryptedMediaType } from 'lib/types/media-types.js'; | import type { MediaType, EncryptedMediaType } 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'; | ||||
| import MultimediaModal from './multimedia-modal.react.js'; | import MultimediaModal from './multimedia-modal.react.js'; | ||||
| import Button from '../components/button.react.js'; | import Button from '../components/button.react.js'; | ||||
| import { type PendingMultimediaUpload } from '../input/input-state.js'; | import { type PendingMultimediaUpload } from '../input/input-state.js'; | ||||
| ▲ Show 20 Lines • Show All 88 Lines • ▼ Show 20 Lines | const imageContainerClasses = [ | ||||
| css.multimediaImage, | css.multimediaImage, | ||||
| multimediaImageCSSClass, | multimediaImageCSSClass, | ||||
| ]; | ]; | ||||
| imageContainerClasses.push(css.clickable); | imageContainerClasses.push(css.clickable); | ||||
| // Media element is the actual image or video element (or encrypted version) | // Media element is the actual image or video element (or encrypted version) | ||||
| let mediaElement; | let mediaElement; | ||||
| if (mediaSource.type === 'photo') { | if (mediaSource.type === 'photo') { | ||||
| mediaElement = <img src={mediaSource.uri} />; | const uri = fetchableMediaURI(mediaSource.uri); | ||||
| mediaElement = <img src={uri} />; | |||||
| } else if (mediaSource.type === 'video') { | } else if (mediaSource.type === 'video') { | ||||
| const uri = fetchableMediaURI(mediaSource.uri); | |||||
| mediaElement = ( | mediaElement = ( | ||||
| <video controls> | <video controls> | ||||
| <source src={mediaSource.uri} /> | <source src={uri} /> | ||||
| </video> | </video> | ||||
| ); | ); | ||||
| } else if ( | } else if ( | ||||
| mediaSource.type === 'encrypted_photo' || | mediaSource.type === 'encrypted_photo' || | ||||
| mediaSource.type === 'encrypted_video' | mediaSource.type === 'encrypted_video' | ||||
| ) { | ) { | ||||
| const { ...encryptedMediaProps } = mediaSource; | const { ...encryptedMediaProps } = mediaSource; | ||||
| mediaElement = <EncryptedMultimedia {...encryptedMediaProps} />; | mediaElement = <EncryptedMultimedia {...encryptedMediaProps} />; | ||||
| ▲ Show 20 Lines • Show All 57 Lines • Show Last 20 Lines | |||||