refactor(story-content): add story gallery and videos (#300)

* refactor(story-content): add styles for content images

* refactor(story-content): add story gallery

* refactor(story-content): add video component to stories

* refactor(gallery): remove deprecated gallery component

* refactor(story): remove unnecessary const

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

@@ -5,7 +5,6 @@ export const InfoIcon: FunctionComponent = () => (
     width="18"
     height="18"
     viewBox="0 0 18 18"
-    fill="none"
     xmlns="http://www.w3.org/2000/svg">
     <path
       fillRule="evenodd"

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

@@ -1,19 +1,24 @@
 @require '../../../variables.styl'
 
 .content
-  padding: emCalc(80px) emCalc(56px)
-  color: $textWhite
+  overflow-y: auto
+  padding: emCalc(80px) emCalc(28px) 0 emCalc(56px)
+  background-color: $black
+  color: $textDefault
+  line-height: emCalc(22px)
 
   h1
+    margin-top: 0
     color: $textColor
     font-weight: bold
     font-size: emCalc(36px)
     font-family: NotesEsa
+    line-height: emCalc(16px)
 
-  p
-    color: $textDefault
-    line-height: emCalc(22px)
+  img
+    width: 50%
 
 .shortTextContent
+  overflow-y: hidden
   padding-top: emCalc(30px)
   font-size: emCalc(32px)

src/scripts/components/story-gallery/story-gallery.styl → src/scripts/components/story-media/story-media.styl

@@ -1,38 +1,20 @@
-.lightbox
-  position: fixed
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  z-index: 2
-  display: flex
-  justify-content: center
-  align-items: center
-  width: 100%
-  height: 100%
-  background-color: rgba(0, 0, 0, 0.95)
-
-.fullscreen
-  position: absolute
-  top: 0
-  right: 500px
-  bottom: 0
-  left: 0
+@require '../../../variables.styl'
 
-  .slider
-    max-height: 100%
-    height: 100%
+.storyMedia
+  padding: emCalc(80px) emCalc(56px) 0 emCalc(28px)
+  height: 100%
 
 .storyGallery
   position: relative
   flex-shrink: 0
   overflow: hidden
-  width: 100%
-  height: 100%
 
 .lightboxGallery
-  width: 90%
-  height: 90%
+  position: absolute
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
 
   .slider
     max-height: 100%
@@ -45,11 +27,11 @@
   display: flex
   justify-content: space-between
   width: 100%
-  height: 34px
+  height: emCalc(34px)
   transform: translateY(-50%)
 
   .navIcon
-    margin: 0 5px
+    margin: 0 emCalc(5px)
     border-radius: 50%
     background: rgba(0, 0, 0, 0.5)
     cursor: pointer
@@ -63,13 +45,13 @@
   right: 0
   bottom: 0
   z-index: 1
-  padding: 5px
+  padding: emCalc(20px)
   cursor: pointer
   fill: #fff
 
 .slider
   display: flex
-  height: 350px
+  height: emCalc(450px)
 
 .transition
   transition: transform ease-out 0.5s

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

@@ -1,5 +1,92 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, useState} from 'react';
+import cx from 'classnames';
 
-const StoryMedia: FunctionComponent = () => <div>media</div>;
+import {PreviousIcon} from '../icons/previous-icon';
+import {NextIcon} from '../icons/next-icon';
+import {FullscreenExitIcon} from '../icons/fullscreen-exit-icon';
+import {FullscreenIcon} from '../icons/fullscreen-icon';
+import {getStoryMediaUrl} from '../../libs/get-story-media-url';
+
+import styles from './story-media.styl';
+
+interface Props {
+  images: string[];
+  storyId: string;
+}
+
+const StoryMedia: FunctionComponent<Props> = ({images, storyId}) => {
+  const containerWidth = images.length * 100;
+  const imageWidth = 100 / images.length;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [showLightbox, setShowLightbox] = useState(false);
+  const showPrevButton = currentIndex > 0;
+  const showNextButton = currentIndex < images.length - 1;
+
+  const onPrevClick = () => {
+    if (currentIndex <= 0) {
+      return;
+    }
+    setCurrentIndex(currentIndex - 1);
+  };
+
+  const onNextClick = () => {
+    if (currentIndex >= images.length - 1) {
+      return;
+    }
+    setCurrentIndex(currentIndex + 1);
+  };
+
+  const imgClasses = cx(styles.slider, images.length > 1 && styles.transition);
+  const galleryClasses = cx(
+    styles.storyGallery,
+    showLightbox && styles.lightboxGallery
+  );
+
+  return (
+    <div className={styles.storyMedia}>
+      <div className={galleryClasses}>
+        <div className={styles.buttonContainer}>
+          <div onClick={onPrevClick} className={styles.navIcon}>
+            {showPrevButton ? <PreviousIcon /> : null}
+          </div>
+          <div onClick={onNextClick} className={styles.navIcon}>
+            {showNextButton ? <NextIcon /> : null}
+          </div>
+        </div>
+        {showLightbox ? (
+          <div
+            className={styles.fullscreenIcon}
+            onClick={() => setShowLightbox(false)}>
+            <FullscreenExitIcon />
+          </div>
+        ) : (
+          <div
+            className={styles.fullscreenIcon}
+            onClick={() => setShowLightbox(true)}>
+            <FullscreenIcon />
+          </div>
+        )}
+        <div
+          className={imgClasses}
+          style={{
+            width: `${containerWidth}%`,
+            transform: `translateX(-${imageWidth * currentIndex}%)`
+          }}>
+          {images.map((image, index) => {
+            const imageUrl = getStoryMediaUrl(storyId, image);
+            return (
+              <img
+                className={styles.sliderImage}
+                src={imageUrl}
+                key={index}
+                style={{width: `${imageWidth}%`}}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
 
 export default StoryMedia;

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

@@ -1,4 +1,5 @@
+@require '../../../variables.styl'
+
 .storyVideo
-  flex-shrink: 0
-  width: 100%
-  height: 300px
+  padding: emCalc(80px) emCalc(56px) 0 emCalc(28px)
+  height: emCalc(450px)

src/scripts/components/story/story.tsx

@@ -9,8 +9,10 @@ import StoryMedia from '../story-media/story-media';
 import StoryFooter from '../story-footer/story-footer';
 import fetchStory from '../../actions/fetch-story';
 import Header from '../header/header';
+import StoryVideo from '../story-video/story-video';
 
 import {StoryMode} from '../../types/story-mode';
+import {Slide, Story as StoryType} from '../../types/story';
 
 import styles from './story.styl';
 
@@ -40,6 +42,16 @@ const Story: FunctionComponent = () => {
     return null;
   }
 
+  const getRightSideComponent = (slide: Slide, story: StoryType) => {
+    if (slide.images) {
+      return <StoryMedia images={slide.images} storyId={story.id} />;
+    } else if (slide.videoId) {
+      return <StoryVideo videoId={slide.videoId} />;
+    }
+
+    return <Globes />;
+  };
+
   return (
     <div className={storyClasses}>
       {storyListItem && (
@@ -55,16 +67,16 @@ const Story: FunctionComponent = () => {
         {selectedStory?.slides.map(
           (currentSlide, index) =>
             index === slideIndex && (
-              <StoryContent
-                storyId={selectedStory.id}
-                mode={mode}
-                slide={currentSlide}
-                key={index}
-              />
+              <React.Fragment key={index}>
+                <StoryContent
+                  mode={mode}
+                  storyId={selectedStory.id}
+                  slide={currentSlide}
+                />
+                {getRightSideComponent(currentSlide, selectedStory)}
+              </React.Fragment>
             )
         )}
-        <Globes />
-        {false && <StoryMedia />}
       </main>
       <StoryFooter
         mode={mode}

src/scripts/types/story.d.ts

@@ -9,7 +9,7 @@ export interface Story {
 export interface Slide {
   text: string;
   shortText?: string;
-  images?: [];
+  images?: string[];
   videoId?: string;
   layer?: StoryLayer;
   fullscreenGallery?: boolean;