import { useRoom } from '@huddle01/react/hooks';
 
const {
    room,
    state,
    joinRoom,
    leaveRoom,
    closeRoom,
    kickPeer,
    muteEveryone,
    closeStreamOfLabel,
  } = useRoom({
  onJoin(data:Room) ();
  onWaiting(data: {
    reason: 'WAITING_FOR_PERMISSIONS' | 'WAITING_FOR_ROOM_TO_START' | 'WAITING_FOR_ADMIN_TO_JOIN';
    message?: string;
  }) ();
  onLeave(data: {
    reason: 'LEFT' | 'CLOSED' | 'KICKED' | 'DENIED';
    message?: string;
  }) ();
  onFailed(data: {
      status: 'ROOM_NOT_FOUND' | 'ROOM_ERRORED';
      message: string;
  }) ();
  onPeerJoin(peerId: string) ();
  onPeerLeft(peerId: string) ();
  });
 
// Join room
const join = async () => {
  await joinRoom({
    roomId,
    tokenId
  })
}
 
// Leave room
const leave = async () => {
  await leaveRoom()
}
 
// Close room
const close = async () => {
  await closeRoom()
}
 
// Kick peer
const kick = async () => {
  await kickPeer(peerId)
}
 
// Mute everyone
const mute = async () => {
  await muteEveryone()
}

import { useLobby } from '@huddle01/react/hooks';
 
const {
    lobbyPeers,
    admitPeer,
    denyPeer,
    getLobbyPeerMetadata
  } = useLobby({
     onLobbyPeersUpdated(lobbyPeers: string[]) ();
  });
 
// admit a peer into the room
const admitPeer = (peerId: string) => {
  admitPeer(peerId);
}
 
// deny a peer from joining the room
const denyPeer = (peerId: string) => {
  denyPeer(peerId);
}
 
// get metadata of a lobby peer
const getLobbyPeerMetadata = (peerId: string) => {
  getLobbyPeerMetadata(peerId);
}

import { usePeerIds } from "@huddle01/react/hooks";
import { RemotePeerCard } from "@components/RemotePeerCard";
 
const {
    peerIds
  } = usePeerIds({
  roles: [],
  labels: [],
  onPeerRoleUpdate(data) {}
  });
 
return (
  <div>
    {peerIds.map((peerId) => (
      {/* Use this peerId and pass it in custom component which shows viewport by using hooks such as `useRemotePeer` */}
      <RemotePeerCard key={peerId}>{peerId} />
    ))}
  </div>
)

import { useLocalAudio } from "@huddle01/react/hooks";
 
const {
    stream,
    track,
    isAudioOn,
    enableAudio,
    disableAudio,
    replaceAudioStream,
    changeAudioSource,
  } = useLocalAudio({
    onProduceStart(producer) {},
    onProduceClose(label:string) {},
    onProduceError() {},
  });
 
// enable and disable audio
const handleAudio = async () => {
  if (isAudioOn) {
    await disableAudio();
  } else {
    await enableAudio();
  }
};

import { useRemoteAudio } from "@huddle01/react/hooks";
import { useEffect, useRef } from 'react';
 
const {
    state,
    track,
    stream,
    isAudioOn
  } = useRemoteAudio({
    peerId: "remote-peer-id",
     onPlayable(data:{
      stream:Mediastream,
      track:Mediatrack,
      label:"audio"
    }) {},
    onClose(reason:{
    code: number;
    tag: string;
    message: string;
    }) {},
  });
 
const audioRef = useRef<HTMLAudioElement>(null);
 
useEffect(() => {
  if (audio.current && stream) {
    audio.current.srcObject = stream;
  }
}, [stream]);
 
return (
  <audio ref={audioRef} autoplay>
)

import { useLocalVideo } from '@huddle01/react/hooks';
 
const {
    stream,
    track,
    isVideoOn,
    enableVideo,
    disableVideo,
    replaceVideoStream,
    changeVideoSource,
  } = useLocalVideo({
    onProduceStart(producer) {},
    onProduceClose(reason :{
      code:number,
      tag:string,
      message:string
    }) {},
  });
 
// enable and disable video
const handleVideo = async () => {
  if (isVideoOn) {
    await disableVideo();
  } else {
    await enableVideo();
  }
};

import { useRemoteVideo } from '@huddle01/react/hooks';
import { useEffect, useRef } from 'react';
 
const {
    state,
    track,
    stream,
    isVideoOn,
  } = useRemoteVideo({
    peerId: "remote-peer-id",
    onClose(reason:{
    code: number;
    tag: string;
    message: string;
    }) {},
    onPlayable(data:{
      stream:Mediastream,
      track:Mediatrack,
      label:"video"
    }) {}
  });
 
const videoRef = useRef<HTMLVideoElement>(null);
 
useEffect(() => {
  if (videoRef.current && stream) {
    videoRef.current.srcObject = stream;
  }
}, [stream]);
 
return (
  <div>
    <video ref={videoRef} autoPlay muted />
  </div>
);

import { useLocalScreenShare } from "@huddle01/react/hooks"
 
const {
    shareStream,
    startScreenShare,
    stopScreenShare,
    audioTrack,
    videoTrack,
  } = useLocalScreenShare({
    onProduceStart(producer) {},
    onProduceClose() {},
    onProduceError() {},
  });
 
const startSharing = async () => {
  await startScreenShare();
}
 
const stopSharing = async () => {
  await stopScreenShare();
}

import { useRemoteScreenShare } from "@huddle01/react/hooks";
import { useEffect, useRef } from 'react';
 
const {
    videoStream,
    audioStream,
    videoTrack,
    audioTrack,
    state,
  } = useRemoteScreenShare({
    peerId: "remote-peer-id",
    onPlayable(data:{
    track: MediaStreamTrack;
    stream: MediaStream;
    label: 'screen-share-video' | 'screen-share-audio';
    }) {},
    onClose() {},
  });
 
const videoRef = useRef<HTMLVideoElement>(null);
const audioRef = useRef<HTMLAudioElement>(null);
 
useEffect(() => {
    if (videoStream && videoRef.current) {
      videoRef.current.srcObject = videoStream;
    }
    if (audioStream && audioRef.current) {
      audioRef.current.srcObject = audioStream;
    }
  }, [videoStream, audioStream]);
 
return (
    <div>
        <video ref={videoRef} autoPlay muted/>
        <audio ref={audioRef} autoPlay />
    </div>
);