diff --git a/src/routes/_authed/search/-components/results/results-header.tsx b/src/routes/_authed/search/-components/results/results-header.tsx index 7259960..1a02013 100644 --- a/src/routes/_authed/search/-components/results/results-header.tsx +++ b/src/routes/_authed/search/-components/results/results-header.tsx @@ -5,7 +5,7 @@ interface ResultsHeaderProps { query: string; duration?: number; cached?: boolean; - type?: "result" | "image" | "file"; + type?: "result" | "image" | "file" | "video"; } export function ResultsHeader({ @@ -16,7 +16,13 @@ export function ResultsHeader({ type = "result", }: ResultsHeaderProps) { const typeLabel = - type === "image" ? "image" : type === "file" ? "file" : "result"; + type === "image" + ? "image" + : type === "file" + ? "file" + : type === "video" + ? "video" + : "result"; const pluralLabel = count !== 1 ? `${typeLabel}s` : typeLabel; const formatDuration = (ms: number): string => { diff --git a/src/routes/_authed/search/-components/results/search-loading.tsx b/src/routes/_authed/search/-components/results/search-loading.tsx index 431b0ba..ecd4564 100644 --- a/src/routes/_authed/search/-components/results/search-loading.tsx +++ b/src/routes/_authed/search/-components/results/search-loading.tsx @@ -1,6 +1,7 @@ import { SearchCategory } from "@/server/domain/value-objects"; import { FileResultsSkeleton } from "./file-results"; import { ImageResultsSkeleton } from "./image-results"; +import { VideoResultsSkeleton } from "./video-results"; import { WebResultsSkeleton } from "./web-results"; interface SearchResultsProps { @@ -16,6 +17,10 @@ export function SearchLoading({ category }: SearchResultsProps) { return ; } + if (category === SearchCategory.VIDEOS) { + return ; + } + if (category === SearchCategory.WEB) { return ; } diff --git a/src/routes/_authed/search/-components/results/search-results.tsx b/src/routes/_authed/search/-components/results/search-results.tsx index d23c71b..120bcae 100644 --- a/src/routes/_authed/search/-components/results/search-results.tsx +++ b/src/routes/_authed/search/-components/results/search-results.tsx @@ -3,10 +3,12 @@ import type { SearchResult } from "@/server/domain/value-objects"; import { isFileResult, isImageResult, + isVideoResult, isWebResult, } from "@/server/domain/value-objects"; import { FileResults } from "./file-results"; import { ImageResults } from "./image-results"; +import { VideoResults } from "./video-results"; import { WebResults } from "./web-results"; interface SearchResultsProps { @@ -103,6 +105,17 @@ export function SearchResults({ query, results }: SearchResultsProps) { ); } + if (isVideoResult(firstResult)) { + return ( + + ); + } + if (isWebResult(firstResult)) { return ( void; + onClose: () => void; +} + +function VideoCard({ + result, + linkTargetProps, + isActive, + onPlay, + onClose, +}: VideoCardProps) { + const [thumbnailError, setThumbnailError] = useState(false); + + const hostname = (() => { + try { + return new URL(result.url).hostname; + } catch { + return ""; + } + })(); + + const formattedDate = result.publishedDate + ? new Intl.DateTimeFormat(undefined, { + year: "numeric", + month: "short", + day: "numeric", + }).format(result.publishedDate) + : null; + + if (isActive && result.iframeSrc) { + return ( +
+
+