@thangdevalone/meeting-grid-layout-react 1.4.1 → 1.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +6 -14
  2. package/dist/index.cjs +6 -2
  3. package/dist/index.d.cts +8 -2
  4. package/dist/index.d.mts +8 -2
  5. package/dist/index.d.ts +8 -2
  6. package/dist/index.mjs +5 -3
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -51,6 +51,7 @@ Wraps the grid, computes layout, and provides context to children.
51
51
  | `floatWidth` | `number` | - | Width of the auto-float PiP (2-person mode). Overrides breakpoints. |
52
52
  | `floatHeight` | `number` | - | Height of the auto-float PiP (2-person mode). Overrides breakpoints. |
53
53
  | `floatBreakpoints` | `PipBreakpoint[]` | - | Responsive breakpoints for auto-float PiP (see [Responsive PiP](#responsive-pip)) |
54
+ | `pipIndex` | `number` | `1` | Which participant (0 or 1) is the floating PiP in 2-person mode |
54
55
 
55
56
  ### `<GridItem>`
56
57
 
@@ -100,17 +101,17 @@ Full-grid overlay for screen sharing, whiteboard, etc.
100
101
 
101
102
  ## Responsive PiP
102
103
 
103
- PiP supports responsive breakpoints that auto-adjust size based on container width.
104
+ PiP auto-adjusts size based on container width via breakpoints:
104
105
 
105
106
  ```tsx
106
- import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet-layout-grid-react'
107
+ import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meeting-grid-layout-react'
107
108
 
108
- // Standalone FloatingGridItem — auto-responsive
109
+ // Standalone — auto-responsive
109
110
  <FloatingGridItem breakpoints={DEFAULT_FLOAT_BREAKPOINTS}>
110
111
  <VideoTile />
111
112
  </FloatingGridItem>
112
113
 
113
- // Auto-float in 2-person mode — responsive PiP via GridContainer
114
+ // Auto-float in 2-person mode
114
115
  <GridContainer count={2} floatBreakpoints={DEFAULT_FLOAT_BREAKPOINTS}>
115
116
  {participants.map((p, i) => (
116
117
  <GridItem key={p.id} index={i}><VideoTile participant={p} /></GridItem>
@@ -118,16 +119,7 @@ import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet
118
119
  </GridContainer>
119
120
  ```
120
121
 
121
- Resolve PiP size programmatically:
122
-
123
- ```ts
124
- import { resolveFloatSize, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet-layout-grid-react'
125
-
126
- const size = resolveFloatSize(800, DEFAULT_FLOAT_BREAKPOINTS)
127
- // → { width: 160, height: 215 }
128
- ```
129
-
130
- > See the [main README](https://github.com/thangdevalone/meet-layout-grid#responsive-pip) for full details, default breakpoint table, and custom breakpoint examples.
122
+ > See the [main README](https://github.com/thangdevalone/meeting-grid-layout#floating-pip-picture-in-picture) for default breakpoint table, custom breakpoints, and `resolveFloatSize` utility.
131
123
 
132
124
  ## Hooks
133
125
 
package/dist/index.cjs CHANGED
@@ -88,6 +88,7 @@ const GridContainer = React.forwardRef(function GridContainer2({
88
88
  floatWidth,
89
89
  floatHeight,
90
90
  floatBreakpoints,
91
+ pipIndex,
91
92
  ...props
92
93
  }, forwardedRef) {
93
94
  const internalRef = React.useRef(null);
@@ -109,7 +110,8 @@ const GridContainer = React.forwardRef(function GridContainer2({
109
110
  itemAspectRatios,
110
111
  floatWidth,
111
112
  floatHeight,
112
- floatBreakpoints
113
+ floatBreakpoints,
114
+ pipIndex
113
115
  };
114
116
  const grid = useMeetGrid(gridOptions);
115
117
  const containerStyle = {
@@ -379,7 +381,7 @@ const FloatingGridItem = React.forwardRef(
379
381
  const [currentAnchor, setCurrentAnchor] = React__default.useState(initialAnchor);
380
382
  const resolvedSize = React__default.useMemo(() => {
381
383
  if (breakpoints && breakpoints.length > 0 && dimensions.width > 0) {
382
- return resolveFloatSize(dimensions.width, breakpoints);
384
+ return meetingGridLayoutCore.resolveFloatSize(dimensions.width, breakpoints);
383
385
  }
384
386
  return null;
385
387
  }, [breakpoints, dimensions.width]);
@@ -513,12 +515,14 @@ const GridOverlay = React.forwardRef(function GridOverlay2({ visible = true, bac
513
515
  );
514
516
  });
515
517
 
518
+ exports.DEFAULT_FLOAT_BREAKPOINTS = meetingGridLayoutCore.DEFAULT_FLOAT_BREAKPOINTS;
516
519
  exports.createGrid = meetingGridLayoutCore.createGrid;
517
520
  exports.createGridItemPositioner = meetingGridLayoutCore.createGridItemPositioner;
518
521
  exports.createMeetGrid = meetingGridLayoutCore.createMeetGrid;
519
522
  exports.getAspectRatio = meetingGridLayoutCore.getAspectRatio;
520
523
  exports.getGridItemDimensions = meetingGridLayoutCore.getGridItemDimensions;
521
524
  exports.getSpringConfig = meetingGridLayoutCore.getSpringConfig;
525
+ exports.resolveFloatSize = meetingGridLayoutCore.resolveFloatSize;
522
526
  exports.springPresets = meetingGridLayoutCore.springPresets;
523
527
  exports.FloatingGridItem = FloatingGridItem;
524
528
  exports.GridContainer = GridContainer;
package/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
3
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, ContentDimensions } from '@thangdevalone/meeting-grid-layout-core';
4
- export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
3
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint, ContentDimensions } from '@thangdevalone/meeting-grid-layout-core';
4
+ export { ContentDimensions, DEFAULT_FLOAT_BREAKPOINTS, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, PipBreakpoint, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, springPresets } from '@thangdevalone/meeting-grid-layout-core';
5
5
  import { HTMLMotionProps, Transition } from 'motion/react';
6
6
 
7
7
  interface GridContextValue {
@@ -103,6 +103,12 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
103
103
  * ]}
104
104
  */
105
105
  floatBreakpoints?: PipBreakpoint[];
106
+ /**
107
+ * Index of the participant to show as the floating PiP in 2-person mode.
108
+ * The other participant will fill the main area.
109
+ * @default 1 (second participant)
110
+ */
111
+ pipIndex?: number;
106
112
  }
107
113
  /**
108
114
  * Container component for the meet grid.
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
3
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, ContentDimensions } from '@thangdevalone/meeting-grid-layout-core';
4
- export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
3
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint, ContentDimensions } from '@thangdevalone/meeting-grid-layout-core';
4
+ export { ContentDimensions, DEFAULT_FLOAT_BREAKPOINTS, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, PipBreakpoint, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, springPresets } from '@thangdevalone/meeting-grid-layout-core';
5
5
  import { HTMLMotionProps, Transition } from 'motion/react';
6
6
 
7
7
  interface GridContextValue {
@@ -103,6 +103,12 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
103
103
  * ]}
104
104
  */
105
105
  floatBreakpoints?: PipBreakpoint[];
106
+ /**
107
+ * Index of the participant to show as the floating PiP in 2-person mode.
108
+ * The other participant will fill the main area.
109
+ * @default 1 (second participant)
110
+ */
111
+ pipIndex?: number;
106
112
  }
107
113
  /**
108
114
  * Container component for the meet grid.
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
3
- import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, ContentDimensions } from '@thangdevalone/meeting-grid-layout-core';
4
- export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
3
+ import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint, ContentDimensions } from '@thangdevalone/meeting-grid-layout-core';
4
+ export { ContentDimensions, DEFAULT_FLOAT_BREAKPOINTS, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, PipBreakpoint, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, springPresets } from '@thangdevalone/meeting-grid-layout-core';
5
5
  import { HTMLMotionProps, Transition } from 'motion/react';
6
6
 
7
7
  interface GridContextValue {
@@ -103,6 +103,12 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
103
103
  * ]}
104
104
  */
105
105
  floatBreakpoints?: PipBreakpoint[];
106
+ /**
107
+ * Index of the participant to show as the floating PiP in 2-person mode.
108
+ * The other participant will fill the main area.
109
+ * @default 1 (second participant)
110
+ */
111
+ pipIndex?: number;
106
112
  }
107
113
  /**
108
114
  * Container component for the meet grid.
package/dist/index.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import React, { createContext, useContext, useState, useEffect, useMemo, forwardRef, useRef } from 'react';
2
- import { createMeetGrid, getSpringConfig } from '@thangdevalone/meeting-grid-layout-core';
3
- export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
2
+ import { createMeetGrid, getSpringConfig, resolveFloatSize } from '@thangdevalone/meeting-grid-layout-core';
3
+ export { DEFAULT_FLOAT_BREAKPOINTS, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, springPresets } from '@thangdevalone/meeting-grid-layout-core';
4
4
  import { useMotionValue, animate, motion } from 'motion/react';
5
5
 
6
6
  const GridContext = createContext(null);
@@ -83,6 +83,7 @@ const GridContainer = forwardRef(function GridContainer2({
83
83
  floatWidth,
84
84
  floatHeight,
85
85
  floatBreakpoints,
86
+ pipIndex,
86
87
  ...props
87
88
  }, forwardedRef) {
88
89
  const internalRef = useRef(null);
@@ -104,7 +105,8 @@ const GridContainer = forwardRef(function GridContainer2({
104
105
  itemAspectRatios,
105
106
  floatWidth,
106
107
  floatHeight,
107
- floatBreakpoints
108
+ floatBreakpoints,
109
+ pipIndex
108
110
  };
109
111
  const grid = useMeetGrid(gridOptions);
110
112
  const containerStyle = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thangdevalone/meeting-grid-layout-react",
3
- "version": "1.4.1",
3
+ "version": "1.5.1",
4
4
  "description": "React integration for meeting-grid-layout with Motion animations",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -42,7 +42,7 @@
42
42
  },
43
43
  "dependencies": {
44
44
  "motion": "^11.15.0",
45
- "@thangdevalone/meeting-grid-layout-core": "1.4.1"
45
+ "@thangdevalone/meeting-grid-layout-core": "1.5.1"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@types/react": "^18.2.0",