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

package/src/Theme/ThemeProvider.tsx

@@ -1,98 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { Theme } from './stitches.config';
-import { createTheme, theme } from './stitches.config';
-import useSSR from './useSSR';
-
-const defaultAspectRatio = {
-  width: 1,
-  height: 1,
-};
-
-export enum ThemeTypes {
-  // eslint-disable-next-line no-unused-vars
-  default = 'default',
-}
-
-export type ThemeContextValue = {
-  themeType: string;
-  theme: Theme;
-  aspectRatio: { width: number; height: number };
-  /**
-   * @param {ThemeTypes} themeToUpdateTo - optional
-   * Use this to toggle or update the currentTheme.
-   * if a param is passed, it will set the theme to passed value, otherwise will toggle between light and dark
-   * depending on current applied theme
-   */
-  toggleTheme: (themeToUpdateTo?: ThemeTypes) => void;
-};
-
-export type ThemeProviderProps = {
-  themeType?: string;
-  theme?: Theme;
-  aspectRatio?: { width: number; height: number };
-};
-
-const defaultContext = {
-  themeType: ThemeTypes.default,
-  theme,
-  aspectRatio: { width: 1, height: 1 },
-  toggleTheme: (_themeToUpdateTo?: ThemeTypes) => {
-    return;
-  },
-};
-export const ThemeContext = React.createContext<ThemeContextValue>(defaultContext);
-
-/**
- * Wrap this around your root component to get access to theme
- * eg:
- * <ThemeProvider type="dark" appBuilder={{ aspectRatio: { width:1, height: 1} }}>
- *  <App />
- * </ThemeProvider>
- */
-export const HMSThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({
-  themeType,
-  theme: userTheme,
-  aspectRatio = defaultAspectRatio,
-  children,
-}) => {
-  const systemTheme = ThemeTypes.default;
-  const [currentTheme, setCurrentTheme] = useState(themeType || systemTheme);
-  const previousClassName = useRef('');
-  const { isBrowser } = useSSR();
-  const updatedTheme = useMemo(() => {
-    const updatedTheme = createTheme({ themeType: currentTheme, theme: userTheme || {} });
-    if (!isBrowser) {
-      return updatedTheme;
-    }
-    if (previousClassName.current) {
-      document.documentElement.classList.remove(previousClassName.current);
-    }
-    previousClassName.current = updatedTheme.className;
-    document.documentElement.classList.add(updatedTheme);
-    return updatedTheme;
-  }, [userTheme, currentTheme, isBrowser]);
-
-  const toggleTheme = useCallback((themeToUpdateTo?: ThemeTypes) => {
-    if (themeToUpdateTo) {
-      setCurrentTheme(themeToUpdateTo);
-      return;
-    }
-    setCurrentTheme(ThemeTypes.default);
-  }, []);
-
-  useEffect(() => {
-    if (themeType) {
-      setCurrentTheme(themeType);
-    }
-  }, [themeType]);
-
-  return (
-    <ThemeContext.Provider
-      value={{ themeType: currentTheme, theme: updatedTheme as unknown as Theme, aspectRatio, toggleTheme }}
-    >
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export const useTheme = () => React.useContext(ThemeContext);

package/src/Theme/base.config.ts

@@ -1,236 +0,0 @@
-import type * as Stitches from '@stitches/react';
-import { defaultThemeMap as defaultStitchesThemeMap } from '@stitches/react';
-
-export const baseConfig = {
-  theme: {
-    colors: {
-      primary_default: '#2572ED',
-      primary_bright: '#538DFF',
-      primary_dim: '#002D6D',
-      primary_disabled: '#004299',
-      on_primary_high: 'rgba(245, 249, 255, 0.95)',
-      on_primary_medium: 'rgba(224, 236, 255, 0.8)',
-      on_primary_low: 'rgba(194, 208, 229, 0.5)',
-      secondary_default: '#444954',
-      secondary_bright: '#70778B',
-      secondary_dim: '#293042',
-      secondary_disabled: '#404759',
-      on_secondary_high: '#FFFFFF',
-      on_secondary_medium: '#D3D9F0',
-      on_secondary_low: '#A4ABC0',
-      background_default: '#0B0E15',
-      background_dim: '#000000',
-      surface_default: '#191B23',
-      surface_bright: '#272A31',
-      surface_brighter: '#2E3038',
-      surface_dim: '#11131A',
-      on_surface_high: '#EFF0FA',
-      on_surface_medium: '#C5C6D0',
-      on_surface_low: '#8F9099',
-      border_default: '#1D1F27',
-      border_bright: '#272A31',
-      alert_success: '#36B37E',
-      alert_warning: '#FFAB00',
-      alert_error_default: '#C74E5B',
-      alert_error_bright: '#FFB2B6',
-      alert_error_brighter: '#FFEDEC',
-      alert_error_dim: '#270005',
-    },
-    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: '25rem',
-    },
-    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

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

package/src/Theme/stitches.config.ts

@@ -1,88 +0,0 @@
-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 { DEFAULT_PORTAL_CONTAINER } from '../Prebuilt/common/constants';
-
-const HmsStitches = createStitches({
-  prefix: 'hms-ui',
-  theme: {
-    ...baseConfig.theme,
-    colors: {
-      ...baseConfig.theme.colors,
-    },
-  },
-  media: defaultMedia,
-  utils: defaultUtils,
-  themeMap: defaultThemeMap,
-});
-
-export const {
-  theme,
-  createTheme: createThemeBase,
-  styled,
-  globalCss,
-  keyframes,
-  css,
-  getCssText,
-  config,
-} = HmsStitches;
-
-export const globalStyles = globalCss({
-  [`${DEFAULT_PORTAL_CONTAINER} *`]: {
-    fontFamily: '$sans',
-    boxSizing: 'border-box',
-  },
-  '::-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 = 'default';
-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: string;
-  className?: string;
-  theme?: Partial<Theme>;
-}) => {
-  if (!themeType) {
-    throw new Error('Theme type is required');
-  }
-  const mergedTheme = merge(baseConfig.theme, theme || {});
-  return createThemeBase(className || `${themeType}-theme`, mergedTheme);
-};
-
-export type CSS = Stitches.CSS<typeof HmsStitches>;

package/src/Theme/useSSR.tsx

@@ -1,24 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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: '$on_surface_high',
-  borderRadius: '$2',
-  backgroundColor: '$surface_bright',
-  cursor: 'pointer',
-  border: 'none',
-  ...flexCenter,
-  '&:not([disabled]):focus': {
-    outline: 'none',
-    boxShadow: '0 0 0 3px $colors$primary_bright',
-  },
-});
-
-const StyledContent = styled(Popover.Content, {
-  fontFamily: '$sans',
-  backgroundColor: '$surface_dim',
-  padding: '$5 0',
-  display: 'flex',
-  flexDirection: 'column',
-  borderRadius: '$space$6',
-  zIndex: 11,
-  width: '$60',
-  ...popoverAnimation,
-});
-
-const styledItem = {
-  fontSize: '$sm',
-  color: '$on_surface_high',
-  display: 'flex',
-  alignItems: 'center',
-  padding: '$4 $6',
-  width: '100%',
-  backgroundColor: '$menuBg',
-};
-
-const StyledItemButton = styled('button', {
-  ...styledItem,
-  height: '$14',
-  border: 'none',
-  '&:hover': {
-    backgroundColor: '$surface_brighter',
-  },
-  cursor: 'pointer',
-  // 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: '$alert_error_default',
-  borderTop: '1px solid $border_bright',
-});
-
-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

@@ -1,98 +0,0 @@
-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

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