88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
// content.js
|
|
window.cameraId = "purple-camera";
|
|
|
|
function createDraggableCamera() {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.id = "camera-wrapper";
|
|
wrapper.setAttribute('style', `
|
|
position: fixed;
|
|
width: 200px;
|
|
height: 200px;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 999999;
|
|
border-radius: 100%;
|
|
cursor: move;
|
|
user-select: none;
|
|
transition: background 0.2s;
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
`);
|
|
|
|
const camera = document.createElement("iframe");
|
|
camera.id = cameraId;
|
|
camera.setAttribute("style", `
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
border: 2px solid rgba(168, 29, 203, 0.5);
|
|
background: black;
|
|
pointer-events: none;
|
|
`);
|
|
camera.setAttribute("allow", "camera; microphone");
|
|
camera.src = chrome.runtime.getURL("camera.html");
|
|
|
|
wrapper.appendChild(camera);
|
|
document.body.appendChild(wrapper);
|
|
|
|
let isDragging = false;
|
|
let currentX;
|
|
let currentY;
|
|
let initialX;
|
|
let initialY;
|
|
|
|
wrapper.addEventListener('mousedown', e => {
|
|
isDragging = true;
|
|
wrapper.style.transition = 'none';
|
|
initialX = e.clientX - wrapper.offsetLeft;
|
|
initialY = e.clientY - wrapper.offsetTop;
|
|
});
|
|
|
|
document.addEventListener('mousemove', e => {
|
|
if (!isDragging) return;
|
|
|
|
e.preventDefault();
|
|
currentX = e.clientX - initialX;
|
|
currentY = e.clientY - initialY;
|
|
|
|
// Keep camera within viewport bounds
|
|
const maxX = window.innerWidth - wrapper.offsetWidth;
|
|
const maxY = window.innerHeight - wrapper.offsetHeight;
|
|
|
|
currentX = Math.min(Math.max(0, currentX), maxX);
|
|
currentY = Math.min(Math.max(0, currentY), maxY);
|
|
|
|
wrapper.style.left = `${currentX}px`;
|
|
wrapper.style.top = `${currentY}px`;
|
|
});
|
|
|
|
document.addEventListener('mouseup', () => {
|
|
isDragging = false;
|
|
wrapper.style.transition = 'background 0.2s';
|
|
});
|
|
|
|
// Handle window resize
|
|
window.addEventListener('resize', () => {
|
|
const maxX = window.innerWidth - wrapper.offsetWidth;
|
|
const maxY = window.innerHeight - wrapper.offsetHeight;
|
|
|
|
wrapper.style.left = `${Math.min(parseInt(wrapper.style.left), maxX)}px`;
|
|
wrapper.style.top = `${Math.min(parseInt(wrapper.style.top), maxY)}px`;
|
|
});
|
|
}
|
|
|
|
// Initialize camera if it doesn't exist
|
|
if (!document.getElementById(cameraId)) {
|
|
createDraggableCamera();
|
|
} |