@shzlx/ui-default 4.58.2

package/components/message/index.page.ts

@@ -0,0 +1,166 @@
+import { nanoid } from 'nanoid';
+import { InfoDialog } from 'vj/components/dialog';
+import VjNotification from 'vj/components/notification/index';
+import {
+  FLAG_ALERT, FLAG_I18N, FLAG_INFO, FLAG_RICHTEXT,
+} from 'vj/constant/message';
+import { AutoloadPage } from 'vj/misc/Page';
+import { i18n, tpl } from 'vj/utils';
+import Sock from '../socket';
+
+let previous: VjNotification;
+const processI18n = (msg) => {
+  if (msg.mdoc.flag & FLAG_I18N) {
+    try {
+      msg.mdoc.content = JSON.parse(msg.mdoc.content);
+      if (msg.mdoc.content.url) msg.mdoc.url = msg.mdoc.content.url;
+      if (msg.mdoc.content.avatar) msg.mdoc.avatar = msg.mdoc.content.avatar;
+      msg.mdoc.content = i18n(msg.mdoc.content.message, ...msg.mdoc.content.params);
+    } catch (e) {
+      msg.mdoc.content = i18n(msg.mdoc.content);
+    }
+  }
+  return msg;
+};
+const onmessage = (msg) => {
+  console.log('Received message', msg);
+  msg = processI18n(msg);
+  if (msg.mdoc.flag & FLAG_ALERT) {
+    // Is alert
+    new InfoDialog({
+      cancelByClickingBack: false,
+      $body: tpl`
+        <div class="typo">
+          ${{ templateRaw: true, html: i18n('Message from {0}:', `<div data-user>${msg.mdoc.from}</div>`) }}
+          <p>${i18n(msg.mdoc.content)}</p>
+        </div>`,
+    }).open();
+    return false;
+  }
+  if (msg.mdoc.flag & FLAG_INFO) {
+    if (previous) previous.hide();
+    previous = new VjNotification({
+      message: msg.mdoc.content,
+      duration: 3000,
+    });
+    previous.show();
+    return false;
+  }
+  if (document.hidden) return false;
+  // Is message
+  new VjNotification({
+    ...(msg.udoc._id === 1)
+      ? {
+        type: 'info',
+        message: msg.mdoc.flag & FLAG_RICHTEXT ? i18n('You received a system message, click here to view.') : msg.mdoc.content,
+        ...(msg.mdoc.avatar ? { avatar: msg.mdoc.avatar } : {}),
+      } : {
+        title: msg.udoc.uname,
+        avatar: msg.udoc.avatarUrl,
+        message: msg.mdoc.content,
+      },
+    duration: 15000,
+    action: () => window.open(msg.mdoc.url ? msg.mdoc.url : `/home/messages?uid=${msg.udoc._id}`, '_blank'),
+  }).show();
+  return true;
+};
+
+const initWorkerMode = (endpoint) => {
+  console.log('Messages: using SharedWorker');
+  const worker = new SharedWorker(new URL('./worker.ts', import.meta.url), { name: 'HydroMessagesWorker' });
+  worker.port.start();
+  window.addEventListener('beforeunload', () => {
+    worker.port.postMessage({ type: 'unload' });
+  });
+  worker.port.postMessage({ type: 'conn', path: endpoint, cookie: document.cookie });
+  worker.port.onmessage = async (message) => {
+    if (process.env.NODE_ENV !== 'production') console.log('onmessage: ', message);
+    const { payload, type } = message.data;
+    if (type === 'message') {
+      if (onmessage(payload)) worker.port.postMessage({ type: 'ack', id: payload.mdoc._id });
+    } else if (type === 'i18n') {
+      worker.port.postMessage({ type: 'ack', id: `${payload.mdoc._id}-i18n`, payload: processI18n(payload) });
+    } else if (type === 'open-page') {
+      console.log('opening page');
+      window.open('/home/messages');
+    }
+  };
+};
+
+const messagePage = new AutoloadPage('messagePage', (pagename) => {
+  if (pagename === 'home_messages' || !UserContext._id) return;
+  if (UserContext.unreadMsg) {
+    new VjNotification({
+      type: 'info',
+      message: i18n(`You have ${UserContext.unreadMsg > 1 ? 'new messages' : 'a new message'}.`),
+      duration: 5000,
+      action: () => window.open('/home/messages', '_blank'),
+    }).show();
+  }
+  const url = new URL(`${UiContext.ws_prefix}websocket`, window.location.href);
+  const endpoint = url.toString().replace('http', 'ws');
+  if (window.SharedWorker) {
+    try {
+      initWorkerMode(endpoint);
+      return;
+    } catch (e) {
+      console.error('SharedWorker init fail: ', e.message);
+    }
+  }
+  if (!window.BroadcastChannel) {
+    console.error('BoardcastChannel not supported');
+    return;
+  }
+
+  console.log('Messages: using BroadcastChannel');
+  let isMaster = false;
+  const selfId = nanoid();
+  const channel = new BroadcastChannel('hydro-messages');
+  const pages = JSON.parse(localStorage.getItem('pages') || '[]') as string[];
+  pages.push(selfId);
+  pages.sort();
+  localStorage.setItem('pages', JSON.stringify(pages));
+
+  window.onunload = () => {
+    const c = JSON.parse(localStorage.getItem('pages') || '[]') as string[];
+    localStorage.setItem('pages', JSON.stringify(c.filter((i) => i !== selfId)));
+    if (!isMaster) return;
+    localStorage.removeItem('page.master');
+    channel.postMessage({ type: 'master' });
+  };
+
+  function asMaster() {
+    console.log('init as master');
+    isMaster = true;
+    localStorage.setItem('page.master', selfId);
+    const masterChannel = new BroadcastChannel('hydro-messages');
+    const sock = new Sock(endpoint);
+    sock.onopen = () => {
+      sock.send(JSON.stringify({
+        operation: 'subscribe',
+        request_id: Math.random().toString(16).substring(2),
+        credential: document.cookie.split('sid=')[1].split(';')[0],
+        channels: ['message'],
+      }));
+    };
+    sock.onmessage = async (message) => {
+      const payload = JSON.parse(message.data);
+      if (payload.operation === 'event') {
+        masterChannel.postMessage({ type: 'message', payload: payload.payload });
+      }
+    };
+  }
+
+  channel.onmessage = (msg) => {
+    if (msg.data.type === 'message' && !document.hidden) {
+      onmessage(msg.data.payload);
+    }
+    if (msg.data.type === 'master') {
+      const c = JSON.parse(localStorage.getItem('pages') || '[]') as string[];
+      if (c[0] === selfId) asMaster();
+    }
+  };
+  if (!localStorage.getItem('page.master')) asMaster();
+});
+
+export default messagePage;

