From aaddd080b5129920d3c8722c0d0ada2ee2c9a906 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Thu, 10 Dec 2020 15:51:36 +1000
Subject: [PATCH] chat: overscan and block level images

---
 .../src/views/apps/chat/components/ChatMessage.tsx   | 12 +++++++-----
 .../src/views/components/VirtualScroller.tsx         |  7 ++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index 875be5b10..8037e51d6 100644
--- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
+++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
@@ -192,7 +192,7 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
       fontSize
     } = this.props;
 
-    const datestamp = moment.unix(msg['time-sent']).format(DATESTAMP_FORMAT);
+    const datestamp = moment.unix(msg['time-sent'] / 1000).format(DATESTAMP_FORMAT);
     const contact = msg.author in contacts ? contacts[msg.author] : false;
     const showNickname = !hideNicknames && contact && contact.nickname;
     const name = showNickname ? contact!.nickname : cite(msg.author);
@@ -289,16 +289,18 @@ export const MessageContent = ({ content, contacts, remoteContentPolicy, measure
     return <CodeContent content={content} />;
   } else if ('url' in content) {
     return (
-      <Text mx="2px" flexShrink={0} fontSize={fontSize ? fontSize : '14px'} lineHeight="tall" color='black'>
+      <Box mx="2px" flexShrink={0} fontSize={fontSize ? fontSize : '14px'} lineHeight="tall" color='black'>
         <RemoteContent
           url={content.url}
           remoteContentPolicy={remoteContentPolicy}
           onLoad={measure}
           imageProps={{style: {
-              maxWidth: '18rem'
+            maxWidth: '18rem',
+            display: 'block'
           }}}
           videoProps={{style: {
-            maxWidth: '18rem'
+            maxWidth: '18rem',
+            display: 'block'
           }
           }}
           textProps={{style: {
@@ -306,7 +308,7 @@ export const MessageContent = ({ content, contacts, remoteContentPolicy, measure
             textDecoration: 'underline'
           }}}
         />
-      </Text>
+      </Box>
     );
   } else if ('text' in content) {
     return <TextContent fontSize={fontSize} content={content} />;
diff --git a/pkg/interface/src/views/components/VirtualScroller.tsx b/pkg/interface/src/views/components/VirtualScroller.tsx
index f89f0b4d0..ca68422b4 100644
--- a/pkg/interface/src/views/components/VirtualScroller.tsx
+++ b/pkg/interface/src/views/components/VirtualScroller.tsx
@@ -141,18 +141,19 @@ export default class VirtualScroller extends Component<VirtualScrollerProps, Vir
     const { scrollTop, offsetHeight: windowHeight } = this.window;
     const { averageHeight } = this.state;
     const { data, size: totalSize, onCalculateVisibleItems } = this.props;
+    console.log(windowHeight);
 
 
     [...data].forEach(([index, datum]) => {
       const height = this.heightOf(index);
-      if (startgap < scrollTop && !startGapFilled) {
+      if (startgap < (scrollTop - height) && !startGapFilled) {
         startBuffer.set(index, datum);
         startgap += height;
-      } else if (heightShown < windowHeight) {
+      } else if (heightShown < (windowHeight + height)) {
         startGapFilled = true;
         visibleItems.set(index, datum);
         heightShown += height;
-      } else if (endBuffer.size < (visibleItems.size - visibleItems.size % 5)) {
+      } else if (endBuffer.size < visibleItems.size) {
         endBuffer.set(index, data.get(index));
       } else {
         endgap += height;