@pie-element/math-templated 3.4.6-next.4 → 3.4.6

package/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.
 
+## [3.4.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated@3.4.5...@pie-element/math-templated@3.4.6) (2025-03-03)
+
+
+### Bug Fixes
+
+* update pie-lib pie-toolbox PD-4795 ([c0bc482](https://github.com/pie-framework/pie-elements/commit/c0bc48285a67aaaf6f4b81057ced62bc57ee978d))
+
+
+
+
+
 ## [3.4.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated@3.4.4...@pie-element/math-templated@3.4.5) (2025-02-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.
 
+## [2.3.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-configure@2.3.5...@pie-element/math-templated-configure@2.3.6) (2025-03-03)
+
+
+### Bug Fixes
+
+* update pie-lib pie-toolbox PD-4795 ([c0bc482](https://github.com/pie-framework/pie-elements/commit/c0bc48285a67aaaf6f4b81057ced62bc57ee978d))
+
+
+
+
+
 ## [2.3.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-configure@2.3.4...@pie-element/math-templated-configure@2.3.5) (2025-02-27)
 
 

package/configure/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/math-templated-configure",
   "private": true,
-  "version": "2.3.5",
+  "version": "2.3.6",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "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/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.
 
+## [3.1.17](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-controller@3.1.16...@pie-element/math-templated-controller@3.1.17) (2025-03-03)
+
+
+### Bug Fixes
+
+* update pie-lib pie-toolbox PD-4795 ([c0bc482](https://github.com/pie-framework/pie-elements/commit/c0bc48285a67aaaf6f4b81057ced62bc57ee978d))
+
+
+
+
+
 ## [3.1.16](https://github.com/pie-framework/pie-elements/compare/@pie-element/math-templated-controller@3.1.15...@pie-element/math-templated-controller@3.1.16) (2025-02-27)
 
 

package/controller/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/math-templated-controller",
   "private": true,
-  "version": "3.1.16",
+  "version": "3.1.17",
   "description": "",
   "main": "lib/index.js",
   "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.4+dd3fde7ef",
+  "version": "3.4.6",
   "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": "dd3fde7ef95879ed17976bb057963dae43a601df",
+  "gitHead": "1abc2ce54f9ccb41022d4caa592a084a6ebb235c",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },