sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
bc727b1d36
videofolxtv/replit.md
sebastjanartic bc727b1d36 Enable video ads to generate revenue from premium video content 
Integrates Google IMA SDK with videojs-contrib-ads to support VAST advertisements, enhances debugging, and adds event listeners.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 11420304-80a9-4ef2-adff-cbdaa418ffa8
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/11420304-80a9-4ef2-adff-cbdaa418ffa8/nFqFD52
2025-08-05 06:10:08 +00:00

6.5 KiB
Raw Blame History

VideoStream - Video Streaming Application

Overview

VideoStream is a fully functional 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 full controls (play, pause, volume, progress bar, fullscreen).

Recent Changes (August 2025)

  • ✅ Video.js + VAST Plugin Architecture: Migrated from HLS.js to Video.js with IMA SDK for professional video streaming and advertising
  • ✅ Advanced Video Controls: Professional video player with fluid responsive design and adaptive streaming
  • ✅ VAST Advertising Support: Integrated videojs-contrib-ads and videojs-ima for pre-roll, mid-roll, and post-roll video advertisements with Google DoubleClick integration
  • ✅ 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 social sharing for Facebook, Twitter, WhatsApp with custom share menu
  • ✅ Monetization Ready: Professional advertising framework ready for revenue generation
  • ✅ 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.