Better scrolling

mbsantiago · Jan 24, 2024 · 8f6adf9 · 8f6adf9
1 parent 37ea904
commit 8f6adf9
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 17 deletions.
diff --git a/front/src/app/(base)/datasets/detail/nav.tsx b/front/src/app/(base)/datasets/detail/nav.tsx
@@ -29,7 +29,7 @@ export default function DatasetNavHeader({ dataset }: { dataset: Dataset }) {
 
   return (
     <Header>
-      <div className="flex overflow-x-scroll flex-row space-x-4 w-full">
+      <div className="flex overflow-x-auto flex-row space-x-4 w-full">
         <H1>{dataset.name}</H1>
         <Tabs
           tabs={[

diff --git a/front/src/components/SlideOver.tsx b/front/src/components/SlideOver.tsx
@@ -62,7 +62,7 @@ export default function SlideOver({
                       </button>
                     </div>
                   </Transition.Child>
-                  <div className="flex h-full flex-col overflow-y-scroll bg-stone-100 dark:bg-stone-800 py-6 shadow-xl">
+                  <div className="flex h-full flex-col overflow-y-auto bg-stone-100 dark:bg-stone-800 py-6 shadow-xl">
                     <div className="px-4 sm:px-6">
                       <Dialog.Title className="text-base font-semibold leading-6 text-stone-900 dark:text-stone-400">
                         {title}

diff --git a/front/src/components/annotation/AnnotationProgress.tsx b/front/src/components/annotation/AnnotationProgress.tsx
@@ -129,7 +129,7 @@ export default function AnnotationProgress({
             </>
           }
         />
-        <div className="overflow-x-scroll">
+        <div className="overflow-x-auto">
           <FilterBar
             withLabel={false}
             filter={filter}

diff --git a/front/src/components/annotation_projects/AnnotationProjectHeader.tsx b/front/src/components/annotation_projects/AnnotationProjectHeader.tsx
@@ -22,8 +22,8 @@ export default function AnnotationProjectHeader({
 
   return (
     <Header>
-      <div className="flex overflow-x-scroll flex-row space-x-4 w-full">
-        <H1 className="overflow-scroll max-w-xl whitespace-nowrap">
+      <div className="flex overflow-x-auto flex-row space-x-4 w-full">
+        <H1 className="overflow-auto max-w-xl whitespace-nowrap">
           {annotationProject.name}
         </H1>
         <Tabs

diff --git a/front/src/components/evaluation_sets/EvaluationSetHeader.tsx b/front/src/components/evaluation_sets/EvaluationSetHeader.tsx
@@ -23,8 +23,8 @@ export default function EvaluationSetHeader({
 
   return (
     <Header>
-      <div className="flex w-full flex-row space-x-4 overflow-x-scroll">
-        <H1 className="max-w-xl whitespace-nowrap overflow-scroll">
+      <div className="flex w-full flex-row space-x-4 overflow-x-auto">
+        <H1 className="max-w-xl whitespace-nowrap overflow-auto">
           {evaluationSet.name}
         </H1>
         <Tabs

diff --git a/front/src/components/exploration/Header.tsx b/front/src/components/exploration/Header.tsx
@@ -21,7 +21,7 @@ export default function ExplorationHeader() {
 
   return (
     <Header>
-      <div className="flex w-full flex-row space-x-4 overflow-x-scroll">
+      <div className="flex w-full flex-row space-x-4 overflow-x-auto">
         <H1>Explore</H1>
         <Tabs
           tabs={[

diff --git a/front/src/components/recordings/RecordingHeader.tsx b/front/src/components/recordings/RecordingHeader.tsx
@@ -36,7 +36,7 @@ export default function RecordingHeader({
   });
 
   return (
-    <div className="flex overflow-x-scroll flex-row gap-x-6 items-center w-full">
+    <div className="flex overflow-x-auto flex-row gap-x-6 items-center w-full">
       <div className="inline-flex items-center">
         <RecordingIcon className="inline-block mr-1 w-5 h-5 text-stone-500" />
         <H3 className="max-w-xl whitespace-nowrap">

diff --git a/front/src/components/recordings/RecordingTable.tsx b/front/src/components/recordings/RecordingTable.tsx
@@ -111,7 +111,7 @@ export default function RecordingTable({
         filterDef={recordingFilterDefs}
       />
       <div className="w-full">
-        <div className="overflow-x-scroll overflow-y-scroll w-full max-h-screen rounded-md outline outline-1 outline-stone-200 dark:outline-stone-800">
+        <div className="overflow-x-auto overflow-y-auto w-full max-h-screen rounded-md outline outline-1 outline-stone-200 dark:outline-stone-800">
           <Table table={table} onCellKeyDown={handleKeyDown} />
         </div>
       </div>

diff --git a/front/src/components/tables/Table.tsx b/front/src/components/tables/Table.tsx
@@ -59,7 +59,7 @@ export default function Table<S>({
           >
             {headerGroup.headers.map((header) => (
               <th
-                className="overflow-x-scroll relative py-1 px-2 whitespace-nowrap border border-stone-400 dark:border-stone-500"
+                className="overflow-x-auto relative py-1 px-2 whitespace-nowrap border border-stone-400 dark:border-stone-500"
                 key={header.id}
                 colSpan={header.colSpan}
                 style={{

diff --git a/front/src/components/tables/TableCell.tsx b/front/src/components/tables/TableCell.tsx
@@ -21,7 +21,7 @@ export default function TableCell({
         className,
       )}
     >
-      <span className="grow overflow-x-scroll">{children}</span>
+      <span className="grow overflow-x-auto">{children}</span>
       {!editable ? null : (
         <EditIcon className="inline-block h-5 w-5 text-stone-500" />
       )}

diff --git a/front/src/components/tables/TableHeader.tsx b/front/src/components/tables/TableHeader.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 
 export default function TableHeader({ children }: { children: ReactNode }) {
   return (
-    <span className="inline-block whitespace-nowrap align-middle w-full overflow-x-scroll">
+    <span className="inline-block whitespace-nowrap align-middle w-full overflow-x-auto">
       {children}
     </span>
   );

diff --git a/front/src/components/tables/TableTags.tsx b/front/src/components/tables/TableTags.tsx
@@ -33,7 +33,7 @@ export default function TableTags({
   const getTagColor = useStore((state) => state.getTagColor);
 
   return (
-    <div className="flex overflow-scroll flex-row flex-wrap gap-2 items-center px-1 m-0 w-full max-h-40">
+    <div className="flex overflow-auto flex-row flex-wrap gap-2 items-center px-1 m-0 w-full max-h-40">
       {/* Display the list of tags and allow users to remove a tag from */}
       {/* list by clicking on it*/}
       {tags.map((tag) => (

diff --git a/front/src/components/tags/TagSearchBar.tsx b/front/src/components/tags/TagSearchBar.tsx
@@ -161,7 +161,7 @@ export default forwardRef<HTMLInputElement, TagSearchBarProps>(
               <ChevronUpDownIcon className="w-5 h-5" aria-hidden="true" />
             </Combobox.Button>
           </div>
-          <Combobox.Options className="overflow-y-scroll py-1 max-w-sm text-base rounded-md divide-y ring-1 ring-opacity-5 shadow-lg sm:text-sm focus:outline-none divide-stone-200 bg-stone-50 ring-stone-300 dark:divide-stone-600 dark:bg-stone-700 dark:ring-stone-600">
+          <Combobox.Options className="overflow-y-auto py-1 max-w-sm text-base rounded-md divide-y ring-1 ring-opacity-5 shadow-lg sm:text-sm focus:outline-none divide-stone-200 bg-stone-50 ring-stone-300 dark:divide-stone-600 dark:bg-stone-700 dark:ring-stone-600">
             {tags.items.length === 0 ? (
               <NoTagsFound />
             ) : (

diff --git a/front/src/hooks/audio/useAudio.ts b/front/src/hooks/audio/useAudio.ts
@@ -129,19 +129,46 @@ export default function useAudio({
       cancelAnimationFrame(timer);
     };
 
+    const onError = () => {
+      cancelAnimationFrame(timer);
+    }
+
     current.addEventListener("play", onPlay);
     current.addEventListener("pause", onPause);
+    current.addEventListener("error", onError);
 
     return () => {
       cancelAnimationFrame(timer);
       current.removeEventListener("play", onPlay);
       current.removeEventListener("pause", onPause);
+      current.removeEventListener("error", onError);
     };
   }, [initialUrl, speed, startTime, loop, volume]);
 
+
+  // Some browsers return `Promise` on `.play()` and may throw errors
+  // if one tries to execute another `.play()` or `.pause()` while that
+  // promise is resolving. So we prevent that with this lock.
+  // See: https://bugs.chromium.org/p/chromium/issues/detail?id=593273
+  let lockPlay = useRef<boolean>(false);
+
   const handlePlay = useCallback(() => {
-    audio.current.play();
-    setIsPlaying(true);
+    if (lockPlay.current) return;
+    const promise = audio.current.play();
+
+    if (promise) {
+      lockPlay.current = true;
+      promise
+        .then(() => {
+          setIsPlaying(true);
+          lockPlay.current = false;
+        })
+        .catch(() => {
+          lockPlay.current = false;
+        });
+    } else {
+      setIsPlaying(true);
+    }
   }, []);
 
   const handlePause = useCallback(() => {