From 0dbde3ff19d576c8cd5eff7dc5cfd15743268e23 Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Tue, 22 Jun 2021 13:24:39 +0200 Subject: [PATCH 01/20] fix(project): fix header content shift due to image load --- src/components/Header/Header.tsx | 5 +++-- .../Header/__snapshots__/Header.test.tsx.snap | 12 +---------- .../Layout/__snapshots__/Layout.test.tsx.snap | 12 +---------- src/components/Logo/Logo.test.tsx | 21 ++++++++++++++++++- src/components/Logo/Logo.tsx | 5 +++-- .../Root/__snapshots__/Root.test.tsx.snap | 11 +--------- 6 files changed, 29 insertions(+), 37 deletions(-) diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index ef8ec58ef..1930de5af 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -35,6 +35,7 @@ const Header: React.FC = ({ }) => { const { t } = useTranslation('menu'); const [mobileSearchActive, setMobileSearchActive] = useState(false); + const [logoLoaded, setLogoLoaded] = useState(false); const breakpoint = useBreakpoint(); const headerClassName = classNames(styles.header, styles[headerType], { [styles.mobileSearchActive]: mobileSearchActive && breakpoint <= Breakpoint.sm, @@ -78,11 +79,11 @@ const Header: React.FC = ({ {logoSrc && (
- + setLogoLoaded(true)} />
)}
{searchEnabled ? search : null}
diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap index 65c232b1a..56da8be4e 100644 --- a/src/components/Header/__snapshots__/Header.test.tsx.snap +++ b/src/components/Header/__snapshots__/Header.test.tsx.snap @@ -39,17 +39,7 @@ exports[`
renders header 1`] = ` + />
diff --git a/src/components/Layout/__snapshots__/Layout.test.tsx.snap b/src/components/Layout/__snapshots__/Layout.test.tsx.snap index b857a41e7..a3e5c83c7 100644 --- a/src/components/Layout/__snapshots__/Layout.test.tsx.snap +++ b/src/components/Layout/__snapshots__/Layout.test.tsx.snap @@ -45,17 +45,7 @@ exports[` renders layout 1`] = ` + />
diff --git a/src/components/Logo/Logo.test.tsx b/src/components/Logo/Logo.test.tsx index f968b767b..b4af2ae98 100644 --- a/src/components/Logo/Logo.test.tsx +++ b/src/components/Logo/Logo.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { fireEvent } from '@testing-library/react'; import { render } from '../../testUtils'; @@ -6,8 +7,26 @@ import Logo from './Logo'; describe('', () => { it('renders and matches snapshot', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); + + it('calls the onLoad function after the image has been loaded', () => { + const onLoad = jest.fn(); + const { getByAltText } = render(); + + fireEvent.load(getByAltText('logo')); + + expect(onLoad).toBeCalledTimes(1); + }); + + it('calls the onLoad function when the image fails to load', () => { + const onLoad = jest.fn(); + const { getByAltText } = render(); + + fireEvent.error(getByAltText('logo')); + + expect(onLoad).toBeCalledTimes(1); + }); }); diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx index 6ae1701d2..fbe2d1b9e 100644 --- a/src/components/Logo/Logo.tsx +++ b/src/components/Logo/Logo.tsx @@ -5,12 +5,13 @@ import styles from './Logo.module.scss'; type Props = { src: string; + onLoad: () => void; }; -const Logo: React.FC = ({ src }: Props) => { +const Logo: React.FC = ({ src, onLoad }: Props) => { return ( - logo + logo ); }; diff --git a/src/components/Root/__snapshots__/Root.test.tsx.snap b/src/components/Root/__snapshots__/Root.test.tsx.snap index db75be57a..a322bcfb0 100644 --- a/src/components/Root/__snapshots__/Root.test.tsx.snap +++ b/src/components/Root/__snapshots__/Root.test.tsx.snap @@ -45,16 +45,7 @@ exports[` renders and matches snapshot 1`] = ` + />
From 53439c20a83f79082e1014ab32e632e259dd3676 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 23 Jun 2021 14:35:23 +0200 Subject: [PATCH 02/20] fix(project): remove outline from menubuttons --- src/components/MenuButton/MenuButton.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MenuButton/MenuButton.module.scss b/src/components/MenuButton/MenuButton.module.scss index 12bf4b3d7..c8a63154f 100644 --- a/src/components/MenuButton/MenuButton.module.scss +++ b/src/components/MenuButton/MenuButton.module.scss @@ -21,7 +21,7 @@ text-align: center; text-decoration: none; background: transparent; - outline-color: var(--highlight-color, white); + outline: none; cursor: pointer; opacity: 0.7; transition: background 0.1s ease; From 99447f0d2286cb68875bccf51561778430dc165e Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 23 Jun 2021 14:43:00 +0200 Subject: [PATCH 03/20] fix(project): update current video text --- src/i18n/locales/en_US/video.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/locales/en_US/video.json b/src/i18n/locales/en_US/video.json index 7f7bfeca5..0e257aaba 100644 --- a/src/i18n/locales/en_US/video.json +++ b/src/i18n/locales/en_US/video.json @@ -2,7 +2,7 @@ "add_to_favorites": "Add to favorites", "copied_url": "Copied url", "current_episode": "Current episode", - "currently_playing": "Currently playing", + "currently_playing": "Current video", "episodes": "Episodes", "favorite": "Favorite", "remove_from_favorites": "Remove from favorites", From 91a143c7af47b82ac67405e4b31aecb620854ce5 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 23 Jun 2021 14:54:02 +0200 Subject: [PATCH 04/20] fix(videodetail): fix collapsibletext mask for webkit --- src/components/CollapsibleText/CollapsibleText.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/CollapsibleText/CollapsibleText.module.scss b/src/components/CollapsibleText/CollapsibleText.module.scss index 4bd6a8483..2432a8614 100644 --- a/src/components/CollapsibleText/CollapsibleText.module.scss +++ b/src/components/CollapsibleText/CollapsibleText.module.scss @@ -17,6 +17,7 @@ &.collapsed { mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); + -webkit-mask-image: linear-gradient(-180deg, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 100%); /* stylelint-disable-line */ } } From 86d8ecc7c699b283360c044e341abb7f88b895bb Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 23 Jun 2021 15:34:32 +0200 Subject: [PATCH 05/20] feat(home): implement auto play for continue watching shelf --- src/screens/Home/Home.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx index 9a0c83db4..68e0526be 100644 --- a/src/screens/Home/Home.tsx +++ b/src/screens/Home/Home.tsx @@ -17,7 +17,7 @@ import { ConfigContext } from '../../providers/ConfigProvider'; import usePlaylist from '../../hooks/usePlaylist'; import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint'; import scrollbarSize from '../../utils/dom'; -import { cardUrl } from '../../utils/formatting'; +import { videoUrl } from '../../utils/formatting'; import styles from './Home.module.scss'; @@ -56,7 +56,7 @@ const Home = (): JSX.Element => { const contentItem: Content = itemData.content[index]; - const onCardClick = (playlistItem: PlaylistItem) => history.push(cardUrl(playlistItem, contentItem.playlistId)); + const onCardClick = (playlistItem: PlaylistItem, play: boolean) => history.push(videoUrl(playlistItem, contentItem.playlistId, play)); const onCardHover = (playlistItem: PlaylistItem) => updateBlurImage(playlistItem.image); return ( @@ -74,7 +74,7 @@ const Home = (): JSX.Element => { error={error} playlist={playlist} watchHistory={playlist.feedid === PersonalShelf.ContinueWatching ? watchHistoryDictionary : undefined} - onCardClick={onCardClick} + onCardClick={(item: PlaylistItem) => onCardClick(item, playlist.feedid === PersonalShelf.ContinueWatching)} onCardHover={onCardHover} title={playlist.title} featured={contentItem.featured === true} From 98926b03a1e2d19345dc6151b4d4a1154fb45873 Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 23 Jun 2021 15:42:24 +0200 Subject: [PATCH 06/20] fix(home): fix nowrap for tags --- src/components/Card/Card.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss index 35de5d4f6..32a3f4843 100644 --- a/src/components/Card/Card.module.scss +++ b/src/components/Card/Card.module.scss @@ -25,7 +25,6 @@ } &.featured { - .title { height: 1em; font-family: var(--body-font-family); @@ -121,7 +120,6 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16)); } .title { - height: 2.4em; overflow: hidden; color: var(--card-color); @@ -160,6 +158,7 @@ $aspects: ((1, 1), (2, 1), (2, 3), (4, 3), (5, 3), (16, 9), (9, 16)); font-family: var(--body-font-family); font-weight: 600; font-size: 13px; + white-space: nowrap; background-color: rgba(variables.$black, 0.6); border-radius: 4px; @include responsive.mobile-only { From f190c28a77b18e3865cf6e8de05499869ff8ab0e Mon Sep 17 00:00:00 2001 From: Roy Schut Date: Wed, 23 Jun 2021 17:02:49 +0200 Subject: [PATCH 07/20] fix(videodetail): wrap trailer button and fix buttons responsive --- .prettierrc | 2 +- src/components/Button/Button.tsx | 8 +++++--- src/components/Video/Video.module.scss | 16 +++++++++++++--- src/components/Video/Video.tsx | 5 ++--- 4 files changed, 21 insertions(+), 10 deletions(-) diff --git a/.prettierrc b/.prettierrc index 3e189a360..edcba88d1 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { "singleQuote": true, "trailingComma": "all", - "printWidth": 140 + "printWidth": 150 } diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 61df1a48a..d6555054f 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -20,6 +20,7 @@ type Props = { size?: 'medium' | 'large'; to?: string; role?: string; + className?: string; } & React.AriaAttributes; const Button: React.FC = ({ @@ -32,9 +33,10 @@ const Button: React.FC = ({ size = 'medium', to, onClick, + className, ...rest }: Props) => { - const className = classNames(styles.button, [styles[color]], [styles[variant]], { + const combinedClassNames = classNames(styles.button, className, [styles[color]], [styles[variant]], { [styles.active]: active, [styles.fullWidth]: fullWidth, [styles.large]: size === 'large', @@ -44,12 +46,12 @@ const Button: React.FC = ({ const span = {label}; return to ? ( - + {icon} {span} ) : ( - diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss index 985905841..d031ec9aa 100644 --- a/src/components/Video/Video.module.scss +++ b/src/components/Video/Video.module.scss @@ -122,18 +122,28 @@ margin-right: 0; } + @include responsive.mobile-and-tablet() { + > button { + padding: 0 12px; + } + } + @include responsive.mobile-only() { flex-wrap: wrap; + > button:first-child { - margin-right: 0; margin-bottom: 8px; } - > button:not(:first-child) { + + > button:not(.trailerButton) { flex: 1; } + + .trailerButton { + margin-right: 0; + } } } - .poster { position: absolute; top: 0; diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx index 3d34307ab..42d85731c 100644 --- a/src/components/Video/Video.tsx +++ b/src/components/Video/Video.tsx @@ -130,6 +130,7 @@ const Video: React.FC = ({
{trailerItem && (
- +
); diff --git a/src/screens/Search/Search.tsx b/src/screens/Search/Search.tsx index 1edf034fd..3a243bcd6 100644 --- a/src/screens/Search/Search.tsx +++ b/src/screens/Search/Search.tsx @@ -27,7 +27,7 @@ const Search: React.FC> = ({ }, }) => { const { t } = useTranslation('search'); - const { siteName, searchPlaylist } = useContext(ConfigContext); + const { siteName, searchPlaylist, options } = useContext(ConfigContext); const firstRender = useFirstRender(); const searchQuery = UIStore.useState((s) => s.searchQuery); const { updateSearchQuery } = useSearchQueryUpdater(); @@ -87,7 +87,13 @@ const Search: React.FC> = ({

{t('heading')}

- +
); diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx index e04cbead6..e4bd13e44 100644 --- a/src/screens/Series/Series.tsx +++ b/src/screens/Series/Series.tsx @@ -175,6 +175,7 @@ const Series = ({ isLoading={isLoading} currentCardItem={item} currentCardLabel={t('current_episode')} + enableCardTitles={config.options.shelveTitles} /> diff --git a/src/services/config.service.ts b/src/services/config.service.ts index d69e117b2..cefa93789 100644 --- a/src/services/config.service.ts +++ b/src/services/config.service.ts @@ -10,6 +10,7 @@ import { PersonalShelf } from '../enum/PersonalShelf'; const contentSchema: SchemaOf = object({ playlistId: string().defined(), featured: boolean().notRequired(), + enableText: boolean().notRequired(), }).defined(); const menuSchema: SchemaOf = object().shape({ @@ -69,6 +70,7 @@ const loadConfig = async (configLocation: string) => { const data = await response.json(); addPersonalShelves(data); + addContentDefaultOptions(data); if (data.version) { return parseDeprecatedConfig(data); @@ -85,6 +87,7 @@ const addPersonalShelves = (data: Config) => { if (!data.content.some(({ playlistId }) => playlistId === PersonalShelf.Favorites)) { data.content.push({ playlistId: PersonalShelf.Favorites }); } + if (data.options.enableContinueWatching) { if (!data.content.some(({ playlistId }) => playlistId === PersonalShelf.ContinueWatching)) { data.content.splice(1, 0, { playlistId: PersonalShelf.ContinueWatching }); @@ -92,6 +95,14 @@ const addPersonalShelves = (data: Config) => { } }; +/** + * Add content default options + * @param {Config} data + */ +const addContentDefaultOptions = (data: Config) => { + data.content = data.content.map((content) => Object.assign({ enableText: true, featured: false }, content)); +}; + /** * Serialize deprecated config to v3 config * @param {Config} config diff --git a/types/Config.d.ts b/types/Config.d.ts index a86cb5252..db1b9c4dc 100644 --- a/types/Config.d.ts +++ b/types/Config.d.ts @@ -27,6 +27,7 @@ export type Simple = { export type Content = { playlistId: string; featured?: boolean; + enableText?: boolean; }; export type Menu = { From f0503d891677666a6996da7f9fadb637dffb69c1 Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Thu, 24 Jun 2021 16:20:25 +0200 Subject: [PATCH 18/20] fix(project): fix backgroundColor option not working --- src/providers/ConfigProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/providers/ConfigProvider.tsx b/src/providers/ConfigProvider.tsx index 256952ec0..8da6b241b 100644 --- a/src/providers/ConfigProvider.tsx +++ b/src/providers/ConfigProvider.tsx @@ -72,7 +72,7 @@ const ConfigProvider: FunctionComponent = ({ const root = document.querySelector(':root') as HTMLElement; if (root && backgroundColor) { - root.style.setProperty('--background-color', backgroundColor); + root.style.setProperty('--body-background-color', backgroundColor); root.style.setProperty('--background-contrast-color', calculateContrastColor(backgroundColor)); } From a3d561ae8668bc28159cefb15e2d1c98b79f0701 Mon Sep 17 00:00:00 2001 From: Christiaan Scheermeijer Date: Thu, 24 Jun 2021 21:52:33 +0200 Subject: [PATCH 19/20] chore(home): use preventDefault to prevent vertical scrolling --- src/components/TileDock/TileDock.tsx | 138 ++++++++++++++------------- 1 file changed, 73 insertions(+), 65 deletions(-) diff --git a/src/components/TileDock/TileDock.tsx b/src/components/TileDock/TileDock.tsx index b696aa99f..54472b928 100644 --- a/src/components/TileDock/TileDock.tsx +++ b/src/components/TileDock/TileDock.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { useLayoutEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; import styles from './TileDock.module.scss'; @@ -73,10 +73,6 @@ const TileDock = ({ const [slideToIndex, setSlideToIndex] = useState(0); const [transform, setTransform] = useState(-100); const [doAnimationReset, setDoAnimationReset] = useState(false); - const [touchPosition, setTouchPosition] = useState({ - x: 0, - y: 0, - } as Position); const frameRef = useRef() as React.MutableRefObject; const tileWidth: number = 100 / tilesToShow; const isMultiPage: boolean = items?.length > tilesToShow; @@ -92,65 +88,84 @@ const TileDock = ({ const showLeftControl: boolean = needControls && !(cycleMode === 'stop' && index === 0); const showRightControl: boolean = needControls && !(cycleMode === 'stop' && index === items.length - tilesToShow); - const slide = (direction: Direction): void => { - const directionFactor = direction === 'right' ? 1 : -1; - let nextIndex: number = index + tilesToShow * directionFactor; + const slide = useCallback( + (direction: Direction): void => { + const directionFactor = direction === 'right' ? 1 : -1; + let nextIndex: number = index + tilesToShow * directionFactor; - if (nextIndex < 0) { - if (cycleMode === 'stop') nextIndex = 0; - if (cycleMode === 'restart') nextIndex = index === 0 ? 0 - tilesToShow : 0; - } - if (nextIndex > items.length - tilesToShow) { - if (cycleMode === 'stop') nextIndex = items.length - tilesToShow; - if (cycleMode === 'restart') nextIndex = index >= items.length - tilesToShow ? items.length : items.length - tilesToShow; - } + if (nextIndex < 0) { + if (cycleMode === 'stop') nextIndex = 0; + if (cycleMode === 'restart') nextIndex = index === 0 ? 0 - tilesToShow : 0; + } + if (nextIndex > items.length - tilesToShow) { + if (cycleMode === 'stop') nextIndex = items.length - tilesToShow; + if (cycleMode === 'restart') nextIndex = index >= items.length - tilesToShow ? items.length : items.length - tilesToShow; + } - const steps: number = Math.abs(index - nextIndex); - const movement: number = steps * tileWidth * (0 - directionFactor); + const steps: number = Math.abs(index - nextIndex); + const movement: number = steps * tileWidth * (0 - directionFactor); - setSlideToIndex(nextIndex); - setTransform(-100 + movement); - if (!animated) setDoAnimationReset(true); - }; + setSlideToIndex(nextIndex); + setTransform(-100 + movement); + if (!animated) setDoAnimationReset(true); + }, + [animated, cycleMode, index, items.length, tileWidth, tilesToShow], + ); - const handleTouchStart = (event: React.TouchEvent): void => { - setTouchPosition({ - x: event.touches[0].clientX, - y: event.touches[0].clientY, - }); - }; + const handleTouchStart = useCallback( + (event: React.TouchEvent): void => { + const touchPosition: Position = { + x: event.touches[0].clientX, + y: event.touches[0].clientY, + }; + + function handleTouchMove(this: HTMLDocument, event: TouchEvent): void { + const newPosition: Position = { + x: event.changedTouches[0].clientX, + y: event.changedTouches[0].clientY, + }; + const movementX: number = Math.abs(newPosition.x - touchPosition.x); + const movementY: number = Math.abs(newPosition.y - touchPosition.y); + + if (movementX > movementY && movementX > 10) { + event.preventDefault(); + event.stopPropagation(); + } + } - const [verticalScrollStopped, setVerticalScrollStopped] = useState(false); + function handleTouchEnd(this: HTMLDocument, event: TouchEvent): void { + const newPosition = { + x: event.changedTouches[0].clientX, + y: event.changedTouches[0].clientY, + }; - const handleTouchMove = (event: React.TouchEvent): void => { - if (verticalScrollStopped) return; + const movementX: number = Math.abs(newPosition.x - touchPosition.x); + const movementY: number = Math.abs(newPosition.y - touchPosition.y); + const direction: Direction = newPosition.x < touchPosition.x ? 'right' : 'left'; - const newPosition = { - x: event.changedTouches[0].clientX, - y: event.changedTouches[0].clientY, - }; - const movementX: number = Math.abs(newPosition.x - touchPosition.x); - const movementY: number = Math.abs(newPosition.y - touchPosition.y); - if (movementX > movementY && movementX > 10) { - setVerticalScrollStopped(true); - document.body.style.overflowY = 'hidden'; - } - }; - const handleTouchEnd = (event: React.TouchEvent): void => { - const newPosition = { - x: event.changedTouches[0].clientX, - y: event.changedTouches[0].clientY, - }; - const movementX: number = Math.abs(newPosition.x - touchPosition.x); - const movementY: number = Math.abs(newPosition.y - touchPosition.y); - const direction: Direction = newPosition.x < touchPosition.x ? 'right' : 'left'; - - setVerticalScrollStopped(false); - document.body.style.overflowY = ''; - if (movementX > minimalTouchMovement && movementX > movementY) { - slide(direction); - } - }; + if (movementX > minimalTouchMovement && movementX > movementY) { + slide(direction); + } + + cleanup(); + } + + function handleTouchCancel() { + cleanup(); + } + + function cleanup() { + document.removeEventListener('touchmove', handleTouchMove); + document.removeEventListener('touchend', handleTouchEnd); + document.removeEventListener('touchcancel', handleTouchCancel); + } + + document.addEventListener('touchmove', handleTouchMove, { passive: false }); + document.addEventListener('touchend', handleTouchEnd); + document.addEventListener('touchcancel', handleTouchCancel); + }, + [minimalTouchMovement, slide], + ); useLayoutEffect(() => { const resetAnimation = (): void => { @@ -195,14 +210,7 @@ const TileDock = ({ return (
{showLeftControl && !!renderLeftControl &&
{renderLeftControl(() => slide('left'))}
} -
    +
      {wrapWithEmptyTiles ? (
    • Date: Thu, 24 Jun 2021 22:02:57 +0200 Subject: [PATCH 20/20] chore(project): fix React unmounted state update warning --- src/components/Animation/Animation.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/Animation/Animation.tsx b/src/components/Animation/Animation.tsx index 7d8ad3ac2..a8966feca 100644 --- a/src/components/Animation/Animation.tsx +++ b/src/components/Animation/Animation.tsx @@ -26,26 +26,31 @@ const Animation = ({ const seconds = duration / 1000; const transition = `transform ${seconds}s ease-out`; // todo: -webkit-transform; - const timeout = useRef(); - const timeout2 = useRef(); + const timeout = useRef(); + const timeout2 = useRef(); useEffect(() => { if (timeout.current) clearTimeout(timeout.current); if (timeout2.current) clearTimeout(timeout2.current); if (open) { setHasOpenedBefore(true); - timeout.current = setTimeout(() => setStatus('opening'), delay); - timeout2.current = setTimeout(() => { + timeout.current = window.setTimeout(() => setStatus('opening'), delay); + timeout2.current = window.setTimeout(() => { setStatus('open'); onOpenAnimationEnd && onOpenAnimationEnd(); }, duration + delay); } else if (hasOpenedBefore) { - timeout.current = setTimeout(() => setStatus('closing'), delay); - timeout2.current = setTimeout(() => { + timeout.current = window.setTimeout(() => setStatus('closing'), delay); + timeout2.current = window.setTimeout(() => { setStatus('closed'); onCloseAnimationEnd && onCloseAnimationEnd(); }, duration + delay); } + + return () => { + clearTimeout(timeout.current); + clearTimeout(timeout2.current); + }; }, [duration, delay, transition, open, onOpenAnimationEnd, onCloseAnimationEnd, hasOpenedBefore, setHasOpenedBefore]); if (!open && status === 'closed') {