Spaces:
Sleeping
Sleeping
| /** | |
| * Recording Indicator | |
| * | |
| * Subtle indicator showing that the interview is being recorded. | |
| * Non-distracting but always visible. | |
| * | |
| * HARDENING: Uses inline styles for maximum compatibility | |
| */ | |
| import React from 'react'; | |
| import { Video } from 'lucide-react'; | |
| const styles = { | |
| indicator: { | |
| display: 'inline-flex', | |
| alignItems: 'center', | |
| gap: '6px', | |
| padding: '4px 10px', | |
| background: 'rgba(239, 68, 68, 0.15)', | |
| border: '1px solid rgba(239, 68, 68, 0.3)', | |
| borderRadius: '20px', | |
| fontSize: '11px', | |
| fontWeight: '600', | |
| color: '#ef4444', | |
| userSelect: 'none', | |
| }, | |
| dot: { | |
| width: '8px', | |
| height: '8px', | |
| background: '#ef4444', | |
| borderRadius: '50%', | |
| animation: 'pulse-rec 1.5s ease-in-out infinite', | |
| }, | |
| text: { | |
| letterSpacing: '0.1em', | |
| }, | |
| duration: { | |
| opacity: 0.8, | |
| fontVariantNumeric: 'tabular-nums', | |
| }, | |
| }; | |
| // CSS animation keyframes (injected once) | |
| const styleSheet = ` | |
| @keyframes pulse-rec { | |
| 0%, 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| transform: scale(0.85); | |
| } | |
| } | |
| `; | |
| // Inject keyframes if not already present | |
| if (typeof document !== 'undefined') { | |
| const styleId = 'recording-indicator-styles'; | |
| if (!document.getElementById(styleId)) { | |
| const style = document.createElement('style'); | |
| style.id = styleId; | |
| style.textContent = styleSheet; | |
| document.head.appendChild(style); | |
| } | |
| } | |
| function RecordingIndicator({ isRecording, duration, className = '' }) { | |
| // Defensive: don't render if not recording | |
| if (!isRecording) { | |
| return null; | |
| } | |
| return ( | |
| <div className={`recording-indicator ${className}`.trim()} style={styles.indicator}> | |
| <span style={styles.dot}></span> | |
| <Video size={14} /> | |
| <span style={styles.text}>REC</span> | |
| {duration && <span style={styles.duration}>{duration}</span>} | |
| </div> | |
| ); | |
| } | |
| export default RecordingIndicator; | |