@x-edu/live-player 0.0.1

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

@@ -0,0 +1,124 @@
+import React, { Component } from 'react'
+import get from 'lodash/get'
+import intl from '../../../i18n'
+
+import { useConnect } from '../../../context/connect'
+import subscription from '../../../subscription'
+import { CONNECT_STATUS, RETRY_CONNECT_STATUS, ERROR_CODE } from '../../../constants'
+import { setChatroomToken } from '../../../util/chatroom'
+import { subscribeOnlineStatus } from '../../../sdk/imcore'
+
+class ConnectStatus extends Component {
+  constructor(props) {
+    super(props)
+
+    this.subscriptions = {}
+  }
+
+  componentDidMount() {
+    this.addSubscriptions()
+  }
+
+  componentWillUnmount() {
+    this.removeSubscriptions()
+  }
+
+  addSubscriptions = () => {
+    this.subscriptions = {
+      getChatroomInfoFail: subscription.websocket.subscribe(subscription.EVENT.GET_CHATROOM_INFO_FAIL, this.onGetChatroomInfoFail),
+      connecting: subscription.websocket.subscribe(subscription.EVENT.CONNECTING, this.onConnecting),
+      disconnect: subscription.websocket.subscribe(subscription.EVENT.DISCONNECT, this.onDisconnect),
+      loginSuccess: subscription.websocket.subscribe(subscription.EVENT.LOGIN_SUCCESS, this.onLoginSuccess),
+      loginFail: subscription.websocket.subscribe(subscription.EVENT.LOGIN_FAIL, this.onLoginFail),
+      kickedBySelf: subscription.websocket.subscribe(subscription.EVENT.KICKED_BY_SELF, this.onKickedBySelf),
+      kickedByAdmin: subscription.websocket.subscribe(subscription.EVENT.KICKED_BY_ADMIN, this.onKickedByAdmin),
+      destroyed: subscription.websocket.subscribe(subscription.EVENT.CHATROOM_DESTROYED, this.onDestroyed)
+    }
+  }
+
+  removeSubscriptions = () => {
+    Object.keys(this.subscriptions).forEach((key) => {
+      if (this.subscriptions[key]) {
+        this.subscriptions[key].unsubscribe()
+      }
+      delete this.subscriptions[key]
+    })
+  }
+
+  onGetChatroomInfoFail = (error) => {
+    console.log('onGetChatroomInfoFail', error)
+    if (get(error, 'data.code') === ERROR_CODE.IMP_AUTH_TOKEN_EXPIRED) {
+      setChatroomToken()
+    }
+    this.props.setStatus(CONNECT_STATUS.GET_CHATROOM_INFO_FAIL)
+  }
+
+  onConnecting = (data) => {
+    console.log('onConnecting', data)
+    this.props.setStatus(CONNECT_STATUS.CONNECTING)
+  }
+
+  onDisconnect = (data) => {
+    console.log('onDisconnect', data)
+    if (get(data, 'code') === 1000) {
+      this.onLoginFail(data)
+    } else {
+      this.props.setStatus(CONNECT_STATUS.DISCONNECT)
+    }
+  }
+
+  onLoginSuccess = (data) => {
+    console.log('onLoginSuccess', data)
+    this.props.setStatus(CONNECT_STATUS.LOGIN_SUCCESS)
+    subscribeOnlineStatus()
+  }
+
+  onLoginFail = (data) => {
+    console.log('onLoginFail', data)
+    this.props.setStatus(CONNECT_STATUS.LOGIN_FAIL)
+  }
+
+  onKickedBySelf = () => {
+    console.log('onKickedBySelf')
+    this.props.setStatus(CONNECT_STATUS.KICKED_BY_SELF)
+  }
+
+  onKickedByAdmin = () => {
+    console.log('onKickedByAdmin')
+    this.props.setStatus(CONNECT_STATUS.KICKED_BY_ADMIN)
+  }
+
+  onDestroyed = () => {
+    console.log('onDestroyed')
+    this.props.setStatus(CONNECT_STATUS.CHATROOM_DESTROYED)
+  }
+
+  render() {
+    return (
+      <>
+        {intl.get(`connect.status.${this.props.status}`) || ''}
+        {
+          RETRY_CONNECT_STATUS.some((status) => status === this.props.status) && (
+            <a onClick={this.props.onRetry}>{intl.get('action.retry')}</a>
+          )
+        }
+      </>
+    )
+  }
+}
+
+function ConnectStatusFn() {
+  const {
+    status,
+    setStatus
+  } = useConnect()
+
+  return (
+    <ConnectStatus
+      status={status}
+      setStatus={setStatus}
+    />
+  )
+}
+
+export default ConnectStatusFn

