@100mslive/roomkit-react 0.1.0

package/src/Theme/base.config.ts

@@ -0,0 +1,264 @@
+import type * as Stitches from '@stitches/react';
+import { defaultThemeMap as defaultStitchesThemeMap } from '@stitches/react';
+
+export const baseConfig = {
+  theme: {
+    colors: {
+      white: '#FFFFFF',
+      black: '#000000',
+      transparent: '#00000000',
+      orange: '#F69133',
+      cyan: '#8FF5FB',
+      tamarind: '#F79133',
+      yellow: '#FAC919',
+      twinYellow: '#ECC502',
+      green: '#00AE63',
+      darkgreen: '37F28D',
+      purple: '#6554C0',
+      borderDefault: '#1B1F26',
+      borderLight: '#2D3440',
+      borderAccent: '#2471ED',
+      success: '#36B37E',
+      error: '#CC525F',
+      errorTint: '#ED4C5AE6',
+      warning: '#FFAB00',
+      brandLight: '#74AAFF',
+      brandDefault: '#2F80FF',
+      brandDark: '#0B326F',
+      brandDisabled: '#D8E7FF',
+      grayLight: '#B0C3DB',
+      grayDefault: '#657080',
+      grayDark: '#303740',
+      secondaryGray: '#242A33',
+      grayDisabled: '#DCE4EF',
+      menuBg: '$grayDark',
+      textHighEmp: '#F5F9FFF2',
+      textMedEmp: '#E0ECFFCC',
+      textDisabled: '#C3D0E580',
+
+      // text variants when bg is accent (blue)
+      // same for both themes
+      textAccentHigh: '#FFFFFFFA',
+      textAccentMedium: '#FFFFFFB8',
+      textAccentDisabled: '#FFFFFF7A',
+
+      surfaceDefault: '#14171C',
+      surfaceLight: '#1D2229',
+      surfaceLighter: '#272E38',
+      surfaceDark: '#0F1115',
+
+      backgroundDefault: '#0B0D0F',
+      backgroundDark: '#090B0D',
+      backgroundDarker: '#040405',
+
+      primaryLight: '#66A1FF',
+      primaryDefault: '#2471ED',
+      primaryDark: '#143466',
+      primaryDisabled: '#3666B2',
+      secondaryLight: '#6B7D99',
+      secondaryDefault: '#475366',
+      secondaryDark: '#2D3440',
+      secondaryDisabled: '#242A33',
+      errorDefault: '#CC525F',
+      errorLight: '#D87983',
+      errorDark: '#9D2F3B',
+      errorDisabled: '#621D24',
+    },
+    shadows: {
+      sm: '0 0 4px 0 #0000004D',
+      md: '0 0 8px 0 #0000004D',
+    },
+    fonts: {
+      sans: 'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+    },
+    fontSizes: {
+      h1: '6rem',
+      h2: '3.75rem',
+      h3: '3rem',
+      h4: '2.125rem',
+      h5: '1.5rem',
+      h6: '1.25rem',
+      tiny: '0.625rem',
+      xs: '0.75rem',
+      sm: '0.875rem',
+      md: '1rem',
+      lg: '1.125rem',
+    },
+    fontWeights: {
+      semiBold: 600,
+      medium: 500,
+      regular: 400,
+    },
+    lineHeights: {
+      h1: '5.75rem',
+      h2: '3.5rem',
+      h3: '3.25rem',
+      h4: '2.5rem',
+      h5: '2rem',
+      h6: '1.5rem',
+      tiny: '1rem',
+      xs: '1rem',
+      sm: '1.25rem',
+      md: '1.5rem',
+    },
+    radii: {
+      '0': '0.25rem',
+      '1': '0.5rem',
+      '2': '0.75rem',
+      '3': '1rem',
+      '4': '1.5rem',
+      round: '100rem',
+    },
+    space: {
+      0: '0rem',
+      xs: '0.5rem',
+      sm: '0.75rem',
+      md: '1rem',
+      lg: '1.25rem',
+      xl: '2.25rem',
+      px: '1px',
+      1: '0.125rem',
+      2: '0.25rem',
+      3: '0.375rem',
+      4: '0.5rem',
+      5: '0.625rem',
+      6: '0.75rem',
+      7: '0.875rem',
+      8: '1rem',
+      9: '1.25rem',
+      10: '1.5rem',
+      11: '1.75rem',
+      12: '2rem',
+      13: '2.25rem',
+      14: '2.5rem',
+      15: '2.75rem',
+      16: '3rem',
+      17: '3.5rem',
+      18: '4rem',
+      19: '4.25rem',
+      20: '5rem',
+      24: '6rem',
+      28: '7rem',
+      32: '8rem',
+      36: '9rem',
+      40: '10rem',
+      44: '11rem',
+      48: '12rem',
+      52: '13rem',
+      56: '14rem',
+      60: '15rem',
+      64: '16rem',
+      72: '18rem',
+      80: '20rem',
+      96: '24rem',
+      100: '27rem',
+    },
+    borderWidths: {
+      light: '1px',
+      normal: '2px',
+      bold: '3px',
+      extrabold: '4px',
+      black: '5px',
+    },
+  },
+};
+
+export const defaultUtils = {
+  bg: (value: Stitches.PropertyValue<'backgroundColor'>) => ({
+    backgroundColor: value,
+  }),
+  c: (value: Stitches.PropertyValue<'color'>) => ({
+    color: value,
+  }),
+  r: (value: Stitches.ScaleValue<'radii'>) => ({
+    borderRadius: value,
+  }),
+  fs: (value: Stitches.PropertyValue<'fontSize'> | number | string) => ({
+    fontSize: value,
+  }),
+  size: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    height: value,
+    width: value,
+  }),
+  w: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    width: value,
+  }),
+  h: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    height: value,
+  }),
+  p: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    padding: value,
+  }),
+  pt: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    paddingTop: value,
+  }),
+  pr: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    paddingRight: value,
+  }),
+  pb: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    paddingBottom: value,
+  }),
+  pl: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    paddingLeft: value,
+  }),
+  px: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    paddingLeft: value,
+    paddingRight: value,
+  }),
+  py: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    paddingTop: value,
+    paddingBottom: value,
+  }),
+  m: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    margin: value,
+  }),
+  mt: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    marginTop: value,
+  }),
+  mr: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    marginRight: value,
+  }),
+  mb: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    marginBottom: value,
+  }),
+  ml: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    marginLeft: value,
+  }),
+  mx: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    marginLeft: value,
+    marginRight: value,
+  }),
+  my: (value: Stitches.ScaleValue<'space'> | number | string) => ({
+    marginTop: value,
+    marginBottom: value,
+  }),
+};
+
+export const defaultMedia = {
+  allowMotion: '(prefers-reduced-motion: no-preference)',
+  sm: '(max-width: 640px)',
+  md: '(max-width: 768px)',
+  lg: '(max-width: 1024px)',
+  xl: '(max-width: 1280px)',
+  '2xl': '(max-width: 1536px)',
+  ls: '(max-width: 1024px) and (orientation: landscape)',
+};
+
+export const defaultThemeMap = {
+  ...defaultStitchesThemeMap,
+  width: 'space',
+  height: 'space',
+  minWidth: 'space',
+  maxWidth: 'space',
+  minHeight: 'space',
+  maxHeight: 'space',
+  flexBasis: 'space',
+  gridTemplateColumns: 'space',
+  gridTemplateRows: 'space',
+  blockSize: 'space',
+  minBlockSize: 'space',
+  maxBlockSize: 'space',
+  inlineSize: 'space',
+  minInlineSize: 'space',
+  maxInlineSize: 'space',
+};

