@100mslive/roomkit-react 0.1.1 → 0.1.2-alpha.1

package/src/Prebuilt/hms.js

@@ -1,7 +0,0 @@
-import { HMSReactiveStore } from '@100mslive/react-sdk';
-
-const hms = new HMSReactiveStore();
-export const hmsStore = hms.getStore();
-export const hmsActions = hms.getActions();
-export const hmsNotifications = hms.getNotifications();
-export const hmsStats = hms.getStats();

package/src/Prebuilt/plugins/confetti.jsx

@@ -1,60 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { useMedia } from 'react-use';
-import JSConfetti from 'js-confetti';
-import { useCustomEvent } from '@100mslive/react-sdk';
-
-const confettiMsgType = 'CONFETTI';
-
-const emojiCollections = {
-  hearts: ['❤️', '😍', '♥️'],
-  birthday: ['🎂', '🍰', '🎁'],
-  yes: ['🙌', '✨', '🔥', '❤️'],
-  no: ['🙅', '⛔', '❌'],
-};
-
-/**
- * This component shows a reference implementation of using [custom events](https://www.100ms.live/docs/javascript/v2/features/chat#custom-events).
- * One downside of the current implementation is that it doesn't take into account tab not in focus.
- * In this case multiple messages might accumulate leading to a lot of confetti when user comes back on the tab.
- */
-export function Confetti() {
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
-  const disableMotion = useMedia('(prefers-reduced-motion: reduce)');
-  const jsConfetti = useRef(null);
-
-  useEffect(() => {
-    jsConfetti.current = new JSConfetti();
-  });
-
-  const onConfettiMsg = useCallback(
-    config => {
-      if (!disableMotion && jsConfetti.current) {
-        jsConfetti.current.addConfetti(config);
-      }
-    },
-    [disableMotion],
-  );
-
-  const { sendEvent } = useCustomEvent({
-    type: confettiMsgType,
-    onEvent: onConfettiMsg,
-  });
-
-  // e.g. sendConfetti(), sendConfetti({type: "hearts"}), sendConfetti({emojis: ["🔥"]})
-  const sendConfetti = useCallback(
-    ({ type, emojis } = {}) => {
-      if (type && emojiCollections[type]) {
-        emojis = emojiCollections[type];
-      }
-      sendEvent({ emojis });
-    },
-    [sendEvent],
-  );
-
-  // putting the function to send on window for quick access
-  useEffect(() => {
-    window.sendConfetti = sendConfetti;
-  }, [sendConfetti]);
-
-  return <></>;
-}

package/src/Theme/themes.ts

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