@x-edu/live-player 0.0.1

package/src/component/IMChatroom/context/chatroom.js

@@ -0,0 +1,154 @@
+import {
+  createContext,
+  useContext,
+  useState
+} from 'react'
+import { get, unionBy } from 'lodash'
+
+import { BAN_TYPE, USER_ROLE } from '../constants'
+import imChatroom from '../sdk/imChatroom'
+import urlConfig from '../config/url'
+
+export const actions = {}
+
+export function useChatroomRoot() {
+  const [userRole, setUserRole] = useState(USER_ROLE.NORMAL)
+  const [room, setRoom] = useState(null)
+  const [stickedMessages, setStickedMessages] = useState([])
+  const [owner, setOwner] = useState({})
+  const [admins, setAdmins] = useState([])
+  const [ban, setBan] = useState({
+    type: BAN_TYPE.BLACK,
+    items: []
+  })
+  const [notice, setNotice] = useState(null)
+
+  const setChatroomBan = (newBan) => {
+    setBan(newBan)
+  }
+
+  const updateChatroomBan = ({ type, action, items }) => {
+    const newBan = {
+      ...ban
+    }
+    if (newBan.type === type) {
+      if (action === 1) {
+        newBan.items = unionBy(newBan.items, items, 'user_id')
+      } else {
+        newBan.items = newBan.items.filter(
+          ({ user_id: userId }) => !items.some(({ user_id: id }) => id === userId)
+        )
+      }
+    }
+    setBan(newBan)
+  }
+
+  const loginChatroom = async () => {
+    const result = await imChatroom.loginChatroom()
+    return result
+  }
+
+  const getChatroom = async () => {
+    const result = await imChatroom.getRoomInfo()
+    const {
+      user_role: newUserRole,
+      room: newRoom,
+      owner: newOwner = {}
+    } = result
+    setUserRole(newUserRole)
+    setRoom(newRoom)
+    setStickedMessages(get(newRoom, 'sticked_messages', []))
+    setOwner({
+      ...newOwner,
+      uid: newRoom.owner_id
+    })
+    return result
+  }
+
+  const getChatroomAdmins = async () => {
+    const result = await imChatroom.getRoomAdmins()
+    setAdmins(result)
+    return result
+  }
+
+  const getChatroomBan = async () => {
+    const { items: whiteItems } = await imChatroom.getAllowSpeech()
+    let newBan
+    if (whiteItems.length) {
+      newBan = {
+        type: BAN_TYPE.WHITE,
+        items: whiteItems.map((uid) => ({
+          user_id: String(uid)
+        }))
+      }
+    } else {
+      const blackItems = await imChatroom.getAllForbiddens()
+      newBan = {
+        type: BAN_TYPE.BLACK,
+        items: blackItems
+      }
+    }
+    setBan(newBan)
+    return newBan
+  }
+
+  const setChatroomStickedMessages = async (messages) => {
+    setStickedMessages(messages || [])
+  }
+
+  const deleteChatroomStickMessages = async () => {
+    const result = await imChatroom.deleteTop(urlConfig.roomId)
+    setStickedMessages([])
+    return result
+  }
+
+  const getChatroomNotice = async () => {
+    const result = await imChatroom.getNotices()
+    const { items } = result
+    if (items.length) {
+      const currentNotice = items[0]
+      setNotice(currentNotice)
+      return currentNotice
+    }
+    setNotice(null)
+    return null
+  }
+
+  const setChatroomNotice = async (content) => {
+    const result = await imChatroom.addNotice({
+      content
+    })
+    setNotice(result)
+    return result
+  }
+
+  actions.setChatroomStickedMessages = setChatroomStickedMessages
+  actions.updateChatroomBan = updateChatroomBan
+  actions.getChatroomBan = getChatroomBan
+  actions.setChatroomBan = setChatroomBan
+  actions.updateChatroomBan = updateChatroomBan
+
+  return {
+    userRole,
+    room,
+    stickedMessages,
+    owner,
+    admins,
+    ban,
+    notice,
+    loginChatroom,
+    setChatroomBan,
+    updateChatroomBan,
+    setChatroomStickedMessages,
+    deleteChatroomStickMessages,
+    getChatroom,
+    getChatroomAdmins,
+    getChatroomBan,
+    getChatroomNotice,
+    setChatroomNotice
+  }
+}
+
+export const ChatRoomContext = createContext()
+
+export const useChatroom = () => useContext(ChatRoomContext)

