aheh/call-me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[call-me] - improve UI

Browse Source
This commit is contained in:
Miroslav Pejic
2025-08-25 20:14:51 +02:00
parent 4c3cfb1769
commit e83379dfb8
5 changed files with 191 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "call-me",
"version": "1.2.62",
"version": "1.2.63",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "call-me",
"version": "1.2.62",
"version": "1.2.63",
"license": "AGPLv3",
"dependencies": {
"@ngrok/ngrok": "1.5.2",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "call-me",
"version": "1.2.62",
"version": "1.2.63",
"description": "Your Go-To for Instant Video Calls",
"author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
"license": "AGPLv3",
public/client.js
+53 -5
View File
@@ -56,6 +56,7 @@ const localVideo = document.getElementById('localVideo');
const remoteAudioDisabled = document.getElementById('remoteAudioDisabled');
const remoteVideoDisabled = document.getElementById('remoteVideoDisabled');
const localUsername = document.getElementById('localUsername');
const remoteUsername = document.getElementById('remoteUsername');
const remoteVideo = document.getElementById('remoteVideo');
// Ensure app is defined, even if config.js is not loaded
@@ -538,6 +539,7 @@ function handleUserClickToCall(user) {
}
selectedUser = user;
connectedUser = user;
updateUsernameDisplay();
renderUserList();
sendMsg({
type: 'offerAccept',
@@ -1035,6 +1037,7 @@ async function handleSignIn(data) {
localVideo.controls = false;
localVideo.classList.add('camera-feed'); // Set default styling for camera
localUsername.innerText = userName;
updateUsernameDisplay();
initializeConnection();
await handleEnumerateDevices();
// Initialize device settings after getting media
@@ -1224,6 +1227,7 @@ async function handleOffer(data) {
const { offer, name } = data;
console.log('Handling offer from:', name);
connectedUser = name;
updateUsernameDisplay();
// Initialize fresh connection for incoming call
initializeConnection();
@@ -1291,7 +1295,23 @@ function handleRemoteAudio(data) {
data.enabled ? remoteAudioDisabled.classList.remove('show') : remoteAudioDisabled.classList.add('show');
}
// Show/hide camera off overlay (minimal implementation)
// Update username displays on video containers
function updateUsernameDisplay() {
if (localUsername) {
localUsername.innerText = userName || 'You';
}
if (remoteUsername && connectedUser) {
remoteUsername.innerText = connectedUser;
// Show remoteUsername when user is connected
remoteUsername.classList.remove('hide');
} else if (remoteUsername) {
remoteUsername.innerText = '';
// Hide remoteUsername when no user is connected
remoteUsername.classList.add('hide');
}
}
// Show/hide camera off overlay with username display
function showCameraOffOverlay(type, show) {
const container =
type === 'local'
@@ -1302,14 +1322,40 @@ function showCameraOffOverlay(type, show) {
if (!overlay) {
overlay = document.createElement('div');
overlay.className = 'camera-off-overlay';
overlay.innerHTML = `
<img src="./assets/camOff.png" alt="Video Off" />
<span>${type === 'local' ? 'Video Off' : 'Video Disabled'}</span>
`;
container.appendChild(overlay);
}
if (show) {
const username = type === 'local' ? userName : connectedUser;
overlay.innerHTML = `
<img src="./assets/camOff.png" alt="Video Off" />
<span class="username">${username || (type === 'local' ? 'You' : 'Remote User')}</span>
<span class="status">${type === 'local' ? 'Video Off' : 'Video Disabled'}</span>
`;
}
overlay.classList.toggle('show', show);
// Hide/show username elements when video is off/on
const usernameElement = type === 'local' ? localUsername : remoteUsername;
if (usernameElement) {
if (show) {
// Video is off - hide username
usernameElement.classList.add('hide');
} else {
// Video is on - show username only if conditions are met
if (type === 'local') {
// Always show local username when video is on
usernameElement.classList.remove('hide');
} else {
// For remote username, only show if user is connected
if (connectedUser) {
usernameElement.classList.remove('hide');
}
// If no connected user, keep it hidden (handled by updateUsernameDisplay)
}
}
}
}
// Play audio sound
@@ -1356,6 +1402,7 @@ function handleLeave(disconnect = true) {
disconnectConnection();
connectedUser = null;
lastAppliedMediaStatus = null; // Clear stored media status
updateUsernameDisplay();
// Redirect to homepage
window.location.href = '/';
@@ -1387,6 +1434,7 @@ function handleLeave(disconnect = true) {
// Reset state
connectedUser = null;
lastAppliedMediaStatus = null; // Clear stored media status
updateUsernameDisplay();
renderUserList();
console.log('Remote user cleanup completed - ready for new connections');
public/index.html
+1
View File
@@ -100,6 +100,7 @@
<i id="remoteVideoDisabled" class="fas fa-video color-red hide"></i>
</div>
<video id="remoteVideo"></video>
<span id="remoteUsername" class="hide"></span>
</div>
<div class="row text-center">
public/style.css
+134 -27
View File
@@ -10,6 +10,12 @@
--btn-size-mobile: 40px;
--highlight-color: rgba(0, 0, 0, 0.1);
--fallback-bg: #222;
--primary-color: #007bff;
--primary-dark: #0056b3;
--username-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(24, 26, 32, 0.85));
--username-bg-hover: linear-gradient(135deg, rgba(0, 123, 255, 0.9), rgba(0, 86, 179, 0.9));
--glass-border: rgba(255, 255, 255, 0.15);
--glass-border-hover: rgba(255, 255, 255, 0.3);
}
/* Global Styles */
@@ -92,21 +98,39 @@ button {
display: none;
}
/* Session Time */
/* Session Time - Compact Design */
#sessionTime {
z-index: 4;
display: none;
position: absolute;
text-align: center;
top: 12px;
right: 15px;
padding: 4px 8px;
font-size: 0.7rem;
font-weight: 600;
color: #ffffff;
background: rgba(0, 123, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
backdrop-filter: blur(6px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
transition: all 0.2s ease;
display: flex;
align-items: center;
padding: 5px;
top: 10px;
right: 20px;
font-size: 0.9rem;
font-weight: bold;
color: var(--text-color);
background: rgba(0, 0, 0, 0.5);
border-radius: var(--border-radius);
gap: 3px;
min-width: 50px;
justify-content: center;
font-family: inherit;
}
#sessionTime::before {
content: '⏱';
font-size: 0.65rem;
}
#sessionTime:hover {
background: rgba(0, 123, 255, 1);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
/* Room */
@@ -223,6 +247,20 @@ video::-webkit-media-controls {
font-size: 14px;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
text-align: center;
}
.camera-off-overlay .username {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
color: var(--primary-color);
}
.camera-off-overlay .status {
font-size: 12px;
font-weight: 400;
opacity: 0.8;
}
/* Local Video Styles */
@@ -261,18 +299,41 @@ video::-webkit-media-controls {
border: 2px solid #ff6b35 !important; /* Orange border to indicate screen sharing */
}
#localUsername {
/* Username Labels - Enhanced UI */
/* Username Labels - Compact & Clean */
#localUsername,
#remoteUsername {
position: absolute;
bottom: 4px;
left: 8px;
color: var(--text-color);
background: rgba(0, 0, 0, 0.7);
padding: 2px 6px;
font-size: 0.75rem;
bottom: 2px;
left: 3px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
padding: 2px 4px;
font-size: 0.7rem;
font-weight: 500;
border-radius: 4px;
backdrop-filter: blur(4px);
z-index: 4;
border-radius: 3px;
z-index: 102;
transition: background 0.2s ease;
max-width: calc(100% - 6px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
backdrop-filter: blur(2px);
font-family: inherit;
}
/* Different icons for local vs remote */
#localUsername::before {
content: '🟢';
margin-right: 2px;
font-size: 0.65rem;
}
#remoteUsername::before {
content: '🟢';
margin-right: 2px;
font-size: 0.65rem;
}
/* Remote Video Styles */
@@ -342,11 +403,34 @@ video::-webkit-media-controls {
transform: scale(1.02);
}
#localUsername {
font-size: 0.65rem;
padding: 1px 4px;
bottom: 2px;
left: 4px;
#localUsername,
#remoteUsername {
font-size: 0.7rem;
padding: 2px 4px;
bottom: 1px;
left: 1px;
border-radius: 5px;
max-width: calc(100% - 12px);
}
#localUsername::before,
#remoteUsername::before {
font-size: 0.7rem;
margin-right: 2px;
}
/* Mobile Session Time */
#sessionTime {
top: 10px;
right: 10px;
padding: 6px 12px;
font-size: 0.75rem;
border-radius: 16px;
min-width: 70px;
}
#sessionTime::before {
font-size: 0.8rem;
}
#remoteVideoContainer {
@@ -468,9 +552,32 @@ video::-webkit-media-controls {
left: 10px;
}
#localUsername {
#localUsername,
#remoteUsername {
font-size: 0.65rem;
padding: 3px 6px;
border-radius: 10px;
max-width: calc(100% - 8px);
}
#localUsername::before,
#remoteUsername::before {
font-size: 0.6rem;
padding: 1px 3px;
margin-right: 1px;
}
/* Very Small Screen Session Time */
#sessionTime {
top: 8px;
right: 8px;
padding: 4px 8px;
font-size: 0.7rem;
border-radius: 14px;
min-width: 60px;
}
#sessionTime::before {
font-size: 0.7rem;
}
#remoteVideoContainer {