time change update

Co-authored-by: Copilot <copilot@github.com>

Author: jaydestro

client/src/pages/conf/agenda.json

@@ -60,7 +60,7 @@
       "title": "One Codebase, Any Cloud: Building a Retail Database with OSS and Azure",
       "description": "Build a retail store database once with MongoDB-compatible APIs and deploy it unchanged on-prem via Kubernetes and fully managed on Azure.",
       "speakers": [{ "name": "Khelan Modi", "slug": "khelan-modi" }],
-      "url": ""
+      "url": "https://youtu.be/O9bxsV9TeiI"
     },
     {
       "time": "12:23 PM",
@@ -74,7 +74,7 @@
       "title": "Querying and Indexing in Azure Cosmos DB: The Complete Guide",
       "description": "A complete tour of the Azure Cosmos DB query engine and indexing system — routing, index types, query metrics, and cost-saving optimizations.",
       "speakers": [{ "name": "James Codella", "slug": "james-codella" }],
-      "url": ""
+      "url": "https://youtu.be/fkEDPP1XsKk"
     },
     {
       "time": "12:58 PM",
@@ -169,13 +169,13 @@
       "title": "Memory for Your Agents: Building Chat History and Semantic Caching with Azure Cosmos DB",
       "description": "Build chat history and semantic cache containers that give AI agents persistent, context-aware memory while cutting tokens and latency.",
       "speakers": [{ "name": "Lino Tadros", "slug": "lino-tadros" }],
-      "url": ""
+      "url": "https://youtu.be/atbRswDKruY"
     },
     {
       "title": "Importing Data into Azure Cosmos DB: Tools, Tradeoffs, and Capacity Planning",
       "description": "A decision framework for choosing between the Data Migration Tool, Azure Data Factory, and the Spark connector — plus capacity planning for bulk loads.",
       "speakers": [{ "name": "Rakhi Thejraj", "slug": "rakhi-thejraj" }],
-      "url": ""
+      "url": "https://youtu.be/CTeI9N-LK4Y"
     }
   ]
 }

client/src/pages/conf/conf.module.css

@@ -3722,6 +3722,25 @@
   color: #bbb;
 }
 
