fix audio hiccups

quran · Sep 1, 2024 · 24c38e5 · 24c38e5
1 parent 3d001cc
commit 24c38e5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/components/MediaMaker/Content/index.tsx b/src/components/MediaMaker/Content/index.tsx
@@ -87,7 +87,13 @@ const MediaMakerContent: React.FC<Props> = ({
         <Video loop src={videoPath} />
       </div>
       {audioHasStartAndEndRanges && (
-        <Audio pauseWhenBuffering startFrom={startFrom} endAt={endAt} src={audio.audioUrl} />
+        <Audio
+          pauseWhenBuffering
+          startFrom={startFrom}
+          endAt={endAt}
+          src={audio.audioUrl}
+          acceptableTimeShiftInSeconds={1}
+        />
       )}
       {verses &&
         verses.length > 0 &&

diff --git a/src/pages/media/index.tsx b/src/pages/media/index.tsx
@@ -15,6 +15,7 @@ import {
   getChapterAudioData,
   getChapterVerses,
 } from '@/api';
+import PlayerContent from '@/components/MediaMaker/Content';
 import styles from '@/components/MediaMaker/MediaMaker.module.scss';
 import VideoSettings from '@/components/MediaMaker/Settings/VideoSettings';
 import NextSeoWrapper from '@/components/NextSeoWrapper';
@@ -88,10 +89,6 @@ const MediaMaker: NextPage<MediaMaker> = ({
 
   const playerRef = useRef<PlayerRef>(null);
 
-  const lazyComponent = useCallback(() => {
-    return import('@/components/MediaMaker/Content');
-  }, []);
-
   useEffect(() => {
     setIsReady(true);
   }, []);
@@ -395,7 +392,7 @@ const MediaMaker: NextPage<MediaMaker> = ({
                 [styles.playerHeight]: !isSafari(),
               })}
               inputProps={inputProps}
-              lazyComponent={lazyComponent}
+              component={PlayerContent}
               durationInFrames={getDurationInFrames(timestamps)}
               compositionWidth={width}
               compositionHeight={height}