package/components/message/worker.ts

@@ -0,0 +1,110 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="webworker" />
+import ReconnectingWebsocket from 'reconnecting-websocket';
+import { FLAG_I18N, FLAG_INFO } from 'vj/constant/message';
+declare const self: SharedWorkerGlobalScope;
+
+console.log('SharedWorker init');
+
+let conn: ReconnectingWebsocket;
+let lcookie: string;
+const ports: Set<MessagePort> = new Set();
+interface RequestInitSharedConnPayload {
+  type: 'conn';
+  cookie: string;
+  path: string;
+}
+interface RequestAckPayload {
+  type: 'ack';
+  id: string;
+  payload?: any;
+}
+interface RequestUnloadPayload {
+  type: 'unload';
+}
+type RequestPayload = RequestInitSharedConnPayload | RequestAckPayload | RequestUnloadPayload;
+const ack = {};
+
+function broadcastMsg(message: any) {
+  for (const p of ports) p.postMessage(message);
+}
+
+function onMessage(message: any) {
+  broadcastMsg({ type: 'message', payload: message });
+  let acked = false;
+  let payload = message;
+  ack[message.mdoc._id] = () => { acked = true; };
+  ack[`${message.mdoc._id}-i18n`] = (v) => { payload = v; };
+  if (message.mdoc.flag & FLAG_I18N) broadcastMsg({ type: 'i18n', payload: message });
+  setTimeout(() => {
+    delete ack[message.mdoc._id];
+    delete ack[`${message.mdoc._id}-i18n`];
+    if (acked) return;
+    if (message.mdoc.flag & FLAG_INFO) return;
+    if (Notification?.permission !== 'granted') {
+      console.log('Notification permission denied');
+      return;
+    }
+    console.log('Sending as system notification');
+    // eslint-disable-next-line no-new
+    new Notification(
+      payload.udoc._id === 1 ? payload.mdoc.content.split('\n')[0] : payload.udoc.uname || 'Hydro Notification',
+      payload.udoc._id === 1 ? {
+        tag: `notification-${payload.mdoc._id}`,
+        icon: payload.mdoc.avatar || '/android-chrome-192x192.png',
+        body: payload.mdoc.content.split('\n').slice(1).join('\n'),
+      } : {
+        tag: `message-${payload.mdoc._id}`,
+        icon: payload.udoc.avatarUrl || '/android-chrome-192x192.png',
+        body: payload.mdoc.content,
+      },
+    );
+  }, 3000);
+}
+
+function initConn(path: string, port: MessagePort, cookie: any) {
+  ports.add(port);
+  console.log('Init connection');
+  lcookie = cookie.split('sid=')[1].split(';')[0];
+  if (conn) return;
+  const url = new URL(path, location.origin);
+  conn = new ReconnectingWebsocket(url.toString().replace('http', 'ws'));
+  conn.onopen = () => {
+    console.log('Connected');
+    broadcastMsg({ type: 'open' });
+    conn.send(JSON.stringify({
+      operation: 'subscribe',
+      request_id: Math.random().toString(16).substring(2),
+      credential: lcookie,
+      channels: ['message'],
+    }));
+  };
+  conn.onerror = () => broadcastMsg({ type: 'error' });
+  conn.onclose = (ev) => broadcastMsg({ type: 'close', error: ev.reason });
+  conn.onmessage = (message) => {
+    if (process.env.NODE_ENV !== 'production') console.log('SharedWorker.port.onmessage: ', message);
+    if (message.data === 'ping') {
+      conn.send('pong');
+      return;
+    }
+    const payload = JSON.parse(message.data);
+    if (['PermissionError', 'PrivilegeError'].includes(payload.error)) {
+      broadcastMsg({ type: 'close', error: payload.error });
+      conn.close();
+    } else if (payload.operation === 'event') {
+      onMessage(payload.payload);
+    }
+  };
+}
+
+self.onconnect = function (e) {
+  const port = e.ports[0];
+
+  port.addEventListener('message', (msg: { data: RequestPayload }) => {
+    if (msg.data.type === 'conn') initConn(msg.data.path, port, msg.data.cookie);
+    if (msg.data.type === 'ack') ack[msg.data.id]?.(msg.data.payload);
+    if (msg.data.type === 'unload') ports.delete(port);
+  });
+
+  port.start();
+};

