// ==UserScript==
// @name         抖音/快手主页视频下载
// @namespace    shortvideo_homepage_downloader
// @version      0.0.5
// @description  在抖音/快手主页右小角显示视频下载按钮
// @author       hunmer
// @match        https://www.douyin.com/user/*
// @match        https://www.kuaishou.com/profile/*
// @icon         https://lf1-cdn-tos.bytegoofy.com/goofy/ies/douyin_web/public/favicon.ico
// @grant        GM_download
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// @downloadURL none
// ==/UserScript==
const $ = selector => document.querySelectorAll('#_dialog '+selector)
const DOWNLOADED = 2
const DOWNLOADING = 1
const WAITTING = 0
const ERROR = -1
const VERSION = '0.0.5'
const RELEASE_DATE = '2024/07/26'

// 样式
GM_addStyle(`
  body:has(dialog[open]) {
    overflow: hidden;
  }
`);

({
  resources: [], running: false, downloads: {},
  options: GM_getValue('config', {
    threads: 2,
    douyin_host: 0, // 抖音默认第一个线路
  }),
  saveOptions(opts){
    GM_setValue('config', Object.assign(this.options, opts))
  },
  init(){ // 初始化
    this.HOSTS = { // 网站规则
        'www.kuaishou.com': {
            title: '快手', id: 'kuaishou',
            url: 'https://www.kuaishou.com/graphql',
            type: 'json',
            parseList: json => json?.data?.visionProfilePhotoList?.feeds,
            parseItem: data => {
                let {photo, author} = data
                return {
                    status: WAITTING, author_name: author.name, id: photo.id, url: 'https://www.kuaishou.com/short-video/'+photo.id,
                    cover: photo.coverUrl,
                    video_url: photo.photoUrl,
                    // video_url: photo.videoResource.h264.adaptationSet[0].representation[0].url,
                    title: photo.originCaption,
                    data
                }
            }
        },
        'www.douyin.com': {
            title: '抖音', id: 'douyin',
            url: 'https://www.douyin.com/aweme/v1/web/aweme/post/',
            type: 'network',
            hosts: [0, 1, 2], // 3个线路
            parseList: json => json?.aweme_list,
            parseItem: data => {
                let {video, desc, author, aweme_id} = data
                if(video.format == 'mp4') return {
                    status: WAITTING,
                    id: aweme_id,
                    url: 'https://www.douyin.com/video/'+aweme_id,
                    cover: video.cover.url_list[0],
                    author_name: author.nickname,
                    video_url: video.play_addr.url_list.at(this.options.douyin_host),
                    title: desc,
                    data
                }
            }
        },
    }
    let DETAIL = this.DETAIL = this.HOSTS[location.host]
    if(!DETAIL) return

    let callback = (...args) => this.callback.apply(this, args)
     switch(DETAIL.type){
        case 'json':
            let parse = JSON.parse;
            JSON.parse = function(raw) {
                let json = parse(raw)
                callback(json)
                return json;
            }
            return
        case 'network':
            let originalSend = XMLHttpRequest.prototype.send, resources = []
             XMLHttpRequest.prototype.send = function() {
                 this.addEventListener('load', function() {
                     if (this.responseURL.startsWith(DETAIL.url)) {
                         callback(JSON.parse(this.responseText))
                     }
                 });
                 originalSend.apply(this, arguments);
             };
            let originalFetch = window.fetch;
            window.fetch = function() {
                return originalFetch.apply(this, arguments).then(response => {
                    if (response.url.startsWith(DETAIL.url)) {
                        response.clone().json().then(json => callback(json));
                    }
                    return response;
                });
            }
            return
    }
  },
   callback(json){ // 捕获数据回调
     let {resources, DETAIL} = this
     let {parseList, parseItem} = DETAIL
        let cnt = resources.push(...(parseList(json) || []).map(parseItem))
        if(!cnt > 0) return
        let fv = document.querySelector('#_ftb')
        if(!fv){
            fv = document.createElement('div')
            fv.id = '_ftb'
            fv.style.cssText = `position: fixed;bottom: 50px;right: 50px;border-radius: 20px;background-color: #fe2c55;color: white;z-index: 999;cursor: pointer;`
            fv.onclick = () => this.showList(),
            document.body.append(fv)
        }
        fv.innerHTML = `下载 ${cnt} 个视频`
    },
  showList(){ // 展示主界面
    let threads = this.options['threads']
    this.showDialog({
      id: '_dialog',
      html: `
      <div style="display: inline-flex;width: 100%;justify-content: space-around;height: 5%;min-height: 30px;">
          <div>
            <button id="_selectAll">全选</button>
            <button id="_reverSelectAll">反选</button>
            <button id="_clear_log">清空日志</button>
          </div>
          <div>
            命名规则:
            <input id="_filename" value="【{发布者}】{标题}({id})" title="允许的变量：{发布者} {标题} {id}">
            <button id="_apply_filename">应用</button>
          </div>
          <div>
            下载线程数:
            <input id="_threads" type="range" value=${threads} step=1 min=1 max=8>
            <span id="_threads_span">${threads}</span>
          </div>
          <div>
            <button id="_settings">线路</button>
            <button id="_clearDownloads">清空已下载</button>
            <button id="_switchRunning">开始</button>
          </div>
        </div>
        <div style="height: 70%;overflow-y: scroll;">
          <table width="90%" border="2" style="margin: 0 auto;">
              <tr align="center">
                  <th>编号</th>
                  <th>选中</th>
                  <th>封面</th>
                  <th>标题</th>
                  <th>状态</th>
              </tr>
              ${this.resources.map((item, index) => {
                let {video_url, title, cover, url, id} = item || {}
                return video_url ? `
                <tr align="center" data-id="${id}">
                    <td>${index+1}</td>
                    <td><input type="checkbox" style="transform: scale(1.5);" checked></td>
                    <td><a href="${url}" target="_blank"><img src="${cover}" style="width: 100px;"></a></td>
                    <td contenteditable style="width: 400px;max-width: 400px;">${title}</td>
                    <td>等待中...</td>
                </tr>` : ''

            }).join('')}
            </table>
          </div>
          <div style="height: 25%; width: 100%;overflow-y: scroll;border-top: 2px solid white;">
            <pre id="_log" style="background-color: rgba(255, 255, 255, .2);color: rgba(0, 0, 0, .8);"></pre>
          </div>`
    }) & this.bindEvents() & this.writeLog(`欢迎使用！当前版本: ${VERSION} 发布日期: ${RELEASE_DATE}`)
  },
  showDialog({html, id, callback}){ // 弹窗
    document.body.insertAdjacentHTML('beforeEnd', `
    <dialog id="${id}" style="top: 0;left: 0;width: 100%;height: 100%;position: fixed;z-index: 9999;background-color: rgba(0, 0, 0, .8);color: #fff;padding: 10px;overflow: auto; overscroll-behavior: contain;" open>
      <a href="#" style="position: absolute;right: 0;top: 0;padding: 10px;background-color: rgba(255, 255, 255, .4);" class="_dialog_close">X</a>
      ${html}
    <dialog>`)
    setTimeout(() => {
      let dialog = document.querySelector('#'+id)
      dialog.querySelector('._dialog_close').onclick = () => dialog.remove()
      callback && callback(dialog)
    }, 500)
  },
  bindEvents(){ // 绑定DOM事件
    $('#_threads')[0].oninput = function(ev){
      $('#_threads_span')[0].innerHTML = this.value
    }
    $('#_apply_filename')[0].onclick = () => {
      for(let tr of $('table tr[data-id]')){
        let item = this.findItem(tr.dataset.id)
        if(!item) return
        let {title, author_name, id} = item
        tr.querySelector('td[contenteditable]').innerHTML = $('#_filename')[0].value.replace('{标题}', title).replace('{id}', id).replace('{发布者}', author_name)
      }
    }
    $('#_selectAll')[0].onclick = () => $('table input[type=checkbox]').forEach(el => el.checked = true)
    $('#_reverSelectAll')[0].onclick = () => $('table input[type=checkbox]').forEach(el => el.checked = !el.checked)
    $('#_clear_log')[0].onclick = () => $('#_log')[0].innerHTML = ''
    $('#_switchRunning')[0].onclick = () => this.switchRunning()
    $('#_settings')[0].onclick = () => {
      this.showDialog({
        id: '_dialog_settings',
        html: `
        <h1>线路设置后需要刷新页面！！！</h1>
        ${Object.values(this.HOSTS).map(({hosts = [], title, id}) => {
          return hosts.length ? `${title}线路: <select data-for="${id}">${hosts.map(host => `<option ${this.options[id+'_host'] == host ? 'selected' : ''}>${host}</option>`).join('')}</select>` : ''
        }).join('')}
        `,
        callback: dialog => {
          for(let select of dialog.querySelectorAll('select')) select.onchange = () => {
            let opts = {}
            opts[`${select.dataset.for}_host`] = select.value
            this.saveOptions(opts)
          }
        }
      })
    }
    $('#_clearDownloads')[0].onclick = () => {
      if(this.running) return alert('请先暂停任务')
      for(let i=this.resources.length-1;i>=0;i--){
        let item = this.resources[i]
        let {status, id} = item
        let tr = this.findElement(item.id)
        if(tr){
          if(status == DOWNLOADED){
            this.resources.splice(i, 1)
            tr.remove()
            continue
          }
          let td = tr.querySelectorAll('td')
          td[4].style.backgroundColor = 'unset'
          td[4].innerHTML = '等待中...'
        }
        item.status = WAITTING
      }
    }
  },
  switchRunning(running){ // 切换运行状态
    this.running = running ??= !this.running
    $('#_switchRunning')[0].innerHTML = running ? '暂停' : '运行'
    if(running){
      let threads = parseInt($('#_threads')[0].value)
      let cnt = threads - this.getItems(DOWNLOADING).length
      if(cnt){
        this.writeLog('开始线程下载:'+cnt)
        this.saveOptions({threads})
        for(let i=0;i<cnt;i++) this.nextDownload()
      }
    }
  },
  getItems(_status){ // 获取指定状态任务
    return this.resources.filter(({status}) => status == _status)
  },
  nextDownload(){ // 进行下一次下载
      let {resources} = this
      if(!resources.some(item => {
        let {status, id, video_url} = item
        if(!video_url) return

        if(status == WAITTING){
          let tr = this.findElement(id)
          if(!tr) return

          let td = tr.querySelectorAll('td')
          let checked = td[1].querySelector('input[type=checkbox]').checked
          let title = td[3].outerText
          if(checked){
              item.status = DOWNLOADING
              const log = (msg, color, next = true) => {
                delete this.downloads[id]
                this.writeLog(msg, title, color, td[4])
                if(next) this.nextDownload()
                item.status = color == 'success' ? DOWNLOADED : ERROR
              }
              let download = this.downloads[id] = GM_download({
                  url: video_url,
                  name: this.safeFileName(title) + '.mp4',
                  onload: () => log(`下载完成...`, 'success'),
                  onerror: () => log(`下载失败`, 'error'),
                  ontimeout: () => log(`下载超时`, 'error'),
                  // onprogress: console.log,
                  headers: {
                      'User-Agent': 'Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
                      'Referer': location.host
                  }
              })
              setTimeout(() => {
               download.abort()
                 if(this.downloads[id]){
                   delete this.downloads[id]
                   log(`下载超时`, 'error')
                 }
              }, 1000 * 60)
              return true
          }
        }
      })){
        if(this.running){
          this.writeLog('下载完成!') & this.switchRunning(false)
        }
      }
  },
  findElement(id){ // 根据Id查找dom
    return $(`tr[data-id="${id}"]`)[0]
  },
  writeLog(msg, prefix = '提示', color = 'info', el){ // 输出日志
    color = {success: '#8bc34a', error: '#a31545', info: '#fff' }[color]
    $('#_log')[0].insertAdjacentHTML('beforeEnd', `<p style="color: ${color}">【${prefix}】 ${msg}</p>`)
    if(el){
      el.style.backgroundColor = color
      el.innerHTML = msg
    }
  },
  findItem(id, method = 'find'){ // 根据Item查找资源信息
    return this.resources[method](_item => _item.id == id)
  },
  // 安全文件名
  safeFileName: str => str.replaceAll('(', '（').replaceAll(')', '）').replaceAll(':', '：').replaceAll('*', '＊').replaceAll('?', '？').replaceAll('"', '＂').replaceAll('<', '＜').replaceAll('>', '＞').replaceAll("|", "｜").replaceAll('\\', '＼').replaceAll('/', '／')
}).init()