improve mobile interface

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

Hide file tree

Showing 6 changed files with 163 additions and 102 deletions.
diff --git a/frontend/src/components/chat.tsx b/frontend/src/components/chat.tsx
@@ -24,6 +24,7 @@ export const ChatContainer = (props: IChatContainer) => {
   // let queue: Uint8Array[] = []
 
   createEffect(() => {
+    if(!props.client){ return }
     console.log("Obteniendo mensajes::",props.client)   
 
     getDexieInstance().then(db => {

diff --git a/frontend/src/components/menus.tsx b/frontend/src/components/menus.tsx
@@ -1,15 +1,45 @@
-import { JSX } from "solid-js"
+import { JSX, createSignal } from "solid-js"
+import { UsuariosConectados } from "./usuarios"
 
 interface ILayout1 {
   children: JSX.Element | JSX.Element[]
 }
 
+export const [buttonLayerShow, setButtonLayerShow] = createSignal(0)
+
 export const Layout1 = (props: ILayout1) => {
 
   return <div class="layout-1">
     <div class="bar-1 flex ai-center w100">
+      <ButtonLayer id={1} css="py-12 px-12">
+        <UsuariosConectados/>
+      </ButtonLayer>
       <div class="">WebRTC Open Chat</div>
     </div>
     {props.children}
   </div>
+}
+
+interface IButtonLayer {
+  id: number
+  children: JSX.Element | JSX.Element[]
+  css?: string
+}
+
+export const ButtonLayer = (props: IButtonLayer) => {
+
+  return <>
+    <div class="bn2 mr-08 h100" style={{ padding: '0 12px' }} onClick={ev => {
+      ev.stopPropagation()
+      const showId = buttonLayerShow() === props.id ? 0 : props.id
+      setButtonLayerShow(showId)
+    }}>
+      H
+    </div>
+    { buttonLayerShow() &&
+      <div class={"layer-c1 "+(props.css||"")}>
+        { props.children }
+      </div>
+    }
+  </>
 }
diff --git a/frontend/src/components/usuarios.tsx b/frontend/src/components/usuarios.tsx
@@ -0,0 +1,95 @@
+"use client";
+import { For, Show, createEffect, createMemo, createSignal, on } from "solid-js";
+import "video.js/dist/video-js.min.css";
+import { setChatMessages } from "~/components/chat";
+import { LoadingBar } from "~/components/layout";
+import { IClient, clientSelectedID, clientsMap, connectionManager, setClientSelectedID } from "~/services/connection";
+import s1 from '../styles/components.module.css';
+import { setButtonLayerShow } from "./menus";
+
+export const [loadingClients, setLoadingClients] = createSignal(true)
+
+export interface IUsuariosConectados {
+  onClientSelect?: (cid: string) => void
+}
+
+export const UsuariosConectados = (props: IUsuariosConectados) => {
+  const clientsList = createMemo(() => {
+    console.log("loading clients...", loadingClients())
+    let clientsAll = Array.from(clientsMap().values())
+    clientsAll = clientsAll.sort((a,b) => b._updated - a._updated)
+    return clientsAll
+  })
+
+  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
+}
+
+export const ClientCard = (props: IClientCard) => {
+
+  const [status, setStatus] = createSignal(props.client.connStatus||{})
+
+  props.client._updater = () => {
+    console.log("seteando client connStatus::",props.client.connStatus)
+    setStatus({...(props.client.connStatus||{})})
+  }
+
+  const statusMessage = createMemo(() => {
+    let message = status().status
+    if(message !== status().iceStatus){
+      message += " | " + status().iceStatus
+    }
+    return message
+  })
+
+  const nowTime = Math.floor(Date.now()/1000)
+  const haceMin = Math.ceil((nowTime - props.client._updated)/60)
+
+  return <div class={"px-06 py-06 mt-08 " + s1.card_c1} onClick={ev => {
+    ev.stopPropagation()
+    setClientSelectedID(props.client.id)
+    setChatMessages(props.client.messages||[])
+    connectionManager.askConnection(props.client.id, "")
+    setButtonLayerShow(0)
+  }}>
+    <div class="w100 flex jc-between">
+      <div>
+        {props.client.id}
+      </div>
+      <div>Hace {haceMin} min</div>
+    </div>
+    <div class="w100 flex jc-between">
+      <div>
+        { statusMessage() &&
+          <div>{statusMessage()}</div>
+        }
+      </div>
+      <div class="flex a-center">
+        { status().msg &&
+          <div>{status().msg}</div>
+        }
+        { !status().msg &&
+          <div>-</div>
+        }
+        { status().newMessages && !status().msg &&
+          <div>{status().newMessages} nuevos!</div>
+        }
+      </div>
+    </div>
+  </div>
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
@@ -1,12 +1,13 @@
 "use client";
-import { For, Show, createEffect, createMemo, createSignal, on } from "solid-js";
+import { Show, createEffect, createMemo, createSignal, on } from "solid-js";
 import "video.js/dist/video-js.min.css";
-import { IClient, IConnStatus, clientSelectedID, clientSelectedStatus, clientsMap, connectionManager, setClientSelectedID, setClientSelectedStatus, setClientsMap } from "~/services/connection";
-import s1 from '../styles/components.module.css';
-import { LoadingBar } from "~/components/layout";
-import { ChatContainer, setChatMessages } from "~/components/chat";
 import { deviceType } from "~/app";
+import { ChatContainer } from "~/components/chat";
+import { LoadingBar } from "~/components/layout";
 import { Layout1 } from "~/components/menus";
+import { UsuariosConectados, setLoadingClients } from "~/components/usuarios";
+import { IConnStatus, clientSelectedID, clientSelectedStatus, clientsMap, connectionManager, setClientSelectedStatus, setClientsMap } from "~/services/connection";
+import s1 from '../styles/components.module.css';
 
 export default function Home() {
   const clientSelected = createMemo(() => {
@@ -22,6 +23,17 @@ export default function Home() {
 
   if(typeof window === 'undefined'){ return <div>!</div> }
 
+  connectionManager.on('PostRtcOffer', users => {
+    const clientsMap = new Map()
+    for(let user of users){
+      if(user.id === connectionManager.clientID){ continue }
+      user._updated = parseInt(user.updated,36) * 2
+      clientsMap.set(user.id, user)
+    }
+    setClientsMap(clientsMap)
+    console.log('Usuarios conectados::', users)
+    setLoadingClients(false)
+  })
 
   connectionManager.sendOffer()
 
@@ -42,97 +54,3 @@ export default function Home() {
     </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
-  })
-
-  connectionManager.on('PostRtcOffer', users => {
-    const clientsMap = new Map()
-    for(let user of users){
-      if(user.id === connectionManager.clientID){ continue }
-      user._updated = parseInt(user.updated,36) * 2
-      clientsMap.set(user.id, user)
-    }
-    setClientsMap(clientsMap)
-    console.log('Usuarios conectados::', users)
-    setLoadingClients(false)
-  })
-
-  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>
-  </>
-}
-
-
-const ClientCard = (props: IClientCard) => {
-
-  const [status, setStatus] = createSignal(props.client.connStatus||{})
-
-  props.client._updater = () => {
-    console.log("seteando client connStatus::",props.client.connStatus)
-    setStatus({...(props.client.connStatus||{})})
-  }
-
-  const statusMessage = createMemo(() => {
-    let message = status().status
-    if(message !== status().iceStatus){
-      message += " | " + status().iceStatus
-    }
-    return message
-  })
-
-  const nowTime = Math.floor(Date.now()/1000)
-  const haceMin = Math.ceil((nowTime - props.client._updated)/60)
-
-  return <div class={"px-06 py-06 mt-08 " + s1.card_c1} onClick={ev => {
-    ev.stopPropagation()
-    setClientSelectedID(props.client.id)
-    setChatMessages(props.client.messages||[])
-    connectionManager.askConnection(props.client.id, "")
-  }}>
-    <div class="w100 flex jc-between">
-      <div>
-        {props.client.id}
-      </div>
-      <div>Hace {haceMin} min</div>
-    </div>
-    <div class="w100 flex jc-between">
-      <div>
-        { statusMessage() &&
-          <div>{statusMessage()}</div>
-        }
-      </div>
-      <div class="flex a-center">
-        { status().msg &&
-          <div>{status().msg}</div>
-        }
-        { !status().msg &&
-          <div>-</div>
-        }
-        { status().newMessages && !status().msg &&
-          <div>{status().newMessages} nuevos!</div>
-        }
-      </div>
-    </div>
-  </div>
-}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
@@ -25,6 +25,7 @@ body {
   height: 100%;
   color: white;
   background-color: #232325;
+  --header-height: 2.7rem;
 }
 
 *, :after, :before { box-sizing: border-box; }

diff --git a/frontend/src/styles/layout.css b/frontend/src/styles/layout.css
@@ -41,7 +41,7 @@
 }
 
 .layout-1 {
-  padding-top: calc(2.6rem + 10px);
+  padding-top: calc(var(--header-height) + 10px);
   padding-left: 12px;
   padding-right: 12px;
 }
@@ -50,7 +50,23 @@
   top: 0;
   left: 0;
   background-color: #3f3fbc;
-  height: 2.6rem;
+  height: var(--header-height);
   color: white;
   padding: 0 16px;
+  z-index: 200;
+}
+.bn2 {
+  height: 2.4rem;
+  background-color: black;
+  color: white;
+}
+.layer-c1 {
+  position: absolute;
+  width: 70vw;
+  top: var(--header-height);
+  height: calc(100vh - var(--header-height));
+  backdrop-filter: blur(8px);
+  z-index: 201;
+  left: 0;
+  background-color: #4a3e56b5;
 }