142 lines
3.3 KiB
Plaintext
142 lines
3.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Live Screen Feed</title>
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
background: #111;
|
|
color: #fff;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 280px;
|
|
background: #1b1b1b;
|
|
border-right: 1px solid #333;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
}
|
|
|
|
.app {
|
|
background: #222;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
margin-bottom: 8px;
|
|
cursor: pointer;
|
|
transition: background 0.3s ease;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.app:hover {
|
|
background: #333;
|
|
}
|
|
|
|
.app.active {
|
|
background: #6C63FF;
|
|
color: white;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
img {
|
|
width: 90%;
|
|
max-width: 900px;
|
|
border: 2px solid #555;
|
|
border-radius: 10px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.no-image {
|
|
font-size: 14px;
|
|
color: #888;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="sidebar">
|
|
<h3>Visible Apps</h3>
|
|
<div id="appsList"></div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h2 id="selectedAppTitle">Select an app to view</h2>
|
|
<img id="liveImage" src="" alt="Waiting for image..." class="no-image" />
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
const socket = io({
|
|
auth: {
|
|
token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY5MGIzMjhkMDkxMDFmNzRjZjUyNGMwNyIsImVtYWlsIjoiYmhhZ3dhbi5yQGhpY2dsb2JhbHNvbHV0aW9ucy5jb20iLCJuYW1lIjoiUm9oaXQiLCJpYXQiOjE3NjI4NTgxOTMsImV4cCI6MTc2Mjk0NDU5M30.UlHy3RU9W5LOid7smG7WzyNT7dnqhQT4qqzRrN1axmU"
|
|
},
|
|
});
|
|
|
|
const clientId = "691311fece83c986eb8a4e89";
|
|
socket.emit("register", { role: "client", id: clientId });
|
|
|
|
const appsList = document.getElementById("appsList");
|
|
const liveImage = document.getElementById("liveImage");
|
|
const selectedAppTitle = document.getElementById("selectedAppTitle");
|
|
let currentApp = null;
|
|
|
|
// 🟢 Receive visible apps from client
|
|
socket.on("receiveVisibleApps", (apps) => {
|
|
appsList.innerHTML = "";
|
|
if (!apps?.length) {
|
|
appsList.innerHTML = "<p>No visible apps</p>";
|
|
return;
|
|
}
|
|
|
|
apps.forEach(app => {
|
|
const div = document.createElement("div");
|
|
div.classList.add("app");
|
|
div.textContent = app.name || "Unnamed App";
|
|
div.onclick = () => {
|
|
document.querySelectorAll(".app").forEach(el => el.classList.remove("active"));
|
|
div.classList.add("active");
|
|
currentApp = app.name;
|
|
selectedAppTitle.textContent = app.name;
|
|
|
|
// 🟠 Tell server which app VA wants to monitor
|
|
socket.emit("selectApp", { appTitle: app.name, clientId });
|
|
};
|
|
appsList.appendChild(div);
|
|
});
|
|
});
|
|
|
|
// 🟣 Receive images only for the selected app
|
|
socket.on("receiveImage", (base64, title) => {
|
|
if (currentApp && title === currentApp) {
|
|
liveImage.src = base64;
|
|
liveImage.classList.remove("no-image");
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|