From ff9a43c4217b854038b4ac91232f39ac8b23c4bf Mon Sep 17 00:00:00 2001 From: Katherina Marcenko Date: Tue, 26 Nov 2019 18:31:05 +0100 Subject: [PATCH] feat(showcase): play one story after another, loop through selection --- src/scripts/components/story/story.tsx | 21 ++++++++-- src/scripts/libs/get-story-navigation.ts | 41 +++++++++---------- .../libs/get-story-slide-navigation.ts | 36 ++++++++++++++++ storage/stories/story2/story2-de.json | 2 + storage/stories/story2/story2-en.json | 2 + storage/stories/story3/story3-de.json | 2 + storage/stories/story3/story3-en.json | 2 + 7 files changed, 81 insertions(+), 25 deletions(-) create mode 100644 src/scripts/libs/get-story-slide-navigation.ts diff --git a/src/scripts/components/story/story.tsx b/src/scripts/components/story/story.tsx index 9fda97e11..c372ccc7d 100644 --- a/src/scripts/components/story/story.tsx +++ b/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 = ({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 = ({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 ; } diff --git a/src/scripts/libs/get-story-navigation.ts b/src/scripts/libs/get-story-navigation.ts index 704a8470c..39ed9b8bf 100644 --- a/src/scripts/libs/get-story-navigation.ts +++ b/src/scripts/libs/get-story-navigation.ts @@ -1,4 +1,5 @@ import {Slide} from '../types/story'; +import {StoryMode} from '../types/story-mode'; interface Params { pathname: string; @@ -6,27 +7,23 @@ interface Params { 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; }; diff --git a/src/scripts/libs/get-story-slide-navigation.ts b/src/scripts/libs/get-story-slide-navigation.ts new file mode 100644 index 000000000..047cf9556 --- /dev/null +++ b/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 + }; +}; diff --git a/storage/stories/story2/story2-de.json b/storage/stories/story2/story2-de.json index f4f9ba2da..7aedf8a45 100644 --- a/storage/stories/story2/story2-de.json +++ b/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" ] diff --git a/storage/stories/story2/story2-en.json b/storage/stories/story2/story2-en.json index 55404cc1d..5619c9edf 100644 --- a/storage/stories/story2/story2-en.json +++ b/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" ] diff --git a/storage/stories/story3/story3-de.json b/storage/stories/story3/story3-de.json index a734bcef8..4ea043ea6 100644 --- a/storage/stories/story3/story3-de.json +++ b/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" ] diff --git a/storage/stories/story3/story3-en.json b/storage/stories/story3/story3-en.json index 04952ee35..592ab0ed1 100644 --- a/storage/stories/story3/story3-en.json +++ b/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" ]