diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9f90c50..6afe307 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -120,7 +120,7 @@ function App(): JSX.Element {
   useEffect(() => {
     document.addEventListener('keypress', handleKeyPress);
     return () => document.removeEventListener('keypress', handleKeyPress);
-  }, [playState]);
+  }, [selection, playState]);
 
   // load audio when MediaSet is loaded:
   useEffect(() => {
@@ -195,7 +195,7 @@ function App(): JSX.Element {
       return;
     }
 
-    handleTogglePlay();
+    togglePlay();
   };
 
   // handler called when the selection in the overview (zoom setting) is changed.
@@ -229,7 +229,7 @@ function App(): JSX.Element {
     video.currentTime = currentTime;
   };
 
-  const handleTogglePlay = () => {
+  const togglePlay = () => {
     if (playState == PlayState.Paused) {
       play();
     } else {
@@ -417,7 +417,7 @@ function App(): JSX.Element {
             </div>
             <ControlBar
               playState={playState}
-              onTogglePlay={handleTogglePlay}
+              onTogglePlay={togglePlay}
               onClip={handleClip}
               onZoomIn={handleZoomIn}
               onZoomOut={handleZoomOut}