feat(presenter): add control panel

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/scripts/components/icons/play-icon.tsx

@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const PlayIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" />
+  </svg>
+);

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

@@ -1,11 +1,37 @@
 .pagination
+  width: 100%
+  height: 40px
+
+.controls
   display: flex
   flex-flow: row
-  justify-content: flex-start
   align-items: center
-  width: 100%
-  height: 40px
 
 .emptyIcon
   width: 34px
   height: 34px
+
+.present
+  position: absolute
+  right: 500px
+  bottom: 0
+  z-index: 1
+  display: flex
+  flex-direction: row
+  justify-content: flex-end
+  height: 50px
+
+  .controls
+    margin-right: 20px
+    padding: 0 15px
+    width: fit-content
+    border: 1px solid #ccc
+    border-radius: 5px 5px 0 0
+    background-color: #000
+    color: #fff
+
+    .icons
+      margin-left: 10px
+
+    svg
+      fill: #fff

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

@@ -1,17 +1,21 @@
 import React, {FunctionComponent} from 'react';
 import {Link} from 'react-router-dom';
+import cx from 'classnames';
 
 import {PreviousIcon} from '../icons/back-icon';
 import {NextIcon} from '../icons/next-icon';
+import {PlayIcon} from '../icons/play-icon';
 
 import {Slide} from '../../types/story';
+import {StoryMode} from '../../types/story-mode';
 
 import styles from './story-pagination.styl';
+import {RemoveIcon} from '../icons/remove-icon';
 
 interface Props {
   currentPage: number;
   storyId: string;
-  mode: string;
+  mode: StoryMode;
   slides: Slide[];
 }
 
@@ -27,29 +31,40 @@ const StoryPagination: FunctionComponent<Props> = ({
   const showNextButton = nextPageNumber < slidesLength;
   const showPreviousButton = previousPageNumber >= 0;
 
+  const presenterMode = mode === StoryMode.Present;
+
+  const classes = cx(styles.pagination, presenterMode && styles.present);
+
   return (
-    <div className={styles.pagination}>
-      {showPreviousButton ? (
-        <Link
-          to={`/${mode}/${storyId}/${previousPageNumber}`}
-          className={styles.icon}>
-          <PreviousIcon />
-        </Link>
-      ) : (
-        <div className={styles.emptyIcon} />
-      )}
-      <span>
-        {currentPage + 1}/{slidesLength}
-      </span>
-      {showNextButton ? (
-        <Link
-          to={`/${mode}/${storyId}/${nextPageNumber}`}
-          className={styles.icon}>
-          <NextIcon />
-        </Link>
-      ) : (
-        <div className={styles.emptyIcon} />
-      )}
+    <div className={classes}>
+      <div className={styles.controls}>
+        {showPreviousButton ? (
+          <Link
+            to={`/${mode}/${storyId}/${previousPageNumber}`}
+            className={styles.icon}>
+            <PreviousIcon />
+          </Link>
+        ) : (
+          <div className={styles.emptyIcon} />
+        )}
+        <span>
+          {currentPage + 1}/{slidesLength}
+        </span>
+        {showNextButton ? (
+          <Link
+            to={`/${mode}/${storyId}/${nextPageNumber}`}
+            className={styles.icon}>
+            <NextIcon />
+          </Link>
+        ) : (
+          <div className={styles.emptyIcon} />
+        )}
+        {presenterMode && (
+          <div className={styles.icons}>
+            <PlayIcon /> <RemoveIcon />
+          </div>
+        )}
+      </div>
     </div>
   );
 };