fix(client): modify presenter mode

Author: hiroppy

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

@@ -26,7 +26,7 @@ Modal.setAppElement('#root');
 
 const Iframe = ({ slideUrl, slideIndex }) => (
   <iframe
-    src={`${slideUrl.replace(/slide=(\d?)/, `slide=${slideIndex}`)}`}
+    src={`${slideUrl.replace(/slide-(\d?)/, `slide-${slideIndex}`)}`}
     width="100%"
     height="100%"
   />
@@ -44,7 +44,7 @@ const Host = memo(({ slides, currentIndex, terminate, onChangeSlideIndex }) => {
   if (!presentationController) {
     const { origin, pathname } = new URL(window.location);
 
-    slideUrl = `${origin}${pathname}?sidebar=false&isLive=false#slide=`;
+    slideUrl = `${origin}${pathname}?sidebar=false&reference=false&isLive=false#slide-`;
     presentationController = new PresentationController();
   }
 

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

@@ -9,6 +9,7 @@ import { Receiver as PresentationReceiver } from '../../presentationMode/Receive
 import { WebRTC } from '../../utils/webrtc';
 import '../../../assets/style/view.css';
 
+const slideWrapperClassName = '.swiper-container';
 let presentationReceiver = null;
 let webrtc = null;
 let currentVideoTag = null;
@@ -17,17 +18,18 @@ let currentLayer = null;
 const View = memo(({ slides, hash }) => {
   // need to declare here
   if (!presentationReceiver) {
-    presentationReceiver = new PresentationReceiver();
-    presentationReceiver.onChangePage((pageNum) => {
-      if (window.slide) {
-        window.slide.goToSlide(pageNum);
+    window.onload = () => {
+      const tag = document.querySelector(slideWrapperClassName);
+      presentationReceiver = new PresentationReceiver();
 
+      presentationReceiver.onChangePage((pageNum) => {
+        tag?.swiper?.slideTo(pageNum);
         // stop capturing
         if (webrtc && currentVideoTag) {
           stopCapturing(currentVideoTag);
         }
-      }
-    });
+      });
+    };
   }
 
   // const [usedCanvas, changeCanvasState] = useState(false);

packages/client/src/entryPoints/Client.js

@@ -3,6 +3,7 @@ import { render, hydrate } from 'react-dom';
 import { fetchSlides } from '../utils/fetchSlides';
 import { setTargetBlank } from '../utils/targetBlank';
 import { AppContainer } from '../components/AppContainer';
+import { getSearchParams } from '../utils/getSearchParams';
 import '../setup/css';
 
 function createBody(slides = [], hash = 0) {
@@ -25,18 +26,22 @@ if (process.env.TARGET_BLANK) {
 }
 
 if (process.env.NODE_ENV !== 'production') {
-  (async () => {
-    // for tree shaking
-    const { Assistant } = await import('../components/Assistant');
-    const el = document.createElement('div');
-
-    el.style.position = 'absolute';
-    el.style.top = 0;
-    el.style.width = '100%';
-    el.style.zIndex = 10000;
-    el.setAttribute('id', 'reference');
-    document.body.appendChild(el);
-
-    render(<Assistant />, document.getElementById('reference'));
-  })();
+  const params = getSearchParams();
+
+  if (params.get('reference') !== 'false') {
+    (async () => {
+      // for tree shaking
+      const { Assistant } = await import('../components/Assistant');
+      const el = document.createElement('div');
+
+      el.style.position = 'absolute';
+      el.style.top = 0;
+      el.style.width = '100%';
+      el.style.zIndex = 10000;
+      el.setAttribute('id', 'reference');
+      document.body.appendChild(el);
+
+      render(<Assistant />, document.getElementById('reference'));
+    })();
+  }
 }

packages/client/src/index.js

@@ -0,0 +1 @@
+export * from './components/SlideCore';