@thangdevalone/meet-layout-grid-core 1.0.6 → 1.0.7
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.
- package/README.md +24 -28
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @thangdevalone/meet-layout-grid-core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Grid calculation logic for meet-layout-grid. No dependencies, works with any framework.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -13,7 +13,7 @@ npm install @thangdevalone/meet-layout-grid-core
|
|
|
13
13
|
```typescript
|
|
14
14
|
import { createMeetGrid, createGrid } from '@thangdevalone/meet-layout-grid-core'
|
|
15
15
|
|
|
16
|
-
//
|
|
16
|
+
// Simple grid
|
|
17
17
|
const grid = createGrid({
|
|
18
18
|
dimensions: { width: 800, height: 600 },
|
|
19
19
|
count: 6,
|
|
@@ -24,7 +24,6 @@ const grid = createGrid({
|
|
|
24
24
|
console.log(`Item size: ${grid.width}x${grid.height}`)
|
|
25
25
|
console.log(`Grid: ${grid.cols} cols, ${grid.rows} rows`)
|
|
26
26
|
|
|
27
|
-
// Position each item
|
|
28
27
|
for (let i = 0; i < 6; i++) {
|
|
29
28
|
const { top, left } = grid.getPosition(i)
|
|
30
29
|
console.log(`Item ${i}: top=${top}, left=${left}`)
|
|
@@ -40,7 +39,6 @@ const meetGrid = createMeetGrid({
|
|
|
40
39
|
speakerIndex: 0,
|
|
41
40
|
})
|
|
42
41
|
|
|
43
|
-
// Items may have different sizes in speaker mode
|
|
44
42
|
for (let i = 0; i < 6; i++) {
|
|
45
43
|
const { width, height } = meetGrid.getItemDimensions(i)
|
|
46
44
|
const isMain = meetGrid.isMainItem(i)
|
|
@@ -52,43 +50,41 @@ for (let i = 0; i < 6; i++) {
|
|
|
52
50
|
|
|
53
51
|
### `createGrid(options)`
|
|
54
52
|
|
|
55
|
-
|
|
53
|
+
Basic responsive grid.
|
|
56
54
|
|
|
57
55
|
**Options:**
|
|
58
|
-
- `dimensions: { width, height }`
|
|
59
|
-
- `count: number`
|
|
60
|
-
- `aspectRatio: string`
|
|
61
|
-
- `gap: number`
|
|
56
|
+
- `dimensions: { width, height }` — Container size
|
|
57
|
+
- `count: number` — Number of items
|
|
58
|
+
- `aspectRatio: string` — e.g. `"16:9"`
|
|
59
|
+
- `gap: number` — Gap between items (px)
|
|
62
60
|
|
|
63
61
|
**Returns:**
|
|
64
|
-
- `width
|
|
65
|
-
- `
|
|
66
|
-
- `
|
|
67
|
-
- `cols: number` - Number of columns
|
|
68
|
-
- `getPosition(index): { top, left }` - Position getter
|
|
62
|
+
- `width`, `height` — Item size
|
|
63
|
+
- `rows`, `cols` — Grid shape
|
|
64
|
+
- `getPosition(index): { top, left }`
|
|
69
65
|
|
|
70
66
|
### `createMeetGrid(options)`
|
|
71
67
|
|
|
72
|
-
|
|
68
|
+
Meet-style grid with layout modes.
|
|
73
69
|
|
|
74
|
-
**
|
|
70
|
+
**Extra options:**
|
|
75
71
|
- `layoutMode: 'gallery' | 'speaker' | 'spotlight' | 'sidebar'`
|
|
76
|
-
- `pinnedIndex?: number`
|
|
77
|
-
- `speakerIndex?: number`
|
|
72
|
+
- `pinnedIndex?: number`
|
|
73
|
+
- `speakerIndex?: number`
|
|
78
74
|
- `sidebarPosition?: 'left' | 'right' | 'bottom'`
|
|
79
|
-
- `sidebarRatio?: number`
|
|
75
|
+
- `sidebarRatio?: number` — 0–1
|
|
80
76
|
|
|
81
|
-
**
|
|
82
|
-
- `layoutMode
|
|
83
|
-
- `getItemDimensions(index): { width, height }`
|
|
84
|
-
- `isMainItem(index): boolean`
|
|
77
|
+
**Extra returns:**
|
|
78
|
+
- `layoutMode`
|
|
79
|
+
- `getItemDimensions(index): { width, height }`
|
|
80
|
+
- `isMainItem(index): boolean`
|
|
85
81
|
|
|
86
|
-
## Layout
|
|
82
|
+
## Layout modes
|
|
87
83
|
|
|
88
|
-
- **
|
|
89
|
-
- **
|
|
90
|
-
- **
|
|
91
|
-
- **
|
|
84
|
+
- **gallery** — Same-size tiles in a grid
|
|
85
|
+
- **speaker** — One large tile (~65% height), rest below
|
|
86
|
+
- **spotlight** — One participant only
|
|
87
|
+
- **sidebar** — Main area + thumbnail strip
|
|
92
88
|
|
|
93
89
|
## License
|
|
94
90
|
|