⚡ Optimize VideoTimeline re-renders

[Godzilla675]

Optimized VideoTimeline component to prevent unnecessary re-renders.

• Split useAppSelector to select individual fields (mediaFiles, activeElement, etc.) instead of the entire projectState. This prevents re-renders when unrelated fields (like currentTime) change.
• Memoized videoClips filtering using useMemo.
• Wrapped VideoTimeline in React.memo to prevent re-renders from parent updates when props/selectors are unchanged.
• Cleaned up unused imports and duplicate React imports.

---

PR created automatically by Jules for task 9001772994998802512 started by @Godzilla675

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[gemini-code-assist]

Summary of Changes

Hello @Godzilla675, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the performance of the VideoTimeline component by implementing several React optimization techniques. The changes focus on reducing unnecessary re-renders through more granular state selection, memoizing computed values, and leveraging React.memo for the component itself. Additionally, it enhances code robustness by adding optional chaining for safer array access and cleans up unused code.

Highlights

• Optimized useAppSelector usage: The useAppSelector hook was refactored to select individual fields (mediaFiles, activeElement, activeElementIndex, timelineZoom) instead of the entire projectState object. This change prevents unnecessary re-renders of the VideoTimeline component when unrelated state fields (e.g., currentTime) are updated.
• Memoized video clip filtering: The filtering of mediaFiles to get only video clips is now memoized using useMemo. This ensures that the videoClips array is only recomputed when mediaFiles itself changes, avoiding redundant calculations on every render.
• Wrapped component in React.memo: The VideoTimeline component is now wrapped in React.memo, which provides a performance optimization by preventing re-renders when its props or selected state values have not changed.
• Improved array access safety: Optional chaining (?.) was added to accesses of mediaFiles[activeElementIndex] to prevent potential runtime errors if activeElementIndex is out of bounds or mediaFiles is empty.
• Cleaned up imports: Unused imports such as useCallback, OnScale, OnRotate, useState, Header, and debounce were removed, and the memo import was added.

Changelog

• apps/web/app/components/editor/timeline/elements-timeline/VideoTimeline.tsx
  • Refactored useAppSelector calls to select specific state fields individually.
  • Memoized the filtering logic for video clips using useMemo.
  • Wrapped the VideoTimeline component with React.memo for performance optimization.
  • Removed unused imports and adjusted the component's export declaration.
  • Added optional chaining to mediaFiles[activeElementIndex] to prevent potential errors.

Activity

• PR created automatically by Jules for task 9001772994998802512, initiated by @Godzilla675.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces significant performance optimizations to the VideoTimeline component, effectively preventing unnecessary re-renders. The strategy of splitting the useAppSelector hook to subscribe to individual state slices (mediaFiles, activeElement, etc.) instead of the entire projectState is a key improvement. This is well-complemented by memoizing the derived videoClips data with useMemo and wrapping the entire component in React.memo. Additionally, the code is made more robust by adding optional chaining when accessing array elements, which prevents potential runtime errors. The cleanup of unused imports is also a welcome improvement. Overall, these are excellent changes that follow React best practices for performance and maintainability.

[Copilot]

Pull request overview

This PR reduces unnecessary re-renders in the web editor’s VideoTimeline by narrowing Redux selector subscriptions, memoizing derived clip lists, and memo-wrapping the component so it only re-renders when relevant state/props change.

Changes:

• Split useAppSelector usage to subscribe to individual projectState fields instead of the whole slice.
• Memoized the “video clips only” list with useMemo and reused it in render.
• Converted the component to a memoized default export (export default memo(VideoTimeline)).

---

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

[Copilot]

React default import is unused in this file (only hooks are referenced). This will trigger unused-import linting in many Next.js/TS setups; drop the default React import and import the hooks directly.

Suggested change

	import React, { useRef, useMemo, memo, useEffect } from "react";
	import { useRef, useMemo, memo, useEffect } from "react";

[Copilot]

OnDrag and OnResize are only used as TypeScript types here. Consider importing them as type-only exports to avoid accidental runtime imports and to make intent clear (e.g., import Moveable, { type OnDrag, type OnResize } ...).

Suggested change

	import Moveable, { OnDrag, OnResize } from "react-moveable";
	import Moveable, { type OnDrag, type OnResize } from "react-moveable";