feat: implement loader handler

Author: ZanzyTHEbar

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

@@ -15,7 +15,7 @@ const Camera = (props: IProps) => {
             <div class="responsive-flex-container w-full h-full flex items-center flex-row">
                 <div class="responsive-iframe-container flex items-center h-full w-full ">
                     <div class="h-full w-full">
-                        <WebSocketHandler />
+                        <WebSocketHandler status={props.status} />
                     </div>
                 </div>
                 <div class="flex flex-col justify-between responsive-spacer-container bg-[#292D36] rounded-b-xl min-[1749px]:rounded-xl max-w-[209px] h-full w-full p-3">

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

@@ -1,10 +1,37 @@
 import { Show } from 'solid-js'
 import { OrangeLoader } from '@components/Loader'
+import { CameraStatus } from '@store/camera/camera'
 import { showCameraView } from '@store/ui/selectors'
 
-// TODO: Grab selected camera from store, connect if not connected, and display video stream on  component mounted
+// TODO: Grab selected camera from store, connect if not connected, and display video stream on component mounted
+interface IWsProps {
+    status: CameraStatus
+}
+
+// TODO: Make other loader components for other statuses
+export const LoaderHandler = (props: IWsProps) => {
+    return (
+        <>
+            <Show when={props.status == CameraStatus.LOADING}>
+                <OrangeLoader width={100} unit={'%'} />
+            </Show>
+            <Show when={props.status == CameraStatus.ACTIVE}>
+                <OrangeLoader width={100} unit={'%'} />
+            </Show>
+            <Show when={props.status == CameraStatus.DISABLED}>
+                <OrangeLoader width={100} unit={'%'} />
+            </Show>
+            <Show when={props.status == CameraStatus.FAILED}>
+                <OrangeLoader width={100} unit={'%'} />
+            </Show>
+            <Show when={props.status == CameraStatus.NONE}>
+                <OrangeLoader width={100} unit={'%'} />
+            </Show>
+        </>
+    )
+}
 
-const WebSocketHandler = () => {
+const WebSocketHandler = (props: IWsProps) => {
     return (
         <div class={'w-full h-full'}>
             <Show
@@ -14,7 +41,7 @@ const WebSocketHandler = () => {
                         class={
                             'text-[#FFFF] flex justify-center bg-[#2b2f38]   rounded-t-xl min-[1750px]:rounded-xl w-full h-full'
                         }>
-                        <OrangeLoader width={100} unit={'%'} />
+                        <LoaderHandler status={props.status} />
                     </div>
                 )}>
                 <video class="bg-black rounded-t-xl w-full h-full" autoplay>

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

@@ -1,19 +1,23 @@
 import { useWebSocket } from 'solidjs-use'
 import { addNotification, ENotificationType } from '@hooks/notifications'
 import { getGlobalNotificationsType } from '@store/app/settings/selectors'
+import { CameraStatus, setCameraStatus } from '@store/camera/camera'
 import { cameras } from '@store/camera/selectors'
 import { isEmpty } from '@utils/index'
 const PORT = 7856
 const LOCAL_HOST = 'wss://127.0.0.1'
 
 export const generateWebsocketClients = () => {
     cameras().map((camera, i) => {
+        setCameraStatus(camera, CameraStatus.LOADING)
         if (isEmpty(camera.ws)) {
+            setCameraStatus(camera, CameraStatus.NONE)
             const { status, data, send, open, close } = useWebSocket(`${LOCAL_HOST}:${PORT + i}`, {
                 autoReconnect: {
                     retries: 3,
                     delay: 1000,
                     onFailed() {
+                        setCameraStatus(camera, CameraStatus.FAILED)
                         addNotification({
                             type: ENotificationType.ERROR,
                             action: getGlobalNotificationsType(),
@@ -29,6 +33,7 @@ export const generateWebsocketClients = () => {
                 },
             })
             camera.ws = { status, data, send, open, close }
+            return
         }
     })
 }