0 || secondHalfSegmentWidth > 0 ? "has-data" : ""} ${segmentClasses} bg-gradient-to-r ${severityColorsBg[severity[0]]}`}
+ className={cn(
+ "segment",
+ {
+ "has-data":
+ firstHalfSegmentWidth > 0 || secondHalfSegmentWidth > 0,
+ },
+ segmentClasses,
+ severity[0] && "bg-gradient-to-r",
+ severity[0] && severityColorsBg[severity[0]],
+ )}
onClick={segmentClick}
onTouchEnd={(event) => handleTouchStart(event, segmentClick)}
>
@@ -210,7 +220,14 @@ export function MotionSegment({
{
+ if (containerWidth && containerHeight && containerRef.current) {
+ return (
+ containerRef.current.offsetWidth - containerRef.current.clientWidth
+ );
+ }
+ return 0;
+ }, [containerRef, containerHeight, containerWidth]);
+
+ const availableWidth = useMemo(
+ () => (scrollBarWidth ? containerWidth + scrollBarWidth : containerWidth),
+ [containerWidth, scrollBarWidth],
+ );
+
const hasScrollbar = useMemo(() => {
- return (
- containerHeight &&
- containerRef.current &&
- containerRef.current.offsetHeight <
- (gridContainerRef.current?.scrollHeight ?? 0)
- );
- }, [containerRef, gridContainerRef, containerHeight]);
+ if (containerHeight && containerRef.current) {
+ return (
+ containerRef.current.offsetHeight < containerRef.current.scrollHeight
+ );
+ }
+ }, [containerRef, containerHeight]);
// fullscreen state
@@ -295,13 +308,13 @@ export default function DraggableGridLayout({
// subtract container margin, 1 camera takes up at least 4 rows
// account for additional margin on bottom of each row
return (
- ((containerWidth ?? window.innerWidth) - 2 * marginValue) /
+ ((availableWidth ?? window.innerWidth) - 2 * marginValue) /
12 /
aspectRatio -
marginValue +
marginValue / 4
);
- }, [containerWidth, marginValue]);
+ }, [availableWidth, marginValue]);
const handleResize: ItemCallback = (
_: Layout[],
@@ -312,7 +325,7 @@ export default function DraggableGridLayout({
const heightDiff = layoutItem.h - oldLayoutItem.h;
const widthDiff = layoutItem.w - oldLayoutItem.w;
const changeCoef = oldLayoutItem.w / oldLayoutItem.h;
- if (Math.abs(heightDiff) < Math.abs(widthDiff)) {
+ if (Math.abs(heightDiff) < Math.abs(widthDiff) || layoutItem.w == 12) {
layoutItem.h = layoutItem.w / changeCoef;
placeholder.h = layoutItem.w / changeCoef;
} else {
@@ -545,6 +558,7 @@ const BirdseyeLivePlayerGridItem = React.forwardRef<
birdseyeConfig={birdseyeConfig}
liveMode={liveMode}
onClick={onClick}
+ containerRef={ref as React.RefObject}
/>
{children}
@@ -603,6 +617,7 @@ const LivePlayerGridItem = React.forwardRef<
cameraConfig={cameraConfig}
preferredLiveMode={preferredLiveMode}
onClick={onClick}
+ containerRef={ref as React.RefObject
}
/>
{children}