Feat: remember last active segment of audio/video (#681)

* remember last segment index for each audio/video

* fix for video

* auto scroll to cached segment

enjoy/src/renderer/components/audios/audio-player.tsx

@@ -17,20 +17,29 @@ export const AudioPlayer = (props: {
   segmentIndex?: number;
 }) => {
   const { id, md5, segmentIndex } = props;
-  const { setMedia, layout, setCurrentSegmentIndex } = useContext(
-    MediaPlayerProviderContext
-  );
+  const {
+    media,
+    setMedia,
+    layout,
+    setCurrentSegmentIndex,
+    getCachedSegmentIndex,
+  } = useContext(MediaPlayerProviderContext);
   const { audio } = useAudio({ id, md5 });
 
+  const updateCurrentSegmentIndex = async () => {
+    let index = segmentIndex || (await getCachedSegmentIndex());
+    setCurrentSegmentIndex(index);
+  };
+
   useEffect(() => {
     if (!audio) return;
     setMedia(audio);
   }, [audio]);
 
   useEffect(() => {
-    if (!segmentIndex) return;
-    setCurrentSegmentIndex(segmentIndex);
-  }, []);
+    if (!media) return;
+    updateCurrentSegmentIndex();
+  }, [media]);
 
   if (!layout) return <LoaderSpin />;
 

enjoy/src/renderer/components/medias/media-transcription.tsx

@@ -32,6 +32,7 @@ import { MediaTranscriptionReadButton } from "./media-transcription-read-button"
 export const MediaTranscription = () => {
   const containerRef = useRef<HTMLDivElement>();
   const {
+    decoded,
     media,
     currentSegmentIndex,
     wavesurfer,
@@ -83,14 +84,17 @@ export const MediaTranscription = () => {
 
   useEffect(() => {
     if (!containerRef?.current) return;
+    if (!decoded) return;
 
-    containerRef.current
-      ?.querySelector(`#segment-${currentSegmentIndex}`)
-      ?.scrollIntoView({
-        block: "center",
-        inline: "center",
-      } as ScrollIntoViewOptions);
-  }, [currentSegmentIndex, transcription, containerRef]);
+    setTimeout(() => {
+      containerRef.current
+        ?.querySelector(`#segment-${currentSegmentIndex}`)
+        ?.scrollIntoView({
+          block: "center",
+          inline: "center",
+        } as ScrollIntoViewOptions);
+    }, 300);
+  }, [decoded, currentSegmentIndex, transcription, containerRef]);
 
   if (!transcription?.result?.timeline) {
     return null;

enjoy/src/renderer/components/videos/video-player.tsx

@@ -17,11 +17,20 @@ export const VideoPlayer = (props: {
   segmentIndex?: number;
 }) => {
   const { id, md5, segmentIndex } = props;
-  const { setMedia, layout, setCurrentSegmentIndex } = useContext(
-    MediaPlayerProviderContext
-  );
+  const {
+    media,
+    setMedia,
+    layout,
+    setCurrentSegmentIndex,
+    getCachedSegmentIndex,
+  } = useContext(MediaPlayerProviderContext);
   const { video } = useVideo({ id, md5 });
 
+  const updateCurrentSegmentIndex = async () => {
+    let index = segmentIndex || (await getCachedSegmentIndex());
+    setCurrentSegmentIndex(index);
+  };
+
   useEffect(() => {
     if (!video) return;
 
@@ -29,9 +38,9 @@ export const VideoPlayer = (props: {
   }, [video]);
 
   useEffect(() => {
-    if (!segmentIndex) return;
-    setCurrentSegmentIndex(segmentIndex);
-  }, []);
+    if (!media) return;
+    updateCurrentSegmentIndex();
+  }, [media]);
 
   if (!layout) return <LoaderSpin />;