feat(presenter-mode): add larger tiles

ubilabs · Nov 18, 2019 · be6ed4a · be6ed4a
1 parent 732dcc4
commit be6ed4a
Show file tree

Hide file tree

Showing 12 changed files with 108 additions and 57 deletions.
diff --git a/src/scripts/components/app/app.tsx b/src/scripts/components/app/app.tsx
@@ -23,6 +23,9 @@ import TimeSlider from '../time-slider/time-slider';
 import Init from '../init/init';
 
 import translations from '../../i18n';
+
+import {StoryMode} from '../../types/story-mode';
+
 import styles from './app.styl';
 
 const store = createStore(
@@ -57,11 +60,11 @@ const TranslatedApp: FunctionComponent = () => {
                 <LayerLoader />
               </Route>
 
-              <Route path="/present">
+              <Route path="/present" exact>
                 <PresentationSelector />
               </Route>
 
-              <Route path="/showcase">
+              <Route path="/showcase" exact>
                 <ShowcaseSelector />
               </Route>
 
@@ -70,7 +73,11 @@ const TranslatedApp: FunctionComponent = () => {
               </Route>
 
               <Route
-                path="/stories/:storyId"
+                path={[
+                  '/present/:storyId',
+                  '/showcase/:storyId',
+                  '/stories/:storyId'
+                ]}
                 render={props => (
                   <Redirect to={`${props.match.url}/0`} />
                 )}></Route>
@@ -79,8 +86,14 @@ const TranslatedApp: FunctionComponent = () => {
           </div>
           <div className={styles.story}>
             <Globes />
-            <Route path="/stories/:storyId/:page">
-              <Story />
+            <Route path={'/stories/:storyId/:page'}>
+              <Story mode={StoryMode.Stories} />
+            </Route>
+            <Route path={'/present/:storyId/:page'}>
+              <Story mode={StoryMode.Present} />
+            </Route>
+            <Route path={'/showcase/:storyId/:page'}>
+              <Story mode={StoryMode.Showcase} />
             </Route>
           </div>
         </div>

diff --git a/src/scripts/components/presentation-selector/presentation-selector.tsx b/src/scripts/components/presentation-selector/presentation-selector.tsx
@@ -4,6 +4,8 @@ import {FormattedMessage} from 'react-intl';
 
 import StoryList from '../story-list/story-list';
 
+import {StoryMode} from '../../types/story-mode';
+
 import styles from './presentation-selector.styl';
 
 const PresentationSelector: FunctionComponent = () => {
@@ -15,7 +17,7 @@ const PresentationSelector: FunctionComponent = () => {
       <h1 className={styles.title}>
         <FormattedMessage id="presenter-mode" />
       </h1>
-      <StoryList />
+      <StoryList mode={StoryMode.Present} />
     </div>
   );
 };

diff --git a/src/scripts/components/showcase-selector/showcase-selector.tsx b/src/scripts/components/showcase-selector/showcase-selector.tsx
@@ -4,6 +4,8 @@ import {FormattedMessage} from 'react-intl';
 
 import StoryList from '../story-list/story-list';
 
+import {StoryMode} from '../../types/story-mode';
+
 import styles from './showcase-selector.styl';
 
 const ShowcaseSelector: FunctionComponent = () => (
@@ -14,7 +16,7 @@ const ShowcaseSelector: FunctionComponent = () => (
     <h1 className={styles.title}>
       <FormattedMessage id="showcase-mode" />
     </h1>
-    <StoryList />
+    <StoryList mode={StoryMode.Showcase} />
   </div>
 );
 

diff --git a/src/scripts/components/slide/slide.styl b/src/scripts/components/slide/slide.styl
@@ -4,6 +4,9 @@
   height: calc(100% - 40px)
   background-color: #fff
 
+.presentSlide
+  font-size: 1.5em
+
 .content
   display: flex
   flex-grow: 1

diff --git a/src/scripts/components/slide/slide.tsx b/src/scripts/components/slide/slide.tsx
@@ -3,41 +3,49 @@ import ReactMarkdown from 'react-markdown';
 
 import StoryGallery from '../story-gallery/story-gallery';
 import StoryVideo from '../story-video/story-video';
+import cx from 'classnames';
 
 import {Slide as SlideType} from '../../types/story';
 
 import styles from './slide.styl';
 
 interface Props {
+  mode: string;
   slide: SlideType;
 }
 
-const Slide: FunctionComponent<Props> = ({slide}) => (
-  <div className={styles.slide}>
-    {(slide.images && (
-      <StoryGallery
-        images={slide.images}
-        fullscreenGallery={slide.fullscreenGallery}
-      />
-    )) ||
-      (slide.videoId && <StoryVideo videoId={slide.videoId} />)}
-    <div className={styles.content}>
-      <h1 className={styles.title}>{slide.title}</h1>
-      <ReactMarkdown
-        source={slide.bodytext}
-        allowedTypes={[
-          'heading',
-          'text',
-          'paragraph',
-          'break',
-          'strong',
-          'emphasis',
-          'list',
-          'listItem'
-        ]}
-      />
+const Slide: FunctionComponent<Props> = ({mode, slide}) => {
+  const slideClasses = cx(
+    styles.slide,
+    mode === 'present' && styles.presentSlide
+  );
+  return (
+    <div className={slideClasses}>
+      {(slide.images && (
+        <StoryGallery
+          images={slide.images}
+          fullscreenGallery={slide.fullscreenGallery}
+        />
+      )) ||
+        (slide.videoId && <StoryVideo videoId={slide.videoId} />)}
+      {}
+      <div className={styles.content}>
+        <ReactMarkdown
+          source={slide.bodytext}
+          allowedTypes={[
+            'heading',
+            'text',
+            'paragraph',
+            'break',
+            'strong',
+            'emphasis',
+            'list',
+            'listItem'
+          ]}
+        />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Slide;
diff --git a/src/scripts/components/stories-selector/stories-selector.tsx b/src/scripts/components/stories-selector/stories-selector.tsx
@@ -4,6 +4,8 @@ import {FormattedMessage} from 'react-intl';
 
 import StoryList from '../story-list/story-list';
 
+import {StoryMode} from '../../types/story-mode';
+
 import styles from './stories-selector.styl';
 
 const StoriesSelector: FunctionComponent = () => (
@@ -14,7 +16,7 @@ const StoriesSelector: FunctionComponent = () => (
     <h1 className={styles.title}>
       <FormattedMessage id="storymode" />
     </h1>
-    <StoryList />
+    <StoryList mode={StoryMode.Stories} />
   </div>
 );
 

diff --git a/src/scripts/components/story-list-item/story-list-item.tsx b/src/scripts/components/story-list-item/story-list-item.tsx
@@ -8,17 +8,14 @@ import styles from './story-list-item.styl';
 
 interface Props {
   story: StoryListItemType;
-  pathname: string;
+  mode: string;
 }
 
-const StoryListItem: FunctionComponent<Props> = ({story, pathname}) => {
-  const classes = cx(
-    styles.storyItem,
-    pathname === '/present' && styles.present
-  );
+const StoryListItem: FunctionComponent<Props> = ({story, mode}) => {
+  const classes = cx(styles.storyItem, mode === 'present' && styles.present);
 
   return (
-    <Link to={`/stories/${story.id}`}>
+    <Link to={`/${mode}/${story.id}`}>
       <div className={classes}>
         <img src={story.image} className={styles.image} />
         <p className={styles.title}>{story.title}</p>

diff --git a/src/scripts/components/story-list/story-list.tsx b/src/scripts/components/story-list/story-list.tsx
@@ -1,26 +1,25 @@
 import React, {FunctionComponent} from 'react';
 import {useSelector} from 'react-redux';
-import {useLocation} from 'react-router';
 import cx from 'classnames';
 
 import {storyListSelector} from '../../selectors/story/list';
 import StoryListItem from '../story-list-item/story-list-item';
 
 import styles from './story-list.styl';
 
-const StoryList: FunctionComponent = () => {
+interface Props {
+  mode: string;
+}
+
+const StoryList: FunctionComponent<Props> = ({mode}) => {
   const stories = useSelector(storyListSelector);
-  const {pathname} = useLocation();
 
-  const classes = cx(
-    styles.storyList,
-    pathname === '/present' && styles.present
-  );
+  const classes = cx(styles.storyList, mode === 'present' && styles.present);
 
   return (
     <div className={classes}>
       {stories.map(story => (
-        <StoryListItem key={story.id} story={story} pathname={pathname} />
+        <StoryListItem key={story.id} story={story} mode={mode} />
       ))}
     </div>
   );

diff --git a/src/scripts/components/story-pagination/story-pagination.tsx b/src/scripts/components/story-pagination/story-pagination.tsx
@@ -11,12 +11,14 @@ import styles from './story-pagination.styl';
 interface Props {
   currentPage: number;
   storyId: string;
+  mode: string;
   slides: Slide[];
 }
 
 const StoryPagination: FunctionComponent<Props> = ({
   currentPage,
   storyId,
+  mode,
   slides
 }) => {
   const nextPageNumber = currentPage + 1;
@@ -29,7 +31,7 @@ const StoryPagination: FunctionComponent<Props> = ({
     <div className={styles.pagination}>
       {showPreviousButton ? (
         <Link
-          to={`/stories/${storyId}/${previousPageNumber}`}
+          to={`/${mode}/${storyId}/${previousPageNumber}`}
           className={styles.icon}>
           <PreviousIcon />
         </Link>
@@ -41,7 +43,7 @@ const StoryPagination: FunctionComponent<Props> = ({
       </span>
       {showNextButton ? (
         <Link
-          to={`/stories/${storyId}/${nextPageNumber}`}
+          to={`/${mode}/${storyId}/${nextPageNumber}`}
           className={styles.icon}>
           <NextIcon />
         </Link>

diff --git a/src/scripts/components/story/story.styl b/src/scripts/components/story/story.styl
@@ -5,6 +5,13 @@
   width: 500px
   height: 100%
 
+.presentStory
+  .storyTitle
+    font-size: 2em
+
+  .backButton
+    font-size: 1.3em
+
 .header
   position: absolute
   right: 500px

diff --git a/src/scripts/components/story/story.tsx b/src/scripts/components/story/story.tsx
@@ -2,18 +2,23 @@ import React, {FunctionComponent, useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {useParams, Redirect, Link} from 'react-router-dom';
 import {FormattedMessage} from 'react-intl';
+import cx from 'classnames';
 
 import StoryPagination from '../story-pagination/story-pagination';
 import fetchStory from '../../actions/fetch-story';
 import {selectedStorySelector} from '../../selectors/story/selected';
 import {storyListSelector} from '../../selectors/story/list';
 import setFlyToAction from '../../actions/set-fly-to';
 import Slide from '../slide/slide';
+import {State} from '../../reducers';
 
 import styles from './story.styl';
-import {State} from '../../reducers';
 
-const Story: FunctionComponent = () => {
+interface Props {
+  mode: string;
+}
+
+const Story: FunctionComponent<Props> = ({mode}) => {
   const {storyId, page} = useParams();
   const story = useSelector((state: State) =>
     selectedStorySelector(state, storyId)
@@ -51,24 +56,30 @@ const Story: FunctionComponent = () => {
 
   // redirect to first slide when current slide does not exist
   if (story && !slide) {
-    return <Redirect to={`/stories/${storyId}/0`} />;
+    return <Redirect to={`/${mode}/${storyId}/0`} />;
   }
 
+  const storyClasses = cx(
+    styles.story,
+    mode === 'present' && styles.presentStory
+  );
+
   return (
-    <div className={styles.story}>
+    <div className={storyClasses}>
       <div className={styles.header}>
-        <Link to="/stories" className={styles.backButton}>
+        <Link to={`/${mode}`} className={styles.backButton}>
           <FormattedMessage id="goBack" />
         </Link>
         <h2 className={styles.storyTitle}>
           {storyListItem && storyListItem.title}
         </h2>
       </div>
-      {slide && <Slide slide={slide} />}
+      {slide && <Slide slide={slide} mode={mode} />}
       {story && (
         <StoryPagination
           currentPage={pageNumber}
           storyId={story.id}
+          mode={mode}
           slides={story.slides}
         />
       )}

diff --git a/src/scripts/types/story-mode.ts b/src/scripts/types/story-mode.ts
@@ -0,0 +1,5 @@
+export enum StoryMode {
+  Present = 'present',
+  Showcase = 'showcase',
+  Stories = 'stories'
+}