package/src/component/IMChatroom/context/connect.js

@@ -0,0 +1,28 @@
+import {
+  createContext,
+  useContext,
+  useState
+} from 'react'
+import { CONNECT_STATUS } from '../constants'
+
+export function useConnectRoot() {
+  const [status, setStatusHook] = useState(CONNECT_STATUS.CONNECTING)
+  const [times, setTimes] = useState(0)
+
+  const setStatus = (newStatus) => {
+    setStatusHook(newStatus)
+    if (newStatus === CONNECT_STATUS.LOGIN_SUCCESS) {
+      setTimes(times + 1)
+    }
+  }
+
+  return {
+    status,
+    times,
+    setStatus
+  }
+}
+
+export const ConnectContext = createContext()
+
+export const useConnect = () => useContext(ConnectContext)

package/src/component/IMChatroom/i18n/en/index.json

@@ -0,0 +1,73 @@
+{
+  "action": {
+    "retry": "Try AgainTry Again",
+    "edit": "Edit",
+    "save": "Save",
+    "cancel": "Cancel"
+  },
+  "tip": {
+    "maxInputLength": "Maximum {n} characters.",
+    "copied": "Copied",
+    "noMoreMessage": "No more messages"
+  },
+  "title": {
+    "notice": "Notice",
+    "fontSize": "Font Size",
+    "chat": "Chat",
+    "member": "Online Member"
+  },
+  "connect": {
+    "status": {
+      "0": "Failed to load the chat room information.",
+      "1": "Connecting to the chat server... Please wait.",
+      "2": "Network disconnected",
+      "3": "Chat service connected",
+      "4": "Failed to connect to chat service",
+      "5": "You're offline as your account has been logged in on another device.",
+      "6": "You've been removed from the chat room by the administrator.",
+      "7": "The chat room has been deleted.",
+      "8": "Network Error"
+    }
+  },
+  "tag": {
+    "role": {
+      "1": "Administrator",
+      "2": "Creator"
+    },
+    "baned": "Muted"
+  },
+  "message": {
+    "stick": {
+      "cancel": "Cancel sticky"
+    },
+    "recallByWS": "Recall",
+    "delete": "Delete"
+  },
+  "editor": {
+    "disabled": {
+      "baned": "Muted"
+    }
+  },
+  "fontSize": {
+    "12": "Extremely small",
+    "14": "",
+    "16": "Medium",
+    "18": "",
+    "20": "Great"
+  },
+  "error": {
+    "networkError": "Network Error",
+    "serviceError": "Service request exception",
+    "IMCORE/RECALL_MESSAGE_TIMEOUT": "Failed to recall the message as it was sent more than 5 min ago.",
+    "IMCORE/CHATROOM_RECALL_MSG_TIMEOUT": "Failed to recall the message as it was sent more than 5 min ago.",
+    "IMCORE/DISP_FOUND_SENSITIVE_WORD_LOCATION":"Banned words contained"
+  },
+  "modal": {
+    "title": "Reminder",
+    "content": {
+      "deleteMessage": "The message will no longer be visible once deleted. Are you sure to continue?"
+    },
+    "cancel": "Cancel",
+    "ok": "OK"
+  }
+}

package/src/component/IMChatroom/i18n/index.jsx

@@ -0,0 +1,14 @@
+import getByPath from 'lodash/get'
+import locale from './zh-CN/index.json'
+
+const i18n = {
+  get(path) {
+    const result = getByPath(locale, path)
+    if (result === undefined || result === null) {
+      return path
+    }
+    return result
+  }
+}
+
+export default i18n

package/src/component/IMChatroom/i18n/language.js

@@ -0,0 +1,9 @@
+// 被 node 环境调用，请勿使用 export/import
+module.exports = {
+  'zh-CN': {
+    label: '简体中文'
+  },
+  en: {
+    label: 'English'
+  }
+}

