Sindbad~EG File Manager

const webcamElement = document.getElementById('webcam');

const canvasElement = document.getElementById('canvas');

const canvasElement2 = document.getElementById('canvas2');

const snapSoundElement = document.getElementById('snapSound');

// const img1 = document.getElementById('img1');

const img2 = document.getElementById('show_image');

// var picture;



const webcam = new Webcam(webcamElement, 'user', canvasElement2, snapSoundElement);


function start_camera() {
    $('#webcam-app').show()
    $("#webcam-switch").prop('checked',true)    
    $("#webcam-switch").change()
}



$("#webcam-switch").change(function () {
    if(this.checked){
        $('.md-modal').addClass('md-show');
        webcam.start()
            .then(result =>{
               cameraStarted();
               console.log("webcam started");
            })
            .catch(err => {
                displayError();
            });
    }
    else {        

        cameraStopped();
        webcam.stop();
        $('#webcam-app').hide()
        console.log("webcam stopped");
    }        
});

$('#cameraFlip').click(function() {
    webcam.flip();
    webcam.start();  
});

$('#closeError').click(function() {
    $("#webcam-switch").prop('checked', false).change();
});

$('#closeSuccess').click(function() {
    $("#webcam-switch").prop('checked', false).change();
});

function displayError(err = ''){
    if(err!=''){
        $("#errorMsg").html(err);
    }
    $("#errorMsg").removeClass("d-none");
}

function cameraStarted(){
    $("#errorMsg").addClass("d-none");
    $('.flash').hide();
    $("#webcam-caption").html("on");
    $("#webcam-control").removeClass("webcam-off");
    $("#webcam-control").addClass("webcam-on");
    $(".webcam-container").removeClass("d-none");
    if( webcam.webcamList.length > 1){
        $("#cameraFlip").removeClass('d-none');
    }
    $("#wpfront-scroll-top-container").addClass("d-none");
    window.scrollTo(0, 0); 
    $('body').css('overflow-y','hidden');
}

function cameraStopped(){
    $("#errorMsg").addClass("d-none");
    $("#wpfront-scroll-top-container").removeClass("d-none");
    $("#webcam-control").removeClass("webcam-on");
    $("#webcam-control").addClass("webcam-off");
    $("#cameraFlip").addClass('d-none');
    $(".webcam-container").addClass("d-none");
    $("#webcam-caption").html("Click to Start Camera");
    $('.md-modal').removeClass('md-show');
    // $("#frame").addClass("d-none");
}


$("#take-photo").click(function () {
    beforeTakePhoto();
    let picture = webcam.snap();
    // document.querySelector('#download-photo').href = picture;

    // $("#show_image").show();
    $('#myModal').modal('show');

    // img2.setAttribute(
    //     'src',picture
    // );

    if (croppie) {
            croppie.destroy();
        }
    
    croppie = new Croppie(document.getElementById('croppie_div'), {
                viewport: { width: 138, height: 158 },
                boundary: { width: 210, height: 240 },
                enableOrientation: true,
            });

    // croppie.setZoom(1)

    setTimeout(
      function() 
      {
        croppie.bind({
            url: picture,
            orientation: 1,
        })
        
        afterTakePhoto();

      }, 1000);

    // $("#show_image").attr("src",picture);

    // img2.onload = function () {
        
    //         if (croppie) {
    //             croppie.destroy();
    //         }
    //         // Initialize Croppie
    //         croppie = new Croppie(img2, {
    //             viewport: { width: 105.8, height: 120.9 },
    //             boundary: { width: 210, height: 240 },
    //         });
    //         // Bind Croppie to existing image
    //         croppie
    //             .bind({
    //                 url: $("#show_image").attr("src"),
    //                 orientation: 1,
    //             })
    //             .then(function () {
    //                 croppie.element.addEventListener("update", function () {
    //                     croppie.result("base64").then(function (data) {
    //                         // Create new image element and update the existing one
    //                         var croppedImage = document.getElementById("cropped-image");
    //                         if (!croppedImage) {
    //                             croppedImage = new Image();
    //                             croppedImage.id = "cropped-image";
    //                             $("#cropped-image-container").append(croppedImage);
    //                             $("#show_image").attr("src",'');
    //                             $("#show_image").hide();
    //                         }
    //                         croppedImage.src = data;
    //                     });
    //                 });
    //             });
    //     };

    
    
   
});

function beforeTakePhoto(){
    $('.flash')
        .show() 
        .animate({opacity: 0.3}, 500) 
        .fadeOut(500)
        .css({'opacity': 0.7});
    window.scrollTo(0, 0); 
    $('#webcam-control').addClass('d-none');
    $('#cameraControls').addClass('d-none');
    // $("#frame").removeClass("d-none");
    $(".loader").show()
}

function afterTakePhoto(){
    webcam.stop();
    $('#webcam-app').hide()
    $('#webcam-control').removeClass('d-none');
    $('#cameraControls').removeClass('d-none');

    // cameraStopped();
    // var canvas =  document.getElementById('canvas')
    // canvas.width = img1.width;
    // canvas.height = img1.height;
    // var context = canvas.getContext("2d");
    // context.drawImage(img1, 0, 0);
    // // alert(img2.width);

    // context.drawImage(img2,0
    //     ,canvas.width / 2 - canvas.width / 2);
    // $('#canvas').removeClass('d-none');
    // $('#take-photo').addClass('d-none');
    // $('#exit-app').removeClass('d-none');
    // $('#download-photo').removeClass('d-none');
    // $('#save-photo').removeClass('d-none');
    // $('#resume-camera').removeClass('d-none');
    // $('#cameraControls').removeClass('d-none');
    // $("#frame").addClass("d-none");
    $(".loader").hide()
}

function removeCapture(){
    $('#canvas').addClass('d-none');
    $('#webcam-control').removeClass('d-none');
    $('#cameraControls').removeClass('d-none');
    $('#take-photo').removeClass('d-none');
    $('#exit-app').addClass('d-none');
    $('#download-photo').addClass('d-none');
    $('#save-photo').addClass('d-none');
    $('#resume-camera').addClass('d-none');
}

$("#resume-camera").click(function () {
    
    webcam.stream()
        .then(facingMode =>{
            removeCapture();
        });
});

$("#exit-app").click(function () {
    removeCapture();
    $("#webcam-switch").prop("checked", false).change();
});