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

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> {}
-}

package/src/utils/animations.ts

@@ -1,114 +0,0 @@
-import { keyframes } from '../Theme';
-
-export const slideDown = (controller: string) =>
-  keyframes({
-    from: { height: 0 },
-    to: { height: `var(${controller})` },
-  });
-
-export const slideUp = (controller: string) =>
-  keyframes({
-    from: { height: `var(${controller})` },
-    to: { height: 0 },
-  });
-
-export const translateAcross = ({ xFrom = '0', yFrom = '0', zFrom = '0', xTo = '0', yTo = '0', zTo = '0' }) =>
-  keyframes({
-    from: { transform: `translate3d(${xFrom}, ${yFrom}, ${zFrom})` },
-    to: { transform: `translate3d(${xTo}, ${yTo}, ${zTo}` },
-  });
-
-export const dialogOpen = keyframes({
-  '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.90)' },
-  '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
-});
-
-export const dialogClose = keyframes({
-  '0%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },
-  '100%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.90)' },
-});
-
-export const slideUpAndFade = (start = '2px') =>
-  keyframes({
-    '0%': { opacity: 0, transform: `translateY(${start})` },
-    '100%': { opacity: 1, transform: 'translateY(0)' },
-  });
-
-export const slideRightAndFade = (start = '-2px') =>
-  keyframes({
-    '0%': { opacity: 0, transform: `translateX(${start})` },
-    '100%': { opacity: 1, transform: 'translateX(0)' },
-  });
-
-export const sheetSlideIn = keyframes({
-  from: { transform: '$$transformValue' },
-  to: { transform: 'translate3d(0,0,0)' },
-});
-
-export const sheetSlideOut = keyframes({
-  from: { transform: 'translate3d(0,0,0)' },
-  to: { transform: '$$transformValue' },
-});
-export const sheetFadeIn = keyframes({
-  from: { opacity: '0' },
-  to: { opacity: '1' },
-});
-
-export const sheetFadeOut = keyframes({
-  from: { opacity: '1' },
-  to: { opacity: '0' },
-});
-export const slideDownAndFade = (start = '-2px') =>
-  keyframes({
-    '0%': { opacity: 0, transform: `translateY(${start})` },
-    '100%': { opacity: 1, transform: 'translateY(0)' },
-  });
-
-export const slideLeftAndFade = (start = '2px') =>
-  keyframes({
-    '0%': { opacity: 0, transform: `translateX(${start})` },
-    '100%': { opacity: 1, transform: 'translateX(0)' },
-  });
-
-const slideLeftAndFadeOut = (end = '-100%') =>
-  keyframes({
-    '0%': { opacity: 1, transform: `translateX(0)` },
-    '100%': { opacity: 0, transform: `translateX(${end})` },
-  });
-
-export const popoverAnimation = {
-  '@media (prefers-reduced-motion: no-preference)': {
-    animationDuration: '400ms',
-    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    willChange: 'transform, opacity',
-    '&[data-state="open"]': {
-      '&[data-side="top"]': { animationName: slideDownAndFade() },
-      '&[data-side="right"]': { animationName: slideLeftAndFade() },
-      '&[data-side="bottom"]': { animationName: slideUpAndFade() },
-      '&[data-side="left"]': { animationName: slideRightAndFade() },
-    },
-  },
-};
-
-export const toastAnimation = {
-  '@media (prefers-reduced-motion: no-preference)': {
-    animationDuration: '500ms',
-    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-    willChange: 'transform, opacity',
-    animationName: slideLeftAndFadeOut(),
-
-    '&[data-state="open"]': {
-      animationName: slideRightAndFade('-100%'),
-    },
-    '&[data-swipe="move"]': {
-      transform: 'translateX(var(--radix-toast-swipe-move-x))',
-    },
-    '&[data-swipe="cancel"]': {
-      transform: 'translateX(0)',
-      transition: 'transform 200ms ease-out',
-    },
-    '&[data-swipe="end"]': {
-      animation: `${slideLeftAndFadeOut()} 100ms ease-out forwards`,
-    },
-  },
-};

package/src/utils/index.ts

@@ -1,2 +0,0 @@
-export * from './animations';
-export * from './styles';

package/src/utils/styles.ts

@@ -1,22 +0,0 @@
-/**
- * Flex based centering helper styles
- */
-export const flexCenter = {
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-};
-
-/**
- * Gives styles for text ellipsis, with given width as maxWidth.
- * A number in pixels or css width string value can be passed
- * @param {number|string} width
- * @returns
- */
-export const textEllipsis = (width: number | string) => ({
-  maxWidth: width,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  minWidth: 0,
-});