+.speakerModalVideo {
+  position: relative;
+  margin-top: 14px;
+  aspect-ratio: 16 / 9;
+  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  background: #000;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.speakerModalVideo iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
 .speakerModalBio {
   margin-top: 4px;
 }

client/src/pages/conf/index.tsx

@@ -13,6 +13,7 @@ import AgendaSection from "./sections/AgendaSection";
 import NewsSection from "./sections/NewsSection";
 import FaqSection from "./sections/FaqSection";
 import SpeakersSection from "./sections/SpeakersSection";
+import { useStreamReleased } from "./videoRelease";
 
 const CONF_YEAR = "2026";
 const CONF_DATE_DISPLAY = "April 28 - 9:00 AM - 2:00 PM PDT";
@@ -154,6 +155,7 @@ const archiveTimelineData = [
 const ConfPage = () => {
   const { siteConfig } = useDocusaurusContext();
   const { showAgenda, showStream, streamEmbedUrl } = getConfSettings(siteConfig);
+  const streamLive = useStreamReleased();
 
   return (
     <Layout
@@ -240,6 +242,10 @@ const ConfPage = () => {
           </div>
         </header>
 
+        {showStream && streamLive && (
+          <StreamSection confYear={CONF_YEAR} streamEmbedUrl={streamEmbedUrl} live />
+        )}
+
         <section className={styles.introSection} aria-labelledby="conf-intro">
           <div id="about" className={styles.sectionAnchor} />
           <div className={styles.introInner}>
@@ -356,7 +362,7 @@ const ConfPage = () => {
           </div>
         </section>
 
-        {showStream && <StreamSection confYear={CONF_YEAR} streamEmbedUrl={streamEmbedUrl} />}
+        {showStream && !streamLive && <StreamSection confYear={CONF_YEAR} streamEmbedUrl={streamEmbedUrl} />}
 
         <NewsSection confYear={CONF_YEAR} />
 

client/src/pages/conf/sections/AgendaSection.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "../conf.module.css";
 import agendaData from "../agenda.json";
+import { useVideoReleased } from "../videoRelease";
 
 interface AgendaSectionProps {
   confYear: string;
@@ -25,6 +26,27 @@ const { live: liveAgenda, onDemand: onDemandAgenda } = agendaData as {
   onDemand: AgendaItem[];
 };
 
+// Videos become clickable on 2026-04-28 1:30 PM PDT (PDT = UTC-7).
+const renderAgendaCta = (url: string | undefined, released: boolean) => {
+  if (url && released) {
+    return (
+      <a
+        className={styles.agendaCardButton}
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Watch on YouTube
+      </a>
+    );
+  }
+  return (
+    <span className={styles.agendaCardButton} aria-disabled="true">
+      Coming soon
+    </span>
+  );
+};
+
 const handleSpeakerClick = (slug: string) => (e: React.MouseEvent) => {
   e.preventDefault();
   const target = `#speaker/${slug}`;
@@ -47,6 +69,8 @@ const renderSpeakers = (speakers: AgendaSpeaker[]) =>
   ));
 
 const AgendaSection = ({ confYear }: AgendaSectionProps) => {
+  const released = useVideoReleased();
+
   return (
     <section className={styles.newsSection} aria-labelledby="agenda-heading">
       <div id="agenda" className={styles.sectionAnchor} />
@@ -81,9 +105,7 @@ const AgendaSection = ({ confYear }: AgendaSectionProps) => {
                     <p className={styles.agendaCardDescription}>{item.description}</p>
                   )}
                 </div>
-                <span className={styles.agendaCardButton} aria-disabled="true">
-                  Coming soon
-                </span>
+                {renderAgendaCta(item.url, released)}
               </article>
             ))}
           </div>
@@ -102,9 +124,7 @@ const AgendaSection = ({ confYear }: AgendaSectionProps) => {
                     <p className={styles.agendaCardDescription}>{item.description}</p>
                   )}
                 </div>
-                <span className={styles.agendaCardButton} aria-disabled="true">
-                  Coming soon
-                </span>
+                {renderAgendaCta(item.url, released)}
               </article>
             ))}
           </div>

client/src/pages/conf/sections/SpeakersSection.tsx

@@ -1,6 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import styles from "../conf.module.css";
 import speakersData from "../speakers2026.json";
