speaker-calibration 2.2.218 → 2.2.220

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "speaker-calibration",
-  "version": "2.2.218",
+  "version": "2.2.220",
   "description": "Speaker calibration library for auditory testing",
   "main": "dist/main.js",
   "directories": {

package/src/listener-app/listener.js

@@ -1,6 +1,6 @@
 // get element with id message
 import {phrases} from '../../dist/example/i18n.js';
-import {Listener} from '../main.js';
+import Listener from '../peer-connection/listener.js';
 // get url query parameters
 const urlParams = new URLSearchParams(window.location.search);
 
@@ -16,117 +16,308 @@ const listenerParameters = {
 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 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':
-    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');
+    //hide target element
+    const targetElement = document.getElementById('display');
+    targetElement.style.display = 'none';
+    // Initialize Listener early
+    const initializeListener = async () => {
+      window.listener = new Listener(listenerParameters);
+      await window.listener.initializePeer();
+    };
 
-    calibrationBeginButton.addEventListener('click', async () => {
-      console.log('Proceed button clicked');
+    // Check microphone permission first
+    async function checkAndRequestMicrophonePermission() {
+      // Show permission request message
+      allowMicrophoneElement.innerText = phrases.RC_microphonePermission['en-US'];
+      container.style.display = 'block';
 
-      // 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';
+      // 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;
+          }
 
-      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;
+          // 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});
           }
         }
-      } 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');
-        }
+        await requestMicAccess();
       } catch (err) {
-        console.log(err);
+        console.error('Error requesting microphone permission:', err);
+        allowMicrophoneElement.innerText = phrases.RC_microphonePermissionDenied['en-US'];
+        let error = JSON.stringify(err);
+        await window.listener.sendPermissionStatus({type: 'error', error: error});
       }
-      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();
+    }
+
+    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';
-    // event listener for when the page is loaded
 
-    window.addEventListener('load', () => {
+    window.addEventListener('load', async () => {
       // set the text of the html elements
-      recordingInProgressElement.innerHTML = recordingInProgress;
-      allowMicrophoneElement.innerHTML = allowMicrophone;
+      recordingInProgressElement.innerText = recordingInProgress;
+      allowMicrophoneElement.innerText = allowMicrophone;
 
       recordingInProgressElement.style.whiteSpace = 'nowrap';
       recordingInProgressElement.style.fontWeight = 'bold';
@@ -143,10 +334,10 @@ switch (isSmartPhone) {
       const message = document.getElementById('message');
       message.style.lineHeight = '2.5rem';
       const p = document.createElement('p');
-      p.innerHTML = backToExperimentWindow;
+      p.innerText = backToExperimentWindow;
       message.appendChild(p);
-      listenerParameters.microphoneDeviceId = urlParams.get('deviceId');
-      window.listener = new Listener(listenerParameters);
+
+      await window.listener.startCalibration();
       console.log(window.listener);
     });
     break;

package/src/main.js

@@ -1,4 +1,4 @@
-import Listener from './peer-connection/listener';
+// import Listener from './peer-connection/listener';
 import Speaker from './peer-connection/speaker';
 
 import VolumeCalibration from './tasks/volume/volume';
@@ -12,7 +12,6 @@ import {
 } from './peer-connection/peerErrors';
 
 export {
-  Listener,
   Speaker,
   VolumeCalibration,
   ImpulseResponseCalibration,

package/src/peer-connection/audioPeer.js

@@ -30,40 +30,6 @@ class AudioPeer {
    * @example
    */
   constructor(param = initParameters) {
-    // PeerJS
-    /* Create the Peer object for our end of the connection. */
-    this.peer = new Peer({
-      secure: true,
-      host: 'easyeyes-peer-server.herokuapp.com',
-      port: 443,
-      config: {
-        iceServers: [
-          {
-            urls: 'stun:stun.relay.metered.ca:80',
-          },
-          {
-            urls: 'turn:global.relay.metered.ca:80',
-            username: 'de884cfc34189cdf1a5dd616',
-            credential: 'IcOpouU9/TYBmpHU',
-          },
-          {
-            urls: 'turn:global.relay.metered.ca:80?transport=tcp',
-            username: 'de884cfc34189cdf1a5dd616',
-            credential: 'IcOpouU9/TYBmpHU',
-          },
-          {
-            urls: 'turn:global.relay.metered.ca:443',
-            username: 'de884cfc34189cdf1a5dd616',
-            credential: 'IcOpouU9/TYBmpHU',
-          },
-          {
-            urls: 'turns:global.relay.metered.ca:443?transport=tcp',
-            username: 'de884cfc34189cdf1a5dd616',
-            credential: 'IcOpouU9/TYBmpHU',
-          },
-        ],
-      },
-    });
     this.conn = null;
     this.lastPeerId = null;
 
@@ -116,13 +82,12 @@ class AudioPeer {
     // Workaround for peer.reconnect deleting previous id
     try {
       this.peer.id = this.lastPeerId;
-    // eslint-disable-next-line no-underscore-dangle
-    this.peer._lastServerId = this.lastPeerId;
-    this.peer.reconnect();
-    } catch(e) {
+      // eslint-disable-next-line no-underscore-dangle
+      this.peer._lastServerId = this.lastPeerId;
+      this.peer.reconnect();
+    } catch (e) {
       console.log(e);
     }
-    
   };
 
   /** .