feat: conditionally enable recording studio and feedback tool via env vars

components/record-mode/RecordModeContext.tsx

@@ -26,6 +26,7 @@ interface RecordModeContextType {
   hoveredEventId: string | null;
   setHoveredEventId: (id: string | null) => void;
   isClicking: boolean;
+  isEnabled: boolean;
 }
 
 const RecordModeContext = createContext<RecordModeContextType | null>(null);
@@ -56,12 +57,19 @@ export function useRecordMode(): RecordModeContextType {
       setHoveredEventId: () => {},
       setEvents: () => {},
       isClicking: false,
+      isEnabled: false,
     };
   }
   return context;
 }
 
-export function RecordModeProvider({ children }: { children: React.ReactNode }) {
+export function RecordModeProvider({
+  children,
+  isEnabled = false,
+}: {
+  children: React.ReactNode;
+  isEnabled?: boolean;
+}) {
   const [isActive, setIsActiveState] = useState(false);
   const [events, setEvents] = useState<RecordEvent[]>([]);
   const [isPlaying, setIsPlaying] = useState(false);
@@ -74,45 +82,54 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
   const [isEmbedded, setIsEmbedded] = useState(false);
 
   useEffect(() => {
+    console.log('[RecordModeProvider] Mounted with isEnabled:', isEnabled);
+  }, [isEnabled]);
+
+  useEffect(() => {
+    if (!isEnabled) return;
     const embedded =
       typeof window !== 'undefined' &&
       (window.location.search.includes('embedded=true') ||
         window.name === 'record-mode-iframe' ||
         window.self !== window.top);
     setIsEmbedded(embedded);
-  }, []);
+  }, [isEnabled]);
 
   const setIsActive = (active: boolean) => {
+    if (!isEnabled) return;
     setIsActiveState(active);
     if (active) setIsFeedbackActiveState(false);
   };
 
   const setIsFeedbackActive = (active: boolean) => {
     setIsFeedbackActiveState(active);
-    if (active) setIsActiveState(false);
+    if (active && isEnabled) setIsActiveState(false);
   };
 
   const isPlayingRef = useRef(false);
   const isLoadedRef = useRef(false);
 
   useEffect(() => {
+    if (!isEnabled) return;
     const savedEvents = localStorage.getItem('klz-record-events');
     const savedActive = localStorage.getItem('klz-record-active');
     if (savedEvents) setEvents(JSON.parse(savedEvents));
     if (savedActive) setIsActive(JSON.parse(savedActive));
     isLoadedRef.current = true;
-  }, []);
+  }, [isEnabled]);
 
   useEffect(() => {
-    if (!isLoadedRef.current) return;
+    if (!isEnabled || !isLoadedRef.current) return;
     localStorage.setItem('klz-record-events', JSON.stringify(events));
-  }, [events]);
+  }, [events, isEnabled]);
 
   useEffect(() => {
+    if (!isEnabled) return;
     localStorage.setItem('klz-record-active', JSON.stringify(isActive));
-  }, [isActive]);
+  }, [isActive, isEnabled]);
 
   useEffect(() => {
+    if (!isEnabled) return;
     if (isEmbedded) {
       const handlePlaybackMessage = (e: MessageEvent) => {
         if (e.data.type === 'PLAY_EVENT') {
@@ -177,10 +194,10 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
       window.addEventListener('message', handlePlaybackMessage);
       return () => window.removeEventListener('message', handlePlaybackMessage);
     }
-  }, [isEmbedded]);
+  }, [isEmbedded, isEnabled]);
 
   useEffect(() => {
-    if (isEmbedded || !isActive) return;
+    if (!isEnabled || isEmbedded || !isActive) return;
     const event = events.find((e) => e.id === hoveredEventId);
     const iframe = document.querySelector('iframe[name="record-mode-iframe"]') as HTMLIFrameElement;
     if (iframe?.contentWindow) {
@@ -189,9 +206,10 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
         '*',
       );
     }
-  }, [hoveredEventId, events, isActive, isEmbedded]);
+  }, [hoveredEventId, events, isActive, isEmbedded, isEnabled]);
 
   const addEvent = (event: Omit<RecordEvent, 'id' | 'timestamp'>) => {
+    if (!isEnabled) return;
     const newEvent: RecordEvent = {
       realClick: false,
       ...event,
@@ -202,12 +220,14 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
   };
 
   const updateEvent = (id: string, updatedFields: Partial<RecordEvent>) => {
+    if (!isEnabled) return;
     setEvents((prev) =>
       prev.map((event) => (event.id === id ? { ...event, ...updatedFields } : event)),
     );
   };
 
   const reorderEvents = (startIndex: number, endIndex: number) => {
+    if (!isEnabled) return;
     const result = Array.from(events);
     const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
@@ -215,10 +235,12 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
   };
 
   const removeEvent = (id: string) => {
+    if (!isEnabled) return;
     setEvents((prev) => prev.filter((event) => event.id !== id));
   };
 
   const clearEvents = () => {
+    if (!isEnabled) return;
     if (confirm('Clear all recorded events?')) setEvents([]);
   };
 
@@ -233,11 +255,12 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
       : null;
 
   const saveSession = (name: string) => {
+    if (!isEnabled) return;
     console.log('Saving session:', name, events);
   };
 
   const playEvents = async () => {
-    if (events.length === 0 || isPlayingRef.current) return;
+    if (!isEnabled || events.length === 0 || isPlayingRef.current) return;
     setIsPlaying(true);
     isPlayingRef.current = true;
     const sortedEvents = [...events].sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
@@ -263,7 +286,6 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
           if (iframe?.contentWindow)
             iframe.contentWindow.postMessage({ type: 'PLAY_EVENT', event }, '*');
         } else {
-          // Self-execution logic for guest
           const el = document.querySelector(event.selector) as HTMLElement;
           if (el) {
             if (event.type === 'scroll') el.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -361,6 +383,7 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
         hoveredEventId,
         setHoveredEventId,
         isClicking,
+        isEnabled,
       }}
     >
       {children}