☰

Twitter/X Media Batch Downloader

Batch download all images and videos from a Twitter/X account, including withheld accounts, in original quality.

  1. // ==UserScript==
  2. // @name         Twitter/X Media Batch Downloader
  3. // @description  Batch download all images and videos from a Twitter/X account, including withheld accounts, in original quality.
  4. // @icon         https://raw.githubusercontent.com/afkarxyz/Twitter-X-Media-Batch-Downloader/refs/heads/main/Archived/icon.svg
  5. // @version      4.3
  6. // @author       afkarxyz
  7. // @namespace    https://github.com/afkarxyz/userscripts/
  8. // @supportURL   https://github.com/afkarxyz/userscripts/issues
  9. // @homepageURL  https://www.patreon.com/exyezed
  10. // @antifeature  Payment
  11. // @license      MIT
  12. // @match        https://twitter.com/*
  13. // @match        https://x.com/*
  14. // @grant        GM_xmlhttpRequest
  15. // @grant        GM_setValue
  16. // @grant        GM_getValue
  17. // @grant        GM_download
  18. // @connect      api.xbatch.online
  19. // @connect      backup.xbatch.online
  20. // @connect      pbs.twimg.com
  21. // @connect      video.twimg.com
  22. // @require      https://cdn.jsdelivr.net/npm/jszip@3.7.1/dist/jszip.min.js
  23. // ==/UserScript==
  24.  
  25. ;(() => {
  26.   const JSZip = window.JSZip;
  27.  
  28.   const API_URLS = {
  29.     DEFAULT: "https://api.xbatch.online",
  30.     BACKUP: "https://backup.xbatch.online"
  31.   }
  32.  
  33.   const ICONS = {
  34.     PREV: `<svg style="width: 12px; height: 12px; margin-right: 6px; display: inline-block; vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
  35.       <path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
  36.     </svg>`,
  37.     NEXT: `<svg style="width: 12px; height: 12px; margin-left: 6px; display: inline-block; vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
  38.       <path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
  39.     </svg>`,
  40.     AUTO: `<svg style="width: 12px; height: 12px; margin-right: 6px; display: inline-block; vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  41.       <path fill="currentColor" d="M327.5 85.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L384 128l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L448 128l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L448 64 426.8 7.5C425.1 3 420.8 0 416 0s-9.1 3-10.8 7.5L384 64 327.5 85.2zM205.1 73.3c-2.6-5.7-8.3-9.3-14.5-9.3s-11.9 3.6-14.5 9.3L123.3 187.3 9.3 240C3.6 242.6 0 248.3 0 254.6s3.6 11.9 9.3 14.5l114.1 52.7L176 435.8c2.6 5.7 8.3 9.3 14.5 9.3s11.9-3.6 14.5-9.3l52.7-114.1 114.1-52.7c5.7-2.6 9.3-8.3 9.3-14.5s-3.6-11.9-9.3-14.5L257.8 187.4 205.1 73.3zM384 384l-56.5 21.2c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L384 448l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L448 448l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L448 384l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L384 384z"/>
  42.     </svg>`,
  43.     STOP: `<svg style="width: 12px; height: 12px; margin-right: 6px; display: inline-block; vertical-align: middle;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
  44.       <path fill="currentColor" d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/>
  45.     </svg>`,
  46.     CLEAR: {
  47.       PATH: "M135.2 17.7C140.6 6.8 151.7 0 163.8 0L284.2 0c12.1 0 23.2 6.8 28.6 17.7L320 32l96 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 96C14.3 96 0 81.7 0 64S14.3 32 32 32l96 0 7.2-14.3zM32 128l384 0 0 320c0 35.3-28.7 64-64 64L96 512c-35.3 0-64-28.7-64-64l0-320zm96 64c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16l0 224c0 8.8 7.2 16 16 16s16-7.2 16-16l0-224c0-8.8-7.2-16-16-16z",
  48.       VIEWBOX: "0 0 448 512"
  49.     },
  50.     RESET: {
  51.       PATH: "M463.5 224l8.5 0c13.3 0 24-10.7 24-24l0-128c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8l119.5 0z",
  52.       VIEWBOX: "0 0 512 512"
  53.     },
  54.     PATREON: {
  55.       PATH: "M489.7 153.8c-.1-65.4-51-119-110.7-138.3C304.8-8.5 207-5 136.1 28.4C50.3 68.9 23.3 157.7 22.3 246.2C21.5 319 28.7 510.6 136.9 512c80.3 1 92.3-102.5 129.5-152.3c26.4-35.5 60.5-45.5 102.4-55.9c72-17.8 121.1-74.7 121-150z",
  56.       VIEWBOX: "0 0 512 512"
  57.     },
  58.     INFO: {
  59.       PATH: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z",
  60.       VIEWBOX: "0 0 512 512"
  61.     },
  62.     DOWNLOAD: {
  63.       SECONDARY_PATH: "M0 256C0 397.4 114.6 512 256 512s256-114.6 256-256c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 106-86 192-192 192S64 362 64 256c0-17.7-14.3-32-32-32s-32 14.3-32 32z",
  64.       PRIMARY_PATH: "M390.6 185.4c12.5 12.5 12.5 32.8 0 45.3l-112 112c-12.5 12.5-32.8 12.5-45.3 0l-112-112c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L224 242.7 224 32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 210.7 57.4-57.4c12.5-12.5 32.8-12.5 45.3 0z",
  65.       VIEWBOX: "0 0 512 512"
  66.     },
  67.     FETCH: {
  68.       PATH: "M374.6 214.6l-128 128c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 242.7 192 32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 210.7 73.4-73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3zM64 352l0 64c0 17.7 14.3 32 32 32l256 0c17.7 0 32-14.3 32-32l0-64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 64c0 53-43 96-96 96L96 512c-53 0-96-43-96-96l0-64c0-17.7 14.3-32 32-32s32 14.3 32 32z",
  69.       VIEWBOX: "0 0 448 512"
  70.     },
  71.     ACCOUNT: {
  72.       PATH: "M412.1 416.6C398.1 361.1 347.9 320 288 320l-64 0c-59.9 0-110.1 41.1-124.1 96.6C58 375.9 32 319 32 256C32 132.3 132.3 32 256 32s224 100.3 224 224c0 63-26 119.9-67.9 160.6zm-28.5 23.4C347.5 465.2 303.5 480 256 480s-91.5-14.8-127.7-39.9c4-49.3 45.3-88.1 95.7-88.1l64 0c50.4 0 91.6 38.8 95.7 88.1zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-256a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm-80-48a80 80 0 1 0 160 0 80 80 0 1 0 -160 0z",
  73.       VIEWBOX: "0 0 512 512"
  74.     },
  75.     TOTAL: {
  76.       PATH: "M320 464c8.8 0 16-7.2 16-16l0-288-80 0c-17.7 0-32-14.3-32-32l0-80L64 48c-8.8 0-16 7.2-16 16l0 384c0 8.8 7.2 16 16 16l256 0zM0 64C0 28.7 28.7 0 64 0L229.5 0c17 0 33.3 6.7 45.3 18.7l90.5 90.5c12 12 18.7 28.3 18.7 45.3L384 448c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64z",
  77.       VIEWBOX: "0 0 384 512"
  78.     },
  79.     BATCH: {
  80.       PATH: "M48 272L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 112L48 272zm288 48l16 0 32 0 0-165.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0C28.7 0 0 28.7 0 64L0 320l32 0 16 0 288 0zM0 352l0 64 48 0 0-64L0 352zM64 512l0-48c-8.8 0-16-7.2-16-16L0 448c0 35.3 28.7 64 64 64zm256-48l0 48c35.3 0 64-28.7 64-64l-48 0c0 8.8-7.2 16-16 16zm64-112l-48 0 0 64 48 0 0-64zM96 464l0 48 80 0 0-48-80 0zm112 0l0 48 80 0 0-48-80 0z",
  81.       VIEWBOX: "0 0 384 512"
  82.     },
  83.     ZIP: {
  84.       PATH: "M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l48 0c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l48 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm48 112c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm0 64c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm-6.3 71.8L82.1 335.9c-1.4 5.4-2.1 10.9-2.1 16.4c0 35.2 28.8 63.7 64 63.7s64-28.5 64-63.7c0-5.5-.7-11.1-2.1-16.4l-23.5-88.2c-3.7-14-16.4-23.8-30.9-23.8l-14.8 0c-14.5 0-27.2 9.7-30.9 23.8zM128 336l32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z",
  85.       VIEWBOX: "0 0 384 512"
  86.     },
  87.     MEDIA_TYPE: {
  88.       ALL: {
  89.         PATH: "M256 48c-8.8 0-16 7.2-16 16l0 224c0 8.7 6.9 15.8 15.6 16l69.1-94.2c4.5-6.2 11.7-9.8 19.4-9.8s14.8 3.6 19.4 9.8L380 232.4l56-85.6c4.4-6.8 12-10.9 20.1-10.9s15.7 4.1 20.1 10.9L578.7 303.8c7.6-1.3 13.3-7.9 13.3-15.8l0-224c0-8.8-7.2-16-16-16L256 48zM192 64c0-35.3 28.7-64 64-64L576 0c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64l-320 0c-35.3 0-64-28.7-64-64l0-224zm-56 64l24 0 0 48 0 88 0 112 0 8 0 80 192 0 0-80 48 0 0 80 48 0c8.8 0 16-7.2 16-16l0-64 48 0 0 64c0 35.3-28.7 64-64 64l-48 0-24 0-24 0-192 0-24 0-24 0-48 0c-35.3 0-64-28.7-64-64L0 192c0-35.3 28.7-64 64-64l48 0 24 0zm-24 48l-48 0c-8.8 0-16 7.2-16 16l0 48 64 0 0-64zm0 288l0-64-64 0 0 48c0 8.8 7.2 16 16 16l48 0zM48 352l64 0 0-64-64 0 0 64zM304 80a32 32 0 1 1 0 64 32 32 0 1 1 0-64z",
  90.         VIEWBOX: "0 0 640 512"
  91.       },
  92.       IMAGE: {
  93.         PATH: "M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z",
  94.         VIEWBOX: "0 0 512 512"
  95.       },
  96.       VIDEO: {
  97.         PATH: "M352 432l-192 0 0-112 0-40 192 0 0 40 0 112zm0-200l-192 0 0-40 0-112 192 0 0 112 0 40zM64 80l48 0 0 88-64 0 0-72c0-8.8 7.2-16 16-16zM48 216l64 0 0 80-64 0 0-80zm64 216l-48 0c-8.8 0-16-7.2-16-16l0-72 64 0 0 88zM400 168l0-88 48 0c8.8 0 16 7.2 16 16l0 72-64 0zm0 48l64 0 0 80-64 0 0-80zm0 128l64 0 0 72c0 8.8-7.2 16-16 16l-48 0 0-88zM448 32L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64z",
  98.         VIEWBOX: "0 0 512 512"
  99.       },      
  100.       GIF: {
  101.         PATH: "M512 80c8.8 0 16 7.2 16 16l0 320c0 8.8-7.2 16-16 16L64 432c-8.8 0-16-7.2-16-16L48 96c0-8.8 7.2-16 16-16l448 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l448 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM296 160c-13.3 0-24 10.7-24 24l0 144c0 13.3 10.7 24 24 24s24-10.7 24-24l0-144c0-13.3-10.7-24-24-24zm56 24l0 80 0 64c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40 40 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-40 0 0-32 64 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-88 0c-13.3 0-24 10.7-24 24zM128 256c0-26.5 21.5-48 48-48c8 0 15.4 1.9 22 5.3c11.8 6.1 26.3 1.5 32.3-10.3s1.5-26.3-10.3-32.3c-13.2-6.8-28.2-10.7-44-10.7c-53 0-96 43-96 96s43 96 96 96c19.6 0 37.5-6.1 52.8-15.8c7-4.4 11.2-12.1 11.2-20.3l0-51.9c0-13.3-10.7-24-24-24l-32 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l8 0 0 13.1c-5.3 1.9-10.6 2.9-16 2.9c-26.5 0-48-21.5-48-48z",
  102.         VIEWBOX: "0 0 576 512"
  103.       },
  104.       MEDIA: {
  105.         PATH: "M160 80l352 0c8.8 0 16 7.2 16 16l0 224c0 8.8-7.2 16-16 16l-21.2 0L388.1 178.9c-4.4-6.8-12-10.9-20.1-10.9s-15.7 4.1-20.1 10.9l-52.2 79.8-12.4-16.9c-4.5-6.2-11.7-9.8-19.4-9.8s-14.8 3.6-19.4 9.8L175.6 336 160 336c-8.8 0-16-7.2-16-16l0-224c0-8.8 7.2-16 16-16zM96 96l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32c-35.3 0-64 28.7-64 64zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224zm208 24a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z",
  106.         VIEWBOX: "0 0 576 512"
  107.       },
  108.       POST: {
  109.         PATH: "M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z",
  110.         VIEWBOX: "0 0 512 512"
  111.       },
  112.       TWEETS: {
  113.         PATH: "M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.8 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z",
  114.         VIEWBOX: "0 0 640 512"
  115.       },
  116.       REPLIES: {
  117.         PATH: "M224 240l96 0c66.2 0 122 44.7 138.8 105.5c3.3-12.4 5.2-26.2 5.2-41.5c0-70.7-57.3-128-128-128l-112 0-24 0c-13.3 0-24-10.7-24-24l0-24 0-28.1L55.9 208 176 316.1l0-28.1 0-24c0-13.3 10.7-24 24-24l24 0zm0 48l0 48 0 16c0 12.6-7.4 24.1-19 29.2s-25 3-34.4-5.4l-160-144C3.9 225.7 0 217.1 0 208s3.9-17.7 10.6-23.8l160-144c9.4-8.5 22.9-10.6 34.4-5.4s19 16.6 19 29.2l0 16 0 48 48 0 64 0c97.2 0 176 78.8 176 176c0 78-38.6 126.2-68.7 152.1c-4.1 3.5-8.1 6.6-11.7 9.3c-3.2 2.4-6.2 4.4-8.9 6.2c-4.5 3-8.3 5.1-10.8 6.5c-2.5 1.4-5.3 1.9-8.1 1.9c-10.9 0-19.7-8.9-19.7-19.7c0-6.8 3.6-13.2 8.3-18.1c.5-.5 .9-.9 1.4-1.4c2.4-2.3 5.1-5.1 7.7-8.6c1.7-2.3 3.4-5 5-7.9c5.3-9.7 9.5-22.9 9.5-40.2c0-53-43-96-96-96l-48 0-48 0z",
  118.         VIEWBOX: "0 0 512 512"
  119.       }
  120.     }
  121.   }
  122.  
  123.   const defaultSettings = {
  124.     patreonAuth: "",
  125.     authToken: "",
  126.     batchEnabled: false,
  127.     autoBatchEnabled: false,
  128.     batchSize: 100,
  129.     startingBatch: 0,
  130.     timelineType: "media",
  131.     mediaType: "all",
  132.     concurrentDownloads: 50,
  133.     cacheDuration: 360,
  134.     apiServer: "default",
  135.     darkTheme: false,
  136.   }
  137.   const batchSizes = [25, 50, 100, 200]
  138.   const cacheDurations = [60, 120, 180, 240, 300, 360, 720, 1440]
  139.  
  140.   function getSettings() {
  141.     return {
  142.       patreonAuth: GM_getValue("patreonAuth", defaultSettings.patreonAuth),
  143.       authToken: GM_getValue("authToken", defaultSettings.authToken),
  144.       batchEnabled: GM_getValue("batchEnabled", defaultSettings.batchEnabled),
  145.       autoBatchEnabled: GM_getValue("autoBatchEnabled", defaultSettings.autoBatchEnabled),
  146.       batchSize: GM_getValue("batchSize", defaultSettings.batchSize),
  147.       startingBatch: GM_getValue("startingBatch", defaultSettings.startingBatch),
  148.       timelineType: GM_getValue("timelineType", defaultSettings.timelineType),
  149.       mediaType: GM_getValue("mediaType", defaultSettings.mediaType),
  150.       concurrentDownloads: GM_getValue("concurrentDownloads", defaultSettings.concurrentDownloads),
  151.       cacheDuration: GM_getValue("cacheDuration", defaultSettings.cacheDuration),
  152.       apiServer: GM_getValue("apiServer", defaultSettings.apiServer),
  153.       darkTheme: GM_getValue("darkTheme", defaultSettings.darkTheme),
  154.     }
  155.   }
  156.  
  157.   function saveSettings(settings) {
  158.     GM_setValue("patreonAuth", settings.patreonAuth)
  159.     GM_setValue("authToken", settings.authToken)
  160.     GM_setValue("batchEnabled", settings.batchEnabled)
  161.     GM_setValue("autoBatchEnabled", settings.autoBatchEnabled)
  162.     GM_setValue("batchSize", settings.batchSize)
  163.     GM_setValue("startingBatch", settings.startingBatch)
  164.     GM_setValue("timelineType", settings.timelineType)
  165.     GM_setValue("mediaType", settings.mediaType)
  166.     GM_setValue("concurrentDownloads", settings.concurrentDownloads)
  167.     GM_setValue("cacheDuration", settings.cacheDuration)
  168.     GM_setValue("apiServer", settings.apiServer)
  169.     GM_setValue("darkTheme", settings.darkTheme)
  170.   }
  171.  
  172.   function getServiceBaseUrl() {
  173.     const settings = getSettings()
  174.     return settings.apiServer === "default"
  175.       ? API_URLS.DEFAULT
  176.       : API_URLS.BACKUP
  177.   }
  178.  
  179.   function formatNumber(num) {
  180.     return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  181.   }
  182.  
  183.   const cacheManager = {
  184.     set: (key, data, success = true) => {
  185.       if (!success) return;
  186.  
  187.       const settings = getSettings()
  188.       const cacheItem = {
  189.         data: data,
  190.         timestamp: Date.now(),
  191.         expiry: Date.now() + settings.cacheDuration * 60 * 1000,
  192.       }
  193.       localStorage.setItem(`twitter_dl_${key}`, JSON.stringify(cacheItem))
  194.     },
  195.  
  196.     get: (key) => {
  197.       const cacheItem = localStorage.getItem(`twitter_dl_${key}`)
  198.       if (!cacheItem) return null
  199.  
  200.       try {
  201.         const parsed = JSON.parse(cacheItem)
  202.         if (Date.now() > parsed.expiry) {
  203.           localStorage.removeItem(`twitter_dl_${key}`)
  204.           return null
  205.         }
  206.         return parsed.data
  207.       } catch (e) {
  208.         localStorage.removeItem(`twitter_dl_${key}`)
  209.         return null
  210.       }
  211.     },
  212.  
  213.     clear: () => {
  214.       const keysToRemove = []
  215.       for (let i = 0; i < localStorage.length; i++) {
  216.         const key = localStorage.key(i)
  217.         if (key.startsWith("twitter_dl_")) {
  218.           keysToRemove.push(key)
  219.         }
  220.       }
  221.  
  222.       keysToRemove.forEach((key) => localStorage.removeItem(key))
  223.     },
  224.   }
  225.  
  226.   function createDownloadIcon() {
  227.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  228.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  229.     svg.setAttribute("viewBox", ICONS.DOWNLOAD.VIEWBOX)
  230.     svg.setAttribute("width", "18")
  231.     svg.setAttribute("height", "18")
  232.     svg.style.verticalAlign = "middle"
  233.     svg.style.cursor = "pointer"
  234.  
  235.     const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs")
  236.     const style = document.createElementNS("http://www.w3.org/2000/svg", "style")
  237.     style.textContent = ".fa-secondary{opacity:.4}"
  238.     defs.appendChild(style)
  239.     svg.appendChild(defs)
  240.  
  241.     const secondaryPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  242.     secondaryPath.setAttribute("class", "fa-secondary")
  243.     secondaryPath.setAttribute("fill", "currentColor")
  244.     secondaryPath.setAttribute("d", ICONS.DOWNLOAD.SECONDARY_PATH)
  245.     svg.appendChild(secondaryPath)
  246.  
  247.     const primaryPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  248.     primaryPath.setAttribute("class", "fa-primary")
  249.     primaryPath.setAttribute("fill", "currentColor")
  250.     primaryPath.setAttribute("d", ICONS.DOWNLOAD.PRIMARY_PATH)
  251.     svg.appendChild(primaryPath)
  252.  
  253.     return svg
  254.   }
  255.  
  256.   function createPatreonIcon() {
  257.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  258.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  259.     svg.setAttribute("viewBox", ICONS.PATREON.VIEWBOX)
  260.     svg.setAttribute("width", "18")
  261.     svg.setAttribute("height", "18")
  262.     svg.style.verticalAlign = "middle"
  263.     svg.style.marginRight = "8px"
  264.  
  265.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  266.     path.setAttribute("fill", "currentColor")
  267.     path.setAttribute("d", ICONS.PATREON.PATH)
  268.     svg.appendChild(path)
  269.  
  270.     return svg
  271.   }
  272.  
  273.   function createInfoIcon() {
  274.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  275.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  276.     svg.setAttribute("viewBox", ICONS.INFO.VIEWBOX)
  277.     svg.setAttribute("width", "16")
  278.     svg.setAttribute("height", "16")
  279.     svg.style.marginLeft = "8px"
  280.     svg.style.cursor = "pointer"
  281.     svg.style.color = "#64748b"
  282.     svg.style.transition = "color 0.2s ease"
  283.  
  284.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  285.     path.setAttribute("fill", "currentColor")
  286.     path.setAttribute("d", ICONS.INFO.PATH)
  287.     svg.appendChild(path)
  288.  
  289.     svg.addEventListener("mouseenter", () => {
  290.       svg.style.color = "#0ea5e9"
  291.     })
  292.  
  293.     svg.addEventListener("mouseleave", () => {
  294.       svg.style.color = "#64748b"
  295.     })
  296.  
  297.     return svg
  298.   }
  299.  
  300.   function createInfoTooltip(message) {
  301.     let activeTooltip = null
  302.  
  303.     function showTooltip(e) {
  304.       if (activeTooltip) {
  305.         document.body.removeChild(activeTooltip)
  306.       }
  307.  
  308.       const tooltip = document.createElement("div")
  309.       tooltip.textContent = message
  310.       tooltip.style.cssText = `
  311.         position: fixed;
  312.         background-color: #1f2937;
  313.         color: white;
  314.         padding: 8px 12px;
  315.         border-radius: 6px;
  316.         font-size: 12px;
  317.         line-height: 1.4;
  318.         max-width: 300px;
  319.         z-index: 10003;
  320.         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  321.         pointer-events: none;
  322.         white-space: normal;
  323.         word-wrap: break-word;
  324.       `
  325.  
  326.       document.body.appendChild(tooltip)
  327.       activeTooltip = tooltip
  328.  
  329.       const rect = e.target.getBoundingClientRect()
  330.       const tooltipRect = tooltip.getBoundingClientRect()
  331.  
  332.       let top = rect.bottom + 8
  333.       let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2)
  334.  
  335.       if (left < 8) left = 8
  336.       if (left + tooltipRect.width > window.innerWidth - 8) {
  337.         left = window.innerWidth - tooltipRect.width - 8
  338.       }
  339.       if (top + tooltipRect.height > window.innerHeight - 8) {
  340.         top = rect.top - tooltipRect.height - 8
  341.       }
  342.  
  343.       tooltip.style.top = top + "px"
  344.       tooltip.style.left = left + "px"
  345.     }
  346.  
  347.     function hideTooltip() {
  348.       if (activeTooltip) {
  349.         document.body.removeChild(activeTooltip)
  350.         activeTooltip = null
  351.       }
  352.     }
  353.  
  354.     return { showTooltip, hideTooltip }
  355.   }
  356.  
  357.   function createAccountIcon(isDarkTheme = false) {
  358.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  359.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  360.     svg.setAttribute("viewBox", ICONS.ACCOUNT.VIEWBOX)
  361.     svg.setAttribute("width", "12")
  362.     svg.setAttribute("height", "12")
  363.     svg.style.marginRight = "6px"
  364.     svg.style.color = isDarkTheme ? "#ffffff" : "#64748b"
  365.     svg.style.verticalAlign = "middle"
  366.     svg.style.display = "inline-block"
  367.  
  368.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  369.     path.setAttribute("fill", "currentColor")
  370.     path.setAttribute("d", ICONS.ACCOUNT.PATH)
  371.     svg.appendChild(path)
  372.  
  373.     return svg
  374.   }
  375.  
  376.   function createTotalItemsIcon(isDarkTheme = false) {
  377.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  378.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  379.     svg.setAttribute("viewBox", ICONS.TOTAL.VIEWBOX)
  380.     svg.setAttribute("width", "12")
  381.     svg.setAttribute("height", "12")
  382.     svg.style.marginRight = "6px"
  383.     svg.style.color = isDarkTheme ? "#ffffff" : "#64748b"
  384.     svg.style.verticalAlign = "middle"
  385.     svg.style.display = "inline-block"
  386.  
  387.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  388.     path.setAttribute("fill", "currentColor")
  389.     path.setAttribute("d", ICONS.TOTAL.PATH)
  390.     svg.appendChild(path)
  391.  
  392.     return svg
  393.   }
  394.  
  395.   function createCurrentBatchIcon(isDarkTheme = false) {
  396.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  397.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  398.     svg.setAttribute("viewBox", ICONS.BATCH.VIEWBOX)
  399.     svg.setAttribute("width", "12")
  400.     svg.setAttribute("height", "12")
  401.     svg.style.marginRight = "6px"
  402.     svg.style.color = isDarkTheme ? "#ffffff" : "#64748b"
  403.     svg.style.verticalAlign = "middle"
  404.     svg.style.display = "inline-block"
  405.  
  406.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  407.     path.setAttribute("fill", "currentColor")
  408.     path.setAttribute("d", ICONS.BATCH.PATH)
  409.     svg.appendChild(path)
  410.  
  411.     return svg
  412.   }
  413.  
  414.   function createTotalZipIcon(isDarkTheme = false) {
  415.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  416.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  417.     svg.setAttribute("viewBox", ICONS.ZIP.VIEWBOX)
  418.     svg.setAttribute("width", "12")
  419.     svg.setAttribute("height", "12")
  420.     svg.style.marginRight = "6px"
  421.     svg.style.color = isDarkTheme ? "#ffffff" : "#64748b"
  422.     svg.style.verticalAlign = "middle"
  423.     svg.style.display = "inline-block"
  424.  
  425.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  426.     path.setAttribute("fill", "currentColor")
  427.     path.setAttribute("d", ICONS.ZIP.PATH)
  428.     svg.appendChild(path)
  429.  
  430.     return svg
  431.   }
  432.  
  433.   function createMediaTypeIcon(mediaType, isDarkTheme = false) {
  434.     let iconData
  435.     switch (mediaType) {
  436.       case 'image':
  437.         iconData = ICONS.MEDIA_TYPE.IMAGE
  438.         break
  439.       case 'video':
  440.         iconData = ICONS.MEDIA_TYPE.VIDEO
  441.         break
  442.       case 'gif':
  443.         iconData = ICONS.MEDIA_TYPE.GIF
  444.         break
  445.       default:
  446.         iconData = ICONS.MEDIA_TYPE.ALL
  447.     }
  448.  
  449.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  450.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  451.     svg.setAttribute("viewBox", iconData.VIEWBOX)
  452.     svg.setAttribute("width", "12")
  453.     svg.setAttribute("height", "12")
  454.     svg.style.marginRight = "6px"
  455.     svg.style.color = isDarkTheme ? "#ffffff" : "#64748b"
  456.     svg.style.verticalAlign = "middle"
  457.     svg.style.display = "inline-block"
  458.  
  459.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  460.     path.setAttribute("fill", "currentColor")
  461.     path.setAttribute("d", iconData.PATH)
  462.     svg.appendChild(path)
  463.  
  464.     return svg
  465.   }
  466.  
  467.   function createTimelineTypeIcon(timelineType, isDarkTheme = false) {
  468.     let iconData
  469.     switch (timelineType) {
  470.       case 'media':
  471.         iconData = ICONS.MEDIA_TYPE.MEDIA
  472.         break
  473.       case 'timeline':
  474.         iconData = ICONS.MEDIA_TYPE.POST
  475.         break
  476.       case 'tweets':
  477.         iconData = ICONS.MEDIA_TYPE.TWEETS
  478.         break
  479.       case 'with_replies':
  480.         iconData = ICONS.MEDIA_TYPE.REPLIES
  481.         break
  482.       default:
  483.         iconData = ICONS.MEDIA_TYPE.MEDIA
  484.     }
  485.  
  486.     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  487.     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  488.     svg.setAttribute("viewBox", iconData.VIEWBOX)
  489.     svg.setAttribute("width", "16")
  490.     svg.setAttribute("height", "16")
  491.     svg.style.marginRight = "6px"
  492.     svg.style.color = isDarkTheme ? "#ffffff" : "#64748b"
  493.     svg.style.verticalAlign = "middle"
  494.     svg.style.display = "inline-block"
  495.  
  496.     const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
  497.     path.setAttribute("fill", "currentColor")
  498.     path.setAttribute("d", iconData.PATH)
  499.     svg.appendChild(path)
  500.  
  501.     return svg
  502.   }
  503.  
  504.   function createAuthTokenPopup() {
  505.     const settings = getSettings()
  506.     const overlay = document.createElement("div")
  507.     overlay.style.cssText = `
  508.         position: fixed;
  509.         top: 0;
  510.         left: 0;
  511.         width: 100%;
  512.         height: 100%;
  513.         background-color: rgba(0, 0, 0, 0.35);
  514.         backdrop-filter: blur(2.5px);
  515.         display: flex;
  516.         justify-content: center;
  517.         align-items: center;
  518.         z-index: 10001;
  519.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  520.     `
  521.  
  522.     const popup = document.createElement("div")
  523.     popup.style.cssText = `
  524.         background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  525.         color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  526.         border-radius: 16px;
  527.         width: 300px;
  528.         max-width: 90%;
  529.         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  530.         overflow: hidden;
  531.     `
  532.  
  533.     const header = document.createElement("div")
  534.     header.style.cssText = `
  535.         padding: 16px;
  536.         border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  537.         font-weight: bold;
  538.         font-size: 16px;
  539.         text-align: center;
  540.         background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  541.     `
  542.     header.textContent = "Authentication Required"
  543.  
  544.     const content = document.createElement("div")
  545.     content.style.cssText = `
  546.         padding: 16px;
  547.         text-align: center;
  548.     `
  549.  
  550.     const authLink = document.createElement("a")
  551.     authLink.href = "https://www.patreon.com/posts/127206894"
  552.     authLink.target = "_blank"
  553.     authLink.textContent = "How to Obtain Auth Token"
  554.     authLink.style.cssText = `
  555.         color: #0ea5e9;
  556.         text-decoration: none;
  557.         cursor: pointer;
  558.     `
  559.     content.appendChild(authLink)
  560.  
  561.     const buttonContainer = document.createElement("div")
  562.     buttonContainer.style.cssText = `
  563.         padding: 16px;
  564.         display: flex;
  565.         justify-content: center;
  566.         border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  567.     `
  568.  
  569.     const okButton = document.createElement("button")
  570.     okButton.style.cssText = `
  571.         background-color: #0ea5e9;
  572.         color: white;
  573.         border: none;
  574.         border-radius: 6px;
  575.         padding: 8px 24px;
  576.         font-weight: bold;
  577.         cursor: pointer;
  578.         transition: background-color 0.2s;
  579.     `
  580.     okButton.textContent = "OK"
  581.     okButton.addEventListener("mouseenter", () => {
  582.       okButton.style.backgroundColor = "#0284c7"
  583.     })
  584.     okButton.addEventListener("mouseleave", () => {
  585.       okButton.style.backgroundColor = "#0ea5e9"
  586.     })
  587.     okButton.onclick = () => {
  588.       document.body.removeChild(overlay)
  589.     }
  590.  
  591.     buttonContainer.appendChild(okButton)
  592.     popup.appendChild(header)
  593.     popup.appendChild(content)
  594.     popup.appendChild(buttonContainer)
  595.     overlay.appendChild(popup)
  596.     document.body.appendChild(overlay)
  597.     return overlay
  598.   }
  599.  
  600.   function createPatreonAuthPopup() {
  601.     const settings = getSettings()
  602.     const overlay = document.createElement("div")
  603.     overlay.style.cssText = `
  604.         position: fixed;
  605.         top: 0;
  606.         left: 0;
  607.         width: 100%;
  608.         height: 100%;
  609.         background-color: rgba(0, 0, 0, 0.35);
  610.         backdrop-filter: blur(2.5px);
  611.         display: flex;
  612.         justify-content: center;
  613.         align-items: center;
  614.         z-index: 10001;
  615.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  616.     `
  617.  
  618.     const popup = document.createElement("div")
  619.     popup.style.cssText = `
  620.         background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  621.         color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  622.         border-radius: 16px;
  623.         width: 320px;
  624.         max-width: 90%;
  625.         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  626.         overflow: hidden;
  627.     `
  628.  
  629.     const header = document.createElement("div")
  630.     header.style.cssText = `
  631.         padding: 16px;
  632.         border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  633.         font-weight: bold;
  634.         font-size: 16px;
  635.         text-align: center;
  636.         background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  637.     `
  638.     header.textContent = "Patreon Authentication Required"
  639.  
  640.     const content = document.createElement("div")
  641.     content.style.cssText = `
  642.         padding: 16px;
  643.         text-align: center;
  644.     `
  645.  
  646.     const message = document.createElement("p")
  647.     message.style.cssText = `
  648.         margin-bottom: 16px;
  649.         line-height: 1.5;
  650.     `
  651.     message.textContent = "Please enter your Patreon authentication code. This feature requires a paid membership to access."
  652.     content.appendChild(message)
  653.  
  654.     const patreonButton = document.createElement("a")
  655.     patreonButton.href = "https://www.patreon.com/exyezed"
  656.     patreonButton.target = "_blank"
  657.     patreonButton.style.cssText = `
  658.         display: flex;
  659.         align-items: center;
  660.         justify-content: center;
  661.         background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  662.         color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  663.         text-decoration: none;
  664.         padding: 10px 16px;
  665.         border-radius: 8px;
  666.         margin-top: 8px;
  667.         transition: background-color 0.2s;
  668.     `
  669.     patreonButton.innerHTML = createPatreonIcon().outerHTML + "Join Patreon Membership"
  670.     patreonButton.addEventListener("mouseenter", () => {
  671.       patreonButton.style.backgroundColor = settings.darkTheme ? "#4b5563" : "#e2e8f0"
  672.     })
  673.     patreonButton.addEventListener("mouseleave", () => {
  674.       patreonButton.style.backgroundColor = settings.darkTheme ? "#374151" : "#f1f5f9"
  675.     })
  676.     content.appendChild(patreonButton)
  677.  
  678.     const buttonContainer = document.createElement("div")
  679.     buttonContainer.style.cssText = `
  680.         padding: 16px;
  681.         display: flex;
  682.         justify-content: center;
  683.         border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  684.     `
  685.  
  686.     const okButton = document.createElement("button")
  687.     okButton.style.cssText = `
  688.         background-color: #0ea5e9;
  689.         color: white;
  690.         border: none;
  691.         border-radius: 6px;
  692.         padding: 8px 24px;
  693.         font-weight: bold;
  694.         cursor: pointer;
  695.         transition: background-color 0.2s;
  696.     `
  697.     okButton.textContent = "OK"
  698.     okButton.addEventListener("mouseenter", () => {
  699.       okButton.style.backgroundColor = "#0284c7"
  700.     })
  701.     okButton.addEventListener("mouseleave", () => {
  702.       okButton.style.backgroundColor = "#0ea5e9"
  703.     })
  704.     okButton.onclick = () => {
  705.       document.body.removeChild(overlay)
  706.     }
  707.  
  708.     buttonContainer.appendChild(okButton)
  709.     popup.appendChild(header)
  710.     popup.appendChild(content)
  711.     popup.appendChild(buttonContainer)
  712.     overlay.appendChild(popup)
  713.  
  714.     document.body.appendChild(overlay)
  715.     return overlay }
  716.  
  717.   function createInfoDialog(message, title = "Information") {
  718.     const settings = getSettings()
  719.     const overlay = document.createElement("div")
  720.     overlay.style.cssText = `
  721.         position: fixed;
  722.         top: 0;
  723.         left: 0;
  724.         width: 100%;
  725.         height: 100%;
  726.         background-color: rgba(0, 0, 0, 0.35);
  727.         backdrop-filter: blur(2.5px);
  728.         display: flex;
  729.         justify-content: center;
  730.         align-items: center;
  731.         z-index: 10001;
  732.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  733.     `
  734.  
  735.     const dialog = document.createElement("div")
  736.     dialog.style.cssText = `
  737.         background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  738.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  739.         border-radius: 16px;
  740.         width: 300px;
  741.         max-width: 90%;
  742.         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  743.         overflow: hidden;
  744.     `
  745.  
  746.     const header = document.createElement("div")
  747.     header.style.cssText = `
  748.         padding: 16px;
  749.         border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  750.         font-weight: bold;
  751.         font-size: 16px;
  752.         text-align: center;
  753.         background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  754.     `
  755.     header.textContent = title
  756.  
  757.     const content = document.createElement("div")
  758.     content.style.cssText = `
  759.         padding: 20px 16px;
  760.         text-align: center;
  761.         line-height: 1.5;
  762.     `
  763.     content.textContent = message
  764.  
  765.     const buttonContainer = document.createElement("div")
  766.     buttonContainer.style.cssText = `
  767.         padding: 16px;
  768.         display: flex;
  769.         justify-content: center;
  770.         border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  771.     `
  772.  
  773.     const okButton = document.createElement("button")
  774.     okButton.style.cssText = `
  775.         background-color: #22c55e;
  776.         color: white;
  777.         border: none;
  778.         border-radius: 6px;
  779.         padding: 8px 24px;
  780.         font-weight: bold;
  781.         cursor: pointer;
  782.         transition: background-color 0.2s;
  783.     `
  784.     okButton.textContent = "OK"
  785.     okButton.addEventListener("mouseenter", () => {
  786.       okButton.style.backgroundColor = "#16a34a"
  787.     })
  788.     okButton.addEventListener("mouseleave", () => {
  789.       okButton.style.backgroundColor = "#22c55e"
  790.     })
  791.     okButton.onclick = () => {
  792.       document.body.removeChild(overlay)
  793.     }
  794.  
  795.     buttonContainer.appendChild(okButton)
  796.     dialog.appendChild(header)
  797.     dialog.appendChild(content)
  798.     dialog.appendChild(buttonContainer)
  799.     overlay.appendChild(dialog)
  800.  
  801.     document.body.appendChild(overlay)
  802.     return overlay
  803.   }
  804.  
  805.   function createConfirmDialog(message, onConfirm, onCancel) {
  806.     const settings = getSettings()
  807.     const overlay = document.createElement("div")
  808.     overlay.style.cssText = `
  809.         position: fixed;
  810.         top: 0;
  811.         left: 0;
  812.         width: 100%;
  813.         height: 100%;
  814.         background-color: rgba(0, 0, 0, 0.35);
  815.         backdrop-filter: blur(2.5px);
  816.         display: flex;
  817.         justify-content: center;
  818.         align-items: center;
  819.         z-index: 10001;
  820.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  821.     `
  822.  
  823.     const dialog = document.createElement("div")
  824.     dialog.style.cssText = `
  825.         background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  826.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  827.         border-radius: 16px;
  828.         width: 300px;
  829.         max-width: 90%;
  830.         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  831.         overflow: hidden;
  832.     `
  833.  
  834.     const header = document.createElement("div")
  835.     header.style.cssText = `
  836.         padding: 16px;
  837.         border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  838.         font-weight: bold;
  839.         font-size: 16px;
  840.         text-align: center;
  841.         background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  842.     `
  843.     header.textContent = "Confirmation"
  844.  
  845.     const content = document.createElement("div")
  846.     content.style.cssText = `
  847.         padding: 16px;
  848.         text-align: center;
  849.     `
  850.     content.textContent = message
  851.  
  852.     const buttons = document.createElement("div")
  853.     buttons.style.cssText = `
  854.         display: flex;
  855.         padding: 16px;
  856.         border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  857.     `
  858.  
  859.     const cancelButton = document.createElement("button")
  860.     cancelButton.style.cssText = `
  861.         flex: 1;
  862.         background-color: ${settings.darkTheme ? "#374151" : "#94a3b8"};
  863.         color: white;
  864.         border: none;
  865.         border-radius: 6px;
  866.         padding: 8px 16px;
  867.         margin-right: 8px;
  868.         font-weight: bold;
  869.         cursor: pointer;
  870.         text-align: center;
  871.         transition: background-color 0.2s;
  872.     `
  873.     cancelButton.textContent = "No"
  874.     cancelButton.addEventListener("mouseenter", () => {
  875.       cancelButton.style.backgroundColor = settings.darkTheme ? "#4b5563" : "#64748b"
  876.     })
  877.     cancelButton.addEventListener("mouseleave", () => {
  878.       cancelButton.style.backgroundColor = settings.darkTheme ? "#374151" : "#94a3b8"
  879.     })
  880.     cancelButton.onclick = () => {
  881.       document.body.removeChild(overlay)
  882.       if (onCancel) onCancel()
  883.     }
  884.  
  885.     const confirmButton = document.createElement("button")
  886.     confirmButton.style.cssText = `
  887.         flex: 1;
  888.         background-color: #ef4444;
  889.         color: white;
  890.         border: none;
  891.         border-radius: 6px;
  892.         padding: 8px 16px;
  893.         font-weight: bold;
  894.         cursor: pointer;
  895.         text-align: center;
  896.         transition: background-color 0.2s;
  897.     `
  898.     confirmButton.textContent = "Yes"
  899.     confirmButton.addEventListener("mouseenter", () => {
  900.       confirmButton.style.backgroundColor = "#dc2626"
  901.     })
  902.     confirmButton.addEventListener("mouseleave", () => {
  903.       confirmButton.style.backgroundColor = "#ef4444"
  904.     })
  905.     confirmButton.onclick = () => {
  906.       document.body.removeChild(overlay)
  907.       if (onConfirm) onConfirm()
  908.     }
  909.  
  910.     buttons.appendChild(cancelButton)
  911.     buttons.appendChild(confirmButton)
  912.  
  913.     dialog.appendChild(header)
  914.     dialog.appendChild(content)
  915.     dialog.appendChild(buttons)
  916.     overlay.appendChild(dialog)
  917.  
  918.     document.body.appendChild(overlay)
  919.   }
  920.  
  921.   function formatDate(dateString) {
  922.     const date = new Date(dateString)
  923.     const year = date.getFullYear()
  924.     const month = String(date.getMonth() + 1).padStart(2, "0")
  925.     const day = String(date.getDate()).padStart(2, "0")
  926.     const hours = String(date.getHours()).padStart(2, "0")
  927.     const minutes = String(date.getMinutes()).padStart(2, "0")
  928.     const seconds = String(date.getSeconds()).padStart(2, "0")
  929.  
  930.     return `${year}${month}${day}_${hours}${minutes}${seconds}`
  931.   }
  932.  
  933.   function getCurrentTimestamp() {
  934.     const now = new Date()
  935.     const year = now.getFullYear()
  936.     const month = String(now.getMonth() + 1).padStart(2, "0")
  937.     const day = String(now.getDate()).padStart(2, "0")
  938.     const hours = String(now.getHours()).padStart(2, "0")
  939.     const minutes = String(now.getMinutes()).padStart(2, "0")
  940.     const seconds = String(now.getSeconds()).padStart(2, "0")
  941.  
  942.     return `${year}${month}${day}_${hours}${minutes}${seconds}`
  943.   }
  944.  
  945.   function fetchData(url) {
  946.     return new Promise((resolve, reject) => {
  947.       GM_xmlhttpRequest({
  948.         method: "GET",
  949.         url: url,
  950.         responseType: "json",
  951.         onload: (response) => {
  952.           if (response.status >= 200 && response.status < 300) {
  953.             resolve(response.response)
  954.           } else {
  955.             reject(new Error(`Request failed with status ${response.status}`))
  956.           }
  957.         },
  958.         onerror: (error) => {
  959.           reject(new Error(`Network error: ${error?.message || "Unknown error"}`))
  960.         },
  961.         ontimeout: () => {
  962.           reject(new Error("Request timed out"))
  963.         }
  964.       })
  965.     })
  966.   }
  967.  
  968.   function fetchBinary(url) {
  969.     return new Promise((resolve, reject) => {
  970.       GM_xmlhttpRequest({
  971.         method: "GET",
  972.         url: url,
  973.         responseType: "blob",
  974.         onload: (response) => {
  975.           if (response.status >= 200 && response.status < 300) {
  976.             resolve(response.response)
  977.           } else {
  978.             reject(new Error(`Request failed with status ${response.status}`))
  979.           }
  980.         },
  981.         onerror: () => {
  982.           reject(new Error("Network error"))
  983.         },
  984.       })
  985.     })
  986.   }
  987.  
  988.   function getMediaTypeLabel(mediaType) {
  989.     switch (mediaType) {
  990.       case "image":
  991.         return "Image"
  992.       case "video":
  993.         return "Video"
  994.       case "gif":
  995.         return "GIF"
  996.       default:
  997.         return "Media"
  998.     }
  999.   }
  1000.  
  1001.   function createToggleSwitch(options, selectedValue, onChange) {
  1002.     const settings = getSettings()
  1003.     const toggleWrapper = document.createElement("div")
  1004.     toggleWrapper.style.cssText = `
  1005.       position: relative;
  1006.       height: 40px;
  1007.       background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1008.       border-radius: 8px;
  1009.       padding: 0;
  1010.       cursor: pointer;
  1011.       width: 100%;
  1012.       margin-bottom: 16px;
  1013.       overflow: hidden;
  1014.     `
  1015.  
  1016.     const toggleSlider = document.createElement("div")
  1017.     toggleSlider.style.cssText = `
  1018.       position: absolute;
  1019.       height: 100%;
  1020.       background-color: #0ea5e9;
  1021.       border-radius: 8px;
  1022.       transition: transform 0.3s ease, width 0.3s ease;
  1023.       z-index: 1;
  1024.     `
  1025.  
  1026.     const optionsContainer = document.createElement("div")
  1027.     optionsContainer.style.cssText = `
  1028.       position: relative;
  1029.       display: flex;
  1030.       height: 100%;
  1031.       z-index: 2;
  1032.       width: 100%;
  1033.     `
  1034.  
  1035.     const selectedIndex = options.findIndex((option) => option.value === selectedValue)
  1036.     const optionWidth = 100 / options.length;    
  1037.     toggleSlider.style.width = `${optionWidth}%`;
  1038.     toggleSlider.style.transform = `translateX(${selectedIndex * 100}%)`;options.forEach((option, index) => {
  1039.       const optionElement = document.createElement("div");
  1040.       optionElement.style.cssText = `
  1041.         flex: 1;
  1042.         display: flex;
  1043.         align-items: center;
  1044.         justify-content: center;
  1045.         font-size: 14px;
  1046.         transition: color 0.3s ease;
  1047.         color: ${option.value === selectedValue ? "white" : "#64748b"};
  1048.         cursor: pointer;
  1049.         user-select: none;
  1050.         text-align: center;
  1051.         height: 100%;
  1052.         padding: 0 4px;
  1053.       `;
  1054.  
  1055.       if (option.icon) {
  1056.         const iconContainer = document.createElement("span")
  1057.         iconContainer.style.cssText = `
  1058.           display: flex;
  1059.           align-items: center;
  1060.           justify-content: center;
  1061.           margin-right: 6px;
  1062.         `
  1063.  
  1064.         const iconClone = option.icon.cloneNode(true)
  1065.  
  1066.         const paths = iconClone.querySelectorAll("path")
  1067.         paths.forEach((path) => {
  1068.           path.setAttribute("fill", option.value === selectedValue ? "white" : "#64748b")
  1069.         })
  1070.  
  1071.         iconContainer.appendChild(iconClone)
  1072.         optionElement.appendChild(iconContainer)
  1073.       }
  1074.  
  1075.       const text = document.createElement("span")
  1076.       text.textContent = option.label
  1077.       text.style.cssText = `
  1078.         display: inline-block;
  1079.         text-align: center;
  1080.       `
  1081.       optionElement.appendChild(text)
  1082.  
  1083.       optionElement.addEventListener("click", (e) => {
  1084.         e.stopPropagation()
  1085.         onChange(option.value)
  1086.  
  1087.         toggleSlider.style.transform = `translateX(${index * 100}%)`
  1088.  
  1089.         optionsContainer.querySelectorAll("div").forEach((opt, i) => {
  1090.           opt.style.color = i === index ? "white" : "#64748b"
  1091.  
  1092.           const optIcon = opt.querySelector("svg")
  1093.           if (optIcon) {
  1094.             const optPaths = optIcon.querySelectorAll("path")
  1095.             optPaths.forEach((path) => {
  1096.               path.setAttribute("fill", i === index ? "white" : "#64748b")
  1097.             })
  1098.           }
  1099.         })
  1100.       })
  1101.  
  1102.       optionsContainer.appendChild(optionElement)
  1103.     })
  1104.  
  1105.     toggleWrapper.appendChild(toggleSlider)
  1106.     toggleWrapper.appendChild(optionsContainer)
  1107.  
  1108.     return toggleWrapper
  1109.   }
  1110.  
  1111.   function createMediaTypeIcons() {
  1112.     const allIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  1113.     allIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  1114.     allIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.ALL.VIEWBOX)
  1115.     allIcon.setAttribute("width", "16")
  1116.     allIcon.setAttribute("height", "16")
  1117.     allIcon.style.verticalAlign = "middle"
  1118.  
  1119.     const allPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  1120.     allPath.setAttribute("fill", "#64748b")
  1121.     allPath.setAttribute("d", ICONS.MEDIA_TYPE.ALL.PATH)
  1122.     allIcon.appendChild(allPath)
  1123.  
  1124.     const imageIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  1125.     imageIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  1126.     imageIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.IMAGE.VIEWBOX)
  1127.     imageIcon.setAttribute("width", "16")
  1128.     imageIcon.setAttribute("height", "16")
  1129.     imageIcon.style.verticalAlign = "middle"
  1130.  
  1131.     const imagePath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  1132.     imagePath.setAttribute("fill", "#64748b")
  1133.     imagePath.setAttribute("d", ICONS.MEDIA_TYPE.IMAGE.PATH)
  1134.     imageIcon.appendChild(imagePath)
  1135.  
  1136.     const videoIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  1137.     videoIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  1138.     videoIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.VIDEO.VIEWBOX)
  1139.     videoIcon.setAttribute("width", "16")
  1140.     videoIcon.setAttribute("height", "16")
  1141.     videoIcon.style.verticalAlign = "middle"
  1142.  
  1143.     const videoPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  1144.     videoPath.setAttribute("fill", "#64748b")
  1145.     videoPath.setAttribute("d", ICONS.MEDIA_TYPE.VIDEO.PATH)
  1146.     videoIcon.appendChild(videoPath)
  1147.  
  1148.     const gifIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  1149.     gifIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  1150.     gifIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.GIF.VIEWBOX)
  1151.     gifIcon.setAttribute("width", "16")
  1152.     gifIcon.setAttribute("height", "16")
  1153.     gifIcon.style.verticalAlign = "middle"
  1154.  
  1155.     const gifPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  1156.     gifPath.setAttribute("fill", "#64748b")
  1157.     gifPath.setAttribute("d", ICONS.MEDIA_TYPE.GIF.PATH)
  1158.     gifIcon.appendChild(gifPath)
  1159.  
  1160.     return {
  1161.       all: allIcon,
  1162.       image: imageIcon,
  1163.       video: videoIcon,
  1164.       gif: gifIcon
  1165.     }
  1166.   }
  1167.  
  1168.   function createSlider(options, selectedValue, onChange) {
  1169.     const toggleOptions = options.map((option) => {
  1170.       let label = option.toString()
  1171.       if (typeof option === "number" && option >= 60 && option % 60 === 0) {
  1172.         label = `${option / 60}h`
  1173.       }
  1174.       return { value: option, label: label }
  1175.     })
  1176.  
  1177.     return createToggleSwitch(toggleOptions, selectedValue, onChange)
  1178.   }
  1179.  
  1180.   function createModal(username) {
  1181.     let autoBatchStarted = false
  1182.     let autoBatchCancelled = false
  1183.     const existingModal = document.getElementById("media-downloader-modal")
  1184.     if (existingModal) {
  1185.       existingModal.remove()
  1186.     }
  1187.  
  1188.     const settings = getSettings()
  1189.  
  1190.     const modal = document.createElement("div")
  1191.     modal.id = "media-downloader-modal"
  1192.     modal.style.cssText = `
  1193.         position: fixed;
  1194.         top: 0;
  1195.         left: 0;
  1196.         width: 100%;
  1197.         height: 100%;
  1198.         background-color: rgba(0, 0, 0, 0.35);
  1199.         backdrop-filter: blur(2.5px);
  1200.         display: flex;
  1201.         justify-content: center;
  1202.         align-items: center;
  1203.         z-index: 10000;
  1204.         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1205.     `
  1206.  
  1207.     const modalContent = document.createElement("div")
  1208.     modalContent.style.cssText = `
  1209.     background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  1210.     color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1211.     border-radius: 16px;
  1212.     width: 500px;
  1213.     max-width: 90%;
  1214.     max-height: 90vh;
  1215.     overflow-y: auto;
  1216.     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  1217.     `
  1218.  
  1219.     const header = document.createElement("div")
  1220.     header.style.cssText = `
  1221.         display: flex;
  1222.         justify-content: space-between;
  1223.         align-items: center;
  1224.         padding: 16px;
  1225.         border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  1226.     `
  1227.  
  1228.     const title = document.createElement("h2")
  1229.     title.innerHTML = `Download ${getMediaTypeLabel(settings.mediaType)}: <span style="color: #0ea5e9">${username}</span>`
  1230.     title.style.cssText = `
  1231.     margin: 0;
  1232.     font-size: 18px;
  1233.     font-weight: bold;
  1234.     color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1235.     `
  1236.  
  1237.     const closeButton = document.createElement("button")
  1238.     closeButton.innerHTML = "&times;"
  1239.     closeButton.style.cssText = `
  1240.         background: none;
  1241.         border: none;
  1242.         color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  1243.         font-size: 24px;
  1244.         cursor: pointer;
  1245.         padding: 0;
  1246.         line-height: 1;
  1247.         transition: color 0.2s;
  1248.     `
  1249.     closeButton.addEventListener("mouseenter", () => {
  1250.       closeButton.style.color = "#0ea5e9"
  1251.     })
  1252.     closeButton.addEventListener("mouseleave", () => {
  1253.       closeButton.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a"
  1254.     })
  1255.     closeButton.onclick = () => modal.remove()
  1256.  
  1257.     header.appendChild(title)
  1258.     header.appendChild(closeButton)
  1259.  
  1260.     const tabs = document.createElement("div")
  1261.     tabs.style.cssText = `
  1262.         display: flex;
  1263.         border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  1264.     `
  1265.  
  1266.     const mainTab = document.createElement("div")
  1267.     mainTab.textContent = "Main"
  1268.     mainTab.className = "active-tab"
  1269.     mainTab.style.cssText = `
  1270.         padding: 12px 16px;
  1271.         cursor: pointer;
  1272.         flex: 1;
  1273.         text-align: center;
  1274.         border-bottom: 2px solid #0ea5e9;
  1275.         color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  1276.     `
  1277.  
  1278.     const settingsTab = document.createElement("div")
  1279.     settingsTab.textContent = "Settings"
  1280.     settingsTab.style.cssText = `
  1281.         padding: 12px 16px;
  1282.         cursor: pointer;
  1283.         flex: 1;
  1284.         text-align: center;
  1285.         color: #64748b;
  1286.     `
  1287.  
  1288.     tabs.appendChild(mainTab)
  1289.     tabs.appendChild(settingsTab)
  1290.  
  1291.     const mainContent = document.createElement("div")
  1292.     mainContent.style.cssText = `
  1293.     padding: 16px;
  1294.     `;
  1295.     
  1296.     const settingsContent = document.createElement("div");
  1297.     settingsContent.style.cssText = `
  1298.     padding: 16px;
  1299.     display: none;
  1300.     `;
  1301.  
  1302.     const fetchButton = document.createElement("button");
  1303.     const mediaTypeLabelText = getMediaTypeLabel(settings.mediaType).toLowerCase();
  1304.     const fetchIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  1305.     fetchIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1306.     fetchIcon.setAttribute("viewBox", ICONS.FETCH.VIEWBOX);
  1307.     fetchIcon.setAttribute("width", "16");
  1308.     fetchIcon.setAttribute("height", "16");
  1309.     fetchIcon.style.marginRight = "8px";
  1310.  
  1311.     const fetchPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  1312.     fetchPath.setAttribute("fill", "currentColor");
  1313.     fetchPath.setAttribute("d", ICONS.FETCH.PATH);
  1314.     fetchIcon.appendChild(fetchPath);
  1315.  
  1316.     const fetchButtonText = document.createElement("span");
  1317.     fetchButtonText.textContent =
  1318.       settings.autoBatchEnabled
  1319.         ? "Auto Fetch"
  1320.         : settings.mediaType === "all"
  1321.           ? "Fetch Media"
  1322.           : `Fetch ${mediaTypeLabelText === "gif" ? "GIF" : mediaTypeLabelText.charAt(0).toUpperCase() + mediaTypeLabelText.slice(1)}`;
  1323.  
  1324.     fetchButton.innerHTML = "";
  1325.     fetchButton.appendChild(fetchIcon);
  1326.     fetchButton.appendChild(fetchButtonText);    
  1327.     fetchButton.style.cssText = `
  1328.         background-color: #22c55e;
  1329.         color: white;
  1330.         border: none;
  1331.         border-radius: 6px;
  1332.         padding: 8px 16px;
  1333.         font-weight: bold;
  1334.         cursor: pointer;
  1335.         margin: 0;
  1336.         width: 48%;
  1337.         display: flex;
  1338.         justify-content: center;
  1339.         align-items: center;
  1340.         text-align: center;
  1341.         transition: background-color 0.2s;
  1342.     `;
  1343.       fetchButton.addEventListener("mouseenter", () => {
  1344.       fetchButton.style.backgroundColor = "#16a34a";
  1345.     });
  1346.  
  1347.     fetchButton.addEventListener("mouseleave", () => {
  1348.       fetchButton.style.backgroundColor = "#22c55e";
  1349.     });const infoContainer = document.createElement("div");
  1350.     infoContainer.style.cssText = `
  1351.         background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1352.         border-radius: 8px;
  1353.         padding: 12px;
  1354.         margin-bottom: 16px;
  1355.         display: none;
  1356.     `;
  1357.  
  1358.     const buttonContainer = document.createElement("div");
  1359.     buttonContainer.style.cssText = `
  1360.         display: none;
  1361.         gap: 8px;
  1362.         margin-bottom: 16px;
  1363.     `;const batchNavContainer = document.createElement("div");
  1364.     batchNavContainer.style.cssText = `
  1365.         display: none;
  1366.         flex-direction: column;
  1367.         gap: 8px;
  1368.         margin-bottom: 16px;
  1369.     `;
  1370.  
  1371.     const prevBatchButton = document.createElement("button");
  1372.     prevBatchButton.innerHTML = `<span style="display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;">${ICONS.PREV}<span>Prev Batch</span></span>`;
  1373.     prevBatchButton.style.cssText = `
  1374.         background-color: #6366f1;
  1375.         color: white;
  1376.         border: none;
  1377.         border-radius: 6px;
  1378.         padding: 8px 16px;
  1379.         font-weight: bold;
  1380.         cursor: pointer;
  1381.         width: 40%;
  1382.         display: flex;
  1383.         align-items: center;
  1384.         justify-content: center;
  1385.         text-align: center;
  1386.         transition: background-color 0.2s;
  1387.     `;
  1388.  
  1389.     prevBatchButton.addEventListener("mouseenter", () => {
  1390.       prevBatchButton.style.backgroundColor = "#4f46e5";
  1391.     });
  1392.     prevBatchButton.addEventListener("mouseleave", () => {
  1393.       prevBatchButton.style.backgroundColor = "#6366f1";
  1394.     });
  1395.  
  1396.     const nextBatchButton = document.createElement("button");
  1397.     nextBatchButton.innerHTML = `<span style="display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;"><span>Next Batch</span>${ICONS.NEXT}</span>`;
  1398.     nextBatchButton.style.cssText = `
  1399.         background-color: #6366f1;
  1400.         color: white;
  1401.         border: none;
  1402.         border-radius: 6px;
  1403.         padding: 8px 16px;
  1404.         font-weight: bold;
  1405.         cursor: pointer;
  1406.         width: 40%;
  1407.         display: flex;
  1408.         align-items: center;
  1409.         justify-content: center;
  1410.         text-align: center;
  1411.         transition: background-color 0.2s;
  1412.     `;
  1413.  
  1414.     nextBatchButton.addEventListener("mouseenter", () => {
  1415.       nextBatchButton.style.backgroundColor = "#4f46e5";
  1416.     });
  1417.     nextBatchButton.addEventListener("mouseleave", () => {
  1418.       nextBatchButton.style.backgroundColor = "#6366f1";
  1419.     });
  1420.  
  1421.     const buttonWrapper = document.createElement("div");
  1422.       buttonWrapper.style.cssText = `
  1423.         display: flex;
  1424.         gap: 8px;
  1425.         justify-content: center;
  1426.         width: 100%;
  1427.     `;
  1428.  
  1429.     buttonWrapper.appendChild(prevBatchButton);
  1430.     buttonWrapper.appendChild(nextBatchButton);
  1431.     batchNavContainer.appendChild(buttonWrapper);
  1432.  
  1433.     const stopFetchButton = document.createElement("button");
  1434.     stopFetchButton.innerHTML = `<span style="display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;">${ICONS.STOP}<span>Stop Fetch</span></span>`;
  1435.  
  1436.     stopFetchButton.style.cssText = `
  1437.         background-color: #ef4444;
  1438.         color: white;
  1439.         border: none;
  1440.         border-radius: 6px;
  1441.         padding: 8px 16px;
  1442.         font-weight: bold;
  1443.         cursor: pointer;
  1444.         width: 140px; /* Fixed width instead of percentage */
  1445.         display: none;
  1446.         align-items: center;
  1447.         justify-content: center;
  1448.         text-align: center;
  1449.         transition: background-color 0.2s;
  1450.     `;
  1451.  
  1452.     stopFetchButton.addEventListener("mouseenter", () => { stopFetchButton.style.backgroundColor = "#dc2626"; });
  1453.     stopFetchButton.addEventListener("mouseleave", () => { stopFetchButton.style.backgroundColor = "#ef4444"; });
  1454.     stopFetchButton.addEventListener("click", () => {
  1455.         autoBatchCancelled = true;
  1456.         autoBatchStarted = false;
  1457.         batchNavContainer.style.display = "flex";
  1458.         prevBatchButton.style.display = mediaData.currentPage > getSettings().startingBatch ? "block" : "none";
  1459.         nextBatchButton.style.display = mediaData.hasMore ? "block" : "none";
  1460.         stopFetchButton.style.display = "none";
  1461.         batchInfoContainer.style.display = "flex";
  1462.         infoContainer.style.display = "block";
  1463.         fetchButtonText.textContent = "Auto Fetch";
  1464.     });
  1465.  
  1466.     const stopFetchWrapper = document.createElement("div");
  1467.     stopFetchWrapper.style.cssText = `
  1468.         display: flex;
  1469.         justify-content: center;
  1470.         width: 100%;
  1471.         margin-top: 8px; /* Add spacing between button rows */
  1472.     `;
  1473.     stopFetchWrapper.appendChild(stopFetchButton);
  1474.     batchNavContainer.appendChild(stopFetchWrapper);
  1475.  
  1476.     const batchInfoContainer = document.createElement("div");
  1477.     batchInfoContainer.style.cssText = `
  1478.         display: none;
  1479.         flex-direction: column;
  1480.         gap: 8px;
  1481.         margin-bottom: 16px;
  1482.         padding: 12px;
  1483.         background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  1484.         border-radius: 8px;
  1485.         border: 1px solid ${settings.darkTheme ? "#4b5563" : "#e2e8f0"};
  1486.     `
  1487.  
  1488.     const batchStatsRow = document.createElement("div")
  1489.     batchStatsRow.style.cssText = `
  1490.         display: flex;
  1491.         justify-content: space-between;
  1492.         align-items: center;
  1493.     `
  1494.  
  1495.     const currentBatchLabel = document.createElement("div")
  1496.     currentBatchLabel.style.cssText = `
  1497.         font-size: 14px;
  1498.         color: ${settings.darkTheme ? "#ffffff" : "#475569"};
  1499.     `
  1500.  
  1501.     const totalBatchLabel = document.createElement("div")
  1502.     totalBatchLabel.style.cssText = `
  1503.         font-size: 14px;
  1504.         color: ${settings.darkTheme ? "#ffffff" : "#475569"};
  1505.     `
  1506.  
  1507.     batchStatsRow.appendChild(currentBatchLabel)
  1508.     batchStatsRow.appendChild(totalBatchLabel)
  1509.  
  1510.     const downloadButtonsRow = document.createElement("div")
  1511.     downloadButtonsRow.style.cssText = `
  1512.         display: flex;
  1513.         gap: 8px;
  1514.         justify-content: center;
  1515.     `
  1516.  
  1517.     const downloadCurrentButton = document.createElement("button")
  1518.     downloadCurrentButton.innerHTML = ""
  1519.     const currentIcon = createDownloadIcon()
  1520.     currentIcon.style.width = "12px"
  1521.     currentIcon.style.height = "12px"
  1522.     currentIcon.style.marginRight = "4px"
  1523.     const currentText = document.createElement("span")
  1524.     currentText.textContent = "Download Current"
  1525.     downloadCurrentButton.appendChild(currentIcon)
  1526.     downloadCurrentButton.appendChild(currentText)
  1527.     downloadCurrentButton.style.cssText = `
  1528.         background-color: #0ea5e9;
  1529.         color: white;
  1530.         border: none;
  1531.         border-radius: 6px;
  1532.         padding: 6px 12px;
  1533.         font-weight: bold;
  1534.         cursor: pointer;
  1535.         font-size: 12px;
  1536.         transition: background-color 0.2s;
  1537.         flex: 1;
  1538.         display: flex;
  1539.         align-items: center;
  1540.         justify-content: center;
  1541.     `
  1542.     downloadCurrentButton.addEventListener("mouseenter", () => {
  1543.       downloadCurrentButton.style.backgroundColor = "#0284c7"
  1544.     })
  1545.     downloadCurrentButton.addEventListener("mouseleave", () => {
  1546.       downloadCurrentButton.style.backgroundColor = "#0ea5e9"
  1547.     })
  1548.  
  1549.     const downloadAllButton = document.createElement("button")
  1550.     downloadAllButton.innerHTML = ""
  1551.     const allIcon = createDownloadIcon()
  1552.     allIcon.style.width = "12px"
  1553.     allIcon.style.height = "12px"
  1554.     allIcon.style.marginRight = "4px"
  1555.     const allText = document.createElement("span")
  1556.     allText.textContent = "Download All"
  1557.     downloadAllButton.appendChild(allIcon)
  1558.     downloadAllButton.appendChild(allText)
  1559.     downloadAllButton.style.cssText = `
  1560.         background-color: #0ea5e9;
  1561.         color: white;
  1562.         border: none;
  1563.         border-radius: 6px;
  1564.         padding: 6px 12px;
  1565.         font-weight: bold;
  1566.         cursor: pointer;
  1567.         font-size: 12px;
  1568.         transition: background-color 0.2s;
  1569.         flex: 1;
  1570.         display: flex;
  1571.         align-items: center;
  1572.         justify-content: center;
  1573.     `;
  1574.     downloadAllButton.addEventListener("mouseenter", () => {
  1575.       downloadAllButton.style.backgroundColor = "#0284c7";
  1576.     });
  1577.     downloadAllButton.addEventListener("mouseleave", () => {
  1578.       downloadAllButton.style.backgroundColor = "#0ea5e9";
  1579.     });
  1580.  
  1581.     downloadButtonsRow.appendChild(downloadCurrentButton);
  1582.     downloadButtonsRow.appendChild(downloadAllButton);
  1583.  
  1584.     batchInfoContainer.appendChild(batchStatsRow);
  1585.     batchInfoContainer.appendChild(downloadButtonsRow);
  1586.  
  1587.     const downloadButton = document.createElement("button");
  1588.     const downloadIcon = createDownloadIcon();
  1589.     downloadIcon.style.width = "16px";
  1590.     downloadIcon.style.height = "16px";
  1591.     downloadIcon.style.marginRight = "8px";
  1592.  
  1593.     downloadButton.innerHTML = "";
  1594.     downloadButton.appendChild(downloadIcon);
  1595.     downloadButton.appendChild(document.createTextNode("Download"));
  1596.     downloadButton.style.cssText = `
  1597.         background-color: #0ea5e9;
  1598.         color: white;
  1599.         border: none;
  1600.         border-radius: 6px;
  1601.         padding: 8px 16px;
  1602.         font-weight: bold;
  1603.         cursor: pointer;
  1604.         width: 50%;
  1605.         margin-left: auto;
  1606.         margin-right: auto;
  1607.         display: flex;
  1608.         align-items: center;
  1609.         justify-content: center;
  1610.         text-align: center;
  1611.         transition: background-color 0.2s;
  1612.     `
  1613.     downloadButton.addEventListener("mouseenter", () => {
  1614.       downloadButton.style.backgroundColor = "#0284c7"
  1615.     })
  1616.     downloadButton.addEventListener("mouseleave", () => {
  1617.       downloadButton.style.backgroundColor = "#0ea5e9"
  1618.     })
  1619.     downloadButton.onclick = () => downloadMedia(false)
  1620.  
  1621.     if (settings.batchEnabled) {
  1622.       buttonContainer.style.display = "none"
  1623.     } else {
  1624.       buttonContainer.appendChild(downloadButton)
  1625.     }    
  1626.     const batchButtonsContainer = document.createElement("div");
  1627.     batchButtonsContainer.style.cssText = `
  1628.         display: none;
  1629.         gap: 8px;
  1630.         margin-bottom: 16px;
  1631.     `;
  1632.  
  1633.     const progressContainer = document.createElement("div");
  1634.     progressContainer.style.cssText = `
  1635.         margin-top: 16px;
  1636.         display: none;
  1637.     `;
  1638.  
  1639.     const progressText = document.createElement("div");
  1640.     progressText.style.cssText = `
  1641.         margin-bottom: 8px;
  1642.         font-size: 14px;
  1643.         text-align: center;
  1644.     `;
  1645.     progressText.textContent = "Downloading...";
  1646.  
  1647.     const progressBar = document.createElement("div");
  1648.     progressBar.style.cssText = `
  1649.         width: 100%;
  1650.         height: 8px;
  1651.         background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1652.         border-radius: 4px;
  1653.         overflow: hidden;
  1654.     `;
  1655.     
  1656.     const progressFill = document.createElement("div");
  1657.     progressFill.style.cssText = `
  1658.         height: 100%;
  1659.         width: 0%;
  1660.         background-color: #0ea5e9;
  1661.         transition: width 0.3s ease-in-out;
  1662.         will-change: width;
  1663.     `;
  1664.  
  1665.     progressBar.appendChild(progressFill);
  1666.     progressContainer.appendChild(progressText)
  1667.     progressContainer.appendChild(progressBar)
  1668.     const convertGifButton = document.createElement("button");
  1669.     const convertGifIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  1670.     convertGifIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1671.     convertGifIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.GIF.VIEWBOX);
  1672.     convertGifIcon.setAttribute("width", "16");
  1673.     convertGifIcon.setAttribute("height", "16");
  1674.     convertGifIcon.style.marginRight = "8px";
  1675.  
  1676.     const convertGifPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  1677.     convertGifPath.setAttribute("fill", "currentColor");
  1678.     convertGifPath.setAttribute("d", ICONS.MEDIA_TYPE.GIF.PATH);
  1679.     convertGifIcon.appendChild(convertGifPath);
  1680.  
  1681.     const convertGifButtonText = document.createElement("span");
  1682.     convertGifButtonText.textContent = "Convert GIF";
  1683.  
  1684.     convertGifButton.innerHTML = "";
  1685.     convertGifButton.appendChild(convertGifIcon);
  1686.     convertGifButton.appendChild(convertGifButtonText);    
  1687.     convertGifButton.style.cssText = `
  1688.         background-color: #3b82f6;
  1689.         color: white;
  1690.         border: none;
  1691.         border-radius: 6px;
  1692.         padding: 8px 16px;
  1693.         font-weight: bold;
  1694.         cursor: pointer;
  1695.         margin: 0;
  1696.         width: 48%;
  1697.         display: flex;
  1698.         justify-content: center;
  1699.         align-items: center;
  1700.         text-align: center;
  1701.         transition: background-color 0.2s;
  1702.     `;
  1703.  
  1704.     convertGifButton.addEventListener("mouseenter", () => {
  1705.         convertGifButton.style.backgroundColor = "#2563eb";
  1706.     });
  1707.  
  1708.     convertGifButton.addEventListener("mouseleave", () => {
  1709.         convertGifButton.style.backgroundColor = "#3b82f6";
  1710.     });    
  1711.     convertGifButton.addEventListener("click", () => {
  1712.         const convertUrl = `https://convert.xbatch.online/${username}`;
  1713.         window.open(convertUrl, '_blank');
  1714.     });
  1715.  
  1716.     const mainButtonsContainer = document.createElement("div");
  1717.     mainButtonsContainer.style.cssText = `
  1718.         display: flex;
  1719.         gap: 4%;
  1720.         margin: 16px 0;
  1721.         width: 100%;
  1722.     `;
  1723.     
  1724.     mainButtonsContainer.appendChild(fetchButton);
  1725.     mainButtonsContainer.appendChild(convertGifButton);
  1726.  
  1727.     mainContent.appendChild(mainButtonsContainer)
  1728.     mainContent.appendChild(infoContainer)
  1729.     mainContent.appendChild(batchInfoContainer)
  1730.     mainContent.appendChild(batchNavContainer)
  1731.     mainContent.appendChild(buttonContainer)
  1732.     mainContent.appendChild(batchButtonsContainer)
  1733.     mainContent.appendChild(progressContainer);
  1734.  
  1735.     const settingsTabs = document.createElement("div")
  1736.     settingsTabs.style.cssText = `
  1737.         display: flex;
  1738.         border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  1739.         margin-bottom: 16px;
  1740.         width: 100%;
  1741.     `
  1742.  
  1743.     const fetchTab = document.createElement("button")
  1744.     fetchTab.textContent = "Fetch"
  1745.     fetchTab.style.cssText = `
  1746.         background: none;
  1747.         border: none;
  1748.         padding: 12px 16px;
  1749.         cursor: pointer;
  1750.         color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  1751.         border-bottom: 2px solid #0ea5e9;
  1752.         font-weight: bold;
  1753.         font-size: 14px;
  1754.         flex: 1;
  1755.         text-align: center;
  1756.     `
  1757.  
  1758.     const authTab = document.createElement("button")
  1759.     authTab.textContent = "Auth"
  1760.     authTab.style.cssText = `
  1761.         background: none;
  1762.         border: none;
  1763.         padding: 12px 16px;
  1764.         cursor: pointer;
  1765.         color: #64748b;
  1766.         border-bottom: none;
  1767.         font-weight: bold;
  1768.         font-size: 14px;
  1769.         flex: 1;
  1770.         text-align: center;
  1771.     `
  1772.  
  1773.     const advancedTab = document.createElement("button")
  1774.     advancedTab.textContent = "Advanced"
  1775.     advancedTab.style.cssText = `
  1776.         background: none;
  1777.         border: none;
  1778.         padding: 12px 16px;
  1779.         cursor: pointer;
  1780.         color: #64748b;
  1781.         border-bottom: none;
  1782.         font-weight: bold;
  1783.         font-size: 14px;
  1784.         flex: 1;
  1785.         text-align: center;    
  1786.     `;
  1787.     
  1788.     settingsTabs.appendChild(fetchTab);
  1789.     settingsTabs.appendChild(authTab);
  1790.     settingsTabs.appendChild(advancedTab);      
  1791.     const fetchTabContent = document.createElement("div")
  1792.     fetchTabContent.style.cssText = `
  1793.         display: flex;
  1794.         flex-direction: column;
  1795.         gap: ${settings.batchEnabled ? "16px" : "8px"};
  1796.     `
  1797.  
  1798.     const downloadTabContent = document.createElement("div")
  1799.     downloadTabContent.style.cssText = `
  1800.         display: none;
  1801.         flex-direction: column;
  1802.         gap: 16px;
  1803.     `
  1804.  
  1805.     const authTabContent = document.createElement("div")
  1806.     authTabContent.style.cssText = `
  1807.         display: none;
  1808.         flex-direction: column;
  1809.         gap: 16px;
  1810.     `
  1811.  
  1812.     const advancedTabContent = document.createElement("div")
  1813.     advancedTabContent.style.cssText = `
  1814.         display: none;
  1815.         flex-direction: column;
  1816.         gap: 0px;
  1817.     `
  1818.  
  1819.     const patreonAuthGroup = document.createElement("div")
  1820.     patreonAuthGroup.style.cssText = `
  1821.         display: flex;
  1822.         flex-direction: column;
  1823.         gap: 8px;
  1824.     `
  1825.  
  1826.     const patreonAuthLabel = document.createElement("label")
  1827.     patreonAuthLabel.textContent = "Patreon Auth:"
  1828.     patreonAuthLabel.style.cssText = `
  1829.         font-size: 14px;
  1830.         font-weight: bold;
  1831.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1832.     `
  1833.  
  1834.     const patreonAuthInputContainer = document.createElement("div")
  1835.     patreonAuthInputContainer.style.cssText = `
  1836.         position: relative;
  1837.         display: flex;
  1838.         align-items: center;
  1839.     `
  1840.  
  1841.     const patreonAuthInput = document.createElement("input")
  1842.     patreonAuthInput.type = "text"
  1843.     patreonAuthInput.value = settings.patreonAuth
  1844.     patreonAuthInput.style.cssText = `
  1845.     background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1846.     border: 1px solid transparent;
  1847.     border-radius: 4px;
  1848.     padding: 8px 12px;
  1849.     color: ${settings.darkTheme ? "#cbd5e1" : "#64748b"};
  1850.     width: 100%;
  1851.     box-sizing: border-box;
  1852.     transition: all 0.2s ease;
  1853.     `
  1854.  
  1855.     patreonAuthInput.addEventListener("focus", () => {
  1856.       patreonAuthInput.style.border = "1px solid #0ea5e9"
  1857.       patreonAuthInput.style.outline = "none"
  1858.     })
  1859.     patreonAuthInput.addEventListener("blur", () => {
  1860.       patreonAuthInput.style.border = "1px solid transparent"
  1861.     })
  1862.  
  1863.     patreonAuthInput.addEventListener("input", () => {
  1864.       const newSettings = getSettings()
  1865.       newSettings.patreonAuth = patreonAuthInput.value
  1866.       saveSettings(newSettings)
  1867.       patreonAuthClearButton.style.display = patreonAuthInput.value ? "block" : "none"
  1868.     })
  1869.  
  1870.     const patreonAuthClearButton = document.createElement("button")
  1871.     patreonAuthClearButton.innerHTML = "&times;"
  1872.     patreonAuthClearButton.style.cssText = `
  1873.         position: absolute;
  1874.         right: 8px;
  1875.         background: none;
  1876.         border: none;
  1877.         color: #64748b;
  1878.         font-size: 18px;
  1879.         cursor: pointer;
  1880.         padding: 0;
  1881.         display: ${settings.patreonAuth ? "block" : "none"};
  1882.     `
  1883.     patreonAuthClearButton.addEventListener("click", () => {
  1884.       patreonAuthInput.value = ""
  1885.       const newSettings = getSettings()
  1886.       newSettings.patreonAuth = ""
  1887.       saveSettings(newSettings)
  1888.       patreonAuthClearButton.style.display = "none"
  1889.     })
  1890.  
  1891.     patreonAuthInputContainer.appendChild(patreonAuthInput)
  1892.     patreonAuthInputContainer.appendChild(patreonAuthClearButton)
  1893.     patreonAuthGroup.appendChild(patreonAuthLabel)
  1894.     patreonAuthGroup.appendChild(patreonAuthInputContainer)
  1895.  
  1896.     const tokenGroup = document.createElement("div")
  1897.     tokenGroup.style.cssText = `
  1898.         display: flex;
  1899.         flex-direction: column;
  1900.         gap: 8px;
  1901.     `
  1902.  
  1903.     const tokenLabel = document.createElement("label")
  1904.     tokenLabel.textContent = "Auth Token:"
  1905.     tokenLabel.style.cssText = `
  1906.         font-size: 14px;
  1907.         font-weight: bold;
  1908.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1909.     `
  1910.  
  1911.     const tokenInputContainer = document.createElement("div")
  1912.     tokenInputContainer.style.cssText = `
  1913.         position: relative;
  1914.         display: flex;
  1915.         align-items: center;
  1916.     `
  1917.  
  1918.     const tokenInput = document.createElement("input")
  1919.     tokenInput.type = "text"
  1920.     tokenInput.value = settings.authToken
  1921.     tokenInput.style.cssText = `
  1922.     background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1923.     border: 1px solid transparent;
  1924.     border-radius: 4px;
  1925.     padding: 8px 12px;
  1926.     color: ${settings.darkTheme ? "#cbd5e1" : "#64748b"};
  1927.     width: 100%;
  1928.     box-sizing: border-box;
  1929.     transition: all 0.2s ease;
  1930.     `
  1931.     tokenInput.addEventListener("focus", () => {
  1932.       tokenInput.style.border = "1px solid #0ea5e9"
  1933.       tokenInput.style.outline = "none"
  1934.     })
  1935.     tokenInput.addEventListener("blur", () => {
  1936.       tokenInput.style.border = "1px solid transparent"
  1937.     })
  1938.  
  1939.     tokenInput.addEventListener("input", () => {
  1940.       const newSettings = getSettings()
  1941.       newSettings.authToken = tokenInput.value
  1942.       saveSettings(newSettings)
  1943.       tokenClearButton.style.display = tokenInput.value ? "block" : "none"
  1944.     })
  1945.  
  1946.     const tokenClearButton = document.createElement("button")
  1947.     tokenClearButton.innerHTML = "&times;"
  1948.     tokenClearButton.style.cssText = `
  1949.         position: absolute;
  1950.         right: 8px;
  1951.         background: none;
  1952.         border: none;
  1953.         color: #64748b;
  1954.         font-size: 18px;
  1955.         cursor: pointer;
  1956.         padding: 0;
  1957.         display: ${settings.authToken ? "block" : "none"};
  1958.     `
  1959.     tokenClearButton.addEventListener("click", () => {
  1960.       tokenInput.value = ""
  1961.       const newSettings = getSettings()
  1962.       newSettings.authToken = ""
  1963.       saveSettings(newSettings)
  1964.       tokenClearButton.style.display = "none"
  1965.     })
  1966.  
  1967.     tokenInputContainer.appendChild(tokenInput)
  1968.     tokenInputContainer.appendChild(tokenClearButton)
  1969.     tokenGroup.appendChild(tokenLabel)
  1970.     tokenGroup.appendChild(tokenInputContainer)
  1971.  
  1972.     const apiServerGroup = document.createElement("div")
  1973.     apiServerGroup.style.cssText = `
  1974.         display: flex;
  1975.         flex-direction: column;
  1976.         gap: 8px;
  1977.     `
  1978.  
  1979.     const apiServerLabel = document.createElement("label")
  1980.     apiServerLabel.textContent = "Service:"
  1981.     apiServerLabel.style.cssText = `
  1982.         font-size: 14px;
  1983.         font-weight: bold;
  1984.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1985.     `
  1986.  
  1987.     const apiServerOptions = [
  1988.       { value: "default", label: "Default" },
  1989.       { value: "backup", label: "Backup" }
  1990.     ]
  1991.  
  1992.     const apiServerToggle = createToggleSwitch(apiServerOptions, settings.apiServer, (value) => {
  1993.       const newSettings = getSettings()
  1994.       newSettings.apiServer = value
  1995.       saveSettings(newSettings)
  1996.       settings.apiServer = value
  1997.     })
  1998.  
  1999.     apiServerGroup.appendChild(apiServerLabel)
  2000.     apiServerGroup.appendChild(apiServerToggle)
  2001.  
  2002.     const batchGroup = document.createElement("div")
  2003.     batchGroup.style.cssText = `
  2004.         display: flex;
  2005.         align-items: center;
  2006.         gap: 8px;
  2007.     `
  2008.     const batchLabel = document.createElement("label")
  2009.     batchLabel.style.cssText = `
  2010.         font-size: 14px;
  2011.         font-weight: bold;
  2012.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2013.         flex: 1;
  2014.         display: flex;
  2015.         align-items: center;
  2016.     `
  2017.     const batchLabelText = document.createElement("span")
  2018.     batchLabelText.textContent = "Batch:"
  2019.     batchLabel.appendChild(batchLabelText)
  2020.  
  2021.     const batchInfoIcon = createInfoIcon()
  2022.     const batchTooltip = createInfoTooltip("When enabled, the media fetching process is performed in batches")
  2023.     batchInfoIcon.addEventListener("mouseenter", batchTooltip.showTooltip)
  2024.     batchInfoIcon.addEventListener("mouseleave", batchTooltip.hideTooltip)
  2025.     batchLabel.appendChild(batchInfoIcon)
  2026.  
  2027.     const batchToggle = document.createElement("div")
  2028.     batchToggle.style.cssText = `
  2029.         position: relative;
  2030.         width: 50px;
  2031.         height: 24px;
  2032.         background-color: ${settings.batchEnabled ? "#22c55e" : "#cbd5e1"};
  2033.         border-radius: 12px;
  2034.         cursor: pointer;
  2035.         transition: background-color 0.3s;
  2036.     `
  2037.  
  2038.     const batchToggleHandle = document.createElement("div")
  2039.     batchToggleHandle.style.cssText = `
  2040.         position: absolute;
  2041.         top: 2px;
  2042.         left: ${settings.batchEnabled ? "28px" : "2px"};
  2043.         width: 20px;
  2044.         height: 20px;
  2045.         background-color: white;
  2046.         border-radius: 50%;
  2047.         transition: left 0.3s;
  2048.     `
  2049.  
  2050.     batchToggle.appendChild(batchToggleHandle)    
  2051.     batchToggle.addEventListener("click", () => {
  2052.         const newSettings = getSettings()
  2053.         newSettings.batchEnabled = !newSettings.batchEnabled
  2054.         saveSettings(newSettings)
  2055.         batchToggle.style.backgroundColor = newSettings.batchEnabled ? "#22c55e" : "#cbd5e1"
  2056.         batchToggleHandle.style.left = newSettings.batchEnabled ? "28px" : "2px"
  2057.         autoBatchGroup.style.display = newSettings.batchEnabled ? "flex" : "none"
  2058.         batchSizeGroup.style.display = newSettings.batchEnabled ? "flex" : "none"
  2059.         startingBatchGroup.style.display = newSettings.batchEnabled ? "flex" : "none"
  2060.         
  2061.         if (!newSettings.batchEnabled) {
  2062.             fetchTabContent.style.gap = "8px"
  2063.             newSettings.autoBatchEnabled = false
  2064.             saveSettings(newSettings)
  2065.             autoBatchToggle.style.backgroundColor = "#cbd5e1"
  2066.             autoBatchHandle.style.left = "2px"
  2067.             const mt = getSettings().mediaType
  2068.             const mtLabel = getMediaTypeLabel(mt).toLowerCase()
  2069.             const labelText = mt === "all" ? "Fetch Media" : `Fetch ${mtLabel === "gif" ? "GIF" : mtLabel.charAt(0).toUpperCase() + mtLabel.slice(1)}`
  2070.  
  2071.             fetchButtonText.textContent = labelText
  2072.             fetchButton.innerHTML = ""
  2073.             let updatedFetchIcon = fetchIcon.cloneNode(true)
  2074.             fetchButton.appendChild(updatedFetchIcon)
  2075.             fetchButton.appendChild(fetchButtonText)
  2076.             if (typeof stopFetchButton !== 'undefined') stopFetchButton.style.display = "none"
  2077.             if (typeof prevBatchButton !== 'undefined') prevBatchButton.style.display = "block"
  2078.             if (typeof nextBatchButton !== 'undefined') nextBatchButton.style.display = "block"
  2079.         } else {
  2080.             fetchTabContent.style.gap = "16px"
  2081.         }
  2082.     })
  2083.  
  2084.     batchGroup.appendChild(batchLabel)
  2085.     batchGroup.appendChild(batchToggle)
  2086.  
  2087.     const autoBatchGroup = document.createElement("div")
  2088.     autoBatchGroup.style.cssText = `
  2089.         display: ${settings.batchEnabled ? "flex" : "none"};
  2090.         align-items: center;
  2091.         gap: 8px;
  2092.     `
  2093.     const autoBatchLabel = document.createElement("label")
  2094.     autoBatchLabel.style.cssText = `
  2095.         font-size: 14px;
  2096.         font-weight: bold;
  2097.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2098.         flex: 1;
  2099.         display: flex;
  2100.         align-items: center;
  2101.     `
  2102.     autoBatchLabel.textContent = "Auto Fetch"
  2103.     const autoBatchToggle = document.createElement("div")
  2104.     autoBatchToggle.style.cssText = `
  2105.         position: relative;
  2106.         width: 50px;
  2107.         height: 24px;
  2108.         background-color: ${settings.autoBatchEnabled ? "#22c55e" : "#cbd5e1"};
  2109.         border-radius: 12px;
  2110.         cursor: pointer;
  2111.         transition: background-color 0.3s;
  2112.     `
  2113.     const autoBatchHandle = document.createElement("div")
  2114.     autoBatchHandle.style.cssText = `
  2115.         position: absolute;
  2116.         top: 2px;
  2117.         left: ${settings.autoBatchEnabled ? "28px" : "2px"};
  2118.         width: 20px;
  2119.         height: 20px;
  2120.         background-color: white;
  2121.         border-radius: 50%;
  2122.         transition: left 0.3s;
  2123.     `
  2124.     autoBatchToggle.appendChild(autoBatchHandle)
  2125.     autoBatchToggle.addEventListener("click", () => {
  2126.         const newSettings = getSettings()
  2127.         const willEnable = !newSettings.autoBatchEnabled
  2128.         newSettings.autoBatchEnabled = willEnable
  2129.         saveSettings(newSettings)
  2130.         autoBatchCancelled = false
  2131.         autoBatchStarted = false
  2132.         autoBatchToggle.style.backgroundColor = willEnable ? "#22c55e" : "#cbd5e1"
  2133.         autoBatchHandle.style.left = willEnable ? "28px" : "2px"
  2134.           const label = willEnable
  2135.             ? "Auto Fetch"
  2136.             : (newSettings.mediaType === "all"
  2137.                 ? "Fetch Media"
  2138.                 : newSettings.mediaType === "image"
  2139.                     ? "Fetch Photos"
  2140.                     : "Fetch Videos")
  2141.         fetchButtonText.textContent = label
  2142.  
  2143.         if (willEnable) {
  2144.         const keyPrefix = `twitter_dl_${newSettings.timelineType}_${newSettings.mediaType}_${username}_`
  2145.         const keySuffix = `_${newSettings.batchSize}_batch_true`
  2146.         for (let i = 0; i < localStorage.length; i++) {
  2147.             const key = localStorage.key(i)
  2148.             if (key.startsWith(keyPrefix) && key.endsWith(keySuffix)) {
  2149.                 const pageNum = parseInt(key.slice(keyPrefix.length, key.length - keySuffix.length), 10)
  2150.                 if (!isNaN(pageNum)) {
  2151.                     const cachedData = cacheManager.get(key)
  2152.                     if (cachedData && cachedData.timeline) {
  2153.                         mediaData.batchData[pageNum] = cachedData.timeline
  2154.                     }
  2155.                 }
  2156.             }
  2157.         }
  2158.         const batchNums = Object.keys(mediaData.batchData).map(Number)
  2159.         mediaData.currentPage = batchNums.length > 0 ? Math.max(...batchNums) + 1 : 0
  2160.         fetchButtonText.textContent = "Auto Fetch"
  2161.     } else {
  2162.         const mt = newSettings.mediaType
  2163.         const label = mt === "all" ? "Fetch Media" : `Fetch ${getMediaTypeLabel(mt).toUpperCase()}`
  2164.         fetchButtonText.textContent = label
  2165.     }
  2166.     })
  2167.     autoBatchGroup.appendChild(autoBatchLabel)
  2168.     autoBatchGroup.appendChild(autoBatchToggle)
  2169.  
  2170.     const batchSizeGroup = document.createElement("div")
  2171.     batchSizeGroup.style.cssText = `
  2172.     display: ${settings.batchEnabled ? "flex" : "none"};
  2173.     flex-direction: column;
  2174.     gap: 8px;
  2175.     `
  2176.  
  2177.     const batchSizeLabel = document.createElement("label")
  2178.     batchSizeLabel.style.cssText = `
  2179.         font-size: 14px;
  2180.         font-weight: bold;
  2181.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2182.         display: flex;
  2183.         align-items: center;
  2184.     `
  2185.     const batchSizeLabelText = document.createElement("span")
  2186.     batchSizeLabelText.textContent = "Batch Size:"
  2187.     batchSizeLabel.appendChild(batchSizeLabelText)
  2188.  
  2189.     const batchSizeInfoIcon = createInfoIcon()
  2190.     const batchSizeTooltip = createInfoTooltip("Number of media items fetched in a single request")
  2191.     batchSizeInfoIcon.addEventListener("mouseenter", batchSizeTooltip.showTooltip)
  2192.     batchSizeInfoIcon.addEventListener("mouseleave", batchSizeTooltip.hideTooltip)
  2193.     batchSizeLabel.appendChild(batchSizeInfoIcon)
  2194.  
  2195.     const batchSizeToggle = createSlider(batchSizes, settings.batchSize, (value) => {
  2196.       const newSettings = getSettings()
  2197.       newSettings.batchSize = value
  2198.       saveSettings(newSettings)
  2199.       settings.batchSize = value
  2200.     })
  2201.  
  2202.     batchSizeGroup.appendChild(batchSizeLabel)
  2203.     batchSizeGroup.appendChild(batchSizeToggle)
  2204.  
  2205.     const startingBatchGroup = document.createElement("div")
  2206.     startingBatchGroup.style.cssText = `
  2207.     display: ${settings.batchEnabled ? "flex" : "none"};
  2208.     flex-direction: column;
  2209.     gap: 8px;
  2210.     `
  2211.  
  2212.     const startingBatchLabel = document.createElement("label")
  2213.     startingBatchLabel.style.cssText = `
  2214.         font-size: 14px;
  2215.         font-weight: bold;
  2216.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2217.         display: flex;
  2218.         align-items: center;
  2219.     `
  2220.     const startingBatchLabelText = document.createElement("span")
  2221.     startingBatchLabelText.textContent = "Starting Batch:"
  2222.     startingBatchLabel.appendChild(startingBatchLabelText)
  2223.  
  2224.     const startingBatchInfoIcon = createInfoIcon()
  2225.     const startingBatchTooltip = createInfoTooltip("Determines which batch number to start fetching from")
  2226.     startingBatchInfoIcon.addEventListener("mouseenter", startingBatchTooltip.showTooltip)
  2227.     startingBatchInfoIcon.addEventListener("mouseleave", startingBatchTooltip.hideTooltip)
  2228.     startingBatchLabel.appendChild(startingBatchInfoIcon)
  2229.  
  2230.     const startingBatchInput = document.createElement("input")
  2231.     startingBatchInput.type = "number"
  2232.     startingBatchInput.value = settings.startingBatch
  2233.     startingBatchInput.min = "0"
  2234.     startingBatchInput.style.cssText = `
  2235.         background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  2236.         border: 1px solid transparent;
  2237.         border-radius: 4px;
  2238.         padding: 8px 12px;
  2239.         color: ${settings.darkTheme ? "#cbd5e1" : "#64748b"};
  2240.         width: 100%;
  2241.         box-sizing: border-box;
  2242.         transition: all 0.2s ease;
  2243.     `
  2244.     startingBatchInput.addEventListener("focus", () => {
  2245.       startingBatchInput.style.border = "1px solid #0ea5e9"
  2246.       startingBatchInput.style.outline = "none"
  2247.     })
  2248.     startingBatchInput.addEventListener("blur", () => {
  2249.       startingBatchInput.style.border = "1px solid transparent"
  2250.     })
  2251.  
  2252.     startingBatchInput.addEventListener("input", () => {
  2253.       const newSettings = getSettings()
  2254.       newSettings.startingBatch = parseInt(startingBatchInput.value) || 0
  2255.       saveSettings(newSettings)
  2256.       settings.startingBatch = newSettings.startingBatch
  2257.     })
  2258.  
  2259.     startingBatchGroup.appendChild(startingBatchLabel)
  2260.     startingBatchGroup.appendChild(startingBatchInput)
  2261.  
  2262.     const timelineTypeGroup = document.createElement("div")
  2263.     timelineTypeGroup.style.cssText = `
  2264.     display: flex;
  2265.     flex-direction: column;
  2266.     gap: 8px;
  2267.     `
  2268.  
  2269.     const timelineTypeLabel = document.createElement("label")
  2270.     timelineTypeLabel.textContent = "Timeline Type:"
  2271.     timelineTypeLabel.style.cssText = `
  2272.         font-size: 14px;
  2273.         font-weight: bold;
  2274.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2275.     `
  2276.  
  2277.     const timelineTypeOptions = [
  2278.       { value: "media", label: "Media", icon: createTimelineTypeIcon("media") },
  2279.       { value: "timeline", label: "Post", icon: createTimelineTypeIcon("timeline") },
  2280.       { value: "tweets", label: "Tweets", icon: createTimelineTypeIcon("tweets") },
  2281.       { value: "with_replies", label: "Replies", icon: createTimelineTypeIcon("with_replies") },
  2282.     ]
  2283.  
  2284.     const timelineTypeToggle = createToggleSwitch(timelineTypeOptions, settings.timelineType, (value) => {
  2285.       const newSettings = getSettings()
  2286.       newSettings.timelineType = value
  2287.       saveSettings(newSettings)
  2288.       settings.timelineType = value
  2289.     })
  2290.  
  2291.     timelineTypeGroup.appendChild(timelineTypeLabel)
  2292.     timelineTypeGroup.appendChild(timelineTypeToggle)
  2293.  
  2294.     const mediaTypeGroup = document.createElement("div")
  2295.     mediaTypeGroup.style.cssText = `
  2296.     display: flex;
  2297.     flex-direction: column;
  2298.     gap: 8px;
  2299.     `
  2300.  
  2301.     const mediaTypeLabel = document.createElement("label")
  2302.     mediaTypeLabel.textContent = "Media Type:"
  2303.     mediaTypeLabel.style.cssText = `
  2304.         font-size: 14px;
  2305.         font-weight: bold;
  2306.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2307.     `
  2308.  
  2309.     const mediaTypeIcons = createMediaTypeIcons()
  2310.     const mediaTypeOptions = [
  2311.       { value: "all", label: "All", icon: mediaTypeIcons.all },
  2312.       { value: "image", label: "Image", icon: mediaTypeIcons.image },
  2313.       { value: "video", label: "Video", icon: mediaTypeIcons.video },
  2314.       { value: "gif", label: "GIF", icon: mediaTypeIcons.gif },
  2315.     ]
  2316.  
  2317.     const mediaTypeToggle = createToggleSwitch(mediaTypeOptions, settings.mediaType, (value) => {
  2318.       const newSettings = getSettings()
  2319.       newSettings.mediaType = value
  2320.       saveSettings(newSettings)
  2321.       settings.mediaType = value
  2322.  
  2323.       const newMediaTypeLabel = getMediaTypeLabel(value).toLowerCase()
  2324.       const newFetchButtonText =
  2325.         value === "all"
  2326.           ? "Fetch Media"
  2327.           : `Fetch ${newMediaTypeLabel === "gif" ? "GIF" : newMediaTypeLabel.charAt(0).toUpperCase() + newMediaTypeLabel.slice(1)}`
  2328.  
  2329.       fetchButton.innerHTML = ""
  2330.       const newFetchIcon = fetchIcon.cloneNode(true)
  2331.       fetchButton.appendChild(newFetchIcon)
  2332.       fetchButton.appendChild(document.createTextNode(newFetchButtonText))
  2333.  
  2334.       title.innerHTML = `Download ${getMediaTypeLabel(value)}: <span style="color: #0ea5e9">${username}</span>`
  2335.     })
  2336.  
  2337.     mediaTypeGroup.appendChild(mediaTypeLabel)
  2338.     mediaTypeGroup.appendChild(mediaTypeToggle)
  2339.  
  2340.     const concurrentGroup = document.createElement("div")
  2341.     concurrentGroup.style.cssText = `
  2342.     display: flex;
  2343.     flex-direction: column;
  2344.     gap: 8px;
  2345.     `
  2346.  
  2347.     const concurrentLabel = document.createElement("label")
  2348.     concurrentLabel.style.cssText = `
  2349.         font-size: 14px;
  2350.         font-weight: bold;
  2351.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2352.         display: flex;
  2353.         align-items: center;
  2354.     `
  2355.  
  2356.     const concurrentLabelText = document.createElement("span")
  2357.     concurrentLabelText.textContent = "Batch Download Items:"
  2358.     concurrentLabel.appendChild(concurrentLabelText)
  2359.  
  2360.     const concurrentInfoIcon = createInfoIcon()
  2361.     const concurrentTooltip = createInfoTooltip("Total item that are downloaded in a single request")
  2362.     concurrentInfoIcon.addEventListener("mouseenter", concurrentTooltip.showTooltip)
  2363.     concurrentInfoIcon.addEventListener("mouseleave", concurrentTooltip.hideTooltip)
  2364.     concurrentLabel.appendChild(concurrentInfoIcon)
  2365.     
  2366.     const concurrentToggle = document.createElement("div")
  2367.     concurrentToggle.textContent = "Fixed to 50 concurrent downloads"
  2368.     concurrentToggle.style.cssText = `
  2369.         padding: 10px;
  2370.         background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  2371.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2372.         border-radius: 8px;
  2373.         text-align: center;
  2374.     `
  2375.  
  2376.     concurrentGroup.appendChild(concurrentLabel)
  2377.     concurrentGroup.appendChild(concurrentToggle)
  2378.  
  2379.     const cacheDurationGroup = document.createElement("div")
  2380.     cacheDurationGroup.style.cssText = `
  2381.     display: flex;
  2382.     flex-direction: column;
  2383.     gap: 8px;
  2384.     `
  2385.  
  2386.     const cacheDurationLabel = document.createElement("label")
  2387.     cacheDurationLabel.textContent = "Cache Duration:"
  2388.     cacheDurationLabel.style.cssText = `
  2389.         font-size: 14px;
  2390.         font-weight: bold;
  2391.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2392.     `
  2393.  
  2394.     const cacheDurationOptions = cacheDurations.map((duration) => {
  2395.       let label = duration.toString() + "m"
  2396.       if (duration >= 60 && duration % 60 === 0) {
  2397.         label = `${duration / 60}h`
  2398.       }
  2399.       return { value: duration, label: label }
  2400.     })
  2401.  
  2402.       const cacheDurationToggle = createToggleSwitch(cacheDurationOptions, settings.cacheDuration, (value) => {
  2403.       const newSettings = getSettings()
  2404.       newSettings.cacheDuration = value
  2405.       saveSettings(newSettings)
  2406.       settings.cacheDuration = value
  2407.     });
  2408.     cacheDurationGroup.appendChild(cacheDurationLabel)
  2409.     cacheDurationGroup.appendChild(cacheDurationToggle)
  2410.  
  2411.     const darkThemeGroup = document.createElement("div")
  2412.     darkThemeGroup.style.cssText = `
  2413.         display: flex;
  2414.         align-items: center;
  2415.         gap: 8px;
  2416.     `
  2417.     const darkThemeLabel = document.createElement("label")
  2418.     darkThemeLabel.style.cssText = `
  2419.         font-size: 14px;
  2420.         font-weight: bold;
  2421.         color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2422.         flex: 1;
  2423.         display: flex;
  2424.         align-items: center;
  2425.     `
  2426.     const darkThemeLabelText = document.createElement("span")
  2427.     darkThemeLabelText.textContent = "Dark Theme:"
  2428.     darkThemeLabel.appendChild(darkThemeLabelText)
  2429.  
  2430.     const darkThemeToggle = document.createElement("div")
  2431.     darkThemeToggle.style.cssText = `
  2432.         position: relative;
  2433.         width: 50px;
  2434.         height: 24px;
  2435.         background-color: ${settings.darkTheme ? "#22c55e" : "#cbd5e1"};
  2436.         border-radius: 12px;
  2437.         cursor: pointer;
  2438.         transition: background-color 0.3s;
  2439.     `
  2440.  
  2441.     const darkThemeToggleHandle = document.createElement("div")
  2442.     darkThemeToggleHandle.style.cssText = `
  2443.         position: absolute;
  2444.         top: 2px;
  2445.         left: ${settings.darkTheme ? "28px" : "2px"};
  2446.         width: 20px;
  2447.         height: 20px;
  2448.         background-color: white;
  2449.         border-radius: 50%;
  2450.         transition: left 0.3s;
  2451.     `
  2452.  
  2453.     darkThemeToggle.appendChild(darkThemeToggleHandle)
  2454.     darkThemeToggle.addEventListener("click", () => {
  2455.         const newSettings = getSettings()
  2456.         newSettings.darkTheme = !newSettings.darkTheme
  2457.         saveSettings(newSettings)
  2458.         settings.darkTheme = newSettings.darkTheme
  2459.         darkThemeToggle.style.backgroundColor = newSettings.darkTheme ? "#22c55e" : "#cbd5e1"
  2460.         darkThemeToggleHandle.style.left = newSettings.darkTheme ? "28px" : "2px"
  2461.         updateTheme()
  2462.       })
  2463.  
  2464.     darkThemeGroup.appendChild(darkThemeLabel)
  2465.     darkThemeGroup.appendChild(darkThemeToggle)
  2466.  
  2467.     const buttonsContainer = document.createElement("div")
  2468.     buttonsContainer.style.cssText = `
  2469.     display: flex;
  2470.     gap: 16px;
  2471.     margin-top: 16px;
  2472.     width: 100%;
  2473.     justify-content: center;
  2474.     align-items: center;
  2475.     `
  2476.  
  2477.     const clearCacheButton = document.createElement("button")
  2478.     const trashIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  2479.     trashIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  2480.     trashIcon.setAttribute("viewBox", ICONS.CLEAR.VIEWBOX)
  2481.     trashIcon.setAttribute("width", "16")
  2482.     trashIcon.setAttribute("height", "16")
  2483.     trashIcon.style.marginRight = "8px"
  2484.  
  2485.     const trashPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  2486.     trashPath.setAttribute("fill", "currentColor")
  2487.     trashPath.setAttribute("d", ICONS.CLEAR.PATH)
  2488.     trashIcon.appendChild(trashPath)
  2489.     clearCacheButton.appendChild(trashIcon)
  2490.     clearCacheButton.appendChild(document.createTextNode("Clear Cache"))
  2491.     clearCacheButton.style.cssText = `
  2492.     background-color: #ef4444;
  2493.     color: white;
  2494.     border: none;
  2495.     border-radius: 6px;
  2496.     padding: 8px 16px;
  2497.     font-weight: bold;
  2498.     cursor: pointer;
  2499.     flex: 1;
  2500.     display: flex;
  2501.     align-items: center;
  2502.     justify-content: center;
  2503.     text-align: center;
  2504.     transition: background-color 0.2s;
  2505.     `
  2506.  
  2507.     const resetDefaultButton = document.createElement("button")
  2508.     const resetIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  2509.     resetIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg")
  2510.     resetIcon.setAttribute("viewBox", ICONS.RESET.VIEWBOX)
  2511.     resetIcon.setAttribute("width", "16")
  2512.     resetIcon.setAttribute("height", "16")
  2513.     resetIcon.style.marginRight = "8px"
  2514.  
  2515.     const resetPath = document.createElementNS("http://www.w3.org/2000/svg", "path")
  2516.     resetPath.setAttribute("fill", "currentColor")
  2517.     resetPath.setAttribute("d", ICONS.RESET.PATH)
  2518.     resetIcon.appendChild(resetPath)
  2519.  
  2520.     resetDefaultButton.appendChild(resetIcon)
  2521.     resetDefaultButton.appendChild(document.createTextNode("Reset Default"))
  2522.     resetDefaultButton.style.cssText = `
  2523.     background-color: #6366f1;
  2524.     color: white;
  2525.     border: none;
  2526.     border-radius: 6px;
  2527.     padding: 8px 16px;
  2528.     font-weight: bold;
  2529.     cursor: pointer;
  2530.     flex: 1;
  2531.     display: flex;
  2532.     align-items: center;
  2533.     justify-content: center;
  2534.     text-align: center;
  2535.     transition: background-color 0.2s;
  2536.     `
  2537.     buttonsContainer.appendChild(clearCacheButton)
  2538.     buttonsContainer.appendChild(resetDefaultButton)
  2539.  
  2540.     clearCacheButton.addEventListener("mouseenter", () => {
  2541.       clearCacheButton.style.backgroundColor = "#dc2626"
  2542.     })
  2543.     clearCacheButton.addEventListener("mouseleave", () => {
  2544.       clearCacheButton.style.backgroundColor = "#ef4444"
  2545.     })
  2546.  
  2547.     resetDefaultButton.addEventListener("mouseenter", () => {
  2548.       resetDefaultButton.style.backgroundColor = "#5b56f4"
  2549.     })
  2550.     resetDefaultButton.addEventListener("mouseleave", () => {
  2551.       resetDefaultButton.style.backgroundColor = "#6366f1"
  2552.     })
  2553.     clearCacheButton.addEventListener("click", () => {
  2554.       createConfirmDialog("Are you sure about clearing the cache?", () => {
  2555.         cacheManager.clear()
  2556.  
  2557.         createInfoDialog("Cache has been successfully cleared.", "Clear Successful");
  2558.       });
  2559.     });;
  2560.  
  2561.     resetDefaultButton.addEventListener("click", () => {
  2562.       createConfirmDialog("Are you sure you want to reset all settings to default values?", () => {
  2563.         const currentSettings = getSettings()
  2564.         const preservedPatreonAuth = currentSettings.patreonAuth
  2565.         const preservedAuthToken = currentSettings.authToken
  2566.  
  2567.         const resetSettings = { ...defaultSettings }
  2568.         resetSettings.patreonAuth = preservedPatreonAuth
  2569.         resetSettings.authToken = preservedAuthToken
  2570.           saveSettings(resetSettings);
  2571.  
  2572.         startingBatchInput.value = defaultSettings.startingBatch;
  2573.  
  2574.         batchToggle.style.backgroundColor = defaultSettings.batchEnabled ? "#22c55e" : "#cbd5e1";
  2575.         batchToggleHandle.style.left = defaultSettings.batchEnabled ? "28px" : "2px";
  2576.  
  2577.         batchSizeGroup.style.display = defaultSettings.batchEnabled ? "flex" : "none";
  2578.         startingBatchGroup.style.display = defaultSettings.batchEnabled ? "flex" : "none";
  2579.         autoBatchGroup.style.display = defaultSettings.batchEnabled ? "flex" : "none";
  2580.  
  2581.         patreonAuthClearButton.style.display = preservedPatreonAuth ? "block" : "none";
  2582.         tokenClearButton.style.display = preservedAuthToken ? "block" : "none";
  2583.  
  2584.         const timelineTypeOptions = ["media", "timeline", "tweets", "with_replies"];
  2585.         const timelineTypeIndex = timelineTypeOptions.indexOf(defaultSettings.timelineType);
  2586.         const timelineTypeSlider = timelineTypeToggle.querySelector("div:first-child");
  2587.         const timelineTypeContainer = timelineTypeToggle.querySelector("div:last-child");
  2588.  
  2589.         if (timelineTypeSlider && timelineTypeContainer && timelineTypeIndex !== -1) {
  2590.           timelineTypeSlider.style.transform = `translateX(${timelineTypeIndex * 100}%)`;
  2591.           timelineTypeContainer.querySelectorAll("div").forEach((opt, i) => {
  2592.             opt.style.color = i === timelineTypeIndex ? "white" : "#64748b";
  2593.             const optIcon = opt.querySelector("svg");
  2594.             if (optIcon) {
  2595.               const optPaths = optIcon.querySelectorAll("path");
  2596.               optPaths.forEach((path) => {
  2597.                 path.setAttribute("fill", i === timelineTypeIndex ? "white" : "#64748b");
  2598.               });
  2599.             }
  2600.           });
  2601.         }
  2602.  
  2603.         const mediaTypeOptions = ["all", "image", "video", "gif"];
  2604.         const mediaTypeIndex = mediaTypeOptions.indexOf(defaultSettings.mediaType);
  2605.         const mediaTypeSlider = mediaTypeToggle.querySelector("div:first-child");
  2606.         const mediaTypeContainer = mediaTypeToggle.querySelector("div:last-child");
  2607.  
  2608.         if (mediaTypeSlider && mediaTypeContainer && mediaTypeIndex !== -1) {
  2609.           mediaTypeSlider.style.transform = `translateX(${mediaTypeIndex * 100}%)`;
  2610.           mediaTypeContainer.querySelectorAll("div").forEach((opt, i) => {
  2611.             opt.style.color = i === mediaTypeIndex ? "white" : "#64748b";
  2612.             const optIcon = opt.querySelector("svg");
  2613.             if (optIcon) {
  2614.               const optPaths = optIcon.querySelectorAll("path");
  2615.               optPaths.forEach((path) => {
  2616.                 path.setAttribute("fill", i === mediaTypeIndex ? "white" : "#64748b");
  2617.               });
  2618.             }
  2619.           });
  2620.         }
  2621.  
  2622.         const batchSizeIndex = batchSizes.indexOf(defaultSettings.batchSize);
  2623.         const batchSizeSlider = batchSizeToggle.querySelector("div:first-child");
  2624.         const batchSizeContainer = batchSizeToggle.querySelector("div:last-child");
  2625.  
  2626.         if (batchSizeSlider && batchSizeContainer && batchSizeIndex !== -1) {
  2627.           batchSizeSlider.style.transform = `translateX(${batchSizeIndex * 100}%)`;
  2628.           batchSizeContainer.querySelectorAll("div").forEach((opt, i) => {
  2629.             opt.style.color = i === batchSizeIndex ? "white" : "#64748b";
  2630.             const optIcon = opt.querySelector("svg");
  2631.             if (optIcon) {
  2632.               const optPaths = optIcon.querySelectorAll("path");
  2633.               optPaths.forEach((path) => {
  2634.                 path.setAttribute("fill", i === batchSizeIndex ? "white" : "#64748b");
  2635.               });
  2636.             }
  2637.           });
  2638.         }
  2639.  
  2640.         const cacheDurationIndex = cacheDurations.indexOf(defaultSettings.cacheDuration);
  2641.         const cacheDurationSlider = cacheDurationToggle.querySelector("div:first-child");
  2642.         const cacheDurationContainer = cacheDurationToggle.querySelector("div:last-child");
  2643.  
  2644.         if (cacheDurationSlider && cacheDurationContainer && cacheDurationIndex !== -1) {
  2645.           cacheDurationSlider.style.transform = `translateX(${cacheDurationIndex * 100}%)`;
  2646.           cacheDurationContainer.querySelectorAll("div").forEach((opt, i) => {
  2647.             opt.style.color = i === cacheDurationIndex ? "white" : "#64748b";
  2648.             const optIcon = opt.querySelector("svg");
  2649.             if (optIcon) {
  2650.               const optPaths = optIcon.querySelectorAll("path");
  2651.               optPaths.forEach((path) => {
  2652.                 path.setAttribute("fill", i === cacheDurationIndex ? "white" : "#64748b");
  2653.               });
  2654.             }
  2655.           });
  2656.         }
  2657.         const apiServerOptions = ["default", "backup"];
  2658.         const apiServerIndex = apiServerOptions.indexOf(defaultSettings.apiServer);
  2659.         const apiServerSlider = apiServerToggle.querySelector("div:first-child");
  2660.         const apiServerContainer = apiServerToggle.querySelector("div:last-child");
  2661.  
  2662.         if (apiServerSlider && apiServerContainer && apiServerIndex !== -1) {
  2663.           apiServerSlider.style.transform = `translateX(${apiServerIndex * 100}%)`;
  2664.           apiServerContainer.querySelectorAll("div").forEach((opt, i) => {
  2665.             opt.style.color = i === apiServerIndex ? "white" : "#64748b";
  2666.             const optIcon = opt.querySelector("svg");
  2667.             if (optIcon) {
  2668.               const optPaths = optIcon.querySelectorAll("path");
  2669.               optPaths.forEach((path) => {
  2670.                 path.setAttribute("fill", i === apiServerIndex ? "white" : "#64748b");
  2671.               });
  2672.             }
  2673.           });
  2674.         }
  2675.  
  2676.         darkThemeToggle.style.backgroundColor = defaultSettings.darkTheme ? "#22c55e" : "#cbd5e1";
  2677.         darkThemeToggleHandle.style.left = defaultSettings.darkTheme ? "28px" : "2px";
  2678.         settings.darkTheme = defaultSettings.darkTheme;
  2679.         updateTheme();
  2680.  
  2681.         const newMediaTypeLabel = getMediaTypeLabel(defaultSettings.mediaType).toLowerCase();
  2682.         const newFetchButtonText = defaultSettings.mediaType === "all"
  2683.           ? "Fetch Media"
  2684.           : `Fetch ${newMediaTypeLabel === "gif" ? "GIF" : newMediaTypeLabel.charAt(0).toUpperCase() + newMediaTypeLabel.slice(1)}`;
  2685.           fetchButton.innerHTML = "";
  2686.         const newFetchIcon = fetchIcon.cloneNode(true)
  2687.         fetchButton.appendChild(newFetchIcon)
  2688.         fetchButton.appendChild(document.createTextNode(newFetchButtonText))
  2689.         title.innerHTML = `Download ${getMediaTypeLabel(defaultSettings.mediaType)}: <span style="color: #0ea5e9">${username}</span>`;
  2690.  
  2691.         setTimeout(() => {
  2692.           createInfoDialog("Settings have been successfully reset to default values.", "Reset Successful");
  2693.         }, 100);
  2694.       })
  2695.     })
  2696.  
  2697.     const patreonLink = document.createElement("a")
  2698.     patreonLink.href = "https://www.patreon.com/exyezed"
  2699.     patreonLink.target = "_blank";
  2700.     patreonLink.style.cssText = `
  2701.         display: flex;
  2702.         align-items: center;
  2703.         justify-content: center;
  2704.         color: #64748b;
  2705.         text-decoration: none;
  2706.         margin-top: 16px;
  2707.         padding: 8px;
  2708.         border-radius: 8px;
  2709.         transition: background-color 0.2s, color 0.2s;
  2710.     `;
  2711.     patreonLink.innerHTML = createPatreonIcon().outerHTML + "Patreon Authentication";
  2712.     patreonLink.addEventListener("mouseenter", () => {
  2713.       patreonLink.style.backgroundColor = settings.darkTheme ? "#374151" : "#f1f5f9";
  2714.       patreonLink.style.color = "#0ea5e9";
  2715.     });
  2716.       patreonLink.addEventListener("mouseleave", () => {
  2717.       patreonLink.style.backgroundColor = "transparent";
  2718.       patreonLink.style.color = "#64748b";
  2719.     });
  2720.     
  2721.     const batchSizeStartingContainer = document.createElement("div")
  2722.     batchSizeStartingContainer.style.cssText = `
  2723.         display: flex;
  2724.         flex-direction: column;
  2725.         gap: 0px;
  2726.     `
  2727.     batchSizeStartingContainer.appendChild(batchSizeGroup)
  2728.     batchSizeStartingContainer.appendChild(startingBatchGroup)
  2729.     
  2730.     const mediaTimelineContainer = document.createElement("div")
  2731.     mediaTimelineContainer.style.cssText = `
  2732.         display: flex;
  2733.         flex-direction: column;
  2734.         gap: 0px;
  2735.     `
  2736.     mediaTimelineContainer.appendChild(mediaTypeGroup)
  2737.     mediaTimelineContainer.appendChild(timelineTypeGroup)
  2738.     
  2739.     fetchTabContent.appendChild(batchGroup);
  2740.     fetchTabContent.appendChild(autoBatchGroup);
  2741.     fetchTabContent.appendChild(batchSizeStartingContainer);
  2742.     fetchTabContent.appendChild(mediaTimelineContainer);
  2743.  
  2744.     authTabContent.appendChild(patreonAuthGroup);
  2745.     authTabContent.appendChild(tokenGroup);
  2746.     authTabContent.appendChild(patreonLink);
  2747.  
  2748.     advancedTabContent.appendChild(darkThemeGroup);
  2749.     
  2750.     apiServerGroup.style.marginTop = '16px';
  2751.     advancedTabContent.appendChild(apiServerGroup);
  2752.     
  2753.     cacheDurationGroup.style.marginTop = '0px';
  2754.     advancedTabContent.appendChild(cacheDurationGroup);
  2755.     
  2756.     buttonsContainer.style.marginTop = '16px';
  2757.     advancedTabContent.appendChild(buttonsContainer);
  2758.     
  2759.     function switchTab(activeTab, activeContent) {
  2760.       const allTabs = [fetchTab, authTab, advancedTab];
  2761.       const allContents = [fetchTabContent, authTabContent, advancedTabContent];
  2762.  
  2763.       allTabs.forEach(tab => {
  2764.         if (tab && tab.style) {
  2765.           tab.style.color = "#64748b";
  2766.           tab.style.borderBottom = "none";
  2767.         }
  2768.       });
  2769.  
  2770.       allContents.forEach(content => {
  2771.         if (content && content.style) {
  2772.           content.style.display = "none";
  2773.         }
  2774.       });
  2775.  
  2776.       if (activeTab && activeTab.style) {
  2777.         activeTab.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a";
  2778.         activeTab.style.borderBottom = "2px solid #0ea5e9";
  2779.       }
  2780.       if (activeContent && activeContent.style) {
  2781.         activeContent.style.display = "flex";
  2782.       }
  2783.     }    
  2784.     fetchTab.addEventListener("click", function() {
  2785.       switchTab(fetchTab, fetchTabContent);
  2786.     });
  2787.     authTab.addEventListener("click", function() {
  2788.       switchTab(authTab, authTabContent);
  2789.     });
  2790.     advancedTab.addEventListener("click", function() {
  2791.       switchTab(advancedTab, advancedTabContent);
  2792.     });
  2793.  
  2794.     const settingsForm = document.createElement("div");
  2795.     settingsForm.style.cssText = `
  2796.         display: flex;
  2797.         flex-direction: column;
  2798.     `;
  2799.         
  2800.     settingsForm.appendChild(settingsTabs);
  2801.     settingsForm.appendChild(fetchTabContent);
  2802.     settingsForm.appendChild(authTabContent);
  2803.     settingsForm.appendChild(advancedTabContent);
  2804.  
  2805.     settingsContent.appendChild(settingsForm);
  2806.  
  2807.     mainTab.addEventListener("click", function() {
  2808.       mainTab.style.borderBottom = "2px solid #0ea5e9"
  2809.       mainTab.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a"
  2810.       settingsTab.style.borderBottom = "none"
  2811.       settingsTab.style.color = "#64748b"
  2812.       mainContent.style.display = "block"
  2813.       settingsContent.style.display = "none"
  2814.     });
  2815.  
  2816.     settingsTab.addEventListener("click", function() {
  2817.       settingsTab.style.borderBottom = "2px solid #0ea5e9"
  2818.       settingsTab.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a"
  2819.       mainTab.style.borderBottom = "none"
  2820.       mainTab.style.color = "#64748b"
  2821.       settingsContent.style.display = "block"
  2822.       mainContent.style.display = "none"
  2823.  
  2824.       switchTab(fetchTab, fetchTabContent);
  2825.     });
  2826.  
  2827.     modalContent.appendChild(header)
  2828.     modalContent.appendChild(tabs)
  2829.     modalContent.appendChild(mainContent)
  2830.     modalContent.appendChild(settingsContent)
  2831.     modal.appendChild(modalContent);
  2832.  
  2833.     const mediaData = {
  2834.       username: username,
  2835.       currentPage: getSettings().startingBatch,
  2836.       mediaItems: [],
  2837.       allMediaItems: [],
  2838.       batchData: {},
  2839.       hasMore: false,
  2840.       downloading: false,
  2841.       totalDownloaded: 0,
  2842.       totalToDownload: 0,
  2843.       totalItems: 0,
  2844.       nextBatchClicked: false, 
  2845.     }
  2846.  
  2847.     function refreshInfoDisplays() {
  2848.       const isDark = getSettings().darkTheme
  2849.  
  2850.       if (infoContainer.innerHTML && mediaData.totalItems > 0) {
  2851.         const settings = getSettings()
  2852.         const mediaTypeLabel = getMediaTypeLabel(settings.mediaType)
  2853.  
  2854.         if (settings.batchEnabled && mediaData.mediaItems && mediaData.mediaItems.length > 0) {
  2855.           const accountIconHtml = createAccountIcon(isDark).outerHTML
  2856.           const mediaIconHtml = createMediaTypeIcon(settings.mediaType, isDark).outerHTML
  2857.           const totalItemsIconHtml = createTotalItemsIcon(isDark).outerHTML
  2858.  
  2859.           infoContainer.innerHTML = `
  2860.             <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${mediaData.username}</span></div>
  2861.             <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(mediaData.totalItems)}</span></div>
  2862.             <div style="margin-bottom: 8px; display: flex; align-items: center;">${totalItemsIconHtml}<strong style="margin-right: 6px;">Total Items:</strong><span>${formatNumber(mediaData.allMediaItems.length)}</span></div>
  2863.           `
  2864.         } else if (mediaData.allMediaItems && mediaData.allMediaItems.length > 0) {
  2865.           const accountIconHtml = createAccountIcon(isDark).outerHTML
  2866.           const mediaIconHtml = createMediaTypeIcon(settings.mediaType, isDark).outerHTML
  2867.           const totalZipIconHtml = createTotalZipIcon(isDark).outerHTML
  2868.           const currentPart = Math.floor(mediaData.allMediaItems.length / 500) + 1
  2869.  
  2870.           infoContainer.innerHTML = `
  2871.             <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${mediaData.username}</span></div>
  2872.             <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(mediaData.totalItems)}</span></div>
  2873.             <div style="margin-top: 8px; display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px;">Total ZIP ${currentPart === 1 ? 'File' : 'Files'}:</strong><span>${currentPart}</span></div>
  2874.           `
  2875.         }
  2876.       }
  2877.  
  2878.       if (infoContainer.innerHTML) {
  2879.         const accountIcons = infoContainer.querySelectorAll('svg[viewBox="0 0 24 24"]')
  2880.         accountIcons.forEach(icon => {
  2881.           icon.style.color = isDark ? "#ffffff" : "#64748b"
  2882.         })
  2883.  
  2884.         const mediaIcons = infoContainer.querySelectorAll('svg[viewBox="0 0 576 512"], svg[viewBox="0 0 512 512"], svg[viewBox="0 0 640 512"]')
  2885.         mediaIcons.forEach(icon => {
  2886.           icon.style.color = isDark ? "#ffffff" : "#64748b"
  2887.         })
  2888.  
  2889.         const totalIcons = infoContainer.querySelectorAll('svg[viewBox="0 0 448 512"]')
  2890.         totalIcons.forEach(icon => {
  2891.           icon.style.color = isDark ? "#ffffff" : "#64748b"
  2892.         })
  2893.       }
  2894.     }
  2895.  
  2896.     function updateBatchLabels() {
  2897.       const isDark = getSettings().darkTheme
  2898.       const settings = getSettings()
  2899.  
  2900.       if (currentBatchLabel && currentBatchLabel.innerHTML) {
  2901.         const currentBatchIconHtml = createCurrentBatchIcon(isDark).outerHTML
  2902.         currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Current Batch:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${mediaData.currentPage + 1}</span></div>`
  2903.       }
  2904.  
  2905.       if (totalBatchLabel && totalBatchLabel.innerHTML && mediaData.totalItems > 0) {
  2906.         const totalBatches = Math.ceil(mediaData.totalItems / settings.batchSize)
  2907.         const totalZipIconHtml = createTotalZipIcon(isDark).outerHTML
  2908.         totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Total ZIP ${totalBatches === 1 ? 'File' : 'Files'}:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${totalBatches}</span></div>`
  2909.       }
  2910.  
  2911.       if (currentBatchLabel && currentBatchLabel.innerHTML) {
  2912.         const batchIcons = currentBatchLabel.querySelectorAll('svg')
  2913.         batchIcons.forEach(icon => {
  2914.           icon.style.color = isDark ? "#ffffff" : "#64748b"
  2915.         })
  2916.       }
  2917.  
  2918.       if (totalBatchLabel && totalBatchLabel.innerHTML) {
  2919.         const zipIcons = totalBatchLabel.querySelectorAll('svg')
  2920.         zipIcons.forEach(icon => {
  2921.           icon.style.color = isDark ? "#ffffff" : "#64748b"
  2922.         })
  2923.       }
  2924.     }
  2925.  
  2926.     function updateTheme() {
  2927.       const isDark = getSettings().darkTheme
  2928.       modalContent.style.backgroundColor = isDark ? "#1f2937" : "#ffffff"
  2929.       modalContent.style.color = isDark ? "#f1f5f9" : "#334155"
  2930.       header.style.borderBottom = `1px solid ${isDark ? "#374151" : "#e2e8f0"}`
  2931.       title.style.color = isDark ? "#f1f5f9" : "#334155"
  2932.       closeButton.style.color = isDark ? "#f1f5f9" : "#0f172a"
  2933.       tabs.style.borderBottom = `1px solid ${isDark ? "#374151" : "#e2e8f0"}`
  2934.       mainTab.style.color = mainContent.style.display === "block" ? (isDark ? "#f1f5f9" : "#0f172a") : "#64748b"
  2935.       settingsTab.style.color = settingsContent.style.display === "block" ? (isDark ? "#f1f5f9" : "#0f172a") : "#64748b"
  2936.       infoContainer.style.backgroundColor = isDark ? "#374151" : "#f1f5f9"
  2937.       batchInfoContainer.style.backgroundColor = isDark ? "#374151" : "#f8fafc"
  2938.       batchInfoContainer.style.border = `1px solid ${isDark ? "#4b5563" : "#e2e8f0"}`
  2939.       settingsTabs.style.borderBottom = `1px solid ${isDark ? "#374151" : "#e2e8f0"}`
  2940.  
  2941.       const allSettingTabs = [fetchTab, authTab, advancedTab]
  2942.       allSettingTabs.forEach(tab => {
  2943.         if (tab.style.borderBottom.includes("solid")) {
  2944.             tab.style.color = isDark ? "#f1f5f9" : "#0f172a"
  2945.         }
  2946.       })
  2947.       patreonAuthLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2948.       patreonAuthInput.style.backgroundColor = isDark ? "#374151" : "#f1f5f9"
  2949.       autoBatchLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2950.       patreonAuthInput.style.color = isDark ? "#cbd5e1" : "#64748b"
  2951.       tokenLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2952.       tokenInput.style.backgroundColor = isDark ? "#374151" : "#f1f5f9"
  2953.       tokenInput.style.color = isDark ? "#cbd5e1" : "#64748b"
  2954.       apiServerLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2955.       batchLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2956.       batchSizeLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2957.       startingBatchLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2958.       startingBatchInput.style.backgroundColor = isDark ? "#374151" : "#f1f5f9"
  2959.       startingBatchInput.style.color = isDark ? "#cbd5e1" : "#64748b"
  2960.       timelineTypeLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2961.       mediaTypeLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2962.       concurrentLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2963.       cacheDurationLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2964.       darkThemeLabel.style.color = isDark ? "#f1f5f9" : "#334155"
  2965.       const toggleSwitches = [timelineTypeToggle, mediaTypeToggle, batchSizeToggle, concurrentToggle, cacheDurationToggle, apiServerToggle]
  2966.       toggleSwitches.forEach(toggle => {
  2967.         if (toggle) {
  2968.           toggle.style.backgroundColor = isDark ? "#374151" : "#f1f5f9"
  2969.         }
  2970.       })
  2971.  
  2972.       if (progressBar) {
  2973.         progressBar.style.backgroundColor = isDark ? "#374151" : "#f1f5f9"
  2974.       }
  2975.  
  2976.       if (currentBatchLabel) {
  2977.         currentBatchLabel.style.color = isDark ? "#ffffff" : "#475569"
  2978.       }
  2979.       if (totalBatchLabel) {
  2980.         totalBatchLabel.style.color = isDark ? "#ffffff" : "#475569"
  2981.       }
  2982.  
  2983.       refreshInfoDisplays()
  2984.  
  2985.       updateBatchLabels()
  2986.     }
  2987.  
  2988.     fetchButton.addEventListener("click", async () => {
  2989.       const settings = getSettings()
  2990.       if (!settings.authToken) {
  2991.         createAuthTokenPopup()
  2992.         return
  2993.       }
  2994.       if (!settings.patreonAuth) {
  2995.         createPatreonAuthPopup()
  2996.         return
  2997.       }
  2998.         if (settings.autoBatchEnabled && !autoBatchStarted) {
  2999.         autoBatchCancelled = false
  3000.         autoBatchStarted = true
  3001.         const batchNums = Object.keys(mediaData.batchData).map(Number)
  3002.         mediaData.currentPage = batchNums.length > 0 ? Math.max(...batchNums) + 1 : 0
  3003.       }
  3004.       if (!settings.autoBatchEnabled || (settings.autoBatchEnabled && !autoBatchStarted && Object.keys(mediaData.batchData).length === 0)) {
  3005.         infoContainer.style.display = "none"
  3006.         buttonContainer.style.display = "none"
  3007.         nextBatchButton.style.display = "none"
  3008.         prevBatchButton.style.display = "none"
  3009.         progressContainer.style.display = "none"
  3010.         if (settings.autoBatchEnabled) {
  3011.           autoBatchStarted = true
  3012.           mediaData.currentPage = 0
  3013.         }
  3014.       }
  3015.       fetchButton.disabled = true
  3016.       fetchButton.innerHTML = ""
  3017.       fetchButton.appendChild(document.createTextNode("Fetching..."))
  3018.  
  3019.       try {
  3020.         const cacheKey = `${settings.timelineType}_${settings.mediaType}_${username}_${mediaData.currentPage}_${settings.batchSize}_batch_${settings.batchEnabled}`
  3021.         let data = cacheManager.get(cacheKey)
  3022.  
  3023.         if (!data) {
  3024.           let url
  3025.           if (settings.batchEnabled) {
  3026.             url = `${getServiceBaseUrl()}/metadata/${settings.timelineType}/${settings.batchSize}/${mediaData.currentPage}/${settings.mediaType}/${username}/${settings.authToken}/${settings.patreonAuth || ""}`
  3027.           } else {
  3028.             url = `${getServiceBaseUrl()}/metadata/${settings.timelineType}/${settings.mediaType}/${username}/${settings.authToken}/${settings.patreonAuth || ""}`
  3029.           }
  3030.  
  3031.           data = await fetchData(url)
  3032.           if (data && data.timeline && data.timeline.length > 0) {
  3033.             cacheManager.set(cacheKey, data, true)
  3034.           }
  3035.         }
  3036.         if (data.timeline && data.timeline.length > 0) {
  3037.           mediaData.mediaItems = data.timeline
  3038.           mediaData.hasMore = data.metadata.has_more
  3039.           mediaData.totalItems = data.total_urls
  3040.  
  3041.           mediaData.batchData[mediaData.currentPage] = [...data.timeline]
  3042.  
  3043.           const currentBatchKeys = Object.keys(mediaData.batchData).map(Number)
  3044.           for (const batchNum of currentBatchKeys) {
  3045.             if (batchNum > mediaData.currentPage) {
  3046.               delete mediaData.batchData[batchNum]
  3047.             }
  3048.           }
  3049.           mediaData.allMediaItems = []
  3050.           const maxBatch = Math.max(...Object.keys(mediaData.batchData).map(Number))
  3051.           for (let i = 0; i <= maxBatch; i++) {
  3052.             if (mediaData.batchData[i]) {
  3053.               mediaData.allMediaItems = [...mediaData.allMediaItems, ...mediaData.batchData[i]]
  3054.             }
  3055.           }
  3056.  
  3057.           const mediaTypeLabel = getMediaTypeLabel(settings.mediaType)
  3058.  
  3059.           if (settings.batchEnabled) {
  3060.           const accountIconHtml = createAccountIcon(settings.darkTheme).outerHTML
  3061.             const mediaIconHtml = createMediaTypeIcon(settings.mediaType, settings.darkTheme).outerHTML
  3062.             const totalItemsIconHtml = createTotalItemsIcon(settings.darkTheme).outerHTML
  3063.             infoContainer.innerHTML = `
  3064.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${data.account_info.name}</span></div>
  3065.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(data.total_urls)}</span></div>
  3066.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${totalItemsIconHtml}<strong style="margin-right: 6px;">Total Items:</strong><span>${formatNumber(mediaData.allMediaItems.length)}</span></div>
  3067.             `
  3068.               const currentBatchIconHtml = createCurrentBatchIcon(settings.darkTheme).outerHTML
  3069.             currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Current Batch:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${mediaData.currentPage + 1}</span></div>`
  3070.  
  3071.             const totalBatches = Math.ceil(data.total_urls / settings.batchSize)
  3072.             const totalZipIconHtml = createTotalZipIcon(settings.darkTheme).outerHTML
  3073.             totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Total ZIP ${totalBatches === 1 ? 'File' : 'Files'}:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${totalBatches}</span></div>`
  3074.             batchInfoContainer.style.display = "flex"
  3075.             batchNavContainer.style.display = "flex"
  3076.           } else {
  3077.             const currentPart = Math.floor(mediaData.allMediaItems.length / 500) + 1
  3078.             const accountIconHtml = createAccountIcon(settings.darkTheme).outerHTML
  3079.             const mediaIconHtml = createMediaTypeIcon(settings.mediaType, settings.darkTheme).outerHTML
  3080.             const totalZipIconHtml = createTotalZipIcon(settings.darkTheme).outerHTML
  3081.             infoContainer.innerHTML = `
  3082.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${data.account_info.name}</span></div>
  3083.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(data.total_urls)}</span></div>
  3084.               <div style="margin-top: 8px; display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px;">Total ZIP ${currentPart === 1 ? 'File' : 'Files'}:</strong><span>${currentPart}</span></div>
  3085.             `
  3086.  
  3087.             batchInfoContainer.style.display = "none"
  3088.             batchNavContainer.style.display = "none"
  3089.           }
  3090.  
  3091.           infoContainer.style.display = "block"
  3092.  
  3093.           if (settings.batchEnabled) {
  3094.             buttonContainer.style.display = "none"
  3095.           } else {
  3096.             buttonContainer.innerHTML = ""
  3097.             buttonContainer.appendChild(downloadButton)
  3098.             buttonContainer.style.display = "block"
  3099.           }
  3100.           if (settings.batchEnabled && mediaData.hasMore) {
  3101.             nextBatchButton.style.display = "block"
  3102.           }
  3103.             if (settings.batchEnabled && mediaData.currentPage > getSettings().startingBatch) {
  3104.             prevBatchButton.style.display = "block"
  3105.           }
  3106.  
  3107.           reassignDownloadHandlers()
  3108.  
  3109.           fetchButton.disabled = false
  3110.           const currentMediaTypeLabel = getMediaTypeLabel(settings.mediaType).toLowerCase()
  3111.  
  3112.           const updatedFetchButtonText =
  3113.             settings.autoBatchEnabled
  3114.               ? "Auto Fetch"
  3115.               : (settings.mediaType === "all"
  3116.                   ? "Fetch Media"
  3117.                   : `Fetch ${currentMediaTypeLabel === "gif" ? "GIF" : currentMediaTypeLabel.charAt(0).toUpperCase() + currentMediaTypeLabel.slice(1)}`)
  3118.  
  3119.           fetchButton.innerHTML = ""
  3120.           let updatedFetchIcon1 = fetchIcon.cloneNode(true)
  3121.           fetchButton.appendChild(updatedFetchIcon1)
  3122.           fetchButton.appendChild(document.createTextNode(updatedFetchButtonText))
  3123.  
  3124.           console.log('Fetch success - Next Batch Debug:', {
  3125.             hasMore: mediaData.hasMore,
  3126.             nextBatchClicked: mediaData.nextBatchClicked,
  3127.             shouldShowPopup: !mediaData.hasMore && mediaData.nextBatchClicked,
  3128.             autoBatchEnabled: settings.autoBatchEnabled
  3129.           });
  3130.  
  3131.           if (!mediaData.hasMore && mediaData.nextBatchClicked && !settings.autoBatchEnabled) {
  3132.             console.log('Showing next batch completion popup after successful fetch');
  3133.             createInfoDialog("Next batch has completed! All available batches have been fetched.");
  3134.           }
  3135.  
  3136.           if (mediaData.nextBatchClicked) {
  3137.             console.log('Resetting nextBatchClicked flag after successful fetch');
  3138.             mediaData.nextBatchClicked = false;
  3139.           }
  3140.  
  3141.           if (settings.autoBatchEnabled && !autoBatchCancelled) {
  3142.             prevBatchButton.style.display = "none"
  3143.             nextBatchButton.style.display = "none"
  3144.             stopFetchButton.style.display = "block"
  3145.             if (mediaData.hasMore) {
  3146.               setTimeout(() => {
  3147.                 if (settings.autoBatchEnabled && !autoBatchCancelled) {
  3148.                   mediaData.currentPage++
  3149.                   fetchButton.click()
  3150.                 }
  3151.               }, 1000)
  3152.             } else {
  3153.               stopFetchButton.style.display = "none"
  3154.               prevBatchButton.style.display = mediaData.currentPage > 0 ? "block" : "none"
  3155.               nextBatchButton.style.display = "none"
  3156.               autoBatchStarted = false
  3157.  
  3158.               createInfoDialog("Auto fetch has completed! All available batches have been fetched.")
  3159.             }
  3160.           }
  3161.         } else {
  3162.           console.log('No media found branch:', {
  3163.             nextBatchClicked: mediaData.nextBatchClicked
  3164.           });
  3165.  
  3166.           if (mediaData.nextBatchClicked) {
  3167.             console.log('Showing next batch completion popup from no media found branch');
  3168.             createInfoDialog("Next batch has completed! All available batches have been fetched.");
  3169.             mediaData.nextBatchClicked = false; 
  3170.           }
  3171.  
  3172.           infoContainer.innerHTML = '<div style="color: #ef4444;">No media found, invalid token, or invalid Patreon authentication.</div>'
  3173.           infoContainer.style.display = "block"
  3174.           fetchButton.disabled = false
  3175.           const currentMediaTypeLabel = getMediaTypeLabel(settings.mediaType).toLowerCase()
  3176.           const updatedFetchButtonText =
  3177.             settings.mediaType === "all"
  3178.               ? "Fetch Media"
  3179.               : `Fetch ${currentMediaTypeLabel === "gif" ? "GIF" : currentMediaTypeLabel.charAt(0).toUpperCase() + currentMediaTypeLabel.slice(1)}`
  3180.  
  3181.           fetchButton.innerHTML = ""
  3182.           let updatedFetchIcon2 = fetchIcon.cloneNode(true)
  3183.           fetchButton.appendChild(updatedFetchIcon2)
  3184.           fetchButton.appendChild(document.createTextNode(updatedFetchButtonText))
  3185.         }
  3186.       } catch (error) {
  3187.         infoContainer.innerHTML = `<div style="color: #ef4444;">Error: ${error.message}</div>`
  3188.         infoContainer.style.display = "block"
  3189.         fetchButton.disabled = false
  3190.  
  3191.         if (mediaData.currentPage > getSettings().startingBatch) {
  3192.           prevBatchButton.style.display = "block"
  3193.         }
  3194.  
  3195.         const currentMediaTypeLabel = getMediaTypeLabel(settings.mediaType).toLowerCase()
  3196.  
  3197.         const updatedFetchButtonText =
  3198.           settings.mediaType === "all"
  3199.             ? "Fetch Media"
  3200.             : `Fetch ${currentMediaTypeLabel === "gif" ? "GIF" : currentMediaTypeLabel.charAt(0).toUpperCase() + currentMediaTypeLabel.slice(1)}`
  3201.  
  3202.         fetchButton.innerHTML = ""
  3203.         let updatedFetchIcon3 = fetchIcon.cloneNode(true)
  3204.         fetchButton.appendChild(updatedFetchIcon3)
  3205.         fetchButton.appendChild(document.createTextNode(updatedFetchButtonText))
  3206.       }
  3207.     });
  3208.  
  3209.       nextBatchButton.addEventListener("click", () => {
  3210.       console.log('Next Batch Button clicked, setting flag to true');
  3211.       mediaData.nextBatchClicked = true; 
  3212.       mediaData.currentPage++
  3213.  
  3214.       autoBatchCancelled = true
  3215.       autoBatchStarted = false
  3216.  
  3217.       const settings = getSettings()
  3218.       const cacheKey = `${settings.timelineType}_${settings.mediaType}_${username}_${mediaData.currentPage}_${settings.batchSize}_batch_${settings.batchEnabled}`
  3219.       const cachedData = cacheManager.get(cacheKey)
  3220.  
  3221.       if (cachedData && cachedData.timeline && cachedData.timeline.length > 0) {
  3222.         mediaData.mediaItems = cachedData.timeline
  3223.         mediaData.hasMore = cachedData.metadata.has_more
  3224.         mediaData.totalItems = cachedData.total_urls
  3225.  
  3226.         mediaData.batchData[mediaData.currentPage] = [...cachedData.timeline]
  3227.  
  3228.         mediaData.allMediaItems = []
  3229.         const maxBatch = Math.max(...Object.keys(mediaData.batchData).map(Number))
  3230.         for (let i = 0; i <= maxBatch; i++) {
  3231.           if (mediaData.batchData[i]) {
  3232.             mediaData.allMediaItems = [...mediaData.allMediaItems, ...mediaData.batchData[i]]
  3233.           }
  3234.         }
  3235.  
  3236.         refreshInfoDisplays()
  3237.  
  3238.         if (settings.batchEnabled) {
  3239.           prevBatchButton.style.display = mediaData.currentPage > 0 ? "block" : "none"
  3240.           nextBatchButton.style.display = mediaData.hasMore ? "block" : "none"
  3241.           infoContainer.style.display = "block"
  3242.           buttonContainer.style.display = "none"
  3243.           batchInfoContainer.style.display = "flex"
  3244.           batchNavContainer.style.display = "flex"
  3245.         }
  3246.  
  3247.         const currentBatchIconHtml = createCurrentBatchIcon(settings.darkTheme).outerHTML
  3248.         currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Current Batch:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${mediaData.currentPage + 1}</span></div>`
  3249.         const totalBatches = Math.ceil(cachedData.total_urls / settings.batchSize)
  3250.         const totalZipIconHtml = createTotalZipIcon(settings.darkTheme).outerHTML
  3251.         totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Total ZIP ${totalBatches === 1 ? 'File' : 'Files'}:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${totalBatches}</span></div>`
  3252.         console.log('Next Batch Debug:', {
  3253.           hasMore: mediaData.hasMore,
  3254.           nextBatchClicked: mediaData.nextBatchClicked,
  3255.           shouldShowPopup: !mediaData.hasMore && mediaData.nextBatchClicked
  3256.         });
  3257.  
  3258.         if (!mediaData.hasMore && mediaData.nextBatchClicked) {
  3259.           console.log('Showing next batch completion popup');
  3260.           createInfoDialog("Next batch has completed! All available batches have been fetched.");
  3261.         }
  3262.         console.log('Resetting nextBatchClicked flag to false');
  3263.         mediaData.nextBatchClicked = false;
  3264.  
  3265.         reassignDownloadHandlers()
  3266.       } else {
  3267.         const wasAutoBatchEnabled = getSettings().autoBatchEnabled;
  3268.  
  3269.         if (wasAutoBatchEnabled) {
  3270.           const newSettings = getSettings();
  3271.           newSettings.autoBatchEnabled = false;
  3272.           saveSettings(newSettings);
  3273.         }
  3274.  
  3275.         fetchButton.click();
  3276.  
  3277.         if (wasAutoBatchEnabled) {
  3278.           setTimeout(() => {
  3279.             const newSettings = getSettings();
  3280.             newSettings.autoBatchEnabled = true;
  3281.             saveSettings(newSettings);
  3282.  
  3283.             autoBatchCancelled = true;
  3284.             autoBatchStarted = false;
  3285.           }, 100);
  3286.         }
  3287.       }
  3288.     })
  3289.  
  3290.     prevBatchButton.addEventListener("click", () => {
  3291.       if (mediaData.currentPage > 0) {
  3292.         mediaData.currentPage--
  3293.  
  3294.         autoBatchCancelled = true
  3295.         autoBatchStarted = false
  3296.  
  3297.         const settings = getSettings()
  3298.         const cacheKey = `${settings.timelineType}_${settings.mediaType}_${username}_${mediaData.currentPage}_${settings.batchSize}_batch_${settings.batchEnabled}`
  3299.         let data = cacheManager.get(cacheKey)
  3300.  
  3301.         if (data && data.timeline && data.timeline.length > 0) {
  3302.           mediaData.mediaItems = data.timeline
  3303.           mediaData.hasMore = data.metadata.has_more
  3304.           mediaData.totalItems = data.total_urls
  3305.  
  3306.           mediaData.batchData[mediaData.currentPage] = [...data.timeline]
  3307.  
  3308.           const currentBatchKeys = Object.keys(mediaData.batchData).map(Number)
  3309.           for (const batchNum of currentBatchKeys) {
  3310.             if (batchNum > mediaData.currentPage) {
  3311.               delete mediaData.batchData[batchNum]
  3312.             }
  3313.           }
  3314.           mediaData.allMediaItems = []
  3315.           const maxBatch = Math.max(...Object.keys(mediaData.batchData).map(Number))
  3316.           for (let i = 0; i <= maxBatch; i++) {
  3317.             if (mediaData.batchData[i]) {
  3318.               mediaData.allMediaItems = [...mediaData.allMediaItems, ...mediaData.batchData[i]]
  3319.             }
  3320.           }
  3321.  
  3322.           const mediaTypeLabel = getMediaTypeLabel(settings.mediaType)
  3323.  
  3324.           if (settings.batchEnabled) {
  3325.             const accountIconHtml = createAccountIcon(settings.darkTheme).outerHTML
  3326.             const mediaIconHtml = createMediaTypeIcon(settings.mediaType, settings.darkTheme).outerHTML
  3327.             const totalItemsIconHtml = createTotalItemsIcon(settings.darkTheme).outerHTML
  3328.             infoContainer.innerHTML = `
  3329.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${data.account_info.name}</span></div>
  3330.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(data.total_urls)}</span></div>
  3331.               <div style="margin-bottom: 8px; display: flex; align-items: center;">${totalItemsIconHtml}<strong style="margin-right: 6px;">Total Items:</strong><span>${formatNumber(mediaData.allMediaItems.length)}</span></div>
  3332.             `
  3333.  
  3334.             const currentBatchIconHtml = createCurrentBatchIcon(settings.darkTheme).outerHTML
  3335.             currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Current Batch:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${mediaData.currentPage + 1}</span></div>`
  3336.  
  3337.             const totalBatches = Math.ceil(data.total_urls / settings.batchSize)
  3338.             const totalZipIconHtml = createTotalZipIcon(settings.darkTheme).outerHTML
  3339.             totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${settings.darkTheme ? '#ffffff' : '#475569'};">Total ZIP ${totalBatches === 1 ? 'File' : 'Files'}:</strong><span style="color: ${settings.darkTheme ? '#ffffff' : '#475569'};">${totalBatches}</span></div>`
  3340.             batchInfoContainer.style.display = "flex"
  3341.             batchNavContainer.style.display = "flex"
  3342.           }
  3343.  
  3344.           infoContainer.style.display = "block"
  3345.  
  3346.           if (settings.batchEnabled) {
  3347.             buttonContainer.style.display = "none"
  3348.           } else {
  3349.             buttonContainer.innerHTML = ""
  3350.             buttonContainer.appendChild(downloadButton)
  3351.             buttonContainer.style.display = "block"
  3352.           }
  3353.           if (settings.batchEnabled && mediaData.hasMore) {
  3354.             nextBatchButton.style.display = "block"
  3355.           }
  3356.           if (settings.batchEnabled && mediaData.currentPage > 0) {
  3357.             prevBatchButton.style.display = "block"
  3358.           }
  3359.             reassignDownloadHandlers()
  3360.         } else {
  3361.           fetchButton.click()
  3362.         }
  3363.       }
  3364.     })
  3365.  
  3366.     function chunkMediaItems(items) {
  3367.       const chunks = []
  3368.       for (let i = 0; i < items.length; i += 500) {
  3369.         chunks.push(items.slice(i, i + 500))
  3370.       }
  3371.       return chunks
  3372.     }
  3373.  
  3374.     function reassignDownloadHandlers() {
  3375.       const settings = getSettings()
  3376.       if (settings.batchEnabled) {
  3377.         downloadCurrentButton.onclick = () => downloadMedia(false)
  3378.         downloadAllButton.onclick = () => downloadMedia(true)
  3379.       }
  3380.     }
  3381.  
  3382.     async function downloadMedia(downloadAll) {
  3383.       if (mediaData.downloading) return
  3384.  
  3385.       mediaData.downloading = true
  3386.  
  3387.       const settings = getSettings()
  3388.       const timestamp = getCurrentTimestamp()
  3389.  
  3390.       let itemsToDownload
  3391.       if (downloadAll) {
  3392.         itemsToDownload = mediaData.allMediaItems
  3393.       } else {
  3394.         itemsToDownload = mediaData.mediaItems
  3395.       }
  3396.  
  3397.       mediaData.totalToDownload = itemsToDownload.length
  3398.       mediaData.totalDownloaded = 0
  3399.  
  3400.       progressText.textContent = `Downloading 0/${formatNumber(mediaData.totalToDownload)}`
  3401.       progressFill.style.width = "0%"
  3402.       progressContainer.style.display = "block"
  3403.  
  3404.       fetchButton.disabled = true
  3405.       if (settings.batchEnabled) {
  3406.         downloadCurrentButton.disabled = true
  3407.         downloadAllButton.disabled = true
  3408.       } else {
  3409.         downloadButton.disabled = true
  3410.       }
  3411.       nextBatchButton.disabled = true
  3412.  
  3413.       const chunks = chunkMediaItems(itemsToDownload)
  3414.  
  3415.       for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
  3416.         const chunk = chunks[chunkIndex]
  3417.  
  3418.         if (chunk.length === 1 && chunks.length === 1) {
  3419.           try {
  3420.             const item = chunk[0]
  3421.             const formattedDate = formatDate(item.date)
  3422.             const baseFilename = `${username}_${formattedDate}_${item.tweet_id}`
  3423.             const fileExtension = item.type === "photo" ? "jpg" : "mp4"
  3424.  
  3425.             const filename = `${baseFilename}.${fileExtension}`
  3426.  
  3427.             progressText.textContent = `Downloading 0/1`
  3428.  
  3429.             const blob = await fetchBinary(item.url)
  3430.  
  3431.             const downloadLink = document.createElement("a")
  3432.             downloadLink.href = URL.createObjectURL(blob)
  3433.             downloadLink.download = filename
  3434.             document.body.appendChild(downloadLink)
  3435.             downloadLink.click()
  3436.             document.body.removeChild(downloadLink)
  3437.  
  3438.             mediaData.totalDownloaded = 1
  3439.             progressText.textContent = `Downloading 1/1`
  3440.             progressFill.style.width = "100%"
  3441.  
  3442.             continue
  3443.           } catch (error) {}
  3444.         }
  3445.  
  3446.         const zip = new JSZip()
  3447.  
  3448.         const hasImages = chunk.some((item) => item.type === "photo")
  3449.         const hasVideos = chunk.some((item) => item.type === "video")
  3450.         const hasGifs = chunk.some((item) => item.type === "gif")
  3451.  
  3452.         let imageFolder, videoFolder, gifFolder
  3453.         if (settings.mediaType === "all") {
  3454.           if (hasImages) imageFolder = zip.folder("image")
  3455.           if (hasVideos) videoFolder = zip.folder("video")
  3456.           if (hasGifs) gifFolder = zip.folder("gif")
  3457.         }
  3458.  
  3459.         const filenameMap = {}
  3460.  
  3461.         const downloadInBatches = async (items, batchSize) => {
  3462.           for (let i = 0; i < items.length; i += batchSize) {
  3463.             const batch = items.slice(i, i + batchSize)
  3464.  
  3465.             const downloadPromises = batch.map(async (item) => {
  3466.               try {
  3467.                 const formattedDate = formatDate(item.date)
  3468.                 let baseFilename = `${username}_${formattedDate}_${item.tweet_id}`
  3469.  
  3470.                 if (filenameMap[baseFilename] !== undefined) {
  3471.                   filenameMap[baseFilename]++
  3472.                   baseFilename = `${baseFilename}_${String(filenameMap[baseFilename]).padStart(2, "0")}`
  3473.                 } else {
  3474.                   filenameMap[baseFilename] = 0
  3475.                 }
  3476.  
  3477.                 const fileExtension = item.type === "photo" ? "jpg" : "mp4"
  3478.                 const filename = `${baseFilename}.${fileExtension}`
  3479.  
  3480.                 const blob = await fetchBinary(item.url)
  3481.  
  3482.                 if (settings.mediaType === "all") {
  3483.                   if (item.type === "photo") {
  3484.                     imageFolder.file(filename, blob)
  3485.                   } else if (item.type === "video") {
  3486.                     videoFolder.file(filename, blob)
  3487.                   } else if (item.type === "gif") {
  3488.                     gifFolder.file(filename, blob)
  3489.                   }
  3490.                 } else {
  3491.                   zip.file(filename, blob)
  3492.                 }
  3493.  
  3494.                 mediaData.totalDownloaded++
  3495.                 const completedCount = mediaData.totalDownloaded
  3496.                 progressText.textContent = `Downloading ${formatNumber(completedCount)}/${formatNumber(mediaData.totalToDownload)}`
  3497.                 progressFill.style.width = `${(completedCount / mediaData.totalToDownload) * 100}%`
  3498.  
  3499.               } catch (error) {
  3500.                 console.error("Error downloading item:", error)
  3501.                 mediaData.totalDownloaded++
  3502.               }
  3503.             })
  3504.  
  3505.             await Promise.all(downloadPromises)
  3506.           }
  3507.         }
  3508.  
  3509.         await downloadInBatches(chunk, settings.concurrentDownloads)
  3510.  
  3511.         progressText.textContent = `Creating ZIP file ${chunkIndex + 1}/${chunks.length}...`
  3512.  
  3513.         try {
  3514.           const zipBlob = await zip.generateAsync({ type: "blob" })
  3515.  
  3516.           let zipFilename
  3517.           if (chunks.length === 1 && chunk.length < 500) {
  3518.             zipFilename = `${username}_${timestamp}.zip`
  3519.           } else if (settings.batchEnabled && !downloadAll) {
  3520.             zipFilename = `${username}_${timestamp}_part_${String(mediaData.currentPage + 1).padStart(2, "0")}.zip`
  3521.           } else {
  3522.             zipFilename = `${username}_${timestamp}_part_${String(chunkIndex + 1).padStart(2, "0")}.zip`
  3523.           }
  3524.  
  3525.           const downloadLink = document.createElement("a")
  3526.           downloadLink.href = URL.createObjectURL(zipBlob)
  3527.           downloadLink.download = zipFilename
  3528.           document.body.appendChild(downloadLink)
  3529.           downloadLink.click()
  3530.           document.body.removeChild(downloadLink)
  3531.         } catch (error) {
  3532.           progressText.textContent = `Error creating ZIP ${chunkIndex + 1}: ${error.message}`
  3533.         }
  3534.       }
  3535.       mediaData.downloading = false
  3536.       progressContainer.style.display = "none"
  3537.       fetchButton.disabled = false
  3538.       if (settings.batchEnabled) {
  3539.         downloadCurrentButton.disabled = false
  3540.         downloadAllButton.disabled = false
  3541.         reassignDownloadHandlers()
  3542.       } else {
  3543.         downloadButton.disabled = false
  3544.       }
  3545.       nextBatchButton.disabled = false
  3546.       createInfoDialog("All media downloaded successfully.", "Download Complete")
  3547.       return
  3548.     }
  3549.  
  3550.     document.body.appendChild(modal)
  3551.   }
  3552.  
  3553.   function extractUsername() {
  3554.     const pathParts = window.location.pathname.split("/").filter((part) => part)
  3555.     if (pathParts.length > 0) {
  3556.       return pathParts[0]
  3557.     }
  3558.     return null
  3559.   }
  3560.  
  3561.   function insertDownloadIcon() {
  3562.     const usernameDivs = document.querySelectorAll('[data-testid="UserName"]')
  3563.  
  3564.     usernameDivs.forEach((usernameDiv) => {
  3565.       if (!usernameDiv.querySelector(".download-icon")) {
  3566.         const username = extractUsername()
  3567.         if (!username) return
  3568.  
  3569.         const verifiedButton = usernameDiv
  3570.           .querySelector('[aria-label*="verified"], [aria-label*="Verified"]')
  3571.           ?.closest("button")
  3572.  
  3573.         const targetElement = verifiedButton
  3574.           ? verifiedButton.parentElement
  3575.           : usernameDiv.querySelector(".css-1jxf684")?.closest("span")
  3576.  
  3577.         if (targetElement) {
  3578.           const downloadIcon = createDownloadIcon()
  3579.  
  3580.           const iconDiv = document.createElement("div")
  3581.           iconDiv.className = "download-icon css-175oi2r r-1awozwy r-xoduu5"
  3582.           iconDiv.style.cssText = `
  3583.                     display: inline-flex;
  3584.                     align-items: center;
  3585.                     margin-left: 6px;
  3586.                     margin-right: 6px;
  3587.                     gap: 6px;
  3588.                     padding: 0 3px;
  3589.                     transition: transform 0.2s, color 0.2s;
  3590.                 `
  3591.           iconDiv.appendChild(downloadIcon)
  3592.  
  3593.           iconDiv.addEventListener("mouseenter", () => {
  3594.             iconDiv.style.transform = "scale(1.1)"
  3595.             iconDiv.style.color = "#0ea5e9"
  3596.           })
  3597.  
  3598.           iconDiv.addEventListener("mouseleave", () => {
  3599.             iconDiv.style.transform = "scale(1)"
  3600.             iconDiv.style.color = ""
  3601.           })
  3602.  
  3603.           iconDiv.addEventListener("click", (e) => {
  3604.             e.stopPropagation()
  3605.             createModal(username)
  3606.           })
  3607.  
  3608.           const wrapperDiv = document.createElement("div")
  3609.           wrapperDiv.style.cssText = `
  3610.                     display: inline-flex;
  3611.                     align-items: center;
  3612.                     gap: 4px;
  3613.                 `
  3614.           wrapperDiv.appendChild(iconDiv)
  3615.           targetElement.parentNode.insertBefore(wrapperDiv, targetElement.nextSibling)
  3616.         }
  3617.       }
  3618.     })
  3619.   }
  3620.  
  3621.   insertDownloadIcon()
  3622.  
  3623.   function checkForUserNameElement() {
  3624.     const usernameDivs = document.querySelectorAll('[data-testid="UserName"]')
  3625.     if (usernameDivs.length > 0) {
  3626.       insertDownloadIcon()
  3627.     }
  3628.   }
  3629.  
  3630.   setInterval(checkForUserNameElement, 100)
  3631.  
  3632.   let lastUrl = location.href
  3633.   let lastUsername = extractUsername()
  3634.  
  3635.   function checkForChanges() {
  3636.     const currentUrl = location.href
  3637.     const currentUsername = extractUsername()
  3638.  
  3639.     if (currentUrl !== lastUrl || currentUsername !== lastUsername) {
  3640.       lastUrl = currentUrl
  3641.       lastUsername = currentUsername
  3642.  
  3643.       document.querySelectorAll(".download-icon").forEach((icon) => {
  3644.         const wrapper = icon.closest("div[style*='display: inline-flex']")
  3645.         if (wrapper) {
  3646.           wrapper.remove()
  3647.         }
  3648.       })
  3649.  
  3650.       setTimeout(insertDownloadIcon, 50)
  3651.     }
  3652.   }
  3653.  
  3654.   const observer = new MutationObserver(() => {
  3655.     checkForChanges()
  3656.     checkForUserNameElement()
  3657.   })
  3658.  
  3659.   observer.observe(document.body, {
  3660.     childList: true,
  3661.     subtree: true,
  3662.     attributes: true,
  3663.     characterData: true,
  3664.   })
  3665.  
  3666.   setInterval(checkForChanges, 300)
  3667.  
  3668.   const originalPushState = history.pushState
  3669.   const originalReplaceState = history.replaceState
  3670.  
  3671.   history.pushState = function () {
  3672.     originalPushState.apply(this, arguments)
  3673.     checkForChanges()
  3674.     insertDownloadIcon()
  3675.   }
  3676.  
  3677.   history.replaceState = function () {
  3678.     originalReplaceState.apply(this, arguments)
  3679.     checkForChanges()
  3680.     insertDownloadIcon()
  3681.   }
  3682.  
  3683.   window.addEventListener("popstate", () => {
  3684.     checkForChanges()
  3685.     insertDownloadIcon()
  3686.   })
  3687. })()

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址