feat(client): apply fragments

Author: hiroppy

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

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useEffect } from 'react';
 import { useSlides, updateCurrentIndex } from '../../context/slides';
 import { SlideCore } from '../SlideCore';
 
@@ -7,7 +7,6 @@ export const Base = memo(() => {
     state: { currentIndex },
     dispatch,
   } = useSlides();
-  const currentIndexRef = useRef(currentIndex);
 
   useEffect(() => {
     // TODO: swiper should be gone to context
@@ -26,8 +25,10 @@ export const Base = memo(() => {
   useEffect(() => {
     if (window.innerWidth <= 768) {
       (async () => {
-        // const { swipeEvent } = await import('../../utils/swipeEvent');
-        // swipeEvent();
+        const { swipeEvent } = await import('../../utils/swipeEvent');
+        swipeEvent((operation) => {
+          dispatch(updateCurrentIndex(operation));
+        });
       })();
     }
 
@@ -38,9 +39,5 @@ export const Base = memo(() => {
     };
   }, []);
 
-  useEffect(() => {
-    currentIndexRef.current = currentIndex;
-  }, [currentIndex]);
-
   return <SlideCore />;
 });

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

@@ -1,4 +1,4 @@
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState, useEffect, useRef } from 'react';
 import Modal from 'react-modal';
 import {
   FaTimes,
@@ -10,8 +10,8 @@ import {
   FaMicrophoneAltSlash,
 } from 'react-icons/fa';
 import { MdZoomOutMap } from 'react-icons/md';
-import { useSlides, setMode } from '../../context/slides';
-import { PresenterProvider, usePresenter, updateCurrentIndex } from '../../context/presenter';
+import { useSlides, setMode, updateCurrentIndex, resetState } from '../../context/slides';
+import { PresenterProvider, usePresenter } from '../../context/presenter';
 import { Controller as PresentationController } from '../../presentationMode/Controller'; // common and host
 import { Canvas, emitCanvasEvent } from '../Canvas';
 import { Timer } from '../Timer';
@@ -33,20 +33,17 @@ const Iframe = ({ slideUrl, slideIndex }) => (
 let webrtc = null;
 let slideUrl = null;
 let presentationController = null;
-// let presentationApiId = null;
 let recordedTimeline = [];
 let recordedStartedTime = 0;
 let audioUrl = null;
 
 const Host = () => {
   const {
-    state: { slides },
+    state: { slides, currentIndex },
     dispatch: dispatchSlides,
   } = useSlides();
-  const {
-    state: { currentIndex },
-    dispatch: dispatchPresenter,
-  } = usePresenter();
+  const { dispatch: dispatchPresenter } = usePresenter();
+  const currentIndexRef = useRef(currentIndex);
 
   if (!presentationController) {
     const { origin, pathname } = new URL(window.location);
@@ -182,6 +179,8 @@ const Host = () => {
   };
 
   useEffect(() => {
+    dispatchSlides(resetState());
+
     (async () => {
       try {
         if (!presentationController) {
@@ -194,17 +193,15 @@ const Host = () => {
     })();
 
     const keyboardListener = ({ key }) => {
-      const slideLength = slides.length;
-
       if (key === 'ArrowLeft') {
-        dispatchPresenter(updateCurrentIndex({ index: '-', slideLength }));
+        dispatchSlides(updateCurrentIndex('-'));
+        presentationController.changePage('-');
       } else if (key === 'ArrowRight') {
-        dispatchPresenter(updateCurrentIndex({ index: '+', slideLength }));
-
-        // TODO: fix here
-        // presentationController.changePage(3);
+        dispatchSlides(updateCurrentIndex('+'));
+        presentationController.changePage('+');
       }
     };
+
     document.addEventListener('keydown', keyboardListener, false);
 
     return () => {
@@ -218,6 +215,11 @@ const Host = () => {
     };
   }, []);
 
+  useEffect(() => {
+    currentIndexRef.current = currentIndex;
+    presentationController.changePage(currentIndex);
+  }, [currentIndex]);
+
   // prohibit below actions
   //   usedAudio && status === 'start'
   //     modal, reset

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

@@ -26,8 +26,8 @@ const View = memo(() => {
     window.onload = () => {
       presentationReceiver = new PresentationReceiver();
 
-      presentationReceiver.onChangePage((pageNum) => {
-        dispatch(updateCurrentIndex(pageNum));
+      presentationReceiver.onChangePage((operation) => {
+        dispatch(updateCurrentIndex(operation));
         // stop capturing
         if (webrtc && currentVideoTag) {
           stopCapturing(currentVideoTag);

packages/client/src/components/SlideCore.js

@@ -58,6 +58,8 @@ export const SlideCore = () => {
   }
 
   useEffect(() => {
+    Prism.highlightAll();
+
     if (slides.some(({ fusumaProps }) => !!fusumaProps.hasExecutableCode)) {
       createVMEnv();
     }

packages/client/src/context/presenter.js

@@ -9,25 +9,11 @@ const PresenterContext = createContext(initialState);
 
 const reducer = (state, action) => {
   switch (action.type) {
-    case 'UPDATE_CURRENT_INDEX':
-      return {
-        ...state,
-        currentIndex: getSlideIndex(
-          action.payload.index,
-          action.payload.slideLength - 1,
-          state.currentIndex
-        ),
-      };
     default:
       return state;
   }
 };
 
-export const updateCurrentIndex = (payload) => ({
-  type: 'UPDATE_CURRENT_INDEX',
-  payload,
-});
-
 export const usePresenter = () => useContext(PresenterContext);
 
 export const PresenterProvider = ({ children }) => {

packages/client/src/context/slides.js

@@ -28,6 +28,12 @@ const reducer = (state, action) => {
           ...state,
         }),
       };
+    case 'RESET_STATE':
+      return {
+        ...state,
+        currentIndex: 0,
+        currentFragmentSteps: 0,
+      };
     case 'UPDATE_CURRENT_FRAGMENT_STEPS':
       return {
         ...state,
@@ -59,6 +65,10 @@ export const updateCurrentFragmentSteps = (payload) => ({
   payload,
 });
 
+export const resetState = () => ({
+  type: 'RESET_STATE',
+});
+
 export const useSlides = () => useContext(SlidesContext);
 
 export const SlidesProvider = ({ children }) => {

packages/client/src/utils/getSlideIndex.js

@@ -1,6 +1,6 @@
 export function getSlideIndex({ next, slides, currentIndex, timeline, currentFragmentSteps }) {
   let nextIndex = next;
-  let nextCurrentFragmentSteps;
+  let nextCurrentFragmentSteps = 0;
 
   if (next === '+') {
     nextIndex = Math.min(currentIndex + 1, slides.length - 1);

packages/client/src/utils/swipeEvent.js

@@ -1,6 +1,6 @@
 // https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
 
-export function swipeEvent(goTo) {
+export function swipeEvent(cb) {
   let xDown = null;
   let yDown = null;
 
@@ -28,10 +28,10 @@ export function swipeEvent(goTo) {
       if (Math.abs(xDiff) > Math.abs(yDiff)) {
         if (xDiff > 0) {
           // right
-          goTo('+');
+          cb('+');
         } else {
           // left
-          goTo('-');
+          cb('-');
         }
       }
       xDown = null;