fix autoplay

audioverse-org · Dec 25, 2024 · 1599de9 · 1599de9
1 parent ed2e7dc
commit 1599de9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 16 deletions.
diff --git a/src/components/organisms/passageNavigation/chapterGrid.tsx b/src/components/organisms/passageNavigation/chapterGrid.tsx
@@ -25,7 +25,7 @@ export default function ChapterGrid({ chapters, chapterId }: Props) {
 						<li key={n} className={styles.chapter}>
 							<Link
 								className={chapter.id === chapterId ? styles.active : ''}
-								href={chapter.canonicalPath}
+								href={`${chapter.canonicalPath}?autoplay`}
 							>
 								{n}
 							</Link>

diff --git a/src/components/organisms/passageNavigation/index.tsx b/src/components/organisms/passageNavigation/index.tsx
@@ -10,8 +10,6 @@ import { GetAudiobibleIndexDataQuery } from '~src/containers/bible/__generated__
 import { BIBLE_BOOKS } from '~src/lib/constants';
 import { getBibleAcronym } from '~src/lib/getBibleAcronym';
 import { useLocalStorage } from '~src/lib/hooks/useLocalStorage';
-import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
-import isServerSide from '~src/lib/isServerSide';
 
 import BookGrid from './bookGrid';
 import BookList from './bookList';
@@ -62,13 +60,6 @@ export default function PassageNavigation({
 		chapter?.id || null,
 	);
 
-	const session = usePlaybackSession(chapter ?? null);
-
-	useEffect(() => {
-		if (isServerSide() || !chapter) return;
-		session.play();
-	}, []); // eslint-disable-line react-hooks/exhaustive-deps
-
 	useEffect(() => {
 		if (chapter) {
 			setSelectedChapterId(chapter.id);

diff --git a/src/components/organisms/recording.tsx b/src/components/organisms/recording.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import startCase from 'lodash/startCase';
 import Head from 'next/head';
+import { useSearchParams } from 'next/navigation';
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
@@ -36,6 +37,8 @@ import {
 } from '~src/__generated__/graphql';
 import { BibleIndexProps } from '~src/containers/bible';
 import useLanguageRoute from '~src/lib/hooks/useLanguageRoute';
+import usePlaybackSession from '~src/lib/hooks/usePlaybackSession';
+import isServerSide from '~src/lib/isServerSide';
 
 import { analytics } from '../../lib/analytics';
 import PlaylistTypeLockup from '../molecules/playlistTypeLockup';
@@ -53,13 +56,27 @@ interface RecordingProps {
 	};
 }
 
-export function Recording(
-	params: (RecordingProps & BibleIndexProps) | RecordingProps,
-): JSX.Element {
+export function Recording({
+	recording,
+	overrideSequence,
+	...props
+}: (RecordingProps & BibleIndexProps) | RecordingProps): JSX.Element {
 	const intl = useIntl();
-	const { recording, overrideSequence } = params;
 	const { id, imageWithFallback, contentType, sponsor, speakers, writers } =
 		recording;
+	const session = usePlaybackSession(recording ?? null);
+	const params = useSearchParams();
+
+	useEffect(() => {
+		console.log({
+			isServerSide: isServerSide(),
+			hasAutoplay: params.has('autoplay'),
+		});
+		if (isServerSide() || !params.has('autoplay')) return;
+		console.log('autoplay');
+		session.play();
+	}, [recording]); // eslint-disable-line react-hooks/exhaustive-deps
+
 	return (
 		<Tease className={clsx(styles.base, styles[contentType])}>
 			<Head>
@@ -124,8 +141,8 @@ export function Recording(
 				<meta property="og:image" content={imageWithFallback.url} />
 			</Head>
 
-			{'data' in params ? (
-				<PassageNavigation versions={params.data} chapter={recording}>
+			{'data' in props ? (
+				<PassageNavigation versions={props.data} chapter={recording}>
 					<RecordingInner
 						recording={recording}
 						overrideSequence={overrideSequence}