npm - speaker-calibration - Versions diffs - 2.2.217 → 2.2.219 - Mend

speaker-calibration 2.2.217 → 2.2.219

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (142) hide show

package/.eslintignore +71 -71
package/.eslintrc.json +40 -40
package/.github/workflows/update-phrases.yml +37 -0
package/.prettierignore +69 -69
package/.prettierrc +14 -14
package/LICENSE +20 -20
package/README.md +133 -133
package/__mocks__/fileMock.js +1 -1
package/__mocks__/styleMock.js +1 -1
package/babel.config.js +3 -3
package/coverage/clover.xml +71 -71
package/coverage/coverage-final.json +224 -224
package/coverage/lcov-report/PythonServerInterface.js.html +265 -265
package/coverage/lcov-report/base.css +354 -354
package/coverage/lcov-report/block-navigation.js +82 -82
package/coverage/lcov-report/favicon.png +0 -0
package/coverage/lcov-report/index.html +123 -123
package/coverage/lcov-report/prettify.css +101 -101
package/coverage/lcov-report/prettify.js +937 -937
package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
package/coverage/lcov-report/sorter.js +189 -189
package/coverage/lcov-report/src/index.html +121 -121
package/coverage/lcov-report/src/server/PythonServerInterface.js.html +268 -268
package/coverage/lcov-report/src/server/index.html +123 -123
package/coverage/lcov-report/src/tasks/audioCalibrator.js.html +499 -499
package/coverage/lcov-report/src/tasks/audioRecorder.js.html +412 -412
package/coverage/lcov-report/src/tasks/index.html +143 -143
package/coverage/lcov-report/src/tasks/volume/index.html +123 -123
package/coverage/lcov-report/src/tasks/volume/volume.js.html +409 -409
package/coverage/lcov-report/src/utils.js.html +172 -172
package/coverage/lcov.info +91 -91
package/dist/Procfile +0 -0
package/dist/example/NoSleep.min.js +1 -1
package/dist/example/credentials.json.gpg +0 -0
package/dist/example/fetch-languages-sheets.js +77 -77
package/dist/example/i18n.js +28681 -28705
package/dist/example/index.html +47 -47
package/dist/example/listener.html +79 -79
package/dist/example/server.js +51 -51
package/dist/example/speaker.html +145 -145
package/dist/example/speakerUI.js +273 -273
package/dist/example/styles.css +152 -99
package/dist/listener.js +745 -2621
package/dist/main.js +12 -23
package/dist/main.js.LICENSE.txt +0 -0
package/dist/mlsGen.js +6814 -6814
package/dist/mlsGen.wasm +0 -0
package/dist/package-lock.json +1018 -1018
package/dist/package.json +18 -18
package/doc/AudioCalibrator.html +417 -417
package/doc/AudioPeer.html +251 -251
package/doc/AudioRecorder.html +195 -195
package/doc/ImpulseResponse.html +215 -215
package/doc/Listener.html +308 -308
package/doc/MlsGenInterface.html +226 -226
package/doc/MyEventEmitter.html +274 -274
package/doc/PythonServerAPI.html +109 -109
package/doc/Speaker-Calibration-UML-Diagram.png +0 -0
package/doc/Speaker.html +276 -276
package/doc/Takes%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +128 -128
package/doc/Takes%20the%20url%20of%20the%20current%20site%0Aand%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +138 -138
package/doc/Takes%20the%20url%20of%20the%20current%20site%20and%20a%20target%20element%20where%20html%20elements%20will%20be%20appended..html +137 -137
package/doc/Volume.html +88 -88
package/doc/audioCalibrator.js.html +179 -179
package/doc/audioPeer.js.html +175 -175
package/doc/audioRecorder.js.html +163 -163
package/doc/creates%20a%20new%20AudioRecorder%20instance.%20%0ASets%20up%20the%20audio%20context%20and%20file%20reader..html +114 -114
package/doc/fonts/OpenSans-Bold-webfont.eot +0 -0
package/doc/fonts/OpenSans-Bold-webfont.svg +1829 -1829
package/doc/fonts/OpenSans-Bold-webfont.woff +0 -0
package/doc/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
package/doc/fonts/OpenSans-BoldItalic-webfont.svg +1829 -1829
package/doc/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
package/doc/fonts/OpenSans-Italic-webfont.eot +0 -0
package/doc/fonts/OpenSans-Italic-webfont.svg +1829 -1829
package/doc/fonts/OpenSans-Italic-webfont.woff +0 -0
package/doc/fonts/OpenSans-Light-webfont.eot +0 -0
package/doc/fonts/OpenSans-Light-webfont.svg +1830 -1830
package/doc/fonts/OpenSans-Light-webfont.woff +0 -0
package/doc/fonts/OpenSans-LightItalic-webfont.eot +0 -0
package/doc/fonts/OpenSans-LightItalic-webfont.svg +1834 -1834
package/doc/fonts/OpenSans-LightItalic-webfont.woff +0 -0
package/doc/fonts/OpenSans-Regular-webfont.eot +0 -0
package/doc/fonts/OpenSans-Regular-webfont.svg +1830 -1830
package/doc/fonts/OpenSans-Regular-webfont.woff +0 -0
package/doc/global.html +308 -308
package/doc/index.html +58 -58
package/doc/listener.js.html +170 -170
package/doc/mlsGen_mlsGenInterface.js.html +117 -117
package/doc/myEventEmitter.js.html +124 -124
package/doc/peer-connection_audioPeer.js.html +188 -188
package/doc/peer-connection_listener.js.html +311 -311
package/doc/peer-connection_speaker.js.html +381 -381
package/doc/sc-activity-diagram.png +0 -0
package/doc/scripts/linenumber.js +25 -25
package/doc/scripts/prettify/Apache-License-2.0.txt +202 -202
package/doc/scripts/prettify/lang-css.js +24 -24
package/doc/scripts/prettify/prettify.js +640 -640
package/doc/server_PythonServerAPI.js.html +160 -160
package/doc/speaker.js.html +248 -248
package/doc/styles/jsdoc-default.css +371 -371
package/doc/styles/prettify-jsdoc.css +111 -111
package/doc/styles/prettify-tomorrow.css +163 -163
package/doc/tasks_audioCalibrator.js.html +207 -207
package/doc/tasks_audioRecorder.js.html +190 -190
package/doc/tasks_impulse-response_impulseResponse.js.html +442 -442
package/doc/tasks_impulse-response_mlsGen_mlsGenInterface.js.html +175 -175
package/doc/tasks_volume_volume.js.html +185 -185
package/doc/utils.js.html +105 -105
package/jest.config.js +173 -173
package/makefile +74 -0
package/netlify.toml +26 -26
package/package.json +78 -78
package/src/config/firebase.js +26 -26
package/src/index.html +21 -21
package/src/listener-app/listener.js +351 -153
package/src/main.js +22 -23
package/src/myEventEmitter.js +83 -83
package/src/peer-connection/audioPeer.js +183 -183
package/src/peer-connection/listener.js +389 -369
package/src/peer-connection/peerErrors.js +25 -25
package/src/peer-connection/speaker.js +810 -765
package/src/powerCheck.js +98 -98
package/src/server/PythonServerAPI.js +869 -869
package/src/tasks/audioCalibrator.js +360 -360
package/src/tasks/audioRecorder.js +315 -315
package/src/tasks/combination/combination.js +3167 -3160
package/src/tasks/combination/mlsGen/mlsGen.cpp +98 -98
package/src/tasks/combination/mlsGen/mlsGen.hpp +303 -303
package/src/tasks/combination/mlsGen/mlsGenInterface.js +131 -131
package/src/tasks/combination/mlsGen/mlsGenTest.cpp +180 -180
package/src/tasks/impulse-response/impulseResponse.js +610 -610
package/src/tasks/impulse-response/mlsGen/mlsGen.cpp +98 -98
package/src/tasks/impulse-response/mlsGen/mlsGen.hpp +303 -303
package/src/tasks/impulse-response/mlsGen/mlsGenInterface.js +131 -131
package/src/tasks/impulse-response/mlsGen/mlsGenTest.cpp +180 -180
package/src/tasks/volume/volume.cpp +2 -2
package/src/tasks/volume/volume.hpp +22 -22
package/src/tasks/volume/volume.js +279 -279
package/src/utils.js +205 -205
package/webpack.config.js +64 -64
package/.gitignore +0 -81

