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

[call-me] - add media-toggles

Browse Source
This commit is contained in:
Miroslav Pejic
2026-02-14 23:58:02 +01:00
parent d693d6d302
commit 03a5b75683
18 changed files with 188 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/locales/ar.json
+2
View File
@@ -6,6 +6,8 @@
"title": "تسجيل الدخول",
"username": "أدخل اسم المستخدم",
"button": "تسجيل الدخول",
"camera": "الكاميرا",
"microphone": "الميكروفون",
"enterUsername": "يرجى إدخال اسم المستخدم"
},
"room": {
app/locales/de.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Anmelden",
"username": "Benutzernamen eingeben",
"button": "Anmelden",
"camera": "Kamera",
"microphone": "Mikrofon",
"enterUsername": "Bitte geben Sie Ihren Benutzernamen ein"
},
"room": {
app/locales/en.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Sign In",
"username": "Enter username",
"button": "Sign In",
"camera": "Camera",
"microphone": "Microphone",
"enterUsername": "Please enter your username"
},
"room": {
app/locales/es.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Iniciar Sesión",
"username": "Ingrese nombre de usuario",
"button": "Iniciar Sesión",
"camera": "Cámara",
"microphone": "Micrófono",
"enterUsername": "Por favor ingrese su nombre de usuario"
},
"room": {
app/locales/fr.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Se Connecter",
"username": "Entrez le nom d'utilisateur",
"button": "Se Connecter",
"camera": "Caméra",
"microphone": "Microphone",
"enterUsername": "Veuillez entrer votre nom d'utilisateur"
},
"room": {
app/locales/hi.json
+2
View File
@@ -6,6 +6,8 @@
"title": "साइन इन",
"username": "उपयोगकर्ता नाम दर्ज करें",
"button": "साइन इन",
"camera": "कैमरा",
"microphone": "माइक्रोफ़ोन",
"enterUsername": "कृपया अपना उपयोगकर्ता नाम दर्ज करें"
},
"room": {
app/locales/hr.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Prijava",
"username": "Unesite korisničko ime",
"button": "Prijavi se",
"camera": "Kamera",
"microphone": "Mikrofon",
"enterUsername": "Molimo unesite svoje korisničko ime"
},
"room": {
app/locales/it.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Accedi",
"username": "Inserisci nome utente",
"button": "Accedi",
"camera": "Fotocamera",
"microphone": "Microfono",
"enterUsername": "Inserisci il tuo nome utente"
},
"room": {
app/locales/ja.json
+2
View File
@@ -6,6 +6,8 @@
"title": "サインイン",
"username": "ユーザー名を入力",
"button": "サインイン",
"camera": "カメラ",
"microphone": "マイク",
"enterUsername": "ユーザー名を入力してください"
},
"room": {
app/locales/pt.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Entrar",
"username": "Digite o nome de usuário",
"button": "Entrar",
"camera": "Câmera",
"microphone": "Microfone",
"enterUsername": "Por favor, digite seu nome de usuário"
},
"room": {
app/locales/ru.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Войти",
"username": "Введите имя пользователя",
"button": "Войти",
"camera": "Камера",
"microphone": "Микрофон",
"enterUsername": "Пожалуйста, введите имя пользователя"
},
"room": {
app/locales/sr.json
+2
View File
@@ -6,6 +6,8 @@
"title": "Prijava",
"username": "Unesite korisničko ime",
"button": "Prijavi se",
"camera": "Камера",
"microphone": "Микрофон",
"enterUsername": "Molimo unesite svoje korisničko ime"
},
"room": {
app/locales/zh.json
+2
View File
@@ -6,6 +6,8 @@
"title": "登录",
"username": "请输入用户名",
"button": "登录",
"camera": "摄像头",
"microphone": "麦克风",
"enterUsername": "请输入您的用户名"
},
"room": {
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "call-me",
"version": "1.3.02",
"version": "1.3.03",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "call-me",
"version": "1.3.02",
"version": "1.3.03",
"license": "AGPLv3",
"dependencies": {
"@ngrok/ngrok": "1.7.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "call-me",
"version": "1.3.02",
"version": "1.3.03",
"description": "Your Go-To for Instant Video Calls",
"author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
"license": "AGPLv3",
public/client.js
+18
View File
@@ -19,6 +19,8 @@ const githubDiv = document.getElementById('githubDiv');
const signInPage = document.getElementById('signInPage');
const usernameIn = document.getElementById('usernameIn');
const signInBtn = document.getElementById('signInBtn');
const joinVideoToggle = document.getElementById('joinVideoToggle');
const joinAudioToggle = document.getElementById('joinAudioToggle');
const roomPage = document.getElementById('roomPage');
const exitSidebarBtn = document.getElementById('exitSidebarBtn');
const userSidebar = document.getElementById('userSidebar');
@@ -1271,6 +1273,22 @@ async function handleSignIn(data) {
await initializeDeviceSettings();
handleVideoMirror(localVideo, myStream);
// Apply initial media toggles from sign-in card
if (!joinVideoToggle.checked) {
const vt = stream.getVideoTracks()[0];
if (vt) {
vt.stop();
vt.enabled = false;
}
videoBtn.classList.add('btn-danger');
showCameraOffOverlay('local', true);
}
if (!joinAudioToggle.checked) {
const at = stream.getAudioTracks()[0];
if (at) at.enabled = false;
audioBtn.classList.add('btn-danger');
}
// Update UI based on available devices
updateUIForAvailableDevices();
public/index.html
+23
View File
@@ -78,6 +78,29 @@
required
/>
</div>
<!-- Media toggles -->
<div class="media-toggles mb-3">
<label class="media-toggle-item" for="joinAudioToggle">
<div class="media-toggle-icon">
<i class="fas fa-microphone"></i>
</div>
<span class="media-toggle-label" data-i18n="signIn.microphone">Microphone</span>
<div class="switch">
<input id="joinAudioToggle" type="checkbox" checked />
<span class="slider"></span>
</div>
</label>
<label class="media-toggle-item" for="joinVideoToggle">
<div class="media-toggle-icon">
<i class="fas fa-video"></i>
</div>
<span class="media-toggle-label" data-i18n="signIn.camera">Camera</span>
<div class="switch">
<input id="joinVideoToggle" type="checkbox" checked />
<span class="slider"></span>
</div>
</label>
</div>
<!-- Sign-in button -->
<button id="signInBtn" class="btn btn-primary" data-i18n="signIn.button">Sign In</button>
</div>
public/style.css
+118
View File
@@ -270,6 +270,124 @@ button {
text-align: center !important;
}
/* Media toggle switches on sign-in card */
.media-toggles {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
max-width: 320px;
margin: 0 auto;
}
.media-toggle-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-sm);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--glass-border);
cursor: pointer;
transition: all var(--transition-base);
user-select: none;
}
.media-toggle-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--glass-border-hover);
}
.media-toggle-item:has(input:not(:checked)) {
opacity: 0.6;
}
.media-toggle-item:has(input:not(:checked)):hover {
opacity: 0.8;
}
.media-toggle-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--border-radius-sm);
background: rgba(59, 130, 246, 0.15);
color: var(--primary-light);
font-size: var(--font-size-base);
flex-shrink: 0;
transition: all var(--transition-base);
}
.media-toggle-item:has(input:not(:checked)) .media-toggle-icon {
background: rgba(239, 68, 68, 0.15);
color: var(--danger-color);
}
.media-toggle-label {
flex: 1;
text-align: left;
color: var(--text-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: color var(--transition-base);
}
.media-toggle-item:has(input:checked) .media-toggle-label {
color: var(--text-color);
}
/* Toggle switch */
.switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch .slider {
position: absolute;
cursor: pointer;
inset: 0;
background: var(--bg-tertiary);
border: 1px solid var(--glass-border);
border-radius: 24px;
transition: var(--transition-base);
}
.switch .slider::before {
content: '';
position: absolute;
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background: var(--text-muted);
border-radius: 50%;
transition: var(--transition-base);
}
.switch input:checked + .slider {
background: var(--primary-color);
border-color: var(--primary-color);
}
.switch input:checked + .slider::before {
transform: translateX(20px);
background: #fff;
}
.switch input:focus + .slider {
box-shadow: 0 0 4px var(--primary-color);
}
/* Video Styles */
video {
width: 100%;