@pie-element/drag-in-the-blank 6.10.4-next.0 → 6.10.4-next.4

package/configure/package.json

@@ -8,7 +8,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.1",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.14.3",
+    "@pie-lib/pie-toolbox": "2.14.4",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/package.json

@@ -8,7 +8,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.14.3",
+    "@pie-lib/pie-toolbox": "2.14.4",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "type-of": "^2.0.1"

package/lib/index.js

@@ -95,6 +95,7 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
     });
     _this._model = null;
     _this._session = null;
+    _this._audioInitialized = false;
     _this.audioComplete = false;
     return _this;
   }
@@ -103,7 +104,9 @@ var DragInTheBlank = /*#__PURE__*/function (_HTMLElement) {
     key: "model",
     set: function set(m) {
       this._model = m;
-      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model));
+      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model)); // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio
+
+      this._audioInitialized = false;
 
       this._render();
     }
@@ -155,6 +158,8 @@ var DragInTheBlank = /*#__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');
@@ -228,7 +233,9 @@ var DragInTheBlank = /*#__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":["isComplete","session","model","audioComplete","autoplayAudioEnabled","completeAudioEnabled","value","Object","values","some","DragInTheBlank","_model","_session","elem","React","createElement","Main","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","selector","dispatchChangedEvent","_render","m","ModelSetEvent","s","info","document","id","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","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 { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport const isComplete = (session, model, audioComplete) => {\n  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};\n\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    return false;\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  return Object.values(session.value || {}).some((value) => !!value);\n};\n\nexport default class DragInTheBlank 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    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model));\n\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        value: this._session.value,\n        onChange: this.changeSession,\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.session.selector = 'Mouse';\n\n    this.dispatchChangedEvent();\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            this._session.audioStartTime = 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            this._session.audioEndTime = 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.dispatchChangedEvent();\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"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["isComplete","session","model","audioComplete","autoplayAudioEnabled","completeAudioEnabled","value","Object","values","some","DragInTheBlank","_model","_session","elem","React","createElement","Main","onChange","changeSession","ReactDOM","render","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","selector","dispatchChangedEvent","_render","_audioInitialized","m","ModelSetEvent","s","info","document","id","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","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 { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\n\nexport const isComplete = (session, model, audioComplete) => {\n  const { autoplayAudioEnabled, completeAudioEnabled } = model || {};\n\n  if (autoplayAudioEnabled && completeAudioEnabled && !audioComplete) {\n    return false;\n  }\n\n  if (!session || !session.value) {\n    return false;\n  }\n\n  return Object.values(session.value || {}).some((value) => !!value);\n};\n\nexport default class DragInTheBlank 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    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete), !!this._model));\n    // reset the audioInitialized to false since the model changed, and we might need to reinitialize the audio\n    this._audioInitialized = false;\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  _render = () => {\n    if (this._model && this._session) {\n      let elem = React.createElement(Main, {\n        model: this._model,\n        value: this._session.value,\n        onChange: this.changeSession,\n      });\n\n      ReactDOM.render(elem, this, () => {\n        renderMath(this);\n      });\n    }\n  };\n\n  dispatchChangedEvent = () => {\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), isComplete(this._session, this._model, this.audioComplete)));\n  };\n\n  changeSession = (value) => {\n    this.session.value = value;\n    this.session.selector = 'Mouse';\n\n    this.dispatchChangedEvent();\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            this._session.audioStartTime = 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            this._session.audioEndTime = 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.dispatchChangedEvent();\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"],"file":"index.js"}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "6.10.4-next.0+dc4431069",
+  "version": "6.10.4-next.4+8b13a17da",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
@@ -12,7 +12,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.14.3",
+    "@pie-lib/pie-toolbox": "2.14.4",
     "classnames": "^2.2.5",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
@@ -21,7 +21,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "dc4431069883e3447267ee1b5a8eaa848e8280d4",
+  "gitHead": "8b13a17da218966aa15a0b1db4d5873a44231db6",
   "main": "lib/index.js",
   "module": "src/index.js"
 }