package/src/config/firebase.js CHANGED Viewed

@@ -1,26 +1,26 @@
-// Import the functions you need from the SDKs you need
-import {initializeApp} from 'firebase/app';
-import {getDatabase} from 'firebase/database';
-import {getFirestore} from 'firebase/firestore';
-// TODO: Add SDKs for Firebase products that you want to use
-// https://firebase.google.com/docs/web/setup#available-libraries
-// Your web app's Firebase configuration
-// For Firebase JS SDK v7.20.0 and later, measurementId is optional
-const firebaseConfig = {
-  apiKey: 'AIzaSyDZopCl6jqND4sFYCSiB1GpCXreXd6-Q9s',
-  authDomain: 'speaker-calibration.firebaseapp.com',
-  databaseURL: 'https://speaker-calibration-default-rtdb.firebaseio.com',
-  projectId: 'speaker-calibration',
-  storageBucket: 'speaker-calibration.appspot.com',
-  messagingSenderId: '322038930574',
-  appId: '1:322038930574:web:d10ca9e7d60b6da9bafddf',
-  measurementId: 'G-3724GD92R6',
-};
-// Initialize Firebase
-const app = initializeApp(firebaseConfig);
-// const database = getDatabase();
-const database = getFirestore(app);
-export default database;
+// Import the functions you need from the SDKs you need
+import {initializeApp} from 'firebase/app';
+import {getDatabase} from 'firebase/database';
+import {getFirestore} from 'firebase/firestore';
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: 'AIzaSyDZopCl6jqND4sFYCSiB1GpCXreXd6-Q9s',
+  authDomain: 'speaker-calibration.firebaseapp.com',
+  databaseURL: 'https://speaker-calibration-default-rtdb.firebaseio.com',
+  projectId: 'speaker-calibration',
+  storageBucket: 'speaker-calibration.appspot.com',
+  messagingSenderId: '322038930574',
+  appId: '1:322038930574:web:d10ca9e7d60b6da9bafddf',
+  measurementId: 'G-3724GD92R6',
+};
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+// const database = getDatabase();
+const database = getFirestore(app);
+export default database;

