add shorts

Author: codercatdev

components/youtube-short-embed.tsx

@@ -1,16 +1,25 @@
 "use client";
 
 import { youtubeParser } from "@/lib/utils";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export function YouTubeShortEmbed(props: {
 	youtube: string;
 	children?: React.ReactNode;
+	loadEmbed?: boolean;
 }) {
-	const { youtube, children } = props;
+	const { youtube, children, loadEmbed: load } = props;
 	const [loadEmbed, setLoadEmbed] = useState(false);
 	const id = youtubeParser(youtube);
 
+	useEffect(() => {
+		if (load) {
+			setLoadEmbed(true);
+		} else {
+			setLoadEmbed(false);
+		}
+	}, [load]);
+
 	return (
 		<div
 			style={{
@@ -57,14 +66,32 @@ export function YouTubeShortEmbed(props: {
 				</button>
 			</div>
 			{loadEmbed && (
-				<iframe
-					style={{ height: "100%", width: "100%", border: 0 }}
-					src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1&fs=0`}
-					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-					allowFullScreen
-					title="YouTube video player"
-				/>
+				<>
+					<iframe
+						style={{ height: "100%", width: "100%", border: 0 }}
+						src={`https://www.youtube-nocookie.com/embed/${id}?fs=0`}
+						allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+						allowFullScreen
+						title="YouTube video player"
+					/>
+					<button
+						type="button"
+						onClick={() => setLoadEmbed(false)}
+						aria-label="Close"
+						style={{
+							border: "0",
+							background: "none",
+							position: "absolute",
+							top: 0,
+							right: 0,
+							color: "white",
+							padding: "8px"
+						}}
+					>
+						X
+					</button>
+				</>
 			)}
 		</div>
 	);
-}
+}

components/youtube-short.tsx

@@ -8,12 +8,13 @@ export function YouTubeShort(props: {
 	youtube: string;
 	image?: CloudinaryAsset | null | undefined;
 	className?: string;
+    isActive?: boolean;
 }) {
-	const { youtube, image, className } = props;
+	const { youtube, image, className, isActive } = props;
 	const id = youtubeParser(youtube);
 
 	return (
-		<YouTubeShortEmbed youtube={youtube}>
+		<YouTubeShortEmbed youtube={youtube} loadEmbed={isActive}>
 			{image?.public_id ? (
 				<CoverImage image={image} priority={true} className={className} />
 			) : (
@@ -37,4 +38,4 @@ export function YouTubeShort(props: {
 			)}
 		</YouTubeShortEmbed>
 	);
-}
+}

components/youtube-shorts.tsx

@@ -1,46 +1,61 @@
 'use client'
 
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Card, CardContent } from "@/components/ui/card"
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  type CarouselApi,
 } from "@/components/ui/carousel"
 import { YouTubeShort } from './youtube-short'
 import Autoplay from "embla-carousel-autoplay"
 
 export function YouTubeShorts(props: { shorts: string[] }) {
   const { shorts } = props
+  const [api, setApi] = useState<CarouselApi>()
+  const [current, setCurrent] = useState(0)
+
+  useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    setCurrent(api.selectedScrollSnap())
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap())
+    })
+  }, [api])
 
   if (shorts.length === 1) {
     return (
       <div className='flex items-center justify-center w-full'>
         <div className="aspect-w-9 aspect-h-16 w-full max-w-xs">
-          <YouTubeShort youtube={shorts[0]} />
+          <YouTubeShort youtube={shorts[0]} isActive={true} />
         </div>
       </div>
     )
   }
 
   return (
     <div className='flex items-center justify-center w-full'>
-
       <Carousel
+        setApi={setApi}
         className="w-full max-w-xs"
-        plugins={[
-          Autoplay({
-            delay: 2000,
-          }),
-        ]}
+      // plugins={[
+      //   Autoplay({
+      //     delay: 2000,
+      //   }),
+      // ]}
       >
         <CarouselContent>
           {shorts.map((short, index) => (
             <CarouselItem key={index}>
 
-              <YouTubeShort youtube={short} />
+              <YouTubeShort youtube={short} isActive={index === current} />
 
             </CarouselItem>
           ))}