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

fix resizeobserver loop

Browse source
This commit is contained in:
grafixeyehero 2023-06-29 23:17:59 +03:00
parent 00ec92cc02
commit 5598f49c32
6 changed files with 103 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,6 @@ enum Direction {
}
interface ScrollButtonsProps {
scrollRef?: React.MutableRefObject<HTMLElement | null>;
scrollerFactoryRef: React.MutableRefObject<scrollerFactory | null>;
scrollState: {
scrollSize: number;

29
src/elements/emby-scroller/Scroller.tsx
View file

@ -1,5 +1,6 @@
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import useElementSize from 'hooks/useElementSize';
import layoutManager from '../../components/layoutManager';
import dom from '../../scripts/dom';
import browser from '../../scripts/browser';
@ -32,14 +33,14 @@ const Scroller: FC<ScrollerProps> = ({
isAllowNativeSmoothScrollEnabled,
children
}) => {
const [scrollRef, size] = useElementSize();
const [showControls, setShowControls] = useState(false);
const [scrollState, setScrollState] = useState({
scrollSize: 0,
scrollSize: size.width,
scrollPos: 0,
scrollWidth: 0
});
const scrollRef = useRef<HTMLDivElement>(null);
const scrollerFactoryRef = useRef<scrollerFactory | null>(null);
const getScrollSlider = useCallback(() => {
@ -125,7 +126,7 @@ const Scroller: FC<ScrollerProps> = ({
});
}, [getScrollPosition, getScrollSize, getScrollWidth]);
const initCenterFocus = useCallback((elem: EventTarget, scrollerInstance: scrollerFactory) => {
const initCenterFocus = useCallback((elem, scrollerInstance: scrollerFactory) => {
dom.addEventListener(elem, 'focus', function (e: FocusEvent) {
const focused = focusManager.focusableParent(e.target);
if (focused) {
@ -150,15 +151,10 @@ const Scroller: FC<ScrollerProps> = ({
}, [scrollerFactoryRef]);
useEffect(() => {
const scrollerElement = scrollRef.current as HTMLDivElement;
const horizontal = isHorizontalEnabled !== false;
const scrollbuttons = isScrollButtonsEnabled !== false;
const mousewheel = isMouseWheelEnabled !== false;
const slider = scrollerElement.querySelector('.scrollSlider');
const scrollFrame = scrollerElement;
const enableScrollButtons = layoutManager.desktop && horizontal && scrollbuttons;
const options = {
@ -166,7 +162,7 @@ const Scroller: FC<ScrollerProps> = ({
mouseDragging: 1,
mouseWheel: mousewheel,
touchDragging: 1,
slidee: slider,
slidee: scrollRef.current?.querySelector('.scrollSlider'),
scrollBy: 200,
speed: horizontal ? 270 : 240,
elasticBounds: 1,
@ -183,12 +179,12 @@ const Scroller: FC<ScrollerProps> = ({
};
// If just inserted it might not have any height yet - yes this is a hack
scrollerFactoryRef.current = new scrollerFactory(scrollFrame, options);
scrollerFactoryRef.current = new scrollerFactory(scrollRef.current, options);
scrollerFactoryRef.current.init();
scrollerFactoryRef.current.reload();
if (layoutManager.tv && isCenterFocusEnabled) {
initCenterFocus(scrollerElement, scrollerFactoryRef.current);
initCenterFocus(scrollRef.current, scrollerFactoryRef.current);
}
if (enableScrollButtons) {
@ -200,9 +196,8 @@ const Scroller: FC<ScrollerProps> = ({
}
return () => {
const scrollerInstance = scrollerFactoryRef.current;
if (scrollerInstance) {
scrollerInstance.destroy();
if (scrollerFactoryRef.current) {
scrollerFactoryRef.current.destroy();
scrollerFactoryRef.current = null;
}
@ -223,7 +218,8 @@ const Scroller: FC<ScrollerProps> = ({
isScrollEventEnabled,
isSkipFocusWhenVisibleEnabled,
onScroll,
removeScrollEventListener
removeScrollEventListener,
scrollRef
]);
return (
@ -231,7 +227,6 @@ const Scroller: FC<ScrollerProps> = ({
{
showControls && scrollState.scrollWidth > scrollState.scrollSize + 20
&& <ScrollButtons
scrollRef={scrollRef}
scrollerFactoryRef={scrollerFactoryRef}
scrollState={scrollState}
/>