mirrors/fcast
1
0
Fork 0
mirror of https://gitlab.com/futo-org/fcast.git synced 2025-08-05 16:57:02 +00:00
Code Activity

Receivers: Reworked network interface UI

Browse source
This commit is contained in:
Michael Hollister 2025-04-22 17:28:02 -05:00
parent ed89b61cab
commit 28a617daa7
15 changed files with 491 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

87
receivers/common/web/main/Renderer.ts
View file

@ -7,6 +7,7 @@ const connectionStatusText = document.getElementById("connection-status-text");
const connectionStatusSpinner = document.getElementById("connection-spinner");
const connectionStatusCheck = document.getElementById("connection-check");
let connections = [];
let renderedAddresses = null;
// Window might be re-created while devices are still connected
window.targetAPI.onPing((_event, value: any) => {
@ -56,14 +57,41 @@ function renderIPsAndQRCode() {
const value = window.targetAPI.getDeviceInfo();
console.log("device info", value);
const ipsElement = document.getElementById('ips');
if (ipsElement) {
ipsElement.innerHTML = `IPs<br>${value.addresses.join('<br>')}`;
const addresses = [];
value.interfaces.forEach((e) => addresses.push(e.address));
const connInfo = document.getElementById('connection-information');
const connError = document.getElementById('connection-error');
if (renderedAddresses !== null && addresses.length > 0) {
toast("Network connections has changed, please reconnect sender devices to receiver if you experience issues", ToastIcon.WARNING);
}
else if (addresses.length === 0) {
connInfo.setAttribute("style", "display: none");
connError.setAttribute("style", "display: block");
if (renderedAddresses !== null) {
toast("Lost network connection, please reconnect to a network", ToastIcon.ERROR);
}
renderedAddresses = []
return;
}
if (renderedAddresses !== null && renderedAddresses.length === 0) {
connInfo.setAttribute("style", "display: block");
connError.setAttribute("style", "display: none");
}
renderIPs(value.interfaces);
if (JSON.stringify(addresses) === JSON.stringify(renderedAddresses)) {
return;
}
renderedAddresses = addresses;
const fcastConfig = {
name: value.name,
addresses: value.addresses,
addresses: addresses,
services: [
{ port: 46899, type: 0 }, //TCP
{ port: 46898, type: 1 }, //WS
@ -98,3 +126,54 @@ function renderIPsAndQRCode() {
onQRCodeRendered();
}
function renderIPs(interfaces: any) {
const ipsElement = document.getElementById('ips');
if (ipsElement) {
const ipsIconColumn = document.getElementById('ips-iface-icon');
ipsIconColumn.innerHTML = '';
const ipsTextColumn = document.getElementById('ips-iface-text');
ipsTextColumn.innerHTML = '';
const ipsNameColumn = document.getElementById('ips-iface-name');
ipsNameColumn.innerHTML = '';
for (const iface of interfaces) {
const ipIcon = document.createElement("div");
let icon = 'iconSize ';
if (iface.type === 'wired') {
icon += 'ip-wired-icon';
}
else if (iface.type === 'wireless' && (iface.signalLevel === 0 || iface.signalLevel >= 90)) {
icon += 'ip-wireless-4-icon';
}
else if (iface.type === 'wireless' && iface.signalLevel >= 70) {
icon += 'ip-wireless-3-icon';
}
else if (iface.type === 'wireless' && iface.signalLevel >= 50) {
icon += 'ip-wireless-2-icon';
}
else if (iface.type === 'wireless' && iface.signalLevel >= 30) {
icon += 'ip-wireless-1-icon';
}
else if (iface.type === 'wireless') {
icon += 'ip-wireless-0-icon';
}
ipIcon.className = icon;
ipsIconColumn.append(ipIcon);
const ipText = document.createElement("div");
ipText.className = 'ip-entry-text';
ipText.textContent = iface.address;
ipsTextColumn.append(ipText);
const ipName = document.createElement("div");
ipName.className = 'ip-entry-text';
ipName.textContent = iface.name;
ipsNameColumn.append(ipName);
}
}
}

82
receivers/common/web/main/common.css
View file

@ -45,6 +45,12 @@ body, html {
margin-bottom: 3px;
}
.iconSize {
width: 32px;
height: 32px;
background-size: cover;
}
#ui-container {
display: flex;
flex-direction: column;
@ -134,11 +140,85 @@ body, html {
font-weight: bold;
}
#connection-status-text, #ips, #automatic-discovery {
#connection-error {
display: none;
}
#connection-error-icon {
width: 84px;
height: 84px;
margin: auto;
margin-top: 20px;
background-image: url(../assets/icons/app/error.svg);
background-size: cover;
}
#connection-error-text {
margin-top: 20px;
font-weight: bold;
}
#connection-status-text {
margin-top: 20px;
white-space: pre;
}
#ips {
display: flex;
margin-top: 20px;
white-space: pre;
gap: 10px;
justify-content: center;
}
#ips-iface-icon {
display: flex;
flex-direction: column;
}
#ips-iface-text {
display: flex;
flex-direction: column;
margin-right: 20px;
align-items: start;
}
#ips-iface-name {
display: flex;
flex-direction: column;
align-items: start;
}
.ip-entry-text {
margin-top: 4px;
margin-bottom: 4px;
}
.ip-wired-icon {
background-image: url(../assets/icons/app/network-light.svg);
}
.ip-wireless-4-icon {
background-image: url(../assets/icons/app/wifi-strength-4.svg);
}
.ip-wireless-3-icon {
background-image: url(../assets/icons/app/wifi-strength-3.svg);
}
.ip-wireless-2-icon {
background-image: url(../assets/icons/app/wifi-strength-2.svg);
}
.ip-wireless-1-icon {
background-image: url(../assets/icons/app/wifi-strength-1.svg);
}
.ip-wireless-0-icon {
background-image: url(../assets/icons/app/wifi-strength-outline.svg);
}
#connection-spinner {
padding: 20px;
}