package/components/messagepad/DialogueListItem.page.styl

@@ -0,0 +1,28 @@
+$stripe-width = 2px
+
+.messagepad__list-item
+  display: block
+  padding: rem(20px $section-gap-h 20px ($section-gap-h - $stripe-width))
+  border-left: $stripe-width solid transparent
+  cursor: pointer
+  transition: border-color .1s linear, background-color .1s linear
+  overflow: hidden
+  text-overflow: ellipsis
+
+  &:hover
+    border-color: #DDD
+    background: #F4F4F4
+    text-decoration: none
+
+  &.active
+    border-color: $secondary-color
+    background: rgba($secondary-color, 0.07)
+
+.messagepad__desc
+  font-size: rem($font-size-small)
+  color: #888
+  max-height: 2em
+  margin-top: rem(5px)
+  overflow: hidden
+  text-overflow: ellipsis
+  word-wrap()

package/components/messagepad/DialogueListItemComponent.jsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+export default function DialogueListItemComponent(props) {
+  const {
+    userName,
+    summary,
+    faceUrl,
+    active,
+    onClick,
+    className,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'messagepad__list-item media', {
+    active,
+  });
+  return (
+    <li {...rest}>
+      <a className={cn} onClick={onClick}>
+        <div className="media__left middle">
+          <img src={faceUrl} alt="avatar" width="50" height="50" className="medium user-profile-avatar" />
+        </div>
+        <div className="media__body middle">
+          <h3 className="messagepad__username">{userName}</h3>
+          <div className="messagepad__desc">{summary}</div>
+        </div>
+      </a>
+    </li>
+  );
+}
+
+DialogueListItemComponent.propTypes = {
+  userName: PropTypes.string.isRequired,
+  summary: PropTypes.string.isRequired,
+  faceUrl: PropTypes.string.isRequired,
+  active: PropTypes.bool,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+};

