@100mslive/roomkit-react 0.1.0 → 0.1.2-alpha.0

package/src/Prebuilt/components/Preview/PreviewName.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Button, Input, styled } from '../../../';
-import { isStreamingKit } from '../../common/utils';
-
-const PreviewName = ({ name, onChange, onJoin, enableJoin }) => {
-  const formSubmit = e => {
-    e.preventDefault();
-  };
-  return (
-    <Form onSubmit={formSubmit}>
-      <Input
-        required
-        id="name"
-        css={{ w: '100%' }}
-        value={name}
-        onChange={e => onChange(e.target.value)}
-        placeholder="Enter your name"
-        autoFocus
-        autoComplete="name"
-      />
-      <Button type="submit" disabled={!name || !enableJoin} onClick={onJoin}>
-        {isStreamingKit() ? 'Join Studio' : 'Join Room'}
-      </Button>
-    </Form>
-  );
-};
-
-const Form = styled('form', {
-  width: '100%',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '$4',
-  mt: '$10',
-  mb: '$10',
-});
-
-export default PreviewName;

package/src/Prebuilt/components/Streaming/RTMPIcon.jsx

@@ -1,24 +0,0 @@
-export const RTMPIcon = props => {
-  return (
-    <svg width="49" height="50" viewBox="0 0 49 50" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <rect x="1.368" y="22.63" width="21.148" height="21.148" rx="10.574" fill="#fff" />
-      <rect x="1.368" y="22.63" width="21.148" height="21.148" rx="10.574" fill="url(#a)" />
-      <rect x="1.368" y="22.63" width="21.148" height="21.148" rx="10.574" stroke="#1B1F26" />
-      <rect x="12.286" y=".786" width="26.527" height="27.423" rx="13.263" fill="url(#b)" stroke="#1B1F26" />
-      <rect x="20.243" y="21.029" width="27.893" height="27.893" rx="13.946" fill="#9146FF" />
-      <rect x="20.243" y="21.029" width="27.893" height="27.893" rx="13.946" fill="url(#c)" />
-      <rect x="20.243" y="21.029" width="27.893" height="27.893" rx="13.946" stroke="#1B1F26" />
-      <defs>
-        <pattern id="a" patternContentUnits="objectBoundingBox" width="1" height="1">
-          <use transform="matrix(.001 0 0 .001 .094 .095)" />
-        </pattern>
-        <pattern id="b" patternContentUnits="objectBoundingBox" width="1" height="1">
-          <use transform="matrix(.00065 0 0 .00063 -.018 0)" />
-        </pattern>
-        <pattern id="c" patternContentUnits="objectBoundingBox" width="1" height="1">
-          <use transform="translate(.078 .094) scale(.00117)" />
-        </pattern>
-      </defs>
-    </svg>
-  );
-};

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