sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
b03df1c422
videofolxtv/replit.md
sebastjanartic b03df1c422 Improve video loading speed and search responsiveness 
Implement a background service to sync videos from Bunny.net every minute, optimize search debounce to 150ms, and cache videos for faster retrieval and instant search.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/F2OLMnq
2025-08-28 17:05:27 +00:00

11 KiB
Raw Blame History

go4.video - Professional Video Streaming Platform

Overview

go4.video is a fully functional professional video streaming platform with a comprehensive backend infrastructure for video upload, editing, and management. The application features both Bunny.net CDN integration for existing content and a complete PostgreSQL-based system for new video uploads and user management. It includes a YouTube-like design with video cards, search functionality, and a professional video player with comprehensive controls including central play button, progress bar, volume control, time display, and fullscreen capabilities.

Recent Changes (August 2025)

Latest Updates (January 28, 2025)

  • ✅ Automatic Video Synchronization: Implemented comprehensive video sync service that checks Bunny.net for new uploads every 60 seconds

  • ✅ Performance Optimization: Enhanced search response time from 2.5s to instant with client-side caching and 150ms search debounce

  • ✅ Smart Caching System: Videos are cached in memory and refreshed automatically, eliminating repeated API calls during browsing

  • ✅ English Interface Complete: All text, messages, and interface elements converted to English language

  • ✅ Complete Backend Infrastructure: Full PostgreSQL database with user authentication, video upload tracking, categories, and tags management

  • ✅ Video Upload System: Comprehensive video upload functionality with progress tracking, metadata editing, and file management

  • ✅ User Authentication: Session-based authentication system with registration, login, and user management

  • ✅ Database Schema: Complete database schema with users, videos, video_uploads, categories, tags, and video_tags tables

  • ✅ Storage Abstraction: Flexible storage system supporting PostgreSQL database, Bunny.net integration, and memory storage with automatic fallback

  • ✅ REST API: Comprehensive REST API with authentication, video CRUD operations, upload management, and category/tag systems

  • ✅ HLS.js Video Streaming: Reliable HLS.js implementation for professional video streaming with Bunny.net integration

  • ✅ Advanced Video Controls: Professional video player with fluid responsive design and adaptive streaming

  • ✅ Video Controls: Professional video player with full controls and responsive design

  • ✅ Search Functionality: Client-side search working with proper text visibility (white background, black text)

  • ✅ Bunny.net Integration: Complete integration with private video library using signed URLs for secure access

  • ✅ Error Handling: Robust error handling with Video.js fallback mechanisms

  • ✅ Performance: Optimized video loading with adaptive bitrate streaming and proper buffering

  • ✅ Social Media Sharing: Implemented direct social sharing for Facebook, Twitter, WhatsApp with custom popup windows and automatic video thumbnail capture

  • ✅ YouTube-Style Editing: Complete video editing interface with title, description, category, tags, and privacy controls

  • ✅ Interactive Thumbnail Generator: Advanced thumbnail creation from any video frame with timeline scrubbing, custom image upload, and real-time preview

  • ✅ Copy Link Feature: Easy link copying with visual feedback notifications

  • ✅ Admin Dashboard: Comprehensive admin interface with video statistics, management tools, and editing capabilities

  • ✅ Interactive Video Preview Thumbnails: Advanced hover-based video previails with scrub bar, time tooltips, and frame-accurate seeking using HLS and MP4 streams

  • ✅ VAST Ad Integration: Comprehensive VAST advertising system with waterfall monetization strategy supporting Publift, Vdo.ai, Primis, AdPlayer.Pro, and Aniview

  • ✅ Ad Revenue Dashboard: Professional advertising analytics with eCPM tracking, fill rates, and network performance optimization

  • ✅ Monetization Settings: Advanced ad network configuration with priority management and real-time revenue tracking

  • ✅ Modern Triangle Design Theme: Complete geometric triangle design system with gradient purple-blue color scheme throughout all pages

  • ✅ Performance Optimizations: Comprehensive speed improvements including HTTP compression, ETag caching, optimized search debouncing (300ms), WebP thumbnail format, lazy loading, and query optimizations for faster deployment performance

  • ✅ Large-Scale go4.video Logo Watermarks: Implemented 25+ large orange go4.video background logos across main page and footer with various rotation angles (-85° to 125°), reduced transparency (0.32-0.55 opacity), and proper CSS filtering for optimal visibility on transparent PNG backgrounds

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

The frontend is built using React with TypeScript and follows a modern component-based architecture:

  • UI Framework: React with TypeScript for type safety and better development experience
  • Styling: Tailwind CSS for utility-first styling with a custom dark theme optimized for video content
  • Component Library: Shadcn/ui components providing consistent, accessible UI elements
  • State Management: TanStack Query (React Query) for server state management and caching
  • Routing: Wouter for lightweight client-side routing
  • Build Tool: Vite for fast development and optimized production builds

