@100mslive/roomkit-react 0.3.22-alpha.2 → 0.3.22-alpha.4

package/dist/chunk-UZW3C3ML.js

@@ -1,171 +0,0 @@
-import {
-  Pagination,
-  usePagesWithTiles,
-  useVideoTileContext
-} from "./chunk-B3HHL3ND.js";
-import {
-  VideoTile_default
-} from "./chunk-4BQ3AMVG.js";
-import {
-  Box,
-  Flex
-} from "./chunk-4L5OKEIV.js";
-import {
-  APP_DATA,
-  __spreadProps,
-  __spreadValues,
-  config,
-  init_define_process_env
-} from "./chunk-YDIB6WKJ.js";
-
-// src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx
-init_define_process_env();
-import React from "react";
-var Root = ({
-  children,
-  edgeToEdge,
-  hasSidebar
-}) => {
-  return /* @__PURE__ */ React.createElement(
-    Flex,
-    {
-      direction: hasSidebar ? "row" : "column",
-      css: { h: "100%", flex: "1 1 0", minWidth: 0, gap: "$6", "@md": { gap: edgeToEdge ? 0 : "$6" } }
-    },
-    children
-  );
-};
-var ProminentSection = ({ children, css = {} }) => {
-  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", css: __spreadValues({ flex: "1 1 0", gap: "$2", minHeight: 0 }, css) }, children);
-};
-var SecondarySection = ({
-  tiles,
-  children,
-  edgeToEdge,
-  hasSidebar
-}) => {
-  const tileLayoutProps = useVideoTileContext();
-  if (!(tiles == null ? void 0 : tiles.length)) {
-    return null;
-  }
-  const gridStyles = hasSidebar ? {
-    gridTemplateColumns: "1fr",
-    gridTemplateRows: `repeat(${tiles.length}, minmax(0, 1fr))`,
-    maxHeight: "100%",
-    width: 240
-  } : {
-    gridTemplateRows: React.Children.count(children) > 0 ? "136px auto" : "154px",
-    gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`
-  };
-  return /* @__PURE__ */ React.createElement(
-    Box,
-    {
-      css: __spreadProps(__spreadValues({
-        display: "grid",
-        margin: "auto",
-        gap: hasSidebar ? "$8" : "$2 $4",
-        placeItems: "center"
-      }, gridStyles), {
-        "@md": { gap: edgeToEdge ? 0 : "$4" }
-      })
-    },
-    tiles.map((tile) => {
-      var _a, _b, _c, _d;
-      return /* @__PURE__ */ React.createElement(
-        VideoTile_default,
-        __spreadValues({
-          key: ((_a = tile.track) == null ? void 0 : _a.id) || ((_b = tile.peer) == null ? void 0 : _b.id),
-          peerId: (_c = tile.peer) == null ? void 0 : _c.id,
-          trackId: (_d = tile.track) == null ? void 0 : _d.id,
-          rootCSS: __spreadProps(__spreadValues({
-            padding: 0,
-            maxWidth: 240,
-            aspectRatio: "16 / 9"
-          }, hasSidebar ? { w: "100%" } : { h: "100%" }), {
-            "@md": { aspectRatio: "1" }
-          }),
-          objectFit: "contain"
-        }, tileLayoutProps)
-      );
-    }),
-    children && /* @__PURE__ */ React.createElement(Box, { css: { gridColumn: hasSidebar ? 1 : `1/span ${tiles.length}` } }, children)
-  );
-};
-var ProminenceLayout = {
-  Root,
-  ProminentSection,
-  SecondarySection
-};
-
-// src/Prebuilt/components/SecondaryTiles.tsx
-init_define_process_env();
-import React2, { useEffect, useRef, useState } from "react";
-import { useMedia } from "react-use";
-import { selectAppData, selectSessionStore, selectTrackByID, useHMSStore } from "@100mslive/react-sdk";
-var SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }) => {
-  var _a, _b;
-  const isMobile = useMedia(config.media.md);
-  const maxTileCount = isMobile ? 2 : 4;
-  const [page, setPage] = useState(0);
-  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));
-  const spotlightPeerId = useHMSStore(selectSessionStore("spotlight" /* SPOTLIGHT */));
-  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));
-  const pinnedPeer = (_a = useHMSStore(selectTrackByID(pinnedTrackId))) == null ? void 0 : _a.peerId;
-  const pageChangedAfterPinning = useRef(false);
-  const pagesWithTiles = usePagesWithTiles({
-    peers: spotlightPeerId || pinnedPeer ? [...peers].sort((p1, p2) => {
-      if (activeScreensharePeerId === p1.id) {
-        return -1;
-      }
-      if (activeScreensharePeerId === p2.id) {
-        return 1;
-      }
-      const peerIdList = [pinnedPeer, spotlightPeerId];
-      if (peerIdList.includes(p1.id)) {
-        return -1;
-      }
-      if (peerIdList.includes(p2.id)) {
-        return 1;
-      }
-      return 0;
-    }) : peers,
-    maxTileCount
-  });
-  const pageSize = ((_b = pagesWithTiles[0]) == null ? void 0 : _b.length) || 0;
-  useEffect(() => {
-    var _a2;
-    if (peers.length > 0 && !((_a2 = pagesWithTiles[page]) == null ? void 0 : _a2.length)) {
-      setPage(Math.max(0, page - 1));
-    }
-  }, [peers, page, pagesWithTiles]);
-  useEffect(() => {
-    if (pageSize > 0) {
-      onPageSize == null ? void 0 : onPageSize(pageSize);
-    }
-  }, [pageSize, onPageSize]);
-  useEffect(() => {
-    if ((pinnedPeer || spotlightPeerId) && page !== 0 && !pageChangedAfterPinning.current) {
-      setPage(0);
-      pageChangedAfterPinning.current = true;
-    } else if (!pinnedPeer && !spotlightPeerId) {
-      pageChangedAfterPinning.current = false;
-    }
-  }, [pinnedPeer, spotlightPeerId, page]);
-  return /* @__PURE__ */ React2.createElement(ProminenceLayout.SecondarySection, { tiles: pagesWithTiles[page], edgeToEdge, hasSidebar }, !edgeToEdge && /* @__PURE__ */ React2.createElement(
-    Pagination,
-    {
-      page,
-      onPageChange: (page2) => {
-        setPage(page2);
-        onPageChange == null ? void 0 : onPageChange(page2);
-      },
-      numPages: pagesWithTiles.length
-    }
-  ));
-};
-
-export {
-  ProminenceLayout,
-  SecondaryTiles
-};
-//# sourceMappingURL=chunk-UZW3C3ML.js.map

package/dist/chunk-UZW3C3ML.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx", "../src/Prebuilt/components/SecondaryTiles.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';\nimport { Box, Flex } from '../../../Layout';\nimport { CSS } from '../../../Theme';\n// @ts-ignore: No implicit Any\nimport VideoTile from '../VideoTile';\nimport { useVideoTileContext } from '../hooks/useVideoTileLayout';\n\nconst Root = ({\n  children,\n  edgeToEdge,\n  hasSidebar,\n}: React.PropsWithChildren<{ edgeToEdge?: boolean; hasSidebar?: boolean }>) => {\n  return (\n    <Flex\n      direction={hasSidebar ? 'row' : 'column'}\n      css={{ h: '100%', flex: '1 1 0', minWidth: 0, gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}\n    >\n      {children}\n    </Flex>\n  );\n};\n\nconst ProminentSection = ({ children, css = {} }: React.PropsWithChildren<{ css?: CSS }>) => {\n  return (\n    <Flex direction=\"column\" css={{ flex: '1 1 0', gap: '$2', minHeight: 0, ...css }}>\n      {children}\n    </Flex>\n  );\n};\n\nconst SecondarySection = ({\n  tiles,\n  children,\n  edgeToEdge,\n  hasSidebar,\n}: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean; hasSidebar?: boolean }>) => {\n  const tileLayoutProps = useVideoTileContext();\n  if (!tiles?.length) {\n    return null;\n  }\n  const gridStyles = hasSidebar\n    ? {\n        gridTemplateColumns: '1fr',\n        gridTemplateRows: `repeat(${tiles.length}, minmax(0, 1fr))`,\n        maxHeight: '100%',\n        width: 240,\n      }\n    : {\n        gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',\n        gridTemplateColumns: `repeat(${tiles.length}, minmax(0, 1fr))`,\n      };\n  return (\n    <Box\n      css={{\n        display: 'grid',\n        margin: 'auto',\n        gap: hasSidebar ? '$8' : '$2 $4',\n        placeItems: 'center',\n        ...gridStyles,\n        '@md': { gap: edgeToEdge ? 0 : '$4' },\n      }}\n    >\n      {tiles.map(tile => {\n        return (\n          <VideoTile\n            key={tile.track?.id || tile.peer?.id}\n            peerId={tile.peer?.id}\n            trackId={tile.track?.id}\n            rootCSS={{\n              padding: 0,\n              maxWidth: 240,\n              aspectRatio: '16 / 9',\n              ...(hasSidebar ? { w: '100%' } : { h: '100%' }),\n              '@md': { aspectRatio: '1' },\n            }}\n            objectFit=\"contain\"\n            {...tileLayoutProps}\n          />\n        );\n      })}\n      {children && <Box css={{ gridColumn: hasSidebar ? 1 : `1/span ${tiles.length}` }}>{children}</Box>}\n    </Box>\n  );\n};\n\nexport const ProminenceLayout = {\n  Root,\n  ProminentSection,\n  SecondarySection,\n};\n", "import React, { useEffect, useRef, useState } from 'react';\nimport { useMedia } from 'react-use';\nimport { selectAppData, selectSessionStore, selectTrackByID, useHMSStore } from '@100mslive/react-sdk';\nimport { LayoutProps } from './VideoLayouts/interface';\nimport { ProminenceLayout } from './VideoLayouts/ProminenceLayout';\nimport { config as cssConfig } from '../../Theme';\nimport { Pagination } from './Pagination';\nimport { usePagesWithTiles } from './hooks/useTileLayout';\nimport { APP_DATA, SESSION_STORE_KEY } from '../common/constants';\n\nexport const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, hasSidebar }: LayoutProps) => {\n  const isMobile = useMedia(cssConfig.media.md);\n  const maxTileCount = isMobile ? 2 : 4;\n  const [page, setPage] = useState(0);\n  const pinnedTrackId = useHMSStore(selectAppData(APP_DATA.pinnedTrackId));\n  const spotlightPeerId = useHMSStore(selectSessionStore(SESSION_STORE_KEY.SPOTLIGHT));\n  const activeScreensharePeerId = useHMSStore(selectAppData(APP_DATA.activeScreensharePeerId));\n  const pinnedPeer = useHMSStore(selectTrackByID(pinnedTrackId))?.peerId;\n  const pageChangedAfterPinning = useRef(false);\n  const pagesWithTiles = usePagesWithTiles({\n    peers:\n      spotlightPeerId || pinnedPeer\n        ? [...peers].sort((p1, p2) => {\n            if (activeScreensharePeerId === p1.id) {\n              return -1;\n            }\n            if (activeScreensharePeerId === p2.id) {\n              return 1;\n            }\n            const peerIdList = [pinnedPeer, spotlightPeerId];\n            // put active screenshare peer, pinned peer, spotlight peer at first\n            if (peerIdList.includes(p1.id)) {\n              return -1;\n            }\n            if (peerIdList.includes(p2.id)) {\n              return 1;\n            }\n            return 0;\n          })\n        : peers,\n    maxTileCount,\n  });\n  const pageSize = pagesWithTiles[0]?.length || 0;\n\n  // Handles final peer leaving from the last page\n  useEffect(() => {\n    if (peers.length > 0 && !pagesWithTiles[page]?.length) {\n      setPage(Math.max(0, page - 1));\n    }\n  }, [peers, page, pagesWithTiles]);\n\n  useEffect(() => {\n    if (pageSize > 0) {\n      onPageSize?.(pageSize);\n    }\n  }, [pageSize, onPageSize]);\n\n  useEffect(() => {\n    if ((pinnedPeer || spotlightPeerId) && page !== 0 && !pageChangedAfterPinning.current) {\n      setPage(0);\n      pageChangedAfterPinning.current = true;\n    } else if (!pinnedPeer && !spotlightPeerId) {\n      pageChangedAfterPinning.current = false;\n    }\n  }, [pinnedPeer, spotlightPeerId, page]);\n\n  return (\n    <ProminenceLayout.SecondarySection tiles={pagesWithTiles[page]} edgeToEdge={edgeToEdge} hasSidebar={hasSidebar}>\n      {!edgeToEdge && (\n        <Pagination\n          page={page}\n          onPageChange={page => {\n            setPage(page);\n            onPageChange?.(page);\n          }}\n          numPages={pagesWithTiles.length}\n        />\n      )}\n    </ProminenceLayout.SecondarySection>\n  );\n};\n"],
-  "mappings": "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",
-  "names": ["React", "_a", "React", "page"]
-}