Autoplay the chapter and close the hat on navigation

src/components/molecules/player.tsx

@@ -23,6 +23,7 @@ import IconPlay from '~public/img/icons/icon-play-large.svg';
 import useGlobalSpaceDown from '~src/lib/hooks/useGlobalSpaceDown';
 import useIsAuthenticated from '~src/lib/hooks/useIsAuthenticated';
 import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
+import isServerSide from '~src/lib/isServerSide';
 
 import { PlaybackContext } from '../templates/andPlaybackContext';
 import { PlayerFragment } from './__generated__/player';
@@ -79,6 +80,10 @@ const Player = ({
 		}
 	}, []);
 
+	useEffect(() => {
+		if (!isServerSide()) session.play();
+	}, [session]);
+
 	const iconColor = isBackgroundColorDark(backgroundColor)
 		? BaseColors.WHITE
 		: BaseColors.DARK;

src/components/organisms/passageNavigation/index.tsx

@@ -132,6 +132,10 @@ export default function PassageNavigation({
 		}
 	}, [selectedChapterId, chapterId, setSelectedChapterId, versions]);
 
+	useEffect(() => {
+		setOpen(false);
+	}, [selectedChapterId]);
+
 	const [selectedView, setSelectedView] = useLocalStorage<'grid' | 'list'>(
 		'passageNavLayout',
 		'grid',