feat: Major Upgrade to Video.js v8 — Chapters Functionality, Fixes and Improvements

frontend-tools/video-js/src/components/README.md

@@ -0,0 +1,112 @@
+# 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
+
+```javascript
+import EndScreenOverlay from './components/overlays/EndScreenOverlay';
+import ChapterMarkers from './components/markers/ChapterMarkers';
+import NextVideoButton from './components/controls/NextVideoButton';
+```
+
+### Import from Index
+
+```javascript
+import {
+    VideoJSPlayer,
+    EndScreenOverlay,
+    ChapterMarkers,
+    NextVideoButton,
+} from './components';
+```
+
+### Use Main Component
+
+```javascript
+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