Add fourth batch of Web SDK demos to THEOplayer examples

spellcheck/dictionary.txt

@@ -1021,3 +1021,6 @@ yospace-connector-web
 Yottabyte
 Youbora
 Zettabyte
+HLG
+HLG-compatible
+UIs

src/components/DocCardListSearch/index.tsx

@@ -0,0 +1,109 @@
+import { Fragment, useMemo, useState, type JSX } from 'react';
+import DocCardList, { type Props as DocCardListProps } from '@theme/DocCardList';
+import { useDocsVersion } from '@docusaurus/plugin-content-docs/client';
+import { PropSidebarItem, PropSidebarItemCategory } from '@docusaurus/plugin-content-docs';
+import Heading, { type HeadingType } from '@theme/Heading';
+import styles from './styles.module.css';
+
+export interface DocCardGroup {
+  label?: string;
+  items: PropSidebarItem[];
+}
+
+export function isCategory(item: PropSidebarItem): item is PropSidebarItemCategory {
+  return item.type === 'category';
+}
+
+function itemText(item: PropSidebarItem, groupLabel: string, description?: string): string {
+  const label = item.type === 'link' || item.type === 'category' ? item.label : '';
+  return `${label} ${description ?? ''} ${groupLabel}`.toLowerCase();
+}
+
+// Filters groups by whitespace-separated terms (all must match) against
+// item label + doc description + group label.
+// Category items match on their label + group label. Empty groups are dropped.
+// With an empty query, returns groups unchanged.
+export function useDocCardListSearch(groups: DocCardGroup[]): {
+  query: string;
+  setQuery: (q: string) => void;
+  filteredGroups: DocCardGroup[];
+  noMatches: boolean;
+} {
+  const { docs } = useDocsVersion();
+  const [query, setQuery] = useState('');
+
+  const filteredGroups = useMemo(() => {
+    const terms = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+    if (terms.length === 0) return groups;
+    return groups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => {
+          const haystack =
+            item.type === 'link'
+              ? itemText(item, group.label ?? '', item.docId ? docs[item.docId]?.description : undefined)
+              : item.type === 'category'
+                ? itemText(item, group.label ?? '')
+                : '';
+          return terms.every((term) => haystack.includes(term));
+        }),
+      }))
+      .filter((group) => group.items.length > 0);
+  }, [query, groups, docs]);
+
+  return { query, setQuery, filteredGroups, noMatches: query.trim() !== '' && filteredGroups.length === 0 };
+}
+
+export function DocCardListSearchInput({
+  query,
+  onQueryChange,
+  placeholder = 'Search…',
+}: {
+  query: string;
+  onQueryChange: (q: string) => void;
+  placeholder?: string;
+}): JSX.Element {
+  return (
+    <input
+      type="search"
+      className={styles.searchInput}
+      placeholder={placeholder}
+      aria-label={placeholder}
+      value={query}
+      onChange={(event) => onQueryChange(event.target.value)}
+      onKeyDown={(event) => {
+        if (event.key === 'Escape') onQueryChange('');
+      }}
+    />
+  );
+}
+
+export interface SearchableDocCardGroupsProps extends Omit<DocCardListProps, 'items'> {
+  groups: DocCardGroup[];
+  headingLevel?: HeadingType;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+}
+
+export default function SearchableDocCardGroups({
+  groups,
+  headingLevel,
+  searchable = false,
+  searchPlaceholder = 'Search…',
+  ...props
+}: SearchableDocCardGroupsProps): JSX.Element {
+  const { query, setQuery, filteredGroups, noMatches } = useDocCardListSearch(groups);
+
+  return (
+    <>
+      {searchable && <DocCardListSearchInput query={query} onQueryChange={setQuery} placeholder={searchPlaceholder} />}
+      {noMatches && <p>No results match “{query.trim()}”.</p>}
+      {filteredGroups.map((group, index) => (
+        <Fragment key={group.label ?? index}>
+          {group.label && headingLevel && <Heading as={headingLevel}>{group.label}</Heading>}
+          <DocCardList items={group.items} {...props} />
+        </Fragment>
+      ))}
+    </>
+  );
+}

src/components/DocCardListSearch/styles.module.css

@@ -0,0 +1,12 @@
+.searchInput {
+  display: block;
+  width: 100%;
+  max-width: 32rem;
+  margin-bottom: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  color: var(--ifm-font-color-base);
+  background: var(--ifm-background-surface-color);
+  border: 1px solid var(--ifm-color-emphasis-300);
+  border-radius: var(--ifm-global-radius);
+}

src/components/SidebarCategoryDocCardList/index.tsx

