videofolxtv/replit.md

# 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 (September 26, 2025)
- ✅ **HLS Live Streaming Implementation**: Successfully implemented comprehensive HLS live streaming functionality on `/live` page using HLS.js
- ✅ **Live Stream Player**: Professional video player with autoplay (muted), full controls, crossOrigin support, and adaptive quality selection
- ✅ **Multi-Quality Support**: Stream automatically selects best quality (1080p, 720p, 360p) based on bandwidth with real-time switching
- ✅ **Live Stream Integration**: Fully functional HLS stream from https://cdne.folxplay.tv/fxt/streams/ch-4/master.m3u8 with live segment refreshing
- ✅ **Browser Compatibility**: Works across all modern browsers with HLS.js support and Safari native HLS fallback
- ✅ **Live UI Elements**: Red "LIVE" indicator with pulsing animation and proper navigation integration throughout site

### Previous Updates (September 2, 2025)
- ✅ **Mobile Layout Optimization**: Enhanced mobile video card typography with larger titles (text-2xl) and subtitles (text-base) for better readability on small screens
- ✅ **Individual Video Page Mobile Design**: Implemented clean mobile layout for video pages with full title display, views/date info, and expandable description text with "preberi več/pokaži manj" functionality
- ✅ **Mobile Number Visibility**: Top 10 ranking numbers on "Meist Angesehen" videos remain visible on mobile devices (no hiding on tap/hover)
- ✅ **Responsive Typography**: Separate font sizing for mobile and desktop - mobile cards use larger text for optimal readability
- ✅ **Clean Mobile UX**: Individual video pages show video without overlay, full title below, views/date, and expandable description text

### Previous 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.