package/src/component/IMChatroom/page/home/context/cmd.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+
+import bridge from '../../../sdk/bridge'
+
+export default class MemberCount extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      text: ''
+    }
+  }
+
+  componentDidMount() {
+    const { type, cmd, message } = this.props
+    bridge.register('cmdParser', {
+      type,
+      cmd,
+      message
+    }).then((text) => {
+      this.setState({
+        text
+      })
+    })
+  }
+
+  render() {
+    const { text } = this.state
+
+    if (!text) {
+      return null
+    }
+
+    return (
+      <span>{text}</span>
+    )
+  }
+}

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

@@ -0,0 +1,67 @@
+import React, { Component } from 'react'
+import { set, get } from 'lodash'
+import { ConfigContext } from '@sdp.nd/im-web-components'
+import locale from '@sdp.nd/im-web-components/dist/esm/i18n/locale'
+
+import { getCurrentAccountId } from '../../../util/account'
+import { multiMsgOrigin, mediaConversionOrigin, csOrigin } from '../../../constants'
+import appConfig from '../../../config/app'
+import urlConfig from '../../../config/url'
+import Cmd from './cmd'
+
+export default class Context extends Component {
+  constructor(props) {
+    super(props)
+    this.locale = locale['zh-CN']
+    this.locale.chatMessageList.empty = '欢迎来到直播间 ~'
+  }
+
+  getLocale = (prefix, _locale) => {
+    if (_locale) {
+      Object.keys(_locale).forEach((key) => {
+        const _prefix = prefix ? `prefix.${key}` : key
+        const value = get(_locale, key)
+        if (typeof value === 'string') {
+          set(this.locale, _prefix, value)
+        } else {
+          this.getLocale(_prefix, value)
+        }
+      })
+    }
+
+    return this.locale
+  }
+
+  getCmdParser = () => {
+    const cmds = appConfig.get('cmds') || []
+    const cmdParser = {}
+    cmds.forEach(({ type, cmd }) => {
+      if (!cmdParser[type]) {
+        cmdParser[type] = {}
+      }
+      cmdParser[type][cmd] = (message) => <Cmd type={type} cmd={cmd} message={message} />
+    })
+    return cmdParser
+  }
+
+  render() {
+    return (
+      <ConfigContext.Provider
+        value={{
+          lang: urlConfig.lang,
+          locale: this.getLocale('', appConfig.get('locale')),
+          style: appConfig.get('style'),
+          multiMsgOrigin,
+          mediaConversionOrigin,
+          csOrigin,
+          user: {
+            user_id: getCurrentAccountId()
+          },
+          cmdParser: this.getCmdParser()
+        }}
+      >
+        <div className={appConfig.get('style')}>{this.props.children}</div>
+      </ConfigContext.Provider>
+    )
+  }
+}

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

