static/js/script.js

let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let captureButton = document.getElementById('capture-btn');
let switchButton = document.getElementById('switch-btn');
let retakeButton = document.getElementById('retake-btn');
let uploadButton = document.getElementById('upload-btn');
let cameraIcon = document.getElementById('camera-icon');
let status = document.getElementById('status');
let stream = null;
let facingMode = 'environment'; // Default to back camera

// Start camera when clicking the camera icon
cameraIcon.addEventListener('click', async () => {
    try {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
        }
        stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: facingMode }
        });
        video.srcObject = stream;
        video.style.display = 'block';
        cameraIcon.style.display = 'none';
        captureButton.style.display = 'inline-block';
        switchButton.style.display = 'inline-block';
        status.textContent = 'Camera started. Click Capture to take a photo.';
    } catch (err) {
        status.textContent = 'Error accessing camera: ' + err.message;
    }
});

// Capture image
captureButton.addEventListener('click', () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    video.style.display = 'none';
    canvas.style.display = 'block';
    captureButton.style.display = 'none';
    switchButton.style.display = 'none';
    retakeButton.style.display = 'inline-block';
    uploadButton.style.display = 'inline-block';
    status.textContent = 'Image captured. Choose to retake or upload.';
});

// Switch camera view
switchButton.addEventListener('click', async () => {
    facingMode = facingMode === 'environment' ? 'user' : 'environment';
    if (stream) {
        stream.getTracks().forEach(track => track.stop());
    }
    try {
        stream = await navigator.mediaDevices.getUserMedia({
            video: { facingMode: facingMode }
        });
        video.srcObject = stream;
        status.textContent = `Switched to ${facingMode === 'environment' ? 'back' : 'front'} camera.`;
    } catch (err) {
        status.textContent = 'Error switching camera: ' + err.message;
    }
});

// Retake photo
retakeButton.addEventListener('click', () => {
    canvas.style.display = 'none';
    video.style.display = 'block';
    captureButton.style.display = 'inline-block';
    switchButton.style.display = 'inline-block';
    retakeButton.style.display = 'none';
    uploadButton.style.display = 'none';
    status.textContent = 'Camera restarted. Click Capture to take a new photo.';
});

// Upload to Instagram
uploadButton.addEventListener('click', () => {
    let imageData = canvas.toDataURL('image/jpeg');
    status.textContent = 'Uploading to Instagram...';
    fetch('/upload', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'image=' + encodeURIComponent(imageData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            status.textContent = 'Error: ' + data.error + (data.details ? ' - ' + JSON.stringify(data.details) : '');
        } else {
            status.textContent = data.message;
            canvas.style.display = 'none';
            retakeButton.style.display = 'none';
            uploadButton.style.display = 'none';
            cameraIcon.style.display = 'block';
        }
    })
    .catch(err => {
        status.textContent = 'Upload failed: ' + err.message;
    });
});