@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.10

package/src/VideoTile/StyledVideoTile.tsx

@@ -1,146 +0,0 @@
-import { Box } from '../Layout';
-import { styled } from '../Theme';
-import { flexCenter } from '../utils';
-
-export const Root = styled('div', {
-  padding: '0.75rem',
-});
-
-const Container = styled('div', {
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  overflow: 'hidden',
-  borderRadius: '$2',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  background: '$background_default',
-  variants: {
-    transparentBg: {
-      true: {
-        background: 'transparent',
-      },
-    },
-    noRadius: {
-      true: {
-        borderRadius: 0,
-      },
-    },
-  },
-});
-
-const Overlay = styled('div', {
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-});
-
-const Info = styled('div', {
-  color: '$on_primary_high',
-  position: 'absolute',
-  bottom: '5px',
-  left: '50%',
-  fontSize: '$sm',
-  transform: 'translateX(-50%)',
-  textAlign: 'center',
-  width: '80%',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  fontFamily: '$sans',
-});
-
-const AttributeBox = styled('div', {
-  position: 'absolute',
-  top: '$4',
-  color: '$on_secondary_high',
-  bg: '$secondary_dim',
-  borderRadius: '$round',
-  width: '$14',
-  height: '$14',
-  mb: '5px',
-  ...flexCenter,
-  variants: {
-    size: {
-      small: {
-        width: '$10',
-        height: '$10',
-        '& > svg': {
-          width: '$8',
-          height: '$8',
-        },
-      },
-      medium: {
-        width: '$13',
-        height: '$13',
-      },
-    },
-    position: {
-      left: { left: '$4' },
-      right: { right: '$4' },
-    },
-  },
-  defaultVariants: {
-    size: 'medium',
-    position: 'left',
-  },
-});
-
-const AudioIndicator = styled(AttributeBox, { defaultVariants: { position: 'right' } });
-
-const FullScreenButton = styled('button', {
-  height: '$14',
-  p: '$2 $4',
-  color: '$on_surface_high',
-  borderRadius: '$1',
-  border: 'none',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  position: 'absolute',
-  top: '$2',
-  right: '$2',
-  zIndex: 5,
-  '&:not([disabled]):focus': {
-    outline: 'none',
-    boxShadow: '0 0 0 3px $colors$primary_bright',
-  },
-});
-
-const AvatarContainer = styled(Box, {
-  ...flexCenter,
-  flexDirection: 'column',
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  transform: 'translateX(-50%) translateY(-50%)',
-  width: '40%',
-  height: '40%',
-  '& > div': {
-    maxHeight: '$20',
-    height: '100%',
-  },
-});
-
-interface VideoTileType {
-  Root: typeof Root;
-  Container: typeof Container;
-  Overlay: typeof Overlay;
-  Info: typeof Info;
-  AvatarContainer: typeof AvatarContainer;
-  AttributeBox: typeof AttributeBox;
-  AudioIndicator: typeof AudioIndicator;
-  FullScreenButton: typeof FullScreenButton;
-}
-
-export const StyledVideoTile: VideoTileType = {
-  Root,
-  Container,
-  Overlay,
-  Info,
-  AvatarContainer,
-  AttributeBox,
-  AudioIndicator,
-  FullScreenButton,
-};

package/src/VideoTile/VideoTile.mdx

@@ -1,28 +0,0 @@
-## VideoTile
-
-import { Story } from '@storybook/addon-docs';
-
-Building a `<VideoTile />` component is all about composing styled/unstyled component provided by `../`. We will create a basic videotile by composing `StyledVideoTile`.
-
-```jsx
-import { StyledVideoTile, Video } from '../';
-
-const VideoTileStory = () => {
-  return (
-    // width,height of the tile
-    <StyledVideoTile.Root css={{ width: 500, height: 300 }}>
-      <StyledVideoTile.Container>
-        {/* trackId of the peer */}
-        <Video trackId="1" />
-        {/* Meta info */}
-        <StyledVideoTile.Info>Deepankar</StyledVideoTile.Info>
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
-      </StyledVideoTile.Container>
-    </StyledVideoTile.Root>
-  );
-};
-```
-
-<Story id="video-videotile--example" />

