Merge branch 'main' into cleanups

.github/workflows/cfc.yml

@@ -30,20 +30,13 @@ jobs:
           poetry env use "3.11"
           poetry install --no-interaction
 
-      - name: Restore GPAC Cache
-        uses: actions/cache/restore@v3
-        with:
-          path: /tmp/gpac
-          key: ${{ runner.os }}-gpac-
-          restore-keys: ${{ runner.os }}-gpac-
-
-      - name: Setup MP4Box
+      - name: Install GPAC
         run: |
+          wget -O /tmp/gpac.deb https://download.tsi.telecom-paristech.fr/gpac/new_builds/gpac_latest_head_linux64.deb
+          sudo apt update
+          sudo apt install -y /tmp/gpac.deb
           mkdir -p $HOME/.gpac
-          mkdir -p $HOME/.local/bin
           touch $HOME/.gpac/creds.key
-          cp -r /tmp/gpac/ $HOME/.local/bin
-          echo "$HOME/.local/bin" >> $GITHUB_PATH
 
       - name: Configure GitHub handle
         run: |

.github/workflows/chores.yml

@@ -6,36 +6,6 @@ on:
     - cron: "0 0 * * *"
 
 jobs:
-  gpac:
-    name: Build GPAC
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          repository: gpac/gpac
-
-      - name: Get latest commit
-        id: get-latest-commit
-        run: |
-          echo "latest-commit=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-
-      - name: GPAC Cache
-        id: gpac-cache
-        uses: actions/cache@v3
-        with:
-          path: /tmp/gpac
-          key: ${{ runner.os }}-gpac-${{ steps.get-latest-commit.outputs.latest-commit }}
-
-      - name: GPAC Build
-        if: steps.gpac-cache.outputs.cache-hit != 'true'
-        run: |
-          sudo apt-get install -y build-essential pkg-config git zlib1g-dev
-          ./configure --static-bin
-          make -j$(nproc)
-          mkdir -p /tmp/gpac
-          cp -r bin/gcc/ /tmp/gpac
-
   lfscache:
     name: Keep LFS Cache Warm
     runs-on: ubuntu-latest

conformance-search/src/components/BoxComponent.tsx