package/components/messagepad/Message.page.styl

@@ -0,0 +1,64 @@
+$corner-size = 10px
+
+.messagepad__message
+  overflow: hidden
+  display: flex
+  margin-bottom: rem(30px)
+
+  &:last-child
+    margin-bottom: 0
+
+  &.side--self
+    justify-content: flex-end
+
+.messagepad__message__body
+  font-size: rem($font-size-secondary)
+  line-height: 1.5
+  padding: rem(15px)
+  margin-bottom: rem(8px)
+  position: relative
+  min-width: rem(100px)
+  white-space: pre-wrap
+  word-wrap()
+
+  time
+    opacity: 0.6
+    font-size: rem($font-size-small)
+
+  &:after
+    position: absolute
+    width: 0
+    height: 0
+    content: ''
+    top: 0
+
+.side--other
+  .messagepad__message__body
+    margin-left: rem($corner-size + 10px)
+    background: $primary-color
+    color: #FFF
+    order: 1
+
+    &:after
+      left: rem(-($corner-size))
+      border-top: $corner-size solid $primary-color
+      border-right: 0 solid transparent
+      border-bottom: 0 solid transparent
+      border-left: $corner-size solid transparent
+
+.side--self
+  .messagepad__message__body
+    margin-right: rem($corner-size + 10px)
+    background: #F0F0F0
+    color: #222
+    order: -1
+
+    time
+      text-align: right
+
+    &:after
+      right: rem(-($corner-size))
+      border-top: $corner-size solid #F0F0F0
+      border-right: $corner-size solid transparent
+      border-bottom: 0 solid transparent
+      border-left: 0 solid transparent

package/components/messagepad/MessageComponent.jsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+export default function MessageComponent(props) {
+  const {
+    faceUrl,
+    isSelf,
+    className,
+    children,
+    ...rest
+  } = props;
+  const cn = classNames(className, 'messagepad__message', {
+    'side--self': isSelf,
+    'side--other': !isSelf,
+  });
+  return (
+    <li {...rest} className={cn}>
+      <div className="messagepad__message__avatar">
+        <img src={faceUrl} alt="avatar" width="50" height="50" className="medium user-profile-avatar" />
+      </div>
+      <div className="messagepad__message__body">
+        {children}
+      </div>
+    </li>
+  );
+}
+
+MessageComponent.propTypes = {
+  isSelf: PropTypes.bool,
+  faceUrl: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  children: PropTypes.node,
+};

package/components/messagepad/MessagePad.page.styl

