ajaxter-chat 1.0.3 → 3.0.1

package/src/components/BlockList/index.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { ChatUser, WidgetConfig } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
+
+interface BlockListScreenProps {
+  blockedUsers: ChatUser[];
+  config:       WidgetConfig;
+  onUnblock:    (uid: string) => void;
+  onBack:       () => void;
+}
+
+export const BlockListScreen: React.FC<BlockListScreenProps> = ({
+  blockedUsers, config, onUnblock, onBack,
+}) => (
+  <div style={{ display: 'flex', flexDirection: 'column', height: '100%', animation: 'cw-slideIn 0.22s ease' }}>
+    {/* Header */}
+    <div style={{
+      background: `linear-gradient(135deg,${config.primaryColor},${config.primaryColor}cc)`,
+      padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
+    }}>
+      <button onClick={onBack} style={backBtnStyle}>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+          <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      <div>
+        <div style={{ fontWeight: 700, fontSize: 16, color: '#fff' }}>Block List</div>
+        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>
+          {blockedUsers.length} blocked user{blockedUsers.length !== 1 ? 's' : ''}
+        </div>
+      </div>
+    </div>
+
+    <div style={{ flex: 1, overflowY: 'auto' }}>
+      {blockedUsers.length === 0 ? (
+        <div style={{ padding: '50px 24px', textAlign: 'center' }}>
+          <div style={{ fontSize: 36, marginBottom: 10 }}>✅</div>
+          <div style={{ fontWeight: 700, color: '#1a2332', marginBottom: 6 }}>No blocked users</div>
+          <div style={{ fontSize: 13, color: '#7b8fa1' }}>Users you block will appear here</div>
+        </div>
+      ) : (
+        blockedUsers.map((user, i) => (
+          <div key={user.uid} style={{
+            padding: '13px 16px', display: 'flex', alignItems: 'center', gap: 13,
+            borderBottom: '1px solid #f0f2f5',
+            animation: `cw-fadeUp 0.28s ease both`, animationDelay: `${i * 0.05}s`,
+          }}>
+            <div style={{
+              width: 44, height: 44, borderRadius: '50%',
+              backgroundColor: avatarColor(user.name),
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              color: '#fff', fontWeight: 700, fontSize: 14, flexShrink: 0,
+              filter: 'grayscale(0.6)', opacity: 0.7,
+            }}>
+              {initials(user.name)}
+            </div>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ fontWeight: 700, fontSize: 14, color: '#6b7280' }}>{user.name}</div>
+              <div style={{ fontSize: 12, color: '#9ca3af', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                {user.email}
+              </div>
+            </div>
+            <button
+              onClick={() => onUnblock(user.uid)}
+              style={{
+                padding: '6px 14px', borderRadius: 20,
+                border: `1.5px solid ${config.primaryColor}`,
+                background: 'transparent', color: config.primaryColor,
+                fontSize: 12, fontWeight: 700, cursor: 'pointer',
+                transition: 'all 0.15s', flexShrink: 0,
+              }}
+              onMouseEnter={e => {
+                (e.currentTarget as HTMLElement).style.background = config.primaryColor;
+                (e.currentTarget as HTMLElement).style.color = '#fff';
+              }}
+              onMouseLeave={e => {
+                (e.currentTarget as HTMLElement).style.background = 'transparent';
+                (e.currentTarget as HTMLElement).style.color = config.primaryColor;
+              }}
+            >
+              Unblock
+            </button>
+          </div>
+        ))
+      )}
+    </div>
+  </div>
+);
+
+const backBtnStyle: React.CSSProperties = {
+  background: 'rgba(255,255,255,0.22)', border: 'none', borderRadius: '50%',
+  width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center',
+  cursor: 'pointer', flexShrink: 0,
+};

