Code
client
server
shared
.gitignore
components.json
drizzle.config.ts
generated-icon.png
postcss.config.js
replit.md
tailwind.config.ts
tsconfig.json
vite.config.ts
Packager files
package-lock.json
package.json
Config files
.replit
Video Player Application
Overview

This is a modern web-based video player application built with React, Express, and Drizzle ORM. The application allows users to play media files, manage connections between devices, and remotely control playback from different devices. It features a clean, responsive UI built with Shadcn UI components and TailwindCSS for styling.
User Preferences

Preferred communication style: Simple, everyday language.
System Architecture
Frontend Architecture

The application uses a React-based frontend with the following key technologies:

    React for UI components and state management
    React Query for data fetching and state management
    Shadcn UI component library based on Radix UI primitives
    TailwindCSS for styling
    WebSockets for real-time communication between devices

The frontend follows a component-based architecture with reusable UI components from Shadcn UI, custom hooks for business logic, and page components for routing.
Backend Architecture

The backend is built with:

    Express.js for API routes and serving the frontend
    WebSockets (ws) for real-time communication
    Drizzle ORM for database operations

The server handles:

    Serving the frontend application
    API endpoints for media files and connections
    WebSocket communication for real-time control
    Database operations through Drizzle ORM

Data Layer

The application uses:

    Drizzle ORM for database interactions
    PostgreSQL (configured in .replit) but not fully set up yet
    Schema defined in shared/schema.ts

Real-Time Communication

The app uses WebSockets for real-time communication between devices:

    Main device (video player) connects to server
    Remote controller devices can connect and send commands
    Real-time status updates between connected devices

Key Components
Shared Components

    Database Schema (shared/schema.ts)
        Defines users, media files, and connections tables
        Uses Drizzle ORM for PostgreSQL integration
        Includes Zod schemas for validation

Frontend Components

    Core Components
        App.tsx - Main application component
        pages/home.tsx - Main player interface
        components/ui/video-player.tsx - Video player component
        components/ui/file-browser.tsx - Media file browser

    Hooks
        use-websocket.ts - WebSocket connection management
        use-video-player.ts - Video player control logic
        use-toast.ts - Notification system

    UI Components
        Extensive UI component library built with Shadcn UI

Backend Components

    Server
        server/index.ts - Express server setup
        server/routes.ts - API routes and WebSocket setup
        server/storage.ts - Data access layer
        server/vite.ts - Vite development server integration

Data Flow

    Media Playback Flow
        User selects a media file from the file browser
        Video player loads and plays the selected file
        Playback controls update the video state
        WebSocket sends status updates to connected devices

    Remote Control Flow
        Remote device connects to the main player via WebSocket
        Main player accepts the connection
        Remote device sends commands (play, pause, seek, etc.)
        Main player executes commands and updates its state
        Main player sends status updates back to remote devices

    Media Management Flow
        User uploads or selects media files
        Files are stored in the database
        File information is retrieved from the API

External Dependencies
Frontend Dependencies

    React and React DOM for UI rendering
    React Query for data fetching
    Radix UI for accessible UI components
    TailwindCSS for styling
    Video.js for video playback

Backend Dependencies

    Express for HTTP server and API
    ws for WebSocket functionality
    Drizzle ORM for database operations
    Vite for development and building

Deployment Strategy

The application is configured for deployment on Replit with:

    Development Mode
        npm run dev starts both the backend and frontend in development mode
        Vite handles hot reloading for the frontend

    Production Build
        npm run build compiles the frontend with Vite and the backend with esbuild
        Outputs to the dist directory

    Database Setup
        PostgreSQL module is included in the Replit configuration
        Drizzle is configured to use PostgreSQL but needs a connection string
        drizzle-kit push command will synchronize the database schema

Development Workflow

    Local Development
        Run npm run dev to start the development server
        Frontend will be accessible at port 5000
        API endpoints are available at /api/*
        WebSocket connection at /ws

    Database Migrations
        Define schema in shared/schema.ts
        Run npm run db:push to update the database schema

    Building for Production
        Run npm run build to create production build
        Run npm run start to serve the production build

Next Steps

    Database Connection
        Set up the PostgreSQL connection string in environment variables
        Initialize the database with the schema

    Authentication System
        Implement user authentication using the users table
        Add login/registration UI components

    Media File Storage
        Add file upload functionality
        Implement storage for media files

    Remote Control Enhancement
        Improve device pairing mechanism
        Add more remote control features