feat(autoplay-gallery): add autoplay to gallery in showcase mode (#656)

* feat(autoplay-gallery): add autoplay to gallery in showcase mode

* refactor(autoplay-gallery): remove ts-ignore

* feat(autoplay-gallery): add delay to configs

src/scripts/components/stories/autoplay/autoplay.tsx

@@ -5,14 +5,15 @@ import {useInterval} from '../../../hooks/use-interval';
 
 interface Props {
   autoPlayLink: string;
+  delay: number;
 }
 
-const Autoplay: FunctionComponent<Props> = ({autoPlayLink}) => {
+const Autoplay: FunctionComponent<Props> = ({autoPlayLink, delay}) => {
   const history = useHistory();
 
   useInterval(() => {
     autoPlayLink && history.replace(autoPlayLink);
-  }, 3000);
+  }, delay);
 
   return null;
 };

src/scripts/components/stories/story-footer/story-footer.tsx

@@ -1,15 +1,15 @@
 import React, {FunctionComponent} from 'react';
+import cx from 'classnames';
 
 import StoryPagination from '../story-pagination/story-pagination';
 import Autoplay from '../autoplay/autoplay';
 import {useStoryNavigation} from '../../../hooks/use-story-navigation';
-import cx from 'classnames';
+import {useMouseMove} from '../../../hooks/use-mouse-move';
 
 import {StoryMode} from '../../../types/story-mode';
 import {Story} from '../../../types/story';
 
 import styles from './story-footer.styl';
-import {useMouseMove} from '../../../hooks/use-mouse-move';
 
 interface Props {
   mode: StoryMode | null;
@@ -24,7 +24,12 @@ const StoryFooter: FunctionComponent<Props> = ({
 }) => {
   const isShowcaseMode = mode === StoryMode.Showcase;
   const isStoriesMode = mode === StoryMode.Stories;
-  const {nextSlideLink, previousSlideLink, autoPlayLink} = useStoryNavigation();
+  const {
+    nextSlideLink,
+    previousSlideLink,
+    autoPlayLink,
+    delay
+  } = useStoryNavigation();
   const mouseMove = useMouseMove();
 
   const footerClasses = cx(
@@ -43,8 +48,8 @@ const StoryFooter: FunctionComponent<Props> = ({
           previousSlideLink={previousSlideLink}
         />
       )}
-      {isShowcaseMode && autoPlayLink && (
-        <Autoplay autoPlayLink={autoPlayLink} />
+      {isShowcaseMode && autoPlayLink && delay && (
+        <Autoplay delay={delay} autoPlayLink={autoPlayLink} />
       )}
     </div>
   );

src/scripts/components/stories/story-media/story-media.tsx

@@ -6,19 +6,25 @@ import {NextIcon} from '../../main/icons/next-icon';
 import {FullscreenExitIcon} from '../../main/icons/fullscreen-exit-icon';
 import {FullscreenIcon} from '../../main/icons/fullscreen-icon';
 import {getStoryMediaUrl} from '../../../libs/get-story-media-url';
+import {useInterval} from '../../../hooks/use-interval';
+import config from '../../../config/main';
+
+import {StoryMode} from '../../../types/story-mode';
 
 import styles from './story-media.styl';
 
 interface Props {
   images: string[];
   imageCaptions?: string[];
   storyId: string;
+  mode: StoryMode | null;
 }
 
 const StoryMedia: FunctionComponent<Props> = ({
   images,
   imageCaptions,
-  storyId
+  storyId,
+  mode
 }) => {
   const containerWidth = images.length * 100;
   const imageWidth = 100 / images.length;
@@ -27,6 +33,17 @@ const StoryMedia: FunctionComponent<Props> = ({
   const showPrevButton = currentIndex > 0;
   const showNextButton = currentIndex < images.length - 1;
 
+  const delay = mode === StoryMode.Showcase ? config.delay : null;
+
+  useInterval(() => {
+    if (mode === StoryMode.Showcase) {
+      if (currentIndex >= images.length - 1) {
+        return;
+      }
+      setCurrentIndex(currentIndex + 1);
+    }
+  }, delay);
+
   const onPrevClick = () => {
     if (currentIndex <= 0) {
       return;

src/scripts/components/stories/story/story.tsx

@@ -65,6 +65,7 @@ const Story: FunctionComponent = () => {
     if (slide.type === SlideType.Image && slide.images) {
       return (
         <StoryMedia
+          mode={mode}
           images={slide.images}
           imageCaptions={slide.imageCaptions}
           storyId={story.id}

src/scripts/config/main.ts

@@ -82,5 +82,6 @@ export default {
   },
   legendImage: `${baseUrlTiles}/{id}/legend.png`,
   downloadUrls,
-  localStorageLanguageKey: 'language'
+  localStorageLanguageKey: 'language',
+  delay: 5000
 };

src/scripts/hooks/use-story-navigation.ts

@@ -1,7 +1,10 @@
 import {useStoryParams} from './use-story-params';
+import config from '../config/main';
 
 import {StoryMode} from '../types/story-mode';
+import {SlideType} from '../types/slide-type';
 
+/* eslint-disable complexity */
 export const useStoryNavigation = () => {
   const {
     mode,
@@ -15,6 +18,7 @@ export const useStoryNavigation = () => {
   let autoPlayLink = null;
   let nextSlideLink = null;
   let previousSlideLink = null;
+  let delay = config.delay;
 
   if (!numberOfSlides) {
     return {autoPlayLink, nextSlideLink, previousSlideLink};
@@ -35,7 +39,13 @@ export const useStoryNavigation = () => {
   if (storyIds && typeof storyIndex === 'number') {
     const showcaseStoryIds = storyIds.join('&');
     const nextStoryIndex = storyIndex + 1;
+    const currentSlide = selectedStory?.slides[slideIndex];
     // go through all slides of one story
+
+    if (currentSlide?.images && currentSlide.type === SlideType.Image) {
+      delay = delay * currentSlide.images.length;
+    }
+
     if (slideIndex + 1 < numberOfSlides) {
       autoPlayLink = `/showcase/${showcaseStoryIds}/${storyIndex}/${nextSlideIndex}`;
       // when no slides are left, go to first slide of next story
@@ -47,5 +57,5 @@ export const useStoryNavigation = () => {
     }
   }
 
-  return {autoPlayLink, nextSlideLink, previousSlideLink};
+  return {autoPlayLink, nextSlideLink, previousSlideLink, delay};
 };