@@ -92,7 +92,7 @@ export default function BoxComponent({ box }: { box: SearchResultRefined<Box> })
     return (
         <div
             className={clsx(
-                "relative flex w-full flex-col divide-y-1 rounded-md bg-white shadow-md",
+                "relative flex w-full flex-col divide-y-1 overflow-hidden rounded-md bg-white shadow-md",
                 box.score === 0 && "border-l-4 border-green-400",
                 box.score > 0 && "border-l-4 border-yellow-400",
                 box.count === 0 && "border-l-4 !border-red-400 opacity-40"

conformance-search/src/components/Drawer.tsx

@@ -28,7 +28,7 @@ export default function Drawer({
 
     if (hidden) return null;
     return (
-        <div ref={ref} className="sticky last:border-b-1">
+        <div ref={ref} className="sticky">
             <div
                 className={clsx("sticky top-0 border-t-1 bg-white px-3 py-1", open && "border-b-1")}
             >

conformance-search/src/components/FeatureComponent.tsx

@@ -12,7 +12,7 @@ export default function FeatureComponent({ feature }: { feature: SearchResultRef
     return (
         <div
             className={clsx(
-                "relative flex w-full flex-col divide-y-1 rounded-md bg-white shadow-md",
+                "relative flex w-full flex-col divide-y-1 overflow-hidden rounded-md bg-white shadow-md",
                 feature.score === 0 && "border-l-4 border-green-400",
                 feature.score > 0 && "border-l-4 border-yellow-400",
                 feature.count === 0 && "border-l-4 border-red-400 opacity-40"

conformance-search/src/components/FileComponent.tsx

@@ -277,7 +277,7 @@ export default function FileComponent({ file }: { file: FileSearchResult }) {
                         >
                             {file.item.published ? "Published" : "Under Consideration"}
                         </span>
-                        {file.matches.slice(0, 8).map((match) => {
+                        {file.matches.slice(0, 4).map((match) => {
                             return (
                                 <span
                                     key={match.value}
@@ -290,9 +290,9 @@ export default function FileComponent({ file }: { file: FileSearchResult }) {
                                 </span>
                             );
                         })}
-                        {file.matches.length > 8 && (
+                        {file.matches.length > 4 && (
                             <span className="flex h-4 items-center justify-center whitespace-nowrap rounded-full bg-gray-500 px-2 text-xs font-bold text-white opacity-40">
-                                +{file.matches.length - 6} more
+                                +{file.matches.length - 4} more
                             </span>
                         )}
                     </div>

conformance-search/src/components/Input/Dropdown.tsx

@@ -1,25 +1,25 @@
-import clsx from "clsx";
 import Fuse from "fuse.js";
-import { useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { useEvent, useIntersection } from "react-use";
 import { normalizeResultScores } from "@/utils";
 import { Chip } from "@/components";
 import { FuseSearchWithScore } from "@/types";
 
-export default function Dropdown({
-    query,
-    fuse,
-    parseValue,
-    hidden
-}: {
-    query: string;
-    fuse: {
-        fourccs: Fuse<string>;
-        types: Fuse<string>;
-    };
-    parseValue: (value: string) => Promise<void>;
-    hidden: boolean;
-}) {
+function Dropdown(
+    {
+        query,
+        fuse,
+        parseValue
+    }: {
+        query: string;
+        fuse: {
+            fourccs: Fuse<string>;
+            types: Fuse<string>;
+        };
+        parseValue: (value: string) => Promise<void>;
+    },
+    ref: React.ForwardedRef<HTMLDivElement>
+) {
     const [activeIndex, setActiveIndex] = useState(-1);
     const [results, setResults] = useState<{
         fourccs: FuseSearchWithScore<string>[];
@@ -30,8 +30,7 @@ export default function Dropdown({
     });
 
     // Check if the dropdown is visible
-    const ref = useRef(null);
-    const intersection = useIntersection(ref, {
+    const intersection = useIntersection(ref as React.MutableRefObject<HTMLDivElement>, {
         root: null,
         rootMargin: "0px",
         threshold: 0.1
@@ -142,12 +141,7 @@ export default function Dropdown({
     return (
         <div
             ref={ref}
-            className={clsx(
-                "absolute bottom-[-1px] z-10 translate-y-full flex-col gap-3 bg-white p-3 shadow-lg outline outline-1 outline-gray-200 max-md:right-0 sm:left-[-3]",
-                hidden || (results.fourccs.length === 0 && results.types.length === 0)
-                    ? "hidden"
-                    : "flex"
-            )}
+            className="mt-[1.5px] flex flex-col gap-3 bg-white p-3 shadow-lg outline outline-1 outline-gray-200"
             data-testid="dropdown"
         >
             {dropdownSection({
@@ -162,3 +156,5 @@ export default function Dropdown({
         </div>
     );
 }
+
+export default forwardRef(Dropdown);

conformance-search/src/components/Input/Input.tsx

@@ -23,13 +23,13 @@ export default function Input({
         return (
             <input
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus
-                className="grow px-3 text-sm focus:outline-none"
+                autoFocus={filter.value !== ""}
+                className="grow rounded-none bg-transparent px-3 text-sm focus:outline-none"
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     updateFilter(index, (e.target as HTMLInputElement).value)
                 }
                 placeholder={placeholder}
-                type="text"
+                type="search"
                 value={filter.value}
             />
         );

conformance-search/src/components/Input/variants/ContainerInput.tsx

@@ -5,6 +5,7 @@ import { useClickAway } from "react-use";
 import Search from "@/lib/search";
 import { Chip } from "@/components";
 import { Filter } from "@/types";
+import { Popper } from "@mui/material";
 import Dropdown from "../Dropdown";
 import stripSpecialChars from "../helpers";
 
@@ -95,14 +96,17 @@ export default function ContainerInput({
         updateFuse(search);
     }, [parsed, search]);
 
+    // Focus the input when the parsed value changes
+    const inputRef = useRef<HTMLInputElement>(null);
+    useEffect(() => {
+        if (parsed.length > 0) inputRef.current?.focus();
+    }, [parsed]);
+
     // Dropdown menu
+    const dropdownContainerRef = useRef<HTMLDivElement>(null);
     const dropdownRef = useRef<HTMLDivElement>(null);
     const [open, setOpen] = useState(false);
 
-    const handleClickOutside = () => {
-        setOpen(false);
-    };
-
     // Capture delete key
     const onKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === "Backspace") {
@@ -119,7 +123,15 @@ export default function ContainerInput({
         }
     };
 
-    useClickAway(dropdownRef, handleClickOutside);
+    useClickAway(
+        dropdownContainerRef,
+        (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            if (dropdownRef.current?.contains(target)) return;
+            setOpen(false);
+        },
+        ["mouseup"]
+    );
 
     return (
         <div className="relative flex grow flex-row items-center pl-3 text-sm">
@@ -159,25 +171,38 @@ export default function ContainerInput({
                     </Chip>
                 ))}
             </div>
-            <div ref={dropdownRef} className="relative flex h-full grow flex-row">
+            <div ref={dropdownContainerRef} className="relative flex h-full grow flex-row">
                 <input
-                    className="w-full focus:outline-none"
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                        setQuery((e.target as HTMLInputElement).value)
-                    }
+                    ref={inputRef}
+                    autoCapitalize="off"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className="w-fit bg-transparent focus:outline-none xs:w-full"
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                        setQuery((e.target as HTMLInputElement).value);
+                        setOpen(true);
+                    }}
                     onClick={() => setOpen(true)}
                     onKeyDown={onKeyDown}
                     placeholder={placeholder}
-                    type="text"
+                    spellCheck="false"
+                    type="search"
                     value={query}
                 />
                 {fuse && (
-                    <Dropdown
-                        fuse={fuse}
-                        hidden={!open || query === ""}
-                        parseValue={parseValue}
-                        query={query}
-                    />
+                    <Popper
+                        anchorEl={inputRef.current}
+                        className="z-20"
+                        open={open && query !== ""}
+                        placement="bottom-start"
+                    >
+                        <Dropdown
+                            ref={dropdownRef}
+                            fuse={fuse}
+                            parseValue={parseValue}
+                            query={query}
+                        />
+                    </Popper>
                 )}
             </div>
         </div>

conformance-search/src/components/SearchComponent/SearchComponent.tsx

@@ -16,7 +16,7 @@ export default function SearchComponent({
     onResult
 }: {
     className?: string;
-    onResult: (boxes: SearchResult<Box>[], features: SearchResult<Feature>[]) => Promise<void>;
+    onResult: (boxes: SearchResult<Box>[], features: SearchResult<Feature>[]) => void;
 }) {
     const [loading, setLoading] = useState(false);
     const [open, setOpen] = useState(false);
@@ -52,7 +52,7 @@ export default function SearchComponent({
             // Update URL
             setQueryParams(query, filters);
             const { boxes, features } = await search.search(query, filters);
-            await onResult(boxes, features);
+            onResult(boxes, features);
             setLoading(false);
         },
         250,
@@ -63,6 +63,10 @@ export default function SearchComponent({
     useEffect(() => {
         const newState = filters.length > 0 && open;
         setOpen(newState);
+
+        // If open, disable scroll
+        if (newState) document.body.style.overflow = "hidden";
+        else document.body.style.overflow = "auto";
     }, [open, filters]);
 
     return (
@@ -82,7 +86,7 @@ export default function SearchComponent({
                             autoCapitalize="off"
                             autoComplete="off"
                             autoCorrect="off"
-                            className="h-16 min-w-0 grow rounded-md px-5 text-sm focus:outline-none disabled:bg-transparent"
+                            className="h-16 min-w-0 grow rounded-tl-md bg-transparent px-5 text-lg only:rounded-t-md focus:outline-none disabled:bg-gray-100"
                             disabled={!ready}
                             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                 setQuery((e.target as HTMLInputElement).value);
@@ -93,23 +97,20 @@ export default function SearchComponent({
                             type="text"
                             value={query}
                         />
-                        <button
-                            className={clsx(
-                                "w-14 flex-col items-center justify-center",
-                                !ready || loading || (!query && filters.length === 0)
-                                    ? "hidden"
-                                    : "flex"
-                            )}
-                            disabled={!ready || loading}
-                            onClick={() => {
-                                setQuery("");
-                                resetFilters();
-                            }}
-                            type="button"
-                        >
-                            <MdClose className="text-2xl" />
-                            <span className="text-[10px] font-semibold">Reset</span>
-                        </button>
+                        {ready && !loading && (query || filters.length > 0) && (
+                            <button
+                                className="flex w-14 flex-col items-center justify-center"
+                                onClick={() => {
+                                    setQuery("");
+                                    resetFilters();
+                                }}
+                                type="button"
+                            >
+                                <MdClose className="text-2xl" />
+                                <span className="text-[10px] font-semibold">Reset</span>
+                            </button>
+                        )}
+
                         {(!ready || loading) && (
                             <div className="flex w-14 items-center justify-center">
                                 <AiOutlineLoading className="animate-spin text-2xl" />
@@ -122,7 +123,7 @@ export default function SearchComponent({
                                 filters.map((filter: Filter, index: number) => (
                                     <div
                                         key={filter.value}
-                                        className="flex flex-row items-stretch divide-x-1 px-3"
+                                        className="flex flex-row items-stretch divide-x-1 overflow-x-scroll px-3"
                                     >
                                         <button
                                             className="my-3 mr-3 cursor-pointer"