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',
+  },
+};

web/components/stores/ClientConfigStore.tsx

@@ -1,9 +1,9 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useContext, useEffect, useState } from 'react';
 import { atom, selector, useRecoilState, useSetRecoilState, RecoilEnv } from 'recoil';
 import { useMachine } from '@xstate/react';
 import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
-import ClientConfigService from '../../services/client-config-service';
-import ChatService from '../../services/chat-service';
+import { ClientConfigServiceContext } from '../../services/client-config-service';
+import { ChatServiceContext } from '../../services/chat-service';
 import WebsocketService from '../../services/websocket-service';
 import { ChatMessage } from '../../interfaces/chat-message.model';
 import { CurrentUser } from '../../interfaces/current-user';
@@ -24,7 +24,7 @@ import {
 } from '../../interfaces/socket-events';
 import { mergeMeta } from '../../utils/helpers';
 import handleConnectedClientInfoMessage from './eventhandlers/connected-client-info-handler';
-import ServerStatusService from '../../services/status-service';
+import { ServerStatusServiceContext } from '../../services/status-service';
 import handleNameChangeEvent from './eventhandlers/handleNameChangeEvent';
 import { DisplayableError } from '../../types/displayable-error';
 
@@ -155,6 +155,10 @@ export const visibleChatMessagesSelector = selector<ChatMessage[]>({
 });
 
 export const ClientConfigStore: FC = () => {
+  const ClientConfigService = useContext(ClientConfigServiceContext);
+  const ChatService = useContext(ChatServiceContext);
+  const ServerStatusService = useContext(ServerStatusServiceContext);
+
   const [appState, appStateSend, appStateService] = useMachine(appStateModel);
   const [currentUser, setCurrentUser] = useRecoilState(currentUserAtom);
   const setChatAuthenticated = useSetRecoilState<boolean>(chatAuthenticatedAtom);
@@ -209,7 +213,7 @@ export const ClientConfigStore: FC = () => {
       setHasLoadedConfig(true);
     } catch (error) {
       setGlobalFatalError('Unable to reach Owncast server', serverConnectivityError);
-      console.error(`ClientConfigService -> getConfig() ERROR: \n${error}`);
+      console.error(`ClientConfigService -> getConfig() ERROR: \n`, error);
     }
   };
 
@@ -228,7 +232,7 @@ export const ClientConfigStore: FC = () => {
     } catch (error) {
       sendEvent([AppStateEvent.Fail]);
       setGlobalFatalError('Unable to reach Owncast server', serverConnectivityError);
-      console.error(`serverStatusState -> getStatus() ERROR: \n${error}`);
+      console.error(`serverStatusState -> getStatus() ERROR: \n`, error);
     }
   };
 

web/components/video/OwncastPlayer/OwncastPlayer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect } from 'react';
+import React, { FC, useContext, useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { VideoJsPlayerOptions } from 'video.js';
@@ -12,8 +12,8 @@ import PlaybackMetrics from '../metrics/playback';
 import createVideoSettingsMenuButton from '../settings-menu';
 import LatencyCompensator from '../latencyCompensator';
 import styles from './OwncastPlayer.module.scss';
+import { VideoSettingsServiceContext } from '../../../services/video-settings-service';
 
-const VIDEO_CONFIG_URL = '/api/video/variants';
 const PLAYER_VOLUME = 'owncast_volume';
 const LATENCY_COMPENSATION_ENABLED = 'latencyCompensatorEnabled';
 
@@ -30,18 +30,6 @@ export type OwncastPlayerProps = {
   className?: string;
 };
 
-async function getVideoSettings() {
-  let qualities = [];
-
-  try {
-    const response = await fetch(VIDEO_CONFIG_URL);
-    qualities = await response.json();
-  } catch (e) {
-    console.error(e);
-  }
-  return qualities;
-}
-
 export const OwncastPlayer: FC<OwncastPlayerProps> = ({
   source,
   online,
@@ -49,6 +37,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
   title,
   className,
 }) => {
+  const VideoSettingsService = useContext(VideoSettingsServiceContext);
   const playerRef = React.useRef(null);
   const [videoPlaying, setVideoPlaying] = useRecoilState<boolean>(isVideoPlayingAtom);
   const clockSkew = useRecoilValue<Number>(clockSkewAtom);
@@ -151,7 +140,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
   };
 
   const createSettings = async (player, videojs) => {
-    const videoQualities = await getVideoSettings();
+    const videoQualities = await VideoSettingsService.getVideoQualities();
     const menuButton = createVideoSettingsMenuButton(
       player,
       videojs,