@@ -0,0 +1,164 @@
+import React, { Component } from 'react'
+import intl from '../../i18n'
+
+import { DISPLAY_CONNECT_STATUS } from '../../constants'
+
+import Context from './context'
+// import Notice from './notice'
+import Connect from './connect'
+import Chat from '../chat'
+// import Member from '../member'
+import MemberCount from '../member/memberCount'
+// import appConfig from '../../config/app'
+
+import style from './style/index.module.less'
+import { ConnectContext, useConnectRoot } from '../../context/connect'
+import { ChatRoomContext, useChatroomRoot } from '../../context/chatroom'
+
+class Home extends Component {
+  constructor(props) {
+    super(props)
+
+    this.headers = this.getHeaders()
+    this.inners = this.getInners()
+
+    this.state = {
+      activeHeaderKey: this.headers.length ? this.headers[0].key : '',
+      activeInnerKey: this.inners[0].key
+    }
+  }
+
+  getHeaders = () => {
+    const headers = []
+
+    // if (appConfig.get('noticeVisible')) {
+    //   headers.push({
+    //     key: 'notice',
+    //     tabName: intl.get('title.notice'),
+    //     icon: 'notice',
+    //     Component: Notice
+    //   })
+    // }
+
+    return headers
+  }
+
+  getInners = () => {
+    const inners = [{
+      key: 'chat',
+      tabName: intl.get('title.chat'),
+      Component: Chat
+    }]
+
+    // if (appConfig.get('memberVisible')) {
+    //   inners.push({
+    //     key: 'member',
+    //     tabName: intl.get('title.member'),
+    //     Component: Member
+    //   })
+    // }
+
+    return inners
+  }
+
+  setActiveTab = (key, value) => {
+    this.setState({
+      [key]: value
+    })
+  }
+
+  renderTabBars = (key, bars) => bars.map((tab) => (
+    <div
+      key={tab.key}
+      className={tab.key === this.state[key] ? style.active : ''}
+      onClick={() => { this.setActiveTab(key, tab.key) }}
+    >
+      {
+          tab.icon ? (
+            <span className={style[tab.icon]} title={tab.tabName} />
+          ) : (
+            <span>{tab.tabName}</span>
+          )
+        }
+      {
+          tab.key === 'member' && (
+            <>
+              <span>(</span>
+              <MemberCount />
+              <span>)</span>
+            </>
+          )
+        }
+    </div>
+  ))
+
+  renderTabPanes = (key, bars) => bars.map((tab) => (
+    <div
+      key={tab.key}
+      className={tab.key === this.state[key] ? style.active : ''}
+    >
+      <tab.Component disableEditor={this.props.disableEditor} />
+    </div>
+  ))
+
+  render() {
+    return (
+      <Context>
+        <div className={`${
+          style.container
+        } ${
+          DISPLAY_CONNECT_STATUS
+            .some((status) => status === this.props.connectStatus)
+            ? style['container-with-connect-status']
+            : ''}`}
+        >
+          {
+            this.headers.length > 0 && (
+              <div className={style.header}>
+                {
+                  this.headers.length > 1 && (
+                    <div className={style.tabs}>
+                      {this.renderTabBars('activeHeaderKey', this.headers)}
+                    </div>
+                  )
+                }
+                <div className={style.panes}>
+                  {this.renderTabPanes('activeHeaderKey', this.headers)}
+                </div>
+              </div>
+            )
+          }
+          <div className={style.inner}>
+            {
+              this.inners.length > 1 && (
+                <div className={style.tabs}>
+                  {this.renderTabBars('activeInnerKey', this.inners)}
+                </div>
+              )
+            }
+            <div className={style['connect-status-tip']}>
+              <Connect />
+            </div>
+            <div className={style.panes}>
+              {this.renderTabPanes('activeInnerKey', this.inners)}
+            </div>
+          </div>
+        </div>
+      </Context>
+    )
+  }
+}
+
+function HomeFn(props) {
+  const connectRoot = useConnectRoot()
+  const chatRoomRoot = useChatroomRoot()
+  return (
+    <ConnectContext.Provider value={connectRoot}>
+      <ChatRoomContext.Provider value={chatRoomRoot}>
+        <Home connectStatus={connectRoot.status} {...props} />
+      </ChatRoomContext.Provider>
+    </ConnectContext.Provider>
+  )
+}
+
+export default HomeFn

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

