B站笔记快捷键←↓→

在B站笔记中:打开笔记快捷键:Ctrl+Shift+↑,关闭笔记快捷键:Ctrl+Shift+↓,笔记窗口切换到视频窗口:Ctrl+Shift+←,视频窗口切换到笔记窗口:Ctrl+Shift+→,截图+时间戳快捷键:Ctrl+↓,时间戳+截图快捷键:Ctrl+↑,时间戳快捷键:Ctrl+←,截图快捷键:Ctrl+→,下载视频笔记Ctrl+Shift+S

当前为 2023-01-16 提交的版本,查看 最新版本

// ==UserScript==
// @name         B站笔记快捷键←↓→
// @namespace    https://space.bilibili.com/1208812226
// @version      2.8.4
// @description  在B站笔记中:打开笔记快捷键:Ctrl+Shift+↑,关闭笔记快捷键:Ctrl+Shift+↓,笔记窗口切换到视频窗口:Ctrl+Shift+←,视频窗口切换到笔记窗口:Ctrl+Shift+→,截图+时间戳快捷键:Ctrl+↓,时间戳+截图快捷键:Ctrl+↑,时间戳快捷键:Ctrl+←,截图快捷键:Ctrl+→,下载视频笔记Ctrl+Shift+S
// @author       大王鹅鹅鹅
// @match        http*://www.bilibili.com/video/*
// @match        https://www.bilibili.com/medialist/*
// @icon         https://static.hdslb.com/images/favicon.ico
// @require      https://cdn.bootcdn.net/ajax/libs/jszip/3.10.1/jszip.js
// @grant        none
// @license      AGPL License
// ==/UserScript==

