Compare commits
3 commits
dd08cc88ae
...
88dde78581
| Author | SHA1 | Date | |
|---|---|---|---|
| 88dde78581 | |||
| 135fbf23ca | |||
| bc91533262 |
20 changed files with 1941 additions and 387 deletions
|
|
@ -7,8 +7,8 @@ android {
|
||||||
applicationId "olcxja.miarven"
|
applicationId "olcxja.miarven"
|
||||||
minSdkVersion rootProject.ext.minSdkVersion
|
minSdkVersion rootProject.ext.minSdkVersion
|
||||||
targetSdkVersion rootProject.ext.targetSdkVersion
|
targetSdkVersion rootProject.ext.targetSdkVersion
|
||||||
versionCode 1
|
versionCode 2
|
||||||
versionName "0.1.0"
|
versionName "0.1.1"
|
||||||
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
|
||||||
aaptOptions {
|
aaptOptions {
|
||||||
// Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
|
// 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.delete.failed": "Failed to delete meow",
|
||||||
"message.react.failed": "Failed to react to meow",
|
"message.react.failed": "Failed to react to meow",
|
||||||
"message.send.failed": "Failed to send 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.disconnected": "disconnected :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.delete.failed": "Failed to delete message",
|
||||||
"message.react.failed": "Failed to react to message",
|
"message.react.failed": "Failed to react to message",
|
||||||
"message.send.failed": "Failed to send 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.disconnected": "Disconnected",
|
||||||
|
"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.delete.failed": "Nie udało się usunąć wiadomości",
|
||||||
"message.react.failed": "Nie udało się dodać reakcji",
|
"message.react.failed": "Nie udało się dodać reakcji",
|
||||||
"message.send.failed": "Nie udało się wysłać wiadomości",
|
"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.disconnected": "Rozłą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"
|
||||||
}
|
}
|
||||||
|
|
@ -1461,8 +1461,8 @@ function showFixedContextMenu(rect, html) {
|
||||||
|
|
||||||
fixedContextMenu.style.transition = 'none';
|
fixedContextMenu.style.transition = 'none';
|
||||||
fixedContextMenu.style.opacity = '0';
|
fixedContextMenu.style.opacity = '0';
|
||||||
fixedContextMenu.style.left = '0px';
|
fixedContextMenu.style.left = '0rem';
|
||||||
fixedContextMenu.style.top = '0px';
|
fixedContextMenu.style.top = '0rem';
|
||||||
|
|
||||||
fixedContextMenu.classList.add("show");
|
fixedContextMenu.classList.add("show");
|
||||||
|
|
||||||
|
|
@ -3139,7 +3139,7 @@ async function generateMessagesHtml(entries, isPinnedContext = false) {
|
||||||
let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
|
let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
|
||||||
let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
|
let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
|
||||||
|
|
||||||
attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 120px; max-width: 300px; min-height: 100px; max-height: 300px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
|
attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 7.5rem; max-width: 18.75rem; min-height: 6.25rem; max-height: 18.75rem; background: rgba(0,0,0,0.2); border: 0.0625rem solid var(--border-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
|
||||||
<div style="padding: 1rem; text-align: center; color: var(--text-color);">
|
<div style="padding: 1rem; text-align: center; color: var(--text-color);">
|
||||||
${iconSvg}
|
${iconSvg}
|
||||||
<div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
|
<div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
|
||||||
|
|
@ -3653,12 +3653,12 @@ async function downloadAndRenderAttachment(container, msgId, attId, type, name,
|
||||||
container.dataset.url = blobUrl;
|
container.dataset.url = blobUrl;
|
||||||
|
|
||||||
if (type.startsWith("image/")) {
|
if (type.startsWith("image/")) {
|
||||||
container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 300px; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
|
container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 18.75rem; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
|
||||||
} else if (type.startsWith("video/")) {
|
} else if (type.startsWith("video/")) {
|
||||||
container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 300px; display: block;"></video>`;
|
container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 18.75rem; display: block;"></video>`;
|
||||||
} else {
|
} else {
|
||||||
container.innerHTML = originalHtml;
|
container.innerHTML = originalHtml;
|
||||||
container.style.border = "1px solid var(--accent-color)";
|
container.style.border = "0.0625rem solid var(--accent-color)";
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = blobUrl;
|
a.href = blobUrl;
|
||||||
a.download = name;
|
a.download = name;
|
||||||
|
|
@ -3716,7 +3716,7 @@ function renderAttachmentsPreview() {
|
||||||
}
|
}
|
||||||
|
|
||||||
html += `
|
html += `
|
||||||
<div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
|
<div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
|
||||||
<div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
|
<div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
|
||||||
<div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
|
<div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
|
||||||
<button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
|
<button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
|
||||||
|
|
|
||||||
|
|
@ -1022,35 +1022,43 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom Zoom Slider Styling */
|
/* Custom Zoom Slider Styling */
|
||||||
#cropper-zoom {
|
#cropper-zoom,
|
||||||
-webkit-appearance: none;
|
.voice-setting-row input[type="range"] {
|
||||||
width: 100%;
|
|
||||||
height: 6px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 3px;
|
|
||||||
outline: none;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 16px;
|
width: 100%;
|
||||||
height: 16px;
|
height: 0.375rem;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 0.1875rem;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cropper-zoom {
|
||||||
|
margin: 0.625rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cropper-zoom::-webkit-slider-thumb,
|
||||||
|
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--text-color);
|
background: var(--text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.2s, background 0.2s;
|
transition: transform 0.2s, background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb:hover {
|
#cropper-zoom::-webkit-slider-thumb:hover,
|
||||||
|
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb {
|
#cropper-zoom::-moz-range-thumb,
|
||||||
width: 16px;
|
.voice-setting-row input[type="range"]::-moz-range-thumb {
|
||||||
height: 16px;
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--text-color);
|
background: var(--text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1058,7 +1066,8 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb:hover {
|
#cropper-zoom::-moz-range-thumb:hover,
|
||||||
|
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
@ -1234,9 +1243,9 @@ input:checked + .toggle-slider:before {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transform: translateY(-10px);
|
transform: translateY(-0.625rem);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5);
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1277,8 +1286,10 @@ input:checked + .toggle-slider:before {
|
||||||
/* Voice UI Styles */
|
/* Voice UI Styles */
|
||||||
#voice-call-popup {
|
#voice-call-popup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 600px;
|
width: 37.5rem;
|
||||||
height: 450px;
|
height: 28.125rem;
|
||||||
|
min-width: 20rem;
|
||||||
|
min-height: 14rem;
|
||||||
background-color: var(--main-bg-color);
|
background-color: var(--main-bg-color);
|
||||||
border: var(--border-width) solid var(--light-border-color);
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
border-radius: 0.9rem;
|
border-radius: 0.9rem;
|
||||||
|
|
@ -1287,121 +1298,368 @@ input:checked + .toggle-slider:before {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
resize: both;
|
touch-action: none;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1.5rem) scale(0.92);
|
||||||
|
pointer-events: none;
|
||||||
|
transition:
|
||||||
|
opacity 0.2s ease,
|
||||||
|
transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
#voice-call-popup.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
#voice-call-popup.hide {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1rem) scale(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
#voice-header {
|
#voice-header {
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
background: var(--light-border-color);
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 15px;
|
justify-content: space-between;
|
||||||
|
padding: 0 0.9375rem;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border-bottom: var(--border-width) solid rgba(255,255,255,0.05);
|
-webkit-user-select: none;
|
||||||
|
touch-action: none;
|
||||||
|
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||||
}
|
}
|
||||||
|
#voice-header:active {
|
||||||
#voice-users {
|
cursor: grabbing;
|
||||||
padding: 15px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
||||||
gap: 12px;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
}
|
||||||
|
.voice-title {
|
||||||
.voice-tile {
|
display: flex;
|
||||||
position: relative;
|
align-items: center;
|
||||||
background: var(--light-border-color);
|
gap: 0.5rem;
|
||||||
border-radius: 8px;
|
color: var(--text-color);
|
||||||
overflow: hidden;
|
min-width: 0;
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
|
||||||
cursor: pointer;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
}
|
}
|
||||||
.voice-tile.speaking {
|
.voice-title span {
|
||||||
border-color: #4cd137;
|
font-size: 0.95rem;
|
||||||
box-shadow: 0 0 8px 2px #4cd137;
|
font-weight: 700;
|
||||||
}
|
max-width: 16rem;
|
||||||
|
|
||||||
.voice-tile-name {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 6px;
|
|
||||||
left: 6px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 2px 6px;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #fff;
|
|
||||||
max-width: calc(100% - 12px);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.voice-title svg {
|
||||||
|
width: 1.1rem;
|
||||||
|
height: 1.1rem;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#voice-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--darker-text-color);
|
||||||
|
opacity: 0.75;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
#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 {
|
||||||
|
background: hsl(35, 90%, 55%);
|
||||||
|
animation: voice-dot-pulse 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
#voice-status.connected .status-dot {
|
||||||
|
background: var(--big-green);
|
||||||
|
}
|
||||||
|
#voice-status.disconnected .status-dot {
|
||||||
|
background: var(--big-red);
|
||||||
|
}
|
||||||
|
.status-ping:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@keyframes voice-dot-pulse {
|
||||||
|
50% { opacity: 0.25; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#voice-users {
|
||||||
|
padding: 0.9375rem;
|
||||||
|
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;
|
||||||
|
border-radius: 0.65rem;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
border: calc(var(--border-width) * 2) solid rgba(85, 85, 85);
|
||||||
|
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
|
||||||
|
transition: border-color 0.15s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
.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: contain;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
@keyframes voice-tile-in {
|
||||||
|
from { opacity: 0; transform: scale(0.85); }
|
||||||
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-tile.speaking {
|
||||||
|
border-color: var(--big-green);
|
||||||
|
box-shadow: 0 0 0.3rem rgba(120, 200, 120, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-tile-name {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.375rem;
|
||||||
|
left: 0.375rem;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.125rem 0.5rem;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
backdrop-filter: blur(0.5rem);
|
||||||
|
-webkit-backdrop-filter: blur(0.5rem);
|
||||||
|
border-radius: 50rem;
|
||||||
|
color: #fff;
|
||||||
|
max-width: calc(100% - 0.75rem);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.voice-tile-icons {
|
.voice-tile-icons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 6px;
|
bottom: 0.375rem;
|
||||||
right: 6px;
|
right: 0.375rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 4px;
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
.voice-tile-icons svg {
|
||||||
|
filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6));
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-tile video {
|
.voice-mic-meter {
|
||||||
|
height: 0.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
#voice-mic-level {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
width: 0%;
|
||||||
background: #000;
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
transition: width 0.1s linear, background-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-controls {
|
.voice-controls {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
background: var(--main-bg-color);
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
border-top: var(--border-width) solid var(--light-border-color);
|
border-top: var(--border-width) solid var(--light-border-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 15px;
|
gap: 0.9375rem;
|
||||||
|
padding: 0 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-btn {
|
.voice-btn {
|
||||||
border: var(--border-width) solid var(--light-border-color);
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
background: var(--main-bg-color);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
color: var(--fg-1);
|
color: var(--text-color) !important;
|
||||||
border-radius: 0.6rem;
|
width: 2.6rem;
|
||||||
padding: 0.6rem 1rem;
|
height: 2.6rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0.8rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: bold;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 8px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
.voice-btn svg {
|
||||||
|
width: 1.4rem;
|
||||||
|
height: 1.4rem;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
.voice-btn:hover {
|
.voice-btn:hover {
|
||||||
background: var(--light-border-color);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.voice-btn:active, .voice-btn.is-pressed {
|
||||||
|
transform: var(--press-scale);
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-btn.voice-btn-active {
|
.voice-btn.voice-btn-active {
|
||||||
background: #27ae60;
|
background: var(--big-green) !important;
|
||||||
color: #fff;
|
border-color: transparent !important;
|
||||||
border-color: #27ae60;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
.voice-btn.voice-btn-active:hover {
|
||||||
.voice-btn-danger {
|
filter: brightness(1.1);
|
||||||
background: #e74c3c !important;
|
}
|
||||||
|
.voice-btn.voice-btn-danger {
|
||||||
|
background: var(--big-red) !important;
|
||||||
|
border-color: transparent !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
border-color: #e74c3c !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-btn-danger:hover {
|
/* Incoming Call Popup */
|
||||||
background: #c0392b !important;
|
#incoming-call-popup {
|
||||||
border-color: #c0392b !important;
|
position: fixed;
|
||||||
|
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;
|
||||||
|
padding: 0.7rem 0.7rem 0.7rem 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.015);
|
||||||
|
backdrop-filter: blur(1.2rem);
|
||||||
|
-webkit-backdrop-filter: blur(1.2rem);
|
||||||
|
border: var(--border-width) solid var(--big-green);
|
||||||
|
border-radius: 0.9rem;
|
||||||
|
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
|
||||||
|
z-index: 9999;
|
||||||
|
opacity: 0;
|
||||||
|
transition:
|
||||||
|
opacity 0.2s ease,
|
||||||
|
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
#incoming-call-popup.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.incoming-call-avatar {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
flex-shrink: 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 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.1rem;
|
||||||
|
text-align: left;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.incoming-call-subtitle {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--darker-text-color);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.incoming-call-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
.voice-call-btn {
|
||||||
|
height: 2.4rem;
|
||||||
|
padding: 0 0.9375rem;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
.voice-call-btn svg {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
.voice-call-btn.accept {
|
||||||
|
background: var(--big-green) !important;
|
||||||
|
border: none !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.voice-call-btn.decline {
|
||||||
|
background: var(--big-red) !important;
|
||||||
|
border: none !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.voice-call-btn.accept:hover,
|
||||||
|
.voice-call-btn.decline:hover {
|
||||||
|
filter: brightness(0.85);
|
||||||
|
}
|
||||||
|
.voice-call-btn:active, .voice-call-btn.is-pressed {
|
||||||
|
transform: var(--press-scale);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Voice User Settings Popup */
|
/* Voice User Settings Popup */
|
||||||
|
|
@ -1409,39 +1667,66 @@ input:checked + .toggle-slider:before {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: var(--main-bg-color);
|
background: var(--main-bg-color);
|
||||||
border: var(--border-width) solid var(--light-border-color);
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
padding: 15px;
|
padding: 0.4rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.8rem;
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
|
min-width: 13rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
transform-origin: top left;
|
||||||
|
transform: scale(0.9);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition:
|
||||||
|
opacity 0.15s ease,
|
||||||
|
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
#voice-user-settings.open {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row {
|
.voice-setting-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 10px;
|
gap: 0.3rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.65rem;
|
||||||
|
}
|
||||||
|
.voice-setting-row:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row label {
|
.voice-setting-row label {
|
||||||
font-size: 11px;
|
font-size: 0.75rem;
|
||||||
color: var(--fg-1);
|
font-weight: 600;
|
||||||
|
color: var(--darker-text-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row input[type="range"] {
|
.voice-setting-row input[type="range"] {
|
||||||
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background: var(--bg-2);
|
-webkit-appearance: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
@media (max-width: 55rem) {
|
||||||
appearance: none;
|
#voice-call-popup {
|
||||||
width: 12px;
|
width: 16rem;
|
||||||
height: 12px;
|
height: 17rem;
|
||||||
background: var(--accent);
|
min-width: 13rem;
|
||||||
border-radius: 50%;
|
min-height: 12rem;
|
||||||
cursor: pointer;
|
}
|
||||||
|
#incoming-call-popup {
|
||||||
|
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";
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,106 @@ let isMicMuted = false;
|
||||||
let remoteVideos = {}, videoDecryptChains = {};
|
let remoteVideos = {}, videoDecryptChains = {};
|
||||||
let camControl = null, screenControl = null;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
let voiceConnectedAt = null;
|
||||||
|
let voiceTimerInterval = null;
|
||||||
|
let voicePingMs = null;
|
||||||
|
|
||||||
|
function formatVoiceDuration(ms) {
|
||||||
|
let totalSec = Math.floor(ms / 1000);
|
||||||
|
let h = Math.floor(totalSec / 3600);
|
||||||
|
let m = Math.floor((totalSec % 3600) / 60);
|
||||||
|
let s = totalSec % 60;
|
||||||
|
let mm = String(m).padStart(2, "0"), ss = String(s).padStart(2, "0");
|
||||||
|
return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVoicePing() {
|
||||||
|
let pingEl = document.getElementById("voice-ping");
|
||||||
|
if (pingEl) pingEl.innerText = voicePingMs !== null ? `${voicePingMs} ms` : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function setVoiceStatus(state) {
|
||||||
|
let el = document.getElementById("voice-status");
|
||||||
|
if (!el) return;
|
||||||
|
el.classList.toggle("connected", state === "connected");
|
||||||
|
el.classList.toggle("connecting", state === "connecting");
|
||||||
|
el.classList.toggle("disconnected", state === "disconnected");
|
||||||
|
|
||||||
|
let textEl = el.querySelector(".voice-status-text");
|
||||||
|
if (state === "connected") {
|
||||||
|
if (voiceConnectedAt === null) voiceConnectedAt = Date.now();
|
||||||
|
if (!voiceTimerInterval) {
|
||||||
|
voiceTimerInterval = setInterval(() => {
|
||||||
|
let tickEl = document.querySelector("#voice-status .voice-status-text");
|
||||||
|
if (tickEl && voiceConnectedAt !== null) tickEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
if (textEl) textEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
||||||
|
updateVoicePing();
|
||||||
|
} else {
|
||||||
|
if (voiceTimerInterval) { clearInterval(voiceTimerInterval); voiceTimerInterval = null; }
|
||||||
|
voiceConnectedAt = null;
|
||||||
|
if (state === "disconnected") { voicePingMs = null; updateVoicePing(); }
|
||||||
|
if (textEl) textEl.innerText = processBlah(state === "disconnected" ? "status.voice.disconnected" : "status.voice.connecting");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTileSpeaking(clientId, speaking) {
|
||||||
|
let tile = document.getElementById(`voice-tile-${clientId}`);
|
||||||
|
if (!tile) return;
|
||||||
|
|
||||||
|
if (tile._speakingTimer) {
|
||||||
|
clearTimeout(tile._speakingTimer);
|
||||||
|
tile._speakingTimer = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (speaking) {
|
||||||
|
tile.classList.add("speaking");
|
||||||
|
tile._speakingTimer = setTimeout(() => {
|
||||||
|
tile._speakingTimer = null;
|
||||||
|
tile.classList.remove("speaking");
|
||||||
|
}, SPEAKING_HANGOVER_MS);
|
||||||
|
} else {
|
||||||
|
tile.classList.remove("speaking");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAllSpeaking() {
|
||||||
|
for (const el of document.querySelectorAll(".voice-tile.speaking")) {
|
||||||
|
if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
|
||||||
|
el.classList.remove("speaking");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
let changed = false;
|
let changed = false;
|
||||||
|
|
@ -32,6 +132,7 @@ setInterval(() => {
|
||||||
|
|
||||||
const voiceWorkletCode = `
|
const voiceWorkletCode = `
|
||||||
class AudioProcessor extends AudioWorkletProcessor {
|
class AudioProcessor extends AudioWorkletProcessor {
|
||||||
|
|
||||||
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
|
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
|
||||||
process(inputs) {
|
process(inputs) {
|
||||||
const input = inputs[0][0];
|
const input = inputs[0][0];
|
||||||
|
|
@ -141,7 +242,8 @@ async function initiateVoiceCall(roomId = null) {
|
||||||
async function startVoiceSession(serverUrl) {
|
async function startVoiceSession(serverUrl) {
|
||||||
showVoiceUI();
|
showVoiceUI();
|
||||||
updateVoiceUIUsers();
|
updateVoiceUIUsers();
|
||||||
document.getElementById("voice-status").innerText = "Connecting...";
|
setVoiceStatus("connecting");
|
||||||
|
updateVoiceChatTitle();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const wsUrl = new URL(serverUrl);
|
const wsUrl = new URL(serverUrl);
|
||||||
|
|
@ -156,8 +258,7 @@ async function startVoiceSession(serverUrl) {
|
||||||
currentVoiceWs.binaryType = 'arraybuffer';
|
currentVoiceWs.binaryType = 'arraybuffer';
|
||||||
|
|
||||||
currentVoiceWs.onopen = async () => {
|
currentVoiceWs.onopen = async () => {
|
||||||
document.getElementById("voice-status").innerText = "Connected";
|
setVoiceStatus("connected");
|
||||||
document.getElementById("voice-status").style.color = "#4cd137";
|
|
||||||
let btn = document.getElementById("voice-btn-mic");
|
let btn = document.getElementById("voice-btn-mic");
|
||||||
if (btn) {
|
if (btn) {
|
||||||
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
||||||
|
|
@ -169,8 +270,11 @@ async function startVoiceSession(serverUrl) {
|
||||||
try {
|
try {
|
||||||
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
||||||
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
||||||
|
const t0 = performance.now();
|
||||||
const res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
|
const res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
|
||||||
const usersRaw = await res.json();
|
const usersRaw = await res.json();
|
||||||
|
voicePingMs = Math.round(performance.now() - t0);
|
||||||
|
updateVoicePing();
|
||||||
const users = usersRaw.map(u => String(u));
|
const users = usersRaw.map(u => String(u));
|
||||||
let changed = (users.length !== voiceActiveUsers.length);
|
let changed = (users.length !== voiceActiveUsers.length);
|
||||||
for(let u of users) if(!voiceActiveUsers.includes(u)) changed = true;
|
for(let u of users) if(!voiceActiveUsers.includes(u)) changed = true;
|
||||||
|
|
@ -210,9 +314,12 @@ async function startVoiceSession(serverUrl) {
|
||||||
if (micLevelBar) micLevelBar.style.width = percent + '%';
|
if (micLevelBar) micLevelBar.style.width = percent + '%';
|
||||||
|
|
||||||
if (db >= sensitivity) vadHangover = 75;
|
if (db >= sensitivity) vadHangover = 75;
|
||||||
|
let isSpeaking = vadHangover > 0 && !isMicMuted;
|
||||||
|
setTileSpeaking(String(window.id), isSpeaking);
|
||||||
|
|
||||||
if (vadHangover > 0 && !isMicMuted) {
|
if (vadHangover > 0 && !isMicMuted) {
|
||||||
vadHangover--;
|
vadHangover--;
|
||||||
if (micLevelBar) micLevelBar.style.backgroundColor = '#27ae60';
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
|
||||||
|
|
||||||
if (!voiceAesCryptoKey) return;
|
if (!voiceAesCryptoKey) return;
|
||||||
const iv = crypto.getRandomValues(new Uint8Array(12));
|
const iv = crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
@ -221,7 +328,7 @@ async function startVoiceSession(serverUrl) {
|
||||||
payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
||||||
currentVoiceWs.send(payload.buffer);
|
currentVoiceWs.send(payload.buffer);
|
||||||
} else {
|
} else {
|
||||||
if (micLevelBar) micLevelBar.style.backgroundColor = '#555';
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
@ -260,12 +367,7 @@ async function startVoiceSession(serverUrl) {
|
||||||
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
||||||
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
||||||
|
|
||||||
let userItem = document.getElementById(`voice-tile-${clientId}`);
|
setTileSpeaking(clientId, true);
|
||||||
if (userItem) {
|
|
||||||
userItem.classList.add("speaking");
|
|
||||||
if (userItem.timer) clearTimeout(userItem.timer);
|
|
||||||
userItem.timer = setTimeout(() => { userItem.classList.remove("speaking"); }, 500);
|
|
||||||
}
|
|
||||||
} catch (err) {}
|
} catch (err) {}
|
||||||
});
|
});
|
||||||
} else if (type === 1 || type === 2) {
|
} else if (type === 1 || type === 2) {
|
||||||
|
|
@ -417,45 +519,102 @@ function handleCallUpdate(data) {
|
||||||
showIncomingCallUI(roomId);
|
showIncomingCallUI(roomId);
|
||||||
}
|
}
|
||||||
} else if (state.length === 0) {
|
} else if (state.length === 0) {
|
||||||
let incomingUi = document.getElementById("incoming-call-popup");
|
dismissIncomingCall();
|
||||||
if (incomingUi) incomingUi.remove();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function resolveCallerInfo(roomId) {
|
||||||
|
if (window.fetchEncrypted) {
|
||||||
|
try {
|
||||||
|
let infoPayload = await fetchEncrypted("group/info", roomId);
|
||||||
|
if (infoPayload && infoPayload.startsWith("{")) {
|
||||||
|
let info = JSON.parse(infoPayload);
|
||||||
|
if (info.string2) {
|
||||||
|
let pfpUrl = null;
|
||||||
|
if (window.getGroupAvatarUrl) {
|
||||||
|
try { pfpUrl = await getGroupAvatarUrl(roomId, info.string2); } catch (e) {}
|
||||||
|
}
|
||||||
|
return { name: info.string2, pfpUrl };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
let targetId = String(roomId);
|
||||||
|
let parts = targetId.split('_');
|
||||||
|
let myId = `${window.id};${window.host}`;
|
||||||
|
if (parts.length === 2 && (parts[0] === myId || parts[1] === myId)) {
|
||||||
|
targetId = parts[0] === myId ? parts[1] : parts[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
||||||
|
if (!name && window.fetchAsync) {
|
||||||
|
try {
|
||||||
|
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
||||||
|
if (fetched && !fetched.startsWith("error:")) {
|
||||||
|
name = fetched;
|
||||||
|
if (window.dmUsernameCache) window.dmUsernameCache[targetId] = fetched;
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[targetId] : null;
|
||||||
|
if (!pfpUrl && window.getAvatarUrl) {
|
||||||
|
try { pfpUrl = await window.getAvatarUrl(targetId, name || "User"); } catch (e) {}
|
||||||
|
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[targetId] = pfpUrl;
|
||||||
|
}
|
||||||
|
return { name: (name ? name.split(':')[0] : null) || processBlah("title.unknown"), pfpUrl };
|
||||||
|
}
|
||||||
|
|
||||||
function showIncomingCallUI(roomId) {
|
function showIncomingCallUI(roomId) {
|
||||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
|
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");
|
let incomingUi = document.createElement("div");
|
||||||
incomingUi.id = "incoming-call-popup";
|
incomingUi.id = "incoming-call-popup";
|
||||||
incomingUi.style.position = "fixed";
|
|
||||||
incomingUi.style.top = "80px";
|
|
||||||
incomingUi.style.left = "50%";
|
|
||||||
incomingUi.style.transform = "translateX(-50%)";
|
|
||||||
incomingUi.style.backgroundColor = "var(--main-bg-color, #1a1a1a)";
|
|
||||||
incomingUi.style.padding = "15px 25px";
|
|
||||||
incomingUi.style.borderRadius = "0.9rem";
|
|
||||||
incomingUi.style.boxShadow = "0 1rem 3rem rgba(0, 0, 0, 0.5)";
|
|
||||||
incomingUi.style.display = "flex";
|
|
||||||
incomingUi.style.alignItems = "center";
|
|
||||||
incomingUi.style.gap = "20px";
|
|
||||||
incomingUi.style.zIndex = "9999";
|
|
||||||
incomingUi.style.border = "var(--border-width, 1px) solid var(--light-border-color, #333)";
|
|
||||||
|
|
||||||
incomingUi.innerHTML = `
|
incomingUi.innerHTML = `
|
||||||
<div style="display: flex; flex-direction: column;">
|
<img class="incoming-call-avatar" src="${cachedPfp || "assets/default_avatar.png"}" alt="">
|
||||||
<span style="color: var(--fg-0); font-weight: bold; font-size: 1.1rem;">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
|
<div class="incoming-call-info">
|
||||||
<span style="color: var(--fg-1); font-size: 0.9rem;">${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>
|
||||||
<div style="display: flex; gap: 10px;">
|
<div class="incoming-call-actions">
|
||||||
<button onclick="document.getElementById('incoming-call-popup').remove(); initiateVoiceCall('${roomId}')" style="background: #27ae60; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
|
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||||
${ICONS.call({width: "16px", height: "16px"})} Join
|
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
||||||
</button>
|
</button>
|
||||||
<button onclick="document.getElementById('incoming-call-popup').remove()" style="background: #e74c3c; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
|
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||||
${ICONS.close({width: "16px", height: "16px"})} Decline
|
${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
document.body.appendChild(incomingUi);
|
document.body.appendChild(incomingUi);
|
||||||
|
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() {
|
||||||
|
let el = document.getElementById("incoming-call-popup");
|
||||||
|
if (!el || el.classList.contains("hide")) return;
|
||||||
|
el.classList.remove("show");
|
||||||
|
el.classList.add("hide");
|
||||||
|
setTimeout(() => el.remove(), 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
function joinIncomingCall(roomId) {
|
||||||
|
dismissIncomingCall();
|
||||||
|
initiateVoiceCall(roomId);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function sendVoiceSignalToUser(targetUserId, roomId) {
|
async function sendVoiceSignalToUser(targetUserId, roomId) {
|
||||||
|
|
@ -503,6 +662,39 @@ async function handleRoomSignal(data) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function resolveVoiceChatTitle() {
|
||||||
|
try {
|
||||||
|
if (currentVoiceCallType === 'groups') {
|
||||||
|
if (!currentVoiceCallId || !window.fetchEncrypted) return null;
|
||||||
|
let infoPayload = await fetchEncrypted("group/info", currentVoiceCallId);
|
||||||
|
if (infoPayload && infoPayload.startsWith("{")) {
|
||||||
|
return JSON.parse(infoPayload).string2 || null;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (!currentVoiceCallId) return null;
|
||||||
|
let parts = String(currentVoiceCallId).split('_');
|
||||||
|
let myId = `${window.id};${window.host}`;
|
||||||
|
let targetId = parts[0] === myId ? parts[1] : parts[0];
|
||||||
|
if (!targetId) return null;
|
||||||
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
||||||
|
if (!name && window.fetchAsync) {
|
||||||
|
name = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
||||||
|
if (name && !name.startsWith("error:") && window.dmUsernameCache) window.dmUsernameCache[targetId] = name;
|
||||||
|
}
|
||||||
|
if (!name || name.startsWith("error:")) return null;
|
||||||
|
return name.split(':')[0];
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateVoiceChatTitle() {
|
||||||
|
let name = await resolveVoiceChatTitle();
|
||||||
|
let el = document.querySelector("#voice-header .voice-title span");
|
||||||
|
if (el && name) el.innerText = name;
|
||||||
|
}
|
||||||
|
|
||||||
function showVoiceUI() {
|
function showVoiceUI() {
|
||||||
if (voiceUiContainer) return;
|
if (voiceUiContainer) return;
|
||||||
|
|
||||||
|
|
@ -510,40 +702,49 @@ function showVoiceUI() {
|
||||||
voiceUiContainer.id = "voice-call-popup";
|
voiceUiContainer.id = "voice-call-popup";
|
||||||
|
|
||||||
voiceUiContainer.innerHTML = `
|
voiceUiContainer.innerHTML = `
|
||||||
<div id="voice-header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
<div id="voice-header">
|
||||||
<div style="display: flex; align-items: center; gap: 8px;">
|
<div class="voice-title">
|
||||||
<span style="color: var(--fg-0); font-weight: 500;">Voice Chat</span>
|
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
||||||
|
<span>${processBlah("title.voice.chat")}</span>
|
||||||
|
</div>
|
||||||
|
<div id="voice-status" class="connecting">
|
||||||
|
<span class="status-dot"></span>
|
||||||
|
<span class="status-ping" id="voice-ping"></span>
|
||||||
|
<span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="voice-status" style="font-size: 0.8rem; color: var(--fg-1)">Connecting...</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="voice-users"></div>
|
<div id="voice-users"></div>
|
||||||
<div style="height: 4px; background: var(--bg-2); width: 100%;">
|
<div class="voice-mic-meter">
|
||||||
<div id="voice-mic-level" style="height: 100%; width: 0%; background: #27ae60; transition: width 0.1s linear;"></div>
|
<div id="voice-mic-level"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="voice-footer" class="voice-controls">
|
<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: "20px", height: "20px"})}
|
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
||||||
</button>
|
</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>
|
<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>
|
||||||
<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>
|
<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>
|
||||||
<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: "20px", height: "20px"})}
|
${ICONS.call({width: "1.4rem", height: "1.4rem"})}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
document.body.appendChild(voiceUiContainer);
|
document.body.appendChild(voiceUiContainer);
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
|
||||||
|
});
|
||||||
|
|
||||||
let header = document.getElementById("voice-header");
|
let header = document.getElementById("voice-header");
|
||||||
let isDragging = false;
|
|
||||||
let startX, startY, initialLeft, initialTop;
|
let startX, startY, initialLeft, initialTop;
|
||||||
|
|
||||||
header.addEventListener('mousedown', (e) => {
|
header.addEventListener('pointerdown', (e) => {
|
||||||
isDragging = true;
|
if (e.button !== undefined && e.button !== 0) return;
|
||||||
|
voiceDragState = true;
|
||||||
|
try { header.setPointerCapture(e.pointerId); } catch (err) {}
|
||||||
let rect = voiceUiContainer.getBoundingClientRect();
|
let rect = voiceUiContainer.getBoundingClientRect();
|
||||||
initialLeft = rect.left;
|
initialLeft = rect.left;
|
||||||
initialTop = rect.top;
|
initialTop = rect.top;
|
||||||
|
|
@ -553,17 +754,149 @@ function showVoiceUI() {
|
||||||
voiceUiContainer.style.bottom = "auto";
|
voiceUiContainer.style.bottom = "auto";
|
||||||
voiceUiContainer.style.left = initialLeft + "px";
|
voiceUiContainer.style.left = initialLeft + "px";
|
||||||
voiceUiContainer.style.top = initialTop + "px";
|
voiceUiContainer.style.top = initialTop + "px";
|
||||||
|
clampVoiceWindowToViewport(voiceUiContainer);
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('mousemove', (e) => {
|
header.addEventListener('pointermove', (e) => {
|
||||||
if (!isDragging) return;
|
if (!voiceDragState) return;
|
||||||
let dx = e.clientX - startX;
|
let dx = e.clientX - startX;
|
||||||
let dy = e.clientY - startY;
|
let dy = e.clientY - startY;
|
||||||
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
||||||
voiceUiContainer.style.top = (initialTop + dy) + "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() {
|
function updateVoiceUIUsers() {
|
||||||
|
|
@ -574,9 +907,10 @@ function updateVoiceUIUsers() {
|
||||||
let div = document.getElementById(`voice-tile-${u}`);
|
let div = document.getElementById(`voice-tile-${u}`);
|
||||||
if (!div) {
|
if (!div) {
|
||||||
div = document.createElement("div");
|
div = document.createElement("div");
|
||||||
div.className = "voice-tile";
|
div.className = "voice-tile tile-enter";
|
||||||
div.id = `voice-tile-${u}`;
|
div.id = `voice-tile-${u}`;
|
||||||
div.onclick = (e) => showVoiceUserSettings(u, e);
|
div.onclick = (e) => showVoiceUserSettings(u, e);
|
||||||
|
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||||
|
|
||||||
div.innerHTML = `
|
div.innerHTML = `
|
||||||
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
||||||
|
|
@ -596,8 +930,8 @@ function updateVoiceUIUsers() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
let resolvedName = authorName && authorName !== u ? authorName : null;
|
||||||
if (!authorName && u === String(window.id)) authorName = window.username;
|
if (!resolvedName && u === String(window.id) && window.username) resolvedName = window.host ? `${window.username}:${window.host}` : window.username;
|
||||||
|
|
||||||
let avatarRes = window.dmPfpCache ? window.dmPfpCache[u] : null;
|
let avatarRes = window.dmPfpCache ? window.dmPfpCache[u] : null;
|
||||||
let avatarUrl = avatarRes ? avatarRes : "assets/default_avatar.png";
|
let avatarUrl = avatarRes ? avatarRes : "assets/default_avatar.png";
|
||||||
|
|
@ -614,7 +948,7 @@ function updateVoiceUIUsers() {
|
||||||
|
|
||||||
div.style.backgroundImage = `url('${avatarUrl.replace(/'/g, "\\'")}')`;
|
div.style.backgroundImage = `url('${avatarUrl.replace(/'/g, "\\'")}')`;
|
||||||
let nameEl = document.getElementById(`voice-name-${u}`);
|
let nameEl = document.getElementById(`voice-name-${u}`);
|
||||||
if (nameEl) nameEl.innerText = authorName || u;
|
if (nameEl) nameEl.innerText = resolvedName ? `${resolvedName} (${u})` : String(u);
|
||||||
}
|
}
|
||||||
|
|
||||||
Array.from(container.children).forEach(child => {
|
Array.from(container.children).forEach(child => {
|
||||||
|
|
@ -634,15 +968,13 @@ function updateVoiceUIUsers() {
|
||||||
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||||
if (!div) {
|
if (!div) {
|
||||||
div = document.createElement("div");
|
div = document.createElement("div");
|
||||||
div.className = "voice-tile";
|
div.className = "voice-tile tile-enter";
|
||||||
div.id = `voice-tile-stream-${decoderId}`;
|
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;
|
let mediaEl = streamData.canvas || streamData.video;
|
||||||
if (mediaEl) {
|
if (mediaEl) {
|
||||||
mediaEl.style.width = "100%";
|
|
||||||
mediaEl.style.height = "100%";
|
|
||||||
mediaEl.style.objectFit = "cover";
|
|
||||||
mediaEl.style.background = "#000";
|
|
||||||
div.appendChild(mediaEl);
|
div.appendChild(mediaEl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -654,10 +986,13 @@ function updateVoiceUIUsers() {
|
||||||
}
|
}
|
||||||
|
|
||||||
let authorName = window.dmUsernameCache ? window.dmUsernameCache[clientId] : null;
|
let authorName = window.dmUsernameCache ? window.dmUsernameCache[clientId] : null;
|
||||||
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
if (!authorName && clientId === String(window.id) && window.username) authorName = window.host ? `${window.username}:${window.host}` : window.username;
|
||||||
|
|
||||||
|
let streamLabel = processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen");
|
||||||
|
let baseName = authorName && authorName !== clientId ? `${authorName} (${clientId})` : clientId;
|
||||||
|
|
||||||
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
||||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${type == '1' ? 'Cam' : 'Screen'})`;
|
if (nameEl) nameEl.innerText = `${baseName} · ${streamLabel}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
Array.from(container.children).forEach(child => {
|
Array.from(container.children).forEach(child => {
|
||||||
|
|
@ -668,23 +1003,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();
|
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");
|
let popup = document.createElement("div");
|
||||||
popup.id = "voice-user-settings";
|
popup.id = "voice-user-settings";
|
||||||
popup.innerHTML = `
|
popup.innerHTML = isStream ? `
|
||||||
<div class="voice-setting-row">
|
<div class="voice-setting-row">
|
||||||
<label>Mic Vol <span id="val-mic-${clientId}">100%</span></label>
|
<label>${processBlah("label.stream.volume")} <span id="val-screen-${clientId}">${getStoredVolume('screen', clientId)}%</span></label>
|
||||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'mic')">
|
<input type="range" min="0" max="200" value="${getStoredVolume('screen', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||||
</div>
|
</div>
|
||||||
|
` : `
|
||||||
<div class="voice-setting-row">
|
<div class="voice-setting-row">
|
||||||
<label>Stream Vol <span id="val-screen-${clientId}">100%</span></label>
|
<label>${processBlah("label.user.volume")} <span id="val-vol-${clientId}">${getStoredVolume('vol', clientId)}%</span></label>
|
||||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
<input type="range" min="0" max="200" value="${getStoredVolume('vol', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'vol')">
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
@ -696,17 +1115,15 @@ function showVoiceUserSettings(clientId, e) {
|
||||||
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
|
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
|
||||||
popup.style.left = left + "px";
|
popup.style.left = left + "px";
|
||||||
popup.style.top = top + "px";
|
popup.style.top = top + "px";
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => popup.classList.add("open"));
|
||||||
|
});
|
||||||
|
|
||||||
const closePopup = (ev) => {
|
document.addEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||||
if (!popup.contains(ev.target)) {
|
|
||||||
popup.remove();
|
|
||||||
document.removeEventListener('mousedown', closePopup);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
setTimeout(() => document.addEventListener('mousedown', closePopup), 10);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.updateVoiceVol = function(clientId, val, type) {
|
window.updateVoiceVol = function(clientId, val, type) {
|
||||||
|
voiceVolumeState[`${type}:${clientId}`] = val;
|
||||||
let el = document.getElementById(`val-${type}-${clientId}`);
|
let el = document.getElementById(`val-${type}-${clientId}`);
|
||||||
if (el) el.innerText = val + '%';
|
if (el) el.innerText = val + '%';
|
||||||
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
||||||
|
|
@ -718,6 +1135,7 @@ window.updateVoiceVol = function(clientId, val, type) {
|
||||||
|
|
||||||
function toggleVoiceMic() {
|
function toggleVoiceMic() {
|
||||||
isMicMuted = !isMicMuted;
|
isMicMuted = !isMicMuted;
|
||||||
|
if (isMicMuted) setTileSpeaking(String(window.id), false);
|
||||||
let btn = document.getElementById("voice-btn-mic");
|
let btn = document.getElementById("voice-btn-mic");
|
||||||
if (btn) {
|
if (btn) {
|
||||||
if (isMicMuted) {
|
if (isMicMuted) {
|
||||||
|
|
@ -729,6 +1147,8 @@ function toggleVoiceMic() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function endVoiceSession() {
|
function endVoiceSession() {
|
||||||
|
setVoiceStatus("disconnected");
|
||||||
|
|
||||||
if (currentVoiceCallId) {
|
if (currentVoiceCallId) {
|
||||||
let payload = JSON.stringify({ string1: currentVoiceCallType, string2: currentVoiceCallId });
|
let payload = JSON.stringify({ string1: currentVoiceCallType, string2: currentVoiceCallId });
|
||||||
if (window.fetchEncrypted) window.fetchEncrypted("room/voice/leave", payload).catch(()=>{});
|
if (window.fetchEncrypted) window.fetchEncrypted("room/voice/leave", payload).catch(()=>{});
|
||||||
|
|
@ -779,9 +1199,24 @@ function endVoiceSession() {
|
||||||
currentVoiceCallType = null;
|
currentVoiceCallType = null;
|
||||||
currentVoiceCallId = null;
|
currentVoiceCallId = null;
|
||||||
|
|
||||||
|
clearAllSpeaking();
|
||||||
|
|
||||||
|
if (voiceResizeAbort) {
|
||||||
|
voiceResizeAbort.abort();
|
||||||
|
voiceResizeAbort = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (voiceGridRO) {
|
||||||
|
voiceGridRO.disconnect();
|
||||||
|
voiceGridRO = null;
|
||||||
|
}
|
||||||
|
|
||||||
if (voiceUiContainer) {
|
if (voiceUiContainer) {
|
||||||
voiceUiContainer.remove();
|
let popupEl = voiceUiContainer;
|
||||||
voiceUiContainer = null;
|
voiceUiContainer = null;
|
||||||
|
popupEl.classList.remove("show");
|
||||||
|
popupEl.classList.add("hide");
|
||||||
|
setTimeout(() => popupEl.remove(), 350);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -895,7 +1330,7 @@ async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
|
||||||
} else if (typeId === 1) { camControl = null; }
|
} else if (typeId === 1) { camControl = null; }
|
||||||
};
|
};
|
||||||
return { stop: stopFunction };
|
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() {
|
function toggleVoiceCam() {
|
||||||
|
|
@ -905,7 +1340,7 @@ function toggleVoiceCam() {
|
||||||
} else {
|
} else {
|
||||||
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
||||||
startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
|
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}`)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -914,11 +1349,11 @@ function toggleVoiceScreen() {
|
||||||
if (screenControl) {
|
if (screenControl) {
|
||||||
screenControl.stop();
|
screenControl.stop();
|
||||||
} else {
|
} 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({
|
navigator.mediaDevices.getDisplayMedia({
|
||||||
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
||||||
}).then(stream => {
|
}).then(stream => {
|
||||||
startHardwareVideo(btn, Promise.resolve(stream), "Screen", 2).then(ctrl => screenControl = ctrl);
|
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",
|
"name": "Miarven",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"description": "An Amazing Capacitor App",
|
"description": "An Amazing Capacitor App",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "",
|
"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",
|
"name": "olcxja.miarven",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"description": "Larpix client",
|
"description": "Larpix client",
|
||||||
"license": "AGPL-3.0",
|
"license": "AGPL-3.0",
|
||||||
"author": "olcxja's softworks",
|
"author": "olcxja's softworks",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"versionCode": 1,
|
"versionCode": 2,
|
||||||
"versionName": "0.1.0",
|
"versionName": "0.1.1",
|
||||||
"npmVersion": "0.1.0"
|
"npmVersion": "0.1.1"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -290,5 +290,24 @@
|
||||||
"message.delete.failed": "Failed to delete meow",
|
"message.delete.failed": "Failed to delete meow",
|
||||||
"message.react.failed": "Failed to react to meow",
|
"message.react.failed": "Failed to react to meow",
|
||||||
"message.send.failed": "Failed to send 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.disconnected": "disconnected :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.delete.failed": "Failed to delete message",
|
||||||
"message.react.failed": "Failed to react to message",
|
"message.react.failed": "Failed to react to message",
|
||||||
"message.send.failed": "Failed to send 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.disconnected": "Disconnected",
|
||||||
|
"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.delete.failed": "Nie udało się usunąć wiadomości",
|
||||||
"message.react.failed": "Nie udało się dodać reakcji",
|
"message.react.failed": "Nie udało się dodać reakcji",
|
||||||
"message.send.failed": "Nie udało się wysłać wiadomości",
|
"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.disconnected": "Rozłą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"
|
||||||
}
|
}
|
||||||
|
|
@ -1461,8 +1461,8 @@ function showFixedContextMenu(rect, html) {
|
||||||
|
|
||||||
fixedContextMenu.style.transition = 'none';
|
fixedContextMenu.style.transition = 'none';
|
||||||
fixedContextMenu.style.opacity = '0';
|
fixedContextMenu.style.opacity = '0';
|
||||||
fixedContextMenu.style.left = '0px';
|
fixedContextMenu.style.left = '0rem';
|
||||||
fixedContextMenu.style.top = '0px';
|
fixedContextMenu.style.top = '0rem';
|
||||||
|
|
||||||
fixedContextMenu.classList.add("show");
|
fixedContextMenu.classList.add("show");
|
||||||
|
|
||||||
|
|
@ -3139,7 +3139,7 @@ async function generateMessagesHtml(entries, isPinnedContext = false) {
|
||||||
let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
|
let safeType = encodeURIComponent(att.type).replace(/'/g, "%27");
|
||||||
let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
|
let safeName = encodeURIComponent(att.name).replace(/'/g, "%27");
|
||||||
|
|
||||||
attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 120px; max-width: 300px; min-height: 100px; max-height: 300px; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
|
attachmentsHtml += `<div id="${attContainerId}" class="attachment-box" style="position: relative; min-width: 7.5rem; max-width: 18.75rem; min-height: 6.25rem; max-height: 18.75rem; background: rgba(0,0,0,0.2); border: 0.0625rem solid var(--border-color); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden;" onclick="event.stopPropagation(); downloadAndRenderAttachment(this, '${msgId}', '${att.id}', decodeURIComponent('${safeType}'), decodeURIComponent('${safeName}'), '${msg.key || "0"}')">
|
||||||
<div style="padding: 1rem; text-align: center; color: var(--text-color);">
|
<div style="padding: 1rem; text-align: center; color: var(--text-color);">
|
||||||
${iconSvg}
|
${iconSvg}
|
||||||
<div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
|
<div style="font-size: 0.8rem; margin-top: 0.5rem; word-break: break-all;">${escapeHtml(displayName)}</div>
|
||||||
|
|
@ -3653,12 +3653,12 @@ async function downloadAndRenderAttachment(container, msgId, attId, type, name,
|
||||||
container.dataset.url = blobUrl;
|
container.dataset.url = blobUrl;
|
||||||
|
|
||||||
if (type.startsWith("image/")) {
|
if (type.startsWith("image/")) {
|
||||||
container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 300px; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
|
container.innerHTML = `<img src="${blobUrl}" style="max-width: 100%; max-height: 18.75rem; display: block;" onclick="window.open('${blobUrl}', '_blank')">`;
|
||||||
} else if (type.startsWith("video/")) {
|
} else if (type.startsWith("video/")) {
|
||||||
container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 300px; display: block;"></video>`;
|
container.innerHTML = `<video src="${blobUrl}" controls style="max-width: 100%; max-height: 18.75rem; display: block;"></video>`;
|
||||||
} else {
|
} else {
|
||||||
container.innerHTML = originalHtml;
|
container.innerHTML = originalHtml;
|
||||||
container.style.border = "1px solid var(--accent-color)";
|
container.style.border = "0.0625rem solid var(--accent-color)";
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = blobUrl;
|
a.href = blobUrl;
|
||||||
a.download = name;
|
a.download = name;
|
||||||
|
|
@ -3716,7 +3716,7 @@ function renderAttachmentsPreview() {
|
||||||
}
|
}
|
||||||
|
|
||||||
html += `
|
html += `
|
||||||
<div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
|
<div style="display: flex; align-items: center; gap: 0.8rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); border: var(--border-width) solid rgba(255, 255, 255, 0.1); padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 0.75rem; flex-shrink: 0; max-width: 15.625rem; box-shadow: 0 0.25rem 0.375rem rgba(0,0,0,0.1); transition: transform 0.2s ease;">
|
||||||
<div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
|
<div style="flex-shrink: 0; color: var(--accent-color); display: flex; align-items: center;">${iconHtml}</div>
|
||||||
<div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
|
<div style="font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color); font-weight: 500; flex-grow: 1;">${escapeHtml(file.name)}</div>
|
||||||
<button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
|
<button onclick="removeDraftAttachment(${index})" style="background: transparent; color: var(--text-color); border: none; width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.125rem; opacity: 0.6; transition: opacity 0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
|
||||||
|
|
|
||||||
|
|
@ -1022,35 +1022,43 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom Zoom Slider Styling */
|
/* Custom Zoom Slider Styling */
|
||||||
#cropper-zoom {
|
#cropper-zoom,
|
||||||
-webkit-appearance: none;
|
.voice-setting-row input[type="range"] {
|
||||||
width: 100%;
|
|
||||||
height: 6px;
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 3px;
|
|
||||||
outline: none;
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 16px;
|
width: 100%;
|
||||||
height: 16px;
|
height: 0.375rem;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 0.1875rem;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cropper-zoom {
|
||||||
|
margin: 0.625rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cropper-zoom::-webkit-slider-thumb,
|
||||||
|
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--text-color);
|
background: var(--text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.2s, background 0.2s;
|
transition: transform 0.2s, background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-webkit-slider-thumb:hover {
|
#cropper-zoom::-webkit-slider-thumb:hover,
|
||||||
|
.voice-setting-row input[type="range"]::-webkit-slider-thumb:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb {
|
#cropper-zoom::-moz-range-thumb,
|
||||||
width: 16px;
|
.voice-setting-row input[type="range"]::-moz-range-thumb {
|
||||||
height: 16px;
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--text-color);
|
background: var(--text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1058,7 +1066,8 @@ button.profile-action-btn.popup-btn-danger:hover, button.submit-button.popup-btn
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#cropper-zoom::-moz-range-thumb:hover {
|
#cropper-zoom::-moz-range-thumb:hover,
|
||||||
|
.voice-setting-row input[type="range"]::-moz-range-thumb:hover {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
@ -1234,9 +1243,9 @@ input:checked + .toggle-slider:before {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
transform: translateY(-10px);
|
transform: translateY(-0.625rem);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.5);
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -1277,8 +1286,10 @@ input:checked + .toggle-slider:before {
|
||||||
/* Voice UI Styles */
|
/* Voice UI Styles */
|
||||||
#voice-call-popup {
|
#voice-call-popup {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 600px;
|
width: 37.5rem;
|
||||||
height: 450px;
|
height: 28.125rem;
|
||||||
|
min-width: 20rem;
|
||||||
|
min-height: 14rem;
|
||||||
background-color: var(--main-bg-color);
|
background-color: var(--main-bg-color);
|
||||||
border: var(--border-width) solid var(--light-border-color);
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
border-radius: 0.9rem;
|
border-radius: 0.9rem;
|
||||||
|
|
@ -1287,121 +1298,368 @@ input:checked + .toggle-slider:before {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
resize: both;
|
touch-action: none;
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1.5rem) scale(0.92);
|
||||||
|
pointer-events: none;
|
||||||
|
transition:
|
||||||
|
opacity 0.2s ease,
|
||||||
|
transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
#voice-call-popup.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
#voice-call-popup.hide {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1rem) scale(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
#voice-header {
|
#voice-header {
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
background: var(--light-border-color);
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 15px;
|
justify-content: space-between;
|
||||||
|
padding: 0 0.9375rem;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border-bottom: var(--border-width) solid rgba(255,255,255,0.05);
|
-webkit-user-select: none;
|
||||||
|
touch-action: none;
|
||||||
|
border-bottom: var(--border-width) solid var(--light-border-color);
|
||||||
}
|
}
|
||||||
|
#voice-header:active {
|
||||||
#voice-users {
|
cursor: grabbing;
|
||||||
padding: 15px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
||||||
gap: 12px;
|
|
||||||
overflow-y: auto;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
}
|
||||||
|
.voice-title {
|
||||||
.voice-tile {
|
display: flex;
|
||||||
position: relative;
|
align-items: center;
|
||||||
background: var(--light-border-color);
|
gap: 0.5rem;
|
||||||
border-radius: 8px;
|
color: var(--text-color);
|
||||||
overflow: hidden;
|
min-width: 0;
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
|
||||||
cursor: pointer;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
}
|
}
|
||||||
.voice-tile.speaking {
|
.voice-title span {
|
||||||
border-color: #4cd137;
|
font-size: 0.95rem;
|
||||||
box-shadow: 0 0 8px 2px #4cd137;
|
font-weight: 700;
|
||||||
}
|
max-width: 16rem;
|
||||||
|
|
||||||
.voice-tile-name {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 6px;
|
|
||||||
left: 6px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 2px 6px;
|
|
||||||
background: rgba(0,0,0,0.6);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #fff;
|
|
||||||
max-width: calc(100% - 12px);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
.voice-title svg {
|
||||||
|
width: 1.1rem;
|
||||||
|
height: 1.1rem;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#voice-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--darker-text-color);
|
||||||
|
opacity: 0.75;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
#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 {
|
||||||
|
background: hsl(35, 90%, 55%);
|
||||||
|
animation: voice-dot-pulse 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
#voice-status.connected .status-dot {
|
||||||
|
background: var(--big-green);
|
||||||
|
}
|
||||||
|
#voice-status.disconnected .status-dot {
|
||||||
|
background: var(--big-red);
|
||||||
|
}
|
||||||
|
.status-ping:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@keyframes voice-dot-pulse {
|
||||||
|
50% { opacity: 0.25; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#voice-users {
|
||||||
|
padding: 0.9375rem;
|
||||||
|
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;
|
||||||
|
border-radius: 0.65rem;
|
||||||
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
border: calc(var(--border-width) * 2) solid rgba(85, 85, 85);
|
||||||
|
box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.3);
|
||||||
|
transition: border-color 0.15s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
.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: contain;
|
||||||
|
background: #000;
|
||||||
|
}
|
||||||
|
@keyframes voice-tile-in {
|
||||||
|
from { opacity: 0; transform: scale(0.85); }
|
||||||
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-tile.speaking {
|
||||||
|
border-color: var(--big-green);
|
||||||
|
box-shadow: 0 0 0.3rem rgba(120, 200, 120, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-tile-name {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.375rem;
|
||||||
|
left: 0.375rem;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0.125rem 0.5rem;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
backdrop-filter: blur(0.5rem);
|
||||||
|
-webkit-backdrop-filter: blur(0.5rem);
|
||||||
|
border-radius: 50rem;
|
||||||
|
color: #fff;
|
||||||
|
max-width: calc(100% - 0.75rem);
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
.voice-tile-icons {
|
.voice-tile-icons {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 6px;
|
bottom: 0.375rem;
|
||||||
right: 6px;
|
right: 0.375rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 4px;
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
.voice-tile-icons svg {
|
||||||
|
filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.6));
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-tile video {
|
.voice-mic-meter {
|
||||||
|
height: 0.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
#voice-mic-level {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
width: 0%;
|
||||||
background: #000;
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
transition: width 0.1s linear, background-color 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-controls {
|
.voice-controls {
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
background: var(--main-bg-color);
|
flex-shrink: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
border-top: var(--border-width) solid var(--light-border-color);
|
border-top: var(--border-width) solid var(--light-border-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 15px;
|
gap: 0.9375rem;
|
||||||
|
padding: 0 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-btn {
|
.voice-btn {
|
||||||
border: var(--border-width) solid var(--light-border-color);
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
background: var(--main-bg-color);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
color: var(--fg-1);
|
color: var(--text-color) !important;
|
||||||
border-radius: 0.6rem;
|
width: 2.6rem;
|
||||||
padding: 0.6rem 1rem;
|
height: 2.6rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 0.8rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: bold;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 8px;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
.voice-btn svg {
|
||||||
|
width: 1.4rem;
|
||||||
|
height: 1.4rem;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
.voice-btn:hover {
|
.voice-btn:hover {
|
||||||
background: var(--light-border-color);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
.voice-btn:active, .voice-btn.is-pressed {
|
||||||
|
transform: var(--press-scale);
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-btn.voice-btn-active {
|
.voice-btn.voice-btn-active {
|
||||||
background: #27ae60;
|
background: var(--big-green) !important;
|
||||||
color: #fff;
|
border-color: transparent !important;
|
||||||
border-color: #27ae60;
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
.voice-btn.voice-btn-active:hover {
|
||||||
.voice-btn-danger {
|
filter: brightness(1.1);
|
||||||
background: #e74c3c !important;
|
}
|
||||||
|
.voice-btn.voice-btn-danger {
|
||||||
|
background: var(--big-red) !important;
|
||||||
|
border-color: transparent !important;
|
||||||
color: white !important;
|
color: white !important;
|
||||||
border-color: #e74c3c !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-btn-danger:hover {
|
/* Incoming Call Popup */
|
||||||
background: #c0392b !important;
|
#incoming-call-popup {
|
||||||
border-color: #c0392b !important;
|
position: fixed;
|
||||||
|
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;
|
||||||
|
padding: 0.7rem 0.7rem 0.7rem 1rem;
|
||||||
|
background: rgba(255, 255, 255, 0.015);
|
||||||
|
backdrop-filter: blur(1.2rem);
|
||||||
|
-webkit-backdrop-filter: blur(1.2rem);
|
||||||
|
border: var(--border-width) solid var(--big-green);
|
||||||
|
border-radius: 0.9rem;
|
||||||
|
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4);
|
||||||
|
z-index: 9999;
|
||||||
|
opacity: 0;
|
||||||
|
transition:
|
||||||
|
opacity 0.2s ease,
|
||||||
|
transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
#incoming-call-popup.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.incoming-call-avatar {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
flex-shrink: 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 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.1rem;
|
||||||
|
text-align: left;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.incoming-call-subtitle {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--darker-text-color);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.incoming-call-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
.voice-call-btn {
|
||||||
|
height: 2.4rem;
|
||||||
|
padding: 0 0.9375rem;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.375rem;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: transform;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
.voice-call-btn svg {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
pointer-events: none !important;
|
||||||
|
}
|
||||||
|
.voice-call-btn.accept {
|
||||||
|
background: var(--big-green) !important;
|
||||||
|
border: none !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.voice-call-btn.decline {
|
||||||
|
background: var(--big-red) !important;
|
||||||
|
border: none !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
.voice-call-btn.accept:hover,
|
||||||
|
.voice-call-btn.decline:hover {
|
||||||
|
filter: brightness(0.85);
|
||||||
|
}
|
||||||
|
.voice-call-btn:active, .voice-call-btn.is-pressed {
|
||||||
|
transform: var(--press-scale);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Voice User Settings Popup */
|
/* Voice User Settings Popup */
|
||||||
|
|
@ -1409,39 +1667,66 @@ input:checked + .toggle-slider:before {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
background: var(--main-bg-color);
|
background: var(--main-bg-color);
|
||||||
border: var(--border-width) solid var(--light-border-color);
|
border: var(--border-width) solid var(--light-border-color);
|
||||||
padding: 15px;
|
padding: 0.4rem;
|
||||||
border-radius: 8px;
|
border-radius: 0.8rem;
|
||||||
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
|
min-width: 13rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2rem;
|
||||||
|
transform-origin: top left;
|
||||||
|
transform: scale(0.9);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition:
|
||||||
|
opacity 0.15s ease,
|
||||||
|
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
|
}
|
||||||
|
#voice-user-settings.open {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row {
|
.voice-setting-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin-bottom: 10px;
|
gap: 0.3rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.65rem;
|
||||||
|
}
|
||||||
|
.voice-setting-row:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row label {
|
.voice-setting-row label {
|
||||||
font-size: 11px;
|
font-size: 0.75rem;
|
||||||
color: var(--fg-1);
|
font-weight: 600;
|
||||||
|
color: var(--darker-text-color);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row input[type="range"] {
|
.voice-setting-row input[type="range"] {
|
||||||
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4px;
|
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background: var(--bg-2);
|
-webkit-appearance: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
|
@media (max-width: 55rem) {
|
||||||
appearance: none;
|
#voice-call-popup {
|
||||||
width: 12px;
|
width: 16rem;
|
||||||
height: 12px;
|
height: 17rem;
|
||||||
background: var(--accent);
|
min-width: 13rem;
|
||||||
border-radius: 50%;
|
min-height: 12rem;
|
||||||
cursor: pointer;
|
}
|
||||||
|
#incoming-call-popup {
|
||||||
|
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";
|
||||||
|
|
|
||||||
603
webroot/voice.js
603
webroot/voice.js
|
|
@ -15,6 +15,106 @@ let isMicMuted = false;
|
||||||
let remoteVideos = {}, videoDecryptChains = {};
|
let remoteVideos = {}, videoDecryptChains = {};
|
||||||
let camControl = null, screenControl = null;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
let voiceConnectedAt = null;
|
||||||
|
let voiceTimerInterval = null;
|
||||||
|
let voicePingMs = null;
|
||||||
|
|
||||||
|
function formatVoiceDuration(ms) {
|
||||||
|
let totalSec = Math.floor(ms / 1000);
|
||||||
|
let h = Math.floor(totalSec / 3600);
|
||||||
|
let m = Math.floor((totalSec % 3600) / 60);
|
||||||
|
let s = totalSec % 60;
|
||||||
|
let mm = String(m).padStart(2, "0"), ss = String(s).padStart(2, "0");
|
||||||
|
return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVoicePing() {
|
||||||
|
let pingEl = document.getElementById("voice-ping");
|
||||||
|
if (pingEl) pingEl.innerText = voicePingMs !== null ? `${voicePingMs} ms` : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function setVoiceStatus(state) {
|
||||||
|
let el = document.getElementById("voice-status");
|
||||||
|
if (!el) return;
|
||||||
|
el.classList.toggle("connected", state === "connected");
|
||||||
|
el.classList.toggle("connecting", state === "connecting");
|
||||||
|
el.classList.toggle("disconnected", state === "disconnected");
|
||||||
|
|
||||||
|
let textEl = el.querySelector(".voice-status-text");
|
||||||
|
if (state === "connected") {
|
||||||
|
if (voiceConnectedAt === null) voiceConnectedAt = Date.now();
|
||||||
|
if (!voiceTimerInterval) {
|
||||||
|
voiceTimerInterval = setInterval(() => {
|
||||||
|
let tickEl = document.querySelector("#voice-status .voice-status-text");
|
||||||
|
if (tickEl && voiceConnectedAt !== null) tickEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
if (textEl) textEl.innerText = formatVoiceDuration(Date.now() - voiceConnectedAt);
|
||||||
|
updateVoicePing();
|
||||||
|
} else {
|
||||||
|
if (voiceTimerInterval) { clearInterval(voiceTimerInterval); voiceTimerInterval = null; }
|
||||||
|
voiceConnectedAt = null;
|
||||||
|
if (state === "disconnected") { voicePingMs = null; updateVoicePing(); }
|
||||||
|
if (textEl) textEl.innerText = processBlah(state === "disconnected" ? "status.voice.disconnected" : "status.voice.connecting");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTileSpeaking(clientId, speaking) {
|
||||||
|
let tile = document.getElementById(`voice-tile-${clientId}`);
|
||||||
|
if (!tile) return;
|
||||||
|
|
||||||
|
if (tile._speakingTimer) {
|
||||||
|
clearTimeout(tile._speakingTimer);
|
||||||
|
tile._speakingTimer = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (speaking) {
|
||||||
|
tile.classList.add("speaking");
|
||||||
|
tile._speakingTimer = setTimeout(() => {
|
||||||
|
tile._speakingTimer = null;
|
||||||
|
tile.classList.remove("speaking");
|
||||||
|
}, SPEAKING_HANGOVER_MS);
|
||||||
|
} else {
|
||||||
|
tile.classList.remove("speaking");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAllSpeaking() {
|
||||||
|
for (const el of document.querySelectorAll(".voice-tile.speaking")) {
|
||||||
|
if (el._speakingTimer) { clearTimeout(el._speakingTimer); el._speakingTimer = null; }
|
||||||
|
el.classList.remove("speaking");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
let changed = false;
|
let changed = false;
|
||||||
|
|
@ -32,6 +132,7 @@ setInterval(() => {
|
||||||
|
|
||||||
const voiceWorkletCode = `
|
const voiceWorkletCode = `
|
||||||
class AudioProcessor extends AudioWorkletProcessor {
|
class AudioProcessor extends AudioWorkletProcessor {
|
||||||
|
|
||||||
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
|
constructor() { super(); this.buffer = new Int16Array(1024); this.pointer = 0; }
|
||||||
process(inputs) {
|
process(inputs) {
|
||||||
const input = inputs[0][0];
|
const input = inputs[0][0];
|
||||||
|
|
@ -141,7 +242,8 @@ async function initiateVoiceCall(roomId = null) {
|
||||||
async function startVoiceSession(serverUrl) {
|
async function startVoiceSession(serverUrl) {
|
||||||
showVoiceUI();
|
showVoiceUI();
|
||||||
updateVoiceUIUsers();
|
updateVoiceUIUsers();
|
||||||
document.getElementById("voice-status").innerText = "Connecting...";
|
setVoiceStatus("connecting");
|
||||||
|
updateVoiceChatTitle();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const wsUrl = new URL(serverUrl);
|
const wsUrl = new URL(serverUrl);
|
||||||
|
|
@ -156,8 +258,7 @@ async function startVoiceSession(serverUrl) {
|
||||||
currentVoiceWs.binaryType = 'arraybuffer';
|
currentVoiceWs.binaryType = 'arraybuffer';
|
||||||
|
|
||||||
currentVoiceWs.onopen = async () => {
|
currentVoiceWs.onopen = async () => {
|
||||||
document.getElementById("voice-status").innerText = "Connected";
|
setVoiceStatus("connected");
|
||||||
document.getElementById("voice-status").style.color = "#4cd137";
|
|
||||||
let btn = document.getElementById("voice-btn-mic");
|
let btn = document.getElementById("voice-btn-mic");
|
||||||
if (btn) {
|
if (btn) {
|
||||||
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
if (isMicMuted) btn.classList.add("voice-btn-danger");
|
||||||
|
|
@ -169,8 +270,11 @@ async function startVoiceSession(serverUrl) {
|
||||||
try {
|
try {
|
||||||
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
const baseUrl = currentVoiceWs.url.split('/ws')[0];
|
||||||
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
const httpUrl = baseUrl.replace('ws:', 'http:').replace('wss:', 'https:');
|
||||||
|
const t0 = performance.now();
|
||||||
const res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
|
const res = await fetch(`${httpUrl}/room/users?room=${currentVoiceCallId}`);
|
||||||
const usersRaw = await res.json();
|
const usersRaw = await res.json();
|
||||||
|
voicePingMs = Math.round(performance.now() - t0);
|
||||||
|
updateVoicePing();
|
||||||
const users = usersRaw.map(u => String(u));
|
const users = usersRaw.map(u => String(u));
|
||||||
let changed = (users.length !== voiceActiveUsers.length);
|
let changed = (users.length !== voiceActiveUsers.length);
|
||||||
for(let u of users) if(!voiceActiveUsers.includes(u)) changed = true;
|
for(let u of users) if(!voiceActiveUsers.includes(u)) changed = true;
|
||||||
|
|
@ -210,9 +314,12 @@ async function startVoiceSession(serverUrl) {
|
||||||
if (micLevelBar) micLevelBar.style.width = percent + '%';
|
if (micLevelBar) micLevelBar.style.width = percent + '%';
|
||||||
|
|
||||||
if (db >= sensitivity) vadHangover = 75;
|
if (db >= sensitivity) vadHangover = 75;
|
||||||
|
let isSpeaking = vadHangover > 0 && !isMicMuted;
|
||||||
|
setTileSpeaking(String(window.id), isSpeaking);
|
||||||
|
|
||||||
if (vadHangover > 0 && !isMicMuted) {
|
if (vadHangover > 0 && !isMicMuted) {
|
||||||
vadHangover--;
|
vadHangover--;
|
||||||
if (micLevelBar) micLevelBar.style.backgroundColor = '#27ae60';
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'var(--big-green)';
|
||||||
|
|
||||||
if (!voiceAesCryptoKey) return;
|
if (!voiceAesCryptoKey) return;
|
||||||
const iv = crypto.getRandomValues(new Uint8Array(12));
|
const iv = crypto.getRandomValues(new Uint8Array(12));
|
||||||
|
|
@ -221,7 +328,7 @@ async function startVoiceSession(serverUrl) {
|
||||||
payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
payload[0] = 0; payload[1] = 0; payload.set(iv, 2); payload.set(new Uint8Array(cipher), 14);
|
||||||
currentVoiceWs.send(payload.buffer);
|
currentVoiceWs.send(payload.buffer);
|
||||||
} else {
|
} else {
|
||||||
if (micLevelBar) micLevelBar.style.backgroundColor = '#555';
|
if (micLevelBar) micLevelBar.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
@ -260,12 +367,7 @@ async function startVoiceSession(serverUrl) {
|
||||||
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
const decryptedBuffer = await crypto.subtle.decrypt({name: "AES-GCM", iv}, voiceAesCryptoKey, ciphertext);
|
||||||
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
if(receiverNode) receiverNode.port.postMessage({ clientId: audioId, audioData: decryptedBuffer }, [decryptedBuffer]);
|
||||||
|
|
||||||
let userItem = document.getElementById(`voice-tile-${clientId}`);
|
setTileSpeaking(clientId, true);
|
||||||
if (userItem) {
|
|
||||||
userItem.classList.add("speaking");
|
|
||||||
if (userItem.timer) clearTimeout(userItem.timer);
|
|
||||||
userItem.timer = setTimeout(() => { userItem.classList.remove("speaking"); }, 500);
|
|
||||||
}
|
|
||||||
} catch (err) {}
|
} catch (err) {}
|
||||||
});
|
});
|
||||||
} else if (type === 1 || type === 2) {
|
} else if (type === 1 || type === 2) {
|
||||||
|
|
@ -417,45 +519,102 @@ function handleCallUpdate(data) {
|
||||||
showIncomingCallUI(roomId);
|
showIncomingCallUI(roomId);
|
||||||
}
|
}
|
||||||
} else if (state.length === 0) {
|
} else if (state.length === 0) {
|
||||||
let incomingUi = document.getElementById("incoming-call-popup");
|
dismissIncomingCall();
|
||||||
if (incomingUi) incomingUi.remove();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function resolveCallerInfo(roomId) {
|
||||||
|
if (window.fetchEncrypted) {
|
||||||
|
try {
|
||||||
|
let infoPayload = await fetchEncrypted("group/info", roomId);
|
||||||
|
if (infoPayload && infoPayload.startsWith("{")) {
|
||||||
|
let info = JSON.parse(infoPayload);
|
||||||
|
if (info.string2) {
|
||||||
|
let pfpUrl = null;
|
||||||
|
if (window.getGroupAvatarUrl) {
|
||||||
|
try { pfpUrl = await getGroupAvatarUrl(roomId, info.string2); } catch (e) {}
|
||||||
|
}
|
||||||
|
return { name: info.string2, pfpUrl };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
let targetId = String(roomId);
|
||||||
|
let parts = targetId.split('_');
|
||||||
|
let myId = `${window.id};${window.host}`;
|
||||||
|
if (parts.length === 2 && (parts[0] === myId || parts[1] === myId)) {
|
||||||
|
targetId = parts[0] === myId ? parts[1] : parts[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
||||||
|
if (!name && window.fetchAsync) {
|
||||||
|
try {
|
||||||
|
let fetched = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
||||||
|
if (fetched && !fetched.startsWith("error:")) {
|
||||||
|
name = fetched;
|
||||||
|
if (window.dmUsernameCache) window.dmUsernameCache[targetId] = fetched;
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
|
||||||
|
let pfpUrl = window.dmPfpCache ? window.dmPfpCache[targetId] : null;
|
||||||
|
if (!pfpUrl && window.getAvatarUrl) {
|
||||||
|
try { pfpUrl = await window.getAvatarUrl(targetId, name || "User"); } catch (e) {}
|
||||||
|
if (pfpUrl && window.dmPfpCache) window.dmPfpCache[targetId] = pfpUrl;
|
||||||
|
}
|
||||||
|
return { name: (name ? name.split(':')[0] : null) || processBlah("title.unknown"), pfpUrl };
|
||||||
|
}
|
||||||
|
|
||||||
function showIncomingCallUI(roomId) {
|
function showIncomingCallUI(roomId) {
|
||||||
if (document.getElementById("incoming-call-popup") || currentVoiceWs) return;
|
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");
|
let incomingUi = document.createElement("div");
|
||||||
incomingUi.id = "incoming-call-popup";
|
incomingUi.id = "incoming-call-popup";
|
||||||
incomingUi.style.position = "fixed";
|
|
||||||
incomingUi.style.top = "80px";
|
|
||||||
incomingUi.style.left = "50%";
|
|
||||||
incomingUi.style.transform = "translateX(-50%)";
|
|
||||||
incomingUi.style.backgroundColor = "var(--main-bg-color, #1a1a1a)";
|
|
||||||
incomingUi.style.padding = "15px 25px";
|
|
||||||
incomingUi.style.borderRadius = "0.9rem";
|
|
||||||
incomingUi.style.boxShadow = "0 1rem 3rem rgba(0, 0, 0, 0.5)";
|
|
||||||
incomingUi.style.display = "flex";
|
|
||||||
incomingUi.style.alignItems = "center";
|
|
||||||
incomingUi.style.gap = "20px";
|
|
||||||
incomingUi.style.zIndex = "9999";
|
|
||||||
incomingUi.style.border = "var(--border-width, 1px) solid var(--light-border-color, #333)";
|
|
||||||
|
|
||||||
incomingUi.innerHTML = `
|
incomingUi.innerHTML = `
|
||||||
<div style="display: flex; flex-direction: column;">
|
<img class="incoming-call-avatar" src="${cachedPfp || "assets/default_avatar.png"}" alt="">
|
||||||
<span style="color: var(--fg-0); font-weight: bold; font-size: 1.1rem;">${processBlah("title.incoming.call") || "Incoming Voice Chat"}</span>
|
<div class="incoming-call-info">
|
||||||
<span style="color: var(--fg-1); font-size: 0.9rem;">${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>
|
||||||
<div style="display: flex; gap: 10px;">
|
<div class="incoming-call-actions">
|
||||||
<button onclick="document.getElementById('incoming-call-popup').remove(); initiateVoiceCall('${roomId}')" style="background: #27ae60; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
|
<button class="voice-call-btn accept" onclick="joinIncomingCall('${roomId}')">
|
||||||
${ICONS.call({width: "16px", height: "16px"})} Join
|
${ICONS.call({width: "1rem", height: "1rem"})} ${processBlah("action.call.join")}
|
||||||
</button>
|
</button>
|
||||||
<button onclick="document.getElementById('incoming-call-popup').remove()" style="background: #e74c3c; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; color: white; display: flex; align-items: center; gap: 6px; font-weight: 500;">
|
<button class="voice-call-btn decline" onclick="dismissIncomingCall()">
|
||||||
${ICONS.close({width: "16px", height: "16px"})} Decline
|
${ICONS.close({width: "1rem", height: "1rem"})} ${processBlah("action.call.decline")}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
document.body.appendChild(incomingUi);
|
document.body.appendChild(incomingUi);
|
||||||
|
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() {
|
||||||
|
let el = document.getElementById("incoming-call-popup");
|
||||||
|
if (!el || el.classList.contains("hide")) return;
|
||||||
|
el.classList.remove("show");
|
||||||
|
el.classList.add("hide");
|
||||||
|
setTimeout(() => el.remove(), 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
function joinIncomingCall(roomId) {
|
||||||
|
dismissIncomingCall();
|
||||||
|
initiateVoiceCall(roomId);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function sendVoiceSignalToUser(targetUserId, roomId) {
|
async function sendVoiceSignalToUser(targetUserId, roomId) {
|
||||||
|
|
@ -503,6 +662,39 @@ async function handleRoomSignal(data) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function resolveVoiceChatTitle() {
|
||||||
|
try {
|
||||||
|
if (currentVoiceCallType === 'groups') {
|
||||||
|
if (!currentVoiceCallId || !window.fetchEncrypted) return null;
|
||||||
|
let infoPayload = await fetchEncrypted("group/info", currentVoiceCallId);
|
||||||
|
if (infoPayload && infoPayload.startsWith("{")) {
|
||||||
|
return JSON.parse(infoPayload).string2 || null;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (!currentVoiceCallId) return null;
|
||||||
|
let parts = String(currentVoiceCallId).split('_');
|
||||||
|
let myId = `${window.id};${window.host}`;
|
||||||
|
let targetId = parts[0] === myId ? parts[1] : parts[0];
|
||||||
|
if (!targetId) return null;
|
||||||
|
let name = window.dmUsernameCache ? window.dmUsernameCache[targetId] : null;
|
||||||
|
if (!name && window.fetchAsync) {
|
||||||
|
name = await window.fetchAsync(`${window.url}/idtoname?id=${targetId}`);
|
||||||
|
if (name && !name.startsWith("error:") && window.dmUsernameCache) window.dmUsernameCache[targetId] = name;
|
||||||
|
}
|
||||||
|
if (!name || name.startsWith("error:")) return null;
|
||||||
|
return name.split(':')[0];
|
||||||
|
} catch (e) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateVoiceChatTitle() {
|
||||||
|
let name = await resolveVoiceChatTitle();
|
||||||
|
let el = document.querySelector("#voice-header .voice-title span");
|
||||||
|
if (el && name) el.innerText = name;
|
||||||
|
}
|
||||||
|
|
||||||
function showVoiceUI() {
|
function showVoiceUI() {
|
||||||
if (voiceUiContainer) return;
|
if (voiceUiContainer) return;
|
||||||
|
|
||||||
|
|
@ -510,40 +702,49 @@ function showVoiceUI() {
|
||||||
voiceUiContainer.id = "voice-call-popup";
|
voiceUiContainer.id = "voice-call-popup";
|
||||||
|
|
||||||
voiceUiContainer.innerHTML = `
|
voiceUiContainer.innerHTML = `
|
||||||
<div id="voice-header" style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
|
<div id="voice-header">
|
||||||
<div style="display: flex; align-items: center; gap: 8px;">
|
<div class="voice-title">
|
||||||
<span style="color: var(--fg-0); font-weight: 500;">Voice Chat</span>
|
${ICONS.call({width: "1.1rem", height: "1.1rem"})}
|
||||||
|
<span>${processBlah("title.voice.chat")}</span>
|
||||||
|
</div>
|
||||||
|
<div id="voice-status" class="connecting">
|
||||||
|
<span class="status-dot"></span>
|
||||||
|
<span class="status-ping" id="voice-ping"></span>
|
||||||
|
<span class="voice-status-text">${processBlah("status.voice.connecting")}</span>
|
||||||
</div>
|
</div>
|
||||||
<div id="voice-status" style="font-size: 0.8rem; color: var(--fg-1)">Connecting...</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="voice-users"></div>
|
<div id="voice-users"></div>
|
||||||
<div style="height: 4px; background: var(--bg-2); width: 100%;">
|
<div class="voice-mic-meter">
|
||||||
<div id="voice-mic-level" style="height: 100%; width: 0%; background: #27ae60; transition: width 0.1s linear;"></div>
|
<div id="voice-mic-level"></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="voice-footer" class="voice-controls">
|
<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: "20px", height: "20px"})}
|
${ICONS.mic({width: "1.4rem", height: "1.4rem"})}
|
||||||
</button>
|
</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>
|
<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>
|
||||||
<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>
|
<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>
|
||||||
<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: "20px", height: "20px"})}
|
${ICONS.call({width: "1.4rem", height: "1.4rem"})}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
document.body.appendChild(voiceUiContainer);
|
document.body.appendChild(voiceUiContainer);
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => voiceUiContainer.classList.add("show"));
|
||||||
|
});
|
||||||
|
|
||||||
let header = document.getElementById("voice-header");
|
let header = document.getElementById("voice-header");
|
||||||
let isDragging = false;
|
|
||||||
let startX, startY, initialLeft, initialTop;
|
let startX, startY, initialLeft, initialTop;
|
||||||
|
|
||||||
header.addEventListener('mousedown', (e) => {
|
header.addEventListener('pointerdown', (e) => {
|
||||||
isDragging = true;
|
if (e.button !== undefined && e.button !== 0) return;
|
||||||
|
voiceDragState = true;
|
||||||
|
try { header.setPointerCapture(e.pointerId); } catch (err) {}
|
||||||
let rect = voiceUiContainer.getBoundingClientRect();
|
let rect = voiceUiContainer.getBoundingClientRect();
|
||||||
initialLeft = rect.left;
|
initialLeft = rect.left;
|
||||||
initialTop = rect.top;
|
initialTop = rect.top;
|
||||||
|
|
@ -553,17 +754,149 @@ function showVoiceUI() {
|
||||||
voiceUiContainer.style.bottom = "auto";
|
voiceUiContainer.style.bottom = "auto";
|
||||||
voiceUiContainer.style.left = initialLeft + "px";
|
voiceUiContainer.style.left = initialLeft + "px";
|
||||||
voiceUiContainer.style.top = initialTop + "px";
|
voiceUiContainer.style.top = initialTop + "px";
|
||||||
|
clampVoiceWindowToViewport(voiceUiContainer);
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('mousemove', (e) => {
|
header.addEventListener('pointermove', (e) => {
|
||||||
if (!isDragging) return;
|
if (!voiceDragState) return;
|
||||||
let dx = e.clientX - startX;
|
let dx = e.clientX - startX;
|
||||||
let dy = e.clientY - startY;
|
let dy = e.clientY - startY;
|
||||||
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
voiceUiContainer.style.left = (initialLeft + dx) + "px";
|
||||||
voiceUiContainer.style.top = (initialTop + dy) + "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() {
|
function updateVoiceUIUsers() {
|
||||||
|
|
@ -574,9 +907,10 @@ function updateVoiceUIUsers() {
|
||||||
let div = document.getElementById(`voice-tile-${u}`);
|
let div = document.getElementById(`voice-tile-${u}`);
|
||||||
if (!div) {
|
if (!div) {
|
||||||
div = document.createElement("div");
|
div = document.createElement("div");
|
||||||
div.className = "voice-tile";
|
div.className = "voice-tile tile-enter";
|
||||||
div.id = `voice-tile-${u}`;
|
div.id = `voice-tile-${u}`;
|
||||||
div.onclick = (e) => showVoiceUserSettings(u, e);
|
div.onclick = (e) => showVoiceUserSettings(u, e);
|
||||||
|
setTimeout(() => div.classList.remove("tile-enter"), 400);
|
||||||
|
|
||||||
div.innerHTML = `
|
div.innerHTML = `
|
||||||
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
<div class="voice-tile-name" id="voice-name-${u}">${u}</div>
|
||||||
|
|
@ -596,8 +930,8 @@ function updateVoiceUIUsers() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
let resolvedName = authorName && authorName !== u ? authorName : null;
|
||||||
if (!authorName && u === String(window.id)) authorName = window.username;
|
if (!resolvedName && u === String(window.id) && window.username) resolvedName = window.host ? `${window.username}:${window.host}` : window.username;
|
||||||
|
|
||||||
let avatarRes = window.dmPfpCache ? window.dmPfpCache[u] : null;
|
let avatarRes = window.dmPfpCache ? window.dmPfpCache[u] : null;
|
||||||
let avatarUrl = avatarRes ? avatarRes : "assets/default_avatar.png";
|
let avatarUrl = avatarRes ? avatarRes : "assets/default_avatar.png";
|
||||||
|
|
@ -614,7 +948,7 @@ function updateVoiceUIUsers() {
|
||||||
|
|
||||||
div.style.backgroundImage = `url('${avatarUrl.replace(/'/g, "\\'")}')`;
|
div.style.backgroundImage = `url('${avatarUrl.replace(/'/g, "\\'")}')`;
|
||||||
let nameEl = document.getElementById(`voice-name-${u}`);
|
let nameEl = document.getElementById(`voice-name-${u}`);
|
||||||
if (nameEl) nameEl.innerText = authorName || u;
|
if (nameEl) nameEl.innerText = resolvedName ? `${resolvedName} (${u})` : String(u);
|
||||||
}
|
}
|
||||||
|
|
||||||
Array.from(container.children).forEach(child => {
|
Array.from(container.children).forEach(child => {
|
||||||
|
|
@ -634,15 +968,13 @@ function updateVoiceUIUsers() {
|
||||||
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
let div = document.getElementById(`voice-tile-stream-${decoderId}`);
|
||||||
if (!div) {
|
if (!div) {
|
||||||
div = document.createElement("div");
|
div = document.createElement("div");
|
||||||
div.className = "voice-tile";
|
div.className = "voice-tile tile-enter";
|
||||||
div.id = `voice-tile-stream-${decoderId}`;
|
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;
|
let mediaEl = streamData.canvas || streamData.video;
|
||||||
if (mediaEl) {
|
if (mediaEl) {
|
||||||
mediaEl.style.width = "100%";
|
|
||||||
mediaEl.style.height = "100%";
|
|
||||||
mediaEl.style.objectFit = "cover";
|
|
||||||
mediaEl.style.background = "#000";
|
|
||||||
div.appendChild(mediaEl);
|
div.appendChild(mediaEl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -654,10 +986,13 @@ function updateVoiceUIUsers() {
|
||||||
}
|
}
|
||||||
|
|
||||||
let authorName = window.dmUsernameCache ? window.dmUsernameCache[clientId] : null;
|
let authorName = window.dmUsernameCache ? window.dmUsernameCache[clientId] : null;
|
||||||
if (authorName && authorName.includes(':')) authorName = authorName.split(':')[0];
|
if (!authorName && clientId === String(window.id) && window.username) authorName = window.host ? `${window.username}:${window.host}` : window.username;
|
||||||
|
|
||||||
|
let streamLabel = processBlah(type == '1' ? "label.stream.cam" : "label.stream.screen");
|
||||||
|
let baseName = authorName && authorName !== clientId ? `${authorName} (${clientId})` : clientId;
|
||||||
|
|
||||||
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
let nameEl = document.getElementById(`voice-stream-name-${decoderId}`);
|
||||||
if (nameEl) nameEl.innerText = `${authorName || clientId} (${type == '1' ? 'Cam' : 'Screen'})`;
|
if (nameEl) nameEl.innerText = `${baseName} · ${streamLabel}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
Array.from(container.children).forEach(child => {
|
Array.from(container.children).forEach(child => {
|
||||||
|
|
@ -668,23 +1003,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();
|
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");
|
let popup = document.createElement("div");
|
||||||
popup.id = "voice-user-settings";
|
popup.id = "voice-user-settings";
|
||||||
popup.innerHTML = `
|
popup.innerHTML = isStream ? `
|
||||||
<div class="voice-setting-row">
|
<div class="voice-setting-row">
|
||||||
<label>Mic Vol <span id="val-mic-${clientId}">100%</span></label>
|
<label>${processBlah("label.stream.volume")} <span id="val-screen-${clientId}">${getStoredVolume('screen', clientId)}%</span></label>
|
||||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'mic')">
|
<input type="range" min="0" max="200" value="${getStoredVolume('screen', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
||||||
</div>
|
</div>
|
||||||
|
` : `
|
||||||
<div class="voice-setting-row">
|
<div class="voice-setting-row">
|
||||||
<label>Stream Vol <span id="val-screen-${clientId}">100%</span></label>
|
<label>${processBlah("label.user.volume")} <span id="val-vol-${clientId}">${getStoredVolume('vol', clientId)}%</span></label>
|
||||||
<input type="range" min="0" max="200" value="100" oninput="updateVoiceVol('${clientId}', this.value, 'screen')">
|
<input type="range" min="0" max="200" value="${getStoredVolume('vol', clientId)}" oninput="updateVoiceVol('${clientId}', this.value, 'vol')">
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
@ -696,17 +1115,15 @@ function showVoiceUserSettings(clientId, e) {
|
||||||
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
|
if (top + rect.height > window.innerHeight) top = window.innerHeight - rect.height - 10;
|
||||||
popup.style.left = left + "px";
|
popup.style.left = left + "px";
|
||||||
popup.style.top = top + "px";
|
popup.style.top = top + "px";
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
requestAnimationFrame(() => popup.classList.add("open"));
|
||||||
|
});
|
||||||
|
|
||||||
const closePopup = (ev) => {
|
document.addEventListener('click', closeVoiceUserSettingsOnOutsideClick);
|
||||||
if (!popup.contains(ev.target)) {
|
|
||||||
popup.remove();
|
|
||||||
document.removeEventListener('mousedown', closePopup);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
setTimeout(() => document.addEventListener('mousedown', closePopup), 10);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.updateVoiceVol = function(clientId, val, type) {
|
window.updateVoiceVol = function(clientId, val, type) {
|
||||||
|
voiceVolumeState[`${type}:${clientId}`] = val;
|
||||||
let el = document.getElementById(`val-${type}-${clientId}`);
|
let el = document.getElementById(`val-${type}-${clientId}`);
|
||||||
if (el) el.innerText = val + '%';
|
if (el) el.innerText = val + '%';
|
||||||
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
const audioId = type === 'screen' ? `${clientId}_screen` : clientId;
|
||||||
|
|
@ -718,6 +1135,7 @@ window.updateVoiceVol = function(clientId, val, type) {
|
||||||
|
|
||||||
function toggleVoiceMic() {
|
function toggleVoiceMic() {
|
||||||
isMicMuted = !isMicMuted;
|
isMicMuted = !isMicMuted;
|
||||||
|
if (isMicMuted) setTileSpeaking(String(window.id), false);
|
||||||
let btn = document.getElementById("voice-btn-mic");
|
let btn = document.getElementById("voice-btn-mic");
|
||||||
if (btn) {
|
if (btn) {
|
||||||
if (isMicMuted) {
|
if (isMicMuted) {
|
||||||
|
|
@ -729,6 +1147,8 @@ function toggleVoiceMic() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function endVoiceSession() {
|
function endVoiceSession() {
|
||||||
|
setVoiceStatus("disconnected");
|
||||||
|
|
||||||
if (currentVoiceCallId) {
|
if (currentVoiceCallId) {
|
||||||
let payload = JSON.stringify({ string1: currentVoiceCallType, string2: currentVoiceCallId });
|
let payload = JSON.stringify({ string1: currentVoiceCallType, string2: currentVoiceCallId });
|
||||||
if (window.fetchEncrypted) window.fetchEncrypted("room/voice/leave", payload).catch(()=>{});
|
if (window.fetchEncrypted) window.fetchEncrypted("room/voice/leave", payload).catch(()=>{});
|
||||||
|
|
@ -779,9 +1199,24 @@ function endVoiceSession() {
|
||||||
currentVoiceCallType = null;
|
currentVoiceCallType = null;
|
||||||
currentVoiceCallId = null;
|
currentVoiceCallId = null;
|
||||||
|
|
||||||
|
clearAllSpeaking();
|
||||||
|
|
||||||
|
if (voiceResizeAbort) {
|
||||||
|
voiceResizeAbort.abort();
|
||||||
|
voiceResizeAbort = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (voiceGridRO) {
|
||||||
|
voiceGridRO.disconnect();
|
||||||
|
voiceGridRO = null;
|
||||||
|
}
|
||||||
|
|
||||||
if (voiceUiContainer) {
|
if (voiceUiContainer) {
|
||||||
voiceUiContainer.remove();
|
let popupEl = voiceUiContainer;
|
||||||
voiceUiContainer = null;
|
voiceUiContainer = null;
|
||||||
|
popupEl.classList.remove("show");
|
||||||
|
popupEl.classList.add("hide");
|
||||||
|
setTimeout(() => popupEl.remove(), 350);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -895,7 +1330,7 @@ async function startHardwareVideo(btnEl, streamPromise, typeLabel, typeId) {
|
||||||
} else if (typeId === 1) { camControl = null; }
|
} else if (typeId === 1) { camControl = null; }
|
||||||
};
|
};
|
||||||
return { stop: stopFunction };
|
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() {
|
function toggleVoiceCam() {
|
||||||
|
|
@ -905,7 +1340,7 @@ function toggleVoiceCam() {
|
||||||
} else {
|
} else {
|
||||||
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
navigator.mediaDevices.getUserMedia({video: {width: {ideal: 1280}, height: {ideal: 720}}}).then(stream => {
|
||||||
startHardwareVideo(btn, Promise.resolve(stream), "Camera", 1).then(ctrl => camControl = ctrl);
|
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}`)));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -914,11 +1349,11 @@ function toggleVoiceScreen() {
|
||||||
if (screenControl) {
|
if (screenControl) {
|
||||||
screenControl.stop();
|
screenControl.stop();
|
||||||
} else {
|
} 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({
|
navigator.mediaDevices.getDisplayMedia({
|
||||||
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
video: true, audio: { autoGainControl: false, echoCancellation: false, noiseSuppression: false }, systemAudio: "include", selfBrowserSurface: "exclude"
|
||||||
}).then(stream => {
|
}).then(stream => {
|
||||||
startHardwareVideo(btn, Promise.resolve(stream), "Screen", 2).then(ctrl => screenControl = ctrl);
|
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