344 lines
13 KiB
TypeScript
344 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { useRecordMode } from './RecordModeContext';
|
|
import { finder } from '@medv/finder';
|
|
import {
|
|
Play,
|
|
Square,
|
|
MousePointer2,
|
|
Scroll,
|
|
Plus,
|
|
Save,
|
|
Trash2,
|
|
Eye,
|
|
Edit2,
|
|
X,
|
|
Check,
|
|
Download,
|
|
} from 'lucide-react';
|
|
import { RecordEvent } from '@/types/record-mode';
|
|
import { PlaybackCursor } from './PlaybackCursor';
|
|
|
|
export function RecordModeOverlay() {
|
|
const {
|
|
isActive,
|
|
setIsActive,
|
|
events,
|
|
addEvent,
|
|
updateEvent,
|
|
removeEvent,
|
|
isPlaying,
|
|
playEvents,
|
|
saveSession,
|
|
clearEvents,
|
|
} = useRecordMode();
|
|
|
|
const [pickingMode, setPickingMode] = useState<'click' | 'scroll' | null>(null);
|
|
const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
|
|
const [editingEventId, setEditingEventId] = useState<string | null>(null);
|
|
|
|
// Edit form state
|
|
const [editForm, setEditForm] = useState<Partial<RecordEvent>>({});
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!mounted || !isActive) return;
|
|
|
|
const handleMessage = (e: MessageEvent) => {
|
|
if (e.data.type === 'ELEMENT_SELECTED') {
|
|
const { selector, rect, tagName } = e.data;
|
|
|
|
if (pickingMode === 'click') {
|
|
addEvent({
|
|
type: 'click',
|
|
selector,
|
|
duration: 1000,
|
|
zoom: 1,
|
|
description: `Click on ${tagName}`,
|
|
motionBlur: false,
|
|
rect,
|
|
});
|
|
} else if (pickingMode === 'scroll') {
|
|
addEvent({
|
|
type: 'scroll',
|
|
selector,
|
|
duration: 1500,
|
|
zoom: 1,
|
|
description: `Scroll to ${tagName}`,
|
|
motionBlur: false,
|
|
rect,
|
|
});
|
|
}
|
|
setPickingMode(null);
|
|
} else if (e.data.type === 'PICKING_CANCELLED') {
|
|
setPickingMode(null);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('message', handleMessage);
|
|
|
|
if (pickingMode) {
|
|
// Find the iframe and signal start picking
|
|
const iframe = document.querySelector('iframe');
|
|
if (iframe?.contentWindow) {
|
|
iframe.contentWindow.postMessage({ type: 'START_PICKING', mode: pickingMode }, '*');
|
|
}
|
|
} else {
|
|
// Signal stop picking
|
|
const iframe = document.querySelector('iframe');
|
|
if (iframe?.contentWindow) {
|
|
iframe.contentWindow.postMessage({ type: 'STOP_PICKING' }, '*');
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
window.removeEventListener('message', handleMessage);
|
|
};
|
|
}, [isActive, pickingMode, addEvent]);
|
|
|
|
const [showEvents, setShowEvents] = useState(false);
|
|
|
|
if (!mounted) return null;
|
|
|
|
if (!isActive) {
|
|
// Failsafe: Never render host toggle in embedded mode
|
|
if (typeof window !== 'undefined' && (window.self !== window.top || window.name === 'record-mode-iframe' || window.location.search.includes('embedded=true'))) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={() => setIsActive(true)}
|
|
className="fixed bottom-6 left-6 z-[9999] bg-[#82ed20]/20 hover:bg-[#82ed20]/30 text-[#82ed20] p-4 rounded-full shadow-2xl transition-all hover:scale-110 record-mode-ignore border border-[#82ed20]/30 backdrop-blur-md animate-pulse"
|
|
>
|
|
<div className="w-5 h-5 rounded-[4px] border-2 border-[#82ed20]" />
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[9998] pointer-events-none font-sans">
|
|
{/* 1. Global Toolbar - Slim Industrial Bar */}
|
|
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
|
|
<div className="bg-black/80 backdrop-blur-2xl border border-white/10 p-2 rounded-[24px] shadow-[0_32px_80px_rgba(0,0,0,0.8)] flex items-center gap-2">
|
|
|
|
{/* Identity Tag */}
|
|
<div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-[16px] border border-white/5 mx-1">
|
|
<div className="w-2 h-2 rounded-full bg-accent animate-pulse" />
|
|
<div className="flex flex-col">
|
|
<span className="text-[10px] font-bold text-white uppercase tracking-wider leading-none">Event Builder</span>
|
|
<span className="text-[8px] text-white/30 uppercase tracking-widest mt-1">Manual Mode</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-px h-6 bg-white/10 mx-1" />
|
|
|
|
{/* Action Tools */}
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
onClick={() => setPickingMode('click')}
|
|
className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'click' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
|
|
>
|
|
<MousePointer2 size={16} />
|
|
<span>Click</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setPickingMode('scroll')}
|
|
className={`flex items-center gap-2 px-4 py-2.5 rounded-[16px] transition-all text-xs font-bold uppercase tracking-wide ${pickingMode === 'scroll' ? 'bg-accent text-primary-dark shadow-lg shadow-accent/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
|
|
>
|
|
<Scroll size={16} />
|
|
<span>Scroll</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => addEvent({
|
|
type: 'wait',
|
|
duration: 2000,
|
|
zoom: 1,
|
|
description: 'Wait for 2s',
|
|
motionBlur: false
|
|
})}
|
|
className="flex items-center gap-2 px-4 py-2.5 rounded-[16px] text-white/40 hover:text-white hover:bg-white/5 transition-all text-xs font-bold uppercase tracking-wide"
|
|
>
|
|
<Plus size={16} />
|
|
<span>Wait</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="w-px h-6 bg-white/10 mx-1" />
|
|
|
|
{/* Sequence Controls */}
|
|
<div className="flex items-center gap-1 p-0.5">
|
|
<button
|
|
onClick={playEvents}
|
|
disabled={isPlaying || events.length === 0}
|
|
className="p-2.5 text-accent hover:bg-accent/10 rounded-[14px] disabled:opacity-20 transition-all"
|
|
title="Preview Sequence"
|
|
>
|
|
<Play size={18} fill="currentColor" />
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setShowEvents(!showEvents)}
|
|
className={`p-2.5 rounded-[14px] transition-all relative ${showEvents ? 'bg-white/10 text-white' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
|
|
>
|
|
<Edit2 size={18} />
|
|
{events.length > 0 && (
|
|
<span className="absolute -top-1 -right-1 w-4 h-4 bg-accent text-primary-dark text-[10px] flex items-center justify-center rounded-full font-bold border-2 border-black">
|
|
{events.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={async () => {
|
|
const session = { events, name: 'Recording', createdAt: new Date().toISOString() };
|
|
try {
|
|
const res = await fetch('/api/save-session', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(session),
|
|
});
|
|
if (res.ok) {
|
|
// Visual feedback could be improved, but alert is fine for dev tool
|
|
alert('Session saved to remotion/session.json');
|
|
} else {
|
|
const err = await res.json();
|
|
alert(`Failed to save: ${err.error}`);
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert('Error saving session');
|
|
}
|
|
}}
|
|
disabled={events.length === 0}
|
|
className="p-3 bg-white/5 hover:bg-green-500/20 rounded-2xl disabled:opacity-30 transition-all text-green-400"
|
|
title="Save to Project (Dev)"
|
|
>
|
|
<Save size={20} />
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
const data = JSON.stringify({ events, name: 'Recording', createdAt: new Date().toISOString() }, null, 2);
|
|
const blob = new Blob([data], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'remotion-session.json';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}}
|
|
disabled={events.length === 0}
|
|
className="p-3 bg-white/5 hover:bg-blue-500/20 rounded-2xl disabled:opacity-30 transition-all text-blue-400"
|
|
title="Download JSON"
|
|
>
|
|
<Download size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="w-px h-6 bg-white/10 mx-1" />
|
|
|
|
<button
|
|
onClick={() => setIsActive(false)}
|
|
className="p-2.5 text-red-500 hover:bg-red-500/10 rounded-[14px] transition-all mx-1"
|
|
title="Exit Studio"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. Event Timeline Popover */}
|
|
{showEvents && (
|
|
<div className="fixed bottom-[100px] left-1/2 -translate-x-1/2 w-[400px] pointer-events-auto z-[9999]">
|
|
<div className="bg-black/90 backdrop-blur-3xl border border-white/10 rounded-[32px] p-6 shadow-[0_40px_100px_rgba(0,0,0,0.9)] max-h-[500px] overflow-hidden flex flex-col scale-in">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h4 className="text-white font-bold text-lg leading-none">Recording Track</h4>
|
|
<p className="text-[10px] text-white/30 uppercase tracking-widest mt-2">{events.length} Actions Recorded</p>
|
|
</div>
|
|
<button
|
|
onClick={clearEvents}
|
|
disabled={events.length === 0}
|
|
className="text-red-400/40 hover:text-red-400 transition-colors p-2 hover:bg-red-500/10 rounded-xl disabled:opacity-10"
|
|
>
|
|
<Trash2 size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto space-y-2 pr-2 scrollbar-hide">
|
|
{events.length === 0 ? (
|
|
<div className="py-12 flex flex-col items-center justify-center text-white/10">
|
|
<Plus size={40} strokeWidth={1} />
|
|
<p className="text-xs mt-4">Timeline is empty</p>
|
|
</div>
|
|
) : (
|
|
events.map((event, index) => (
|
|
<div
|
|
key={event.id}
|
|
className="group flex items-center gap-4 bg-white/[0.03] border border-white/5 p-3 rounded-[20px] transition-all hover:bg-white/[0.06] hover:border-white/10"
|
|
>
|
|
<div className="w-6 h-6 rounded-full bg-white/5 border border-white/5 flex items-center justify-center text-[9px] font-bold text-white/30">
|
|
{index + 1}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-white text-xs font-bold uppercase tracking-widest">{event.type}</span>
|
|
<span className="text-[8px] bg-white/10 px-1.5 py-0.5 rounded text-white/40 font-mono italic">{event.duration}ms</span>
|
|
</div>
|
|
<p className="text-[10px] text-white/30 truncate font-mono mt-1 opacity-60">
|
|
{event.selector || 'system:wait'}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => removeEvent(event.id)}
|
|
className="p-2 text-white/0 group-hover:text-red-400/60 hover:text-red-400 hover:bg-red-500/10 rounded-xl transition-all"
|
|
>
|
|
<Trash2 size={14} />
|
|
</button>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Industrial Selector Highlighter - handled inside iframe via PickingHelper */}
|
|
|
|
{/* Picking Tooltip */}
|
|
{pickingMode && (
|
|
<div className="fixed top-8 left-1/2 -translate-x-1/2 z-[10000] pointer-events-auto">
|
|
<div className="bg-accent text-primary-dark px-6 py-3 rounded-full flex items-center gap-4 shadow-[0_20px_40px_rgba(130,237,32,0.4)] animate-reveal border border-primary-dark/10">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-2 h-2 rounded-full bg-primary-dark animate-pulse" />
|
|
<span className="font-black uppercase tracking-widest text-xs">Assigning {pickingMode}</span>
|
|
</div>
|
|
<div className="w-px h-6 bg-primary-dark/20" />
|
|
<button
|
|
onClick={() => {
|
|
setPickingMode(null);
|
|
setHoveredElement(null);
|
|
}}
|
|
className="text-[10px] font-bold uppercase tracking-widest opacity-60 hover:opacity-100 transition-opacity bg-primary-dark/10 px-3 py-1.5 rounded-full"
|
|
>
|
|
ESC to Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<PlaybackCursor />
|
|
</div>
|
|
);
|
|
}
|