Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 14:52:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

only scroll if transitionEnded is true

Browse source
This commit is contained in:
Abdalrzag Eisa 2025-06-20 07:08:08 +03:00
parent f920ab48f3
commit 82783a4de7
No known key found for this signature in database
GPG key ID: 4CD5A78B36195BC8
1 changed files with 7 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
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 } from 'react';
import React, { useMemo, useCallback, useState, forwardRef, memo, useRef, useEffect } from 'react';
import classNames from 'classnames';
import Icon from '@stremio/stremio-icons/react';
import { useServices } from 'stremio/services';
@ -14,6 +14,7 @@ type Props = {
seriesInfo: SeriesInfo;
metaItem: MetaItem;
selectedVideoID: string;
transitionEnded: boolean;
closeSideDrawer: () => void;
};
@ -78,19 +79,13 @@ const SideDrawer = memo(forwardRef<HTMLDivElement, Props>(({ seriesInfo, classNa
const selectedVideoRef = useRef<HTMLDivElement>(null);
const jumpToPlayingNow = () => {
const { current } = selectedVideoRef;
if (!current) return;
requestAnimationFrame(() => {
requestAnimationFrame(() => {
current.scrollIntoView({ behavior: 'smooth', block: 'center' });
});
});
};
useEffect(() => {
props.transitionEnded &&
selectedVideoRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, [props.transitionEnded]);
return (
<div ref={ref} className={classNames(styles['side-drawer'], className)} onTransitionEnd={jumpToPlayingNow} onMouseDown={onMouseDown}>
<div ref={ref} className={classNames(styles['side-drawer'], className)} onMouseDown={onMouseDown}>
<div className={styles['close-button']} onClick={closeSideDrawer}>
<Icon className={styles['icon']} name={'chevron-forward'} />
</div>