(function () {
    "use strict";
    // JS监听键盘快捷键事件
    document.addEventListener("keydown", function (event) {
        if (event.shiftKey && event.keyCode == 38) {//打开笔记——快捷键:Ctrl+Shift+↑
            if (event.ctrlKey) {
                document.querySelector(".note-btn__blue").click();
                setTimeout( function(){document.querySelector(".operation-desc").click();},0);
                var count = 2;
                var timeId = setInterval(function () {
                    count--;
                    if (count <= 0) {
                        clearInterval(timeId);
                    }
                    initFocusDown();

                }, 600);

                //固定笔记
                var myresize = document.querySelector(".resizable-component");
                myresize.style.position = 'fixed';
                myresize.style.setProperty('position', 'fixed', 'important');

            }
        }

        if (event.shiftKey && event.keyCode == 40) {//关闭笔记——快捷键:Ctrl+Shift+↓
            if (event.ctrlKey) {
                document
                    .querySelector(".close-note")
                    .click();
            }
        }

        if (event.shiftKey && event.keyCode == 37) {//回到视频——快捷键:Ctrl+Shift+←
            if (event.ctrlKey) {
                var pNodel = document.querySelector(
                    "div.editor-innter.ql-container.ql-snow > div.ql-editor"
                );
                pNodel.blur();

                let videos = document.getElementsByTagName('video');
                let video = videos[0];
                if(toggle()){
                    video.pause();
                }else{
                    video.play();
                }

            }
        }
        if (event.shiftKey && event.keyCode == 39) {//回到笔记——快捷键:Ctrl+Shift+→
            if (event.ctrlKey) {
                initFocusDown();
            }
        }

        if (event.ctrlKey && event.keyCode == 37) {//时间戳——快捷键:Ctrl+←
            if (!event.shiftKey) {
                document.querySelector("i.bili-note-iconfont.iconicon_flag_L").click();
                setTimeout(function () {
                    document
                        .querySelector(
                        "div.dialog-btn.tag-dialog__btn--confirm:nth-child(2)"
                    )
                        .click();
                }, 0);
            }
        }


        if (event.ctrlKey && event.keyCode == 38) {//时间戳+截图——快捷键:Ctrl+↑
            if (!event.shiftKey) {
                imageAfterTime();

            }
        }

        if (event.ctrlKey && event.keyCode == 39) {//截图——快捷键:Ctrl+→
            if (!event.shiftKey) {
                document.querySelector("i.bili-note-iconfont.iconcapture-app").click();
                setTimeout(function () {
                    var parentNode = document.querySelector(
                        "div.editor-innter.ql-container.ql-snow > div.ql-editor"
                    );
                    var scrollHeight = parentNode.scrollHeight;
                    parentNode.scrollTo(0, scrollHeight);
                    parentNode.focus();
                }, 500);

            }
        }

        if (event.ctrlKey && event.keyCode == 40) {//截图+时间戳——快捷键:Ctrl+↓
            if (!event.shiftKey) {
                timeAfterImage();
            }
        }

        if (event.shiftKey && event.keyCode == 83) {//下载笔记为markdown格式——快捷键:Ctrl+Shift+S
            if (event.ctrlKey) {
                openNote();
            }
        }

        if (event.altKey && event.keyCode == 83) {//下载笔记为markdown格式——快捷键:Ctrl+Alt+S
            if (event.ctrlKey) {
                openNote();
            }
        }



        if (event.shiftKey && event.keyCode == 90) {//弹幕一键存入笔记——快捷键:Ctrl+Shift+Z
            if (event.ctrlKey) {
                getDanMu();
            }
        }

        if (event.shiftKey && event.keyCode == 86) {//截图一键存入笔记——快捷键:Ctrl+Shift+V
            if (event.ctrlKey) {
                //下载所有弹幕
                //getDanMuDownload();

                //下载所有截图
                // getPicDownload();



            }
        }

         if (event.shiftKey && event.keyCode == 51) {//截图一键存入笔记——快捷键:Ctrl+Shift+3
            if (event.ctrlKey) {
                var playbackrate = document.querySelector(".bpx-player-ctrl-playbackrate-menu");
                playbackrate.children[2].click();

            }
        }




        if (event.altKey && event.keyCode == 67) {//获取视频当前精确播放位置链接到剪贴板——快捷键:Alt+C
            let videos = document.getElementsByTagName('video');
            let video = videos[0];
            let pUrl = window.location.href;
            let match = pUrl.match(/(https\:\/\/www.bilibili.com\/video\/)(BV|av)[a-zA-Z0-9]+(?=[\/\?])?/g);
            let r= new RegExp(`[?&]p=([^&]*)`);
            let regex = new RegExp(`[?&]p=([^&]*)`);
            if(regex.test(pUrl)){

                let results = r.exec(pUrl);
                let p = results ? results[1] : null;
                pUrl = match ? match[0] +"?p="+p+"&t="+video.currentTime: pUrl;
            }else{
                pUrl = match ? match[0] +"?t="+video.currentTime: pUrl;

            }

            navigator.clipboard.writeText(pUrl).then(function() {
                console.log('Copied text to clipboard');
            }, function(err) {
                console.error('Failed to copy text: ', err);
            });
        }


    });

    var mystate = false;
    function toggle() {
        mystate = !mystate;
        return mystate;
    }

    function initFocusDown() {
        var el = document.querySelector(
            "div.editor-innter.ql-container.ql-snow > div.ql-editor"
          );
        if(el!=null){
            var scrollHeight = el.scrollHeight;
            el.scrollTo(0, scrollHeight);
            el.focus();
            if (
                typeof window.getSelection != "undefined" &&
                typeof document.createRange != "undefined"
            ) {
                var range = document.createRange();
                range.selectNodeContents(el);
                range.collapse(false);
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (typeof document.body.createTextRange != "undefined") {
                var textRange = document.body.createTextRange();
                textRange.moveToElementText(el);
                textRange.collapse(false);
                textRange.select();
            }
        }
    }

    function openNote() {
      const editor = document.querySelector(".ql-editor")
        ? document.querySelector(".ql-editor")
        : null;
        if(!editor){alert("请先打开视频笔记,快捷键:Ctrl+Shift+↑");return;}
      const isBlank = editor && !editor.classList.contains("ql-blank");

      if (isBlank) {
        const noteContent = getNoteContent(editor);
        downloadMD(noteContent);
      } else {
        alert("笔记为空,无法下载");
      }
    }

    function getNoteContent(editor) {
      if (
        editor.nodeType === 1 &&
        editor.childNodes &&
        editor.childNodes.length > 0
      ) {
        return getNodes2Array(editor.childNodes);
      }
      return "";
    }

    function getNodes2Array(nodes) {
      const contents = [];
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        if (node.nodeType == 1) {
          if (node.nodeName == "P") {
              if (node.querySelector('div') || node.querySelector('span') || node.querySelector('strong') || node.querySelector('u') || node.querySelector('s')) {
                   contents.push(node2string(node));
              }else{
                   contents.push(node.innerHTML.replace(/src="(?!https:)(.*?)"/g, 'src="https:$1"').replace(/<br\s*\/?>/gi, "\n"));
              }
            
          } else if (node.nodeName == "OL" || node.nodeName == "UL") {
            contents.push(getLiContent(node));
          } else if (node.nodeName == "DIV") {
            contents.push(divImgContent(node));
          } else {
            contents.push(node.textContent);
          }
        }
      }
      return contents;
    }

    function getLiContent(node) {
      let allLiContent = "";
      let nodeName = node.nodeName;
      let liNodes = node.childNodes;
      let indentLevels = {};

      if (liNodes && liNodes.length > 0) {
        for (let li of liNodes) {
          let liclass = li.getAttribute("class");
          let indentLevel = 0;
          if (liclass) {
            let match = liclass.match(/ql-indent-(\d+)/);
            if (match) {
              indentLevel = parseInt(match[1]);
            }
          }

          indentLevels[indentLevel] = (indentLevels[indentLevel] || 0) + 1;

          let indent = "";
          for (let i = 0; i < indentLevel; i++) {
            indent += "\t";
          }

          allLiContent +=
            indent +
            (nodeName == "OL" ? indentLevels[indentLevel] + ". " : "- ") +
            node2string(li) +
            "\n";
        }
      }

      return allLiContent;
    }

    function divImgContent(node) {
      if (!node.classList || !node.classList.contains("ql-image-preview")) {
        return;
      }

      let img = node.querySelector("img");
      let src = img ? "https:" + img.getAttribute("src") : "";
      if (!src.includes("http")) {
        return;
      }

      let content = src ? src : "";
      if (!content.match(/api.bilibili.com\/x\/note\/image/g)) {
        content = "![](" + content + ")";
      }
      return content;
    }

    function node2string(node) {
      let nodes = node.childNodes;
      if (!nodes || nodes.length <= 0) return "";
      let line = "";

      for (let i = 0; i < nodes.length; i++) {
        let child = nodes[i];
        let tag = child.nodeName;
        let myContents = "";

        if (
          (child.classList && child.classList.contains("ql-tag-blot")) ||
          tag === "DIV"
        ) {
          //时间戳
          let timeText = child.querySelector(".time-tag-item__text");
          let desc = child.querySelector(".time-tag-item__desc");
          let p = child.getAttribute("data-index");
          let second = child.getAttribute("data-seconds");
          let pUrl = window.location.href;
          let match = pUrl.match(
            /(https\:\/\/www.bilibili.com\/video\/)(BV|av)[a-zA-Z0-9]+(?=[\/\?])?/g
          );
          pUrl = match ? match[0] : pUrl;

          let title =
            "🚩" +
            timeText.firstChild.textContent +
            (desc ? " " + desc.textContent.replace(/~/g, '') : "");
          let time = `${pUrl}?p=${p}&t=${second}`;

          myContents += `[${title}](${time})`;
        } else {
          if (!child.children || child.children.length == 0) {
              myContents += child.textContent;
          } else {
            myContents += node2string(child);
          }

          //针对文字ql-bg
          let className = "";
          if (child.classList) {
            let myClassList = child.classList;
            for (let a = 0; a < myClassList.length; a++) {
              if (myClassList[a].match(/ql-bg/)) {
                className += "background-color:" + myClassList[a].slice(-7) + ";";
              }
              if (myClassList[a].match(/ql-color/)) {
                className += "color:" + myClassList[a].slice(-7) + ";";
              }
              if (myClassList[a].match(/ql-size/)) {
                className +=
                  "font-size:" +
                  myClassList[a].slice(8, myClassList[a].length) +
                  ";";
              }
            }
          }

         if (child.children && child.querySelector('.ql-tag-blot')==null) {

          let font1 = className != "" ? "<font style='" + className + "'>" : "";
          let font2 = className != "" ? "</font>" : "";
          myContents = font1 + myContents + font2;


          if (tag == "U" || tag == "S" || tag == "STRONG") {
            myContents =
              "<" +
              tag.toLowerCase() +
              ">" +
              myContents +
              "</" +
              tag.toLowerCase() +
              ">";
          } else if (tag == "BR") {
              myContents += "\n";
          } else {
              myContents += "";
          }
         }
        }
        line += myContents;
      }
      return line;
    }
      function getNowTime(){
          var now = new Date();
          var year = now.getFullYear();
          var month = now.getMonth() + 1;
          var date = now.getDate();
          var hours = now.getHours();
          var minutes = now.getMinutes();
          var seconds = now.getSeconds();
          hours = hours < 10 ? '0' + hours : hours;
          minutes = minutes < 10 ? '0' + minutes : minutes;
          seconds = seconds < 10 ? '0' + seconds : seconds;

          var dateString = year + "-" + month + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
          return dateString;
      }

   function getInfo(){
          let allContent ="";
          try{
              const username = document.querySelector(".username").firstChild.textContent.trim();
              const pudate_text = document.querySelector(".pudate-text").firstChild.textContent.trim();
              const views = document.querySelector("span.view.item").getAttribute("title");
              let pUrl = window.location.href;
              let match = pUrl.match(/(https\:\/\/www.bilibili.com\/video\/)(BV|av)[a-zA-Z0-9]+(?=[\/\?])?/g);
              pUrl = match ? match[0] : pUrl;
              allContent = "---\ntags: bilibili_note\nurl: "+pUrl+"\nup: "+username+"\nup_date: "+pudate_text+"\ndown_time: "+getNowTime()+"\nviews: "+views+"\n---\n\n";
          }catch(e){
              let pUrl = window.location.href;
              let match = pUrl.match(/(https\:\/\/www.bilibili.com\/video\/)(BV|av)[a-zA-Z0-9]+(?=[\/\?])?/g);
              pUrl = match ? match[0] : pUrl;
              allContent = "---\ntags: bilibili_note\nurl: "+pUrl+"\ndown_time: "+getNowTime()+"\n---\n\n";
          }
      return allContent;
      }

    async function getVideoInfo(src) {
        return await fetch(src, {
            method: 'get',
            credentials:  src.includes("bilibili.com") ? "include" : "omit",
        }).then(function(res) {
            return res.text();
        }).then(function(data) {
            return data;
        });

    }

    function downloadMD(notes) {
      let zip = new JSZip();
      let allContent =getInfo();
      let isOnlyMD=false;
      let bid = window.location.href.match(
        /(?<=bilibili.com\/video\/)(BV|av)[a-zA-Z0-9]+(?=[\/\?])?/g
      );

      for (var i = 0; i < notes.length; i++) {
        if (notes[i] != "") {
          let images_id = notes[i].match(
            /(?<=api.bilibili.com\/x\/note\/image\?image_id=)\d{6}/g
          );
          if (images_id) {
            allContent +=
              "![](assets/" + bid[0] + "_" + images_id[0] + ".jpg)" + "\n";

           let fileName = notes[i].slice(-6);
           let img_bolb= downloadImages(notes[i]);
           zip.folder("assets").file(bid[0] + "_" + fileName + ".jpg", img_bolb);
           isOnlyMD=true;
          } else {
            allContent += notes[i] + "\n";
          }
        } else {
          allContent += "\n";
        }
      }

      let video_title = document.querySelector(".video-title");
      let v_title = video_title ? video_title.textContent : new Date().getTime();
      if(isOnlyMD){
          zip.file("bilibili_" + v_title + ".md", allContent);
          zip.generateAsync({
              type: 'blob',
              compression: "DEFLATE",
              compressionOptions: {
                  level: 9
              }
          }).then(function(c) {
              let filename = v_title+'.zip';
              let a = document.createElement('a');
              a.download = filename;
              a.style.display = 'none';
              a.href = URL.createObjectURL(c);
              document.body.appendChild(a);
              a.click();
              URL.revokeObjectURL(c);
              document.body.removeChild(a);
          });
      }else{
          let blob = new Blob([allContent]);
          let a = document.createElement('a');
          a.download = "bilibili_" + v_title + ".md";
          a.href = URL.createObjectURL(blob);
          document.body.appendChild(a);
          a.click();
          URL.revokeObjectURL(blob);
          document.body.removeChild(a);

      }
    }

    async function downloadImages(src) {
      let res = await fetch(src, {
        method: "get",
        credentials: src.includes("bilibili.com") ? "include" : "omit",
      });
      if (!res.ok) return;
      let blob = await res.blob();
      return blob;
      
    }


    function imageAfterTime() {//时间戳+截图 ↑
        setTimeout( function(){
            document.querySelector('i.bili-note-iconfont.iconicon_flag_L').click();
            setTimeout( function(){
                document.querySelector('div.dialog-btn.tag-dialog__btn--confirm:nth-child(2)').click();
                setTimeout( function(){
                    document.querySelector('i.bili-note-iconfont.iconcapture-app').click();
                    setTimeout( function(){
                        var qlEditor=document.querySelector('.ql-editor');
                        var lastp = qlEditor.lastElementChild;
                        console.log(lastp.previousSibling)
                        if(lastp!=null && lastp.previousSibling.previousSibling !=null && lastp.previousSibling.previousSibling.firstElementChild.nodeName=="BR"){
                            lastp.previousSibling.previousSibling.remove();
                        }
                        var scrollHeight = qlEditor.scrollHeight;
                        qlEditor.scrollTo(0, scrollHeight);
                        qlEditor.lastElementChild.focus();
                    },110);
                },0);
            },0);
        },0);
    }


    function timeAfterImage(){//截图+时间 ↓
        setTimeout( function(){
            document.querySelector('i.bili-note-iconfont.iconcapture-app').click();
            setTimeout( function(){
                getTimestamp();
                setTimeout( function(){
                    var qlEditor=document.querySelector('.ql-editor');
                    var lastp = qlEditor.lastElementChild;
                    console.log(lastp.previousSibling)
                    if(lastp!=null && lastp.previousSibling.previousSibling !=null && lastp.previousSibling.previousSibling.firstElementChild.nodeName=="BR"){
                        lastp.previousSibling.previousSibling.remove();
                    }
                    var scrollHeight = qlEditor.scrollHeight;
                    qlEditor.scrollTo(0, scrollHeight);
                    qlEditor.lastElementChild.focus();
                },110);
            },110);
        },110);

    }



       function toEnd(el) {
           var scrollHeight = el.scrollHeight;
           el.scrollTo(0, scrollHeight);
           el.lastElementChild.focus();

           if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
               var range = document.createRange();
               range.selectNodeContents(el);
               range.collapse(false);
               var sel = window.getSelection();
               sel.removeAllRanges();
               sel.addRange(range);
           } else if (typeof document.body.createTextRange != "undefined") {
               var textRange = document.body.createTextRange();
               textRange.moveToElementText(el);
               textRange.collapse(false);
               textRange.select();
           }
       }

    function getDanMu() {
        let state = window.__INITIAL_STATE__;
        let p = state.p || 1;
        let cid = state.videoData.pages[p - 1].cid;
        let src = "https://api.bilibili.com/x/v1/dm/list.so?oid=" + cid;

        return fetch(src, {
            method: "get",
            dataType: "text/xml",
            credentials: 'include',
        }).then(function (response) {

            return response.text();
        }).then(function (result) {

            const editor = document.querySelector(".ql-editor")? document.querySelector(".ql-editor"): null;
            if(editor){
                parseDanMu(result,state,editor);
                const timestamps = document.querySelectorAll('.ql-tag-blot');
                timestamps.forEach(function(timestamp) {
                    timestamp.addEventListener('click', function(e) {
                        let dataSeconds=timestamp.getAttribute("data-seconds");
                        let videos = document.getElementsByTagName('video');
                        let video = videos[0];

                        video.currentTime = dataSeconds;
                        video.play();
                        setTimeout(function () {
                             document.querySelector("i.bili-note-iconfont.iconcapture-app").click();
                        }, 200);


                    });

                   editor.scrollTo(0,0);
                   editor.focus();
                });

            }else{
                alert("请先打开视频笔记,快捷键:Ctrl+Shift+↑");
            }

        });
    }

      function getDanMuDownload() {
        let state = window.__INITIAL_STATE__;
        let p = state.p || 1;
        let cid = state.videoData.pages[p - 1].cid;
        let src = "https://api.bilibili.com/x/v1/dm/list.so?oid=" + cid;

        return fetch(src, {
            method: "get",
            dataType: "text/xml",
            credentials: 'include',
        }).then(function (response) {

            return response.text();
        }).then(function (xmlString) {

            let myContents =getInfo();
            let p = state.p || 1;
            let cid = state.videoData.pages[p - 1].cid;
            let title = state.videoData.title;
            let pUrl = window.location.href;
            let match = pUrl.match(/(https\:\/\/www.bilibili.com\/video\/)(BV|av)[a-zA-Z0-9]+(?=[\/\?])?/g);
            pUrl = match ? match[0] : pUrl;

            let parser = new DOMParser();
            let xmlDoc = parser.parseFromString(xmlString, "text/xml");
            let danMuElements=sortDNode(xmlDoc)
            for (let i = 0; i < danMuElements.length; i++) {
                let element = danMuElements[i];
                let pnode = element.getAttribute("p");
                let text = element.textContent;
                let pArr=pnode.split(",");
                let second= parseInt(pArr[0]);
                let title ="🚩" +secondsToMinutes(second) +text.replace(/~/g, '').replace(/\*/g, '');
                let time = `${pUrl}?p=${p}&t=${second}`;
                myContents += `[${title}](${time})`;
                myContents += "\n";
            }

            let video_title = document.querySelector(".video-title");
            let v_title = video_title ? video_title.textContent : new Date().getTime();
            let blob = new Blob([myContents]);
            let a = document.createElement('a');
            a.download = "bilibili_" + v_title + ".md";
            a.href = URL.createObjectURL(blob);
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(blob);
            document.body.removeChild(a);

        });
      }

    function getPicDownload(){
        let videos = document.getElementsByTagName('video');
        let video = videos[0];
        let duration = video.duration;

        video.currentTime = duration;
        video.play();

        const blobArr = [];

        video.onseeked = function() {


            let canvas = document.createElement('canvas');
            canvas.setAttribute('width',video.videoWidth);
            canvas.setAttribute('height',video.videoHeight);
            let ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            let dataURL = canvas.toDataURL('image/jpeg');
            let dataBlob=dataURItoBlob(dataURL);

            blobArr.push(dataBlob);
            downloadPicMD(blobArr);
        };

    }

    async function captureVideoFrames(video, duration) {
        const blobArr = [];

        for (let i = 0; i < duration; i++) {
            (function(i) {
                video.currentTime = i;
                video.pause();

                const canvas = document.createElement('canvas');
                canvas.setAttribute('width', video.videoWidth);
                canvas.setAttribute('height', video.videoHeight);

                const ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                const dataURL = canvas.toDataURL('image/jpeg');
                const dataBlob = dataURItoBlob(dataURL);

                blobArr.push(dataBlob);
                canvas.remove();
            })(i);
        }

        return blobArr;
    }



    function downloadPicMD(blobArr) {
        let zip = new JSZip();
        let allContent =getInfo();
        let bid = window.location.href.match(
            /(?<=bilibili.com\/video\/)(BV|av)[a-zA-Z0-9]+(?=[\/\?])?/g
        );

        for (let i = 0; i < blobArr.length; i++) {
            if (blobArr[i] != "") {
                allContent += "![](assets/" + bid[0] +i + ".jpg)\n";
                zip.folder("assets").file(bid[0] +i + ".jpg", blobArr[i]);
            } else {
                allContent += "\n";
            }
        }
        let video_title = document.querySelector(".video-title");
        let v_title = video_title ? video_title.textContent : new Date().getTime();
        zip.file("bilibili_" + v_title + ".md", allContent);
        zip.generateAsync({
            type: 'blob',
            compression: "DEFLATE",
            compressionOptions: {
                level: 9
            }
        }).then(function(c) {
            let filename = v_title+'.zip';
            let a = document.createElement('a');
            a.download = filename;
            a.style.display = 'none';
            a.href = URL.createObjectURL(c);
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(c);
            document.body.removeChild(a);
        });
    }

    function dataURItoBlob(dataURI) {
        var byteString = atob(dataURI.split(',')[1]);
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
        var ab = new ArrayBuffer(byteString.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        var blob = new Blob([ab], {type: mimeString});
        return blob;
    }


    function sortDNode(xmlDoc){
        const dNodes = xmlDoc.querySelectorAll('d');
        const sortedDNodes = [...dNodes].sort((a, b) => {
            const p1 = a.getAttribute('p');
            const p2 = b.getAttribute('p');
            let p1Arr=p1.split(",");
            let p2Arr=p2.split(",");
            let p1Int=parseInt(p1Arr[0]);
            let p2Int=parseInt(p2Arr[0]);
            if (p1Int < p2Int) {
                return -1;
            } else if (p1Int > p2Int) {
                return 1;
            } else {
                return 0;
            }
        });
        return sortedDNodes;
    }



    function parseDanMu(xmlString,state,editor) {
        let p = state.p || 1;
        let cid = state.videoData.pages[p - 1].cid;
        let title = state.videoData.title;


        let parser = new DOMParser();
        let xmlDoc = parser.parseFromString(xmlString, "text/xml");
        let danMuElements=sortDNode(xmlDoc)
       //let danMuElements = sortedXmlDoc.getElementsByTagName("d");
        for (let i = 0; i < danMuElements.length; i++) {
            let pnew = document.createElement('p');
            let element = danMuElements[i];
            let pnode = element.getAttribute("p");
            let text = element.textContent;
            let pArr=pnode.split(",");
            pnew.append(BHtmlParser(parseInt(pArr[0]),text,cid,p,title,pArr[7].slice(-13)));
            editor.append(pnew);
        }
        var scrollHeight = editor.scrollHeight;
        editor.scrollTo(0, scrollHeight);
    }


    function BHtmlParser(time,text,cid,p,title,datakey){
        let div1 = document.createElement('div');
        div1.setAttribute("class", "ql-tag-blot");
        div1.setAttribute("data-oid_type", "0");
        div1.setAttribute("data-cid", cid);
        div1.setAttribute("data-epid", 0);
        div1.setAttribute("data-status", "0");
        div1.setAttribute("data-index", p);
        div1.setAttribute("data-seconds", time);
        div1.setAttribute("data-cid-count", "1");
        div1.setAttribute("data-key", datakey);
        div1.setAttribute("data-title", title);
        div1.setAttribute("data-desc", text);
        // let span2 = document.createElement('span');
        //  span2.setAttribute("contenteditable", "false");
        let div2 = document.createElement('div');
        div2.setAttribute("class", "time-tag-item");
        div2.setAttribute("contenteditable", "false");

        let i3 = document.createElement('i');
        i3.setAttribute("class", "bili-note-iconfont iconicon_flag_s");

        let span4 = document.createElement('span');
        span4.setAttribute("class", "time-tag-item__text");

        let desc5 = document.createElement('desc');
        desc5.setAttribute("class", "time-tag-item__desc");
        desc5.setAttribute("title", text);
        desc5.append(text);

        div1.append(div2);
        div2.append(i3);
        div2.append(span4);
        span4.append(secondsToMinutes(time));
        span4.append(desc5);
        return div1;
    }

    function secondsToMinutes(seconds) {
        var minutes = Math.floor(seconds / 60);
        var formattedMinutes = ("0" + minutes).slice(-2);
        var formattedSeconds = ("0" + (seconds % 60)).slice(-2);
        return formattedMinutes + ":" + formattedSeconds;
    }

    const state = window.__INITIAL_STATE__;

    function getTimestamp(){
        const editor = document.querySelector(".ql-editor")? document.querySelector(".ql-editor"): null;
        let p = state.p || 1;
        let cid = state.videoData.pages[p - 1].cid;
        let title = state.videoData.title;

        let videos = document.getElementsByTagName('video');
        let video = videos[0];
        let currentTime=video.currentTime;

        let pnew = document.createElement('p');
        var t = (new Date).getTime();

        var timeDom= BHtmlParser(parseInt(currentTime),'',cid,p,title,t);
       
        timeDom.addEventListener('click', function() {
            let videos1 = document.getElementsByTagName('video');
            let video1 = videos1[0];
            video1.currentTime = currentTime;
            video1.play();
        });

        editor.append(timeDom);
        let brnew = document.createElement('br');
        editor.append(brnew);

        toEnd(editor);
        editor.addEventListener('keydown', event => {
            if (event.keyCode === 37) {
                event.preventDefault();
            }
        });

        video.play();
    }

  })();


         window.onload=function(){
                  let newDiv = document.createElement('div');
                  newDiv.style.position="absolute";
                  newDiv.style.zIndex=99999999999999999999;
                  newDiv.style.cursor="pointer";
                  newDiv.setAttribute("id", "my_icon")
                  newDiv.style.display="none";
                  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
                  svg.setAttribute('version', '1.1');
                  svg.setAttribute('id', 'mu');
                  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
                  svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
                  svg.setAttribute('x', '0px');
                  svg.setAttribute('y', '0px');
                  svg.setAttribute('width', '40px');
                  svg.setAttribute('height', '40px');
                  svg.setAttribute('viewBox', '0 0 40 40');
                  svg.setAttribute('enable-background', 'new 0 0 40 40');
                  svg.setAttribute('xml:space', 'preserve');
                  svg.innerHTML = "<image id='image0' width='40' height='40' x='0' y='0' href='data:image/png;base64,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' />";
                  newDiv.appendChild(svg);
                  document.body.after(newDiv);

             function getSelect(){
                 let select = null, range = null;
                 let selectedText = "",selectedHtml="";

                 if(window.getSelection){
                     select = window.getSelection();
                     selectedText = select.toString();
                     if (select.rangeCount > 0) {
                         range = select.getRangeAt(0);
                         var docFragment = range.cloneContents();
                         var tempDiv = document.createElement("div");
                         tempDiv.appendChild(docFragment);
                         selectedHtml = tempDiv.innerHTML;
                     }

                 } else if(document.selection){
                     select = document.selection;
                     range = select.createRange();
                     selectedText = range.text;
                     selectedHtml = range.htmlText;
                 }

                 return selectedHtml;
             };

             var currentText=null;
             var interval = "";
             var oBaby =document.body;
             var oIcon = document.getElementById('my_icon');

             oBaby.onmouseup = function (event) {
                 var ev = event || window.event;
                 var left = ev.pageX;
                 var top = ev.pageY;

                 currentText=getSelect();
                 if (currentText.length > 1) {
                     setTimeout(function () {
                         oIcon.style.display = 'block';
                         oIcon.style.left = left + 'px';
                         oIcon.style.top = top-20 + 'px';
                     }, 100);
                 } else {
                     oIcon.style.display = 'none';
                 }
             };
             oBaby.onclick = function (event) {
                 var ev = event || window.event;
                 ev.cancelBubble = true;
             };
             document.onclick = function () {
                 setTimeout(function () {
                     oIcon.style.display = 'none';
                     clearInterval(interval);
                 }, 500);
             };

             oIcon.onclick = function () {
                 let angle = 0;
                 interval = setInterval(() => {
                     angle += 60;
                     this.style.transformOrigin = '20px 20px';
                     this.style.transform = `rotate(${angle}deg)`;

                 }, 80);
                 const editor = document.querySelector(".ql-editor")? document.querySelector(".ql-editor"): null;
                 if(editor){
                     editor.append(getAllComment(currentText));
                     var scrollHeight = editor.scrollHeight;
                     editor.scrollTo(0, scrollHeight);

                 }else{
                     alert("请先打开视频笔记,快捷键:Ctrl+Shift+↑");
                 }
             };

             //comment
             function getComment(htmlString){
                 var tempStr="";
                 let newspan = document.createElement('span');
                 var tStr=parserString2HTML(htmlString);

                 var leftEntry = tStr.querySelector('.left-entry');
                 if(leftEntry!=null){
                     return newspan;
                 }

                 htmlString = htmlString.replace(/<(?!img|br)[^>]*>/g, '');
                 htmlString = htmlString.replace(/<img[^>]*src="data:image[^"]*"[^>]*>/g, '');

                 htmlString = htmlString.replace(/<img[^>]+src="([^"]+)"[^>]+>/gi, function(match, p1) {
                     if (p1.endsWith('.svg')) {
                         return '';
                     }
                     return match;
                 });




                 var newHtml = htmlString.replace(/<img[^>]*>/g, function(match) {
                     var src = match.match(/src="([^"]*)"/)[1];
                     return "<img>"+src+"<img>";
                 });

                 tempStr=newHtml.split(/<img[^>]*>/g)
                 for(var i=0;i<tempStr.length;i++){
                     if(/png/.test(tempStr[i])){
                         let newImg = document.createElement('img');
                         newImg.setAttribute('width', '24px');
                         newImg.setAttribute('height', '24px');
                         newImg.setAttribute('src', tempStr[i]);
                         newspan.append(newImg);
                         //newspan.append("\n")
                     }else{
                         newspan.append(tempStr[i].replace(/<br>/g,"\n"))

                     }
                 }
                 return newspan;
             }

       
             function getAllComment(htmlString){

                 let newspan = document.createElement('span');
                 var tempStr=parserString2HTML(htmlString);
                 var subReplyItem = tempStr.querySelectorAll(".sub-reply-item");
                 var subUserInfo = tempStr.querySelector('.sub-user-info');
                 var replyItem = tempStr.querySelectorAll(".reply-item");
                 var userInfo = tempStr.querySelector('.user-info');
                 if(replyItem!=null && replyItem.length>0){

                     for(let i=0;i<replyItem.length;i++){
                         let rootReplyContainer = replyItem[i].querySelector('.root-reply-container');
                         if(rootReplyContainer!=null){
                         let biliAvatar = rootReplyContainer.querySelector('.root-reply-avatar .avatar .bili-avatar');

                         //主评论头像
                         if(biliAvatar!=null){
                             let imgSrc = biliAvatar.firstElementChild.getAttribute('src');
                             let newImg = document.createElement('img');
                             newImg.setAttribute('width', '24px');
                             newImg.setAttribute('height', '24px');

                             newImg.style.setProperty('border', 'none');
                             newImg.style.setProperty('border-radius', '50%');
                             newImg.style.setProperty('overflow', 'hidden');


                             newImg.setAttribute('src', imgSrc);
                             newspan.append(newImg);
                         }

                         //主评论userid和用户名
                         let userName = rootReplyContainer.querySelector('.content-warp .user-info .user-name');
                         if(userName!=null){
                             let dataUserId=userName.getAttribute('data-user-id');
                             let userNameReal=userName.textContent;
                             let newA = document.createElement('a');
                             newA.setAttribute('href', 'https://space.bilibili.com/'+dataUserId);
                             newA.textContent=userNameReal+":";
                             newspan.append(newA);
                         }

                         }

                         let noteText = replyItem[i].querySelector('.note-text-container .note-text');
                         if(noteText!=null){
                             newspan.append(getComment(noteText.firstElementChild.innerHTML))
                         }else{
                             let replyContentContainer = replyItem[i].querySelector('.root-reply .reply-content');
                             if(replyContentContainer!=null){
                                 newspan.append(getComment(replyContentContainer.innerHTML))
                             }
                         }
                         newspan.append("\n\n")

                         let sReplyItem = replyItem[i].querySelectorAll('.sub-reply-item');
                         for(let j=0;j<sReplyItem.length;j++){
                             newspan.append(avatarUserNameContent(sReplyItem[j],sReplyItem[j]));
                             newspan.append("\n\n")
                         }


                     }

                 }else if(userInfo!=null){
                       //主评论userid和用户名
                         let userName = userInfo.querySelector('.user-info .user-name');
                         if(userName!=null){
                             let dataUserId=userName.getAttribute('data-user-id');
                             let userNameReal=userName.textContent;
                             let newA = document.createElement('a');
                             newA.setAttribute('href', 'https://space.bilibili.com/'+dataUserId);
                             newA.textContent=userNameReal+":";
                             newspan.append(newA);
                         }

                         let noteText = tempStr.querySelector('.note-text-container .note-text');
                         if(noteText!=null){
                             newspan.append(getComment(noteText.firstElementChild.innerHTML))
                         }else{

                             let replyContentContainer = tempStr.querySelector('.reply-content-container .reply-content');
                             if(replyContentContainer!=null){
                                 newspan.append(getComment(replyContentContainer.innerHTML))
                             }
                         }
                         newspan.append("\n\n")

                         let sReplyItem = tempStr.querySelectorAll('.sub-reply-item');

                         for(let j=0;j<sReplyItem.length;j++){
                             newspan.append(avatarUserNameContent(sReplyItem[j],sReplyItem[j]));
                             newspan.append("\n\n")
                         }


                 }else if(subReplyItem!=null && subReplyItem.length>0){
                     let replyContentContainer = tempStr.querySelector('.root-reply .reply-content-container .reply-content');
                     if(replyContentContainer!=null){
                         newspan.append(getComment(replyContentContainer.innerHTML))
                          newspan.append("\n\n")
                     }

                  for(let i=0;i<subReplyItem.length;i++){
                     newspan.append(avatarUserNameContent(subReplyItem[i],subReplyItem[i]));
                     newspan.append("\n\n")
                  }

                 }else if(subUserInfo!=null){
                     newspan.append(avatarUserNameContent(subUserInfo,tempStr));

                 }else{
                  let isSubUserInfo = tempStr.querySelector('.sub-reply-avatar .avatar .bili-avatar');
                   if(isSubUserInfo==null){
                         newspan.append(getComment(htmlString))
                     }
                 }

                 return newspan;
             }



             function parserString2HTML(htmlString){
                 const parser = new DOMParser();
                 const htmlDoc = parser.parseFromString(htmlString, "text/html");
                 return htmlDoc;

             }

             function avatarUserNameContent(subUserInfo,tempStr){
                 let nSpan = document.createElement('span');
                 let subBiliAvatar = subUserInfo.querySelector('.sub-reply-avatar .avatar .bili-avatar');
                     //sub评论头像
                     if(subBiliAvatar!=null){
                         let subImgSrc = subBiliAvatar.firstElementChild.getAttribute('src');
                         let newImg = document.createElement('img');
                         newImg.setAttribute('width', '24px');
                         newImg.setAttribute('height', '24px');

                         newImg.style.setProperty('border', 'none');
                         newImg.style.setProperty('border-radius', '50%');
                         newImg.style.setProperty('overflow', 'hidden');


                         newImg.setAttribute('src', subImgSrc);
                         nSpan.append(newImg);
                     }

                     let subUserName = subUserInfo.querySelector('.sub-user-name');
                     if(subUserName!=null){
                         let dataUserId=subUserName.getAttribute('data-user-id');
                         let UserName=subUserName.textContent;
                          let newA = document.createElement('a');
                         newA.setAttribute('href', 'https://space.bilibili.com/'+dataUserId);
                         newA.textContent=UserName+":";
                         nSpan.append(newA);
                     }

                     let replyContentContainer = tempStr.querySelector('.reply-content-container .reply-content');
                     if(replyContentContainer!=null){
                         nSpan.append(getComment(replyContentContainer.innerHTML))
                     }
                 return nSpan;
             }
         };