templates/index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="no-referrer">
    <title>Youtube Download Plus</title>
    <link rel="shortcut icon" href="static/favicon.png"/>
    <style>
      @media (max-width: 600px) {
        .video-head {
          margin: 0 auto;
          max-width: 50% !important;
        }
        .video-card, .video-child-card {
          flex-direction: column !important;
        }
        .video-details {
          margin-left: unset !important;
        }
      }
      ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }
      ::-webkit-scrollbar-track
      {
        width: 6px;
        border-radius:10px;
        margin: 6px;
      }
      ::-webkit-scrollbar-thumb {
        width: 6px;
        border-radius: 10px;
        border: 3px solid transparent;
        box-shadow: inset 0 0 6px gray;
      }
      ::-webkit-scrollbar-thumb:hover {
        box-shadow: inset 0 0 10px gray;
      }
      html, body {
        min-width: fit-content;
        max-width: 100%;
        margin: 0;
        overflow-x: hidden;
      }
      h1 {
        margin: 4rem;
      }
      p {
        margin: 0;
      }
      a {
        text-decoration: none;
        cursor: pointer;
      }
      summary {
        padding: 0.2rem 1.5rem;
        text-align: start;
        cursor: pointer;
      }
      details:has(div:empty) {
        display: none;
      }
      #url_input {
        font-size: larger;
        width: 90%;
        max-width: 1000px;
        border: 2px solid;
        border-radius: 0.5rem;
        padding: 0.2rem 0.5rem;
      }
      #format_input {
        border: 2px solid;
        border-radius: 0.5rem;
        padding: 0.2rem 0.5rem;
      }
      .hide {
        display: none !important;
      }
      .center{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .container {
        position: relative;
        width: 95%;
        max-width: 1200px;
        text-align: center;
      }
      .inline-block {
        display: inline-block;
      }
      .btn-group {
        margin: 0.4rem 1rem;
      }
      .btn {
        display: inline-block;
        width: fit-content;
        height: fit-content;
        text-align: center;
        padding: 0.2rem 0.5rem;
        margin: 0.2rem;
        border: 2px solid;
        border-radius: 0.5rem;
        text-decoration: none;
        transform-origin: 50% 50%;
        transition: all 0.2s ease;
      }
      .btn:hover:not(:disabled) {
        cursor: pointer;
      }
      .btn:active:not(:disabled) {
        transform: scale(0.9);
      }
      .btn:disabled {
        cursor: not-allowed;
      }
      .help {
        display: inline-block;
        padding-bottom: 0.1rem;
        width: 1rem;
        height: 0.9rem;
        font-size: 0.8rem;
        border: 2px solid;
        border-radius: 100%;
      }
      .file-input {
        display: inline-block;
        margin: 0.2rem;
        border: 2px solid;
        border-radius: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
      }
      .file-input .btn {
        margin: unset;
        border: none;
        border-right: 2px solid;
      }
      .file-input span {
        display: inline-block;
        font-size: small;
        padding-left: 0.1rem;
        max-width: 6rem;
        overflow: hidden;
        vertical-align: middle;
        text-overflow: ellipsis;
      }

      .list {
        display: block;
        width: fit-content;
        border: none;
        margin: 0 auto;
        overflow-y: auto;
        flex-direction: column;
      }
      .list:has(.card:nth-child(2)) {
        max-height: 100vh;
        border: 2px solid;
        border-radius: 0.5rem;
      }
      .video-card {
        position: relative;
        display: flex;
        width: 80vw;
        max-width: 1000px;
        margin: 0.5rem;
        padding: 0.5rem;
        border: 2px solid;
        border-radius: 0.5rem;
        flex-direction: row;
        text-align: start;
      }
      .video-playlist-card {
        position: relative;
        display: flex;
        width: 80vw;
        max-width: 1000px;
        margin: 0.5rem;
        padding: 0.5rem;
        border: 2px solid;
        border-radius: 0.5rem;
        flex-direction: column;
      }
      .video-child-card {
        position: relative;
        display: flex;
        margin-top: 0.5rem;
        padding: 0.2rem;
        border-top: 2px solid;
        text-align: start;
      }
      .video-info-list .btn {
        display: unset !important;
      }
      
      .video-head {
        display: flex;
        max-width: 10rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .video-head img {
        display: inline-block;
        width: 100%;
        border-radius: 5%;
        object-fit: scale-down;
      }
      .video-details {
        display: flex;
        margin-left: 2rem;
        flex-direction: column;
        justify-content: center;
      }

      #color_scheme {
        position: absolute;
        display: block;
        width: 40px;
        height: 20px;
        top: 1rem;
        left: 1rem;
        border-radius: 25%/50%;
        background-color: fieldtext;
        overflow: hidden;
        cursor: pointer;
      }
      #color_scheme.dark {
        background-color: fieldtext;
      }
      #color_scheme:before, #color_scheme:after {
        display: block;
        position: absolute;
        content: "";    
        width: 40%;
        height: 80%;
        border-radius: 50%;
        top: 10%;
        left: 5%;
        transition: transform .5s ease;
      }
      #color_scheme:before {
        background-color: field;
      }
      #color_scheme:after {
        background-color: fieldtext;
        left: -25%;
        transform: scale(0.00001);
      }
      #color_scheme.dark:before {
        background-color: field;
        transform: translateX(120%);
      }
      #color_scheme.dark:after {
        background-color: fieldtext;
        transform: translateX(150%) scale(1);
      }
    </style>
  </head>
  <body class="center">
    <div class="container">
      <h1><a href="https://github.com/yt-dlp/yt-dlp" target="_blank">yt-dlp</a></h1>
      <div>
        <input type="text" id="url_input" placeholder="粘贴URL并回车直接下载">
      </div>
      <div class="btn-group">
        <input class="btn btn-request" type="button" onclick="videoQuery()" value="查询详情">
        <input class="btn btn-request" type="button" onclick="videoAdd()" value="下载视频">
      </div>
      <div class="search-notify"></div>
      <details>
        <summary>
          下载设置
        </summary>
        <div class="list">
          <div class="file-input">
            <input class="btn" type="button" onclick="setCookie()" value="设置">
            <span>当前Cookie: </span>
            <span id="cookie_type">自动选择</span>
          </div>
          <div class="inline-block">
            <a class="help" href="https://github.com/yt-dlp/yt-dlp#format-selection" target="_blank" title="如何填写视频格式选择器">?</a>
            <input type="text" id="format_input" placeholder="视频格式选择器">
          </div>
        </div>
      </details>
      <details open>
        <summary>视频详情
          <a href="javascript:;" onclick="videoQueryListClear()">清空</a>
        </summary>
        <div class="list center video-info-list"></div>
      </details>
      <details open>
        <summary>下载列表
          <span id="downloading-count"></span>
          <a href="javascript:;" onclick="videoDownloadListClear()">清空</a>
          <span id="downloading-span"></span>
        </summary>
        <div class="list center video-downloading-list"></div>
      </details>
      <details>
        <summary>历史记录
          <span id="history-count"></span>
          <a href="javascript:;" onclick="videoHistoryListClear()">清空</a>
        </summary>
        <div class="list center video-history-list"></div>
      </details>
    </div>
    <div id="color_scheme" onclick="changeScheme()"></div>
    <a href="https://github.com/shadlc/ytdlp-server" style="position:absolute;top:0;right:0;">
      <img decoding="async" loading="lazy" width="50" height="50" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_gray_6d6d6d.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1">
    </a>
  </body>
  
  <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    var vConsole = new window.VConsole();
  </script> -->
  <script>
    const host = ""
    const infoUrl = host + "info";
    const downloadUrl = host + "download";
    const clearDownloadUrl = host + "clear_download";
    const clearHistoryUrl = host + "clear_history";
    const statusUrl = host + "status";
    const historyUrl = host + "history";
    const setUrl = host + "set";
    
    let requesting = false;
    let offline = false;
    let downloading_list = {};
    let queryTimeout = null;
    let custom_cookie = null;

    const url_input = document.getElementById("url_input");
    const cookie_type = document.getElementById("cookie_type");
    const color_scheme = document.getElementById("color_scheme");

    url_input.addEventListener("keydown", (e)=>{
      if (e.keyCode == "13" && !requesting) {
        const url = url_input.value;
        videoAdd(url);
      }
    })
    url_input.addEventListener("input", (e)=>{
        requestingMode(false);
    })

    function isJson(str) {
      try {
        JSON.parse(str);
      } catch(e) {
        return false;
      }
        return true;
    }

    function respondRequest(ajax, callback, notify) {
      data = {};
      if (ajax.status==200){
        data = JSON.parse(ajax.responseText);
        const div = "<p>" + data.status + "</p>"
        if (notify) {
          document.querySelector(".search-notify").innerHTML = div;
        }
        if (offline) {
          offline = false;
          queryHistory(true);
        }
        if (typeof callback === "function") {
          callback(data);
        }
      } else if(ajax.status == 0 || ajax.status == 404 || ajax.status == 502) {
        offline = true;
        document.querySelector(".search-notify").innerHTML = "无法连接至yt-dlp！";
        if (typeof callback === "function") {
          callback(null);
        }
      } else if (ajax.status != 200) {
        data.status = "内部错误！"
        if (isJson(ajax.responseText)) {
          data = JSON.parse(ajax.responseText);
        }
        let div = "<p>" + data.status + "</p>"
        if (notify) {
          document.querySelector(".search-notify").innerHTML = div;
        }
        if (typeof callback === "function") {
          callback(data);
        }
      }
    }
    function get(url, callback, notify=true){
      const ajax = new XMLHttpRequest();
      ajax.open("GET", url, true);
      ajax.send();
      ajax.onreadystatechange=()=>{
        if (ajax.readyState == 4){
          respondRequest(ajax, callback, notify);
        }
      }
    }
    function post(url, data, callback, notify=true) {
      const ajax = new XMLHttpRequest();
      ajax.open("POST", url, true);
      ajax.send(data);
      ajax.onreadystatechange=()=>{
        if (ajax.readyState == 4){
          respondRequest(ajax, callback, notify);
        }
      }
    }
    function requestingMode(status) {
      request_btn = document.querySelectorAll(".btn-request");
      if (status) {
        request_btn.forEach((e)=>{
          e.disabled = true;
        });
      } else {
        request_btn.forEach((e)=>{
          e.disabled = false;
        });
      }
    }
    function formatSize(value) {
      if (null == value || value == "") {
          return "0 Bytes";
      }
      const unitArray = new Array("B","KB","MB","GB","TB","PB","EB","ZB","YB");
      let index = 0;
      let srcSize = parseFloat(value * 1.1);
      index = Math.floor(Math.log(srcSize) / Math.log(1024));
      let size = srcSize/Math.pow(1024, index);
      size = size.toFixed(2);
      return size + unitArray[index];
    }
    function formatSeconds(value) {
      let hours = Math.floor(value / 3600);
      let minutes = Math.floor((value - (hours * 3600)) / 60);
      let seconds = Math.floor(value - (hours * 3600) - (minutes * 60));
      if (minutes < 10 && hours != 0) {
        minutes = "0" + minutes;
      }
      if (seconds < 10 && minutes != 0) {
        seconds = "0" + seconds;
      }
      let timeString = hours + ":" + minutes + ":" + seconds;
      if (hours == 0 && minutes == 0) {
        timeString = seconds;
      } else if (hours == 0) {
        timeString = minutes + ":" + seconds;
      }
      return timeString;
    }

    function createDiv(data){
      div = ""
      if (data.type == "video") {
        div = createVideoDiv(data)
      } else {
        div = createPlaylistDiv(data)
      }
      return div
    }
    function createVideoDiv(data){
      const div = `
        <div class="card video-card">
          <div class="video-head">
            <img src="`+data.thumbnail.replace("http://","https://")+`">
            <input class="btn btn-request hide" type="button" onclick="videoAdd('`+data.url+`', '`+data.format+`')" value="下载视频">
          </div>
          <div class="video-details">
            <a href="`+data.url+`">`+data.title+`</a>
            <p>分辨率: `+data.resolution+`</p>
            <p>预估大小: `+formatSize(data.size)+`</p>
            <p>播放时长: `+formatSeconds(data.duration)+`</p>
            <p>视频格式: `+data.ext+`</p>
            <p>来源: `+data.site+' '+data.uploader+`</p>
          </div>
        </div>
      ` 
      return div;
    }
    function createPlaylistDiv(data){
      let totalSize = 0;
      let totalDuration = 0;
      let childDiv = "";
      let d = data.entires;
      for (let i in d) {
        totalSize += d[i].size;
        totalDuration += d[i].duration;
        childDiv += `
          <div class="video-child-card">
            <div class="video-head">
              <img src="`+d[i].thumbnail+`">
              <input class="btn btn-request hide" type="button" onclick="videoAdd('`+d[i].url+`')" value="下载单集">
            </div>
            <div class="video-details">
              <a href="`+d[i].url+`">`+d[i].title+`</a>
              <p>分辨率: `+d[i].resolution+`</p>
              <p>预估大小: `+formatSize(d[i].size)+`</p>
              <p>视频时长: `+formatSeconds(d[i].duration)+`</p>
              <p>视频格式: `+d[i].ext+`</p>
              <p>来源: `+d[i].site+' '+d[i].uploader+`</p>
            </div>
          </div>
        `
      }
      let isOpen = "";
      if (d.length <= 3) {
        isOpen = "open";
      }
      const div = `
        <div class="card video-playlist-card">
          <div>
            <a href="`+data.url+`">`+data.title+`</a>
            <p>集数: `+data.count+` | 总大小: `+formatSize(totalSize)+` | 总时长: `+formatSeconds(totalDuration)+`</p>
            <input class="btn btn-request hide" type="button" onclick="videoAdd('`+data.url+`')" value="下载合辑">
            <details `+isOpen+`>
              <summary>合辑详情</summary>
              <div>`+childDiv+`</div>
            </details>
          </div>
        </div>
      ` 
      return div;
    }
    
    function showVideoInfo(data){
      if (data != ""){
        document.querySelector(".video-info-list").insertAdjacentHTML("AfterBegin", createDiv(data));
      }
    }
    function showVideoCard(data, element){
      document.querySelector(element).innerHTML = "";
      if (data != ""){
        for(let key in data) {
          document.querySelector(element).insertAdjacentHTML("AfterBegin", createDiv(data[key]));
        }
      }
    }

    function videoQuery(url){
      requestingMode(true);
      document.querySelector(".search-notify").innerHTML = "正在获取视频详情...";
      if (url == null) {
        url = document.getElementById("url_input").value;
      }
      format = document.getElementById("format_input").value;
      if (custom_cookie || format) {
        post(infoUrl, JSON.stringify({"url": url, "cookie": custom_cookie, "format": format}),(e)=>{
          if (e != null && e.data != null) {
            showVideoInfo(e.data);
            url_input.value = "";
            if (e.data.cookie) {
              cookie_type.innerHTML = e.data.cookie;
            }
          }
          requestingMode(false);
        });
      } else {
        get(infoUrl + "?url=" + url,(e)=>{
          if (e != null && e.data != null) {
            showVideoInfo(e.data);
            url_input.value = "";
            if (e.data.cookie) {
              cookie_type.innerHTML = e.data.cookie;
            }
          }
          requestingMode(false);
        });
      }
    }
    function videoAdd(url, format){
      requestingMode(true);
      document.querySelector(".search-notify").innerHTML = "正在添加至下载列表...";
      if (url == null) {
        url = document.getElementById("url_input").value;
      }
      if (format == null) {
        format = document.getElementById("format_input").value;
      }
      if (custom_cookie || format) {
        post(downloadUrl, JSON.stringify({"url": url, "cookie": custom_cookie, "format": format}),(e)=>{
          if (e != null && e.data != null) {
            queryDownload();
            url_input.value = "";
            if (e.data.cookie) {
              cookie_type.innerHTML = e.data.cookie;
            }
          }
          requestingMode(false);
        });
      } else {
        get(downloadUrl + "?url=" + url,(e)=>{
          if (e != null && e.data != null) {
            queryDownload();
            url_input.value = "";
            if (e.data.cookie) {
              cookie_type.innerHTML = e.data.cookie;
            }
          }
          requestingMode(false);
        });
      }
    }
    function setCookie(){
      const input = document.createElement("input");
      input.type = "file";
      input.accept = "text/plain"
      input.addEventListener("change", () => {
        const file = input.files[0];
        cookie_type.innerHTML = file.name;
        const reader = new FileReader();
        reader.addEventListener("load", () => {
          custom_cookie = reader.result.split(",")[1];
        });
        reader.readAsDataURL(file);
      });
      input.click();
    }

    function queryHistory(status=false){
      get(historyUrl, (he)=>{
        if (he != null || he.data == null) {
          showVideoCard(he.data, ".video-history-list");
          if(he.data.length !=0) {
            document.querySelector("#history-count").innerHTML = "(" + he.data.length + ")";
          } else {
            document.querySelector("#history-count").innerHTML = "";
          }
        }
      }, status);
    }
    function queryDownload(status=false){
      clearTimeout(queryTimeout);
      get(statusUrl, (de)=>{
        if (de == null || de.data == null){
          queryTimeout = setTimeout(queryDownload, 5000);
          return;
        }
        if (de.data.length == 0){
          queryTimeout = setTimeout(queryDownload, 3000);
        } else {
          queryTimeout = setTimeout(queryDownload, 1000);
          if ("Notification" in window && Notification.permission == "default") {
            document.querySelector(".search-notify").innerHTML = "<span style='color:red'>是否允许通知，使视频下载完毕后提示？</span>";
            Notification.requestPermission((s)=>{ document.querySelector(".search-notify").innerHTML = ""; });
          }
        }
        if ("Notification" in window && downloading_list.length >= 1 && downloading_list.length - 1 == de.data.length && Notification.permission == "granted") {
          doNotify("从" + downloading_list[0].site + "获取的视频 ⌈" + downloading_list[0].title + "⌋ 已下载完成！");
        }
        if (JSON.stringify(downloading_list) != JSON.stringify(de.data)){
          showVideoCard(de.data, ".video-downloading-list");
          if(de.data.length !=0) {
            document.querySelector("#downloading-count").innerHTML = "(" + de.data.length + ")";
            document.querySelector("#downloading-span").innerHTML = "(正在下载: <a href=" + de.data[0].url + ">" + de.data[0].title + "</a>)";
          } else {
            document.querySelector("#downloading-count").innerHTML = "";
            document.querySelector("#downloading-span").innerHTML = "";
          }
          document.querySelector(".search-notify").innerHTML = "<p>" + de.status + "</p>";
          queryHistory();
          downloading_list = de.data;
        }
      }, status);
    }
    queryHistory();
    queryDownload();

    function videoQueryListClear(){
      document.querySelector(".video-info-list").innerHTML = "";
    }
    function videoDownloadListClear(){
      const flag = confirm("该操作会清空下载列表(由于yt_dlp限制无法停止正在下载，只是清空记录)，是否继续？");
      if (flag) {
        get(clearDownloadUrl);
        queryDownload();
      }
    }
    function videoHistoryListClear(){
      let flag = confirm("该操作会清空下载历史记录，是否继续？");
      if (flag) {
        get(clearHistoryUrl);
        queryHistory();
      }
    }

    const themeScheme = window.matchMedia("(prefers-color-scheme: light)");
    themeScheme.addEventListener("change", (e)=>{
      if (themeScheme.matches) {
        setScheme("light");
      } else {
        setScheme("dark");
      }
    });
    const evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', true, true);
    themeScheme.dispatchEvent(evt);

    function doNotify(msg) {
      navigator.serviceWorker.register("static/sw.js")
      .then((registration) => {
        registration.showNotification(msg);
      })
    }
    function changeScheme(){
      if (getComputedStyle(document.querySelector("html")).colorScheme == "light") {
        setScheme("dark");
      } else {
        setScheme("light");
      }
    }
    function setScheme(mode){
      if (mode == "light") {
        document.querySelector("html").style.colorScheme = "light";
        color_scheme.classList.remove("dark");
      } else {
        document.querySelector("html").style.colorScheme = "dark";
        color_scheme.classList.add("dark");
      }
    }
  </script>
</html>