useMediaVideos

Search videos with automatic fetching, pagination, race protection, and abort handling. Same contract as useMediaSearch, but calls client.searchVideos.

pnpm add @media-sdk/core@^0.3.1 @media-sdk/native@^0.1.0 react

Must be called inside MediaProvider.

Options

Extends SearchParams from @media-sdk/core plus enabled:

Option	Type	Default	Description
query	string	—	Required. Search query
page	number	1	Initial page only
perPage	number	Provider default	Results per page
enabled	boolean	true	When false, skips automatic fetch
videoFilters	VideoSearchFilters	—	Forwarded to client.searchVideos unchanged

Gate filter UI with useMediaCapabilities().videoFilters before passing values.

VideoSearchFilters

Same shape as PhotoSearchFilters:

interface VideoSearchFilters {
  orientation?: "landscape" | "portrait" | "square";
  size?: "large" | "medium" | "small";
  color?: PhotoColor | PixabayColor;
  category?: string;
  minWidth?: number;
  minHeight?: number;
  editorsChoice?: boolean;
  locale?: string;
}

Provider support differs — see the provider matrix.

Returns

Field	Type	Description
data	PaginatedResponse<Video> | null	Search results, or null before the first successful response
loading	boolean	true while a request is in flight
error	Error | null	Last non-abort error
search	() => Promise<void>	Manually trigger a search
nextPage	() => Promise<void>	Next page when hasNext is true
previousPage	() => Promise<void>	Previous page when hasPrevious is true
refetch	() => Promise<void>	Re-run search for the current page

Type export

import type {
  UseMediaVideosOptions,
  UseMediaVideosResult,
} from "@media-sdk/native";

Example

import { useMediaVideos } from "@media-sdk/native";
import { Text, View } from "react-native";
import { VideoGrid } from "@media-sdk/ui-native";

function VideoSearch({ query }: { query: string }) {
  const { data, loading, error, nextPage, previousPage } = useMediaVideos({
    query,
    perPage: 15,
    videoFilters: { orientation: "landscape" },
  });

  if (loading) return <Text>Loading videos…</Text>;
  if (error) return <Text>{error.message}</Text>;

  return (
    <View>
      <VideoGrid
        videos={data?.items ?? []}
        onVideoSelect={() => {}}
      />
    </View>
  );
}

Gate the Videos tab with useMediaCapabilities().operations.searchVideos.

Related

• useMediaSearch — photo search
• Error handling recipes — hook error narrowing
• UI components — VideoGrid, VideoPreview
• Capabilities — video filter support per provider