sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
b38f738ca4
videofolxtv/replit.md
sebastjanartic b38f738ca4 Update platform branding to reflect the new name g4.video 
Update title, meta description, and branding elements across the client to use the new platform name "g4.video". This includes updating the main title tag, meta description, H1 in the search header, and social share URLs for Twitter and WhatsApp.

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/YoSuftE
2025-08-07 10:04:32 +00:00

6.7 KiB
Raw Blame History

g4.video - Professional Video Streaming Platform

Overview

g4.video is a fully functional professional video streaming platform that integrates directly with Bunny.net CDN for secure video delivery. The application successfully streams 85 private videos from the user's Bunny.net library through a custom web interface. It features 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)

  • ✅ 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

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 REST API pattern using Express.js:

  • Server Framework: Express.js with TypeScript for type-safe server development
  • API Design: RESTful endpoints for video operations (GET, POST) with pagination support
  • Storage Layer: Abstracted storage interface allowing for multiple implementations (currently using in-memory storage with plans for database integration)
  • Middleware: Custom logging middleware for API request tracking and error handling

The server implements a middleware pattern for request processing and includes development-specific tooling like Vite integration for hot module replacement.

Data Storage Architecture

The application uses a flexible storage abstraction:

  • ORM: Drizzle ORM configured for PostgreSQL with type-safe database operations
  • Database: PostgreSQL (configured via Neon Database) for production data persistence
  • Schema Management: Centralized schema definitions in TypeScript with automatic type generation
  • Development Storage: In-memory storage implementation for development and testing

The storage layer uses an interface-based design allowing easy switching between storage implementations without affecting business logic.

Authentication & Authorization

Currently uses session-based architecture:

  • Session Management: Express sessions with PostgreSQL session store (connect-pg-simple)
  • Security: CORS configuration and secure session handling
  • Future-Ready: Architecture prepared for JWT or OAuth integration

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.