fix(client): modify fragment

Author: hiroppy

packages/client/src/components/ContentView/Base.js

@@ -14,15 +14,15 @@ export const Base = memo(() => {
     swiper?.slideTo(currentIndex);
   }, [currentIndex]);
 
-  const keyboardListener = ({ key }) => {
-    if (key === 'ArrowRight') {
-      dispatch(updateCurrentIndex('+'));
-    } else if (key === 'ArrowLeft') {
-      dispatch(updateCurrentIndex('-'));
-    }
-  };
-
   useEffect(() => {
+    const keyboardListener = ({ key }) => {
+      if (key === 'ArrowRight') {
+        dispatch(updateCurrentIndex('+'));
+      } else if (key === 'ArrowLeft') {
+        dispatch(updateCurrentIndex('-'));
+      }
+    };
+
     if (window.innerWidth <= 768) {
       (async () => {
         const { swipeEvent } = await import('../../utils/swipeEvent');

packages/client/src/components/ContentView/Host.js

@@ -18,7 +18,7 @@ import { formatTime } from '../../utils/formatTime';
 import { WebRTC } from '../../utils/webrtc';
 import '../../../assets/style/host.css';
 
-const Iframe = ({ slideUrl, slideIndex }) => (
+const Iframe = ({ slideUrl, slideIndex, fragment }) => (
   <iframe
     src={`${slideUrl.replace(/slide-(\d?)/, `slide-${slideIndex}`)}`}
     width="100%"
@@ -31,7 +31,7 @@ let recordedStartedTime = 0;
 
 const Host = () => {
   const {
-    state: { slides, currentIndex },
+    state: { slides, currentIndex, currentFragmentSteps },
     dispatch: dispatchSlides,
   } = useSlides();
   const [slideUrl, setSlideUrl] = useState(null);
@@ -112,10 +112,6 @@ const Host = () => {
     setEmptyRecordedTimelineStatus(true);
   };
 
-  useEffect(() => {
-    webrtc?.setupRecording();
-  }, [webrtc]);
-
   const setupRecording = () => {
     if (!webrtc) {
       setWebrtc(new WebRTC());
@@ -131,6 +127,10 @@ const Host = () => {
     setUsedAudio(false);
   };
 
+  useEffect(() => {
+    webrtc?.setupRecording();
+  }, [webrtc]);
+
   useEffect(() => {
     presentationControllerRef.current = presentationController;
 
@@ -224,11 +224,23 @@ const Host = () => {
       <div className="host-right-box">
         <div className="host-slide-layer">
           <h2>Current</h2>
-          {slideUrl && <Iframe slideUrl={slideUrl} slideIndex={currentIndex + 1} />}
+          {slideUrl && (
+            <Iframe
+              slideUrl={slideUrl}
+              slideIndex={currentIndex + 1}
+              fragment={currentFragmentSteps}
+            />
+          )}
         </div>
         <div className="host-slide-layer">
           <h2>Next</h2>
-          {slideUrl && <Iframe slideUrl={slideUrl} slideIndex={currentIndex + 2} />}
+          {slideUrl && (
+            <Iframe
+              slideUrl={slideUrl}
+              slideIndex={currentIndex + 2}
+              fragment={currentFragmentSteps}
+            />
+          )}
         </div>
       </div>
       <div className="host-bottom-box">

packages/client/src/utils/getSlideIndex.js

@@ -7,17 +7,21 @@ export function getSlideIndex({ next, slides, currentIndex, timeline, currentFra
 
     if (Array.isArray(timeline[nextIndex])) {
       nextCurrentFragmentSteps = 0;
-    } else {
+    } else if (Array.isArray(timeline[currentIndex])) {
       nextCurrentFragmentSteps = currentFragmentSteps + 1;
+    } else {
+      nextCurrentFragmentSteps = 0;
     }
   } else if (next === '-') {
     nextIndex = Math.max(currentIndex - 1, 0);
 
     // restore fragments
     if (Array.isArray(timeline[nextIndex])) {
       nextCurrentFragmentSteps = timeline[nextIndex].length;
-    } else {
+    } else if (Array.isArray(timeline[currentIndex])) {
       nextCurrentFragmentSteps = currentFragmentSteps - 1;
+    } else {
+      nextCurrentFragmentSteps = 0;
     }
   }