Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(SideDrawer): simplify refs handing

Browse source
This commit is contained in:
Timothy Z. 2025-06-20 12:08:55 +03:00
parent 00d89aec75
commit a3c895dfc6
3 changed files with 21 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,15 +5,15 @@ type Props = {
children: JSX.Element,
when: boolean,
name: string,
onTransitionEnd?: () => void
};
const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
const Transition = ({ children, when, name }: Props) => {
const [element, setElement] = useState<HTMLElement | null>(null);
const [mounted, setMounted] = useState(false);
const [state, setState] = useState('enter');
const [active, setActive] = useState(false);
const [transitionEnded, setTransitionEnded] = useState(false);
const callbackRef = useCallback((element: HTMLElement | null) => {
setElement(element);
@ -30,20 +30,15 @@ const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
);
}, [name, state, active, children]);
const handleTransitionEnd = useCallback(() => {
switch (state) {
case 'enter':
onTransitionEnd?.();
break;
case 'exit':
setMounted(false);
break;
}
const onTransitionEnd = useCallback(() => {
setTransitionEnded(true);
state === 'exit' && setMounted(false);
}, [state]);
useEffect(() => {
setState(when ? 'enter' : 'exit');
when && setMounted(true);
setTransitionEnded(false);
}, [when]);
useEffect(() => {
@ -53,14 +48,15 @@ const Transition = ({ children, when, name, onTransitionEnd }: Props) => {
}, [element]);
useEffect(() => {
element?.addEventListener('transitionend', handleTransitionEnd);
return () => element?.removeEventListener('transitionend', handleTransitionEnd);
element?.addEventListener('transitionend', onTransitionEnd);
return () => element?.removeEventListener('transitionend', onTransitionEnd);
}, [element, onTransitionEnd]);
return (
mounted && cloneElement(children, {
ref: callbackRef,
className,
transitionEnded
})
);
};

10
src/routes/Player/Player.js
View file

@ -45,7 +45,6 @@ const Player = ({ urlParams, queryParams }) => {
const routeFocused = useRouteFocused();
const toast = useToast();
const [sideDrawerTransitionEnded, setSideDrawerTransitionEnded] = React.useState(false);
const [seeking, setSeeking] = React.useState(false);
const [casting, setCasting] = React.useState(() => {
@ -511,10 +510,6 @@ const Player = ({ urlParams, queryParams }) => {
}
}, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
React.useEffect(() => {
if (!sideDrawerOpen) setSideDrawerTransitionEnded(false);
}, [sideDrawerOpen]);
React.useLayoutEffect(() => {
const onKeyDown = (event) => {
switch (event.code) {
@ -831,14 +826,13 @@ const Player = ({ urlParams, queryParams }) => {
:
null
}
<Transition when={sideDrawerOpen} name={'slide-left'} onTransitionEnd={() => setSideDrawerTransitionEnded(true)}>
<Transition when={sideDrawerOpen} name={'slide-left'}>
<SideDrawer
className={classnames(styles['layer'], styles['side-drawer-layer'])}
metaItem={player.metaItem?.content}
seriesInfo={player.seriesInfo}
closeSideDrawer={closeSideDrawer}
selectedVideoID={player.selected?.streamRequest.path.id}
transitionEnded={sideDrawerTransitionEnded}
selected={player.selected?.streamRequest.path.id}
/>
</Transition>
{

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

@ -13,14 +13,15 @@ type Props = {
className?: string;
seriesInfo: SeriesInfo;
metaItem: MetaItem;
selectedVideoID: string;
transitionEnded: boolean;
closeSideDrawer: () => void;
selected: string;
transitionEnded: boolean;
};
const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, ...props }: Props, ref) => {
const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, className, closeSideDrawer, selected, transitionEnded, ...props }: Props, ref) => {
const { core } = useServices();
const [season, setSeason] = useState<number>(seriesInfo?.season);
const selectedVideoRef = useRef<HTMLDivElement>(null);
const metaItem = useMemo(() => {
return seriesInfo ?
{
@ -77,12 +78,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
event.stopPropagation();
};
const selectedVideoRef = useRef<HTMLDivElement>(null);
const getSelectedRef = useCallback((video: Video) => {
return video.id === selected ? selectedVideoRef : null;
}, [selected]);
useEffect(() => {
props.transitionEnded &&
selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, [props.transitionEnded]);
transitionEnded && selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, [transitionEnded]);
return (
<div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
@ -129,7 +131,7 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
scheduled={video.scheduled}
onMarkVideoAsWatched={onMarkVideoAsWatched}
onMarkSeasonAsWatched={onMarkSeasonAsWatched}
ref={video.id === props.selectedVideoID ? selectedVideoRef : null}
ref={getSelectedRef(video)}
/>
))}
</div>