Adding a new tutorial about AI Image generation. Updating the Stream … (#17601)

* Adding a new tutorial about AI Image generation. Updating the Stream component so it supports full URL thumbnails. Updating the parameter so it's intuitive.

* code update

Author: jason-cf

src/components/Stream.astro

@@ -2,10 +2,10 @@
 interface Props {
 	videoId: string;
 	videoTitle: string;
-	thumbnailStartTime: string;
+	thumbnailTimeOrURL: string;
 }
 
-const { videoId, videoTitle, thumbnailStartTime } = Astro.props;
+const { videoId, videoTitle, thumbnailTimeOrURL } = Astro.props;
 
 const customerId = "1mwganm1ma0xgnmj";
 const baseUrl = `https://customer-${customerId}.cloudflarestream.com/`;
@@ -14,11 +14,20 @@ const url = new URL(`${videoId}/iframe`, baseUrl);
 url.searchParams.set("preload", "true");
 url.searchParams.set("letterboxColor", "transparent");
 
-const thumbnailUrl = new URL(`${videoId}/thumbnails/thumbnail.jpg`, baseUrl);
-thumbnailUrl.searchParams.set("fit", "crop");
-thumbnailUrl.searchParams.set("time", thumbnailStartTime);
 
-url.searchParams.set("poster", encodeURI(thumbnailUrl.toString()));
+// full url option
+if (thumbnailTimeOrURL !== undefined) {
+	if (!thumbnailTimeOrURL.startsWith("http")) {
+		const thumbnailUrl = new URL(`${videoId}/thumbnails/thumbnail.jpg`, baseUrl);
+		thumbnailUrl.searchParams.set("fit", "crop");
+		thumbnailUrl.searchParams.set("time", thumbnailTimeOrURL);
+
+		url.searchParams.set("poster", encodeURI(thumbnailUrl.toString()));
+	} else {
+		url.searchParams.set("poster", thumbnailTimeOrURL);
+	}
+}
+
 ---
 
 <div style="position: relative; padding-top: 56.25%">
@@ -28,8 +37,9 @@ url.searchParams.set("poster", encodeURI(thumbnailUrl.toString()));
 		allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
 		allowfullscreen="true"
 		title={videoTitle}
-		id={videoId}></iframe>
+		id={videoId}></iframe>		
 </div>
+<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank">Watch more videos on our Developer Channel</a>
 <script is:inline src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
 ></script>
 <script is:inline define:vars={{ vidId: videoId, videoTitle }}>

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

@@ -44,7 +44,7 @@ cd d1-example
 <Stream
 	videoId="8d20dd6cf5679f3272ca44a9fa01728c"
 	videoTitle="Build a Comments API with D1"
-	thumbnailStartTime="22s"
+	thumbnailTimeOrURL="22s"
 />
 
 ## 1. Install Hono

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

@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="efc08fd03da0dfebd2e4402af519acb5"
 	videoTitle="Building the App Frontend and UI"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="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/deploy-app.mdx

@@ -15,7 +15,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="aaa652e0e05bc09ac35451d9cbd4b341"
 	videoTitle="Deploy your Video Call app"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="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/durable-objects.mdx

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

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

@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="558cdd841276a1aba1426af6293d6d15"
 	videoTitle="Introduction to Durable Objects"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 In this episode, we will present an overview of the final project, discuss its underlying architecture, and access resources to set up the project locally.

src/content/docs/durable-objects/get-started/video-series/make-answer-webrtc-calls.mdx

@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="3b3a88940d3b1c635dbb6df0516218ab"
 	videoTitle="Make and Answer WebRTC calls"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 In this video, we'll build on the frontend we set up earlier by adding functionality for making and answering WebRTC video calls. You'll learn how to create peer-to-peer connections, handle ICE candidates, and seamlessly send and receive video streams between users.

src/content/docs/durable-objects/get-started/video-series/real-time-messaging.mdx

@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="a02e5f9e58999d96c3ec9dbb0efb9707"
 	videoTitle="Real-time messaging with WebSockets"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 Now, we'll take it a step further by enabling our server to receive and broadcast messages. In this video, you'll learn how to route and broadcast incoming messages from WebSocket connections and implement error handling such as closed WebSocket connections. By the end, you will have completed the backend for our video call app.

src/content/docs/durable-objects/get-started/video-series/serverless-websocket.mdx

@@ -13,7 +13,7 @@ import { Details, DirectoryListing, Stream } from "~/components";
 <Stream
 	videoId="86c64a50e0ea53dadd1ea1194bdeda92"
 	videoTitle="Create a Serverless Websocket 'Backend'"
-	thumbnailStartTime="2.5s"
+	thumbnailTimeOrURL="2.5s"
 />
 
 In this video, we'll create a WebSocket backend using serverless technology, making the process simpler than ever before. You'll learn how to create your first Durable Object, set up a WebSocket server to coordinate connections, and keep track of connected clients.

src/content/docs/pages/framework-guides/deploy-a-hono-site.mdx

@@ -161,5 +161,4 @@ For demo applications using Hono and Cloudflare Pages, refer to the following re
 
 ### Creator Interview
 
-<Stream videoId="db240ef1d351915849151242ec0c5f1c" videoTitle="DevTalk Episode 01 Hono" thumbnailStartTime="5s" />
-[Watch more videos on our Developer Channel](https://www.youtube.com/@CloudflareDevelopers)
+<Stream videoId="db240ef1d351915849151242ec0c5f1c" videoTitle="DevTalk Episode 01 Hono" thumbnailTimeOrURL="5s" />