@@ -0,0 +1,123 @@
+import React, { Component } from 'react'
+import get from 'lodash/get'
+import { Input, Button } from 'fish'
+import intl from '../../../i18n'
+
+import { isCurrentAccountId } from '../../../util/account'
+import { NOTICE_MAX_LENGTH } from '../../../constants'
+import { useChatroom } from '../../../context/chatroom'
+
+import style from './style/index.module.less'
+
+const { TextArea } = Input
+class Notice extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      editing: false,
+      value: ''
+    }
+
+    this.textareaRef = React.createRef()
+  }
+
+  componentDidMount() {
+    this.props.getChatroomNotice()
+  }
+
+  onEdit = () => {
+    this.setState({
+      editing: true,
+      value: get(this.props.chatroomNotice, 'content', '')
+    }, () => {
+      this.textareaRef.current.focus()
+    })
+  }
+
+  onChange = (value) => {
+    this.setState({
+      value
+    })
+  }
+
+  onCancel = () => {
+    this.setState({
+      editing: false,
+      value: ''
+    }, () => {
+      this.textareaRef.current.textareaRef.blur()
+      this.textareaRef.current.textareaRef.scrollTop = 0
+    })
+  }
+
+  onSave = () => {
+    const notice = this.state.value.trim()
+    if (notice === get(this.props.chatroomNotice, 'content', '')) {
+      this.onCancel()
+    } else {
+      this.props.setChatroomNotice(notice).then(() => {
+        this.onCancel()
+      })
+    }
+  }
+
+  render() {
+    const { editing, value } = this.state
+    const canEdit = isCurrentAccountId(get(this.props.chatroomOwner, 'uid'))
+    const noticeContent = get(this.props.chatroomNotice, 'content', '')
+    return (
+      <div className={style.container}>
+        <div className={style.inner}>
+          <TextArea
+            ref={this.textareaRef}
+            value={editing ? value : noticeContent}
+            onChange={this.onChange}
+            readOnly={!editing}
+          />
+        </div>
+        {
+          canEdit && (
+            <div className={style.footer}>
+              {
+                editing ? (
+                  <>
+                    <Button inline size="small" onClick={this.onCancel}>{intl.get('action.cancel')}</Button>
+                    <Button inline size="small" type="primary" onClick={this.onSave}>{intl.get('action.save')}</Button>
+                  </>
+                ) : (
+                  <Button inline size="small" type="primary" onClick={this.onEdit}>{intl.get('action.edit')}</Button>
+                )
+              }
+              {
+                value.length > NOTICE_MAX_LENGTH && (
+                <span className={style['error-tip']}>
+                  {intl.get('tip.maxInputLength', {
+                    n: NOTICE_MAX_LENGTH
+                  })}
+                </span>
+                )
+              }
+            </div>
+          )
+        }
+      </div>
+    )
+  }
+}
+
+function NoticeFn() {
+  const {
+    owner, notice, getChatroomNotice, setChatroomNotice
+  } = useChatroom()
+  return (
+    <Notice
+      chatroomOwner={owner}
+      chatroomNotice={notice}
+      getChatroomNotice={getChatroomNotice}
+      setChatroomNotice={setChatroomNotice}
+    />
+  )
+}
+
+export default NoticeFn

package/src/component/IMChatroom/page/home/notice/style/index.module.less

@@ -0,0 +1,50 @@
+.container {
+  width: 100%;
+  height: 130px;
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px #eee solid;
+
+  .inner {
+    flex: 1;
+
+    :global(.fm-textarea) {
+      padding: 0;
+      height: 100%;
+      border-bottom: 0;
+
+      textarea {
+        font-size: 14px;
+        padding: 8px 20px;
+        color: #314659;
+        line-height: 1.5;
+        border-bottom: 0;
+
+        &:read-only {
+          cursor: default;
+        }
+      }
+    }
+
+    > p {
+      font-size: 14px;
+      padding: 8px 20px;
+      line-height: 1.5;
+    }
+  }
+
+  .footer {
+    padding: 8px 20px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+
+    :global(.fm-button) {
+      margin-left: 10px;
+    }
+
+    .error-tip {
+      color: #ff4d4f;
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs {
+  border-bottom: 1px #eee solid;
+
+  > div {
+    display: inline-block;
+    cursor: pointer;
+  }
+}
+
+.panes {
+  min-height: 100px; /*设置一个高度，然后通过flex:1撑开*/
+  flex: 1;
+
+  > div {
+    display: none;
+    height: 100%;
+
+    &.active {
+      display: block;
+    }
+  }
+}
+
+.notice, .font-size {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.notice {
+  background-image: url(./images/notice.png);
+}
+
+.font-size {
+  background-image: url(./images/font-size.png);
+}
+
+.header {
+  .tabs {
+    padding: 5px 20px;
+    line-height: 1;
+
+    > div {
+      margin-right: 10px;
+
+      &.active {
+        .notice {
+          background-image: url(./images/notice-active.png);
+        }
+        
+        .font-size {
+          background-image: url(./images/font-size-active.png);
+        }
+      }
+    }
+  }
+}
+
+.inner {
+  width: 100%;
+  min-height: 100px; /*设置一个高度，然后通过flex:1撑开*/
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .tabs {
+    > div {
+      width: 50%;
+      text-align: center;
+      padding: 5px 20px;
+
+      &.active {
+        position: relative;
+        color: #1890ff;
+  
+        &::after {
+          content: ' ';
+          display: block;
+          position: absolute;
+          height: 2px;
+          left: 0;
+          right: 0;
+          bottom: -1px;
+          background: #1890ff;
+        }
+      }
+    }
+  }
+}
+
+.connect-status-tip {
+  display: none;
+  padding: 5px 20px;
+}
+
+.container-with-connect-status {
+  .connect-status-tip {
+    display: block;
+  }
+}