package/src/Theme/index.tsx

@@ -0,0 +1,3 @@
+export * from './stitches.config';
+export * from './ThemeProvider';
+export * from './themes';

package/src/Theme/stitches.config.ts

@@ -0,0 +1,100 @@
+import type * as Stitches from '@stitches/react';
+import { createStitches } from '@stitches/react';
+import merge from 'lodash.merge';
+import { baseConfig, defaultMedia, defaultThemeMap, defaultUtils } from './base.config';
+import { darkTheme, lightTheme } from './themes';
+
+const HmsStitches = createStitches({
+  prefix: 'hms-ui',
+  theme: {
+    ...baseConfig.theme,
+    colors: {
+      ...baseConfig.theme.colors,
+      ...darkTheme.colors,
+    },
+  },
+  media: defaultMedia,
+  utils: defaultUtils,
+  themeMap: defaultThemeMap,
+});
+
+export const {
+  theme,
+  createTheme: createThemeBase,
+  styled,
+  globalCss,
+  keyframes,
+  css,
+  getCssText,
+  config,
+} = HmsStitches;
+
+export const globalStyles = globalCss({
+  '*': {
+    fontFamily: '$sans',
+    boxSizing: 'border-box',
+    borderWidth: 0,
+    borderStyle: 'solid',
+  },
+  body: {
+    margin: 0,
+  },
+  '#root': {
+    height: '100%',
+    overscrollBehaviorY: 'none',
+  },
+  '::-webkit-scrollbar-track': {
+    WebkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+    boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+    backgroundColor: 'transparent',
+  },
+  '::-webkit-scrollbar': {
+    width: '6px',
+    height: '6px',
+    backgroundColor: 'transparent',
+  },
+  '::-webkit-scrollbar-thumb': {
+    backgroundColor: '#657080',
+    borderRadius: '5px',
+  },
+  /**
+   * needed for safari. Safari
+   * adds background color on its own
+   * on hls-viewer on fullscreen
+   */
+  '#hls-viewer-dark:fullscreen': {
+    backgroundColor: 'black !important',
+  },
+
+  '#hls-viewer-light:fullscreen': {
+    backgroundColor: 'white !important',
+  },
+});
+
+export type ThemeType = 'light' | 'dark';
+export type Theme = typeof HmsStitches.theme;
+
+/**
+ * This method will be used to create custom themes or update any theme values
+ * @param { type: ThemeType; className: string; theme: Theme }
+ * @returns
+ */
+export const createTheme = ({
+  themeType,
+  theme,
+  className,
+}: {
+  themeType: ThemeType;
+  className?: string;
+  theme?: Partial<Theme>;
+}) => {
+  if (!themeType) {
+    throw new Error('Theme type is required');
+  }
+  return createThemeBase(
+    className || `${themeType}-theme`,
+    merge(baseConfig.theme, themeType === 'dark' ? darkTheme : lightTheme, theme || {}),
+  );
+};
+
+export type CSS = Stitches.CSS<typeof HmsStitches>;

