@pie-lib/render-ui 7.0.1 → 7.0.3

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@7.0.2...@pie-lib/render-ui@7.0.3) (2026-09-22)
+
+### Bug Fixes
+
+- **render-ui:** let the custom audio button start playback when autoplay is off PIE-1068 ([94712ee](https://github.com/pie-framework/pie-lib/commit/94712ee98252dec2ffd45b44b1cc86ba430a51b2))
+
+## [7.0.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@7.0.1...@pie-lib/render-ui@7.0.2) (2026-09-02)
+
+**Note:** Version bump only for package @pie-lib/render-ui
+
 ## [7.0.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/render-ui@7.0.0...@pie-lib/render-ui@7.0.1) (2026-08-26)
 
 ### Bug Fixes

package/lib/preview-prompt.js

@@ -105,7 +105,9 @@ var PreviewPrompt = exports.PreviewPrompt = /*#__PURE__*/function (_Component) {
     _this = _callSuper(this, PreviewPrompt, [].concat(args));
     (0, _defineProperty2["default"])(_this, "promptRef", /*#__PURE__*/_react["default"].createRef());
     (0, _defineProperty2["default"])(_this, "parsedText", function (text) {
-      var customAudioButton = _this.props.customAudioButton;
+      var _this$props = _this.props,
+        autoplayAudioEnabled = _this$props.autoplayAudioEnabled,
+        customAudioButton = _this$props.customAudioButton;
       var div = document.createElement('div');
       div.innerHTML = text;
       var audio = div.querySelector('audio');
@@ -125,7 +127,10 @@ var PreviewPrompt = exports.PreviewPrompt = /*#__PURE__*/function (_Component) {
             display: 'block',
             width: '128px',
             height: '128px',
-            backgroundImage: "url(".concat(customAudioButton.pauseImage, ")"),
+            // pauseImage is the playing state. Only autoplay starts in it - with
+            // autoplay off the audio is paused, so the button has to show
+            // playImage or it advertises a state the audio is not in.
+            backgroundImage: "url(".concat(autoplayAudioEnabled ? customAudioButton.pauseImage : customAudioButton.playImage, ")"),
             backgroundSize: 'cover',
             borderRadius: '50%',
             border: '1px solid #326295'
@@ -141,9 +146,9 @@ var PreviewPrompt = exports.PreviewPrompt = /*#__PURE__*/function (_Component) {
   return (0, _createClass2["default"])(PreviewPrompt, [{
     key: "addCustomAudioButtonControls",
     value: function addCustomAudioButtonControls() {
-      var _this$props = this.props,
-        autoplayAudioEnabled = _this$props.autoplayAudioEnabled,
-        customAudioButton = _this$props.customAudioButton;
+      var _this$props2 = this.props,
+        autoplayAudioEnabled = _this$props2.autoplayAudioEnabled,
+        customAudioButton = _this$props2.customAudioButton;
       var playButton = document.getElementById('play-audio-button');
       var audio = document.getElementById('pie-prompt-audio-player');
       if (autoplayAudioEnabled && audio) {
@@ -152,6 +157,12 @@ var PreviewPrompt = exports.PreviewPrompt = /*#__PURE__*/function (_Component) {
             audio.addEventListener('ended', handleAudioEnded);
           }
         })["catch"](function (error) {
+          // Autoplay blocked (Safari/Firefox until the page has been
+          // interacted with). The audio is paused, so drop the button back to
+          // the idle image - clicking it is now the only way to start.
+          if (playButton && customAudioButton) {
+            playButton.style.backgroundImage = "url(".concat(customAudioButton.playImage, ")");
+          }
           console.error('Error playing audio', error);
         });
       }
@@ -159,7 +170,6 @@ var PreviewPrompt = exports.PreviewPrompt = /*#__PURE__*/function (_Component) {
       var handlePlayClick = function handlePlayClick() {
         // if already playing, don't play again
         if (!audio.paused) return;
-        if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;
         audio.play();
       };
       var handleAudioEnded = function handleAudioEnded() {
@@ -275,12 +285,12 @@ var PreviewPrompt = exports.PreviewPrompt = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        prompt = _this$props2.prompt,
-        tagName = _this$props2.tagName,
-        className = _this$props2.className,
-        onClick = _this$props2.onClick,
-        defaultClassName = _this$props2.defaultClassName;
+      var _this$props3 = this.props,
+        prompt = _this$props3.prompt,
+        tagName = _this$props3.tagName,
+        className = _this$props3.className,
+        onClick = _this$props3.onClick,
+        defaultClassName = _this$props3.defaultClassName;
       // legend tag was added once with accessibility tasks, we need extra style to make it work with images alignment
       var legendClass = tagName === 'legend' ? 'legend' : '';
       var customClasses = "".concat(className || '', " ").concat(defaultClassName || '', " ").concat(legendClass, " ").concat(PROMPT_CLASS).trim();

package/lib/preview-prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-prompt.js","names":["_react","_interopRequireWildcard","require","_styles","_propTypes","_interopRequireDefault","color","_mathRendering","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_createForOfIteratorHelper","Symbol","iterator","Array","isArray","_unsupportedIterableToArray","length","_n","F","s","done","value","TypeError","a","u","next","_arrayLikeToArray","toString","slice","constructor","name","from","test","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","apply","Boolean","prototype","valueOf","StyledPromptContainer","styled","_ref","theme","tagName","borderCollapse","borderStyle","borderColor","tableGrid","backgroundColor","tableStripe","padding","textAlign","verticalAlign","text","width","fontSize","paddingLeft","spacing","paddingBottom","concat","display","flexDirection","cursor","margin","NEWLINE_BLOCK_REGEX","NEWLINE_LATEX","PROMPT_CLASS","PreviewPrompt","exports","_Component","_this","_classCallCheck2","_len","arguments","args","_key","_defineProperty2","React","createRef","customAudioButton","props","div","document","createElement","innerHTML","audio","querySelector","source","setAttribute","getAttribute","removeAttribute","appendChild","style","playButton","id","assign","height","backgroundImage","pauseImage","backgroundSize","borderRadius","border","parentNode","insertBefore","_inherits2","_createClass2","key","addCustomAudioButtonControls","_this$props","autoplayAudioEnabled","getElementById","play","then","addEventListener","handleAudioEnded","error","console","handlePlayClick","paused","includes","playImage","handleAudioPlay","handleAudioPause","_handlePlayClick","_handleAudioPlay","_handleAudioPause","_handleAudioEnded","removeCustomAudioButtonListeners","removeEventListener","componentDidMount","alignImages","setupMathRendering","componentDidUpdate","prevProps","prompt","renderMathContent","componentWillUnmount","container","promptRef","current","renderMath","previewPrompt","images","getElementsByTagName","_iterator","_step","image","attributes","alignment","justifyContent","parentElement","copyImage","cloneNode","replaceChild","err","render","_this$props2","className","onClick","defaultClassName","legendClass","customClasses","trim","as","ref","dangerouslySetInnerHTML","__html","parsedText","replace","Component","PropTypes","string","func","bool","_default"],"sources":["../src/preview-prompt.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport * as color from './color';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst StyledPromptContainer = styled('div')(({ theme, tagName }) => ({\n  // presentation tables should not have any custom style\n  // Base promptTable styles\n  '&:not(.MathJax) > table:not([role=\"presentation\"])': {\n    borderCollapse: 'collapse',\n  },\n  /*\n   * The editor writes border=\"1\", and the UA answers it with `border-style: outset`\n   * on the table and `inset` on the cells -- which browsers paint as synthesized 3D\n   * shades rather than the colour the border resolves to, so the grid comes out grey\n   * on every scheme (1.19:1 on black-on-violet). `solid` is what removes the\n   * shading; without it, setting the colour has no effect.\n   */\n  '&:not(.MathJax) table[border]:not([role=\"presentation\"]), &:not(.MathJax) table[border]:not([role=\"presentation\"]) td, &:not(.MathJax) table[border]:not([role=\"presentation\"]) th':\n    {\n      borderStyle: 'solid',\n      borderColor: color.tableGrid(),\n    },\n  // Apply vertical striping when first column is a header (th) and NOT mixed with td.\n  // Ink stays at 5.44:1 or better on tableStripe in every scheme, so the cell inherits\n  // its text colour rather than pinning the `color: black` this used to carry.\n  '&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)':\n    {\n      backgroundColor: color.tableStripe(),\n    },\n  // Apply horizontal striping for tables where first element is a data cell (td)\n  '&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > td:first-child) tbody tr:nth-child(even) td': {\n    backgroundColor: color.tableStripe(),\n  },\n  // align table content to left as per STAR requirement PD-3687\n  '&:not(.MathJax) table:not([role=\"presentation\"]) td, &:not(.MathJax) table:not([role=\"presentation\"]) th': {\n    padding: '.6em 1em',\n    textAlign: 'left',\n  },\n  // added this to fix alignment of text in prompt imported from studio (PD-3423)\n  '&:not(.MathJax) > table td > p.kds-indent': {\n    textAlign: 'initial',\n  },\n\n  // Conditional styles based on class names\n  '&.prompt': {\n    verticalAlign: 'middle',\n    color: color.text(),\n  },\n  '&.legend': {\n    width: '100%',\n    fontSize: 'inherit !important',\n  },\n  '&.rationale': {\n    paddingLeft: theme.spacing(4),\n    paddingBottom: theme.spacing(1),\n  },\n  '&.prompt-label': {\n    color: `${color.text()} !important`,\n    display: 'flex',\n    flexDirection: 'column',\n    verticalAlign: 'middle',\n    cursor: 'pointer',\n    '& > p': {\n      margin: '0 0 0 0 !important',\n    },\n  },\n}));\n\n//Used these below to replace \\\\embed{newLine} with \\\\newline from prompt which will get parsed in MathJax\nconst NEWLINE_BLOCK_REGEX = /\\\\embed\\{newLine\\}\\[\\]/g;\nconst NEWLINE_LATEX = '\\\\newline ';\n\n// stable hook for 'is this node inside a prompt' checks - a class rather than an id,\n// so it stays valid when a page renders more than one prompt\nconst PROMPT_CLASS = 'preview-prompt';\n\nexport class PreviewPrompt extends Component {\n  static propTypes = {\n    prompt: PropTypes.string,\n    tagName: PropTypes.string,\n    className: PropTypes.string,\n    onClick: PropTypes.func,\n    defaultClassName: PropTypes.string,\n    autoplayAudioEnabled: PropTypes.bool,\n    customAudioButton: {\n      playImage: PropTypes.string,\n      pauseImage: PropTypes.string,\n    },\n  };\n\n  static defaultProps = {\n    onClick: () => {},\n  };\n\n  promptRef = React.createRef();\n\n  parsedText = (text) => {\n    const { customAudioButton } = this.props;\n    const div = document.createElement('div');\n    div.innerHTML = text;\n\n    const audio = div.querySelector('audio');\n    if (audio) {\n      const source = document.createElement('source');\n\n      source.setAttribute('type', 'audio/mp3');\n      source.setAttribute('src', audio.getAttribute('src'));\n\n      audio.removeAttribute('src');\n      audio.setAttribute('id', 'pie-prompt-audio-player');\n\n      audio.appendChild(source);\n\n      if (customAudioButton) {\n        audio.style.display = 'none';\n\n        const playButton = document.createElement('div');\n        playButton.id = 'play-audio-button';\n\n        Object.assign(playButton.style, {\n          cursor: 'pointer',\n          display: 'block',\n          width: '128px',\n          height: '128px',\n          backgroundImage: `url(${customAudioButton.pauseImage})`,\n          backgroundSize: 'cover',\n          borderRadius: '50%',\n          border: '1px solid #326295',\n        });\n\n        audio.parentNode.insertBefore(playButton, audio);\n      }\n    }\n\n    return div.innerHTML;\n  };\n\n  addCustomAudioButtonControls() {\n    const { autoplayAudioEnabled, customAudioButton } = this.props;\n    const playButton = document.getElementById('play-audio-button');\n    const audio = document.getElementById('pie-prompt-audio-player');\n\n    if (autoplayAudioEnabled && audio) {\n      audio\n        .play()\n        .then(() => {\n          if (playButton && customAudioButton) {\n            audio.addEventListener('ended', handleAudioEnded);\n          }\n        })\n        .catch((error) => {\n          console.error('Error playing audio', error);\n        });\n    }\n\n    if (!playButton || !audio || !customAudioButton) return;\n\n    const handlePlayClick = () => {\n      // if already playing, don't play again\n      if (!audio.paused) return;\n      if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;\n\n      audio.play();\n    };\n\n    const handleAudioEnded = () => {\n      playButton.style.backgroundImage = `url(${customAudioButton.playImage})`;\n    };\n\n    const handleAudioPlay = () => {\n      Object.assign(playButton.style, {\n        backgroundImage: `url(${customAudioButton.pauseImage})`,\n        border: '1px solid #ccc',\n      });\n    };\n\n    const handleAudioPause = () => {\n      Object.assign(playButton.style, {\n        backgroundImage: `url(${customAudioButton.playImage})`,\n        border: '1px solid #326295',\n      });\n    };\n\n    playButton.addEventListener('click', handlePlayClick);\n    audio.addEventListener('play', handleAudioPlay);\n    audio.addEventListener('pause', handleAudioPause);\n    audio.addEventListener('ended', handleAudioEnded);\n\n    // store event handler references so they can be removed later\n    this._handlePlayClick = handlePlayClick;\n    this._handleAudioPlay = handleAudioPlay;\n    this._handleAudioPause = handleAudioPause;\n    this._handleAudioEnded = handleAudioEnded;\n  }\n\n  removeCustomAudioButtonListeners() {\n    const playButton = document.getElementById('play-audio-button');\n    const audio = document.querySelector('audio');\n\n    if (!playButton || !audio) return;\n\n    // remove event listeners using stored references\n    playButton.removeEventListener('click', this._handlePlayClick);\n    audio.removeEventListener('play', this._handleAudioPlay);\n    audio.removeEventListener('pause', this._handleAudioPause);\n    audio.removeEventListener('ended', this._handleAudioEnded);\n  }\n\n  componentDidMount() {\n    this.alignImages();\n    this.addCustomAudioButtonControls();\n    this.setupMathRendering();\n  }\n\n  componentDidUpdate(prevProps) {\n    this.alignImages();\n\n    if (prevProps.prompt !== this.props.prompt) {\n      this.renderMathContent();\n    }\n  }\n\n  componentWillUnmount() {\n    this.removeCustomAudioButtonListeners();\n  }\n\n  setupMathRendering() {\n    this.renderMathContent();\n  }\n\n  renderMathContent() {\n    const container = this.promptRef.current;\n    if (container && typeof renderMath === 'function') {\n      renderMath(container);\n    }\n  }\n\n  alignImages() {\n    const previewPrompt = this.promptRef.current;\n\n    if (!previewPrompt) {\n      return;\n    }\n\n    const images = previewPrompt.getElementsByTagName('img');\n\n    if (images && images.length) {\n      for (let image of images) {\n        if (image.attributes && image.attributes.alignment && image.attributes.alignment.value) {\n          const alignment = image.attributes.alignment.value;\n          const justifyContent =\n            alignment === 'center' ? 'center' : alignment === 'right' ? 'flex-end' : 'flex-start';\n\n          const parentNode = image.parentElement;\n\n          if (\n            parentNode.tagName === 'DIV' &&\n            parentNode.style.display === 'flex' &&\n            parentNode.style.width === '100%'\n          ) {\n            parentNode.style.justifyContent = justifyContent;\n          } else {\n            const div = document.createElement('div');\n            div.style.display = 'flex';\n            div.style.width = '100%';\n            div.style.justifyContent = justifyContent;\n\n            const copyImage = image.cloneNode(true);\n            div.appendChild(copyImage);\n            parentNode.replaceChild(div, image);\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    const { prompt, tagName, className, onClick, defaultClassName } = this.props;\n    // legend tag was added once with accessibility tasks, we need extra style to make it work with images alignment\n    const legendClass = tagName === 'legend' ? 'legend' : '';\n    const customClasses = `${className || ''} ${defaultClassName || ''} ${legendClass} ${PROMPT_CLASS}`.trim();\n\n    return (\n      <StyledPromptContainer\n        as={tagName || 'div'}\n        ref={this.promptRef}\n        onClick={onClick}\n        className={customClasses}\n        tagName={tagName}\n        dangerouslySetInnerHTML={{\n          __html: this.parsedText(prompt || '').replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX),\n        }}\n      />\n    );\n  }\n}\n\nexport default PreviewPrompt;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"preview-prompt.js","names":["_react","_interopRequireWildcard","require","_styles","_propTypes","_interopRequireDefault","color","_mathRendering","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_createForOfIteratorHelper","Symbol","iterator","Array","isArray","_unsupportedIterableToArray","length","_n","F","s","done","value","TypeError","a","u","next","_arrayLikeToArray","toString","slice","constructor","name","from","test","_callSuper","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct","Reflect","construct","apply","Boolean","prototype","valueOf","StyledPromptContainer","styled","_ref","theme","tagName","borderCollapse","borderStyle","borderColor","tableGrid","backgroundColor","tableStripe","padding","textAlign","verticalAlign","text","width","fontSize","paddingLeft","spacing","paddingBottom","concat","display","flexDirection","cursor","margin","NEWLINE_BLOCK_REGEX","NEWLINE_LATEX","PROMPT_CLASS","PreviewPrompt","exports","_Component","_this","_classCallCheck2","_len","arguments","args","_key","_defineProperty2","React","createRef","_this$props","props","autoplayAudioEnabled","customAudioButton","div","document","createElement","innerHTML","audio","querySelector","source","setAttribute","getAttribute","removeAttribute","appendChild","style","playButton","id","assign","height","backgroundImage","pauseImage","playImage","backgroundSize","borderRadius","border","parentNode","insertBefore","_inherits2","_createClass2","key","addCustomAudioButtonControls","_this$props2","getElementById","play","then","addEventListener","handleAudioEnded","error","console","handlePlayClick","paused","handleAudioPlay","handleAudioPause","_handlePlayClick","_handleAudioPlay","_handleAudioPause","_handleAudioEnded","removeCustomAudioButtonListeners","removeEventListener","componentDidMount","alignImages","setupMathRendering","componentDidUpdate","prevProps","prompt","renderMathContent","componentWillUnmount","container","promptRef","current","renderMath","previewPrompt","images","getElementsByTagName","_iterator","_step","image","attributes","alignment","justifyContent","parentElement","copyImage","cloneNode","replaceChild","err","render","_this$props3","className","onClick","defaultClassName","legendClass","customClasses","trim","as","ref","dangerouslySetInnerHTML","__html","parsedText","replace","Component","PropTypes","string","func","bool","_default"],"sources":["../src/preview-prompt.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport * as color from './color';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nconst StyledPromptContainer = styled('div')(({ theme, tagName }) => ({\n  // presentation tables should not have any custom style\n  // Base promptTable styles\n  '&:not(.MathJax) > table:not([role=\"presentation\"])': {\n    borderCollapse: 'collapse',\n  },\n  /*\n   * The editor writes border=\"1\", and the UA answers it with `border-style: outset`\n   * on the table and `inset` on the cells -- which browsers paint as synthesized 3D\n   * shades rather than the colour the border resolves to, so the grid comes out grey\n   * on every scheme (1.19:1 on black-on-violet). `solid` is what removes the\n   * shading; without it, setting the colour has no effect.\n   */\n  '&:not(.MathJax) table[border]:not([role=\"presentation\"]), &:not(.MathJax) table[border]:not([role=\"presentation\"]) td, &:not(.MathJax) table[border]:not([role=\"presentation\"]) th':\n    {\n      borderStyle: 'solid',\n      borderColor: color.tableGrid(),\n    },\n  // Apply vertical striping when first column is a header (th) and NOT mixed with td.\n  // Ink stays at 5.44:1 or better on tableStripe in every scheme, so the cell inherits\n  // its text colour rather than pinning the `color: black` this used to carry.\n  '&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)':\n    {\n      backgroundColor: color.tableStripe(),\n    },\n  // Apply horizontal striping for tables where first element is a data cell (td)\n  '&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > td:first-child) tbody tr:nth-child(even) td': {\n    backgroundColor: color.tableStripe(),\n  },\n  // align table content to left as per STAR requirement PD-3687\n  '&:not(.MathJax) table:not([role=\"presentation\"]) td, &:not(.MathJax) table:not([role=\"presentation\"]) th': {\n    padding: '.6em 1em',\n    textAlign: 'left',\n  },\n  // added this to fix alignment of text in prompt imported from studio (PD-3423)\n  '&:not(.MathJax) > table td > p.kds-indent': {\n    textAlign: 'initial',\n  },\n\n  // Conditional styles based on class names\n  '&.prompt': {\n    verticalAlign: 'middle',\n    color: color.text(),\n  },\n  '&.legend': {\n    width: '100%',\n    fontSize: 'inherit !important',\n  },\n  '&.rationale': {\n    paddingLeft: theme.spacing(4),\n    paddingBottom: theme.spacing(1),\n  },\n  '&.prompt-label': {\n    color: `${color.text()} !important`,\n    display: 'flex',\n    flexDirection: 'column',\n    verticalAlign: 'middle',\n    cursor: 'pointer',\n    '& > p': {\n      margin: '0 0 0 0 !important',\n    },\n  },\n}));\n\n//Used these below to replace \\\\embed{newLine} with \\\\newline from prompt which will get parsed in MathJax\nconst NEWLINE_BLOCK_REGEX = /\\\\embed\\{newLine\\}\\[\\]/g;\nconst NEWLINE_LATEX = '\\\\newline ';\n\n// stable hook for 'is this node inside a prompt' checks - a class rather than an id,\n// so it stays valid when a page renders more than one prompt\nconst PROMPT_CLASS = 'preview-prompt';\n\nexport class PreviewPrompt extends Component {\n  static propTypes = {\n    prompt: PropTypes.string,\n    tagName: PropTypes.string,\n    className: PropTypes.string,\n    onClick: PropTypes.func,\n    defaultClassName: PropTypes.string,\n    autoplayAudioEnabled: PropTypes.bool,\n    customAudioButton: {\n      playImage: PropTypes.string,\n      pauseImage: PropTypes.string,\n    },\n  };\n\n  static defaultProps = {\n    onClick: () => {},\n  };\n\n  promptRef = React.createRef();\n\n  parsedText = (text) => {\n    const { autoplayAudioEnabled, customAudioButton } = this.props;\n    const div = document.createElement('div');\n    div.innerHTML = text;\n\n    const audio = div.querySelector('audio');\n    if (audio) {\n      const source = document.createElement('source');\n\n      source.setAttribute('type', 'audio/mp3');\n      source.setAttribute('src', audio.getAttribute('src'));\n\n      audio.removeAttribute('src');\n      audio.setAttribute('id', 'pie-prompt-audio-player');\n\n      audio.appendChild(source);\n\n      if (customAudioButton) {\n        audio.style.display = 'none';\n\n        const playButton = document.createElement('div');\n        playButton.id = 'play-audio-button';\n\n        Object.assign(playButton.style, {\n          cursor: 'pointer',\n          display: 'block',\n          width: '128px',\n          height: '128px',\n          // pauseImage is the playing state. Only autoplay starts in it - with\n          // autoplay off the audio is paused, so the button has to show\n          // playImage or it advertises a state the audio is not in.\n          backgroundImage: `url(${autoplayAudioEnabled ? customAudioButton.pauseImage : customAudioButton.playImage})`,\n          backgroundSize: 'cover',\n          borderRadius: '50%',\n          border: '1px solid #326295',\n        });\n\n        audio.parentNode.insertBefore(playButton, audio);\n      }\n    }\n\n    return div.innerHTML;\n  };\n\n  addCustomAudioButtonControls() {\n    const { autoplayAudioEnabled, customAudioButton } = this.props;\n    const playButton = document.getElementById('play-audio-button');\n    const audio = document.getElementById('pie-prompt-audio-player');\n\n    if (autoplayAudioEnabled && audio) {\n      audio\n        .play()\n        .then(() => {\n          if (playButton && customAudioButton) {\n            audio.addEventListener('ended', handleAudioEnded);\n          }\n        })\n        .catch((error) => {\n          // Autoplay blocked (Safari/Firefox until the page has been\n          // interacted with). The audio is paused, so drop the button back to\n          // the idle image - clicking it is now the only way to start.\n          if (playButton && customAudioButton) {\n            playButton.style.backgroundImage = `url(${customAudioButton.playImage})`;\n          }\n          console.error('Error playing audio', error);\n        });\n    }\n\n    if (!playButton || !audio || !customAudioButton) return;\n\n    const handlePlayClick = () => {\n      // if already playing, don't play again\n      if (!audio.paused) return;\n\n      audio.play();\n    };\n\n    const handleAudioEnded = () => {\n      playButton.style.backgroundImage = `url(${customAudioButton.playImage})`;\n    };\n\n    const handleAudioPlay = () => {\n      Object.assign(playButton.style, {\n        backgroundImage: `url(${customAudioButton.pauseImage})`,\n        border: '1px solid #ccc',\n      });\n    };\n\n    const handleAudioPause = () => {\n      Object.assign(playButton.style, {\n        backgroundImage: `url(${customAudioButton.playImage})`,\n        border: '1px solid #326295',\n      });\n    };\n\n    playButton.addEventListener('click', handlePlayClick);\n    audio.addEventListener('play', handleAudioPlay);\n    audio.addEventListener('pause', handleAudioPause);\n    audio.addEventListener('ended', handleAudioEnded);\n\n    // store event handler references so they can be removed later\n    this._handlePlayClick = handlePlayClick;\n    this._handleAudioPlay = handleAudioPlay;\n    this._handleAudioPause = handleAudioPause;\n    this._handleAudioEnded = handleAudioEnded;\n  }\n\n  removeCustomAudioButtonListeners() {\n    const playButton = document.getElementById('play-audio-button');\n    const audio = document.querySelector('audio');\n\n    if (!playButton || !audio) return;\n\n    // remove event listeners using stored references\n    playButton.removeEventListener('click', this._handlePlayClick);\n    audio.removeEventListener('play', this._handleAudioPlay);\n    audio.removeEventListener('pause', this._handleAudioPause);\n    audio.removeEventListener('ended', this._handleAudioEnded);\n  }\n\n  componentDidMount() {\n    this.alignImages();\n    this.addCustomAudioButtonControls();\n    this.setupMathRendering();\n  }\n\n  componentDidUpdate(prevProps) {\n    this.alignImages();\n\n    if (prevProps.prompt !== this.props.prompt) {\n      this.renderMathContent();\n    }\n  }\n\n  componentWillUnmount() {\n    this.removeCustomAudioButtonListeners();\n  }\n\n  setupMathRendering() {\n    this.renderMathContent();\n  }\n\n  renderMathContent() {\n    const container = this.promptRef.current;\n    if (container && typeof renderMath === 'function') {\n      renderMath(container);\n    }\n  }\n\n  alignImages() {\n    const previewPrompt = this.promptRef.current;\n\n    if (!previewPrompt) {\n      return;\n    }\n\n    const images = previewPrompt.getElementsByTagName('img');\n\n    if (images && images.length) {\n      for (let image of images) {\n        if (image.attributes && image.attributes.alignment && image.attributes.alignment.value) {\n          const alignment = image.attributes.alignment.value;\n          const justifyContent =\n            alignment === 'center' ? 'center' : alignment === 'right' ? 'flex-end' : 'flex-start';\n\n          const parentNode = image.parentElement;\n\n          if (\n            parentNode.tagName === 'DIV' &&\n            parentNode.style.display === 'flex' &&\n            parentNode.style.width === '100%'\n          ) {\n            parentNode.style.justifyContent = justifyContent;\n          } else {\n            const div = document.createElement('div');\n            div.style.display = 'flex';\n            div.style.width = '100%';\n            div.style.justifyContent = justifyContent;\n\n            const copyImage = image.cloneNode(true);\n            div.appendChild(copyImage);\n            parentNode.replaceChild(div, image);\n          }\n        }\n      }\n    }\n  }\n\n  render() {\n    const { prompt, tagName, className, onClick, defaultClassName } = this.props;\n    // legend tag was added once with accessibility tasks, we need extra style to make it work with images alignment\n    const legendClass = tagName === 'legend' ? 'legend' : '';\n    const customClasses = `${className || ''} ${defaultClassName || ''} ${legendClass} ${PROMPT_CLASS}`.trim();\n\n    return (\n      <StyledPromptContainer\n        as={tagName || 'div'}\n        ref={this.promptRef}\n        onClick={onClick}\n        className={customClasses}\n        tagName={tagName}\n        dangerouslySetInnerHTML={{\n          __html: this.parsedText(prompt || '').replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX),\n        }}\n      />\n    );\n  }\n}\n\nexport default PreviewPrompt;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "7.0.1",
+  "version": "7.0.3",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "module": "src/index.js",
   "main": "lib/index.js",
@@ -14,9 +14,9 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/icons": "^4.0.3",
+    "@pie-lib/icons": "^4.0.4",
     "@pie-lib/math-rendering": "^5.1.0",
-    "@pie-lib/test-utils": "^2.0.2",
+    "@pie-lib/test-utils": "^2.0.3",
     "debug": "^4.1.1",
     "lodash-es": "^4.17.23",
     "prop-types": "^15.7.2",
@@ -31,5 +31,5 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "38176e40de37e31fc3bf4edb8669cf2238e910d3"
+  "gitHead": "555178e597d60d604dcc8b77cbb86dfde7b86b4f"
 }

package/src/__tests__/preview-prompt.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import PreviewPrompt from '../preview-prompt';
 import * as color from '../color';
@@ -224,6 +224,115 @@ describe('PreviewPrompt - Extended Tests', () => {
     });
   });
 
+  // playImage is the idle state, pauseImage the playing one. The button has to
+  // start in the state the audio is actually in: it used to always start on
+  // pauseImage, and the click handler read that image back as "already
+  // playing", so with autoplay off every click was silently swallowed.
+  describe('custom audio button playback', () => {
+    const customAudioButton = { playImage: 'play.png', pauseImage: 'pause.png' };
+    const promptWithAudio = '<audio src="test.mp3"></audio>';
+
+    let play;
+    let paused;
+
+    const stubPlayback = (impl) => {
+      play = jest.fn(impl);
+      // jsdom does not implement playback, and the component reads `paused`
+      // alongside calling `play()`, so both are driven by hand here.
+      Object.defineProperty(HTMLMediaElement.prototype, 'play', {
+        configurable: true,
+        writable: true,
+        value: play,
+      });
+      Object.defineProperty(HTMLMediaElement.prototype, 'paused', {
+        configurable: true,
+        get: () => paused,
+      });
+    };
+
+    const renderPrompt = (autoplayAudioEnabled) => {
+      render(
+        <PreviewPrompt
+          prompt={promptWithAudio}
+          autoplayAudioEnabled={autoplayAudioEnabled}
+          customAudioButton={customAudioButton}
+        />,
+      );
+
+      return document.getElementById('play-audio-button');
+    };
+
+    beforeEach(() => {
+      paused = true;
+      stubPlayback(() => Promise.resolve());
+    });
+
+    it('should start on the idle image when autoplay is off', () => {
+      const playButton = renderPrompt(false);
+
+      expect(playButton.style.backgroundImage).toContain(customAudioButton.playImage);
+    });
+
+    it('should play when clicked with autoplay off', () => {
+      const playButton = renderPrompt(false);
+
+      fireEvent.click(playButton);
+
+      expect(play).toHaveBeenCalledTimes(1);
+    });
+
+    // No controller defaults `autoplayAudioEnabled`, so an item that does not
+    // set it reaches delivery as undefined. The initial image tracks whether
+    // play() is called - a truthy check - not whether the author opted out.
+    it('should start on the idle image and stay clickable when autoplay is unset', () => {
+      const playButton = renderPrompt(undefined);
+
+      expect(playButton.style.backgroundImage).toContain(customAudioButton.playImage);
+      expect(play).not.toHaveBeenCalled();
+
+      fireEvent.click(playButton);
+
+      expect(play).toHaveBeenCalledTimes(1);
+    });
+
+    it('should start on the playing image and autoplay when autoplay is on', () => {
+      const playButton = renderPrompt(true);
+
+      expect(playButton.style.backgroundImage).toContain(customAudioButton.pauseImage);
+      expect(play).toHaveBeenCalledTimes(1);
+    });
+
+    it('should ignore a click while the audio is already playing', () => {
+      const playButton = renderPrompt(false);
+      paused = false;
+
+      fireEvent.click(playButton);
+
+      expect(play).not.toHaveBeenCalled();
+    });
+
+    it('should fall back to the idle image and stay clickable when autoplay is blocked', async () => {
+      // Only the autoplay attempt is blocked; the click that follows is a user
+      // gesture, so the browser allows it.
+      let attempts = 0;
+      stubPlayback(() => {
+        attempts += 1;
+        return attempts === 1 ? Promise.reject(new Error('NotAllowedError')) : Promise.resolve();
+      });
+      jest.spyOn(console, 'error').mockImplementation(() => {});
+
+      const playButton = renderPrompt(true);
+
+      await waitFor(() => {
+        expect(playButton.style.backgroundImage).toContain(customAudioButton.playImage);
+      });
+
+      fireEvent.click(playButton);
+
+      expect(play).toHaveBeenCalledTimes(2);
+    });
+  });
+
   describe('image alignment', () => {
     it('should align images with alignment attribute', () => {
       const promptWithImage = '<img src="test.jpg" alignment="center" />';

package/src/preview-prompt.jsx

@@ -97,7 +97,7 @@ export class PreviewPrompt extends Component {
   promptRef = React.createRef();
 
   parsedText = (text) => {
-    const { customAudioButton } = this.props;
+    const { autoplayAudioEnabled, customAudioButton } = this.props;
     const div = document.createElement('div');
     div.innerHTML = text;
 
@@ -124,7 +124,10 @@ export class PreviewPrompt extends Component {
           display: 'block',
           width: '128px',
           height: '128px',
-          backgroundImage: `url(${customAudioButton.pauseImage})`,
+          // pauseImage is the playing state. Only autoplay starts in it - with
+          // autoplay off the audio is paused, so the button has to show
+          // playImage or it advertises a state the audio is not in.
+          backgroundImage: `url(${autoplayAudioEnabled ? customAudioButton.pauseImage : customAudioButton.playImage})`,
           backgroundSize: 'cover',
           borderRadius: '50%',
           border: '1px solid #326295',
@@ -151,6 +154,12 @@ export class PreviewPrompt extends Component {
           }
         })
         .catch((error) => {
+          // Autoplay blocked (Safari/Firefox until the page has been
+          // interacted with). The audio is paused, so drop the button back to
+          // the idle image - clicking it is now the only way to start.
+          if (playButton && customAudioButton) {
+            playButton.style.backgroundImage = `url(${customAudioButton.playImage})`;
+          }
           console.error('Error playing audio', error);
         });
     }
@@ -160,7 +169,6 @@ export class PreviewPrompt extends Component {
     const handlePlayClick = () => {
       // if already playing, don't play again
       if (!audio.paused) return;
-      if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;
 
       audio.play();
     };