let stop = document.querySelector(".stop-btn")
let player = document.querySelector(".videoPlayer");
let download = document.querySelector(".download-btn");
let mediaRecorder;


// $("#start-btn").click(async function (event) {
//     event.preventDefault();
//     player.style.display = "none";
//     download.style.display = "none";
//     stop.style.display = "";
//     let stream = await navigator.mediaDevices.getDisplayMedia({
//         video: true
//     })

//     mediaRecorder = new MediaRecorder(stream, {
//         mimeType: "video/webm"
//     })

//     let chunks = []
//     mediaRecorder.addEventListener('dataavailable', function (e) {
//         chunks.push(e.data)
//     })

//     mediaRecorder.addEventListener('stop', function () {
//         stop.style.display = "none";
//         let blob = new Blob(chunks, {
//             type: chunks[0].type
//         })
//         let url = URL.createObjectURL(blob)

//         let video = document.querySelector("video")
//         video.src = url
//         player.style.display = "";
//         video.play();


//         download.href = url
//         download.download = 'screenRecord.webm'
//         download.style.display = "";

//         if (selectedPopup == "ReportBug") {
//             ReportBug()
//         } else if (selectedPopup == "FeatureRequest") {
//             FeatureRequest()
//         } else {
//             GeneralFeedback()
//         }

//     })

//     //we have to start the recorder manually
//     mediaRecorder.start()
//     closePopupFeedback()
// })

// $("#startBtnOne").click(async function (event) {
//     event.preventDefault()
//     player.style.display = "none";
//     download.style.display = "none";
//     stop.style.display = "";
//     let stream = await navigator.mediaDevices.getDisplayMedia({
//         video: true
//     })

//     mediaRecorder = new MediaRecorder(stream, {
//         mimeType: "video/webm"
//     })

//     let chunks = []
//     mediaRecorder.addEventListener('dataavailable', function (e) {
//         chunks.push(e.data)
//     })

//     mediaRecorder.addEventListener('stop', function () {
//         stop.style.display = "none";
//         let blob = new Blob(chunks, {
//             type: chunks[0].type
//         })
//         let url = URL.createObjectURL(blob)

//         let video = document.querySelector("video")
//         video.src = url
//         player.style.display = "";
//         video.play();


//         download.href = url
//         download.download = 'screenRecord.webm'
//         download.style.display = "";

//         if (selectedPopup == "ReportBug") {
//             ReportBug()
//         } else if (selectedPopup == "FeatureRequest") {
//             FeatureRequest()
//         } else {
//             GeneralFeedback()
//         }

//     })

//     //we have to start the recorder manually
//     mediaRecorder.start()
//     closePopupFeedback()
// })

$("#startBtnTwo").click(async function (event) {
    event.preventDefault();
    player.style.display = "none";
    download.style.display = "none";
    stop.style.display = "";
    let stream = await navigator.mediaDevices.getDisplayMedia({
        video: true
    })

    mediaRecorder = new MediaRecorder(stream, {
        mimeType: "video/webm"
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function (e) {
        chunks.push(e.data)
    })

    mediaRecorder.addEventListener('stop', function () {
        var feedback_type = $("#feedback_type").val()

        stop.style.display = "none";
        let blob = new Blob(chunks, {
            type: chunks[0].type
        })
        let url = URL.createObjectURL(blob)
        let video = document.querySelector("#video3")
        video.src = url
        player.style.display = "";
        video.style.display = "block";
        video.play();


        download.href = url
        download.download = 'screenRecord.webm'
        download.style.display = "";

        let ScreenVideoBtn3 = document.querySelector("#ScreenVideoBtn3")
        ScreenVideoBtn3.style.display = "none"

        axios({
            method: 'get',
            url: url,
            responseType: 'blob'
        }).then(function (response) {
            var reader = new FileReader();
            reader.readAsDataURL(response.data);
            reader.onloadend = function () {
                var base64data = reader.result;
                var form_data = new FormData();
                form_data.append("video_base64", base64data);
                $.ajax({
                    type: "POST",
                    // dataType: 'text',
                    enctype: 'multipart/form-data',
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: "admin/upload_bug_video.php",
                    data: form_data,
                    success: function (text) {
                        var data = JSON.parse(text)
                        $("#thirdVideo").val(data.data)
                        $("#feedback_type").val(feedback_type)
                    }
                });
            }
        })
        if (selectedPopup == "ReportBug") {
            ReportBug()
        } else if (selectedPopup == "FeatureRequest") {
            FeatureRequest()
        } else {
            GeneralFeedback()
        }
    })

    //we have to start the recorder manually
    mediaRecorder.start()
    closePopupFeedback()
})
stop.addEventListener("click", function () {
    mediaRecorder.stop();
    stop.style.display = "none";

})