"use client"; import { useState } from "react"; import { VideoBlock } from "@/components/registry/blocks/video-block"; import { TypographyH2, TypographyMuted, } from "@/components/registry/primitives/core/typography"; import { isEmptySource } from "@/components/registry/primitives/editables/source-normalizers"; import { Text, type TextSource, } from "@/components/registry/primitives/editables/text"; import { cn } from "@/lib/registry/cn"; import type { ComponentProps } from "@/lib/registry/sitecore-types"; /** Normalized video fields: embed URL or video src, optional title and caption. */ export interface VideoFields { /** YouTube/Vimeo embed URL or direct video file URL */ VideoUrl?: TextSource; /** Optional thumbnail/poster image URL used for click-to-load and native poster. */ ThumbnailUrl?: TextSource; Title?: TextSource; Caption?: TextSource; /** Optional captions/subtitles file URL (for native video only) */ CaptionFileUrl?: TextSource; } export interface VideoBlockProps extends ComponentProps { fields: VideoFields; } function isEnabledParam(value?: string): boolean { return value === "1" || value === "true"; } function getUrl(value: TextSource | undefined): string | undefined { if (value == null) return undefined; if (typeof value === "string") return value.trim() || undefined; if (typeof value === "object" && "value" in value) { const v = (value as { value?: string }).value; return v != null && typeof v === "string" ? v.trim() || undefined : undefined; } return undefined; } /** * Default variant: video embed or video element with optional title and caption. * Supports `params.ClickToLoad` ("1" | "true") to defer media loading until user click. */ export function Default({ params, fields }: VideoBlockProps) { const { styles, RenderingIdentifier: id } = params ?? {}; const clickToLoad = isEnabledParam(params?.ClickToLoad); const url = getUrl(fields?.VideoUrl); const hasTitle = fields?.Title && !isEmptySource(fields.Title); const hasCaption = fields?.Caption && !isEmptySource(fields.Caption); const title = hasTitle ? fields.Title : undefined; const caption = hasCaption ? fields.Caption : undefined; const posterUrl = getUrl(fields?.ThumbnailUrl); const captionTrackUrl = getUrl(fields?.CaptionFileUrl); const [isMediaLoaded, setIsMediaLoaded] = useState(!clickToLoad); const mediaLabel = getUrl(title) ?? "Video"; return (

{title && ( )} {url && (

setIsMediaLoaded(true), }, playback: { poster: posterUrl, }, }} />

)} {caption && ( )}

); } export const componentType = "universal";

Video

Showcase

Video