package/src/VideoTile/VideoTile.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { MicOffIcon } from '@100mslive/react-icons';
-import { Video } from '../Video/Video';
-import { StyledVideoTile } from './StyledVideoTile';
-import VideoTileDocs from './VideoTile.mdx';
-
-const VideoTileMeta = {
-  title: 'Video/VideoTile',
-  parameters: {
-    docs: {
-      page: VideoTileDocs,
-    },
-  },
-};
-
-export default VideoTileMeta;
-
-const VideoTileStory = () => {
-  return (
-    <StyledVideoTile.Root css={{ width: 500, height: 300 }}>
-      <StyledVideoTile.Container>
-        <Video trackId="1" />
-        <StyledVideoTile.Info>Deepankar</StyledVideoTile.Info>
-        <StyledVideoTile.AudioIndicator>
-          <MicOffIcon />
-        </StyledVideoTile.AudioIndicator>
-      </StyledVideoTile.Container>
-    </StyledVideoTile.Root>
-  );
-};
-
-export const Example = VideoTileStory.bind({});

package/src/VideoTile/index.tsx

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

package/src/context/DialogContext.tsx

@@ -1,13 +0,0 @@
-import React, { createContext, ReactNode } from 'react';
-
-export const DialogContainerContext = createContext('');
-
-export function DialogContainerProvider({
-  children,
-  dialogContainerSelector,
-}: {
-  children: ReactNode;
-  dialogContainerSelector: string;
-}) {
-  return <DialogContainerContext.Provider value={dialogContainerSelector}>{children}</DialogContainerContext.Provider>;
-}

package/src/fixtures/chats.ts

@@ -1,25 +0,0 @@
-import { HMSMessage, HMSMessageType } from '@100mslive/hms-video-store';
-
-let counter = 1;
-export const makeFakeMessage = (msg: string, sender: string): HMSMessage => {
-  return {
-    id: String(counter++),
-    message: msg,
-    read: false,
-    sender: sender,
-    time: new Date(),
-    type: HMSMessageType.CHAT,
-    senderName: sender,
-    ignored: false,
-  };
-};
-
-export const fakeMessages = [
-  makeFakeMessage('Hello from 100ms', 'Yash'),
-  makeFakeMessage('This is a chat example', 'admin'),
-  makeFakeMessage('via the sendBroadcast action', 'Yash'),
-  makeFakeMessage('Our twitter handle @100mslive', '100ms'),
-  makeFakeMessage('Type and send chat!', 'admin'),
-];
-
-export const fakeMessage = makeFakeMessage('where is everyone?', 'tushar');

package/src/fixtures/peers.ts

@@ -1,27 +0,0 @@
-import { HMSPeerType, HMSPeerWithMuteStatus } from '@100mslive/react-sdk';
-
-let counter = 1;
-export const makeFakeParticipant = (name: string, role = 'Student'): HMSPeerWithMuteStatus => {
-  return {
-    peer: {
-      id: String(counter++),
-      name,
-      roleName: role,
-      auxiliaryTracks: [],
-      isLocal: counter === 1,
-      groups: [],
-      isHandRaised: false,
-      type: HMSPeerType.REGULAR,
-    },
-    isAudioEnabled: false,
-  };
-};
-
-export const fakeParticipants = [
-  makeFakeParticipant('Alex Tinmayson', 'Teacher'),
-  makeFakeParticipant('Ankita Bhattacharya'),
-  makeFakeParticipant('Anshul Kumar'),
-  makeFakeParticipant('Ishaan Awasthi'),
-  makeFakeParticipant('Ivy Loppinbug', 'Teacher'),
-  makeFakeParticipant('Sudhanshu Kumar'),
-];

package/src/fixtures/tracks.ts

@@ -1,11 +0,0 @@
-import { HMSVideoTrack } from '@100mslive/hms-video-store';
-
-let counter = 100;
-
-export const makeFakeVideoTrack = (): HMSVideoTrack => {
-  return {
-    enabled: false,
-    id: String(counter++),
-    type: 'video',
-  } as HMSVideoTrack;
-};

package/src/hooks/useDialogContainerSelector.tsx

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-import { DialogContainerContext } from '../context/DialogContext';
-
-export function useDialogContainerSelector() {
-  const dialogContainerSelector = useContext(DialogContainerContext);
-  return dialogContainerSelector;
-}

package/src/index.ts

