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/services/chat-service.mock.ts

@@ -0,0 +1,18 @@
+import { ChatMessage } from '../interfaces/chat-message.model';
+import { ChatStaticService, UserRegistrationResponse } from './chat-service';
+
+export const chatServiceMockOf = (
+  chatHistory: ChatMessage[],
+  userRegistrationResponse: UserRegistrationResponse,
+): ChatStaticService =>
+  class ChatServiceMock {
+    public static async getChatHistory(): Promise<ChatMessage[]> {
+      return chatHistory;
+    }
+
+    public static async registerUser(): Promise<UserRegistrationResponse> {
+      return userRegistrationResponse;
+    }
+  };
+
+export default chatServiceMockOf;