+import {
+  getVideoUrlForSpeaker,
+  getYouTubeEmbedUrl,
+  useVideoReleased,
+} from "../videoRelease";
 
 interface Session {
   title?: string;
@@ -57,6 +62,7 @@ const SpeakersSection = ({ confYear }: SpeakersSectionProps) => {
   const speakers = allSpeakers.filter((s) => s.confirmed !== false);
   const [selected, setSelected] = useState<Speaker | null>(null);
   const modalRef = useRef<HTMLDivElement>(null);
+  const videoReleased = useVideoReleased();
 
   // Open modal when URL hash matches #speaker/<slug> — both on mount and live
   // when other sections (e.g. Agenda) link to #speaker/<slug>.
@@ -244,6 +250,21 @@ const SpeakersSection = ({ confYear }: SpeakersSectionProps) => {
                 {selected.session.abstract && (
                   <p className={styles.speakerModalAbstract}>{selected.session.abstract}</p>
                 )}
+                {videoReleased && (() => {
+                  const embedUrl = getYouTubeEmbedUrl(getVideoUrlForSpeaker(selected.slug));
+                  if (!embedUrl) return null;
+                  return (
+                    <div className={styles.speakerModalVideo}>
+                      <iframe
+                        src={embedUrl}
+                        title={`${selected.name} — ${selected.session?.title ?? "session video"}`}
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                        allowFullScreen
+                        loading="lazy"
+                      />
+                    </div>
+                  );
+                })()}
               </div>
             )}
 

client/src/pages/conf/sections/StreamSection.tsx

@@ -4,6 +4,8 @@ import styles from "../conf.module.css";
 interface StreamSectionProps {
   confYear: string;
   streamEmbedUrl: string | null;
+  /** When true, hide the countdown + subscribe notice (stream is live). */
+  live?: boolean;
 }
 
 // Azure Cosmos DB Conf 2026: April 28, 2026 · 9:00 AM PDT (UTC−7)
@@ -32,7 +34,7 @@ const computeCountdown = (): Countdown => {
 
 const pad = (value: number) => value.toString().padStart(2, "0");
 
-const StreamSection = ({ confYear, streamEmbedUrl }: StreamSectionProps) => {
+const StreamSection = ({ confYear, streamEmbedUrl, live = false }: StreamSectionProps) => {
   // Start with a stable value for SSR; update on the client after mount.
   const [countdown, setCountdown] = useState<Countdown>(() => computeCountdown());
 
@@ -83,41 +85,45 @@ const StreamSection = ({ confYear, streamEmbedUrl }: StreamSectionProps) => {
                 <span data-node-id="6:228">Evaluation available on 4/28/2026</span>
               </button>
               */}
-              <p className={styles.streamCtaNote} data-node-id="6:230">
-                Subscribe to the channel and click the 🔔 bell to get a reminder when we go live.
-              </p>
-
-              {countdown.done ? (
-                <p className={styles.streamCountdownLive} aria-live="polite">
-                  🔴 We&apos;re live!
+              {!live && (
+                <p className={styles.streamCtaNote} data-node-id="6:230">
+                  Subscribe to the channel and click the 🔔 bell to get a reminder when we go live.
                 </p>
-              ) : (
-                <div
-                  className={styles.streamCountdown}
-                  role="timer"
-                  aria-live="off"
-                  aria-label={`Time until Azure Cosmos DB Conf ${confYear} goes live`}
-                >
-                  <span className={styles.streamCountdownLabel}>Live in</span>
-                  <div className={styles.streamCountdownGrid}>
-                    <div className={styles.streamCountdownUnit}>
-                      <span className={styles.streamCountdownValue}>{pad(countdown.days)}</span>
-                      <span className={styles.streamCountdownName}>days</span>
-                    </div>
-                    <div className={styles.streamCountdownUnit}>
-                      <span className={styles.streamCountdownValue}>{pad(countdown.hours)}</span>
-                      <span className={styles.streamCountdownName}>hrs</span>
-                    </div>
-                    <div className={styles.streamCountdownUnit}>
-                      <span className={styles.streamCountdownValue}>{pad(countdown.minutes)}</span>
-                      <span className={styles.streamCountdownName}>min</span>
-                    </div>
-                    <div className={styles.streamCountdownUnit}>
-                      <span className={styles.streamCountdownValue}>{pad(countdown.seconds)}</span>
-                      <span className={styles.streamCountdownName}>sec</span>
+              )}
+
+              {!live && (
+                countdown.done ? (
+                  <p className={styles.streamCountdownLive} aria-live="polite">
+                    🔴 We&apos;re live!
+                  </p>
+                ) : (
+                  <div
+                    className={styles.streamCountdown}
+                    role="timer"
+                    aria-live="off"
+                    aria-label={`Time until Azure Cosmos DB Conf ${confYear} goes live`}
+                  >
+                    <span className={styles.streamCountdownLabel}>Live in</span>
+                    <div className={styles.streamCountdownGrid}>
+                      <div className={styles.streamCountdownUnit}>
+                        <span className={styles.streamCountdownValue}>{pad(countdown.days)}</span>
+                        <span className={styles.streamCountdownName}>days</span>
+                      </div>
+                      <div className={styles.streamCountdownUnit}>
+                        <span className={styles.streamCountdownValue}>{pad(countdown.hours)}</span>
+                        <span className={styles.streamCountdownName}>hrs</span>
+                      </div>
+                      <div className={styles.streamCountdownUnit}>
+                        <span className={styles.streamCountdownValue}>{pad(countdown.minutes)}</span>
+                        <span className={styles.streamCountdownName}>min</span>
+                      </div>
+                      <div className={styles.streamCountdownUnit}>
+                        <span className={styles.streamCountdownValue}>{pad(countdown.seconds)}</span>
+                        <span className={styles.streamCountdownName}>sec</span>
+                      </div>
                     </div>
                   </div>
-                </div>
+                )
               )}
 
               <a

client/src/pages/conf/videoRelease.ts

@@ -0,0 +1,93 @@
+import { useEffect, useState } from "react";
+import agendaData from "./agenda.json";
+
+// Videos become clickable on 2026-04-28 1:30 PM PDT (PDT = UTC-7 → 20:30 UTC).
+export const VIDEO_RELEASE_TIMESTAMP = Date.UTC(2026, 3, 28, 20, 30, 0);
+
+// Live stream embed becomes visible on 2026-04-28 7:00 AM PDT (→ 14:00 UTC).
+export const STREAM_RELEASE_TIMESTAMP = Date.UTC(2026, 3, 28, 14, 0, 0);
+
+interface AgendaEntry {
+  speakers: { slug: string }[];
+  url?: string;
+}
+
+const { live, onDemand } = agendaData as {
+  live: AgendaEntry[];
+  onDemand: AgendaEntry[];
+};
+
+const allSessions: AgendaEntry[] = [...live, ...onDemand];
+
+/**
+ * Look up a YouTube URL for a given speaker slug. Returns the first matching
+ * session URL, or undefined if the speaker has no URL (yet).
+ */
+export const getVideoUrlForSpeaker = (slug: string): string | undefined => {
+  for (const session of allSessions) {
+    if (!session.url) continue;
+    if (session.speakers.some((s) => s.slug === slug)) {
+      return session.url;
+    }
+  }
+  return undefined;
+};
+
+/**
+ * Returns true once the shared release time has passed. The value is `false`
+ * during SSR/initial render to avoid hydration mismatch, then flips to `true`
+ * on the client if applicable. Re-checked every minute.
+ *
+ * Supports `?releaseNow=1` in the URL to force-release for testing/previewing.
+ */
+export const useVideoReleased = (): boolean => {
+  const [released, setReleased] = useState(false);
+  useEffect(() => {
+    const forceReleased =
+      typeof window !== "undefined" &&
+      new URLSearchParams(window.location.search).get("releaseNow") === "1";
+    const check = () =>
+      setReleased(forceReleased || Date.now() >= VIDEO_RELEASE_TIMESTAMP);
+    check();
+    const interval = window.setInterval(check, 60_000);
+    return () => window.clearInterval(interval);
+  }, []);
+  return released;
+};
+
+/**
+ * Returns true once the live stream release time has passed. SSR-safe.
+ * Supports `?streamNow=1` (and also `?releaseNow=1`) for preview.
+ */
+export const useStreamReleased = (): boolean => {
+  const [released, setReleased] = useState(false);
+  useEffect(() => {
+    const params =
+      typeof window !== "undefined"
+        ? new URLSearchParams(window.location.search)
+        : null;
+    const forceReleased =
+      params?.get("streamNow") === "1" || params?.get("releaseNow") === "1";
+    const check = () =>
+      setReleased(!!forceReleased || Date.now() >= STREAM_RELEASE_TIMESTAMP);
+    check();
+    const interval = window.setInterval(check, 60_000);
+    return () => window.clearInterval(interval);
+  }, []);
+  return released;
+};
+
+/**
+ * Convert a youtu.be or youtube.com URL into a youtube.com/embed/<id> URL.
+ * Returns undefined if the URL cannot be parsed.
+ */
+export const getYouTubeEmbedUrl = (url: string | undefined): string | undefined => {
+  if (!url) return undefined;
+  const shortMatch = url.match(/youtu\.be\/([A-Za-z0-9_-]{6,})/);
+  if (shortMatch) return `https://www.youtube.com/embed/${shortMatch[1]}`;
+  const longMatch = url.match(/[?&]v=([A-Za-z0-9_-]{6,})/);
+  if (longMatch) return `https://www.youtube.com/embed/${longMatch[1]}`;
+  const embedMatch = url.match(/youtube\.com\/embed\/([A-Za-z0-9_-]{6,})/);
+  if (embedMatch) return url;
+  return undefined;
+};