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/interfaces/user.fixture.ts

@@ -0,0 +1,15 @@
+import { User } from './user.model';
+
+export const createUser = (name: string, color: number, createdAt: Date): User => ({
+  id: name,
+  displayName: name,
+  displayColor: color,
+  createdAt,
+  authenticated: true,
+  nameChangedAt: createdAt,
+  previousNames: [],
+  scopes: [],
+});
+
+export const spidermanUser = createUser('Spiderman', 1, new Date(2020, 1, 2));
+export const grootUser = createUser('Groot', 1, new Date(2020, 2, 3));