voice chat ui improvements
- better resize - better grid styling
This commit is contained in:
parent
bc91533262
commit
135fbf23ca
18 changed files with 1003 additions and 235 deletions
|
|
@ -7,8 +7,8 @@ android {
|
|||
applicationId "olcxja.miarven"
|
||||
minSdkVersion rootProject.ext.minSdkVersion
|
||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||
versionCode 1
|
||||
versionName "0.1.0"
|
||||
versionCode 2
|
||||
versionName "0.1.1"
|
||||
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
||||
aaptOptions {
|
||||
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
||||
|
|
|
|||
|
|
@ -290,5 +290,24 @@
|
|||
"message.delete.failed": "Failed to delete meow",
|
||||
"message.react.failed": "Failed to react to meow",
|
||||
"message.send.failed": "Failed to send meow",
|
||||
"owner.transferred": "Purrship transferred successfully"
|
||||
"owner.transferred": "Purrship transferred successfully",
|
||||
"title.voice.chat": "voice chat :3",
|
||||
"status.voice.connecting": "connecting... :3",
|
||||
"status.voice.connected": "connected :3",
|
||||
"action.call.mute": "mute microphone",
|
||||
"action.call.camera": "camera",
|
||||
"action.call.screen": "share screen",
|
||||
"action.call.disconnect": "disconnect :3",
|
||||
"action.call.join": "join :3",
|
||||
"action.call.decline": "decline :c",
|
||||
"title.incoming.call": "incoming voice chat :3",
|
||||
"desc.call.in.chat": "{0} in chat :3",
|
||||
"label.user.volume": "user volume",
|
||||
"label.stream.volume": "screen volume",
|
||||
"error.call.unsupported": "no permission or not supported: {0} :c",
|
||||
"error.call.camera": "camera error: {0} :c",
|
||||
"error.call.screen": "screen share error: {0} :c",
|
||||
"error.call.screen.unsupported": "ur browser doesn't support screen sharing :c",
|
||||
"label.stream.cam": "cam",
|
||||
"label.stream.screen": "screen"
|
||||
}
|
||||
|
|
@ -299,5 +299,24 @@
|
|||
"message.delete.failed": "Failed to delete message",
|
||||
"message.react.failed": "Failed to react to message",
|
||||
"message.send.failed": "Failed to send message",
|
||||
"owner.transferred": "Ownership transferred successfully"
|
||||
"owner.transferred": "Ownership transferred successfully",
|
||||
"title.voice.chat": "Voice Chat",
|
||||
"status.voice.connecting": "Connecting...",
|
||||
"status.voice.connected": "Connected",
|
||||
"action.call.mute": "Mute Microphone",
|
||||
"action.call.camera": "Camera",
|
||||
"action.call.screen": "Share Screen",
|
||||
"action.call.disconnect": "Disconnect",
|
||||
"action.call.join": "Join",
|
||||
"action.call.decline": "Decline",
|
||||
"title.incoming.call": "Incoming Voice Chat",
|
||||
"desc.call.in.chat": "{0} in chat",
|
||||
"label.user.volume": "User Volume",
|
||||
"label.stream.volume": "Screen Volume",
|
||||
"error.call.unsupported": "No permission or feature not supported: {0}",
|
||||
"error.call.camera": "Camera error: {0}",
|
||||
"error.call.screen": "Screen share error: {0}",
|
||||
"error.call.screen.unsupported": "Screen sharing is not supported on this browser.",
|
||||
"label.stream.cam": "Cam",
|
||||
"label.stream.screen": "Screen"
|
||||
}
|
||||
|
|
@ -299,5 +299,24 @@
|
|||
"message.delete.failed": "Nie udało się usunąć wiadomości",
|
||||
"message.react.failed": "Nie udało się dodać reakcji",
|
||||
"message.send.failed": "Nie udało się wysłać wiadomości",
|
||||
"owner.transferred": "Własność przekazana pomyślnie"
|
||||
"owner.transferred": "Własność przekazana pomyślnie",
|
||||
"title.voice.chat": "Czat głosowy",
|
||||
"status.voice.connecting": "Łączenie...",
|
||||
"status.voice.connected": "Połączono",
|
||||
"action.call.mute": "Wycisz mikrofon",
|
||||
"action.call.camera": "Kamera",
|
||||
"action.call.screen": "Udostępnij ekran",
|
||||
"action.call.disconnect": "Rozłącz",
|
||||
"action.call.join": "Dołącz",
|
||||
"action.call.decline": "Odrzuć",
|
||||
"title.incoming.call": "Połączenie głosowe",
|
||||
"desc.call.in.chat": "{0} w rozmowie",
|
||||
"label.user.volume": "Głośność użytkownika",
|
||||
"label.stream.volume": "Głośność ekranu",
|
||||
"error.call.unsupported": "Brak uprawnień lub funkcja nieobsługiwana: {0}",
|
||||
"error.call.camera": "Błąd kamery: {0}",
|
||||
"error.call.screen": "Błąd udostępniania ekranu: {0}",
|
||||
"error.call.screen.unsupported": "Udostępnianie ekranu nie jest obsługiwane w tej przeglądarce.",
|
||||
"label.stream.cam": "Kamera",
|
||||
"label.stream.screen": "Ekran"
|
||||
}
|
||||
|
|
@ -1298,7 +1298,7 @@ input:checked + .toggle-slider:before {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
touch-action: none;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem) scale(0.92);
|
||||
|
|
@ -1329,6 +1329,7 @@ input:checked + .toggle-slider:before {
|
|||
font-weight: bold;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: none;
|
||||
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
#voice-header:active {
|
||||
|
|
@ -1347,26 +1348,66 @@ input:checked + .toggle-slider:before {
|
|||
}
|
||||
|
||||
#voice-status {
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--darker-text-color);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
padding: 0.15rem 0.6rem;
|
||||
border-radius: 50rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
#voice-status .status-dot {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--darker-text-color);
|
||||
}
|
||||
#voice-status.connecting .status-dot {
|
||||
animation: voice-dot-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
#voice-status.connected {
|
||||
opacity: 1;
|
||||
}
|
||||
#voice-status.connected .status-dot {
|
||||
background: var(--big-green);
|
||||
box-shadow: 0 0 0.35rem rgba(120, 200, 120, 0.45);
|
||||
}
|
||||
@keyframes voice-dot-pulse {
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
||||
#voice-users {
|
||||
padding: 0.9375rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.voice-resize-handle {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
touch-action: none;
|
||||
}
|
||||
.voice-resize-n { top: 0; left: 0.6rem; right: 0.6rem; height: 0.45rem; cursor: ns-resize; }
|
||||
.voice-resize-s { bottom: 0; left: 0.6rem; right: 0.6rem; height: 0.45rem; cursor: ns-resize; }
|
||||
.voice-resize-e { right: 0; top: 0.6rem; bottom: 0.6rem; width: 0.45rem; cursor: ew-resize; }
|
||||
.voice-resize-w { left: 0; top: 0.6rem; bottom: 0.6rem; width: 0.45rem; cursor: ew-resize; }
|
||||
.voice-resize-ne, .voice-resize-nw, .voice-resize-se, .voice-resize-sw { width: 0.8rem; height: 0.8rem; }
|
||||
.voice-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
|
||||
.voice-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
|
||||
.voice-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
|
||||
.voice-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
|
||||
|
||||
.voice-tile {
|
||||
position: relative;
|
||||
width: var(--voice-tile-w, 9rem);
|
||||
height: var(--voice-tile-h, 8rem);
|
||||
background: var(--light-border-color);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -1375,18 +1416,17 @@ input:checked + .toggle-slider:before {
|
|||
cursor: pointer;
|
||||
border: var(--border-width) solid transparent;
|
||||
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
|
||||
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
transition: border-color 0.15s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.voice-tile:hover {
|
||||
transform: translateY(-0.125rem);
|
||||
.voice-tile.tile-enter {
|
||||
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.voice-tile video,
|
||||
.voice-tile canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
}
|
||||
@keyframes voice-tile-in {
|
||||
|
|
@ -1502,9 +1542,12 @@ input:checked + .toggle-slider:before {
|
|||
/* Incoming Call Popup */
|
||||
#incoming-call-popup {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 3rem));
|
||||
top: calc(env(safe-area-inset-top, 0rem) + 4.5rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-inline: auto;
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 2rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
|
@ -1518,39 +1561,22 @@ input:checked + .toggle-slider:before {
|
|||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
opacity 0.2s ease,
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#incoming-call-popup.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
#incoming-call-popup.hide {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 2rem));
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.incoming-call-icon {
|
||||
.incoming-call-avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--big-green);
|
||||
color: white !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: voice-call-pulse 1.5s ease-out infinite;
|
||||
}
|
||||
.incoming-call-icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
@keyframes voice-call-pulse {
|
||||
0% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0.45); }
|
||||
70% { box-shadow: 0 0 0 0.8rem hsla(120, 60%, 55%, 0); }
|
||||
100% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0); }
|
||||
border-radius: 0.65rem;
|
||||
border: var(--border-width) solid rgba(255, 255, 255, 0.2);
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.incoming-call-info {
|
||||
|
|
@ -1558,8 +1584,15 @@ input:checked + .toggle-slider:before {
|
|||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
.incoming-call-title {
|
||||
.incoming-call-name,
|
||||
.incoming-call-subtitle {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.incoming-call-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-color);
|
||||
|
|
@ -1603,15 +1636,13 @@ input:checked + .toggle-slider:before {
|
|||
color: white !important;
|
||||
}
|
||||
.voice-call-btn.decline {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
border: var(--border-width) solid var(--light-border-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
.voice-call-btn.accept:hover {
|
||||
filter: brightness(1.12);
|
||||
background: var(--big-red) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
}
|
||||
.voice-call-btn.accept:hover,
|
||||
.voice-call-btn.decline:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
.voice-call-btn:active, .voice-call-btn.is-pressed {
|
||||
transform: var(--press-scale);
|
||||
|
|
@ -1672,13 +1703,16 @@ input:checked + .toggle-slider:before {
|
|||
|
||||
@media (max-width: 55rem) {
|
||||
#voice-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
height: 60vh;
|
||||
left: 1rem;
|
||||
right: unset;
|
||||
width: 16rem;
|
||||
height: 17rem;
|
||||
min-width: 13rem;
|
||||
min-height: 12rem;
|
||||
}
|
||||
#incoming-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
box-sizing: border-box;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.6rem 0.6rem 0.8rem;
|
||||
}
|
||||
.voice-call-btn {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
const CLIENT_VERSION = "0.1.0";
|
||||
const CLIENT_VERSION = "0.1.1";
|
||||
|
|
|
|||
|
|
@ -17,6 +17,42 @@ let camControl = null, screenControl = null;
|
|||
|
||||
const SPEAKING_HANGOVER_MS = 400;
|
||||
|
||||
let voiceDragState = false;
|
||||
let voiceResizeAbort = null;
|
||||
|
||||
function clampVoiceWindowToViewport(popupEl) {
|
||||
const r = popupEl.getBoundingClientRect();
|
||||
const W = window.innerWidth, H = window.innerHeight;
|
||||
const w = Math.min(r.width, W);
|
||||
const h = Math.min(r.height, H);
|
||||
const l = Math.min(Math.max(r.left, 0), W - w);
|
||||
const t = Math.min(Math.max(r.top, 0), H - h);
|
||||
if (l !== r.left || t !== r.top || w !== r.width || h !== r.height) {
|
||||
popupEl.style.right = "auto";
|
||||
popupEl.style.bottom = "auto";
|
||||
popupEl.style.width = w + "px";
|
||||
popupEl.style.height = h + "px";
|
||||
popupEl.style.left = l + "px";
|
||||
popupEl.style.top = t + "px";
|
||||
}
|
||||
}
|
||||
|
||||
let voiceVolumeState = {};
|
||||
|
||||
function getStoredVolume(type, clientId) {
|
||||
let v = voiceVolumeState[`${type}:${clientId}`];
|
||||
return v === undefined ? 100 : v;
|
||||
}
|
||||
|
||||
function setVoiceStatus(state) {
|
||||
let el = document.getElementById("voice-status");
|
||||
if (!el) return;
|
||||
el.classList.toggle("connected", state === "connected");
|
||||
el.classList.toggle("connecting", state !== "connected");
|
||||
let textEl = el.querySelector(".voice-status-text");
|
||||
if (textEl) textEl.innerText = processBlah(state === "connected" ? "status.voice.connected" : "status.voice.connecting");
|
||||
}
|
||||
|
||||
function setTileSpeaking(clientId, speaking) {
|
||||
let tile = document.getElementById(`voice-tile-${clientId}`);
|
||||
if (!tile) return;
|
||||
|
|
@ -171,7 +207,7 @@ async function initiateVoiceCall(roomId = null) {
|
|||
async function startVoiceSession(serverUrl) {
|
||||
showVoiceUI();
|
||||
updateVoiceUIUsers();
|
||||
document.getElementById("voice-status").innerText = "Connecting...";
|
||||
setVoiceStatus("connecting");
|
||||
|
||||
try {
|
||||
const wsUrl = new URL(serverUrl);
|
||||
|
|
@ -186,8 +222,7 @@ async function startVoiceSession(serverUrl) {
|
|||
currentVoiceWs.binaryType = 'arraybuffer';
|
||||
|
||||
currentVoiceWs.onopen = async () => {
|
||||
document.getElementById("voice-status").innerText = "Connected";
|
||||
document.getElementById("voice-status").style.color = "var(--big-green)";
|
||||
setVoiceStatus("connected");
|
||||
let btn = document.getElementById("voice-btn-mic");
|
||||
if (btn) {
|
||||
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
||||
|
|
@ -449,25 +484,47 @@ function handleCallUpdate(data) {
|
|||
}
|
||||
}
|
||||
|
||||
async function resolveCallerInfo(roomId) {
|
||||
let name = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
||||
if (name && name.includes(':')) name = name.split(':')[0];
|
||||
if (!name && window.fetchAsync) {
|
||||
try {
|
||||
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${roomId}`);
|
||||
if (fetched && !fetched.startsWith("error:")) {
|
||||
name = fetched.includes(':') ? fetched.split(':')[0] : fetched;
|
||||
if (window.dmUsernameCache) window.dmUsernameCache[roomId] = name;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
||||
if (!pfpUrl && window.getAvatarUrl) {
|
||||
try { pfpUrl = await window.getAvatarUrl(roomId, name || "User"); } catch (e) {}
|
||||
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[roomId] = pfpUrl;
|
||||
}
|
||||
return { name: name || processBlah("title.unknown"), pfpUrl };
|
||||
}
|
||||
|
||||
function showIncomingCallUI(roomId) {
|
||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
|
||||
|
||||
let cachedName = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
||||
if (cachedName && cachedName.includes(':')) cachedName = cachedName.split(':')[0];
|
||||
let cachedPfp = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
||||
|
||||
let incomingUi = document.createElement("div");
|
||||
incomingUi.id = "incoming-call-popup";
|
||||
incomingUi.innerHTML = `
|
||||
<div class="incoming-call-icon">
|
||||
${ICONS.call({width: "1.25rem", height: "1.25rem"})}
|
||||
</div>
|
||||
<img class="incoming-call-avatar" src="${cachedPfp || "assets/default_avatar.png"}" alt="">
|
||||
<div class="incoming-call-info">
|
||||
<span class="incoming-call-title">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
|
||||
<span class="incoming-call-subtitle">${voiceActiveUsers.length} in chat</span>
|
||||
<span class="incoming-call-name">${cachedName || "..."}</span>
|
||||
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${voiceActiveUsers.length}`)}</span>
|
||||
</div>
|
||||
<div class="incoming-call-actions">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} Join
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
||||
</button>
|
||||
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||
${ICONS.close({width: "1rem", height: "1rem"})} Decline
|
||||
${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -475,6 +532,14 @@ function showIncomingCallUI(roomId) {
|
|||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => incomingUi.classList.add("show"));
|
||||
});
|
||||
|
||||
resolveCallerInfo(roomId).then(({name, pfpUrl}) => {
|
||||
if (!document.body.contains(incomingUi)) return;
|
||||
let nameEl = incomingUi.querySelector(".incoming-call-name");
|
||||
let avatarEl = incomingUi.querySelector(".incoming-call-avatar");
|
||||
if (nameEl) nameEl.innerText = name;
|
||||
if (avatarEl && pfpUrl) avatarEl.src = pfpUrl;
|
||||
});
|
||||
}
|
||||
|
||||
function dismissIncomingCall() {
|
||||
|
|
@ -482,7 +547,7 @@ function dismissIncomingCall() {
|
|||
if (!el || el.classList.contains("hide")) return;
|
||||
el.classList.remove("show");
|
||||
el.classList.add("hide");
|
||||
setTimeout(() => el.remove(), 400);
|
||||
setTimeout(() => el.remove(), 300);
|
||||
}
|
||||
|
||||
function joinIncomingCall(roomId) {
|
||||
|
|
@ -545,25 +610,28 @@ function showVoiceUI() {
|
|||
<div id="voice-header">
|
||||
<div class="voice-title">
|
||||
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
||||
<span>Voice Chat</span>
|
||||
<span>${processBlah("title.voice.chat")}</span>
|
||||
</div>
|
||||
<div id="voice-status" class="connecting">
|
||||
<span class="status-dot"></span>
|
||||
<span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
|
||||
</div>
|
||||
<div id="voice-status">Connecting...</div>
|
||||
</div>
|
||||
<div id="voice-users"></div>
|
||||
<div class="voice-mic-meter">
|
||||
<div id="voice-mic-level"></div>
|
||||
</div>
|
||||
<div id="voice-footer" class="voice-controls">
|
||||
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="Mute Microphone">
|
||||
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="${processBlah("action.call.mute")}">
|
||||
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera">
|
||||
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="${processBlah("action.call.camera")}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
|
||||
</button>
|
||||
<button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="Share Screen">
|
||||
<button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="${processBlah("action.call.screen")}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
||||
</button>
|
||||
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="Disconnect">
|
||||
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="${processBlah("action.call.disconnect")}">
|
||||
${ICONS.call({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -575,11 +643,12 @@ function showVoiceUI() {
|
|||
});
|
||||
|
||||
let header = document.getElementById("voice-header");
|
||||
let isDragging = false;
|
||||
let startX, startY, initialLeft, initialTop;
|
||||
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
isDragging = true;
|
||||
header.addEventListener('pointerdown', (e) => {
|
||||
if (e.button !== undefined && e.button !== 0) return;
|
||||
voiceDragState = true;
|
||||
try { header.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
let rect = voiceUiContainer.getBoundingClientRect();
|
||||
initialLeft = rect.left;
|
||||
initialTop = rect.top;
|
||||
|
|
@ -589,17 +658,149 @@ function showVoiceUI() {
|
|||
voiceUiContainer.style.bottom = "auto";
|
||||
voiceUiContainer.style.left = initialLeft + "px";
|
||||
voiceUiContainer.style.top = initialTop + "px";
|
||||
clampVoiceWindowToViewport(voiceUiContainer);
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
header.addEventListener('pointermove', (e) => {
|
||||
if (!voiceDragState) return;
|
||||
let dx = e.clientX - startX;
|
||||
let dy = e.clientY - startY;
|
||||
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
||||
voiceUiContainer.style.top = (initialTop + dy) + "px";
|
||||
clampVoiceWindowToViewport(voiceUiContainer);
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => { isDragging = false; });
|
||||
let stopDrag = () => { voiceDragState = false; };
|
||||
header.addEventListener('pointerup', stopDrag);
|
||||
header.addEventListener('pointercancel', stopDrag);
|
||||
|
||||
ensureVoiceGridObserver();
|
||||
|
||||
setupVoiceWindowResize();
|
||||
}
|
||||
|
||||
function setupVoiceWindowResize() {
|
||||
const popup = voiceUiContainer;
|
||||
if (!popup || popup.dataset.resizeInit) return;
|
||||
popup.dataset.resizeInit = "1";
|
||||
|
||||
const minW = () => parseFloat(getComputedStyle(popup).minWidth) || 200;
|
||||
const minH = () => parseFloat(getComputedStyle(popup).minHeight) || 160;
|
||||
|
||||
const applySize = (l, t, w, h) => {
|
||||
const W = window.innerWidth, H = window.innerHeight;
|
||||
w = Math.round(Math.min(Math.max(w, minW()), W));
|
||||
h = Math.round(Math.min(Math.max(h, minH()), H));
|
||||
l = Math.round(Math.min(Math.max(l, 0), W - w));
|
||||
t = Math.round(Math.min(Math.max(t, 0), H - h));
|
||||
popup.style.right = "auto";
|
||||
popup.style.bottom = "auto";
|
||||
popup.style.width = w + "px";
|
||||
popup.style.height = h + "px";
|
||||
popup.style.left = l + "px";
|
||||
popup.style.top = t + "px";
|
||||
};
|
||||
|
||||
let edgeResizing = false;
|
||||
|
||||
["n", "s", "e", "w", "ne", "nw", "se", "sw"].forEach((dir) => {
|
||||
const handle = document.createElement("div");
|
||||
handle.className = `voice-resize-handle voice-resize-${dir}`;
|
||||
popup.appendChild(handle);
|
||||
|
||||
handle.addEventListener("pointerdown", (e) => {
|
||||
if (e.button !== undefined && e.button !== 0) return;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
edgeResizing = true;
|
||||
const sx = e.clientX, sy = e.clientY;
|
||||
const rect = popup.getBoundingClientRect();
|
||||
const sw = rect.width, sh = rect.height, sl = rect.left, st = rect.top;
|
||||
try { handle.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
|
||||
const onMove = (ev) => {
|
||||
const dx = ev.clientX - sx, dy = ev.clientY - sy;
|
||||
let w = sw, h = sh, l = sl, t = st;
|
||||
if (dir.includes("e")) w = sw + dx;
|
||||
if (dir.includes("s")) h = sh + dy;
|
||||
if (dir.includes("w")) {
|
||||
w = sw - dx;
|
||||
l = sl + (sw - w);
|
||||
}
|
||||
if (dir.includes("n")) {
|
||||
h = sh - dy;
|
||||
t = st + (sh - h);
|
||||
}
|
||||
applySize(l, t, w, h);
|
||||
};
|
||||
const onUp = () => {
|
||||
edgeResizing = false;
|
||||
handle.removeEventListener("pointermove", onMove);
|
||||
handle.removeEventListener("pointerup", onUp);
|
||||
handle.removeEventListener("pointercancel", onUp);
|
||||
};
|
||||
handle.addEventListener("pointermove", onMove);
|
||||
handle.addEventListener("pointerup", onUp);
|
||||
handle.addEventListener("pointercancel", onUp);
|
||||
});
|
||||
});
|
||||
|
||||
// pinch-to-resize (dwa palce jak zoom)
|
||||
const pointers = new Map();
|
||||
let pinch = null;
|
||||
let suppressClick = false;
|
||||
|
||||
popup.addEventListener("pointerdown", (e) => {
|
||||
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pointers.size === 2 && !pinch && !voiceDragState && !edgeResizing) {
|
||||
const [a, b] = [...pointers.values()];
|
||||
const rect = popup.getBoundingClientRect();
|
||||
pinch = {
|
||||
dist: Math.max(20, Math.hypot(a.x - b.x, a.y - b.y)),
|
||||
w: rect.width,
|
||||
h: rect.height
|
||||
};
|
||||
suppressClick = true;
|
||||
}
|
||||
if (pointers.size >= 2 || pinch) {
|
||||
try { popup.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
}
|
||||
});
|
||||
|
||||
popup.addEventListener("pointermove", (e) => {
|
||||
if (!pointers.has(e.pointerId)) return;
|
||||
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pointers.size === 2 && pinch) {
|
||||
const [a, b] = [...pointers.values()];
|
||||
const scale = Math.max(0.05, Math.hypot(a.x - b.x, a.y - b.y)) / pinch.dist;
|
||||
const rect = popup.getBoundingClientRect();
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
applySize(cx - pinch.w * scale / 2, cy - pinch.h * scale / 2, pinch.w * scale, pinch.h * scale);
|
||||
}
|
||||
});
|
||||
|
||||
const releasePointer = (e) => {
|
||||
pointers.delete(e.pointerId);
|
||||
if (pointers.size < 2) pinch = null;
|
||||
if (pointers.size === 0) setTimeout(() => { suppressClick = false; }, 250);
|
||||
};
|
||||
popup.addEventListener("pointerup", releasePointer);
|
||||
popup.addEventListener("pointercancel", releasePointer);
|
||||
|
||||
popup.addEventListener("click", (e) => {
|
||||
if (suppressClick) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
suppressClick = false;
|
||||
}
|
||||
}, true);
|
||||
|
||||
if (voiceResizeAbort) voiceResizeAbort.abort();
|
||||
voiceResizeAbort = new AbortController();
|
||||
window.addEventListener("resize", () => {
|
||||
clampVoiceWindowToViewport(popup);
|
||||
}, { signal: voiceResizeAbort.signal });
|
||||
}
|
||||
|
||||
function updateVoiceUIUsers() {
|
||||
|
|
@ -610,9 +811,10 @@ function updateVoiceUIUsers() {
|
|||
let div = document.getElementById(`voice-tile-${u}`);
|
||||
if (!div) {
|
||||
div = document.createElement("div");
|
||||
div.className = "voice-tile";
|
||||
div.className = "voice-tile tile-enter";
|
||||
div.id = `voice-tile-${u}`;
|
||||
div.onclick = (e) => showVoiceUserSettings(u, e);
|
||||
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
||||
|
|
@ -670,8 +872,10 @@ function updateVoiceUIUsers() {
|
|||
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||
if (!div) {
|
||||
div = document.createElement("div");
|
||||
div.className = "voice-tile";
|
||||
div.className = "voice-tile tile-enter";
|
||||
div.id = `voice-tile-stream-${decoderId}`;
|
||||
div.onclick = (e) => showVoiceUserSettings(clientId, e, true);
|
||||
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||
|
||||
let mediaEl = streamData.canvas || streamData.video;
|
||||
if (mediaEl) {
|
||||
|
|
@ -689,7 +893,7 @@ function updateVoiceUIUsers() {
|
|||
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
||||
|
||||
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${type == '1' ? 'Cam' : 'Screen'})`;
|
||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen")})`;
|
||||
}
|
||||
|
||||
Array.from(container.children).forEach(child => {
|
||||
|
|
@ -700,23 +904,107 @@ function updateVoiceUIUsers() {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
let orderedTiles = [];
|
||||
for (let u of voiceActiveUsers) {
|
||||
let userTile = document.getElementById(`voice-tile-${u}`);
|
||||
if (userTile) orderedTiles.push(userTile);
|
||||
for (let decoderId in remoteVideos) {
|
||||
if (decoderId.split('-')[0] === u) {
|
||||
let streamTile = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||
if (streamTile) orderedTiles.push(streamTile);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let tile of orderedTiles) {
|
||||
container.appendChild(tile);
|
||||
}
|
||||
|
||||
relayoutVoiceTiles();
|
||||
}
|
||||
|
||||
function showVoiceUserSettings(clientId, e) {
|
||||
let voiceGridRO = null;
|
||||
|
||||
function ensureVoiceGridObserver() {
|
||||
let container = document.getElementById("voice-users");
|
||||
if (!container || !container.isConnected || container.dataset.roInit) return;
|
||||
container.dataset.roInit = "1";
|
||||
if (!voiceGridRO) {
|
||||
voiceGridRO = new ResizeObserver(() => relayoutVoiceTiles());
|
||||
}
|
||||
voiceGridRO.observe(container);
|
||||
}
|
||||
|
||||
function relayoutVoiceTiles() {
|
||||
let container = document.getElementById("voice-users");
|
||||
if (!container || !container.isConnected) return;
|
||||
|
||||
const tiles = Array.from(container.children).filter(el => el.classList.contains("voice-tile"));
|
||||
const n = tiles.length;
|
||||
if (!n) return;
|
||||
|
||||
const rootFs = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const cs = getComputedStyle(container);
|
||||
const innerW = container.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
|
||||
const innerH = container.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
|
||||
const minCol = 6.25 * rootFs;
|
||||
const minRow = 7 * rootFs;
|
||||
const gap = 0.75 * rootFs;
|
||||
|
||||
const maxCols = Math.max(1, Math.floor((innerW + gap) / (minCol + gap)));
|
||||
const cols = Math.min(n, maxCols);
|
||||
const rows = Math.ceil(n / cols);
|
||||
const w = Math.floor((innerW - gap * (cols - 1)) / cols);
|
||||
const h = Math.floor(Math.max(minRow, (innerH - gap * (rows - 1)) / rows));
|
||||
|
||||
const sig = `${n}:${cols}:${w}x${h}`;
|
||||
if (container.dataset.layoutSig === sig) return;
|
||||
container.dataset.layoutSig = sig;
|
||||
|
||||
container.style.setProperty("--voice-tile-w", w + "px");
|
||||
container.style.setProperty("--voice-tile-h", h + "px");
|
||||
}
|
||||
|
||||
let voiceSettingsState = null;
|
||||
|
||||
function hideVoiceUserSettings() {
|
||||
let popup = document.getElementById("voice-user-settings");
|
||||
if (popup) popup.remove();
|
||||
voiceSettingsState = null;
|
||||
document.removeEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||
}
|
||||
|
||||
function closeVoiceUserSettingsOnOutsideClick(ev) {
|
||||
let popup = document.getElementById("voice-user-settings");
|
||||
if (!popup) {
|
||||
hideVoiceUserSettings();
|
||||
return;
|
||||
}
|
||||
if (!popup.contains(ev.target)) hideVoiceUserSettings();
|
||||
}
|
||||
|
||||
function showVoiceUserSettings(clientId, e, isStream = false) {
|
||||
e.stopPropagation();
|
||||
let existing = document.getElementById("voice-user-settings");
|
||||
if (existing) existing.remove();
|
||||
|
||||
if (voiceSettingsState && voiceSettingsState.clientId === clientId && voiceSettingsState.isStream === isStream) {
|
||||
hideVoiceUserSettings();
|
||||
return;
|
||||
}
|
||||
hideVoiceUserSettings();
|
||||
|
||||
voiceSettingsState = { clientId, isStream };
|
||||
|
||||
let popup = document.createElement("div");
|
||||
popup.id = "voice-user-settings";
|
||||
popup.innerHTML = `
|
||||
popup.innerHTML = isStream ? `
|
||||
<div class="voice-setting-row">
|
||||
<label>Mic Vol <span id="val-mic-${clientId}">100%</span></label>
|
||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'mic')">
|
||||
<label>${processBlah("label.stream.volume")} <span id="val-screen-${clientId}">${getStoredVolume('screen', clientId)}%</span></label>
|
||||
<input type="range" min="0" max="200" value="${getStoredVolume('screen', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||
</div>
|
||||
` : `
|
||||
<div class="voice-setting-row">
|
||||
<label>Stream Vol <span id="val-screen-${clientId}">100%</span></label>
|
||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||
<label>${processBlah("label.user.volume")} <span id="val-vol-${clientId}">${getStoredVolume('vol', clientId)}%</span></label>
|
||||
<input type="range" min="0" max="200" value="${getStoredVolume('vol', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'vol')">
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -732,16 +1020,11 @@ function showVoiceUserSettings(clientId, e) {
|
|||
requestAnimationFrame(() => popup.classList.add("open"));
|
||||
});
|
||||
|
||||
const closePopup = (ev) => {
|
||||
if (!popup.contains(ev.target)) {
|
||||
popup.remove();
|
||||
document.removeEventListener('mousedown', closePopup);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener('mousedown', closePopup), 10);
|
||||
document.addEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||
}
|
||||
|
||||
window.updateVoiceVol = function(clientId, val, type) {
|
||||
voiceVolumeState[`${type}:${clientId}`] = val;
|
||||
let el = document.getElementById(`val-${type}-${clientId}`);
|
||||
if (el) el.innerText = val + '%';
|
||||
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
||||
|
|
@ -817,6 +1100,16 @@ function endVoiceSession() {
|
|||
|
||||
clearAllSpeaking();
|
||||
|
||||
if (voiceResizeAbort) {
|
||||
voiceResizeAbort.abort();
|
||||
voiceResizeAbort = null;
|
||||
}
|
||||
|
||||
if (voiceGridRO) {
|
||||
voiceGridRO.disconnect();
|
||||
voiceGridRO = null;
|
||||
}
|
||||
|
||||
if (voiceUiContainer) {
|
||||
let popupEl = voiceUiContainer;
|
||||
voiceUiContainer = null;
|
||||
|
|
@ -936,7 +1229,7 @@ async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
|
|||
} else if (typeId === 1) { camControl = null; }
|
||||
};
|
||||
return { stop: stopFunction };
|
||||
} catch (e) { console.error(e); alert(`No permission or feature not supported: ${typeLabel}`); return null; }
|
||||
} catch (e) { console.error(e); alert(processBlah(`:error.call.unsupported:${typeLabel}`)); return null; }
|
||||
}
|
||||
|
||||
function toggleVoiceCam() {
|
||||
|
|
@ -946,7 +1239,7 @@ function toggleVoiceCam() {
|
|||
} else {
|
||||
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
||||
startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
|
||||
}).catch(err => alert("Camera error: " + err.message));
|
||||
}).catch(err => alert(processBlah(`:error.call.camera:${err.message}`)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -955,11 +1248,11 @@ function toggleVoiceScreen() {
|
|||
if (screenControl) {
|
||||
screenControl.stop();
|
||||
} else {
|
||||
if (!navigator.mediaDevices.getDisplayMedia) { alert("Screen sharing is not supported on this browser."); return; }
|
||||
if (!navigator.mediaDevices.getDisplayMedia) { alert(processBlah("error.call.screen.unsupported")); return; }
|
||||
navigator.mediaDevices.getDisplayMedia({
|
||||
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
||||
}).then(stream => {
|
||||
startHardwareVideo(btn, Promise.resolve(stream), "Screen", 2).then(ctrl => screenControl = ctrl);
|
||||
}).catch(err => alert("Screen error: " + err.message));
|
||||
}).catch(err => alert(processBlah(`:error.call.screen:${err.message}`)));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Miarven",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"description": "An Amazing Capacitor App",
|
||||
"author": {
|
||||
"name": "",
|
||||
|
|
|
|||
BIN
icons/icon.png
BIN
icons/icon.png
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "olcxja.miarven",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"description": "Larpix client",
|
||||
"license": "AGPL-3.0",
|
||||
"author": "olcxja's softworks",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"versionCode": 1,
|
||||
"versionName": "0.1.0",
|
||||
"npmVersion": "0.1.0"
|
||||
"versionCode": 2,
|
||||
"versionName": "0.1.1",
|
||||
"npmVersion": "0.1.1"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -290,5 +290,24 @@
|
|||
"message.delete.failed": "Failed to delete meow",
|
||||
"message.react.failed": "Failed to react to meow",
|
||||
"message.send.failed": "Failed to send meow",
|
||||
"owner.transferred": "Purrship transferred successfully"
|
||||
"owner.transferred": "Purrship transferred successfully",
|
||||
"title.voice.chat": "voice chat :3",
|
||||
"status.voice.connecting": "connecting... :3",
|
||||
"status.voice.connected": "connected :3",
|
||||
"action.call.mute": "mute microphone",
|
||||
"action.call.camera": "camera",
|
||||
"action.call.screen": "share screen",
|
||||
"action.call.disconnect": "disconnect :3",
|
||||
"action.call.join": "join :3",
|
||||
"action.call.decline": "decline :c",
|
||||
"title.incoming.call": "incoming voice chat :3",
|
||||
"desc.call.in.chat": "{0} in chat :3",
|
||||
"label.user.volume": "user volume",
|
||||
"label.stream.volume": "screen volume",
|
||||
"error.call.unsupported": "no permission or not supported: {0} :c",
|
||||
"error.call.camera": "camera error: {0} :c",
|
||||
"error.call.screen": "screen share error: {0} :c",
|
||||
"error.call.screen.unsupported": "ur browser doesn't support screen sharing :c",
|
||||
"label.stream.cam": "cam",
|
||||
"label.stream.screen": "screen"
|
||||
}
|
||||
|
|
@ -299,5 +299,24 @@
|
|||
"message.delete.failed": "Failed to delete message",
|
||||
"message.react.failed": "Failed to react to message",
|
||||
"message.send.failed": "Failed to send message",
|
||||
"owner.transferred": "Ownership transferred successfully"
|
||||
"owner.transferred": "Ownership transferred successfully",
|
||||
"title.voice.chat": "Voice Chat",
|
||||
"status.voice.connecting": "Connecting...",
|
||||
"status.voice.connected": "Connected",
|
||||
"action.call.mute": "Mute Microphone",
|
||||
"action.call.camera": "Camera",
|
||||
"action.call.screen": "Share Screen",
|
||||
"action.call.disconnect": "Disconnect",
|
||||
"action.call.join": "Join",
|
||||
"action.call.decline": "Decline",
|
||||
"title.incoming.call": "Incoming Voice Chat",
|
||||
"desc.call.in.chat": "{0} in chat",
|
||||
"label.user.volume": "User Volume",
|
||||
"label.stream.volume": "Screen Volume",
|
||||
"error.call.unsupported": "No permission or feature not supported: {0}",
|
||||
"error.call.camera": "Camera error: {0}",
|
||||
"error.call.screen": "Screen share error: {0}",
|
||||
"error.call.screen.unsupported": "Screen sharing is not supported on this browser.",
|
||||
"label.stream.cam": "Cam",
|
||||
"label.stream.screen": "Screen"
|
||||
}
|
||||
|
|
@ -299,5 +299,24 @@
|
|||
"message.delete.failed": "Nie udało się usunąć wiadomości",
|
||||
"message.react.failed": "Nie udało się dodać reakcji",
|
||||
"message.send.failed": "Nie udało się wysłać wiadomości",
|
||||
"owner.transferred": "Własność przekazana pomyślnie"
|
||||
"owner.transferred": "Własność przekazana pomyślnie",
|
||||
"title.voice.chat": "Czat głosowy",
|
||||
"status.voice.connecting": "Łączenie...",
|
||||
"status.voice.connected": "Połączono",
|
||||
"action.call.mute": "Wycisz mikrofon",
|
||||
"action.call.camera": "Kamera",
|
||||
"action.call.screen": "Udostępnij ekran",
|
||||
"action.call.disconnect": "Rozłącz",
|
||||
"action.call.join": "Dołącz",
|
||||
"action.call.decline": "Odrzuć",
|
||||
"title.incoming.call": "Połączenie głosowe",
|
||||
"desc.call.in.chat": "{0} w rozmowie",
|
||||
"label.user.volume": "Głośność użytkownika",
|
||||
"label.stream.volume": "Głośność ekranu",
|
||||
"error.call.unsupported": "Brak uprawnień lub funkcja nieobsługiwana: {0}",
|
||||
"error.call.camera": "Błąd kamery: {0}",
|
||||
"error.call.screen": "Błąd udostępniania ekranu: {0}",
|
||||
"error.call.screen.unsupported": "Udostępnianie ekranu nie jest obsługiwane w tej przeglądarce.",
|
||||
"label.stream.cam": "Kamera",
|
||||
"label.stream.screen": "Ekran"
|
||||
}
|
||||
|
|
@ -1298,7 +1298,7 @@ input:checked + .toggle-slider:before {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
touch-action: none;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem) scale(0.92);
|
||||
|
|
@ -1329,6 +1329,7 @@ input:checked + .toggle-slider:before {
|
|||
font-weight: bold;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: none;
|
||||
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||
}
|
||||
#voice-header:active {
|
||||
|
|
@ -1347,26 +1348,66 @@ input:checked + .toggle-slider:before {
|
|||
}
|
||||
|
||||
#voice-status {
|
||||
font-size: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--darker-text-color);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: var(--border-width) solid var(--light-border-color);
|
||||
padding: 0.15rem 0.6rem;
|
||||
border-radius: 50rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
#voice-status .status-dot {
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--darker-text-color);
|
||||
}
|
||||
#voice-status.connecting .status-dot {
|
||||
animation: voice-dot-pulse 1.2s ease-in-out infinite;
|
||||
}
|
||||
#voice-status.connected {
|
||||
opacity: 1;
|
||||
}
|
||||
#voice-status.connected .status-dot {
|
||||
background: var(--big-green);
|
||||
box-shadow: 0 0 0.35rem rgba(120, 200, 120, 0.45);
|
||||
}
|
||||
@keyframes voice-dot-pulse {
|
||||
50% { opacity: 0.25; }
|
||||
}
|
||||
|
||||
#voice-users {
|
||||
padding: 0.9375rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-content: flex-start;
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.voice-resize-handle {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
touch-action: none;
|
||||
}
|
||||
.voice-resize-n { top: 0; left: 0.6rem; right: 0.6rem; height: 0.45rem; cursor: ns-resize; }
|
||||
.voice-resize-s { bottom: 0; left: 0.6rem; right: 0.6rem; height: 0.45rem; cursor: ns-resize; }
|
||||
.voice-resize-e { right: 0; top: 0.6rem; bottom: 0.6rem; width: 0.45rem; cursor: ew-resize; }
|
||||
.voice-resize-w { left: 0; top: 0.6rem; bottom: 0.6rem; width: 0.45rem; cursor: ew-resize; }
|
||||
.voice-resize-ne, .voice-resize-nw, .voice-resize-se, .voice-resize-sw { width: 0.8rem; height: 0.8rem; }
|
||||
.voice-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
|
||||
.voice-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
|
||||
.voice-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
|
||||
.voice-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
|
||||
|
||||
.voice-tile {
|
||||
position: relative;
|
||||
width: var(--voice-tile-w, 9rem);
|
||||
height: var(--voice-tile-h, 8rem);
|
||||
background: var(--light-border-color);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
|
@ -1375,18 +1416,17 @@ input:checked + .toggle-slider:before {
|
|||
cursor: pointer;
|
||||
border: var(--border-width) solid transparent;
|
||||
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
|
||||
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
|
||||
transition: border-color 0.15s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.voice-tile:hover {
|
||||
transform: translateY(-0.125rem);
|
||||
.voice-tile.tile-enter {
|
||||
animation: voice-tile-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.voice-tile video,
|
||||
.voice-tile canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-fit: contain;
|
||||
background: #000;
|
||||
}
|
||||
@keyframes voice-tile-in {
|
||||
|
|
@ -1502,9 +1542,12 @@ input:checked + .toggle-slider:before {
|
|||
/* Incoming Call Popup */
|
||||
#incoming-call-popup {
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 3rem));
|
||||
top: calc(env(safe-area-inset-top, 0rem) + 4.5rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-inline: auto;
|
||||
width: fit-content;
|
||||
max-width: calc(100vw - 2rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
|
@ -1518,39 +1561,22 @@ input:checked + .toggle-slider:before {
|
|||
z-index: 9999;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
opacity 0.2s ease,
|
||||
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
#incoming-call-popup.show {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
#incoming-call-popup.hide {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(calc(-100% - 2rem));
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.incoming-call-icon {
|
||||
.incoming-call-avatar {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--big-green);
|
||||
color: white !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: voice-call-pulse 1.5s ease-out infinite;
|
||||
}
|
||||
.incoming-call-icon svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
@keyframes voice-call-pulse {
|
||||
0% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0.45); }
|
||||
70% { box-shadow: 0 0 0 0.8rem hsla(120, 60%, 55%, 0); }
|
||||
100% { box-shadow: 0 0 0 0 hsla(120, 60%, 55%, 0); }
|
||||
border-radius: 0.65rem;
|
||||
border: var(--border-width) solid rgba(255, 255, 255, 0.2);
|
||||
object-fit: cover;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.incoming-call-info {
|
||||
|
|
@ -1558,8 +1584,15 @@ input:checked + .toggle-slider:before {
|
|||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
.incoming-call-title {
|
||||
.incoming-call-name,
|
||||
.incoming-call-subtitle {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.incoming-call-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.05rem;
|
||||
color: var(--text-color);
|
||||
|
|
@ -1603,15 +1636,13 @@ input:checked + .toggle-slider:before {
|
|||
color: white !important;
|
||||
}
|
||||
.voice-call-btn.decline {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
border: var(--border-width) solid var(--light-border-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
}
|
||||
.voice-call-btn.accept:hover {
|
||||
filter: brightness(1.12);
|
||||
background: var(--big-red) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
}
|
||||
.voice-call-btn.accept:hover,
|
||||
.voice-call-btn.decline:hover {
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
filter: brightness(0.85);
|
||||
}
|
||||
.voice-call-btn:active, .voice-call-btn.is-pressed {
|
||||
transform: var(--press-scale);
|
||||
|
|
@ -1672,13 +1703,16 @@ input:checked + .toggle-slider:before {
|
|||
|
||||
@media (max-width: 55rem) {
|
||||
#voice-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
height: 60vh;
|
||||
left: 1rem;
|
||||
right: unset;
|
||||
width: 16rem;
|
||||
height: 17rem;
|
||||
min-width: 13rem;
|
||||
min-height: 12rem;
|
||||
}
|
||||
#incoming-call-popup {
|
||||
width: calc(100vw - 2rem);
|
||||
box-sizing: border-box;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0.6rem 0.6rem 0.8rem;
|
||||
}
|
||||
.voice-call-btn {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
const CLIENT_VERSION = "0.1.0";
|
||||
const CLIENT_VERSION = "0.1.1";
|
||||
|
|
|
|||
383
webroot/voice.js
383
webroot/voice.js
|
|
@ -17,6 +17,42 @@ let camControl = null, screenControl = null;
|
|||
|
||||
const SPEAKING_HANGOVER_MS = 400;
|
||||
|
||||
let voiceDragState = false;
|
||||
let voiceResizeAbort = null;
|
||||
|
||||
function clampVoiceWindowToViewport(popupEl) {
|
||||
const r = popupEl.getBoundingClientRect();
|
||||
const W = window.innerWidth, H = window.innerHeight;
|
||||
const w = Math.min(r.width, W);
|
||||
const h = Math.min(r.height, H);
|
||||
const l = Math.min(Math.max(r.left, 0), W - w);
|
||||
const t = Math.min(Math.max(r.top, 0), H - h);
|
||||
if (l !== r.left || t !== r.top || w !== r.width || h !== r.height) {
|
||||
popupEl.style.right = "auto";
|
||||
popupEl.style.bottom = "auto";
|
||||
popupEl.style.width = w + "px";
|
||||
popupEl.style.height = h + "px";
|
||||
popupEl.style.left = l + "px";
|
||||
popupEl.style.top = t + "px";
|
||||
}
|
||||
}
|
||||
|
||||
let voiceVolumeState = {};
|
||||
|
||||
function getStoredVolume(type, clientId) {
|
||||
let v = voiceVolumeState[`${type}:${clientId}`];
|
||||
return v === undefined ? 100 : v;
|
||||
}
|
||||
|
||||
function setVoiceStatus(state) {
|
||||
let el = document.getElementById("voice-status");
|
||||
if (!el) return;
|
||||
el.classList.toggle("connected", state === "connected");
|
||||
el.classList.toggle("connecting", state !== "connected");
|
||||
let textEl = el.querySelector(".voice-status-text");
|
||||
if (textEl) textEl.innerText = processBlah(state === "connected" ? "status.voice.connected" : "status.voice.connecting");
|
||||
}
|
||||
|
||||
function setTileSpeaking(clientId, speaking) {
|
||||
let tile = document.getElementById(`voice-tile-${clientId}`);
|
||||
if (!tile) return;
|
||||
|
|
@ -171,7 +207,7 @@ async function initiateVoiceCall(roomId = null) {
|
|||
async function startVoiceSession(serverUrl) {
|
||||
showVoiceUI();
|
||||
updateVoiceUIUsers();
|
||||
document.getElementById("voice-status").innerText = "Connecting...";
|
||||
setVoiceStatus("connecting");
|
||||
|
||||
try {
|
||||
const wsUrl = new URL(serverUrl);
|
||||
|
|
@ -186,8 +222,7 @@ async function startVoiceSession(serverUrl) {
|
|||
currentVoiceWs.binaryType = 'arraybuffer';
|
||||
|
||||
currentVoiceWs.onopen = async () => {
|
||||
document.getElementById("voice-status").innerText = "Connected";
|
||||
document.getElementById("voice-status").style.color = "var(--big-green)";
|
||||
setVoiceStatus("connected");
|
||||
let btn = document.getElementById("voice-btn-mic");
|
||||
if (btn) {
|
||||
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
||||
|
|
@ -449,25 +484,47 @@ function handleCallUpdate(data) {
|
|||
}
|
||||
}
|
||||
|
||||
async function resolveCallerInfo(roomId) {
|
||||
let name = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
||||
if (name && name.includes(':')) name = name.split(':')[0];
|
||||
if (!name && window.fetchAsync) {
|
||||
try {
|
||||
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${roomId}`);
|
||||
if (fetched && !fetched.startsWith("error:")) {
|
||||
name = fetched.includes(':') ? fetched.split(':')[0] : fetched;
|
||||
if (window.dmUsernameCache) window.dmUsernameCache[roomId] = name;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
||||
if (!pfpUrl && window.getAvatarUrl) {
|
||||
try { pfpUrl = await window.getAvatarUrl(roomId, name || "User"); } catch (e) {}
|
||||
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[roomId] = pfpUrl;
|
||||
}
|
||||
return { name: name || processBlah("title.unknown"), pfpUrl };
|
||||
}
|
||||
|
||||
function showIncomingCallUI(roomId) {
|
||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
|
||||
|
||||
let cachedName = window.dmUsernameCache ? window.dmUsernameCache[roomId] : null;
|
||||
if (cachedName && cachedName.includes(':')) cachedName = cachedName.split(':')[0];
|
||||
let cachedPfp = window.dmPfpCache ? window.dmPfpCache[roomId] : null;
|
||||
|
||||
let incomingUi = document.createElement("div");
|
||||
incomingUi.id = "incoming-call-popup";
|
||||
incomingUi.innerHTML = `
|
||||
<div class="incoming-call-icon">
|
||||
${ICONS.call({width: "1.25rem", height: "1.25rem"})}
|
||||
</div>
|
||||
<img class="incoming-call-avatar" src="${cachedPfp || "assets/default_avatar.png"}" alt="">
|
||||
<div class="incoming-call-info">
|
||||
<span class="incoming-call-title">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
|
||||
<span class="incoming-call-subtitle">${voiceActiveUsers.length} in chat</span>
|
||||
<span class="incoming-call-name">${cachedName || "..."}</span>
|
||||
<span class="incoming-call-subtitle">${processBlah("title.incoming.call")} · ${processBlah(`:desc.call.in.chat:${voiceActiveUsers.length}`)}</span>
|
||||
</div>
|
||||
<div class="incoming-call-actions">
|
||||
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} Join
|
||||
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
||||
</button>
|
||||
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||
${ICONS.close({width: "1rem", height: "1rem"})} Decline
|
||||
${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -475,6 +532,14 @@ function showIncomingCallUI(roomId) {
|
|||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => incomingUi.classList.add("show"));
|
||||
});
|
||||
|
||||
resolveCallerInfo(roomId).then(({name, pfpUrl}) => {
|
||||
if (!document.body.contains(incomingUi)) return;
|
||||
let nameEl = incomingUi.querySelector(".incoming-call-name");
|
||||
let avatarEl = incomingUi.querySelector(".incoming-call-avatar");
|
||||
if (nameEl) nameEl.innerText = name;
|
||||
if (avatarEl && pfpUrl) avatarEl.src = pfpUrl;
|
||||
});
|
||||
}
|
||||
|
||||
function dismissIncomingCall() {
|
||||
|
|
@ -482,7 +547,7 @@ function dismissIncomingCall() {
|
|||
if (!el || el.classList.contains("hide")) return;
|
||||
el.classList.remove("show");
|
||||
el.classList.add("hide");
|
||||
setTimeout(() => el.remove(), 400);
|
||||
setTimeout(() => el.remove(), 300);
|
||||
}
|
||||
|
||||
function joinIncomingCall(roomId) {
|
||||
|
|
@ -545,25 +610,28 @@ function showVoiceUI() {
|
|||
<div id="voice-header">
|
||||
<div class="voice-title">
|
||||
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
||||
<span>Voice Chat</span>
|
||||
<span>${processBlah("title.voice.chat")}</span>
|
||||
</div>
|
||||
<div id="voice-status" class="connecting">
|
||||
<span class="status-dot"></span>
|
||||
<span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
|
||||
</div>
|
||||
<div id="voice-status">Connecting...</div>
|
||||
</div>
|
||||
<div id="voice-users"></div>
|
||||
<div class="voice-mic-meter">
|
||||
<div id="voice-mic-level"></div>
|
||||
</div>
|
||||
<div id="voice-footer" class="voice-controls">
|
||||
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="Mute Microphone">
|
||||
<button id="voice-btn-mic" class="voice-btn" onclick="toggleVoiceMic()" title="${processBlah("action.call.mute")}">
|
||||
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="Camera">
|
||||
<button id="voice-btn-cam" class="voice-btn" onclick="toggleVoiceCam()" title="${processBlah("action.call.camera")}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect></svg>
|
||||
</button>
|
||||
<button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="Share Screen">
|
||||
<button id="voice-btn-screen" class="voice-btn" onclick="toggleVoiceScreen()" title="${processBlah("action.call.screen")}">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
|
||||
</button>
|
||||
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="Disconnect">
|
||||
<button id="voice-btn-hangup" class="voice-btn voice-btn-danger" onclick="endVoiceSession()" title="${processBlah("action.call.disconnect")}">
|
||||
${ICONS.call({width: "1.4rem", height: "1.4rem"})}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -575,11 +643,12 @@ function showVoiceUI() {
|
|||
});
|
||||
|
||||
let header = document.getElementById("voice-header");
|
||||
let isDragging = false;
|
||||
let startX, startY, initialLeft, initialTop;
|
||||
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
isDragging = true;
|
||||
header.addEventListener('pointerdown', (e) => {
|
||||
if (e.button !== undefined && e.button !== 0) return;
|
||||
voiceDragState = true;
|
||||
try { header.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
let rect = voiceUiContainer.getBoundingClientRect();
|
||||
initialLeft = rect.left;
|
||||
initialTop = rect.top;
|
||||
|
|
@ -589,17 +658,149 @@ function showVoiceUI() {
|
|||
voiceUiContainer.style.bottom = "auto";
|
||||
voiceUiContainer.style.left = initialLeft + "px";
|
||||
voiceUiContainer.style.top = initialTop + "px";
|
||||
clampVoiceWindowToViewport(voiceUiContainer);
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
if (!isDragging) return;
|
||||
header.addEventListener('pointermove', (e) => {
|
||||
if (!voiceDragState) return;
|
||||
let dx = e.clientX - startX;
|
||||
let dy = e.clientY - startY;
|
||||
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
||||
voiceUiContainer.style.top = (initialTop + dy) + "px";
|
||||
clampVoiceWindowToViewport(voiceUiContainer);
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', () => { isDragging = false; });
|
||||
let stopDrag = () => { voiceDragState = false; };
|
||||
header.addEventListener('pointerup', stopDrag);
|
||||
header.addEventListener('pointercancel', stopDrag);
|
||||
|
||||
ensureVoiceGridObserver();
|
||||
|
||||
setupVoiceWindowResize();
|
||||
}
|
||||
|
||||
function setupVoiceWindowResize() {
|
||||
const popup = voiceUiContainer;
|
||||
if (!popup || popup.dataset.resizeInit) return;
|
||||
popup.dataset.resizeInit = "1";
|
||||
|
||||
const minW = () => parseFloat(getComputedStyle(popup).minWidth) || 200;
|
||||
const minH = () => parseFloat(getComputedStyle(popup).minHeight) || 160;
|
||||
|
||||
const applySize = (l, t, w, h) => {
|
||||
const W = window.innerWidth, H = window.innerHeight;
|
||||
w = Math.round(Math.min(Math.max(w, minW()), W));
|
||||
h = Math.round(Math.min(Math.max(h, minH()), H));
|
||||
l = Math.round(Math.min(Math.max(l, 0), W - w));
|
||||
t = Math.round(Math.min(Math.max(t, 0), H - h));
|
||||
popup.style.right = "auto";
|
||||
popup.style.bottom = "auto";
|
||||
popup.style.width = w + "px";
|
||||
popup.style.height = h + "px";
|
||||
popup.style.left = l + "px";
|
||||
popup.style.top = t + "px";
|
||||
};
|
||||
|
||||
let edgeResizing = false;
|
||||
|
||||
["n", "s", "e", "w", "ne", "nw", "se", "sw"].forEach((dir) => {
|
||||
const handle = document.createElement("div");
|
||||
handle.className = `voice-resize-handle voice-resize-${dir}`;
|
||||
popup.appendChild(handle);
|
||||
|
||||
handle.addEventListener("pointerdown", (e) => {
|
||||
if (e.button !== undefined && e.button !== 0) return;
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
edgeResizing = true;
|
||||
const sx = e.clientX, sy = e.clientY;
|
||||
const rect = popup.getBoundingClientRect();
|
||||
const sw = rect.width, sh = rect.height, sl = rect.left, st = rect.top;
|
||||
try { handle.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
|
||||
const onMove = (ev) => {
|
||||
const dx = ev.clientX - sx, dy = ev.clientY - sy;
|
||||
let w = sw, h = sh, l = sl, t = st;
|
||||
if (dir.includes("e")) w = sw + dx;
|
||||
if (dir.includes("s")) h = sh + dy;
|
||||
if (dir.includes("w")) {
|
||||
w = sw - dx;
|
||||
l = sl + (sw - w);
|
||||
}
|
||||
if (dir.includes("n")) {
|
||||
h = sh - dy;
|
||||
t = st + (sh - h);
|
||||
}
|
||||
applySize(l, t, w, h);
|
||||
};
|
||||
const onUp = () => {
|
||||
edgeResizing = false;
|
||||
handle.removeEventListener("pointermove", onMove);
|
||||
handle.removeEventListener("pointerup", onUp);
|
||||
handle.removeEventListener("pointercancel", onUp);
|
||||
};
|
||||
handle.addEventListener("pointermove", onMove);
|
||||
handle.addEventListener("pointerup", onUp);
|
||||
handle.addEventListener("pointercancel", onUp);
|
||||
});
|
||||
});
|
||||
|
||||
// pinch-to-resize (dwa palce jak zoom)
|
||||
const pointers = new Map();
|
||||
let pinch = null;
|
||||
let suppressClick = false;
|
||||
|
||||
popup.addEventListener("pointerdown", (e) => {
|
||||
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pointers.size === 2 && !pinch && !voiceDragState && !edgeResizing) {
|
||||
const [a, b] = [...pointers.values()];
|
||||
const rect = popup.getBoundingClientRect();
|
||||
pinch = {
|
||||
dist: Math.max(20, Math.hypot(a.x - b.x, a.y - b.y)),
|
||||
w: rect.width,
|
||||
h: rect.height
|
||||
};
|
||||
suppressClick = true;
|
||||
}
|
||||
if (pointers.size >= 2 || pinch) {
|
||||
try { popup.setPointerCapture(e.pointerId); } catch (err) {}
|
||||
}
|
||||
});
|
||||
|
||||
popup.addEventListener("pointermove", (e) => {
|
||||
if (!pointers.has(e.pointerId)) return;
|
||||
pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
|
||||
if (pointers.size === 2 && pinch) {
|
||||
const [a, b] = [...pointers.values()];
|
||||
const scale = Math.max(0.05, Math.hypot(a.x - b.x, a.y - b.y)) / pinch.dist;
|
||||
const rect = popup.getBoundingClientRect();
|
||||
const cx = rect.left + rect.width / 2;
|
||||
const cy = rect.top + rect.height / 2;
|
||||
applySize(cx - pinch.w * scale / 2, cy - pinch.h * scale / 2, pinch.w * scale, pinch.h * scale);
|
||||
}
|
||||
});
|
||||
|
||||
const releasePointer = (e) => {
|
||||
pointers.delete(e.pointerId);
|
||||
if (pointers.size < 2) pinch = null;
|
||||
if (pointers.size === 0) setTimeout(() => { suppressClick = false; }, 250);
|
||||
};
|
||||
popup.addEventListener("pointerup", releasePointer);
|
||||
popup.addEventListener("pointercancel", releasePointer);
|
||||
|
||||
popup.addEventListener("click", (e) => {
|
||||
if (suppressClick) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
suppressClick = false;
|
||||
}
|
||||
}, true);
|
||||
|
||||
if (voiceResizeAbort) voiceResizeAbort.abort();
|
||||
voiceResizeAbort = new AbortController();
|
||||
window.addEventListener("resize", () => {
|
||||
clampVoiceWindowToViewport(popup);
|
||||
}, { signal: voiceResizeAbort.signal });
|
||||
}
|
||||
|
||||
function updateVoiceUIUsers() {
|
||||
|
|
@ -610,9 +811,10 @@ function updateVoiceUIUsers() {
|
|||
let div = document.getElementById(`voice-tile-${u}`);
|
||||
if (!div) {
|
||||
div = document.createElement("div");
|
||||
div.className = "voice-tile";
|
||||
div.className = "voice-tile tile-enter";
|
||||
div.id = `voice-tile-${u}`;
|
||||
div.onclick = (e) => showVoiceUserSettings(u, e);
|
||||
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||
|
||||
div.innerHTML = `
|
||||
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
||||
|
|
@ -670,8 +872,10 @@ function updateVoiceUIUsers() {
|
|||
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||
if (!div) {
|
||||
div = document.createElement("div");
|
||||
div.className = "voice-tile";
|
||||
div.className = "voice-tile tile-enter";
|
||||
div.id = `voice-tile-stream-${decoderId}`;
|
||||
div.onclick = (e) => showVoiceUserSettings(clientId, e, true);
|
||||
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||
|
||||
let mediaEl = streamData.canvas || streamData.video;
|
||||
if (mediaEl) {
|
||||
|
|
@ -689,7 +893,7 @@ function updateVoiceUIUsers() {
|
|||
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
||||
|
||||
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${type == '1' ? 'Cam' : 'Screen'})`;
|
||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen")})`;
|
||||
}
|
||||
|
||||
Array.from(container.children).forEach(child => {
|
||||
|
|
@ -700,23 +904,107 @@ function updateVoiceUIUsers() {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
let orderedTiles = [];
|
||||
for (let u of voiceActiveUsers) {
|
||||
let userTile = document.getElementById(`voice-tile-${u}`);
|
||||
if (userTile) orderedTiles.push(userTile);
|
||||
for (let decoderId in remoteVideos) {
|
||||
if (decoderId.split('-')[0] === u) {
|
||||
let streamTile = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||
if (streamTile) orderedTiles.push(streamTile);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let tile of orderedTiles) {
|
||||
container.appendChild(tile);
|
||||
}
|
||||
|
||||
relayoutVoiceTiles();
|
||||
}
|
||||
|
||||
function showVoiceUserSettings(clientId, e) {
|
||||
let voiceGridRO = null;
|
||||
|
||||
function ensureVoiceGridObserver() {
|
||||
let container = document.getElementById("voice-users");
|
||||
if (!container || !container.isConnected || container.dataset.roInit) return;
|
||||
container.dataset.roInit = "1";
|
||||
if (!voiceGridRO) {
|
||||
voiceGridRO = new ResizeObserver(() => relayoutVoiceTiles());
|
||||
}
|
||||
voiceGridRO.observe(container);
|
||||
}
|
||||
|
||||
function relayoutVoiceTiles() {
|
||||
let container = document.getElementById("voice-users");
|
||||
if (!container || !container.isConnected) return;
|
||||
|
||||
const tiles = Array.from(container.children).filter(el => el.classList.contains("voice-tile"));
|
||||
const n = tiles.length;
|
||||
if (!n) return;
|
||||
|
||||
const rootFs = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const cs = getComputedStyle(container);
|
||||
const innerW = container.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
|
||||
const innerH = container.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
|
||||
const minCol = 6.25 * rootFs;
|
||||
const minRow = 7 * rootFs;
|
||||
const gap = 0.75 * rootFs;
|
||||
|
||||
const maxCols = Math.max(1, Math.floor((innerW + gap) / (minCol + gap)));
|
||||
const cols = Math.min(n, maxCols);
|
||||
const rows = Math.ceil(n / cols);
|
||||
const w = Math.floor((innerW - gap * (cols - 1)) / cols);
|
||||
const h = Math.floor(Math.max(minRow, (innerH - gap * (rows - 1)) / rows));
|
||||
|
||||
const sig = `${n}:${cols}:${w}x${h}`;
|
||||
if (container.dataset.layoutSig === sig) return;
|
||||
container.dataset.layoutSig = sig;
|
||||
|
||||
container.style.setProperty("--voice-tile-w", w + "px");
|
||||
container.style.setProperty("--voice-tile-h", h + "px");
|
||||
}
|
||||
|
||||
let voiceSettingsState = null;
|
||||
|
||||
function hideVoiceUserSettings() {
|
||||
let popup = document.getElementById("voice-user-settings");
|
||||
if (popup) popup.remove();
|
||||
voiceSettingsState = null;
|
||||
document.removeEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||
}
|
||||
|
||||
function closeVoiceUserSettingsOnOutsideClick(ev) {
|
||||
let popup = document.getElementById("voice-user-settings");
|
||||
if (!popup) {
|
||||
hideVoiceUserSettings();
|
||||
return;
|
||||
}
|
||||
if (!popup.contains(ev.target)) hideVoiceUserSettings();
|
||||
}
|
||||
|
||||
function showVoiceUserSettings(clientId, e, isStream = false) {
|
||||
e.stopPropagation();
|
||||
let existing = document.getElementById("voice-user-settings");
|
||||
if (existing) existing.remove();
|
||||
|
||||
if (voiceSettingsState && voiceSettingsState.clientId === clientId && voiceSettingsState.isStream === isStream) {
|
||||
hideVoiceUserSettings();
|
||||
return;
|
||||
}
|
||||
hideVoiceUserSettings();
|
||||
|
||||
voiceSettingsState = { clientId, isStream };
|
||||
|
||||
let popup = document.createElement("div");
|
||||
popup.id = "voice-user-settings";
|
||||
popup.innerHTML = `
|
||||
popup.innerHTML = isStream ? `
|
||||
<div class="voice-setting-row">
|
||||
<label>Mic Vol <span id="val-mic-${clientId}">100%</span></label>
|
||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'mic')">
|
||||
<label>${processBlah("label.stream.volume")} <span id="val-screen-${clientId}">${getStoredVolume('screen', clientId)}%</span></label>
|
||||
<input type="range" min="0" max="200" value="${getStoredVolume('screen', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||
</div>
|
||||
` : `
|
||||
<div class="voice-setting-row">
|
||||
<label>Stream Vol <span id="val-screen-${clientId}">100%</span></label>
|
||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||
<label>${processBlah("label.user.volume")} <span id="val-vol-${clientId}">${getStoredVolume('vol', clientId)}%</span></label>
|
||||
<input type="range" min="0" max="200" value="${getStoredVolume('vol', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'vol')">
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -732,16 +1020,11 @@ function showVoiceUserSettings(clientId, e) {
|
|||
requestAnimationFrame(() => popup.classList.add("open"));
|
||||
});
|
||||
|
||||
const closePopup = (ev) => {
|
||||
if (!popup.contains(ev.target)) {
|
||||
popup.remove();
|
||||
document.removeEventListener('mousedown', closePopup);
|
||||
}
|
||||
};
|
||||
setTimeout(() => document.addEventListener('mousedown', closePopup), 10);
|
||||
document.addEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||
}
|
||||
|
||||
window.updateVoiceVol = function(clientId, val, type) {
|
||||
voiceVolumeState[`${type}:${clientId}`] = val;
|
||||
let el = document.getElementById(`val-${type}-${clientId}`);
|
||||
if (el) el.innerText = val + '%';
|
||||
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
||||
|
|
@ -817,6 +1100,16 @@ function endVoiceSession() {
|
|||
|
||||
clearAllSpeaking();
|
||||
|
||||
if (voiceResizeAbort) {
|
||||
voiceResizeAbort.abort();
|
||||
voiceResizeAbort = null;
|
||||
}
|
||||
|
||||
if (voiceGridRO) {
|
||||
voiceGridRO.disconnect();
|
||||
voiceGridRO = null;
|
||||
}
|
||||
|
||||
if (voiceUiContainer) {
|
||||
let popupEl = voiceUiContainer;
|
||||
voiceUiContainer = null;
|
||||
|
|
@ -936,7 +1229,7 @@ async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
|
|||
} else if (typeId === 1) { camControl = null; }
|
||||
};
|
||||
return { stop: stopFunction };
|
||||
} catch (e) { console.error(e); alert(`No permission or feature not supported: ${typeLabel}`); return null; }
|
||||
} catch (e) { console.error(e); alert(processBlah(`:error.call.unsupported:${typeLabel}`)); return null; }
|
||||
}
|
||||
|
||||
function toggleVoiceCam() {
|
||||
|
|
@ -946,7 +1239,7 @@ function toggleVoiceCam() {
|
|||
} else {
|
||||
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
||||
startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
|
||||
}).catch(err => alert("Camera error: " + err.message));
|
||||
}).catch(err => alert(processBlah(`:error.call.camera:${err.message}`)));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -955,11 +1248,11 @@ function toggleVoiceScreen() {
|
|||
if (screenControl) {
|
||||
screenControl.stop();
|
||||
} else {
|
||||
if (!navigator.mediaDevices.getDisplayMedia) { alert("Screen sharing is not supported on this browser."); return; }
|
||||
if (!navigator.mediaDevices.getDisplayMedia) { alert(processBlah("error.call.screen.unsupported")); return; }
|
||||
navigator.mediaDevices.getDisplayMedia({
|
||||
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
||||
}).then(stream => {
|
||||
startHardwareVideo(btn, Promise.resolve(stream), "Screen", 2).then(ctrl => screenControl = ctrl);
|
||||
}).catch(err => alert("Screen error: " + err.message));
|
||||
}).catch(err => alert(processBlah(`:error.call.screen:${err.message}`)));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue