124 lines
3.1 KiB
Plaintext
124 lines
3.1 KiB
Plaintext
<!-- Mobile Toggle Button -->
|
|
<div class="mobile-toggle" id="toggleBtn">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
|
|
<!-- Mobile Overlay -->
|
|
<div id="overlay"></div>
|
|
|
|
<div class="sidebar" id="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" alt="Live Feed" />
|
|
<div id="placeholder" class="placeholder">No app selected</div>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
const vaId = "<%= vaId %>";
|
|
const clientId = "<%= clientId %>";
|
|
const projectId = "<%= projectId %>";
|
|
const token = localStorage.getItem("knoptpq");
|
|
|
|
const socket = io({
|
|
auth: {
|
|
token: token,
|
|
userType: "client",
|
|
projectId: projectId,
|
|
vaId: vaId
|
|
},
|
|
});
|
|
|
|
socket.emit("register", {
|
|
role: "client",
|
|
id: vaId,
|
|
projectId: "<%= projectId %>",
|
|
clientId: clientId
|
|
});
|
|
|
|
|
|
|
|
const sidebar = document.getElementById("sidebar");
|
|
const toggleBtn = document.getElementById("toggleBtn");
|
|
const overlay = document.getElementById("overlay");
|
|
|
|
const appsList = document.getElementById("appsList");
|
|
const liveImage = document.getElementById("liveImage");
|
|
const selectedAppTitle = document.getElementById("selectedAppTitle");
|
|
const placeholder = document.getElementById("placeholder");
|
|
|
|
let currentApp = null;
|
|
|
|
/* MOBILE SIDEBAR TOGGLE */
|
|
toggleBtn.onclick = () => {
|
|
sidebar.classList.add("open");
|
|
overlay.classList.add("show");
|
|
};
|
|
|
|
overlay.onclick = () => {
|
|
sidebar.classList.remove("open");
|
|
overlay.classList.remove("show");
|
|
};
|
|
|
|
socket.on("connected", () => {
|
|
socket.emit("requestVisibleApps", { token });
|
|
});
|
|
|
|
/* Receive visible apps */
|
|
socket.on("receiveVisibleApps", ({ apps, vaId: senderVaId }) => {
|
|
if (vaId !== senderVaId) return;
|
|
|
|
appsList.innerHTML = "";
|
|
|
|
if (!apps?.length) {
|
|
appsList.innerHTML = "<p style='color:#777;'>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;
|
|
|
|
placeholder.style.display = "none";
|
|
liveImage.style.display = "none";
|
|
|
|
socket.emit("selectApp", { appTitle: app.name, clientId, vaId, projectId });
|
|
|
|
// Close sidebar on mobile
|
|
sidebar.classList.remove("open");
|
|
overlay.classList.remove("show");
|
|
};
|
|
|
|
appsList.appendChild(div);
|
|
});
|
|
});
|
|
|
|
socket.on("authError", () => {
|
|
socket.disconnect();
|
|
localStorage.removeItem("knoptpq");
|
|
window.location.href = "/client/login";
|
|
});
|
|
|
|
/* Receive images */
|
|
socket.on("receiveImage", (base64, title) => {
|
|
if (currentApp && title === currentApp) {
|
|
liveImage.src = base64;
|
|
liveImage.style.display = "block";
|
|
placeholder.style.display = "none";
|
|
}
|
|
});
|
|
</script> |