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.5
  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 Script requires payment for full functionality
  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:
  64. "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",
  65. PRIMARY_PATH:
  66. "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",
  67. VIEWBOX: "0 0 512 512",
  68. },
  69. FETCH: {
  70. 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",
  71. VIEWBOX: "0 0 448 512",
  72. },
  73. ACCOUNT: {
  74. 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",
  75. VIEWBOX: "0 0 512 512",
  76. },
  77. TOTAL: {
  78. 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",
  79. VIEWBOX: "0 0 384 512",
  80. },
  81. BATCH: {
  82. 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",
  83. VIEWBOX: "0 0 384 512",
  84. },
  85. ZIP: {
  86. 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",
  87. VIEWBOX: "0 0 384 512",
  88. },
  89. MEDIA_TYPE: {
  90. ALL: {
  91. 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",
  92. VIEWBOX: "0 0 640 512",
  93. },
  94. IMAGE: {
  95. 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",
  96. VIEWBOX: "0 0 512 512",
  97. },
  98. VIDEO: {
  99. 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",
  100. VIEWBOX: "0 0 512 512",
  101. },
  102. GIF: {
  103. 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",
  104. VIEWBOX: "0 0 576 512",
  105. },
  106. MEDIA: {
  107. 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",
  108. VIEWBOX: "0 0 576 512",
  109. },
  110. POST: {
  111. 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",
  112. VIEWBOX: "0 0 512 512",
  113. },
  114. TWEETS: {
  115. 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",
  116. VIEWBOX: "0 0 640 512",
  117. },
  118. REPLIES: {
  119. 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",
  120. VIEWBOX: "0 0 512 512",
  121. },
  122. },
  123. };
  124.  
  125. const defaultSettings = {
  126. patreonAuth: "",
  127. authToken: "",
  128. batchEnabled: false,
  129. autoBatchEnabled: false,
  130. batchSize: 100,
  131. startingBatch: 0,
  132. timelineType: "media",
  133. mediaType: "all",
  134. concurrentDownloads: 50,
  135. cacheDuration: 360,
  136. apiServer: "default",
  137. darkTheme: false,
  138. };
  139. const batchSizes = [25, 50, 100, 200];
  140. const cacheDurations = [60, 120, 180, 240, 300, 360, 720, 1440];
  141.  
  142. function getSettings() {
  143. return {
  144. patreonAuth: GM_getValue("patreonAuth", defaultSettings.patreonAuth),
  145. authToken: GM_getValue("authToken", defaultSettings.authToken),
  146. batchEnabled: GM_getValue("batchEnabled", defaultSettings.batchEnabled),
  147. autoBatchEnabled: GM_getValue(
  148. "autoBatchEnabled",
  149. defaultSettings.autoBatchEnabled
  150. ),
  151. batchSize: GM_getValue("batchSize", defaultSettings.batchSize),
  152. startingBatch: GM_getValue(
  153. "startingBatch",
  154. defaultSettings.startingBatch
  155. ),
  156. timelineType: GM_getValue("timelineType", defaultSettings.timelineType),
  157. mediaType: GM_getValue("mediaType", defaultSettings.mediaType),
  158. concurrentDownloads: GM_getValue(
  159. "concurrentDownloads",
  160. defaultSettings.concurrentDownloads
  161. ),
  162. cacheDuration: GM_getValue(
  163. "cacheDuration",
  164. defaultSettings.cacheDuration
  165. ),
  166. apiServer: GM_getValue("apiServer", defaultSettings.apiServer),
  167. darkTheme: GM_getValue("darkTheme", defaultSettings.darkTheme),
  168. };
  169. }
  170.  
  171. function saveSettings(settings) {
  172. GM_setValue("patreonAuth", settings.patreonAuth);
  173. GM_setValue("authToken", settings.authToken);
  174. GM_setValue("batchEnabled", settings.batchEnabled);
  175. GM_setValue("autoBatchEnabled", settings.autoBatchEnabled);
  176. GM_setValue("batchSize", settings.batchSize);
  177. GM_setValue("startingBatch", settings.startingBatch);
  178. GM_setValue("timelineType", settings.timelineType);
  179. GM_setValue("mediaType", settings.mediaType);
  180. GM_setValue("concurrentDownloads", settings.concurrentDownloads);
  181. GM_setValue("cacheDuration", settings.cacheDuration);
  182. GM_setValue("apiServer", settings.apiServer);
  183. GM_setValue("darkTheme", settings.darkTheme);
  184. }
  185.  
  186. function getServiceBaseUrl() {
  187. const settings = getSettings();
  188. return settings.apiServer === "default"
  189. ? API_URLS.DEFAULT
  190. : API_URLS.BACKUP;
  191. }
  192.  
  193. function formatNumber(num) {
  194. return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  195. }
  196.  
  197. const cacheManager = {
  198. set: (key, data, success = true) => {
  199. if (!success) return;
  200.  
  201. const settings = getSettings();
  202. const cacheItem = {
  203. data: data,
  204. timestamp: Date.now(),
  205. expiry: Date.now() + settings.cacheDuration * 60 * 1000,
  206. };
  207. localStorage.setItem(`twitter_dl_${key}`, JSON.stringify(cacheItem));
  208. },
  209.  
  210. get: (key) => {
  211. const cacheItem = localStorage.getItem(`twitter_dl_${key}`);
  212. if (!cacheItem) return null;
  213.  
  214. try {
  215. const parsed = JSON.parse(cacheItem);
  216. if (Date.now() > parsed.expiry) {
  217. localStorage.removeItem(`twitter_dl_${key}`);
  218. return null;
  219. }
  220. return parsed.data;
  221. } catch (e) {
  222. localStorage.removeItem(`twitter_dl_${key}`);
  223. return null;
  224. }
  225. },
  226.  
  227. clear: () => {
  228. const keysToRemove = [];
  229. for (let i = 0; i < localStorage.length; i++) {
  230. const key = localStorage.key(i);
  231. if (key.startsWith("twitter_dl_")) {
  232. keysToRemove.push(key);
  233. }
  234. }
  235.  
  236. keysToRemove.forEach((key) => localStorage.removeItem(key));
  237. },
  238. };
  239.  
  240. function createDownloadIcon() {
  241. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  242. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  243. svg.setAttribute("viewBox", ICONS.DOWNLOAD.VIEWBOX);
  244. svg.setAttribute("width", "18");
  245. svg.setAttribute("height", "18");
  246. svg.style.verticalAlign = "middle";
  247. svg.style.cursor = "pointer";
  248.  
  249. const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
  250. const style = document.createElementNS(
  251. "http://www.w3.org/2000/svg",
  252. "style"
  253. );
  254. style.textContent = ".fa-secondary{opacity:.4}";
  255. defs.appendChild(style);
  256. svg.appendChild(defs);
  257.  
  258. const secondaryPath = document.createElementNS(
  259. "http://www.w3.org/2000/svg",
  260. "path"
  261. );
  262. secondaryPath.setAttribute("class", "fa-secondary");
  263. secondaryPath.setAttribute("fill", "currentColor");
  264. secondaryPath.setAttribute("d", ICONS.DOWNLOAD.SECONDARY_PATH);
  265. svg.appendChild(secondaryPath);
  266.  
  267. const primaryPath = document.createElementNS(
  268. "http://www.w3.org/2000/svg",
  269. "path"
  270. );
  271. primaryPath.setAttribute("class", "fa-primary");
  272. primaryPath.setAttribute("fill", "currentColor");
  273. primaryPath.setAttribute("d", ICONS.DOWNLOAD.PRIMARY_PATH);
  274. svg.appendChild(primaryPath);
  275.  
  276. return svg;
  277. }
  278.  
  279. function createPatreonIcon() {
  280. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  281. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  282. svg.setAttribute("viewBox", ICONS.PATREON.VIEWBOX);
  283. svg.setAttribute("width", "18");
  284. svg.setAttribute("height", "18");
  285. svg.style.verticalAlign = "middle";
  286. svg.style.marginRight = "8px";
  287.  
  288. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  289. path.setAttribute("fill", "currentColor");
  290. path.setAttribute("d", ICONS.PATREON.PATH);
  291. svg.appendChild(path);
  292.  
  293. return svg;
  294. }
  295.  
  296. function createInfoIcon() {
  297. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  298. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  299. svg.setAttribute("viewBox", ICONS.INFO.VIEWBOX);
  300. svg.setAttribute("width", "16");
  301. svg.setAttribute("height", "16");
  302. svg.style.marginLeft = "8px";
  303. svg.style.cursor = "pointer";
  304. svg.style.color = "#64748b";
  305. svg.style.transition = "color 0.2s ease";
  306.  
  307. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  308. path.setAttribute("fill", "currentColor");
  309. path.setAttribute("d", ICONS.INFO.PATH);
  310. svg.appendChild(path);
  311.  
  312. svg.addEventListener("mouseenter", () => {
  313. svg.style.color = "#0ea5e9";
  314. });
  315.  
  316. svg.addEventListener("mouseleave", () => {
  317. svg.style.color = "#64748b";
  318. });
  319.  
  320. return svg;
  321. }
  322.  
  323. function createInfoTooltip(message) {
  324. let activeTooltip = null;
  325.  
  326. function showTooltip(e) {
  327. if (activeTooltip) {
  328. document.body.removeChild(activeTooltip);
  329. }
  330.  
  331. const tooltip = document.createElement("div");
  332. tooltip.textContent = message;
  333. tooltip.style.cssText = `
  334. position: fixed;
  335. background-color: #1f2937;
  336. color: white;
  337. padding: 8px 12px;
  338. border-radius: 6px;
  339. font-size: 12px;
  340. line-height: 1.4;
  341. max-width: 300px;
  342. z-index: 10003;
  343. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  344. pointer-events: none;
  345. white-space: normal;
  346. word-wrap: break-word;
  347. `;
  348.  
  349. document.body.appendChild(tooltip);
  350. activeTooltip = tooltip;
  351.  
  352. const rect = e.target.getBoundingClientRect();
  353. const tooltipRect = tooltip.getBoundingClientRect();
  354.  
  355. let top = rect.bottom + 8;
  356. let left = rect.left + rect.width / 2 - tooltipRect.width / 2;
  357.  
  358. if (left < 8) left = 8;
  359. if (left + tooltipRect.width > window.innerWidth - 8) {
  360. left = window.innerWidth - tooltipRect.width - 8;
  361. }
  362. if (top + tooltipRect.height > window.innerHeight - 8) {
  363. top = rect.top - tooltipRect.height - 8;
  364. }
  365.  
  366. tooltip.style.top = top + "px";
  367. tooltip.style.left = left + "px";
  368. }
  369.  
  370. function hideTooltip() {
  371. if (activeTooltip) {
  372. document.body.removeChild(activeTooltip);
  373. activeTooltip = null;
  374. }
  375. }
  376.  
  377. return { showTooltip, hideTooltip };
  378. }
  379.  
  380. function createAccountIcon(isDarkTheme = false) {
  381. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  382. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  383. svg.setAttribute("viewBox", ICONS.ACCOUNT.VIEWBOX);
  384. svg.setAttribute("width", "12");
  385. svg.setAttribute("height", "12");
  386. svg.style.marginRight = "6px";
  387. svg.style.color = isDarkTheme ? "#ffffff" : "#64748b";
  388. svg.style.verticalAlign = "middle";
  389. svg.style.display = "inline-block";
  390.  
  391. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  392. path.setAttribute("fill", "currentColor");
  393. path.setAttribute("d", ICONS.ACCOUNT.PATH);
  394. svg.appendChild(path);
  395.  
  396. return svg;
  397. }
  398.  
  399. function createTotalItemsIcon(isDarkTheme = false) {
  400. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  401. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  402. svg.setAttribute("viewBox", ICONS.TOTAL.VIEWBOX);
  403. svg.setAttribute("width", "12");
  404. svg.setAttribute("height", "12");
  405. svg.style.marginRight = "6px";
  406. svg.style.color = isDarkTheme ? "#ffffff" : "#64748b";
  407. svg.style.verticalAlign = "middle";
  408. svg.style.display = "inline-block";
  409.  
  410. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  411. path.setAttribute("fill", "currentColor");
  412. path.setAttribute("d", ICONS.TOTAL.PATH);
  413. svg.appendChild(path);
  414.  
  415. return svg;
  416. }
  417.  
  418. function createCurrentBatchIcon(isDarkTheme = false) {
  419. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  420. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  421. svg.setAttribute("viewBox", ICONS.BATCH.VIEWBOX);
  422. svg.setAttribute("width", "12");
  423. svg.setAttribute("height", "12");
  424. svg.style.marginRight = "6px";
  425. svg.style.color = isDarkTheme ? "#ffffff" : "#64748b";
  426. svg.style.verticalAlign = "middle";
  427. svg.style.display = "inline-block";
  428.  
  429. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  430. path.setAttribute("fill", "currentColor");
  431. path.setAttribute("d", ICONS.BATCH.PATH);
  432. svg.appendChild(path);
  433.  
  434. return svg;
  435. }
  436.  
  437. function createTotalZipIcon(isDarkTheme = false) {
  438. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  439. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  440. svg.setAttribute("viewBox", ICONS.ZIP.VIEWBOX);
  441. svg.setAttribute("width", "12");
  442. svg.setAttribute("height", "12");
  443. svg.style.marginRight = "6px";
  444. svg.style.color = isDarkTheme ? "#ffffff" : "#64748b";
  445. svg.style.verticalAlign = "middle";
  446. svg.style.display = "inline-block";
  447.  
  448. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  449. path.setAttribute("fill", "currentColor");
  450. path.setAttribute("d", ICONS.ZIP.PATH);
  451. svg.appendChild(path);
  452.  
  453. return svg;
  454. }
  455.  
  456. function createMediaTypeIcon(mediaType, isDarkTheme = false) {
  457. let iconData;
  458. switch (mediaType) {
  459. case "image":
  460. iconData = ICONS.MEDIA_TYPE.IMAGE;
  461. break;
  462. case "video":
  463. iconData = ICONS.MEDIA_TYPE.VIDEO;
  464. break;
  465. case "gif":
  466. iconData = ICONS.MEDIA_TYPE.GIF;
  467. break;
  468. default:
  469. iconData = ICONS.MEDIA_TYPE.ALL;
  470. }
  471.  
  472. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  473. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  474. svg.setAttribute("viewBox", iconData.VIEWBOX);
  475. svg.setAttribute("width", "12");
  476. svg.setAttribute("height", "12");
  477. svg.style.marginRight = "6px";
  478. svg.style.color = isDarkTheme ? "#ffffff" : "#64748b";
  479. svg.style.verticalAlign = "middle";
  480. svg.style.display = "inline-block";
  481.  
  482. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  483. path.setAttribute("fill", "currentColor");
  484. path.setAttribute("d", iconData.PATH);
  485. svg.appendChild(path);
  486.  
  487. return svg;
  488. }
  489.  
  490. function createTimelineTypeIcon(timelineType, isDarkTheme = false) {
  491. let iconData;
  492. switch (timelineType) {
  493. case "media":
  494. iconData = ICONS.MEDIA_TYPE.MEDIA;
  495. break;
  496. case "timeline":
  497. iconData = ICONS.MEDIA_TYPE.POST;
  498. break;
  499. case "tweets":
  500. iconData = ICONS.MEDIA_TYPE.TWEETS;
  501. break;
  502. case "with_replies":
  503. iconData = ICONS.MEDIA_TYPE.REPLIES;
  504. break;
  505. default:
  506. iconData = ICONS.MEDIA_TYPE.MEDIA;
  507. }
  508.  
  509. const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  510. svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  511. svg.setAttribute("viewBox", iconData.VIEWBOX);
  512. svg.setAttribute("width", "16");
  513. svg.setAttribute("height", "16");
  514. svg.style.marginRight = "6px";
  515. svg.style.color = isDarkTheme ? "#ffffff" : "#64748b";
  516. svg.style.verticalAlign = "middle";
  517. svg.style.display = "inline-block";
  518.  
  519. const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  520. path.setAttribute("fill", "currentColor");
  521. path.setAttribute("d", iconData.PATH);
  522. svg.appendChild(path);
  523.  
  524. return svg;
  525. }
  526.  
  527. function createAuthTokenPopup() {
  528. const settings = getSettings();
  529. const overlay = document.createElement("div");
  530. overlay.style.cssText = `
  531. position: fixed;
  532. top: 0;
  533. left: 0;
  534. width: 100%;
  535. height: 100%;
  536. background-color: rgba(0, 0, 0, 0.35);
  537. backdrop-filter: blur(2.5px);
  538. display: flex;
  539. justify-content: center;
  540. align-items: center;
  541. z-index: 10001;
  542. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  543. `;
  544.  
  545. const popup = document.createElement("div");
  546. popup.style.cssText = `
  547. background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  548. color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  549. border-radius: 16px;
  550. width: 300px;
  551. max-width: 90%;
  552. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  553. overflow: hidden;
  554. `;
  555.  
  556. const header = document.createElement("div");
  557. header.style.cssText = `
  558. padding: 16px;
  559. border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  560. font-weight: bold;
  561. font-size: 16px;
  562. text-align: center;
  563. background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  564. `;
  565. header.textContent = "Authentication Required";
  566.  
  567. const content = document.createElement("div");
  568. content.style.cssText = `
  569. padding: 16px;
  570. text-align: center;
  571. `;
  572.  
  573. const authLink = document.createElement("a");
  574. authLink.href = "https://www.patreon.com/posts/127206894";
  575. authLink.target = "_blank";
  576. authLink.textContent = "How to Obtain Auth Token";
  577. authLink.style.cssText = `
  578. color: #0ea5e9;
  579. text-decoration: none;
  580. cursor: pointer;
  581. `;
  582. content.appendChild(authLink);
  583.  
  584. const buttonContainer = document.createElement("div");
  585. buttonContainer.style.cssText = `
  586. padding: 16px;
  587. display: flex;
  588. justify-content: center;
  589. border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  590. `;
  591.  
  592. const okButton = document.createElement("button");
  593. okButton.style.cssText = `
  594. background-color: #0ea5e9;
  595. color: white;
  596. border: none;
  597. border-radius: 6px;
  598. padding: 8px 24px;
  599. font-weight: bold;
  600. cursor: pointer;
  601. transition: background-color 0.2s;
  602. `;
  603. okButton.textContent = "OK";
  604. okButton.addEventListener("mouseenter", () => {
  605. okButton.style.backgroundColor = "#0284c7";
  606. });
  607. okButton.addEventListener("mouseleave", () => {
  608. okButton.style.backgroundColor = "#0ea5e9";
  609. });
  610. okButton.onclick = () => {
  611. document.body.removeChild(overlay);
  612. };
  613.  
  614. buttonContainer.appendChild(okButton);
  615. popup.appendChild(header);
  616. popup.appendChild(content);
  617. popup.appendChild(buttonContainer);
  618. overlay.appendChild(popup);
  619. document.body.appendChild(overlay);
  620. return overlay;
  621. }
  622.  
  623. function createPatreonAuthPopup() {
  624. const settings = getSettings();
  625. const overlay = document.createElement("div");
  626. overlay.style.cssText = `
  627. position: fixed;
  628. top: 0;
  629. left: 0;
  630. width: 100%;
  631. height: 100%;
  632. background-color: rgba(0, 0, 0, 0.35);
  633. backdrop-filter: blur(2.5px);
  634. display: flex;
  635. justify-content: center;
  636. align-items: center;
  637. z-index: 10001;
  638. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  639. `;
  640.  
  641. const popup = document.createElement("div");
  642. popup.style.cssText = `
  643. background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  644. color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  645. border-radius: 16px;
  646. width: 320px;
  647. max-width: 90%;
  648. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  649. overflow: hidden;
  650. `;
  651.  
  652. const header = document.createElement("div");
  653. header.style.cssText = `
  654. padding: 16px;
  655. border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  656. font-weight: bold;
  657. font-size: 16px;
  658. text-align: center;
  659. background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  660. `;
  661. header.textContent = "Patreon Authentication Required";
  662.  
  663. const content = document.createElement("div");
  664. content.style.cssText = `
  665. padding: 16px;
  666. text-align: center;
  667. `;
  668.  
  669. const message = document.createElement("p");
  670. message.style.cssText = `
  671. margin-bottom: 16px;
  672. line-height: 1.5;
  673. `;
  674. message.textContent =
  675. "Please enter your Patreon authentication code. This feature requires a paid membership to access.";
  676. content.appendChild(message);
  677.  
  678. const patreonButton = document.createElement("a");
  679. patreonButton.href = "https://www.patreon.com/exyezed";
  680. patreonButton.target = "_blank";
  681. patreonButton.style.cssText = `
  682. display: flex;
  683. align-items: center;
  684. justify-content: center;
  685. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  686. color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  687. text-decoration: none;
  688. padding: 10px 16px;
  689. border-radius: 8px;
  690. margin-top: 8px;
  691. transition: background-color 0.2s;
  692. `;
  693. patreonButton.innerHTML =
  694. createPatreonIcon().outerHTML + "Join Patreon Membership";
  695. patreonButton.addEventListener("mouseenter", () => {
  696. patreonButton.style.backgroundColor = settings.darkTheme
  697. ? "#4b5563"
  698. : "#e2e8f0";
  699. });
  700. patreonButton.addEventListener("mouseleave", () => {
  701. patreonButton.style.backgroundColor = settings.darkTheme
  702. ? "#374151"
  703. : "#f1f5f9";
  704. });
  705. content.appendChild(patreonButton);
  706.  
  707. const buttonContainer = document.createElement("div");
  708. buttonContainer.style.cssText = `
  709. padding: 16px;
  710. display: flex;
  711. justify-content: center;
  712. border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  713. `;
  714.  
  715. const okButton = document.createElement("button");
  716. okButton.style.cssText = `
  717. background-color: #0ea5e9;
  718. color: white;
  719. border: none;
  720. border-radius: 6px;
  721. padding: 8px 24px;
  722. font-weight: bold;
  723. cursor: pointer;
  724. transition: background-color 0.2s;
  725. `;
  726. okButton.textContent = "OK";
  727. okButton.addEventListener("mouseenter", () => {
  728. okButton.style.backgroundColor = "#0284c7";
  729. });
  730. okButton.addEventListener("mouseleave", () => {
  731. okButton.style.backgroundColor = "#0ea5e9";
  732. });
  733. okButton.onclick = () => {
  734. document.body.removeChild(overlay);
  735. };
  736.  
  737. buttonContainer.appendChild(okButton);
  738. popup.appendChild(header);
  739. popup.appendChild(content);
  740. popup.appendChild(buttonContainer);
  741. overlay.appendChild(popup);
  742.  
  743. document.body.appendChild(overlay);
  744. return overlay;
  745. }
  746.  
  747. function createInfoDialog(message, title = "Information") {
  748. const settings = getSettings();
  749. const overlay = document.createElement("div");
  750. overlay.style.cssText = `
  751. position: fixed;
  752. top: 0;
  753. left: 0;
  754. width: 100%;
  755. height: 100%;
  756. background-color: rgba(0, 0, 0, 0.35);
  757. backdrop-filter: blur(2.5px);
  758. display: flex;
  759. justify-content: center;
  760. align-items: center;
  761. z-index: 10001;
  762. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  763. `;
  764.  
  765. const dialog = document.createElement("div");
  766. dialog.style.cssText = `
  767. background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  768. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  769. border-radius: 16px;
  770. width: 300px;
  771. max-width: 90%;
  772. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  773. overflow: hidden;
  774. `;
  775.  
  776. const header = document.createElement("div");
  777. header.style.cssText = `
  778. padding: 16px;
  779. border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  780. font-weight: bold;
  781. font-size: 16px;
  782. text-align: center;
  783. background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  784. `;
  785. header.textContent = title;
  786.  
  787. const content = document.createElement("div");
  788. content.style.cssText = `
  789. padding: 20px 16px;
  790. text-align: center;
  791. line-height: 1.5;
  792. `;
  793. content.textContent = message;
  794.  
  795. const buttonContainer = document.createElement("div");
  796. buttonContainer.style.cssText = `
  797. padding: 16px;
  798. display: flex;
  799. justify-content: center;
  800. border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  801. `;
  802.  
  803. const okButton = document.createElement("button");
  804. okButton.style.cssText = `
  805. background-color: #22c55e;
  806. color: white;
  807. border: none;
  808. border-radius: 6px;
  809. padding: 8px 24px;
  810. font-weight: bold;
  811. cursor: pointer;
  812. transition: background-color 0.2s;
  813. `;
  814. okButton.textContent = "OK";
  815. okButton.addEventListener("mouseenter", () => {
  816. okButton.style.backgroundColor = "#16a34a";
  817. });
  818. okButton.addEventListener("mouseleave", () => {
  819. okButton.style.backgroundColor = "#22c55e";
  820. });
  821. okButton.onclick = () => {
  822. document.body.removeChild(overlay);
  823. };
  824.  
  825. buttonContainer.appendChild(okButton);
  826. dialog.appendChild(header);
  827. dialog.appendChild(content);
  828. dialog.appendChild(buttonContainer);
  829. overlay.appendChild(dialog);
  830.  
  831. document.body.appendChild(overlay);
  832. return overlay;
  833. }
  834.  
  835. function createConfirmDialog(message, onConfirm, onCancel) {
  836. const settings = getSettings();
  837. const overlay = document.createElement("div");
  838. overlay.style.cssText = `
  839. position: fixed;
  840. top: 0;
  841. left: 0;
  842. width: 100%;
  843. height: 100%;
  844. background-color: rgba(0, 0, 0, 0.35);
  845. backdrop-filter: blur(2.5px);
  846. display: flex;
  847. justify-content: center;
  848. align-items: center;
  849. z-index: 10001;
  850. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  851. `;
  852.  
  853. const dialog = document.createElement("div");
  854. dialog.style.cssText = `
  855. background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  856. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  857. border-radius: 16px;
  858. width: 300px;
  859. max-width: 90%;
  860. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  861. overflow: hidden;
  862. `;
  863.  
  864. const header = document.createElement("div");
  865. header.style.cssText = `
  866. padding: 16px;
  867. border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  868. font-weight: bold;
  869. font-size: 16px;
  870. text-align: center;
  871. background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  872. `;
  873. header.textContent = "Confirmation";
  874.  
  875. const content = document.createElement("div");
  876. content.style.cssText = `
  877. padding: 16px;
  878. text-align: center;
  879. `;
  880. content.textContent = message;
  881.  
  882. const buttons = document.createElement("div");
  883. buttons.style.cssText = `
  884. display: flex;
  885. padding: 16px;
  886. border-top: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  887. `;
  888.  
  889. const cancelButton = document.createElement("button");
  890. cancelButton.style.cssText = `
  891. flex: 1;
  892. background-color: ${settings.darkTheme ? "#374151" : "#94a3b8"};
  893. color: white;
  894. border: none;
  895. border-radius: 6px;
  896. padding: 8px 16px;
  897. margin-right: 8px;
  898. font-weight: bold;
  899. cursor: pointer;
  900. text-align: center;
  901. transition: background-color 0.2s;
  902. `;
  903. cancelButton.textContent = "No";
  904. cancelButton.addEventListener("mouseenter", () => {
  905. cancelButton.style.backgroundColor = settings.darkTheme
  906. ? "#4b5563"
  907. : "#64748b";
  908. });
  909. cancelButton.addEventListener("mouseleave", () => {
  910. cancelButton.style.backgroundColor = settings.darkTheme
  911. ? "#374151"
  912. : "#94a3b8";
  913. });
  914. cancelButton.onclick = () => {
  915. document.body.removeChild(overlay);
  916. if (onCancel) onCancel();
  917. };
  918.  
  919. const confirmButton = document.createElement("button");
  920. confirmButton.style.cssText = `
  921. flex: 1;
  922. background-color: #ef4444;
  923. color: white;
  924. border: none;
  925. border-radius: 6px;
  926. padding: 8px 16px;
  927. font-weight: bold;
  928. cursor: pointer;
  929. text-align: center;
  930. transition: background-color 0.2s;
  931. `;
  932. confirmButton.textContent = "Yes";
  933. confirmButton.addEventListener("mouseenter", () => {
  934. confirmButton.style.backgroundColor = "#dc2626";
  935. });
  936. confirmButton.addEventListener("mouseleave", () => {
  937. confirmButton.style.backgroundColor = "#ef4444";
  938. });
  939. confirmButton.onclick = () => {
  940. document.body.removeChild(overlay);
  941. if (onConfirm) onConfirm();
  942. };
  943.  
  944. buttons.appendChild(cancelButton);
  945. buttons.appendChild(confirmButton);
  946.  
  947. dialog.appendChild(header);
  948. dialog.appendChild(content);
  949. dialog.appendChild(buttons);
  950. overlay.appendChild(dialog);
  951.  
  952. document.body.appendChild(overlay);
  953. }
  954.  
  955. function formatDate(dateString) {
  956. const date = new Date(dateString);
  957. const year = date.getFullYear();
  958. const month = String(date.getMonth() + 1).padStart(2, "0");
  959. const day = String(date.getDate()).padStart(2, "0");
  960. const hours = String(date.getHours()).padStart(2, "0");
  961. const minutes = String(date.getMinutes()).padStart(2, "0");
  962. const seconds = String(date.getSeconds()).padStart(2, "0");
  963.  
  964. return `${year}${month}${day}_${hours}${minutes}${seconds}`;
  965. }
  966.  
  967. function getCurrentTimestamp() {
  968. const now = new Date();
  969. const year = now.getFullYear();
  970. const month = String(now.getMonth() + 1).padStart(2, "0");
  971. const day = String(now.getDate()).padStart(2, "0");
  972. const hours = String(now.getHours()).padStart(2, "0");
  973. const minutes = String(now.getMinutes()).padStart(2, "0");
  974. const seconds = String(now.getSeconds()).padStart(2, "0");
  975.  
  976. return `${year}${month}${day}_${hours}${minutes}${seconds}`;
  977. }
  978.  
  979. function fetchData(url) {
  980. return new Promise((resolve, reject) => {
  981. GM_xmlhttpRequest({
  982. method: "GET",
  983. url: url,
  984. responseType: "json",
  985. onload: (response) => {
  986. if (response.status >= 200 && response.status < 300) {
  987. resolve(response.response);
  988. } else {
  989. reject(new Error(`Request failed with status ${response.status}`));
  990. }
  991. },
  992. onerror: (error) => {
  993. reject(
  994. new Error(`Network error: ${error?.message || "Unknown error"}`)
  995. );
  996. },
  997. ontimeout: () => {
  998. reject(new Error("Request timed out"));
  999. },
  1000. });
  1001. });
  1002. }
  1003.  
  1004. function fetchBinary(url) {
  1005. return new Promise((resolve, reject) => {
  1006. GM_xmlhttpRequest({
  1007. method: "GET",
  1008. url: url,
  1009. responseType: "blob",
  1010. onload: (response) => {
  1011. if (response.status >= 200 && response.status < 300) {
  1012. resolve(response.response);
  1013. } else {
  1014. reject(new Error(`Request failed with status ${response.status}`));
  1015. }
  1016. },
  1017. onerror: () => {
  1018. reject(new Error("Network error"));
  1019. },
  1020. });
  1021. });
  1022. }
  1023.  
  1024. function getMediaTypeLabel(mediaType) {
  1025. switch (mediaType) {
  1026. case "image":
  1027. return "Image";
  1028. case "video":
  1029. return "Video";
  1030. case "gif":
  1031. return "GIF";
  1032. default:
  1033. return "Media";
  1034. }
  1035. }
  1036.  
  1037. function createToggleSwitch(options, selectedValue, onChange) {
  1038. const settings = getSettings();
  1039. const toggleWrapper = document.createElement("div");
  1040. toggleWrapper.style.cssText = `
  1041. position: relative;
  1042. height: 40px;
  1043. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1044. border-radius: 8px;
  1045. padding: 0;
  1046. cursor: pointer;
  1047. width: 100%;
  1048. margin-bottom: 16px;
  1049. overflow: hidden;
  1050. `;
  1051.  
  1052. const toggleSlider = document.createElement("div");
  1053. toggleSlider.style.cssText = `
  1054. position: absolute;
  1055. height: 100%;
  1056. background-color: #0ea5e9;
  1057. border-radius: 8px;
  1058. transition: transform 0.3s ease, width 0.3s ease;
  1059. z-index: 1;
  1060. `;
  1061.  
  1062. const optionsContainer = document.createElement("div");
  1063. optionsContainer.style.cssText = `
  1064. position: relative;
  1065. display: flex;
  1066. height: 100%;
  1067. z-index: 2;
  1068. width: 100%;
  1069. `;
  1070.  
  1071. const selectedIndex = options.findIndex(
  1072. (option) => option.value === selectedValue
  1073. );
  1074. const optionWidth = 100 / options.length;
  1075. toggleSlider.style.width = `${optionWidth}%`;
  1076. toggleSlider.style.transform = `translateX(${selectedIndex * 100}%)`;
  1077. options.forEach((option, index) => {
  1078. const optionElement = document.createElement("div");
  1079. optionElement.style.cssText = `
  1080. flex: 1;
  1081. display: flex;
  1082. align-items: center;
  1083. justify-content: center;
  1084. font-size: 14px;
  1085. transition: color 0.3s ease;
  1086. color: ${option.value === selectedValue ? "white" : "#64748b"};
  1087. cursor: pointer;
  1088. user-select: none;
  1089. text-align: center;
  1090. height: 100%;
  1091. padding: 0 4px;
  1092. `;
  1093.  
  1094. if (option.icon) {
  1095. const iconContainer = document.createElement("span");
  1096. iconContainer.style.cssText = `
  1097. display: flex;
  1098. align-items: center;
  1099. justify-content: center;
  1100. margin-right: 6px;
  1101. `;
  1102.  
  1103. const iconClone = option.icon.cloneNode(true);
  1104.  
  1105. const paths = iconClone.querySelectorAll("path");
  1106. paths.forEach((path) => {
  1107. path.setAttribute(
  1108. "fill",
  1109. option.value === selectedValue ? "white" : "#64748b"
  1110. );
  1111. });
  1112.  
  1113. iconContainer.appendChild(iconClone);
  1114. optionElement.appendChild(iconContainer);
  1115. }
  1116.  
  1117. const text = document.createElement("span");
  1118. text.textContent = option.label;
  1119. text.style.cssText = `
  1120. display: inline-block;
  1121. text-align: center;
  1122. `;
  1123. optionElement.appendChild(text);
  1124.  
  1125. optionElement.addEventListener("click", (e) => {
  1126. e.stopPropagation();
  1127. onChange(option.value);
  1128.  
  1129. toggleSlider.style.transform = `translateX(${index * 100}%)`;
  1130.  
  1131. optionsContainer.querySelectorAll("div").forEach((opt, i) => {
  1132. opt.style.color = i === index ? "white" : "#64748b";
  1133.  
  1134. const optIcon = opt.querySelector("svg");
  1135. if (optIcon) {
  1136. const optPaths = optIcon.querySelectorAll("path");
  1137. optPaths.forEach((path) => {
  1138. path.setAttribute("fill", i === index ? "white" : "#64748b");
  1139. });
  1140. }
  1141. });
  1142. });
  1143.  
  1144. optionsContainer.appendChild(optionElement);
  1145. });
  1146.  
  1147. toggleWrapper.appendChild(toggleSlider);
  1148. toggleWrapper.appendChild(optionsContainer);
  1149.  
  1150. return toggleWrapper;
  1151. }
  1152.  
  1153. function createMediaTypeIcons() {
  1154. const allIcon = document.createElementNS(
  1155. "http://www.w3.org/2000/svg",
  1156. "svg"
  1157. );
  1158. allIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1159. allIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.ALL.VIEWBOX);
  1160. allIcon.setAttribute("width", "16");
  1161. allIcon.setAttribute("height", "16");
  1162. allIcon.style.verticalAlign = "middle";
  1163.  
  1164. const allPath = document.createElementNS(
  1165. "http://www.w3.org/2000/svg",
  1166. "path"
  1167. );
  1168. allPath.setAttribute("fill", "#64748b");
  1169. allPath.setAttribute("d", ICONS.MEDIA_TYPE.ALL.PATH);
  1170. allIcon.appendChild(allPath);
  1171.  
  1172. const imageIcon = document.createElementNS(
  1173. "http://www.w3.org/2000/svg",
  1174. "svg"
  1175. );
  1176. imageIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1177. imageIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.IMAGE.VIEWBOX);
  1178. imageIcon.setAttribute("width", "16");
  1179. imageIcon.setAttribute("height", "16");
  1180. imageIcon.style.verticalAlign = "middle";
  1181.  
  1182. const imagePath = document.createElementNS(
  1183. "http://www.w3.org/2000/svg",
  1184. "path"
  1185. );
  1186. imagePath.setAttribute("fill", "#64748b");
  1187. imagePath.setAttribute("d", ICONS.MEDIA_TYPE.IMAGE.PATH);
  1188. imageIcon.appendChild(imagePath);
  1189.  
  1190. const videoIcon = document.createElementNS(
  1191. "http://www.w3.org/2000/svg",
  1192. "svg"
  1193. );
  1194. videoIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1195. videoIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.VIDEO.VIEWBOX);
  1196. videoIcon.setAttribute("width", "16");
  1197. videoIcon.setAttribute("height", "16");
  1198. videoIcon.style.verticalAlign = "middle";
  1199.  
  1200. const videoPath = document.createElementNS(
  1201. "http://www.w3.org/2000/svg",
  1202. "path"
  1203. );
  1204. videoPath.setAttribute("fill", "#64748b");
  1205. videoPath.setAttribute("d", ICONS.MEDIA_TYPE.VIDEO.PATH);
  1206. videoIcon.appendChild(videoPath);
  1207.  
  1208. const gifIcon = document.createElementNS(
  1209. "http://www.w3.org/2000/svg",
  1210. "svg"
  1211. );
  1212. gifIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1213. gifIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.GIF.VIEWBOX);
  1214. gifIcon.setAttribute("width", "16");
  1215. gifIcon.setAttribute("height", "16");
  1216. gifIcon.style.verticalAlign = "middle";
  1217.  
  1218. const gifPath = document.createElementNS(
  1219. "http://www.w3.org/2000/svg",
  1220. "path"
  1221. );
  1222. gifPath.setAttribute("fill", "#64748b");
  1223. gifPath.setAttribute("d", ICONS.MEDIA_TYPE.GIF.PATH);
  1224. gifIcon.appendChild(gifPath);
  1225.  
  1226. return {
  1227. all: allIcon,
  1228. image: imageIcon,
  1229. video: videoIcon,
  1230. gif: gifIcon,
  1231. };
  1232. }
  1233.  
  1234. function createSlider(options, selectedValue, onChange) {
  1235. const toggleOptions = options.map((option) => {
  1236. let label = option.toString();
  1237. if (typeof option === "number" && option >= 60 && option % 60 === 0) {
  1238. label = `${option / 60}h`;
  1239. }
  1240. return { value: option, label: label };
  1241. });
  1242.  
  1243. return createToggleSwitch(toggleOptions, selectedValue, onChange);
  1244. }
  1245.  
  1246. function createModal(username) {
  1247. let autoBatchStarted = false;
  1248. let autoBatchCancelled = false;
  1249. const existingModal = document.getElementById("media-downloader-modal");
  1250. if (existingModal) {
  1251. existingModal.remove();
  1252. }
  1253.  
  1254. const settings = getSettings();
  1255.  
  1256. const modal = document.createElement("div");
  1257. modal.id = "media-downloader-modal";
  1258. modal.style.cssText = `
  1259. position: fixed;
  1260. top: 0;
  1261. left: 0;
  1262. width: 100%;
  1263. height: 100%;
  1264. background-color: rgba(0, 0, 0, 0.35);
  1265. backdrop-filter: blur(2.5px);
  1266. display: flex;
  1267. justify-content: center;
  1268. align-items: center;
  1269. z-index: 10000;
  1270. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  1271. `;
  1272.  
  1273. const modalContent = document.createElement("div");
  1274. modalContent.style.cssText = `
  1275. background-color: ${settings.darkTheme ? "#1f2937" : "#ffffff"};
  1276. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1277. border-radius: 16px;
  1278. width: 500px;
  1279. max-width: 90%;
  1280. max-height: 90vh;
  1281. overflow-y: auto;
  1282. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  1283. `;
  1284.  
  1285. const header = document.createElement("div");
  1286. header.style.cssText = `
  1287. display: flex;
  1288. justify-content: space-between;
  1289. align-items: center;
  1290. padding: 16px;
  1291. border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  1292. `;
  1293.  
  1294. const title = document.createElement("h2");
  1295. title.innerHTML = `Download ${getMediaTypeLabel(
  1296. settings.mediaType
  1297. )}: <span style="color: #0ea5e9">${username}</span>`;
  1298. title.style.cssText = `
  1299. margin: 0;
  1300. font-size: 18px;
  1301. font-weight: bold;
  1302. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1303. `;
  1304.  
  1305. const closeButton = document.createElement("button");
  1306. closeButton.innerHTML = "&times;";
  1307. closeButton.style.cssText = `
  1308. background: none;
  1309. border: none;
  1310. color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  1311. font-size: 24px;
  1312. cursor: pointer;
  1313. padding: 0;
  1314. line-height: 1;
  1315. transition: color 0.2s;
  1316. `;
  1317. closeButton.addEventListener("mouseenter", () => {
  1318. closeButton.style.color = "#0ea5e9";
  1319. });
  1320. closeButton.addEventListener("mouseleave", () => {
  1321. closeButton.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a";
  1322. });
  1323. closeButton.onclick = () => modal.remove();
  1324.  
  1325. header.appendChild(title);
  1326. header.appendChild(closeButton);
  1327.  
  1328. const tabs = document.createElement("div");
  1329. tabs.style.cssText = `
  1330. display: flex;
  1331. border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  1332. `;
  1333.  
  1334. const mainTab = document.createElement("div");
  1335. mainTab.textContent = "Main";
  1336. mainTab.className = "active-tab";
  1337. mainTab.style.cssText = `
  1338. padding: 12px 16px;
  1339. cursor: pointer;
  1340. flex: 1;
  1341. text-align: center;
  1342. border-bottom: 2px solid #0ea5e9;
  1343. color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  1344. `;
  1345.  
  1346. const settingsTab = document.createElement("div");
  1347. settingsTab.textContent = "Settings";
  1348. settingsTab.style.cssText = `
  1349. padding: 12px 16px;
  1350. cursor: pointer;
  1351. flex: 1;
  1352. text-align: center;
  1353. color: #64748b;
  1354. `;
  1355.  
  1356. tabs.appendChild(mainTab);
  1357. tabs.appendChild(settingsTab);
  1358.  
  1359. const mainContent = document.createElement("div");
  1360. mainContent.style.cssText = `
  1361. padding: 16px;
  1362. `;
  1363.  
  1364. const settingsContent = document.createElement("div");
  1365. settingsContent.style.cssText = `
  1366. padding: 16px;
  1367. display: none;
  1368. `;
  1369.  
  1370. const fetchButton = document.createElement("button");
  1371. const mediaTypeLabelText = getMediaTypeLabel(
  1372. settings.mediaType
  1373. ).toLowerCase();
  1374. const fetchIcon = document.createElementNS(
  1375. "http://www.w3.org/2000/svg",
  1376. "svg"
  1377. );
  1378. fetchIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1379. fetchIcon.setAttribute("viewBox", ICONS.FETCH.VIEWBOX);
  1380. fetchIcon.setAttribute("width", "16");
  1381. fetchIcon.setAttribute("height", "16");
  1382. fetchIcon.style.marginRight = "8px";
  1383.  
  1384. const fetchPath = document.createElementNS(
  1385. "http://www.w3.org/2000/svg",
  1386. "path"
  1387. );
  1388. fetchPath.setAttribute("fill", "currentColor");
  1389. fetchPath.setAttribute("d", ICONS.FETCH.PATH);
  1390. fetchIcon.appendChild(fetchPath);
  1391.  
  1392. const fetchButtonText = document.createElement("span");
  1393. fetchButtonText.textContent = settings.autoBatchEnabled
  1394. ? "Auto Fetch"
  1395. : settings.mediaType === "all"
  1396. ? "Fetch Media"
  1397. : `Fetch ${
  1398. mediaTypeLabelText === "gif"
  1399. ? "GIF"
  1400. : mediaTypeLabelText.charAt(0).toUpperCase() +
  1401. mediaTypeLabelText.slice(1)
  1402. }`;
  1403.  
  1404. fetchButton.innerHTML = "";
  1405. fetchButton.appendChild(fetchIcon);
  1406. fetchButton.appendChild(fetchButtonText);
  1407. fetchButton.style.cssText = `
  1408. background-color: #22c55e;
  1409. color: white;
  1410. border: none;
  1411. border-radius: 6px;
  1412. padding: 8px 16px;
  1413. font-weight: bold;
  1414. cursor: pointer;
  1415. margin: 0;
  1416. width: 48%;
  1417. display: flex;
  1418. justify-content: center;
  1419. align-items: center;
  1420. text-align: center;
  1421. transition: background-color 0.2s;
  1422. `;
  1423. fetchButton.addEventListener("mouseenter", () => {
  1424. fetchButton.style.backgroundColor = "#16a34a";
  1425. });
  1426.  
  1427. fetchButton.addEventListener("mouseleave", () => {
  1428. fetchButton.style.backgroundColor = "#22c55e";
  1429. });
  1430. const infoContainer = document.createElement("div");
  1431. infoContainer.style.cssText = `
  1432. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1433. border-radius: 8px;
  1434. padding: 12px;
  1435. margin-bottom: 16px;
  1436. display: none;
  1437. `;
  1438.  
  1439. const buttonContainer = document.createElement("div");
  1440. buttonContainer.style.cssText = `
  1441. display: none;
  1442. gap: 8px;
  1443. margin-bottom: 16px;
  1444. `;
  1445. const batchNavContainer = document.createElement("div");
  1446. batchNavContainer.style.cssText = `
  1447. display: none;
  1448. flex-direction: column;
  1449. gap: 8px;
  1450. margin-bottom: 16px;
  1451. `;
  1452.  
  1453. const prevBatchButton = document.createElement("button");
  1454. prevBatchButton.innerHTML = `<span style="display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;">${ICONS.PREV}<span>Prev Batch</span></span>`;
  1455. prevBatchButton.style.cssText = `
  1456. background-color: #6366f1;
  1457. color: white;
  1458. border: none;
  1459. border-radius: 6px;
  1460. padding: 8px 16px;
  1461. font-weight: bold;
  1462. cursor: pointer;
  1463. width: 40%;
  1464. display: flex;
  1465. align-items: center;
  1466. justify-content: center;
  1467. text-align: center;
  1468. transition: background-color 0.2s;
  1469. `;
  1470.  
  1471. prevBatchButton.addEventListener("mouseenter", () => {
  1472. prevBatchButton.style.backgroundColor = "#4f46e5";
  1473. });
  1474. prevBatchButton.addEventListener("mouseleave", () => {
  1475. prevBatchButton.style.backgroundColor = "#6366f1";
  1476. });
  1477.  
  1478. const nextBatchButton = document.createElement("button");
  1479. nextBatchButton.innerHTML = `<span style="display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;"><span>Next Batch</span>${ICONS.NEXT}</span>`;
  1480. nextBatchButton.style.cssText = `
  1481. background-color: #6366f1;
  1482. color: white;
  1483. border: none;
  1484. border-radius: 6px;
  1485. padding: 8px 16px;
  1486. font-weight: bold;
  1487. cursor: pointer;
  1488. width: 40%;
  1489. display: flex;
  1490. align-items: center;
  1491. justify-content: center;
  1492. text-align: center;
  1493. transition: background-color 0.2s;
  1494. `;
  1495.  
  1496. nextBatchButton.addEventListener("mouseenter", () => {
  1497. nextBatchButton.style.backgroundColor = "#4f46e5";
  1498. });
  1499. nextBatchButton.addEventListener("mouseleave", () => {
  1500. nextBatchButton.style.backgroundColor = "#6366f1";
  1501. });
  1502.  
  1503. const buttonWrapper = document.createElement("div");
  1504. buttonWrapper.style.cssText = `
  1505. display: flex;
  1506. gap: 8px;
  1507. justify-content: center;
  1508. width: 100%;
  1509. `;
  1510.  
  1511. buttonWrapper.appendChild(prevBatchButton);
  1512. buttonWrapper.appendChild(nextBatchButton);
  1513. batchNavContainer.appendChild(buttonWrapper);
  1514.  
  1515. const stopFetchButton = document.createElement("button");
  1516. stopFetchButton.innerHTML = `<span style="display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;">${ICONS.STOP}<span>Stop Fetch</span></span>`;
  1517.  
  1518. stopFetchButton.style.cssText = `
  1519. background-color: #ef4444;
  1520. color: white;
  1521. border: none;
  1522. border-radius: 6px;
  1523. padding: 8px 16px;
  1524. font-weight: bold;
  1525. cursor: pointer;
  1526. width: 140px; /* Fixed width instead of percentage */
  1527. display: none;
  1528. align-items: center;
  1529. justify-content: center;
  1530. text-align: center;
  1531. transition: background-color 0.2s;
  1532. `;
  1533.  
  1534. stopFetchButton.addEventListener("mouseenter", () => {
  1535. stopFetchButton.style.backgroundColor = "#dc2626";
  1536. });
  1537. stopFetchButton.addEventListener("mouseleave", () => {
  1538. stopFetchButton.style.backgroundColor = "#ef4444";
  1539. });
  1540. stopFetchButton.addEventListener("click", () => {
  1541. autoBatchCancelled = true;
  1542. autoBatchStarted = false;
  1543. batchNavContainer.style.display = "flex";
  1544. prevBatchButton.style.display =
  1545. mediaData.currentPage > getSettings().startingBatch ? "block" : "none";
  1546. nextBatchButton.style.display = mediaData.hasMore ? "block" : "none";
  1547. stopFetchButton.style.display = "none";
  1548. batchInfoContainer.style.display = "flex";
  1549. infoContainer.style.display = "block";
  1550. fetchButtonText.textContent = "Auto Fetch";
  1551. });
  1552.  
  1553. const stopFetchWrapper = document.createElement("div");
  1554. stopFetchWrapper.style.cssText = `
  1555. display: flex;
  1556. justify-content: center;
  1557. width: 100%;
  1558. margin-top: 8px; /* Add spacing between button rows */
  1559. `;
  1560. stopFetchWrapper.appendChild(stopFetchButton);
  1561. batchNavContainer.appendChild(stopFetchWrapper);
  1562.  
  1563. const batchInfoContainer = document.createElement("div");
  1564. batchInfoContainer.style.cssText = `
  1565. display: none;
  1566. flex-direction: column;
  1567. gap: 8px;
  1568. margin-bottom: 16px;
  1569. padding: 12px;
  1570. background-color: ${settings.darkTheme ? "#374151" : "#f8fafc"};
  1571. border-radius: 8px;
  1572. border: 1px solid ${settings.darkTheme ? "#4b5563" : "#e2e8f0"};
  1573. `;
  1574.  
  1575. const batchStatsRow = document.createElement("div");
  1576. batchStatsRow.style.cssText = `
  1577. display: flex;
  1578. justify-content: space-between;
  1579. align-items: center;
  1580. `;
  1581.  
  1582. const currentBatchLabel = document.createElement("div");
  1583. currentBatchLabel.style.cssText = `
  1584. font-size: 14px;
  1585. color: ${settings.darkTheme ? "#ffffff" : "#475569"};
  1586. `;
  1587.  
  1588. const totalBatchLabel = document.createElement("div");
  1589. totalBatchLabel.style.cssText = `
  1590. font-size: 14px;
  1591. color: ${settings.darkTheme ? "#ffffff" : "#475569"};
  1592. `;
  1593.  
  1594. batchStatsRow.appendChild(currentBatchLabel);
  1595. batchStatsRow.appendChild(totalBatchLabel);
  1596.  
  1597. const downloadButtonsRow = document.createElement("div");
  1598. downloadButtonsRow.style.cssText = `
  1599. display: flex;
  1600. gap: 8px;
  1601. justify-content: center;
  1602. `;
  1603.  
  1604. const downloadCurrentButton = document.createElement("button");
  1605. downloadCurrentButton.innerHTML = "";
  1606. const currentIcon = createDownloadIcon();
  1607. currentIcon.style.width = "12px";
  1608. currentIcon.style.height = "12px";
  1609. currentIcon.style.marginRight = "4px";
  1610. const currentText = document.createElement("span");
  1611. currentText.textContent = "Download Current";
  1612. downloadCurrentButton.appendChild(currentIcon);
  1613. downloadCurrentButton.appendChild(currentText);
  1614. downloadCurrentButton.style.cssText = `
  1615. background-color: #0ea5e9;
  1616. color: white;
  1617. border: none;
  1618. border-radius: 6px;
  1619. padding: 6px 12px;
  1620. font-weight: bold;
  1621. cursor: pointer;
  1622. font-size: 12px;
  1623. transition: background-color 0.2s;
  1624. flex: 1;
  1625. display: flex;
  1626. align-items: center;
  1627. justify-content: center;
  1628. `;
  1629. downloadCurrentButton.addEventListener("mouseenter", () => {
  1630. downloadCurrentButton.style.backgroundColor = "#0284c7";
  1631. });
  1632. downloadCurrentButton.addEventListener("mouseleave", () => {
  1633. downloadCurrentButton.style.backgroundColor = "#0ea5e9";
  1634. });
  1635.  
  1636. const downloadAllButton = document.createElement("button");
  1637. downloadAllButton.innerHTML = "";
  1638. const allIcon = createDownloadIcon();
  1639. allIcon.style.width = "12px";
  1640. allIcon.style.height = "12px";
  1641. allIcon.style.marginRight = "4px";
  1642. const allText = document.createElement("span");
  1643. allText.textContent = "Download All";
  1644. downloadAllButton.appendChild(allIcon);
  1645. downloadAllButton.appendChild(allText);
  1646. downloadAllButton.style.cssText = `
  1647. background-color: #0ea5e9;
  1648. color: white;
  1649. border: none;
  1650. border-radius: 6px;
  1651. padding: 6px 12px;
  1652. font-weight: bold;
  1653. cursor: pointer;
  1654. font-size: 12px;
  1655. transition: background-color 0.2s;
  1656. flex: 1;
  1657. display: flex;
  1658. align-items: center;
  1659. justify-content: center;
  1660. `;
  1661. downloadAllButton.addEventListener("mouseenter", () => {
  1662. downloadAllButton.style.backgroundColor = "#0284c7";
  1663. });
  1664. downloadAllButton.addEventListener("mouseleave", () => {
  1665. downloadAllButton.style.backgroundColor = "#0ea5e9";
  1666. });
  1667.  
  1668. downloadButtonsRow.appendChild(downloadCurrentButton);
  1669. downloadButtonsRow.appendChild(downloadAllButton);
  1670.  
  1671. batchInfoContainer.appendChild(batchStatsRow);
  1672. batchInfoContainer.appendChild(downloadButtonsRow);
  1673.  
  1674. const downloadButton = document.createElement("button");
  1675. const downloadIcon = createDownloadIcon();
  1676. downloadIcon.style.width = "16px";
  1677. downloadIcon.style.height = "16px";
  1678. downloadIcon.style.marginRight = "8px";
  1679.  
  1680. downloadButton.innerHTML = "";
  1681. downloadButton.appendChild(downloadIcon);
  1682. downloadButton.appendChild(document.createTextNode("Download"));
  1683. downloadButton.style.cssText = `
  1684. background-color: #0ea5e9;
  1685. color: white;
  1686. border: none;
  1687. border-radius: 6px;
  1688. padding: 8px 16px;
  1689. font-weight: bold;
  1690. cursor: pointer;
  1691. width: 50%;
  1692. margin-left: auto;
  1693. margin-right: auto;
  1694. display: flex;
  1695. align-items: center;
  1696. justify-content: center;
  1697. text-align: center;
  1698. transition: background-color 0.2s;
  1699. `;
  1700. downloadButton.addEventListener("mouseenter", () => {
  1701. downloadButton.style.backgroundColor = "#0284c7";
  1702. });
  1703. downloadButton.addEventListener("mouseleave", () => {
  1704. downloadButton.style.backgroundColor = "#0ea5e9";
  1705. });
  1706. downloadButton.onclick = () => downloadMedia(false);
  1707.  
  1708. if (settings.batchEnabled) {
  1709. buttonContainer.style.display = "none";
  1710. } else {
  1711. buttonContainer.appendChild(downloadButton);
  1712. }
  1713. const batchButtonsContainer = document.createElement("div");
  1714. batchButtonsContainer.style.cssText = `
  1715. display: none;
  1716. gap: 8px;
  1717. margin-bottom: 16px;
  1718. `;
  1719.  
  1720. const progressContainer = document.createElement("div");
  1721. progressContainer.style.cssText = `
  1722. margin-top: 16px;
  1723. display: none;
  1724. `;
  1725.  
  1726. const progressText = document.createElement("div");
  1727. progressText.style.cssText = `
  1728. margin-bottom: 8px;
  1729. font-size: 14px;
  1730. text-align: center;
  1731. `;
  1732. progressText.textContent = "Downloading...";
  1733.  
  1734. const progressBar = document.createElement("div");
  1735. progressBar.style.cssText = `
  1736. width: 100%;
  1737. height: 8px;
  1738. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1739. border-radius: 4px;
  1740. overflow: hidden;
  1741. `;
  1742.  
  1743. const progressFill = document.createElement("div");
  1744. progressFill.style.cssText = `
  1745. height: 100%;
  1746. width: 0%;
  1747. background-color: #0ea5e9;
  1748. transition: width 0.3s ease-in-out;
  1749. will-change: width;
  1750. `;
  1751.  
  1752. progressBar.appendChild(progressFill);
  1753. progressContainer.appendChild(progressText);
  1754. progressContainer.appendChild(progressBar);
  1755. const convertGifButton = document.createElement("button");
  1756. const convertGifIcon = document.createElementNS(
  1757. "http://www.w3.org/2000/svg",
  1758. "svg"
  1759. );
  1760. convertGifIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  1761. convertGifIcon.setAttribute("viewBox", ICONS.MEDIA_TYPE.GIF.VIEWBOX);
  1762. convertGifIcon.setAttribute("width", "16");
  1763. convertGifIcon.setAttribute("height", "16");
  1764. convertGifIcon.style.marginRight = "8px";
  1765.  
  1766. const convertGifPath = document.createElementNS(
  1767. "http://www.w3.org/2000/svg",
  1768. "path"
  1769. );
  1770. convertGifPath.setAttribute("fill", "currentColor");
  1771. convertGifPath.setAttribute("d", ICONS.MEDIA_TYPE.GIF.PATH);
  1772. convertGifIcon.appendChild(convertGifPath);
  1773.  
  1774. const convertGifButtonText = document.createElement("span");
  1775. convertGifButtonText.textContent = "Convert GIF";
  1776.  
  1777. convertGifButton.innerHTML = "";
  1778. convertGifButton.appendChild(convertGifIcon);
  1779. convertGifButton.appendChild(convertGifButtonText);
  1780. convertGifButton.style.cssText = `
  1781. background-color: #3b82f6;
  1782. color: white;
  1783. border: none;
  1784. border-radius: 6px;
  1785. padding: 8px 16px;
  1786. font-weight: bold;
  1787. cursor: pointer;
  1788. margin: 0;
  1789. width: 48%;
  1790. display: flex;
  1791. justify-content: center;
  1792. align-items: center;
  1793. text-align: center;
  1794. transition: background-color 0.2s;
  1795. `;
  1796.  
  1797. convertGifButton.addEventListener("mouseenter", () => {
  1798. convertGifButton.style.backgroundColor = "#2563eb";
  1799. });
  1800.  
  1801. convertGifButton.addEventListener("mouseleave", () => {
  1802. convertGifButton.style.backgroundColor = "#3b82f6";
  1803. });
  1804. convertGifButton.addEventListener("click", () => {
  1805. const convertUrl = `https://convert.xbatch.online/${username}`;
  1806. window.open(convertUrl, "_blank");
  1807. });
  1808.  
  1809. const mainButtonsContainer = document.createElement("div");
  1810. mainButtonsContainer.style.cssText = `
  1811. display: flex;
  1812. gap: 4%;
  1813. margin: 16px 0;
  1814. width: 100%;
  1815. `;
  1816.  
  1817. mainButtonsContainer.appendChild(fetchButton);
  1818. mainButtonsContainer.appendChild(convertGifButton);
  1819.  
  1820. mainContent.appendChild(mainButtonsContainer);
  1821. mainContent.appendChild(infoContainer);
  1822. mainContent.appendChild(batchInfoContainer);
  1823. mainContent.appendChild(batchNavContainer);
  1824. mainContent.appendChild(buttonContainer);
  1825. mainContent.appendChild(batchButtonsContainer);
  1826. mainContent.appendChild(progressContainer);
  1827.  
  1828. const settingsTabs = document.createElement("div");
  1829. settingsTabs.style.cssText = `
  1830. display: flex;
  1831. border-bottom: 1px solid ${settings.darkTheme ? "#374151" : "#e2e8f0"};
  1832. margin-bottom: 16px;
  1833. width: 100%;
  1834. `;
  1835.  
  1836. const fetchTab = document.createElement("button");
  1837. fetchTab.textContent = "Fetch";
  1838. fetchTab.style.cssText = `
  1839. background: none;
  1840. border: none;
  1841. padding: 12px 16px;
  1842. cursor: pointer;
  1843. color: ${settings.darkTheme ? "#f1f5f9" : "#0f172a"};
  1844. border-bottom: 2px solid #0ea5e9;
  1845. font-weight: bold;
  1846. font-size: 14px;
  1847. flex: 1;
  1848. text-align: center;
  1849. `;
  1850.  
  1851. const authTab = document.createElement("button");
  1852. authTab.textContent = "Auth";
  1853. authTab.style.cssText = `
  1854. background: none;
  1855. border: none;
  1856. padding: 12px 16px;
  1857. cursor: pointer;
  1858. color: #64748b;
  1859. border-bottom: none;
  1860. font-weight: bold;
  1861. font-size: 14px;
  1862. flex: 1;
  1863. text-align: center;
  1864. `;
  1865.  
  1866. const advancedTab = document.createElement("button");
  1867. advancedTab.textContent = "Advanced";
  1868. advancedTab.style.cssText = `
  1869. background: none;
  1870. border: none;
  1871. padding: 12px 16px;
  1872. cursor: pointer;
  1873. color: #64748b;
  1874. border-bottom: none;
  1875. font-weight: bold;
  1876. font-size: 14px;
  1877. flex: 1;
  1878. text-align: center;
  1879. `;
  1880.  
  1881. settingsTabs.appendChild(fetchTab);
  1882. settingsTabs.appendChild(authTab);
  1883. settingsTabs.appendChild(advancedTab);
  1884. const fetchTabContent = document.createElement("div");
  1885. fetchTabContent.style.cssText = `
  1886. display: flex;
  1887. flex-direction: column;
  1888. gap: ${settings.batchEnabled ? "16px" : "8px"};
  1889. `;
  1890.  
  1891. const downloadTabContent = document.createElement("div");
  1892. downloadTabContent.style.cssText = `
  1893. display: none;
  1894. flex-direction: column;
  1895. gap: 16px;
  1896. `;
  1897.  
  1898. const authTabContent = document.createElement("div");
  1899. authTabContent.style.cssText = `
  1900. display: none;
  1901. flex-direction: column;
  1902. gap: 16px;
  1903. `;
  1904.  
  1905. const advancedTabContent = document.createElement("div");
  1906. advancedTabContent.style.cssText = `
  1907. display: none;
  1908. flex-direction: column;
  1909. gap: 0px;
  1910. `;
  1911.  
  1912. const patreonAuthGroup = document.createElement("div");
  1913. patreonAuthGroup.style.cssText = `
  1914. display: flex;
  1915. flex-direction: column;
  1916. gap: 8px;
  1917. `;
  1918.  
  1919. const patreonAuthLabel = document.createElement("label");
  1920. patreonAuthLabel.textContent = "Patreon Auth:";
  1921. patreonAuthLabel.style.cssText = `
  1922. font-size: 14px;
  1923. font-weight: bold;
  1924. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  1925. `;
  1926.  
  1927. const patreonAuthInputContainer = document.createElement("div");
  1928. patreonAuthInputContainer.style.cssText = `
  1929. position: relative;
  1930. display: flex;
  1931. align-items: center;
  1932. `;
  1933.  
  1934. const patreonAuthInput = document.createElement("input");
  1935. patreonAuthInput.type = "text";
  1936. patreonAuthInput.value = settings.patreonAuth;
  1937. patreonAuthInput.style.cssText = `
  1938. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  1939. border: 1px solid transparent;
  1940. border-radius: 4px;
  1941. padding: 8px 12px;
  1942. color: ${settings.darkTheme ? "#cbd5e1" : "#64748b"};
  1943. width: 100%;
  1944. box-sizing: border-box;
  1945. transition: all 0.2s ease;
  1946. `;
  1947.  
  1948. patreonAuthInput.addEventListener("focus", () => {
  1949. patreonAuthInput.style.border = "1px solid #0ea5e9";
  1950. patreonAuthInput.style.outline = "none";
  1951. });
  1952. patreonAuthInput.addEventListener("blur", () => {
  1953. patreonAuthInput.style.border = "1px solid transparent";
  1954. });
  1955.  
  1956. patreonAuthInput.addEventListener("input", () => {
  1957. const newSettings = getSettings();
  1958. newSettings.patreonAuth = patreonAuthInput.value;
  1959. saveSettings(newSettings);
  1960. patreonAuthClearButton.style.display = patreonAuthInput.value
  1961. ? "block"
  1962. : "none";
  1963. });
  1964.  
  1965. const patreonAuthClearButton = document.createElement("button");
  1966. patreonAuthClearButton.innerHTML = "&times;";
  1967. patreonAuthClearButton.style.cssText = `
  1968. position: absolute;
  1969. right: 8px;
  1970. background: none;
  1971. border: none;
  1972. color: #64748b;
  1973. font-size: 18px;
  1974. cursor: pointer;
  1975. padding: 0;
  1976. display: ${settings.patreonAuth ? "block" : "none"};
  1977. `;
  1978. patreonAuthClearButton.addEventListener("click", () => {
  1979. patreonAuthInput.value = "";
  1980. const newSettings = getSettings();
  1981. newSettings.patreonAuth = "";
  1982. saveSettings(newSettings);
  1983. patreonAuthClearButton.style.display = "none";
  1984. });
  1985.  
  1986. patreonAuthInputContainer.appendChild(patreonAuthInput);
  1987. patreonAuthInputContainer.appendChild(patreonAuthClearButton);
  1988. patreonAuthGroup.appendChild(patreonAuthLabel);
  1989. patreonAuthGroup.appendChild(patreonAuthInputContainer);
  1990.  
  1991. const tokenGroup = document.createElement("div");
  1992. tokenGroup.style.cssText = `
  1993. display: flex;
  1994. flex-direction: column;
  1995. gap: 8px;
  1996. `;
  1997.  
  1998. const tokenLabel = document.createElement("label");
  1999. tokenLabel.textContent = "Auth Token:";
  2000. tokenLabel.style.cssText = `
  2001. font-size: 14px;
  2002. font-weight: bold;
  2003. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2004. `;
  2005.  
  2006. const tokenInputContainer = document.createElement("div");
  2007. tokenInputContainer.style.cssText = `
  2008. position: relative;
  2009. display: flex;
  2010. align-items: center;
  2011. `;
  2012.  
  2013. const tokenInput = document.createElement("input");
  2014. tokenInput.type = "text";
  2015. tokenInput.value = settings.authToken;
  2016. tokenInput.style.cssText = `
  2017. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  2018. border: 1px solid transparent;
  2019. border-radius: 4px;
  2020. padding: 8px 12px;
  2021. color: ${settings.darkTheme ? "#cbd5e1" : "#64748b"};
  2022. width: 100%;
  2023. box-sizing: border-box;
  2024. transition: all 0.2s ease;
  2025. `;
  2026. tokenInput.addEventListener("focus", () => {
  2027. tokenInput.style.border = "1px solid #0ea5e9";
  2028. tokenInput.style.outline = "none";
  2029. });
  2030. tokenInput.addEventListener("blur", () => {
  2031. tokenInput.style.border = "1px solid transparent";
  2032. });
  2033.  
  2034. tokenInput.addEventListener("input", () => {
  2035. const newSettings = getSettings();
  2036. newSettings.authToken = tokenInput.value;
  2037. saveSettings(newSettings);
  2038. tokenClearButton.style.display = tokenInput.value ? "block" : "none";
  2039. });
  2040.  
  2041. const tokenClearButton = document.createElement("button");
  2042. tokenClearButton.innerHTML = "&times;";
  2043. tokenClearButton.style.cssText = `
  2044. position: absolute;
  2045. right: 8px;
  2046. background: none;
  2047. border: none;
  2048. color: #64748b;
  2049. font-size: 18px;
  2050. cursor: pointer;
  2051. padding: 0;
  2052. display: ${settings.authToken ? "block" : "none"};
  2053. `;
  2054. tokenClearButton.addEventListener("click", () => {
  2055. tokenInput.value = "";
  2056. const newSettings = getSettings();
  2057. newSettings.authToken = "";
  2058. saveSettings(newSettings);
  2059. tokenClearButton.style.display = "none";
  2060. });
  2061.  
  2062. tokenInputContainer.appendChild(tokenInput);
  2063. tokenInputContainer.appendChild(tokenClearButton);
  2064. tokenGroup.appendChild(tokenLabel);
  2065. tokenGroup.appendChild(tokenInputContainer);
  2066.  
  2067. const apiServerGroup = document.createElement("div");
  2068. apiServerGroup.style.cssText = `
  2069. display: flex;
  2070. flex-direction: column;
  2071. gap: 8px;
  2072. `;
  2073.  
  2074. const apiServerLabel = document.createElement("label");
  2075. apiServerLabel.textContent = "Service:";
  2076. apiServerLabel.style.cssText = `
  2077. font-size: 14px;
  2078. font-weight: bold;
  2079. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2080. `;
  2081.  
  2082. const apiServerOptions = [
  2083. { value: "default", label: "Default" },
  2084. { value: "backup", label: "Backup" },
  2085. ];
  2086.  
  2087. const apiServerToggle = createToggleSwitch(
  2088. apiServerOptions,
  2089. settings.apiServer,
  2090. (value) => {
  2091. const newSettings = getSettings();
  2092. newSettings.apiServer = value;
  2093. saveSettings(newSettings);
  2094. settings.apiServer = value;
  2095. }
  2096. );
  2097.  
  2098. apiServerGroup.appendChild(apiServerLabel);
  2099. apiServerGroup.appendChild(apiServerToggle);
  2100.  
  2101. const batchGroup = document.createElement("div");
  2102. batchGroup.style.cssText = `
  2103. display: flex;
  2104. align-items: center;
  2105. gap: 8px;
  2106. `;
  2107. const batchLabel = document.createElement("label");
  2108. batchLabel.style.cssText = `
  2109. font-size: 14px;
  2110. font-weight: bold;
  2111. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2112. flex: 1;
  2113. display: flex;
  2114. align-items: center;
  2115. `;
  2116. const batchLabelText = document.createElement("span");
  2117. batchLabelText.textContent = "Batch:";
  2118. batchLabel.appendChild(batchLabelText);
  2119.  
  2120. const batchInfoIcon = createInfoIcon();
  2121. const batchTooltip = createInfoTooltip(
  2122. "When enabled, the media fetching process is performed in batches"
  2123. );
  2124. batchInfoIcon.addEventListener("mouseenter", batchTooltip.showTooltip);
  2125. batchInfoIcon.addEventListener("mouseleave", batchTooltip.hideTooltip);
  2126. batchLabel.appendChild(batchInfoIcon);
  2127.  
  2128. const batchToggle = document.createElement("div");
  2129. batchToggle.style.cssText = `
  2130. position: relative;
  2131. width: 50px;
  2132. height: 24px;
  2133. background-color: ${settings.batchEnabled ? "#22c55e" : "#cbd5e1"};
  2134. border-radius: 12px;
  2135. cursor: pointer;
  2136. transition: background-color 0.3s;
  2137. `;
  2138.  
  2139. const batchToggleHandle = document.createElement("div");
  2140. batchToggleHandle.style.cssText = `
  2141. position: absolute;
  2142. top: 2px;
  2143. left: ${settings.batchEnabled ? "28px" : "2px"};
  2144. width: 20px;
  2145. height: 20px;
  2146. background-color: white;
  2147. border-radius: 50%;
  2148. transition: left 0.3s;
  2149. `;
  2150.  
  2151. batchToggle.appendChild(batchToggleHandle);
  2152. batchToggle.addEventListener("click", () => {
  2153. const newSettings = getSettings();
  2154. newSettings.batchEnabled = !newSettings.batchEnabled;
  2155. saveSettings(newSettings);
  2156. batchToggle.style.backgroundColor = newSettings.batchEnabled
  2157. ? "#22c55e"
  2158. : "#cbd5e1";
  2159. batchToggleHandle.style.left = newSettings.batchEnabled ? "28px" : "2px";
  2160. autoBatchGroup.style.display = newSettings.batchEnabled ? "flex" : "none";
  2161. batchSizeGroup.style.display = newSettings.batchEnabled ? "flex" : "none";
  2162. startingBatchGroup.style.display = newSettings.batchEnabled
  2163. ? "flex"
  2164. : "none";
  2165.  
  2166. if (!newSettings.batchEnabled) {
  2167. fetchTabContent.style.gap = "8px";
  2168. newSettings.autoBatchEnabled = false;
  2169. saveSettings(newSettings);
  2170. autoBatchToggle.style.backgroundColor = "#cbd5e1";
  2171. autoBatchHandle.style.left = "2px";
  2172. const mt = getSettings().mediaType;
  2173. const mtLabel = getMediaTypeLabel(mt).toLowerCase();
  2174. const labelText =
  2175. mt === "all"
  2176. ? "Fetch Media"
  2177. : `Fetch ${
  2178. mtLabel === "gif"
  2179. ? "GIF"
  2180. : mtLabel.charAt(0).toUpperCase() + mtLabel.slice(1)
  2181. }`;
  2182.  
  2183. fetchButtonText.textContent = labelText;
  2184. fetchButton.innerHTML = "";
  2185. let updatedFetchIcon = fetchIcon.cloneNode(true);
  2186. fetchButton.appendChild(updatedFetchIcon);
  2187. fetchButton.appendChild(fetchButtonText);
  2188. if (typeof stopFetchButton !== "undefined")
  2189. stopFetchButton.style.display = "none";
  2190. if (typeof prevBatchButton !== "undefined")
  2191. prevBatchButton.style.display = "block";
  2192. if (typeof nextBatchButton !== "undefined")
  2193. nextBatchButton.style.display = "block";
  2194. } else {
  2195. fetchTabContent.style.gap = "16px";
  2196. }
  2197. });
  2198.  
  2199. batchGroup.appendChild(batchLabel);
  2200. batchGroup.appendChild(batchToggle);
  2201.  
  2202. const autoBatchGroup = document.createElement("div");
  2203. autoBatchGroup.style.cssText = `
  2204. display: ${settings.batchEnabled ? "flex" : "none"};
  2205. align-items: center;
  2206. gap: 8px;
  2207. `;
  2208. const autoBatchLabel = document.createElement("label");
  2209. autoBatchLabel.style.cssText = `
  2210. font-size: 14px;
  2211. font-weight: bold;
  2212. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2213. flex: 1;
  2214. display: flex;
  2215. align-items: center;
  2216. `;
  2217. autoBatchLabel.textContent = "Auto Fetch";
  2218. const autoBatchToggle = document.createElement("div");
  2219. autoBatchToggle.style.cssText = `
  2220. position: relative;
  2221. width: 50px;
  2222. height: 24px;
  2223. background-color: ${settings.autoBatchEnabled ? "#22c55e" : "#cbd5e1"};
  2224. border-radius: 12px;
  2225. cursor: pointer;
  2226. transition: background-color 0.3s;
  2227. `;
  2228. const autoBatchHandle = document.createElement("div");
  2229. autoBatchHandle.style.cssText = `
  2230. position: absolute;
  2231. top: 2px;
  2232. left: ${settings.autoBatchEnabled ? "28px" : "2px"};
  2233. width: 20px;
  2234. height: 20px;
  2235. background-color: white;
  2236. border-radius: 50%;
  2237. transition: left 0.3s;
  2238. `;
  2239. autoBatchToggle.appendChild(autoBatchHandle);
  2240. autoBatchToggle.addEventListener("click", () => {
  2241. const newSettings = getSettings();
  2242. const willEnable = !newSettings.autoBatchEnabled;
  2243. newSettings.autoBatchEnabled = willEnable;
  2244. saveSettings(newSettings);
  2245. autoBatchCancelled = false;
  2246. autoBatchStarted = false;
  2247. autoBatchToggle.style.backgroundColor = willEnable
  2248. ? "#22c55e"
  2249. : "#cbd5e1";
  2250. autoBatchHandle.style.left = willEnable ? "28px" : "2px";
  2251. const label = willEnable
  2252. ? "Auto Fetch"
  2253. : newSettings.mediaType === "all"
  2254. ? "Fetch Media"
  2255. : newSettings.mediaType === "image"
  2256. ? "Fetch Photos"
  2257. : "Fetch Videos";
  2258. fetchButtonText.textContent = label;
  2259.  
  2260. if (willEnable) {
  2261. const keyPrefix = `twitter_dl_${newSettings.timelineType}_${newSettings.mediaType}_${username}_`;
  2262. const keySuffix = `_${newSettings.batchSize}_batch_true`;
  2263. for (let i = 0; i < localStorage.length; i++) {
  2264. const key = localStorage.key(i);
  2265. if (key.startsWith(keyPrefix) && key.endsWith(keySuffix)) {
  2266. const pageNum = parseInt(
  2267. key.slice(keyPrefix.length, key.length - keySuffix.length),
  2268. 10
  2269. );
  2270. if (!isNaN(pageNum)) {
  2271. const cachedData = cacheManager.get(key);
  2272. if (cachedData && cachedData.timeline) {
  2273. mediaData.batchData[pageNum] = cachedData.timeline;
  2274. }
  2275. }
  2276. }
  2277. }
  2278. const batchNums = Object.keys(mediaData.batchData).map(Number);
  2279. mediaData.currentPage =
  2280. batchNums.length > 0 ? Math.max(...batchNums) + 1 : 0;
  2281. fetchButtonText.textContent = "Auto Fetch";
  2282. } else {
  2283. const mt = newSettings.mediaType;
  2284. const label =
  2285. mt === "all"
  2286. ? "Fetch Media"
  2287. : `Fetch ${getMediaTypeLabel(mt).toUpperCase()}`;
  2288. fetchButtonText.textContent = label;
  2289. }
  2290. });
  2291. autoBatchGroup.appendChild(autoBatchLabel);
  2292. autoBatchGroup.appendChild(autoBatchToggle);
  2293.  
  2294. const batchSizeGroup = document.createElement("div");
  2295. batchSizeGroup.style.cssText = `
  2296. display: ${settings.batchEnabled ? "flex" : "none"};
  2297. flex-direction: column;
  2298. gap: 8px;
  2299. `;
  2300.  
  2301. const batchSizeLabel = document.createElement("label");
  2302. batchSizeLabel.style.cssText = `
  2303. font-size: 14px;
  2304. font-weight: bold;
  2305. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2306. display: flex;
  2307. align-items: center;
  2308. `;
  2309. const batchSizeLabelText = document.createElement("span");
  2310. batchSizeLabelText.textContent = "Batch Size:";
  2311. batchSizeLabel.appendChild(batchSizeLabelText);
  2312.  
  2313. const batchSizeInfoIcon = createInfoIcon();
  2314. const batchSizeTooltip = createInfoTooltip(
  2315. "Number of media items fetched in a single request"
  2316. );
  2317. batchSizeInfoIcon.addEventListener(
  2318. "mouseenter",
  2319. batchSizeTooltip.showTooltip
  2320. );
  2321. batchSizeInfoIcon.addEventListener(
  2322. "mouseleave",
  2323. batchSizeTooltip.hideTooltip
  2324. );
  2325. batchSizeLabel.appendChild(batchSizeInfoIcon);
  2326.  
  2327. const batchSizeToggle = createSlider(
  2328. batchSizes,
  2329. settings.batchSize,
  2330. (value) => {
  2331. const newSettings = getSettings();
  2332. newSettings.batchSize = value;
  2333. saveSettings(newSettings);
  2334. settings.batchSize = value;
  2335. }
  2336. );
  2337.  
  2338. batchSizeGroup.appendChild(batchSizeLabel);
  2339. batchSizeGroup.appendChild(batchSizeToggle);
  2340.  
  2341. const startingBatchGroup = document.createElement("div");
  2342. startingBatchGroup.style.cssText = `
  2343. display: ${settings.batchEnabled ? "flex" : "none"};
  2344. flex-direction: column;
  2345. gap: 8px;
  2346. `;
  2347.  
  2348. const startingBatchLabel = document.createElement("label");
  2349. startingBatchLabel.style.cssText = `
  2350. font-size: 14px;
  2351. font-weight: bold;
  2352. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2353. display: flex;
  2354. align-items: center;
  2355. `;
  2356. const startingBatchLabelText = document.createElement("span");
  2357. startingBatchLabelText.textContent = "Starting Batch:";
  2358. startingBatchLabel.appendChild(startingBatchLabelText);
  2359.  
  2360. const startingBatchInfoIcon = createInfoIcon();
  2361. const startingBatchTooltip = createInfoTooltip(
  2362. "Determines which batch number to start fetching from"
  2363. );
  2364. startingBatchInfoIcon.addEventListener(
  2365. "mouseenter",
  2366. startingBatchTooltip.showTooltip
  2367. );
  2368. startingBatchInfoIcon.addEventListener(
  2369. "mouseleave",
  2370. startingBatchTooltip.hideTooltip
  2371. );
  2372. startingBatchLabel.appendChild(startingBatchInfoIcon);
  2373.  
  2374. const startingBatchInput = document.createElement("input");
  2375. startingBatchInput.type = "number";
  2376. startingBatchInput.value = settings.startingBatch;
  2377. startingBatchInput.min = "0";
  2378. startingBatchInput.style.cssText = `
  2379. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  2380. border: 1px solid transparent;
  2381. border-radius: 4px;
  2382. padding: 8px 12px;
  2383. color: ${settings.darkTheme ? "#cbd5e1" : "#64748b"};
  2384. width: 100%;
  2385. box-sizing: border-box;
  2386. transition: all 0.2s ease;
  2387. `;
  2388. startingBatchInput.addEventListener("focus", () => {
  2389. startingBatchInput.style.border = "1px solid #0ea5e9";
  2390. startingBatchInput.style.outline = "none";
  2391. });
  2392. startingBatchInput.addEventListener("blur", () => {
  2393. startingBatchInput.style.border = "1px solid transparent";
  2394. });
  2395.  
  2396. startingBatchInput.addEventListener("input", () => {
  2397. const newSettings = getSettings();
  2398. newSettings.startingBatch = parseInt(startingBatchInput.value) || 0;
  2399. saveSettings(newSettings);
  2400. settings.startingBatch = newSettings.startingBatch;
  2401. });
  2402.  
  2403. startingBatchGroup.appendChild(startingBatchLabel);
  2404. startingBatchGroup.appendChild(startingBatchInput);
  2405.  
  2406. const timelineTypeGroup = document.createElement("div");
  2407. timelineTypeGroup.style.cssText = `
  2408. display: flex;
  2409. flex-direction: column;
  2410. gap: 8px;
  2411. `;
  2412.  
  2413. const timelineTypeLabel = document.createElement("label");
  2414. timelineTypeLabel.textContent = "Timeline Type:";
  2415. timelineTypeLabel.style.cssText = `
  2416. font-size: 14px;
  2417. font-weight: bold;
  2418. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2419. `;
  2420.  
  2421. const timelineTypeOptions = [
  2422. { value: "media", label: "Media", icon: createTimelineTypeIcon("media") },
  2423. {
  2424. value: "timeline",
  2425. label: "Post",
  2426. icon: createTimelineTypeIcon("timeline"),
  2427. },
  2428. {
  2429. value: "tweets",
  2430. label: "Tweets",
  2431. icon: createTimelineTypeIcon("tweets"),
  2432. },
  2433. {
  2434. value: "with_replies",
  2435. label: "Replies",
  2436. icon: createTimelineTypeIcon("with_replies"),
  2437. },
  2438. ];
  2439.  
  2440. const timelineTypeToggle = createToggleSwitch(
  2441. timelineTypeOptions,
  2442. settings.timelineType,
  2443. (value) => {
  2444. const newSettings = getSettings();
  2445. newSettings.timelineType = value;
  2446. saveSettings(newSettings);
  2447. settings.timelineType = value;
  2448. }
  2449. );
  2450.  
  2451. timelineTypeGroup.appendChild(timelineTypeLabel);
  2452. timelineTypeGroup.appendChild(timelineTypeToggle);
  2453.  
  2454. const mediaTypeGroup = document.createElement("div");
  2455. mediaTypeGroup.style.cssText = `
  2456. display: flex;
  2457. flex-direction: column;
  2458. gap: 8px;
  2459. `;
  2460.  
  2461. const mediaTypeLabel = document.createElement("label");
  2462. mediaTypeLabel.textContent = "Media Type:";
  2463. mediaTypeLabel.style.cssText = `
  2464. font-size: 14px;
  2465. font-weight: bold;
  2466. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2467. `;
  2468.  
  2469. const mediaTypeIcons = createMediaTypeIcons();
  2470. const mediaTypeOptions = [
  2471. { value: "all", label: "All", icon: mediaTypeIcons.all },
  2472. { value: "image", label: "Image", icon: mediaTypeIcons.image },
  2473. { value: "video", label: "Video", icon: mediaTypeIcons.video },
  2474. { value: "gif", label: "GIF", icon: mediaTypeIcons.gif },
  2475. ];
  2476.  
  2477. const mediaTypeToggle = createToggleSwitch(
  2478. mediaTypeOptions,
  2479. settings.mediaType,
  2480. (value) => {
  2481. const newSettings = getSettings();
  2482. newSettings.mediaType = value;
  2483. saveSettings(newSettings);
  2484. settings.mediaType = value;
  2485.  
  2486. const newMediaTypeLabel = getMediaTypeLabel(value).toLowerCase();
  2487. const newFetchButtonText =
  2488. value === "all"
  2489. ? "Fetch Media"
  2490. : `Fetch ${
  2491. newMediaTypeLabel === "gif"
  2492. ? "GIF"
  2493. : newMediaTypeLabel.charAt(0).toUpperCase() +
  2494. newMediaTypeLabel.slice(1)
  2495. }`;
  2496.  
  2497. fetchButton.innerHTML = "";
  2498. const newFetchIcon = fetchIcon.cloneNode(true);
  2499. fetchButton.appendChild(newFetchIcon);
  2500. fetchButton.appendChild(document.createTextNode(newFetchButtonText));
  2501.  
  2502. title.innerHTML = `Download ${getMediaTypeLabel(
  2503. value
  2504. )}: <span style="color: #0ea5e9">${username}</span>`;
  2505. }
  2506. );
  2507.  
  2508. mediaTypeGroup.appendChild(mediaTypeLabel);
  2509. mediaTypeGroup.appendChild(mediaTypeToggle);
  2510.  
  2511. const concurrentGroup = document.createElement("div");
  2512. concurrentGroup.style.cssText = `
  2513. display: flex;
  2514. flex-direction: column;
  2515. gap: 8px;
  2516. `;
  2517.  
  2518. const concurrentLabel = document.createElement("label");
  2519. concurrentLabel.style.cssText = `
  2520. font-size: 14px;
  2521. font-weight: bold;
  2522. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2523. display: flex;
  2524. align-items: center;
  2525. `;
  2526.  
  2527. const concurrentLabelText = document.createElement("span");
  2528. concurrentLabelText.textContent = "Batch Download Items:";
  2529. concurrentLabel.appendChild(concurrentLabelText);
  2530.  
  2531. const concurrentInfoIcon = createInfoIcon();
  2532. const concurrentTooltip = createInfoTooltip(
  2533. "Total item that are downloaded in a single request"
  2534. );
  2535. concurrentInfoIcon.addEventListener(
  2536. "mouseenter",
  2537. concurrentTooltip.showTooltip
  2538. );
  2539. concurrentInfoIcon.addEventListener(
  2540. "mouseleave",
  2541. concurrentTooltip.hideTooltip
  2542. );
  2543. concurrentLabel.appendChild(concurrentInfoIcon);
  2544.  
  2545. const concurrentToggle = document.createElement("div");
  2546. concurrentToggle.textContent = "Fixed to 50 concurrent downloads";
  2547. concurrentToggle.style.cssText = `
  2548. padding: 10px;
  2549. background-color: ${settings.darkTheme ? "#374151" : "#f1f5f9"};
  2550. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2551. border-radius: 8px;
  2552. text-align: center;
  2553. `;
  2554.  
  2555. concurrentGroup.appendChild(concurrentLabel);
  2556. concurrentGroup.appendChild(concurrentToggle);
  2557.  
  2558. const cacheDurationGroup = document.createElement("div");
  2559. cacheDurationGroup.style.cssText = `
  2560. display: flex;
  2561. flex-direction: column;
  2562. gap: 8px;
  2563. `;
  2564.  
  2565. const cacheDurationLabel = document.createElement("label");
  2566. cacheDurationLabel.textContent = "Cache Duration:";
  2567. cacheDurationLabel.style.cssText = `
  2568. font-size: 14px;
  2569. font-weight: bold;
  2570. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2571. `;
  2572.  
  2573. const cacheDurationOptions = cacheDurations.map((duration) => {
  2574. let label = duration.toString() + "m";
  2575. if (duration >= 60 && duration % 60 === 0) {
  2576. label = `${duration / 60}h`;
  2577. }
  2578. return { value: duration, label: label };
  2579. });
  2580.  
  2581. const cacheDurationToggle = createToggleSwitch(
  2582. cacheDurationOptions,
  2583. settings.cacheDuration,
  2584. (value) => {
  2585. const newSettings = getSettings();
  2586. newSettings.cacheDuration = value;
  2587. saveSettings(newSettings);
  2588. settings.cacheDuration = value;
  2589. }
  2590. );
  2591. cacheDurationGroup.appendChild(cacheDurationLabel);
  2592. cacheDurationGroup.appendChild(cacheDurationToggle);
  2593.  
  2594. const darkThemeGroup = document.createElement("div");
  2595. darkThemeGroup.style.cssText = `
  2596. display: flex;
  2597. align-items: center;
  2598. gap: 8px;
  2599. `;
  2600. const darkThemeLabel = document.createElement("label");
  2601. darkThemeLabel.style.cssText = `
  2602. font-size: 14px;
  2603. font-weight: bold;
  2604. color: ${settings.darkTheme ? "#f1f5f9" : "#334155"};
  2605. flex: 1;
  2606. display: flex;
  2607. align-items: center;
  2608. `;
  2609. const darkThemeLabelText = document.createElement("span");
  2610. darkThemeLabelText.textContent = "Dark Theme:";
  2611. darkThemeLabel.appendChild(darkThemeLabelText);
  2612.  
  2613. const darkThemeToggle = document.createElement("div");
  2614. darkThemeToggle.style.cssText = `
  2615. position: relative;
  2616. width: 50px;
  2617. height: 24px;
  2618. background-color: ${settings.darkTheme ? "#22c55e" : "#cbd5e1"};
  2619. border-radius: 12px;
  2620. cursor: pointer;
  2621. transition: background-color 0.3s;
  2622. `;
  2623.  
  2624. const darkThemeToggleHandle = document.createElement("div");
  2625. darkThemeToggleHandle.style.cssText = `
  2626. position: absolute;
  2627. top: 2px;
  2628. left: ${settings.darkTheme ? "28px" : "2px"};
  2629. width: 20px;
  2630. height: 20px;
  2631. background-color: white;
  2632. border-radius: 50%;
  2633. transition: left 0.3s;
  2634. `;
  2635.  
  2636. darkThemeToggle.appendChild(darkThemeToggleHandle);
  2637. darkThemeToggle.addEventListener("click", () => {
  2638. const newSettings = getSettings();
  2639. newSettings.darkTheme = !newSettings.darkTheme;
  2640. saveSettings(newSettings);
  2641. settings.darkTheme = newSettings.darkTheme;
  2642. darkThemeToggle.style.backgroundColor = newSettings.darkTheme
  2643. ? "#22c55e"
  2644. : "#cbd5e1";
  2645. darkThemeToggleHandle.style.left = newSettings.darkTheme ? "28px" : "2px";
  2646. updateTheme();
  2647. });
  2648.  
  2649. darkThemeGroup.appendChild(darkThemeLabel);
  2650. darkThemeGroup.appendChild(darkThemeToggle);
  2651.  
  2652. const buttonsContainer = document.createElement("div");
  2653. buttonsContainer.style.cssText = `
  2654. display: flex;
  2655. gap: 16px;
  2656. margin-top: 16px;
  2657. width: 100%;
  2658. justify-content: center;
  2659. align-items: center;
  2660. `;
  2661.  
  2662. const clearCacheButton = document.createElement("button");
  2663. const trashIcon = document.createElementNS(
  2664. "http://www.w3.org/2000/svg",
  2665. "svg"
  2666. );
  2667. trashIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  2668. trashIcon.setAttribute("viewBox", ICONS.CLEAR.VIEWBOX);
  2669. trashIcon.setAttribute("width", "16");
  2670. trashIcon.setAttribute("height", "16");
  2671. trashIcon.style.marginRight = "8px";
  2672.  
  2673. const trashPath = document.createElementNS(
  2674. "http://www.w3.org/2000/svg",
  2675. "path"
  2676. );
  2677. trashPath.setAttribute("fill", "currentColor");
  2678. trashPath.setAttribute("d", ICONS.CLEAR.PATH);
  2679. trashIcon.appendChild(trashPath);
  2680. clearCacheButton.appendChild(trashIcon);
  2681. clearCacheButton.appendChild(document.createTextNode("Clear Cache"));
  2682. clearCacheButton.style.cssText = `
  2683. background-color: #ef4444;
  2684. color: white;
  2685. border: none;
  2686. border-radius: 6px;
  2687. padding: 8px 16px;
  2688. font-weight: bold;
  2689. cursor: pointer;
  2690. flex: 1;
  2691. display: flex;
  2692. align-items: center;
  2693. justify-content: center;
  2694. text-align: center;
  2695. transition: background-color 0.2s;
  2696. `;
  2697.  
  2698. const resetDefaultButton = document.createElement("button");
  2699. const resetIcon = document.createElementNS(
  2700. "http://www.w3.org/2000/svg",
  2701. "svg"
  2702. );
  2703. resetIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  2704. resetIcon.setAttribute("viewBox", ICONS.RESET.VIEWBOX);
  2705. resetIcon.setAttribute("width", "16");
  2706. resetIcon.setAttribute("height", "16");
  2707. resetIcon.style.marginRight = "8px";
  2708.  
  2709. const resetPath = document.createElementNS(
  2710. "http://www.w3.org/2000/svg",
  2711. "path"
  2712. );
  2713. resetPath.setAttribute("fill", "currentColor");
  2714. resetPath.setAttribute("d", ICONS.RESET.PATH);
  2715. resetIcon.appendChild(resetPath);
  2716.  
  2717. resetDefaultButton.appendChild(resetIcon);
  2718. resetDefaultButton.appendChild(document.createTextNode("Reset Default"));
  2719. resetDefaultButton.style.cssText = `
  2720. background-color: #6366f1;
  2721. color: white;
  2722. border: none;
  2723. border-radius: 6px;
  2724. padding: 8px 16px;
  2725. font-weight: bold;
  2726. cursor: pointer;
  2727. flex: 1;
  2728. display: flex;
  2729. align-items: center;
  2730. justify-content: center;
  2731. text-align: center;
  2732. transition: background-color 0.2s;
  2733. `;
  2734. buttonsContainer.appendChild(clearCacheButton);
  2735. buttonsContainer.appendChild(resetDefaultButton);
  2736.  
  2737. clearCacheButton.addEventListener("mouseenter", () => {
  2738. clearCacheButton.style.backgroundColor = "#dc2626";
  2739. });
  2740. clearCacheButton.addEventListener("mouseleave", () => {
  2741. clearCacheButton.style.backgroundColor = "#ef4444";
  2742. });
  2743.  
  2744. resetDefaultButton.addEventListener("mouseenter", () => {
  2745. resetDefaultButton.style.backgroundColor = "#5b56f4";
  2746. });
  2747. resetDefaultButton.addEventListener("mouseleave", () => {
  2748. resetDefaultButton.style.backgroundColor = "#6366f1";
  2749. });
  2750. clearCacheButton.addEventListener("click", () => {
  2751. createConfirmDialog("Are you sure about clearing the cache?", () => {
  2752. cacheManager.clear();
  2753.  
  2754. createInfoDialog(
  2755. "Cache has been successfully cleared.",
  2756. "Clear Successful"
  2757. );
  2758. });
  2759. });
  2760.  
  2761. resetDefaultButton.addEventListener("click", () => {
  2762. createConfirmDialog(
  2763. "Are you sure you want to reset all settings to default values?",
  2764. () => {
  2765. const currentSettings = getSettings();
  2766. const preservedPatreonAuth = currentSettings.patreonAuth;
  2767. const preservedAuthToken = currentSettings.authToken;
  2768.  
  2769. const resetSettings = { ...defaultSettings };
  2770. resetSettings.patreonAuth = preservedPatreonAuth;
  2771. resetSettings.authToken = preservedAuthToken;
  2772. saveSettings(resetSettings);
  2773.  
  2774. startingBatchInput.value = defaultSettings.startingBatch;
  2775.  
  2776. batchToggle.style.backgroundColor = defaultSettings.batchEnabled
  2777. ? "#22c55e"
  2778. : "#cbd5e1";
  2779. batchToggleHandle.style.left = defaultSettings.batchEnabled
  2780. ? "28px"
  2781. : "2px";
  2782.  
  2783. batchSizeGroup.style.display = defaultSettings.batchEnabled
  2784. ? "flex"
  2785. : "none";
  2786. startingBatchGroup.style.display = defaultSettings.batchEnabled
  2787. ? "flex"
  2788. : "none";
  2789. autoBatchGroup.style.display = defaultSettings.batchEnabled
  2790. ? "flex"
  2791. : "none";
  2792.  
  2793. patreonAuthClearButton.style.display = preservedPatreonAuth
  2794. ? "block"
  2795. : "none";
  2796. tokenClearButton.style.display = preservedAuthToken
  2797. ? "block"
  2798. : "none";
  2799.  
  2800. const timelineTypeOptions = [
  2801. "media",
  2802. "timeline",
  2803. "tweets",
  2804. "with_replies",
  2805. ];
  2806. const timelineTypeIndex = timelineTypeOptions.indexOf(
  2807. defaultSettings.timelineType
  2808. );
  2809. const timelineTypeSlider =
  2810. timelineTypeToggle.querySelector("div:first-child");
  2811. const timelineTypeContainer =
  2812. timelineTypeToggle.querySelector("div:last-child");
  2813.  
  2814. if (
  2815. timelineTypeSlider &&
  2816. timelineTypeContainer &&
  2817. timelineTypeIndex !== -1
  2818. ) {
  2819. timelineTypeSlider.style.transform = `translateX(${
  2820. timelineTypeIndex * 100
  2821. }%)`;
  2822. timelineTypeContainer.querySelectorAll("div").forEach((opt, i) => {
  2823. opt.style.color = i === timelineTypeIndex ? "white" : "#64748b";
  2824. const optIcon = opt.querySelector("svg");
  2825. if (optIcon) {
  2826. const optPaths = optIcon.querySelectorAll("path");
  2827. optPaths.forEach((path) => {
  2828. path.setAttribute(
  2829. "fill",
  2830. i === timelineTypeIndex ? "white" : "#64748b"
  2831. );
  2832. });
  2833. }
  2834. });
  2835. }
  2836.  
  2837. const mediaTypeOptions = ["all", "image", "video", "gif"];
  2838. const mediaTypeIndex = mediaTypeOptions.indexOf(
  2839. defaultSettings.mediaType
  2840. );
  2841. const mediaTypeSlider =
  2842. mediaTypeToggle.querySelector("div:first-child");
  2843. const mediaTypeContainer =
  2844. mediaTypeToggle.querySelector("div:last-child");
  2845.  
  2846. if (mediaTypeSlider && mediaTypeContainer && mediaTypeIndex !== -1) {
  2847. mediaTypeSlider.style.transform = `translateX(${
  2848. mediaTypeIndex * 100
  2849. }%)`;
  2850. mediaTypeContainer.querySelectorAll("div").forEach((opt, i) => {
  2851. opt.style.color = i === mediaTypeIndex ? "white" : "#64748b";
  2852. const optIcon = opt.querySelector("svg");
  2853. if (optIcon) {
  2854. const optPaths = optIcon.querySelectorAll("path");
  2855. optPaths.forEach((path) => {
  2856. path.setAttribute(
  2857. "fill",
  2858. i === mediaTypeIndex ? "white" : "#64748b"
  2859. );
  2860. });
  2861. }
  2862. });
  2863. }
  2864.  
  2865. const batchSizeIndex = batchSizes.indexOf(defaultSettings.batchSize);
  2866. const batchSizeSlider =
  2867. batchSizeToggle.querySelector("div:first-child");
  2868. const batchSizeContainer =
  2869. batchSizeToggle.querySelector("div:last-child");
  2870.  
  2871. if (batchSizeSlider && batchSizeContainer && batchSizeIndex !== -1) {
  2872. batchSizeSlider.style.transform = `translateX(${
  2873. batchSizeIndex * 100
  2874. }%)`;
  2875. batchSizeContainer.querySelectorAll("div").forEach((opt, i) => {
  2876. opt.style.color = i === batchSizeIndex ? "white" : "#64748b";
  2877. const optIcon = opt.querySelector("svg");
  2878. if (optIcon) {
  2879. const optPaths = optIcon.querySelectorAll("path");
  2880. optPaths.forEach((path) => {
  2881. path.setAttribute(
  2882. "fill",
  2883. i === batchSizeIndex ? "white" : "#64748b"
  2884. );
  2885. });
  2886. }
  2887. });
  2888. }
  2889.  
  2890. const cacheDurationIndex = cacheDurations.indexOf(
  2891. defaultSettings.cacheDuration
  2892. );
  2893. const cacheDurationSlider =
  2894. cacheDurationToggle.querySelector("div:first-child");
  2895. const cacheDurationContainer =
  2896. cacheDurationToggle.querySelector("div:last-child");
  2897.  
  2898. if (
  2899. cacheDurationSlider &&
  2900. cacheDurationContainer &&
  2901. cacheDurationIndex !== -1
  2902. ) {
  2903. cacheDurationSlider.style.transform = `translateX(${
  2904. cacheDurationIndex * 100
  2905. }%)`;
  2906. cacheDurationContainer.querySelectorAll("div").forEach((opt, i) => {
  2907. opt.style.color = i === cacheDurationIndex ? "white" : "#64748b";
  2908. const optIcon = opt.querySelector("svg");
  2909. if (optIcon) {
  2910. const optPaths = optIcon.querySelectorAll("path");
  2911. optPaths.forEach((path) => {
  2912. path.setAttribute(
  2913. "fill",
  2914. i === cacheDurationIndex ? "white" : "#64748b"
  2915. );
  2916. });
  2917. }
  2918. });
  2919. }
  2920. const apiServerOptions = ["default", "backup"];
  2921. const apiServerIndex = apiServerOptions.indexOf(
  2922. defaultSettings.apiServer
  2923. );
  2924. const apiServerSlider =
  2925. apiServerToggle.querySelector("div:first-child");
  2926. const apiServerContainer =
  2927. apiServerToggle.querySelector("div:last-child");
  2928.  
  2929. if (apiServerSlider && apiServerContainer && apiServerIndex !== -1) {
  2930. apiServerSlider.style.transform = `translateX(${
  2931. apiServerIndex * 100
  2932. }%)`;
  2933. apiServerContainer.querySelectorAll("div").forEach((opt, i) => {
  2934. opt.style.color = i === apiServerIndex ? "white" : "#64748b";
  2935. const optIcon = opt.querySelector("svg");
  2936. if (optIcon) {
  2937. const optPaths = optIcon.querySelectorAll("path");
  2938. optPaths.forEach((path) => {
  2939. path.setAttribute(
  2940. "fill",
  2941. i === apiServerIndex ? "white" : "#64748b"
  2942. );
  2943. });
  2944. }
  2945. });
  2946. }
  2947.  
  2948. darkThemeToggle.style.backgroundColor = defaultSettings.darkTheme
  2949. ? "#22c55e"
  2950. : "#cbd5e1";
  2951. darkThemeToggleHandle.style.left = defaultSettings.darkTheme
  2952. ? "28px"
  2953. : "2px";
  2954. settings.darkTheme = defaultSettings.darkTheme;
  2955. updateTheme();
  2956.  
  2957. const newMediaTypeLabel = getMediaTypeLabel(
  2958. defaultSettings.mediaType
  2959. ).toLowerCase();
  2960. const newFetchButtonText =
  2961. defaultSettings.mediaType === "all"
  2962. ? "Fetch Media"
  2963. : `Fetch ${
  2964. newMediaTypeLabel === "gif"
  2965. ? "GIF"
  2966. : newMediaTypeLabel.charAt(0).toUpperCase() +
  2967. newMediaTypeLabel.slice(1)
  2968. }`;
  2969. fetchButton.innerHTML = "";
  2970. const newFetchIcon = fetchIcon.cloneNode(true);
  2971. fetchButton.appendChild(newFetchIcon);
  2972. fetchButton.appendChild(document.createTextNode(newFetchButtonText));
  2973. title.innerHTML = `Download ${getMediaTypeLabel(
  2974. defaultSettings.mediaType
  2975. )}: <span style="color: #0ea5e9">${username}</span>`;
  2976.  
  2977. setTimeout(() => {
  2978. createInfoDialog(
  2979. "Settings have been successfully reset to default values.",
  2980. "Reset Successful"
  2981. );
  2982. }, 100);
  2983. }
  2984. );
  2985. });
  2986.  
  2987. const patreonLink = document.createElement("a");
  2988. patreonLink.href = "https://www.patreon.com/exyezed";
  2989. patreonLink.target = "_blank";
  2990. patreonLink.style.cssText = `
  2991. display: flex;
  2992. align-items: center;
  2993. justify-content: center;
  2994. color: #64748b;
  2995. text-decoration: none;
  2996. margin-top: 16px;
  2997. padding: 8px;
  2998. border-radius: 8px;
  2999. transition: background-color 0.2s, color 0.2s;
  3000. `;
  3001. patreonLink.innerHTML =
  3002. createPatreonIcon().outerHTML + "Patreon Authentication";
  3003. patreonLink.addEventListener("mouseenter", () => {
  3004. patreonLink.style.backgroundColor = settings.darkTheme
  3005. ? "#374151"
  3006. : "#f1f5f9";
  3007. patreonLink.style.color = "#0ea5e9";
  3008. });
  3009. patreonLink.addEventListener("mouseleave", () => {
  3010. patreonLink.style.backgroundColor = "transparent";
  3011. patreonLink.style.color = "#64748b";
  3012. });
  3013.  
  3014. const batchSizeStartingContainer = document.createElement("div");
  3015. batchSizeStartingContainer.style.cssText = `
  3016. display: flex;
  3017. flex-direction: column;
  3018. gap: 0px;
  3019. `;
  3020. batchSizeStartingContainer.appendChild(batchSizeGroup);
  3021. batchSizeStartingContainer.appendChild(startingBatchGroup);
  3022.  
  3023. const mediaTimelineContainer = document.createElement("div");
  3024. mediaTimelineContainer.style.cssText = `
  3025. display: flex;
  3026. flex-direction: column;
  3027. gap: 0px;
  3028. `;
  3029. mediaTimelineContainer.appendChild(mediaTypeGroup);
  3030. mediaTimelineContainer.appendChild(timelineTypeGroup);
  3031.  
  3032. fetchTabContent.appendChild(batchGroup);
  3033. fetchTabContent.appendChild(autoBatchGroup);
  3034. fetchTabContent.appendChild(batchSizeStartingContainer);
  3035. fetchTabContent.appendChild(mediaTimelineContainer);
  3036.  
  3037. authTabContent.appendChild(patreonAuthGroup);
  3038. authTabContent.appendChild(tokenGroup);
  3039. authTabContent.appendChild(patreonLink);
  3040.  
  3041. advancedTabContent.appendChild(darkThemeGroup);
  3042.  
  3043. apiServerGroup.style.marginTop = "16px";
  3044. advancedTabContent.appendChild(apiServerGroup);
  3045.  
  3046. cacheDurationGroup.style.marginTop = "0px";
  3047. advancedTabContent.appendChild(cacheDurationGroup);
  3048.  
  3049. buttonsContainer.style.marginTop = "16px";
  3050. advancedTabContent.appendChild(buttonsContainer);
  3051.  
  3052. function switchTab(activeTab, activeContent) {
  3053. const allTabs = [fetchTab, authTab, advancedTab];
  3054. const allContents = [fetchTabContent, authTabContent, advancedTabContent];
  3055.  
  3056. allTabs.forEach((tab) => {
  3057. if (tab && tab.style) {
  3058. tab.style.color = "#64748b";
  3059. tab.style.borderBottom = "none";
  3060. }
  3061. });
  3062.  
  3063. allContents.forEach((content) => {
  3064. if (content && content.style) {
  3065. content.style.display = "none";
  3066. }
  3067. });
  3068.  
  3069. if (activeTab && activeTab.style) {
  3070. activeTab.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a";
  3071. activeTab.style.borderBottom = "2px solid #0ea5e9";
  3072. }
  3073. if (activeContent && activeContent.style) {
  3074. activeContent.style.display = "flex";
  3075. }
  3076. }
  3077. fetchTab.addEventListener("click", function () {
  3078. switchTab(fetchTab, fetchTabContent);
  3079. });
  3080. authTab.addEventListener("click", function () {
  3081. switchTab(authTab, authTabContent);
  3082. });
  3083. advancedTab.addEventListener("click", function () {
  3084. switchTab(advancedTab, advancedTabContent);
  3085. });
  3086.  
  3087. const settingsForm = document.createElement("div");
  3088. settingsForm.style.cssText = `
  3089. display: flex;
  3090. flex-direction: column;
  3091. `;
  3092.  
  3093. settingsForm.appendChild(settingsTabs);
  3094. settingsForm.appendChild(fetchTabContent);
  3095. settingsForm.appendChild(authTabContent);
  3096. settingsForm.appendChild(advancedTabContent);
  3097.  
  3098. settingsContent.appendChild(settingsForm);
  3099.  
  3100. mainTab.addEventListener("click", function () {
  3101. mainTab.style.borderBottom = "2px solid #0ea5e9";
  3102. mainTab.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a";
  3103. settingsTab.style.borderBottom = "none";
  3104. settingsTab.style.color = "#64748b";
  3105. mainContent.style.display = "block";
  3106. settingsContent.style.display = "none";
  3107. });
  3108.  
  3109. settingsTab.addEventListener("click", function () {
  3110. settingsTab.style.borderBottom = "2px solid #0ea5e9";
  3111. settingsTab.style.color = settings.darkTheme ? "#f1f5f9" : "#0f172a";
  3112. mainTab.style.borderBottom = "none";
  3113. mainTab.style.color = "#64748b";
  3114. settingsContent.style.display = "block";
  3115. mainContent.style.display = "none";
  3116.  
  3117. switchTab(fetchTab, fetchTabContent);
  3118. });
  3119.  
  3120. modalContent.appendChild(header);
  3121. modalContent.appendChild(tabs);
  3122. modalContent.appendChild(mainContent);
  3123. modalContent.appendChild(settingsContent);
  3124. modal.appendChild(modalContent);
  3125.  
  3126. const mediaData = {
  3127. username: username,
  3128. currentPage: getSettings().startingBatch,
  3129. mediaItems: [],
  3130. allMediaItems: [],
  3131. batchData: {},
  3132. hasMore: false,
  3133. downloading: false,
  3134. totalDownloaded: 0,
  3135. totalToDownload: 0,
  3136. totalItems: 0,
  3137. nextBatchClicked: false,
  3138. };
  3139.  
  3140. function refreshInfoDisplays() {
  3141. const isDark = getSettings().darkTheme;
  3142.  
  3143. if (infoContainer.innerHTML && mediaData.totalItems > 0) {
  3144. const settings = getSettings();
  3145. const mediaTypeLabel = getMediaTypeLabel(settings.mediaType);
  3146.  
  3147. if (
  3148. settings.batchEnabled &&
  3149. mediaData.mediaItems &&
  3150. mediaData.mediaItems.length > 0
  3151. ) {
  3152. const accountIconHtml = createAccountIcon(isDark).outerHTML;
  3153. const mediaIconHtml = createMediaTypeIcon(
  3154. settings.mediaType,
  3155. isDark
  3156. ).outerHTML;
  3157. const totalItemsIconHtml = createTotalItemsIcon(isDark).outerHTML;
  3158.  
  3159. infoContainer.innerHTML = `
  3160. <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${
  3161. mediaData.username
  3162. }</span></div>
  3163. <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(
  3164. mediaData.totalItems
  3165. )}</span></div>
  3166. <div style="margin-bottom: 8px; display: flex; align-items: center;">${totalItemsIconHtml}<strong style="margin-right: 6px;">Total Items:</strong><span>${formatNumber(
  3167. mediaData.allMediaItems.length
  3168. )}</span></div>
  3169. `;
  3170. } else if (
  3171. mediaData.allMediaItems &&
  3172. mediaData.allMediaItems.length > 0
  3173. ) {
  3174. const accountIconHtml = createAccountIcon(isDark).outerHTML;
  3175. const mediaIconHtml = createMediaTypeIcon(
  3176. settings.mediaType,
  3177. isDark
  3178. ).outerHTML;
  3179. const totalZipIconHtml = createTotalZipIcon(isDark).outerHTML;
  3180. const currentPart =
  3181. Math.floor(mediaData.allMediaItems.length / 500) + 1;
  3182.  
  3183. infoContainer.innerHTML = `
  3184. <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${
  3185. mediaData.username
  3186. }</span></div>
  3187. <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(
  3188. mediaData.totalItems
  3189. )}</span></div>
  3190. <div style="margin-top: 8px; display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px;">Total ZIP ${
  3191. currentPart === 1 ? "File" : "Files"
  3192. }:</strong><span>${currentPart}</span></div>
  3193. `;
  3194. }
  3195. }
  3196.  
  3197. if (infoContainer.innerHTML) {
  3198. const accountIcons = infoContainer.querySelectorAll(
  3199. 'svg[viewBox="0 0 24 24"]'
  3200. );
  3201. accountIcons.forEach((icon) => {
  3202. icon.style.color = isDark ? "#ffffff" : "#64748b";
  3203. });
  3204.  
  3205. const mediaIcons = infoContainer.querySelectorAll(
  3206. 'svg[viewBox="0 0 576 512"], svg[viewBox="0 0 512 512"], svg[viewBox="0 0 640 512"]'
  3207. );
  3208. mediaIcons.forEach((icon) => {
  3209. icon.style.color = isDark ? "#ffffff" : "#64748b";
  3210. });
  3211.  
  3212. const totalIcons = infoContainer.querySelectorAll(
  3213. 'svg[viewBox="0 0 448 512"]'
  3214. );
  3215. totalIcons.forEach((icon) => {
  3216. icon.style.color = isDark ? "#ffffff" : "#64748b";
  3217. });
  3218. }
  3219. }
  3220.  
  3221. function updateBatchLabels() {
  3222. const isDark = getSettings().darkTheme;
  3223. const settings = getSettings();
  3224.  
  3225. if (currentBatchLabel && currentBatchLabel.innerHTML) {
  3226. const currentBatchIconHtml = createCurrentBatchIcon(isDark).outerHTML;
  3227. currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${
  3228. settings.darkTheme ? "#ffffff" : "#475569"
  3229. };">Current Batch:</strong><span style="color: ${
  3230. settings.darkTheme ? "#ffffff" : "#475569"
  3231. };">${mediaData.currentPage + 1}</span></div>`;
  3232. }
  3233.  
  3234. if (
  3235. totalBatchLabel &&
  3236. totalBatchLabel.innerHTML &&
  3237. mediaData.totalItems > 0
  3238. ) {
  3239. const totalBatches = Math.ceil(
  3240. mediaData.totalItems / settings.batchSize
  3241. );
  3242. const totalZipIconHtml = createTotalZipIcon(isDark).outerHTML;
  3243. totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${
  3244. settings.darkTheme ? "#ffffff" : "#475569"
  3245. };">Total ZIP ${
  3246. totalBatches === 1 ? "File" : "Files"
  3247. }:</strong><span style="color: ${
  3248. settings.darkTheme ? "#ffffff" : "#475569"
  3249. };">${totalBatches}</span></div>`;
  3250. }
  3251.  
  3252. if (currentBatchLabel && currentBatchLabel.innerHTML) {
  3253. const batchIcons = currentBatchLabel.querySelectorAll("svg");
  3254. batchIcons.forEach((icon) => {
  3255. icon.style.color = isDark ? "#ffffff" : "#64748b";
  3256. });
  3257. }
  3258.  
  3259. if (totalBatchLabel && totalBatchLabel.innerHTML) {
  3260. const zipIcons = totalBatchLabel.querySelectorAll("svg");
  3261. zipIcons.forEach((icon) => {
  3262. icon.style.color = isDark ? "#ffffff" : "#64748b";
  3263. });
  3264. }
  3265. }
  3266.  
  3267. function updateTheme() {
  3268. const isDark = getSettings().darkTheme;
  3269. modalContent.style.backgroundColor = isDark ? "#1f2937" : "#ffffff";
  3270. modalContent.style.color = isDark ? "#f1f5f9" : "#334155";
  3271. header.style.borderBottom = `1px solid ${isDark ? "#374151" : "#e2e8f0"}`;
  3272. title.style.color = isDark ? "#f1f5f9" : "#334155";
  3273. closeButton.style.color = isDark ? "#f1f5f9" : "#0f172a";
  3274. tabs.style.borderBottom = `1px solid ${isDark ? "#374151" : "#e2e8f0"}`;
  3275. mainTab.style.color =
  3276. mainContent.style.display === "block"
  3277. ? isDark
  3278. ? "#f1f5f9"
  3279. : "#0f172a"
  3280. : "#64748b";
  3281. settingsTab.style.color =
  3282. settingsContent.style.display === "block"
  3283. ? isDark
  3284. ? "#f1f5f9"
  3285. : "#0f172a"
  3286. : "#64748b";
  3287. infoContainer.style.backgroundColor = isDark ? "#374151" : "#f1f5f9";
  3288. batchInfoContainer.style.backgroundColor = isDark ? "#374151" : "#f8fafc";
  3289. batchInfoContainer.style.border = `1px solid ${
  3290. isDark ? "#4b5563" : "#e2e8f0"
  3291. }`;
  3292. settingsTabs.style.borderBottom = `1px solid ${
  3293. isDark ? "#374151" : "#e2e8f0"
  3294. }`;
  3295.  
  3296. const allSettingTabs = [fetchTab, authTab, advancedTab];
  3297. allSettingTabs.forEach((tab) => {
  3298. if (tab.style.borderBottom.includes("solid")) {
  3299. tab.style.color = isDark ? "#f1f5f9" : "#0f172a";
  3300. }
  3301. });
  3302. patreonAuthLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3303. patreonAuthInput.style.backgroundColor = isDark ? "#374151" : "#f1f5f9";
  3304. autoBatchLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3305. patreonAuthInput.style.color = isDark ? "#cbd5e1" : "#64748b";
  3306. tokenLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3307. tokenInput.style.backgroundColor = isDark ? "#374151" : "#f1f5f9";
  3308. tokenInput.style.color = isDark ? "#cbd5e1" : "#64748b";
  3309. apiServerLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3310. batchLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3311. batchSizeLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3312. startingBatchLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3313. startingBatchInput.style.backgroundColor = isDark ? "#374151" : "#f1f5f9";
  3314. startingBatchInput.style.color = isDark ? "#cbd5e1" : "#64748b";
  3315. timelineTypeLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3316. mediaTypeLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3317. concurrentLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3318. cacheDurationLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3319. darkThemeLabel.style.color = isDark ? "#f1f5f9" : "#334155";
  3320. const toggleSwitches = [
  3321. timelineTypeToggle,
  3322. mediaTypeToggle,
  3323. batchSizeToggle,
  3324. concurrentToggle,
  3325. cacheDurationToggle,
  3326. apiServerToggle,
  3327. ];
  3328. toggleSwitches.forEach((toggle) => {
  3329. if (toggle) {
  3330. toggle.style.backgroundColor = isDark ? "#374151" : "#f1f5f9";
  3331. }
  3332. });
  3333.  
  3334. if (progressBar) {
  3335. progressBar.style.backgroundColor = isDark ? "#374151" : "#f1f5f9";
  3336. }
  3337.  
  3338. if (currentBatchLabel) {
  3339. currentBatchLabel.style.color = isDark ? "#ffffff" : "#475569";
  3340. }
  3341. if (totalBatchLabel) {
  3342. totalBatchLabel.style.color = isDark ? "#ffffff" : "#475569";
  3343. }
  3344.  
  3345. refreshInfoDisplays();
  3346.  
  3347. updateBatchLabels();
  3348. }
  3349.  
  3350. fetchButton.addEventListener("click", async () => {
  3351. const settings = getSettings();
  3352. if (!settings.authToken) {
  3353. createAuthTokenPopup();
  3354. return;
  3355. }
  3356. if (!settings.patreonAuth) {
  3357. createPatreonAuthPopup();
  3358. return;
  3359. }
  3360. if (settings.autoBatchEnabled && !autoBatchStarted) {
  3361. autoBatchCancelled = false;
  3362. autoBatchStarted = true;
  3363. const batchNums = Object.keys(mediaData.batchData).map(Number);
  3364. mediaData.currentPage =
  3365. batchNums.length > 0 ? Math.max(...batchNums) + 1 : 0;
  3366. }
  3367. if (
  3368. !settings.autoBatchEnabled ||
  3369. (settings.autoBatchEnabled &&
  3370. !autoBatchStarted &&
  3371. Object.keys(mediaData.batchData).length === 0)
  3372. ) {
  3373. infoContainer.style.display = "none";
  3374. buttonContainer.style.display = "none";
  3375. nextBatchButton.style.display = "none";
  3376. prevBatchButton.style.display = "none";
  3377. progressContainer.style.display = "none";
  3378. if (settings.autoBatchEnabled) {
  3379. autoBatchStarted = true;
  3380. mediaData.currentPage = 0;
  3381. }
  3382. }
  3383. fetchButton.disabled = true;
  3384. fetchButton.innerHTML = "";
  3385. fetchButton.appendChild(document.createTextNode("Fetching..."));
  3386.  
  3387. try {
  3388. const cacheKey = `${settings.timelineType}_${settings.mediaType}_${username}_${mediaData.currentPage}_${settings.batchSize}_batch_${settings.batchEnabled}`;
  3389. let data = cacheManager.get(cacheKey);
  3390.  
  3391. if (!data) {
  3392. let url;
  3393. if (settings.batchEnabled) {
  3394. url = `${getServiceBaseUrl()}/metadata/${settings.timelineType}/${
  3395. settings.batchSize
  3396. }/${mediaData.currentPage}/${settings.mediaType}/${username}/${
  3397. settings.authToken
  3398. }/${settings.patreonAuth || ""}`;
  3399. } else {
  3400. url = `${getServiceBaseUrl()}/metadata/${settings.timelineType}/${
  3401. settings.mediaType
  3402. }/${username}/${settings.authToken}/${settings.patreonAuth || ""}`;
  3403. }
  3404.  
  3405. data = await fetchData(url);
  3406. if (data && data.timeline && data.timeline.length > 0) {
  3407. cacheManager.set(cacheKey, data, true);
  3408. }
  3409. }
  3410. if (data.timeline && data.timeline.length > 0) {
  3411. mediaData.mediaItems = data.timeline;
  3412. mediaData.hasMore = data.metadata.has_more;
  3413. mediaData.totalItems = data.total_urls;
  3414.  
  3415. mediaData.batchData[mediaData.currentPage] = [...data.timeline];
  3416.  
  3417. const currentBatchKeys = Object.keys(mediaData.batchData).map(Number);
  3418. for (const batchNum of currentBatchKeys) {
  3419. if (batchNum > mediaData.currentPage) {
  3420. delete mediaData.batchData[batchNum];
  3421. }
  3422. }
  3423. mediaData.allMediaItems = [];
  3424. const maxBatch = Math.max(
  3425. ...Object.keys(mediaData.batchData).map(Number)
  3426. );
  3427. for (let i = 0; i <= maxBatch; i++) {
  3428. if (mediaData.batchData[i]) {
  3429. mediaData.allMediaItems = [
  3430. ...mediaData.allMediaItems,
  3431. ...mediaData.batchData[i],
  3432. ];
  3433. }
  3434. }
  3435.  
  3436. const mediaTypeLabel = getMediaTypeLabel(settings.mediaType);
  3437.  
  3438. if (settings.batchEnabled) {
  3439. const accountIconHtml = createAccountIcon(
  3440. settings.darkTheme
  3441. ).outerHTML;
  3442. const mediaIconHtml = createMediaTypeIcon(
  3443. settings.mediaType,
  3444. settings.darkTheme
  3445. ).outerHTML;
  3446. const totalItemsIconHtml = createTotalItemsIcon(
  3447. settings.darkTheme
  3448. ).outerHTML;
  3449. infoContainer.innerHTML = `
  3450. <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${
  3451. data.account_info.name
  3452. }</span></div>
  3453. <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(
  3454. data.total_urls
  3455. )}</span></div>
  3456. <div style="margin-bottom: 8px; display: flex; align-items: center;">${totalItemsIconHtml}<strong style="margin-right: 6px;">Total Items:</strong><span>${formatNumber(
  3457. mediaData.allMediaItems.length
  3458. )}</span></div>
  3459. `;
  3460. const currentBatchIconHtml = createCurrentBatchIcon(
  3461. settings.darkTheme
  3462. ).outerHTML;
  3463. currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${
  3464. settings.darkTheme ? "#ffffff" : "#475569"
  3465. };">Current Batch:</strong><span style="color: ${
  3466. settings.darkTheme ? "#ffffff" : "#475569"
  3467. };">${mediaData.currentPage + 1}</span></div>`;
  3468.  
  3469. const totalBatches = Math.ceil(
  3470. data.total_urls / settings.batchSize
  3471. );
  3472. const totalZipIconHtml = createTotalZipIcon(
  3473. settings.darkTheme
  3474. ).outerHTML;
  3475. totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${
  3476. settings.darkTheme ? "#ffffff" : "#475569"
  3477. };">Total ZIP ${
  3478. totalBatches === 1 ? "File" : "Files"
  3479. }:</strong><span style="color: ${
  3480. settings.darkTheme ? "#ffffff" : "#475569"
  3481. };">${totalBatches}</span></div>`;
  3482. batchInfoContainer.style.display = "flex";
  3483. batchNavContainer.style.display = "flex";
  3484. } else {
  3485. const currentPart =
  3486. Math.floor(mediaData.allMediaItems.length / 500) + 1;
  3487. const accountIconHtml = createAccountIcon(
  3488. settings.darkTheme
  3489. ).outerHTML;
  3490. const mediaIconHtml = createMediaTypeIcon(
  3491. settings.mediaType,
  3492. settings.darkTheme
  3493. ).outerHTML;
  3494. const totalZipIconHtml = createTotalZipIcon(
  3495. settings.darkTheme
  3496. ).outerHTML;
  3497. infoContainer.innerHTML = `
  3498. <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${
  3499. data.account_info.name
  3500. }</span></div>
  3501. <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(
  3502. data.total_urls
  3503. )}</span></div>
  3504. <div style="margin-top: 8px; display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px;">Total ZIP ${
  3505. currentPart === 1 ? "File" : "Files"
  3506. }:</strong><span>${currentPart}</span></div>
  3507. `;
  3508.  
  3509. batchInfoContainer.style.display = "none";
  3510. batchNavContainer.style.display = "none";
  3511. }
  3512.  
  3513. infoContainer.style.display = "block";
  3514.  
  3515. if (settings.batchEnabled) {
  3516. buttonContainer.style.display = "none";
  3517. } else {
  3518. buttonContainer.innerHTML = "";
  3519. buttonContainer.appendChild(downloadButton);
  3520. buttonContainer.style.display = "block";
  3521. }
  3522. if (settings.batchEnabled && mediaData.hasMore) {
  3523. nextBatchButton.style.display = "block";
  3524. }
  3525. if (
  3526. settings.batchEnabled &&
  3527. mediaData.currentPage > getSettings().startingBatch
  3528. ) {
  3529. prevBatchButton.style.display = "block";
  3530. }
  3531.  
  3532. reassignDownloadHandlers();
  3533.  
  3534. fetchButton.disabled = false;
  3535. const currentMediaTypeLabel = getMediaTypeLabel(
  3536. settings.mediaType
  3537. ).toLowerCase();
  3538.  
  3539. const updatedFetchButtonText = settings.autoBatchEnabled
  3540. ? "Auto Fetch"
  3541. : settings.mediaType === "all"
  3542. ? "Fetch Media"
  3543. : `Fetch ${
  3544. currentMediaTypeLabel === "gif"
  3545. ? "GIF"
  3546. : currentMediaTypeLabel.charAt(0).toUpperCase() +
  3547. currentMediaTypeLabel.slice(1)
  3548. }`;
  3549.  
  3550. fetchButton.innerHTML = "";
  3551. let updatedFetchIcon1 = fetchIcon.cloneNode(true);
  3552. fetchButton.appendChild(updatedFetchIcon1);
  3553. fetchButton.appendChild(
  3554. document.createTextNode(updatedFetchButtonText)
  3555. );
  3556.  
  3557. console.log("Fetch success - Next Batch Debug:", {
  3558. hasMore: mediaData.hasMore,
  3559. nextBatchClicked: mediaData.nextBatchClicked,
  3560. shouldShowPopup: !mediaData.hasMore && mediaData.nextBatchClicked,
  3561. autoBatchEnabled: settings.autoBatchEnabled,
  3562. });
  3563.  
  3564. if (
  3565. !mediaData.hasMore &&
  3566. mediaData.nextBatchClicked &&
  3567. !settings.autoBatchEnabled
  3568. ) {
  3569. console.log(
  3570. "Showing next batch completion popup after successful fetch"
  3571. );
  3572. createInfoDialog(
  3573. "Next batch has completed! All available batches have been fetched."
  3574. );
  3575. }
  3576.  
  3577. if (mediaData.nextBatchClicked) {
  3578. console.log(
  3579. "Resetting nextBatchClicked flag after successful fetch"
  3580. );
  3581. mediaData.nextBatchClicked = false;
  3582. }
  3583.  
  3584. if (settings.autoBatchEnabled && !autoBatchCancelled) {
  3585. prevBatchButton.style.display = "none";
  3586. nextBatchButton.style.display = "none";
  3587. stopFetchButton.style.display = "block";
  3588. if (mediaData.hasMore) {
  3589. setTimeout(() => {
  3590. if (settings.autoBatchEnabled && !autoBatchCancelled) {
  3591. mediaData.currentPage++;
  3592. fetchButton.click();
  3593. }
  3594. }, 1000);
  3595. } else {
  3596. stopFetchButton.style.display = "none";
  3597. prevBatchButton.style.display =
  3598. mediaData.currentPage > 0 ? "block" : "none";
  3599. nextBatchButton.style.display = "none";
  3600. autoBatchStarted = false;
  3601.  
  3602. createInfoDialog(
  3603. "Auto fetch has completed! All available batches have been fetched."
  3604. );
  3605. }
  3606. }
  3607. } else {
  3608. console.log("No media found branch:", {
  3609. nextBatchClicked: mediaData.nextBatchClicked,
  3610. });
  3611.  
  3612. if (mediaData.nextBatchClicked) {
  3613. console.log(
  3614. "Showing next batch completion popup from no media found branch"
  3615. );
  3616. createInfoDialog(
  3617. "Next batch has completed! All available batches have been fetched."
  3618. );
  3619. mediaData.nextBatchClicked = false;
  3620. }
  3621.  
  3622. infoContainer.innerHTML =
  3623. '<div style="color: #ef4444;">No media found, invalid token, or invalid Patreon authentication.</div>';
  3624. infoContainer.style.display = "block";
  3625. fetchButton.disabled = false;
  3626. const currentMediaTypeLabel = getMediaTypeLabel(
  3627. settings.mediaType
  3628. ).toLowerCase();
  3629. const updatedFetchButtonText =
  3630. settings.mediaType === "all"
  3631. ? "Fetch Media"
  3632. : `Fetch ${
  3633. currentMediaTypeLabel === "gif"
  3634. ? "GIF"
  3635. : currentMediaTypeLabel.charAt(0).toUpperCase() +
  3636. currentMediaTypeLabel.slice(1)
  3637. }`;
  3638.  
  3639. fetchButton.innerHTML = "";
  3640. let updatedFetchIcon2 = fetchIcon.cloneNode(true);
  3641. fetchButton.appendChild(updatedFetchIcon2);
  3642. fetchButton.appendChild(
  3643. document.createTextNode(updatedFetchButtonText)
  3644. );
  3645. }
  3646. } catch (error) {
  3647. infoContainer.innerHTML = `<div style="color: #ef4444;">Error: ${error.message}</div>`;
  3648. infoContainer.style.display = "block";
  3649. fetchButton.disabled = false;
  3650.  
  3651. if (mediaData.currentPage > getSettings().startingBatch) {
  3652. prevBatchButton.style.display = "block";
  3653. }
  3654.  
  3655. const currentMediaTypeLabel = getMediaTypeLabel(
  3656. settings.mediaType
  3657. ).toLowerCase();
  3658.  
  3659. const updatedFetchButtonText =
  3660. settings.mediaType === "all"
  3661. ? "Fetch Media"
  3662. : `Fetch ${
  3663. currentMediaTypeLabel === "gif"
  3664. ? "GIF"
  3665. : currentMediaTypeLabel.charAt(0).toUpperCase() +
  3666. currentMediaTypeLabel.slice(1)
  3667. }`;
  3668.  
  3669. fetchButton.innerHTML = "";
  3670. let updatedFetchIcon3 = fetchIcon.cloneNode(true);
  3671. fetchButton.appendChild(updatedFetchIcon3);
  3672. fetchButton.appendChild(
  3673. document.createTextNode(updatedFetchButtonText)
  3674. );
  3675. }
  3676. });
  3677.  
  3678. nextBatchButton.addEventListener("click", () => {
  3679. console.log("Next Batch Button clicked, setting flag to true");
  3680. mediaData.nextBatchClicked = true;
  3681. mediaData.currentPage++;
  3682.  
  3683. autoBatchCancelled = true;
  3684. autoBatchStarted = false;
  3685.  
  3686. const settings = getSettings();
  3687. const cacheKey = `${settings.timelineType}_${settings.mediaType}_${username}_${mediaData.currentPage}_${settings.batchSize}_batch_${settings.batchEnabled}`;
  3688. const cachedData = cacheManager.get(cacheKey);
  3689.  
  3690. if (cachedData && cachedData.timeline && cachedData.timeline.length > 0) {
  3691. mediaData.mediaItems = cachedData.timeline;
  3692. mediaData.hasMore = cachedData.metadata.has_more;
  3693. mediaData.totalItems = cachedData.total_urls;
  3694.  
  3695. mediaData.batchData[mediaData.currentPage] = [...cachedData.timeline];
  3696.  
  3697. mediaData.allMediaItems = [];
  3698. const maxBatch = Math.max(
  3699. ...Object.keys(mediaData.batchData).map(Number)
  3700. );
  3701. for (let i = 0; i <= maxBatch; i++) {
  3702. if (mediaData.batchData[i]) {
  3703. mediaData.allMediaItems = [
  3704. ...mediaData.allMediaItems,
  3705. ...mediaData.batchData[i],
  3706. ];
  3707. }
  3708. }
  3709.  
  3710. refreshInfoDisplays();
  3711.  
  3712. if (settings.batchEnabled) {
  3713. prevBatchButton.style.display =
  3714. mediaData.currentPage > 0 ? "block" : "none";
  3715. nextBatchButton.style.display = mediaData.hasMore ? "block" : "none";
  3716. infoContainer.style.display = "block";
  3717. buttonContainer.style.display = "none";
  3718. batchInfoContainer.style.display = "flex";
  3719. batchNavContainer.style.display = "flex";
  3720. }
  3721.  
  3722. const currentBatchIconHtml = createCurrentBatchIcon(
  3723. settings.darkTheme
  3724. ).outerHTML;
  3725. currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${
  3726. settings.darkTheme ? "#ffffff" : "#475569"
  3727. };">Current Batch:</strong><span style="color: ${
  3728. settings.darkTheme ? "#ffffff" : "#475569"
  3729. };">${mediaData.currentPage + 1}</span></div>`;
  3730. const totalBatches = Math.ceil(
  3731. cachedData.total_urls / settings.batchSize
  3732. );
  3733. const totalZipIconHtml = createTotalZipIcon(
  3734. settings.darkTheme
  3735. ).outerHTML;
  3736. totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${
  3737. settings.darkTheme ? "#ffffff" : "#475569"
  3738. };">Total ZIP ${
  3739. totalBatches === 1 ? "File" : "Files"
  3740. }:</strong><span style="color: ${
  3741. settings.darkTheme ? "#ffffff" : "#475569"
  3742. };">${totalBatches}</span></div>`;
  3743. console.log("Next Batch Debug:", {
  3744. hasMore: mediaData.hasMore,
  3745. nextBatchClicked: mediaData.nextBatchClicked,
  3746. shouldShowPopup: !mediaData.hasMore && mediaData.nextBatchClicked,
  3747. });
  3748.  
  3749. if (!mediaData.hasMore && mediaData.nextBatchClicked) {
  3750. console.log("Showing next batch completion popup");
  3751. createInfoDialog(
  3752. "Next batch has completed! All available batches have been fetched."
  3753. );
  3754. }
  3755. console.log("Resetting nextBatchClicked flag to false");
  3756. mediaData.nextBatchClicked = false;
  3757.  
  3758. reassignDownloadHandlers();
  3759. } else {
  3760. const wasAutoBatchEnabled = getSettings().autoBatchEnabled;
  3761.  
  3762. if (wasAutoBatchEnabled) {
  3763. const newSettings = getSettings();
  3764. newSettings.autoBatchEnabled = false;
  3765. saveSettings(newSettings);
  3766. }
  3767.  
  3768. fetchButton.click();
  3769.  
  3770. if (wasAutoBatchEnabled) {
  3771. setTimeout(() => {
  3772. const newSettings = getSettings();
  3773. newSettings.autoBatchEnabled = true;
  3774. saveSettings(newSettings);
  3775.  
  3776. autoBatchCancelled = true;
  3777. autoBatchStarted = false;
  3778. }, 100);
  3779. }
  3780. }
  3781. });
  3782.  
  3783. prevBatchButton.addEventListener("click", () => {
  3784. if (mediaData.currentPage > 0) {
  3785. mediaData.currentPage--;
  3786.  
  3787. autoBatchCancelled = true;
  3788. autoBatchStarted = false;
  3789.  
  3790. const settings = getSettings();
  3791. const cacheKey = `${settings.timelineType}_${settings.mediaType}_${username}_${mediaData.currentPage}_${settings.batchSize}_batch_${settings.batchEnabled}`;
  3792. let data = cacheManager.get(cacheKey);
  3793.  
  3794. if (data && data.timeline && data.timeline.length > 0) {
  3795. mediaData.mediaItems = data.timeline;
  3796. mediaData.hasMore = data.metadata.has_more;
  3797. mediaData.totalItems = data.total_urls;
  3798.  
  3799. mediaData.batchData[mediaData.currentPage] = [...data.timeline];
  3800.  
  3801. const currentBatchKeys = Object.keys(mediaData.batchData).map(Number);
  3802. for (const batchNum of currentBatchKeys) {
  3803. if (batchNum > mediaData.currentPage) {
  3804. delete mediaData.batchData[batchNum];
  3805. }
  3806. }
  3807. mediaData.allMediaItems = [];
  3808. const maxBatch = Math.max(
  3809. ...Object.keys(mediaData.batchData).map(Number)
  3810. );
  3811. for (let i = 0; i <= maxBatch; i++) {
  3812. if (mediaData.batchData[i]) {
  3813. mediaData.allMediaItems = [
  3814. ...mediaData.allMediaItems,
  3815. ...mediaData.batchData[i],
  3816. ];
  3817. }
  3818. }
  3819.  
  3820. const mediaTypeLabel = getMediaTypeLabel(settings.mediaType);
  3821.  
  3822. if (settings.batchEnabled) {
  3823. const accountIconHtml = createAccountIcon(
  3824. settings.darkTheme
  3825. ).outerHTML;
  3826. const mediaIconHtml = createMediaTypeIcon(
  3827. settings.mediaType,
  3828. settings.darkTheme
  3829. ).outerHTML;
  3830. const totalItemsIconHtml = createTotalItemsIcon(
  3831. settings.darkTheme
  3832. ).outerHTML;
  3833. infoContainer.innerHTML = `
  3834. <div style="margin-bottom: 8px; display: flex; align-items: center;">${accountIconHtml}<strong style="margin-right: 6px;">Account:</strong><span>${
  3835. data.account_info.name
  3836. }</span></div>
  3837. <div style="margin-bottom: 8px; display: flex; align-items: center;">${mediaIconHtml}<strong style="margin-right: 6px;">${mediaTypeLabel} Found:</strong><span>${formatNumber(
  3838. data.total_urls
  3839. )}</span></div>
  3840. <div style="margin-bottom: 8px; display: flex; align-items: center;">${totalItemsIconHtml}<strong style="margin-right: 6px;">Total Items:</strong><span>${formatNumber(
  3841. mediaData.allMediaItems.length
  3842. )}</span></div>
  3843. `;
  3844.  
  3845. const currentBatchIconHtml = createCurrentBatchIcon(
  3846. settings.darkTheme
  3847. ).outerHTML;
  3848. currentBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${currentBatchIconHtml}<strong style="margin-right: 6px; color: ${
  3849. settings.darkTheme ? "#ffffff" : "#475569"
  3850. };">Current Batch:</strong><span style="color: ${
  3851. settings.darkTheme ? "#ffffff" : "#475569"
  3852. };">${mediaData.currentPage + 1}</span></div>`;
  3853.  
  3854. const totalBatches = Math.ceil(
  3855. data.total_urls / settings.batchSize
  3856. );
  3857. const totalZipIconHtml = createTotalZipIcon(
  3858. settings.darkTheme
  3859. ).outerHTML;
  3860. totalBatchLabel.innerHTML = `<div style="display: flex; align-items: center;">${totalZipIconHtml}<strong style="margin-right: 6px; color: ${
  3861. settings.darkTheme ? "#ffffff" : "#475569"
  3862. };">Total ZIP ${
  3863. totalBatches === 1 ? "File" : "Files"
  3864. }:</strong><span style="color: ${
  3865. settings.darkTheme ? "#ffffff" : "#475569"
  3866. };">${totalBatches}</span></div>`;
  3867. batchInfoContainer.style.display = "flex";
  3868. batchNavContainer.style.display = "flex";
  3869. }
  3870.  
  3871. infoContainer.style.display = "block";
  3872.  
  3873. if (settings.batchEnabled) {
  3874. buttonContainer.style.display = "none";
  3875. } else {
  3876. buttonContainer.innerHTML = "";
  3877. buttonContainer.appendChild(downloadButton);
  3878. buttonContainer.style.display = "block";
  3879. }
  3880. if (settings.batchEnabled && mediaData.hasMore) {
  3881. nextBatchButton.style.display = "block";
  3882. }
  3883. if (settings.batchEnabled && mediaData.currentPage > 0) {
  3884. prevBatchButton.style.display = "block";
  3885. }
  3886. reassignDownloadHandlers();
  3887. } else {
  3888. fetchButton.click();
  3889. }
  3890. }
  3891. });
  3892.  
  3893. function chunkMediaItems(items) {
  3894. const chunks = [];
  3895. for (let i = 0; i < items.length; i += 500) {
  3896. chunks.push(items.slice(i, i + 500));
  3897. }
  3898. return chunks;
  3899. }
  3900.  
  3901. function reassignDownloadHandlers() {
  3902. const settings = getSettings();
  3903. if (settings.batchEnabled) {
  3904. downloadCurrentButton.onclick = () => downloadMedia(false);
  3905. downloadAllButton.onclick = () => downloadMedia(true);
  3906. }
  3907. }
  3908.  
  3909. async function downloadMedia(downloadAll) {
  3910. if (mediaData.downloading) return;
  3911.  
  3912. mediaData.downloading = true;
  3913.  
  3914. const settings = getSettings();
  3915. const timestamp = getCurrentTimestamp();
  3916.  
  3917. let itemsToDownload;
  3918. if (downloadAll) {
  3919. itemsToDownload = mediaData.allMediaItems;
  3920. } else {
  3921. itemsToDownload = mediaData.mediaItems;
  3922. }
  3923.  
  3924. mediaData.totalToDownload = itemsToDownload.length;
  3925. mediaData.totalDownloaded = 0;
  3926.  
  3927. progressText.textContent = `Downloading 0/${formatNumber(
  3928. mediaData.totalToDownload
  3929. )}`;
  3930. progressFill.style.width = "0%";
  3931. progressContainer.style.display = "block";
  3932.  
  3933. fetchButton.disabled = true;
  3934. if (settings.batchEnabled) {
  3935. downloadCurrentButton.disabled = true;
  3936. downloadAllButton.disabled = true;
  3937. } else {
  3938. downloadButton.disabled = true;
  3939. }
  3940. nextBatchButton.disabled = true;
  3941.  
  3942. const chunks = chunkMediaItems(itemsToDownload);
  3943.  
  3944. for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
  3945. const chunk = chunks[chunkIndex];
  3946.  
  3947. if (chunk.length === 1 && chunks.length === 1) {
  3948. try {
  3949. const item = chunk[0];
  3950. const formattedDate = formatDate(item.date);
  3951. const baseFilename = `${username}_${formattedDate}_${item.tweet_id}`;
  3952. const fileExtension = item.type === "photo" ? "jpg" : "mp4";
  3953.  
  3954. const filename = `${baseFilename}.${fileExtension}`;
  3955.  
  3956. progressText.textContent = `Downloading 0/1`;
  3957.  
  3958. const blob = await fetchBinary(item.url);
  3959.  
  3960. const downloadLink = document.createElement("a");
  3961. downloadLink.href = URL.createObjectURL(blob);
  3962. downloadLink.download = filename;
  3963. document.body.appendChild(downloadLink);
  3964. downloadLink.click();
  3965. document.body.removeChild(downloadLink);
  3966.  
  3967. mediaData.totalDownloaded = 1;
  3968. progressText.textContent = `Downloading 1/1`;
  3969. progressFill.style.width = "100%";
  3970.  
  3971. continue;
  3972. } catch (error) {}
  3973. }
  3974.  
  3975. const zip = new JSZip();
  3976.  
  3977. const hasImages = chunk.some((item) => item.type === "photo");
  3978. const hasVideos = chunk.some((item) => item.type === "video");
  3979. const hasGifs = chunk.some((item) => item.type === "gif");
  3980.  
  3981. let imageFolder, videoFolder, gifFolder;
  3982. if (settings.mediaType === "all") {
  3983. if (hasImages) imageFolder = zip.folder("image");
  3984. if (hasVideos) videoFolder = zip.folder("video");
  3985. if (hasGifs) gifFolder = zip.folder("gif");
  3986. }
  3987.  
  3988. const filenameMap = {};
  3989.  
  3990. const downloadInBatches = async (items, batchSize) => {
  3991. for (let i = 0; i < items.length; i += batchSize) {
  3992. const batch = items.slice(i, i + batchSize);
  3993.  
  3994. const downloadPromises = batch.map(async (item) => {
  3995. try {
  3996. const formattedDate = formatDate(item.date);
  3997. let baseFilename = `${username}_${formattedDate}_${item.tweet_id}`;
  3998.  
  3999. if (filenameMap[baseFilename] !== undefined) {
  4000. filenameMap[baseFilename]++;
  4001. baseFilename = `${baseFilename}_${String(
  4002. filenameMap[baseFilename]
  4003. ).padStart(2, "0")}`;
  4004. } else {
  4005. filenameMap[baseFilename] = 0;
  4006. }
  4007.  
  4008. const fileExtension = item.type === "photo" ? "jpg" : "mp4";
  4009. const filename = `${baseFilename}.${fileExtension}`;
  4010.  
  4011. const blob = await fetchBinary(item.url);
  4012.  
  4013. if (settings.mediaType === "all") {
  4014. if (item.type === "photo") {
  4015. imageFolder.file(filename, blob);
  4016. } else if (item.type === "video") {
  4017. videoFolder.file(filename, blob);
  4018. } else if (item.type === "gif") {
  4019. gifFolder.file(filename, blob);
  4020. }
  4021. } else {
  4022. zip.file(filename, blob);
  4023. }
  4024.  
  4025. mediaData.totalDownloaded++;
  4026. const completedCount = mediaData.totalDownloaded;
  4027. progressText.textContent = `Downloading ${formatNumber(
  4028. completedCount
  4029. )}/${formatNumber(mediaData.totalToDownload)}`;
  4030. progressFill.style.width = `${
  4031. (completedCount / mediaData.totalToDownload) * 100
  4032. }%`;
  4033. } catch (error) {
  4034. console.error("Error downloading item:", error);
  4035. mediaData.totalDownloaded++;
  4036. }
  4037. });
  4038.  
  4039. await Promise.all(downloadPromises);
  4040. }
  4041. };
  4042.  
  4043. await downloadInBatches(chunk, settings.concurrentDownloads);
  4044.  
  4045. progressText.textContent = `Creating ZIP file ${chunkIndex + 1}/${
  4046. chunks.length
  4047. }...`;
  4048.  
  4049. try {
  4050. const zipBlob = await zip.generateAsync({ type: "blob" });
  4051.  
  4052. let zipFilename;
  4053. if (chunks.length === 1 && chunk.length < 500) {
  4054. zipFilename = `${username}_${timestamp}.zip`;
  4055. } else if (settings.batchEnabled && !downloadAll) {
  4056. zipFilename = `${username}_${timestamp}_part_${String(
  4057. mediaData.currentPage + 1
  4058. ).padStart(2, "0")}.zip`;
  4059. } else {
  4060. zipFilename = `${username}_${timestamp}_part_${String(
  4061. chunkIndex + 1
  4062. ).padStart(2, "0")}.zip`;
  4063. }
  4064.  
  4065. const downloadLink = document.createElement("a");
  4066. downloadLink.href = URL.createObjectURL(zipBlob);
  4067. downloadLink.download = zipFilename;
  4068. document.body.appendChild(downloadLink);
  4069. downloadLink.click();
  4070. document.body.removeChild(downloadLink);
  4071. } catch (error) {
  4072. progressText.textContent = `Error creating ZIP ${chunkIndex + 1}: ${
  4073. error.message
  4074. }`;
  4075. }
  4076. }
  4077. mediaData.downloading = false;
  4078. progressContainer.style.display = "none";
  4079. fetchButton.disabled = false;
  4080. if (settings.batchEnabled) {
  4081. downloadCurrentButton.disabled = false;
  4082. downloadAllButton.disabled = false;
  4083. reassignDownloadHandlers();
  4084. } else {
  4085. downloadButton.disabled = false;
  4086. }
  4087. nextBatchButton.disabled = false;
  4088. createInfoDialog(
  4089. "All media downloaded successfully.",
  4090. "Download Complete"
  4091. );
  4092. return;
  4093. }
  4094.  
  4095. document.body.appendChild(modal);
  4096. }
  4097.  
  4098. function extractUsername() {
  4099. const pathParts = window.location.pathname
  4100. .split("/")
  4101. .filter((part) => part);
  4102. if (pathParts.length > 0) {
  4103. return pathParts[0];
  4104. }
  4105. return null;
  4106. }
  4107.  
  4108. function insertDownloadIconOnWithheld() {
  4109. const withheldHeaders = document.querySelectorAll(
  4110. '[data-testid="empty_state_header_text"]'
  4111. );
  4112.  
  4113. withheldHeaders.forEach((headerDiv) => {
  4114. if (!headerDiv.querySelector(".download-icon-withheld")) {
  4115. const accountWithheldSpan = headerDiv.querySelector("span");
  4116. if (
  4117. accountWithheldSpan &&
  4118. accountWithheldSpan.textContent.includes("Account Withheld")
  4119. ) {
  4120. const username = extractUsername();
  4121. if (!username) return;
  4122.  
  4123. const downloadIcon = createDownloadIcon();
  4124.  
  4125. const iconDiv = document.createElement("div");
  4126. iconDiv.className =
  4127. "download-icon-withheld css-175oi2r r-1awozwy r-xoduu5";
  4128. iconDiv.style.cssText = `
  4129. display: inline-flex;
  4130. align-items: center;
  4131. margin-left: 12px;
  4132. gap: 6px;
  4133. padding: 0 3px;
  4134. transition: transform 0.2s, color 0.2s;
  4135. `;
  4136. iconDiv.appendChild(downloadIcon);
  4137.  
  4138. iconDiv.addEventListener("mouseenter", () => {
  4139. iconDiv.style.transform = "scale(1.1)";
  4140. iconDiv.style.color = "#0ea5e9";
  4141. });
  4142.  
  4143. iconDiv.addEventListener("mouseleave", () => {
  4144. iconDiv.style.transform = "scale(1)";
  4145. iconDiv.style.color = "";
  4146. });
  4147.  
  4148. iconDiv.addEventListener("click", (e) => {
  4149. e.stopPropagation();
  4150. createModal(username);
  4151. });
  4152.  
  4153. headerDiv.appendChild(iconDiv);
  4154. }
  4155. }
  4156. });
  4157. }
  4158.  
  4159. function insertDownloadIcon() {
  4160. const usernameDivs = document.querySelectorAll('[data-testid="UserName"]');
  4161.  
  4162. usernameDivs.forEach((usernameDiv) => {
  4163. if (!usernameDiv.querySelector(".download-icon")) {
  4164. const username = extractUsername();
  4165. if (!username) return;
  4166.  
  4167. const verifiedButton = usernameDiv
  4168. .querySelector('[aria-label*="verified"], [aria-label*="Verified"]')
  4169. ?.closest("button");
  4170.  
  4171. const targetElement = verifiedButton
  4172. ? verifiedButton.parentElement
  4173. : usernameDiv.querySelector(".css-1jxf684")?.closest("span");
  4174.  
  4175. if (targetElement) {
  4176. const downloadIcon = createDownloadIcon();
  4177.  
  4178. const iconDiv = document.createElement("div");
  4179. iconDiv.className = "download-icon css-175oi2r r-1awozwy r-xoduu5";
  4180. iconDiv.style.cssText = `
  4181. display: inline-flex;
  4182. align-items: center;
  4183. margin-left: 6px;
  4184. margin-right: 6px;
  4185. gap: 6px;
  4186. padding: 0 3px;
  4187. transition: transform 0.2s, color 0.2s;
  4188. `;
  4189. iconDiv.appendChild(downloadIcon);
  4190.  
  4191. iconDiv.addEventListener("mouseenter", () => {
  4192. iconDiv.style.transform = "scale(1.1)";
  4193. iconDiv.style.color = "#0ea5e9";
  4194. });
  4195.  
  4196. iconDiv.addEventListener("mouseleave", () => {
  4197. iconDiv.style.transform = "scale(1)";
  4198. iconDiv.style.color = "";
  4199. });
  4200.  
  4201. iconDiv.addEventListener("click", (e) => {
  4202. e.stopPropagation();
  4203. createModal(username);
  4204. });
  4205.  
  4206. const wrapperDiv = document.createElement("div");
  4207. wrapperDiv.style.cssText = `
  4208. display: inline-flex;
  4209. align-items: center;
  4210. gap: 4px;
  4211. `;
  4212. wrapperDiv.appendChild(iconDiv);
  4213. targetElement.parentNode.insertBefore(
  4214. wrapperDiv,
  4215. targetElement.nextSibling
  4216. );
  4217. }
  4218. }
  4219. });
  4220. }
  4221.  
  4222. insertDownloadIcon();
  4223. insertDownloadIconOnWithheld();
  4224.  
  4225. function checkForUserNameElement() {
  4226. const usernameDivs = document.querySelectorAll('[data-testid="UserName"]');
  4227. if (usernameDivs.length > 0) {
  4228. insertDownloadIcon();
  4229. }
  4230.  
  4231. const withheldHeaders = document.querySelectorAll(
  4232. '[data-testid="empty_state_header_text"]'
  4233. );
  4234. if (withheldHeaders.length > 0) {
  4235. insertDownloadIconOnWithheld();
  4236. }
  4237. }
  4238.  
  4239. setInterval(checkForUserNameElement, 100);
  4240.  
  4241. let lastUrl = location.href;
  4242. let lastUsername = extractUsername();
  4243.  
  4244. function checkForChanges() {
  4245. const currentUrl = location.href;
  4246. const currentUsername = extractUsername();
  4247.  
  4248. if (currentUrl !== lastUrl || currentUsername !== lastUsername) {
  4249. lastUrl = currentUrl;
  4250. lastUsername = currentUsername;
  4251.  
  4252. document.querySelectorAll(".download-icon").forEach((icon) => {
  4253. const wrapper = icon.closest("div[style*='display: inline-flex']");
  4254. if (wrapper) {
  4255. wrapper.remove();
  4256. }
  4257. });
  4258.  
  4259. document.querySelectorAll(".download-icon-withheld").forEach((icon) => {
  4260. icon.remove();
  4261. });
  4262.  
  4263. setTimeout(() => {
  4264. insertDownloadIcon();
  4265. insertDownloadIconOnWithheld();
  4266. }, 50);
  4267. }
  4268. }
  4269.  
  4270. const observer = new MutationObserver(() => {
  4271. checkForChanges();
  4272. checkForUserNameElement();
  4273. });
  4274.  
  4275. observer.observe(document.body, {
  4276. childList: true,
  4277. subtree: true,
  4278. attributes: true,
  4279. characterData: true,
  4280. });
  4281.  
  4282. setInterval(checkForChanges, 300);
  4283.  
  4284. const originalPushState = history.pushState;
  4285. const originalReplaceState = history.replaceState;
  4286.  
  4287. history.pushState = function () {
  4288. originalPushState.apply(this, arguments);
  4289. checkForChanges();
  4290. insertDownloadIcon();
  4291. insertDownloadIconOnWithheld();
  4292. };
  4293.  
  4294. history.replaceState = function () {
  4295. originalReplaceState.apply(this, arguments);
  4296. checkForChanges();
  4297. insertDownloadIcon();
  4298. insertDownloadIconOnWithheld();
  4299. };
  4300.  
  4301. window.addEventListener("popstate", () => {
  4302. checkForChanges();
  4303. insertDownloadIcon();
  4304. insertDownloadIconOnWithheld();
  4305. });
  4306. })();

QingJ © 2025

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