@100mslive/roomkit-react 0.1.0

package/dist/ActiveSpeakerView-H3VYXANB.js

@@ -0,0 +1,39 @@
+import {
+  GridSidePaneView,
+  VideoTile_default
+} from "./chunk-7YUYZ64D.js";
+import "./chunk-HCAGFNXW.js";
+import "./chunk-ULXGBUSC.js";
+import {
+  Box,
+  Flex
+} from "./chunk-XRJXE6UO.js";
+import {
+  init_define_process_env
+} from "./chunk-KYYP6ZVK.js";
+
+// src/Prebuilt/layouts/ActiveSpeakerView.jsx
+init_define_process_env();
+import React, { useRef } from "react";
+import { selectDominantSpeaker, selectPeers, useHMSStore } from "@100mslive/react-sdk";
+var ActiveSpeakerView = () => {
+  const dominantSpeaker = useHMSStore(selectDominantSpeaker);
+  const latestDominantSpeakerRef = useRef(dominantSpeaker);
+  const peers = (useHMSStore(selectPeers) || []).filter(
+    (peer) => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0
+  );
+  if (dominantSpeaker) {
+    latestDominantSpeakerRef.current = dominantSpeaker;
+  }
+  if (peers.length === 0) {
+    return null;
+  }
+  const activeSpeaker = latestDominantSpeakerRef.current || peers[0];
+  const showSidePane = activeSpeaker && peers.length > 1;
+  return /* @__PURE__ */ React.createElement(Flex, { css: { size: "100%", "@lg": { flexDirection: "column" } } }, /* @__PURE__ */ React.createElement(Box, { css: { flex: "1 1 0 " } }, /* @__PURE__ */ React.createElement(VideoTile_default, { peerId: activeSpeaker.id, width: "100%", height: "100%" })), showSidePane && /* @__PURE__ */ React.createElement(GridSidePaneView, { peers: peers.filter((peer) => peer.id !== activeSpeaker.id) }));
+};
+var ActiveSpeakerView_default = ActiveSpeakerView;
+export {
+  ActiveSpeakerView_default as default
+};
+//# sourceMappingURL=ActiveSpeakerView-H3VYXANB.js.map

package/dist/ActiveSpeakerView-H3VYXANB.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/Prebuilt/layouts/ActiveSpeakerView.jsx"],
+  "sourcesContent": ["import React, { useRef } from 'react';\nimport { selectDominantSpeaker, selectPeers, useHMSStore } from '@100mslive/react-sdk';\nimport { GridSidePaneView } from '../components/gridView';\nimport VideoTile from '../components/VideoTile';\nimport { Box, Flex } from '../../Layout';\n\nconst ActiveSpeakerView = () => {\n  const dominantSpeaker = useHMSStore(selectDominantSpeaker);\n  const latestDominantSpeakerRef = useRef(dominantSpeaker);\n  const peers = (useHMSStore(selectPeers) || []).filter(\n    peer => peer.videoTrack || peer.audioTrack || peer.auxiliaryTracks.length > 0,\n  );\n  // if there is no current dominant speaker latest keeps pointing to last\n  if (dominantSpeaker) {\n    latestDominantSpeakerRef.current = dominantSpeaker;\n  }\n  if (peers.length === 0) {\n    return null;\n  }\n  // show local peer if there hasn't been any dominant speaker\n  const activeSpeaker = latestDominantSpeakerRef.current || peers[0];\n  const showSidePane = activeSpeaker && peers.length > 1;\n\n  return (\n    <Flex css={{ size: '100%', '@lg': { flexDirection: 'column' } }}>\n      <Box css={{ flex: '1 1 0 ' }}>\n        <VideoTile peerId={activeSpeaker.id} width=\"100%\" height=\"100%\" />\n      </Box>\n      {showSidePane && <GridSidePaneView peers={peers.filter(peer => peer.id !== activeSpeaker.id)} />}\n    </Flex>\n  );\n};\n\nexport default ActiveSpeakerView;\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA,OAAO,SAAS,cAAc;AAC9B,SAAS,uBAAuB,aAAa,mBAAmB;AAKhE,IAAM,oBAAoB,MAAM;AAC9B,QAAM,kBAAkB,YAAY,qBAAqB;AACzD,QAAM,2BAA2B,OAAO,eAAe;AACvD,QAAM,SAAS,YAAY,WAAW,KAAK,CAAC,GAAG;AAAA,IAC7C,UAAQ,KAAK,cAAc,KAAK,cAAc,KAAK,gBAAgB,SAAS;AAAA,EAC9E;AAEA,MAAI,iBAAiB;AACnB,6BAAyB,UAAU;AAAA,EACrC;AACA,MAAI,MAAM,WAAW,GAAG;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,yBAAyB,WAAW,MAAM,CAAC;AACjE,QAAM,eAAe,iBAAiB,MAAM,SAAS;AAErD,SACE,oCAAC,QAAK,KAAK,EAAE,MAAM,QAAQ,OAAO,EAAE,eAAe,SAAS,EAAE,KAC5D,oCAAC,OAAI,KAAK,EAAE,MAAM,SAAS,KACzB,oCAAC,qBAAU,QAAQ,cAAc,IAAI,OAAM,QAAO,QAAO,QAAO,CAClE,GACC,gBAAgB,oCAAC,oBAAiB,OAAO,MAAM,OAAO,UAAQ,KAAK,OAAO,cAAc,EAAE,GAAG,CAChG;AAEJ;AAEA,IAAO,4BAAQ;",
+  "names": []
+}

