Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 04:01:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix bad sizing

Browse Source
This commit is contained in:
mrjvs 2023-03-12 19:07:37 +01:00
parent a520cf02bb
commit 80f7240f58
2 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/popout/FloatingCard.tsx
View File

@ -3,7 +3,7 @@ import { FloatingCardMobilePosition } from "@/components/popout/positions/Floati
import { useIsMobile } from "@/hooks/useIsMobile"; import { useIsMobile } from "@/hooks/useIsMobile";
import { PopoutSection } from "@/video/components/popouts/PopoutUtils"; import { PopoutSection } from "@/video/components/popouts/PopoutUtils";
import { useSpringValue, animated, easings } from "@react-spring/web"; import { useSpringValue, animated, easings } from "@react-spring/web";
import { ReactNode, useCallback, useEffect, useRef } from "react"; import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
import { Icon, Icons } from "../Icon"; import { Icon, Icons } from "../Icon";
import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle"; import { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
@ -26,27 +26,33 @@ function CardBase(props: { children: ReactNode }) {
const width = useSpringValue(0, { const width = useSpringValue(0, {
config: { easing: easings.easeInOutSine, duration: 300 }, config: { easing: easings.easeInOutSine, duration: 300 },
}); });
const [pages, setPages] = useState<NodeListOf<Element> | null>(null);
const getNewHeight = useCallback(() => { const getNewHeight = useCallback(
if (!ref.current) return; (updateList = true) => {
const children = ref.current.querySelectorAll( if (!ref.current) return;
":scope *[data-floating-page='true']" const children = ref.current.querySelectorAll(
); ":scope *[data-floating-page='true']"
if (children.length === 0) { );
height.start(0); if (updateList) setPages(children);
width.start(0); if (children.length === 0) {
return; height.start(0);
} width.start(0);
const lastChild = children[children.length - 1]; return;
const rect = lastChild.getBoundingClientRect(); }
if (height.get() === 0) { const lastChild = children[children.length - 1];
height.set(rect.height); const rect = lastChild.getBoundingClientRect();
width.set(rect.width); const rectHeight = lastChild.scrollHeight;
} else { if (height.get() === 0) {
height.start(rect.height); height.set(rectHeight);
width.start(rect.width); width.set(rect.width);
} } else {
}, [height, width]); height.start(rectHeight);
width.start(rect.width);
}
},
[height, width]
);
useEffect(() => { useEffect(() => {
if (!ref.current) return; if (!ref.current) return;
@ -65,22 +71,14 @@ function CardBase(props: { children: ReactNode }) {
}, [getNewHeight]); }, [getNewHeight]);
useEffect(() => { useEffect(() => {
if (!ref.current) return;
const children = ref.current.querySelectorAll(
":scope *[data-floating-page='true']"
);
const observer = new ResizeObserver(() => { const observer = new ResizeObserver(() => {
getNewHeight(); getNewHeight(false);
});
observer.observe(ref.current, {
attributes: false,
childList: true,
subtree: false,
}); });
pages?.forEach((el) => observer.observe(el));
return () => { return () => {
observer.disconnect(); observer.disconnect();
}; };
}, [getNewHeight]); }, [pages, getNewHeight]);
return ( return (
<animated.div <animated.div

2
src/components/popout/FloatingDragHandle.tsx
View File

@ -6,7 +6,7 @@ export function FloatingDragHandle() {
if (!isMobile) return null; if (!isMobile) return null;
return ( return (
<div className="mx-auto my-2 mb-2 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" /> <div className="mx-auto my-3 -mb-3 h-1 w-12 rounded-full bg-ash-500 bg-opacity-30" />
); );
} }