Make screen view and sidebar responsive in mobile screen

src/components/dynamic-bg.tsx

@@ -20,7 +20,7 @@ const DynamicBg = () => {
   const parallaxOffset = scrollY * 0.5;
 
   return (
-    <div className="fixed inset-0 bg-gradient-to-br from-slate-950 via-slate-900 to-black">
+    <div className="fixed inset-0 bg-linear-to-br from-slate-950 via-slate-900 to-black">
       <div
         className="absolute inset-0 opacity-30"
         style={{

src/components/room/chat/chat-container.tsx

@@ -1,12 +1,33 @@
+import { ChevronRightIcon, SendHorizonal, Smile, Users } from 'lucide-react';
+import { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
 import { Assets } from '@/assets';
 import { Typography } from '@/components/typography';
+import { useSignaling } from '@/hooks/use-signaling';
 import { cn } from '@/lib/utils';
-import { useModalChatOpen } from '@/store/conf/hooks';
-
-import { ChevronRightIcon, SendHorizonal, Smile, Users } from 'lucide-react';
+import { useModalChatOpen, usePeerMe } from '@/store/conf/hooks';
+import { Actions } from '@/types/actions';
 
 const ChatContainer = () => {
   const chatOpen = useModalChatOpen();
+  const { signalingService } = useSignaling();
+  const peerMe = usePeerMe();
+  const [message, setMessage] = useState('');
+
+  const handleSendChat = async () => {
+    if (!signalingService) return;
+    signalingService.sendMessage({
+      action: Actions.SendChat,
+      args: {
+        id: uuidv4(),
+        text: message,
+        sender: peerMe,
+        createdAt: Date.now(),
+      },
+    });
+    console.log(message, 'sent');
+  };
   return (
     <div
       className={cn(
@@ -37,12 +58,14 @@
           className=" h-12 flex items-center gap-2  bg-gray-700/40  p-2 rounded-md "
           title="Coming soon"
         >
-          <input
+          <textarea
+            value={message}
+            onChange={event => setMessage(event.target.value)}
             className=" flex-1 bg-transparent focus:outline-none border-none focus:border-none placeholder:text-gray-500 text-sm"
             placeholder="Send a message..."
           />
           <Smile />
-          <SendHorizonal />
+          <SendHorizonal onClick={handleSendChat} />
         </div>
       </div>
     </div>

src/components/room/chat/chat.tsx

@@ -11,7 +11,7 @@ const Chat = () => {
       variant="ghost"
       size="icon"
       className="w-12 h-12 rounded-xl  text-white relative
-      bg-gradient-to-br from-white/15 to-white/1  backdrop-blur-xl
+      bg-linear-to-br from-white/15 to-white/1  backdrop-blur-xl
       "
     >
       <MessageSquare className="w-5 h-5" />

src/components/room/display/index.tsx

@@ -5,15 +5,17 @@ import ScreenView from './screen-view';
 const Display = () => {
   return (
     <div
-      className={`${'fixed h-full inset-0  pt-4 pb-18 px-3 flex  flex-row w-full justify-between overflow-hidden '}`}
+      className={`${'fixed inset-0  pt-4 pb-18 px-3 h-full w-full  overflow-hidden '}`}
     >
-      {/* change padding to pt-10 */}
-      {/* screen sharing */}
-      <ScreenView />
-      {/* peers grid */}
-      <MainGrid />
-      {/* chat and attendees */}
-      <Sidebar />
+      <div className="relative h-full w-full flex flex-col lg:flex-row justify-between ">
+        {/* change padding to pt-10 */}
+        {/* screen sharing */}
+        <ScreenView />
+        {/* peers grid */}
+        <MainGrid />
+        {/* chat and attendees */}
+        <Sidebar />
+      </div>
     </div>
   );
 };

src/components/room/display/main-grid.tsx

@@ -88,8 +88,8 @@ const MainGrid = () => {
     <div
       ref={gridRef}
       className={cn(
-        `w-full h-full  flex flex-wrap items-center justify-center content-center gap-3 py-2 overflow-hidden lg:min-w-[400px] xl:min-w-[450px] 2xl:min-w-[500px]`,
-        (screenOn || peerScreens.length) && 'xl:w-2/6 2xl:w-3/12'
+        `w-full h-1/2 lg:h-full  flex flex-wrap items-center justify-center content-center gap-3 py-2 overflow-hidden lg:min-w-[400px] xl:min-w-[450px] 2xl:min-w-[500px]`,
+        (screenOn || peerScreens.length) && 'lg:w-1/3 xl:w-2/6 2xl:w-3/12'
       )}
     >
       {layout ? (

src/components/room/display/screen-view.tsx

@@ -48,7 +48,7 @@ const ScreenView = () => {
   return (
     <div
       className={cn(
-        'relative  bg-gray-800/50  rounded-2xl w-5/6 overflow-hidden'
+        'relative  bg-linear-to-br from-white/5 to-white/2  rounded-2xl h-1/2 lg:h-full w-full overflow-hidden'
       )}
     >
       <div className=" cursor-pointer absolute h-fit bg-black/30 hover:bg-black/50 right-2 top-2 rounded-md p-2 ">

src/components/room/sidebar.tsx

@@ -25,7 +25,9 @@ const Sidebar = () => {
   return (
     <div
       className={cn(
-        `bg-linear-to-br from-white/5  to-white/2  w-0 shrink-0 transition-all duration-300 ease-in-out overflow-hidden  rounded-xl`,
+        `absolute lg:static z-10 h-full right-0 
+        bg-linear-to-br from-slate-950 lg:from-white/5  via-slate-900 to-black lg:to-white/2
+         w-0  shrink-0 transition-all duration-300 ease-in-out overflow-hidden  rounded-xl`,
         (chatOpen || participantsOpen) && 'w-full max-w-[400px]'
       )}
     >

src/hooks/use-room.ts

@@ -125,6 +125,10 @@ export const useRoom = () => {
         const data = ValidationSchema.consumerStateData.parse(args);
         closeConsumer(data);
       },
+      [Actions.SendChat]: async args => {
+        const data = ValidationSchema.sendChat.parse(args);
+        console.log(data);
+      },
     }),
     [closeConsumer, createConsumer, pauseConsumer, peerActions, resumeConsumer]
   );

src/lib/schema.ts

@@ -3,6 +3,15 @@ import z from 'zod';
 const producerSource = z.enum(['mic', 'camera', 'screen', 'screenAudio']);
 const mediaKind = z.enum(['audio', 'video']);
 
+const peerDataSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  userId: z.string().optional(),
+  email: z.string().optional(),
+  photo: z.string().optional(),
+  color: z.string().optional(),
+});
+
 export const ValidationSchema = {
   peerData: z.object({
     id: z.string(),
@@ -31,4 +40,12 @@ export const ValidationSchema = {
     producerSource: producerSource,
     fromProducer: z.boolean().optional(),
   }),
+
+  sendChat: z.object({
+    id: z.string(),
+    text: z.string(),
+    sender: peerDataSchema,
+    receiver: peerDataSchema.optional(),
+    createdAt: z.number(),
+  }),
 };