Merge pull request #504 from audioverse-org/AV-705-Track-Actions-Search

Av 705 track actions search

src/components/molecules/buttonPlay.tsx

@@ -41,13 +41,10 @@ export default function ButtonPlay({
 	prefersAudio?: boolean;
 	className?: string;
 }): JSX.Element {
-	const { isPaused, play, pause, trackPlay, trackPause } = usePlaybackSession(
-		recording,
-		{
-			playlistRecordings,
-			prefersAudio,
-		}
-	);
+	const { isPaused, play, pause } = usePlaybackSession(recording, {
+		playlistRecordings,
+		prefersAudio,
+	});
 	const intl = useIntl();
 
 	const label = isPaused
@@ -73,9 +70,7 @@ export default function ButtonPlay({
 					? IconPauseLarge
 					: IconPause
 			}
-			onClick={() =>
-				isPaused ? (play(), trackPlay()) : (pause(), trackPause())
-			}
+			onClick={() => (isPaused ? play() : pause())}
 			color={
 				active
 					? isBackgroundColorDark(backgroundColor)

src/components/molecules/player.tsx

@@ -97,9 +97,7 @@ const Player = ({
 								(shouldShowPoster || posterHovered) && styles.posterPlayShown
 							)}
 							onClick={() =>
-								session.isPaused
-									? (session.play(), session.trackPlay())
-									: (session.pause(), session.trackPause())
+								session.isPaused ? session.play() : session.pause()
 							}
 							onTouchStart={() => setPosterHovered(true)}
 							onTouchEnd={() => setPosterHovered(false)}

src/components/molecules/searchBar.tsx

@@ -9,6 +9,7 @@ import {
 import IconExit from '~public/img/icons/icon-exit.svg';
 import IconSearch from '~public/img/icons/icon-search.svg';
 
+import { analytics } from '../atoms/analytics';
 import Mininav from './mininav';
 import styles from './searchBar.module.scss';
 
@@ -54,7 +55,7 @@ export default function SearchBar({
 		return () => {
 			document.removeEventListener('keydown', handleSubmit);
 		};
-	}, [isFocused, handleSubmit]);
+	}, [isFocused, handleSubmit, term]);
 
 	useEffect(() => {
 		if (
@@ -85,7 +86,9 @@ export default function SearchBar({
 					value={term ?? ''}
 					onChange={({ target }) => onTermChange(target.value)}
 					onFocus={() => setIsFocused(true)}
-					onBlur={() => setIsFocused(false)}
+					onBlur={() => {
+						setIsFocused(false), analytics.track('search', { term: term });
+					}}
 					placeholder={
 						isFocused
 							? ''

src/lib/usePlaybackSession.tsx

@@ -174,11 +174,13 @@ export default function usePlaybackSession(
 		// TODO: Maybe only if `isLoaded` is true
 		// Or perhaps throw an exception, since the user should never be presented
 		// with a pause button for a recording that isn't loaded.
+		trackPause();
 		context.pause();
 	}
 
 	function play() {
 		afterLoad((c) => c.play());
+		trackPlay();
 	}
 
 	function setPrefersAudio(prefersAudio: boolean) {