mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
improve livechat
This commit is contained in:
parent
bfd4e28d01
commit
b43aa731ca
@ -10,7 +10,8 @@ import "./index.less"
|
||||
const Line = (props) => {
|
||||
const { user, content } = props
|
||||
|
||||
return <div className="textRoom_line">
|
||||
return (
|
||||
<div className="textRoom_line">
|
||||
<div className="textRoom_line_user">
|
||||
<h4>{user.fullName ?? user.username}</h4>
|
||||
</div>
|
||||
@ -18,6 +19,7 @@ const Line = (props) => {
|
||||
<span>{content}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default class LiveChat extends React.Component {
|
||||
@ -37,7 +39,7 @@ export default class LiveChat extends React.Component {
|
||||
|
||||
timelineRef = React.createRef()
|
||||
|
||||
socket = app.cores.api.client().sockets.chats
|
||||
socket = app.cores.api.client().ws.sockets.get("chats")
|
||||
|
||||
roomEvents = {
|
||||
"room:message": (message) => {
|
||||
@ -62,7 +64,7 @@ export default class LiveChat extends React.Component {
|
||||
joining: true,
|
||||
roomInfo: null,
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
joinSocketRoom = async () => {
|
||||
@ -74,7 +76,9 @@ export default class LiveChat extends React.Component {
|
||||
|
||||
console.log(`[CHATROOM] Joining socket room [${this.props.id}]...`)
|
||||
|
||||
for (const [eventName, eventHandler] of Object.entries(this.roomEvents)) {
|
||||
for (const [eventName, eventHandler] of Object.entries(
|
||||
this.roomEvents,
|
||||
)) {
|
||||
this.socket.on(eventName, eventHandler)
|
||||
}
|
||||
|
||||
@ -93,7 +97,7 @@ export default class LiveChat extends React.Component {
|
||||
|
||||
return console.error("Error joining room", error)
|
||||
}
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
@ -104,7 +108,9 @@ export default class LiveChat extends React.Component {
|
||||
|
||||
console.log(`[CHATROOM] Leaving socket room [${this.props.id}]...`)
|
||||
|
||||
for (const [eventName, eventHandler] of Object.entries(this.roomEvents)) {
|
||||
for (const [eventName, eventHandler] of Object.entries(
|
||||
this.roomEvents,
|
||||
)) {
|
||||
this.socket.off(eventName, eventHandler)
|
||||
}
|
||||
|
||||
@ -115,13 +121,13 @@ export default class LiveChat extends React.Component {
|
||||
console.time("[CHATROOM] SUBMIT:MESSAGE")
|
||||
|
||||
this.socket.emit("room:send:message", {
|
||||
message
|
||||
message,
|
||||
})
|
||||
|
||||
// remove writted message
|
||||
this.setState({
|
||||
lastSentMessage: message,
|
||||
writtedMessage: ""
|
||||
writtedMessage: "",
|
||||
})
|
||||
}
|
||||
|
||||
@ -133,34 +139,44 @@ export default class LiveChat extends React.Component {
|
||||
}
|
||||
|
||||
this.setState({
|
||||
timeline: [...timeline, message]
|
||||
timeline: [...timeline, message],
|
||||
})
|
||||
|
||||
if (this.props.floatingMode) {
|
||||
if (this.state.temporalTimeline.length >= this.state.maxTemporalLines) {
|
||||
if (
|
||||
this.state.temporalTimeline.length >=
|
||||
this.state.maxTemporalLines
|
||||
) {
|
||||
this.setState({
|
||||
temporalTimeline: this.state.temporalTimeline.slice(1)
|
||||
temporalTimeline: this.state.temporalTimeline.slice(1),
|
||||
})
|
||||
}
|
||||
|
||||
// calculate duration based on message length (Minimum 3 second, maximum 10 seconds)
|
||||
const calculatedDuration = Math.min(Math.max(message.content.length * 0.1, 3), 10) * 1000
|
||||
const calculatedDuration =
|
||||
Math.min(Math.max(message.content.length * 0.1, 3), 10) * 1000
|
||||
|
||||
const temporalLine = {
|
||||
expireTime: Date.now() + calculatedDuration,
|
||||
duration: calculatedDuration,
|
||||
messageKey: message.key
|
||||
messageKey: message.key,
|
||||
}
|
||||
|
||||
this.setState({
|
||||
temporalTimeline: [...this.state.temporalTimeline, temporalLine]
|
||||
temporalTimeline: [
|
||||
...this.state.temporalTimeline,
|
||||
temporalLine,
|
||||
],
|
||||
})
|
||||
|
||||
if (this.debouncedIntervalTimelinePurge) {
|
||||
clearInterval(this.debouncedIntervalTimelinePurge)
|
||||
}
|
||||
|
||||
this.debouncedIntervalTimelinePurge = setInterval(this.purgeLastTemporalLine, 3000)
|
||||
this.debouncedIntervalTimelinePurge = setInterval(
|
||||
this.purgeLastTemporalLine,
|
||||
3000,
|
||||
)
|
||||
}
|
||||
|
||||
this.scrollTimelineToBottom()
|
||||
@ -182,7 +198,7 @@ export default class LiveChat extends React.Component {
|
||||
|
||||
if (lastTemporalLine.expireTime < Date.now()) {
|
||||
this.setState({
|
||||
temporalTimeline: temporalTimeline.slice(1)
|
||||
temporalTimeline: temporalTimeline.slice(1),
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -193,7 +209,7 @@ export default class LiveChat extends React.Component {
|
||||
}
|
||||
|
||||
this.setState({
|
||||
writtedMessage: e.target.value
|
||||
writtedMessage: e.target.value,
|
||||
})
|
||||
}
|
||||
|
||||
@ -214,7 +230,7 @@ export default class LiveChat extends React.Component {
|
||||
if (scrollingElement) {
|
||||
scrollingElement.scrollTo({
|
||||
top: scrollingElement.scrollHeight,
|
||||
behavior: "smooth"
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -223,7 +239,7 @@ export default class LiveChat extends React.Component {
|
||||
this.joinSocketRoom()
|
||||
|
||||
app.ctx = {
|
||||
submit: this.submitMessage
|
||||
submit: this.submitMessage,
|
||||
}
|
||||
}
|
||||
|
||||
@ -239,84 +255,90 @@ export default class LiveChat extends React.Component {
|
||||
|
||||
render() {
|
||||
if (this.state.connectionEnd) {
|
||||
return <div className="liveChat">
|
||||
return (
|
||||
<div className="liveChat">
|
||||
<antd.Result
|
||||
status="error"
|
||||
title="Connection error"
|
||||
subTitle="Cannot connect to the server"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (this.state.connecting) {
|
||||
return <div className="liveChat">
|
||||
return (
|
||||
<div className="liveChat">
|
||||
<antd.Skeleton active />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (this.props.floatingMode) {
|
||||
return <div className="liveChat floating">
|
||||
return (
|
||||
<div className="liveChat floating">
|
||||
<TransitionGroup
|
||||
ref={this.timelineRef}
|
||||
className="liveChat_timeline"
|
||||
id="liveChat_timeline"
|
||||
>
|
||||
{
|
||||
this.state.temporalTimeline.map((line, index) => {
|
||||
return <CSSTransition
|
||||
{this.state.temporalTimeline.map((line, index) => {
|
||||
return (
|
||||
<CSSTransition
|
||||
key={index}
|
||||
timeout={300}
|
||||
classNames={{
|
||||
enterActive: "transverse-enter",
|
||||
exitActive: "transverse-out"
|
||||
exitActive: "transverse-out",
|
||||
}}
|
||||
>
|
||||
<Line {...this.state.timeline[line.messageKey]} />
|
||||
<Line
|
||||
{...this.state.timeline[
|
||||
line.messageKey
|
||||
]}
|
||||
/>
|
||||
</CSSTransition>
|
||||
})
|
||||
}
|
||||
)
|
||||
})}
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (this.state.noAuthed) {
|
||||
return <div className="liveChat empty">
|
||||
return (
|
||||
<div className="liveChat empty">
|
||||
<antd.Empty description="You must be logged in to use this feature" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <div
|
||||
className={classnames(
|
||||
"liveChat",
|
||||
{
|
||||
return (
|
||||
<div
|
||||
className={classnames("liveChat", {
|
||||
["empty"]: this.state.timeline.length === 0,
|
||||
["compact"]: this.props.compact
|
||||
}
|
||||
)}
|
||||
["compact"]: this.props.compact,
|
||||
})}
|
||||
>
|
||||
{
|
||||
!this.props.compact && this.state.timeline.length === 0 && <antd.Empty description="Welcome to the room" />
|
||||
}
|
||||
{!this.props.compact && this.state.timeline.length === 0 && (
|
||||
<antd.Empty description="Welcome to the room" />
|
||||
)}
|
||||
|
||||
{
|
||||
this.props.compact && this.state.timeline.length === 0 && <p>
|
||||
Welcome to the room
|
||||
</p>
|
||||
}
|
||||
{this.props.compact && this.state.timeline.length === 0 && (
|
||||
<p>Welcome to the room</p>
|
||||
)}
|
||||
|
||||
{
|
||||
this.state.timeline.length !== 0 && <div
|
||||
{this.state.timeline.length !== 0 && (
|
||||
<div
|
||||
className="liveChat_timeline"
|
||||
ref={this.timelineRef}
|
||||
id="liveChat_timeline"
|
||||
>
|
||||
{
|
||||
this.state.timeline.map((line, index) => {
|
||||
{this.state.timeline.map((line, index) => {
|
||||
return <Line key={index} {...line} />
|
||||
})
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
)}
|
||||
|
||||
<div className="liveChat_textInput">
|
||||
<antd.Input.TextArea
|
||||
@ -325,10 +347,14 @@ export default class LiveChat extends React.Component {
|
||||
value={this.state.writtedMessage}
|
||||
onChange={this.handleInputChange}
|
||||
onPressEnter={this.handleOnEnter}
|
||||
maxLength={this.state.roomInfo?.limitations?.maxMessageLength ?? 100}
|
||||
maxLength={
|
||||
this.state.roomInfo?.limitations
|
||||
?.maxMessageLength ?? 100
|
||||
}
|
||||
showCount
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -34,8 +34,6 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
gap: 5px;
|
||||
|
||||
.textRoom_line {
|
||||
@ -85,8 +83,13 @@
|
||||
|
||||
.liveChat_timeline {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 10px;
|
||||
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
margin-bottom: 70px;
|
||||
@ -114,12 +117,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: 5px 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
padding: 5px 7px;
|
||||
border-radius: 12px;
|
||||
|
||||
background-color: var(--background-color-accent);
|
||||
background-color: rgba(var(--bg_color_1), 0.7);
|
||||
|
||||
h1,
|
||||
h2,
|
||||
@ -132,9 +133,9 @@
|
||||
|
||||
.textRoom_line_user {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
color: var(--background-color-contrast);
|
||||
font-size: 0.9rem;
|
||||
|
||||
color: var(--text-color);
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user