@@ -0,0 +1,99 @@
+$list-height = 500px
+$sidebar-width = 250px
+$input-height = 80px
+$input-padding = 10px
+$send-button-width = 50px
+
+#messagePad
+  min-height: rem($list-height)
+  position: relative
+
+.messagepad
+  position: relative
+
+.messagepad__sidebar
+  border-right: 1px solid #EEE
+  float: left
+  width: rem($sidebar-width)
+
+.messagepad__list
+  overflow: auto
+  height: rem($list-height)
+
+.messagepad__header
+  position: absolute
+  left: rem($sidebar-width)
+  right: 0
+  top: 0
+  height: rem(30px)
+  padding: rem(5px)
+  text-align: center
+  border-bottom: 1px solid #eee;
+
+.messagepad__content
+  position: absolute
+  left: rem($sidebar-width)
+  right: 0
+  top: rem(30px)
+  bottom: rem($input-height)
+  overflow: auto
+  padding: rem(30px)
+
+.messagepad__input
+  display: none
+  position: absolute
+  left: rem($sidebar-width)
+  right: 0
+  bottom: 0
+  height: $input-height
+  border-top: 1px solid #EEE
+
+  &.visible
+    display: block
+
+  button
+    display: block
+    appearance: none
+    position: absolute
+    right: 0
+    width: rem($send-button-width)
+    top: 0
+    height: 100%
+    border: 0
+    background: none
+    text-align: center
+    line-height: rem($input-height)
+    font-size: rem($font-size-icon)
+    transition: background-color .1s, color .1s, opacity .1s
+    transition-timing-function: linear
+    outline: 0
+
+    &:enabled
+      cursor: pointer
+      background-color: $primary-color
+      color: #FFF
+
+      &:hover
+        background-color: lighten($primary-color, 10%)
+
+    &:disabled
+      color: $text-1-color
+      opacity: 0.3
+
+.messagepad__textarea-container
+  position: absolute
+  left: rem($input-padding)
+  right: rem($send-button-width + $input-padding)
+  top: rem($input-padding)
+  bottom: rem($input-padding)
+
+  textarea
+    display: block
+    border: 0
+    background: none
+    padding: 0
+    width: 100%
+    height: 100%
+    font-size: rem($font-size-secondary)
+    resize: none
+    outline: 0

package/components/messagepad/MessagePadDialogueContentContainer.jsx