package/src/Theme/themes.ts

@@ -0,0 +1,70 @@
+export const darkTheme = {
+  colors: {
+    bgPrimary: '#0B0F15',
+    bgSecondary: '#1D232B',
+    bgTertiary: '#303740',
+    surfaceLight: '#1E232A',
+    surfaceLighter: '#282F39',
+    textPrimary: '#FFFFFFE6',
+    textSecondary: '#FFFFFFB8',
+    textDisabled: '#FFFFFF61',
+    textInvert: 'rgba(0,0,0,0.9)',
+    textHighEmp: '#F5F9FFF2',
+    textMedEmp: 'rgba(224, 236, 255, 0.8)',
+    iconBtn: '$white',
+    iconHoverBg: 'rgba(255, 255, 255, 0.25)',
+    transparentBg: 'rgba(0, 0, 0, 0.22)',
+    mainBg: '$black',
+    tileBg: '#0F1115',
+    secondaryDisabled: '#242A33',
+    previewBg: '#111111',
+    statsBg: 'rgba(0,0,0,0.75)',
+    menuBg: '$grayDark',
+    inputBg: '$bgSecondary',
+    toastBg: '$menuBg',
+    borderDefault: '#1B1F26',
+    backgroundDefault: '#0B0D0F',
+    borderLighter: '#2D3440',
+  },
+};
+
+// TODO: Update light theme colors from design
+export const lightTheme = {
+  colors: {
+    bgPrimary: '$white',
+    bgSecondary: '#F5F5F5',
+    bgTertiary: '#FFFFFF61',
+    twinYellow: '#ECC502',
+    textPrimary: 'rgba(0,0,0, 0.9)',
+    textSecondary: 'rgba(0,0,0, 0.72)',
+    textInvert: '#FFFFFFE6',
+    iconBtn: '#3b3b3b',
+    iconHoverBg: 'rgba(0, 0, 0, 0.22)',
+    transparentBg: '#FFFFFF38',
+    mainBg: '$white',
+    tileBg: '#F2F2F2',
+    previewBg: '#FAFAFA',
+    statsBg: '#FFFFFFBF',
+    menuBg: '#d9d9d9',
+    inputBg: '$tileBg',
+    toastBg: '$menuBg',
+    secondaryDisabled: '#F6F7F9',
+    // text variants
+    textHighEmp: '#000000F2',
+    textMedEmp: '#000000CC',
+    textDisabled: '#00000066',
+
+    borderDefault: '#DDE2E9',
+    borderLight: '#BCC4D2',
+    borderLighter: '#DFE4EC',
+    surfaceDefault: '#EDEFF3',
+    surfaceLight: '#F6F7F9',
+    surfaceLighter: '#FCFCFD',
+    surfaceDark: '$surfaceLight',
+    backgroundDefault: '#E0E4EB',
+    backgroundDark: '#DADFE7',
+    backgroundDarker: '#D4DAE2',
+  },
+};
+
+// Modals -> surface light/er

