anear-js-api 0.4.30 → 0.4.33

package/lib/state_machines/AnearEventMachine.js

@@ -30,6 +30,7 @@ const AnearParticipantMachine = require('../state_machines/AnearParticipantMachi
 const AnearParticipant = require('../models/AnearParticipant')
 const RealtimeMessaging = require('../utils/RealtimeMessaging')
 const MetaProcessing = require('../utils/MetaProcessing')
+const DisplayEventProcessor = require('../utils/DisplayEventProcessor')
 const PugHelpers = require('../utils/PugHelpers')
 const C = require('../utils/Constants')
 
@@ -180,7 +181,7 @@ const ActiveEventStatesConfig = {
       ],
       on: {
         RENDER_DISPLAY: {
-          target: '.rendering'
+          target: '#createdRendering'
         }
       },
       states: {
@@ -195,7 +196,8 @@ const ActiveEventStatesConfig = {
             }
           }
         },
-        rendering: {
+        createdRendering: {
+          id: 'createdRendering',
           deferred: DeferredStatesPlus('ANNOUNCE', 'START'),
           invoke: {
             src: 'renderDisplay',
@@ -219,7 +221,7 @@ const ActiveEventStatesConfig = {
       initial: 'transitioning',
       on: {
         RENDER_DISPLAY: {
-          target: '.rendering'
+          target: '#announceRendering'
         },
         PARTICIPANT_LEAVE: {
           // creator browser refresh or MIA.  Send disconnect events
@@ -230,19 +232,15 @@ const ActiveEventStatesConfig = {
             // a participant could re-entering the event after above PARTICIPANT_LEAVE (browser refresh).
             // so look for existing participants and send reconnect events to interested machines
             cond: 'participantExists',
-            actions: 'sendParticipantReconnectEvents',
-            target: '#waitingToStart',
-            internal: true
+            actions: 'sendParticipantReconnectEvents'
           },
           {
             // spectator clicked JOIN
-            target: '#newParticipant'
+            target: '#spectatorJoining'
           }
         ],
         SPECTATOR_ENTER: {
-          actions: 'sendSpectatorEnterToAppEventMachine',
-          target: '#waitingToStart',
-          internal: true
+          actions: 'sendSpectatorEnterToAppEventMachine'
         }
       },
       states: {
@@ -271,7 +269,8 @@ const ActiveEventStatesConfig = {
             }
           }
         },
-        rendering: {
+        announceRendering: {
+          id: 'announceRendering',
           deferred: DeferredStatesPlus('START'),
           invoke: {
             src: 'renderDisplay',
@@ -284,30 +283,56 @@ const ActiveEventStatesConfig = {
             }
           }
         },
-        newParticipant: {
+        spectatorJoining: {
           // a PARTICIPANT_ENTER received from a new user JOIN click. create an AnearParticipantMachine instance.
           // This machine tracks presence, geo-location (when approved by mobile participant),
           // manages active/idle state for long-running events, and manages any ACTION timeouts.
-          id: 'newParticipant',
+          id: 'spectatorJoining',
           deferred: DeferredStatesPlus('START'),
           invoke: {
             src: 'fetchParticipantData',
             onDone: {
-              actions: [
-                'startNewParticipantMachine',
-                'sendParticipantEnterToAppEventMachine'
-              ],
-              target: '#waitingToStart',
+              actions: ['startNewParticipantMachine'],
+              target: '#waitParticipantReady'
             },
             onError: {
               target: '#activeEvent.failure'
             }
           }
+        },
+        waitParticipantReady: {
+          id: 'waitParticipantReady',
+          deferred: DeferredStatesPlus('START'),
+          on: {
+            PARTICIPANT_MACHINE_READY: {
+              actions: ['sendParticipantEnterToAppEventMachine'],
+              target: '#waitingToStart',
+              internal: true
+            }
+          }
         }
       }
     },
     live: {
       initial: 'transitioning',
+      on: {
+        RENDER_DISPLAY: {
+          target: '#liveRendering'
+        },
+        SPECTATOR_ENTER: {
+          actions: 'sendSpectatorEnterToAppEventMachine'
+        },
+        PARTICIPANT_LEAVE: {
+          // mid-event browser refresh or MIA.  Send disconnect events
+          actions: ['sendParticipantDisconnectEvents']
+        },
+        PARTICIPANT_TIMEOUT: {
+          // TBD: A participant(s) who was required to take a click action has
+          // failed to do so
+        },
+        PAUSE: '#activeEvent.paused', // Currently no use-case for these
+        CLOSE: '#activeEvent.closed'
+      },
       states: {
         transitioning: {
           deferred: DeferredStates,
@@ -324,8 +349,72 @@ const ActiveEventStatesConfig = {
         waitingForActions: {
           id: 'waitingForActions',
           on: {
-            PAUSE: '#activeEvent.paused',
-            CLOSE: '#activeEvent.closed'
+            PARTICIPANT_ENTER: [
+              {
+                // a participant could re-entering the event after above PARTICIPANT_LEAVE (browser refresh).
+                // so look for existing participants and send reconnect events to interested machines
+                cond: 'participantExists',
+                actions: 'sendParticipantReconnectEvents'
+              },
+              {
+                // in the future, open house events allow spectators to join and leave freely
+                // during live.waitingForActions
+                cond: 'isOpenHouseEvent',
+                target: 'participantEntering'
+              },
+              {
+                // shouldn't receive these so log it and return to current state
+                actions: [(c, e) => logger.info("Error: Unexepected PARTICIPANT_ENTER")],
+                target: '#activeEvent.failure'
+              }
+            ],
+            ACTION: {
+              // A participant has clicked an anear-data-action
+              actions: ['processParticipantAction']
+            }
+          }
+        },
+        liveRendering: {
+          id: 'liveRendering',
+          deferred: DeferredStates,
+          invoke: {
+            src: 'renderDisplay',
+            onDone: {
+              target: '#waitingForActions',
+              internal: true
+            },
+            onError: {
+              target: '#activeEvent.failure'
+            }
+          }
+        },
+        participantEntering: {
+          // a PARTICIPANT_ENTER received from a new user JOIN click. Unless already exists,
+          // create an AnearParticipantMachine instance.
+          // This machine tracks presence, geo-location (when approved by mobile participant),
+          // manages active/idle state for long-running events, and manages any ACTION timeouts.
+          id: 'participantEntering',
+          deferred: DeferredStates,
+          invoke: {
+            src: 'fetchParticipantData',
+            onDone: {
+              actions: ['startNewParticipantMachine'],
+              target: '#waitParticipantJoined',
+            },
+            onError: {
+              target: '#activeEvent.failure'
+            }
+          }
+        },
+        waitParticipantJoined: {
+          id: 'waitParticipantJoined',
+          deferred: DeferredStates,
+          on: {
+            PARTICIPANT_MACHINE_READY: {
+              actions: ['sendParticipantEnterToAppEventMachine'],
+              target: '#waitingForActions',
+              internal: true
+            }
           }
         }
       }
@@ -684,6 +773,9 @@ const AnearEventMachineFunctions = ({
     sendParticipantEnterToAppEventMachine: (context, event) => {
       const { anearParticipant } = event.data
       const participantInfo = context.participants[anearParticipant.id]
+
+      logger.debug(`Participant machine ${participantInfo.id} is READY`)
+
       const startEvent = { participant: participantInfo }
 
       context.appEventMachine.send('PARTICIPANT_ENTER', startEvent)
@@ -790,88 +882,10 @@ const AnearEventMachineFunctions = ({
     }
   },
   services: {
-    renderDisplay: async (context, event) => {
-      const processDisplayEvent = displayEvent => {
-        const { displayType, viewPath, timeout, appExecutionContext } = displayEvent
-
-        logger.debug("processDisplayEvent - displayType: ", displayType, ", viewPath: ", viewPath)
-
-        const renderedDisplayContent = (template, additionalExecutionContext, timeout) => {
-          const renderedMessage = template(
-            {
-              displayType,
-              ...appExecutionContext,
-              ...additionalExecutionContext,
-              participants: context.participants,
-              ...context.pugHelpers
-            }
-          )
-          const displayContent = { content: renderedMessage }
-          if (timeout) {
-            displayContent['timeout'] = timeout
-          }
-          return displayContent
-        }
-
-        const privateParticipantSend = participantMachine => {
-          const participantState = participantMachine.state
-          const participantContext = participantState.context
-          const { appParticipantMachine, anearParticipant } = participantContext
-
-          // TODO: don't send to participants that aren't in an active state
-
-          const appParticipantContext =
-            appParticipantMachine ? participantContext.appParticipantMachine.state.context : {}
-
-          const privateContext = {
-            anearParticipant: anearParticipant.participantInfo,
-            participantContext: appParticipantContext
-          }
+    renderDisplay: (context, event) => {
+      const displayEventProcessor = new DisplayEventProcessor(context)
 
-          const displayEventPayload = renderedDisplayContent(template, privateContext, timeout)
-
-          participantMachine.send('PRIVATE_DISPLAY', displayEventPayload)
-        }
-
-        const normalizedPath = viewPath.endsWith(C.PugSuffix) ? viewPath : `${viewPath}${C.PugSuffix}`
-        const template = context.pugTemplates[normalizedPath]
-        if (!template) {
-          throw new Error(`Template not found for path "${normalizedPath}".`)
-        }
-        let displayMessage
-
-        switch (displayType) {
-          case 'participants':
-            displayMessage = renderedDisplayContent(template, {}, timeout)
-            return RealtimeMessaging.publish(
-              context.participantsDisplayChannel,
-              'PARTICIPANTS_DISPLAY',
-              displayMessage.content
-            )
-            break
-          case 'spectators':
-            displayMessage = renderedDisplayContent(template, {})
-
-            return RealtimeMessaging.publish(
-              context.spectatorsDisplayChannel,
-              'SPECTATORS_DISPLAY',
-              displayMessage.content
-            )
-            break
-          case 'participant':
-            // For private displays, iterate over active active participant machines.
-            Object.values(context.participantMachines).forEach(privateParticipantSend)
-            return Promise.resolve()
-            break
-          default:
-            throw new Error(`Unknown display type: ${displayType}`)
-        }
-      }
-
-      const publishPromises = event.displayEvents.map(
-        displayEvent => processDisplayEvent(displayEvent)
-      )
-      return Promise.all(publishPromises)
+      return displayEventProcessor.processAndPublish(event.displayEvents)
     },
     getAttachedCreatorOrHost: async (context, event) => {
       logger.debug("getAttachedCreatorOrHost() invoked")
@@ -937,7 +951,8 @@ const AnearEventMachineFunctions = ({
   },
   guards: {
     participantExists: (context, event) => !!context.participants[event.data.id],
-    eventCreatorIsHost: (context, event) => context.anearEvent.hosted
+    eventCreatorIsHost: (context, event) => context.anearEvent.hosted,
+    isOpenHouseEvent: (context, event) => false // TODO: need to have App open_house trait exposed in anear api
   }
 })
 

package/lib/state_machines/AnearParticipantMachine.js

@@ -22,7 +22,7 @@ const CurrentDateTimestamp = _ => new Date().getTime()
 const MISSING_TIMEOUT = 10000 // msecs
 
 const DeferredStates = [
-  'PRIVATE_DISPLAY',
+  'RENDER_DISPLAY',
   'PARTICIPANT_EXIT',
   'PARTICIPANT_DISCONNECT',
   'PARTICIPANT_RECONNECT'
@@ -92,8 +92,8 @@ const AnearParticipantMachineConfig = participantId => ({
             idle: {
               id: 'idle',
               on: {
-                PRIVATE_DISPLAY: {
-                  target: '#privateDisplay'
+                RENDER_DISPLAY: {
+                  target: '#renderDisplay'
                 },
                 PARTICIPANT_DISCONNECT: {
                   target: 'missing'
@@ -116,11 +116,11 @@ const AnearParticipantMachineConfig = participantId => ({
                 }
               }
             },
-            privateDisplay: {
-              id: 'privateDisplay',
+            renderDisplay: {
+              id: 'renderDisplay',
               deferred: DeferredStates,
               invoke: {
-                src: 'privateParticipantDisplay',
+                src: 'participantDisplay',
                 onDone: [
                   {
                     cond: 'hasMetaTimeout',
@@ -233,7 +233,7 @@ const AnearParticipantMachineFunctions = {
     }
   },
   services: {
-    privateParticipantDisplay: async (context, event) => {
+    participantDisplay: async (context, event) => {
       await RealtimeMessaging.publish(
         context.privateChannel,
         'PRIVATE_DISPLAY',
@@ -248,7 +248,7 @@ const AnearParticipantMachineFunctions = {
   },
   guards: {
     hasAppParticipantMachine: context => context.appParticipantMachineFactory !== null,
-    hasMetaTimeout: (context, event) => event.data.timeout.msecs > 0
+    hasMetaTimeout: (context, event) => event.data.timeout?.msecs > 0
   },
   delays: {
     timeoutMsecsAfterNoResponse: context => context.noResponseTimeout
@@ -258,7 +258,7 @@ const AnearParticipantMachineFunctions = {
 // The AnearParticipantMachine:
 //   1. maintains the presence and geo-location for a Participant in an Event
 //   2. instantiates the XState Machine return by the (optional) appParticipantMachineFactory
-//   3. creates a private display ChannelMachine to which any private display messages get published
+//   3. creates a private display ChannelMachine to which any participant displayType messages get published
 //   4. handles activity state, response timeouts, idle state
 //   5. receives ACTION events relayed by the AnearEventMachine
 //   6. relays all relevant events to the participant XState Machine for Application-specific handling

package/lib/utils/DisplayEventProcessor.js

@@ -0,0 +1,129 @@
+"use strict"
+/**
+ * --------------------------------------------------------------------------
+ * Pug templates receive the following context at render:
+ *
+ * {
+ *   app: application XState context
+ *   meta: {
+ *     viewer:  // 'participant', 'participants', 'spectators'
+ *     state:   // Stringified state name (e.g., 'live.registration.waitForOpponentToJoin')
+ *     event:   // The triggering event for this transition ('PARTICIPANT_ENTER')
+ *     timeout: // null|| { msecs:, [participantId:]}
+ *   }
+ *
+ *   // When 'participant' displayType
+ *   participants: // all: Map of all participants [info, context] for this event,  get(id) => info, context
+ *   participant:  // info, context
+ *
+ *   // PLUS all helpers from PugHelpers:
+ *   cdnImg(filename)  // Resolves CDN image path
+ *   action(payload)   // JSON-encodes click action payloads for data attributes
+ * }
+ *
+ * Example usage in Pug:
+ *
+ *   img(src=cdnImg('logo.png'))
+ *   .sq(data-anear-click=action({MOVE: {x, y}}))
+ *   each participant in Object.values(participants)
+ *     li= participant.name
+ *
+ * --------------------------------------------------------------------------
+ */
+
+const logger = require('./Logger')
+const RealtimeMessaging = require('./RealtimeMessaging')
+const C = require('./Constants')
+
+class DisplayEventProcessor {
+  constructor(anearEventMachineContext) {
+    this.pugTemplates = anearEventMachineContext.pugTemplates
+    this.pugHelpers = anearEventMachineContext.pugHelpers
+    this.participantMachines = anearEventMachineContext.participantMachines
+    this.participantsDisplayChannel = anearEventMachineContext.participantsDisplayChannel
+    this.spectatorsDisplayChannel = anearEventMachineContext.spectatorsDisplayChannel
+    this.participantsIndex = this._buildParticipantsIndex(anearEventMachineContext.participants)
+  }
+
+  processAndPublish(displayEvents) {
+    return Promise.all(displayEvents.map(event => this._processSingle(event)))
+  }
+
+  _buildParticipantsIndex(participants) {
+    const participantStructs = Object.fromEntries(
+      Object.entries(participants).map(([id, info]) => [ id, { info, context: null } ])
+    )
+    const all = Object.values(participantStructs)
+
+    return { all, get: id => participantStructs[id] }
+  }
+
+  _processSingle(displayEvent) {
+    const { viewPath, appRenderContext } = displayEvent
+    const timeout = appRenderContext.meta.timeout
+
+    const normalizedPath = viewPath.endsWith(C.PugSuffix) ? viewPath : `${viewPath}${C.PugSuffix}`
+    const template = this.pugTemplates[normalizedPath]
+
+    if (!template) {
+      throw new Error(`Template not found: ${normalizedPath}`)
+    }
+
+    const templateRenderContext = {
+      ...appRenderContext,
+      participants: this.participantsIndex,
+      ...this.pugHelpers
+    }
+
+    switch (appRenderContext.meta.viewer) {
+      case 'participants':
+        logger.debug(`[DisplayEventProcessor] Publishing PARTICIPANTS_DISPLAY`)
+
+        return RealtimeMessaging.publish(
+          this.participantsDisplayChannel,
+          'PARTICIPANTS_DISPLAY',
+          template(templateRenderContext)
+        )
+
+      case 'spectators':
+        logger.debug(`[DisplayEventProcessor] Publishing SPECTATORS_DISPLAY`)
+
+        return RealtimeMessaging.publish(
+          this.spectatorsDisplayChannel,
+          'SPECTATORS_DISPLAY',
+          template(templateRenderContext)
+        )
+
+      case 'participant':
+        logger.debug(`[DisplayEventProcessor] Processing RENDER_DISPLAY for each participant`)
+        return this._processPrivateParticipantDisplays(template, templateRenderContext, timeout)
+
+      default:
+        throw new Error(`Unknown meta.viewer: ${appRenderContext.meta.viewer}`)
+    }
+  }
+
+  _processPrivateParticipantDisplays(template, templateRenderContext, timeout) {
+    Object.values(this.participantsIndex.all).forEach(
+      participantStruct => {
+        const participantId = participantStruct.info.id
+        const participantMachine = this.participantMachines[participantId]
+        const privateRenderContext = {
+          ...templateRenderContext,
+          participant: participantStruct
+        }
+
+        const privateHtml = template(privateRenderContext)
+
+        const renderMessage = { content: privateHtml }
+        if (timeout) renderMessage.timeout = timeout
+
+        participantMachine.send('RENDER_DISPLAY', renderMessage)
+      }
+    )
+
+    return Promise.resolve()
+  }
+}
+
+module.exports = DisplayEventProcessor

package/lib/utils/MetaProcessing.js

@@ -2,146 +2,97 @@
 
 const logger = require('./Logger')
 
-// Helper functions for processing meta configurations
-const buildTimeout = (timeoutType, timeoutConfig, appExecutionContext) => {
-  let msecs = null
-  let participantId = null
-
-  switch (typeof timeoutConfig) {
-    case 'function':
-      [msecs, participantId] = timeoutConfig(appExecutionContext)
-      break
-    case 'number':
-      msecs = timeoutConfig
-      break
-    default:
-      throw new Error(`unknown timeout config ${typeof timeoutConfig}`)
-  }
-
-  switch (timeoutType) {
-    case 'participant':
-      return { type: timeoutType, msecs, participantId }
-    case 'participants':
-      return { type: timeoutType, msecs }
-    default:
-      throw new Error(`unknown timeout type ${timeoutType}`)
-  }
-}
-
-const metaConfig = (meta, timeoutType, appExecutionContext) => {
-  let timeout = {msecs: 0}
-  let view = null
-
-  switch (typeof meta) {
-    case 'string':
-      view = meta
-      break
-    case 'object':
-      view = meta.view
-      if (meta.timeout) {
-        timeout = buildTimeout(timeoutType, meta.timeout, appExecutionContext)
+/**
+ * MetaProcessing:
+ *  - Runs inside your appEventMachine onTransition.
+ *  - Knows how to parse the XState meta shape (participants, participant, spectators).
+ *  - Normalizes viewPath + timeout.
+ *  - Emits displayEvents → sends to AnearEventMachine for rendering.
+ */
+const MetaProcessing = (anearEvent) => {
+  return (appEventMachineState) => {
+    const { meta: rawMeta, context: appContext, value, event } = appEventMachineState
+    const [meta] = Object.values(rawMeta)
+
+    if (!meta) return
+
+    const appStateName = _stringifiedState(value)
+
+    const appRenderContext = (displayType, timeout = null) => (
+      {
+        app: appContext,
+        meta: {
+          state: appStateName,
+          event,
+          timeout,
+          viewer: displayType
+        }
       }
+    )
 
-      break
-    default:
-      throw new Error(`unknown ${timeoutType} meta format ${meta}`)
-  }
-  return [view, timeout]
-}
-
-const participantsMetaConfig = (participantsMeta, appExecutionContext) => {
-  return metaConfig(participantsMeta, 'participants', appExecutionContext)
-}
-
-const participantMetaConfig = (participantMeta, appExecutionContext) => {
-  return metaConfig(participantMeta, 'participant', appExecutionContext)
-}
-
-const spectatorMetaConfig = config => {
-  if (typeof config === 'string')
-    return config
-  else if (typeof config === 'object')
-    return config.view
-  else
-    throw new Error(`unknown spectator meta format ${config}`)
-}
-
-const Stringified = (stateValue) => {
-  switch (typeof stateValue) {
-    case 'string':
-      return stateValue
-    case 'object':
-      return Object.entries(stateValue)
-        .map(([key, nested]) => `${key}.${Stringified(nested)}`)
-        .join('.')
-    default:
-      throw new Error(`unknown Xstate state value type ${typeof stateValue}`)
-  }
-}
-
-const MetaProcessing = anearEvent => {
-  return appEventMachineState => {
-    const { context: appContext, meta: rawMeta } = appEventMachineState
-    const appStateName = Stringified(appEventMachineState.value)
     const displayEvents = []
 
-    //logger.debug("MetaProcessing invoked on transition to: ", appStateName)
-    //logger.debug("stateMeta: ", appEventMachineState.meta)
-
-    if (Object.keys(appEventMachineState.meta).length === 0) {
-      return
+    if (meta.participants) {
+      const viewPath = _getViewPath(meta.participants)
+      const timeout = _buildTimeout(meta.participants.timeout, appContext)
+      const displayEvent = {
+        viewPath,
+        appRenderContext: appRenderContext('participants', timeout)
+      }
+      displayEvents.push(displayEvent)
     }
 
-    logger.debug("App Context: ", appContext)
-
-    const sendDisplayMessage = () => {
-      logger.debug(`${appStateName} 'RENDER_DISPLAY' to ${anearEvent.id} with ${displayEvents.length} msgs`)
-
-      // sends a RENDER_DISPLAY event with one or more viewPaths and appExecutionContext in the displayEvents array
-      anearEvent.send('RENDER_DISPLAY', { displayEvents })
+    if (meta.participant) {
+      const viewPath = _getViewPath(meta.participant)
+      const timeout = _buildTimeout(meta.participant.timeout, appContext)
+      const displayEvent = {
+        viewPath,
+        appRenderContext: appRenderContext('participant', timeout)
+      }
+      displayEvents.push(displayEvent)
     }
 
-    const appendDisplayEvent = (displayType, viewPath, timeout = null) => {
-      displayEvents.push(
-        {
-          displayType,
-          viewPath,
-          timeout,
-          appExecutionContext
-        }
-      )
+    if (meta.spectators) {
+      const viewPath = _getViewPath(meta.spectators)
+      const displayEvent = {
+        viewPath,
+        appRenderContext: appRenderContext('spectators')
+      }
+      displayEvents.push(displayEvent)
     }
 
-    const appExecutionContext = {
-      context: appContext,
-      state: appStateName,
-      event: appEventMachineState.event
+    if (displayEvents.length > 0) {
+      logger.debug(`[MetaProcessing] sending RENDER_DISPLAY with ${displayEvents.length} displayEvents`)
+      anearEvent.send('RENDER_DISPLAY', { displayEvents })
     }
+  }
+}
 
-    const [meta] = Object.values(appEventMachineState.meta)
-
-    logger.debug("meta: ", meta)
+const _getViewPath = (config) => {
+  if (!config) return null
+  if (typeof config === 'string') return config
+  if (typeof config === 'object') return config.view
+  throw new Error(`Unknown meta format: ${JSON.stringify(config)}`)
+}
 
-    // Only proceed if there's at least one display meta defined.
-    if (!meta.participants && !meta.participant && !meta.spectators) return
+const _buildTimeout = (timeoutConfig, appContext) => {
+  if (!timeoutConfig) return null
 
-    if (meta.participants) {
-      const [viewPath, timeout] = participantsMetaConfig(meta.participants, appExecutionContext)
-      appendDisplayEvent('participants', viewPath, timeout)
-    }
+  if (typeof timeoutConfig === 'function') {
+    const [msecs, participantId] = timeoutConfig(appContext)
+    return { msecs, participantId }
+  }
 
-    if (meta.participant) {
-      const [viewPath, timeout] = participantMetaConfig(meta.participant, appExecutionContext)
-      appendDisplayEvent('participant', viewPath, timeout)
-    }
+  if (typeof timeoutConfig === 'number') {
+    return { msecs: timeoutConfig }
+  }
 
-    if (meta.spectators) {
-      const viewPath = spectatorMetaConfig(meta.spectators)
-      appendDisplayEvent('spectators', viewPath)
-    }
+  throw new Error(`Unknown timeout config: ${typeof timeoutConfig}`)
+}
 
-    sendDisplayMessage()
-  }
+const _stringifiedState = (stateValue) => {
+  if (typeof stateValue === 'string') return stateValue
+  return Object.entries(stateValue).map(([k, v]) => `${k}.${_stringifiedState(v)}`).join('.')
 }
 
 module.exports = MetaProcessing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anear-js-api",
-  "version": "0.4.30",
+  "version": "0.4.33",
   "description": "Javascript Developer API for Anear Apps",
   "main": "lib/index.js",
   "scripts": {