functioning

Author: codercatdev

components/portable-text.tsx

@@ -27,6 +27,7 @@ const BlockTable = dynamic(() => import("@/components/block-table"));
 const BlockYoutube = dynamic(() =>
 	import("@/components/youtube").then((mod) => mod.YouTube),
 );
+const YouTubeShorts = dynamic(() => import("./youtube-shorts").then((mod) => mod.YouTubeShorts));
 
 export default function CustomPortableText({
 	className,
@@ -43,6 +44,7 @@ export default function CustomPortableText({
 			codepen: ({ value }) => <CodePenEmbed {...value} />,
 			codesandbox: ({ value }) => <CodeSandboxEmbed {...value} />,
 			youtube: ({ value }) => <div className="not-prose"><BlockYoutube {...value} /></div>,
+			youtubeShorts: ({ value }) => <div className="not-prose"><YouTubeShorts {...value} /></div>,
 			twitter: ({ value }) => <TwitterEmbed {...value} />,
 			htmlBlock: ({ value }) => <HTMLEmbed {...value} />,
 			quote: ({ value }) => <QuoteEmbed {...value} />,

components/youtube-short-embed.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { youtubeParser } from "@/lib/utils";
+import { useState } from "react";
+
+export function YouTubeShortEmbed(props: {
+	youtube: string;
+	children?: React.ReactNode;
+}) {
+	const { youtube, children } = props;
+	const [loadEmbed, setLoadEmbed] = useState(false);
+	const id = youtubeParser(youtube);
+
+	return (
+		<div
+			style={{
+				aspectRatio: "9 / 16",
+				position: "relative",
+				isolation: "isolate",
+			}}
+		>
+			<div
+				className="absolute -z-10"
+				style={{
+					position: "absolute",
+					zIndex: -1,
+					top: 0,
+					left: 0,
+					height: "100%",
+					width: "100%",
+				}}
+			>
+				{children}
+				<button
+					type="button"
+					onClick={() => setLoadEmbed(true)}
+					aria-label="Play"
+					style={{
+						border: "0",
+						background: "none",
+						position: "absolute",
+						top: 0,
+						left: 0,
+						display: "grid",
+						width: "100%",
+						height: "100%",
+						placeItems: "center",
+					}}
+				>
+					<svg version="1.1" viewBox="0 0 68 48" height="48" width="68">
+						<path
+							d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
+							fill="#f00"
+						/>
+						<path d="M 45,24 27,14 27,34" fill="#fff" />
+					</svg>
+				</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"
+				/>
+			)}
+		</div>
+	);
+}

components/youtube-short.tsx

@@ -0,0 +1,40 @@
+import Image from "next/image";
+import { youtubeParser } from "@/lib/utils";
+import type { CloudinaryAsset } from "@/sanity/types";
+import CoverImage from "@/components/cover-image";
+import { YouTubeShortEmbed } from "./youtube-short-embed";
+
+export function YouTubeShort(props: {
+	youtube: string;
+	image?: CloudinaryAsset | null | undefined;
+	className?: string;
+}) {
+	const { youtube, image, className } = props;
+	const id = youtubeParser(youtube);
+
+	return (
+		<YouTubeShortEmbed youtube={youtube}>
+			{image?.public_id ? (
+				<CoverImage image={image} priority={true} className={className} />
+			) : (
+				<picture>
+					<source
+						type="image/webp"
+						srcSet={[
+							`https://i.ytimg.com/vi_webp/${id}/mqdefault.webp 320w`,
+							`https://i.ytimg.com/vi_webp/${id}/hqdefault.webp 480w`,
+							`https://i.ytimg.com/vi_webp/${id}/sddefault.webp 640w`,
+						].join(", ")}
+					/>
+					<Image
+						style={{ width: "100%", height: "100%", objectFit: "cover" }}
+						src={`https://i.ytimg.com/vi/${id}/sddefault.jpg`}
+						alt=""
+						width={360}
+						height={640}
+					/>
+				</picture>
+			)}
+		</YouTubeShortEmbed>
+	);
+}

components/youtube-shorts.tsx

@@ -0,0 +1,53 @@
+'use client'
+
+import React from 'react'
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel"
+import { YouTubeShort } from './youtube-short'
+import Autoplay from "embla-carousel-autoplay"
+
+export function YouTubeShorts(props: { shorts: string[] }) {
+  const { shorts } = props
+
+  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]} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex items-center justify-center w-full'>
+
+      <Carousel
+        className="w-full max-w-xs"
+        plugins={[
+          Autoplay({
+            delay: 2000,
+          }),
+        ]}
+      >
+        <CarouselContent>
+          {shorts.map((short, index) => (
+            <CarouselItem key={index}>
+
+              <YouTubeShort youtube={short} />
+
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  )
+}

package.json

@@ -69,6 +69,7 @@
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
 		"date-fns": "^4.1.0",
+		"embla-carousel-autoplay": "^8.6.0",
 		"embla-carousel-react": "^8.6.0",
 		"feed": "^5.1.0",
 		"input-otp": "^1.4.2",