Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 07:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #967 from Stremio/fix/transition-prop-error
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source 
fix: Transition transitionEnded prop error
This commit is contained in:
Tim 2025-07-03 12:06:43 +02:00 committed by GitHub
commit 1b09119e52
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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 [state, setState] = useState('enter');
const [active, setActive] = useState(false); const [active, setActive] = useState(false);
const [transitionEnded, setTransitionEnded] = useState(false);
const callbackRef = useCallback((element: HTMLElement | null) => { const callbackRef = useCallback((element: HTMLElement | null) => {
setElement(element); setElement(element);
@ -31,14 +30,12 @@ const Transition = ({ children, when, name }: Props) => {
}, [name, state, active, children]); }, [name, state, active, children]);
const onTransitionEnd = useCallback(() => { const onTransitionEnd = useCallback(() => {
setTransitionEnded(true);
state === 'exit' && setMounted(false); state === 'exit' && setMounted(false);
}, [state]); }, [state]);
useEffect(() => { useEffect(() => {
setState(when ? 'enter' : 'exit'); setState(when ? 'enter' : 'exit');
when && setMounted(true); when && setMounted(true);
setTransitionEnded(false);
}, [when]); }, [when]);
useEffect(() => { useEffect(() => {
@ -56,7 +53,6 @@ const Transition = ({ children, when, name }: Props) => {
mounted && cloneElement(children, { mounted && cloneElement(children, {
ref: callbackRef, ref: callbackRef,
className, className,
transitionEnded
}) })
); );
}; };

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

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