add contentviews to client

4 files changed, 26 insertions, 6 deletions

diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 75662509..a93ce395 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -33,10 +33,10 @@ function ContentView(props) {
         return <MetaViews.ContentTooLarge {...props} onClick={displayLarge}/>
     }
 
-    const View = ContentViews[contentView]
+    const View = ContentViews[contentView] || ContentViews['ViewServer']
     return (
         <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">
                 <ViewSelector message={message}/>
diff --git a/web/src/js/components/ContentView/ContentLoader.jsx b/web/src/js/components/ContentView/ContentLoader.jsx
index ba6702ca..9babb8f7 100644
--- a/web/src/js/components/ContentView/ContentLoader.jsx
+++ b/web/src/js/components/ContentView/ContentLoader.jsx
@@ -28,7 +28,8 @@ export default View => class extends React.Component {
     componentWillReceiveProps(nextProps) {
         if (
             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)
         }
@@ -52,7 +53,7 @@ export default View => class extends React.Component {
             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.
         let request = new XMLHttpRequest();
diff --git a/web/src/js/components/ContentView/ContentViews.jsx b/web/src/js/components/ContentView/ContentViews.jsx
index a1adebea..732f9f5e 100644
--- a/web/src/js/components/ContentView/ContentViews.jsx
+++ b/web/src/js/components/ContentView/ContentViews.jsx
@@ -57,4 +57,14 @@ function ViewAuto({ message, flow, readonly, 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 }
diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx
index 89b36231..c3e1e105 100644
--- a/web/src/js/components/ContentView/ViewSelector.jsx
+++ b/web/src/js/components/ContentView/ViewSelector.jsx
@@ -24,7 +24,7 @@ ViewButton = connect(state => ({
 ViewSelector.propTypes = {
     message: PropTypes.object.isRequired,
 }
-export default function ViewSelector({ message }) {
+function ViewSelector({ message, contentViews }) {
 
     let autoView = ContentViews.ViewAuto.findView(message)
     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>
             )}
 
+            {contentViews.map(name =>
+                <ViewButton key={name} name={name}>{name.toLowerCase().replace('view', '')}</ViewButton>
+            )}
+
         </div>
     )
 }
+
+export default connect (
+    state => ({
+        contentViews: state.settings.contentViews
+    }))(ViewSelector)