ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #76 from ascribe/cleanup-mediacontainer 

Clean up MediaContainer
This commit is contained in:
Brett Sun 2016-01-11 17:49:52 +01:00
parent e8ef33571f cc16508e64
commit a6463087c0
6 changed files with 140 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
js/components/ascribe_detail/edition.js
View File

@ -1,7 +1,7 @@
'use strict';
import React from 'react';
import { Link, History } from 'react-router';
import { Link } from 'react-router';
import Moment from 'moment';
import Row from 'react-bootstrap/lib/Row';
@ -44,8 +44,6 @@ let Edition = React.createClass({
loadEdition: React.PropTypes.func
},
mixins: [History],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
@ -53,98 +51,103 @@ let Edition = React.createClass({
},
render() {
let FurtherDetailsType = this.props.furtherDetailsType;
const {
actionPanelButtonListType,
coaError,
currentUser,
edition,
furtherDetailsType: FurtherDetailsType,
loadEdition } = this.props;
return (
<Row>
<Col md={6} className="ascribe-print-col-left">
<MediaContainer
content={this.props.edition}/>
content={edition}
currentUser={currentUser} />
</Col>
<Col md={6} className="ascribe-edition-details ascribe-print-col-right">
<div className="ascribe-detail-header">
<hr className="hidden-print" style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
<DetailProperty label="BY" value={this.props.edition.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
<h1 className="ascribe-detail-title">{edition.title}</h1>
<DetailProperty label="BY" value={edition.artist_name} />
<DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
<hr/>
</div>
<EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType}
edition={this.props.edition}
currentUser={this.props.currentUser}
handleSuccess={this.props.loadEdition}/>
actionPanelButtonListType={actionPanelButtonListType}
edition={edition}
currentUser={currentUser}
handleSuccess={loadEdition}/>
<CollapsibleParagraph
title={getLangText('Certificate of Authenticity')}
show={this.props.edition.acl.acl_coa === true}>
show={edition.acl.acl_coa === true}>
<CoaDetails
coa={this.props.edition.coa}
coaError={this.props.coaError}
editionId={this.props.edition.bitcoin_id}/>
coa={edition.coa}
coaError={coaError}
editionId={edition.bitcoin_id}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Provenance/Ownership History')}
show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}>
show={edition.ownership_history && edition.ownership_history.length > 0}>
<HistoryIterator
history={this.props.edition.ownership_history} />
history={edition.ownership_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Consignment History')}
show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}>
show={edition.consign_history && edition.consign_history.length > 0}>
<HistoryIterator
history={this.props.edition.consign_history} />
history={edition.consign_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Loan History')}
show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}>
show={edition.loan_history && edition.loan_history.length > 0}>
<HistoryIterator
history={this.props.edition.loan_history} />
history={edition.loan_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
title="Notes"
show={!!(this.props.currentUser.username
|| this.props.edition.acl.acl_edit
|| this.props.edition.public_note)}>
show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
<Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (private)')}
defaultValue={this.props.edition.private_note ? this.props.edition.private_note : null}
defaultValue={edition.private_note ? edition.private_note : null}
placeholder={getLangText('Enter your comments ...')}
editable={true}
successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_edition}
currentUser={this.props.currentUser}/>
currentUser={currentUser}/>
<Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (public)')}
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
defaultValue={edition.public_note ? edition.public_note : null}
placeholder={getLangText('Enter your comments ...')}
editable={!!this.props.edition.acl.acl_edit}
show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit}
editable={!!edition.acl.acl_edit}
show={!!edition.public_note || !!edition.acl.acl_edit}
successMessage={getLangText('Public edition note saved')}
url={ApiUrls.note_public_edition}
currentUser={this.props.currentUser}/>
currentUser={currentUser}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Further Details')}
show={this.props.edition.acl.acl_edit
|| Object.keys(this.props.edition.extra_data).length > 0
|| this.props.edition.other_data.length > 0}>
show={edition.acl.acl_edit ||
Object.keys(edition.extra_data).length > 0 ||
edition.other_data.length > 0}>
<FurtherDetailsType
editable={this.props.edition.acl.acl_edit}
pieceId={this.props.edition.parent}
extraData={this.props.edition.extra_data}
otherData={this.props.edition.other_data}
handleSuccess={this.props.loadEdition} />
editable={edition.acl.acl_edit}
pieceId={edition.parent}
extraData={edition.extra_data}
otherData={edition.other_data}
handleSuccess={loadEdition} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('SPOOL Details')}>
<SpoolDetails
edition={this.props.edition} />
edition={edition} />
</CollapsibleParagraph>
</Col>
</Row>
@ -221,7 +224,11 @@ let EditionSummary = React.createClass({
let CoaDetails = React.createClass({
propTypes: {
editionId: React.PropTypes.string,
coa: React.PropTypes.object,
coa: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string,
React.PropTypes.object
]),
coaError: React.PropTypes.object
},

44
js/components/ascribe_detail/media_container.js
View File

@ -14,10 +14,6 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
import AclProxy from '../acl_proxy';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import { mergeOptions } from '../../utils/general_utils.js';
import { getLangText } from '../../utils/lang_utils.js';
const EMBED_IFRAME_HEIGHT = {
@ -28,25 +24,22 @@ const EMBED_IFRAME_HEIGHT = {
let MediaContainer = React.createClass({
propTypes: {
content: React.PropTypes.object,
currentUser: React.PropTypes.object,
refreshObject: React.PropTypes.func
},
getInitialState() {
return mergeOptions(
UserStore.getState(),
{
timerId: null
});
return {
timerId: null
};
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
if (!this.props.content.digital_work) {
return;
}
let isEncoding = this.props.content.digital_work.isEncoding;
const isEncoding = this.props.content.digital_work.isEncoding;
if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(this.props.refreshObject, 10000);
this.setState({timerId: timerId});
@ -60,22 +53,16 @@ let MediaContainer = React.createClass({
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
window.clearInterval(this.state.timerId);
},
onChange(state) {
this.setState(state);
},
render() {
const { content } = this.props;
const { content, currentUser } = this.props;
// 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 = this.state.currentUser && (this.state.currentUser.username === content.user_registered);
const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@ -94,8 +81,11 @@ let MediaContainer = React.createClass({
embed = (
<CollapsibleButton
button={
<Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}>
Embed
<Button
bsSize="xsmall"
className="ascribe-margin-1px"
disabled={isEmbedDisabled}>
{getLangText('Embed')}
</Button>
}
panel={
@ -125,8 +115,12 @@ let MediaContainer = React.createClass({
show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
aclObject={content.acl}
aclName="acl_download">
<Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank">
Download .{mimetype} <Glyphicon glyph="cloud-download"/>
<Button
bsSize="xsmall"
className="ascribe-margin-1px"
href={content.digital_work.url}
target="_blank">
{getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download"/>
</Button>
</AclProxy>
{embed}

18
js/components/ascribe_detail/piece.js
View File

@ -16,10 +16,10 @@ import MediaContainer from './media_container';
let Piece = React.createClass({
propTypes: {
piece: React.PropTypes.object,
currentUser: React.PropTypes.object,
header: React.PropTypes.object,
subheader: React.PropTypes.object,
buttons: React.PropTypes.object,
loadPiece: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
@ -32,20 +32,22 @@ let Piece = React.createClass({
},
render() {
const { buttons, children, currentUser, header, piece, subheader } = this.props;
return (
<Row>
<Col md={6} className="ascribe-print-col-left">
<MediaContainer
refreshObject={this.updateObject}
content={this.props.piece}/>
content={piece}
currentUser={currentUser}
refreshObject={this.updateObject} />
</Col>
<Col md={6} className="ascribe-edition-details ascribe-print-col-right">
{this.props.header}
{this.props.subheader}
{this.props.buttons}
{this.props.children}
{header}
{subheader}
{buttons}
{children}
</Col>
</Row>
);

64
js/components/ascribe_detail/piece_container.js
View File

@ -249,76 +249,76 @@ let PieceContainer = React.createClass({
},
render() {
if (this.state.piece && this.state.piece.id) {
let FurtherDetailsType = this.props.furtherDetailsType;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
const { furtherDetailsType: FurtherDetailsType } = this.props;
const { currentUser, piece } = this.state;
if (piece && piece.id) {
setDocumentTitle([piece.artist_name, piece.title].join(', '));
return (
<Piece
piece={this.state.piece}
loadPiece={this.loadPiece}
piece={piece}
currentUser={currentUser}
header={
<div className="ascribe-detail-header">
<hr className="hidden-print" style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<DetailProperty label="BY" value={this.state.piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } />
{this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null}
<hr className="hidden-print" style={{marginTop: 0}} />
<h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
{piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
<hr/>
</div>
}
subheader={
<div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} />
<LicenseDetail license={this.state.piece.license_type} />
<DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<LicenseDetail license={piece.license_type} />
</div>
}
buttons={this.getActions()}>
{this.getCreateEditionsDialog()}
<CollapsibleParagraph
title={getLangText('Loan History')}
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator
history={this.state.piece.loan_history} />
history={piece.loan_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Notes')}
show={!!(this.state.currentUser.username
|| this.state.piece.acl.acl_edit
|| this.state.piece.public_note)}>
show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}>
<Note
id={this.getId}
label={getLangText('Personal note (private)')}
defaultValue={this.state.piece.private_note || null}
show = {!!this.state.currentUser.username}
defaultValue={piece.private_note || null}
show = {!!currentUser.username}
placeholder={getLangText('Enter your comments ...')}
editable={true}
successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece}
currentUser={this.state.currentUser}/>
currentUser={currentUser}/>
<Note
id={this.getId}
label={getLangText('Personal note (public)')}
defaultValue={this.state.piece.public_note || null}
defaultValue={piece.public_note || null}
placeholder={getLangText('Enter your comments ...')}
editable={!!this.state.piece.acl.acl_edit}
show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
editable={!!piece.acl.acl_edit}
show={!!(piece.public_note || piece.acl.acl_edit)}
successMessage={getLangText('Public note saved')}
url={ApiUrls.note_public_piece}
currentUser={this.state.currentUser}/>
currentUser={currentUser}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Further Details')}
show={this.state.piece.acl.acl_edit
|| Object.keys(this.state.piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0}
show={piece.acl.acl_edit
|| Object.keys(piece.extra_data).length > 0
|| piece.other_data.length > 0}
defaultExpanded={true}>
<FurtherDetailsType
editable={this.state.piece.acl.acl_edit}
pieceId={this.state.piece.id}
extraData={this.state.piece.extra_data}
otherData={this.state.piece.other_data}
editable={piece.acl.acl_edit}
pieceId={piece.id}
extraData={piece.extra_data}
otherData={piece.other_data}
handleSuccess={this.loadPiece} />
</CollapsibleParagraph>

2
js/components/ascribe_media/media_player.js
View File

@ -184,7 +184,7 @@ let Video = React.createClass({
);
} else {
return (
<Image src={this.props.preview} />
<Image preview={this.props.preview} />
);
}
}

49
js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
View File

@ -32,55 +32,62 @@ let WalletPieceContainer = React.createClass({
])
},
render() {
if (this.props.piece && this.props.piece.id) {
const {
children,
currentUser,
handleDeleteSuccess,
loadPiece,
piece,
submitButtonType } = this.props;
if (piece && piece.id) {
return (
<Piece
piece={this.props.piece}
loadPiece={this.props.loadPiece}
piece={piece}
currentUser={currentUser}
header={
<div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.piece.title}</h1>
<DetailProperty label="BY" value={this.props.piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.piece.date_created, 'YYYY-MM-DD').year()} />
<h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
<hr/>
</div>
}
subheader={
<div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} />
<DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<hr/>
</div>
}>
<WalletActionPanel
piece={this.props.piece}
currentUser={this.props.currentUser}
loadPiece={this.props.loadPiece}
handleDeleteSuccess={this.props.handleDeleteSuccess}
submitButtonType={this.props.submitButtonType}/>
piece={piece}
currentUser={currentUser}
loadPiece={loadPiece}
handleDeleteSuccess={handleDeleteSuccess}
submitButtonType={submitButtonType}/>
<CollapsibleParagraph
title={getLangText('Loan History')}
show={this.props.piece.loan_history && this.props.piece.loan_history.length > 0}>
show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator
history={this.props.piece.loan_history}/>
history={piece.loan_history}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Notes')}
show={!!(this.props.currentUser.username || this.props.piece.public_note)}>
show={!!(currentUser.username || piece.public_note)}>
<Note
id={() => {return {'id': this.props.piece.id}; }}
id={() => {return {'id': piece.id}; }}
label={getLangText('Personal note (private)')}
defaultValue={this.props.piece.private_note || null}
defaultValue={piece.private_note || null}
placeholder={getLangText('Enter your comments ...')}
editable={true}
successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/>
currentUser={currentUser}/>
</CollapsibleParagraph>
{this.props.children}
{children}
</Piece>
);
} else {