package/src/index.html CHANGED Viewed

@@ -1,21 +1,21 @@
-<!DOCTYPE html>
-<html class="no-js" lang="">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="x-ua-compatible" content="ie=edge" />
-    <title>Sound Check</title>
-    <meta name="description" content="" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <!-- Place favicon.ico in the root directory -->
-  </head>
-  <body>
-    <!--[if lt IE 8]>
-      <p class="browserupgrade">
-        You are using an <strong>outdated</strong> browser. Please
-        <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
-      </p>
-    <![endif]-->
-  </body>
-</html>
+<!DOCTYPE html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <title>Sound Check</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    <!-- Place favicon.ico in the root directory -->
+  </head>
+  <body>
+    <!--[if lt IE 8]>
+      <p class="browserupgrade">
+        You are using an <strong>outdated</strong> browser. Please
+        <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
+      </p>
+    <![endif]-->
+  </body>
+</html>

package/src/listener-app/listener.js CHANGED Viewed

@@ -1,153 +1,351 @@
-// get element with id message
-import {phrases} from '../../dist/example/i18n.js';
-import {Listener} from '../main.js';
-// get url query parameters
-const urlParams = new URLSearchParams(window.location.search);
-// get isSmartPhone query parameter
-const isSmartPhone = urlParams.get('sp'); // previous isSmartPhone
-const listenerParameters = {
-  targetElementId: 'display',
-  microphoneFromAPI: '',
-  microphoneDeviceId: '',
-};
-const container = document.getElementById('listenerContainer');
-const recordingInProgress = phrases.RC_soundRecording['en-US'];
-const backToExperimentWindow = phrases.RC_backToExperimentWindow['en-US'];
-const allowMicrophone = phrases.RC_allowMicrophoneUse['en-US'].replace(/\n/g, '<br>');
-const placeSmartphoneMicrophone = phrases.RC_placeSmartphoneMicrophone['en-US'].replace(
-  /\n/g,
-  '<br>'
-);
-const turnMeToReadBelow = phrases.RC_turnMeToReadBelow['en-US'].replace(/\n/g, '<br>');
-const recordingInProgressElement = document.getElementById('recordingInProgress');
-const allowMicrophoneElement = document.getElementById('allowMicrophone');
-const turnMessageElement = document.getElementById('turnMeToReadBelow');
-switch (isSmartPhone) {
-  case 'true':
-    allowMicrophoneElement.innerHTML = placeSmartphoneMicrophone;
-    allowMicrophoneElement.style.lineHeight = '1.2rem';
-    allowMicrophoneElement.style.fontSize = '14px';
-    turnMessageElement.innerHTML = turnMeToReadBelow;
-    turnMessageElement.style.lineHeight = '1.2rem';
-    turnMessageElement.style.fontSize = '14px';
-    // show the html upsidedown
-    const phrasesContainer = document.getElementById('phrases');
-    // add class
-    phrasesContainer.classList.add('phrases');
-    const html = document.querySelector('html');
-    html.style.overflow = 'hidden';
-    const display = document.getElementById('updateDisplay');
-    display.classList.add('updateDisplay');
-    container.style.display = 'block';
-    // event listener for id calibrationBeginButton
-    const calibrationBeginButton = document.getElementById('calibrationBeginButton');
-    console.log('Waiting for proceed button click');
-    calibrationBeginButton.addEventListener('click', async () => {
-      console.log('Proceed button clicked');
-      // remove the button
-      calibrationBeginButton.remove();
-      // remove turn message
-      turnMessageElement.remove();
-      // set the text of the html elements
-      recordingInProgressElement.innerHTML = recordingInProgress;
-      allowMicrophoneElement.innerHTML = allowMicrophone;
-      recordingInProgressElement.style.whiteSpace = 'nowrap';
-      recordingInProgressElement.style.fontWeight = 'bold';
-      // fit content
-      recordingInProgressElement.style.width = 'fit-content';
-      let fontSize = 100;
-      recordingInProgressElement.style.fontSize = fontSize + 'px';
-      console.log('Adjusting font size for recording in progress text');
-      while (recordingInProgressElement.scrollWidth > window.innerWidth * 0.9 && fontSize > 10) {
-        fontSize--;
-        recordingInProgressElement.style.fontSize = fontSize + 'px';
-      }
-      console.log('Done adjusting font size for recording in progress text');
-      const webAudioDeviceNames = {microphone: '', deviceID: ''};
-      const externalMicList = ['UMIK', 'Airpods', 'Bluetooth'];
-      try {
-        console.log('Getting user media...Should ask for microphone permission');
-        const stream = await navigator.mediaDevices.getUserMedia({audio: true});
-        console.log('Got user media');
-        if (stream) {
-          console.log('Getting devices');
-          const devices = await navigator.mediaDevices.enumerateDevices();
-          console.log(devices);
-          const mics = devices.filter(device => device.kind === 'audioinput');
-          mics.forEach(mic => {
-            if (externalMicList.some(externalMic => mic.label.includes(externalMic))) {
-              webAudioDeviceNames.microphone = mic.label;
-              webAudioDeviceNames.deviceID = mic.deviceId;
-            }
-          });
-          if (webAudioDeviceNames.microphone === '') {
-            webAudioDeviceNames.microphone = mics[0].label;
-            webAudioDeviceNames.deviceID = mics[0].deviceId;
-          }
-        }
-      } catch (err) {
-        console.log(err);
-      }
-      listenerParameters.microphoneFromAPI = webAudioDeviceNames.microphone;
-      listenerParameters.microphoneDeviceId = webAudioDeviceNames.microphone;
-      let lock = null;
-      try {
-        if ('wakeLock' in navigator) {
-          lock = await navigator.wakeLock.request('screen');
-        }
-      } catch (err) {
-        console.log(err);
-      }
-      console.log(lock);
-      console.log('Starting Calibration');
-      console.log('Device id in example listenr:', listenerParameters.microphoneDeviceId);
-      window.listener = new Listener(listenerParameters);
-      console.log(window.listener);
-      if (lock) {
-        lock.release();
-      }
-    });
-    break;
-  case 'false':
-    // remove the button
-    const calibrationBeginButton2 = document.getElementById('calibrationBeginButton');
-    calibrationBeginButton2.remove();
-    container.style.display = 'block';
-    // event listener for when the page is loaded
-    window.addEventListener('load', () => {
-      // set the text of the html elements
-      recordingInProgressElement.innerHTML = recordingInProgress;
-      allowMicrophoneElement.innerHTML = allowMicrophone;
-      recordingInProgressElement.style.whiteSpace = 'nowrap';
-      recordingInProgressElement.style.fontWeight = 'bold';
-      // fit content
-      recordingInProgressElement.style.width = 'fit-content';
-      let fontSize = 100;
-      recordingInProgressElement.style.fontSize = fontSize + 'px';
-      while (recordingInProgressElement.scrollWidth > window.innerWidth * 0.9 && fontSize > 10) {
-        fontSize--;
-        recordingInProgressElement.style.fontSize = fontSize + 'px';
-      }
-      const message = document.getElementById('message');
-      message.style.lineHeight = '2.5rem';
-      const p = document.createElement('p');
-      p.innerHTML = backToExperimentWindow;
-      message.appendChild(p);
-      listenerParameters.microphoneDeviceId = urlParams.get('deviceId');
-      window.listener = new Listener(listenerParameters);
-      console.log(window.listener);
-    });
-    break;
-}
+// get element with id message
+import {phrases} from '../../dist/example/i18n.js';
+import Listener from '../peer-connection/listener.js';
+// get url query parameters
+const urlParams = new URLSearchParams(window.location.search);
+// get isSmartPhone query parameter
+const isSmartPhone = urlParams.get('sp'); // previous isSmartPhone
+const listenerParameters = {
+  targetElementId: 'display',
+  microphoneFromAPI: '',
+  microphoneDeviceId: '',
+};
+const container = document.getElementById('listenerContainer');
+const recordingInProgress = phrases.RC_soundRecording['en-US'];
+const backToExperimentWindow = phrases.RC_backToExperimentWindow['en-US'];
+const allowMicrophone = phrases.RC_allowMicrophoneUse['en-US'];
+const placeSmartphoneMicrophone = phrases.RC_placeSmartphoneMicrophone['en-US'];
+const turnMeToReadBelow = phrases.RC_turnMeToReadBelow['en-US'];
+const recordingInProgressElement = document.getElementById('recordingInProgress');
+const allowMicrophoneElement = document.getElementById('allowMicrophone');
+const turnMessageElement = document.getElementById('turnMeToReadBelow');
+switch (isSmartPhone) {
+  case 'true':
+    //hide target element
+    const targetElement = document.getElementById('display');
+    targetElement.style.display = 'none';
+    // Initialize Listener early
+    const initializeListener = async () => {
+      window.listener = new Listener(listenerParameters);
+    };
+    // Check microphone permission first
+    async function checkAndRequestMicrophonePermission() {
+      try {
+        const permissionStatus = await navigator.permissions.query({name: 'microphone'});
+        if (permissionStatus.state === 'granted') {
+          // Permission already granted, proceed to normal flow
+          initializeSmartPhoneDisplay();
+          return;
+        }
+        // Show permission request message
+        allowMicrophoneElement.innerText = phrases.RC_microphonePermission['en-US'];
+        container.style.display = 'block';
+        // Function to request microphone access
+        async function requestMicAccess(attempt = 1) {
+          try {
+            await navigator.mediaDevices.getUserMedia({audio: true});
+            // Permission granted, proceed to normal flow
+            initializeSmartPhoneDisplay();
+          } catch (err) {
+            if (err.name === 'NotAllowedError') {
+              console.log('Permission explicitly denied');
+              // Permission explicitly denied
+              allowMicrophoneElement.innerText = phrases.RC_microphonePermissionDenied['en-US'];
+              // Send denied status and end study
+              let error = JSON.stringify(err);
+              await window.listener.sendPermissionStatus({type: 'denied', error: error});
+              return;
+            }
+            // If 10 seconds passed, try again
+            if (attempt < 3) {
+              console.log('Retrying microphone access');
+              // Limit retries
+              setTimeout(() => requestMicAccess(attempt + 1), 10000);
+            } else {
+              console.log('All retries failed, treating as denied');
+              // After all retries failed, treat as denied
+              allowMicrophoneElement.innerText = phrases.RC_microphonePermissionDenied['en-US'];
+              let error = JSON.stringify(err);
+              await window.listener.sendPermissionStatus({type: 'error', error: error});
+            }
+          }
+        }
+        requestMicAccess();
+      } catch (err) {
+        console.error('Error checking microphone permission:', err);
+        allowMicrophoneElement.innerText = phrases.RC_microphonePermissionDenied['en-US'];
+        let error = JSON.stringify(err);
+        await window.listener.sendPermissionStatus({type: 'error', error: error});
+      }
+    }
+    function initializeSmartPhoneDisplay() {
+      allowMicrophoneElement.innerText = placeSmartphoneMicrophone;
+      allowMicrophoneElement.style.lineHeight = '1.2rem';
+      allowMicrophoneElement.style.fontSize = '14px';
+      turnMessageElement.innerText = turnMeToReadBelow;
+      turnMessageElement.style.lineHeight = '1.2rem';
+      turnMessageElement.style.fontSize = '14px';
+      // Show the html upsidedown and adjust layout
+      const phrasesContainer = document.getElementById('phrases');
+      phrasesContainer.classList.add('phrases');
+      // Hide all elements except what's needed for calibration
+      const html = document.querySelector('html');
+      html.style.overflow = 'hidden';
+      // Adjust the display container
+      const display = document.getElementById('updateDisplay');
+      display.classList.add('updateDisplay');
+      display.style.position = 'absolute';
+      display.style.top = '50%';
+      display.style.left = '50%';
+      display.style.transform = 'translate(-50%, -50%) rotate(180deg)';
+      display.style.width = '100%';
+      display.style.textAlign = 'center';
+      container.style.display = 'block';
+      // event listener for id calibrationBeginButton
+      const calibrationBeginButton = document.getElementById('calibrationBeginButton');
+      console.log('Waiting for proceed button click');
+      calibrationBeginButton.addEventListener('click', async () => {
+        console.log('Proceed button clicked');
+        // Clear unnecessary elements
+        calibrationBeginButton.remove();
+        turnMessageElement.remove();
+        // Create a header container for fixed elements
+        const headerContainer = document.createElement('div');
+        headerContainer.id = 'headerContainer';
+        headerContainer.style.position = 'fixed';
+        headerContainer.style.bottom = '0';
+        headerContainer.style.left = '0';
+        headerContainer.style.width = '100%';
+        headerContainer.style.background = 'white';
+        headerContainer.style.padding = '10px';
+        headerContainer.style.zIndex = '1000';
+        headerContainer.style.transform = 'rotate(180deg)';
+        container.appendChild(headerContainer);
+        // Set title based on screen width
+        const title = document.createElement('h1');
+        const titleText =
+          window.innerWidth >= 1366
+            ? phrases.RC_soundRecording['en-US']
+            : phrases.RC_soundRecordingSmallScreen['en-US'];
+        // Split small screen title into lines if needed
+        if (window.innerWidth < 1366 && titleText.includes('\n')) {
+          const lines = titleText.split('\n');
+          // Create container for title lines
+          const titleContainer = document.createElement('div');
+          titleContainer.style.display = 'flex';
+          titleContainer.style.flexDirection = 'column';
+          titleContainer.style.alignItems = 'left';
+          titleContainer.style.lineHeight = '1.2';
+          // Add each line
+          lines.forEach(line => {
+            const lineDiv = document.createElement('p');
+            lineDiv.textContent = line;
+            lineDiv.style.width = 'fit-content';
+            titleContainer.appendChild(lineDiv);
+          });
+          title.appendChild(titleContainer);
+        } else {
+          title.textContent = titleText;
+          title.style.lineHeight = '1.2';
+        }
+        title.style.margin = '0';
+        title.style.whiteSpace = 'pre-line'; // Preserve line breaks
+        headerContainer.appendChild(title);
+        // Function to adjust font size to fill width
+        const adjustFontSize = (element, maxWidth) => {
+          let fontSize = 20; // Start with a reasonable minimum size
+          element.style.fontSize = fontSize + 'px';
+          // Increase font size until text fills width (minus margins)
+          while (element.scrollWidth < maxWidth - 40 && fontSize < 200) {
+            fontSize++;
+            element.style.fontSize = fontSize + 'px';
+          }
+          // Step back one to ensure we don't overflow
+          fontSize--;
+          element.style.fontSize = fontSize + 'px';
+          return fontSize;
+        };
+        // For small screen, ensure all lines use same font size
+        if (window.innerWidth < 1366 && titleText.includes('\n')) {
+          const lines = title.querySelectorAll('p');
+          let minFontSize = Infinity;
+          // First pass: find the smallest font size that fits for any line
+          lines.forEach(line => {
+            const fontSize = adjustFontSize(line, window.innerWidth);
+            minFontSize = Math.min(minFontSize, fontSize);
+          });
+          // Second pass: apply the smallest font size to all lines
+          lines.forEach(line => {
+            line.style.fontSize = minFontSize + 'px';
+          });
+        } else {
+          // For single line title, just adjust to fill width
+          adjustFontSize(title, window.innerWidth);
+        }
+        // Get the header height after text is added and sized
+        const headerHeight = headerContainer.getBoundingClientRect().height;
+        // Adjust the display container to start after header
+        const display = document.getElementById('updateDisplay');
+        display.classList.add('updateDisplay');
+        display.style.position = 'fixed';
+        display.style.bottom = `${headerHeight}px`; // Start after header
+        display.style.left = '0';
+        display.style.right = '0';
+        display.style.top = '0';
+        display.style.transform = 'rotate(180deg)';
+        display.style.overflowY = 'auto';
+        display.style.padding = '20px';
+        display.style.background = 'white';
+        // Position microphone instruction at the top (appears at bottom due to rotation)
+        allowMicrophoneElement.innerText = '';
+        allowMicrophoneElement.style.position = 'fixed';
+        allowMicrophoneElement.style.top = '20px';
+        allowMicrophoneElement.style.left = '50%';
+        allowMicrophoneElement.style.transform = 'translateX(-50%) rotate(180deg)';
+        allowMicrophoneElement.style.width = '90%';
+        allowMicrophoneElement.style.textAlign = 'center';
+        allowMicrophoneElement.style.zIndex = '1000';
+        let lock = null;
+        try {
+          if ('wakeLock' in navigator) {
+            lock = await navigator.wakeLock.request('screen');
+          }
+        } catch (err) {
+          console.log(err);
+        }
+        const webAudioDeviceNames = {microphone: '', deviceID: ''};
+        const externalMicList = ['UMIK', 'Airpods', 'Bluetooth'];
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({audio: true});
+          if (stream) {
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const mics = devices.filter(device => device.kind === 'audioinput');
+            mics.forEach(mic => {
+              if (externalMicList.some(externalMic => mic.label.includes(externalMic))) {
+                webAudioDeviceNames.microphone = mic.label;
+                webAudioDeviceNames.deviceID = mic.deviceId;
+              }
+            });
+            if (webAudioDeviceNames.microphone === '') {
+              webAudioDeviceNames.microphone = mics[0].label;
+              webAudioDeviceNames.deviceID = mics[0].deviceId;
+            }
+          }
+        } catch (err) {
+          console.log(err);
+        }
+        window.listener.setMicrophoneFromAPI(webAudioDeviceNames.microphone);
+        window.listener.setMicrophoneDeviceId(webAudioDeviceNames.microphone);
+        // show target element
+        targetElement.style.display = 'block';
+        await window.listener.startCalibration();
+        if (lock) {
+          lock.release();
+        }
+      });
+    }
+    // Wrap the initialization in an IIFE
+    (async function initializeSmartPhoneMode() {
+      await initializeListener();
+      const timeout = 30000; // 30 seconds timeout
+      const startTime = Date.now();
+      // Wait for peer connection setup with timeout
+      while (Date.now() - startTime < timeout) {
+        if (
+          window.listener.peer.id !== null &&
+          window.listener.conn !== null &&
+          window.listener.connOpen
+        ) {
+          console.log('Connection established successfully');
+          await checkAndRequestMicrophonePermission();
+          return;
+        }
+        console.log('Waiting for connection setup...');
+        await new Promise(resolve => setTimeout(resolve, 100));
+      }
+      // If we get here, we've timed out
+      console.error('Connection setup timed out after 30 seconds');
+      allowMicrophoneElement.innerText = phrases.RC_microphonePermissionDenied['en-US'];
+      await window.listener.sendPermissionStatus({
+        type: 'error',
+        error: 'Connection setup timed out after 30 seconds',
+      });
+    })().catch(console.error);
+    break;
+  case 'false':
+    // Initialize listener immediately
+    listenerParameters.microphoneDeviceId = urlParams.get('deviceId');
+    window.listener = new Listener(listenerParameters);
+    // remove the button
+    const calibrationBeginButton2 = document.getElementById('calibrationBeginButton');
+    calibrationBeginButton2.remove();
+    container.style.display = 'block';
+    window.addEventListener('load', async () => {
+      // set the text of the html elements
+      recordingInProgressElement.innerText = recordingInProgress;
+      allowMicrophoneElement.innerText = allowMicrophone;
+      recordingInProgressElement.style.whiteSpace = 'nowrap';
+      recordingInProgressElement.style.fontWeight = 'bold';
+      // fit content
+      recordingInProgressElement.style.width = 'fit-content';
+      let fontSize = 100;
+      recordingInProgressElement.style.fontSize = fontSize + 'px';
+      while (recordingInProgressElement.scrollWidth > window.innerWidth * 0.9 && fontSize > 10) {
+        fontSize--;
+        recordingInProgressElement.style.fontSize = fontSize + 'px';
+      }
+      const message = document.getElementById('message');
+      message.style.lineHeight = '2.5rem';
+      const p = document.createElement('p');
+      p.innerText = backToExperimentWindow;
+      message.appendChild(p);
+      await window.listener.startCalibration();
+      console.log(window.listener);
+    });
+    break;
+}

