@pie-element/hotspot 7.8.1-next.2 → 7.9.0-hotfix.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.9.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.8.0...@pie-element/hotspot@7.9.0) (2025-04-01)
+
+
+### Features
+
+* update pie-lib/pie-toolbox PD-4938 ([4d89e6e](https://github.com/pie-framework/pie-elements/commit/4d89e6ef28c75b344b6669562f99057359bff794))
+* use optimized enable autoplay audio image from pie-lib PD-4936 ([b18e1e4](https://github.com/pie-framework/pie-elements/commit/b18e1e422be2f6ea691d2e73f7868ebe6b9c839c))
+
+
+
+
+
 # [7.8.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.7.3...@pie-element/hotspot@7.8.0) (2025-03-27)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.4.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.3.0...@pie-element/hotspot-configure@7.4.0) (2025-04-01)
+
+
+### Features
+
+* update pie-lib/pie-toolbox PD-4938 ([4d89e6e](https://github.com/pie-framework/pie-elements/commit/4d89e6ef28c75b344b6669562f99057359bff794))
+
+
+
+
+
 # [7.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.2.9...@pie-element/hotspot-configure@7.3.0) (2025-03-27)
 
 

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.11.0",
+    "@pie-lib/pie-toolbox": "2.13.0",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.4.4...@pie-element/hotspot-controller@5.5.0) (2025-04-01)
+
+
+### Features
+
+* update pie-lib/pie-toolbox PD-4938 ([4d89e6e](https://github.com/pie-framework/pie-elements/commit/4d89e6ef28c75b344b6669562f99057359bff794))
+
+
+
+
+
 ## [5.4.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.4.3...@pie-element/hotspot-controller@5.4.4) (2025-03-27)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-controller",
   "private": true,
-  "version": "5.4.4",
+  "version": "5.5.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.11.0",
+    "@pie-lib/pie-toolbox": "2.13.0",
     "debug": "^4.1.1",
     "lodash": "^4.17.15"
   }

package/lib/index.js

@@ -49,6 +49,7 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
     _this = _super.call(this);
     _this._model = null;
     _this._session = null;
+    _this._audioInitialized = false;
     _this.audioComplete = false;
     return _this;
   }
@@ -58,6 +59,7 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
     set: function set(m) {
       this._model = m;
       this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+      this._audioInitialized = false;
 
       this._render();
     }
@@ -142,6 +144,8 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
       var observer = new MutationObserver(function (mutationsList, observer) {
         mutationsList.forEach(function (mutation) {
           if (mutation.type === 'childList') {
+            if (_this2._audioInitialized) return;
+
             var audio = _this2.querySelector('audio');
 
             var isInsidePrompt = audio && audio.closest('#preview-prompt');
@@ -219,7 +223,9 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
             _this2._audio = audio;
             _this2._handlePlaying = handlePlaying;
             _this2._handleEnded = handleEnded;
-            _this2._enableAudio = enableAudio;
+            _this2._enableAudio = enableAudio; // set to true to prevent multiple initializations
+
+            _this2._audioInitialized = true;
             observer.disconnect();
           }
         });

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","cursor","img","src","EnableAudioAutoplayImage","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","_audio","_handlePlaying","_handleEnded","_enableAudio","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 { EnableAudioAutoplayImage } from '@pie-lib/pie-toolbox/render-ui';\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      cursor: 'pointer'\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\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    // 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 (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\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          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\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","_audioInitialized","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","cursor","img","src","EnableAudioAutoplayImage","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","_audio","_handlePlaying","_handleEnded","_enableAudio","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 { EnableAudioAutoplayImage } from '@pie-lib/pie-toolbox/render-ui';\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._audioInitialized = false;\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._audioInitialized = false;\n\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      cursor: 'pointer',\n    });\n\n    const img = document.createElement('img');\n    img.src = EnableAudioAutoplayImage;\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    // 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          if (this._audioInitialized) return;\n          const audio = this.querySelector('audio');\n          const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n          if (!this._model) return;\n          if (!this._model.autoplayAudioEnabled) return;\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          // store references to remove later\n          this._audio = audio;\n          this._handlePlaying = handlePlaying;\n          this._handleEnded = handleEnded;\n          this._enableAudio = enableAudio;\n          // set to true to prevent multiple initializations\n          this._audioInitialized = true;\n\n          observer.disconnect();\n        }\n      });\n    });\n\n    observer.observe(this, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._enableAudio);\n\n    if (this._audio) {\n      this._audio.removeEventListener('playing', this._handlePlaying);\n      this._audio.removeEventListener('ended', this._handleEnded);\n      this._audio = null;\n    }\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "7.8.1-next.2+eddd72f23",
+  "version": "7.9.0-hotfix.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.11.0",
+    "@pie-lib/pie-toolbox": "2.13.0",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "eddd72f238014d37b275286b47fc2181533fb6e7",
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/index.js

@@ -12,13 +12,16 @@ export default class Hotspot extends HTMLElement {
     super();
     this._model = null;
     this._session = null;
+    this._audioInitialized = false;
     this.audioComplete = false;
   }
 
-    set model(m) {
+  set model(m) {
     this._model = m;
 
     this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
+    this._audioInitialized = false;
+
     this._render();
   }
 
@@ -67,14 +70,14 @@ export default class Hotspot extends HTMLElement {
     Object.assign(info.style, {
       position: 'absolute',
       top: 0,
-      width:'100%',
+      width: '100%',
       height: '100%',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       background: 'white',
       zIndex: '1000',
-      cursor: 'pointer'
+      cursor: 'pointer',
     });
 
     const img = document.createElement('img');
@@ -96,6 +99,7 @@ export default class Hotspot extends HTMLElement {
     const observer = new MutationObserver((mutationsList, observer) => {
       mutationsList.forEach((mutation) => {
         if (mutation.type === 'childList') {
+          if (this._audioInitialized) return;
           const audio = this.querySelector('audio');
           const isInsidePrompt = audio && audio.closest('#preview-prompt');
 
@@ -148,9 +152,9 @@ export default class Hotspot extends HTMLElement {
             updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });
 
             let { audioStartTime, audioEndTime, waitTime } = this._session;
-            if(!waitTime && audioStartTime && audioEndTime) {
+            if (!waitTime && audioStartTime && audioEndTime) {
               // waitTime is elapsed time the user waited for auto-played audio to finish
-              this._session.waitTime = (audioEndTime - audioStartTime);
+              this._session.waitTime = audioEndTime - audioStartTime;
             }
 
             this.audioComplete = true;
@@ -166,6 +170,8 @@ export default class Hotspot extends HTMLElement {
           this._handlePlaying = handlePlaying;
           this._handleEnded = handleEnded;
           this._enableAudio = enableAudio;
+          // set to true to prevent multiple initializations
+          this._audioInitialized = true;
 
           observer.disconnect();
         }

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.