diff --git a/src/components/Stream.astro b/src/components/Stream.astro index 20f08e4dfe027df..4e767df7f23e09d 100644 --- a/src/components/Stream.astro +++ b/src/components/Stream.astro @@ -3,6 +3,7 @@ import { z } from "astro:schema"; import { Badge } from "@astrojs/starlight/components"; import parse from "parse-duration"; import Details from "./Details.astro"; +import { reference, getEntry } from "astro:content"; type Props = z.input; @@ -15,10 +16,51 @@ const props = z showMoreVideos: z.boolean().default(false), expandChapters: z.boolean().default(false), }) - .strict(); + .strict() + .or( + z + .object({ + file: reference("stream"), + showMoreVideos: z.boolean().default(false), + expandChapters: z.boolean().default(false), + }) + .strict(), + ); + +const input = props.parse(Astro.props); + +let id; +let title; +let thumbnail; +let chapters; +const { showMoreVideos, expandChapters } = input; + +if ("id" in input) { + id = input.id; + title = input.title; + thumbnail = input.thumbnail; + chapters = input.chapters; +} else { + const { file } = input; + + const entry = await getEntry(file); + + if (!entry) { + throw new Error(`[Stream] Could not find "${file}"`); + } + + id = entry.data.id; + title = entry.data.title; + chapters = entry.data.chapters; -const { id, title, thumbnail, chapters, showMoreVideos, expandChapters } = - props.parse(Astro.props); + if (entry.data.thumbnail) { + if ("url" in entry.data.thumbnail) { + thumbnail = entry.data.thumbnail.url; + } else { + thumbnail = entry.data.thumbnail.timestamp; + } + } +} const BASE_URL = `https://customer-1mwganm1ma0xgnmj.cloudflarestream.com/`; diff --git a/src/content/docs/style-guide/components/stream.mdx b/src/content/docs/style-guide/components/stream.mdx index b5231af049cfc79..b2cbe8708171766 100644 --- a/src/content/docs/style-guide/components/stream.mdx +++ b/src/content/docs/style-guide/components/stream.mdx @@ -7,39 +7,43 @@ styleGuide: ## Import ```mdx -import { Stream } from "~/components" +import { Stream } from "~/components"; ``` ## Usage -import { Stream } from "~/components" +import { Stream } from "~/components"; + + ```mdx + + ``` ## `` Props @@ -86,4 +90,10 @@ If `chapters` is present, is passed through to the `open` property of the [Detai **default:** `true` -Whether to show the "Watch more videos on our Developer Channel" link below the video. \ No newline at end of file +Whether to show the "Watch more videos on our Developer Channel" link below the video. + +### `file` + +**type:** `string` + +If `file` is provided, the `id`, `title`,` thumbnail` and `chapters` properties cannot be used and are instead retrieved from the YAML file in the [`stream`](https://github.com/cloudflare/cloudflare-docs/tree/production/src/content/stream) collection.