diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx index 82c49af..b16c5b0 100644 --- 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 ( ( diff --git a/frontend/src/components/chat.tsx b/frontend/src/components/chat.tsx index 959bef9..6f13267 100644 --- 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,12 +20,12 @@ 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) @@ -33,7 +33,6 @@ export const ChatContainer = (props: IChatContainer) => { setChatMessages(messages) }) }) - */ }) createEffect(on(() => props.client,() => { @@ -119,21 +118,21 @@ export const ChatContainer = (props: IChatContainer) => { connectionManager.sendStreamRequest(props.client.id, localStream) } - return
+ return
{ props.client && <> -
-
{ +
+
{ ev.stopPropagation() onvideoInit() }}> - +
-
{ +
{ ev.stopPropagation() onvideoInit() }}> - +
@@ -143,7 +142,7 @@ export const ChatContainer = (props: IChatContainer) => { sendMessage() }}>Enviar
-
+
{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 new file mode 100644 index 0000000..85a87c3 --- /dev/null +++ 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
+
+
WebRTC Open Chat
+
+ {props.children} +
+} \ No newline at end of file diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index d7e1d2e..be0bc14 100644 --- 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
!
} + + + connectionManager.sendOffer() + + return +
+ { [1].includes(deviceType()) && +
+ +
+ } +
+
Chat
+ + + + +
+
+ +} + +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
!
} - 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
-

WebRTC Open Chat Room 5

-
-
-
Usuarios Conectados 1
- - - - - - {client => { - return - }} - - -
-
-
Chat
- - - - -
-
-
+ return <> +
Usuarios Conectados 1
+ + + + + + {client => { + return + }} + + + } -interface IClientCard { - client: IClient -} const ClientCard = (props: IClientCard) => { @@ -169,5 +135,4 @@ const ClientCard = (props: IClientCard) => {
- -} \ No newline at end of file +} diff --git a/frontend/src/styles/components.module.css b/frontend/src/styles/components.module.css index 6d8c9a1..64afe2f 100644 --- 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 index 15515c6..f980575 100644 --- 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; } \ No newline at end of file