improve chat desing

ivanjoz · Jul 7, 2024 · cf65a5f · cf65a5f
1 parent 7ab1909
commit cf65a5f
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 100 deletions.
diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
@@ -4,7 +4,7 @@ import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import "@styles/global.css";
 import "@styles/layout.css";
-import { Suspense } from "solid-js";
+import { Suspense, createSignal } from "solid-js";
 import { Base64, TimeMToB64Decode, TimeMToB64Encode } from "./core/halpers";
 
 export const GetWssAPI = () => {
@@ -18,8 +18,29 @@ export const GetWssAPI = () => {
   }
 }
 
+const isClient = typeof window !== 'undefined'
+
+export const checkDevice = () => {
+  if(!isClient) return 1
+  if(window.innerWidth <= 640) return 3
+  else if(window.innerWidth <= 980) return 2
+  else { 
+    return 1 
+  }
+}
+
+export const [deviceType, setDeviceType] = createSignal(checkDevice())
+
 export default function App() {
 
+  if(isClient){
+    window.addEventListener('resize', ()=> {
+      const newDeviceType = checkDevice()
+      console.log('device type::', newDeviceType)
+      if(newDeviceType !== deviceType()){ setDeviceType(newDeviceType) }
+    })
+  }
+
   return (
     <Router
       root={props => (

diff --git a/frontend/src/components/chat.tsx b/frontend/src/components/chat.tsx
@@ -1,5 +1,5 @@
 import { For, createEffect, createSignal, on } from "solid-js"
-import { IClient, connectionManager, mimeCodec } from "~/services/connection"
+import { IClient, connectionManager, getDexieInstance, mimeCodec } from "~/services/connection"
 // import s1 from '../styles/components.module.css';
 
 export interface IChatContainer {
@@ -20,20 +20,19 @@ export const ChatContainer = (props: IChatContainer) => {
   let videoLocal: HTMLVideoElement
   let videoInput: HTMLVideoElement
   let localStream: MediaStream
-  let sourceBuffer: SourceBuffer
-  let queue: Uint8Array[] = []
+  // let sourceBuffer: SourceBuffer
+  // let queue: Uint8Array[] = []
 
   createEffect(() => {
-    console.log("obteniendo mensajes::",props.client)
-    /*
+    console.log("Obteniendo mensajes::",props.client)   
+
     getDexieInstance().then(db => {
       db.table('messages').where({ cid: props.client.id }).toArray().then(messages => {
         messages.sort((a,b) => a.id < b.id ? 1 : -1)
         props.client.messages = messages
         setChatMessages(messages)
       })
     })
-    */
   })
 
   createEffect(on(() => props.client,() => {
@@ -119,21 +118,21 @@ export const ChatContainer = (props: IChatContainer) => {
     connectionManager.sendStreamRequest(props.client.id, localStream)
   }
 
-  return <div class="h100 p-rel flex-column">
+  return <div class="p-rel flex-column" style={{ height: 'calc(100% - 1.2rem)' }}>
     { 
     props.client && <>
-      <div class="flex w100">
-        <div class="video-v1 mr-08" onClick={ev => {
+      <div class="flex w100 mb-06">
+        <div class="video-v1 mr-auto" onClick={ev => {
           ev.stopPropagation()
           onvideoInit()
         }}>
-          <video class="w100 h100" ref={videoLocal} autoplay playsinline></video>
+          <video class="w100 h100" ref={videoInput} autoplay playsinline></video>
         </div>
-        <div class="video-v1" onClick={ev => {
+        <div class="video-v2 p-abs s1 mr-08" onClick={ev => {
           ev.stopPropagation()
           onvideoInit()
         }}>
-          <video class="w100 h100" ref={videoInput} autoplay playsinline></video>
+          <video class="w100 h100" ref={videoLocal} autoplay playsinline></video>
         </div>
       </div>
       <div class="flex w100 mt-06 mb-06">
@@ -143,7 +142,7 @@ export const ChatContainer = (props: IChatContainer) => {
           sendMessage()
         }}>Enviar</button>
       </div>
-      <div class="flex-column w100 grow-1">
+      <div class="flex-column w100 grow-1" style={{ overflow: 'auto' }}>
         <For each={chatMessages()}>
           {message => {
             let contanerCss = message.ss === 5 ? "flex jc-start" : "flex jc-end"

diff --git a/frontend/src/components/menus.tsx b/frontend/src/components/menus.tsx
@@ -0,0 +1,15 @@
+import { JSX } from "solid-js"
+
+interface ILayout1 {
+  children: JSX.Element | JSX.Element[]
+}
+
+export const Layout1 = (props: ILayout1) => {
+
+  return <div class="layout-1">
+    <div class="bar-1 flex ai-center w100">
+      <div class="">WebRTC Open Chat</div>
+    </div>
+    {props.children}
+  </div>
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
@@ -5,49 +5,10 @@ import { IClient, IConnStatus, clientSelectedID, clientSelectedStatus, clientsMa
 import s1 from '../styles/components.module.css';
 import { LoadingBar } from "~/components/layout";
 import { ChatContainer, setChatMessages } from "~/components/chat";
+import { deviceType } from "~/app";
+import { Layout1 } from "~/components/menus";
 
 export default function Home() {
-
-          // List of common video and audio codecs to check
-          const videoCodecs = [
-            'video/webm; codecs="vp8"',
-            'video/webm; codecs="vp9"',
-            'video/webm; codecs="av01"',
-            'video/mp4; codecs="avc1.42E01E"',
-            'video/mp4; codecs="avc1.4D401E"',
-            'video/mp4; codecs="avc1.64001E"',
-            'video/mp4; codecs="hev1.1.6.L93.B0"',
-            'video/mp4; codecs="hvc1.1.6.L93.B0"'
-        ];
-
-        const audioCodecs = [
-            'audio/webm; codecs="opus"',
-            'audio/webm; codecs="vorbis"',
-            'audio/mp4; codecs="mp4a.40.2"',
-            'audio/aac'
-        ];
-
-        console.log('Supported Video Codecs:');
-        videoCodecs.forEach(codec => {
-            if (MediaSource.isTypeSupported(codec)) {
-                console.log(codec, 'is supported');
-            } else {
-                console.log(codec, 'is NOT supported');
-            }
-        });
-
-        console.log('Supported Audio Codecs:');
-        audioCodecs.forEach(codec => {
-            if (MediaSource.isTypeSupported(codec)) {
-                console.log(codec, 'is supported');
-            } else {
-                console.log(codec, 'is NOT supported');
-            }
-        });
-
-
-  const [loadingClients, setLoadingClients] = createSignal(true)
-
   const clientSelected = createMemo(() => {
     return clientsMap().get(clientSelectedID())
   })
@@ -59,14 +20,42 @@ export default function Home() {
     setClientSelectedStatus(client.connStatus)
   }))
 
+  if(typeof window === 'undefined'){ return <div>!</div> }
+
+
+  connectionManager.sendOffer()
+
+  return <Layout1>
+    <div class="w100 flex jc-between">
+      { [1].includes(deviceType()) &&
+        <div class="py-12 mr-16" style={{ width: '28%' }}>
+          <UsuariosConectados />
+        </div>
+      }
+      <div class={"py-12 px-08 p-rel flex-column grow-1 " + (s1.card_chat_c)}>
+        <div class="h3">Chat</div>
+        <ChatContainer client={clientSelected()}/>
+        <Show when={clientSelectedStatus()?.isLoading}>
+          <LoadingBar msg={clientSelectedStatus()?.msg} />
+        </Show>
+      </div>
+    </div>
+  </Layout1>
+}
+
+interface IClientCard {
+  client: IClient
+}
+
+const [loadingClients, setLoadingClients] = createSignal(true)
+
+const UsuariosConectados = () => {
   const clientsList = createMemo(() => {
     let clientsAll = Array.from(clientsMap().values())
     clientsAll = clientsAll.sort((a,b) => b._updated - a._updated)
     return clientsAll
   })
 
-  if(typeof window === 'undefined'){ return <div>!</div> }
-
   connectionManager.on('PostRtcOffer', users => {
     const clientsMap = new Map()
     for(let user of users){
@@ -79,44 +68,21 @@ export default function Home() {
     setLoadingClients(false)
   })
 
-  connectionManager.sendOffer()
-
-  createEffect(() => {
-    connectionManager.onMessage = e => {
-      console.log("respuesta recibida::", e)
-    }
-  },[])
-
-  return <div>
-    <h3>WebRTC Open Chat Room 5</h3>
-    <div class="w100 flex jc-between">
-      <div class="px-12 py-12" style={{ width: '28%' }}>
-        <div class="h3">Usuarios Conectados 1</div>
-        <Show when={loadingClients()}>
-          <LoadingBar msg="Cargando Usuarios..." />
-        </Show>
-        <Show when={!loadingClients()}>
-          <For each={clientsList()}>
-            {client => {
-              return <ClientCard client={client} />
-            }}
-          </For>
-        </Show>
-      </div>
-      <div class={"px-12 py-12 p-rel h100 flex-column grow-1 " + (s1.card_chat_c)}>
-        <div class="h3">Chat</div>
-        <ChatContainer client={clientSelected()}/>
-        <Show when={clientSelectedStatus()?.isLoading}>
-          <LoadingBar msg={clientSelectedStatus()?.msg} />
-        </Show>
-      </div>
-    </div>
-  </div>
+  return <>
+    <div class="h3">Usuarios Conectados 1</div>
+    <Show when={loadingClients()}>
+      <LoadingBar msg="Cargando Usuarios..." />
+    </Show>
+    <Show when={!loadingClients()}>
+      <For each={clientsList()}>
+        {client => {
+          return <ClientCard client={client} />
+        }}
+      </For>
+    </Show>
+  </>
 }
 
-interface IClientCard {
-  client: IClient
-}
 
 const ClientCard = (props: IClientCard) => {
 
@@ -169,5 +135,4 @@ const ClientCard = (props: IClientCard) => {
       </div>
     </div>
   </div>
-
-}
+}
diff --git a/frontend/src/styles/components.module.css b/frontend/src/styles/components.module.css
@@ -6,9 +6,9 @@
 
 .card_chat_c {
   background-color: #00000030;
-  height: calc(100vh - 3rem);
+  height: calc(100vh - 4rem);
   border-radius: 7px;
-  margin-right: 1rem;
+ /* margin-right: 1rem; */
   box-shadow: 0px 0px 7px rgb(0 0 0 / 65%);
 }
 
diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
@@ -27,7 +27,30 @@
 }
 
 .video-v1 {
-  width: 20rem;
-  height: 14rem;
-  background-color: #768d82;
+  width: 22rem;
+  height: 17rem;
+  background-color: #8fb169;
+}
+
+.video-v2 {
+  width: 13.5rem;
+  height: 10rem;
+  background-color: #b19869;
+  right: 0;
+  top: 0;
+}
+
+.layout-1 {
+  padding-top: calc(2.6rem + 10px);
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.layout-1 > .bar-1 {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: #3f3fbc;
+  height: 2.6rem;
+  color: white;
+  padding: 0 16px;
 }