@thangdevalone/meeting-grid-layout-react 1.4.1

package/dist/index.mjs

@@ -0,0 +1,511 @@
+import React, { createContext, useContext, useState, useEffect, useMemo, forwardRef, useRef } from 'react';
+import { createMeetGrid, getSpringConfig } from '@thangdevalone/meeting-grid-layout-core';
+export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
+import { useMotionValue, animate, motion } from 'motion/react';
+
+const GridContext = createContext(null);
+function useGridContext() {
+  const context = useContext(GridContext);
+  if (!context) {
+    throw new Error("useGridContext must be used within a GridContainer");
+  }
+  return context;
+}
+function useGridDimensions(ref) {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { clientWidth: width, clientHeight: height } = entry.target;
+        setDimensions((prev) => {
+          if (prev.width === width && prev.height === height) {
+            return prev;
+          }
+          return { width, height };
+        });
+      }
+    });
+    observer.observe(element);
+    setDimensions({
+      width: element.clientWidth,
+      height: element.clientHeight
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref]);
+  return dimensions;
+}
+function useMeetGrid(options) {
+  const itemAspectRatiosKey = options.itemAspectRatios?.join(",") ?? "";
+  return useMemo(() => {
+    return createMeetGrid(options);
+  }, [
+    options.dimensions.width,
+    options.dimensions.height,
+    options.count,
+    options.aspectRatio,
+    options.gap,
+    options.layoutMode,
+    options.pinnedIndex,
+    options.othersPosition,
+    options.maxItemsPerPage,
+    options.currentPage,
+    options.maxVisible,
+    options.currentVisiblePage,
+    itemAspectRatiosKey
+  ]);
+}
+function useGridAnimation(preset = "smooth") {
+  return useMemo(() => getSpringConfig(preset), [preset]);
+}
+
+const GridContainer = forwardRef(function GridContainer2({
+  children,
+  aspectRatio = "16:9",
+  gap = 8,
+  count,
+  layoutMode = "gallery",
+  pinnedIndex,
+  othersPosition,
+  springPreset = "smooth",
+  style,
+  className,
+  maxItemsPerPage,
+  currentPage,
+  maxVisible,
+  currentVisiblePage,
+  itemAspectRatios,
+  floatWidth,
+  floatHeight,
+  floatBreakpoints,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef(null);
+  const ref = forwardedRef || internalRef;
+  const dimensions = useGridDimensions(ref);
+  const childCount = count ?? React.Children.count(children);
+  const gridOptions = {
+    dimensions,
+    count: childCount,
+    aspectRatio,
+    gap,
+    layoutMode,
+    pinnedIndex,
+    othersPosition,
+    maxItemsPerPage,
+    currentPage,
+    maxVisible,
+    currentVisiblePage,
+    itemAspectRatios,
+    floatWidth,
+    floatHeight,
+    floatBreakpoints
+  };
+  const grid = useMeetGrid(gridOptions);
+  const containerStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+});
+const GridItem = forwardRef(function GridItem2({
+  index,
+  children,
+  itemAspectRatio,
+  transition: customTransition,
+  disableAnimation = false,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { grid, springPreset, dimensions: containerDimensions } = useGridContext();
+  const isFloat = grid ? grid.floatIndex === index : false;
+  const isVisible = grid ? grid.isItemVisible(index) : false;
+  const isMain = grid ? grid.isMainItem(index) : false;
+  const isHidden = !grid || !isVisible || grid.layoutMode === "spotlight" && !isMain;
+  const position = grid && !isHidden ? grid.getPosition(index) : { top: 0, left: 0 };
+  const itemDims = grid && !isHidden ? grid.getItemDimensions(index) : { width: 0, height: 0 };
+  const floatDims = grid?.floatDimensions ?? { width: 120, height: 160 };
+  const [floatAnchor, setFloatAnchor] = React.useState("bottom-right");
+  const floatX = useMotionValue(0);
+  const floatY = useMotionValue(0);
+  const [floatInitialized, setFloatInitialized] = React.useState(false);
+  const getFloatCornerPos = React.useCallback(
+    (corner) => {
+      const padding = 12;
+      const fw = floatDims.width;
+      const fh = floatDims.height;
+      switch (corner) {
+        case "top-left":
+          return { x: padding, y: padding };
+        case "top-right":
+          return { x: containerDimensions.width - fw - padding, y: padding };
+        case "bottom-left":
+          return { x: padding, y: containerDimensions.height - fh - padding };
+        case "bottom-right":
+        default:
+          return {
+            x: containerDimensions.width - fw - padding,
+            y: containerDimensions.height - fh - padding
+          };
+      }
+    },
+    [containerDimensions.width, containerDimensions.height, floatDims.width, floatDims.height]
+  );
+  React.useEffect(() => {
+    if (!isFloat) {
+      setFloatInitialized(false);
+    }
+  }, [isFloat]);
+  React.useEffect(() => {
+    if (isFloat && containerDimensions.width > 0 && containerDimensions.height > 0 && !floatInitialized) {
+      const pos = getFloatCornerPos(floatAnchor);
+      floatX.set(pos.x);
+      floatY.set(pos.y);
+      setFloatInitialized(true);
+    }
+  }, [
+    isFloat,
+    containerDimensions.width,
+    containerDimensions.height,
+    floatAnchor,
+    getFloatCornerPos,
+    floatInitialized,
+    floatX,
+    floatY
+  ]);
+  React.useEffect(() => {
+    if (isFloat && floatInitialized && containerDimensions.width > 0 && containerDimensions.height > 0) {
+      const pos = getFloatCornerPos(floatAnchor);
+      const cfg = { type: "spring", stiffness: 400, damping: 30 };
+      animate(floatX, pos.x, cfg);
+      animate(floatY, pos.y, cfg);
+    }
+  }, [
+    isFloat,
+    floatAnchor,
+    containerDimensions.width,
+    containerDimensions.height,
+    getFloatCornerPos,
+    floatInitialized,
+    floatX,
+    floatY
+  ]);
+  const gridX = useMotionValue(0);
+  const gridY = useMotionValue(0);
+  const gridAnimReady = useRef(false);
+  const springConfig = getSpringConfig(springPreset);
+  React.useEffect(() => {
+    if (isFloat || isHidden) {
+      gridAnimReady.current = false;
+      return;
+    }
+    if (!gridAnimReady.current) {
+      gridX.set(position.left);
+      gridY.set(position.top);
+      gridAnimReady.current = true;
+    } else {
+      const cfg = {
+        type: "spring",
+        stiffness: springConfig.stiffness,
+        damping: springConfig.damping
+      };
+      animate(gridX, position.left, cfg);
+      animate(gridY, position.top, cfg);
+    }
+  }, [
+    position.top,
+    position.left,
+    isFloat,
+    isHidden,
+    gridX,
+    gridY,
+    springConfig.stiffness,
+    springConfig.damping
+  ]);
+  if (isHidden) {
+    return null;
+  }
+  const contentDimensions = grid.getItemContentDimensions(index, itemAspectRatio);
+  const transition = customTransition ?? {
+    type: springConfig.type,
+    stiffness: springConfig.stiffness,
+    damping: springConfig.damping
+  };
+  const lastVisibleOthersIndex = grid.getLastVisibleOthersIndex();
+  const isLastVisibleOther = index === lastVisibleOthersIndex;
+  const hiddenCount = grid.hiddenCount;
+  const renderChildren = () => {
+    if (typeof children === "function") {
+      return children({ contentDimensions, isLastVisibleOther, hiddenCount, isFloat });
+    }
+    return children;
+  };
+  if (isFloat) {
+    if (containerDimensions.width === 0 || containerDimensions.height === 0)
+      return null;
+    const findNearestCorner = (posX, posY) => {
+      const centerX = posX + floatDims.width / 2;
+      const centerY = posY + floatDims.height / 2;
+      const isLeft = centerX < containerDimensions.width / 2;
+      const isTop = centerY < containerDimensions.height / 2;
+      if (isTop && isLeft)
+        return "top-left";
+      if (isTop && !isLeft)
+        return "top-right";
+      if (!isTop && isLeft)
+        return "bottom-left";
+      return "bottom-right";
+    };
+    const dragConstraints = {
+      left: 12,
+      right: containerDimensions.width - floatDims.width - 12,
+      top: 12,
+      bottom: containerDimensions.height - floatDims.height - 12
+    };
+    const handleDragEnd = () => {
+      const currentX = floatX.get();
+      const currentY = floatY.get();
+      const nearestCorner = findNearestCorner(currentX, currentY);
+      setFloatAnchor(nearestCorner);
+      const snapPos = getFloatCornerPos(nearestCorner);
+      const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+      animate(floatX, snapPos.x, springCfg);
+      animate(floatY, snapPos.y, springCfg);
+    };
+    const floatingStyle = {
+      position: "absolute",
+      width: floatDims.width,
+      height: floatDims.height,
+      borderRadius: 12,
+      boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+      overflow: "hidden",
+      cursor: "grab",
+      zIndex: 100,
+      touchAction: "none",
+      left: 0,
+      top: 0,
+      ...style
+    };
+    return /* @__PURE__ */ React.createElement(
+      motion.div,
+      {
+        ref,
+        drag: true,
+        dragMomentum: false,
+        dragElastic: 0.1,
+        dragConstraints,
+        style: { ...floatingStyle, x: floatX, y: floatY },
+        className,
+        onDragEnd: handleDragEnd,
+        whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+        transition: { type: "spring", stiffness: 400, damping: 30 },
+        "data-grid-index": index,
+        "data-grid-float": true,
+        ...props
+      },
+      renderChildren()
+    );
+  }
+  if (disableAnimation) {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        style: {
+          position: "absolute",
+          width: itemDims.width,
+          height: itemDims.height,
+          top: position.top,
+          left: position.left,
+          ...style
+        },
+        className,
+        "data-grid-index": index,
+        "data-grid-main": isMain,
+        ...props
+      },
+      renderChildren()
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      ref,
+      initial: { width: itemDims.width, height: itemDims.height },
+      animate: { width: itemDims.width, height: itemDims.height },
+      transition,
+      style: { position: "absolute", top: 0, left: 0, x: gridX, y: gridY, ...style },
+      className,
+      "data-grid-index": index,
+      "data-grid-main": isMain,
+      ...props
+    },
+    renderChildren()
+  );
+});
+const FloatingGridItem = forwardRef(
+  function FloatingGridItem2({
+    children,
+    width = 120,
+    height = 160,
+    breakpoints,
+    initialPosition = { x: 16, y: 16 },
+    anchor: initialAnchor = "bottom-right",
+    visible = true,
+    edgePadding = 12,
+    onAnchorChange,
+    transition,
+    borderRadius = 12,
+    boxShadow = "0 4px 20px rgba(0,0,0,0.3)",
+    className,
+    style,
+    ...props
+  }, ref) {
+    const { dimensions } = useGridContext();
+    const [currentAnchor, setCurrentAnchor] = React.useState(initialAnchor);
+    const resolvedSize = React.useMemo(() => {
+      if (breakpoints && breakpoints.length > 0 && dimensions.width > 0) {
+        return resolveFloatSize(dimensions.width, breakpoints);
+      }
+      return null;
+    }, [breakpoints, dimensions.width]);
+    const effectiveWidth = resolvedSize?.width ?? width;
+    const effectiveHeight = resolvedSize?.height ?? height;
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    const [isInitialized, setIsInitialized] = React.useState(false);
+    const getCornerPosition = React.useCallback(
+      (corner) => {
+        const padding = edgePadding + initialPosition.x;
+        switch (corner) {
+          case "top-left":
+            return { x: padding, y: padding };
+          case "top-right":
+            return { x: dimensions.width - effectiveWidth - padding, y: padding };
+          case "bottom-left":
+            return { x: padding, y: dimensions.height - effectiveHeight - padding };
+          case "bottom-right":
+          default:
+            return {
+              x: dimensions.width - effectiveWidth - padding,
+              y: dimensions.height - effectiveHeight - padding
+            };
+        }
+      },
+      [dimensions.width, dimensions.height, effectiveWidth, effectiveHeight, edgePadding, initialPosition.x]
+    );
+    React.useEffect(() => {
+      if (dimensions.width > 0 && dimensions.height > 0 && !isInitialized) {
+        const pos = getCornerPosition(currentAnchor);
+        x.set(pos.x);
+        y.set(pos.y);
+        setIsInitialized(true);
+      }
+    }, [dimensions.width, dimensions.height, currentAnchor, getCornerPosition, isInitialized, x, y]);
+    React.useEffect(() => {
+      if (isInitialized && dimensions.width > 0 && dimensions.height > 0) {
+        const pos = getCornerPosition(currentAnchor);
+        const springConfig = { type: "spring", stiffness: 400, damping: 30 };
+        animate(x, pos.x, springConfig);
+        animate(y, pos.y, springConfig);
+      }
+    }, [currentAnchor, dimensions.width, dimensions.height, getCornerPosition, isInitialized, x, y]);
+    if (!visible || dimensions.width === 0 || dimensions.height === 0)
+      return null;
+    const findNearestCorner = (posX, posY) => {
+      const centerX = posX + effectiveWidth / 2;
+      const centerY = posY + effectiveHeight / 2;
+      const containerCenterX = dimensions.width / 2;
+      const containerCenterY = dimensions.height / 2;
+      const isLeft = centerX < containerCenterX;
+      const isTop = centerY < containerCenterY;
+      if (isTop && isLeft)
+        return "top-left";
+      if (isTop && !isLeft)
+        return "top-right";
+      if (!isTop && isLeft)
+        return "bottom-left";
+      return "bottom-right";
+    };
+    const dragConstraints = {
+      left: edgePadding,
+      right: dimensions.width - effectiveWidth - edgePadding,
+      top: edgePadding,
+      bottom: dimensions.height - effectiveHeight - edgePadding
+    };
+    const floatingStyle = {
+      position: "absolute",
+      width: effectiveWidth,
+      height: effectiveHeight,
+      borderRadius,
+      boxShadow,
+      overflow: "hidden",
+      cursor: "grab",
+      zIndex: 100,
+      touchAction: "none",
+      left: 0,
+      top: 0,
+      ...style
+    };
+    const handleDragEnd = () => {
+      const currentX = x.get();
+      const currentY = y.get();
+      const nearestCorner = findNearestCorner(currentX, currentY);
+      setCurrentAnchor(nearestCorner);
+      onAnchorChange?.(nearestCorner);
+      const snapPos = getCornerPosition(nearestCorner);
+      const springConfig = { type: "spring", stiffness: 400, damping: 30 };
+      animate(x, snapPos.x, springConfig);
+      animate(y, snapPos.y, springConfig);
+    };
+    return /* @__PURE__ */ React.createElement(
+      motion.div,
+      {
+        ref,
+        drag: true,
+        dragMomentum: false,
+        dragElastic: 0.1,
+        dragConstraints,
+        style: { ...floatingStyle, x, y },
+        className,
+        onDragEnd: handleDragEnd,
+        whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+        transition: transition ?? { type: "spring", stiffness: 400, damping: 30 },
+        ...props
+      },
+      children
+    );
+  }
+);
+const GridOverlay = forwardRef(function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor,
+        ...style
+      },
+      ...props
+    },
+    children
+  );
+});
+
+export { FloatingGridItem, GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@thangdevalone/meeting-grid-layout-react",
+  "version": "1.4.1",
+  "description": "React integration for meeting-grid-layout with Motion animations",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "grid",
+    "meeting",
+    "video",
+    "motion",
+    "animation"
+  ],
+  "author": "ThangDevAlone",
+  "license": "MIT",
+  "homepage": "https://github.com/thangdevalone/meeting-grid-layout#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thangdevalone/meeting-grid-layout"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "motion": "^11.15.0",
+    "@thangdevalone/meeting-grid-layout-core": "1.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "unbuild": "^2.0.0",
+    "vitest": "^1.0.0",
+    "rimraf": "^5.0.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --watch",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}