fix: broken types which caused build to fail

Author: skyllo

example/src/client/components/CamVideo.tsx

@@ -16,27 +16,29 @@ interface Props {
   id: string;
   className?: string;
   muted: boolean;
-  stream: MediaStream;
+  stream: MediaStream | null;
 }
 
 export default function CamVideo(props: Props) {
   const { className = '', id, muted, stream } = props;
-  const videoRef = useRef<HTMLVideoElement>(null);
+  const videoRef = useRef<HTMLVideoElement>();
 
   useEffect(() => {
     const wrapper = document.getElementById(id);
     const videoElement = document.createElement('video');
     videoElement.setAttribute('autoplay', '');
-    wrapper.appendChild(videoElement);
+    wrapper?.appendChild(videoElement);
     videoRef.current = videoElement;
   }, []);
 
   useEffect(() => {
-    videoRef.current.muted = muted;
+    if (videoRef.current) {
+      videoRef.current.muted = muted;
+    }
   }, [muted]);
 
   useEffect(() => {
-    const videoEl: HTMLVideoElement = videoRef.current;
+    const videoEl = videoRef.current;
     if (videoEl) {
       // set video stream
       videoEl.srcObject = stream;

example/src/client/components/ChatMessages.tsx

@@ -46,7 +46,7 @@ interface Props {
 
 export default function ChatMessages(props: Props) {
   const { className, peer, socket } = props;
-  const myRef = useRef<HTMLDivElement>();
+  const myRef = useRef<HTMLDivElement>(null);
   const [messages, dispatchMessage] = useReducer(
     (state: Message[], action: { message: Message; type: string }) => {
       switch (action.type) {
@@ -63,7 +63,9 @@ export default function ChatMessages(props: Props) {
 
   useEffect(() => {
     const elem = myRef.current;
-    elem.scrollTop = elem.scrollHeight;
+    if (elem) {
+      elem.scrollTop = elem.scrollHeight;
+    }
   }, [myRef, messages.length]);
 
   function addMessage(message: string, from: string) {
@@ -105,7 +107,7 @@ export default function ChatMessages(props: Props) {
   });
 
   usePeer(peer, 'error', ({ name, error }) => {
-    addMessage(`${name} - ${error.message}`, 'error');
+    addMessage(`${name} - ${error!.message}`, 'error');
   });
 
   return (

example/src/client/pages/Basic.tsx

@@ -23,8 +23,8 @@ const BasicStyled = styled.div`
 `;
 
 export default function Basic() {
-  const [streamLocal, setStreamLocal] = useState<MediaStream>();
-  const [streamRemote, setStreamRemote] = useState<MediaStream>();
+  const [streamLocal, setStreamLocal] = useState<MediaStream | null>(null);
+  const [streamRemote, setStreamRemote] = useState<MediaStream | null>(null);
   const peer1 = useCreatePeer();
   const peer2 = useCreatePeer();
 

example/src/client/pages/Signal.tsx

@@ -36,18 +36,20 @@ const SignalStyled = styled.div`
 `;
 
 export default function Signal() {
-  const [streamLocal, setStreamLocal] = useState<MediaStream>();
-  const [streamRemote, setStreamRemote] = useState<MediaStream>();
+  const [streamLocal, setStreamLocal] = useState<MediaStream | null>(null);
+  const [streamRemote, setStreamRemote] = useState<MediaStream | null>(null);
   const peer = useCreatePeer({ enableDataChannels: true, channelName: 'messages' });
   const socket = useCreateSocket();
 
   // socket handlers
   useSocket(socket, 'onicecandidates', async ({ candidates }) => {
+    // eslint-disable-next-line
     const promises = candidates.map(async (candidate) => peer.addIceCandidate(candidate));
     await Promise.all(promises);
   });
 
   useSocket(socket, 'signal', async ({ description }) => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     if (description.type === 'offer') {
       peer.destroy();
     }

example/src/client/utils/hooks.ts

@@ -12,7 +12,7 @@ export function useCreatePeer(options: PeerOptions = {}): Peer {
 
   useEffect(
     () => () => {
-      peerRef.current.destroy();
+      peerRef.current?.destroy();
     },
     []
   );
@@ -38,7 +38,7 @@ export function useCreateSocket(): Socket {
 
   useEffect(
     () => () => {
-      socketRef.current.disconnect();
+      socketRef.current?.disconnect();
     },
     []
   );