package/src/components/CallScreen/index.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import { CallSession, ChatUser } from '../../types';
+import { avatarColor, initials } from '../../utils/chat';
+
+interface CallScreenProps {
+  session:        CallSession;
+  localVideoRef:  React.RefObject<HTMLVideoElement | null>;
+  remoteVideoRef: React.RefObject<HTMLVideoElement | null>;
+  onEnd:          () => void;
+  onToggleMute:   () => void;
+  onToggleCamera: () => void;
+  primaryColor:   string;
+}
+
+export const CallScreen: React.FC<CallScreenProps> = ({
+  session, localVideoRef, remoteVideoRef,
+  onEnd, onToggleMute, onToggleCamera, primaryColor,
+}) => {
+  const [duration, setDuration] = useState(0);
+  const peer = session.peer as ChatUser;
+
+  useEffect(() => {
+    if (session.state !== 'connected' || !session.startedAt) return;
+    const t = setInterval(() => {
+      setDuration(Math.floor((Date.now() - session.startedAt!.getTime()) / 1000));
+    }, 1000);
+    return () => clearInterval(t);
+  }, [session.state, session.startedAt]);
+
+  const mins = String(Math.floor(duration / 60)).padStart(2, '0');
+  const secs = String(duration % 60).padStart(2, '0');
+
+  return (
+    <div style={{
+      display:'flex', flexDirection:'column', height:'100%',
+      background: session.isCameraOn ? '#000' : `linear-gradient(145deg,${primaryColor}dd,#0f172a)`,
+      color:'#fff', animation:'cw-slideIn 0.22s ease',
+      position:'relative', overflow:'hidden',
+    }}>
+      {/* Remote video (background) */}
+      <video ref={remoteVideoRef} autoPlay playsInline
+        style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', opacity: session.state==='connected'?1:0 }}
+      />
+
+      {/* Local video (PiP) */}
+      <video ref={localVideoRef} autoPlay playsInline muted
+        style={{
+          position:'absolute', bottom:120, right:14,
+          width:90, height:120, borderRadius:10,
+          objectFit:'cover', border:'2px solid rgba(255,255,255,0.3)',
+          display: session.isCameraOn ? 'block' : 'none',
+          zIndex:10,
+        }}
+      />
+
+      {/* Overlay */}
+      <div style={{ position:'relative', zIndex:5, display:'flex', flexDirection:'column', height:'100%', background:'rgba(0,0,0,0.35)' }}>
+        {/* Top bar */}
+        <div style={{ padding:'16px 18px', display:'flex', alignItems:'center', gap:10 }}>
+          <div style={{ flex:1 }}>
+            <div style={{ fontWeight:700, fontSize:15, color:'#fff' }}>
+              {session.state === 'calling'   && 'Calling...'}
+              {session.state === 'connected' && 'Connected'}
+              {session.state === 'ended'     && 'Call Ended'}
+            </div>
+          </div>
+        </div>
+
+        {/* Center: avatar + name */}
+        <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:16 }}>
+          {peer && (
+            <>
+              <div style={{
+                width:90, height:90, borderRadius:'50%',
+                backgroundColor: avatarColor(peer.name),
+                display:'flex', alignItems:'center', justifyContent:'center',
+                fontSize:28, fontWeight:700, color:'#fff',
+                boxShadow:'0 0 0 4px rgba(255,255,255,0.2)',
+                animation: session.state==='calling' ? 'cw-pulse 1.5s ease infinite' : 'none',
+              }}>
+                {initials(peer.name)}
+              </div>
+              <div style={{ textAlign:'center' }}>
+                <div style={{ fontSize:20, fontWeight:800 }}>{peer.name}</div>
+                <div style={{ fontSize:13, opacity:0.8, marginTop:4 }}>
+                  {session.state === 'calling'   && 'Ringing...'}
+                  {session.state === 'connected' && `${mins}:${secs}`}
+                  {session.state === 'ended'     && 'Call ended'}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Controls */}
+        <div style={{ padding:'24px', display:'flex', justifyContent:'center', alignItems:'center', gap:20 }}>
+          {/* Mute */}
+          <CallBtn
+            active={session.isMuted}
+            activeColor="#374151"
+            onClick={onToggleMute}
+            title={session.isMuted ? 'Unmute' : 'Mute'}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              {session.isMuted
+                ? <><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" stroke="#fff" strokeWidth="2"/><line x1="1" y1="1" x2="23" y2="23" stroke="#ef4444" strokeWidth="2"/></>
+                : <><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z" stroke="#fff" strokeWidth="2" strokeLinecap="round"/><path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4" stroke="#fff" strokeWidth="2" strokeLinecap="round"/></>
+              }
+            </svg>
+          </CallBtn>
+
+          {/* End call */}
+          <button onClick={onEnd} style={{
+            width:60, height:60, borderRadius:'50%', backgroundColor:'#ef4444',
+            border:'none', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
+            boxShadow:'0 4px 16px rgba(239,68,68,0.5)', flexShrink:0,
+          }}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 10.8a19.79 19.79 0 01-3.07-8.68A2 2 0 012 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z" fill="#fff" transform="rotate(135 12 12)"/>
+            </svg>
+          </button>
+
+          {/* Camera */}
+          <CallBtn active={session.isCameraOn} activeColor={primaryColor} onClick={onToggleCamera} title="Camera">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M23 7l-7 5 7 5V7zM1 5h13a2 2 0 012 2v10a2 2 0 01-2 2H1a2 2 0 01-2-2V7a2 2 0 012-2z" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </CallBtn>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const CallBtn: React.FC<{ active: boolean; activeColor: string; onClick: () => void; title: string; children: React.ReactNode }> = ({
+  active, activeColor, onClick, title, children,
+}) => (
+  <button onClick={onClick} title={title} style={{
+    width:50, height:50, borderRadius:'50%',
+    backgroundColor: active ? activeColor : 'rgba(255,255,255,0.2)',
+    border:'none', cursor:'pointer',
+    display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
+  }}>{children}</button>
+);