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/video-settings-service.ts

@@ -0,0 +1,36 @@
+import { createContext } from 'react';
+
+export type VideoQuality = {
+  index: number;
+  /**
+   * This property is not just for display or so
+   * but it holds information
+   *
+   * @example '1.2Mbps@24fps'
+   */
+  name: string;
+};
+
+export interface VideoSettingsStaticService {
+  getVideoQualities(): Promise<Array<VideoQuality>>;
+}
+
+class VideoSettingsService {
+  private static readonly VIDEO_CONFIG_URL = '/api/video/variants';
+
+  public static async getVideoQualities(): Promise<Array<VideoQuality>> {
+    let qualities: Array<VideoQuality> = [];
+
+    try {
+      const response = await fetch(VideoSettingsService.VIDEO_CONFIG_URL);
+      qualities = await response.json();
+      console.log(qualities);
+    } catch (e) {
+      console.error(e);
+    }
+    return qualities;
+  }
+}
+
+export const VideoSettingsServiceContext =
+  createContext<VideoSettingsStaticService>(VideoSettingsService);