feat: added video preview thumbnail system.

[bekirin50tonu]

Core Mechanics & Architecture (Updated)

1. Asset Extraction & DOM Integration
   The system directly mirrors Kick’s native thumbnail DOM elements and styling, maintaining native visual fidelity while attaching custom hover-preview bindings.
2. Server-Side Stitching & WebP Sprites
   Upon video processing, the backend generates periodic frame snapshots and merges them into a unified WebP sprite sheet (mosaic image). This single-image sprite approach minimizes HTTP requests and optimizes browser caching.
3. Frame Sizing, Placement & Dynamic Translation

• Individual Frame Dimensions: Each preview frame is fixed at 180px width × 101px height.
• Centering & Offset: The current time indicator is constrained to stay centered relative to the thumbnail preview element.
• Dynamic Positioning: Scrub bar hover interactions drive client-side position shifts using CSS transform: translateX(...), moving the sprite/preview frame seamlessly along the progress bar while keeping the timestamp centered.

4. Multi-Page Asset Pagination (250-Minute Interval)
   To handle long streams and extensive VOD durations, the system automatically paginates sprite requests every 250 minutes of media playback time. The frontend dynamically dispatches requests for new sprite URLs as the scrub cursor crosses these boundaries, ensuring continuous preview availability without memory bloat.

[Enmn]

there is a problem with it, which is that the thumbnail does not display correctly.