@x-edu/live-player 0.0.21 → 0.0.23

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

@@ -1,164 +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
+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

@@ -1,123 +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
+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

@@ -1,50 +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;
-    }
-  }
+.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;
+    }
+  }
 }