@x-edu/live-player 0.0.1

package/src/component/IMChatroom/page/chat/messageList/index.jsx

@@ -0,0 +1,354 @@
+import React, { Component } from 'react'
+import { ChatroomChatMessageList, ChatMessageList } from '@sdp.nd/im-web-components'
+import get from 'lodash/get'
+import { message as messageTip, Modal } from 'fish'
+import intl from '../../../i18n'
+
+import subscription from '../../../subscription'
+import requestConfig from '../../../config/request/config/base'
+import { getHistoryMessages, recallMessage } from '../../../sdk/imcore'
+import * as C from '../../../constants'
+import env from '../../../config/env'
+import urlConfig from '../../../config/url'
+import {
+  getChatroomConversationId,
+  getChatroomToken,
+  getActionRights,
+  getTags,
+  getCurrentAccountBanedTip
+} from '../../../util/chatroom'
+import appConfig from '../../../config/app'
+// import thirdParty from '../../../third-party'
+import { useConnect } from '../../../context/connect'
+import { useChatroom } from '../../../context/chatroom'
+import getUserInfoWithCache from '../../../sdk/oms'
+
+import style from '../style/index.module.less'
+
+class MessageList extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      autoViewMessage: appConfig.get('autoViewMessage')
+    }
+
+    this.subscriptions = {}
+    this.uploadMessages = []
+  }
+
+  componentDidMount() {
+    this.addSubscriptions()
+  }
+
+  componentWillUnmount() {
+    this.removeSubscriptions()
+  }
+
+  addSubscriptions = () => {
+    this.subscriptions = {
+      updateAutoViewMessage: subscription.message.subscribe(subscription.EVENT.UPDATE_AUTO_VIEW_MESSAGE, this.updateAutoViewMessage),
+      addUploadMessage: subscription.message.subscribe(subscription.EVENT.ADD_UPLOAD_MESSAGE, this.addUploadMessage),
+      addMessages: subscription.websocket.subscribe(subscription.EVENT.RECEIVE_MESSAGES, this.addMessages),
+      previewImages: subscription.message.subscribe(subscription.EVENT.CHAT_MESSAGE_LIST_PREVIEW_IMAGE, this.onPreviewImages),
+      copyMessage: subscription.message.subscribe(subscription.EVENT.CHAT_MESSAGE_LIST_COPY, this.onCopy),
+      unreadMessageCountChange: subscription.message.subscribe(subscription.EVENT.CHAT_MESSAGE_LIST_UNREAD_MESSAGE_COUNT_CHANGE, this.onUnreadMessageCountChange)
+    }
+    window.addEventListener('resize', this.onWindowResize)
+  }
+
+  removeSubscriptions = () => {
+    Object.keys(this.subscriptions).forEach((key) => {
+      if (this.subscriptions[key]) {
+        this.subscriptions[key].unsubscribe()
+      }
+      delete this.subscriptions[key]
+    })
+    window.removeEventListener('resize', this.onWindowResize)
+  }
+
+  updateAutoViewMessage = (value) => {
+    this.setState({
+      autoViewMessage: value
+    })
+    if (value) {
+      subscription.message.publish(subscription.EVENT.CHAT_MESSAGE_LIST_FORCE_READ_NEW)
+    }
+  }
+
+  addUploadMessage = (message) => {
+    console.log('addUploadMessage', message, this.uploadMessages)
+    this.uploadMessages.push(message)
+  }
+
+  addMessages = (messages) => {
+    const uploadMessages = []
+    const otherMessages = []
+    for (let i = 0; i < messages.length; i++) {
+      if (this.uploadMessages.some((item) => item.id === messages[i].id)) {
+        uploadMessages.push({
+          ...messages[i],
+          _uploading: undefined
+        })
+      } else {
+        otherMessages.push(messages[i])
+      }
+    }
+
+    if (uploadMessages.length) {
+      subscription.message.publish(subscription.EVENT.CHAT_MESSAGE_LIST_UPDATE, {
+        action: ChatMessageList.C.CHAT_MESSAGE_LIST_UPDATE_ACTION.UPDATE,
+        key: '_localInfo.id&_localInfo.index',
+        items: uploadMessages
+      })
+      this.uploadMessages = this.uploadMessages.filter((item) => !uploadMessages.some((message) => message.id === item.id))
+    }
+
+    if (otherMessages.length) {
+      subscription.message.publish(subscription.EVENT.CHAT_MESSAGE_LIST_UPDATE, {
+        action: ChatMessageList.C.CHAT_MESSAGE_LIST_UPDATE_ACTION.ADD,
+        items: otherMessages
+      })
+    }
+
+    messages.forEach((message) => {
+      const { type, data } = get(message, '_parsedContent')
+      if (C.SYSTEM_MESSAGE_TYPES.some((item) => item === type)) {
+        subscription[type].publish(get(data, `json.${type}.cmd`), message)
+      }
+    })
+  }
+
+  onPreviewImages = (
+    // {
+    //   url,
+    //   index,
+    //   images
+    // }
+  ) => {
+    // thirdParty.onPostMessage(thirdParty.EVENT.PREVIEW_IMAGES, {
+    //   url,
+    //   index,
+    //   images
+    // })
+  }
+
+  onCopy = () => {
+    messageTip.success(intl.get('tip.copied'))
+  }
+
+  onUnreadMessageCountChange = (
+    // count
+  ) => {
+    // thirdParty.onPostMessage(thirdParty.EVENT.UNREAD_MESSAGE_COUNT_CHANGE, {
+    //   count
+    // })
+  }
+
+  onWindowResize = () => {
+    subscription.message.publish(subscription.EVENT.CHAT_MESSAGE_LIST_SCROLL_TO_BOTTOM)
+  }
+
+  onRecallMessageByWebsocket = (message) => {
+    recallMessage(message).catch((res) => {
+      messageTip.error(intl.get(`error.${res.err_msg}`, '') || intl.get('error.serviceError'))
+    })
+  }
+
+  onAction = (
+    // actionKey,
+    // message
+  ) => {
+    // thirdParty.onPostMessage(actionKey, message)
+  }
+
+  getActionConfig = () => {
+    const config = appConfig.get('chatroomChatMessageList.actionConfig')
+
+    if (config.actions) {
+      config.actions.forEach((item, index) => {
+        if (typeof item === 'object') {
+          item.action = (message) => {
+            this.onAction(item.key, message)
+          }
+        } else if (item === 'recallByWS') {
+          config.actions[index] = {
+            key: item,
+            label: intl.get(`message.${item}`),
+            action: (message) => {
+              this.onRecallMessageByWebsocket(message)
+            }
+          }
+        } else if (item === 'delete') {
+          config.actions[index] = {
+            key: item,
+            label: intl.get(`message.${item}`),
+            action: (message) => {
+              Modal.alert({
+                title: intl.get('modal.title'),
+                content: intl.get('modal.content.deleteMessage'),
+                cancelText: intl.get('modal.cancel'),
+                okText: intl.get('modal.cancel'),
+                onOk: () => {
+                  subscription.message.publish(subscription.EVENT.CHAT_MESSAGE_LIST_UPDATE, {
+                    action: ChatMessageList.C.CHAT_MESSAGE_LIST_UPDATE_ACTION.DELETE,
+                    key: '_localInfo.id&_localInfo.index',
+                    items: [message]
+                  })
+                }
+              })
+            }
+          }
+        }
+      })
+    }
+
+    return {
+      ...config,
+      getActionRights: this.getActionRights
+    }
+  }
+
+  getActionRights = (item, keys, callback) => {
+    const { chatroomUserRole, chatroomOwner, chatroomAdmins, chatroomBan, chatroomStickedMessages } = this.props
+
+    getActionRights({
+      userRole: chatroomUserRole,
+      uid: item.from,
+      message: item,
+      actionKeys: keys,
+      owner: chatroomOwner,
+      admins: chatroomAdmins,
+      ban: chatroomBan,
+      stickedMessages: chatroomStickedMessages,
+      callback
+    }, appConfig.get('chatroomChatMessageList.actionConfig.getActionRights'))
+  }
+
+  getTags = (item, callback) => {
+    const { chatroomOwner, chatroomAdmins, chatroomBan } = this.props
+    getTags({
+      uid: item.from,
+      message: item,
+      owner: chatroomOwner,
+      admins: chatroomAdmins,
+      ban: chatroomBan,
+      callback
+    }, appConfig.get('chatroomChatMessageList.tagConfig.getTags'))
+  }
+
+  getMessages = (message, pageSize = C.GET_CONV_MSG_LIMIT) => {
+    if (get(message, '_localInfo.id', C.MAX_CONV_MSG_ID) === C.MIM_CONV_MSG_ID) {
+      return Promise.resolve({
+        items: [],
+        hasMore: false
+      })
+    }
+
+    return getHistoryMessages(get(message, '_localInfo.id', C.MAX_CONV_MSG_ID), pageSize).then(({
+      messages,
+      hasMore
+    }) => {
+      // 查看历史消息时，才需要吐司提示，初始化会话消息时不提示
+      if (get(message, '_localInfo.id') && !hasMore) {
+        messageTip.info(intl.get('tip.noMoreMessage'))
+      }
+      return {
+        items: messages,
+        hasMore
+      }
+    })
+  }
+
+  getDisabled = () => {
+    const { connectStatus } = this.props
+    if (connectStatus === C.CONNECT_STATUS.LOGIN_SUCCESS) {
+      console.log(getCurrentAccountBanedTip(this.props.chatroomBan), this.props.disableEditor)
+      return getCurrentAccountBanedTip(this.props.chatroomBan)
+        || this.props.disableEditor
+        || false
+    }
+  }
+
+  getProps = () => ({
+    itemKey: 'message-item&time&_localInfo.id&_localInfo.index',
+    senderKey: 'from',
+    conversationIdKey: 'conversationId',
+    messageTimeKey: 'time',
+    messageIdKey: 'id',
+    messageContentKey: 'content',
+    platform: appConfig.get('platform'),
+    gid: urlConfig.roomId,
+    convid: getChatroomConversationId(),
+    token: getChatroomToken(),
+    pageSize: C.GET_CONV_MSG_LIMIT,
+    getData: this.getMessages,
+    autoViewMessage: this.state.autoViewMessage,
+    env,
+    requestConfig,
+    ...appConfig.get('chatroomChatMessageList'),
+    messageContentConfig: {
+      ...appConfig.get('chatroomChatMessageList.messageContentConfig'),
+      getUserInfo: (uid) => getUserInfoWithCache(uid)
+    },
+    nameConfig: {
+      getInfo: (data) => getUserInfoWithCache(get(data, 'from')),
+      ...appConfig.get('chatroomChatMessageList.nameConfig')
+    },
+    actionConfig: this.getActionConfig(),
+    tagConfig: {
+      ...appConfig.get('chatroomChatMessageList.tagConfig'),
+      getTags: this.getTags
+    },
+    subscription: subscription.message,
+    disabled: this.getDisabled()
+  })
+
+  render() {
+    if (!this.props.connectTimes) {
+      return null
+    }
+
+    const props = this.getProps()
+
+    if (props.disabled) {
+      console.log(true)
+    }
+    return (
+      <>
+        {
+          props.disabled
+            ? (<div className={style['banned-overlayer']} />)
+            : (<></>)
+        }
+        <ChatroomChatMessageList {...props} />
+      </>
+    )
+  }
+}
+
+function MessageListFn(props) {
+  const {
+    status,
+    times
+  } = useConnect()
+
+  const {
+    userRole, owner, admins, ban, stickedMessages
+  } = useChatroom()
+
+  return (
+    <MessageList
+      connectStatus={status}
+      connectTimes={times}
+      chatroomUserRole={userRole}
+      chatroomOwner={owner}
+      chatroomAdmins={admins}
+      chatroomBan={ban}
+      chatroomStickedMessages={stickedMessages}
+      {...props}
+    />
+  )
+}
+
+export default MessageListFn

