[Docs Site] Overhaul Stream component and add chapters (#20475)

* [Docs Site] Overhaul Stream component and add chapters

* update demo video

Author: KianNH

package-lock.json

@@ -77,6 +77,7 @@
 		"mdast-util-mdx-expression": "2.0.1",
 		"mermaid": "11.4.1",
 		"node-html-parser": "7.0.1",
+		"parse-duration": "2.1.3",
 		"prettier": "3.5.2",
 		"prettier-plugin-astro": "0.14.1",
 		"prettier-plugin-tailwindcss": "0.6.9",

package.json

@@ -1,55 +1,96 @@
 ---
-interface Props {
-	videoId: string;
-	videoTitle: string;
-	thumbnailTimeOrURL: string;
-	moreVideosLink: string;
-}
+import { z } from "astro:schema";
+import { Badge } from "@astrojs/starlight/components";
+import parse from "parse-duration";
+
+type Props = z.input<typeof props>;
+
+const props = z
+	.object({
+		id: z.string(),
+		title: z.string(),
+		thumbnail: z.string().optional(),
+		chapters: z.record(z.string(), z.string()).optional(),
+		showMoreVideos: z.boolean().default(true),
+	})
+	.strict();
+
+const { id, title, thumbnail, chapters, showMoreVideos } = props.parse(
+	Astro.props,
+);
 
-const {
-	videoId,
-	videoTitle,
-	thumbnailTimeOrURL,
-	moreVideosLink = "true",
-} = Astro.props;
+const BASE_URL = `https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/`;
 
-const customerId = "1mwganm1ma0xgnmj";
-const baseUrl = `https://customer-${customerId}.cloudflarestream.com/`;
+const url = new URL(`${id}/iframe`, BASE_URL);
+const thumbnailUrl = new URL(`${id}/thumbnails/thumbnail.jpg`, BASE_URL);
 
-const url = new URL(`${videoId}/iframe`, baseUrl);
 url.searchParams.set("preload", "true");
 url.searchParams.set("letterboxColor", "transparent");
 
-// full url option
-if (thumbnailTimeOrURL !== undefined) {
-	if (!thumbnailTimeOrURL.startsWith("http")) {
-		const thumbnailUrl = new URL(
-			`${videoId}/thumbnails/thumbnail.jpg`,
-			baseUrl,
-		);
+if (thumbnail) {
+	if (thumbnail.startsWith("http")) {
+		url.searchParams.set("poster", thumbnail);
+	} else {
 		thumbnailUrl.searchParams.set("fit", "crop");
-		thumbnailUrl.searchParams.set("time", thumbnailTimeOrURL);
+		thumbnailUrl.searchParams.set("time", thumbnail);
 
 		url.searchParams.set("poster", encodeURI(thumbnailUrl.toString()));
-	} else {
-		url.searchParams.set("poster", thumbnailTimeOrURL);
 	}
 }
 ---
 
-<stream-player data-id={videoId} data-title={videoTitle}>
+<stream-player data-id={id} data-title={title}>
 	<div style="position: relative; padding-top: 56.25%">
 		<iframe
 			src={url.toString()}
 			style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
 			allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
 			allowfullscreen="true"
-			title={videoTitle}
-			id={videoId}></iframe>
+			title={title}
+			id={id}></iframe>
 	</div>
 
 	{
-		moreVideosLink == "true" && (
+		chapters && (
+			<p>
+				<strong>Chapters</strong>
+				<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
+					{Object.entries(chapters).map(([chapter, time]) => {
+						const totalSeconds = parse(time, "s");
+
+						const thumbnail = new URL(thumbnailUrl);
+						thumbnail.searchParams.set("fit", "crop");
+						thumbnail.searchParams.set("time", `${totalSeconds}s`);
+
+						return (
+							<li class="!mt-0">
+								<button
+									class="flex h-full w-36 cursor-pointer flex-col rounded border border-gray-200 bg-transparent p-4 dark:border-gray-700"
+									data-chapter={chapter}
+									data-time={totalSeconds}
+								>
+									<img
+										src={thumbnail.toString()}
+										alt={chapter}
+										class="rounded border border-accent"
+									/>
+									<div class="flex h-full flex-col items-center justify-between">
+										<strong class="line-clamp-2 text-xs" title={chapter}>
+											{chapter}
+										</strong>
+										<Badge text={time} variant="tip" class="w-fit" />
+									</div>
+								</button>
+							</li>
+						);
+					})}
+				</ul>
+			</p>
+		)
+	}
+
+	{
+		showMoreVideos && (
 			<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank">
 				Watch more videos on our Developer Channel
 			</a>
@@ -103,6 +144,23 @@ if (thumbnailTimeOrURL !== undefined) {
 					rate: stream.playbackRate,
 				});
 			});
+
+			const buttons =
+				this.querySelectorAll<HTMLButtonElement>("[data-chapter]");
+
+			for (const button of buttons) {
+				button.addEventListener("click", () => {
+					const chapter = button.dataset.chapter as string;
+					const time = Number(button.dataset.time);
+
+					stream.currentTime = time;
+
+					track("clicked chapter docs video", {
+						title,
+						chapter,
+					});
+				});
+			}
 		}
 	}
 

src/components/Stream.astro

@@ -32,7 +32,7 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 <div class="flex h-1/3 items-center">
 	{
 		imagePosition === "before" && (
-			<div class="w-full m-8">
+			<div class="m-8 w-full">
 				<Image
 					src={image.light}
 					alt={`${title} section image`}
@@ -55,13 +55,16 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 				<div class="[&>article]:gap-0">
 					<Card title="">
 						<Stream
-							videoId="d89f290431f98e551f2b1467f85d6561"
-							videoTitle="foo"
-							thumbnailTimeOrURL="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/cloudflare-stack.jpg"
-							moreVideosLink="false"
+							id="d89f290431f98e551f2b1467f85d6561"
+							title="foo"
+							thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/cloudflare-stack.jpg"
+							showMoreVideos={false}
 						/>
 
-						<LinkCard title={"Explore our Developer Platform"} href={"/products/?product-group=Developer+platform"} />
+						<LinkCard
+							title={"Explore our Developer Platform"}
+							href={"/products/?product-group=Developer+platform"}
+						/>
 					</Card>
 				</div>
 			) : (
@@ -80,7 +83,7 @@ const { title, text, image, cards, imagePosition } = props.parse(Astro.props);
 
 	{
 		imagePosition === "after" && (
-			<div class="w-full m-8">
+			<div class="m-8 w-full">
 				<Image
 					src={image.light}
 					alt={`${title} section image`}

src/components/homepage/FeaturedContentSection.astro

@@ -26,7 +26,7 @@ The Cloudflare China Network provides:
 
 ### Video Introduction
 
-<Stream videoId="b7933a5b3636ca29f834128ca92665b3" videoTitle="China Network Overview" thumbnailTimeOrURL="1s" />
+<Stream id="b7933a5b3636ca29f834128ca92665b3" title="China Network Overview" thumbnail="1s" />
 
 
 ## Availability

src/content/docs/china-network/index.mdx

@@ -24,18 +24,18 @@ Workers for Platforms is built on top of [Cloudflare Workers](/workers/). Worker
 
 <br></br>
 
-<Stream videoId="c8afb7a0a811f07db4b4ffaf56c277bc" videoTitle="Workers for Platforms Overview" thumbnailTimeOrURL="8.6s" />
+<Stream id="c8afb7a0a811f07db4b4ffaf56c277bc" title="Workers for Platforms Overview" thumbnail="8.6s" />
 
 ***
 
 ## Features
 
 <Feature header="Get started" href="/cloudflare-for-platforms/workers-for-platforms/get-started/configuration/" cta="Get started">
-Learn how to set up Workers for Platforms. 
+Learn how to set up Workers for Platforms.
 </Feature>
 
 <Feature header="Workers for Platforms architecture" href="/cloudflare-for-platforms/workers-for-platforms/reference/how-workers-for-platforms-works/" cta="Learn more">
-Learn about Workers for Platforms architecture. 
+Learn about Workers for Platforms architecture.
 </Feature>
 
 ***

src/content/docs/cloudflare-for-platforms/workers-for-platforms/index.mdx

@@ -42,9 +42,9 @@ cd d1-example
 ## Video Tutorial
 
 <Stream
-	videoId="8d20dd6cf5679f3272ca44a9fa01728c"
-	videoTitle="Build a Comments API with D1"
-	thumbnailTimeOrURL="22s"
+	id="8d20dd6cf5679f3272ca44a9fa01728c"
+	title="Build a Comments API with D1"
+	thumbnail="22s"
 />
 
 ## 1. Install Hono

src/content/docs/d1/tutorials/build-a-comments-api/index.mdx

@@ -11,9 +11,9 @@ tableOfContents: false
 import { Details, DirectoryListing, Stream } from "~/components";
 
 <Stream
-	videoId="efc08fd03da0dfebd2e4402af519acb5"
-	videoTitle="Building the App Frontend and UI"
-	thumbnailTimeOrURL="2.5s"
+	id="efc08fd03da0dfebd2e4402af519acb5"
+	title="Building the App Frontend and UI"
+	thumbnail="2.5s"
 />
 
 Now, we're moving to the frontend. In this video, we'll set up the frontend starter code (the starter code is located in the Veet GitHub repository), connect to Durable Objects using a call room ID, and display a local video preview.

src/content/docs/durable-objects/get-started/video-series/app-frontend.mdx

@@ -13,9 +13,9 @@ next:
 import { Details, DirectoryListing, Stream } from "~/components";
 
 <Stream
-	videoId="aaa652e0e05bc09ac35451d9cbd4b341"
-	videoTitle="Deploy your Video Call app"
-	thumbnailTimeOrURL="2.5s"
+	id="aaa652e0e05bc09ac35451d9cbd4b341"
+	title="Deploy your Video Call app"
+	thumbnail="2.5s"
 />
 
 We're almost done with the project, and in this video, we'll add the finishing touches. Learn how to handle call disconnections, wire up essential media controls like muting/unmuting and video toggling, and integrate a TURN server to ensure reliable connections even behind firewalls. By the end of this video, your app will be fully functional and ready for deployment.

src/content/docs/durable-objects/get-started/video-series/deploy-app.mdx

@@ -11,9 +11,9 @@ tableOfContents: false
 import { Details, DirectoryListing, Stream } from "~/components";
 
 <Stream
-	videoId="fe3a2f97642951e692e86b3af36a4251"
-	videoTitle="What are Durable Objects?"
-	thumbnailTimeOrURL="2.5s"
+	id="fe3a2f97642951e692e86b3af36a4251"
+	title="What are Durable Objects?"
+	thumbnail="2.5s"
 />
 
 In this video, we will show how Durable Objects work and start building a video call app together.