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

frontend-tools/chapters-editor/client/src/components/ClipSegments.tsx

@@ -0,0 +1,93 @@
+import { formatTime, formatLongTime } from '@/lib/timeUtils';
+import '../styles/ClipSegments.css';
+
+export interface Segment {
+    id: number;
+    chapterTitle: string;
+    startTime: number;
+    endTime: number;
+}
+
+interface ClipSegmentsProps {
+    segments: Segment[];
+    selectedSegmentId?: number | null;
+}
+
+const ClipSegments = ({ segments, selectedSegmentId }: ClipSegmentsProps) => {
+    // Sort segments by startTime
+    const sortedSegments = [...segments].sort((a, b) => a.startTime - b.startTime);
+
+    // Handle delete segment click
+    const handleDeleteSegment = (segmentId: number) => {
+        // Create and dispatch the delete event
+        const deleteEvent = new CustomEvent('delete-segment', {
+            detail: { segmentId },
+        });
+        document.dispatchEvent(deleteEvent);
+    };
+
+    // Generate the same color background for a segment as shown in the timeline
+    const getSegmentColorClass = (index: number) => {
+        // Return CSS class based on index modulo 8
+        // This matches the CSS nth-child selectors in the timeline
+        return `segment-default-color segment-color-${(index % 8) + 1}`;
+    };
+
+    // Get selected segment
+    const selectedSegment = sortedSegments.find((seg) => seg.id === selectedSegmentId);
+
+    return (
+        <div className="clip-segments-container">
+            <h3 className="clip-segments-title">Chapters</h3>
+
+            {sortedSegments.map((segment, index) => (
+                <div
+                    key={segment.id}
+                    className={`segment-item ${getSegmentColorClass(index)} ${selectedSegmentId === segment.id ? 'selected' : ''}`}
+                >
+                    <div className="segment-content">
+                        <div className="segment-info">
+                            <div className="segment-title">
+                                {segment.chapterTitle ? (
+                                    <span className="chapter-title">{segment.chapterTitle}</span>
+                                ) : (
+                                    <span className="default-title">Chapter {index + 1}</span>
+                                )}
+                            </div>
+                            <div className="segment-time">
+                                {formatTime(segment.startTime)} - {formatTime(segment.endTime)}
+                            </div>
+                            <div className="segment-duration">
+                                Duration: {formatLongTime(segment.endTime - segment.startTime)}
+                            </div>
+                        </div>
+                    </div>
+                    <div className="segment-actions">
+                        <button
+                            className="delete-button"
+                            aria-label="Delete Segment"
+                            data-tooltip="Delete this segment"
+                            onClick={() => handleDeleteSegment(segment.id)}
+                        >
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path
+                                    fillRule="evenodd"
+                                    d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                                    clipRule="evenodd"
+                                />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            ))}
+
+            {sortedSegments.length === 0 && (
+                <div className="empty-message">
+                    No chapters created yet. Use the split button to create chapter segments.
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default ClipSegments;