@@ -1,41 +0,0 @@
-export * from './Button';
-export * from './Text';
-export * from './IconButton';
-export * from './Layout';
-export * from './Avatar';
-export * from './Divider';
-export * from './Switch';
-export * from './Tooltip';
-export * from './Select';
-export * from './Slider';
-export * from './Modal';
-export * from './Loading';
-export * from './Input';
-export * from './VideoTile';
-export * from './VideoList';
-export * from './Pagination';
-export * from './Dropdown';
-export { textEllipsis, flexCenter, slideLeftAndFade } from './utils';
-export * from './Video';
-export * from './TileMenu';
-export * from './AudioLevel';
-export * from './Popover';
-export * from './Stats';
-export * from './Theme';
-export * from './Checkbox';
-export * from './Label';
-export * from './RadioGroup';
-export * from './Toast';
-export * from './Accordion';
-export * from './Fieldset';
-export * from './Footer';
-export * as HMSSelect from './ReactSelect';
-export * from './Tabs';
-export * from './QRCode';
-export * from './Link';
-export * from './Collapsible';
-export * from './Prebuilt';
-export * from './Progress';
-export * from './context/DialogContext';
-export * from './TextArea';
-export * from './Diagnostics';

package/src/store/SetupFakeStore.ts

@@ -1,33 +0,0 @@
-import create from 'zustand';
-import { createDefaultStoreState, HMSReactiveStore, HMSStore } from '@100mslive/react-sdk';
-import { fakeMessages } from '../fixtures/chats';
-import { fakeParticipants } from '../fixtures/peers';
-import { StoryBookSDK } from './StorybookSDK';
-
-const store = HMSReactiveStore.createNewHMSStore('HMSStore', createDefaultStoreState);
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-export const storyBookStore = create<HMSStore>(store);
-export const storyBookSDK = new StoryBookSDK(store);
-
-const videoURLS = [
-  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4',
-  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-];
-
-export function setUpFakeStore() {
-  storyBookSDK.addTestRoom({
-    id: '123',
-    name: 'storybook room',
-    peers: [],
-  });
-  storyBookSDK.addTestVideoURLs(videoURLS);
-  fakeParticipants.forEach(peerWithMute => {
-    storyBookSDK.addTestPeerAndSpeaker(peerWithMute.peer);
-  });
-  fakeMessages.forEach(msg => {
-    storyBookSDK.sendBroadcastMessage(msg.message);
-  });
-}

package/src/store/StorybookSDK.ts

