Fix knocking

This commit is contained in:
Tulir Asokan 2025-04-13 21:49:49 +03:00
parent 542c2586f1
commit 439ff72aba
2 changed files with 48 additions and 51 deletions

View file

@ -76,16 +76,16 @@ div.room-view.preview > div.preview-inner {
} }
} }
} }
> .knock-input { > input.knock-reason {
padding: .5rem;
border-radius: .25rem;
border: 1px solid var(--border-color);
box-sizing: border-box;
width: 100%; width: 100%;
display: flex;
flex: 1; &:focus {
> input { outline: 1px solid var(--primary-color);
padding: 0.25rem; border-color: var(--primary-color);
margin: 0;
outline: none;
border-radius: .25rem;
border: 1px solid var(--border-color);
} }
} }
} }

View file

@ -42,34 +42,34 @@ const RoomPreview = ({ roomID, via, alias, invite }: RoomPreviewProps) => {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [buttonClicked, setButtonClicked] = useState(false) const [buttonClicked, setButtonClicked] = useState(false)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
const [knockRequest, setKnockRequest] = useState<string | null>(null) const [knockRequest, setKnockRequest] = useState<string>("")
const doKnockRoom = () => {
setButtonClicked(true)
client.rpc.knockRoom(alias || roomID, alias ? undefined : via, knockRequest || undefined).then(
() => {
setButtonClicked(false)
mainScreen.clearActiveRoom()
window.alert("Successfully knocked on room")
},
err => {
setError(`Failed to knock: ${err}`)
setButtonClicked(false)
},
)
}
const doJoinRoom = () => { const doJoinRoom = () => {
let realVia = via let realVia = via
if (!via?.length && invite?.invited_by) { if (!via?.length && invite?.invited_by) {
realVia = [getServerName(invite.invited_by)] realVia = [getServerName(invite.invited_by)]
} }
setButtonClicked(true) setButtonClicked(true)
if (requiresKnock) { client.rpc.joinRoom(alias || roomID, alias ? undefined : realVia).then(
client.rpc.knockRoom(alias || roomID, alias ? undefined : realVia, knockRequest || undefined).then( () => console.info("Successfully joined", roomID),
() => { err => {
setButtonClicked(false) setError(`Failed to join room: ${err}`)
mainScreen.clearActiveRoom() setButtonClicked(false)
}, },
err => { )
setError(`Failed to knock: ${err}`)
setButtonClicked(false)
},
)
return
} else {
client.rpc.joinRoom(alias || roomID, alias ? undefined : realVia).then(
() => console.info("Successfully joined", roomID),
err => {
setError(`Failed to join room: ${err}`)
setButtonClicked(false)
},
)
}
} }
const doRejectInvite = () => { const doRejectInvite = () => {
setButtonClicked(true) setButtonClicked(true)
@ -103,17 +103,10 @@ const RoomPreview = ({ roomID, via, alias, invite }: RoomPreviewProps) => {
const showInviteAvatars = usePreference(client.store, null, "show_invite_avatars") const showInviteAvatars = usePreference(client.store, null, "show_invite_avatars")
const noAvatarPreview = invite && !showInviteAvatars const noAvatarPreview = invite && !showInviteAvatars
const joinRule = summary?.join_rule ?? invite?.join_rule ?? "invite" const joinRule = summary?.join_rule ?? invite?.join_rule ?? "invite"
let requiresKnock = ["knock", "knock_restricted"].includes(joinRule) && !invite const allowKnock = ["knock", "knock_restricted"].includes(joinRule) && !invite
if (joinRule === "knock_restricted" && !invite) { const requiresKnock = joinRule === "knock_restricted" && !invite
for (const roomID of summary?.allowed_room_ids ?? []) { && (summary?.allowed_room_ids ?? []).findIndex(roomID => client.store.rooms.has(roomID)) !== -1
if (client.store.rooms.has(roomID)) { const acceptAction = invite ? "Accept" : "Join room"
console.log("RoomPreview: allowed room ID is already joined", roomID)
requiresKnock = false
break
}
}
}
const acceptAction = invite ? "Accept" : (requiresKnock ? "Ask to join" : "Join room")
return <div className="room-view preview"> return <div className="room-view preview">
<div className="preview-inner"> <div className="preview-inner">
@ -180,24 +173,28 @@ const RoomPreview = ({ roomID, via, alias, invite }: RoomPreviewProps) => {
</table> </table>
</details>} </details>}
{invite?.invited_by && <MutualRooms client={client} userID={invite.invited_by}/>} {invite?.invited_by && <MutualRooms client={client} userID={invite.invited_by}/>}
{requiresKnock && <div className="knock-input"> {allowKnock && <input
<input className="knock-reason"
onChange={event => setKnockRequest(event.currentTarget.value)} onChange={event => setKnockRequest(event.currentTarget.value)}
placeholder="Why do you want to join this room?" placeholder="Why do you want to join this room?"
value={knockRequest ?? ""} value={knockRequest}
/> />}
</div>}
<div className="buttons"> <div className="buttons">
{invite && <button {invite && <button
disabled={buttonClicked} disabled={buttonClicked}
className="reject" className="reject"
onClick={doRejectInvite} onClick={doRejectInvite}
>Reject</button>} >Reject</button>}
<button {!requiresKnock && <button
disabled={buttonClicked} disabled={buttonClicked}
className="primary-color-button" className="primary-color-button"
onClick={doJoinRoom} onClick={doJoinRoom}
>{acceptAction}</button> >{acceptAction}</button>}
{allowKnock && <button
disabled={buttonClicked}
className="primary-color-button"
onClick={doKnockRoom}
>Ask to join</button>}
</div> </div>
{error && <div className="error"> {error && <div className="error">
<ErrorIcon color="var(--error-color)"/> <ErrorIcon color="var(--error-color)"/>