Batch download all images and videos from a Twitter/X account, including withheld accounts, in original quality.
// ==UserScript== // @name Twitter/X Media Batch Downloader // @description Batch download all images and videos from a Twitter/X account, including withheld accounts, in original quality. // @icon data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIKICAgIGlkPSJMYXllcl8xIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IgogICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICA8ZyBmaWxsPSIjMWRhMGYxIj4KICAgICAgICA8cG9seWdvbgogICAgICAgICAgICBwb2ludHM9IjEyLjE1Mzk5MiwxMC43Mjk1NTMgOC4wODg2ODQsNS4wNDExOTkgNS45MjA0MSw1LjA0MTE5OSAxMC45NTYyOTksMTIuMDg3MDk3IDExLjU5MDIxLDEyLjk3MzQ1IDE1LjkwMDYzNSwxOS4wMDk1ODMgMTguMDY4OTA5LDE5LjAwOTU4MyAxMi43ODUyMTcsMTEuNjE1OTA2ICAiIC8+CiAgICAgICAgPHBhdGgKICAgICAgICAgICAgZD0iTTIxLjE1OTc5LDFIMi44NDAyMUMxLjgyMzg1MywxLDEsMS44MjM4NTMsMSwyLjg0MDIxdjE4LjMxOTU4QzEsMjIuMTc2MTQ3LDEuODIzODUzLDIzLDIuODQwMjEsMjNoMTguMzE5NTggICBDMjIuMTc2MTQ3LDIzLDIzLDIyLjE3NjE0NywyMywyMS4xNTk3OVYyLjg0MDIxQzIzLDEuODIzODUzLDIyLjE3NjE0NywxLDIxLjE1OTc5LDF6IE0xNS4yMzUzNTIsMjBsLTQuMzYyNTQ5LTYuMjEzMDEzICAgTDUuNDExNDM4LDIwSDRsNi4yNDY4ODctNy4xMDQ2NzVMNCw0aDQuNzY0NjQ4bDQuMTMwMTI3LDUuODgxOTU4TDE4LjA2OTU4LDRoMS40MTEzNzdsLTUuOTU2OTcsNi43NzU2MzVMMjAsMjBIMTUuMjM1MzUyeiIgLz4KICAgIDwvZz4KPC9zdmc+Cg== // @namespace https://xbatch.online // @supportURL https://www.patreon.com/exyezed // @homepageURL https://www.patreon.com/exyezed // @version 4.8 // @author afkarxyz // @antifeature payment Unlock access to the Twitter/X Media Batch Downloader script by becoming a paid member! Join the membership to receive your Patreon auth code. // @license MIT // @match https://twitter.com/* // @match https://x.com/* // @grant GM_xmlhttpRequest // @grant GM_addStyle // @require https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/dexie.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/umd/index.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/preact.min.js // @require https://cdn.jsdelivr.net/npm/[email protected]/hooks/dist/hooks.umd.js // @require https://cdn.jsdelivr.net/npm/@preact/[email protected]/dist/signals-core.min.js // @connect api.xbatch.online // @connect backup.xbatch.online // @connect pbs.twimg.com // @connect video.twimg.com // ==/UserScript== (function() { 'use strict'; const { h, render } = preact; const { useState, useEffect, useRef } = preactHooks; const { signal, effect } = preactSignalsCore; const ICONS = { download: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>`, hardDriveDownload: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hard-drive-download-icon lucide-hard-drive-download"><path d="M12 2v8"/><path d="m16 6-4 4-4-4"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 18h.01"/><path d="M10 18h.01"/></svg>`, send: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-icon lucide-send"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>`, layers: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers-icon lucide-layers"><path d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"/><path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"/><path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"/></svg>`, betweenHorizontal: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-between-horizontal-start-icon lucide-between-horizontal-start"><rect width="13" height="7" x="8" y="3" rx="1"/><path d="m2 9 3 3-3 3"/><rect width="13" height="7" x="8" y="14" rx="1"/></svg>`, play: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play-icon lucide-play"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"/></svg>`, stop: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-icon lucide-square"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`, images: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-images-icon lucide-images"><path d="m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16"/><path d="M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2"/><circle cx="13" cy="7" r="1" fill="currentColor"/><rect x="8" y="2" width="14" height="14" rx="2"/></svg>`, twitter: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter-icon lucide-twitter"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>`, rotateKey: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw-key-icon lucide-rotate-ccw-key"><path d="m14.5 9.5 1 1"/><path d="m15.5 8.5-4 4"/><path d="M3 12a9 9 0 1 0 9-9 9.74 9.74 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><circle cx="10" cy="14" r="2"/></svg>`, checkCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check-big-icon lucide-circle-check-big"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>`, circleX: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x-icon lucide-circle-x"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`, rabbit: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rabbit-icon lucide-rabbit"><path d="M13 16a3 3 0 0 1 2.24 5"/><path d="M18 12h.01"/><path d="M18 21h-8a4 4 0 0 1-4-4 7 7 0 0 1 7-7h.2L9.6 6.4a1 1 0 1 1 2.8-2.8L15.8 7h.2c3.3 0 6 2.7 6 6v1a2 2 0 0 1-2 2h-1a3 3 0 0 0-3 3"/><path d="M20 8.54V4a2 2 0 1 0-4 0v3"/><path d="M7.612 12.524a3 3 0 1 0-1.6 4.3"/></svg>`, authTokenIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-icon lucide-key"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>`, patreonAuthIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-icon lucide-lock"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>`, cloudDownload: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cloud-download-icon lucide-cloud-download"><path d="M12 13v8l-4-4"/><path d="m12 21 4-4"/><path d="M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284"/></svg>`, spinner: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-loader-circle-icon lucide-loader-circle"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>`, sun: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-icon lucide-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>`, moon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon lucide-moon"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/></svg>`, close: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`, eye: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`, eyeOff: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-off-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`, alert: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-alert-icon lucide-circle-alert"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>`, triangleAlert: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`, notepadText: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-notepad-text-icon lucide-notepad-text"><path d="M8 2v4"/><path d="M12 2v4"/><path d="M16 2v4"/><rect width="16" height="18" x="4" y="4" rx="2"/><path d="M8 10h6"/><path d="M8 14h8"/><path d="M8 18h5"/></svg>`, undo: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo2-icon lucide-undo-2"><path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"/></svg>`, server: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server-icon lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>`, photo: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-icon lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>`, video: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-video-icon lucide-video"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>`, animatedGif: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image-play-icon lucide-image-play"><path d="M15 15.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997a1 1 0 0 1-1.517-.86z"/><path d="M21 12.17V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/><path d="m6 21 5-5"/><circle cx="9" cy="9" r="2"/></svg>`, trash: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`, database: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database-icon lucide-database"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>`, chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>`, chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>`, chevronsLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left-icon lucide-chevrons-left"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>`, chevronsRight: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-right-icon lucide-chevrons-right"><path d="m6 17 5-5-5-5"/><path d="m13 17 5-5-5-5"/></svg>`, shredder: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shredder-icon lucide-shredder"><path d="M10 22v-5"/><path d="M14 19v-2"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M18 20v-3"/><path d="M2 13h20"/><path d="M20 13V7l-5-5H6a2 2 0 0 0-2 2v9"/><path d="M6 20v-3"/></svg>`, frown: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-frown-icon lucide-frown"><circle cx="12" cy="12" r="10"/><path d="M16 16s-1.5-2-4-2-4 2-4 2"/><line x1="9" x2="9.01" y1="9" y2="9"/><line x1="15" x2="15.01" y1="9" y2="9"/></svg>` }; const db = new Dexie('TwitterXMediaBatchDownloader'); db.version(1).stores({ settings: 'key', mediaData: 'username, data, timestamp' }); db.version(2).stores({ settings: 'key', mediaData: 'cacheKey, username, timelineType, mediaType, data, timestamp' }).upgrade(tx => { return tx.mediaData.toCollection().modify(item => { item.cacheKey = `${item.username}_media_all`; item.timelineType = 'media'; item.mediaType = 'all'; }); }); const state = { isModalOpen: signal(false), activeTab: signal('dashboard'), authToken: signal(''), patreonAuth: signal(''), isLoading: signal(false), mediaData: signal(null), error: signal(null), errorType: signal('general'), success: signal(null), theme: signal('light'), downloadProgress: signal(0), currentUsername: signal(''), downloadedFiles: signal(0), totalFileSize: signal(0), selectedApi: signal('default'), fetchMode: signal('fresh'), selectedCacheUser: signal(null), cacheMediaPage: signal(1), mediaType: signal('all'), timelineType: signal('media'), isDownloading: signal(false), isDownloadingCurrent: signal(false), fetchType: signal('single'), batchSize: signal(100), startingBatch: signal(0), currentBatchPage: signal(0), isAutoBatch: signal(false), batchedMediaData: signal([]), currentBatchData: signal([]), loadingDirection: signal(null), concurrentLimit: signal(20), showBatchDatabase: signal(false) }; async function loadSettings() { try { const authTokenDoc = await db.settings.get('authToken'); const patreonAuthDoc = await db.settings.get('patreonAuth'); const themeDoc = await db.settings.get('theme'); const selectedApiDoc = await db.settings.get('selectedApi'); const mediaTypeDoc = await db.settings.get('mediaType'); const timelineTypeDoc = await db.settings.get('timelineType'); const batchSizeDoc = await db.settings.get('batchSize'); const startingBatchDoc = await db.settings.get('startingBatch'); const concurrentLimitDoc = await db.settings.get('concurrentLimit'); const showBatchDatabaseDoc = await db.settings.get('showBatchDatabase'); if (authTokenDoc) state.authToken.value = authTokenDoc.value; if (patreonAuthDoc) state.patreonAuth.value = patreonAuthDoc.value; if (themeDoc) state.theme.value = themeDoc.value; if (selectedApiDoc) state.selectedApi.value = selectedApiDoc.value; if (mediaTypeDoc) state.mediaType.value = mediaTypeDoc.value; if (timelineTypeDoc) state.timelineType.value = timelineTypeDoc.value; if (batchSizeDoc) state.batchSize.value = batchSizeDoc.value; if (startingBatchDoc) state.startingBatch.value = startingBatchDoc.value; if (concurrentLimitDoc) state.concurrentLimit.value = concurrentLimitDoc.value; if (showBatchDatabaseDoc) state.showBatchDatabase.value = showBatchDatabaseDoc.value; } catch (error) { console.error('Failed to load settings:', error); } } async function saveSettings() { try { await db.settings.bulkPut([ { key: 'authToken', value: state.authToken.value }, { key: 'patreonAuth', value: state.patreonAuth.value }, { key: 'theme', value: state.theme.value }, { key: 'selectedApi', value: state.selectedApi.value }, { key: 'mediaType', value: state.mediaType.value }, { key: 'timelineType', value: state.timelineType.value }, { key: 'batchSize', value: state.batchSize.value }, { key: 'startingBatch', value: state.startingBatch.value }, { key: 'concurrentLimit', value: state.concurrentLimit.value }, { key: 'showBatchDatabase', value: state.showBatchDatabase.value } ]); } catch (error) { console.error('Failed to save settings:', error); } } const styles = ` .tmd-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tmd-modal { width: 90%; max-width: 600px; max-height: 80vh; border-radius: 12px; overflow: hidden; animation: slideUp 0.3s ease-out; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .tmd-modal.dark { background: hsl(240 5.9% 10%); color: hsl(240 4.8% 95.9%); border: 1px solid hsl(240 5% 40% / 0.5); box-shadow: 0 0 0 1px hsl(240 5% 35% / 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); } .tmd-modal.light { background: white; color: hsl(240 5.9% 10%); border: 1px solid hsl(240 5.9% 90%); } .tmd-header { padding: 20px; border-bottom: 1px solid; display: flex; justify-content: space-between; align-items: center; } .dark .tmd-header { border-color: hsl(240 3.7% 15.9%); } .light .tmd-header { border-color: hsl(240 5.9% 90%); } .tmd-header-title { font-size: 18px; font-weight: 600; color: hsl(204.17deg 87.55% 52.75%); } .tmd-header-controls { display: flex; gap: 8px; align-items: center; } .tmd-theme-toggle { padding: 8px; border-radius: 8px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .dark .tmd-theme-toggle { background: hsl(240 3.7% 15.9%); } .dark .tmd-theme-toggle:hover { background: hsl(240 5.3% 26.1%); } .light .tmd-theme-toggle { background: hsl(240 5.9% 95%); } .light .tmd-theme-toggle:hover { background: hsl(240 5.9% 90%); } .tmd-close-btn { padding: 8px; border-radius: 8px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .dark .tmd-close-btn { background: hsl(240 3.7% 15.9%); } .dark .tmd-close-btn:hover { background: hsl(0deg 84.2% 60.2% / 0.2); } .dark .tmd-close-btn:hover svg { stroke: hsl(0deg 84.2% 60.2%); } .light .tmd-close-btn { background: hsl(240 5.9% 95%); } .light .tmd-close-btn:hover { background: hsl(0deg 84.2% 60.2% / 0.1); } .light .tmd-close-btn:hover svg { stroke: hsl(0deg 84.2% 60.2%); } .tmd-tabs { display: flex; padding: 0 20px; gap: 16px; border-bottom: 1px solid; } .dark .tmd-tabs { border-color: hsl(240 3.7% 15.9%); } .light .tmd-tabs { border-color: hsl(240 5.9% 90%); } .tmd-tab { padding: 12px 0; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; font-weight: 500; } .dark .tmd-tab { color: hsl(240 5% 64.9%); } .light .tmd-tab { color: hsl(240 3.8% 46.1%); } .tmd-tab:hover { color: hsl(204.17deg 87.55% 52.75%); } .tmd-tab.active { color: hsl(204.17deg 87.55% 52.75%); border-bottom-color: hsl(204.17deg 87.55% 52.75%); } .tmd-content { padding: 20px; min-height: 150px; max-height: calc(80vh - 150px); overflow-y: auto; display: flex; flex-direction: column; } .tmd-input-group { margin-bottom: 20px; } .tmd-label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 500; } .tmd-input { width: 100%; padding: 10px 12px; padding-right: 40px; border-radius: 8px; border: 1px solid; font-size: 14px; transition: all 0.2s; font-family: monospace; box-sizing: border-box; } .tmd-input-wrapper { position: relative; width: 100%; } .tmd-input-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: opacity 0.2s; } .tmd-input-toggle:hover { opacity: 1; } .dark .tmd-input { background: hsl(240 3.7% 15.9%); border-color: hsl(240 5.3% 26.1%); color: hsl(240 4.8% 95.9%); } .dark .tmd-input:focus { border-color: hsl(204.17deg 87.55% 52.75%); outline: none; } .light .tmd-input { background: white; border-color: hsl(240 5.9% 90%); color: hsl(240 5.9% 10%); } .light .tmd-input:focus { border-color: hsl(204.17deg 87.55% 52.75%); outline: none; } .tmd-button { padding: 10px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; } .tmd-button-container { display: flex; justify-content: center; margin-top: 15px; } .tmd-button-primary { background: hsl(204.17deg 87.55% 52.75%); color: white; } .tmd-button-primary:hover { background: hsl(204.17deg 87.55% 45%); } .tmd-button-primary:disabled { opacity: 0.5; cursor: not-allowed; } .tmd-button-secondary { background: hsl(142.1deg 76.2% 36.3%); color: white; } .tmd-button-secondary:hover { background: hsl(142.1deg 76.2% 30%); } .tmd-button-secondary:disabled { opacity: 0.5; cursor: not-allowed; } .tmd-button-outline { background: transparent; border: 1px solid; } .dark .tmd-button-outline { border-color: hsl(240 5.3% 26.1%); color: hsl(240 4.8% 95.9%); } .dark .tmd-button-outline:hover { background: hsl(240 3.7% 15.9%); } .light .tmd-button-outline { border-color: hsl(240 5.9% 85%); color: hsl(240 5.9% 10%); } .light .tmd-button-outline:hover { background: hsl(240 5.9% 95%); } .tmd-button-outline:disabled { opacity: 0.5; cursor: not-allowed; } .tmd-button-outline:not(:disabled):hover { background: hsl(240 3.7% 15.9%); } .dark .tmd-button-outline:not(:disabled):hover { background: hsl(240 5.3% 26.1%); border-color: hsl(240 5.3% 35%); } .light .tmd-button-outline:not(:disabled):hover { background: hsl(240 5.9% 90%); border-color: hsl(240 5.9% 70%); } .tmd-spinner { animation: spin 1s linear infinite; } .tmd-error { padding: 12px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; } .tmd-error.auth { background: hsl(45deg 100% 51% / 0.1); color: hsl(45deg 100% 45%); } .tmd-error.api, .tmd-error.username { background: hsl(45deg 100% 51% / 0.1); color: hsl(45deg 100% 45%); } .tmd-error.general { background: hsl(0deg 84.2% 60.2% / 0.1); color: hsl(0deg 84.2% 60.2%); } .tmd-error.failed { background: hsl(0deg 84.2% 60.2% / 0.1); color: hsl(0deg 84.2% 60.2%); } .tmd-error-icon { flex-shrink: 0; display: flex; align-items: center; } .tmd-success { padding: 12px; border-radius: 8px; background: hsl(142.1deg 76.2% 36.3% / 0.1); color: hsl(142.1deg 76.2% 36.3%); margin-bottom: 20px; display: flex; align-items: flex-start; gap: 8px; } .tmd-success-icon { flex-shrink: 0; display: flex; align-items: center; margin-top: 2px; } .tmd-info-card { padding: 16px; border-radius: 8px; margin-bottom: 20px; } .dark .tmd-info-card { background: hsl(240 3.7% 15.9%); border: 1px solid hsl(240 5.3% 26.1%); } .light .tmd-info-card { background: hsl(240 4.8% 95.9%); border: 1px solid hsl(240 5.9% 90%); } .tmd-info-card.clickable { transition: all 0.2s ease; cursor: default; position: relative; z-index: 1; } .tmd-info-card.clickable:hover { z-index: 10; } .dark .tmd-info-card.clickable:hover { background: hsl(240 3.7% 18%); border-color: hsl(240 5.3% 30%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .light .tmd-info-card.clickable:hover { background: hsl(240 4.8% 98%); border-color: hsl(240 5.9% 80%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .tmd-info-row { display: flex; justify-content: space-between; margin-bottom: 8px; } .tmd-info-row:last-child { margin-bottom: 0; } .tmd-info-label { font-weight: 500; } .tmd-progress-bar { width: 100%; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 0; } .dark .tmd-progress-bar { background: hsl(240 3.7% 15.9%); } .light .tmd-progress-bar { background: hsl(240 5.9% 90%); } .tmd-progress-fill { height: 100%; background: linear-gradient(90deg, hsl(204.17deg 87.55% 45%), hsl(204.17deg 87.55% 52.75%) ); transition: width 0.3s ease; } .tmd-progress-info { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 14px; } .dark .tmd-progress-info { color: hsl(240 4.8% 95.9%); } .light .tmd-progress-info { color: hsl(240 5.9% 10%); } .dl-icon { display: inline-flex; margin-left: 6px; padding: 4px; border-radius: 4px; transition: all 0.2s; cursor: pointer; } .tmd-radio-group { display: flex; gap: 20px; margin-top: 8px; } .tmd-radio-item { display: flex; align-items: center; gap: 8px; cursor: pointer; } .tmd-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid; position: relative; transition: all 0.2s; } .dark .tmd-radio { border-color: hsl(240 5.3% 26.1%); background: hsl(240 3.7% 15.9%); } .light .tmd-radio { border-color: hsl(240 5.9% 85%); background: white; } .tmd-radio.checked { border-color: hsl(204.17deg 87.55% 52.75%); } .tmd-radio.checked::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: hsl(204.17deg 87.55% 52.75%); top: 50%; left: 50%; transform: translate(-50%, -50%); } .tmd-radio-label { font-size: 14px; user-select: none; } .tmd-button-square { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; flex-shrink: 0; } .tmd-icon-button { background: transparent; border: none; padding: 6px; cursor: pointer; border-radius: 6px; transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; } .tmd-icon-button:hover { opacity: 1; background: hsl(0deg 84.2% 60.2% / 0.1); } .tmd-icon-button:hover svg { stroke: hsl(0deg 84.2% 60.2%); transition: stroke 0.3s ease; } .tmd-delete-button { transition: all 0.3s ease; } .tmd-delete-button:hover { background: hsl(0deg 84.2% 60.2% / 0.1) !important; border-color: hsl(0deg 84.2% 60.2%) !important; } .tmd-delete-button:hover svg { stroke: hsl(0deg 84.2% 60.2%); transition: stroke 0.3s ease; } .tmd-load-button { transition: all 0.3s ease; } .tmd-load-button:hover { background: hsl(142.1deg 76.2% 36.3% / 0.1) !important; border-color: hsl(142.1deg 76.2% 36.3%) !important; } .tmd-load-button:hover svg { stroke: hsl(142.1deg 76.2% 36.3%); transition: stroke 0.3s ease; } .tmd-download-current-button { transition: all 0.3s ease; } .tmd-download-current-button:hover { background: hsl(142.1deg 76.2% 36.3% / 0.1) !important; border-color: hsl(142.1deg 76.2% 36.3%) !important; } .tmd-download-current-button:hover svg { stroke: hsl(142.1deg 76.2% 36.3%); transition: stroke 0.3s ease; } .tmd-shred-button { transition: all 0.3s ease; } .tmd-shred-button:hover { color: hsl(0deg 84.2% 60.2%) !important; border-color: hsl(0deg 84.2% 60.2%) !important; background: hsl(0deg 84.2% 60.2% / 0.1) !important; } .tmd-shred-button:hover svg { stroke: hsl(0deg 84.2% 60.2%); transition: stroke 0.3s ease; } .tmd-preview-button { transition: all 0.3s ease; } .tmd-preview-button:hover { background: hsl(204.17deg 87.55% 52.75% / 0.1) !important; border-color: hsl(204.17deg 87.55% 52.75%) !important; } .tmd-preview-button:hover svg { stroke: hsl(204.17deg 87.55% 52.75%); transition: stroke 0.3s ease; } .tmd-download-single-button { transition: all 0.3s ease; } .tmd-download-single-button:hover { background: hsl(142.1deg 76.2% 36.3% / 0.1) !important; border-color: hsl(142.1deg 76.2% 36.3%) !important; } .tmd-download-single-button:hover svg { stroke: hsl(142.1deg 76.2% 36.3%); transition: stroke 0.3s ease; } .tmd-batch-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; } .tmd-batch-controls-row { display: flex; gap: 8px; justify-content: center; } .tmd-button-stop:not(:disabled):hover { background: hsl(0deg 84.2% 60.2% / 0.1) !important; border-color: hsl(0deg 84.2% 60.2%) !important; color: hsl(0deg 84.2% 60.2%) !important; } .tmd-button-stop:not(:disabled):hover svg { stroke: hsl(0deg 84.2% 60.2%); } .tmd-button-start:not(:disabled):hover { background: hsl(142.1deg 76.2% 36.3% / 0.1) !important; border-color: hsl(142.1deg 76.2% 36.3%) !important; color: hsl(142.1deg 76.2% 36.3%) !important; } .tmd-button-start:not(:disabled):hover svg { stroke: hsl(142.1deg 76.2% 36.3%); } .tmd-tweet-link { text-decoration: none; cursor: pointer; transition: all 0.2s; } .tmd-tweet-link:hover { opacity: 0.8; text-decoration: underline; filter: brightness(1.2); } .tmd-filter-button { transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .tmd-filter-button.tmd-filter-photo:hover { background: hsl(142.1deg 76.2% 36.3% / 0.1) !important; border-color: hsl(142.1deg 76.2% 36.3%) !important; } .tmd-filter-button.tmd-filter-photo:hover svg { stroke: hsl(142.1deg 76.2% 36.3%); } .tmd-filter-button.tmd-filter-video:hover { background: hsl(37.7deg 92.1% 50.2% / 0.1) !important; border-color: hsl(37.7deg 92.1% 50.2%) !important; } .tmd-filter-button.tmd-filter-video:hover svg { stroke: hsl(37.7deg 92.1% 50.2%); } .tmd-filter-button.tmd-filter-gif:hover { background: hsl(270deg 60% 50% / 0.1) !important; border-color: hsl(270deg 60% 50%) !important; } .tmd-filter-button.tmd-filter-gif:hover svg { stroke: hsl(270deg 60% 50%); } .tmd-alert-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; } .tmd-alert { background: white; border-radius: 12px; padding: 24px; max-width: 400px; width: 90%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); animation: slideUp 0.3s ease-out; } .dark .tmd-alert { background: hsl(240 5.9% 10%); color: hsl(240 4.8% 95.9%); border: 1px solid hsl(240 3.7% 15.9%); } .tmd-alert-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; } .tmd-alert-message { margin-bottom: 20px; opacity: 0.9; } .tmd-alert-buttons { display: flex; gap: 12px; justify-content: flex-end; } .tmd-alert-button { padding: 8px 16px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: all 0.2s; border: none; } .tmd-alert-button-cancel { background: transparent; border: 1px solid; } .dark .tmd-alert-button-cancel { border-color: hsl(240 5.3% 26.1%); color: hsl(240 4.8% 95.9%); } .dark .tmd-alert-button-cancel:hover { background: hsl(240 3.7% 15.9%); } .light .tmd-alert-button-cancel { border-color: hsl(240 5.9% 85%); color: hsl(240 5.9% 10%); } .light .tmd-alert-button-cancel:hover { background: hsl(240 5.9% 95%); } .tmd-alert-button-confirm { background: hsl(0deg 84.2% 60.2%); color: white; } .tmd-alert-button-confirm:hover { background: hsl(0deg 84.2% 50%); } /* Remove spinner arrows from number inputs */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } /* Media list container for Database tab */ .tmd-media-list-container { flex: 1; overflow-y: auto; overflow-x: hidden; margin-bottom: 16px; padding: 2px; position: relative; } .tmd-database-content { display: flex; flex-direction: column; height: 100%; } .tmd-media-list-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* Responsive design for mobile */ @media (max-width: 480px) { .tmd-service-data-row { flex-direction: column !important; gap: 20px !important; } .tmd-service-data-row > div { flex: none !important; width: 100% !important; } .tmd-content { max-height: calc(100vh - 180px); padding: 15px; } .tmd-modal { max-height: 90vh; } .tmd-media-list-container { max-height: calc(100vh - 380px); } /* Special handling for Download Current and Download All buttons */ .tmd-download-current-button, .tmd-button-secondary:has(span svg[class*="download"]) { padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap !important; min-width: auto !important; } .tmd-download-current-button span, .tmd-button-secondary:has(span svg[class*="download"]) span { font-size: 13px !important; } .tmd-download-current-button svg, .tmd-button-secondary:has(span svg[class*="download"]) svg { width: 16px !important; height: 16px !important; } /* Special handling for Fetch Data and Convert GIF buttons */ .tmd-button-primary, .tmd-button-secondary:has(span svg[class*="image-play"]) { padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap !important; min-width: auto !important; } .tmd-button-primary span, .tmd-button-secondary:has(span svg[class*="image-play"]) span { font-size: 13px !important; } .tmd-button-primary svg, .tmd-button-secondary:has(span svg[class*="image-play"]) svg { width: 16px !important; height: 16px !important; } } `; GM_addStyle(styles); function Modal() { const modalRef = useRef(null); useEffect(() => { function handleEscape(e) { const activeElement = document.activeElement; const isTyping = activeElement && ( activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.tagName === 'SELECT' || activeElement.contentEditable === 'true' ); if (e.key === 'Escape' && state.isModalOpen.value && !isTyping) { state.isModalOpen.value = false; } } document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, []); const handleOverlayClick = (e) => { if (e.target === e.currentTarget) { const activeElement = document.activeElement; const isInputFocused = activeElement && ( activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.tagName === 'SELECT' ); if (!isInputFocused) { state.isModalOpen.value = false; } } }; const toggleTheme = () => { state.theme.value = state.theme.value === 'dark' ? 'light' : 'dark'; saveSettings(); }; if (!state.isModalOpen.value) return null; return h('div', { className: 'tmd-modal-overlay', onClick: handleOverlayClick }, h('div', { className: `tmd-modal ${state.theme.value}`, ref: modalRef }, h('div', { className: 'tmd-header' }, h('div', { className: 'tmd-header-title' }, state.currentUsername.value ? `@${state.currentUsername.value}` : 'No User Detected' ), h('div', { className: 'tmd-header-controls' }, h('div', { className: 'tmd-theme-toggle', onClick: toggleTheme, dangerouslySetInnerHTML: { __html: state.theme.value === 'dark' ? ICONS.sun : ICONS.moon } }), h('div', { className: 'tmd-close-btn', onClick: () => state.isModalOpen.value = false, dangerouslySetInnerHTML: { __html: ICONS.close } }) ) ), h('div', { className: 'tmd-tabs' }, h('div', { className: `tmd-tab ${state.activeTab.value === 'dashboard' ? 'active' : ''}`, onClick: () => state.activeTab.value = 'dashboard' }, 'Dashboard'), h('div', { className: `tmd-tab ${state.activeTab.value === 'database' ? 'active' : ''}`, onClick: () => state.activeTab.value = 'database' }, 'Database'), h('div', { className: `tmd-tab ${state.activeTab.value === 'settings' ? 'active' : ''}`, onClick: () => state.activeTab.value = 'settings' }, 'Settings'), h('div', { className: `tmd-tab ${state.activeTab.value === 'auth' ? 'active' : ''}`, onClick: () => state.activeTab.value = 'auth' }, 'Auth') ), h('div', { className: 'tmd-content' }, state.activeTab.value === 'dashboard' ? h(DashboardTab) : state.activeTab.value === 'database' ? h(DatabaseTab) : state.activeTab.value === 'settings' ? h(SettingsTab) : h(AuthTab) ) ) ); } function DashboardTab() { const [currentFiles, setCurrentFiles] = useState(state.downloadedFiles.value); const [currentSize, setCurrentSize] = useState(state.totalFileSize.value); useEffect(() => { const cleanupDownloadedFiles = effect(() => { setCurrentFiles(state.downloadedFiles.value); }); const cleanupTotalFileSize = effect(() => { setCurrentSize(state.totalFileSize.value); }); return () => { if (typeof cleanupDownloadedFiles === 'function') { cleanupDownloadedFiles(); } if (typeof cleanupTotalFileSize === 'function') { cleanupTotalFileSize(); } }; }, []); const fetchBatchMediaData = async (page = 0, isRetry = false) => { if (state.fetchMode.value === 'cache') { if (!state.currentUsername.value) { state.error.value = 'No username detected. Please navigate to a user profile.'; state.errorType.value = 'username'; setTimeout(() => { if (state.error.value === 'No username detected. Please navigate to a user profile.') { state.error.value = null; } }, 2000); return null; } state.isLoading.value = true; state.error.value = null; state.errorType.value = 'general'; try { const normalizedUsername = state.currentUsername.value.toLowerCase(); const cacheKey = `${normalizedUsername}_${state.timelineType.value}_${state.mediaType.value}`; const cachedData = await db.mediaData.get(cacheKey); if (cachedData) { const startIdx = page * state.batchSize.value; const endIdx = startIdx + state.batchSize.value; const batchTimeline = cachedData.data.timeline.slice(startIdx, endIdx); if (page === 0 || page === state.startingBatch.value) { state.batchedMediaData.value = batchTimeline; state.currentBatchData.value = batchTimeline; state.mediaData.value = { account_info: cachedData.data.account_info, timeline: batchTimeline, metadata: { has_more: endIdx < cachedData.data.timeline.length } }; } else { const updatedTimeline = [...state.batchedMediaData.value, ...batchTimeline]; state.batchedMediaData.value = updatedTimeline; state.currentBatchData.value = batchTimeline; state.mediaData.value = { ...state.mediaData.value, timeline: updatedTimeline, metadata: { has_more: endIdx < cachedData.data.timeline.length } }; } state.currentBatchPage.value = page; state.isLoading.value = false; return state.mediaData.value.metadata; } else { state.isLoading.value = false; state.error.value = `No cached data found for @${state.currentUsername.value}. Please fetch fresh data first.`; state.errorType.value = 'general'; setTimeout(() => { if (state.error.value === `No cached data found for @${state.currentUsername.value}. Please fetch fresh data first.`) { state.error.value = null; } }, 2000); return null; } } catch (error) { console.error('Failed to load cached data:', error); state.isLoading.value = false; state.error.value = `Failed to load cached data: ${error.message || 'Unknown error'}`; state.errorType.value = 'general'; setTimeout(() => { if (state.error.value && state.error.value.startsWith('Failed to load cached data:')) { state.error.value = null; } }, 2000); return null; } } if (!state.patreonAuth.value || !state.authToken.value || !state.currentUsername.value) { state.error.value = 'Please configure authentication tokens and ensure username is detected'; state.errorType.value = 'auth'; setTimeout(() => { if (state.error.value === 'Please configure authentication tokens and ensure username is detected') { state.error.value = null; } }, 2000); return null; } state.isLoading.value = true; state.error.value = null; const api = state.selectedApi.value === 'backup' ? 'https://backup.xbatch.online' : 'https://api.xbatch.online'; try { const url = `${api}/metadata/${state.timelineType.value}/${state.batchSize.value}/${page}/${state.mediaType.value}/${state.currentUsername.value}/${state.authToken.value}/${state.patreonAuth.value}`; const response = await new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: 'GET', url: url, timeout: 60000, onload: (res) => { if (res.status === 200) { try { const data = JSON.parse(res.responseText); resolve(data); } catch (parseError) { reject(new Error('Invalid response format')); } } else { reject(new Error(`API error (${res.status})`)); } }, onerror: () => reject(new Error('Network error')), ontimeout: () => reject(new Error('Request timeout')) }); }); if (!response || !response.account_info || !response.timeline) { throw new Error('Invalid response format'); } if (response.timeline.length === 0) { state.isLoading.value = false; const mediaTypeText = state.mediaType.value === 'gif' ? 'GIFs' : state.mediaType.value === 'image' ? 'images' : state.mediaType.value === 'video' ? 'videos' : 'media'; state.error.value = `@${state.currentUsername.value} doesn't have any ${mediaTypeText}. No data was cached.`; state.errorType.value = 'username'; setTimeout(() => { if (state.error.value && state.error.value.includes("doesn't have any")) { state.error.value = null; } }, 3000); return null; } if (page === 0 || page === state.startingBatch.value) { state.batchedMediaData.value = response.timeline; state.currentBatchData.value = response.timeline; state.mediaData.value = { account_info: response.account_info, timeline: response.timeline, metadata: response.metadata }; } else { const updatedTimeline = [...state.batchedMediaData.value, ...response.timeline]; state.batchedMediaData.value = updatedTimeline; state.currentBatchData.value = response.timeline; state.mediaData.value = { ...state.mediaData.value, timeline: updatedTimeline, metadata: response.metadata }; } state.currentBatchPage.value = page; state.isLoading.value = false; if (response.timeline.length > 0) { const normalizedUsername = state.currentUsername.value.toLowerCase(); const isBatch = state.fetchType.value === 'batch' || state.fetchType.value === 'autoBatch'; const cacheKey = isBatch ? `${normalizedUsername}_${state.timelineType.value}_${state.mediaType.value}_batch` : `${normalizedUsername}_${state.timelineType.value}_${state.mediaType.value}`; if (isBatch) { const existingCache = await db.mediaData.get(cacheKey); if (page === 0 || page === state.startingBatch.value || !existingCache) { await db.mediaData.put({ cacheKey: cacheKey, username: normalizedUsername, timelineType: state.timelineType.value, mediaType: state.mediaType.value, data: response, timestamp: Date.now(), isBatch: true }); } else { const combinedTimeline = [...existingCache.data.timeline, ...response.timeline]; await db.mediaData.put({ cacheKey: cacheKey, username: normalizedUsername, timelineType: state.timelineType.value, mediaType: state.mediaType.value, data: { ...response, timeline: combinedTimeline }, timestamp: Date.now(), isBatch: true }); } } else { await db.mediaData.put({ cacheKey: cacheKey, username: normalizedUsername, timelineType: state.timelineType.value, mediaType: state.mediaType.value, data: response, timestamp: Date.now(), isBatch: false }); } } return response.metadata; } catch (error) { state.isLoading.value = false; state.error.value = error.message; state.errorType.value = 'api'; setTimeout(() => { if (state.error.value === error.message) { state.error.value = null; } }, 2000); return null; } }; const handleNextBatch = async () => { state.loadingDirection.value = 'next'; const metadata = await fetchBatchMediaData(state.currentBatchPage.value + 1); if (metadata && !metadata.has_more) { state.success.value = 'All batches fetched successfully!'; setTimeout(() => { if (state.success.value === 'All batches fetched successfully!') { state.success.value = null; } }, 2000); } state.loadingDirection.value = null; }; const handlePreviousBatch = async () => { if (state.currentBatchPage.value > state.startingBatch.value) { state.loadingDirection.value = 'prev'; await fetchBatchMediaData(state.currentBatchPage.value - 1); state.loadingDirection.value = null; } }; const startAutoBatch = async () => { state.isAutoBatch.value = true; let currentPage = state.currentBatchPage.value || state.startingBatch.value; while (state.isAutoBatch.value) { const metadata = await fetchBatchMediaData(currentPage); if (!metadata || !metadata.has_more) { state.isAutoBatch.value = false; state.success.value = 'Auto batch completed!'; setTimeout(() => { if (state.success.value === 'Auto batch completed!') { state.success.value = null; } }, 2000); break; } currentPage++; await new Promise(resolve => setTimeout(resolve, 500)); } }; const stopAutoBatch = () => { state.isAutoBatch.value = false; }; const downloadCurrentBatch = async () => { if (!state.currentBatchData.value || state.currentBatchData.value.length === 0) { state.error.value = 'No current batch data available'; state.errorType.value = 'general'; setTimeout(() => { if (state.error.value === 'No current batch data available') { state.error.value = null; } }, 2000); return; } if (state.isDownloadingCurrent.value) return; state.isDownloadingCurrent.value = true; const tempMediaData = state.mediaData.value; state.mediaData.value = { ...state.mediaData.value, timeline: state.currentBatchData.value }; await downloadMedia(); state.mediaData.value = tempMediaData; state.isDownloadingCurrent.value = false; }; const generateNewAuthToken = async () => { if (!state.patreonAuth.value) return null; const api = state.selectedApi.value === 'backup' ? 'https://backup.xbatch.online' : 'https://api.xbatch.online'; const url = `${api}/token/${state.patreonAuth.value}`; try { const response = await new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: 'GET', url: url, timeout: 60000, onload: (res) => { if (res.status === 200) { try { const data = JSON.parse(res.responseText); resolve(data); } catch (parseError) { reject(new Error('Invalid token response')); } } else { reject(new Error(`Token generation failed: ${res.status}`)); } }, onerror: () => reject(new Error('Network error')), ontimeout: () => reject(new Error('Request timeout')) }); }); if (response.auth_token) { state.authToken.value = response.auth_token; await saveSettings(); console.log('✓ Auth token regenerated successfully'); return response.auth_token; } } catch (error) { console.error('Failed to generate new auth token:', error); } return null; }; const fetchMediaData = async (isRetry = false) => { if (state.fetchMode.value === 'cache') { if (!state.currentUsername.value) { state.error.value = 'No username detected. Please navigate to a user profile.'; state.errorType.value = 'username'; setTimeout(() => { if (state.error.value === 'No username detected. Please navigate to a user profile.') { state.error.value = null; } }, 2000); return; } state.isLoading.value = true; state.error.value = null; state.errorType.value = 'general'; try { const normalizedUsername = state.currentUsername.value.toLowerCase(); const cacheKey = `${normalizedUsername}_${state.timelineType.value}_${state.mediaType.value}`; const cachedData = await db.mediaData.get(cacheKey); if (cachedData) { state.mediaData.value = cachedData.data; state.isLoading.value = false; } else { state.isLoading.value = false; state.error.value = `No cached data found for @${state.currentUsername.value} with ${state.mediaType.value} media from ${state.timelineType.value} timeline. Please fetch fresh data first.`; state.errorType.value = 'general'; setTimeout(() => { if (state.error.value && state.error.value.includes('No cached data found for')) { state.error.value = null; } }, 2000); } } catch (error) { console.error('Failed to load cached data:', error); state.isLoading.value = false; state.error.value = `Failed to load cached data: ${error.message || 'Unknown error'}. Please try fresh fetch.`; state.errorType.value = 'general'; setTimeout(() => { if (state.error.value && state.error.value.startsWith('Failed to load cached data:')) { state.error.value = null; } }, 2000); } return; } if (!state.patreonAuth.value) { state.error.value = 'Please configure Patreon Auth token in the Auth tab'; state.errorType.value = 'auth'; setTimeout(() => { if (state.error.value === 'Please configure Patreon Auth token in the Auth tab') { state.error.value = null; } }, 2000); return; } if (!state.authToken.value) { state.error.value = 'Please configure Auth Token in the Auth tab'; state.errorType.value = 'auth'; setTimeout(() => { if (state.error.value === 'Please configure Auth Token in the Auth tab') { state.error.value = null; } }, 2000); return; } if (!state.currentUsername.value) { state.error.value = 'No username detected. Please navigate to a user profile.'; state.errorType.value = 'username'; setTimeout(() => { if (state.error.value === 'No username detected. Please navigate to a user profile.') { state.error.value = null; } }, 2000); return; } state.isLoading.value = true; state.error.value = null; state.errorType.value = 'general'; const api = state.selectedApi.value === 'backup' ? 'https://backup.xbatch.online' : 'https://api.xbatch.online'; try { const url = state.patreonAuth.value === 'xbatchdemo' && state.currentUsername.value === 'xbatchdemo' ? `${api}/demo/media/all/xbatchdemo/${state.authToken.value}/xbatchdemo` : `${api}/metadata/${state.timelineType.value}/${state.mediaType.value}/${state.currentUsername.value}/${state.authToken.value}/${state.patreonAuth.value}`; let timeoutId; const response = await new Promise((resolve, reject) => { timeoutId = setTimeout(() => { state.isLoading.value = false; reject(new Error('Request timeout - API took too long to respond')); }, 60000); try { GM_xmlhttpRequest({ method: 'GET', url: url, timeout: 60000, onload: (res) => { clearTimeout(timeoutId); if (res.status === 200) { try { const data = JSON.parse(res.responseText); resolve(data); } catch (parseError) { state.isLoading.value = false; reject(new Error('Invalid response format')); } } else if (res.status === 401) { state.isLoading.value = false; reject(new Error('Invalid authentication tokens')); } else if (res.status === 403) { state.isLoading.value = false; reject(new Error('Access forbidden - check your Patreon auth')); } else if (res.status === 404) { state.isLoading.value = false; reject(new Error('User not found or no media available')); } else if (res.status === 429) { state.isLoading.value = false; reject(new Error('Rate limit exceeded - please try again later')); } else if (res.status >= 500) { state.isLoading.value = false; reject(new Error('Server error - please try backup API')); } else { state.isLoading.value = false; reject(new Error(`API error (${res.status}): ${res.responseText || 'Unknown error'}`.substring(0, 200))); } }, onerror: () => { clearTimeout(timeoutId); state.isLoading.value = false; reject(new Error('Network error - please check your connection')); }, ontimeout: () => { clearTimeout(timeoutId); state.isLoading.value = false; reject(new Error('Request timeout - API took too long to respond')); } }); } catch (err) { clearTimeout(timeoutId); state.isLoading.value = false; reject(new Error('Failed to make request')); } }); if (timeoutId) clearTimeout(timeoutId); if (!response || !response.account_info || !response.timeline) { state.isLoading.value = false; state.error.value = 'Invalid response format from API. Please check your authentication.'; state.errorType.value = 'api'; setTimeout(() => { if (state.error.value === 'Invalid response format from API. Please check your authentication.') { state.error.value = null; } }, 2000); return; } if (response.timeline.length === 0) { state.isLoading.value = false; const mediaTypeText = state.mediaType.value === 'gif' ? 'GIFs' : state.mediaType.value === 'image' ? 'images' : state.mediaType.value === 'video' ? 'videos' : 'media'; state.error.value = `@${state.currentUsername.value} doesn't have any ${mediaTypeText}. No data was cached.`; state.errorType.value = 'username'; setTimeout(() => { if (state.error.value && state.error.value.includes("doesn't have any")) { state.error.value = null; } }, 3000); return; } state.mediaData.value = response; if (response.timeline.length > 0) { const normalizedUsername = state.currentUsername.value.toLowerCase(); const cacheKey = `${normalizedUsername}_${state.timelineType.value}_${state.mediaType.value}`; await db.mediaData.put({ cacheKey: cacheKey, username: normalizedUsername, timelineType: state.timelineType.value, mediaType: state.mediaType.value, data: response, timestamp: Date.now() }); } state.isLoading.value = false; } catch (error) { console.error(`Failed with ${api}:`, error); if (!isRetry && (error.message.includes('Invalid authentication') || error.message.includes('Invalid response format') || error.message.includes('Access forbidden') || (error.message.includes('API error') && error.message.includes('401')))) { console.log('Auth token might be expired. Attempting to regenerate...'); const newToken = await generateNewAuthToken(); if (newToken) { console.log('Retrying fetch with new auth token...'); return fetchMediaData(true); } else { state.isLoading.value = false; state.error.value = 'Authentication failed. Unable to generate new auth token. Please check your Patreon Auth.'; state.errorType.value = 'auth'; setTimeout(() => { if (state.error.value === 'Authentication failed. Unable to generate new auth token. Please check your Patreon Auth.') { state.error.value = null; } }, 2000); return; } } state.isLoading.value = false; if (error.message.includes('Invalid authentication')) { state.error.value = 'Invalid authentication tokens. Please check your Auth Token and Patreon Auth in the Auth tab.'; state.errorType.value = 'auth'; } else if (error.message.includes('Access forbidden')) { state.error.value = 'Access forbidden. Your Patreon auth may be invalid or expired.'; state.errorType.value = 'auth'; } else if (error.message.includes('User not found')) { state.error.value = `User @${state.currentUsername.value} not found or has no media.`; state.errorType.value = 'username'; } else if (error.message.includes('Rate limit')) { state.error.value = 'Rate limit exceeded. Please wait a moment and try again.'; state.errorType.value = 'api'; } else if (error.message.includes('Server error')) { state.error.value = 'Server error. Please try using the Backup API service.'; state.errorType.value = 'api'; } else if (error.message.includes('timeout')) { state.error.value = 'Request timed out. The API is taking too long to respond. Please try again.'; state.errorType.value = 'api'; } else if (error.message.includes('Network error')) { state.error.value = 'Network error. Please check your internet connection.'; state.errorType.value = 'api'; } else { state.error.value = error.message || 'Failed to fetch media data. Please check your settings and try again.'; state.errorType.value = 'api'; } setTimeout(() => { if (state.error.value) { state.error.value = null; } }, 2000); } }; const downloadMedia = async () => { if (!state.mediaData.value) return; if (state.isDownloading.value) return; state.isDownloading.value = true; state.downloadProgress.value = 0; state.downloadedFiles.value = 0; state.totalFileSize.value = 0; if (!state.mediaData.value?.timeline || !Array.isArray(state.mediaData.value.timeline)) { state.error.value = 'Invalid media data structure. Please refetch the data.'; state.errorType.value = 'general'; state.isDownloading.value = false; setTimeout(() => { if (state.error.value === 'Invalid media data structure. Please refetch the data.') { state.error.value = null; } }, 2000); return; } const { timeline } = state.mediaData.value; const totalItems = timeline.length; const zipFiles = {}; let successCount = 0; let failedCount = 0; let totalSize = 0; let processedCount = 0; const CONCURRENT_LIMIT = state.concurrentLimit.value || 20; const BATCH_DELAY = 500; console.log(`Starting parallel download of ${totalItems} media files...`); console.log(`Concurrent limit: ${CONCURRENT_LIMIT} files`); const tweetGroups = {}; timeline.forEach((item, idx) => { if (!tweetGroups[item.tweet_id]) { tweetGroups[item.tweet_id] = []; } tweetGroups[item.tweet_id].push({ item, originalIndex: idx }); }); const indexToFileNumber = {}; Object.values(tweetGroups).forEach(group => { group.forEach((entry, fileIndex) => { indexToFileNumber[entry.originalIndex] = group.length > 1 ? (fileIndex + 1) : null; }); }); const downloadFile = async (item, index) => { try { const date = dayjs(item.date).format('YYYY-MM-DD_HHmmss'); const ext = item.type === 'video' ? 'mp4' : item.type === 'animated_gif' ? 'gif' : 'jpg'; const fileNumber = indexToFileNumber[index]; const actualUsername = state.mediaData.value?.account_info?.name || state.currentUsername.value; const filename = fileNumber !== null ? `${date}_${actualUsername}_${item.tweet_id}_${fileNumber}.${ext}` : `${date}_${actualUsername}_${item.tweet_id}.${ext}`; console.log(`[${index + 1}/${totalItems}] Starting download: ${item.url}`); const response = await new Promise((resolve, reject) => { const timeout = setTimeout(() => { console.warn(`Timeout for file ${index + 1}`); reject(new Error('Download timeout')); }, 60000); GM_xmlhttpRequest({ method: 'GET', url: item.url, responseType: 'arraybuffer', onload: (res) => { clearTimeout(timeout); if (res.status === 200 && res.response) { resolve(res); } else { reject(new Error(`HTTP ${res.status}`)); } }, onerror: (err) => { clearTimeout(timeout); reject(err); }, ontimeout: () => { clearTimeout(timeout); reject(new Error('Request timeout')); } }); }); if (!response.response || response.response.byteLength === 0) { throw new Error('Empty response'); } const fileData = new Uint8Array(response.response); zipFiles[filename] = fileData; successCount++; totalSize += fileData.length; console.log(`✓ [${index + 1}/${totalItems}] Downloaded: ${filename} (${(fileData.length / 1024).toFixed(2)} KB)`); return { success: true, size: fileData.length }; } catch (error) { failedCount++; console.error(`✗ [${index + 1}/${totalItems}] Failed:`, item.url, error.message); return { success: false, error: error.message }; } finally { processedCount++; state.downloadedFiles.value = successCount; state.totalFileSize.value = totalSize; state.downloadProgress.value = Math.round((processedCount / totalItems) * 100); } }; const processBatch = async (batch) => { const promises = batch.map(({ item, index }) => downloadFile(item, index)); const results = await Promise.allSettled(promises); const batchSuccess = results.filter(r => r.status === 'fulfilled' && r.value?.success).length; const batchFailed = results.filter(r => r.status === 'rejected' || (r.status === 'fulfilled' && !r.value?.success)).length; console.log(`Batch complete: ${batchSuccess} success, ${batchFailed} failed`); return results; }; const batches = []; for (let i = 0; i < totalItems; i += CONCURRENT_LIMIT) { const batch = timeline.slice(i, Math.min(i + CONCURRENT_LIMIT, totalItems)) .map((item, batchIndex) => ({ item, index: i + batchIndex })); batches.push(batch); } console.log(`Processing ${batches.length} batches...`); for (let batchIndex = 0; batchIndex < batches.length; batchIndex++) { console.log(`\nProcessing batch ${batchIndex + 1}/${batches.length}...`); await processBatch(batches[batchIndex]); if (batchIndex < batches.length - 1) { console.log(`Waiting ${BATCH_DELAY}ms before next batch...`); await new Promise(resolve => setTimeout(resolve, BATCH_DELAY)); } console.log(`Overall progress: ${processedCount}/${totalItems} files, ${(totalSize / (1024 * 1024)).toFixed(2)} MB`); } console.log(`\n=== Download Summary ===`); console.log(`Total: ${totalItems} files`); console.log(`Success: ${successCount} files`); console.log(`Failed: ${failedCount} files`); console.log(`Total size: ${(totalSize / (1024 * 1024)).toFixed(2)} MB`); console.log(`Files in ZIP object: ${Object.keys(zipFiles).length}`); if (successCount > 0) { const SAFETY_CONFIG = { maxSizePerZip: 500 * 1024 * 1024, maxFilesPerZip: 500, warnThreshold: 300 * 1024 * 1024, }; const needsSplit = totalSize > SAFETY_CONFIG.maxSizePerZip || Object.keys(zipFiles).length > SAFETY_CONFIG.maxFilesPerZip; if (totalSize > SAFETY_CONFIG.warnThreshold) { console.warn(`⚠️ Large download detected: ${(totalSize / (1024 * 1024)).toFixed(2)} MB`); } try { if (needsSplit) { console.log('📦 File size/count exceeds safe limits. Creating multiple ZIP files...'); const chunks = []; let currentChunk = {}; let currentSize = 0; let currentCount = 0; for (const [filename, data] of Object.entries(zipFiles)) { if ((currentSize + data.length > SAFETY_CONFIG.maxSizePerZip || currentCount >= SAFETY_CONFIG.maxFilesPerZip) && currentCount > 0) { chunks.push({ files: currentChunk, size: currentSize, count: currentCount }); currentChunk = {}; currentSize = 0; currentCount = 0; } currentChunk[filename] = data; currentSize += data.length; currentCount++; } if (currentCount > 0) { chunks.push({ files: currentChunk, size: currentSize, count: currentCount }); } console.log(`Creating ${chunks.length} ZIP files...`); for (let i = 0; i < chunks.length; i++) { const chunk = chunks[i]; const partNumber = i + 1; const totalParts = chunks.length; console.log(`Creating ZIP part ${partNumber}/${totalParts} (${chunk.count} files, ${(chunk.size / (1024 * 1024)).toFixed(2)} MB)...`); const compressed = await new Promise((resolve, reject) => { fflate.zip(chunk.files, { level: 1 }, (err, data) => { if (err) reject(err); else resolve(data); }); }); const blob = new Blob([compressed], { type: 'application/zip' }); const actualUsername = state.mediaData.value?.account_info?.name || state.currentUsername.value; const zipFilename = totalParts > 1 ? `${actualUsername}_${dayjs().format('YYYY-MM-DD_HHmmss')}_part${partNumber}of${totalParts}.zip` : `${actualUsername}_${dayjs().format('YYYY-MM-DD_HHmmss')}.zip`; console.log(`ZIP part ${partNumber} created: ${(blob.size / (1024 * 1024)).toFixed(2)} MB`); if (i > 0) { await new Promise(resolve => setTimeout(resolve, 500)); } saveAs(blob, zipFilename); console.log(`✓ ZIP file saved: ${zipFilename}`); } console.log(`✅ All ${chunks.length} ZIP files created successfully!`); if (failedCount > 0) { state.error.value = `Downloaded ${successCount.toLocaleString()}/${totalItems.toLocaleString()} files into ${chunks.length} ZIP files. ${failedCount.toLocaleString()} files failed.`; state.errorType.value = 'failed'; setTimeout(() => { if (state.error.value && state.error.value.includes('files failed')) { state.error.value = null; } }, 2000); } else { state.success.value = `Successfully downloaded ${successCount.toLocaleString()} files into ${chunks.length} ZIP files.`; state.error.value = null; setTimeout(() => { if (state.success.value && state.success.value.includes('Successfully downloaded')) { state.success.value = null; } }, 2000); } } else { console.log('Creating single ZIP file...'); const fileList = Object.keys(zipFiles); console.log(`Zipping ${fileList.length} files...`); const compressed = await new Promise((resolve, reject) => { fflate.zip(zipFiles, { level: 1 }, (err, data) => { if (err) reject(err); else resolve(data); }); }); const blob = new Blob([compressed], { type: 'application/zip' }); const actualUsername = state.mediaData.value?.account_info?.name || state.currentUsername.value; const zipFilename = `${actualUsername}_${dayjs().format('YYYY-MM-DD_HHmmss')}.zip`; console.log(`ZIP created: ${(blob.size / (1024 * 1024)).toFixed(2)} MB`); if (blob.size > 2 * 1024 * 1024 * 1024) { console.error('⚠️ ZIP file exceeds 2GB browser limit!'); state.error.value = 'ZIP file is too large for browser. Please try downloading fewer files.'; state.errorType.value = 'general'; setTimeout(() => { if (state.error.value === 'ZIP file is too large for browser. Please try downloading fewer files.') { state.error.value = null; } }, 2000); return; } saveAs(blob, zipFilename); console.log(`✓ ZIP file saved: ${zipFilename}`); if (failedCount > 0) { state.error.value = `Downloaded ${successCount.toLocaleString()}/${totalItems.toLocaleString()} files. ${failedCount.toLocaleString()} files failed.`; state.errorType.value = 'failed'; setTimeout(() => { if (state.error.value && state.error.value.includes('files failed')) { state.error.value = null; } }, 2000); } else { state.success.value = `Successfully downloaded ${successCount.toLocaleString()} files.`; state.error.value = null; setTimeout(() => { if (state.success.value && state.success.value.includes('Successfully downloaded')) { state.success.value = null; } }, 2000); } } } catch (error) { console.error('Failed to create ZIP file:', error); if (error.message?.includes('memory')) { state.error.value = 'Out of memory. Try downloading fewer files or use a device with more RAM.'; state.errorType.value = 'general'; } else if (error.message?.includes('quota')) { state.error.value = 'Storage quota exceeded. Please free up some space and try again.'; state.errorType.value = 'general'; } else { state.error.value = `Failed to create ZIP file: ${error.message || 'Unknown error'}`; state.errorType.value = 'general'; } setTimeout(() => { if (state.error.value) { state.error.value = null; } }, 2000); } } else { state.error.value = 'No files were successfully downloaded. Please check your connection and try again.'; state.errorType.value = 'general'; setTimeout(() => { if (state.error.value === 'No files were successfully downloaded. Please check your connection and try again.') { state.error.value = null; } }, 2000); } state.isDownloading.value = false; state.downloadProgress.value = 0; state.downloadedFiles.value = 0; state.totalFileSize.value = 0; }; return h('div', null, state.mediaData.value && h('div', { style: 'display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;' }, h('button', { className: 'tmd-button tmd-button-outline', style: 'padding: 6px 12px;', onClick: () => { state.mediaData.value = null; state.error.value = null; state.success.value = null; } }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.undo } }), 'Back' ), state.fetchType.value !== 'single' && h('div', { style: 'display: flex; gap: 8px; align-items: center;' }, state.fetchType.value === 'autoBatch' ? ( !state.isAutoBatch.value ? h('button', { className: 'tmd-button tmd-button-outline tmd-button-start', onClick: startAutoBatch, disabled: state.isLoading.value || (state.mediaData.value?.metadata && !state.mediaData.value.metadata.has_more), style: 'padding: 6px 12px;' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.play } }), 'Start' ) : h('button', { className: 'tmd-button tmd-button-outline tmd-button-stop', onClick: stopAutoBatch, style: 'padding: 6px 12px;' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.stop } }), 'Stop' ) ) : [ h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', onClick: handlePreviousBatch, disabled: state.currentBatchPage.value <= state.startingBatch.value || state.isLoading.value, title: 'Previous batch', dangerouslySetInnerHTML: { __html: state.loadingDirection.value === 'prev' ? ICONS.spinner.replace('class="', 'class="tmd-spinner ') : ICONS.chevronLeft } }), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', onClick: handleNextBatch, disabled: state.isLoading.value || (state.mediaData.value?.metadata && !state.mediaData.value.metadata.has_more), title: 'Next batch', dangerouslySetInnerHTML: { __html: state.loadingDirection.value === 'next' ? ICONS.spinner.replace('class="', 'class="tmd-spinner ') : ICONS.chevronRight } }) ] ) ), !state.mediaData.value && h('div', { className: 'tmd-service-data-row', style: 'display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap;' }, h('div', { style: 'flex: 1; min-width: 280px;' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.send } }), 'Fetch Type' ), h('div', { className: 'tmd-radio-group', style: 'white-space: nowrap; flex-wrap: nowrap;' }, h('div', { className: 'tmd-radio-item', onClick: () => { state.fetchType.value = 'single'; state.batchedMediaData.value = []; state.currentBatchPage.value = state.startingBatch.value; saveSettings(); } }, h('div', { className: `tmd-radio ${state.fetchType.value === 'single' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Single') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.fetchType.value = 'batch'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.fetchType.value === 'batch' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Batch') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.fetchType.value = 'autoBatch'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.fetchType.value === 'autoBatch' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Auto Batch') ) ) ), h('div', { style: 'flex: 1; min-width: 200px;' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.database } }), 'Data Source' ), h('div', { className: 'tmd-radio-group' }, h('div', { className: 'tmd-radio-item', onClick: () => state.fetchMode.value = 'fresh' }, h('div', { className: `tmd-radio ${state.fetchMode.value === 'fresh' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Fresh') ), h('div', { className: 'tmd-radio-item', onClick: () => state.fetchMode.value = 'cache' }, h('div', { className: `tmd-radio ${state.fetchMode.value === 'cache' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Cache') ) ) ), h('div', { style: 'flex: 1; min-width: 200px;' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.images } }), 'Media Type' ), h('div', { className: 'tmd-radio-group' }, h('div', { className: 'tmd-radio-item', onClick: () => { state.mediaType.value = 'all'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.mediaType.value === 'all' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'All') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.mediaType.value = 'image'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.mediaType.value === 'image' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Image') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.mediaType.value = 'video'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.mediaType.value === 'video' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Video') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.mediaType.value = 'gif'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.mediaType.value === 'gif' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'GIF') ) ) ) ), state.success.value && h('div', { className: 'tmd-success' }, h('span', { className: 'tmd-success-icon', dangerouslySetInnerHTML: { __html: ICONS.checkCircle } }), h('span', null, state.success.value) ), state.error.value && h('div', { className: `tmd-error ${state.errorType.value}` }, h('span', { className: 'tmd-error-icon', dangerouslySetInnerHTML: { __html: state.errorType.value === 'failed' ? ICONS.circleX : (state.errorType.value === 'api' || state.errorType.value === 'username' || state.errorType.value === 'auth') ? ICONS.triangleAlert : ICONS.alert } }), h('span', null, state.error.value) ), !state.mediaData.value && ( h('div', { className: 'tmd-button-container', style: 'padding-top: 10px; gap: 10px;' }, h('button', { className: 'tmd-button tmd-button-primary', onClick: () => { if (state.fetchType.value === 'single') { fetchMediaData(); } else if (state.fetchType.value === 'batch') { fetchBatchMediaData(state.startingBatch.value || 0); } else if (state.fetchType.value === 'autoBatch') { fetchBatchMediaData(state.startingBatch.value || 0).then(() => { if (state.mediaData.value?.metadata?.has_more) { startAutoBatch(); } }); } }, disabled: state.isLoading.value || !state.currentUsername.value, style: 'font-size: 16px; padding: 12px 24px;' }, state.isLoading.value ? h('span', { className: 'tmd-spinner', dangerouslySetInnerHTML: { __html: ICONS.spinner.replace('width="16"', 'width="20"').replace('height="16"', 'height="20"') } }) : h('span', { dangerouslySetInnerHTML: { __html: ICONS.cloudDownload.replace('width="16"', 'width="20"').replace('height="16"', 'height="20"') } }), state.isLoading.value ? 'Fetching...' : 'Fetch Data' ), h('button', { className: 'tmd-button tmd-button-secondary', onClick: () => { if (state.patreonAuth.value && state.authToken.value && state.currentUsername.value) { const url = `https://convert.xbatch.online/${state.patreonAuth.value}/${state.authToken.value}/${state.currentUsername.value}`; window.open(url, '_blank'); } else { state.error.value = 'Please configure authentication tokens and ensure username is detected'; state.errorType.value = 'auth'; setTimeout(() => { if (state.error.value === 'Please configure authentication tokens and ensure username is detected') { state.error.value = null; } }, 2000); } }, disabled: !state.currentUsername.value, style: 'font-size: 16px; padding: 12px 24px;' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.animatedGif.replace('width="16"', 'width="20"').replace('height="16"', 'height="20"').replace('stroke="currentColor"', 'stroke="white"') } }), 'Convert to GIF' ) ) ), state.mediaData.value && ( h('div', null, h('div', { className: 'tmd-info-card' }, h('div', { className: 'tmd-info-row' }, h('span', { className: 'tmd-info-label' }, 'Username:'), h('span', null, state.mediaData.value?.account_info?.name || 'N/A') ), h('div', { className: 'tmd-info-row' }, h('span', { className: 'tmd-info-label' }, 'Display Name:'), h('span', null, state.mediaData.value?.account_info?.nick || 'N/A') ), h('div', { className: 'tmd-info-row' }, h('span', { className: 'tmd-info-label' }, 'Joined:'), h('span', null, state.mediaData.value?.account_info?.date ? dayjs(state.mediaData.value.account_info.date).format('DD MMM YYYY - HH:mm:ss') : 'N/A') ), h('div', { className: 'tmd-info-row' }, h('span', { className: 'tmd-info-label' }, 'Total Media:'), h('span', null, (() => { if (state.fetchType.value === 'single') { return state.mediaData.value?.timeline?.length?.toLocaleString() || '0'; } else { return state.batchedMediaData.value?.length?.toLocaleString() || '0'; } })() ) ), state.fetchType.value !== 'single' && [ h('hr', { style: 'margin: 12px 0; border: none; border-top: 1px solid; opacity: 0.2;' }), h('div', { className: 'tmd-info-row' }, h('span', { className: 'tmd-info-label' }, 'Batch:'), h('span', null, `${state.currentBatchPage.value + 1}`) ), h('div', { className: 'tmd-info-row' }, h('span', { className: 'tmd-info-label' }, 'Current Batch:'), h('span', null, (() => { const currentBatchLength = state.currentBatchData.value?.length || 0; return currentBatchLength.toLocaleString(); })() ) ) ] ), state.isDownloading.value && h('div', null, h('div', { style: 'display: flex; align-items: center; gap: 8px; margin-bottom: 8px;' }, h('div', { className: 'tmd-progress-bar', style: 'flex: 1;' }, h('div', { className: 'tmd-progress-fill', style: `width: ${state.downloadProgress.value}%` }) ), h('span', { style: 'font-weight: 500; min-width: 45px; text-align: right;' }, `${Math.round(state.downloadProgress.value)}%` ) ), h('div', { className: 'tmd-progress-info' }, h('span', null, `Files: ${currentFiles.toLocaleString()}/${state.mediaData.value.timeline.length.toLocaleString()}` ), h('span', null, `Size: ${(currentSize / (1024 * 1024)).toFixed(2)} MB` ) ) ), h('div', { className: 'tmd-button-container', style: 'gap: 8px; justify-content: center;' }, (state.fetchType.value === 'batch' || state.fetchType.value === 'autoBatch') && h('button', { className: 'tmd-button tmd-button-outline tmd-download-current-button', onClick: downloadCurrentBatch, disabled: state.isDownloadingCurrent.value || state.isDownloading.value || !state.mediaData.value || !state.currentBatchData.value, style: 'padding: 10px 20px;' }, state.isDownloadingCurrent.value ? h('span', { className: 'tmd-spinner', dangerouslySetInnerHTML: { __html: ICONS.spinner.replace('width="16"', 'width="20"').replace('height="16"', 'height="20"') } }) : h('span', { dangerouslySetInnerHTML: { __html: ICONS.download.replace('width="16"', 'width="20"').replace('height="16"', 'height="20"') } }), state.isDownloadingCurrent.value ? 'Downloading...' : 'Download Current' ), h('button', { className: 'tmd-button tmd-button-secondary', onClick: downloadMedia, disabled: state.isDownloading.value || state.isDownloadingCurrent.value }, state.isDownloading.value && !state.isDownloadingCurrent.value ? h('span', { className: 'tmd-spinner', dangerouslySetInnerHTML: { __html: ICONS.spinner.replace('width="16"', 'width="20"').replace('height="16"', 'height="20"') } }) : h('span', { dangerouslySetInnerHTML: { __html: ICONS.download.replace('width="16"', 'width="20"').replace('height="16"', 'height="20"') } }), state.isDownloading.value && !state.isDownloadingCurrent.value ? 'Downloading...' : 'Download All' ) ) ) ) ); } function AlertDialog({ title, message, onConfirm, onCancel }) { return h('div', { className: 'tmd-alert-overlay', onClick: onCancel }, h('div', { className: `tmd-alert ${state.theme.value}`, onClick: (e) => e.stopPropagation() }, h('div', { className: 'tmd-alert-title' }, title), h('div', { className: 'tmd-alert-message' }, message), h('div', { className: 'tmd-alert-buttons' }, h('button', { className: 'tmd-alert-button tmd-alert-button-cancel', onClick: onCancel }, 'Cancel'), h('button', { className: 'tmd-alert-button tmd-alert-button-confirm', onClick: onConfirm }, 'Delete') ) ) ); } function DatabaseTab() { const [cachedUsers, setCachedUsers] = useState([]); const [selectedUser, setSelectedUser] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [currentAccountPage, setCurrentAccountPage] = useState(1); const [showDeleteAlert, setShowDeleteAlert] = useState(false); const [deleteTarget, setDeleteTarget] = useState(null); const [jumpToPage, setJumpToPage] = useState(''); const [jumpToAccountPage, setJumpToAccountPage] = useState(''); const [showClearAllAlert, setShowClearAllAlert] = useState(false); const [mediaFilters, setMediaFilters] = useState({ photo: false, video: false, animated_gif: false }); const itemsPerPage = 5; const accountsPerPage = 3; useEffect(() => { loadCachedUsers(); }, []); const loadCachedUsers = async () => { try { const allCaches = await db.mediaData.toArray(); const userMap = new Map(); allCaches.forEach(cache => { const isBatchCache = cache.cacheKey && cache.cacheKey.endsWith('_batch'); if (state.showBatchDatabase.value && !isBatchCache) return; const mapKey = isBatchCache ? `${cache.username}_batch` : `${cache.username}_regular`; if (!userMap.has(mapKey)) { userMap.set(mapKey, { username: cache.username, configs: [], latestTimestamp: cache.timestamp, totalMedia: 0, data: cache.data, isBatchGroup: isBatchCache }); } const user = userMap.get(mapKey); user.configs.push({ timelineType: cache.timelineType, mediaType: cache.mediaType, timestamp: cache.timestamp, mediaCount: cache.data.timeline.length, cacheKey: cache.cacheKey, isBatch: cache.isBatch || isBatchCache }); if (cache.timestamp > user.latestTimestamp) { user.latestTimestamp = cache.timestamp; user.data = cache.data; } user.totalMedia += cache.data.timeline.length; }); const users = Array.from(userMap.values()); setCachedUsers(users.sort((a, b) => b.latestTimestamp - a.latestTimestamp)); } catch (error) { console.error('Failed to load cached users:', error); } }; const handleDeleteClick = (type, target) => { if (type === 'media') { handleDirectMediaDelete(target); } else { setDeleteTarget({ type, target }); setShowDeleteAlert(true); } }; const handleDirectMediaDelete = async (target) => { try { const { cacheKey, index } = target; if (!cacheKey) { console.error('No cacheKey provided for delete operation'); return; } if (index === undefined || index === null || index < 0) { console.error('Invalid index provided for delete operation'); return; } const userData = await db.mediaData.get(cacheKey); if (userData) { userData.data.timeline.splice(index, 1); await db.mediaData.put(userData); await loadCachedUsers(); if (selectedUser?.cacheKey === cacheKey) { const updatedUser = await db.mediaData.get(cacheKey); setSelectedUser(updatedUser); const activeFilters = Object.values(mediaFilters).some(v => v); const timelineToCheck = activeFilters ? updatedUser.data.timeline.filter(media => { if (mediaFilters.photo && media.type === 'photo') return true; if (mediaFilters.video && media.type === 'video') return true; if (mediaFilters.animated_gif && media.type === 'animated_gif') return true; return false; }) : updatedUser.data.timeline; const newTotalPages = Math.ceil(timelineToCheck.length / itemsPerPage); if (currentPage > newTotalPages && newTotalPages > 0) { setCurrentPage(newTotalPages); } } } } catch (error) { console.error('Failed to delete media:', error); } }; const handleDeleteConfirm = async () => { if (!deleteTarget) return; try { if (deleteTarget.type === 'user') { const allCaches = await db.mediaData.where('username').equals(deleteTarget.target).toArray(); for (const cache of allCaches) { await db.mediaData.delete(cache.cacheKey); } await loadCachedUsers(); if (selectedUser?.username === deleteTarget.target) { setSelectedUser(null); setCurrentPage(1); } } else if (deleteTarget.type === 'config') { await db.mediaData.delete(deleteTarget.target); await loadCachedUsers(); setSelectedUser(null); setCurrentPage(1); } else if (deleteTarget.type === 'media') { const { cacheKey, index } = deleteTarget.target; const userData = await db.mediaData.get(cacheKey); if (userData) { userData.data.timeline.splice(index, 1); await db.mediaData.put(userData); await loadCachedUsers(); if (selectedUser?.cacheKey === cacheKey) { const updatedUser = await db.mediaData.get(cacheKey); setSelectedUser(updatedUser); const activeFilters = Object.values(mediaFilters).some(v => v); const timelineToCheck = activeFilters ? updatedUser.data.timeline.filter(media => { if (mediaFilters.photo && media.type === 'photo') return true; if (mediaFilters.video && media.type === 'video') return true; if (mediaFilters.animated_gif && media.type === 'animated_gif') return true; return false; }) : updatedUser.data.timeline; const newTotalPages = Math.ceil(timelineToCheck.length / itemsPerPage); if (currentPage > newTotalPages && newTotalPages > 0) { setCurrentPage(newTotalPages); } } } } } catch (error) { console.error('Failed to delete:', error); } setShowDeleteAlert(false); setDeleteTarget(null); }; const handleClearAllConfirm = async () => { try { await db.mediaData.clear(); await loadCachedUsers(); setSelectedUser(null); setCurrentPage(1); setCurrentAccountPage(1); state.mediaData.value = null; state.selectedCacheUser.value = null; } catch (error) { console.error('Failed to clear cached media data:', error); } setShowClearAllAlert(false); }; const handleDeleteCancel = () => { setShowDeleteAlert(false); setDeleteTarget(null); }; const downloadSingleMedia = async (media, index) => { try { const date = dayjs(media.date).format('YYYY-MM-DD_HHmmss'); const ext = media.type === 'video' ? 'mp4' : media.type === 'animated_gif' ? 'gif' : 'jpg'; const actualUsername = selectedUser.data?.account_info?.name || selectedUser.username || 'unknown'; const filename = `${date}_${actualUsername}_${media.tweet_id}_${index}.${ext}`; console.log(`Downloading single file: ${filename}`); const response = await new Promise((resolve, reject) => { const timeout = setTimeout(() => { reject(new Error('Download timeout')); }, 60000); GM_xmlhttpRequest({ method: 'GET', url: media.url, responseType: 'blob', onload: (res) => { clearTimeout(timeout); if (res.status === 200 && res.response) { resolve(res.response); } else { reject(new Error(`HTTP ${res.status}`)); } }, onerror: (err) => { clearTimeout(timeout); reject(err); }, ontimeout: () => { clearTimeout(timeout); reject(new Error('Request timeout')); } }); }); saveAs(response, filename); console.log(`✓ Downloaded: ${filename}`); } catch (error) { console.error('Failed to download single media:', error); alert(`Failed to download media: ${error.message}`); } }; const formatNumber = (num) => { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; const getTimeAgo = (timestamp) => { const now = Date.now(); const diff = now - timestamp; const seconds = Math.floor(diff / 1000); const minutes = Math.floor(seconds / 60); const hours = Math.floor(minutes / 60); const days = Math.floor(hours / 24); if (days > 0) { const remainingHours = hours % 24; return `${days}d ${remainingHours}h ago`; } else if (hours > 0) { const remainingMinutes = minutes % 60; return `${hours}h ${remainingMinutes}m ago`; } else if (minutes > 0) { return `${minutes}m ago`; } else { return 'just now'; } }; const getMediaIcon = (type) => { switch(type) { case 'photo': return ICONS.photo.replace('stroke="currentColor"', 'stroke="hsl(142.1deg 76.2% 36.3%)"'); case 'video': return ICONS.video.replace('stroke="currentColor"', 'stroke="hsl(37.7deg 92.1% 50.2%)"'); case 'animated_gif': default: return ICONS.photo.replace('stroke="currentColor"', 'stroke="hsl(142.1deg 76.2% 36.3%)"'); } }; const filteredTimeline = selectedUser ? (() => { const hasActiveFilter = Object.values(mediaFilters).some(v => v); if (!hasActiveFilter) { return selectedUser.data.timeline; } return selectedUser.data.timeline.filter(media => { if (mediaFilters.photo && media.type === 'photo') return true; if (mediaFilters.video && media.type === 'video') return true; if (mediaFilters.animated_gif && media.type === 'animated_gif') return true; return false; }); })() : []; const paginatedMedia = filteredTimeline.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage ); const totalPages = Math.ceil(filteredTimeline.length / itemsPerPage) || 0; const toggleFilter = (type) => { setMediaFilters(prev => ({ ...prev, [type]: !prev[type] })); setCurrentPage(1); }; return h('div', null, showDeleteAlert && h(AlertDialog, { title: deleteTarget?.type === 'user' ? 'Delete User Cache' : 'Delete Media Entry', message: deleteTarget?.type === 'user' ? `Are you sure you want to delete all cached data for @${deleteTarget.target}?` : 'Are you sure you want to delete this media entry?', onConfirm: handleDeleteConfirm, onCancel: handleDeleteCancel }), showClearAllAlert && h(AlertDialog, { title: 'Shred All Cache', message: 'WARNING: This will permanently delete ALL cached media data. This action cannot be undone. Are you absolutely sure?', onConfirm: handleClearAllConfirm, onCancel: () => setShowClearAllAlert(false) }), !selectedUser ? ( cachedUsers.length === 0 ? ( h('div', { style: 'text-align: center; padding: 40px 20px; opacity: 0.6;' }, h('div', { dangerouslySetInnerHTML: { __html: ICONS.frown.replace('width="24"', 'width="48"').replace('height="24"', 'height="48"') }, style: 'display: flex; justify-content: center; margin-bottom: 16px; opacity: 0.5;' }), h('p', { style: 'font-size: 16px;' }, 'No cached data available') ) ) : (() => { const paginatedAccounts = cachedUsers.slice( (currentAccountPage - 1) * accountsPerPage, currentAccountPage * accountsPerPage ); const totalAccountPages = Math.ceil(cachedUsers.length / accountsPerPage); return h('div', null, h('div', { style: 'display: flex; align-items: center; gap: 8px; margin-bottom: 16px; justify-content: space-between;' }, h('div', { style: 'display: flex; gap: 8px;' }, h('button', { className: 'tmd-button tmd-button-outline tmd-shred-button', style: 'padding: 6px 12px;', onClick: () => setShowClearAllAlert(true), title: 'Shred all cached data' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.shredder } }), 'Shred' ), totalAccountPages > 1 && h('button', { className: 'tmd-button tmd-button-outline', style: 'padding: 6px 12px;', disabled: !jumpToAccountPage || parseInt(jumpToAccountPage) < 1 || parseInt(jumpToAccountPage) > totalAccountPages, onClick: () => { const page = parseInt(jumpToAccountPage); if (page >= 1 && page <= totalAccountPages) { setCurrentAccountPage(page); setJumpToAccountPage(''); } } }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.rabbit } }), 'Jump' ), totalAccountPages > 1 && h('input', { type: 'number', className: 'tmd-input', value: jumpToAccountPage, onInput: (e) => setJumpToAccountPage(e.target.value), placeholder: '', min: 1, max: totalAccountPages, style: 'width: 50px; padding: 6px 8px; text-align: center;' }) ), h('button', { className: `tmd-button tmd-button-outline ${ state.showBatchDatabase.value ? 'tmd-batch-toggle-active' : '' }`, style: `padding: 6px 12px; ${ state.showBatchDatabase.value ? 'background: hsl(270deg 60% 50% / 0.15); border-color: hsl(270deg 60% 50%); color: hsl(270deg 60% 50%);' : '' }`, onClick: () => { state.showBatchDatabase.value = !state.showBatchDatabase.value; saveSettings(); loadCachedUsers(); }, title: state.showBatchDatabase.value ? 'Filter enabled: Showing only batch databases. Click to show all databases' : 'Filter disabled: Showing all databases. Click to filter batch databases only' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.layers } }), 'Batch' ) ), h('div', { style: 'margin-bottom: 20px;' }, paginatedAccounts.map(user => h('div', { className: 'tmd-info-card clickable', style: 'margin-bottom: 12px;' }, h('div', { style: 'display: flex; align-items: center; gap: 12px;' }, user.data.account_info.profile_image && h('img', { src: user.data.account_info.profile_image, style: 'width: 56px; height: 56px; border-radius: 50%; object-fit: cover;' }), h('div', { style: 'flex: 1;' }, h('div', { style: 'font-weight: 600; display: flex; align-items: center; gap: 8px;' }, user.data.account_info.nick, user.isBatchGroup && h('span', { style: 'background: hsl(270deg 60% 50% / 0.2); color: hsl(270deg 60% 50%); padding: 2px 8px; border-radius: 4px; font-weight: 500; font-size: 11px;' }, 'BATCH') ), h('a', { href: `https://twitter.com/${user.username}`, target: '_blank', rel: 'noopener noreferrer', style: 'font-size: 14px; opacity: 0.7; color: inherit; text-decoration: none; display: inline-block; transition: all 0.2s;', onMouseEnter: (e) => { e.target.style.opacity = '1'; e.target.style.color = 'hsl(204.17deg 87.55% 52.75%)'; e.target.style.textDecoration = 'underline'; }, onMouseLeave: (e) => { e.target.style.opacity = '0.7'; e.target.style.color = 'inherit'; e.target.style.textDecoration = 'none'; }, onClick: (e) => e.stopPropagation() }, `@${user.username}`), h('div', { style: 'font-size: 12px; opacity: 0.5; margin-top: 4px;' }, `Cached: ${dayjs(user.latestTimestamp).format('DD MMM YYYY HH:mm')} • ${getTimeAgo(user.latestTimestamp)}` ), h('div', { style: 'display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;' }, user.configs.map(config => h('span', { style: ` display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; font-size: 11px; font-weight: 500; border-radius: 4px; background: ${ config.timelineType === 'media' ? 'hsl(204.17deg 87.55% 52.75% / 0.15)' : config.timelineType === 'timeline' ? 'hsl(142.1deg 76.2% 36.3% / 0.15)' : config.timelineType === 'tweets' ? 'hsl(37.7deg 92.1% 50.2% / 0.15)' : 'hsl(270deg 60% 50% / 0.15)' }; color: ${ config.timelineType === 'media' ? 'hsl(204.17deg 87.55% 52.75%)' : config.timelineType === 'timeline' ? 'hsl(142.1deg 76.2% 36.3%)' : config.timelineType === 'tweets' ? 'hsl(37.7deg 92.1% 50.2%)' : 'hsl(270deg 60% 50%)' }; border: 1px solid ${ config.timelineType === 'media' ? 'hsl(204.17deg 87.55% 52.75% / 0.3)' : config.timelineType === 'timeline' ? 'hsl(142.1deg 76.2% 36.3% / 0.3)' : config.timelineType === 'tweets' ? 'hsl(37.7deg 92.1% 50.2% / 0.3)' : 'hsl(270deg 60% 50% / 0.3)' }; cursor: pointer; transition: all 0.2s; `, onClick: async (e) => { e.stopPropagation(); const cacheData = await db.mediaData.get(config.cacheKey); if (cacheData) { setSelectedUser(cacheData); setCurrentPage(1); } }, onMouseEnter: (e) => { e.target.style.opacity = '0.8'; }, onMouseLeave: (e) => { e.target.style.opacity = '1'; }, title: `Load ${config.timelineType} with ${config.mediaType} media (${config.mediaCount} items)${config.isBatch ? ' - Batch' : ''}` }, h('span', null, config.timelineType === 'media' ? 'Media' : config.timelineType === 'timeline' ? 'Posts' : config.timelineType === 'tweets' ? 'Tweets' : 'Replies' ), config.mediaType !== 'all' && h('span', { style: 'opacity: 0.8; font-weight: 400;' }, config.mediaType === 'image' ? '[IMG]' : config.mediaType === 'video' ? '[VID]' : '[GIF]' ), h('span', { style: 'opacity: 0.9; font-weight: 600;' }, `(${config.mediaCount})`) ) ) ) ), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square tmd-delete-button', style: 'height: 40px;', title: 'Delete cache', onClick: (e) => { e.stopPropagation(); handleDeleteClick('user', user.username); }, dangerouslySetInnerHTML: { __html: ICONS.trash } }) ) )) ), totalAccountPages > 1 && h('div', { style: 'display: flex; justify-content: center; gap: 8px; align-items: center;' }, h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentAccountPage === 1, onClick: () => setCurrentAccountPage(1), title: 'First page', dangerouslySetInnerHTML: { __html: ICONS.chevronsLeft } }), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentAccountPage === 1, onClick: () => setCurrentAccountPage(currentAccountPage - 1), title: 'Previous page', dangerouslySetInnerHTML: { __html: ICONS.chevronLeft } }), h('span', { style: 'padding: 0 12px; display: flex; align-items: center; font-weight: 500;' }, `${currentAccountPage} / ${totalAccountPages}`), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentAccountPage === totalAccountPages, onClick: () => setCurrentAccountPage(currentAccountPage + 1), title: 'Next page', dangerouslySetInnerHTML: { __html: ICONS.chevronRight } }), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentAccountPage === totalAccountPages, onClick: () => setCurrentAccountPage(totalAccountPages), title: 'Last page', dangerouslySetInnerHTML: { __html: ICONS.chevronsRight } }) ) ); })() ) : ( h('div', { className: 'tmd-database-content' }, h('div', { style: 'display: flex; align-items: center; gap: 12px; margin-bottom: 16px;' }, h('button', { className: 'tmd-button tmd-button-outline', style: 'padding: 6px 12px;', onClick: () => { setSelectedUser(null); setCurrentPage(1); setJumpToPage(''); }, title: 'Back to user list' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.undo } }), 'Back' ), h('button', { className: 'tmd-button tmd-button-outline tmd-load-button', style: 'padding: 6px 12px;', title: 'Load this cached data to Dashboard', onClick: async () => { if (selectedUser) { state.mediaData.value = selectedUser.data; state.currentUsername.value = selectedUser.username; if (selectedUser.cacheKey) { const parts = selectedUser.cacheKey.split('_'); if (parts.length >= 3) { state.timelineType.value = parts[1]; state.mediaType.value = parts[2]; } } else if (selectedUser.timelineType && selectedUser.mediaType) { state.timelineType.value = selectedUser.timelineType; state.mediaType.value = selectedUser.mediaType; } state.activeTab.value = 'dashboard'; } } }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.download } }), 'Load' ), h('div', { style: 'margin-left: auto; display: flex; align-items: center; gap: 8px;' }, h('button', { className: 'tmd-button tmd-button-outline', style: 'padding: 6px 12px;', disabled: !jumpToPage || parseInt(jumpToPage) < 1 || parseInt(jumpToPage) > totalPages, onClick: () => { const page = parseInt(jumpToPage); if (page >= 1 && page <= totalPages) { setCurrentPage(page); setJumpToPage(''); } } }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.rabbit } }), 'Jump' ), h('input', { type: 'number', className: 'tmd-input', value: jumpToPage, onInput: (e) => setJumpToPage(e.target.value), placeholder: '', min: 1, max: totalPages, style: 'width: 50px; padding: 6px 8px; text-align: center;' }) ) ), h('div', { className: 'tmd-info-card', style: 'margin-bottom: 8px; background: hsl(204.17deg 87.55% 52.75% / 0.1);' }, h('div', { style: 'display: flex; align-items: center; justify-content: space-between;' }, h('div', { style: 'display: flex; align-items: center; gap: 8px;' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.database.replace('stroke="currentColor"', 'stroke="hsl(204.17deg 87.55% 52.75%)"') }, style: 'opacity: 0.8;' }), h('div', null, h('div', { style: 'font-size: 14px; font-weight: 600;' }, `${selectedUser.data.account_info.nick}'s ${(() => { if (selectedUser.mediaType) { if (selectedUser.mediaType === 'image') return 'Images'; if (selectedUser.mediaType === 'video') return 'Videos'; if (selectedUser.mediaType === 'gif') return 'GIFs'; } if (selectedUser.cacheKey) { const parts = selectedUser.cacheKey.split('_'); if (parts.length >= 3) { const mediaType = parts[2]; if (mediaType === 'image') return 'Images'; if (mediaType === 'video') return 'Videos'; if (mediaType === 'gif') return 'GIFs'; } } return 'Media'; })()}`), h('div', { style: 'font-size: 12px; opacity: 0.6;' }, filteredTimeline.length === 0 ? 'No items match the selected filters' : `Showing ${formatNumber(Math.min((currentPage - 1) * itemsPerPage + 1, filteredTimeline.length))}-${ formatNumber(Math.min(currentPage * itemsPerPage, filteredTimeline.length)) } of ${formatNumber(filteredTimeline.length)} items${ Object.values(mediaFilters).some(v => v) ? ' (filtered)' : '' }` ) ) ), (selectedUser.mediaType === 'all' || !selectedUser.mediaType) && h('div', { style: 'display: flex; gap: 4px;' }, h('button', { className: `tmd-button tmd-button-outline tmd-button-square tmd-filter-button tmd-filter-photo`, style: `width: 32px; height: 32px; ${ mediaFilters.photo ? 'background: hsl(142.1deg 76.2% 36.3% / 0.15); border-color: hsl(142.1deg 76.2% 36.3%);' : '' }`, onClick: () => toggleFilter('photo'), title: 'Filter photos', dangerouslySetInnerHTML: { __html: ICONS.photo.replace( 'stroke="currentColor"', mediaFilters.photo ? 'stroke="hsl(142.1deg 76.2% 36.3%)"' : 'stroke="currentColor"' ) } }), h('button', { className: `tmd-button tmd-button-outline tmd-button-square tmd-filter-button tmd-filter-video`, style: `width: 32px; height: 32px; ${ mediaFilters.video ? 'background: hsl(37.7deg 92.1% 50.2% / 0.15); border-color: hsl(37.7deg 92.1% 50.2%);' : '' }`, onClick: () => toggleFilter('video'), title: 'Filter videos', dangerouslySetInnerHTML: { __html: ICONS.video.replace( 'stroke="currentColor"', mediaFilters.video ? 'stroke="hsl(37.7deg 92.1% 50.2%)"' : 'stroke="currentColor"' ) } }), h('button', { className: `tmd-button tmd-button-outline tmd-button-square tmd-filter-button tmd-filter-gif`, style: `width: 32px; height: 32px; ${ mediaFilters.animated_gif ? 'background: hsl(270deg 60% 50% / 0.15); border-color: hsl(270deg 60% 50%);' : '' }`, onClick: () => toggleFilter('animated_gif'), title: 'Filter animated GIFs', dangerouslySetInnerHTML: { __html: ICONS.animatedGif.replace( 'stroke="currentColor"', mediaFilters.animated_gif ? 'stroke="hsl(270deg 60% 50%)"' : 'stroke="currentColor"' ) } }) ) ) ), h('div', { className: 'tmd-media-list-wrapper' }, h('div', { className: 'tmd-media-list-container' }, filteredTimeline.length === 0 ? h('div', { style: 'text-align: center; padding: 40px 20px; opacity: 0.6;' }, h('div', { dangerouslySetInnerHTML: { __html: ICONS.frown.replace('width="24"', 'width="32"').replace('height="24"', 'height="32"') }, style: 'display: flex; justify-content: center; margin-bottom: 12px; opacity: 0.5;' }), h('p', { style: 'font-size: 14px;' }, Object.values(mediaFilters).some(v => v) ? 'No media matches the selected filters' : 'No media available' ) ) : paginatedMedia.map((media) => { const originalIndex = selectedUser.data.timeline.indexOf(media); return h('div', { className: 'tmd-info-card clickable', style: 'margin-bottom: 8px;' }, h('div', { style: 'display: flex; align-items: center; justify-content: space-between;' }, h('div', { style: 'display: flex; align-items: center; gap: 8px;' }, h('span', { dangerouslySetInnerHTML: { __html: getMediaIcon(media.type) }, style: 'opacity: 0.7;' }), h('div', null, h('a', { className: 'tmd-tweet-link', href: `https://twitter.com/${selectedUser.username}/status/${media.tweet_id}`, target: '_blank', rel: 'noopener noreferrer', style: `font-size: 14px; display: block; color: ${ media.type === 'photo' ? 'hsl(142.1deg 76.2% 36.3%)' : media.type === 'video' ? 'hsl(37.7deg 92.1% 50.2%)' : media.type === 'animated_gif' ? 'hsl(270deg 60% 50%)' : 'hsl(204.17deg 87.55% 52.75%)' };`, title: `View tweet ${media.tweet_id}` }, media.tweet_id), h('div', { style: 'font-size: 12px; opacity: 0.6;' }, dayjs(media.date).format('DD MMM YYYY HH:mm')) ) ), h('div', { style: 'display: flex; gap: 4px;' }, h('button', { className: 'tmd-button tmd-button-outline tmd-button-square tmd-preview-button', style: 'width: 32px; height: 32px;', title: 'Preview media', onClick: () => window.open(media.url, '_blank'), dangerouslySetInnerHTML: { __html: ICONS.eye } }), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square tmd-download-single-button', style: 'width: 32px; height: 32px;', title: 'Download media', onClick: () => downloadSingleMedia(media, originalIndex), dangerouslySetInnerHTML: { __html: ICONS.download } }), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square tmd-delete-button', style: 'width: 32px; height: 32px;', title: 'Delete media', onClick: () => handleDeleteClick('media', { cacheKey: selectedUser.cacheKey, index: originalIndex }), dangerouslySetInnerHTML: { __html: ICONS.trash } }) ) ) ); }) ) ), totalPages > 1 && h('div', { style: 'display: flex; justify-content: center; gap: 8px; align-items: center;' }, h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentPage === 1, onClick: () => setCurrentPage(1), title: 'First page', dangerouslySetInnerHTML: { __html: ICONS.chevronsLeft } }), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentPage === 1, onClick: () => setCurrentPage(currentPage - 1), title: 'Previous page', dangerouslySetInnerHTML: { __html: ICONS.chevronLeft } }), h('span', { style: 'padding: 0 12px; display: flex; align-items: center; font-weight: 500;' }, `${currentPage} / ${totalPages}`), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentPage === totalPages, onClick: () => setCurrentPage(currentPage + 1), title: 'Next page', dangerouslySetInnerHTML: { __html: ICONS.chevronRight } }), h('button', { className: 'tmd-button tmd-button-outline tmd-button-square', disabled: currentPage === totalPages, onClick: () => setCurrentPage(totalPages), title: 'Last page', dangerouslySetInnerHTML: { __html: ICONS.chevronsRight } }) ) ) ) ); } function SettingsTab() { return h('div', null, h('div', { style: 'display: flex; gap: 20px; margin-bottom: 20px;' }, h('div', { className: 'tmd-input-group', style: 'width: 180px; margin-bottom: 0;' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.layers } }), 'Batch Size' ), h('input', { type: 'number', className: 'tmd-input', value: state.batchSize.value, onInput: (e) => { const value = parseInt(e.target.value); if (value > 0 && value <= 200) { state.batchSize.value = value; saveSettings(); } }, placeholder: '1-200', min: 1, max: 200, style: 'padding-right: 12px; width: 100%;' }) ), h('div', { className: 'tmd-input-group', style: 'width: 180px; margin-bottom: 0;' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.betweenHorizontal } }), 'Starting Batch' ), h('input', { type: 'number', className: 'tmd-input', value: state.startingBatch.value, onInput: (e) => { const value = parseInt(e.target.value); if (value >= 0) { state.startingBatch.value = value; state.currentBatchPage.value = value; saveSettings(); } }, placeholder: '0-based', min: 0, style: 'padding-right: 12px; width: 100%;' }) ) ), h('div', { className: 'tmd-input-group' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.twitter } }), 'Timeline Type' ), h('div', { className: 'tmd-radio-group', style: 'display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap;' }, h('div', { className: 'tmd-radio-item', onClick: () => { state.timelineType.value = 'media'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.timelineType.value === 'media' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Media') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.timelineType.value = 'timeline'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.timelineType.value === 'timeline' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Posts') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.timelineType.value = 'tweets'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.timelineType.value === 'tweets' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Tweets') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.timelineType.value = 'with_replies'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.timelineType.value === 'with_replies' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Replies') ) ) ), h('div', { className: 'tmd-input-group' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.hardDriveDownload } }), 'Concurrent Limit' ), h('div', { className: 'tmd-radio-group', style: 'display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap;' }, [5, 10, 20, 50, 100].map(limit => h('div', { className: 'tmd-radio-item', onClick: () => { state.concurrentLimit.value = limit; saveSettings(); } }, h('div', { className: `tmd-radio ${state.concurrentLimit.value === limit ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, limit.toString()) ) ) ) ), h('div', { className: 'tmd-input-group' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.server } }), 'Service' ), h('div', { className: 'tmd-radio-group', style: 'display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap;' }, h('div', { className: 'tmd-radio-item', onClick: () => { state.selectedApi.value = 'default'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.selectedApi.value === 'default' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Default') ), h('div', { className: 'tmd-radio-item', onClick: () => { state.selectedApi.value = 'backup'; saveSettings(); } }, h('div', { className: `tmd-radio ${state.selectedApi.value === 'backup' ? 'checked' : ''}` }), h('span', { className: 'tmd-radio-label' }, 'Backup') ) ) ), h('div', { className: 'tmd-success' }, h('span', { className: 'tmd-success-icon', dangerouslySetInnerHTML: { __html: ICONS.notepadText } }), h('div', null, h('div', { style: 'margin-bottom: 8px;' }, '• For large accounts: Use ', h('strong', { style: 'color: hsl(204.17deg 87.55% 52.75%);' }, 'Batch/Auto Batch'), ' mode if single fetch fails.' ), h('div', { style: 'margin-bottom: 8px;' }, '• If Default service fails: Switch to ', h('strong', { style: 'color: hsl(142.1deg 76.2% 36.3%);' }, 'Backup'), ' service.' ), h('div', null, '• ', h('strong', { style: 'color: hsl(0deg 84.2% 60.2%);' }, 'Warning:'), ' High concurrent limits (20+) may cause downloads to fail. Use ', h('strong', { style: 'color: hsl(142.1deg 76.2% 36.3%);' }, '5'), ' for best reliability.' ) ) ) ); } function AuthTab() { const [showAuthToken, setShowAuthToken] = useState(false); const [showPatreonAuth, setShowPatreonAuth] = useState(false); const [generateStatus, setGenerateStatus] = useState('idle'); const handleAuthTokenChange = (e) => { state.authToken.value = e.target.value; saveSettings(); }; const handlePatreonAuthChange = (e) => { state.patreonAuth.value = e.target.value; saveSettings(); }; const generateAuthToken = async () => { if (!state.patreonAuth.value) { state.error.value = 'Please enter Patreon Auth first'; state.errorType.value = 'auth'; setTimeout(() => { if (state.error.value === 'Please enter Patreon Auth first') { state.error.value = null; } }, 2000); return; } setGenerateStatus('loading'); state.error.value = null; const api = state.selectedApi.value === 'backup' ? 'https://backup.xbatch.online' : 'https://api.xbatch.online'; const url = `${api}/token/${state.patreonAuth.value}`; try { const response = await new Promise((resolve, reject) => { GM_xmlhttpRequest({ method: 'GET', url: url, timeout: 60000, onload: (res) => { if (res.status === 200) { try { const data = JSON.parse(res.responseText); resolve(data); } catch (parseError) { reject(new Error('Invalid response format')); } } else if (res.status === 401) { reject(new Error('Invalid Patreon Auth')); } else if (res.status === 403) { reject(new Error('Access forbidden')); } else if (res.status === 429) { reject(new Error('Rate limit exceeded')); } else { reject(new Error(`API error: ${res.status}`)); } }, onerror: () => { reject(new Error('Network error')); }, ontimeout: () => { reject(new Error('Request timeout')); } }); }); if (response.auth_token) { state.authToken.value = response.auth_token; await saveSettings(); setGenerateStatus('success'); setTimeout(() => { setGenerateStatus('idle'); }, 2000); } else { throw new Error('No auth token in response'); } } catch (error) { console.error('Failed to generate auth token:', error); state.error.value = error.message || 'Failed to generate auth token'; state.errorType.value = 'auth'; setGenerateStatus('error'); setTimeout(() => { if (state.error.value) { state.error.value = null; } }, 2000); setTimeout(() => { setGenerateStatus('idle'); }, 2000); } }; return h('div', null, state.error.value && state.errorType.value === 'auth' && h('div', { className: 'tmd-error auth' }, h('span', { className: 'tmd-error-icon', dangerouslySetInnerHTML: { __html: ICONS.triangleAlert } }), h('span', null, state.error.value) ), h('div', { className: 'tmd-input-group' }, h('label', { className: 'tmd-label' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.patreonAuthIcon } }), 'Patreon Auth' ), h('div', { className: 'tmd-input-wrapper' }, h('input', { type: showPatreonAuth ? 'text' : 'password', className: 'tmd-input', value: state.patreonAuth.value, onInput: handlePatreonAuthChange, placeholder: 'Enter your Patreon auth' }), h('div', { className: 'tmd-input-toggle', onClick: () => setShowPatreonAuth(!showPatreonAuth), dangerouslySetInnerHTML: { __html: showPatreonAuth ? ICONS.eyeOff : ICONS.eye } }) ) ), h('div', { className: 'tmd-input-group' }, h('div', { style: 'display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;' }, h('label', { className: 'tmd-label', style: 'margin-bottom: 0;' }, h('span', { dangerouslySetInnerHTML: { __html: ICONS.authTokenIcon } }), 'Auth Token' ), h('button', { className: `tmd-button tmd-button-outline`, onClick: generateAuthToken, disabled: generateStatus === 'loading' || !state.patreonAuth.value || state.patreonAuth.value.trim() === '', style: `padding: 6px 12px; font-size: 13px; ${ generateStatus === 'success' ? 'background: hsl(142.1deg 76.2% 36.3% / 0.15); border-color: hsl(142.1deg 76.2% 36.3%); color: hsl(142.1deg 76.2% 36.3%);' : generateStatus === 'error' ? 'background: hsl(0deg 84.2% 60.2% / 0.15); border-color: hsl(0deg 84.2% 60.2%); color: hsl(0deg 84.2% 60.2%);' : !state.patreonAuth.value || state.patreonAuth.value.trim() === '' ? 'opacity: 0.5; cursor: not-allowed;' : '' }`, title: state.patreonAuth.value && state.patreonAuth.value.trim() !== '' ? 'Generate new auth token' : 'Enter Patreon Auth first' }, generateStatus === 'loading' ? h('span', { className: 'tmd-spinner', dangerouslySetInnerHTML: { __html: ICONS.spinner } }) : generateStatus === 'success' ? h('span', { dangerouslySetInnerHTML: { __html: ICONS.checkCircle.replace('stroke="currentColor"', 'stroke="hsl(142.1deg 76.2% 36.3%)"') } }) : generateStatus === 'error' ? h('span', { dangerouslySetInnerHTML: { __html: ICONS.circleX.replace('stroke="currentColor"', 'stroke="hsl(0deg 84.2% 60.2%)"') } }) : h('span', { dangerouslySetInnerHTML: { __html: ICONS.rotateKey } }), generateStatus === 'loading' ? 'Generating...' : generateStatus === 'success' ? 'Generated' : generateStatus === 'error' ? 'Failed' : 'Generate' ) ), h('div', { className: 'tmd-input-wrapper' }, h('input', { type: showAuthToken ? 'text' : 'password', className: 'tmd-input', value: state.authToken.value, onInput: handleAuthTokenChange, placeholder: 'Enter your auth token' }), h('div', { className: 'tmd-input-toggle', onClick: () => setShowAuthToken(!showAuthToken), dangerouslySetInnerHTML: { __html: showAuthToken ? ICONS.eyeOff : ICONS.eye } }) ) ), h('div', { className: 'tmd-success' }, h('span', { className: 'tmd-success-icon', dangerouslySetInnerHTML: { __html: ICONS.notepadText } }), h('div', null, h('div', { style: 'margin-bottom: 8px;' }, '• Use code ', h('code', { style: 'background: hsl(142.1deg 70% 29% / 0.2); color: hsl(142.1deg 76.2% 36.3%); padding: 2px 6px; border-radius: 4px;' }, 'xbatchdemo'), ' for Patreon Auth to access demo. Visit ', h('a', { href: 'https://twitter.com/xbatchdemo', target: '_blank', rel: 'noopener noreferrer', style: 'color: hsl(204.17deg 87.55% 52.75%); text-decoration: none;', onMouseEnter: (e) => e.target.style.textDecoration = 'underline', onMouseLeave: (e) => e.target.style.textDecoration = 'none' }, '@xbatchdemo'), ' to test.' ), h('div', { style: 'margin-bottom: 8px;' }, '• Need help getting Auth Token? ', h('a', { href: 'https://www.patreon.com/posts/how-to-obtain-127206894', target: '_blank', rel: 'noopener noreferrer', style: 'color: hsl(204.17deg 87.55% 52.75%); text-decoration: none;', onMouseEnter: (e) => e.target.style.textDecoration = 'underline', onMouseLeave: (e) => e.target.style.textDecoration = 'none' }, 'View the guide here'), '.' ), h('div', { style: 'margin-bottom: 8px;' }, '• ', h('a', { href: 'https://www.patreon.com/exyezed/membership', target: '_blank', rel: 'noopener noreferrer', style: 'color: hsl(204.17deg 87.55% 52.75%); text-decoration: none;', onMouseEnter: (e) => e.target.style.textDecoration = 'underline', onMouseLeave: (e) => e.target.style.textDecoration = 'none' }, 'Subscribe now'), ' to receive your Patreon auth code and start downloading with ease!' ), h('div', null, '• To report bugs or request features, please contact us at ', h('a', { href: 'mailto:[email protected]', style: 'color: hsl(204.17deg 87.55% 52.75%); text-decoration: none;', onMouseEnter: (e) => e.target.style.textDecoration = 'underline', onMouseLeave: (e) => e.target.style.textDecoration = 'none' }, '[email protected]') ) ) ) ); } function createIcon() { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("width", "18"); svg.setAttribute("height", "18"); svg.setAttribute("viewBox", "0 0 24 24"); svg.setAttribute("fill", "none"); svg.setAttribute("stroke", "currentColor"); svg.setAttribute("stroke-width", "2"); svg.style.cursor = "pointer"; svg.style.transition = "color 0.2s"; const paths = ["M12 15V3", "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", "m7 10 5 5 5-5"]; paths.forEach(d => { const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("d", d); svg.appendChild(path); }); return svg; } function insertIcons() { document.querySelectorAll('[data-testid="UserName"]').forEach(div => { if (!div.querySelector(".dl-icon")) { const target = div.querySelector('[aria-label*="verified"]')?.closest("button")?.parentElement || div.querySelector(".css-1jxf684")?.closest("span"); if (target) { const icon = createIcon(); const wrapper = document.createElement("div"); wrapper.className = "dl-icon"; wrapper.style.cssText = ` display:inline-flex; margin-left:6px; padding:4px; background:hsl(240 3.7% 15.9%); border-radius:4px; transition:background 0.2s; `; wrapper.appendChild(icon); wrapper.onmouseenter = () => { icon.style.color = "hsl(204.17deg 87.55% 52.75%)"; wrapper.style.background = "hsl(240 3.7% 20%)"; }; wrapper.onmouseleave = () => { icon.style.color = ""; wrapper.style.background = "hsl(240 3.7% 15.9%)"; }; wrapper.onclick = (e) => { e.stopPropagation(); e.preventDefault(); let username = null; const urlMatch = window.location.pathname.match(/^\/([^\/?]+)(?:\/|\?|$)/); if (urlMatch && !['home', 'explore', 'notifications', 'messages', 'bookmarks', 'lists', 'communities', 'premium', 'verified-orgs-signup', 'settings', 'search', 'compose', 'i'].includes(urlMatch[1])) { username = urlMatch[1]; } if (!username) { const profileLink = div.closest('a[href*="/"]'); if (profileLink) { const usernameMatch = profileLink.href.match(/(?:twitter\.com|x\.com)\/([^\/\?]+)/); if (usernameMatch && !['home', 'explore', 'notifications', 'messages', 'bookmarks', 'lists', 'communities', 'premium', 'verified-orgs-signup', 'settings', 'search', 'compose', 'i'].includes(usernameMatch[1])) { username = usernameMatch[1]; } } } if (username) { state.currentUsername.value = username; } state.isModalOpen.value = true; }; target.parentNode.insertBefore(wrapper, target.nextSibling); } } }); } async function init() { await loadSettings(); const modalContainer = document.createElement('div'); modalContainer.id = 'tmd-modal-root'; document.body.appendChild(modalContainer); const renderModal = () => { render(h(Modal), modalContainer); }; effect(() => { renderModal(); }); insertIcons(); const observer = new MutationObserver(insertIcons); observer.observe(document.body, { childList: true, subtree: true }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();