@@ -1,24 +1,22 @@
-import { Fragment } from 'react';
-import DocCardList, { type Props as DocCardListProps } from '@theme/DocCardList';
+import type { JSX } from 'react';
+import type { Props as DocCardListProps } from '@theme/DocCardList';
 import { useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
-import { PropSidebarItem, PropSidebarItemCategory } from '@docusaurus/plugin-content-docs';
-import Heading, { type HeadingType } from '@theme/Heading';
+import type { HeadingType } from '@theme/Heading';
+import SearchableDocCardGroups, { isCategory } from '../DocCardListSearch';
 
 export interface Props extends Omit<DocCardListProps, 'items'> {
   headingLevel?: HeadingType;
+  searchable?: boolean;
+  searchPlaceholder?: string;
 }
 
-function isCategory(item: PropSidebarItem): item is PropSidebarItemCategory {
-  return item.type === 'category';
-}
-
-export default function SidebarCategoryDocCardList({ headingLevel, ...props }: Props) {
+export default function SidebarCategoryDocCardList({ headingLevel = 'h2', searchable = false, searchPlaceholder, ...props }: Props): JSX.Element {
   const sidebar = useDocsSidebar();
-  const categories = sidebar?.items.filter(isCategory) ?? [];
-  return categories.map((category) => (
-    <Fragment key={category.label}>
-      <Heading as={headingLevel ?? 'h2'}>{category.label}</Heading>
-      <DocCardList items={category.items} {...props} />
-    </Fragment>
-  ));
+  const groups = (sidebar?.items.filter(isCategory) ?? []).map((category) => ({
+    label: category.label,
+    items: category.items,
+  }));
+  return (
+    <SearchableDocCardGroups groups={groups} headingLevel={headingLevel} searchable={searchable} searchPlaceholder={searchPlaceholder} {...props} />
+  );
 }

src/components/SidebarDocCardList/index.tsx

@@ -1,31 +1,23 @@
-import { Fragment } from 'react';
+import type { JSX } from 'react';
 import { useDoc, useDocsSidebar } from '@docusaurus/plugin-content-docs/client';
-import DocCardList, { type Props as DocCardListProps } from '@theme/DocCardList';
-import { PropSidebarItem, PropSidebarItemCategory } from '@docusaurus/plugin-content-docs';
-import Heading, { type HeadingType } from '@theme/Heading';
+import type { Props as DocCardListProps } from '@theme/DocCardList';
+import type { HeadingType } from '@theme/Heading';
+import SearchableDocCardGroups, { isCategory } from '../DocCardListSearch';
 
 export interface Props extends Omit<DocCardListProps, 'items'> {
   headingLevel?: HeadingType;
+  searchable?: boolean;
+  searchPlaceholder?: string;
 }
 
-function isCategory(item: PropSidebarItem): item is PropSidebarItemCategory {
-  return item.type === 'category';
-}
-
-export default function SidebarDocCardList({ headingLevel, ...props }: Props) {
+export default function SidebarDocCardList({ headingLevel, searchable = false, searchPlaceholder, ...props }: Props): JSX.Element {
   const doc = useDoc();
   const sidebar = useDocsSidebar();
   const items = (sidebar?.items ?? [])
     // Hide the current doc page from list
     .filter((item) => !(item.type === 'link' && item.docId === doc.metadata.id));
-  if (headingLevel) {
-    const subcategories = items.filter(isCategory);
-    return subcategories.map((subcategory) => (
-      <Fragment key={subcategory.label}>
-        <Heading as={headingLevel}>{subcategory.label}</Heading>
-        <DocCardList items={subcategory.items} {...props} />
-      </Fragment>
-    ));
-  }
-  return <DocCardList items={items} {...props} />;
+  const groups = headingLevel ? items.filter(isCategory).map((subcategory) => ({ label: subcategory.label, items: subcategory.items })) : [{ items }];
+  return (
+    <SearchableDocCardGroups groups={groups} headingLevel={headingLevel} searchable={searchable} searchPlaceholder={searchPlaceholder} {...props} />
+  );
 }

src/components/SubcategoryDocCardList/index.tsx

@@ -1,24 +1,22 @@
-import { Fragment } from 'react';
-import DocCardList, { type Props as DocCardListProps } from '@theme/DocCardList';
+import type { JSX } from 'react';
+import type { Props as DocCardListProps } from '@theme/DocCardList';
 import { useCurrentSidebarCategory } from '@docusaurus/plugin-content-docs/client';
-import { PropSidebarItem, PropSidebarItemCategory } from '@docusaurus/plugin-content-docs';
-import Heading, { type HeadingType } from '@theme/Heading';
+import type { HeadingType } from '@theme/Heading';
+import SearchableDocCardGroups, { isCategory } from '../DocCardListSearch';
 
 export interface Props extends Omit<DocCardListProps, 'items'> {
   headingLevel?: HeadingType;
+  searchable?: boolean;
+  searchPlaceholder?: string;
 }
 
-function isCategory(item: PropSidebarItem): item is PropSidebarItemCategory {
-  return item.type === 'category';
-}
-
-export default function SubcategoryDocCardList({ headingLevel, ...props }: Props) {
+export default function SubcategoryDocCardList({ headingLevel = 'h2', searchable = false, searchPlaceholder, ...props }: Props): JSX.Element {
   const category = useCurrentSidebarCategory();
-  const subcategories = category.items.filter(isCategory);
-  return subcategories.map((subcategory) => (
-    <Fragment key={subcategory.label}>
-      <Heading as={headingLevel ?? 'h2'}>{subcategory.label}</Heading>
-      <DocCardList items={subcategory.items} {...props} />
-    </Fragment>
-  ));
+  const groups = category.items.filter(isCategory).map((subcategory) => ({
+    label: subcategory.label,
+    items: subcategory.items,
+  }));
+  return (
+    <SearchableDocCardGroups groups={groups} headingLevel={headingLevel} searchable={searchable} searchPlaceholder={searchPlaceholder} {...props} />
+  );
 }