feat(showcase-title): add title slide in showcase mode

src/scripts/components/app/app.tsx

@@ -20,6 +20,7 @@ import StoriesSelector from '../stories-selector/stories-selector';
 import PresentationSelector from '../presentation-selector/presentation-selector';
 import ShowcaseSelector from '../showcase-selector/showcase-selector';
 import Globes from '../globes/globes';
+import StoryTitle from '../story-title/story-title';
 
 import translations from '../../i18n';
 
@@ -40,14 +41,19 @@ const TranslatedApp: FunctionComponent = () => {
   return (
     <Router>
       <IntlProvider locale={language} messages={translations[language]}>
-        <Route
-          path={[
-            '/stories/:storyId/:slideIndex',
-            '/present/:storyId/:slideIndex',
-            '/showcase/:storyIds/:storyIndex/:slideIndex'
-          ]}>
-          <Story />
-        </Route>
+        <Switch>
+          <Route path={['/showcase/:storyIds/:storyIndex/title']}>
+            <StoryTitle />
+          </Route>
+          <Route
+            path={[
+              '/stories/:storyId/:slideIndex',
+              '/present/:storyId/:slideIndex',
+              '/showcase/:storyIds/:storyIndex/:slideIndex'
+            ]}>
+            <Story />
+          </Route>
+        </Switch>
         <Route
           path={['/present/:storyId', '/stories/:storyId']}
           render={props => <Redirect to={`${props.match.url}/0`} />}></Route>
@@ -66,10 +72,10 @@ const TranslatedApp: FunctionComponent = () => {
           <Route path="/stories" exact>
             <StoriesSelector />
           </Route>
-          <Route path="/present">
+          <Route path="/present" exact>
             <PresentationSelector />
           </Route>
-          <Route path={['/showcase/:storyIds', '/showcase']}>
+          <Route path={['/showcase/:storyIds', '/showcase']} exact>
             <ShowcaseSelector />
           </Route>
         </Switch>

src/scripts/components/showcase-selector/showcase-selector.tsx

@@ -40,7 +40,7 @@ const ShowcaseSelector: FunctionComponent = () => {
           <Button
             className={styles.button}
             label={'play'}
-            link={`/showcase/${selectedIds.join('&')}/0/0`}
+            link={`/showcase/${selectedIds.join('&')}/0/title`}
             icon={PlayIcon}
           />
         </div>

src/scripts/components/story-title/story-title.styl

@@ -0,0 +1,21 @@
+@require '../../../variables.styl'
+
+.storyTitle
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  height: 60%
+  font-family: NotesEsa
+
+.title
+  color: $main
+  font-weight: bold
+  font-size: emCalc(36px)
+
+.description
+  margin: 0
+  color: $textDefault
+  font-weight: normal
+  font-size: emCalc(36px)
+  font-family: Arial, Helvetica, sans-serif

src/scripts/components/story-title/story-title.tsx

@@ -0,0 +1,27 @@
+import React, {FunctionComponent} from 'react';
+import {useHistory} from 'react-router-dom';
+
+import {useStoryParams} from '../../hooks/use-story-params';
+import {useInterval} from '../../hooks/use-interval';
+
+import styles from './story-title.styl';
+
+const StoryTitle: FunctionComponent = () => {
+  const {storyIds, storyIndex, storyListItem} = useStoryParams();
+  const history = useHistory();
+  const showcaseStoryIds = storyIds.join('&');
+  const nextLink = `/showcase/${showcaseStoryIds}/${storyIndex}/0`;
+
+  useInterval(() => {
+    history.replace(nextLink);
+  }, 3000);
+
+  return (
+    <div className={styles.storyTitle}>
+      <h1 className={styles.title}>{storyListItem?.title}</h1>
+      <h2 className={styles.description}>{storyListItem?.description}</h2>
+    </div>
+  );
+};
+
+export default StoryTitle;

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

@@ -40,11 +40,12 @@ export const useStoryNavigation = () => {
       autoPlayLink = `/showcase/${showcaseStoryIds}/${storyIndex}/${nextSlideIndex}`;
       // when no slides are left, go to first slide of next story
     } else if (nextStoryIndex < storyIds.length) {
-      autoPlayLink = `/showcase/${showcaseStoryIds}/${nextStoryIndex}/0`;
+      autoPlayLink = `/showcase/${showcaseStoryIds}/${nextStoryIndex}/title`;
       // after the last story, return to the beginning
     } else {
-      autoPlayLink = `/showcase/${showcaseStoryIds}/0/0`;
+      autoPlayLink = `/showcase/${showcaseStoryIds}/0/title`;
     }
   }
+
   return {autoPlayLink, nextSlideLink, previousSlideLink};
 };