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

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 +5 -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
@@ -100,17 +100,17 @@ Full-grid overlay for screen sharing, whiteboard, etc.
100
100
 
101
101
  ## Responsive PiP
102
102
 
103
- PiP supports responsive breakpoints that auto-adjust size based on container width.
103
+ PiP auto-adjusts size based on container width via breakpoints:
104
104
 
105
105
  ```tsx
106
- import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet-layout-grid-react'
106
+ import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meeting-grid-layout-react'
107
107
 
108
- // Standalone FloatingGridItem — auto-responsive
108
+ // Standalone — auto-responsive
109
109
  <FloatingGridItem breakpoints={DEFAULT_FLOAT_BREAKPOINTS}>
110
110
  <VideoTile />
111
111
  </FloatingGridItem>
112
112
 
113
- // Auto-float in 2-person mode — responsive PiP via GridContainer
113
+ // Auto-float in 2-person mode
114
114
  <GridContainer count={2} floatBreakpoints={DEFAULT_FLOAT_BREAKPOINTS}>
115
115
  {participants.map((p, i) => (
116
116
  <GridItem key={p.id} index={i}><VideoTile participant={p} /></GridItem>
@@ -118,16 +118,7 @@ import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet
118
118
  </GridContainer>
119
119
  ```
120
120
 
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.
121
+ > 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
122
 
132
123
  ## Hooks
133
124
 
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.0",
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.0"
46
46
  },
47
47
  "devDependencies": {
48
48
  "@types/react": "^18.2.0",