Changed channel to playlist

frontend/app/(main)/page.tsx

@@ -9,13 +9,16 @@ import YouTubeEmbed from "@/components/youtube-embed";
 import { IYoutube } from "@/interfaces/youtube";
 import getShortcode from "@/lib/getShortcode";
 
+const PLAYLIST_ID = "PLh8PxbpRguvNlmarfGkCTAd-UVAG4QpE9";
+
 export default async function Home() {
 	let videos: IYoutube | null = null;
 	if (process.env.YOUTUBE_API_KEY) {
-		const query = `https://www.googleapis.com/youtube/v3/search?key=${process.env.YOUTUBE_API_KEY}&channelId=UCzuFLl5I0WxSMqbeMaiq_FQ&part=snippet,id&order=date&maxResults=50`;
+		const query = `https://www.googleapis.com/youtube/v3/playlistItems?key=${process.env.YOUTUBE_API_KEY}&playlistId=${PLAYLIST_ID}&part=snippet,id&maxResults=50`;
 		const res = await fetch(query);
 		videos = await res.json();
 	}
+	console.log(videos);
 	const hero = await getShortcode("hero_image");
 	const systemEvolution = await getShortcode("evolution_systeme");
 	const fondations = await getShortcode("fondements");
@@ -165,9 +168,13 @@ export default async function Home() {
 						title="Vidéos YouTube"
 					>
 						{videos.items.map((video) => {
+							const id =
+								typeof video.id !== "string"
+									? video.id.videoId
+									: video.snippet.resourceId.videoId;
 							return (
 								<CarouselItem
-									key={video.id.videoId}
+									key={id}
 									className="pl-[20px] md:max-w-[452px]"
 								>
 									<YouTubeEmbed video={video} />

frontend/components/youtube-embed.tsx

@@ -18,6 +18,13 @@ export default function YouTubeEmbed({
 }) {
 	const [isIframeLoaded, setIframeLoaded] = useState(loadIframe);
 
+	const id =
+		typeof video === "string"
+			? video
+			: typeof video.id === "string"
+				? video.snippet.resourceId.videoId
+				: video.id.videoId;
+
 	const isString = typeof video === "string";
 
 	const _loadIframe = () => setIframeLoaded(true);
@@ -36,7 +43,7 @@ export default function YouTubeEmbed({
 					className="rounded-md shadow-current aspect-video"
 					width={width === "full" ? "100%" : width}
 					height={height === "full" ? "100%" : height}
-					src={`https://www.youtube-nocookie.com/embed/${isString ? video : video.id.videoId}?rel=0&modestbranding=1&autoplay=${autoPlay ? 1 : 0}`}
+					src={`https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&autoplay=${autoPlay ? 1 : 0}`}
 					title={
 						isString ? "YouTube video player" : video.snippet.title
 					}
@@ -50,7 +57,7 @@ export default function YouTubeEmbed({
 							width="100%"
 							height="100%"
 							className="w-full h-full object-cover rounded-md shadow-current"
-							src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
+							src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
 							alt={
 								isString
 									? "YouTube video player"
@@ -62,7 +69,7 @@ export default function YouTubeEmbed({
 							width={width}
 							height={height}
 							className="w-full h-full object-cover rounded-md shadow-current"
-							src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
+							src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
 							alt={
 								isString
 									? "YouTube video player"

frontend/interfaces/youtube.ts

@@ -10,7 +10,7 @@ export interface IYoutube {
 export interface IYoutubeItem {
 	kind: string;
 	etag: string;
-	id: IYoutubeID;
+	id: IYoutubeID | string;
 	snippet: IYoutubeSnippet;
 }
 
@@ -28,6 +28,7 @@ export interface IYoutubeSnippet {
 	channelTitle: string;
 	liveBroadcastContent: string;
 	publishTime: Date;
+	resourceId: IYoutubeID;
 }
 
 export interface IYoutubeThumbnails {