mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues 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 { PopoutSection } from "@/video/components/popouts/PopoutUtils";
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 { FloatingDragHandle, MobilePopoutSpacer } from "./FloatingDragHandle";
@ -26,27 +26,33 @@ function CardBase(props: { children: ReactNode }) {
const width = useSpringValue(0, {
config: { easing: easings.easeInOutSine, duration: 300 },
});
const [pages, setPages] = useState<NodeListOf<Element> | null>(null);
const getNewHeight = useCallback(() => {
if (!ref.current) return;
const children = ref.current.querySelectorAll(
":scope *[data-floating-page='true']"
);
if (children.length === 0) {
height.start(0);
width.start(0);
return;
}
const lastChild = children[children.length - 1];
const rect = lastChild.getBoundingClientRect();
if (height.get() === 0) {
height.set(rect.height);
width.set(rect.width);
} else {
height.start(rect.height);
width.start(rect.width);
}
}, [height, width]);
const getNewHeight = useCallback(
(updateList = true) => {
if (!ref.current) return;
const children = ref.current.querySelectorAll(
":scope *[data-floating-page='true']"
);
if (updateList) setPages(children);
if (children.length === 0) {
height.start(0);
width.start(0);
return;
}
const lastChild = children[children.length - 1];
const rect = lastChild.getBoundingClientRect();
const rectHeight = lastChild.scrollHeight;
if (height.get() === 0) {
height.set(rectHeight);
width.set(rect.width);
} else {
height.start(rectHeight);
width.start(rect.width);
}
},
[height, width]
);
useEffect(() => {
if (!ref.current) return;
@ -65,22 +71,14 @@ function CardBase(props: { children: ReactNode }) {
}, [getNewHeight]);
useEffect(() => {
if (!ref.current) return;
const children = ref.current.querySelectorAll(
":scope *[data-floating-page='true']"
);
const observer = new ResizeObserver(() => {
getNewHeight();
});
observer.observe(ref.current, {
attributes: false,
childList: true,
subtree: false,
getNewHeight(false);
});
pages?.forEach((el) => observer.observe(el));
return () => {
observer.disconnect();
};
}, [getNewHeight]);
}, [pages, getNewHeight]);
return (
<animated.div

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

@ -6,7 +6,7 @@ export function FloatingDragHandle() {
if (!isMobile) return null;
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" />
);
}