@pie-element/math-templated 3.4.6-next.2 → 3.4.6-next.6

package/configure/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.9.5",
+    "@pie-lib/pie-toolbox": "2.10.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/package.json

@@ -7,7 +7,7 @@
   "module": "src/index.js",
   "dependencies": {
     "@pie-framework/math-validation": "^1.2.3",
-    "@pie-lib/pie-toolbox": "2.9.5",
+    "@pie-lib/pie-toolbox": "2.10.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15"
   },

package/module/configure.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.4/module/index.js";
-import {_dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html} from "../../../@pie-lib/pie-toolbox-module@5.10.4/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.5/module/index.js";
+import {_dll_pie_lib__pie_toolbox_config_ui, _dll_pie_lib__pie_toolbox_math_toolbar, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_editable_html} from "../../../@pie-lib/pie-toolbox-module@5.10.5/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -126201,7 +126201,7 @@ const require$$11$4 = _dll_prop_types;
       }
       _this = _super.call.apply(_super, [this].concat(args));
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "parsedText", function (text) {
-        var autoplayAudioEnabled = _this.props.autoplayAudioEnabled;
+        var customAudioButton = _this.props.customAudioButton;
         var div = document.createElement('div');
         div.innerHTML = text;
         var audio = div.querySelector('audio');
@@ -126210,25 +126210,101 @@ const require$$11$4 = _dll_prop_types;
           source.setAttribute('type', 'audio/mp3');
           source.setAttribute('src', audio.getAttribute('src'));
           audio.removeAttribute('src');
-          if (autoplayAudioEnabled) {
-            audio.setAttribute('autoplay', 'autoplay');
-          }
+          audio.setAttribute('id', 'pie-prompt-audio-player');
           audio.appendChild(source);
+          if (customAudioButton) {
+            audio.style.display = 'none';
+            var playButton = document.createElement('div');
+            playButton.id = 'play-audio-button';
+            Object.assign(playButton.style, {
+              cursor: 'pointer',
+              display: 'block',
+              width: '128px',
+              height: '128px',
+              backgroundImage: ("url(").concat(customAudioButton.pauseImage, ")"),
+              backgroundSize: 'cover',
+              borderRadius: '50%',
+              border: '1px solid #326295'
+            });
+            audio.parentNode.insertBefore(playButton, audio);
+          }
         }
         return div.innerHTML;
       });
       return _this;
     }
     (0, _createClass2["default"])(PreviewPrompt, [{
+      key: "addCustomAudioButtonControls",
+      value: function addCustomAudioButtonControls() {
+        var _this$props = this.props, autoplayAudioEnabled = _this$props.autoplayAudioEnabled, customAudioButton = _this$props.customAudioButton;
+        var playButton = document.getElementById('play-audio-button');
+        var audio = document.getElementById('pie-prompt-audio-player');
+        if (autoplayAudioEnabled && audio) {
+          audio.play().then(function () {
+            if (playButton && customAudioButton) {
+              audio.addEventListener('ended', handleAudioEnded);
+            }
+          })["catch"](function (error) {
+            console.error('Error playing audio', error);
+          });
+        }
+        if (!playButton || !audio || !customAudioButton) return;
+        var handlePlayClick = function handlePlayClick() {
+          if (!audio.paused) return;
+          if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;
+          audio.play();
+        };
+        var handleAudioEnded = function handleAudioEnded() {
+          playButton.style.backgroundImage = ("url(").concat(customAudioButton.playImage, ")");
+        };
+        var handleAudioPlay = function handleAudioPlay() {
+          Object.assign(playButton.style, {
+            backgroundImage: ("url(").concat(customAudioButton.pauseImage, ")"),
+            border: '1px solid #ccc'
+          });
+        };
+        var handleAudioPause = function handleAudioPause() {
+          Object.assign(playButton.style, {
+            backgroundImage: ("url(").concat(customAudioButton.playImage, ")"),
+            border: '1px solid #326295'
+          });
+        };
+        playButton.addEventListener('click', handlePlayClick);
+        audio.addEventListener('play', handleAudioPlay);
+        audio.addEventListener('pause', handleAudioPause);
+        audio.addEventListener('ended', handleAudioEnded);
+        this._handlePlayClick = handlePlayClick;
+        this._handleAudioPlay = handleAudioPlay;
+        this._handleAudioPause = handleAudioPause;
+        this._handleAudioEnded = handleAudioEnded;
+      }
+    }, {
+      key: "removeCustomAudioButtonListeners",
+      value: function removeCustomAudioButtonListeners() {
+        var playButton = document.getElementById('play-audio-button');
+        var audio = document.querySelector('audio');
+        if (!playButton || !audio) return;
+        playButton.removeEventListener('click', this._handlePlayClick);
+        audio.removeEventListener('play', this._handleAudioPlay);
+        audio.removeEventListener('pause', this._handleAudioPause);
+        audio.removeEventListener('ended', this._handleAudioEnded);
+      }
+    }, {
       key: "componentDidMount",
       value: function componentDidMount() {
         this.alignImages();
+        this.addCustomAudioButtonControls();
       }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate() {
         this.alignImages();
       }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.removeCustomAudioButtonListeners();
+      }
     }, {
       key: "alignImages",
       value: function alignImages() {
@@ -126263,7 +126339,7 @@ const require$$11$4 = _dll_prop_types;
     }, {
       key: "render",
       value: function render() {
-        var _this$props = this.props, prompt = _this$props.prompt, classes = _this$props.classes, tagName = _this$props.tagName, className = _this$props.className, onClick = _this$props.onClick, defaultClassName = _this$props.defaultClassName;
+        var _this$props2 = this.props, prompt = _this$props2.prompt, classes = _this$props2.classes, tagName = _this$props2.tagName, className = _this$props2.className, onClick = _this$props2.onClick, defaultClassName = _this$props2.defaultClassName;
         var CustomTag = tagName || 'div';
         var legendClass = tagName === 'legend' ? 'legend' : '';
         var customClasses = ("").concat(classes.promptTable, " ").concat(classes[className] || '', " ").concat(defaultClassName || '', " ").concat(classes[legendClass] || '');
@@ -126287,7 +126363,11 @@ const require$$11$4 = _dll_prop_types;
     className: _propTypes["default"].string,
     onClick: _propTypes["default"].func,
     defaultClassName: _propTypes["default"].string,
-    autoplayAudioEnabled: _propTypes["default"].bool
+    autoplayAudioEnabled: _propTypes["default"].bool,
+    customAudioButton: {
+      playImage: _propTypes["default"].string,
+      pauseImage: _propTypes["default"].string
+    }
   });
   (0, _defineProperty2["default"])(PreviewPrompt, "defaultProps", {
     onClick: function onClick() {}

package/module/element.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.4/module/index.js";
-import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.10.4/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.5/module/index.js";
+import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.10.5/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -142322,7 +142322,7 @@ const require$$11$r = _dll_prop_types;
       }
       _this = _super.call.apply(_super, [this].concat(args));
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "parsedText", function (text) {
-        var autoplayAudioEnabled = _this.props.autoplayAudioEnabled;
+        var customAudioButton = _this.props.customAudioButton;
         var div = document.createElement('div');
         div.innerHTML = text;
         var audio = div.querySelector('audio');
@@ -142331,25 +142331,101 @@ const require$$11$r = _dll_prop_types;
           source.setAttribute('type', 'audio/mp3');
           source.setAttribute('src', audio.getAttribute('src'));
           audio.removeAttribute('src');
-          if (autoplayAudioEnabled) {
-            audio.setAttribute('autoplay', 'autoplay');
-          }
+          audio.setAttribute('id', 'pie-prompt-audio-player');
           audio.appendChild(source);
+          if (customAudioButton) {
+            audio.style.display = 'none';
+            var playButton = document.createElement('div');
+            playButton.id = 'play-audio-button';
+            Object.assign(playButton.style, {
+              cursor: 'pointer',
+              display: 'block',
+              width: '128px',
+              height: '128px',
+              backgroundImage: ("url(").concat(customAudioButton.pauseImage, ")"),
+              backgroundSize: 'cover',
+              borderRadius: '50%',
+              border: '1px solid #326295'
+            });
+            audio.parentNode.insertBefore(playButton, audio);
+          }
         }
         return div.innerHTML;
       });
       return _this;
     }
     (0, _createClass2["default"])(PreviewPrompt, [{
+      key: "addCustomAudioButtonControls",
+      value: function addCustomAudioButtonControls() {
+        var _this$props = this.props, autoplayAudioEnabled = _this$props.autoplayAudioEnabled, customAudioButton = _this$props.customAudioButton;
+        var playButton = document.getElementById('play-audio-button');
+        var audio = document.getElementById('pie-prompt-audio-player');
+        if (autoplayAudioEnabled && audio) {
+          audio.play().then(function () {
+            if (playButton && customAudioButton) {
+              audio.addEventListener('ended', handleAudioEnded);
+            }
+          })["catch"](function (error) {
+            console.error('Error playing audio', error);
+          });
+        }
+        if (!playButton || !audio || !customAudioButton) return;
+        var handlePlayClick = function handlePlayClick() {
+          if (!audio.paused) return;
+          if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;
+          audio.play();
+        };
+        var handleAudioEnded = function handleAudioEnded() {
+          playButton.style.backgroundImage = ("url(").concat(customAudioButton.playImage, ")");
+        };
+        var handleAudioPlay = function handleAudioPlay() {
+          Object.assign(playButton.style, {
+            backgroundImage: ("url(").concat(customAudioButton.pauseImage, ")"),
+            border: '1px solid #ccc'
+          });
+        };
+        var handleAudioPause = function handleAudioPause() {
+          Object.assign(playButton.style, {
+            backgroundImage: ("url(").concat(customAudioButton.playImage, ")"),
+            border: '1px solid #326295'
+          });
+        };
+        playButton.addEventListener('click', handlePlayClick);
+        audio.addEventListener('play', handleAudioPlay);
+        audio.addEventListener('pause', handleAudioPause);
+        audio.addEventListener('ended', handleAudioEnded);
+        this._handlePlayClick = handlePlayClick;
+        this._handleAudioPlay = handleAudioPlay;
+        this._handleAudioPause = handleAudioPause;
+        this._handleAudioEnded = handleAudioEnded;
+      }
+    }, {
+      key: "removeCustomAudioButtonListeners",
+      value: function removeCustomAudioButtonListeners() {
+        var playButton = document.getElementById('play-audio-button');
+        var audio = document.querySelector('audio');
+        if (!playButton || !audio) return;
+        playButton.removeEventListener('click', this._handlePlayClick);
+        audio.removeEventListener('play', this._handleAudioPlay);
+        audio.removeEventListener('pause', this._handleAudioPause);
+        audio.removeEventListener('ended', this._handleAudioEnded);
+      }
+    }, {
       key: "componentDidMount",
       value: function componentDidMount() {
         this.alignImages();
+        this.addCustomAudioButtonControls();
       }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate() {
         this.alignImages();
       }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.removeCustomAudioButtonListeners();
+      }
     }, {
       key: "alignImages",
       value: function alignImages() {
@@ -142384,7 +142460,7 @@ const require$$11$r = _dll_prop_types;
     }, {
       key: "render",
       value: function render() {
-        var _this$props = this.props, prompt = _this$props.prompt, classes = _this$props.classes, tagName = _this$props.tagName, className = _this$props.className, onClick = _this$props.onClick, defaultClassName = _this$props.defaultClassName;
+        var _this$props2 = this.props, prompt = _this$props2.prompt, classes = _this$props2.classes, tagName = _this$props2.tagName, className = _this$props2.className, onClick = _this$props2.onClick, defaultClassName = _this$props2.defaultClassName;
         var CustomTag = tagName || 'div';
         var legendClass = tagName === 'legend' ? 'legend' : '';
         var customClasses = ("").concat(classes.promptTable, " ").concat(classes[className] || '', " ").concat(defaultClassName || '', " ").concat(classes[legendClass] || '');
@@ -142408,7 +142484,11 @@ const require$$11$r = _dll_prop_types;
     className: _propTypes["default"].string,
     onClick: _propTypes["default"].func,
     defaultClassName: _propTypes["default"].string,
-    autoplayAudioEnabled: _propTypes["default"].bool
+    autoplayAudioEnabled: _propTypes["default"].bool,
+    customAudioButton: {
+      playImage: _propTypes["default"].string,
+      pauseImage: _propTypes["default"].string
+    }
   });
   (0, _defineProperty2["default"])(PreviewPrompt, "defaultProps", {
     onClick: function onClick() {}

package/module/manifest.json

@@ -4,11 +4,11 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "3.3.4"
+      "version": "3.3.5"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.10.4"
+      "version": "5.10.5"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.4/module/index.js";
-import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.10.4/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.3.5/module/index.js";
+import {_dll_pie_lib__pie_toolbox_math_input, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@5.10.5/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
     e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
@@ -142285,7 +142285,7 @@ const require$$11$r = _dll_prop_types;
       }
       _this = _super.call.apply(_super, [this].concat(args));
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "parsedText", function (text) {
-        var autoplayAudioEnabled = _this.props.autoplayAudioEnabled;
+        var customAudioButton = _this.props.customAudioButton;
         var div = document.createElement('div');
         div.innerHTML = text;
         var audio = div.querySelector('audio');
@@ -142294,25 +142294,101 @@ const require$$11$r = _dll_prop_types;
           source.setAttribute('type', 'audio/mp3');
           source.setAttribute('src', audio.getAttribute('src'));
           audio.removeAttribute('src');
-          if (autoplayAudioEnabled) {
-            audio.setAttribute('autoplay', 'autoplay');
-          }
+          audio.setAttribute('id', 'pie-prompt-audio-player');
           audio.appendChild(source);
+          if (customAudioButton) {
+            audio.style.display = 'none';
+            var playButton = document.createElement('div');
+            playButton.id = 'play-audio-button';
+            Object.assign(playButton.style, {
+              cursor: 'pointer',
+              display: 'block',
+              width: '128px',
+              height: '128px',
+              backgroundImage: ("url(").concat(customAudioButton.pauseImage, ")"),
+              backgroundSize: 'cover',
+              borderRadius: '50%',
+              border: '1px solid #326295'
+            });
+            audio.parentNode.insertBefore(playButton, audio);
+          }
         }
         return div.innerHTML;
       });
       return _this;
     }
     (0, _createClass2["default"])(PreviewPrompt, [{
+      key: "addCustomAudioButtonControls",
+      value: function addCustomAudioButtonControls() {
+        var _this$props = this.props, autoplayAudioEnabled = _this$props.autoplayAudioEnabled, customAudioButton = _this$props.customAudioButton;
+        var playButton = document.getElementById('play-audio-button');
+        var audio = document.getElementById('pie-prompt-audio-player');
+        if (autoplayAudioEnabled && audio) {
+          audio.play().then(function () {
+            if (playButton && customAudioButton) {
+              audio.addEventListener('ended', handleAudioEnded);
+            }
+          })["catch"](function (error) {
+            console.error('Error playing audio', error);
+          });
+        }
+        if (!playButton || !audio || !customAudioButton) return;
+        var handlePlayClick = function handlePlayClick() {
+          if (!audio.paused) return;
+          if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;
+          audio.play();
+        };
+        var handleAudioEnded = function handleAudioEnded() {
+          playButton.style.backgroundImage = ("url(").concat(customAudioButton.playImage, ")");
+        };
+        var handleAudioPlay = function handleAudioPlay() {
+          Object.assign(playButton.style, {
+            backgroundImage: ("url(").concat(customAudioButton.pauseImage, ")"),
+            border: '1px solid #ccc'
+          });
+        };
+        var handleAudioPause = function handleAudioPause() {
+          Object.assign(playButton.style, {
+            backgroundImage: ("url(").concat(customAudioButton.playImage, ")"),
+            border: '1px solid #326295'
+          });
+        };
+        playButton.addEventListener('click', handlePlayClick);
+        audio.addEventListener('play', handleAudioPlay);
+        audio.addEventListener('pause', handleAudioPause);
+        audio.addEventListener('ended', handleAudioEnded);
+        this._handlePlayClick = handlePlayClick;
+        this._handleAudioPlay = handleAudioPlay;
+        this._handleAudioPause = handleAudioPause;
+        this._handleAudioEnded = handleAudioEnded;
+      }
+    }, {
+      key: "removeCustomAudioButtonListeners",
+      value: function removeCustomAudioButtonListeners() {
+        var playButton = document.getElementById('play-audio-button');
+        var audio = document.querySelector('audio');
+        if (!playButton || !audio) return;
+        playButton.removeEventListener('click', this._handlePlayClick);
+        audio.removeEventListener('play', this._handleAudioPlay);
+        audio.removeEventListener('pause', this._handleAudioPause);
+        audio.removeEventListener('ended', this._handleAudioEnded);
+      }
+    }, {
       key: "componentDidMount",
       value: function componentDidMount() {
         this.alignImages();
+        this.addCustomAudioButtonControls();
       }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate() {
         this.alignImages();
       }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.removeCustomAudioButtonListeners();
+      }
     }, {
       key: "alignImages",
       value: function alignImages() {
@@ -142347,7 +142423,7 @@ const require$$11$r = _dll_prop_types;
     }, {
       key: "render",
       value: function render() {
-        var _this$props = this.props, prompt = _this$props.prompt, classes = _this$props.classes, tagName = _this$props.tagName, className = _this$props.className, onClick = _this$props.onClick, defaultClassName = _this$props.defaultClassName;
+        var _this$props2 = this.props, prompt = _this$props2.prompt, classes = _this$props2.classes, tagName = _this$props2.tagName, className = _this$props2.className, onClick = _this$props2.onClick, defaultClassName = _this$props2.defaultClassName;
         var CustomTag = tagName || 'div';
         var legendClass = tagName === 'legend' ? 'legend' : '';
         var customClasses = ("").concat(classes.promptTable, " ").concat(classes[className] || '', " ").concat(defaultClassName || '', " ").concat(classes[legendClass] || '');
@@ -142371,7 +142447,11 @@ const require$$11$r = _dll_prop_types;
     className: _propTypes["default"].string,
     onClick: _propTypes["default"].func,
     defaultClassName: _propTypes["default"].string,
-    autoplayAudioEnabled: _propTypes["default"].bool
+    autoplayAudioEnabled: _propTypes["default"].bool,
+    customAudioButton: {
+      playImage: _propTypes["default"].string,
+      pauseImage: _propTypes["default"].string
+    }
   });
   (0, _defineProperty2["default"])(PreviewPrompt, "defaultProps", {
     onClick: function onClick() {}

package/package.json

@@ -4,19 +4,19 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "3.4.6-next.2+959a39e31",
+  "version": "3.4.6-next.6+843584110",
   "description": "",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.9.5",
+    "@pie-lib/pie-toolbox": "2.10.0",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "959a39e31af790462a237b9e533f66cee138c1ba",
+  "gitHead": "843584110d234c09778612f3c9607ec3c7531900",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },