112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
import mediaManager from '@/services/media-manager.service'
|
|
import { YouTubePlayer } from '@/types/youtube'
|
|
import { useEffect, useMemo, useRef, useState } from 'react'
|
|
|
|
export default function YoutubeEmbeddedPlayer({
|
|
url,
|
|
className
|
|
}: {
|
|
url: string
|
|
className?: string
|
|
}) {
|
|
const { videoId, isShort } = useMemo(() => parseYoutubeUrl(url), [url])
|
|
const [initSuccess, setInitSuccess] = useState(false)
|
|
const playerRef = useRef<YouTubePlayer | null>(null)
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!videoId || !containerRef.current) return
|
|
|
|
if (!window.YT) {
|
|
const script = document.createElement('script')
|
|
script.src = 'https://www.youtube.com/iframe_api'
|
|
document.body.appendChild(script)
|
|
|
|
window.onYouTubeIframeAPIReady = () => {
|
|
initPlayer()
|
|
}
|
|
} else {
|
|
initPlayer()
|
|
}
|
|
|
|
function initPlayer() {
|
|
try {
|
|
if (!videoId || !containerRef.current || !window.YT.Player) return
|
|
playerRef.current = new window.YT.Player(containerRef.current, {
|
|
videoId: videoId,
|
|
playerVars: {
|
|
mute: 1
|
|
},
|
|
events: {
|
|
onStateChange: (event: any) => {
|
|
if (event.data === window.YT.PlayerState.PLAYING) {
|
|
mediaManager.play(playerRef.current)
|
|
} else if (event.data === window.YT.PlayerState.PAUSED) {
|
|
mediaManager.pause(playerRef.current)
|
|
}
|
|
},
|
|
onReady: () => {
|
|
setInitSuccess(true)
|
|
}
|
|
}
|
|
})
|
|
} catch (error) {
|
|
console.error('Failed to initialize YouTube player:', error)
|
|
return
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
if (playerRef.current) {
|
|
playerRef.current.destroy()
|
|
}
|
|
}
|
|
}, [videoId])
|
|
|
|
if (!videoId && !initSuccess) {
|
|
return (
|
|
<a
|
|
href={url}
|
|
className="text-primary hover:underline"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
{url}
|
|
</a>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'rounded-lg border overflow-hidden',
|
|
isShort ? 'aspect-[9/16] max-h-[80vh] sm:max-h-[60vh]' : 'aspect-video max-h-[60vh]',
|
|
className
|
|
)}
|
|
>
|
|
<div ref={containerRef} className="w-full h-full" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function parseYoutubeUrl(url: string) {
|
|
const patterns = [
|
|
/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/,
|
|
/youtube\.com\/watch\?.*v=([^&\n?#]+)/,
|
|
/youtube\.com\/shorts\/([^&\n?#]+)/,
|
|
/youtube\.com\/live\/([^&\n?#]+)/
|
|
]
|
|
|
|
let videoId: string | null = null
|
|
let isShort = false
|
|
for (const [index, pattern] of patterns.entries()) {
|
|
const match = url.match(pattern)
|
|
if (match) {
|
|
videoId = match[1].trim()
|
|
isShort = index === 2 // Check if it's a short video
|
|
break
|
|
}
|
|
}
|
|
return { videoId, isShort }
|
|
}
|