// ==UserScript==
// @name         快手批量下载V0.1
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.kuaishou.com/profile/*
// @icon         https://www.google.com/s2/favicons?domain=kuaishou.com
// @grant        unsafeWindow
// @grant        GM_setClipboard
// ==/UserScript==
let saveurl={}
function ControlShowCheckAndNew(target){
    if(target.className.indexOf('injectvideo')!=-1){
        return true;
    }
    if(target.className.indexOf('control-pos')!=-1){
        return true;
    }
    const prop = '__vue__'
    if(prop===undefined){
        return;
    }
    let info=target[prop].data
    if(info===undefined){
        console.log('test')
    }
    let videourl=info.photo.photoUrl
    videourl='https://'+videourl.replace('https://','').replace('http://','').replace('//','')
    target.classList.add('injectvideo')
    var select=document.createElement('label')
    select.className='container control-pos'
    select.innerHTML=` <input  type="checkbox"><div class="checkmark"></div>`
    target.append(select)
    select.onclick=()=>{
        console.log('选中变化了',select.children[0].checked)
        if(select.children[0].checked){
            //选中
            saveurl[videourl]=true;
        }else{
            //未选中
            if(saveurl[videourl]){
                delete saveurl[videourl]
            }
        }
    }
}
function wraprun(){
    let list=document.querySelectorAll('.video-card')
    const targetNode = document.querySelector('.user-photo-list')
    // 观察器的配置（需要观察什么变动）
    const config = {
        childList: true, // 观察目标子节点的变化，添加或删除
        attributes: true, // 观察属性变动
        subtree: true, //默认是false，设置为true后可观察后代节点
    };

    // 当观察到变动时执行的回调函数
    const callback = function(mutationsList, observer) {
        // Use traditional 'for loops' for IE 11
        console.log('mutationsList',mutationsList)
        for(let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                mutation.addedNodes.forEach((item)=>{
                    ControlShowCheckAndNew(item)
                })
            }
        }
    };
    // 创建一个观察器实例并传入回调函数
    const observer = new MutationObserver(callback);
    // 以上述配置开始观察目标节点
    observer.observe(targetNode, config);
    //处理循环
    list.forEach((item)=>{
        ControlShowCheckAndNew(item)
    })
}
function wrapdrawbutton(){
    let parenttagert=document.querySelector('.user-detail')
    let div=document.createElement("div");
    div.innerHTML=`<div class="follow-button user-info-follow" data-v-68cd9209="" style="margin-top: 10px;" data-v-58fa4879="">批量下载</div>`
    div.onclick=function(event){
        let size=Object.keys(saveurl)
        let text=size.join('\n')
        GM_setClipboard(text)
        alert('已设置到剪辑版共'+size.length+"个")
    };
    parenttagert.append(div);
}
let setint=setInterval(()=>{
    let list=document.querySelectorAll('.video-card')
    if(list!=null&&list.length!==0){
        if(document.querySelector('.user-detail')!==null){
            wraprun()
            wrapdrawbutton()
            clearInterval(setint)
        }
    }

},1000)
let cssstyle = document.createElement("style");
cssstyle.innerHTML =(`
.injectvideo{
position: relative;
}
.control-pos{
bottom: 29.5px;
right: 2.1px;
position: absolute;
}
.container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

.container {
 display: block;
 cursor: pointer;
 font-size: 20px;
 user-select: none;
}

/* Create a custom checkbox */
.checkmark {
 position: relative;
 top: 0;
 left: 0;
 height: 1.3em;
 width: 1.3em;
 background-color: #ccc;
 border-radius: 25px;
 transition: 0.15s;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
 background-color: #ff4242;
 border-radius: 25px;
 transition: 0.15s;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
 left: 0.45em;
 top: 0.25em;
 width: 0.25em;
 height: 0.5em;
 border: solid white;
 border-width: 0 0.15em 0.15em 0;
 transform: rotate(45deg);
}
`);
document.body.appendChild(cssstyle);