package/src/component/IMChatroom/page/chat/stickedMessage/index.jsx

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import { MessageContent } from '@sdp.nd/im-web-components'
+import { Icon } from 'fish'
+
+import intl from '../../../i18n'
+import { parseMessage } from '../../../sdk/imcore/util/format'
+import { isCurrentAccountId } from '../../../util/account'
+
+import style from './style/index.module.less'
+import { useChatroom } from '../../../context/chatroom'
+
+class StickedMessage extends Component {
+  render() {
+    const { chatroomStickedMessages, chatroomOwner } = this.props
+    if (!chatroomStickedMessages.length) {
+      return null
+    }
+
+    const stickedMessage = parseMessage(chatroomStickedMessages[0])
+    console.log('stickedMessage', stickedMessage)
+
+    return (
+      <div className={style['sticked-message-container']}>
+        {
+          isCurrentAccountId(chatroomOwner.uid) && (
+            <div className={style.close}>
+              <Icon
+                type="close-circle"
+                title={intl.get('message.stick.cancel')}
+                onClick={
+                  () => {
+                    this.props.deleteChatroomStickMessages()
+                  }
+                }
+              />
+            </div>
+          )
+        }
+        <MessageContent message={stickedMessage} />
+      </div>
+    )
+  }
+}
+
+function StickedMessageFn() {
+  const {
+    owner, stickedMessages, deleteChatroomStickMessages
+  } = useChatroom()
+
+  return (
+    <StickedMessage
+      chatroomOwner={owner}
+      chatroomStickedMessages={stickedMessages}
+      deleteChatroomStickMessages={deleteChatroomStickMessages}
+    />
+  )
+}
+
+export default StickedMessageFn

