Feat: added timestamp for Youtube URL while creating link

[bikalsiwakoti]

Fixes: #496

Summary
When the destination URL is a YouTube video, the link builder now shows a Video timestamp control so users can set a start time (minutes/seconds) without editing the URL. The time is stored as ?t= on the destination URL and passed through by the short link.

Changes
packages/utils – URL helpers: isYouTubeUrl(), getYouTubeTimestampFromUrl(), setYouTubeTimestampInUrl() (detect YouTube URLs, read/write t in seconds; support 90, 1m30s, etc.).

VideoTimestampInput – New control shown only for YouTube destination URLs: minutes/seconds inputs, Clear button, helper text with ?t=..., tooltip. Kept in sync with the destination URL.
Placement – Rendered between Destination URL and Short link in the create/edit link modal and on the link detail page.

Testing

• Set a YouTube URL as destination → Video timestamp row appears; set minutes/seconds → URL gets ?t=; Clear removes it.
• Non-YouTube URL → Video timestamp row is hidden.
• Short link with ?t= opens the video at the given time.

After changes : Loom video

• I've made these changes—please review and say if anything (including UI) should be updated.
• Changes are in; feedback welcome on whether the UI or anything else needs tweaks.

Summary by CodeRabbit

Release Notes

• New Features
  • Added timestamp control for YouTube video links. Users can now specify a start time (minutes and seconds) when creating shortened links to YouTube videos. The timestamp is automatically included in the resulting link and can be cleared as needed.

[vercel]

@bikalsiwakoti is attempting to deploy a commit to the Dub Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces YouTube timestamp functionality to Dub's link builder. When a destination URL is detected as a YouTube video, a new VideoTimestampInput component appears, allowing users to set video timestamps via minutes and seconds inputs. Supporting utility functions handle YouTube URL detection and timestamp query parameter management.

Changes

Cohort / File(s)	Summary
YouTube Utilities packages/utils/src/functions/urls.ts	Added three new exported functions: isYouTubeUrl() to detect YouTube URLs by hostname, getYouTubeTimestampFromUrl() to parse the t parameter in multiple formats (seconds or XmYs), and setYouTubeTimestampInUrl() to set or remove timestamps from URLs.
VideoTimestampInput Component apps/web/ui/links/link-builder/controls/video-timestamp-input.tsx	Introduces new React component that integrates with react-hook-form to manage YouTube video timestamps. Synchronizes minutes/seconds inputs with the URL's ?t= parameter, extracts existing timestamps on load, validates input ranges, and displays a live preview. Renders conditionally only for YouTube URLs.
Link Builder UI Integration apps/web/app/app.dub.co/(dashboard)/[slug]/links/[...link]/page-client.tsx, apps/web/ui/modals/link-builder/index.tsx	Added VideoTimestampInput component imports and renders between DestinationUrlInput and ShortLinkInput in both the main page layout and modal component.

Sequence Diagram

sequenceDiagram
    actor User
    participant VideoTimestampInput
    participant react-hook-form
    participant YouTube Utilities
    
    User->>VideoTimestampInput: Enters minutes/seconds
    activate VideoTimestampInput
    VideoTimestampInput->>YouTube Utilities: Call setYouTubeTimestampInUrl()
    activate YouTube Utilities
    YouTube Utilities->>YouTube Utilities: Parse and validate timestamp
    YouTube Utilities->>YouTube Utilities: Append/update ?t= parameter
    YouTube Utilities-->>VideoTimestampInput: Return updated URL
    deactivate YouTube Utilities
    VideoTimestampInput->>react-hook-form: Update form field value
    activate react-hook-form
    react-hook-form-->>VideoTimestampInput: Form state updated
    deactivate react-hook-form
    VideoTimestampInput-->>User: Display updated timestamp preview
    deactivate VideoTimestampInput

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A timestamp for every frame,
With minutes, seconds—no need to calculate or shame,
YouTube links now jump with ease,
Sharing moments that will please,
Video chapters made simple, a dreamy dream! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature added: a YouTube timestamp control for links with clear, concise language.
Linked Issues check	✅ Passed	All coding requirements from issue #496 are met: YouTube URL detection, timestamp input UI, ?t= parameter management, and passthrough functionality are fully implemented.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing YouTube timestamp functionality as specified in issue #496; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ 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

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

packages/utils/src/functions/urls.ts (1)

242-260: Consider supporting hour format (h) in timestamp parsing.

YouTube timestamps can include hours (e.g., 1h30m15s for longer videos). Currently, 1h30m15s would only parse 30m15s = 1830s, silently dropping the hour component.

Proposed fix

     let total = 0;
+    const h = trimmed.match(/(\d+)h/);
     const m = trimmed.match(/(\d+)m/);
     const s = trimmed.match(/(\d+)s/);
+    if (h) total += parseInt(h[1], 10) * 3600;
     if (m) total += parseInt(m[1], 10) * 60;
     if (s) total += parseInt(s[1], 10);

apps/web/ui/links/link-builder/controls/video-timestamp-input.tsx (1)

32-42: Potential for redundant state updates from self-triggered useEffect.

When applyTimestamp calls setValue("url", ...), it changes url, which re-triggers this useEffect. While it doesn't cause an infinite loop (values converge), it's doing unnecessary work on every keystroke. Consider skipping the sync when the change originated from within the component — e.g., by comparing the parsed timestamp with the current local state before calling setMinutes/setSeconds, or by using a ref flag to suppress the effect after applyTimestamp.

---

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.}