v1.6.3/release

- virtual chat scroll
- website update
- version bump

app/src/Thread.js

@@ -9,7 +9,7 @@ ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, U
 CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
 COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 ************************************************************************/
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import {
   Typography,
   IconButton,
@@ -21,23 +21,32 @@ import {
 import { Reply, Send } from '@material-ui/icons';
 import './Thread.css';
 import { LocalData, webhookFetcher } from './Api';
+import { CellMeasurer, CellMeasurerCache, AutoSizer, List } from 'react-virtualized';
+
+var cache = new CellMeasurerCache({
+  fixedWidth: true,
+});
 
 export default class Thread extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      autoSizeWidth: 0,
+    };
+    this.listRef = createRef();
+    this.getMessage = this.getMessage.bind(this);
     this.getTimeString = this.getTimeString.bind(this);
     this.getReplyMessage = this.getReplyMessage.bind(this);
     this.getMessageTextOrImage = this.getMessageTextOrImage.bind(this);
   }
-  scrollToMessage(id) {
-    const pcc = document.querySelector('.thread-wrapper');
-    const msg = document.getElementById(id);
-    const alc = document.querySelector(
-      '#party-routes-wrapper > div.party-chat-container > div.thread-wrapper > div.alerts-container'
-    );
-    pcc.scrollTop = msg.offsetTop - pcc.offsetTop - alc.clientHeight - 10;
-    msg.classList.add('highlight');
-    setTimeout(() => msg.classList.remove('highlight'), 2000);
+  scrollToMessage(msgIdx, messages) {
+    this.listRef.current.scrollToRow(msgIdx);
+    setTimeout(() => {
+      const id = messages[msgIdx].id || `sending-${msgIdx}`;
+      const msg = document.getElementById(id);
+      msg.classList.add('highlight');
+      setTimeout(() => msg.classList.remove('highlight'), 2000);
+    }, 500);
   }
   handleInteractiveMessageCall(msg) {
     const thanksElement = document.createElement('div');
@@ -64,17 +73,17 @@ export default class Thread extends Component {
   }
   getItemClassNames(uid, userUid, msgIdx, messages, isSending = false) {
     const lastUid = msgIdx >= 1 ? messages[msgIdx - 1].uid : '';
-    return `thread-item ${uid === userUid ? 'my-message' : ''} ${
-      isSending ? 'sending-message' : ''
-    } ${uid === '<system>' ? 'system-message' : ''} ${lastUid === uid ? 'continued-message' : ''}`;
+    return `thread-item ${uid === userUid ? 'my-message ' : ''}${
+      isSending ? 'sending-message ' : ''
+    }${uid === '<system>' ? 'system-message ' : ''}${lastUid === uid ? 'continued-message' : ''}`;
   }
-  getMessageTextOrImage(msg) {
+  getMessageTextOrImage(msg, measure) {
     if (msg.type === 'giphy') {
-      return <img alt="gif" src={msg.text} />;
+      return <img onLoad={measure} alt="gif" src={msg.text} />;
     }
     if (msg.type === 'interactive/text') {
       return (
-        <Paper elevation={0} className="thread-interactive-text">
+        <Paper onLoad={measure} elevation={0} className="thread-interactive-text">
           <Typography className="thread-interactive-question" variant="overline">
             {msg.text}
           </Typography>
@@ -101,7 +110,7 @@ export default class Thread extends Component {
     }
     if (msg.type === 'interactive/link') {
       return (
-        <Paper elevation={0} className="thread-interactive-text">
+        <Paper onLoad={measure} elevation={0} className="thread-interactive-text">
           <Typography className="thread-interactive-question" variant="overline">
             {msg.text}
           </Typography>
@@ -117,75 +126,94 @@ export default class Thread extends Component {
         </Paper>
       );
     }
-    return <p>{msg.text}</p>;
+    return <p onLoad={measure}>{msg.text}</p>;
   }
   getTimeString(time) {
     return new Date(time.seconds * 1000).toLocaleTimeString();
   }
-  getReplyMessage(rT, messages) {
-    if (rT !== undefined && rT !== null) {
-      const replyMessage = messages.filter((m) => m.id === rT)[0];
-      return (
-        <div className="thread-reply" onClick={() => this.scrollToMessage(replyMessage.id)}>
-          <p className="thread-reply-name">Reply to {replyMessage.name}:</p>
-          {this.getMessageTextOrImage(replyMessage)}
-        </div>
-      );
+  getReplyMessage(replyTo, messages) {
+    if (replyTo !== undefined && replyTo !== null) {
+      const replyMessage = messages.filter((v) => v.id === replyTo)[0];
+      if (replyMessage) {
+        const msgIdx = messages.indexOf(replyMessage);
+        return (
+          <div className="thread-reply" onClick={() => this.scrollToMessage(msgIdx, messages)}>
+            <p className="thread-reply-name">Reply to {replyMessage.name}:</p>
+            {this.getMessageTextOrImage(replyMessage)}
+          </div>
+        );
+      }
     }
     return null;
   }
-  render() {
-    const { sendingMessages, setReplyTo, sentMessages } = this.props;
+  getMessage(params) {
+    const { autoSizeWidth } = this.state;
+    const { sendingMessages, sentMessages, setReplyTo } = this.props;
     const { userUid } = LocalData();
+    const messages = [...sentMessages, ...sendingMessages];
+    const msg = messages[params.index];
+    const msgIdx = params.index;
     return (
-      <div className="thread-container">
-        {sentMessages.length > 0
-          ? sentMessages.map((msg, msgIdx) => (
-              <div
-                id={msg.id}
-                key={`msg-${msgIdx}`}
-                className={this.getItemClassNames(msg.uid, userUid, msgIdx, sentMessages)}
-              >
-                <div className="thread-name">{msg.name}</div>
-                {this.getReplyMessage(msg.replyTo, sentMessages)}
-                <div className="thread-message">
-                  <div className="thread-overline">
-                    <span>{this.getTimeString(msg.time)}</span>
-                    <div className="thread-reply-icon">
-                      <IconButton onClick={() => setReplyTo(msg)}>
-                        <Reply />
-                      </IconButton>
-                    </div>
-                  </div>
-                  {this.getMessageTextOrImage(msg)}
+      <CellMeasurer
+        cache={cache}
+        columnIndex={0}
+        key={`msg-${msgIdx}`}
+        parent={params.parent}
+        rowIndex={msgIdx}
+        width={autoSizeWidth}
+      >
+        {({ measure, registerChild }) => (
+          <div
+            ref={registerChild}
+            style={params.style}
+            id={msg.id || `sending-${msgIdx}`}
+            key={`msg-${msgIdx}-item`}
+            className={this.getItemClassNames(msg.uid, userUid, msgIdx, messages, !!!msg.id)}
+          >
+            <div className="thread-name">{msg.name}</div>
+            {this.getReplyMessage(msg.replyTo, messages)}
+            <div className="thread-message">
+              <div className="thread-overline">
+                <span>{this.getTimeString(msg.time)}</span>
+                <div className="thread-reply-icon">
+                  <IconButton onClick={() => setReplyTo(msg)}>
+                    <Reply />
+                  </IconButton>
                 </div>
               </div>
-            ))
-          : null}
-        {sendingMessages.length > 0
-          ? sendingMessages.map((msg, msgIdx) => (
-              <div
-                id={msg.id}
-                key={`msg-${msgIdx}`}
-                className={this.getItemClassNames(msg.uid, userUid, msgIdx, sendingMessages, true)}
-              >
-                <div className="thread-name">{msg.name}</div>
-                {this.getReplyMessage(msg.replyTo, sentMessages)}
-                <div className="thread-message">
-                  <div className="thread-overline">
-                    <span>{this.getTimeString(msg.time)}</span>
-                    <div className="thread-reply-icon">
-                      <IconButton onClick={() => setReplyTo(msg)}>
-                        <Reply />
-                      </IconButton>
-                    </div>
-                  </div>
-                  {this.getMessageTextOrImage(msg)}
-                </div>
-              </div>
-            ))
-          : null}
-      </div>
+              {this.getMessageTextOrImage(msg, measure)}
+            </div>
+          </div>
+        )}
+      </CellMeasurer>
+    );
+  }
+  render() {
+    const { autoSizeWidth } = this.state;
+    const { sendingMessages, sentMessages } = this.props;
+    return (
+      <AutoSizer style={{ flex: 1 }}>
+        {({ height, width }) => {
+          if (autoSizeWidth && autoSizeWidth !== width) {
+            cache.clearAll();
+            this.listRef.current.recomputeRowHeights();
+            this.setState({ autoSizeWidth: width });
+          }
+
+          return (
+            <List
+              className="thread-wrapper"
+              deferredMeasurementCache={cache}
+              height={height}
+              width={width}
+              ref={this.listRef}
+              rowCount={sendingMessages.length + sentMessages.length}
+              rowHeight={({ index }) => cache.rowHeight({ index }) + 10}
+              rowRenderer={this.getMessage}
+            />
+          );
+        }}
+      </AutoSizer>
     );
   }
 }