speaker-calibration 2.2.2 → 2.2.4

package/dist/example/listener.html

@@ -44,6 +44,7 @@
           <div id="display"></div>
         </div>
       </div>
+      <p id="turnMeToReadBelow"></p>
     </div>
     <script type="module" src="../example/listener.js"></script>
     <script type="text/javascript"></script>

package/dist/example/listener.js

@@ -15,12 +15,15 @@ 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':
     allowMicrophoneElement.innerHTML = placeSmartphoneMicrophone;
+    turnMessageElement.innerHTML = turnMeToReadBelow;
     // show the html upsidedown
     const phrasesContainer = document.getElementById('phrases');
     // add class
@@ -34,6 +37,8 @@ switch (isSmartPhone) {
     calibrationBeginButton.addEventListener('click', () => {
       // remove the button
       calibrationBeginButton.remove();
+      // remove turn message
+      turnMessageElement.remove();
       // set the text of the html elements
       recordingInProgressElement.innerHTML = recordingInProgress;
       allowMicrophoneElement.innerHTML = allowMicrophone;

package/dist/example/styles.css

@@ -55,3 +55,9 @@ hr {
   overflow-y: scroll;
   overflow-x: hidden;
 }
+
+#turnMeToReadBelow {
+  position: absolute;
+  top: 20px;
+  font-size: larger;
+}

package/dist/main.js

@@ -785,7 +785,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var qrcode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! qrcode */ \"./node_modules/qrcode/lib/browser.js\");\n/* harmony import */ var _audioPeer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./audioPeer */ \"./src/peer-connection/audioPeer.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ \"./src/utils.js\");\n/* harmony import */ var _peerErrors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./peerErrors */ \"./src/peer-connection/peerErrors.js\");\n/* harmony import */ var _config_firebase__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../config/firebase */ \"./src/config/firebase.js\");\n/* harmony import */ var firebase_database__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! firebase/database */ \"./node_modules/firebase/database/dist/esm/index.esm.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/**\r\n * @class Handles the speaker's side of the connection. Responsible for initiating the connection,\r\n * rendering the QRCode, and answering the call.\r\n * @augments AudioPeer\r\n */\r\nclass Speaker extends _audioPeer__WEBPACK_IMPORTED_MODULE_1__[\"default\"] {\r\n  /**\r\n   * Takes the url of the current site and a target element where html elements will be appended.\r\n   *\r\n   * @param params - See type definition for initParameters.\r\n   * @param Calibrator - An instance of the AudioCalibrator class, should not use AudioCalibrator directly, instead use an extended class available in /tasks/.\r\n   * @param CalibratorInstance\r\n   * @example\r\n   */\r\n  constructor(params, CalibratorInstance) {\r\n    super(params);\r\n    this.siteUrl += '/listener?';\r\n    this.ac = CalibratorInstance;\r\n    this.result = null;\r\n    this.debug = params?.debug ?? false;\r\n    this.isSmartPhone = params?.isSmartPhone ?? false;\r\n\r\n    /* Set up callbacks that handle any events related to our peer object. */\r\n    this.peer.on('open', this.#onPeerOpen);\r\n    this.peer.on('connection', this.#onPeerConnection);\r\n    this.peer.on('close', this.#onPeerClose);\r\n    this.peer.on('disconnected', this.#onPeerDisconnected);\r\n    this.peer.on('error', this.#onPeerError);\r\n  }\r\n\r\n  static getMicrophoneNamesFromDatabase = async () => {\r\n    const dbRef = (0,firebase_database__WEBPACK_IMPORTED_MODULE_5__.ref)(_config_firebase__WEBPACK_IMPORTED_MODULE_4__[\"default\"]);\r\n    const snapshot = await (0,firebase_database__WEBPACK_IMPORTED_MODULE_5__.get)((0,firebase_database__WEBPACK_IMPORTED_MODULE_5__.child)(dbRef, 'Microphone'));\r\n    if (snapshot.exists()) {\r\n      return Object.keys(snapshot.val());\r\n    }\r\n    return null;\r\n  };\r\n\r\n  /**\r\n   * Async factory method that creates the Speaker object, and returns a promise that resolves to the result of the calibration.\r\n   *\r\n   * @param params - The parameters to be passed to the peer object.\r\n   * @param Calibrator - The class that defines the calibration process.\r\n   * @param CalibratorInstance\r\n   * @param timeOut - The amount of time to wait before timing out the connection (in milliseconds).\r\n   * @public\r\n   * @example\r\n   */\r\n  static startCalibration = async (params, CalibratorInstance, timeOut = 180000) => {\r\n    window.speaker = new Speaker(params, CalibratorInstance);\r\n    const {speaker} = window;\r\n\r\n    // wrap the calibration process in a promise so we can await it\r\n    return new Promise((resolve, reject) => {\r\n      // when a call is received\r\n      speaker.peer.on('call', async call => {\r\n        // Answer the call (one way)\r\n        call.answer();\r\n        speaker.#removeUIElems();\r\n        speaker.#showSpinner();\r\n        speaker.ac.createLocalAudio(document.getElementById(speaker.targetElement));\r\n        // when we start receiving audio\r\n        call.on('stream', async stream => {\r\n          window.localStream = stream;\r\n          window.localAudio.srcObject = stream;\r\n          window.localAudio.autoplay = false;\r\n\r\n          // if the sinkSamplingRate is not set sleep\r\n          while (!speaker.ac.sampleRatesSet()) {\r\n            console.log('SinkSamplingRate is undefined, sleeping');\r\n            await (0,_utils__WEBPACK_IMPORTED_MODULE_2__.sleep)(1);\r\n          }\r\n          // resolve when we have a result\r\n          speaker.result = await speaker.ac.startCalibration(\r\n            stream,\r\n            params.gainValues,\r\n            params.ICalib,\r\n            params.knownIR,\r\n            params.microphoneName,\r\n            params.calibrateSoundCheck,\r\n            params.isSmartPhone,\r\n            params.calibrateSoundBurstRepeats,\r\n            params.calibrateSoundBurstSec,\r\n            params.calibrateSoundBurstsWarmup,\r\n            params.calibrateSoundHz\r\n          );\r\n          speaker.#removeUIElems();\r\n          resolve(speaker.result);\r\n        });\r\n        // if we do not receive a result within the timeout, reject\r\n        setTimeout(() => {\r\n          reject(\r\n            new _peerErrors__WEBPACK_IMPORTED_MODULE_3__.CalibrationTimedOutError(\r\n              `Calibration failed to produce a result after ${\r\n                timeOut / 1000\r\n              } seconds. Please try again.`\r\n            )\r\n          );\r\n        }, timeOut);\r\n      });\r\n    });\r\n  };\r\n\r\n  static testIIR = async (params, CalibratorInstance, IIR, timeOut = 180000) => {\r\n    window.speaker = new Speaker(params, CalibratorInstance);\r\n    const {speaker} = window;\r\n\r\n    // wrap the calibration process in a promise so we can await it\r\n    return new Promise((resolve, reject) => {\r\n      // when a call is received\r\n      speaker.peer.on('call', async call => {\r\n        // Answer the call (one way)\r\n        call.answer();\r\n        speaker.#removeUIElems();\r\n        speaker.#showSpinner();\r\n        speaker.ac.createLocalAudio(document.getElementById(speaker.targetElement));\r\n        // when we start receiving audio\r\n        call.on('stream', async stream => {\r\n          window.localStream = stream;\r\n          window.localAudio.srcObject = stream;\r\n          window.localAudio.autoplay = false;\r\n\r\n          // if the sinkSamplingRate is not set sleep\r\n          while (!speaker.ac.sampleRatesSet()) {\r\n            console.log('SinkSamplingRate is undefined, sleeping');\r\n            await (0,_utils__WEBPACK_IMPORTED_MODULE_2__.sleep)(1);\r\n          }\r\n          // resolve when we have a result\r\n          speaker.result = await speaker.ac.playMLSwithIIR(stream, IIR);\r\n          speaker.#removeUIElems();\r\n          resolve(speaker.result);\r\n        });\r\n        // if we do not receive a result within the timeout, reject\r\n        setTimeout(() => {\r\n          reject(\r\n            new _peerErrors__WEBPACK_IMPORTED_MODULE_3__.CalibrationTimedOutError(\r\n              `Calibration failed to produce a result after ${\r\n                timeOut / 1000\r\n              } seconds. Please try again.`\r\n            )\r\n          );\r\n        }, timeOut);\r\n      });\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Called after the peer conncection has been opened.\r\n   * Generates a QR code for the connection and displays it.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #showQRCode = () => {\r\n    // Get query string, the URL parameters to specify a Listener\r\n    const queryStringParameters = {\r\n      speakerPeerId: this.peer.id,\r\n      isSmartPhone: this.isSmartPhone,\r\n    };\r\n    const queryString = this.queryStringFromObject(queryStringParameters);\r\n    const uri = this.siteUrl + queryString;\r\n    if (this.isSmartPhone) {\r\n      // Display QR code for the participant to scan\r\n      const qrCanvas = document.createElement('canvas');\r\n      qrCanvas.setAttribute('id', 'qrCanvas');\r\n      console.log(uri);\r\n      qrcode__WEBPACK_IMPORTED_MODULE_0__.toCanvas(qrCanvas, uri, error => {\r\n        if (error) console.error(error);\r\n      });\r\n      document.getElementById(this.targetElement).appendChild(qrCanvas);\r\n    } else {\r\n      // show the link to the user\r\n      // If specified HTML Id is available, show QR code there\r\n      if (document.getElementById(this.targetElement)) {\r\n        // const linkTag = document.createElement('a');\r\n        // linkTag.setAttribute('href', uri);\r\n        // linkTag.innerHTML = 'Click here to start the calibration';\r\n        // linkTag.target = '_blank';\r\n        // document.getElementById(this.targetElement).appendChild(linkTag);\r\n        // document.getElementById(this.targetElement).appendChild(qrCanvas);\r\n\r\n        const proceedButton = document.createElement('button');\r\n        proceedButton.setAttribute('id', 'calibrationProceedButton');\r\n        proceedButton.setAttribute('class', 'btn btn-success');\r\n        proceedButton.innerHTML = 'Proceed';\r\n        proceedButton.onclick = () => {\r\n          // open the link in a new tab\r\n          window.open(uri, '_blank');\r\n          // remove the button\r\n          document.getElementById('calibrationProceedButton').remove();\r\n        };\r\n        document.getElementById(this.targetElement).appendChild(proceedButton);\r\n      }\r\n    }\r\n    // or just print it to console\r\n    console.log('TEST: Peer reachable at: ', uri);\r\n  };\r\n\r\n  #showSpinner = () => {\r\n    const spinner = document.createElement('div');\r\n    spinner.className = 'spinner-border ml-auto';\r\n    spinner.role = 'status';\r\n    spinner.ariaHidden = 'true';\r\n    document.getElementById(this.targetElement).appendChild(spinner);\r\n  };\r\n\r\n  #removeUIElems = () => {\r\n    const parent = document.getElementById(this.targetElement);\r\n    while (parent.firstChild) {\r\n      parent.firstChild.remove();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is opened.\r\n   * Saves the peer id and calls the QR code generator.\r\n   *\r\n   * @param peerId - The peer id of the peer connection.\r\n   * @param id\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerOpen = id => {\r\n    // Workaround for peer.reconnect deleting previous id\r\n    if (id === null) {\r\n      console.error('Received null id from peer open');\r\n      this.peer.id = this.lastPeerId;\r\n    } else {\r\n      this.lastPeerId = this.peer.id;\r\n    }\r\n\r\n    if (id !== this.peer.id) {\r\n      console.warn('DEBUG Check you assumption that id === this.peer.id');\r\n    }\r\n\r\n    this.#showQRCode();\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is established.\r\n   * Enforces a single connection.\r\n   *\r\n   * @param connection - The connection object.\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerConnection = connection => {\r\n    // Allow only a single connection\r\n    if (this.conn && this.conn.open) {\r\n      connection.on('open', () => {\r\n        connection.send('Already connected to another client');\r\n        setTimeout(() => {\r\n          connection.close();\r\n        }, 500);\r\n      });\r\n      return;\r\n    }\r\n\r\n    this.conn = connection;\r\n    console.log('Connected to: ', this.conn.peer);\r\n    this.#ready();\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is closed.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerClose = () => {\r\n    this.conn = null;\r\n    console.log('Connection destroyed');\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is disconnected.\r\n   * Attempts to reconnect.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerDisconnected = () => {\r\n    console.log('Connection lost. Please reconnect');\r\n\r\n    // Workaround for peer.reconnect deleting previous id\r\n    this.peer.id = this.lastPeerId;\r\n    // eslint-disable-next-line no-underscore-dangle\r\n    this.peer._lastServerId = this.lastPeerId;\r\n    this.peer.reconnect();\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection encounters an error.\r\n   *\r\n   * @param error\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerError = error => {\r\n    // TODO: check if this function is needed or not\r\n    console.error(error);\r\n  };\r\n\r\n  /**\r\n   * Called when data is received from the peer connection.\r\n   *\r\n   * @param data\r\n   * @private\r\n   * @example\r\n   */\r\n  #onIncomingData = data => {\r\n    // enforce object type\r\n    if (\r\n      !Object.prototype.hasOwnProperty.call(data, 'name') ||\r\n      !Object.prototype.hasOwnProperty.call(data, 'payload')\r\n    ) {\r\n      console.error('Received malformed data: ', data);\r\n      return;\r\n    }\r\n\r\n    switch (data.name) {\r\n      case 'samplingRate':\r\n        this.ac.setSamplingRates(data.payload);\r\n        break;\r\n      case 'deviceType':\r\n        this.ac.setDeviceType(data.payload);\r\n        break;\r\n      case 'deviceName':\r\n        this.ac.setDeviceName(data.payload);\r\n        break;\r\n      case _peerErrors__WEBPACK_IMPORTED_MODULE_3__.UnsupportedDeviceError.name:\r\n      case _peerErrors__WEBPACK_IMPORTED_MODULE_3__.MissingSpeakerIdError.name:\r\n        throw data.payload;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is #ready.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #ready = () => {\r\n    // Perform callback with data\r\n    this.conn.on('data', this.#onIncomingData);\r\n    this.conn.on('close', () => {\r\n      console.log('Connection reset<br>Awaiting connection...');\r\n      this.conn = null;\r\n    });\r\n  };\r\n\r\n  /** .\r\n   * .\r\n   * .\r\n   * Debug method for downloading the recorded audio\r\n   *\r\n   * @public\r\n   * @example\r\n   */\r\n  downloadData = () => {\r\n    this.ac.downloadData();\r\n  };\r\n}\r\n\r\n/* \r\nReferenced links:\r\nhttps://stackoverflow.com/questions/28016664/when-you-pass-this-as-an-argument/28016676#28016676\r\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\r\nhttps://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep [3]\r\n*/\r\n\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (Speaker);\r\n\n\n//# sourceURL=webpack://speakerCalibrator/./src/peer-connection/speaker.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var qrcode__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! qrcode */ \"./node_modules/qrcode/lib/browser.js\");\n/* harmony import */ var _audioPeer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./audioPeer */ \"./src/peer-connection/audioPeer.js\");\n/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../utils */ \"./src/utils.js\");\n/* harmony import */ var _peerErrors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./peerErrors */ \"./src/peer-connection/peerErrors.js\");\n/* harmony import */ var _config_firebase__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../config/firebase */ \"./src/config/firebase.js\");\n/* harmony import */ var firebase_database__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! firebase/database */ \"./node_modules/firebase/database/dist/esm/index.esm.js\");\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n/**\r\n * @class Handles the speaker's side of the connection. Responsible for initiating the connection,\r\n * rendering the QRCode, and answering the call.\r\n * @augments AudioPeer\r\n */\r\nclass Speaker extends _audioPeer__WEBPACK_IMPORTED_MODULE_1__[\"default\"] {\r\n  /**\r\n   * Takes the url of the current site and a target element where html elements will be appended.\r\n   *\r\n   * @param params - See type definition for initParameters.\r\n   * @param Calibrator - An instance of the AudioCalibrator class, should not use AudioCalibrator directly, instead use an extended class available in /tasks/.\r\n   * @param CalibratorInstance\r\n   * @example\r\n   */\r\n  constructor(params, CalibratorInstance) {\r\n    super(params);\r\n    this.siteUrl += '/listener?';\r\n    this.ac = CalibratorInstance;\r\n    this.result = null;\r\n    this.debug = params?.debug ?? false;\r\n    this.isSmartPhone = params?.isSmartPhone ?? false;\r\n    this.instructionDisplayId = params?.instructionDisplayId ?? '';\r\n    this.titleDisplayId = params?.titleDisplayId ?? '';\r\n\r\n    /* Set up callbacks that handle any events related to our peer object. */\r\n    this.peer.on('open', this.#onPeerOpen);\r\n    this.peer.on('connection', this.#onPeerConnection);\r\n    this.peer.on('close', this.#onPeerClose);\r\n    this.peer.on('disconnected', this.#onPeerDisconnected);\r\n    this.peer.on('error', this.#onPeerError);\r\n  }\r\n\r\n  static getMicrophoneNamesFromDatabase = async () => {\r\n    const dbRef = (0,firebase_database__WEBPACK_IMPORTED_MODULE_5__.ref)(_config_firebase__WEBPACK_IMPORTED_MODULE_4__[\"default\"]);\r\n    const snapshot = await (0,firebase_database__WEBPACK_IMPORTED_MODULE_5__.get)((0,firebase_database__WEBPACK_IMPORTED_MODULE_5__.child)(dbRef, 'Microphone'));\r\n    if (snapshot.exists()) {\r\n      return Object.keys(snapshot.val());\r\n    }\r\n    return null;\r\n  };\r\n\r\n  /**\r\n   * Async factory method that creates the Speaker object, and returns a promise that resolves to the result of the calibration.\r\n   *\r\n   * @param params - The parameters to be passed to the peer object.\r\n   * @param Calibrator - The class that defines the calibration process.\r\n   * @param CalibratorInstance\r\n   * @param timeOut - The amount of time to wait before timing out the connection (in milliseconds).\r\n   * @public\r\n   * @example\r\n   */\r\n  static startCalibration = async (params, CalibratorInstance, timeOut = 180000) => {\r\n    window.speaker = new Speaker(params, CalibratorInstance);\r\n    const {speaker} = window;\r\n\r\n    // wrap the calibration process in a promise so we can await it\r\n    return new Promise((resolve, reject) => {\r\n      // when a call is received\r\n      speaker.peer.on('call', async call => {\r\n        // Answer the call (one way)\r\n        call.answer();\r\n        speaker.#removeUIElems();\r\n        speaker.#showSpinner();\r\n        speaker.ac.createLocalAudio(document.getElementById(speaker.targetElement));\r\n        // when we start receiving audio\r\n        call.on('stream', async stream => {\r\n          window.localStream = stream;\r\n          window.localAudio.srcObject = stream;\r\n          window.localAudio.autoplay = false;\r\n\r\n          // if the sinkSamplingRate is not set sleep\r\n          while (!speaker.ac.sampleRatesSet()) {\r\n            console.log('SinkSamplingRate is undefined, sleeping');\r\n            await (0,_utils__WEBPACK_IMPORTED_MODULE_2__.sleep)(1);\r\n          }\r\n          // resolve when we have a result\r\n          speaker.result = await speaker.ac.startCalibration(\r\n            stream,\r\n            params.gainValues,\r\n            params.ICalib,\r\n            params.knownIR,\r\n            params.microphoneName,\r\n            params.calibrateSoundCheck,\r\n            params.isSmartPhone,\r\n            params.calibrateSoundBurstRepeats,\r\n            params.calibrateSoundBurstSec,\r\n            params.calibrateSoundBurstsWarmup,\r\n            params.calibrateSoundHz\r\n          );\r\n          speaker.#removeUIElems();\r\n          resolve(speaker.result);\r\n        });\r\n        // if we do not receive a result within the timeout, reject\r\n        setTimeout(() => {\r\n          reject(\r\n            new _peerErrors__WEBPACK_IMPORTED_MODULE_3__.CalibrationTimedOutError(\r\n              `Calibration failed to produce a result after ${\r\n                timeOut / 1000\r\n              } seconds. Please try again.`\r\n            )\r\n          );\r\n        }, timeOut);\r\n      });\r\n    });\r\n  };\r\n\r\n  static testIIR = async (params, CalibratorInstance, IIR, timeOut = 180000) => {\r\n    window.speaker = new Speaker(params, CalibratorInstance);\r\n    const {speaker} = window;\r\n\r\n    // wrap the calibration process in a promise so we can await it\r\n    return new Promise((resolve, reject) => {\r\n      // when a call is received\r\n      speaker.peer.on('call', async call => {\r\n        // Answer the call (one way)\r\n        call.answer();\r\n        speaker.#removeUIElems();\r\n        speaker.#showSpinner();\r\n        speaker.ac.createLocalAudio(document.getElementById(speaker.targetElement));\r\n        // when we start receiving audio\r\n        call.on('stream', async stream => {\r\n          window.localStream = stream;\r\n          window.localAudio.srcObject = stream;\r\n          window.localAudio.autoplay = false;\r\n\r\n          // if the sinkSamplingRate is not set sleep\r\n          while (!speaker.ac.sampleRatesSet()) {\r\n            console.log('SinkSamplingRate is undefined, sleeping');\r\n            await (0,_utils__WEBPACK_IMPORTED_MODULE_2__.sleep)(1);\r\n          }\r\n          // resolve when we have a result\r\n          speaker.result = await speaker.ac.playMLSwithIIR(stream, IIR);\r\n          speaker.#removeUIElems();\r\n          resolve(speaker.result);\r\n        });\r\n        // if we do not receive a result within the timeout, reject\r\n        setTimeout(() => {\r\n          reject(\r\n            new _peerErrors__WEBPACK_IMPORTED_MODULE_3__.CalibrationTimedOutError(\r\n              `Calibration failed to produce a result after ${\r\n                timeOut / 1000\r\n              } seconds. Please try again.`\r\n            )\r\n          );\r\n        }, timeOut);\r\n      });\r\n    });\r\n  };\r\n\r\n  /**\r\n   * Called after the peer conncection has been opened.\r\n   * Generates a QR code for the connection and displays it.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #showQRCode = () => {\r\n    // Get query string, the URL parameters to specify a Listener\r\n    const queryStringParameters = {\r\n      speakerPeerId: this.peer.id,\r\n      isSmartPhone: this.isSmartPhone,\r\n    };\r\n    const queryString = this.queryStringFromObject(queryStringParameters);\r\n    const uri = this.siteUrl + queryString;\r\n    if (this.isSmartPhone) {\r\n      // Display QR code for the participant to scan\r\n      const qrCanvas = document.createElement('canvas');\r\n      qrCanvas.setAttribute('id', 'qrCanvas');\r\n      console.log(uri);\r\n      qrcode__WEBPACK_IMPORTED_MODULE_0__.toCanvas(qrCanvas, uri, error => {\r\n        if (error) console.error(error);\r\n      });\r\n      document.getElementById(this.targetElement).appendChild(qrCanvas);\r\n    } else {\r\n      // show the link to the user\r\n      // If specified HTML Id is available, show QR code there\r\n      if (document.getElementById(this.targetElement)) {\r\n        // const linkTag = document.createElement('a');\r\n        // linkTag.setAttribute('href', uri);\r\n        // linkTag.innerHTML = 'Click here to start the calibration';\r\n        // linkTag.target = '_blank';\r\n        // document.getElementById(this.targetElement).appendChild(linkTag);\r\n        // document.getElementById(this.targetElement).appendChild(qrCanvas);\r\n\r\n        const proceedButton = document.createElement('button');\r\n        proceedButton.setAttribute('id', 'calibrationProceedButton');\r\n        proceedButton.setAttribute('class', 'btn btn-success');\r\n        proceedButton.innerHTML = 'Proceed';\r\n        proceedButton.onclick = () => {\r\n          // open the link in a new tab\r\n          window.open(uri, '_blank');\r\n          // remove the button\r\n          document.getElementById('calibrationProceedButton').remove();\r\n        };\r\n        document.getElementById(this.targetElement).appendChild(proceedButton);\r\n      }\r\n    }\r\n    // or just print it to console\r\n    console.log('TEST: Peer reachable at: ', uri);\r\n  };\r\n\r\n  #showSpinner = () => {\r\n    const spinner = document.createElement('div');\r\n    spinner.className = 'spinner-border ml-auto';\r\n    spinner.role = 'status';\r\n    spinner.ariaHidden = 'true';\r\n    document.getElementById(this.targetElement).appendChild(spinner);\r\n\r\n    // clear instructionDisplay\r\n    const instructionDisplay = document.getElementById(this.instructionDisplayId);\r\n    if (instructionDisplay) {\r\n      instructionDisplay.innerHTML = '';\r\n    }\r\n\r\n    // Update title - titleDisplayId\r\n    const titleDisplay = document.getElementById(this.titleDisplayId);\r\n    if (titleDisplay) {\r\n      // replace 2 with 3\r\n      titleDisplay.innerHTML = titleDisplay.innerHTML.replace('2', '3');\r\n    }\r\n  };\r\n\r\n  #removeUIElems = () => {\r\n    const parent = document.getElementById(this.targetElement);\r\n    while (parent.firstChild) {\r\n      parent.firstChild.remove();\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is opened.\r\n   * Saves the peer id and calls the QR code generator.\r\n   *\r\n   * @param peerId - The peer id of the peer connection.\r\n   * @param id\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerOpen = id => {\r\n    // Workaround for peer.reconnect deleting previous id\r\n    if (id === null) {\r\n      console.error('Received null id from peer open');\r\n      this.peer.id = this.lastPeerId;\r\n    } else {\r\n      this.lastPeerId = this.peer.id;\r\n    }\r\n\r\n    if (id !== this.peer.id) {\r\n      console.warn('DEBUG Check you assumption that id === this.peer.id');\r\n    }\r\n\r\n    this.#showQRCode();\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is established.\r\n   * Enforces a single connection.\r\n   *\r\n   * @param connection - The connection object.\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerConnection = connection => {\r\n    // Allow only a single connection\r\n    if (this.conn && this.conn.open) {\r\n      connection.on('open', () => {\r\n        connection.send('Already connected to another client');\r\n        setTimeout(() => {\r\n          connection.close();\r\n        }, 500);\r\n      });\r\n      return;\r\n    }\r\n\r\n    this.conn = connection;\r\n    console.log('Connected to: ', this.conn.peer);\r\n    this.#ready();\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is closed.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerClose = () => {\r\n    this.conn = null;\r\n    console.log('Connection destroyed');\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is disconnected.\r\n   * Attempts to reconnect.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerDisconnected = () => {\r\n    console.log('Connection lost. Please reconnect');\r\n\r\n    // Workaround for peer.reconnect deleting previous id\r\n    this.peer.id = this.lastPeerId;\r\n    // eslint-disable-next-line no-underscore-dangle\r\n    this.peer._lastServerId = this.lastPeerId;\r\n    this.peer.reconnect();\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection encounters an error.\r\n   *\r\n   * @param error\r\n   * @private\r\n   * @example\r\n   */\r\n  #onPeerError = error => {\r\n    // TODO: check if this function is needed or not\r\n    console.error(error);\r\n  };\r\n\r\n  /**\r\n   * Called when data is received from the peer connection.\r\n   *\r\n   * @param data\r\n   * @private\r\n   * @example\r\n   */\r\n  #onIncomingData = data => {\r\n    // enforce object type\r\n    if (\r\n      !Object.prototype.hasOwnProperty.call(data, 'name') ||\r\n      !Object.prototype.hasOwnProperty.call(data, 'payload')\r\n    ) {\r\n      console.error('Received malformed data: ', data);\r\n      return;\r\n    }\r\n\r\n    switch (data.name) {\r\n      case 'samplingRate':\r\n        this.ac.setSamplingRates(data.payload);\r\n        break;\r\n      case 'deviceType':\r\n        this.ac.setDeviceType(data.payload);\r\n        break;\r\n      case 'deviceName':\r\n        this.ac.setDeviceName(data.payload);\r\n        break;\r\n      case _peerErrors__WEBPACK_IMPORTED_MODULE_3__.UnsupportedDeviceError.name:\r\n      case _peerErrors__WEBPACK_IMPORTED_MODULE_3__.MissingSpeakerIdError.name:\r\n        throw data.payload;\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Called when the peer connection is #ready.\r\n   *\r\n   * @private\r\n   * @example\r\n   */\r\n  #ready = () => {\r\n    // Perform callback with data\r\n    this.conn.on('data', this.#onIncomingData);\r\n    this.conn.on('close', () => {\r\n      console.log('Connection reset<br>Awaiting connection...');\r\n      this.conn = null;\r\n    });\r\n  };\r\n\r\n  /** .\r\n   * .\r\n   * .\r\n   * Debug method for downloading the recorded audio\r\n   *\r\n   * @public\r\n   * @example\r\n   */\r\n  downloadData = () => {\r\n    this.ac.downloadData();\r\n  };\r\n}\r\n\r\n/* \r\nReferenced links:\r\nhttps://stackoverflow.com/questions/28016664/when-you-pass-this-as-an-argument/28016676#28016676\r\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\r\nhttps://stackoverflow.com/questions/879152/how-do-i-make-javascript-beep [3]\r\n*/\r\n\r\n/* harmony default export */ __webpack_exports__[\"default\"] = (Speaker);\r\n\n\n//# sourceURL=webpack://speakerCalibrator/./src/peer-connection/speaker.js?");
 
 /***/ }),
 

package/package.json

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

package/src/peer-connection/speaker.js

@@ -31,6 +31,8 @@ class Speaker extends AudioPeer {
     this.result = null;
     this.debug = params?.debug ?? false;
     this.isSmartPhone = params?.isSmartPhone ?? false;
+    this.instructionDisplayId = params?.instructionDisplayId ?? '';
+    this.titleDisplayId = params?.titleDisplayId ?? '';
 
     /* Set up callbacks that handle any events related to our peer object. */
     this.peer.on('open', this.#onPeerOpen);
@@ -215,6 +217,19 @@ class Speaker extends AudioPeer {
     spinner.role = 'status';
     spinner.ariaHidden = 'true';
     document.getElementById(this.targetElement).appendChild(spinner);
+
+    // clear instructionDisplay
+    const instructionDisplay = document.getElementById(this.instructionDisplayId);
+    if (instructionDisplay) {
+      instructionDisplay.innerHTML = '';
+    }
+
+    // Update title - titleDisplayId
+    const titleDisplay = document.getElementById(this.titleDisplayId);
+    if (titleDisplay) {
+      // replace 2 with 3
+      titleDisplay.innerHTML = titleDisplay.innerHTML.replace('2', '3');
+    }
   };
 
   #removeUIElems = () => {