version 2.0.1-alpha #109

heysagnik · 2025-10-29T22:50:10Z

This PR is for implementing new changes in terms of UI and features

…an up unused imports

vercel · 2025-10-29T23:00:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
screen-rec	Ready	Preview	Comment	Oct 29, 2025 11:04pm

heysagnik · 2025-10-29T23:14:22Z

Issues:

Not responsive in the record page
The video combined has a smaller pip camera view.
More bugs on the go.

Copilot

Pull Request Overview

This is a comprehensive rewrite that migrates the screen recording application from a Parcel-based vanilla JavaScript architecture to a modern Next.js 15 + React 19 + TypeScript stack with Tailwind CSS 4. The refactor introduces React hooks for state management, improved type safety, and a component-based architecture while maintaining the core screen recording functionality.

Key Changes:

Complete migration from vanilla JS to Next.js 15 with React 19 and TypeScript
Replaced SCSS with Tailwind CSS 4 for styling
Introduced custom React hooks (useRecording, useMediaStreams, useCameraPosition) for better code organization
Added TypeScript type safety throughout the codebase

Reviewed Changes

Copilot reviewed 60 out of 91 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
package.json	Updated dependencies from Parcel to Next.js 15 + React 19 ecosystem
tsconfig.json	Added TypeScript configuration for Next.js with strict mode
src/hooks/useRecording.ts	New custom hook for managing recording lifecycle with MediaRecorder API
src/hooks/useMediaStreams.ts	New hook for managing screen/camera/audio stream state
src/utils/streamCombiner.ts	Extracted stream combining logic with canvas rendering for PiP layouts
src/utils/telemetry.ts	Added telemetry service for analytics tracking
src/components/*	New React components replacing vanilla JS DOM manipulation
src/app/*	Next.js App Router pages and layout

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-29T23:16:59Z

src/app/record/page.tsx

+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {


Duplicate keyboard shortcut handlers detected. There are two separate useEffect hooks (lines 368-436 and 477-503) implementing the same keyboard shortcuts. This creates redundant event listeners and could lead to handlers firing twice. Consolidate into a single keyboard shortcut handler.

Copilot · 2025-10-29T23:16:59Z

src/app/record/page.tsx

+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      const key = e.key.toLowerCase();
+      const mod = e.ctrlKey || e.metaKey;
+      if (!mod) return;
+      if (key === 'r') {
+        e.preventDefault();
+        if (isRecording) {
+          handleStopRecording();
+        } else {
+          handleStartRecording();
+        }
+      }
+      if (key === 'p') { e.preventDefault(); if (isRecording) { pauseRecording(); } }
+      if (key === 'm') { e.preventDefault(); handleToggleMic(); }
+      if (key === 's') {
+        e.preventDefault();
+        if (isScreenShared) {
+          stopScreen();
+        } else {
+          handleShareScreen();
+        }
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [isRecording, handleStopRecording, handleStartRecording, pauseRecording, handleToggleMic, isScreenShared, stopScreen, handleShareScreen]);


Duplicate keyboard shortcut handlers detected. There are two separate useEffect hooks (lines 368-436 and 477-503) implementing the same keyboard shortcuts. This creates redundant event listeners and could lead to handlers firing twice. Consolidate into a single keyboard shortcut handler.

Suggested change

useEffect(() => {

const onKey = (e: KeyboardEvent) => {

const key = e.key.toLowerCase();

const mod = e.ctrlKey || e.metaKey;

if (!mod) return;

if (key === 'r') {

e.preventDefault();

if (isRecording) {

handleStopRecording();

} else {

handleStartRecording();

}

}

if (key === 'p') { e.preventDefault(); if (isRecording) { pauseRecording(); } }

if (key === 'm') { e.preventDefault(); handleToggleMic(); }

if (key === 's') {

e.preventDefault();

if (isScreenShared) {

stopScreen();

} else {

handleShareScreen();

}

}

};

window.addEventListener('keydown', onKey);

return () => window.removeEventListener('keydown', onKey);

}, [isRecording, handleStopRecording, handleStartRecording, pauseRecording, handleToggleMic, isScreenShared, stopScreen, handleShareScreen]);

// (Removed duplicate keyboard shortcut useEffect. Logic is now consolidated above.)

Copilot · 2025-10-29T23:16:59Z

src/app/record/page.tsx

+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {


Duplicate beforeunload event handlers detected. Two separate useEffect hooks (lines 224-234 and 506-515) register the same beforeunload event listener, causing duplicate event handlers. Remove one of these duplicate useEffect blocks.

Copilot · 2025-10-29T23:16:59Z

src/app/record/page.tsx

+  useEffect(() => {
+    const beforeUnload = (e: BeforeUnloadEvent) => {
+      if (isRecording) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', beforeUnload);
+    return () => window.removeEventListener('beforeunload', beforeUnload);
+  }, [isRecording]);


Duplicate beforeunload event handlers detected. Two separate useEffect hooks (lines 224-234 and 506-515) register the same beforeunload event listener, causing duplicate event handlers. Remove one of these duplicate useEffect blocks.

Suggested change

useEffect(() => {

const beforeUnload = (e: BeforeUnloadEvent) => {

if (isRecording) {

e.preventDefault();

e.returnValue = '';

}

};

window.addEventListener('beforeunload', beforeUnload);

return () => window.removeEventListener('beforeunload', beforeUnload);

}, [isRecording]);

Copilot · 2025-10-29T23:17:00Z

src/hooks/useRecording.ts

+        startGuardRef.current = false;
+      };
+
+      mediaRecorder.start(1000); // keep timeslice; make configurable later


Magic number 1000 used as timeslice parameter. This should be extracted to a constant in RECORDING_CONFIG for consistency with other configuration values and to make it configurable as mentioned in the comment.

Copilot · 2025-10-29T23:17:00Z

package.json

-    "test": "npm run check-format && npm run check-lint && npm run build",
-    "prepare": "husky install"
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",


Using --turbopack flag in production build. Turbopack is experimental and may not be stable for production builds. Consider removing the --turbopack flag from the build script and only use it for development.

Suggested change

"build": "next build --turbopack",

"build": "next build",

Copilot · 2025-10-29T23:17:00Z

src/utils/streamCombiner.ts

+  canvas.width = 16;
+  canvas.height = 9;


Canvas initialized with incorrect dimensions (16x9 pixels). This creates an extremely small canvas that will be immediately resized, causing unnecessary initial rendering. Initialize with more reasonable default dimensions or the first available video dimensions.

heysagnik · 2025-10-30T04:02:23Z

@copilot could you please provide me the summary of the changes needed in a paragraph.

Copilot · 2025-10-30T04:02:30Z

@heysagnik I've opened a new pull request, #110, to work on those changes. Once the pull request is ready, I'll request review from you.

version 2.0.1-alpha

2c97c47

heysagnik added hacktoberfest hacktoberfest-accepted labels Oct 29, 2025

refactor: improve conditional handling in key event listeners and cle…

d1c0834

…an up unused imports

vercel bot deployed to Preview October 29, 2025 23:01 View deployment

heysagnik requested a review from Copilot October 29, 2025 23:14

Copilot AI reviewed Oct 29, 2025

View reviewed changes

Copilot AI mentioned this pull request Oct 30, 2025

Provide summary of code review findings #110

Draft

		useEffect(() => {
		const handleKeyPress = (event: KeyboardEvent) => {

		useEffect(() => {
		const handleBeforeUnload = (e: BeforeUnloadEvent) => {

version 2.0.1-alpha #109

Are you sure you want to change the base?

version 2.0.1-alpha #109

Uh oh!

Conversation

heysagnik commented Oct 29, 2025

Uh oh!

vercel bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

heysagnik commented Oct 29, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

Uh oh!

heysagnik commented Oct 30, 2025

Uh oh!

Copilot AI commented Oct 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Oct 29, 2025 •

edited

Loading