Function renderCaptions

scripts/youtube_getVideoCaption.js:39–116

(captions, title)

      const { parseXml } = await import("./libs/utils/xmlParser.js");

      function renderCaptions(captions, title) {
        const id = "ufs_youtube_getVideoCaption";
        const exist = document.getElementById(id);
        if (exist) exist.remove();

        const div = document.createElement("div");
        div.id = id;
        div.innerHTML = /*html*/ `
          <style>
            #${id} {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: rgba(0, 0, 0, 0.8);
              z-index: 9999999999999999;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18px;
            }
            #${id} a {
              display: inline-block;
              transition: all 0.3s ease;
              text-decoration: none;
            }
            #${id} a:hover {
              text-decoration: underline;
            }
            #${id} > div {
              position: relative;
              background: #eee;
              padding: 20px;
              border-radius: 5px;
              max-width: 500px;
              max-height: 500px;
              overflow-y: scroll;
              overflow-x: hidden;
            }
            #${id} button {
              display: inline-block;
              cursor: pointer;
            }
          </style>
          <div>
            <h3 style="text-align:center">Useful-scripts: Youtube captions</h3><br/>
            <h4>${title}</h4><br/>
            <ul>
              ${captions
                .map(
                  (caption) => `<li>
                    ${caption.name.simpleText} (${caption.languageCode})
                    <a href="${caption.baseUrl}" data-type="srt">srt</a>
                    <a href="${caption.baseUrl}" data-type="txt">txt</a>
                    <a href="${caption.baseUrl}" target="_blank">xml</a>
                  </li>`
                )