package/src/component/IMChatroom/i18n/zh-CN/index.json

@@ -0,0 +1,73 @@
+{
+  "action": {
+    "retry": "重试",
+    "edit": "编辑",
+    "save": "保存",
+    "cancel": "取消"
+  },
+  "tip": {
+    "maxInputLength": "最多可输入{n}字",
+    "copied": "已复制",
+    "noMoreMessage": "没有更多消息"
+  },
+  "title": {
+    "notice": "公告",
+    "fontSize": "字号",
+    "chat": "聊天",
+    "member": "在线成员"
+  },
+  "connect": {
+    "status": {
+      "0": "获取聊天室信息失败",
+      "1": "正在连接聊天服务器，请稍候...",
+      "2": "连接已断开...",
+      "3": "已成功连接聊天服务",
+      "4": "连接聊天服务失败",
+      "5": "您的账号在别处登录，您被迫下线！",
+      "6": "哎哟，您被管理员踢掉啦~~",
+      "7": "哎哟，聊天室被删除啦~~",
+      "8": "网络异常"
+    }
+  },
+  "tag": {
+    "role": {
+      "1": "管理员",
+      "2": "创建人" 
+    },
+    "baned": "已禁言"
+  },
+  "message": {
+    "stick": {
+      "cancel": "取消置顶"
+    },
+    "recallByWS": "撤回",
+    "delete": "删除"
+  },
+  "editor": {
+    "disabled": {
+      "baned": "主持人暂未开放讨论"
+    }
+  },
+  "fontSize": {
+    "12": "极小",
+    "14": "",
+    "16": "中等",
+    "18": "",
+    "20": "极大"
+  },
+  "error": {
+    "networkError": "网络异常",
+    "serviceError": "服务请求异常",
+    "IMCORE/RECALL_MESSAGE_TIMEOUT": "发送已超过5分钟，不可撤回",
+    "IMCORE/CHATROOM_RECALL_MSG_TIMEOUT": "发送已超过5分钟，不可撤回",
+    "IMCORE/DISP_FOUND_SENSITIVE_WORD_LOCATION":"包含敏感词或限制名称用语"
+  },
+  "modal": {
+    "title": "提示",
+    "content": {
+      "deleteMessage": "确认是否删除？删除后消息将不可见"
+    },
+    "cancel": "取消",
+    "ok": "确定"
+  }
+}

package/src/component/IMChatroom/index.jsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+// import cs from './sdk/cs'
+import url from './config/url'
+import './asset/style/index.module.less'
+import Loading from '../status/Loading'
+
+const Home = React.lazy(() => import('./page/home'))
+
+export default function IMChatroom({
+  roomId,
+  disableEditor
+}) {
+  const [isInited, setIsInited] = useState(false)
+
+  useEffect(() => {
+    if (roomId) {
+      url.roomId = roomId
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!isInited) {
+      // cs.init().then(() => {
+      //   setIsInited(true)
+      // }).catch(() => {
+      //   setIsInited(true)
+      // })
+      setIsInited(true)
+    }
+  }, [isInited])
+
+  return (
+    <>
+      {
+        !isInited
+          ? <Loading />
+          : (
+            <>
+              <React.Suspense fallback={<Loading />}>
+                <Home
+                  disableEditor={disableEditor}
+                />
+              </React.Suspense>
+            </>
+          )
+      }
+    </>
+  )
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import StickedMessage from './stickedMessage'
+import MessageList from './messageList'
+import MessageEditor from './messageEditor'
+
+import style from './style/index.module.less'
+
+export default function Chat({
+  disableEditor
+}) {
+  return (
+    <div className={style['chat-container']}>
+      <div className={style['chat-header']}>
+        <StickedMessage />
+      </div>
+      <div className={style['chat-body']}>
+        <MessageList disableEditor={disableEditor} />
+      </div>
+      <div className={style['chat-footer']}>
+        <MessageEditor
+          disableEditor={disableEditor}
+        />
+      </div>
+    </div>
+  )
+}