Merge pull request #2825 from urbit/lf/chat-bottom-scroll

chat-js: fix scrolling and unread behaviour
2024-11-28 22:33:06 +03:00 · 2020-05-05 17:58:42 -07:00 · 2020-05-05 17:58:42 -07:00 · 06f44ab9f1
commit 06f44ab9f1
parent 8df1d078b1 6fb41209cd
7 changed files with 179 additions and 114 deletions
--- a/pkg/interface/chat/src/js/components/chat.js
+++ b/pkg/interface/chat/src/js/components/chat.js
@ -22,6 +22,37 @@ function getNumPending(props) {
  return result;
 }

+const ACTIVITY_TIMEOUT = 60000; // a minute
+const DEFAULT_BACKLOG_SIZE = 300;
+
+function scrollIsAtTop(container) {
+  if ((navigator.userAgent.includes("Safari") &&
+      navigator.userAgent.includes("Chrome")) ||
+      navigator.userAgent.includes("Firefox")
+  ) {
+    return container.scrollTop === 0;
+  } else if (navigator.userAgent.includes("Safari")) {
+    return container.scrollHeight + Math.round(container.scrollTop) <=
+        container.clientHeight + 10;
+  } else {
+    return false;
+  }
+}
+
+function scrollIsAtBottom(container) {
+  if ((navigator.userAgent.includes("Safari") &&
+      navigator.userAgent.includes("Chrome")) ||
+      navigator.userAgent.includes("Firefox")
+  ) {
+    return container.scrollHeight - Math.round(container.scrollTop) <=
+        container.clientHeight + 10;
+  } else if (navigator.userAgent.includes("Safari")) {
+    return container.scrollTop === 0;
+  } else {
+    return false;
+  }
+}
+
 export class ChatScreen extends Component {
  constructor(props) {
    super(props);
@ -29,9 +60,10 @@ export class ChatScreen extends Component {
    this.state = {
      numPages: 1,
      scrollLocked: false,
+      read: props.read,
+      active: true,
      // only for FF
      lastScrollHeight: null,
-      scrollBottom: true
    };

    this.hasAskedForMessages = false;
@ -41,6 +73,12 @@ export class ChatScreen extends Component {
    this.onScroll = this.onScroll.bind(this);

    this.unreadMarker = null;
+    this.scrolledToMarker = false;
+    this.setUnreadMarker = this.setUnreadMarker.bind(this);
+
+    this.activityTimeout = true;
+    this.handleActivity = this.handleActivity.bind(this);
+    this.setInactive = this.setInactive.bind(this);

    moment.updateLocale('en', {
      calendar: {
@ -56,10 +94,72 @@ export class ChatScreen extends Component {
  }

  componentDidMount() {
-    this.askForMessages();
-    this.scrollToBottom();
+    document.addEventListener("mousemove", this.handleActivity, false);
+    document.addEventListener("mousedown", this.handleActivity, false);
+    document.addEventListener("keypress", this.handleActivity, false);
+    document.addEventListener("touchmove", this.handleActivity, false);
+    this.activityTimeout = setTimeout(this.setInactive, ACTIVITY_TIMEOUT);
  }

+  componentWillUnmount() {
+    document.removeEventListener("mousemove", this.handleActivity, false);
+    document.removeEventListener("mousedown", this.handleActivity, false);
+    document.removeEventListener("keypress", this.handleActivity, false);
+    document.removeEventListener("touchmove", this.handleActivity, false);
+    if(this.activityTimeout) {
+      clearTimeout(this.activityTimeout);
+    }
+  }
+
+  handleActivity() {
+    if(!this.state.active) {
+      this.setState({ active: true });
+    }
+
+    if(this.activityTimeout) {
+      clearTimeout(this.activityTimeout);
+    }
+
+    this.activityTimeout = setTimeout(this.setInactive, ACTIVITY_TIMEOUT);
+  }
+
+  setInactive() {
+    this.activityTimeout = null;
+    this.setState({ active: false, scrollLocked: true });
+  }
+
+  receivedNewChat() {
+    const { props } = this;
+    this.hasAskedForMessages = false;
+
+    this.unreadMarker = null;
+    this.scrolledToMarker = false;
+
+    this.setState({ read: props.read });
+
+    const unread = props.length - props.read;
+    const unreadUnloaded = unread - props.envelopes.length;
+
+    if(unreadUnloaded + 20 > DEFAULT_BACKLOG_SIZE) {
+      this.askForMessages(unreadUnloaded + 20);
+    } else {
+      this.askForMessages(DEFAULT_BACKLOG_SIZE);
+    }
+
+    if(props.read === props.length){
+      this.scrolledToMarker = true;
+      this.setState(
+        {
+          scrollLocked: false,
+        },
+        () => {
+          this.scrollToBottom();
+        }
+      );
+    } else {
+      this.setState({ scrollLocked: true, numPages: Math.ceil(unread/100) });
+    }
+  }

  componentDidUpdate(prevProps, prevState) {
    const { props, state } = this;
@ -68,18 +168,7 @@ export class ChatScreen extends Component {
      prevProps.match.params.station !== props.match.params.station ||
      prevProps.match.params.ship !== props.match.params.ship
    ) {
-      this.hasAskedForMessages = false;
-
-      if (props.envelopes.length < 100) {
-        this.askForMessages();
-      }
-
-      this.setState(
-        { scrollLocked: false },
-        () => {
-          this.scrollToBottom();
-        }
-      );
+      this.receivedNewChat();
    } else if (props.chatInitialized &&
               !(props.station in props.inbox) &&
               (!!props.chatSynced && !(props.station in props.chatSynced))) {
@ -89,21 +178,26 @@ export class ChatScreen extends Component {
      props.envelopes.length >= prevProps.envelopes.length + 10
    ) {
      this.hasAskedForMessages = false;
+    } else if(props.length !== prevProps.length &&
+       prevProps.length === prevState.read &&
+       state.active
+    ) {
+      this.setState({ read: props.length });
+      this.props.api.chat.read(this.props.station);
+    }
+
+    if(!prevProps.chatInitialized && props.chatInitialized) {
+      this.receivedNewChat();
    }

-    // FF logic
    if (
-      navigator.userAgent.includes("Firefox") &&
      (props.length !== prevProps.length ||
       props.envelopes.length !== prevProps.envelopes.length ||
       getNumPending(props) !== this.lastNumPending ||
       state.numPages !== prevState.numPages)
    ) {
-      if(state.scrollBottom) {
-        setTimeout(() => {
-          this.scrollToBottom();
-        })
-      } else {
+      this.scrollToBottom();
+      if(navigator.userAgent.includes("Firefox")) {
        this.recalculateScrollTop();
      }

@ -111,16 +205,9 @@ export class ChatScreen extends Component {
    }
  }

-  askForMessages() {
+  askForMessages(size) {
    const { props, state } = this;

-    if (props.envelopes.length === 0) {
-      setTimeout(() => {
-        this.askForMessages();
-      }, 500);
-      return;
-    }
-
    if (
      props.envelopes.length >= props.length ||
      this.hasAskedForMessages ||
@ -132,7 +219,7 @@ export class ChatScreen extends Component {
    let start =
      props.length - props.envelopes[props.envelopes.length - 1].number;
    if (start > 0) {
-      let end = start + 300 < props.length ? start + 300 : props.length;
+      const end = start + size < props.length ? start + size : props.length;
      this.hasAskedForMessages = true;
      props.subscription.fetchMessages(start + 1, end, props.station);
    }
@ -161,80 +248,51 @@ export class ChatScreen extends Component {
  }

  onScroll(e) {
-    if (
-      (navigator.userAgent.includes("Safari") &&
-      navigator.userAgent.includes("Chrome")) ||
-      navigator.userAgent.includes("Firefox")
-    ) {
-      // Google Chrome and Firefox
-      if (e.target.scrollTop === 0) {
-
-        // Save scroll position for FF
-        if (navigator.userAgent.includes('Firefox')) {
-
-          this.setState({
-            lastScrollHeight: e.target.scrollHeight
-          })
+    if(scrollIsAtTop(e.target)) {
+      // Save scroll position for FF
+      if (navigator.userAgent.includes('Firefox')) {
+        this.setState({
+          lastScrollHeight: e.target.scrollHeight
+        });
+      }
+      this.setState(
+        {
+          numPages: this.state.numPages + 1,
+          scrollLocked: true
+        },
+        () => {
+          this.askForMessages(DEFAULT_BACKLOG_SIZE);
        }
-        this.setState(
-          {
-            numPages: this.state.numPages + 1,
-            scrollLocked: true
-          },
-          () => {
-            this.askForMessages();
-          }
-        );
-      } else if (
-        e.target.scrollHeight - Math.round(e.target.scrollTop) ===
-        e.target.clientHeight
-      ) {
-        this.setState({
-          numPages: 1,
-          scrollLocked: false,
-          scrollBottom: true
-        });
-      } else if (navigator.userAgent.includes('Firefox')) {
-        this.setState({ scrollBottom: false });
-      }
-    } else if (navigator.userAgent.includes("Safari")) {
-      // Safari
-      if (e.target.scrollTop === 0) {
-        this.setState({
-          numPages: 1,
-          scrollLocked: false
-        });
-      } else if (
-        e.target.scrollHeight + Math.round(e.target.scrollTop) <=
-        e.target.clientHeight + 10
-      ) {
-        this.setState(
-          {
-            numPages: this.state.numPages + 1,
-            scrollLocked: true
-          },
-          () => {
-            this.askForMessages();
-          }
-        );
-      }
-    } else {
-      console.log("Your browser is not supported.");
+      );
+    } else if (scrollIsAtBottom(e.target)) {
+      this.dismissUnread();
+      this.setState({
+        numPages: 1,
+        scrollLocked: false
+      });
    }
-    if(!!this.unreadMarker) {
-      if(
-        !navigator.userAgent.includes('Firefox') &&
-         e.target.scrollHeight - e.target.scrollTop - (e.target.clientHeight * 1.5) + this.unreadMarker.offsetTop > 50
-      ) {
-        this.props.api.chat.read(this.props.station);
-      } else if(navigator.userAgent.includes('Firefox') &&
-        this.unreadMarker.offsetTop - e.target.scrollTop - (e.target.clientHeight / 2) > 0
-      ) {
-        this.props.api.chat.read(this.props.station);
-      }
-
+  }

+  setUnreadMarker(ref) {
+    if(ref && !this.scrolledToMarker) {
+      this.setState({ scrollLocked: true }, () => {
+        ref.scrollIntoView({ block: 'center' });
+        if(ref.offsetParent &&
+           scrollIsAtBottom(ref.offsetParent)) {
+          this.dismissUnread();
+          this.setState({
+            numPages: 1,
+            scrollLocked: false
+          });
+        }
+      });
+      this.scrolledToMarker = true;
    }
+    this.unreadMarker = ref;
+  }
+
+  dismissUnread() {
+    this.props.api.chat.read(this.props.station);
  }

  chatWindow(unread) {
@ -291,12 +349,12 @@ export class ChatScreen extends Component {
          group={props.association}
        />
      );
-      if(unread > 0 && i === unread) {
+      if(unread > 0 && i === unread - 1) {
        return (
          <>
            {messageElem}
-            <div key={'unreads'+ msg.uid} ref={ref => (this.unreadMarker = ref)} className="mv2 green2 flex items-center f9">
-              <hr className="ma0 w2 b--green2 bt-0" />
+            <div key={'unreads'+ msg.uid} ref={this.setUnreadMarker} className="mv2 green2 flex items-center f9">
+              <hr className="dn-s ma0 w2 b--green2 bt-0" />
              <p className="mh4">
                New messages below
              </p>
@ -410,10 +468,13 @@ export class ChatScreen extends Component {
          : props.station.substr(1);
    }

-    const unread = props.length - props.read;
+    const unread = props.length - state.read;

    const unreadMsg = unread > 0 && messages[unread - 1];

+
+    const showUnreadNotice = props.length !== props.read && props.read === state.read;
+
    return (
      <div
        key={props.station}
@ -449,11 +510,11 @@ export class ChatScreen extends Component {
            api={props.api}
          />
        </div>
-        { !!unreadMsg && (
+        { !!unreadMsg && showUnreadNotice && (
          <UnreadNotice
            unread={unread}
            unreadMsg={unreadMsg}
-            onRead={() => props.api.chat.read(props.station)}
+            onRead={() => this.dismissUnread()}
          />
        ) }
        {this.chatWindow(unread)}
@ -465,6 +526,7 @@ export class ChatScreen extends Component {
          ownerContact={ownerContact}
          envelopes={props.envelopes}
          contacts={props.contacts}
+          onEnter={() => this.setState({ scrollLocked: false })}
          s3={props.s3}
          placeholder="Message..."
        />
--- a/pkg/interface/chat/src/js/components/lib/chat-input.js
+++ b/pkg/interface/chat/src/js/components/lib/chat-input.js
@ -194,6 +194,8 @@ export class ChatInput extends Component {
      return;
    }

+    props.onEnter();
+
    if(state.code) {
      props.api.chat.message(props.station, `~${window.ship}`, Date.now(), {
        code: {
--- a/pkg/interface/chat/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/chat/src/js/components/lib/icons/sigil.js
@ -32,7 +32,7 @@ export class Sigil extends Component {
      return (
        <div
          className={'dib ' + classes}
-          style={{ flexBasis: 32, backgroundColor: props.color }}
+          style={{ flexBasis: props.size, backgroundColor: props.color }}
        >
          {sigil({
            patp: props.ship,
--- a/pkg/interface/chat/src/js/components/lib/ship-search.js
+++ b/pkg/interface/chat/src/js/components/lib/ship-search.js
@ -20,6 +20,7 @@ function ShipSearchItem({ ship, contacts, selected, onSelect }) {
    nameStyle.color = hexToRgba(hex, 0.7);
    nameStyle.textShadow = '0px 0px 0px #000';
    nameStyle.filter = 'contrast(1.3) saturate(1.5)';
+    nameStyle.maxWidth = '200px';
    sigilClass = 'v-mid';
    nickname = contact.nickname;
  }
@ -28,7 +29,7 @@ function ShipSearchItem({ ship, contacts, selected, onSelect }) {
    <div
      onClick={() => onSelect(ship)}
      className={cn(
-        'f8 pv1 ph3 pointer hover-bg-gray1-d hover-bg-gray4 relative flex items-center',
+        'f9 pv1 ph3 pointer hover-bg-gray1-d hover-bg-gray4 relative flex items-center',
        {
          'white-d bg-gray0-d bg-white': !isSelected,
          'black-d bg-gray1-d bg-gray4': isSelected
@ -38,7 +39,7 @@ function ShipSearchItem({ ship, contacts, selected, onSelect }) {
    >
      <Sigil ship={'~' + ship} size={24} color={color} classes={sigilClass} />
      {nickname && (
-        <p style={nameStyle} className="dib ml4 b">
+        <p style={nameStyle} className="dib ml4 b truncate">
          {nickname}
        </p>
      )}
@ -232,7 +233,7 @@ export class ShipSearch extends Component {
    let idx = suggestions.findIndex(s => s === this.state.selected);

    idx = backward ? idx - 1 : idx + 1;
-    idx = idx % suggestions.length;
+    idx = idx % Math.min(suggestions.length, 5);
    if (idx < 0) {
      idx = suggestions.length - 1;
    }
--- a/pkg/interface/groups/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/groups/src/js/components/lib/icons/sigil.js
@ -32,7 +32,7 @@ export class Sigil extends Component {
      return (
        <div
          className={'dib ' + classes}
-          style={{ flexBasis: 32, backgroundColor: props.color }}
+          style={{ flexBasis: props.size, backgroundColor: props.color }}
        >
          {sigil({
            patp: props.ship,
--- a/pkg/interface/launch/src/js/components/sigil.js
+++ b/pkg/interface/launch/src/js/components/sigil.js
@ -17,7 +17,7 @@ export class Sigil extends Component {
      return (
        <div
          className={"dib " + classes}
-          style={{ flexBasis: 16, backgroundColor: props.color }}>
+          style={{ flexBasis: props.size, backgroundColor: props.color }}>
          {sigil({
            patp: props.ship,
            renderer: reactRenderer,
--- a/pkg/interface/soto/src/js/components/lib/icons/sigil.js
+++ b/pkg/interface/soto/src/js/components/lib/icons/sigil.js
@ -17,7 +17,7 @@ export class Sigil extends Component {
      return (
        <div
          className={"dib " + classes}
-          style={{ flexBasis: 32, backgroundColor: props.color }}>
+          style={{ flexBasis: props.size, backgroundColor: props.color }}>
          {sigil({
            patp: props.ship,
            renderer: reactRenderer,