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

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

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import '../styles/Modal.css';
+
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, actions }) => {
+    // Close modal when Escape key is pressed
+    useEffect(() => {
+        const handleEscapeKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+
+        document.addEventListener('keydown', handleEscapeKey);
+
+        // Disable body scrolling when modal is open
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscapeKey);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    // Handle click outside the modal content to close it
+    const handleClickOutside = (event: React.MouseEvent) => {
+        if (event.target === event.currentTarget) {
+            onClose();
+        }
+    };
+
+    return (
+        <div className="modal-overlay" onClick={handleClickOutside}>
+            <div className="modal-container" onClick={(e) => e.stopPropagation()}>
+                <div className="modal-header">
+                    <h2 className="modal-title">{title}</h2>
+                    <button className="modal-close-button" onClick={onClose} aria-label="Close modal" style={{ minWidth: '24px', minHeight: '24px' }}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                        >
+                            <line x1="18" y1="6" x2="6" y2="18"></line>
+                            <line x1="6" y1="6" x2="18" y2="18"></line>
+                        </svg>
+                    </button>
+                </div>
+
+                <div className="modal-content">{children}</div>
+
+                {actions && <div className="modal-actions">{actions}</div>}
+            </div>
+        </div>
+    );
+};
+
+export default Modal;