From a5033e035882ecd48adc905faa4a8091c2b23eeb Mon Sep 17 00:00:00 2001 From: Katherina Marcenko <45818654+KatvonRivia@users.noreply.github.com> Date: Thu, 24 Sep 2020 14:29:55 +0200 Subject: [PATCH] feat(autoplay-gallery): add autoplay to gallery in showcase mode (#656) * feat(autoplay-gallery): add autoplay to gallery in showcase mode * refactor(autoplay-gallery): remove ts-ignore * feat(autoplay-gallery): add delay to configs --- .../components/stories/autoplay/autoplay.tsx | 5 +++-- .../stories/story-footer/story-footer.tsx | 15 ++++++++++----- .../stories/story-media/story-media.tsx | 19 ++++++++++++++++++- .../components/stories/story/story.tsx | 1 + src/scripts/config/main.ts | 3 ++- src/scripts/hooks/use-story-navigation.ts | 12 +++++++++++- 6 files changed, 45 insertions(+), 10 deletions(-) diff --git a/src/scripts/components/stories/autoplay/autoplay.tsx b/src/scripts/components/stories/autoplay/autoplay.tsx index 99f4df014..b499b4ca4 100644 --- a/src/scripts/components/stories/autoplay/autoplay.tsx +++ b/src/scripts/components/stories/autoplay/autoplay.tsx @@ -5,14 +5,15 @@ import {useInterval} from '../../../hooks/use-interval'; interface Props { autoPlayLink: string; + delay: number; } -const Autoplay: FunctionComponent = ({autoPlayLink}) => { +const Autoplay: FunctionComponent = ({autoPlayLink, delay}) => { const history = useHistory(); useInterval(() => { autoPlayLink && history.replace(autoPlayLink); - }, 3000); + }, delay); return null; }; diff --git a/src/scripts/components/stories/story-footer/story-footer.tsx b/src/scripts/components/stories/story-footer/story-footer.tsx index b1d8b4999..251e0dea2 100644 --- a/src/scripts/components/stories/story-footer/story-footer.tsx +++ b/src/scripts/components/stories/story-footer/story-footer.tsx @@ -1,15 +1,15 @@ import React, {FunctionComponent} from 'react'; +import cx from 'classnames'; import StoryPagination from '../story-pagination/story-pagination'; import Autoplay from '../autoplay/autoplay'; import {useStoryNavigation} from '../../../hooks/use-story-navigation'; -import cx from 'classnames'; +import {useMouseMove} from '../../../hooks/use-mouse-move'; import {StoryMode} from '../../../types/story-mode'; import {Story} from '../../../types/story'; import styles from './story-footer.styl'; -import {useMouseMove} from '../../../hooks/use-mouse-move'; interface Props { mode: StoryMode | null; @@ -24,7 +24,12 @@ const StoryFooter: FunctionComponent = ({ }) => { const isShowcaseMode = mode === StoryMode.Showcase; const isStoriesMode = mode === StoryMode.Stories; - const {nextSlideLink, previousSlideLink, autoPlayLink} = useStoryNavigation(); + const { + nextSlideLink, + previousSlideLink, + autoPlayLink, + delay + } = useStoryNavigation(); const mouseMove = useMouseMove(); const footerClasses = cx( @@ -43,8 +48,8 @@ const StoryFooter: FunctionComponent = ({ previousSlideLink={previousSlideLink} /> )} - {isShowcaseMode && autoPlayLink && ( - + {isShowcaseMode && autoPlayLink && delay && ( + )} ); diff --git a/src/scripts/components/stories/story-media/story-media.tsx b/src/scripts/components/stories/story-media/story-media.tsx index 7690a6bba..7f8956849 100644 --- a/src/scripts/components/stories/story-media/story-media.tsx +++ b/src/scripts/components/stories/story-media/story-media.tsx @@ -6,6 +6,10 @@ import {NextIcon} from '../../main/icons/next-icon'; import {FullscreenExitIcon} from '../../main/icons/fullscreen-exit-icon'; import {FullscreenIcon} from '../../main/icons/fullscreen-icon'; import {getStoryMediaUrl} from '../../../libs/get-story-media-url'; +import {useInterval} from '../../../hooks/use-interval'; +import config from '../../../config/main'; + +import {StoryMode} from '../../../types/story-mode'; import styles from './story-media.styl'; @@ -13,12 +17,14 @@ interface Props { images: string[]; imageCaptions?: string[]; storyId: string; + mode: StoryMode | null; } const StoryMedia: FunctionComponent = ({ images, imageCaptions, - storyId + storyId, + mode }) => { const containerWidth = images.length * 100; const imageWidth = 100 / images.length; @@ -27,6 +33,17 @@ const StoryMedia: FunctionComponent = ({ const showPrevButton = currentIndex > 0; const showNextButton = currentIndex < images.length - 1; + const delay = mode === StoryMode.Showcase ? config.delay : null; + + useInterval(() => { + if (mode === StoryMode.Showcase) { + if (currentIndex >= images.length - 1) { + return; + } + setCurrentIndex(currentIndex + 1); + } + }, delay); + const onPrevClick = () => { if (currentIndex <= 0) { return; diff --git a/src/scripts/components/stories/story/story.tsx b/src/scripts/components/stories/story/story.tsx index 3507055cb..4ac63241d 100644 --- a/src/scripts/components/stories/story/story.tsx +++ b/src/scripts/components/stories/story/story.tsx @@ -65,6 +65,7 @@ const Story: FunctionComponent = () => { if (slide.type === SlideType.Image && slide.images) { return ( { const { mode, @@ -15,6 +18,7 @@ export const useStoryNavigation = () => { let autoPlayLink = null; let nextSlideLink = null; let previousSlideLink = null; + let delay = config.delay; if (!numberOfSlides) { return {autoPlayLink, nextSlideLink, previousSlideLink}; @@ -35,7 +39,13 @@ export const useStoryNavigation = () => { if (storyIds && typeof storyIndex === 'number') { const showcaseStoryIds = storyIds.join('&'); const nextStoryIndex = storyIndex + 1; + const currentSlide = selectedStory?.slides[slideIndex]; // go through all slides of one story + + if (currentSlide?.images && currentSlide.type === SlideType.Image) { + delay = delay * currentSlide.images.length; + } + if (slideIndex + 1 < numberOfSlides) { autoPlayLink = `/showcase/${showcaseStoryIds}/${storyIndex}/${nextSlideIndex}`; // when no slides are left, go to first slide of next story @@ -47,5 +57,5 @@ export const useStoryNavigation = () => { } } - return {autoPlayLink, nextSlideLink, previousSlideLink}; + return {autoPlayLink, nextSlideLink, previousSlideLink, delay}; };