package/src/Theme/useSSR.tsx

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+const isBrowser = (): boolean => {
+  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+};
+
+export type SSRState = {
+  isBrowser: boolean;
+  isServer: boolean;
+};
+
+const useSSR = (): SSRState => {
+  const [browser, setBrowser] = useState<boolean>(false);
+  useEffect(() => {
+    setBrowser(isBrowser());
+  }, []);
+
+  return {
+    isBrowser: browser,
+    isServer: !browser,
+  };
+};
+
+export default useSSR;

package/src/TileMenu/StyledMenuTile.tsx

@@ -0,0 +1,101 @@
+import * as Popover from '@radix-ui/react-popover';
+import { styled } from '../Theme';
+import { popoverAnimation } from '../utils/animations';
+import { flexCenter } from '../utils/styles';
+
+const Root = Popover.Root;
+
+const StyledTrigger = styled(Popover.Trigger, {
+  position: 'absolute',
+  bottom: '$2',
+  right: '$2',
+  zIndex: 10,
+  width: '$13',
+  height: '$13',
+  color: '$textPrimary',
+  borderRadius: '$round',
+  backgroundColor: '$menuBg',
+  border: 'none',
+  ...flexCenter,
+  '&:not([disabled]):focus': {
+    outline: 'none',
+    boxShadow: '0 0 0 3px $colors$brandLight',
+  },
+});
+
+const StyledContent = styled(Popover.Content, {
+  fontFamily: '$sans',
+  backgroundColor: '$menuBg',
+  padding: '$5 0',
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '$space$6',
+  zIndex: 11,
+  width: '$60',
+  ...popoverAnimation,
+});
+
+const styledItem = {
+  fontSize: '$sm',
+  color: '$textPrimary',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '$4 $6',
+  width: '100%',
+};
+
+const StyledItemButton = styled('button', {
+  ...styledItem,
+  height: '$14',
+  '&:hover': {
+    backgroundColor: '$menuBg',
+  },
+  // TODO: default focus applied cause issues with this style
+  '&:focus': {
+    outline: 'none',
+    // backgroundColor: '$grey3',
+  },
+  '& > * + *': {
+    marginRight: '0',
+    marginLeft: '$4',
+  },
+});
+
+const StyledVolumeItem = styled('div', {
+  // TODO: maybe keep this as base comp and extend button variant
+  ...styledItem,
+  alignItems: 'start',
+  flexDirection: 'column',
+  marginBottom: '0',
+});
+
+export const Flex = styled('div', {
+  display: 'flex',
+  '& > * + *': {
+    marginRight: '0',
+    marginLeft: '$4',
+  },
+});
+
+const RemoveMenuItem = styled(StyledItemButton, {
+  color: '$error',
+  borderTop: '1px solid $borderLight',
+});
+
+interface MenuTileType {
+  Root: typeof Root;
+  Trigger: typeof StyledTrigger;
+  Content: typeof StyledContent;
+  ItemButton: typeof StyledItemButton;
+  VolumeItem: typeof StyledVolumeItem;
+  RemoveItem: typeof RemoveMenuItem;
+}
+
+export const StyledMenuTile: MenuTileType = {
+  Root,
+  Trigger: StyledTrigger,
+  Content: StyledContent,
+  ItemButton: StyledItemButton,
+  VolumeItem: StyledVolumeItem,
+  RemoveItem: RemoveMenuItem,
+};

