feat: begin implementing websocket handler

- add new tailwindcss plugin for kobalte ui
- begin setting up logic to handle camera loaders

Author: ZanzyTHEbar

GUI/ETVR/package.json

@@ -49,6 +49,7 @@
   "dependencies": {
     "@builder.io/partytown": "^0.7.3",
     "@kobalte/core": "^0.6.0",
+    "@kobalte/tailwindcss": "^0.4.1",
     "@solid-primitives/i18n": "^1.1.2",
     "@solid-primitives/map": "^0.3.1",
     "@solidjs/meta": "^0.28.0",
@@ -72,4 +73,4 @@
     "yarn": "^1.22.19",
     "yup": "^0.32.11"
   }
-}
+}

GUI/ETVR/src/components/Camera/index.tsx

@@ -1,8 +1,9 @@
 import { Button } from '@kobalte/core'
 import { FaSolidGear } from 'solid-icons/fa'
 import CameraStatusIndicator from './CameraIndicator/CameraIndicator'
-import { ICamera } from '@src/store/camera/camera'
-import { ActiveStatus } from '@src/utils/utils'
+import WebSocketHandler from '@components/WebSocket'
+import { ICamera } from '@store/camera/camera'
+import { ActiveStatus } from '@utils/utils'
 
 export interface IProps extends ICamera {
     onClick: () => void
@@ -18,7 +19,9 @@ const Camera = (props: IProps) => {
             </div>
             <div class="flex items-center">
                 <div class="flex items-center h-[100%]">
-                    <div class=" text-[#FFFF] bg-[#FFFF] w-[155px] h-[155px] rounded-[14px]" />
+                    <div class=" text-[#FFFF] bg-[#FFFF] w-[155px] h-[155px] rounded-[14px]">
+                        <WebSocketHandler borderRadius="rounded-[14px]" />
+                    </div>
                 </div>
                 <div class="bg-[#292D36] ml-[14px] rounded-[14px] h-[100%] p-[14px] ">
                     <div class="text-center  pb-[14px]">

GUI/ETVR/src/components/List/List.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@kobalte/core'
 import { FaSolidGear } from 'solid-icons/fa'
+import WebSocketHandler from '@components/WebSocket'
 import { ICamera } from '@src/store/camera/camera'
 import { ActiveStatus, CapitalizeFirstLetter } from '@src/utils/utils'
 export interface IList extends ICamera {
@@ -11,7 +12,9 @@ const List = (props: IList) => {
         <div class="grid grid-flow-col auto-cols-fr pl-[12px] pt-[12px] pb-[12px] rounded-[10px] mb-[20px] bg-[#333742] text-white">
             <div class="flex items-center w-[500px]">
                 <div>
-                    <div class="text-[#FFFF] bg-[#FFFF] w-[60px] h-[60px] rounded-[5px]" />
+                    <div class="text-[#FFFF] bg-[#FFFF] w-[60px] h-[60px] rounded-[5px]">
+                        <WebSocketHandler borderRadius="rounded-[5px]" />
+                    </div>
                 </div>
                 <div>
                     <div class="flex items-center justify-center text-left pl-[10px]">

GUI/ETVR/src/components/WebSocket/index.ts

@@ -0,0 +1,50 @@
+import { Image } from '@kobalte/core'
+import { onMount, Show } from 'solid-js'
+import icons from '@assets/images/index'
+import { showCameraView } from '@store/ui/selectors'
+import { initWebSocket } from '@utils/hooks/websocket'
+
+interface IProps {
+    borderRadius: string
+}
+
+// TODO: Handle camera loaders here
+const LoaderHandler = (props: IProps) => {
+    return (
+        <Image.Root>
+            <Image.Img
+                src={icons.logo}
+                alt="logo"
+                width="100%"
+                height="100%"
+                class={`${props.borderRadius}`}
+            />
+        </Image.Root>
+    )
+}
+
+const WebSocketHandler = (props: IProps) => {
+    onMount(async () => {
+        initWebSocket()
+    })
+
+    return (
+        <div>
+            <Show
+                when={showCameraView()}
+                fallback={() => <LoaderHandler borderRadius={props.borderRadius} />}>
+                <video
+                    id="camera__view"
+                    /* mousedown="mouseDown($event)"
+                    mouseup="mouseUp($event)"
+                    mousemove="mouseMove($event)"
+                    wheel="wheel($event)" */
+                    class="camera__view"
+                    autoplay
+                />
+            </Show>
+        </div>
+    )
+}
+
+export default WebSocketHandler

GUI/ETVR/src/components/WebSocket/index.tsx

@@ -1,6 +1,6 @@
 import { Image } from '@kobalte/core'
 import { Link } from '@solidjs/router'
-import CustomPopover from './CustomPopover/index'
+import CustomPopover from './CustomPopover'
 import icons from '@assets/images/index'
 import './styles.css'
 

GUI/ETVR/src/components/header/index.tsx

@@ -2,8 +2,10 @@ import { createMemo } from 'solid-js'
 import { uiState } from './ui'
 
 export const connectingStatus = createMemo(() => uiState().connecting)
+export const loaderStatus = createMemo(() => uiState().loader)
 export const openModalStatus = createMemo(() => uiState().openModal)
 export const menuOpenStatus = createMemo(() => uiState().menuOpen)
 export const connectedUserName = createMemo(() => uiState().connectedUser)
+export const showCameraView = createMemo(() => uiState().showCameraView)
 export const notifications = createMemo(() => uiState().notifications)
 export const displayMode = createMemo(() => uiState().displayMode)

GUI/ETVR/src/store/ui/selectors.ts

@@ -27,6 +27,7 @@ export interface IUiStore {
     connecting?: boolean
     openModal?: boolean
     menuOpen?: IMenuOpen | null
+    showCameraView?: boolean
     connectedUser: string
     notifications?: ToasterStore<string>
     displayMode: POPOVER_ID
@@ -48,6 +49,7 @@ export const defaultState = {
     openModal: false,
     menuOpen: null,
     connectedUser: '',
+    showCameraView: false,
     notifications: new ToasterStore<string>(),
     displayMode: POPOVER_ID.GRIP,
 }
@@ -93,6 +95,22 @@ export const setConnectedUser = (userName: string) => {
     )
 }
 
+export const setLoader = (type: loaderType, value: boolean) => {
+    setState(
+        produce((s) => {
+            if (s.loader) s.loader[type] = value
+        }),
+    )
+}
+
+export const setShowCameraView = (showCameraView: boolean) => {
+    setState(
+        produce((s) => {
+            s.showCameraView = showCameraView
+        }),
+    )
+}
+
 export const notify = (title: string, body: string | undefined) => {
     new Notification(title, { body: body || '' })
 }

GUI/ETVR/src/store/ui/ui.ts

@@ -1,4 +1,4 @@
-import { rtcWebSocket, rtcTimeout } from '@store/api/selectors'
+import { rtcWebSocket, rtcTimeout, rtcConnectInterval } from '@store/api/selectors'
 import { setRTCStatus, setConnectInterval, setRTCTimeout } from '@store/api/websocket'
 import { RTCState } from '@utils/enums'
 
@@ -32,6 +32,9 @@ export const check = () => {
 const initWebSocket = () => {
     setRTCStatus(RTCState.CONNECTING)
     rtcWebSocket().onopen = () => {
+        setRTCTimeout(250) // reset timer to 250 on open of websocket connection
+        clearTimeout(rtcConnectInterval()) // clear Interval on open of websocket connection
+
         setRTCStatus(RTCState.CONNECTED)
         setInterval(() => {
             sendToRTCServer({
@@ -43,6 +46,8 @@ const initWebSocket = () => {
                 },
             })
         }, 1000 * 10)
+
+        console.log('[WebSocket Client]: Connection Opened')
     }
     //* TODO: Add notification to the user
     rtcWebSocket().onerror = (e) => {
@@ -52,17 +57,17 @@ const initWebSocket = () => {
     }
     //* TODO: Add notification to the user
     rtcWebSocket().onclose = (e) => {
-        //increment retry interval
-        setRTCTimeout((rtcTimeout() as number) + (rtcTimeout() as number))
-        //call check function after timeout
-        setConnectInterval(setTimeout(check, Math.min(10000, rtcTimeout() as number)))
         console.log(
             `[WebSocket Client]: Socket is closed. Reconnect will be attempted in ${Math.min(
                 10000 / 1000,
                 ((rtcTimeout() as number) + (rtcTimeout() as number)) / 1000,
             )} second.`,
             e.reason,
         )
+        //increment retry interval
+        setRTCTimeout((rtcTimeout() as number) + (rtcTimeout() as number))
+        //call check function after timeout
+        setConnectInterval(setTimeout(check, Math.min(10000, rtcTimeout() as number)))
     }
 }
 

GUI/ETVR/src/utils/hooks/websocket/index.ts

@@ -51,5 +51,9 @@ module.exports = {
     },
 
     // eslint-disable-next-line no-undef
-    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
+    plugins: [
+        require('@tailwindcss/forms'),
+        require('@tailwindcss/typography'),
+        require('@kobalte/tailwindcss')({ prefix: 'kb' }),
+    ],
 }