@@ -0,0 +1,104 @@
+import 'jquery.easing';
+
+import $ from 'jquery';
+import moment from 'moment';
+import React from 'react';
+import { connect } from 'react-redux';
+import TimeAgo from 'timeago-react';
+import { i18n, mongoId } from 'vj/utils';
+import Message from './MessageComponent';
+
+const mapStateToProps = (state) => ({
+  activeId: state.activeId,
+  item: state.activeId !== null
+    ? state.dialogues[state.activeId]
+    : null,
+});
+
+export default connect(mapStateToProps)(class MessagePadDialogueContentContainer extends React.PureComponent {
+  componentDidUpdate(prevProps) {
+    const node = this.state.ref;
+
+    if (this.props.activeId !== prevProps.activeId) {
+      this.scrollToBottom = true;
+      this.scrollWithAnimation = false;
+    } else if (Math.abs(node.scrollTop + node.offsetHeight - node.scrollHeight) < 200) {
+      this.scrollToBottom = true;
+      this.scrollWithAnimation = true;
+    } else this.scrollToBottom = false;
+
+    if (!node) return;
+    if (this.scrollToBottom) {
+      const targetScrollTop = node.scrollHeight - node.offsetHeight;
+      if (this.scrollWithAnimation) {
+        $(node).stop().animate({ scrollTop: targetScrollTop }, 200, 'easeOutCubic');
+      } else {
+        node.scrollTop = targetScrollTop;
+      }
+    }
+  }
+
+  renderContent(msg) {
+    // TODO: FLAG_RICHTEXT
+    if (msg.from === 1) {
+      // Is system message
+      try {
+        const data = JSON.parse(msg.content);
+        const str = i18n(data.message).replace(/\{([^{}]+)\}/g, (match, key) => `%placeholder%${key}%placeholder%`);
+        const arr = str.split('%placeholder%');
+        data.params ||= {};
+        for (let i = 1; i < arr.length; i += 2) {
+          if (arr[i].endsWith(':link')) {
+            const link = data.params[arr[i].split(':link')[0]];
+            if (!link) continue;
+            arr[i] = <a style={{ color: 'wheat' }} href={link} key={i} target="_blank" rel="noreferrer">{link}</a>;
+          } else {
+            arr[i] = <span style={{ color: 'wheat' }} key={i}>{data.params[arr[i]]}</span>;
+          }
+        }
+        return arr;
+      } catch (e) { }
+      return i18n(msg.content);
+    }
+    return msg.content;
+  }
+
+  renderInner() {
+    if (this.props.activeId === null) return [];
+    const sorted = this.props.item.messages
+      .sort((msg1, msg2) => mongoId(msg1._id).timestamp - mongoId(msg2._id).timestamp);
+    return sorted.map((msg) => (
+      <Message
+        key={msg._id}
+        isSelf={msg.from === UserContext._id}
+        faceUrl={
+          msg.from === UserContext._id
+            ? UserContext.avatarUrl
+            : this.props.item.udoc.avatarUrl
+        }
+      >
+        <div>{this.renderContent(msg)}</div>
+        <time data-tooltip={moment(mongoId(msg._id).timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}>
+          <TimeAgo datetime={mongoId(msg._id).timestamp * 1000} locale={i18n('timeago_locale')} />
+        </time>
+      </Message>
+    ));
+  }
+
+  render() {
+    return (
+      <>
+        <div className="messagepad__header">
+          {this.props.item && (
+            <a className="messagepad__content__header__title" href={`/user/${this.props.item.udoc._id}`}>
+              {`${this.props.item.udoc.uname}(UID: ${this.props.item.udoc._id})`}
+            </a>
+          )}
+        </div>
+        <ol className="messagepad__content" style={{ overscrollBehavior: 'contain' }} ref={(ref) => { this.setState({ ...this.state, ref }); }}>
+          {this.renderInner()}
+        </ol>
+      </>
+    );
+  }
+});

package/components/messagepad/MessagePadDialogueListContainer.jsx

@@ -0,0 +1,49 @@
+import _ from 'lodash';
+import React from 'react';
+import { connect } from 'react-redux';
+import { i18n } from 'vj/utils';
+import ListItem from './DialogueListItemComponent';
+
+const mapStateToProps = (state) => ({
+  activeId: state.activeId,
+  dialogues: state.dialogues,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  handleClick(id) {
+    dispatch({
+      type: 'DIALOGUES_SWITCH_TO',
+      payload: id,
+    });
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(class MessagePadDialogueListContainer extends React.PureComponent {
+  render() {
+    const orderedDialogues = _.orderBy(
+      _.values(this.props.dialogues),
+      (dialogue) => (_.maxBy(dialogue.messages, '_id')
+        ? _.maxBy(dialogue.messages, '_id')._id
+        : Number.POSITIVE_INFINITY),
+      'desc',
+    );
+    return (
+      <ol className="messagepad__list" style={{ overscrollBehavior: 'contain' }}>
+        {_.map(orderedDialogues, (dialogue) => (
+          <ListItem
+            key={dialogue._id}
+            userName={dialogue.udoc.uname}
+            summary={dialogue.messages.length
+              ? (_.maxBy(dialogue.messages, '_id').flag & 4)
+                ? i18n('[Richtext message]')
+                : _.maxBy(dialogue.messages, '_id').content
+              : ''}
+            faceUrl={dialogue.udoc.avatarUrl}
+            active={dialogue._id === this.props.activeId}
+            onClick={() => this.props.handleClick(dialogue._id)}
+          />
+        ))}
+      </ol>
+    );
+  }
+});