Calling: Lobby

ts/components/CallScreen.stories.tsx

@@ -5,7 +5,7 @@ import { action } from '@storybook/addon-actions';
 
 import { CallState } from '../types/Calling';
 import { ColorType } from '../types/Colors';
-import { CallScreen } from './CallScreen';
+import { CallScreen, PropsType } from './CallScreen';
 import { setup as setupI18n } from '../../js/modules/i18n';
 import enMessages from '../../_locales/en/messages.json';
 
@@ -16,6 +16,7 @@ const callDetails = {
   isIncoming: true,
   isVideoCall: true,
 
+  id: '3051234567',
   avatarPath: undefined,
   color: 'ultramarine' as ColorType,
   title: 'Rick Sanchez',
@@ -24,13 +25,20 @@ const callDetails = {
   profileName: 'Rick Sanchez',
 };
 
-const defaultProps = {
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   callDetails,
-  callState: CallState.Accepted,
+  callState: select(
+    'callState',
+    CallState,
+    overrideProps.callState || CallState.Accepted
+  ),
   hangUp: action('hang-up'),
-  hasLocalAudio: true,
-  hasLocalVideo: true,
-  hasRemoteVideo: true,
+  hasLocalAudio: boolean('hasLocalAudio', overrideProps.hasLocalAudio || false),
+  hasLocalVideo: boolean('hasLocalVideo', overrideProps.hasLocalVideo || false),
+  hasRemoteVideo: boolean(
+    'hasRemoteVideo',
+    overrideProps.hasRemoteVideo || false
+  ),
   i18n,
   setLocalAudio: action('set-local-audio'),
   setLocalPreview: action('set-local-preview'),
@@ -38,82 +46,38 @@ const defaultProps = {
   setRendererCanvas: action('set-renderer-canvas'),
   togglePip: action('toggle-pip'),
   toggleSettings: action('toggle-settings'),
-};
+});
 
-const permutations = [
-  {
-    title: 'Call Screen',
-    props: {},
-  },
-  {
-    title: 'Call Screen (Pre-ring)',
-    props: {
-      callState: CallState.Prering,
-    },
-  },
-  {
-    title: 'Call Screen (Ringing)',
-    props: {
-      callState: CallState.Ringing,
-    },
-  },
-  {
-    title: 'Call Screen (Reconnecting)',
-    props: {
-      callState: CallState.Reconnecting,
-    },
-  },
-  {
-    title: 'Call Screen (Ended)',
-    props: {
-      callState: CallState.Ended,
-    },
-  },
-  {
-    title: 'Calling (no local audio)',
-    props: {
-      ...defaultProps,
-      hasLocalAudio: false,
-    },
-  },
-  {
-    title: 'Calling (no local video)',
-    props: {
-      ...defaultProps,
-      hasLocalVideo: false,
-    },
-  },
-  {
-    title: 'Calling (no remote video)',
-    props: {
-      ...defaultProps,
-      hasRemoteVideo: false,
-    },
-  },
-];
+const story = storiesOf('Components/CallScreen', module);
 
-storiesOf('Components/CallScreen', module)
-  .add('Knobs Playground', () => {
-    const callState = select('callState', CallState, CallState.Accepted);
-    const hasLocalAudio = boolean('hasLocalAudio', true);
-    const hasLocalVideo = boolean('hasLocalVideo', true);
-    const hasRemoteVideo = boolean('hasRemoteVideo', true);
+story.add('Default', () => {
+  return <CallScreen {...createProps()} />;
+});
 
-    return (
-      <CallScreen
-        {...defaultProps}
-        callState={callState}
-        hasLocalAudio={hasLocalAudio}
-        hasLocalVideo={hasLocalVideo}
-        hasRemoteVideo={hasRemoteVideo}
-      />
-    );
-  })
-  .add('Iterations', () => {
-    return permutations.map(({ props, title }) => (
-      <>
-        <h3>{title}</h3>
-        <CallScreen {...defaultProps} {...props} />
-      </>
-    ));
-  });
+story.add('Pre-Ring', () => {
+  return <CallScreen {...createProps({ callState: CallState.Prering })} />;
+});
+
+story.add('Ringing', () => {
+  return <CallScreen {...createProps({ callState: CallState.Ringing })} />;
+});
+
+story.add('Reconnecting', () => {
+  return <CallScreen {...createProps({ callState: CallState.Reconnecting })} />;
+});
+
+story.add('Ended', () => {
+  return <CallScreen {...createProps({ callState: CallState.Ended })} />;
+});
+
+story.add('hasLocalAudio', () => {
+  return <CallScreen {...createProps({ hasLocalAudio: true })} />;
+});
+
+story.add('hasLocalVideo', () => {
+  return <CallScreen {...createProps({ hasLocalVideo: true })} />;
+});
+
+story.add('hasRemoteVideo', () => {
+  return <CallScreen {...createProps({ hasRemoteVideo: true })} />;
+});