diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js index 5511fdb4..c414dee2 100644 --- a/js/components/ascribe_detail/media_container.js +++ b/js/components/ascribe_detail/media_container.js @@ -3,6 +3,7 @@ import React from 'react'; import Button from 'react-bootstrap/lib/Button'; +import ProgressBar from 'react-bootstrap/lib/ProgressBar'; import MediaPlayer from './../ascribe_media/media_player'; @@ -13,17 +14,22 @@ import S3DownloadButton from '../ascribe_buttons/s3_download_button'; import CollapsibleButton from './../ascribe_collapsible/collapsible_button'; +import AscribeSpinner from '../ascribe_spinner'; + import AclProxy from '../acl_proxy'; +import AppConstants from '../../constants/application_constants'; + import { getLangText } from '../../utils/lang_utils'; -import { extractFileExtensionFromString } from '../../utils/file_utils'; + +import { extractFileExtensionFromUrl } from '../../utils/file_utils'; const EMBED_IFRAME_HEIGHT = { video: 315, audio: 62 }; -const ENCODE_UPDATE_TIME = 5000; + let MediaContainer = React.createClass({ propTypes: { @@ -41,21 +47,18 @@ let MediaContainer = React.createClass({ componentDidMount() { const { content: { digital_work: digitalWork }, refreshObject } = this.props; + const { timerId } = this.state; - if (digitalWork) { - const isEncoding = digitalWork.isEncoding; - - if (digitalWork.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { - this.setState({ - timerId: window.setInterval(refreshObject, ENCODE_UPDATE_TIME) - }); - } + if (digitalWork && (this.isVideoEncoding() || this.isImageEncoding()) && !timerId) { + this.setState({ timerId: window.setInterval(refreshObject, AppConstants.encodeUpdateThreshold) }); } }, componentWillUpdate() { - if (this.props.content.digital_work.isEncoding === 100) { - window.clearInterval(this.state.timerId); + const { timerId } = this.state; + + if (!(this.isVideoEncoding() || this.isImageEncoding()) && timerId) { + window.clearInterval(timerId); } }, @@ -63,30 +66,62 @@ let MediaContainer = React.createClass({ window.clearInterval(this.state.timerId); }, + isVideoEncoding() { + const { content: { digital_work: digitalWork } } = this.props; + return digitalWork.mime === 'video' && digitalWork.isEncoding === 'number' && digitalWork.isEncoding !== 100; + }, + + isImageEncoding() { + const { content: { thumbnail, digital_work: digitalWork } } = this.props; + const thumbnailFileExtension = extractFileExtensionFromUrl(thumbnail.thumbnail_sizes['600x600']); + + return digitalWork.mime === 'image' && (thumbnailFileExtension === 'tif' || thumbnailFileExtension === 'tiff'); + }, + + getEncodingMessage() { + if (this.isVideoEncoding()) { + const { digital_work: digitalWork } = this.props; + + return ( +
+ We successfully received your video and it is now being encoded.
+
You can leave this page and check back on the status later.
+
- {preview} + {thumbnail}
- We successfully received your video and it is now being encoded.
-
You can leave this page and check back on the status later.
-