Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: Transition transitionEnded prop error

Browse source
This commit is contained in:
Tim 2025-07-03 11:56:06 +02:00
parent aef0ecb5be
commit 595dfb22a3
2 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Transition/Transition.tsx
View file

@ -13,7 +13,6 @@ const Transition = ({ children, when, name }: Props) => {
const [state, setState] = useState('enter');
const [active, setActive] = useState(false);
const [transitionEnded, setTransitionEnded] = useState(false);
const callbackRef = useCallback((element: HTMLElement | null) => {
setElement(element);
@ -31,14 +30,12 @@ const Transition = ({ children, when, name }: Props) => {
}, [name, state, active, children]);
const onTransitionEnd = useCallback(() => {
setTransitionEnded(true);
state === 'exit' && setMounted(false);
}, [state]);
useEffect(() => {
setState(when ? 'enter' : 'exit');
when && setMounted(true);
setTransitionEnded(false);
}, [when]);
useEffect(() => {
@ -56,7 +53,6 @@ const Transition = ({ children, when, name }: Props) => {
mounted && cloneElement(children, {
ref: callbackRef,
className,
transitionEnded
})
);
};

20
src/routes/Player/SideDrawer/SideDrawer.tsx
View file

@ -1,6 +1,6 @@
// Copyright (C) 2017-2024 Smart code 203358507
import React, { useMemo, useCallback, useState, forwardRef, memo, useRef, useEffect } from 'react';
import React, { useMemo, useCallback, useState, forwardRef, memo, useRef } from 'react';
import classNames from 'classnames';
import Icon from '@stremio/stremio-icons/react';
import { useServices } from 'stremio/services';
@ -18,7 +18,7 @@ type Props = {
transitionEnded: boolean;
};
const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, selected, transitionEnded, ...props }: Props, ref) => {
const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, selected, ...props }: Props, ref) => {
const { core } = useServices();
const [season, setSeason] = useState<number>(seriesInfo?.season);
const selectedVideoRef = useRef<HTMLDivElement>(null);
@ -78,16 +78,14 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
event.stopPropagation();
};
const getSelectedRef = useCallback((video: Video) => {
return video.id === selected ? selectedVideoRef : null;
}, [selected]);
useEffect(() => {
transitionEnded && selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, [transitionEnded]);
const onTransitionEnd = () => {
selectedVideoRef.current?.scrollIntoView({
behavior: 'smooth',
});
};
return (
<div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
<div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown} onTransitionEnd={onTransitionEnd}>
<div className={styles['close-button']} onClick={closeSideDrawer}>
<Icon className={styles['icon']} name={'chevron-forward'} />
</div>
@ -116,6 +114,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
{videos.map((video, index) => (
<Video
key={index}
ref={video.id === selected ? selectedVideoRef : null}
className={styles['video']}
id={video.id}
title={video.title}
@ -131,7 +130,6 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
scheduled={video.scheduled}
onMarkVideoAsWatched={onMarkVideoAsWatched}
onMarkSeasonAsWatched={onMarkSeasonAsWatched}
ref={getSelectedRef(video)}
/>
))}
</div>