fab55cde1d
All checks were successful
CI/CD Pipeline / build-and-deploy (push) Successful in 29s
Viewers can type a custom name shown to the streamer instead of their Google account name. It's saved per (streamer, viewer) pair in SQLite and pre-filled on future visits to the same send link. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
98 lines
3 KiB
JavaScript
98 lines
3 KiB
JavaScript
const loginContainer = document.getElementById('login-container');
|
||
const mainSection = document.getElementById('hidden-until-login');
|
||
const userPic = document.getElementById('user-pic');
|
||
const userName = document.getElementById('user-name');
|
||
const logoutBtn = document.getElementById('logout');
|
||
const displayNameInput = document.getElementById('display-name');
|
||
const messageInput = document.getElementById('message');
|
||
const sendBtn = document.getElementById('send');
|
||
const statusEl = document.getElementById('status');
|
||
|
||
const token = location.pathname.split('/').filter(Boolean).pop();
|
||
const socket = io({ query: { role: 'sender', token } });
|
||
|
||
function showLoggedIn(user) {
|
||
loginContainer.style.display = 'none';
|
||
mainSection.style.display = 'block';
|
||
userPic.src = user.picture || '';
|
||
userName.textContent = user.name || user.email;
|
||
}
|
||
|
||
function showLoggedOut() {
|
||
loginContainer.style.display = 'block';
|
||
mainSection.style.display = 'none';
|
||
}
|
||
|
||
async function loadDisplayName() {
|
||
const res = await fetch(`/api/viewer-name?token=${encodeURIComponent(token)}`);
|
||
if (!res.ok) return;
|
||
const { name } = await res.json();
|
||
displayNameInput.value = name || '';
|
||
}
|
||
|
||
async function handleCredentialResponse(response) {
|
||
const res = await fetch('/auth/google', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ credential: response.credential }),
|
||
});
|
||
|
||
if (res.ok) {
|
||
const { user } = await res.json();
|
||
showLoggedIn(user);
|
||
loadDisplayName();
|
||
// The socket connected before login with no session cookie; reconnect so
|
||
// its handshake picks up the freshly-issued, now-authenticated cookie.
|
||
socket.disconnect();
|
||
socket.connect();
|
||
} else {
|
||
statusEl.textContent = 'Не удалось войти, попробуйте ещё раз';
|
||
}
|
||
}
|
||
|
||
async function init() {
|
||
const configRes = await fetch('/config');
|
||
const { googleClientId } = await configRes.json();
|
||
|
||
google.accounts.id.initialize({
|
||
client_id: googleClientId,
|
||
callback: handleCredentialResponse,
|
||
});
|
||
google.accounts.id.renderButton(loginContainer, { theme: 'outline', size: 'large' });
|
||
|
||
const meRes = await fetch('/me');
|
||
const { user } = await meRes.json();
|
||
if (user) {
|
||
showLoggedIn(user);
|
||
loadDisplayName();
|
||
} else {
|
||
showLoggedOut();
|
||
}
|
||
}
|
||
|
||
sendBtn.addEventListener('click', () => {
|
||
const text = messageInput.value.trim();
|
||
if (!text) return;
|
||
const name = displayNameInput.value.trim();
|
||
socket.emit('send_message', { token, text, name });
|
||
messageInput.value = '';
|
||
statusEl.textContent = 'Отправлено';
|
||
setTimeout(() => { statusEl.textContent = ''; }, 1500);
|
||
});
|
||
|
||
messageInput.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
||
sendBtn.click();
|
||
}
|
||
});
|
||
|
||
socket.on('send_error', (msg) => {
|
||
statusEl.textContent = 'Ошибка: ' + msg;
|
||
});
|
||
|
||
logoutBtn.addEventListener('click', async () => {
|
||
await fetch('/auth/logout', { method: 'POST' });
|
||
showLoggedOut();
|
||
});
|
||
|
||
init();
|