From 4fdab505e7b9bc184fb4f3b41e85f10dc5574a9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Thu, 10 Mar 2016 14:33:54 +0100 Subject: [PATCH] Restructure MediaPlayer - encoding evaluation taken out to MediaContainer --- .../ascribe_detail/media_container.js | 86 +++++++++++-------- js/components/ascribe_media/media_player.js | 60 +++---------- 2 files changed, 61 insertions(+), 85 deletions(-) diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js index 45ea81a2..9d340ab8 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,6 +14,8 @@ 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'; @@ -45,7 +48,7 @@ let MediaContainer = React.createClass({ const { content: { digital_work: digitalWork }, refreshObject } = this.props; const { timerId } = this.state; - if (digitalWork && this.isDigitalWorkEncoding() && !timerId) { + if (digitalWork && (this.isVideoEncoding() || this.isImageEncoding()) && !timerId) { this.setState({ timerId: window.setInterval(refreshObject, AppConstants.encodeUpdateThreshold) }); } }, @@ -53,7 +56,7 @@ let MediaContainer = React.createClass({ componentWillUpdate() { const { timerId } = this.state; - if (!this.isDigitalWorkEncoding() && timerId) { + if (!(this.isVideoEncoding() || this.isImageEncoding()) && timerId) { window.clearInterval(timerId); } }, @@ -62,36 +65,50 @@ let MediaContainer = React.createClass({ window.clearInterval(this.state.timerId); }, - /* - * A digital work is encoding if: - * - * - it's either a video that has `isEncoding` < 100 - * - of a .tif|.tiff file that has not yet been converted - * to a .jpeg thumbnail - */ - isDigitalWorkEncoding() { - const { - content: { - digital_work: digitalWork, - thumbnail - } } = this.props; + isVideoEncoding() { + const { content: { digital_work: digitalWork } } = this.props; + return digitalWork.mime === 'video' && digitalWork.isEncoding === 'number' && digitalWork.isEncoding !== 100; + }, - return ( - ( - digitalWork.mime === 'video' && - typeof digitalWork.isEncoding === 'number' && - digitalWork.isEncoding !== 100 - ) - || - ( - digitalWork.mime === 'image' && - (this.getFileExtensionFromUrl(thumbnail.url) === 'tif' || this.getFileExtensionFromUrl(thumbnail.url) === 'tiff') - ) - ); + isImageEncoding() { + const { content: { thumbnail, digital_work: digitalWork } } = this.props; + const thumbnailFileExtension = this.getFileExtensionFromUrl(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. +

+ +
+ ); + } else if (this.isImageEncoding()) { + return ( +
+ + + {getLangText('We successfully received your image and it is now being encoded.')} +
+ {getLangText('We will be refreshing this page as soon as encoding has finished.')} +
+ {getLangText('(You may close this page)')} + +
+ ); + } }, getFileExtensionFromUrl(url) { - // We want to show the file's extension as a label of the download button. // We can however not only use `extractFileExtensionFromString` on the url for that // as files might be saved on S3 without a file extension which leads @@ -105,19 +122,17 @@ let MediaContainer = React.createClass({ render() { const { content, currentUser } = this.props; - + const mimetype = content.digital_work.mime; // Pieces and editions are joined to the user by a foreign key in the database, so // the information in content will be updated if a user updates their username. // We also force uniqueness of usernames, so this check is safe to dtermine if the // content was registered by the current user. const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered); + const thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? content.thumbnail.thumbnail_sizes['600x600'] + : content.thumbnail.url_safe; - let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? - content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe; - let mimetype = content.digital_work.mime; let embed = null; let extraData = null; - let isEmbedDisabled = mimetype === 'video' && content.digital_work.isEncoding !== undefined && content.digital_work.isEncoding !== 100; if (content.digital_work.encoding_urls) { extraData = content.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; }); @@ -132,7 +147,7 @@ let MediaContainer = React.createClass({ } @@ -149,10 +164,9 @@ let MediaContainer = React.createClass({ + encodingMessage={this.getEncodingMessage()} />

diff --git a/js/components/ascribe_media/media_player.js b/js/components/ascribe_media/media_player.js index 7811be78..93fe3995 100644 --- a/js/components/ascribe_media/media_player.js +++ b/js/components/ascribe_media/media_player.js @@ -4,14 +4,10 @@ import React from 'react'; import Q from 'q'; import Panel from 'react-bootstrap/lib/Panel'; -import ProgressBar from 'react-bootstrap/lib/ProgressBar'; - -import AscribeSpinner from '../ascribe_spinner'; import AppConstants from '../../constants/application_constants'; import { escapeHTML } from '../../utils/general_utils'; -import { getLangText } from '../../utils/lang_utils'; import { InjectInHeadUtils } from '../../utils/inject_utils'; /** @@ -135,8 +131,7 @@ let Video = React.createClass({ propTypes: { thumbnail: React.PropTypes.string.isRequired, url: React.PropTypes.string.isRequired, - extraData: React.PropTypes.array.isRequired, - encodingStatus: React.PropTypes.number + extraData: React.PropTypes.array.isRequired }, getInitialState() { @@ -204,61 +199,28 @@ let MediaPlayer = React.createClass({ propTypes: { mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired, thumbnail: React.PropTypes.string.isRequired, - thumbnailFileExtension: React.PropTypes.string, url: React.PropTypes.string.isRequired, extraData: React.PropTypes.array, - encodingStatus: React.PropTypes.number, - }, - - isVideoEncoding() { - const { mimetype, encodingStatus } = this.props; - return mimetype === 'video' && encodingStatus !== undefined && encodingStatus !== 100; - }, - - isImageEncoding() { - const { mimetype, thumbnailFileExtension } = this.props; - return mimetype === 'image' && (thumbnailFileExtension === 'tif' || thumbnailFileExtension === 'tiff'); + encodingMessage: React.PropTypes.node }, render() { - const { mimetype, - thumbnail, - url, - extraData, - encodingStatus } = this.props; + const { + mimetype, + thumbnail, + url, + extraData, + encodingMessage + } = this.props; - if (this.isVideoEncoding()) { - return ( -

-

- We successfully received your video and it is now being encoded. -
You can leave this page and check back on the status later. -

- -
- ); - } else if (this.isImageEncoding()) { - return ( -
- - - {getLangText('We successfully received your image and it is now being encoded.')} -
- {getLangText('We will be refreshing this page as soon as encoding has finished.')} -
- {getLangText('(You may close this page)')} - -
- ); + if (encodingMessage) { + return encodingMessage; } else { let Component = resourceMap[mimetype] || Other; let componentProps = { thumbnail, url, extraData, - encodingStatus }; // Since the launch of the portfolio whitelabel submission,