Create stories for layout testing (#2722)

* Inject services with useContext

* Extract service for video settings

* Create mock factories for services

* Create test data for chat history

* Add story to visualize different layouts

* Fix renaming mistake

* Add landscape and portrait viewports

* Add landscape stories

---------

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/layouts/Main/Main.stories.tsx

@@ -0,0 +1,158 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { MutableSnapshot, RecoilRoot } from 'recoil';
+import { makeEmptyClientConfig } from '../../../interfaces/client-config.model';
+import { ServerStatus, makeEmptyServerStatus } from '../../../interfaces/server-status.model';
+import {
+  accessTokenAtom,
+  appStateAtom,
+  chatMessagesAtom,
+  chatVisibleToggleAtom,
+  clientConfigStateAtom,
+  currentUserAtom,
+  fatalErrorStateAtom,
+  isMobileAtom,
+  isVideoPlayingAtom,
+  serverStatusState,
+} from '../../stores/ClientConfigStore';
+import { Main } from './Main';
+import { ClientConfigServiceContext } from '../../../services/client-config-service';
+import { ChatServiceContext } from '../../../services/chat-service';
+import {
+  ServerStatusServiceContext,
+  ServerStatusStaticService,
+} from '../../../services/status-service';
+import { clientConfigServiceMockOf } from '../../../services/client-config-service.mock';
+import chatServiceMockOf from '../../../services/chat-service.mock';
+import serverStatusServiceMockOf from '../../../services/status-service.mock';
+import { VideoSettingsServiceContext } from '../../../services/video-settings-service';
+import videoSettingsServiceMockOf from '../../../services/video-settings-service.mock';
+import { grootUser, spidermanUser } from '../../../interfaces/user.fixture';
+import { exampleChatHistory } from '../../../interfaces/chat-message.fixture';
+
+export default {
+  title: 'owncast/Layout/Main',
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies ComponentMeta<typeof Main>;
+
+type StateInitializer = (mutableState: MutableSnapshot) => void;
+
+const composeStateInitializers =
+  (...fns: Array<StateInitializer>): StateInitializer =>
+  state =>
+    fns.forEach(fn => fn?.(state));
+
+const defaultClientConfig = {
+  ...makeEmptyClientConfig(),
+  logo: 'http://localhost:8080/logo',
+  name: "Spiderman's super serious stream",
+  summary: 'Strong Spidey stops supervillains! Streamed Saturdays & Sundays.',
+  extraPageContent: '<marquee>Spiderman is cool</marquee>',
+};
+
+const defaultServerStatus = makeEmptyServerStatus();
+const onlineServerStatus: ServerStatus = {
+  ...defaultServerStatus,
+  online: true,
+  viewerCount: 5,
+};
+
+const initializeDefaultState = (mutableState: MutableSnapshot) => {
+  mutableState.set(appStateAtom, {
+    videoAvailable: false,
+    chatAvailable: false,
+  });
+  mutableState.set(clientConfigStateAtom, defaultClientConfig);
+  mutableState.set(chatVisibleToggleAtom, true);
+  mutableState.set(accessTokenAtom, 'token');
+  mutableState.set(currentUserAtom, {
+    ...spidermanUser,
+    isModerator: false,
+  });
+  mutableState.set(serverStatusState, defaultServerStatus);
+  mutableState.set(isMobileAtom, false);
+
+  mutableState.set(chatMessagesAtom, exampleChatHistory);
+  mutableState.set(isVideoPlayingAtom, false);
+  mutableState.set(fatalErrorStateAtom, null);
+};
+
+const ClientConfigServiceMock = clientConfigServiceMockOf(defaultClientConfig);
+const ChatServiceMock = chatServiceMockOf(exampleChatHistory, {
+  ...grootUser,
+  accessToken: 'some fake token',
+});
+const DefaultServerStatusServiceMock = serverStatusServiceMockOf(defaultServerStatus);
+const OnlineServerStatusServiceMock = serverStatusServiceMockOf(onlineServerStatus);
+const VideoSettingsServiceMock = videoSettingsServiceMockOf([]);
+
+const Template: ComponentStory<typeof Main> = ({
+  initializeState,
+  ServerStatusServiceMock = DefaultServerStatusServiceMock,
+  ...args
+}: {
+  initializeState: (mutableState: MutableSnapshot) => void;
+  ServerStatusServiceMock: ServerStatusStaticService;
+}) => (
+  <RecoilRoot initializeState={composeStateInitializers(initializeDefaultState, initializeState)}>
+    <ClientConfigServiceContext.Provider value={ClientConfigServiceMock}>
+      <ChatServiceContext.Provider value={ChatServiceMock}>
+        <ServerStatusServiceContext.Provider value={ServerStatusServiceMock}>
+          <VideoSettingsServiceContext.Provider value={VideoSettingsServiceMock}>
+            <Main {...args} />
+          </VideoSettingsServiceContext.Provider>
+        </ServerStatusServiceContext.Provider>
+      </ChatServiceContext.Provider>
+    </ClientConfigServiceContext.Provider>
+  </RecoilRoot>
+);
+
+export const OfflineDesktop: typeof Template = Template.bind({});
+
+export const OfflineMobile: typeof Template = Template.bind({});
+OfflineMobile.args = {
+  initializeState: (mutableState: MutableSnapshot) => {
+    mutableState.set(isMobileAtom, true);
+  },
+};
+OfflineMobile.parameters = {
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+};
+
+export const OfflineTablet: typeof Template = Template.bind({});
+OfflineTablet.parameters = {
+  viewport: {
+    defaultViewport: 'tablet',
+  },
+};
+
+export const Online: typeof Template = Template.bind({});
+Online.args = {
+  ServerStatusServiceMock: OnlineServerStatusServiceMock,
+};
+
+export const OnlineMobile: typeof Template = Online.bind({});
+OnlineMobile.args = {
+  ServerStatusServiceMock: OnlineServerStatusServiceMock,
+  initializeState: (mutableState: MutableSnapshot) => {
+    mutableState.set(isMobileAtom, true);
+  },
+};
+OnlineMobile.parameters = {
+  viewport: {
+    defaultViewport: 'mobile1',
+  },
+};
+
+export const OnlineTablet: typeof Template = Online.bind({});
+OnlineTablet.args = {
+  ServerStatusServiceMock: OnlineServerStatusServiceMock,
+};
+OnlineTablet.parameters = {
+  viewport: {
+    defaultViewport: 'tablet',
+  },
+};