@100mslive/roomkit-react 0.1.0

package/dist/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { StyledPagination } from './StyledPagination';

package/dist/PinnedTrackView-453PELNU.js

@@ -0,0 +1,70 @@
+import {
+  GridSidePaneView,
+  VideoTile_default
+} from "./chunk-7YUYZ64D.js";
+import {
+  usePinnedTrack,
+  useTheme
+} from "./chunk-HCAGFNXW.js";
+import "./chunk-ULXGBUSC.js";
+import {
+  Flex
+} from "./chunk-XRJXE6UO.js";
+import {
+  init_define_process_env
+} from "./chunk-KYYP6ZVK.js";
+
+// src/Prebuilt/layouts/PinnedTrackView.jsx
+init_define_process_env();
+import React from "react";
+import { useMeasure } from "react-use";
+import { selectPeers, selectVideoTrackByPeerID, useHMSStore } from "@100mslive/react-sdk";
+var PinnedPeerView = () => {
+  const { aspectRatio } = useTheme();
+  const pinnedTrack = usePinnedTrack();
+  const peerVideoTrack = useHMSStore(selectVideoTrackByPeerID(pinnedTrack.peerId));
+  const pinnedVideoTrack = pinnedTrack && pinnedTrack.type === "audio" ? peerVideoTrack : pinnedTrack;
+  const [ref, { height, width }] = useMeasure();
+  const peers = (useHMSStore(selectPeers) || []).filter(
+    (peer) => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0
+  );
+  if (peers.length === 0) {
+    return null;
+  }
+  const showSidePane = pinnedTrack && peers.length > 1;
+  let finalWidth = aspectRatio.width / aspectRatio.height * height;
+  let finalHeight = height;
+  if (finalWidth > width) {
+    finalWidth = width;
+    finalHeight = aspectRatio.height / aspectRatio.width * width;
+  }
+  return /* @__PURE__ */ React.createElement(Flex, { css: { size: "100%", "@lg": { flexDirection: "column" } } }, /* @__PURE__ */ React.createElement(
+    Flex,
+    {
+      css: {
+        flex: "1 1 0",
+        p: "$8",
+        minHeight: 0,
+        minWidth: 0,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      ref
+    },
+    /* @__PURE__ */ React.createElement(
+      VideoTile_default,
+      {
+        key: pinnedTrack.id,
+        trackId: pinnedVideoTrack == null ? void 0 : pinnedVideoTrack.id,
+        peerId: pinnedTrack.peerId,
+        height: finalHeight,
+        width: finalWidth
+      }
+    )
+  ), showSidePane && /* @__PURE__ */ React.createElement(GridSidePaneView, { peers: peers.filter((peer) => peer.id !== pinnedTrack.peerId) }));
+};
+var PinnedTrackView_default = PinnedPeerView;
+export {
+  PinnedTrackView_default as default
+};
+//# sourceMappingURL=PinnedTrackView-453PELNU.js.map

package/dist/PinnedTrackView-453PELNU.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/layouts/PinnedTrackView.jsx"],
+  "sourcesContent": ["import React from 'react';\nimport { useMeasure } from 'react-use';\nimport { selectPeers, selectVideoTrackByPeerID, useHMSStore } from '@100mslive/react-sdk';\nimport { GridSidePaneView } from '../components/gridView';\nimport VideoTile from '../components/VideoTile';\nimport { Flex } from '../../Layout';\nimport { useTheme } from '../../Theme';\nimport { usePinnedTrack } from '../components/AppData/useUISettings';\n\nconst PinnedPeerView = () => {\n  const { aspectRatio } = useTheme();\n  // can be audio or video track, if tile with only audio track is pinned\n  const pinnedTrack = usePinnedTrack();\n  const peerVideoTrack = useHMSStore(selectVideoTrackByPeerID(pinnedTrack.peerId));\n  const pinnedVideoTrack = pinnedTrack && pinnedTrack.type === 'audio' ? peerVideoTrack : pinnedTrack;\n  const [ref, { height, width }] = useMeasure();\n  const peers = (useHMSStore(selectPeers) || []).filter(\n    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,\n  );\n  if (peers.length === 0) {\n    return null;\n  }\n  const showSidePane = pinnedTrack && peers.length > 1;\n\n  let finalWidth = (aspectRatio.width / aspectRatio.height) * height;\n  let finalHeight = height;\n\n  if (finalWidth > width) {\n    finalWidth = width;\n    finalHeight = (aspectRatio.height / aspectRatio.width) * width;\n  }\n\n  return (\n    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>\n      <Flex\n        css={{\n          flex: '1 1 0',\n          p: '$8',\n          minHeight: 0,\n          minWidth: 0,\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}\n        ref={ref}\n      >\n        <VideoTile\n          key={pinnedTrack.id}\n          trackId={pinnedVideoTrack?.id}\n          peerId={pinnedTrack.peerId}\n          height={finalHeight}\n          width={finalWidth}\n        />\n      </Flex>\n      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== pinnedTrack.peerId)} />}\n    </Flex>\n  );\n};\n\nexport default PinnedPeerView;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA,OAAO,WAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,aAAa,0BAA0B,mBAAmB;AAOnE,IAAM,iBAAiB,MAAM;AAC3B,QAAM,EAAE,YAAY,IAAI,SAAS;AAEjC,QAAM,cAAc,eAAe;AACnC,QAAM,iBAAiB,YAAY,yBAAyB,YAAY,MAAM,CAAC;AAC/E,QAAM,mBAAmB,eAAe,YAAY,SAAS,UAAU,iBAAiB;AACxF,QAAM,CAAC,KAAK,EAAE,QAAQ,MAAM,CAAC,IAAI,WAAW;AAC5C,QAAM,SAAS,YAAY,WAAW,KAAK,CAAC,GAAG;AAAA,IAC7C,UAAQ,KAAK,cAAc,KAAK,cAAc,KAAK,gBAAgB,SAAS;AAAA,EAC9E;AACA,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO;AAAA,EACT;AACA,QAAM,eAAe,eAAe,MAAM,SAAS;AAEnD,MAAI,aAAc,YAAY,QAAQ,YAAY,SAAU;AAC5D,MAAI,cAAc;AAElB,MAAI,aAAa,OAAO;AACtB,iBAAa;AACb,kBAAe,YAAY,SAAS,YAAY,QAAS;AAAA,EAC3D;AAEA,SACE,oCAAC,QAAK,KAAK,EAAE,MAAM,QAAQ,OAAO,EAAE,eAAe,SAAS,EAAE,KAC5D;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,QACH,MAAM;AAAA,QACN,GAAG;AAAA,QACH,WAAW;AAAA,QACX,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,YAAY;AAAA,MACd;AAAA,MACA;AAAA;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,YAAY;AAAA,QACjB,SAAS,qDAAkB;AAAA,QAC3B,QAAQ,YAAY;AAAA,QACpB,QAAQ;AAAA,QACR,OAAO;AAAA;AAAA,IACT;AAAA,EACF,GACC,gBAAgB,oCAAC,oBAAiB,OAAO,MAAM,OAAO,UAAQ,KAAK,OAAO,YAAY,MAAM,GAAG,CAClG;AAEJ;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

package/dist/PinnedTrackView-QQ5FDXJX.css

@@ -0,0 +1,11 @@
+/* ../../../../../../../var/folders/fv/1kj9_dq51v30g3kvkn9wmhbw0000gn/T/tmp-95252-nwoI29302BPZ/1898cf680bd0/Whiteboard.css */
+.c-bUEyht-jvfJsl-side-right > button:nth-child(1) {
+  display: none;
+}
+.c-bUEyht-jvfJsl-side-right > button:nth-child(2) {
+  display: none;
+}
+#TD-PrimaryTools-Image {
+  display: none;
+}
+/*# sourceMappingURL=PinnedTrackView-QQ5FDXJX.css.map */

package/dist/PinnedTrackView-QQ5FDXJX.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../var/folders/fv/1kj9_dq51v30g3kvkn9wmhbw0000gn/T/tmp-95252-nwoI29302BPZ/1898cf680bd0/Whiteboard.css"],
+  "sourcesContent": ["/* Hide undo and redo buttons */\n.c-bUEyht-jvfJsl-side-right > button:nth-child(1) {\n  display: none;\n}\n\n.c-bUEyht-jvfJsl-side-right > button:nth-child(2) {\n  display: none;\n}\n\n#TD-PrimaryTools-Image {\n  display: none;\n}\n"],
+  "mappings": ";AACA;AACE;AAAA;AAGF;AACE;AAAA;AAGF;AACE;AAAA;",
+  "names": []
+}