131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { FaYoutube } from 'react-icons/fa6';
|
|
import Image from 'next/image';
|
|
import useFancybox from '@/hooks/useFancybox';
|
|
import { getArticleVideos } from '@/lib/api/article';
|
|
import { useApiData } from '@/hooks/useApiData';
|
|
import type { ListArticle } from '@/types/article/TypeListArticle';
|
|
|
|
export const BoxVideoArticle = () => {
|
|
const { data: videos } = useApiData(
|
|
() => getArticleVideos(),
|
|
[],
|
|
{ initialData: [] as ListArticle },
|
|
);
|
|
|
|
const getYoutubeEmbedUrl = (url: string): string => {
|
|
try {
|
|
const urlObj = new URL(url);
|
|
if (urlObj.hostname.includes('youtube.com')) {
|
|
const videoId = urlObj.searchParams.get('v');
|
|
if (videoId) {
|
|
return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
|
|
}
|
|
}
|
|
if (urlObj.hostname.includes('youtu.be')) {
|
|
const videoId = urlObj.pathname.replace('/', '');
|
|
if (videoId) {
|
|
return `https://www.youtube.com/embed/${videoId}?autoplay=1`;
|
|
}
|
|
}
|
|
return url;
|
|
} catch {
|
|
return url;
|
|
}
|
|
};
|
|
|
|
const [fancyboxRef] = useFancybox({
|
|
closeButton: 'auto',
|
|
dragToClose: true,
|
|
});
|
|
|
|
return (
|
|
<div className="box-video-article boder-radius-10">
|
|
<div className="title-video-article flex justify-between">
|
|
<p className="title font-bold">Youtube channel</p>
|
|
<Link
|
|
href="https://www.youtube.com/c/NGUYENCONGPC"
|
|
className="follow-youtube flex items-center gap-2"
|
|
>
|
|
<FaYoutube />
|
|
<span className="font-bold">Theo dõi trên YouTube</span>
|
|
</Link>
|
|
</div>
|
|
<div className="list-video-article flex justify-between gap-2">
|
|
<div className="box-left" ref={fancyboxRef}>
|
|
{videos.slice(0, 1).map((item) => (
|
|
<div className="item-article-video d-flex w-50 gap-10" key={item.id}>
|
|
<Link
|
|
href={getYoutubeEmbedUrl(item.external_url)}
|
|
className="img-article img-article-video boder-radius-10 relative"
|
|
data-fancybox
|
|
>
|
|
<Image
|
|
src={item.image.original}
|
|
width={430}
|
|
height={310}
|
|
className="boder-radius-10"
|
|
alt={item.title}
|
|
/>
|
|
|
|
<i className="sprite sprite-big-play-video-article icon-play"></i>
|
|
<Image
|
|
className="icon-play-small"
|
|
src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
|
|
alt="play"
|
|
width={58}
|
|
height={41}
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href={getYoutubeEmbedUrl(item.external_url)}
|
|
className="title-article-video flex-1"
|
|
data-fancybox
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="box-right grid grid-cols-2 gap-2">
|
|
{videos.slice(1, 7).map((item) => (
|
|
<div className="item-article-video flex w-50 gap-2" key={item.id}>
|
|
<Link
|
|
href={getYoutubeEmbedUrl(item.external_url)}
|
|
className="img-article img-article-video boder-radius-10 relative"
|
|
data-fancybox
|
|
>
|
|
<Image
|
|
src={item.image.original}
|
|
width={430}
|
|
height={310}
|
|
className="boder-radius-10"
|
|
alt={item.title}
|
|
/>
|
|
|
|
<i className="sprite sprite-big-play-video-article icon-play"></i>
|
|
<Image
|
|
className="icon-play-small"
|
|
src="https://nguyencongpc.vn/static/assets/nguyencong_2023/images/small-play-youtube.png"
|
|
alt="play"
|
|
width={58}
|
|
height={41}
|
|
/>
|
|
</Link>
|
|
<Link
|
|
href={getYoutubeEmbedUrl(item.external_url)}
|
|
className="title-article-video flex-1"
|
|
data-fancybox
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|