package/src/component/IMChatroom/page/chat/stickedMessage/style/index.module.less

@@ -0,0 +1,8 @@
+.sticked-message-container {
+  padding: 10px 20px;
+  border: 1px #eee solid;
+
+  .close {
+    text-align: right;
+  }
+}

package/src/component/IMChatroom/page/chat/style/index.module.less

@@ -0,0 +1,52 @@
+.chat-container {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+
+  :global(#chatMessageList .fish-empty-description) {
+    color: #333;
+  }
+
+  :global(.chat-message-list-item-time) {
+    padding-left: 5px;
+  }
+
+  .chat-body {
+    height: 50px; /*设置一个高度，然后通过flex:1撑开*/
+    flex: 1;
+    position: relative;
+
+    :global(.chat-message-list .chat-message-list-inner) {
+      padding: 0 14px;
+    }
+  }
+
+  .banned-overlayer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: #fff;
+    z-index: 99;
+  }
+
+  :global(#messageEditorDisabledBox > div) {
+    width: 100%;
+    text-align: center;
+  }
+
+  :global(#messageEditorDisabledBox) {
+    background-color: #eee;
+    color: #999;
+    font-size: 14px;
+  }
+
+  .chat-footer {
+    :global(.message-editor-container.message-editor-container-h5) {
+      margin: 8px 14px;
+    }
+  }
+}

