mediacms/frontend-tools/video-js/src/components

Video.js Components

This directory contains the organized Video.js components, separated into logical modules for better maintainability and reusability.

Directory Structure

components/
├── controls/           # Control components (buttons, menus, etc.)
│   └── NextVideoButton.js
├── markers/           # Progress bar markers and indicators
│   └── ChapterMarkers.js
├── overlays/          # Overlay components (end screens, popups, etc.)
│   └── EndScreenOverlay.js
├── video-player/      # Main video player component
│   └── VideoJSPlayer.jsx
├── index.js           # Main exports file
└── README.md          # This file

Components Overview

VideoJSPlayer (Main Component)

• Location: video-player/VideoJSPlayer.jsx
• Purpose: Main Video.js player component that orchestrates all other components
• Features:
  • Video.js initialization and configuration
  • Event handling and lifecycle management
  • Integration with all sub-components

EndScreenOverlay

• Location: overlays/EndScreenOverlay.js
• Purpose: Displays related videos when the current video ends
• Features:
  • Grid layout for related videos
  • Thumbnail and metadata display
  • Click navigation to related videos

ChapterMarkers

• Location: markers/ChapterMarkers.js
• Purpose: Provides chapter navigation on the progress bar
• Features:
  • Visual chapter markers on progress bar
  • Floating tooltip with chapter information
  • Click-to-jump functionality
  • Continuous chapter display while hovering

NextVideoButton

• Location: controls/NextVideoButton.js
• Purpose: Custom control bar button for next video navigation
• Features:
  • Custom SVG icon
  • Accessibility support
  • Event triggering for next video functionality

Usage

Import Individual Components

import EndScreenOverlay from './components/overlays/EndScreenOverlay';
import ChapterMarkers from './components/markers/ChapterMarkers';
import NextVideoButton from './components/controls/NextVideoButton';

Import from Index

import {
    VideoJSPlayer,
    EndScreenOverlay,
    ChapterMarkers,
    NextVideoButton,
} from './components';

Use Main Component

import { VideoJSPlayer } from './components';

function App() {
    return <VideoJSPlayer />;
}

Development Guidelines

1. Separation of Concerns: Each component should have a single, well-defined responsibility
2. Video.js Registration: Each component registers itself with Video.js using videojs.registerComponent()
3. Event Handling: Use Video.js event system for communication between components
4. Cleanup: Implement proper cleanup in dispose() methods to prevent memory leaks
5. Accessibility: Ensure all components follow accessibility best practices

Adding New Components

1. Create the component in the appropriate subdirectory
2. Register it with Video.js using videojs.registerComponent()
3. Export it from the subdirectory's index file (if needed)
4. Add it to the main components/index.js file
5. Update this README with the new component information

Dependencies

• video.js: Core Video.js library
• React: For the main VideoJSPlayer component
• videojs.dom: For DOM manipulation utilities
• videojs.getComponent: For extending Video.js base components