package/src/TileMenu/TileMenu.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  HMSPeerID,
+  HMSTrack,
+  selectAudioTrackByPeerID,
+  selectAudioVolumeByPeerID,
+  selectPermissions,
+  selectVideoTrackByPeerID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import {
+  HorizontalMenuIcon,
+  MicOffIcon,
+  MicOnIcon,
+  RemoveUserIcon,
+  SpeakerIcon,
+  VideoOffIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
+import { Slider } from '../Slider';
+import { Flex, StyledMenuTile } from './StyledMenuTile';
+
+export interface TileMenuProps {
+  peerId: HMSPeerID;
+}
+
+export const TileMenu: React.FC<TileMenuProps> = ({ peerId }) => {
+  const actions = useHMSActions();
+  const permissions = useHMSStore(selectPermissions);
+  // TODO: selectTrackByID vs selectVideoTrackByPeerID
+  const videoTrack = useHMSStore(selectVideoTrackByPeerID(peerId));
+  const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
+  const canMuteVideo = videoTrack?.enabled ? permissions?.mute : permissions?.unmute;
+  const canMuteAudio = audioTrack?.enabled ? permissions?.mute : permissions?.unmute;
+  const toggleTrackEnabled = async (track?: HMSTrack | null) => {
+    if (track) {
+      try {
+        await actions.setRemoteTrackEnabled(track.id, !track.enabled);
+      } catch (error) {
+        // TODO: add toast here
+      }
+    }
+  };
+  const trackVolume = useHMSStore(selectAudioVolumeByPeerID(peerId));
+  return (
+    <StyledMenuTile.Root>
+      <StyledMenuTile.Trigger>
+        <HorizontalMenuIcon />
+      </StyledMenuTile.Trigger>
+      <StyledMenuTile.Content side="left" align="start" sideOffset={10}>
+        {canMuteVideo ? (
+          <StyledMenuTile.ItemButton onClick={() => toggleTrackEnabled(videoTrack)}>
+            {videoTrack?.enabled ? <VideoOnIcon /> : <VideoOffIcon />}
+            <span>{`${videoTrack?.enabled ? 'Mute' : 'Unmute'} Video`}</span>
+          </StyledMenuTile.ItemButton>
+        ) : null}
+        {canMuteAudio ? (
+          <StyledMenuTile.ItemButton onClick={() => toggleTrackEnabled(audioTrack)}>
+            {audioTrack?.enabled ? <MicOnIcon /> : <MicOffIcon />}
+            <span>{`${audioTrack?.enabled ? 'Mute' : 'Unmute'} Audio`}</span>
+          </StyledMenuTile.ItemButton>
+        ) : null}
+
+        {audioTrack ? (
+          <StyledMenuTile.VolumeItem>
+            <Flex>
+              <SpeakerIcon /> <span>Volume ({trackVolume})</span>
+            </Flex>
+            <Slider
+              css={{ my: '0.5rem' }}
+              step={5}
+              value={[trackVolume || 0]}
+              onValueChange={e => actions.setVolume(e[0], audioTrack?.id)}
+            />
+          </StyledMenuTile.VolumeItem>
+        ) : null}
+
+        {permissions?.removeOthers ? (
+          <StyledMenuTile.RemoveItem
+            onClick={async () => {
+              try {
+                await actions.removePeer(peerId, '');
+              } catch (error) {
+                // TODO: Toast here
+              }
+            }}
+          >
+            <RemoveUserIcon />
+            <span>Remove Participant</span>
+          </StyledMenuTile.RemoveItem>
+        ) : null}
+      </StyledMenuTile.Content>
+    </StyledMenuTile.Root>
+  );
+};

package/src/TileMenu/index.tsx

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