feat(showcase): play one story after another, loop through selection

src/scripts/components/story/story.tsx

@@ -12,6 +12,7 @@ import {State} from '../../reducers';
 import config from '../../config/main';
 import StoryHeader from '../story-header/story-header';
 import {useInterval} from '../../hooks/use-interval';
+import {getStorySlideNavigation} from '../../libs/get-story-slide-navigation';
 import {getStoryNavigation} from '../../libs/get-story-navigation';
 
 import {StoryMode} from '../../types/story-mode';
@@ -44,6 +45,8 @@ const Story: FunctionComponent<Props> = ({mode}) => {
   const {pathname} = useLocation();
   const history = useHistory();
   const storyId = getStoryId(params, mode);
+  const currentStory = parseInt(params.storyNumber || '0', 10);
+  const showcaseMode = mode === StoryMode.Showcase;
   const story = useSelector((state: State) =>
     selectedStorySelector(state, storyId)
   );
@@ -75,25 +78,37 @@ const Story: FunctionComponent<Props> = ({mode}) => {
     [dispatch]
   );
 
-  const navigationData = getStoryNavigation({
+  const navigationData = getStorySlideNavigation({
     pathname,
     pageNumber,
     slides: story?.slides
   });
 
+  const storyPath = getStoryNavigation(
+    pathname,
+    mode,
+    currentStory,
+    params.storyIds
+  );
+
   const showNext = navigationData?.showNext;
   const showPrevious = navigationData?.showPrevious;
   const nextLink = navigationData?.nextLink;
   const previousLink = navigationData?.previousLink;
+  const showNextStory = storyPath?.showNextStory;
+  const nextStoryPath = storyPath?.nextStoryPath;
+  const initialPath = storyPath?.initialPath;
 
   useInterval(() => {
-    if (mode === StoryMode.Showcase) {
+    if (showcaseMode) {
       showNext && history.replace(`${nextLink}`);
+      !showNext && showNextStory && history.replace(`${nextStoryPath}`);
+      !showNextStory && history.replace(`${initialPath}`);
     }
   }, 5000);
 
   // redirect to first slide when current slide does not exist
-  if (story && !slide) {
+  if (story && !slide && !showcaseMode) {
     return <Redirect to={`/${mode}/${storyId}/0`} />;
   }
 

src/scripts/libs/get-story-navigation.ts

@@ -1,32 +1,29 @@
 import {Slide} from '../types/story';
+import {StoryMode} from '../types/story-mode';
 
 interface Params {
   pathname: string;
   pageNumber: number;
   slides?: Slide[];
 }
 
-export const getStoryNavigation = ({pathname, pageNumber, slides}: Params) => {
-  if (!slides) {
-    return null;
-  }
-
-  const nextPageNumber = pageNumber + 1;
-  const previousPageNumber = pageNumber - 1;
-  const showNextButton = nextPageNumber < slides.length;
-  const showPreviousButton = previousPageNumber >= 0;
+export const getStoryNavigation = (
+  pathname: string,
+  mode: StoryMode,
+  currentStory: number,
+  storyIds?: string
+) => {
+  if (mode === StoryMode.Showcase) {
+    if (!storyIds) {
+      return null;
+    }
+    const stories = storyIds.split('&');
+    const nextStoryNumber = currentStory + 1;
+    const showNextStory = currentStory < stories.length;
+    const nextStoryPath = `/showcase/${storyIds}/${nextStoryNumber}/0`;
+    const initialPath = `/showcase/${storyIds}/0/0`;
 
-  const pathParts = pathname.split('/');
-  pathParts.pop();
-  const nextPath = pathParts.concat(nextPageNumber.toString()).join('/');
-  const previousPath = pathParts
-    .concat(previousPageNumber.toString())
-    .join('/');
-
-  return {
-    previousLink: previousPath,
-    showPrevious: showPreviousButton,
-    nextLink: nextPath,
-    showNext: showNextButton
-  };
+    return {nextStoryPath, showNextStory, initialPath};
+  }
+  return null;
 };

src/scripts/libs/get-story-slide-navigation.ts

@@ -0,0 +1,36 @@
+import {Slide} from '../types/story';
+
+interface Params {
+  pathname: string;
+  pageNumber: number;
+  slides?: Slide[];
+}
+
+export const getStorySlideNavigation = ({
+  pathname,
+  pageNumber,
+  slides
+}: Params) => {
+  if (!slides) {
+    return null;
+  }
+
+  const nextPageNumber = pageNumber + 1;
+  const previousPageNumber = pageNumber - 1;
+  const showNextButton = nextPageNumber < slides.length;
+  const showPreviousButton = previousPageNumber >= 0;
+
+  const pathParts = pathname.split('/');
+  pathParts.pop();
+  const nextPath = pathParts.concat(nextPageNumber.toString()).join('/');
+  const previousPath = pathParts
+    .concat(previousPageNumber.toString())
+    .join('/');
+
+  return {
+    previousLink: previousPath,
+    showPrevious: showPreviousButton,
+    nextLink: nextPath,
+    showNext: showNextButton
+  };
+};

storage/stories/story2/story2-de.json

@@ -3,12 +3,14 @@
   "slides": [
     {
       "text": "# Story title\n\n## Das ist ein subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]
     },
     {
       "text": "# Story title\n\n## Das ist ein subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]

storage/stories/story2/story2-en.json

@@ -3,12 +3,14 @@
   "slides": [
     {
       "text": "# Story title\n\n## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]
     },
     {
       "text": "# Story title\n\n## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]

storage/stories/story3/story3-de.json

@@ -3,12 +3,14 @@
   "slides": [
     {
       "text": "# Story title\n\n## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"
       ]
     },
     {
       "text": "# Story title\n\n## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"
       ]

storage/stories/story3/story3-en.json

@@ -3,12 +3,14 @@
   "slides": [
     {
       "text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"
       ]
     },
     {
       "text": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "shortText": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"
       ]