Harden YouTube URL handling in embed feature (#599)

### Description

This pull request refactors the `parseYoutubeLink` function in
`ClientPreview.tsx` to use the standard `URL` API for parsing YouTube
URLs. This change improves the reliability and maintainability of the
code by handling edge cases and reducing manual string manipulation.

#### Improvements to YouTube URL parsing

- Refactored `parseYoutubeLink` to use the `URL` API for robust parsing
of YouTube URLs, improving error handling and supporting more YouTube
link formats.
- Enhanced extraction of video ID, playlist, and timestamp by using
`URL` search parameters instead of manual string splitting, making the
code more readable and less error-prone.

Fixes https://github.com/SableClient/Sable/security/code-scanning/9

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

No AI involved

Author: 7w1

src/app/components/url-preview/ClientPreview.tsx

@@ -156,31 +156,48 @@ type YoutubeLink = {
   isMusic: boolean;
 };
 
-function parseYoutubeLink(url: string): YoutubeLink | null {
-  const urlsplit = url.split('/');
-  const path = urlsplit[urlsplit.length - 1];
+function parseYoutubeLink(url: Readonly<string>): YoutubeLink | null {
+  /**
+   * the parsed version of `url`
+   */
+  let parsedURL: URL;
+  try {
+    parsedURL = new URL(url);
+  } catch {
+    // new URL can throw
+    return null;
+  }
+  const urlHost = parsedURL.host;
+  const urlSearchParams = parsedURL.searchParams;
 
+  /**
+   * The id of the youtube video, for example `MTn_bhTVr2U`
+   */
   let videoId: string | undefined;
-  let params: string[];
-
-  if (url.includes('youtu.be')) {
-    const split = path.split('?');
-    [videoId] = split;
-    params = split[1]?.split('&');
-  } else if (url.includes('/shorts/')) {
-    const split = path.split('?');
-    [videoId] = split;
-    params = split[1]?.split('&') ?? [];
-  } else if (url.includes('youtube.com')) {
-    params = path.split('?')[1]?.split('&') ?? [];
-    videoId = params.find((s) => s.startsWith('v='))?.split('v=')[1];
+
+  if (urlHost === 'youtu.be' || urlHost.endsWith('.youtu.be')) {
+    // example https://youtu.be/MTn_bhTVr2U?si=xxxx
+    // pathname includes the leading `/` so we have to split that
+    videoId = parsedURL.pathname.slice(1);
+  } else if (parsedURL.pathname.startsWith('/shorts/')) {
+    // example https://youtube.com/shorts/R0KZIPOqITw?si=xxxx
+    videoId = parsedURL.pathname.split('/').findLast(Boolean);
+  } else if (
+    (urlHost === 'youtube.com' || urlHost.endsWith('.youtube.com')) &&
+    parsedURL.pathname === '/watch'
+  ) {
+    // example: https://www.youtube.com/watch?v=MTn_bhTVr2U&list=RDjcB4zu4KX10&index=3
+    // get returns null if `v` is not in the url
+    videoId = urlSearchParams.get('v') ?? undefined;
   } else return null;
 
   if (!videoId) return null;
 
   // playlist is not used for the embed, it can be appended as is
-  const playlist = params ? params.find((s) => s.startsWith('list=')) : undefined;
-  const timestamp = params ? params.find((s) => s.startsWith('t='))?.split('t=')[1] : undefined;
+  // returns null if `list` doesn't exist
+  const playlist = urlSearchParams.get('list') ?? undefined;
+  // returns null if `t` doesn't exist
+  const timestamp = urlSearchParams.get('t') ?? urlSearchParams.get('start') ?? undefined;
 
   return {
     videoId,