fix: youtube video loading time

[GunnerTeh]

Summary by CodeRabbit

• New Features

  • YouTube video selection now captures and returns the video's title and thumbnail image along with the selection.

• Tests

  • Updated tests to expect the new title and image fields in the YouTube selection payload.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[linear]

NES-1101 The image and title of the video is slow to update when changing

[coderabbitai]

Walkthrough

YouTube video selection now includes the video's title and thumbnail URL in the onSelect callback payload (populated from data?.snippet.title and data?.snippet.thumbnails?.default?.url), with null fallbacks. Tests updated to expect these fields.

Changes

Cohort / File(s)	Summary
YouTubeDetails component apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.tsx	onSelect payload extended to include `title: string
YouTubeDetails tests apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.spec.tsx	Tests updated to include title and image in expected onSelect payloads.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: stop upload if changing video source #8449 — Related change to VideoLibrary selection handling; both touch YouTube video selection flows and payload/behavior during source switches.

Suggested reviewers

• csiyang
• tanflem

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'fix: youtube video loading time' is vague and doesn't accurately reflect the actual changes, which add title and image fields to the onSelect payload for YouTube videos.	Use a more descriptive title like 'fix: add title and image to YouTube video selection payload' to clearly communicate the specific change being made.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch davidli/nes-1101-the-image-and-title-of-the-video-is-slow-to-update-when

---

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 6dcac76 and c46a9f9.

📒 Files selected for processing (1)

• apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.spec.tsx

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/base.mdc)

**/*.{ts,tsx,js,jsx}: Use early returns whenever possible to make the code more readable.
Use descriptive variable and function/const names.
Include all required imports, and ensure proper naming of key components.

Files:

• apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.spec.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/base.mdc)

Define a type if possible.

Files:

• apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.spec.tsx

apps/**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/apps.mdc)

apps/**/*.{js,jsx,ts,tsx}: Always use MUI over HTML elements; avoid using CSS or tags.
Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.

Files:

• apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.spec.tsx

🧠 Learnings (1)

📚 Learning: 2025-12-19T04:58:24.460Z

Learnt from: CR
Repo: JesusFilm/core PR: 0
File: apps/watch/AGENTS.md:0-0
Timestamp: 2025-12-19T04:58:24.460Z
Learning: Applies to apps/watch/src/**/*.{ts,tsx} : Preserve existing contracts in components like `VideoBlock` which depend on the full provider stack, video.js, and mux metadata so autoplay, subtitles, and analytics remain intact.

Applied to files:

• apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.spec.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: test (22, 1/3)
• GitHub Check: lint (22)

🔇 Additional comments (4)

apps/journeys-admin/src/components/Editor/Slider/Settings/Drawer/VideoLibrary/VideoFromYouTube/YouTubeDetails/YouTubeDetails.spec.tsx (4)

170-178: LGTM!

The test assertion correctly validates the new image and title fields in the onSelect payload. The expected values align with the mock data from getVideosWithOffsetAndUrl.

---

729-737: LGTM!

The test correctly verifies that image and title are included in the payload while preserving startAt, endAt, and subtitleLanguageId values from the active video block.

---

790-798: LGTM!

The test correctly validates that image and title fields are included while preserving startAt and endAt values, with subtitleLanguageId appropriately set to null.

---

867-875: LGTM!

The test correctly validates that when selecting a different video, startAt/endAt reset to defaults (0/363) and subtitleLanguageId resets to null, while the new image and title fields are populated from the newly selected video's data.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit c46a9f9

Command	Status	Duration	Result
nx run journeys-admin-e2e:e2e	✅ Succeeded	2m 26s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-13 21:38:58 UTC

[nx-cloud]

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

---

View your CI Pipeline Execution ↗ for commit c46a9f9

Command	Status	Duration	Result
nx run journeys-admin-e2e:e2e	❌ Failed	6m	View ↗
nx run-many --target=vercel-alias --projects=jo...	✅ Succeeded	2s	View ↗
nx run-many --target=upload-sourcemaps --projec...	✅ Succeeded	12s	View ↗
nx run-many --target=deploy --projects=journeys...	✅ Succeeded	47s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-13 21:32:35 UTC

[github-actions]

The latest updates on your projects.

Name	Status	Preview	Updated (UTC)
journeys-admin	✅ Ready	journeys-admin preview	Wed Jan 14 10:23:56 NZDT 2026