Merge branch 'dev' of https://github.com/oslabs-beta/Swell into dev

Author: Gilgamesh

src/client/components/Versions.tsx

@@ -1,6 +1,18 @@
 import * as React from 'react';
 import { useState } from 'react';
 
+declare global {
+  interface Window {
+    api: {
+      versions: {
+        electron: string;
+        chrome: string;
+        node: string;
+      };
+    };
+  }
+}
+
 function Versions(): JSX.Element {
   const [versions] = useState(window.api.versions);
 

src/client/components/main/WebRTC-composer/WebRTCServerEntryForm.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import Joyride from 'react-joyride';
 import { useState, useRef, useEffect } from 'react';
 import { MdRefresh } from 'react-icons/md';
+import { Placement } from 'react-joyride';
+
 
 // import '/Users/katharinehunt/Swell/src/assets/style/WebRtcEntry.css';
 import '../../../../assets/style/WebRtc.css';
@@ -88,23 +90,23 @@ const WebRTCServerEntryForm: React.FC<Props> = (props: Props) => {
     {
       target: '.get-offer-button',
       content: 'Caller: Generate an offer by clicking “Get Offer”.',
-      placement: 'bottom',
+      placement: 'bottom' as Placement,
     },
     {
       target: '.copy-offer-button', // Target the "Copy" button in the Offer code box
       content:
         'Caller: Copy to clipboard, paste and send to recipient (email recommended).',
-      placement: 'bottom',
+      placement: 'bottom' as Placement,
     },
     {
       target: '.offer-paste-button',
       content: 'Recipient: Copy the offer received and paste into the top box',
-      placement: 'bottom',
+      placement: 'bottom' as Placement,
     },
     {
       target: '.get-answer-btn',
       content: "Recipient: Click 'Get Answer' and copy it.",
-      placement: 'bottom',
+      placement: 'bottom' as Placement,
     },
     {
       target: '.answer-paste-button',

src/client/controllers/webrtcPeerController.ts

@@ -31,6 +31,33 @@ const webrtcPeerController = {
       ],
     };
     let peerConnection = new RTCPeerConnection(servers);
+    // ? if you want to attempt to build a websocket with a live connection through ngrok, 
+    // ? give it a shot - we attempted below, this may be helpful, probably isn't (-Isaac M)
+
+    // let wsIp = newRequestWebRTC.webRTCWebsocketServer;
+    // const socket = io('http://localhost:3000');
+
+    // socket.on('connect', async () => {
+    //       // try {
+    //       //   const url = await ngrok.connect({
+    //       //     proto: 'http',
+    //       //     addr: 3000,
+    //       //   });
+    //       //   console.log(`ngrok tunnel opened at: ${url}`);
+    //       //   // client.emit('ngrokUrl', url);
+    //       // } catch (err) {
+    //       //   console.error('Failed to create ngrok tunnel:', err);
+    //       // }
+    //   console.log('Connected to server');
+    // });
+
+    // socket.on('disconnect', () => {
+    //   console.log('Disconnected from server');
+    // });
+
+    // socket.on('message', (message: string) => {
+    //   console.log('Message:', message);
+    // });
 
     if (newRequestWebRTC.webRTCDataChannel === 'Video') {
       let localStream = await navigator.mediaDevices.getUserMedia({
@@ -204,6 +231,8 @@ const webrtcPeerController = {
         event.candidate &&
         peerConnection.localDescription!.type === 'offer'
       ) {
+        // ? more websocket hints below (-Isaac)
+        // ? // socket.emit('offer', JSON.stringify(peerConnection.localDescription));
         // checks for canidate and if event type is offer
         appDispatch(
           newRequestWebRTCOfferSet(