Fix knock state error

[nandito]

Only apply knock_handled event status changes when the event id matches the local client's id (selfId). This should prevent kicking other participants (incl. the host) when a knock is rejected.

Should fix #55

Test plan

1. Use the app from issue BUG Rejecting a Participant results in the Host's roomConnectionStatus getting updated to rejected as well #55 or the example below
2. Join the room with a host
3. Join the room with 1,2,n not-hosts
4. Apply/reject knockers: the applied should join room, the rejected should see the "rejected" screen.

Example app

import React, { useState } from "react";
import { useRoomConnection, VideoView } from "@whereby.com/browser-sdk";

const WaitingArea = ({ knock }) => {
    return (
        <div>
            <h1>Waiting Area</h1>
            <p>Waiting for host to let you in</p>
            <button onClick={knock}>Knock</button>
        </div>
    );
};

const Room = ({ roomUrl, localMedia, displayName, isHost }) => {
    const roomConnection = useRoomConnection(roomUrl, {
        localMedia: null,
        localMediaConstraints: localMedia,
        displayName,
        logger: console,
    });

    const {
        waitingParticipants,
        remoteParticipants,
        localParticipant,
        isJoining,
        roomConnectionStatus,
        chatMessages,
        mostRecentChatMessage,
    } = roomConnection.state;
    const {
        acceptWaitingParticipant,
        knock,
        rejectWaitingParticipant,
        sendChatMessage,
        toggleCamera,
    } = roomConnection.actions;

    if (roomConnectionStatus === "room_locked") {
        return <WaitingArea knock={knock} />;
    }

    if (roomConnectionStatus === "rejected") {
        return <p>You have been rejected access</p>;
    }

    return (
        <div>
            <h1>Room - {roomConnectionStatus}</h1>
            {isHost && (
                <div>
                    <h3>Participants in Waiting Area</h3>
                    {waitingParticipants.length > 0 ? (
                        <ul>
                            {waitingParticipants.map((a) => (
                                <li key={a.id}>
                                    <p>{a.displayName}</p>
                                    <button
                                        onClick={() =>
                                            acceptWaitingParticipant(a.id)
                                        }
                                    >
                                        Approve
                                    </button>
                                    <button
                                        onClick={() =>
                                            rejectWaitingParticipant(a.id)
                                        }
                                    >
                                        Reject
                                    </button>
                                </li>
                            ))}
                        </ul>
                    ) : (
                        <p>No participants in waiting area</p>
                    )}
                </div>
            )}
            <h3>Participants</h3>
            <div>
                {remoteParticipants.map((r) => (
                    <div key={r.id}>
                        <VideoView
                            style={{ width: "300px" }}
                            stream={r.stream}
                        />
                        <p>{r.displayName}</p>
                    </div>
                ))}
            </div>
            <hr />
            {localParticipant && (
                <div>
                    <VideoView
                        style={{ width: "200px" }}
                        stream={localParticipant.stream}
                    />
                    <p>{localParticipant.displayName}</p>
                </div>
            )}
        </div>
    );
};

const App = () => {
    const roomUrl = "<your-room-url>";
    const roomKey =  "<host-room-key>";
    const [isHost, setIsHost] = useState(null);

    if (isHost === null) {
        return (
            <div>
                <h1>Are you the host?</h1>
                <button onClick={() => setIsHost(true)}>Yes</button>
                <button onClick={() => setIsHost(false)}>No</button>
            </div>
        );
    }

    return (
        <div>
            <Room
                roomUrl={`${roomUrl}${isHost ? `?roomKey=${roomKey}` : ""}`}
                localMedia={{ audio: false, video: true }}
                displayName={`John Doe${isHost ? " (host)" : ""}`}
                isHost={isHost}
            />
        </div>
    );
};

export default App;

[havardholvik]

Works as expected 👍 Remember to bump version, as alpha13 is already deployed