@100mslive/roomkit-react 0.4.3-alpha.3 → 0.4.3-alpha.5

package/dist/meta.cjs.json

@@ -2369,7 +2369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppContext.tsx": {
-      "bytes": 881,
+      "bytes": 909,
       "imports": [
         {
           "path": "react",
@@ -5769,7 +5769,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 385736,
+      "bytes": 385730,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -11311,9 +11311,14 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-3267-GrJljmUNkgO6/19cd124ec212/tldraw.css": {
-      "bytes": 80111,
+    "../../../../../../../tmp/tmp-3233-xst22yPbgUiV/19ce17a321a0/index.css": {
+      "bytes": 65533,
       "imports": [
+        {
+          "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
+          "kind": "import-rule",
+          "external": true
+        },
         {
           "path": "data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>",
           "kind": "url-token",
@@ -11361,21 +11366,6 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-3267-GrJljmUNkgO6/19cd124ebc10/index.css": {
-      "bytes": 597,
-      "imports": [
-        {
-          "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
-          "kind": "import-rule",
-          "external": true
-        },
-        {
-          "path": "../../../../../../../tmp/tmp-3267-GrJljmUNkgO6/19cd124ec212/tldraw.css",
-          "kind": "import-rule",
-          "original": "@tldraw/tldraw/tldraw.css"
-        }
-      ]
-    },
     "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
       "bytes": 3250,
       "imports": [
@@ -11445,7 +11435,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-3267-GrJljmUNkgO6/19cd124ebc10/index.css",
+          "path": "../../../../../../../tmp/tmp-3233-xst22yPbgUiV/19ce17a321a0/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12168,7 +12158,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 28662,
+      "bytes": 30184,
       "imports": [
         {
           "path": "react",
@@ -12295,6 +12285,11 @@
           "kind": "import-statement",
           "original": "../../Tooltip"
         },
+        {
+          "path": "src/Prebuilt/AppContext.tsx",
+          "kind": "import-statement",
+          "original": "../AppContext"
+        },
         {
           "path": "src/Prebuilt/layouts/WaitingView.tsx",
           "kind": "import-statement",
@@ -14591,7 +14586,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10920,
+      "bytes": 11117,
       "imports": [
         {
           "path": "react",
@@ -15709,7 +15704,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3695494
+      "bytes": 3698223
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -19042,7 +19037,7 @@
       "cssBundle": "dist/index.cjs.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 21904
+          "bytesInOutput": 21782
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 225096
@@ -19321,7 +19316,7 @@
           "bytesInOutput": 925
         },
         "src/Prebuilt/App.tsx": {
-          "bytesInOutput": 8536
+          "bytesInOutput": 8704
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6918
@@ -19573,7 +19568,7 @@
           "bytesInOutput": 10613
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 56255
+          "bytesInOutput": 56248
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19920,7 +19915,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 3051
         },
-        "../../../../../../../tmp/tmp-3267-GrJljmUNkgO6/19cd124ebc10/index.css": {
+        "../../../../../../../tmp/tmp-3233-xst22yPbgUiV/19ce17a321a0/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19930,7 +19925,7 @@
           "bytesInOutput": 2922
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 30000
+          "bytesInOutput": 31534
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3395
@@ -20155,13 +20150,13 @@
           "bytesInOutput": 2777
         }
       },
-      "bytes": 1523191
+      "bytes": 1524764
     },
     "dist/index.cjs.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 122402
+      "bytes": 101208
     },
     "dist/index.cjs.css": {
       "imports": [
@@ -20217,14 +20212,11 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-3267-GrJljmUNkgO6/19cd124ec212/tldraw.css": {
-          "bytesInOutput": 75223
-        },
-        "../../../../../../../tmp/tmp-3267-GrJljmUNkgO6/19cd124ebc10/index.css": {
-          "bytesInOutput": 401
+        "../../../../../../../tmp/tmp-3233-xst22yPbgUiV/19ce17a321a0/index.css": {
+          "bytesInOutput": 74878
         }
       },
-      "bytes": 75905
+      "bytes": 75081
     }
   }
 }

package/dist/meta.esbuild.json

@@ -2369,7 +2369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppContext.tsx": {
-      "bytes": 881,
+      "bytes": 909,
       "imports": [
         {
           "path": "react",
@@ -5769,7 +5769,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 385736,
+      "bytes": 385730,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -11311,9 +11311,14 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-3267-a4cgp65ro622/19cd124ec843/tldraw.css": {
-      "bytes": 80111,
+    "../../../../../../../tmp/tmp-3233-eBsCf1UP9g59/19ce17a32ff1/index.css": {
+      "bytes": 65533,
       "imports": [
+        {
+          "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
+          "kind": "import-rule",
+          "external": true
+        },
         {
           "path": "data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z' fill='white'/><path d='m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z' fill='white'/><path d='m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z' fill='black'/><path d='m13 10.814v11.188l2.969-2.866.428-.139h4.768z' fill='black'/></g></svg>",
           "kind": "url-token",
@@ -11361,21 +11366,6 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-3267-a4cgp65ro622/19cd124ec181/index.css": {
-      "bytes": 597,
-      "imports": [
-        {
-          "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
-          "kind": "import-rule",
-          "external": true
-        },
-        {
-          "path": "../../../../../../../tmp/tmp-3267-a4cgp65ro622/19cd124ec843/tldraw.css",
-          "kind": "import-rule",
-          "original": "@tldraw/tldraw/tldraw.css"
-        }
-      ]
-    },
     "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
       "bytes": 3250,
       "imports": [
@@ -11445,7 +11435,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-3267-a4cgp65ro622/19cd124ec181/index.css",
+          "path": "../../../../../../../tmp/tmp-3233-eBsCf1UP9g59/19ce17a32ff1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12168,7 +12158,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 28662,
+      "bytes": 30184,
       "imports": [
         {
           "path": "react",
@@ -12295,6 +12285,11 @@
           "kind": "import-statement",
           "original": "../../Tooltip"
         },
+        {
+          "path": "src/Prebuilt/AppContext.tsx",
+          "kind": "import-statement",
+          "original": "../AppContext"
+        },
         {
           "path": "src/Prebuilt/layouts/WaitingView.tsx",
           "kind": "import-statement",
@@ -14591,7 +14586,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10920,
+      "bytes": 11117,
       "imports": [
         {
           "path": "react",
@@ -15709,7 +15704,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3735464
+      "bytes": 3738202
     },
     "dist/index.js": {
       "imports": [
@@ -19108,7 +19103,7 @@
       "cssBundle": "dist/index.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 21904
+          "bytesInOutput": 21782
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 225091
@@ -19387,7 +19382,7 @@
           "bytesInOutput": 887
         },
         "src/Prebuilt/App.tsx": {
-          "bytesInOutput": 8036
+          "bytesInOutput": 8204
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6633
@@ -19639,7 +19634,7 @@
           "bytesInOutput": 9861
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 56143
+          "bytesInOutput": 56136
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19986,7 +19981,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-3267-a4cgp65ro622/19cd124ec181/index.css": {
+        "../../../../../../../tmp/tmp-3233-eBsCf1UP9g59/19ce17a32ff1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19996,7 +19991,7 @@
           "bytesInOutput": 2787
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 28045
+          "bytesInOutput": 29541
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3171
@@ -20221,13 +20216,13 @@
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1468317
+      "bytes": 1469852
     },
     "dist/index.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 122402
+      "bytes": 101208
     },
     "dist/index.css": {
       "imports": [
@@ -20283,14 +20278,11 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-3267-a4cgp65ro622/19cd124ec843/tldraw.css": {
-          "bytesInOutput": 75223
-        },
-        "../../../../../../../tmp/tmp-3267-a4cgp65ro622/19cd124ec181/index.css": {
-          "bytesInOutput": 401
+        "../../../../../../../tmp/tmp-3233-eBsCf1UP9g59/19ce17a32ff1/index.css": {
+          "bytesInOutput": 74878
         }
       },
-      "bytes": 75901
+      "bytes": 75077
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.4.3-alpha.3",
+  "version": "0.4.3-alpha.5",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -19,8 +19,7 @@
     "directory": "packages/roomkit-react"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "exports": {
     ".": {
@@ -63,12 +62,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.4.3-alpha.3",
+    "@100mslive/hls-player": "0.4.3-alpha.5",
     "@100mslive/hms-noise-cancellation": "0.0.2",
-    "@100mslive/hms-virtual-background": "1.14.3-alpha.3",
-    "@100mslive/hms-whiteboard": "0.1.3-alpha.3",
-    "@100mslive/react-icons": "0.11.3-alpha.3",
-    "@100mslive/react-sdk": "0.11.3-alpha.3",
+    "@100mslive/hms-virtual-background": "1.14.3-alpha.5",
+    "@100mslive/hms-whiteboard": "0.1.3-alpha.5",
+    "@100mslive/react-icons": "0.11.3-alpha.5",
+    "@100mslive/react-sdk": "0.11.3-alpha.5",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -105,5 +104,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "43ae4fb9ef619c492c010d185fe7200bd1e3fa45"
+  "gitHead": "9580cbaa0517f8e8472249b1565054018e7812f3"
 }

package/src/Accordion/Accordion.tsx

@@ -1,88 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import * as BaseAccordion from '@radix-ui/react-accordion';
-import { CSS } from '@stitches/react';
-import { ChevronUpIcon } from '@100mslive/react-icons';
-import { Box } from '../Layout';
-import { styled } from '../Theme';
-import { slideDown, slideUp } from '../utils';
-
-const StyledAccordion = styled(BaseAccordion.Root, {});
-
-const StyledItem = styled(BaseAccordion.Item, {
-  marginTop: '$px',
-  display: 'block',
-  '&:first-child': {
-    marginTop: 0,
-    borderTopLeftRadius: '$0',
-    borderTopRightRadius: '$0',
-  },
-  '&:last-child': {
-    borderBottomLeftRadius: '$4',
-    borderBottomRightRadius: '$4',
-  },
-});
-
-const StyledHeader = styled(BaseAccordion.Header, {
-  all: 'unset',
-  display: 'flex',
-  fontFamily: '$sans',
-});
-
-const StyledTrigger = styled(BaseAccordion.Trigger, {
-  all: 'unset',
-  fontFamily: '$sans',
-  flex: 1,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  fontSize: '$md',
-  lineHeight: '$md',
-  color: '$on_surface_high',
-});
-
-const StyledContent = styled(BaseAccordion.Content, {
-  display: 'contents',
-  fontSize: '$md',
-  fontFamily: '$sans',
-  color: '$on_surface_medium',
-  '&[data-state="open"]': {
-    animation: `${slideDown('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-  '&[data-state="closed"]': {
-    animation: `${slideUp('--radix-accordion-content-height')} 300ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
-  },
-});
-
-const StyledChevron = styled(ChevronUpIcon, {
-  color: '$on_primary_high',
-  transition: 'transform 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-  '[data-state=closed] &': { transform: 'rotate(180deg)' },
-});
-
-// Exports
-export const AccordionRoot = StyledAccordion;
-export const AccordionItem = StyledItem;
-
-export const AccordionHeader: React.FC<
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
-> = React.forwardRef<
-  HTMLButtonElement,
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
->(({ children, iconStyles, css, chevronID, ...props }, forwardedRef) => (
-  <StyledHeader css={css}>
-    <StyledTrigger {...props} ref={forwardedRef}>
-      {children}
-      <StyledChevron data-testid={chevronID} aria-hidden css={iconStyles} />
-    </StyledTrigger>
-  </StyledHeader>
-));
-
-export const AccordionContent: React.FC<
-  PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>
-> = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseAccordion.AccordionContentProps & { contentStyles?: CSS }>>(
-  ({ children, contentStyles, ...props }, forwardedRef) => (
-    <StyledContent {...props} ref={forwardedRef}>
-      <Box css={contentStyles}>{children}</Box>
-    </StyledContent>
-  ),
-);

package/src/Accordion/index.ts

@@ -1,8 +0,0 @@
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot } from './Accordion';
-
-export const Accordion = {
-  Root: AccordionRoot,
-  Item: AccordionItem,
-  Content: AccordionContent,
-  Header: AccordionHeader,
-};

package/src/AudioLevel/AudioLevel.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { selectTrackAudioByID, useHMSVanillaStore } from '@100mslive/react-sdk';
-import { Box, Flex } from '../Layout';
-import { keyframes } from '../Theme';
-//@ts-ignore
-import bg from './audio-level.png';
-
-// keep the calculated values before hand to avoid recalcuation everytime
-const positionValues = new Array(101).fill(0).reduce((acc, _, index) => {
-  acc[index] = Math.round((index / 100) * 4) / 4; // convert to 0.25 multiples
-  return acc;
-}, {});
-
-const barAnimation = keyframes({
-  from: {
-    maskSize: '4em .8em',
-    '-webkit-mask-position-y': '.1em',
-    maskPosition: 'initial .1em',
-  },
-
-  '50%': {
-    maskSize: '4em 1em',
-    '-webkit-mask-position-y': 0,
-    maskPosition: 'initial 0',
-  },
-
-  to: {
-    maskSize: '4em .8em',
-    '-webkit-mask-position-y': '.1em',
-    maskPosition: 'initial 0.1em',
-  },
-});
-
-const AudioBar = () => {
-  return (
-    <Box
-      css={{
-        width: '.25em',
-        height: '1em',
-        maskImage: `url(${bg})`,
-        '-webkit-mask-repeat': 'no-repeat',
-        backgroundColor: '$on_primary_high',
-        maskSize: '4em 1em',
-      }}
-    />
-  );
-};
-
-export const AudioLevel = ({ trackId, size }: { trackId?: string; size?: 'small' | 'medium' }) => {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const vanillaStore = useHMSVanillaStore();
-
-  useEffect(() => {
-    const unsubscribe = vanillaStore.subscribe(audioLevel => {
-      if (ref.current) {
-        let index = 0;
-        //@ts-ignore
-        for (const child of ref.current.children) {
-          const element = child as HTMLElement;
-          const positionX = `-${positionValues[audioLevel] * (index === 1 ? 2.5 : 1.25)}em`;
-          (element.style as any)['-webkit-mask-position-x'] = positionX;
-          (element.style as any)['mask-position'] = `${positionX} 0`;
-          element.style.animation =
-            positionValues[audioLevel] > 0 ? `${barAnimation} 0.6s steps(3,jump-none) 0s infinite` : 'none';
-          index++;
-        }
-      }
-    }, selectTrackAudioByID(trackId));
-    return unsubscribe;
-  }, [vanillaStore, trackId]);
-  return (
-    <Flex
-      ref={ref}
-      css={{
-        fontSize: size === 'small' ? '0.75rem' : '1rem',
-        gap: size === 'small' ? '$1' : '$2',
-      }}
-    >
-      <AudioBar />
-      <AudioBar />
-      <AudioBar />
-    </Flex>
-  );
-};

package/src/AudioLevel/index.ts

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

package/src/AudioLevel/useBorderAudioLevel.tsx

@@ -1,34 +0,0 @@
-import { useCallback, useRef } from 'react';
-import { HMSTrackID } from '@100mslive/hms-video-store';
-import { useAudioLevelStyles } from '@100mslive/react-sdk';
-import { useTheme } from '../Theme';
-
-/**
- * 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 function useBorderAudioLevel(audioTrackId?: HMSTrackID) {
-  const { theme } = useTheme();
-  const color = theme.colors.primary_default.value;
-  const getStyle = useCallback(
-    (level: number) => {
-      const style: Record<string, string> = {
-        transition: 'outline 0.4s ease-in-out',
-      };
-      style['outline'] = level ? `${sigmoid(level) * 4}px solid ${color}` : '0px solid transparent';
-      return style;
-    },
-    [color],
-  );
-  const ref = useRef(null);
-  useAudioLevelStyles({
-    trackId: audioTrackId,
-    getStyle,
-    ref,
-  });
-  return ref;
-}
-
-export const sigmoid = (z: number) => {
-  return 1 / (1 + Math.exp(-z));
-};