index.tsx raw

   1  import { useMemo } from 'react'
   2  import ExternalLink from '../ExternalLink'
   3  import Player from './Player'
   4  
   5  export default function YoutubeEmbeddedPlayer({
   6    url,
   7    className
   8  }: {
   9    url: string
  10    className?: string
  11    mustLoad?: boolean // kept for API compatibility, now ignored
  12  }) {
  13    const { videoId, isShort } = useMemo(() => parseYoutubeUrl(url), [url])
  14  
  15    if (!videoId) {
  16      return <ExternalLink url={url} />
  17    }
  18  
  19    return <Player videoId={videoId} isShort={isShort} className={className} />
  20  }
  21  
  22  function parseYoutubeUrl(url: string) {
  23    const patterns = [
  24      /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
  25      /youtube\.com\/watch\?.*v=([^&\n?#]+)/,
  26      /youtube\.com\/shorts\/([^&\n?#]+)/,
  27      /youtube\.com\/live\/([^&\n?#]+)/
  28    ]
  29  
  30    let videoId: string | null = null
  31    let isShort = false
  32    for (const [index, pattern] of patterns.entries()) {
  33      const match = url.match(pattern)
  34      if (match) {
  35        videoId = match[1].trim()
  36        isShort = index === 2 // Check if it's a short video
  37        break
  38      }
  39    }
  40    return { videoId, isShort }
  41  }
  42