Play pause using keyboard event spacebar

GoogleChromeLabs · Dec 28, 2024 · d74dbb4 · d74dbb4
1 parent 419f2f3
commit d74dbb4
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx b/.../devtools/components/privateAdvertising/protectedAudience/explorableExplanation/panel.tsx
@@ -72,10 +72,28 @@ const Panel = ({ currentSiteData, setCurrentSite }: PanelProps) => {
     });
   }, []);
 
+  const tooglePlayOnKeydown = useCallback(
+    (event: KeyboardEvent) => {
+      // Check if the pressed key is the spacebar
+      if (event.code === 'Space') {
+        setPlaying();
+      }
+    },
+    [setPlaying]
+  );
+
   const { setActiveTab } = useTabs(({ actions }) => ({
     setActiveTab: actions.setActiveTab,
   }));
 
+  useEffect(() => {
+    document.addEventListener('keydown', tooglePlayOnKeydown);
+
+    return () => {
+      document.removeEventListener('keydown', tooglePlayOnKeydown);
+    };
+  }, [tooglePlayOnKeydown]);
+
   useEffect(() => {
     if (!currentSiteData) {
       setActiveTab(0);