This commit is contained in:
parent
ae3224c18b
commit
a3b03fdec4
GPG key ID:
8F553AA4320FC711
14 changed files with 2200 additions and 37 deletions
511
public/js/moveableChat.js
Normal file
511
public/js/moveableChat.js
Normal file
|
|
@ -0,0 +1,511 @@
|
|||
class MoveableChatFrame {
|
||||
constructor() {
|
||||
try {
|
||||
this.initializeElements();
|
||||
if (!this.frame) {
|
||||
console.warn(
|
||||
"MoveableChatFrame: Required elements not found, skipping initialization",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.isDragging = false;
|
||||
this.isResizing = false;
|
||||
this.isMinimized = false;
|
||||
this.dragOffset = { x: 0, y: 0 };
|
||||
this.resizeHandle = null;
|
||||
this.chatLoaded = false;
|
||||
|
||||
this.initializeEventListeners();
|
||||
this.loadSavedState();
|
||||
} catch (error) {
|
||||
console.error("MoveableChatFrame initialization failed:", error);
|
||||
}
|
||||
}
|
||||
|
||||
initializeElements() {
|
||||
this.frame = document.getElementById("moveableChatFrame");
|
||||
this.header = document.getElementById("chatFrameHeader");
|
||||
this.toggleBtn = document.getElementById("toggleChatBtn");
|
||||
this.minimizeBtn = document.getElementById("minimizeChatBtn");
|
||||
this.closeBtn = document.getElementById("closeChatBtn");
|
||||
|
||||
if (!this.frame || !this.header || !this.toggleBtn) {
|
||||
console.warn("MoveableChatFrame: Missing required DOM elements");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
initializeEventListeners() {
|
||||
if (
|
||||
!this.toggleBtn ||
|
||||
!this.minimizeBtn ||
|
||||
!this.closeBtn ||
|
||||
!this.header
|
||||
) {
|
||||
console.warn("MoveableChatFrame: Cannot bind events - missing elements");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.toggleBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.toggleChat();
|
||||
});
|
||||
|
||||
this.minimizeBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.toggleMinimize();
|
||||
});
|
||||
|
||||
this.closeBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.closeChat();
|
||||
});
|
||||
|
||||
this.header.addEventListener("mousedown", (e) => {
|
||||
if (e.target.closest(".chat-control-btn")) return;
|
||||
e.preventDefault();
|
||||
this.startDragging(e);
|
||||
});
|
||||
|
||||
const resizeHandles = this.frame.querySelectorAll(".resize-handle");
|
||||
for (const handle of resizeHandles) {
|
||||
handle.addEventListener("mousedown", (e) => {
|
||||
e.preventDefault();
|
||||
this.startResizing(e, handle);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener(
|
||||
"mousemove",
|
||||
(e) => {
|
||||
if (this.isDragging) {
|
||||
this.drag(e);
|
||||
} else if (this.isResizing) {
|
||||
this.resize(e);
|
||||
}
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
|
||||
document.addEventListener(
|
||||
"mouseup",
|
||||
() => {
|
||||
this.stopDragging();
|
||||
this.stopResizing();
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
|
||||
this.header.addEventListener(
|
||||
"touchstart",
|
||||
(e) => {
|
||||
if (e.target.closest(".chat-control-btn")) return;
|
||||
e.preventDefault();
|
||||
this.startDragging(e.touches[0]);
|
||||
},
|
||||
{ passive: false },
|
||||
);
|
||||
|
||||
document.addEventListener(
|
||||
"touchmove",
|
||||
(e) => {
|
||||
if (this.isDragging) {
|
||||
e.preventDefault();
|
||||
this.drag(e.touches[0]);
|
||||
}
|
||||
},
|
||||
{ passive: false },
|
||||
);
|
||||
|
||||
document.addEventListener(
|
||||
"touchend",
|
||||
() => {
|
||||
this.stopDragging();
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
() => {
|
||||
this.constrainToViewport();
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error binding MoveableChatFrame events:", error);
|
||||
}
|
||||
}
|
||||
|
||||
toggleChat() {
|
||||
if (!this.frame) return;
|
||||
|
||||
if (this.frame.style.display === "none") {
|
||||
this.openChat();
|
||||
} else {
|
||||
this.closeChat();
|
||||
}
|
||||
}
|
||||
|
||||
openChat() {
|
||||
if (!this.frame) return;
|
||||
|
||||
this.frame.style.display = "flex";
|
||||
document.body.classList.add("chat-open");
|
||||
|
||||
if (!this.chatLoaded) {
|
||||
this.loadChatContent();
|
||||
}
|
||||
|
||||
this.saveState();
|
||||
}
|
||||
|
||||
loadChatContent() {
|
||||
const streamId = document.querySelector('meta[name="stream-id"]')?.content;
|
||||
if (!streamId) {
|
||||
this.showChatError("Stream ID not found");
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Loading chat for stream ID:", streamId);
|
||||
this.showLoading();
|
||||
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.className = "chat-frame-iframe";
|
||||
iframe.src = `/chat/${encodeURIComponent(streamId)}`;
|
||||
iframe.style.cssText = `
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0 0 12px 12px;
|
||||
background: var(--bg-card);
|
||||
`;
|
||||
|
||||
iframe.onload = () => {
|
||||
this.chatLoaded = true;
|
||||
this.hideLoading();
|
||||
console.log("Chat iframe loaded successfully");
|
||||
};
|
||||
|
||||
iframe.onerror = () => {
|
||||
console.error("Failed to load chat iframe");
|
||||
this.showChatError("Failed to load chat");
|
||||
};
|
||||
|
||||
const loadTimeout = setTimeout(() => {
|
||||
if (!this.chatLoaded) {
|
||||
console.warn("Chat loading timeout");
|
||||
this.showChatError("Chat loading timeout");
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
iframe.addEventListener("load", () => {
|
||||
clearTimeout(loadTimeout);
|
||||
});
|
||||
|
||||
const content = this.frame.querySelector(".chat-frame-content");
|
||||
if (content) {
|
||||
content.innerHTML = "";
|
||||
content.appendChild(iframe);
|
||||
}
|
||||
}
|
||||
|
||||
closeChat() {
|
||||
if (!this.frame) return;
|
||||
|
||||
this.frame.style.display = "none";
|
||||
document.body.classList.remove("chat-open");
|
||||
|
||||
const content = this.frame.querySelector(".chat-frame-content");
|
||||
if (content) {
|
||||
content.innerHTML = "";
|
||||
}
|
||||
|
||||
this.chatLoaded = false;
|
||||
this.saveState();
|
||||
}
|
||||
|
||||
toggleMinimize() {
|
||||
if (!this.frame || !this.minimizeBtn) return;
|
||||
|
||||
this.isMinimized = !this.isMinimized;
|
||||
this.frame.classList.toggle("minimized", this.isMinimized);
|
||||
|
||||
const icon = this.minimizeBtn.querySelector("svg path");
|
||||
if (icon) {
|
||||
if (this.isMinimized) {
|
||||
icon.setAttribute("d", "M18 15l-6-6-6 6");
|
||||
this.minimizeBtn.title = "Maximize";
|
||||
} else {
|
||||
icon.setAttribute("d", "M6 9l6 6 6-6");
|
||||
this.minimizeBtn.title = "Minimize";
|
||||
}
|
||||
}
|
||||
|
||||
this.saveState();
|
||||
}
|
||||
|
||||
showLoading() {
|
||||
if (!this.frame) return;
|
||||
|
||||
const loadingDiv = document.createElement("div");
|
||||
loadingDiv.className = "chat-frame-loading";
|
||||
loadingDiv.innerHTML = `
|
||||
<div class="spinner"></div>
|
||||
<span>Loading chat...</span>
|
||||
`;
|
||||
|
||||
const content = this.frame.querySelector(".chat-frame-content");
|
||||
if (content) {
|
||||
content.innerHTML = "";
|
||||
content.appendChild(loadingDiv);
|
||||
}
|
||||
}
|
||||
|
||||
hideLoading() {}
|
||||
|
||||
showChatError(message) {
|
||||
if (!this.frame) return;
|
||||
|
||||
const errorDiv = document.createElement("div");
|
||||
errorDiv.className = "chat-frame-error";
|
||||
errorDiv.innerHTML = `
|
||||
<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--accent-red); text-align: center;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-bottom: 0.5rem;">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="15" y1="9" x2="9" y2="15"></line>
|
||||
<line x1="9" y1="9" x2="15" y2="15"></line>
|
||||
</svg>
|
||||
<span style="font-size: 0.875rem;">${message}</span>
|
||||
<button onclick="window.moveableChatFrame?.loadChatContent()"
|
||||
style="margin-top: 0.5rem; padding: 0.25rem 0.5rem; background: var(--accent-blue); color: white; border: none; border-radius: 0.25rem; cursor: pointer; font-size: 0.75rem;">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const content = this.frame.querySelector(".chat-frame-content");
|
||||
if (content) {
|
||||
content.innerHTML = "";
|
||||
content.appendChild(errorDiv);
|
||||
}
|
||||
}
|
||||
|
||||
startDragging(event) {
|
||||
if (!this.frame) return;
|
||||
|
||||
this.isDragging = true;
|
||||
const rect = this.frame.getBoundingClientRect();
|
||||
this.dragOffset.x = event.clientX - rect.left;
|
||||
this.dragOffset.y = event.clientY - rect.top;
|
||||
this.frame.style.transition = "none";
|
||||
document.body.style.userSelect = "none";
|
||||
}
|
||||
|
||||
drag(event) {
|
||||
if (!this.isDragging || !this.frame) return;
|
||||
|
||||
const x = event.clientX - this.dragOffset.x;
|
||||
const y = event.clientY - this.dragOffset.y;
|
||||
|
||||
const maxX = window.innerWidth - this.frame.offsetWidth;
|
||||
const maxY = window.innerHeight - this.frame.offsetHeight;
|
||||
|
||||
const constrainedX = Math.max(0, Math.min(x, maxX));
|
||||
const constrainedY = Math.max(0, Math.min(y, maxY));
|
||||
|
||||
this.frame.style.left = `${constrainedX}px`;
|
||||
this.frame.style.top = `${constrainedY}px`;
|
||||
this.frame.style.right = "auto";
|
||||
this.frame.style.bottom = "auto";
|
||||
}
|
||||
|
||||
stopDragging() {
|
||||
if (this.isDragging && this.frame) {
|
||||
this.isDragging = false;
|
||||
this.frame.style.transition = "all 0.3s ease";
|
||||
document.body.style.userSelect = "";
|
||||
this.savePosition();
|
||||
}
|
||||
}
|
||||
|
||||
startResizing(event, handle) {
|
||||
if (this.isMinimized || !this.frame) return;
|
||||
|
||||
this.isResizing = true;
|
||||
this.resizeHandle = handle;
|
||||
this.frame.style.transition = "none";
|
||||
document.body.style.userSelect = "none";
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
resize(event) {
|
||||
if (!this.isResizing || !this.resizeHandle || !this.frame) return;
|
||||
|
||||
const rect = this.frame.getBoundingClientRect();
|
||||
const handleClass = this.resizeHandle.className;
|
||||
|
||||
let newWidth = rect.width;
|
||||
let newHeight = rect.height;
|
||||
let newLeft = rect.left;
|
||||
let newTop = rect.top;
|
||||
|
||||
if (handleClass.includes("resize-handle-e")) {
|
||||
newWidth = event.clientX - rect.left;
|
||||
}
|
||||
if (handleClass.includes("resize-handle-w")) {
|
||||
newWidth = rect.right - event.clientX;
|
||||
newLeft = event.clientX;
|
||||
}
|
||||
if (handleClass.includes("resize-handle-s")) {
|
||||
newHeight = event.clientY - rect.top;
|
||||
}
|
||||
if (handleClass.includes("resize-handle-n")) {
|
||||
newHeight = rect.bottom - event.clientY;
|
||||
newTop = event.clientY;
|
||||
}
|
||||
|
||||
newWidth = Math.max(280, Math.min(newWidth, window.innerWidth));
|
||||
newHeight = Math.max(200, Math.min(newHeight, window.innerHeight));
|
||||
|
||||
this.frame.style.width = `${newWidth}px`;
|
||||
this.frame.style.height = `${newHeight}px`;
|
||||
this.frame.style.left = `${newLeft}px`;
|
||||
this.frame.style.top = `${newTop}px`;
|
||||
this.frame.style.right = "auto";
|
||||
this.frame.style.bottom = "auto";
|
||||
}
|
||||
|
||||
stopResizing() {
|
||||
if (this.isResizing && this.frame) {
|
||||
this.isResizing = false;
|
||||
this.resizeHandle = null;
|
||||
this.frame.style.transition = "all 0.3s ease";
|
||||
document.body.style.userSelect = "";
|
||||
this.savePosition();
|
||||
}
|
||||
}
|
||||
|
||||
constrainToViewport() {
|
||||
if (!this.frame || this.frame.style.display === "none") return;
|
||||
|
||||
const rect = this.frame.getBoundingClientRect();
|
||||
const maxX = window.innerWidth - rect.width;
|
||||
const maxY = window.innerHeight - rect.height;
|
||||
|
||||
const currentX = Number.parseInt(this.frame.style.left) || rect.left;
|
||||
const currentY = Number.parseInt(this.frame.style.top) || rect.top;
|
||||
|
||||
const constrainedX = Math.max(0, Math.min(currentX, maxX));
|
||||
const constrainedY = Math.max(0, Math.min(currentY, maxY));
|
||||
|
||||
this.frame.style.left = `${constrainedX}px`;
|
||||
this.frame.style.top = `${constrainedY}px`;
|
||||
this.frame.style.right = "auto";
|
||||
this.frame.style.bottom = "auto";
|
||||
}
|
||||
|
||||
savePosition() {
|
||||
if (!this.frame) return;
|
||||
|
||||
try {
|
||||
const rect = this.frame.getBoundingClientRect();
|
||||
const position = {
|
||||
left: rect.left,
|
||||
top: rect.top,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
};
|
||||
localStorage.setItem("moveable-chat-position", JSON.stringify(position));
|
||||
} catch (error) {
|
||||
console.warn("Failed to save chat position:", error);
|
||||
}
|
||||
}
|
||||
|
||||
saveState() {
|
||||
if (!this.frame) return;
|
||||
|
||||
try {
|
||||
const state = {
|
||||
visible: this.frame.style.display !== "none",
|
||||
minimized: this.isMinimized,
|
||||
};
|
||||
localStorage.setItem("moveable-chat-state", JSON.stringify(state));
|
||||
} catch (error) {
|
||||
console.warn("Failed to save chat state:", error);
|
||||
}
|
||||
}
|
||||
|
||||
loadSavedState() {
|
||||
if (!this.frame) return;
|
||||
|
||||
const savedPosition = localStorage.getItem("moveable-chat-position");
|
||||
if (savedPosition) {
|
||||
try {
|
||||
const position = JSON.parse(savedPosition);
|
||||
this.frame.style.left = `${position.left}px`;
|
||||
this.frame.style.top = `${position.top}px`;
|
||||
this.frame.style.width = `${position.width}px`;
|
||||
this.frame.style.height = `${position.height}px`;
|
||||
this.frame.style.right = "auto";
|
||||
this.frame.style.bottom = "auto";
|
||||
} catch (e) {
|
||||
console.warn("Failed to load saved chat position:", e);
|
||||
}
|
||||
}
|
||||
|
||||
const savedState = localStorage.getItem("moveable-chat-state");
|
||||
if (savedState) {
|
||||
try {
|
||||
const state = JSON.parse(savedState);
|
||||
if (state.visible) {
|
||||
this.openChat();
|
||||
}
|
||||
if (state.minimized) {
|
||||
this.isMinimized = true;
|
||||
this.toggleMinimize();
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Failed to load saved chat state:", e);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.constrainToViewport();
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function initializeMoveableChat() {
|
||||
try {
|
||||
const requiredElements = [
|
||||
"moveableChatFrame",
|
||||
"chatFrameHeader",
|
||||
"toggleChatBtn",
|
||||
];
|
||||
|
||||
const missingElements = requiredElements.filter(
|
||||
(id) => !document.getElementById(id),
|
||||
);
|
||||
|
||||
if (missingElements.length > 0) {
|
||||
console.warn(
|
||||
"MoveableChatFrame: Missing required elements:",
|
||||
missingElements,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
window.moveableChatFrame = new MoveableChatFrame();
|
||||
} catch (error) {
|
||||
console.error("Failed to initialize MoveableChatFrame:", error);
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(initializeMoveableChat, 100);
|
||||
Loading…
Add table
Add a link
Reference in a new issue