[Stream] Video chapters collapsed (#24445)

* [Stream] Chapters in collapsible details

* [Stream] Add optional expandChapters prop

Author: kodster28

src/components/Stream.astro

@@ -2,6 +2,7 @@
 import { z } from "astro:schema";
 import { Badge } from "@astrojs/starlight/components";
 import parse from "parse-duration";
+import Details from "./Details.astro";
 
 type Props = z.input<typeof props>;
 
@@ -12,12 +13,12 @@ const props = z
 		thumbnail: z.string().optional(),
 		chapters: z.record(z.string(), z.string()).optional(),
 		showMoreVideos: z.boolean().default(false),
+		expandChapters: z.boolean().default(false),
 	})
 	.strict();
 
-const { id, title, thumbnail, chapters, showMoreVideos } = props.parse(
-	Astro.props,
-);
+const { id, title, thumbnail, chapters, showMoreVideos, expandChapters } =
+	props.parse(Astro.props);
 
 const BASE_URL = `https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/`;
 
@@ -53,42 +54,43 @@ if (thumbnail) {
 
 		{
 			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-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
-										data-chapter={chapter}
-										data-time={totalSeconds}
-									>
-										<img
-											src={thumbnail.toString()}
-											alt={chapter}
-											width="120"
-											height="64"
-											class="border-accent bg-accent/10 rounded-sm border"
-										/>
-										<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>
+				<Details header="Chapters" open={expandChapters}>
+					<p>
+						<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-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
+											data-chapter={chapter}
+											data-time={totalSeconds}
+										>
+											<img
+												src={thumbnail.toString()}
+												alt={chapter}
+												width="120"
+												height="64"
+												class="border-accent bg-accent/10 rounded-sm border"
+											/>
+											<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>
+				</Details>
 			)
 		}
 

src/content/docs/cache/index.mdx

@@ -20,7 +20,7 @@ Cache content across Cloudflare's global server network.
 
 Cache stores copies of frequently accessed content (such as images, videos, or webpages) in geographically distributed data centers that are located closer to end users than origin servers, reducing server load and improving website performance.
 
-<Stream id="90d8a506e1e3935cff71223f9d785aa6" title="How Cloudflare protects and accelerates your website or app" thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/How%20Cloudflare%20%20protects%20and%20accelerates%20your%20website%20and%20app.png" />
+<Stream id="90d8a506e1e3935cff71223f9d785aa6" title="How Cloudflare protects and accelerates your website or app" thumbnail="https://pub-d9bf66e086fb4b639107aa52105b49dd.r2.dev/How%20Cloudflare%20%20protects%20and%20accelerates%20your%20website%20and%20app.png"/>
 
 ## Features
 

src/content/docs/learning-paths/r2-intro/series/r2-4.mdx

@@ -15,7 +15,7 @@ import { Render, Tabs, TabItem, Stream, Card } from "~/components";
   <TabItem label="Watch this episode" icon="seti:video">
 
     In this video, you will learn how to use Cloudflare R2's data migration tools to transfer data from other cloud providers such as Amazon S3 and Google Cloud Storage to R2. The video will demonstrate the step-by-step process of setting up and executing a data migration.
-    
+
     <Card>
         <Stream
         id="2bb9f663c21bab9e8996cb2bc93d7218"

src/content/docs/style-guide/components/details.mdx

@@ -4,22 +4,31 @@ styleGuide:
   component: Details
 ---
 
+import { Type, MetaInfo } from "~/components";
+
 When you want to provide additional information in context, but you do not want it to clutter up the more important content, use `<Details>` to add a collapsible container.
 
 ```mdx live
-import { Details } from "~/components"
+import { Details } from "~/components";
 
-<Details header="Open me!">
-    Hello, world!
-</Details>
+<Details header="Open me!">Hello, world!</Details>
 ```
 
 You can specify the default configuration of each instance of the `<Details>` component (that is, whether it is open or closed by default).
 
 ```mdx live
-import { Details } from "~/components"
+import { Details } from "~/components";
 
-<Details header="Close me!" open = {true}>
-    Long piece of code example.
+<Details header="Close me!" open={true}>
+	Long piece of code example.
 </Details>
 ```
+
+## Properties
+
+- `header` <Type text="string" /> <MetaInfo text="required" />
+- `id` <Type text="string" /> <MetaInfo text="optional" />
+
+  Adds a specific `id` to the HTML element
+
+- `open` <Type text="boolean" /> <MetaInfo text="optional" />

src/content/docs/style-guide/components/stream.mdx

@@ -72,6 +72,14 @@ Either a timestamp (i.e `2.5s` or `1m35s`) or a URL to an image.
 
 Optional chapters displayed as cards below the video.
 
+### `expandChapters`
+
+**type:** `boolean`
+
+**default:** `false`
+
+If `chapters` is present, is passed through to the `open` property of the [Details component](/style-guide/components/details/).
+
 ### `showMoreVideos`
 
 **type:** `boolean`