mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Merge pull request #4856 from grhallenbeck/fix-scroller-snapping

Browse source 
fix: (scroller) snap card sliders to card boundaries
This commit is contained in:
Bill Thornton 2023-10-18 17:12:44 -04:00 • committed by GitHub
commit 6cf2464a6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 123 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/elements/emby-scrollbuttons/ScrollButtons.tsx
View file

@ -3,11 +3,7 @@ import scrollerFactory from '../../libraries/scroller';
import globalize from '../../scripts/globalize';
import IconButton from '../emby-button/IconButton';
import './emby-scrollbuttons.scss';
enum Direction {
RIGHT,
LEFT,
}
import { ScrollDirection, scrollerItemSlideIntoView } from './utils';
interface ScrollButtonsProps {
scrollerFactoryRef: React.MutableRefObject<scrollerFactory | null>;
@ -22,31 +18,16 @@ const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState
const [localeScrollPos, setLocaleScrollPos] = useState<number>(0);
const scrollButtonsRef = useRef<HTMLDivElement>(null);
const scrollToPosition = useCallback((pos: number, immediate: boolean) => {
if (scrollerFactoryRef.current) {
scrollerFactoryRef.current.slideTo(pos, immediate, undefined );
}
}, [scrollerFactoryRef]);
const onScrollButtonClick = useCallback((direction: ScrollDirection) => {
scrollerItemSlideIntoView({
direction,
scroller: scrollerFactoryRef.current,
scrollState
});
}, [scrollState, scrollerFactoryRef]);
const onScrollButtonClick = useCallback((direction: Direction) => {
let newPos;
if (direction === Direction.LEFT) {
newPos = Math.max(0, scrollState.scrollPos - scrollState.scrollSize);
} else {
newPos = scrollState.scrollPos + scrollState.scrollSize;
}
if (globalize.getIsRTL() && direction === Direction.LEFT) {
newPos = scrollState.scrollPos + scrollState.scrollSize;
} else if (globalize.getIsRTL()) {
newPos = Math.min(0, scrollState.scrollPos - scrollState.scrollSize);
}
scrollToPosition(newPos, false);
}, [ scrollState.scrollPos, scrollState.scrollSize, scrollToPosition ]);
const triggerScrollLeft = useCallback(() => onScrollButtonClick(Direction.LEFT), [ onScrollButtonClick ]);
const triggerScrollRight = useCallback(() => onScrollButtonClick(Direction.RIGHT), [ onScrollButtonClick ]);
const triggerScrollLeft = useCallback(() => onScrollButtonClick(ScrollDirection.LEFT), [ onScrollButtonClick ]);
const triggerScrollRight = useCallback(() => onScrollButtonClick(ScrollDirection.RIGHT), [ onScrollButtonClick ]);
useEffect(() => {
const parent = scrollButtonsRef.current?.parentNode as HTMLDivElement;