@100mslive/roomkit-react 0.3.23 → 0.3.24-alpha.0

package/dist/RoleProminence-235AFT7F.js

@@ -0,0 +1,116 @@
+import {
+  Grid
+} from "./chunk-HMCBZI3A.js";
+import {
+  InsetTile
+} from "./chunk-YEL5ZTFU.js";
+import {
+  ProminenceLayout,
+  SecondaryTiles
+} from "./chunk-HVYTC3PX.js";
+import {
+  Pagination,
+  usePagesWithTiles,
+  useTileLayout
+} from "./chunk-P6NV2XO4.js";
+import "./chunk-MG3UGW66.js";
+import "./chunk-MUKUP7JU.js";
+import "./chunk-DANANDDE.js";
+import "./chunk-GOXRTCTY.js";
+import {
+  usePinnedTrack,
+  useUISettings
+} from "./chunk-BGSYLCVD.js";
+import {
+  UI_SETTINGS,
+  config,
+  init_define_process_env
+} from "./chunk-GLAJUP3O.js";
+
+// src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
+init_define_process_env();
+import React, { useEffect, useState } from "react";
+import { useMedia } from "react-use";
+import { selectLocalPeer, useHMSStore } from "@100mslive/react-sdk";
+
+// src/Prebuilt/components/hooks/useRoleProminencePeers.tsx
+init_define_process_env();
+import { useMemo } from "react";
+var useRoleProminencePeers = (prominentRoles, peers, isInsetEnabled) => {
+  const pinnedTrack = usePinnedTrack();
+  const [prominentPeers, secondaryPeers] = useMemo(() => {
+    return peers.reduce(
+      (acc, peer) => {
+        if (pinnedTrack) {
+          if (pinnedTrack.peerId === peer.id) {
+            acc[0].push(peer);
+          } else if (!(isInsetEnabled && peer.isLocal)) {
+            acc[1].push(peer);
+          }
+          return acc;
+        }
+        if (peer.isLocal && isInsetEnabled && !(prominentRoles == null ? void 0 : prominentRoles.includes(peer.roleName || ""))) {
+          return acc;
+        }
+        if (prominentRoles == null ? void 0 : prominentRoles.includes(peer.roleName || "")) {
+          acc[0].push(peer);
+        } else {
+          acc[1].push(peer);
+        }
+        return acc;
+      },
+      [[], []]
+    );
+  }, [peers, isInsetEnabled, prominentRoles, pinnedTrack]);
+  return {
+    prominentPeers,
+    secondaryPeers
+  };
+};
+
+// src/Prebuilt/components/VideoLayouts/RoleProminence.tsx
+function RoleProminence({
+  isInsetEnabled = false,
+  prominentRoles = [],
+  peers,
+  onPageChange,
+  onPageSize,
+  edgeToEdge
+}) {
+  var _a;
+  const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);
+  const localPeer = useHMSStore(selectLocalPeer);
+  const isMobile = useMedia(config.media.md);
+  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);
+  maxTileCount = isMobile ? 4 : maxTileCount;
+  const pageList = usePagesWithTiles({
+    peers: prominentPeers,
+    maxTileCount
+  });
+  const { ref, pagesWithTiles } = useTileLayout({
+    pageList,
+    maxTileCount
+  });
+  const [page, setPage] = useState(0);
+  const pageSize = ((_a = pagesWithTiles[0]) == null ? void 0 : _a.length) || 0;
+  useEffect(() => {
+    if (pageSize > 0) {
+      onPageSize == null ? void 0 : onPageSize(pageSize);
+    }
+  }, [pageSize, onPageSize]);
+  return /* @__PURE__ */ React.createElement(ProminenceLayout.Root, null, /* @__PURE__ */ React.createElement(ProminenceLayout.ProminentSection, null, /* @__PURE__ */ React.createElement(Grid, { ref, tiles: pagesWithTiles[page] })), !edgeToEdge && /* @__PURE__ */ React.createElement(
+    Pagination,
+    {
+      page,
+      onPageChange: (page2) => {
+        setPage(page2);
+        onPageChange == null ? void 0 : onPageChange(page2);
+      },
+      numPages: pagesWithTiles.length
+    }
+  ), /* @__PURE__ */ React.createElement(SecondaryTiles, { peers: secondaryPeers, isInsetEnabled, edgeToEdge }), isInsetEnabled && localPeer && prominentPeers.length > 0 && !prominentPeers.includes(localPeer) && /* @__PURE__ */ React.createElement(InsetTile, null));
+}
+export {
+  RoleProminence
+};
+//# sourceMappingURL=RoleProminence-235AFT7F.js.map

