@100mslive/roomkit-react 0.1.0

package/src/VideoList/VideoList.stories.tsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+import { selectPeers, useHMSStore, useVideoList } from '@100mslive/react-sdk';
+import { MicOffIcon } from '@100mslive/react-icons';
+import { Video } from '../Video/Video';
+import { StyledVideoTile } from '../VideoTile';
+import { StyledVideoList } from './StyledVideoList';
+import { getLeft } from './videoListUtils';
+
+const VideoListMeta = {
+  title: 'Video/VideoList',
+};
+
+export default VideoListMeta;
+
+const VideoTile: React.FC<{ width: number; height: number; trackId: string; name: string }> = ({
+  width,
+  height,
+  trackId,
+  name,
+}) => {
+  return (
+    <StyledVideoTile.Root css={{ width, height }}>
+      <StyledVideoTile.Container>
+        <Video trackId={trackId} />
+        <StyledVideoTile.Info>{name}</StyledVideoTile.Info>
+        <StyledVideoTile.AudioIndicator>
+          <MicOffIcon />
+        </StyledVideoTile.AudioIndicator>
+      </StyledVideoTile.Container>
+    </StyledVideoTile.Root>
+  );
+};
+
+interface VideoListProps {
+  maxTileCount: number;
+  aspectRatio: {
+    width: number;
+    height: number;
+  };
+}
+
+const VideoListStory: React.FC<VideoListProps> = ({ maxTileCount, aspectRatio }) => {
+  const peers = useHMSStore(selectPeers);
+  const [page] = useState(0);
+  const { ref, pagesWithTiles } = useVideoList({
+    peers,
+    offsetY: 50,
+    maxTileCount,
+    aspectRatio,
+  });
+  return (
+    <StyledVideoList.Root css={{ height: '100vh', width: '100%' }} ref={ref}>
+      <StyledVideoList.Container>
+        {pagesWithTiles && pagesWithTiles.length > 0
+          ? pagesWithTiles.map((tiles, pageNo) => (
+              <StyledVideoList.View
+                css={{
+                  left: getLeft(pageNo, page),
+                  transition: 'left 0.3s ease-in-out',
+                }}
+              >
+                {tiles.map((tile, i) =>
+                  tile.track?.source === 'screen' ? null : (
+                    <VideoTile
+                      key={tile.track?.id || tile.peer.id + i}
+                      width={tile.width}
+                      height={tile.height}
+                      trackId={tile.track?.id || ''}
+                      name={tile.peer.name}
+                    />
+                  ),
+                )}
+              </StyledVideoList.View>
+            ))
+          : null}
+      </StyledVideoList.Container>
+    </StyledVideoList.Root>
+  );
+};
+
+const Template: ComponentStory<typeof VideoListStory> = args => <VideoListStory {...args} />;
+
+export const Example = Template.bind({});
+
+Example.args = {
+  maxTileCount: 2,
+  aspectRatio: {
+    width: 2,
+    height: 1,
+  },
+};

package/src/VideoList/index.tsx

@@ -0,0 +1,2 @@
+export { getLeft } from './videoListUtils';
+export { StyledVideoList } from './StyledVideoList';

package/src/VideoList/videoListUtils.tsx

@@ -0,0 +1,20 @@
+export const getLeft = (index: number, currentPageIndex: number) => {
+  //active slide
+  if (index === currentPageIndex) {
+    return 0;
+  }
+  //prev slide
+  if (index + 1 === currentPageIndex) {
+    return '-100%';
+  }
+  //next slide
+  if (index - 1 === currentPageIndex) {
+    return '100%';
+  }
+  //all slides before prev
+  if (index < currentPageIndex) {
+    return '-200%';
+  }
+  //all slides after next
+  return '200%';
+};

package/src/VideoTile/StyledVideoTile.tsx

@@ -0,0 +1,148 @@
+import { Box } from '../Layout';
+import { styled } from '../Theme';
+import { flexCenter } from '../utils';
+
+export const Root = styled('div', {
+  padding: '0.75rem',
+  // show videotile context menu on hover
+  // [`&:hover .tile-menu`]: {
+  //   display: 'inline-block',
+  // },
+});
+
+const Container = styled('div', {
+  width: '100%',
+  height: '100%',
+  position: 'relative',
+  borderRadius: '$2',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  background: '$tileBg',
+  variants: {
+    transparentBg: {
+      true: {
+        background: 'transparent',
+      },
+    },
+    noRadius: {
+      true: {
+        borderRadius: 0,
+      },
+    },
+  },
+});
+
+const Overlay = styled('div', {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+});
+
+const Info = styled('div', {
+  color: '$textPrimary',
+  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',
+  color: '$textPrimary',
+});
+
+const AudioIndicator = styled('div', {
+  position: 'absolute',
+  top: '$2',
+  right: '$2',
+  color: '$white',
+  bg: '$error',
+  borderRadius: '$round',
+  width: '$13',
+  height: '$13',
+  mb: '5px',
+  ...flexCenter,
+  variants: {
+    size: {
+      small: {
+        width: '$10',
+        height: '$10',
+        '& > svg': {
+          width: '$8',
+          height: '$8',
+        },
+      },
+      medium: {
+        width: '$13',
+        height: '$13',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+  },
+});
+
+const FullScreenButton = styled('button', {
+  width: '2.25rem',
+  height: '2.25rem',
+  color: '$textHighEmp',
+  borderRadius: '$round',
+  backgroundColor: '$menuBg',
+  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$brandLight',
+  },
+});
+
+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;
+  AudioIndicator: typeof AudioIndicator;
+  AvatarContainer: typeof AvatarContainer;
+  AttributeBox: typeof AttributeBox;
+  FullScreenButton: typeof FullScreenButton;
+}
+
+export const StyledVideoTile: VideoTileType = {
+  Root,
+  Container,
+  Overlay,
+  Info,
+  AudioIndicator,
+  AvatarContainer,
+  AttributeBox,
+  FullScreenButton,
+};

package/src/VideoTile/VideoTile.mdx

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

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

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

package/src/fixtures/chats.ts

@@ -0,0 +1,25 @@
+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 100m', '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

@@ -0,0 +1,24 @@
+import { HMSPeerWithMuteStatus } from '@100mslive/hms-video-store';
+
+let counter = 1;
+export const makeFakeParticipant = (name: string, role = 'Student') => {
+  return {
+    peer: {
+      id: String(counter++),
+      name,
+      role: role,
+      auxiliaryTracks: [],
+      isLocal: counter === 1,
+    },
+    isAudioEnabled: false,
+  } as HMSPeerWithMuteStatus;
+};
+
+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

@@ -0,0 +1,11 @@
+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/index.ts

@@ -0,0 +1,38 @@
+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';

package/src/store/SetupFakeStore.ts

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

@@ -0,0 +1,229 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { HMSFrameworkInfo } from '@100mslive/hms-video';
+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: [],
+      };
+      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: [],
+        };
+        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> {}
+}