package/src/main.js CHANGED Viewed

@@ -1,23 +1,22 @@
-import Listener from './peer-connection/listener';
-import Speaker from './peer-connection/speaker';
-import VolumeCalibration from './tasks/volume/volume';
-import ImpulseResponseCalibration from './tasks/impulse-response/impulseResponse';
-import CombinationCalibration from './tasks/combination/combination';
-import {
-  UnsupportedDeviceError,
-  MissingSpeakerIdError,
-  CalibrationTimedOutError,
-} from './peer-connection/peerErrors';
-export {
-  Listener,
-  Speaker,
-  VolumeCalibration,
-  ImpulseResponseCalibration,
-  UnsupportedDeviceError,
-  MissingSpeakerIdError,
-  CalibrationTimedOutError,
-  CombinationCalibration,
-};
+// import Listener from './peer-connection/listener';
+import Speaker from './peer-connection/speaker';
+import VolumeCalibration from './tasks/volume/volume';
+import ImpulseResponseCalibration from './tasks/impulse-response/impulseResponse';
+import CombinationCalibration from './tasks/combination/combination';
+import {
+  UnsupportedDeviceError,
+  MissingSpeakerIdError,
+  CalibrationTimedOutError,
+} from './peer-connection/peerErrors';
+export {
+  Speaker,
+  VolumeCalibration,
+  ImpulseResponseCalibration,
+  UnsupportedDeviceError,
+  MissingSpeakerIdError,
+  CalibrationTimedOutError,
+  CombinationCalibration,
+};