chore: check device width and orientation for controls position defau…

…lt value
memori-ai · May 3, 2023 · 79dda42 · 79dda42
1 parent 1ec893d
commit 79dda42
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 3 deletions.
diff --git a/src/components/MemoriWidget/MemoriWidget.tsx b/src/components/MemoriWidget/MemoriWidget.tsx
@@ -271,10 +271,27 @@ const MemoriWidget = ({
   }, [speechSynthesizer]);
 
   useEffect(() => {
+    let defaultControlsPosition: 'center' | 'bottom' = 'bottom';
+    if (window.innerWidth < 768) {
+      // on mobile, default position is bottom
+      defaultControlsPosition = 'bottom';
+    } else if (
+      window.matchMedia('(orientation: portrait)').matches ||
+      window.innerHeight > window.innerWidth
+    ) {
+      // on portrait, default position is center
+      defaultControlsPosition = 'center';
+    } else {
+      // on landscape, default position is bottom
+      defaultControlsPosition = 'bottom';
+    }
+
     setMuteSpeaker(getLocalConfig('muteSpeaker', false));
     setContinuousSpeech(getLocalConfig('continuousSpeech', true));
     setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 2));
-    setControlsPosition(getLocalConfig('controlsPosition', 'center'));
+    setControlsPosition(
+      getLocalConfig('controlsPosition', defaultControlsPosition)
+    );
     setHideEmissions(getLocalConfig('hideEmissions', false));
   }, []);
 

diff --git a/src/components/layouts/FullPage.test.tsx b/src/components/layouts/FullPage.test.tsx
@@ -2,6 +2,20 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 it('renders FullPage layout unchanged', () => {
   const { container } = render(
     <Memori

diff --git a/src/components/layouts/Totem.test.tsx b/src/components/layouts/Totem.test.tsx
@@ -2,6 +2,20 @@ import { render } from '@testing-library/react';
 import Memori from '../MemoriWidget/MemoriWidget';
 import { integration, memori, tenant } from '../../mocks/data';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 it('renders Totem layout unchanged', () => {
   const { container } = render(
     <Memori

diff --git a/src/components/layouts/__snapshots__/FullPage.test.tsx.snap b/src/components/layouts/__snapshots__/FullPage.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders FullPage layout unchanged 1`] = `
 <div>
   <div
-    class="memori memori-widget memori-layout-fullpage memori-controls-center memori--with-integration"
+    class="memori memori-widget memori-layout-fullpage memori-controls-bottom memori--with-integration"
     data-memori-engine-state="{}"
     data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"

diff --git a/src/components/layouts/__snapshots__/Totem.test.tsx.snap b/src/components/layouts/__snapshots__/Totem.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders Totem layout unchanged 1`] = `
 <div>
   <div
-    class="memori memori-widget memori-layout-totem memori-controls-center memori--with-integration"
+    class="memori memori-widget memori-layout-totem memori-controls-bottom memori--with-integration"
     data-memori-engine-state="{}"
     data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
     data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"