package/src/component/IMChatroom/page/home/connect/index.jsx

@@ -0,0 +1,188 @@
+import React, { Component } from 'react'
+import get from 'lodash/get'
+
+import {
+  setChatroom,
+  getChatroom as getChatroomUtil,
+  setChatroomConversationId,
+  setChatroomToken,
+  getChatroomToken
+} from '../../../util/chatroom'
+import { initIMCoreChatroom, getIMCoreChatroom, reconnectIMCoreChatroom } from '../../../sdk/imcore'
+import { CONNECT_STATUS, ERROR_CODE } from '../../../constants'
+import subscription from '../../../subscription'
+
+import ConnectStatus from './status'
+import { useConnect } from '../../../context/connect'
+import { useChatroom } from '../../../context/chatroom'
+
+class Connect extends Component {
+  constructor(props) {
+    super(props)
+    this.retryTimes = 0
+  }
+
+  componentDidMount() {
+    this.loginChatroom()
+    window.addEventListener('online', this.handleOnline)
+  }
+
+  componentDidUpdate(prevProps) {
+    const { status, times } = this.props
+    if (prevProps.status !== status && status === CONNECT_STATUS.LOGIN_SUCCESS && times > 1) {
+      subscription.message.publish(subscription.EVENT.CHAT_MESSAGE_LIST_INIT)
+      const chatroom = getChatroomUtil()
+      if (chatroom) {
+        this.initChatroom(chatroom)
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('online', this.handleOnline)
+  }
+
+  loginChatroom = () => {
+    if (getChatroomToken()) {
+      this.getChatroom()
+    } else {
+      this.props.loginChatroom()
+        .then((token) => {
+          setChatroomToken(token)
+          this.getChatroom()
+          this.retryTimes = 0
+        })
+        .catch((error) => {
+          console.log('login chatroom error:', error)
+
+          if (get(error, 'data.code') === ERROR_CODE.NETWORK_ERROR) {
+            if (this.retryTimes < 5) {
+              setTimeout(() => {
+                this.retryTimes += 1
+                this.onReConnect()
+              }, 2000)
+              return
+            }
+            this.props.setStatus(CONNECT_STATUS.NETWORK_ERROR)
+            return
+          }
+
+          if (get(error, 'data.code') === ERROR_CODE.IMP_TOKEN_EXPIRED) {
+            setChatroomToken()
+            if (this.retryTimes < 5) {
+              setTimeout(() => {
+                this.retryTimes += 1
+                this.onReConnect()
+              }, 500)
+              return
+            }
+          }
+          this.props.setStatus(CONNECT_STATUS.LOGIN_FAIL)
+        })
+    }
+  }
+
+  // 需要重获取聊天室信息时
+  getChatroom = () => {
+    this.props.getChatroom()
+      .then((chatroom) => {
+        setChatroom(chatroom)
+        setChatroomConversationId(chatroom)
+        this.loginCore()
+        this.initChatroom(chatroom)
+        this.retryTimes = 0
+      })
+      .catch((error) => {
+        console.log('get chatroom error:', error)
+
+        if (get(error, 'data.code') === ERROR_CODE.NETWORK_ERROR) {
+          if (this.retryTimes < 5) {
+            setTimeout(() => {
+              this.retryTimes += 1
+              this.onReConnect()
+            }, 2000)
+            return
+          }
+          this.props.setStatus(CONNECT_STATUS.NETWORK_ERROR)
+          return
+        }
+
+        if (get(error, 'data.code') === ERROR_CODE.IMP_AUTH_TOKEN_EXPIRED) {
+          setChatroomToken()
+          if (this.retryTimes < 5) {
+            setTimeout(() => {
+              this.retryTimes += 1
+              this.onReConnect()
+            }, 500)
+            return
+          }
+        }
+        this.props.setStatus(CONNECT_STATUS.GET_CHATROOM_INFO_FAIL)
+      })
+  }
+
+  loginCore = () => {
+    if (getIMCoreChatroom()) {
+      reconnectIMCoreChatroom()
+    } else {
+      initIMCoreChatroom()
+        .catch((error) => {
+          console.log('login core error:', error)
+          this.props.setStatus(CONNECT_STATUS.LOGIN_FAIL)
+        })
+    }
+  }
+
+  initChatroom = (chatroom) => {
+    if (chatroom.user_role === 2) {
+      this.props.getChatroomAdmins()
+    }
+    this.props.getChatroomBan()
+  }
+
+  onReConnect = () => {
+    this.props.setStatus(CONNECT_STATUS.CONNECTING)
+    this.loginChatroom()
+  }
+
+  handleOnline = () => {
+    if ([CONNECT_STATUS.DISCONNECT, CONNECT_STATUS.NETWORK_ERROR].find((item) => item === this.props.status)) {
+      this.onReConnect()
+    }
+  }
+
+  render() {
+    return (
+      <ConnectStatus onRetry={this.onReConnect} />
+    )
+  }
+}
+
+function ConnectFn() {
+  const {
+    status,
+    times,
+    setStatus
+  } = useConnect()
+
+  const {
+    getChatroom,
+    getChatroomAdmins,
+    getChatroomBan,
+    loginChatroom
+  } = useChatroom()
+
+  return (
+    <Connect
+      status={status}
+      times={times}
+      setStatus={setStatus}
+      loginChatroom={loginChatroom}
+      getChatroom={getChatroom}
+      getChatroomAdmins={getChatroomAdmins}
+      getChatroomBan={getChatroomBan}
+    />
+  )
+}
+
+export default ConnectFn