speaker-calibration 2.2.177 → 2.2.179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "speaker-calibration",
-  "version": "2.2.177",
+  "version": "2.2.179",
   "description": "Speaker calibration library for auditory testing",
   "main": "dist/main.js",
   "directories": {
@@ -40,6 +40,7 @@
     "peerjs": "^1.3.2",
     "qrcode": "^1.4.4",
     "socket.io-client": "^4.4.1",
+    "sweetalert2": "^11.14.0",
     "uuid": "^8.3.2",
     "xlsx": "^0.18.5"
   },

package/src/peer-connection/speaker.js

@@ -1,6 +1,10 @@
 import QRCode from 'qrcode';
 import AudioPeer from './audioPeer';
-import {sleep} from '../utils';
+import {
+  sleep,
+  formatLineBreak,
+  createAndShowPopup
+} from '../utils';
 import {
   UnsupportedDeviceError,
   MissingSpeakerIdError,
@@ -289,24 +293,26 @@ class Speaker extends AudioPeer {
       QRCode.toCanvas(qrCanvas, this.uri, error => {
         if (error) console.error(error);
       });
-      const explanation = document.createElement("p");
+      const explanation = document.createElement("h2");
       explanation.id = "skipQRExplanation";
       explanation.style = `
       user-select: text;
+      margin-top: 9px;
+      font-size: 1.1rem;
      `;
      // Define the URL and options for the request
      const url = 'https://api.short.io/links/public';
      const options = {
-     method: 'POST',
-     headers: {
-   'Accept': 'application/json',
-   'Content-Type': 'application/json',
-   'Authorization': 'pk_fysLKGj3legZz4XZ'
- },
- body: JSON.stringify({
-   domain: 'listeners.link', // Ensure this domain is valid for your account
-   originalURL: this.uri
- })
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': 'pk_fysLKGj3legZz4XZ'
+      },
+      body: JSON.stringify({
+      domain: 'listeners.link', // Ensure this domain is valid for your account
+      originalURL: this.uri
+    })
 };
 
 // Make the request using fetch
@@ -318,14 +324,30 @@ await fetch(url, options)
    return response.json(); // Parse the JSON response
  })
  .then(data => {
-   explanation.innerHTML = phrases.RC_skipQR_ExplanationWithoutPreferNot[this.language]
+   explanation.innerHTML =formatLineBreak( 
+    phrases.RC_skipQR_ExplanationWithoutPreferNot[this.language]
        .replace("xxx", `<b style="user-select: text">${data.shortURL}</b>`)
-       .replace("XXX", `<b style="user-select: text">${data.shortURL}</b>`);
+       .replace("XXX", `<b style="user-select: text">${data.shortURL}</b>`),
+       phrases.RC_checkInternetConnection[this.language]
+      );
+      const checkConnection = document.createElement('a');
+      checkConnection.id = 'check-connection';
+      checkConnection.href = '#';
+      checkConnection.innerHTML = 'check the phone\'s internet connection';
+      const lang = this.language;
+      checkConnection.addEventListener('click', function(event,) {
+        console.log('clicked');
+        event.preventDefault(); // Prevent the default link action
+        createAndShowPopup(lang);
+     });
+     explanation.querySelector('a#check-connection').replaceWith(checkConnection);
  })
  .catch(error => {
    console.error('Error:', error.message); // Handle errors
  });
 
+ 
+
       
     
       const qrImage = new Image(400, 400);
@@ -348,7 +370,7 @@ await fetch(url, options)
       container.appendChild(qrImage);
       container.appendChild(explanation);
       container.appendChild(this.buttonsContainer);
-      const qrContainer = document.createElement("h2");
+      const qrContainer = document.createElement("div");
       qrContainer.appendChild(container);
       
       document.getElementById(this.targetElement).appendChild(qrContainer);

package/src/utils.js

@@ -1,3 +1,5 @@
+import Swal from "sweetalert2";
+import {phrases} from '../dist/example/i18n.js';
 /** .
  * .
  * .
@@ -132,4 +134,71 @@ function interpolate(x, x0, x1, y0, y1) {
   return y0 + (y1 - y0) * (x - x0) / (x1 - x0);
 }
 
+export const formatLineBreak =(inputStr,checkInternetConnection) => {
+  let finalStr = inputStr
+  .replace(/\n/g, '<br>')
+  .replace('LLL',
+    `<a href="#" id="check-connection">${checkInternetConnection}</a>`);
+  
+  console.log(finalStr);
+
+  return finalStr;
+}
+
+
+  
+export const createAndShowPopup = (lang) => {
+  console.log(`
+    <div style="text-align: left;"> 
+    ${convertAsterisksToList(phrases.RC_NeedInternetConnectedPhone[lang].replace(/\n/g, '<br>'))}
+    </div>
+      <div class="col-3" style="margin-top:10px;">
+        <button id="okaybtn" class="btn btn-lg btn-dark">
+          ${phrases.EE_ok[lang]}
+        </button>
+      </div>`);
+  Swal.fire({
+    html: `
+    <div style="text-align: left;"> 
+    ${convertAsterisksToList(phrases.RC_NeedInternetConnectedPhone[lang].replace(/\n/g, '<br>'))}
+    </div>
+      <div class="col-3" style="margin-top:10px;">
+        <button id="okaybtn" class="btn btn-lg btn-dark">
+          ${phrases.EE_ok[lang]}
+        </button>
+      </div>`,
+    showConfirmButton: false,
+    position: 'bottom',
+    customClass: {
+      container:'no-background',
+    },
+    showClass: {
+      popup: "fade-in",
+    },
+    hideClass: {
+      popup: "",
+    },
+    didOpen: () => {
+      const okayBtn = document.getElementById("okaybtn");
+      okayBtn.style.display = "flex"; 
+      okayBtn.addEventListener('click', () => {
+        Swal.close(); // Close the Swal popup
+      });
+    }
+  });
+};
+
+export function convertAsterisksToList(content) {
+  // Replace * with <li> and convert line breaks to </li><li>
+  console.log(content);
+  let result = content
+      .replace(/\* (.*?)(<br>|$)/g, '<li>$1</li>')
+      .replace(/(<li>)(<\/li>)\s*$/, '') // Remove trailing </li>
+      .replace('<li>', '<ul style="padding-left:40px"> <br> <li>');
+  result = result.replace('</li>5', '</li></ul>5');
+  return result;
+}
+
+
+
 export {sleep, saveToCSV, saveToJSON, csvToArray,findMinValue,findMaxValue, standardDeviation, interpolate};