package/dist/ActiveSpeakerView-REZLWPPI.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=ActiveSpeakerView-REZLWPPI.css.map */

package/dist/ActiveSpeakerView-REZLWPPI.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": []
+}

package/dist/AudioLevel/AudioLevel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { HMSTrackID } from '@100mslive/hms-video-store';
+/**
+ * pass in a track id and get a ref. That ref can be attached to an element which will have border
+ * as per audio level post that.
+ */
+export declare function useBorderAudioLevel(audioTrackId?: HMSTrackID): import("react").MutableRefObject<null>;
+export declare const sigmoid: (z: number) => number;

package/dist/AudioLevel/index.d.ts

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

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,487 @@
+import React from 'react';
+import { VariantProps } from '@stitches/react';
+export declare const StyledAvatar: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    shape?: "circle" | "square" | undefined;
+    size?: "medium" | "small" | "large" | undefined;
+}, {
+    allowMotion: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    ls: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    allowMotion: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    ls: string;
+}, {
+    colors: {
+        bgPrimary: string;
+        bgSecondary: string;
+        bgTertiary: string;
+        surfaceLight: string;
+        surfaceLighter: string;
+        textPrimary: string;
+        textSecondary: string;
+        textDisabled: string;
+        textInvert: string;
+        textHighEmp: string;
+        textMedEmp: string;
+        iconBtn: string;
+        iconHoverBg: string;
+        transparentBg: string;
+        mainBg: string;
+        tileBg: string;
+        secondaryDisabled: string;
+        previewBg: string;
+        statsBg: string;
+        menuBg: string;
+        inputBg: string;
+        toastBg: string;
+        borderDefault: string;
+        backgroundDefault: string;
+        borderLighter: string;
+        white: string;
+        black: string;
+        transparent: string;
+        orange: string;
+        cyan: string;
+        tamarind: string;
+        yellow: string;
+        twinYellow: string;
+        green: string;
+        darkgreen: string;
+        purple: string;
+        borderLight: string;
+        borderAccent: string;
+        success: string;
+        error: string;
+        errorTint: string;
+        warning: string;
+        brandLight: string;
+        brandDefault: string;
+        brandDark: string;
+        brandDisabled: string;
+        grayLight: string;
+        grayDefault: string;
+        grayDark: string;
+        secondaryGray: string;
+        grayDisabled: string;
+        textAccentHigh: string;
+        textAccentMedium: string;
+        textAccentDisabled: string;
+        surfaceDefault: string;
+        surfaceDark: string;
+        backgroundDark: string;
+        backgroundDarker: string;
+        primaryLight: string;
+        primaryDefault: string;
+        primaryDark: string;
+        primaryDisabled: string;
+        secondaryLight: string;
+        secondaryDefault: string;
+        secondaryDark: string;
+        errorDefault: string;
+        errorLight: string;
+        errorDark: string;
+        errorDisabled: string;
+    };
+    shadows: {
+        sm: string;
+        md: string;
+    };
+    fonts: {
+        sans: string;
+    };
+    fontSizes: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        tiny: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fontWeights: {
+        semiBold: number;
+        medium: number;
+        regular: number;
+    };
+    lineHeights: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        tiny: string;
+        xs: string;
+        sm: string;
+        md: string;
+    };
+    radii: {
+        '0': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        round: string;
+    };
+    space: {
+        0: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        px: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+        16: string;
+        17: string;
+        18: string;
+        19: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        100: string;
+    };
+    borderWidths: {
+        light: string;
+        normal: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+}, {
+    width: string;
+    height: string;
+    minWidth: string;
+    maxWidth: string;
+    minHeight: string;
+    maxHeight: string;
+    flexBasis: string;
+    gridTemplateColumns: string;
+    gridTemplateRows: string;
+    blockSize: string;
+    minBlockSize: string;
+    maxBlockSize: string;
+    inlineSize: string;
+    minInlineSize: string;
+    maxInlineSize: string;
+    gap: "space";
+    gridGap: "space";
+    columnGap: "space";
+    gridColumnGap: "space";
+    rowGap: "space";
+    gridRowGap: "space";
+    inset: "space";
+    insetBlock: "space";
+    insetBlockEnd: "space";
+    insetBlockStart: "space";
+    insetInline: "space";
+    insetInlineEnd: "space";
+    insetInlineStart: "space";
+    margin: "space";
+    marginTop: "space";
+    marginRight: "space";
+    marginBottom: "space";
+    marginLeft: "space";
+    marginBlock: "space";
+    marginBlockEnd: "space";
+    marginBlockStart: "space";
+    marginInline: "space";
+    marginInlineEnd: "space";
+    marginInlineStart: "space";
+    padding: "space";
+    paddingTop: "space";
+    paddingRight: "space";
+    paddingBottom: "space";
+    paddingLeft: "space";
+    paddingBlock: "space";
+    paddingBlockEnd: "space";
+    paddingBlockStart: "space";
+    paddingInline: "space";
+    paddingInlineEnd: "space";
+    paddingInlineStart: "space";
+    scrollMargin: "space";
+    scrollMarginTop: "space";
+    scrollMarginRight: "space";
+    scrollMarginBottom: "space";
+    scrollMarginLeft: "space";
+    scrollMarginBlock: "space";
+    scrollMarginBlockEnd: "space";
+    scrollMarginBlockStart: "space";
+    scrollMarginInline: "space";
+    scrollMarginInlineEnd: "space";
+    scrollMarginInlineStart: "space";
+    scrollPadding: "space";
+    scrollPaddingTop: "space";
+    scrollPaddingRight: "space";
+    scrollPaddingBottom: "space";
+    scrollPaddingLeft: "space";
+    scrollPaddingBlock: "space";
+    scrollPaddingBlockEnd: "space";
+    scrollPaddingBlockStart: "space";
+    scrollPaddingInline: "space";
+    scrollPaddingInlineEnd: "space";
+    scrollPaddingInlineStart: "space";
+    top: "space";
+    right: "space";
+    bottom: "space";
+    left: "space";
+    fontSize: "fontSizes";
+    background: "colors";
+    backgroundColor: "colors";
+    backgroundImage: "colors";
+    borderImage: "colors";
+    border: "colors";
+    borderBlock: "colors";
+    borderBlockEnd: "colors";
+    borderBlockStart: "colors";
+    borderBottom: "colors";
+    borderBottomColor: "colors";
+    borderColor: "colors";
+    borderInline: "colors";
+    borderInlineEnd: "colors";
+    borderInlineStart: "colors";
+    borderLeft: "colors";
+    borderLeftColor: "colors";
+    borderRight: "colors";
+    borderRightColor: "colors";
+    borderTop: "colors";
+    borderTopColor: "colors";
+    caretColor: "colors";
+    color: "colors";
+    columnRuleColor: "colors";
+    outline: "colors";
+    outlineColor: "colors";
+    fill: "colors";
+    stroke: "colors";
+    textDecorationColor: "colors";
+    fontFamily: "fonts";
+    fontWeight: "fontWeights";
+    lineHeight: "lineHeights";
+    letterSpacing: "letterSpacings";
+    borderWidth: "borderWidths";
+    borderTopWidth: "borderWidths";
+    borderLeftWidth: "borderWidths";
+    borderRightWidth: "borderWidths";
+    borderBottomWidth: "borderWidths";
+    borderStyle: "borderStyles";
+    borderTopStyle: "borderStyles";
+    borderLeftStyle: "borderStyles";
+    borderRightStyle: "borderStyles";
+    borderBottomStyle: "borderStyles";
+    borderRadius: "radii";
+    borderTopLeftRadius: "radii";
+    borderTopRightRadius: "radii";
+    borderBottomRightRadius: "radii";
+    borderBottomLeftRadius: "radii";
+    boxShadow: "shadows";
+    textShadow: "shadows";
+    transition: "transitions";
+    zIndex: "zIndices";
+}, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "backgroundColor";
+    }) => {
+        backgroundColor: {
+            readonly [$$PropertyValue]: "backgroundColor";
+        };
+    };
+    c: (value: {
+        readonly [$$PropertyValue]: "color";
+    }) => {
+        color: {
+            readonly [$$PropertyValue]: "color";
+        };
+    };
+    r: (value: {
+        readonly [$$ScaleValue]: "radii";
+    }) => {
+        borderRadius: {
+            readonly [$$ScaleValue]: "radii";
+        };
+    };
+    fs: (value: string | number | {
+        readonly [$$PropertyValue]: "fontSize";
+    }) => {
+        fontSize: string | number | {
+            readonly [$$PropertyValue]: "fontSize";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    w: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        width: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    h: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;
+declare type Props = VariantProps<typeof StyledAvatar> & React.ComponentProps<typeof StyledAvatar> & {
+    name: string;
+};
+export declare const Avatar: React.FC<Props>;
+export {};

package/dist/Avatar/getAvatarBg.d.ts

@@ -0,0 +1,7 @@
+/**
+  calculates the initials of the name and choose a background color based on the first later of the initials
+ */
+export declare const getAvatarBg: (name: string) => {
+    initials: string;
+    color: string;
+};

package/dist/Avatar/index.d.ts

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