add contentviews to client

This commit is contained in:
Clemens 2016-07-27 17:27:01 +02:00
parent 2c3ddb0ecc
commit 3e6c284757
4 changed files with 26 additions and 6 deletions

View File

@ -33,10 +33,10 @@ function ContentView(props) {
return <MetaViews.ContentTooLarge {...props} onClick={displayLarge}/> return <MetaViews.ContentTooLarge {...props} onClick={displayLarge}/>
} }
const View = ContentViews[contentView] const View = ContentViews[contentView] || ContentViews['ViewServer']
return ( return (
<div> <div>
<View flow={flow} message={message} readonly={readonly} onChange={onContentChange}/> <View flow={flow} message={message} contentView={contentView} readonly={readonly} onChange={onContentChange}/>
<div className="view-options text-center"> <div className="view-options text-center">
<ViewSelector message={message}/> <ViewSelector message={message}/>

View File

@ -28,7 +28,8 @@ export default View => class extends React.Component {
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if ( if (
nextProps.message.content !== this.props.message.content || nextProps.message.content !== this.props.message.content ||
nextProps.message.contentHash !== this.props.message.contentHash nextProps.message.contentHash !== this.props.message.contentHash ||
nextProps.contentView !== this.props.contentView
) { ) {
this.updateContent(nextProps) this.updateContent(nextProps)
} }
@ -52,7 +53,7 @@ export default View => class extends React.Component {
return this.setState({request: undefined, content: ""}) return this.setState({request: undefined, content: ""})
} }
let requestUrl = MessageUtils.getContentURL(props.flow, props.message) let requestUrl = MessageUtils.getContentURL(props.flow, props.message, props.contentView)
// We use XMLHttpRequest instead of fetch() because fetch() is not (yet) abortable. // We use XMLHttpRequest instead of fetch() because fetch() is not (yet) abortable.
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();

View File

@ -57,4 +57,14 @@ function ViewAuto({ message, flow, readonly, onChange }) {
return <View message={message} flow={flow} readonly={readonly} onChange={onChange}/> return <View message={message} flow={flow} readonly={readonly} onChange={onChange}/>
} }
export { ViewImage, ViewRaw, ViewAuto, ViewJSON } function ViewServer({contentView, content}){
return <div>
<pre>load from server this view: {contentView}</pre>
<pre>{content}</pre>
</div>
}
ViewServer = ContentLoader(ViewServer)
export { ViewImage, ViewRaw, ViewAuto, ViewJSON, ViewServer }

View File

@ -24,7 +24,7 @@ ViewButton = connect(state => ({
ViewSelector.propTypes = { ViewSelector.propTypes = {
message: PropTypes.object.isRequired, message: PropTypes.object.isRequired,
} }
export default function ViewSelector({ message }) { function ViewSelector({ message, contentViews }) {
let autoView = ContentViews.ViewAuto.findView(message) let autoView = ContentViews.ViewAuto.findView(message)
let autoViewName = (autoView.displayName || autoView.name) let autoViewName = (autoView.displayName || autoView.name)
@ -42,6 +42,15 @@ export default function ViewSelector({ message }) {
<ViewButton key={name} name={name}>{name.toLowerCase().replace('view', '')}</ViewButton> <ViewButton key={name} name={name}>{name.toLowerCase().replace('view', '')}</ViewButton>
)} )}
{contentViews.map(name =>
<ViewButton key={name} name={name}>{name.toLowerCase().replace('view', '')}</ViewButton>
)}
</div> </div>
) )
} }
export default connect (
state => ({
contentViews: state.settings.contentViews
}))(ViewSelector)