Add improvements

src/helper/extract-insights.ts

@@ -8,10 +8,12 @@ export const extractInsights = (
   fps?: number;
   renderScale?: number;
   lightScale?: number;
+  version?: string;
 } => ({
   fps: insights?.fps,
   vendor: insights?.vendor,
   renderer: insights?.renderer,
   renderScale: insights?.renderPasses.distance.renderScale,
   lightScale: insights?.renderPasses.lights.renderScale,
+  version: insights?.sdf2dVersion,
 });

src/helper/handle-full-screen.ts

@@ -0,0 +1,48 @@
+export const handleFullScreen = (
+  minimizeButton: HTMLElement,
+  maximizeButton: HTMLElement,
+  target: HTMLElement
+) => {
+  if (!document.fullscreenEnabled) {
+    minimizeButton.style.visibility = 'hidden';
+    maximizeButton.style.visibility = 'hidden';
+    return;
+  }
+
+  const isInFullScreen = (): boolean => document.fullscreenElement !== null;
+
+  const showButtons = () => {
+    minimizeButton.style.visibility = isInFullScreen() ? 'visible' : 'hidden';
+    maximizeButton.style.visibility = isInFullScreen() ? 'hidden' : 'visible';
+  };
+
+  showButtons();
+
+  let currentWindowHeight = innerHeight;
+
+  const followToggle = () => {
+    showButtons();
+    currentWindowHeight = innerHeight;
+  };
+
+  const triggerToggle = async () => {
+    await (isInFullScreen() ? document.exitFullscreen() : target.requestFullscreen());
+    followToggle();
+  };
+
+  addEventListener('keydown', (e) => {
+    if (e.key === 'F11') {
+      triggerToggle();
+      e.preventDefault();
+    }
+  });
+
+  addEventListener('resize', () => {
+    if (isInFullScreen && currentWindowHeight > innerHeight) {
+      followToggle();
+    }
+  });
+
+  maximizeButton.addEventListener('click', triggerToggle);
+  minimizeButton.addEventListener('click', triggerToggle);
+};

src/helper/handle-insights.ts

@@ -2,8 +2,12 @@ const baseUri = 'https://insights.decla.red';
 const type = 'sdf-2d-demo';
 
 export const handleInsights = async (initialData: any): Promise<(data: any) => void> => {
-  const sessionId = await createSession(initialData);
-  return (data) => createFrame(sessionId, data);
+  try {
+    const sessionId = await createSession(initialData);
+    return (data) => createFrame(sessionId, data);
+  } catch {
+    return () => null;
+  }
 };
 
 const createSession = async (data: any): Promise<string> => {
@@ -12,8 +16,8 @@ const createSession = async (data: any): Promise<string> => {
   return sessionId;
 };
 
-const createFrame = async (sessionId: string, data: any): Promise<unknown> =>
-  await sendPostRequest(`${baseUri}/${type}/sessions/${sessionId}`, data);
+const createFrame = (sessionId: string, data: any): Promise<unknown> =>
+  sendPostRequest(`${baseUri}/${type}/sessions/${sessionId}`, data).catch();
 
 const sendPostRequest = async (uri: string, data: any): Promise<Response> =>
   await fetch(uri, {