@thumbmarkjs/thumbmarkjs 1.3.2 → 1.3.4

package/src/components/mathml/index.ts

@@ -1,5 +1,6 @@
 import { componentInterface } from '../../factory';
 import { hash } from '../../utils/hash';
+import { ephemeralIFrame } from '../../utils/ephemeralIFrame';
 
 const BLACKBOARD_BOLD = ['\uD835\uDD04', '\uD835\uDD05', '\u212D', '\uD835\uDD07', '\uD835\uDD08', '\uD835\uDD09', '\uD835\uDD38', '\uD835\uDD39', '\u2102', '\uD835\uDD3B', '\uD835\uDD3C', '\uD835\uDD3D'];
 const GREEK_SYMBOLS = ['\u03B2', '\u03C8', '\u03BB', '\u03B5', '\u03B6', '\u03B1', '\u03BE', '\u03BC', '\u03C1', '\u03C6', '\u03BA', '\u03C4', '\u03B7', '\u03C3', '\u03B9', '\u03C9', '\u03B3', '\u03BD', '\u03C7', '\u03B4', '\u03B8', '\u03C0', '\u03C5', '\u03BF'];
@@ -7,33 +8,58 @@ const GREEK_SYMBOLS = ['\u03B2', '\u03C8', '\u03BB', '\u03B5', '\u03B6', '\u03B1
 export default async function getMathML(): Promise<componentInterface | null> {
   return new Promise((resolve) => {
     try {
-      if (!isMathMLSupported()) {
-        resolve({
-          supported: false,
-          error: 'MathML not supported'
-        });
-        return;
-      }
+      ephemeralIFrame(async ({ iframe }) => {
+        try {
+          if (!isMathMLSupported(iframe)) {
+            resolve({
+              supported: false,
+              error: 'MathML not supported'
+            });
+            return;
+          }
 
-      const structures = [
-        createMathML('integral', '<msubsup><mo>\u222B</mo><mi>a</mi><mi>b</mi></msubsup><mfrac><mrow><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow><mrow><mi>g</mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow></mfrac><mi>dx</mi>'),
-        createMathML('fraction', '<mfrac><mrow><mi>\u03C0</mi><mo>\u00D7</mo><msup><mi>r</mi><mn>2</mn></msup></mrow><mrow><mn>2</mn><mi>\u03C3</mi></mrow></mfrac>'),
-        createMathML('matrix', '<mo>[</mo><mtable><mtr><mtd><mi>\u03B1</mi></mtd><mtd><mi>\u03B2</mi></mtd></mtr><mtr><mtd><mi>\u03B3</mi></mtd><mtd><mi>\u03B4</mi></mtd></mtr></mtable><mo>]</mo>'),
-        createComplexNestedStructure(),
-        ...createSymbolStructures()
-      ];
-
-      const measurements: any = {};
-      structures.forEach((struct, i) => {
-        measurements[`struct_${i}`] = measureMathMLStructure(struct);
-      });
+          const structures = [
+            createMathML('integral', '<msubsup><mo>\u222B</mo><mi>a</mi><mi>b</mi></msubsup><mfrac><mrow><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow><mrow><mi>g</mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow></mfrac><mi>dx</mi>'),
+            createMathML('fraction', '<mfrac><mrow><mi>\u03C0</mi><mo>\u00D7</mo><msup><mi>r</mi><mn>2</mn></msup></mrow><mrow><mn>2</mn><mi>\u03C3</mi></mrow></mfrac>'),
+            createMathML('matrix', '<mo>[</mo><mtable><mtr><mtd><mi>\u03B1</mi></mtd><mtd><mi>\u03B2</mi></mtd></mtr><mtr><mtd><mi>\u03B3</mi></mtd><mtd><mi>\u03B4</mi></mtd></mtr></mtable><mo>]</mo>'),
+            createComplexNestedStructure(),
+            ...createSymbolStructures()
+          ];
 
-      resolve({
-        //supported: true,
-        //measurements,
-        hash: hash(JSON.stringify(measurements))
-      });
+          const dimensionsArray: any[] = [];
+          let fontStyleHash: string = '';
 
+          structures.forEach((struct, i) => {
+            const measurement = measureMathMLStructure(struct, iframe);
+            // Extract dimensions for this structure
+            dimensionsArray.push({
+              width: measurement.dimensions.width,
+              height: measurement.dimensions.height
+            });
+            // Capture font style hash from the first structure (it's the same for all)
+            if (i === 0 && measurement.fontInfo) {
+              fontStyleHash = hash(JSON.stringify(measurement.fontInfo));
+            }
+          });
+
+          const details = {
+            fontStyleHash,
+            dimensions: dimensionsArray
+          };
+
+          resolve({
+            //supported: true,
+            details,
+            hash: hash(JSON.stringify(details))
+          });
+
+        } catch (error) {
+          resolve({
+            supported: false,
+            error: `MathML error: ${(error as Error).message}`
+          });
+        }
+      });
     } catch (error) {
       resolve({
         supported: false,
@@ -43,17 +69,17 @@ export default async function getMathML(): Promise<componentInterface | null> {
   });
 }
 
-function isMathMLSupported(): boolean {
+function isMathMLSupported(iframe: Document): boolean {
   try {
-    const testElement = document.createElement('math');
+    const testElement = iframe.createElement('math');
     testElement.innerHTML = '<mrow><mi>x</mi></mrow>';
     testElement.style.position = 'absolute';
     testElement.style.visibility = 'hidden';
-    
-    document.body.appendChild(testElement);
+
+    iframe.body.appendChild(testElement);
     const rect = testElement.getBoundingClientRect();
-    document.body.removeChild(testElement);
-    
+    iframe.body.removeChild(testElement);
+
     return rect.width > 0 && rect.height > 0;
   } catch {
     return false;
@@ -101,25 +127,26 @@ function createSymbolStructures(): string[] {
   return structures;
 }
 
-function measureMathMLStructure(mathml: string): any {
+function measureMathMLStructure(mathml: string, iframe: Document): any {
   try {
-    const mathElement = document.createElement('math');
+    const mathElement = iframe.createElement('math');
     mathElement.innerHTML = mathml.replace(/<\/?math>/g, '');
     mathElement.style.whiteSpace = 'nowrap';
     mathElement.style.position = 'absolute';
     mathElement.style.visibility = 'hidden';
     mathElement.style.top = '-9999px';
-    
-    document.body.appendChild(mathElement);
-    
+
+    iframe.body.appendChild(mathElement);
+
     const rect = mathElement.getBoundingClientRect();
-    const computedStyle = window.getComputedStyle(mathElement);
-    
+    const iframeWindow = iframe.defaultView || window;
+    const computedStyle = iframeWindow.getComputedStyle(mathElement);
+
     const measurements = {
       dimensions: {
         width: rect.width,
         height: rect.height,
-        
+
       },
       fontInfo: {
         fontFamily: computedStyle.fontFamily,
@@ -129,7 +156,7 @@ function measureMathMLStructure(mathml: string): any {
         lineHeight: computedStyle.lineHeight,
         // Enhanced font properties for better system detection
         fontVariant: computedStyle.fontVariant || 'normal',
-        fontStretch: computedStyle.fontStretch || 'normal', 
+        fontStretch: computedStyle.fontStretch || 'normal',
         fontSizeAdjust: computedStyle.fontSizeAdjust || 'none',
         textRendering: computedStyle.textRendering || 'auto',
         fontFeatureSettings: computedStyle.fontFeatureSettings || 'normal',
@@ -137,10 +164,10 @@ function measureMathMLStructure(mathml: string): any {
         fontKerning: computedStyle.fontKerning || 'auto'
       }
     };
-    
-    document.body.removeChild(mathElement);
+
+    iframe.body.removeChild(mathElement);
     return measurements;
-    
+
   } catch (error) {
     return {
       error: (error as Error).message

package/src/components/permissions/index.ts

@@ -25,13 +25,18 @@ const defaultPermissionKeys: PermissionName[] = [
 ] as PermissionName[];
 
 export default async function getPermissions(options?: optionsInterface): Promise<componentInterface> {
-    let permission_keys = options?.permissions_to_check || defaultPermissionKeys;
+    const permission_keys = options?.permissions_to_check || defaultPermissionKeys;
     const retries = 3;
-    const permissionPromises: Promise<componentInterface>[] = Array.from({length: retries}, () => getBrowserPermissionsOnce(permission_keys) );
-    return Promise.all(permissionPromises).then((resolvedPermissions) => {
-        const permission = mostFrequentValuesInArrayOfDictionaries(resolvedPermissions, permission_keys);
-        return permission;
-    });
+
+    // Run permission checks multiple times
+    const results = await Promise.all(
+        Array.from({ length: retries }, () => getBrowserPermissionsOnce(permission_keys))
+    );
+
+    // Get most frequent values across all retries
+    const permissionStatus = mostFrequentValuesInArrayOfDictionaries(results, permission_keys);
+
+    return permissionStatus;
 }
 
 async function getBrowserPermissionsOnce(permission_keys: PermissionName[]): Promise<componentInterface> {

package/src/components/speech/index.ts

@@ -0,0 +1,103 @@
+import { componentInterface } from '../../factory';
+import { hash } from '../../utils/hash';
+
+const VOICE_LOAD_TIMEOUT = 800; // milliseconds to wait for voices to load
+
+export default async function getSpeech(): Promise<componentInterface | null> {
+  return new Promise((resolve) => {
+    try {
+      // Check if Speech Synthesis API is available
+      if (typeof window === 'undefined' || !window.speechSynthesis || typeof window.speechSynthesis.getVoices !== 'function') {
+        resolve({
+          supported: false,
+          error: 'Speech Synthesis API not supported'
+        });
+        return;
+      }
+
+      let voicesResolved = false;
+      let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
+
+      const processVoices = (voices: SpeechSynthesisVoice[]) => {
+        if (voicesResolved) return;
+        voicesResolved = true;
+
+        // Clear timeout if it exists
+        if (timeoutHandle) {
+          clearTimeout(timeoutHandle);
+        }
+
+        try {
+          // Collect voice signatures
+          const voiceSignatures = voices.map((voice) => {
+            // Escape commas and backslashes in voice properties
+            const escapeValue = (value: string): string => {
+              return value.replace(/\\/g, '\\\\').replace(/,/g, '\\,');
+            };
+
+            // Format: voiceURI,name,lang,localService,default
+            const signature = [
+              escapeValue(voice.voiceURI || ''),
+              escapeValue(voice.name || ''),
+              escapeValue(voice.lang || ''),
+              voice.localService ? '1' : '0',
+              voice.default ? '1' : '0'
+            ].join(',');
+
+            return signature;
+          });
+
+          // Sort alphabetically for consistent ordering
+          voiceSignatures.sort();
+
+          // Create details object with count and hash
+          const details = {
+            voiceCount: voices.length,
+            voicesHash: hash(JSON.stringify(voiceSignatures))
+          };
+
+          resolve({
+            details,
+            hash: hash(JSON.stringify(details))
+          });
+
+        } catch (error) {
+          resolve({
+            supported: true,
+            error: `Voice processing failed: ${(error as Error).message}`
+          });
+        }
+      };
+
+      // Try to get voices immediately
+      const voices = window.speechSynthesis.getVoices();
+
+      // If voices are available immediately, process them
+      if (voices.length > 0) {
+        processVoices(voices);
+        return;
+      }
+
+      // Set up timeout in case voices never load
+      timeoutHandle = setTimeout(() => {
+        const voices = window.speechSynthesis.getVoices();
+        processVoices(voices);
+      }, VOICE_LOAD_TIMEOUT);
+
+      // Listen for voiceschanged event (for browsers that load voices asynchronously)
+      const onVoicesChanged = () => {
+        window.speechSynthesis.removeEventListener('voiceschanged', onVoicesChanged);
+        const voices = window.speechSynthesis.getVoices();
+        processVoices(voices);
+      };
+
+      window.speechSynthesis.addEventListener('voiceschanged', onVoicesChanged);
+
+    } catch (error) {
+      resolve({
+        supported: false,
+        error: `Speech Synthesis error: ${(error as Error).message}`
+      });
+    }
+  });
+}

package/src/components/webrtc/index.ts

@@ -64,9 +64,19 @@ export default async function getWebRTC(): Promise<componentInterface | null> {
             }).filter(Boolean);
           };
 
-          const codecsSdp = {
-            audio: constructDescriptions('audio', getDescriptors('audio')),
-            video: constructDescriptions('video', getDescriptors('video'))
+          const audioCodecs = constructDescriptions('audio', getDescriptors('audio'));
+          const videoCodecs = constructDescriptions('video', getDescriptors('video'));
+
+          const compressedData = {
+            audio: {
+              count: audioCodecs.length,
+              hash: hash(JSON.stringify(audioCodecs))
+            },
+            video: {
+              count: videoCodecs.length,
+              hash: hash(JSON.stringify(videoCodecs))
+            },
+            extensionsHash: hash(JSON.stringify(extensions))
           };
 
           // Set up for ICE candidate collection with timeout
@@ -74,10 +84,9 @@ export default async function getWebRTC(): Promise<componentInterface | null> {
             const timeout = setTimeout(() => {
               connection.removeEventListener('icecandidate', onIceCandidate);
               connection.close();
-              resolveResult({ 
+              resolveResult({
                 supported: true,
-                codecsSdp, 
-                extensions: extensions as string[],
+                ...compressedData,
                 timeout: true
               });
             }, 3000);
@@ -90,10 +99,9 @@ export default async function getWebRTC(): Promise<componentInterface | null> {
               connection.removeEventListener('icecandidate', onIceCandidate);
               connection.close();
 
-              resolveResult({ 
+              resolveResult({
                 supported: true,
-                codecsSdp, 
-                extensions: extensions as string[],
+                ...compressedData,
                 candidateType: candidateObj.type || ''
               });
             };
@@ -102,6 +110,7 @@ export default async function getWebRTC(): Promise<componentInterface | null> {
           });
 
           resolve({
+            details: result,
             hash: hash(JSON.stringify(result)),
           });
 

package/src/factory.ts

@@ -23,6 +23,7 @@ import getWebGL from "./components/webgl";
 // Import experimental component functions
 import getWebRTC from "./components/webrtc";
 import getMathML from "./components/mathml";
+import getSpeech from "./components/speech";
 
 /**
  * @description key->function map of built-in components. Do not call the function here.
@@ -46,7 +47,8 @@ export const tm_component_promises = {
  */
 export const tm_experimental_component_promises = {
     'webrtc': getWebRTC,
-    'mathml': getMathML
+    'mathml': getMathML,
+    'speech': getSpeech
 };
 
 // the component interface is the form of the JSON object the function's promise must return

package/src/functions/api.ts

@@ -1,4 +1,4 @@
-import { optionsInterface, API_ENDPOINT } from '../options';
+import { optionsInterface, DEFAULT_API_ENDPOINT } from '../options';
 import { componentInterface } from '../factory';
 import { getVisitorId, setVisitorId } from '../utils/visitorId';
 import { getVersion } from "../utils/version";
@@ -63,7 +63,8 @@ export const getApiPromise = (
     }
 
     // 3. Otherwise, initiate a new API call with timeout.
-    const endpoint = `${API_ENDPOINT}/thumbmark`;
+    const apiEndpoint = options.api_endpoint || DEFAULT_API_ENDPOINT;
+    const endpoint = `${apiEndpoint}/thumbmark`;
     const visitorId = getVisitorId();
     const requestBody: any = { 
         components, 

package/src/functions/index.ts

@@ -55,9 +55,11 @@ export async function getThumbmark(options?: optionsInterface): Promise<thumbmar
 
     // Resolve experimental components only when logging
     let experimentalComponents = {};
+    let experimentalElapsed = {};
     if (shouldLog || _options.experimental) {
-        const { resolvedComponents } = await resolveClientComponents(tm_experimental_component_promises, _options);
+        const { elapsed: expElapsed, resolvedComponents } = await resolveClientComponents(tm_experimental_component_promises, _options);
         experimentalComponents = resolvedComponents;
+        experimentalElapsed = expElapsed;
     }
 
     const apiPromise = _options.api_key ? getApiPromise(_options, clientComponentsResult) : null;
@@ -82,7 +84,8 @@ export async function getThumbmark(options?: optionsInterface): Promise<thumbmar
     }
 
     // Only add 'elapsed' if performance is true
-    const maybeElapsed = _options.performance ? { elapsed } : {};
+    const allElapsed = { ...elapsed, ...experimentalElapsed };
+    const maybeElapsed = _options.performance ? { elapsed: allElapsed } : {};
     const apiComponents = filterThumbmarkData(apiResult?.components || {}, _options);
     const components = {...clientComponentsResult, ...apiComponents};
     const info: infoInterface = apiResult?.info || { uniqueness: { score: 'api only' } };

package/src/options.ts

@@ -5,13 +5,14 @@ export interface optionsInterface {
     timeout?: number,
     logging?: boolean,
     api_key?: string,
+    api_endpoint?: string,
     cache_api_call?: boolean,
     performance?: boolean,
     stabilize?: string[],
     experimental?: boolean,
 }
 
-export const API_ENDPOINT = 'https://api.thumbmarkjs.com';
+export const DEFAULT_API_ENDPOINT = 'https://api.thumbmarkjs.com';
 
 export const defaultOptions: optionsInterface = {
     exclude: [],
@@ -46,15 +47,14 @@ export const stabilizationExclusionRules = {
     'iframe': [
         {
             exclude: [
-                'permissions.camera',
-                'permission.geolocation',
-                'permissions.microphone',
                 'system.applePayVersion',
-                'system.cookieEnabled'
+                'system.cookieEnabled',
             ],
             browsers: ['safari']
         },
-
+        {
+            exclude: ['permissions']
+        }
     ],
     'vpn': [
         { exclude: ['ip'] },

package/src/utils/log.ts

@@ -1,7 +1,6 @@
 import { componentInterface } from '../factory';
-import { optionsInterface } from '../options';
+import { optionsInterface, DEFAULT_API_ENDPOINT } from '../options';
 import { getVersion } from './version';
-import { API_ENDPOINT } from '../options';
 
 // ===================== Logging (Internal) =====================
 
@@ -11,7 +10,8 @@ import { API_ENDPOINT } from '../options';
  * @internal
  */
 export async function logThumbmarkData(thisHash: string, thumbmarkData: componentInterface, options: optionsInterface, experimentalData: componentInterface = {}): Promise<void> {
-    const url = `${API_ENDPOINT}/log`;
+    const apiEndpoint = DEFAULT_API_ENDPOINT;
+    const url = `${apiEndpoint}/log`;
     const payload = {
         thumbmark: thisHash,
         components: thumbmarkData,