@@ -1,231 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { HMSFrameworkInfo } from '@100mslive/hms-video-store';
-import {
-  HMSActions,
-  HMSAudioTrackSettings,
-  HMSConfig,
-  HMSMessageInput,
-  HMSPeer,
-  HMSPreferredSimulcastLayer,
-  HMSRoom,
-  HMSRoomState,
-  HMSTrackSource,
-  HMSVideoTrackSettings,
-  IHMSStore,
-} from '@100mslive/react-sdk';
-import { makeFakeMessage } from '../fixtures/chats';
-
-/*
-This is a dummy bridge with no connected backend. It can be used for
-storybook or writing functional tests.
- */
-export class StoryBookSDK implements Partial<HMSActions> {
-  private readonly store: IHMSStore;
-  private videoURLs: string[] = [];
-  private dummyTrackURLs: Record<string, string> = {};
-  private counter = 100;
-  private localPeer?: HMSPeer;
-
-  constructor(store: IHMSStore) {
-    this.store = store;
-  }
-  setPreferredLayer(_trackId: string, _layer: HMSPreferredSimulcastLayer): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-
-  setVolume(_value: number, _trackId?: string): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-
-  setOutputDevice(_deviceId: string) {
-    throw new Error('Method not implemented');
-  }
-
-  setOutputVolume(_volume: number) {
-    throw new Error('Method not implemented');
-  }
-
-  addTrack(_track: MediaStreamTrack, _type: HMSTrackSource): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-  removeTrack(_trackId: string): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-  setEnabledTrack(_trackId: string, _enabled: boolean): Promise<void> {
-    throw new Error('Method not implemented.');
-  }
-
-  setFrameworkInfo(frameworkInfo: HMSFrameworkInfo): void {}
-
-  setMessageRead(readStatus: boolean, messageId: string): void {
-    this.store.setState(store => {
-      if (messageId) {
-        if (!store.messages.byID[messageId]) {
-          return;
-        } else {
-          store.messages.byID[messageId].read = readStatus;
-        }
-      } else {
-        store.messages.allIDs.forEach((id: string) => {
-          store.messages.byID[id].read = readStatus;
-        });
-      }
-    });
-  }
-
-  async preview(config: HMSConfig) {
-    if (!config.authToken) {
-      this.log('invalid params');
-      return;
-    }
-    this.log('User called preview');
-    this.store.setState(store => {
-      store.room.roomState = HMSRoomState.Preview;
-      this.localPeer = {
-        name: config?.userName,
-        isLocal: true,
-        id: String(this.randomNumber()),
-        auxiliaryTracks: [],
-        isHandRaised: false,
-      };
-      store.room.peers.push(this.localPeer.id);
-      store.peers[this.localPeer.id] = this.localPeer;
-    });
-  }
-
-  async join(...args: any[]): Promise<void> {
-    const joinParams = args[0];
-    if (!(joinParams.username && joinParams.role && joinParams.roomId)) {
-      this.log('invalid params');
-      return;
-    }
-    this.log('User joining room');
-    this.store.setState(store => {
-      store.room.isConnected = true;
-      store.room.id = joinParams.roomId;
-
-      if (!this.localPeer) {
-        this.localPeer = {
-          name: joinParams?.username,
-          roleName: joinParams?.roleName,
-          isLocal: true,
-          id: String(this.randomNumber()),
-          auxiliaryTracks: [],
-          isHandRaised: false,
-        };
-        store.room.peers.push(this.localPeer.id);
-        store.peers[this.localPeer.id] = this.localPeer;
-      }
-    });
-  }
-
-  async attachVideo(trackID: string, videoElement: HTMLVideoElement): Promise<void> {
-    if (this.dummyTrackURLs[trackID]) {
-      videoElement.src = this.dummyTrackURLs[trackID];
-    }
-    this.log('video attached');
-  }
-
-  async leave(): Promise<void> {
-    this.log('user left room');
-    this.store.setState(store => {
-      store.room.isConnected = false;
-    });
-  }
-
-  async detachVideo(_trackID: string, videoElement: HTMLVideoElement): Promise<void> {
-    videoElement.srcObject = null;
-    this.log('video removed');
-  }
-
-  async sendBroadcastMessage(message: string | HMSMessageInput): Promise<void> {
-    this.store.setState(store => {
-      const user = 'You';
-      const newMsg = makeFakeMessage(typeof message === 'string' ? message : message.message, user);
-      store.messages.byID[newMsg.id] = newMsg;
-      store.messages.allIDs.push(newMsg.id);
-    });
-    this.log('message sent - ', message);
-  }
-
-  async setLocalAudioEnabled(enabled: boolean): Promise<void> {
-    this.log('set local audio enabled state - ', enabled);
-  }
-
-  async setLocalVideoEnabled(enabled: boolean): Promise<void> {
-    this.log('set local video enabled state - ', enabled);
-  }
-
-  async setScreenShareEnabled(enabled: boolean): Promise<void> {
-    this.log('set screenshare enabled state - ', enabled);
-  }
-
-  addTestRoom(room: Partial<HMSRoom>) {
-    this.store.setState(store => {
-      Object.assign(store.room, room);
-    });
-  }
-
-  addTestPeerAndSpeaker(peer: HMSPeer) {
-    const randomURL = this.randomFromArray(this.videoURLs);
-    const videoTrackID = String(this.videoURLs.indexOf(randomURL) || this.counter++);
-    const audioTrackID = String(this.counter++);
-    this.dummyTrackURLs[videoTrackID] = randomURL;
-    peer.audioTrack = audioTrackID;
-    peer.videoTrack = videoTrackID;
-    this.store.setState(store => {
-      store.peers[peer.id] = peer;
-      store.room.peers.push(peer.id);
-      store.speakers[audioTrackID] = {
-        audioLevel: this.randomFromArray([0, 10, 20, 50, 70, 80, 100]),
-        peerID: peer.id,
-        trackID: audioTrackID,
-      };
-      if (peer.audioTrack) {
-        store.tracks[audioTrackID] = {
-          enabled: this.randomFromArray([true, false]),
-          id: audioTrackID,
-          type: 'audio',
-          source: 'regular',
-        };
-      }
-      if (peer.videoTrack) {
-        store.tracks[videoTrackID] = {
-          enabled: true,
-          id: videoTrackID,
-          type: 'video',
-          source: 'regular',
-        };
-      }
-    });
-  }
-
-  addTestVideoURLs(urls: string[]) {
-    this.videoURLs = urls;
-  }
-
-  getRandomPeer(): HMSPeer {
-    return this.randomFromArray(this.getPeers());
-  }
-
-  getPeers(): HMSPeer[] {
-    return Object.values(this.store.getState().peers);
-  }
-
-  private log(...args: any[]) {
-    console.log('storybook sdk', ...args);
-  }
-
-  private randomNumber() {
-    return Number(Math.floor(Math.random() * 100000));
-  }
-
-  private randomFromArray<T>(arr: T[]) {
-    return arr[Math.floor(Math.random() * arr.length)];
-  }
-
-  async setAudioSettings(_settings: HMSAudioTrackSettings): Promise<void> {}
-
-  async setVideoSettings(_settings: HMSVideoTrackSettings): Promise<void> {}
-}