Added recording functionality + CSS

Co-authored-by: Weston Ludeke <[email protected]> Co-authored-by: Rachele Lang <[email protected]> Co-authored-by: Tess Lockey <[email protected]>
campfire-previews · Mar 22, 2024 · 63a9f08 · 63a9f08
1 parent 3ff2045
commit 63a9f08
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Campfire Demo</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -49,7 +49,7 @@ html {
 	left: 0;
 	top: 0;
 	background-color: rgba(255, 255, 255, 0);
-	z-index: 0;
+	z-index: 1;
 }
 
 #recordingModalHeader {

diff --git a/src/components/FeedbackInterface.jsx b/src/components/FeedbackInterface.jsx
@@ -5,6 +5,13 @@ import RecordingModal from "./RecordingModal.jsx";
 import ScreenshotModal from "./ScreenshotModal.jsx"; 
 import RecordingInterface from "./RecordingInterface";
 
+import * as rrweb from "rrweb";
+import rrwebPlayer from 'rrweb-player';
+import 'rrweb-player/dist/style.css';
+
+let events = [];
+let stopFn;
+
 const initialState = {
 	isConversationModalVisible: false,
 	isScreenshotModalVisible: false,
@@ -51,12 +58,27 @@ function FeedbackInterface({ repo, issue_number, comments, onCreateComment, iFra
 	}
 
 	const handleStartRecording = (e) => {
+		events = [];
 		dispatchModals({ type: "hide-all-modals" });
 		setIsRecording(true);
+		stopFn = new rrweb.record({
+			emit(event) {
+				console.log(event)
+				events.push(event);
+			},
+			recordCrossOriginIframes: true,
+		});
+
+		// the second argument for postMessage is the 'targetOrigin'
+		// eventually, the targetOrigin should be "https://CLIENT-APP-PR.preview.CLIENT_DOMAIN"
+		const URL_PATHNAME = window.location.pathname;
+		iFrameRef.current.contentWindow.postMessage(URL_PATHNAME, 'http://localhost:5174');
 	}
 
 	const handleStopRecording = (e) => {
 		setIsRecording(false);
+		stopFn();
+		dispatchModals({ type: "display-recording-modal" });
 	} 
 
   return (
@@ -81,7 +103,7 @@ function FeedbackInterface({ repo, issue_number, comments, onCreateComment, iFra
 			{ state.isRecordingModalVisible ? 
 				<RecordingModal 
 					onHideModal={handleHideModal}
-					iFrameRef={iFrameRef}
+					events={events}
 			/> : null }
 
 			{ isRecording ? 

diff --git a/src/components/RecordingModal.jsx b/src/components/RecordingModal.jsx
@@ -4,52 +4,26 @@ import * as rrweb from "rrweb";
 import rrwebPlayer from 'rrweb-player';
 import 'rrweb-player/dist/style.css';
 
-function RecordingModal({ onHideModal, iFrameRef }) {
-	const [ events, setEvents ] = useState([]);
-	const [ stopFn, setStopFn ] = useState(null);
+function RecordingModal({ onHideModal, events }) {
 	const [ isRecording, setIsRecording ] = useState(false);
 	const playerRef = useRef(null);
 
 	const onModalOverlayClick = (e) => {
-	onHideModal();
+		onHideModal();
 	}
 
-	const handleStartRecording = (e) => {
-		e.preventDefault();
-
-		setIsRecording(true)
-		setStopFn(prevState => (new rrweb.record({
-			emit(event) {
-				setEvents(prevState => prevState.concat(event));
-			},
-			recordCrossOriginIframes: true,
-		})));
-
-		// the second argument for postMessage is the 'targetOrigin'
-		// eventually, the targetOrigin should be "https://CLIENT-APP-PR.preview.CLIENT_DOMAIN"
-		const URL_PATHNAME = window.location.pathname;
-		iFrameRef.current.contentWindow.postMessage(URL_PATHNAME, 'http://localhost:5174');
-	}
-
-	const handleStopRecording = (e) => {
-		e.preventDefault();
-
-		stopFn();
-		setIsRecording(false);
+	useEffect(() => {
 		const replayer = new rrwebPlayer({
 			target: playerRef.current,
 			props: { events }
 		});
 		replayer.play();
-	}
+	}, [])
 
 	return (
 		<>
 			<div className="modalContainer">
 				<p>Session Replay Modal</p>
-				<button id="start-recording" onClick={handleStartRecording} disabled={isRecording}>Start</button>
-				<button id="stop-recording" onClick={handleStopRecording} disabled={!isRecording}>Stop</button>
-
 				<div id="player" ref={playerRef}></div>
 			</div>
 			<div className="modalOverlay" onClick={onModalOverlayClick}></div>

diff --git a/src/main.jsx b/src/main.jsx
@@ -5,7 +5,5 @@ import "./whitespace-reset.css";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <App />
 );