Moyettes/DiscordClone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Implement incoming call UI with sound and integrate core chat and voice components.
All checks were successful
Build and Release / build-and-release (push) Successful in 13m49s
Details

Browse Source
This commit is contained in:
Bryan1029384756
2026-02-16 14:39:44 -06:00
parent 5ca0eeb6a4
commit 6693ccf4c0
6 changed files with 231 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
packages/shared/src/index.css
View File

@@ -3757,14 +3757,29 @@ img.search-dropdown-avatar {
opacity: 0.3;
}
.dm-call-banner {
.dm-call-idle-stage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
background-color: var(--bg-secondary);
border-bottom: 1px solid var(--bg-tertiary);
justify-content: center;
background-color: var(--bg-tertiary);
padding: 32px 16px;
gap: 8px;
min-height: 200px;
height: 45%;
max-height: 80%;
border-bottom: 2px solid var(--bg-tertiary);
}
.dm-call-idle-username {
color: var(--text-normal);
font-size: 18px;
font-weight: 600;
margin-top: 8px;
}
.dm-call-idle-status {
color: var(--text-muted);
font-size: 14px;
}
@@ -3781,4 +3796,88 @@ img.search-dropdown-avatar {
.dm-call-join-btn:hover {
background-color: #2d7d46;
}
/* Incoming call UI */
.incoming-call-ui {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--bg-tertiary);
padding: 32px 16px;
gap: 12px;
flex: 1;
min-height: 260px;
}
.incoming-call-avatar-ring {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.incoming-call-avatar-ring::before {
content: '';
position: absolute;
width: 96px;
height: 96px;
border-radius: 50%;
border: 3px solid #3ba55c;
animation: call-ring-pulse 1.5s ease-out infinite;
}
@keyframes call-ring-pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
.incoming-call-username {
color: var(--text-normal);
font-size: 20px;
font-weight: 600;
}
.incoming-call-subtitle {
color: var(--text-muted);
font-size: 14px;
}
.incoming-call-buttons {
display: flex;
gap: 24px;
margin-top: 16px;
}
.incoming-call-btn {
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: white;
transition: filter 0.15s;
}
.incoming-call-btn:hover {
filter: brightness(1.15);
}
.incoming-call-btn.join {
background-color: #3ba55c;
}
.incoming-call-btn.reject {
background-color: #ed4245;
}