@pie-element/hotspot 7.6.5-next.0 → 7.6.5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.6.4...@pie-element/hotspot@7.6.5) (2025-02-25)
+
+**Note:** Version bump only for package @pie-element/hotspot
+
+
+
+
+
 ## [7.6.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.6.3...@pie-element/hotspot@7.6.4) (2025-02-19)
 
 

package/lib/index.js

@@ -175,6 +175,11 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
             }, 500); // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
 
             var handlePlaying = function handlePlaying() {
+              //timestamp when auto-played audio started playing
+              (0, _sessionUpdater.updateSessionMetadata)(_this2._session, {
+                audioStartTime: new Date().getTime()
+              });
+
               var info = _this2.querySelector('#play-audio-info');
 
               if (info) {
@@ -187,6 +192,20 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
             audio.addEventListener('playing', handlePlaying); // we need to listen for the ended event to update the isComplete state
 
             var handleEnded = function handleEnded() {
+              //timestamp when auto-played audio completed playing
+              (0, _sessionUpdater.updateSessionMetadata)(_this2._session, {
+                audioEndTime: new Date().getTime()
+              });
+              var _this2$_session = _this2._session,
+                  audioStartTime = _this2$_session.audioStartTime,
+                  audioEndTime = _this2$_session.audioEndTime,
+                  waitTime = _this2$_session.waitTime;
+
+              if (!waitTime && audioStartTime && audioEndTime) {
+                // waitTime is elapsed time the user waited for auto-played audio to finish
+                _this2._session.waitTime = audioEndTime - audioStartTime;
+              }
+
               _this2.audioComplete = true;
 
               _this2.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(_this2.tagName.toLowerCase(), _this2.isComplete()));

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Hotspot","_model","_session","audioComplete","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","answers","autoplayAudioEnabled","completeAudioEnabled","Array","isArray","length","s","data","SessionChangedEvent","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","img","src","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","isInsidePrompt","closest","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","handleEnded","disconnect","observe","childList","subtree","el","React","HotspotComponent","model","session","onSelectChoice","bind","ReactDOM","render","HTMLElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this.audioComplete = false;\n  }\n\n    set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      return false;\n    }\n\n    if (!Array.isArray(this._session.answers)) {\n      return false;\n    }\n\n    return this._session.answers.length > 0;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width:'100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000'\n    });\n\n    const img = document.createElement('img');\n    img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    if (this._model && !this._model.autoplayAudioEnabled) {\n      return;\n    }\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.removeChild(info);\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            const info = this.querySelector('#play-audio-info');\n\n            if (info) {\n              container.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            this.audioComplete = true;\n            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["Hotspot","_model","_session","audioComplete","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","answers","autoplayAudioEnabled","completeAudioEnabled","Array","isArray","length","s","data","SessionChangedEvent","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","img","src","alt","appendChild","observer","MutationObserver","mutationsList","forEach","mutation","type","audio","querySelector","isInsidePrompt","closest","_createAudioInfoToast","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","disconnect","observe","childList","subtree","el","React","HotspotComponent","model","session","onSelectChoice","bind","ReactDOM","render","HTMLElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n    this.audioComplete = false;\n  }\n\n    set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session || !this._session.answers) {\n      return false;\n    }\n\n    const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};\n    if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n      return false;\n    }\n\n    if (!Array.isArray(this._session.answers)) {\n      return false;\n    }\n\n    return this._session.answers.length > 0;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  _createAudioInfoToast() {\n    const info = document.createElement('div');\n    info.id = 'play-audio-info';\n\n    Object.assign(info.style, {\n      position: 'absolute',\n      top: 0,\n      width:'100%',\n      height: '100%',\n      display: 'flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      background: 'white',\n      zIndex: '1000'\n    });\n\n    const img = document.createElement('img');\n    img.src = 'https://student.assessment.renaissance.com/ce/quizenginecap/assets/img/playAppsSel.gif';\n    img.alt = 'Click anywhere to enable audio autoplay';\n    img.width = 500;\n    img.height = 300;\n\n    info.appendChild(img);\n    return info;\n  }\n\n  connectedCallback() {\n    this._render();\n\n    if (this._model && !this._model.autoplayAudioEnabled) {\n      return;\n    }\n\n    // Observation:  audio in Chrome will have the autoplay attribute,\n    // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n    // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n    const observer = new MutationObserver((mutationsList, observer) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (audio && !isInsidePrompt) return;\n          if (!audio) return;\n\n          const info = this._createAudioInfoToast();\n          const container = this.querySelector('#main-container');\n          const enableAudio = () => {\n            if (this.querySelector('#play-audio-info')) {\n              audio.play();\n              container.removeChild(info);\n            }\n\n            document.removeEventListener('click', enableAudio);\n          };\n\n          // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n          // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n          setTimeout(() => {\n            if (audio.paused && !this.querySelector('#play-audio-info')) {\n              // add info message as a toast to enable audio playback\n              container.appendChild(info);\n              document.addEventListener('click', enableAudio);\n            } else {\n              document.removeEventListener('click', enableAudio);\n            }\n          }, 500);\n\n          // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n          const handlePlaying = () => {\n            //timestamp when auto-played audio started playing\n            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n            \n            const info = this.querySelector('#play-audio-info');\n            if (info) {\n              container.removeChild(info);\n            }\n\n            audio.removeEventListener('playing', handlePlaying);\n          };\n\n          audio.addEventListener('playing', handlePlaying);\n\n          // we need to listen for the ended event to update the isComplete state\n          const handleEnded = () => {\n            //timestamp when auto-played audio completed playing\n            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });\n            \n            let { audioStartTime, audioEndTime, waitTime } = this._session;\n            if(!waitTime && audioStartTime && audioEndTime) {\n              // waitTime is elapsed time the user waited for auto-played audio to finish\n              this._session.waitTime = (audioEndTime - audioStartTime);\n            }\n            \n            this.audioComplete = true;\n            this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n            audio.removeEventListener('ended', handleEnded);\n          };\n\n          audio.addEventListener('ended', handleEnded);\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/lib/session-updater.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.updateSessionMetadata = updateSessionMetadata;
 exports.updateSessionValue = updateSessionValue;
 
 function updateSessionValue(session, model, data) {
@@ -33,4 +34,15 @@ function updateSessionValue(session, model, data) {
     session.selector = data.selector;
   }
 }
+
+function updateSessionMetadata(session, metadata) {
+  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
+
+  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
+
+  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
+    // waitTime is elapsed time the user waited for auto-played audio to finish
+    session.waitTime = session.audioEndTime - session.audioStartTime;
+  }
+}
 //# sourceMappingURL=session-updater.js.map

package/lib/session-updater.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/session-updater.js"],"names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector"],"mappings":";;;;;;;AAAO,SAASA,kBAAT,CAA4BC,OAA5B,EAAqCC,KAArC,EAA4CC,IAA5C,EAAkD;AACvD,MAAQC,EAAR,GAAyBD,IAAzB,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAyBF,IAAzB,CAAYE,QAAZ;;AACA,aAA4BH,KAAK,IAAI,EAArC;AAAA,MAAQI,eAAR,QAAQA,eAAR;;AACAL,EAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,IAAmB,EAArC;;AAEA,MAAI,CAACF,QAAL,EAAe;AACbJ,IAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAuB,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACL,EAAP,KAAcA,EAA1B;AAAA,KAAvB,CAAlB;AACD,GAFD,MAEO;AACL,QAAMM,IAAI,GAAG;AAAEN,MAAAA,EAAE,EAAFA;AAAF,KAAb;;AACA,QAAIE,eAAJ,EAAqB;AACnBL,MAAAA,OAAO,CAACM,OAAR,CAAgBI,IAAhB,CAAqBD,IAArB;AACD,KAFD,MAEO;AACLT,MAAAA,OAAO,CAACM,OAAR,GAAkB,CAACG,IAAD,CAAlB;AACD,KANI,CAQL;;;AACAT,IAAAA,OAAO,CAACW,QAAR,GAAmBT,IAAI,CAACS,QAAxB;AACD;AACF","sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n    \n    //update session metadata\n    session.selector = data.selector;\n  }\n}\n"],"file":"session-updater.js"}
+{"version":3,"sources":["../src/session-updater.js"],"names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"mappings":";;;;;;;;AAAO,SAASA,kBAAT,CAA4BC,OAA5B,EAAqCC,KAArC,EAA4CC,IAA5C,EAAkD;AACvD,MAAQC,EAAR,GAAyBD,IAAzB,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAyBF,IAAzB,CAAYE,QAAZ;;AACA,aAA4BH,KAAK,IAAI,EAArC;AAAA,MAAQI,eAAR,QAAQA,eAAR;;AACAL,EAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,IAAmB,EAArC;;AAEA,MAAI,CAACF,QAAL,EAAe;AACbJ,IAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAuB,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACL,EAAP,KAAcA,EAA1B;AAAA,KAAvB,CAAlB;AACD,GAFD,MAEO;AACL,QAAMM,IAAI,GAAG;AAAEN,MAAAA,EAAE,EAAFA;AAAF,KAAb;;AACA,QAAIE,eAAJ,EAAqB;AACnBL,MAAAA,OAAO,CAACM,OAAR,CAAgBI,IAAhB,CAAqBD,IAArB;AACD,KAFD,MAEO;AACLT,MAAAA,OAAO,CAACM,OAAR,GAAkB,CAACG,IAAD,CAAlB;AACD,KANI,CAQL;;;AACAT,IAAAA,OAAO,CAACW,QAAR,GAAmBT,IAAI,CAACS,QAAxB;AACD;AACF;;AAEM,SAASC,qBAAT,CAA+BZ,OAA/B,EAAwCa,QAAxC,EAAkD;AACvDb,EAAAA,OAAO,CAACc,cAAR,GAAyBd,OAAO,CAACc,cAAR,IAA0BD,QAAQ,CAACC,cAA5D,CADuD,CACqB;;AAC5Ed,EAAAA,OAAO,CAACe,YAAR,GAAuBf,OAAO,CAACe,YAAR,IAAwBF,QAAQ,CAACE,YAAxD,CAFuD,CAEe;;AAEtE,MAAG,CAACf,OAAO,CAACgB,QAAT,IAAqBhB,OAAO,CAACc,cAA7B,IAA+Cd,OAAO,CAACe,YAA1D,EAAwE;AACtE;AACAf,IAAAA,OAAO,CAACgB,QAAR,GAAoBhB,OAAO,CAACe,YAAR,GAAuBf,OAAO,CAACc,cAAnD;AACD;AACF","sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n    \n    //update session metadata\n    session.selector = data.selector;\n  }\n}\n\nexport function updateSessionMetadata(session, metadata) {\n  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing\n  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing\n  \n  if(!session.waitTime && session.audioStartTime && session.audioEndTime) {\n    // waitTime is elapsed time the user waited for auto-played audio to finish\n    session.waitTime = (session.audioEndTime - session.audioStartTime);\n  }\n}\n"],"file":"session-updater.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "7.6.5-next.0+6edc9cbea",
+  "version": "7.6.5",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "6edc9cbeaa03e72c6aba80e3ad1a250f30632b6f",
+  "gitHead": "796934a222cc8ef5dd179dab4fcd46dceda80129",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/index.js

@@ -4,7 +4,7 @@ import { renderMath } from '@pie-lib/pie-toolbox/math-rendering';
 import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
 
 import HotspotComponent from './hotspot';
-import { updateSessionValue } from './session-updater';
+import { updateSessionValue, updateSessionMetadata } from './session-updater';
 
 export default class Hotspot extends HTMLElement {
   constructor() {
@@ -129,8 +129,10 @@ export default class Hotspot extends HTMLElement {
 
           // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering
           const handlePlaying = () => {
+            //timestamp when auto-played audio started playing
+            updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });
+            
             const info = this.querySelector('#play-audio-info');
-
             if (info) {
               container.removeChild(info);
             }
@@ -142,6 +144,15 @@ export default class Hotspot extends HTMLElement {
 
           // we need to listen for the ended event to update the isComplete state
           const handleEnded = () => {
+            //timestamp when auto-played audio completed playing
+            updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });
+            
+            let { audioStartTime, audioEndTime, waitTime } = this._session;
+            if(!waitTime && audioStartTime && audioEndTime) {
+              // waitTime is elapsed time the user waited for auto-played audio to finish
+              this._session.waitTime = (audioEndTime - audioStartTime);
+            }
+            
             this.audioComplete = true;
             this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
 

package/src/session-updater.js

@@ -17,3 +17,13 @@ export function updateSessionValue(session, model, data) {
     session.selector = data.selector;
   }
 }
+
+export function updateSessionMetadata(session, metadata) {
+  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
+  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
+  
+  if(!session.waitTime && session.audioStartTime && session.audioEndTime) {
+    // waitTime is elapsed time the user waited for auto-played audio to finish
+    session.waitTime = (session.audioEndTime - session.audioStartTime);
+  }
+}