'use strict';

/* globals MediaRecorder */

let mediaRecorder;
let recordedBlobs;

const errorMsgElement = document.querySelector('span#errorMsg');
const recordedVideo = document.querySelector('video#recorded');
const recordButton = document.querySelector('button#record');
const playButton = document.querySelector('button#play');
const downloadButton = document.querySelector('button#download');


recordButton.addEventListener('click', () => {
	
  if (recordButton.textContent === 'Start') {
    startRecording();
	
  } else {
    stopRecording();
    recordButton.textContent = 'Start';
    playButton.disabled = false;
    downloadButton.disabled = false;
  }
});


playButton.addEventListener('click', () => {
  const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
  recordedVideo.src = null;
  recordedVideo.srcObject = null;
  recordedVideo.src = window.URL.createObjectURL(superBuffer);
  recordedVideo.controls = true;
  recordedVideo.play();
});


downloadButton.addEventListener('click', () => {
  const blob = new Blob(recordedBlobs, {type: 'video/mp4'});
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = 'test.mp4';
  //alert(url);
 
//Creating blob url which is only valid for the browser
//where the application is running
//var videoSrc = URL.createObjectURL(blob);
let rid=$("#hdnRecipentDetails").val();//document.getElementById('hdnRecipentDetails').value; 
//alert(rid);
   var formdata = new FormData();
            formdata.append('blobFile', blob);
            formdata.append('rid', rid);

            fetch('uploader.php', {
                method: 'POST',
                body: formdata
            }).then(()=>{
                //alert('streamed video file uploaded')
            })
  
  /*document.body.appendChild(a);
  a.click();
  setTimeout(() => {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);*/
});

function handleDataAvailable(event) {
  console.log('handleDataAvailable', event);
  if (event.data && event.data.size > 0) {
    recordedBlobs.push(event.data);
  }
}

function startRecording() {
	//alert('ok');
	$('#counterstop').attr("id", "counter"); 
	$("#record").removeClass('start').addClass('stop');
	$("#record").attr('title','Stop Video');
  recordedBlobs = [];
  let options = {mimeType: 'video/webm;codecs=vp8,opus'};
  try {
    mediaRecorder = new MediaRecorder(window.stream, options);
  } catch (e) {
    console.error('Exception while creating MediaRecorder:', e);
    errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
    return;
  }

  console.log('Created MediaRecorder', mediaRecorder, 'with options', options);
  recordButton.textContent = 'Stop';
  playButton.disabled = true;
  downloadButton.disabled = true;
  mediaRecorder.onstop = (event) => {
    console.log('Recorder stopped: ', event);
    console.log('Recorded Blobs: ', recordedBlobs);
  };
  mediaRecorder.ondataavailable = handleDataAvailable;
  mediaRecorder.start();
  console.log('MediaRecorder started', mediaRecorder);
  timer('startimmer');
  $("#download").hide();
  $("#refresh").hide();
}
  
function timer(a)
{
    console.log(a);
  var count = 0, timer = setInterval(function() {
      let va = $("#counter").text();
    $("#counter").html((va++)+1);
    if(a=='startimmer')
{
        if(va > 60) clearInterval(timer);
        if(va>60)
        {
            $("#counter").html(60);
}
    }
    else
    {
     clearInterval(timer);
    console.log('clearinterval');
    }
    //console.log(va);

}, 1000);

}

function stopRecording() {
  mediaRecorder.stop();
  $("#record").removeClass('stop').addClass('start');
  $("#record").attr('title','Start Video');
  let a=$("#counter").html();
  $('#counter').attr("id", "counterstop"); 
  $("#counterstop").html(a);
  $("#download").show();
  $("#refresh").show();
  timer(a);
}

function handleSuccess(stream) {
  recordButton.disabled = false;
  console.log('getUserMedia() got stream:', stream);
  window.stream = stream;

  const gumVideo = document.querySelector('video#gum');
  gumVideo.srcObject = stream;
}

async function init(constraints) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
  } catch (e) {
    console.error('navigator.getUserMedia error:', e);
    errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
  }
}

document.querySelector('button#start').addEventListener('click', async () => {
  const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
  const constraints = {
  audio: true, 
  video: true
  };
  console.log('Using media constraints:', constraints);
  await init(constraints);
});