feat: modularize scanner, enhance carousel preloading, and improve PWA updates

Summary of changes:
- Extracted archive scanning logic into a modular 'useArchiveScanner' hook for better maintainability and performance.
- Refined PostModal carousel with intelligent media preloading and smoother, jitter-free transitions.
- Optimized image rendering with 'decoding=async' and removed 'black flashes' between slide changes.
- Updated PWA configuration to 'autoUpdate' with hourly periodic checks for fresh content.
- Fixed several bugs including stories sorting, permalink parameter cleanup, and profile metadata cache restoration.
- Comprehensive updates to documentation (README.md and GEMINI.md) reflecting the new architecture.
This commit is contained in:
ergosteur
2026-03-07 21:16:28 -05:00
parent 4f89a69ee3
commit a4e9ce16a7
14 changed files with 1243 additions and 946 deletions

View File

@@ -4,11 +4,12 @@ A high-performance React PWA for browsing archived Instagram data with a native-
## Features
- **Persistent Caching**: Uses IndexedDB to store parsed archives locally. Subsequent loads are near-instant.
- **Permalinks**: State is synchronized with the URL, allowing you to share direct links to archives, tabs, or specific posts.
- **Glassy Scanning UI**: A modern, translucent white terminal experience with a dynamic blurred background of your media.
- **Local Privacy**: All processing is done client-side. Even when using the self-hosted version, your media is processed locally in your browser.
- **Multiple Formats**: Supports official Instagram JSON exports and Instaloader regex-based naming conventions.
- **Advanced Carousel**: Seamless, zero-latency transitions between slides with intelligent preloading. Images use asynchronous decoding to keep the UI smooth during motion.
- **Persistent Caching**: Uses IndexedDB to store parsed archives locally. Subsequent loads are near-instant, with full support for profile metadata and profile picture history.
- **Permalinks**: State is synchronized with the URL, allowing you to share direct links to archives, tabs, or specific posts. Navigating back to the explorer cleans up URL parameters automatically.
- **Glassy Scanning UI**: A modern, translucent white terminal experience with a dynamic blurred background generated from your media during scanning.
- **PWA with Auto-Update**: Fully offline-capable and installable. Clients automatically receive updates when a new version is deployed to the server.
- **Local Privacy**: All processing is done client-side. Even when using the self-hosted version, your media is processed locally in your browser and never uploaded.
- **Story Viewer**: Native-like story experience with segmented progress bars, auto-playback, and audio controls.
- **Customizable Grid**: 1:1 or 3:4 aspect ratios with adjustable "bumps" for aesthetic alignment.
- **Navigation Protection**: Intercepts accidental browser "Back" or "Refresh" actions to protect your current session.
@@ -78,5 +79,6 @@ archives/
**Prerequisites:** Node.js (LTS recommended)
1. **Install dependencies:** `npm install`
2. **Start dev server:** `npm run dev`
3. **Start local backend:** `npm run server` (Optional, serves `./_sample-archives`)
2. **Start dev server:** `npm run dev` (Frontend on port 3000)
3. **Start local backend:** `npm run server` (Optional, serves `./_sample-archives` on port 3001)
4. **Build production:** `npm run build` (Generates `./dist` for frontend and `./dist-server` for the API)