package/dist/RoleProminence-235AFT7F.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/components/VideoLayouts/RoleProminence.tsx", "../src/Prebuilt/components/hooks/useRoleProminencePeers.tsx"],
+  "sourcesContent": ["import React, { useEffect, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectLocalPeer, useHMSStore } from '@100mslive/react-sdk';\nimport { config as cssConfig } from '../../../Theme';\nimport { InsetTile } from '../InsetTile';\nimport { Pagination } from '../Pagination';\nimport { SecondaryTiles } from '../SecondaryTiles';\nimport { Grid } from './Grid';\nimport { LayoutProps } from './interface';\nimport { ProminenceLayout } from './ProminenceLayout';\n// @ts-ignore: No implicit Any\nimport { useUISettings } from '../AppData/useUISettings';\nimport { useRoleProminencePeers } from '../hooks/useRoleProminencePeers';\nimport { usePagesWithTiles, useTileLayout } from '../hooks/useTileLayout';\nimport { UI_SETTINGS } from '../../common/constants';\n\nexport function RoleProminence({\n  isInsetEnabled = false,\n  prominentRoles = [],\n  peers,\n  onPageChange,\n  onPageSize,\n  edgeToEdge,\n}: LayoutProps) {\n  const { prominentPeers, secondaryPeers } = useRoleProminencePeers(prominentRoles, peers, isInsetEnabled);\n  const localPeer = useHMSStore(selectLocalPeer);\n  const isMobile = useMedia(cssConfig.media.md);\n  let maxTileCount = useUISettings(UI_SETTINGS.maxTileCount);\n  maxTileCount = isMobile ? 4 : maxTileCount;\n  const pageList = usePagesWithTiles({\n    peers: prominentPeers,\n    maxTileCount,\n  });\n  const { ref, pagesWithTiles } = useTileLayout({\n    pageList,\n    maxTileCount,\n  });\n  const [page, setPage] = useState(0);\n  const pageSize = pagesWithTiles[0]?.length || 0;\n\n  useEffect(() => {\n    if (pageSize > 0) {\n      onPageSize?.(pageSize);\n    }\n  }, [pageSize, onPageSize]);\n\n  return (\n    <ProminenceLayout.Root>\n      <ProminenceLayout.ProminentSection>\n        <Grid ref={ref} tiles={pagesWithTiles[page]} />\n      </ProminenceLayout.ProminentSection>\n      {!edgeToEdge && (\n        <Pagination\n          page={page}\n          onPageChange={page => {\n            setPage(page);\n            onPageChange?.(page);\n          }}\n          numPages={pagesWithTiles.length}\n        />\n      )}\n      <SecondaryTiles peers={secondaryPeers} isInsetEnabled={isInsetEnabled} edgeToEdge={edgeToEdge} />\n      {isInsetEnabled && localPeer && prominentPeers.length > 0 && !prominentPeers.includes(localPeer) && <InsetTile />}\n    </ProminenceLayout.Root>\n  );\n}\n", "import { useMemo } from 'react';\nimport { HMSPeer } from '@100mslive/react-sdk';\n// @ts-ignore: No implicit Any\nimport { usePinnedTrack } from '../AppData/useUISettings';\n\nexport const useRoleProminencePeers = (prominentRoles: string[], peers: HMSPeer[], isInsetEnabled: boolean) => {\n  const pinnedTrack = usePinnedTrack();\n\n  const [prominentPeers, secondaryPeers] = useMemo(() => {\n    return peers.reduce<[HMSPeer[], HMSPeer[]]>(\n      (acc, peer) => {\n        if (pinnedTrack) {\n          if (pinnedTrack.peerId === peer.id) {\n            acc[0].push(peer);\n          } else if (!(isInsetEnabled && peer.isLocal)) {\n            acc[1].push(peer);\n          }\n          return acc;\n        }\n        if (peer.isLocal && isInsetEnabled && !prominentRoles?.includes(peer.roleName || '')) {\n          return acc;\n        }\n        if (prominentRoles?.includes(peer.roleName || '')) {\n          acc[0].push(peer);\n        } else {\n          acc[1].push(peer);\n        }\n\n        return acc;\n      },\n      [[], []],\n    );\n  }, [peers, isInsetEnabled, prominentRoles, pinnedTrack]);\n\n  return {\n    prominentPeers,\n    secondaryPeers,\n  };\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,OAAO,SAAS,WAAW,gBAAgB;AAC3C,SAAS,gBAAgB;AACzB,SAAS,iBAAiB,mBAAmB;;;ACF7C;AAAA,SAAS,eAAe;AAKjB,IAAM,yBAAyB,CAAC,gBAA0B,OAAkB,mBAA4B;AAC7G,QAAM,cAAc,eAAe;AAEnC,QAAM,CAAC,gBAAgB,cAAc,IAAI,QAAQ,MAAM;AACrD,WAAO,MAAM;AAAA,MACX,CAAC,KAAK,SAAS;AACb,YAAI,aAAa;AACf,cAAI,YAAY,WAAW,KAAK,IAAI;AAClC,gBAAI,CAAC,EAAE,KAAK,IAAI;AAAA,UAClB,WAAW,EAAE,kBAAkB,KAAK,UAAU;AAC5C,gBAAI,CAAC,EAAE,KAAK,IAAI;AAAA,UAClB;AACA,iBAAO;AAAA,QACT;AACA,YAAI,KAAK,WAAW,kBAAkB,EAAC,iDAAgB,SAAS,KAAK,YAAY,MAAK;AACpF,iBAAO;AAAA,QACT;AACA,YAAI,iDAAgB,SAAS,KAAK,YAAY,KAAK;AACjD,cAAI,CAAC,EAAE,KAAK,IAAI;AAAA,QAClB,OAAO;AACL,cAAI,CAAC,EAAE,KAAK,IAAI;AAAA,QAClB;AAEA,eAAO;AAAA,MACT;AAAA,MACA,CAAC,CAAC,GAAG,CAAC,CAAC;AAAA,IACT;AAAA,EACF,GAAG,CAAC,OAAO,gBAAgB,gBAAgB,WAAW,CAAC;AAEvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;;;ADtBO,SAAS,eAAe;AAAA,EAC7B,iBAAiB;AAAA,EACjB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AAvBhB;AAwBE,QAAM,EAAE,gBAAgB,eAAe,IAAI,uBAAuB,gBAAgB,OAAO,cAAc;AACvG,QAAM,YAAY,YAAY,eAAe;AAC7C,QAAM,WAAW,SAAS,OAAU,MAAM,EAAE;AAC5C,MAAI,eAAe,cAAc,YAAY,YAAY;AACzD,iBAAe,WAAW,IAAI;AAC9B,QAAM,WAAW,kBAAkB;AAAA,IACjC,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACD,QAAM,EAAE,KAAK,eAAe,IAAI,cAAc;AAAA,IAC5C;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,CAAC;AAClC,QAAM,aAAW,oBAAe,CAAC,MAAhB,mBAAmB,WAAU;AAE9C,YAAU,MAAM;AACd,QAAI,WAAW,GAAG;AAChB,+CAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,UAAU,UAAU,CAAC;AAEzB,SACE,oCAAC,iBAAiB,MAAjB,MACC,oCAAC,iBAAiB,kBAAjB,MACC,oCAAC,QAAK,KAAU,OAAO,eAAe,IAAI,GAAG,CAC/C,GACC,CAAC,cACA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAAA,UAAQ;AACpB,gBAAQA,KAAI;AACZ,qDAAeA;AAAA,MACjB;AAAA,MACA,UAAU,eAAe;AAAA;AAAA,EAC3B,GAEF,oCAAC,kBAAe,OAAO,gBAAgB,gBAAgC,YAAwB,GAC9F,kBAAkB,aAAa,eAAe,SAAS,KAAK,CAAC,eAAe,SAAS,SAAS,KAAK,oCAAC,eAAU,CACjH;AAEJ;",
+  "names": ["page"]
+}