Merge pull request #503 from filecoin-project/@akuokojnr/multiplayer-slate

feat: show user online status
2024-11-27 01:03:08 +03:00 · 2021-02-05 22:22:00 -08:00 · 2021-02-05 22:22:00 -08:00 · 21fba66ef0
commit 21fba66ef0
parent 2adfa9c73a bda5f2d771
7 changed files with 134 additions and 8 deletions
--- a/common/browser-websockets.js
+++ b/common/browser-websockets.js
@ -8,7 +8,7 @@ let savedResource = null;
 let savedViewer = null;
 let savedOnUpdate = null;

-export const init = ({ resource = "", viewer, onUpdate }) => {
+export const init = ({ resource = "", viewer, onUpdate, onNewActiveUser }) => {
  savedResource = resource;
  savedViewer = viewer;
  savedOnUpdate = onUpdate;
@ -78,6 +78,10 @@ export const init = ({ resource = "", viewer, onUpdate }) => {
    if (type === "UPDATE") {
      onUpdate(data);
    }
+
+    if (type === "UPDATE_USERS_ONLINE") {
+      onNewActiveUser(data);
+    }
  });

  client.addEventListener("close", (e) => {
--- a/common/constants.js
+++ b/common/constants.js
@ -57,6 +57,7 @@ export const system = {
  white: "#FFFFFF",
  bgBlurGrayBlack: "rgba(15, 14, 18, 0.8)",
  bgBlurBlack: "rgba(15, 14, 18, 0.9)",
+  active: "#00BB00",
 };

 export const shadow = {
--- a/components/core/Application.js
+++ b/components/core/Application.js
@ -105,6 +105,7 @@ export default class ApplicationPage extends React.Component {
    online: null,
    mobile: this.props.mobile,
    loaded: false,
+    activeUsers: null,
  };

  async componentDidMount() {
@ -209,6 +210,7 @@ export default class ApplicationPage extends React.Component {
        resource: this.props.resources.pubsub,
        viewer: this.state.viewer,
        onUpdate: this._handleUpdateViewer,
+        onNewActiveUser: this._handleNewActiveUser,
      });
    }
    if (!wsclient) {
@ -220,6 +222,10 @@ export default class ApplicationPage extends React.Component {
    return;
  };

+  _handleNewActiveUser = (users) => {
+    this.setState({ activeUsers: users });
+  };
+
  _handleWindowResize = () => {
    const { width } = Window.getViewportSize();

@ -631,6 +637,7 @@ export default class ApplicationPage extends React.Component {
      sceneId: current.target.id,
      mobile: this.state.mobile,
      resources: this.props.resources,
+      activeUsers: this.state.activeUsers,
    });

    let sidebarElement;
--- a/components/core/Profile.js
+++ b/components/core/Profile.js
@ -71,12 +71,24 @@ const STYLES_PROFILE_IMAGE = css`
  flex-shrink: 0;
  border-radius: 4px;
  margin: 0 auto;
+  position: relative;
  @media (max-width: ${Constants.sizes.mobile}px) {
    width: 64px;
    height: 64px;
  }
 `;

+const STYLES_STATUS_INDICATOR = css`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid ${Constants.system.gray50};
+  background-color: ${Constants.system.white};
+`;
+
 const STYLES_NAME = css`
  font-size: ${Constants.typescale.lvl4};
  font-family: ${Constants.font.semiBold};
@ -183,6 +195,18 @@ const STYLES_DIRECTORY_PROFILE_IMAGE = css`
  width: 24px;
  margin-right: 16px;
  border-radius: 4px;
+  position: relative;
+`;
+
+const STYLES_DIRECTORY_STATUS_INDICATOR = css`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 1.2px solid ${Constants.system.gray50};
+  background-color: ${Constants.system.white};
 `;

 const STYLES_MESSAGE = css`
@ -208,7 +232,16 @@ const STYLES_COPY_INPUT = css`
  opacity: 0;
 `;

-function UserEntry({ user, button, onClick, message, external, url }) {
+function UserEntry({
+  user,
+  button,
+  onClick,
+  message,
+  external,
+  url,
+  userOnline,
+  showStatusIndicator,
+}) {
  return (
    <div key={user.username} css={STYLES_USER_ENTRY}>
      {external ? (
@ -216,7 +249,17 @@ function UserEntry({ user, button, onClick, message, external, url }) {
          <div
            css={STYLES_DIRECTORY_PROFILE_IMAGE}
            style={{ backgroundImage: `url(${user.data.photo})` }}
+          >
+            {showStatusIndicator && (
+              <div
+                css={STYLES_DIRECTORY_STATUS_INDICATOR}
+                style={{
+                  borderColor: userOnline && `${Constants.system.active}`,
+                  backgroundColor: userOnline && `${Constants.system.active}`,
+                }}
              />
+            )}
+          </div>
          <span css={STYLES_DIRECTORY_NAME}>
            {user.data.name || `@${user.username}`}
            {message ? <span css={STYLES_MESSAGE}>{message}</span> : null}
@ -227,7 +270,15 @@ function UserEntry({ user, button, onClick, message, external, url }) {
          <div
            css={STYLES_DIRECTORY_PROFILE_IMAGE}
            style={{ backgroundImage: `url(${user.data.photo})` }}
+          >
+            <div
+              css={STYLES_DIRECTORY_STATUS_INDICATOR}
+              style={{
+                borderColor: userOnline && `${Constants.system.active}`,
+                backgroundColor: userOnline && `${Constants.system.active}`,
+              }}
            />
+          </div>
          <span css={STYLES_DIRECTORY_NAME}>
            {user.data.name || `@${user.username}`}
            {message ? <span css={STYLES_MESSAGE}>{message}</span> : null}
@ -259,11 +310,13 @@ export default class Profile extends React.Component {
        }).length,
    fetched: false,
    tab: this.props.tab,
+    isOnline: false,
  };

  componentDidMount = () => {
    this._handleUpdatePage();
    this.filterByVisibility();
+    this.checkStatus();
  };

  componentDidUpdate = (prevProps) => {
@ -352,6 +405,13 @@ export default class Profile extends React.Component {
    });
  };

+  checkStatus = () => {
+    const activeUsers = this.props.activeUsers;
+    const userId = this.props.data?.id;
+
+    this.setState({ isOnline: activeUsers && activeUsers.includes(userId) });
+  };
+
  render() {
    let tab = typeof this.state.tab === "undefined" || this.state.tab === null ? 1 : this.state.tab;
    let isOwner = this.props.isOwner;
@ -419,6 +479,8 @@ export default class Profile extends React.Component {
                key={relation.id}
                user={relation.user}
                button={button}
+                userOnline={this.state.isOnline}
+                showStatusIndicator={this.props.isAuthenticated}
                onClick={() => {
                  this.props.onAction({
                    type: "NAVIGATE",
@ -471,6 +533,8 @@ export default class Profile extends React.Component {
              key={relation.id}
              user={relation.owner}
              button={button}
+              userOnline={this.state.isOnline}
+              showStatusIndicator={this.props.isAuthenticated}
              onClick={() => {
                this.props.onAction({
                  type: "NAVIGATE",
@ -491,6 +555,8 @@ export default class Profile extends React.Component {
      return total + slate.data?.objects?.length || 0;
    }, 0);

+    const showStatusIndicator = this.props.isAuthenticated;
+
    return (
      <div>
        <GlobalCarousel
@ -508,8 +574,20 @@ export default class Profile extends React.Component {
          <div css={STYLES_PROFILE_INFO}>
            <div
              css={STYLES_PROFILE_IMAGE}
-              style={{ backgroundImage: `url('${creator.data.photo}')` }}
+              style={{
+                backgroundImage: `url('${creator.data.photo}')`,
+              }}
+            >
+              {showStatusIndicator && (
+                <div
+                  css={STYLES_STATUS_INDICATOR}
+                  style={{
+                    borderColor: this.state.isOnline && `${Constants.system.active}`,
+                    backgroundColor: this.state.isOnline && `${Constants.system.active}`,
+                  }}
                />
+              )}
+            </div>
            <div css={STYLES_INFO}>
              <div css={STYLES_NAME}>{Strings.getPresentationName(creator)}</div>
              {!isOwner && (
--- a/pages/_/profile.js
+++ b/pages/_/profile.js
@ -68,6 +68,7 @@ export default class ProfilePage extends React.Component {
            page={this.state.page}
            buttons={buttons}
            isOwner={false}
+            isAuthenticated={this.props.viewer !== null}
            external
          />
        </div>
--- a/scenes/SceneDirectory.js
+++ b/scenes/SceneDirectory.js
@ -81,6 +81,18 @@ const STYLES_PROFILE_IMAGE = css`
  width: 24px;
  margin-right: 16px;
  border-radius: 4px;
+  position: relative;
+`;
+
+const STYLES_STATUS_INDICATOR = css`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  border: 2px solid ${Constants.system.gray50};
+  background-color: ${Constants.system.white};
 `;

 const STYLES_MESSAGE = css`
@ -100,11 +112,19 @@ const STYLES_NAME = css`
  text-overflow: ellipsis;
 `;

-function UserEntry({ user, button, onClick, message }) {
+function UserEntry({ user, button, onClick, message, userOnline }) {
  return (
    <div key={user.username} css={STYLES_USER_ENTRY}>
      <div css={STYLES_USER} onClick={onClick}>
-        <div css={STYLES_PROFILE_IMAGE} style={{ backgroundImage: `url(${user.data.photo})` }} />
+        <div css={STYLES_PROFILE_IMAGE} style={{ backgroundImage: `url(${user.data.photo})` }}>
+          <div
+            css={STYLES_STATUS_INDICATOR}
+            style={{
+              borderColor: userOnline && `${Constants.system.active}`,
+              backgroundColor: userOnline && `${Constants.system.active}`,
+            }}
+          />
+        </div>
        <span css={STYLES_NAME}>
          {user.data.name || `@${user.username}`}
          {message ? <span css={STYLES_MESSAGE}>{message}</span> : null}
@ -139,6 +159,11 @@ export default class SceneDirectory extends React.Component {
  state = {
    copyValue: "",
    contextMenu: null,
+    isOnline: false,
+  };
+
+  componentDidMount = () => {
+    this.checkStatus();
  };

  _handleCopy = (e, value) => {
@ -171,6 +196,13 @@ export default class SceneDirectory extends React.Component {
    });
  };

+  checkStatus = () => {
+    const activeUsers = this.props.activeUsers;
+    const userId = this.props.data?.id;
+
+    this.setState({ isOnline: activeUsers && activeUsers.includes(userId) });
+  };
+
  render() {
    let following = this.props.viewer.subscriptions
      .filter((relation) => {
@ -208,6 +240,7 @@ export default class SceneDirectory extends React.Component {
            key={relation.id}
            user={relation.user}
            button={button}
+            userOnline={this.state.isOnline}
            onClick={() => {
              this.props.onAction({
                type: "NAVIGATE",
@ -256,6 +289,7 @@ export default class SceneDirectory extends React.Component {
          key={relation.id}
          user={relation.owner}
          button={button}
+          userOnline={this.state.isOnline}
          onClick={() => {
            this.props.onAction({
              type: "NAVIGATE",
--- a/scenes/SceneProfile.js
+++ b/scenes/SceneProfile.js
@ -103,6 +103,7 @@ export default class SceneProfile extends React.Component {
          this.state.profile.id === this.props.viewer.id ? this.props.viewer : this.state.profile
        }
        isOwner={this.state.profile.id === this.props.viewer.id}
+        isAuthenticated={this.props.viewer !== null}
        key={this.state.profile.id}
      />
    );