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

package/README.md

@@ -114,20 +114,20 @@ Full-grid overlay for screen sharing, whiteboard, etc.
 
 ## Responsive PiP
 
-PiP supports responsive breakpoints that auto-adjust size based on container width.
+PiP auto-adjusts size based on container width via breakpoints:
 
 ```vue
 <script setup>
-import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet-layout-grid-vue'
+import { FloatingGridItem, GridContainer, GridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meeting-grid-layout-vue'
 </script>
 
 <template>
-  <!-- Standalone FloatingGridItem — auto-responsive -->
+  <!-- Standalone — auto-responsive -->
   <FloatingGridItem :breakpoints="DEFAULT_FLOAT_BREAKPOINTS">
     <VideoTile />
   </FloatingGridItem>
 
-  <!-- Auto-float in 2-person mode — responsive PiP via GridContainer -->
+  <!-- Auto-float in 2-person mode -->
   <GridContainer :count="2" :float-breakpoints="DEFAULT_FLOAT_BREAKPOINTS">
     <GridItem v-for="(p, i) in participants" :key="p.id" :index="i">
       <VideoTile :participant="p" />
@@ -136,16 +136,7 @@ import { FloatingGridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet
 </template>
 ```
 
-Resolve PiP size programmatically:
-
-```ts
-import { resolveFloatSize, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meet-layout-grid-vue'
-
-const size = resolveFloatSize(800, DEFAULT_FLOAT_BREAKPOINTS)
-// → { width: 160, height: 215 }
-```
-
-> See the [main README](https://github.com/thangdevalone/meet-layout-grid#responsive-pip) for full details, default breakpoint table, and custom breakpoint examples.
+> 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.
 
 ## Composables
 

package/dist/index.cjs

@@ -143,6 +143,15 @@ const GridContainer = vue.defineComponent({
       type: Array,
       default: void 0
     },
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+      type: Number,
+      default: void 0
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -167,7 +176,8 @@ const GridContainer = vue.defineComponent({
       itemAspectRatios: props.itemAspectRatios,
       floatWidth: props.floatWidth,
       floatHeight: props.floatHeight,
-      floatBreakpoints: props.floatBreakpoints
+      floatBreakpoints: props.floatBreakpoints,
+      pipIndex: props.pipIndex
     }));
     const grid = useMeetGrid(gridOptions);
     vue.provide(GridContextKey, {

package/dist/index.d.cts

@@ -140,6 +140,15 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PipBreakpoint[]>;
         default: undefined;
     };
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -235,6 +244,15 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PipBreakpoint[]>;
         default: undefined;
     };
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -255,6 +273,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatWidth: number;
     floatHeight: number;
     floatBreakpoints: PipBreakpoint[];
+    pipIndex: number;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.mts

@@ -140,6 +140,15 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PipBreakpoint[]>;
         default: undefined;
     };
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -235,6 +244,15 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PipBreakpoint[]>;
         default: undefined;
     };
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -255,6 +273,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatWidth: number;
     floatHeight: number;
     floatBreakpoints: PipBreakpoint[];
+    pipIndex: number;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.d.ts

@@ -140,6 +140,15 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PipBreakpoint[]>;
         default: undefined;
     };
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -235,6 +244,15 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PipBreakpoint[]>;
         default: undefined;
     };
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+        type: NumberConstructor;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -255,6 +273,7 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     floatWidth: number;
     floatHeight: number;
     floatBreakpoints: PipBreakpoint[];
+    pipIndex: number;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{

package/dist/index.mjs

@@ -142,6 +142,15 @@ const GridContainer = defineComponent({
       type: Array,
       default: void 0
     },
+    /**
+     * Index of the participant to show as the floating PiP in 2-person mode.
+     * The other participant will fill the main area.
+     * @default 1 (second participant)
+     */
+    pipIndex: {
+      type: Number,
+      default: void 0
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -166,7 +175,8 @@ const GridContainer = defineComponent({
       itemAspectRatios: props.itemAspectRatios,
       floatWidth: props.floatWidth,
       floatHeight: props.floatHeight,
-      floatBreakpoints: props.floatBreakpoints
+      floatBreakpoints: props.floatBreakpoints,
+      pipIndex: props.pipIndex
     }));
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meeting-grid-layout-vue",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Vue 3 integration for meeting-grid-layout with Motion animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.0",
     "motion-v": "^1.0.0",
-    "@thangdevalone/meeting-grid-layout-core": "1.4.1"
+    "@thangdevalone/meeting-grid-layout-core": "1.5.0"
   },
   "devDependencies": {
     "vue": "^3.4.0",