The frontend uses a component composition pattern with separate components for video cards, search headers, video grids, and modal players. This approach promotes reusability and maintains clean separation of concerns.

Backend Architecture

The backend follows a comprehensive REST API pattern using Express.js with full CRUD operations:

  • Server Framework: Express.js with TypeScript for type-safe server development
  • API Design: Complete RESTful API with authentication, video management, upload tracking, categories, and tags
  • Authentication: Session-based authentication with bcrypt password hashing and user management
  • Storage Layer: Flexible abstracted storage interface with PostgreSQL database, Bunny.net integration, and memory storage fallback
  • Upload System: Comprehensive video upload system with progress tracking, file handling via Multer, and metadata management
  • Middleware: Authentication middleware, session management, file upload handling, and error processing
  • Database Integration: Full PostgreSQL integration with Drizzle ORM and comprehensive schema management

The server implements a layered architecture pattern with storage abstraction, authentication middleware, and comprehensive video management capabilities.

Data Storage Architecture

The application uses a comprehensive multi-tier storage system:

  • Primary Storage: PostgreSQL database with full schema including users, videos, video_uploads, categories, tags, and video_tags tables
  • ORM: Drizzle ORM configured for PostgreSQL with complete type-safe database operations and relationship management
  • Database: PostgreSQL (configured via environment variables) for production data persistence with automatic fallback
  • Schema Management: Comprehensive schema definitions in TypeScript with automatic type generation and validation
  • Storage Abstraction: Interface-based design supporting multiple storage backends (DatabaseStorage, BunnyStorage, MemStorage)
  • File Storage: Local file system for video uploads with configurable upload directory and file management
  • CDN Integration: Bunny.net CDN integration for existing video content with secure signed URL authentication

The storage layer implements a strategic fallback pattern: PostgreSQL database first, Bunny.net integration second, memory storage as final fallback, ensuring reliability across different deployment scenarios.

Authentication & Authorization

Complete session-based authentication system:

  • User Management: Full user registration, login, and profile management with bcrypt password hashing
  • Session Management: Express sessions with configurable session store and secure cookie handling
  • Authentication Middleware: Comprehensive authentication middleware protecting all sensitive routes
  • Security: CORS configuration, secure session handling, and password encryption with bcrypt (12 rounds)
  • API Protection: All video upload, editing, and management operations require authentication
  • User Data: User profiles with username, email, admin privileges, and profile management capabilities

Build & Development Architecture

The application uses a monorepo structure with shared code:

  • Monorepo Pattern: Shared schema and types between frontend and backend
  • Development: Vite dev server with Express backend proxy for seamless development
  • Production: Optimized builds with static asset serving and server bundling
  • TypeScript: Comprehensive type checking across the entire stack

Performance Optimizations

  • Lazy Loading: Video thumbnails and content loaded on demand
  • Caching: TanStack Query provides intelligent caching and background updates
  • Pagination: Server-side pagination for efficient data loading
  • Bundle Optimization: Tree-shaking and code splitting via Vite

External Dependencies

Core Backend Services

  • Neon Database: PostgreSQL hosting service for production data storage
  • Express.js: Web application framework for Node.js
  • Drizzle ORM: TypeScript ORM for database operations

Frontend Libraries

  • React & React DOM: Core UI library and rendering
  • TanStack Query: Server state management and caching
  • Wouter: Lightweight routing solution
  • Tailwind CSS: Utility-first CSS framework
  • Shadcn/ui: Component library built on Radix UI primitives

UI Component Libraries

  • Radix UI: Accessible, unstyled UI primitives (dialogs, dropdowns, form controls)
  • Lucide React: Icon library for consistent iconography
  • Class Variance Authority: Utility for managing component variants

Development Tools

  • Vite: Build tool and development server
  • TypeScript: Type checking and enhanced developer experience
  • ESBuild: Fast JavaScript bundler for production builds
  • PostCSS & Autoprefixer: CSS processing and vendor prefixing

Video Content Integration

  • Bunny.net CDN: Full integration with Bunny.net video streaming service with signed URL authentication for 85 private videos
  • Video.js Player: Professional video player with adaptive streaming, HLS support, and responsive design
  • VAST Advertising: Comprehensive advertising framework using Google IMA SDK for video monetization
  • Video Formats: Support for HLS (.m3u8) streaming with fallback to MP4 for optimal compatibility

The application is designed with service abstraction allowing easy integration of external video hosting, CDN services, and authentication providers without major architectural changes.