Presenter mode should show the next animation rather than the next slide

fixes FormidableLabs#914

src/components/deck/presenter-deck.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DeckContext } from '../../hooks/use-deck';
+import { SlideNextElementContext } from '../../hooks/use-slide';
 import styled, { css } from 'styled-components';
 import { Text } from '../typography';
 import { FlexBox, Box } from '../layout';
@@ -82,6 +83,7 @@ const NotesContainer = styled('div')`
 
 const PresenterDeck = props => {
   const {
+    slideElementMap,
     state: {
       currentNotes,
       currentSlide,
@@ -99,6 +101,11 @@ const PresenterDeck = props => {
     children
   } = props;
 
+  const countSlideElements = React.useCallback(
+    slideNumber => slideElementMap[slideNumber],
+    [slideElementMap]
+  );
+
   const onStartConnection = React.useCallback(() => {
     const urlParams = queryString.stringify({
       slide: currentSlide,
@@ -110,9 +117,15 @@ const PresenterDeck = props => {
 
   const activeSlide =
     children.length > currentSlide ? children[currentSlide] : null;
-  const nextSlide =
-    children.length > currentSlide + 1 ? children[currentSlide + 1] : null;
-
+  // Show next animation in the preview slide if there are animations left on the current slide
+  const showNextElement =
+    currentSlideElement + 1 < countSlideElements(currentSlide);
+  // If there are no animations left on the current slide, then show the next slide in the preview
+  const nextSlide = showNextElement
+    ? activeSlide
+    : children.length > currentSlide + 1
+    ? children[currentSlide + 1]
+    : null;
   const castButton = React.useMemo(() => {
     if (isReceiver || typeof window.navigator.presentation === 'undefined') {
       return null;
@@ -197,9 +210,11 @@ const PresenterDeck = props => {
                 Slide {nextSlide.props.slideNum + 1} of {numberOfSlides}
               </SlideCountLabel>
             </Text>
-            <SlideWrapper small data-testid="Next Slide">
-              {nextSlide}
-            </SlideWrapper>
+            <SlideNextElementContext.Provider value={{ showNextElement }}>
+              <SlideWrapper small data-testid="Next Slide">
+                {nextSlide}
+              </SlideWrapper>
+            </SlideNextElementContext.Provider>
           </SlideContainer>
         )}
       </PreviewColumn>

src/components/deck/presenter-deck.test.js

@@ -25,6 +25,9 @@ const children = [
 describe('PresenterDeck', () => {
   beforeEach(() => {
     mockedUseContext.mockReturnValue({
+      slideElementMap: {
+        0: 0
+      },
       state: {
         currentNotes: '',
         currentSlide: 0,
@@ -61,6 +64,9 @@ describe('PresenterDeck', () => {
       terminateConnection: jest.fn()
     };
     mockedUseContext.mockReturnValue({
+      slideElementMap: {
+        0: 0
+      },
       state: {
         currentNotes: '',
         currentSlide: 2,

src/components/slide.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import useSlide, { SlideContext } from '../hooks/use-slide';
+import useSlide, {
+  SlideContext,
+  SlideNextElementContext
+} from '../hooks/use-slide';
 import styled, { ThemeContext, css } from 'styled-components';
 import { background, color, space } from 'styled-system';
 import useAutofillHeight from '../hooks/use-autofill-height';
@@ -89,6 +92,7 @@ const Slide = props => {
   } = props;
   const theme = React.useContext(ThemeContext);
   const { state } = React.useContext(DeckContext);
+  const { showNextElement } = React.useContext(SlideNextElementContext) || {};
   const [ratio, setRatio] = React.useState(scaleRatio || 1);
   const [origin, setOrigin] = React.useState({ x: 0, y: 0 });
   const slideRef = React.useRef(null);
@@ -168,11 +172,22 @@ const Slide = props => {
     [state.exportMode, origin, ratio]
   );
 
-  const value = useSlide(slideNum);
+  let value = useSlide(slideNum);
   const { numberOfSlides } = value.state;
 
   useAutofillHeight({ slideWrapperRef, templateRef, contentRef, slideHeight });
 
+  if (showNextElement) {
+    // Next slide preview in the presenter mode might need to show the next animation
+    value = {
+      ...value,
+      state: {
+        ...value.state,
+        currentSlideElement: value.state.currentSlideElement + 1
+      }
+    };
+  }
+
   return (
     <SlideContainer
       ref={slideRef}

src/hooks/use-slide.js

@@ -15,6 +15,7 @@ import { DEFAULT_SLIDE_ELEMENT_INDEX } from '../utils/constants';
 
 // Initialise SlideContext.
 export const SlideContext = React.createContext();
+export const SlideNextElementContext = React.createContext();
 
 function useSlide(slideNum) {
   // Gets state, dispatch and number of slides off DeckContext.