// 这是会插入网页运行的代码

const $videos = [...document.querySelectorAll('video')];

// todo: 支持同一页面多个视频
// $videos.map(($v, idx) => {
//     const $tag = document.createElement('div');
//     const $par = $v.parentNode;
//     $tag.innerText = `点击 ${idx+1} 录制`;
//     $tag.style = `
//         position: absolute;
//         top: 0;
//         left: 0;
//         z-index: 9999;
//         width: ${$v.offsetWidth}px;
//         height: ${$v.offsetHeight}px;
//         line-height: ${$v.offsetHeight}px;
//         text-align: center;
//         color: red; 
//         font-size: ${$v.offsetWidth/10}px;
//         font-weight: bold;
//         border: 5px solid red;
//         box-sizing: border-box;
//     `;
//     $par.style.position = 'relative';
//     $v.parentNode.appendChild($tag);
//     $tag.addEventListener('click', () => {
//         $tag.remove();
//         startRecording($v);
//         return ;
//     });
// });

const $target = $videos[0];
$target && $target.addEventListener('playing', () => {
    // muted video 不触发 captureStream
    // $target.muted = true;
    $target.volume = 0.01;
    if($target.isRecording){
        return ;
    }
    $target.isRecording = true;
    // 很多视频开头有小动作，比如帮你拖拽进度条，可能会延迟触发或多次触发，所以我们要加个延时
    setTimeout(() => {
        console.log('Video Recorder started...');
        startRecording($target);
    }, 5000);
});

function startRecording($tar){
    const mimeType = 'video/webm';
    const recorder = new MediaRecorder($tar.captureStream(), {
    	mimeType
    });
    recorder.onstart = function(e){
        // console.log('start', e);
    };
    recorder.ondataavailable = function(e){
        // console.log('ondata', e);
        // const blob = new Blob([e.data], {
        //     type: mimeType
        // });
        sendBlobData(e.data);
    };
    recorder.onstop = function(e){
        endBlobData();
        // console.log('stoped', e);
        // 不能成功，因为有些页面视频播完会刷新到下一个视频
        // const blob = new Blob(chunks, {
        //     type: mimeType
        // });
        // const url = URL.createObjectURL(blob);
        // const a = document.createElement('a');
        // document.body.appendChild(a);
        // a.style = 'display: none';
        // a.href = url;
        // a.download = document.title;
        // a.click();
        // window.URL.revokeObjectURL(url);
    };
    recorder.onerror = function(e){
        // console.log('errored', e);
    };
    // 重置播放时间
    $tar.currentTime = 0;
    recorder.start(1000);
    $tar.onended = function(e){
        stopRecorder(recorder);
    };
    $tar.oncomplete = function(e){
        stopRecorder(recorder);
    };
    window.onbeforeunload = function(e){
        stopRecorder(recorder);
    };
};

function sendBlobData(blobData){
    const fr = new FileReader();
    fr.onload = function(ev){
        chrome.runtime.sendMessage({
            data: fr.result,
            size: blobData.size,
            mimeType: blobData.type,
            name: document.title,
            action: 'data'
        }, response => {
            // console.log("Response: ", response);
        });
    };
    fr.onerror = function(ev){
        console.log('FileReader error', ev);
    };
    fr.readAsBinaryString(blobData);
};

function endBlobData(){
    chrome.runtime.sendMessage({
        data: '',
        size: 0,
        mimeType: '',
        name: '',
        action: 'end'
    }, response => {
        // console.log("Response: ", response);
    });
};

function stopRecorder(recorder){
    if(recorder.state === 'recording'){
        recorder.stop();
    }
};