From 4d959fc33b9cf863368320fb9a789e17efa86511 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 1 Apr 2016 02:16:11 +0100
Subject: [PATCH] improve layout and make thumbnails work

---
 .../views/rooms/LinkPreviewWidget.js          | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/views/rooms/LinkPreviewWidget.js b/src/components/views/rooms/LinkPreviewWidget.js
index f474776713..e44717034a 100644
--- a/src/components/views/rooms/LinkPreviewWidget.js
+++ b/src/components/views/rooms/LinkPreviewWidget.js
@@ -29,7 +29,7 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            preview: {}
+            preview: null;
         };
     },
 
@@ -37,23 +37,27 @@ module.exports = React.createClass({
         MatrixClientPeg.get().getUrlPreview(this.props.link).then((res)=>{
             this.setState({ preview: res });
         }, (error)=>{
-            console.error("Failed to get preview for URL: " + error);
+            console.error("Failed to get preview for " + this.props.link + " " + error);
         });
     },
 
     render: function() {
         var p = this.state.preview;
+        if (!p) return <div/>;
+        var img = p["og:image"]
+        if (img && img.startsWith("mxc://")) img = MatrixClientPeg.get().mxcUrlToHttp(img, 100, 100)
         return (
             <div className="mx_LinkPreviewWidget">
-                <div className="mx_LinkPreviewWidget_title">{ p["og:title"] }</div>
-                <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" &emdash; " + p["og:site_name"]) : null }</div>
                 <div className="mx_LinkPreviewWidget_image">
-                    <img src={ p["og:image"] }/>
+                    <a href={ this.props.link } target="_blank"><img style={{ maxWidth: 100, maxHeight: 100 }} src={ img }/></a>
                 </div>
-                <div className="mx_LinkPreviewWidget_description">
-                    { p["og:description"] }
+                <div className="mx_LinkPreviewWidget_caption">
+                    <div className="mx_LinkPreviewWidget_title"><a href={ this.props.link } target="_blank">{ p["og:title"] }</a></div>
+                    <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
+                    <div className="mx_LinkPreviewWidget_description">
+                        { p["og:description"] }
+                    </div>
                 </div>
-
             </div>
         );
     }