@pie-lib/render-ui 4.15.9 → 4.16.1-beta.0

package/src/index.js

@@ -3,6 +3,7 @@ import Feedback from './feedback';
 import Collapsible from './collapsible';
 import withUndoReset from './withUndoReset';
 import PreviewLayout from './preview-layout';
+import UiLayout from './ui-layout';
 import HtmlAndMath from './html-and-math';
 import InputContainer from './input-container';
 import PreviewPrompt from './preview-prompt';
@@ -10,12 +11,17 @@ import Readable from './readable';
 import Purpose from './purpose';
 import * as color from './color';
 import { hasText } from './has-text';
+import { hasMedia } from './has-media';
+import EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage';
+import AppendCSSRules from './append-css-rules';
 
 export {
+  AppendCSSRules,
   HtmlAndMath,
   indicators,
   withUndoReset,
   Feedback,
+  UiLayout,
   PreviewLayout,
   Collapsible,
   InputContainer,
@@ -24,4 +30,6 @@ export {
   Readable,
   Purpose,
   hasText,
+  hasMedia,
+  EnableAudioAutoplayImage,
 };

package/src/preview-layout.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
+import UiLayout from './ui-layout';
 
 class PreviewLayout extends React.Component {
   static propTypes = {
@@ -8,16 +9,26 @@ class PreviewLayout extends React.Component {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     classes: PropTypes.object,
     role: PropTypes.string,
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
+    }),
+    fontSizeFactor: PropTypes.number,
   };
 
   render() {
-    const { children, classes, ariaLabel, role } = this.props;
+    const { children, classes, ariaLabel, role, extraCSSRules, fontSizeFactor } = this.props;
     const accessibility = ariaLabel ? { 'aria-label': ariaLabel, role } : {};
 
     return (
-      <div className={classes.container} {...accessibility}>
+      <UiLayout
+        className={classes.container}
+        {...accessibility}
+        extraCSSRules={extraCSSRules}
+        fontSizeFactor={fontSizeFactor}
+      >
         {children}
-      </div>
+      </UiLayout>
     );
   }
 }

package/src/preview-prompt.jsx

@@ -15,6 +15,11 @@ export class PreviewPrompt extends Component {
     className: PropTypes.string,
     onClick: PropTypes.func,
     defaultClassName: PropTypes.string,
+    autoplayAudioEnabled: PropTypes.bool,
+    customAudioButton: {
+      playImage: PropTypes.string,
+      pauseImage: PropTypes.string,
+    },
   };
 
   static defaultProps = {
@@ -22,7 +27,7 @@ export class PreviewPrompt extends Component {
   };
 
   parsedText = (text) => {
-    // fix imported audio content for Safari PD-1419
+    const { customAudioButton } = this.props;
     const div = document.createElement('div');
     div.innerHTML = text;
 
@@ -34,38 +39,150 @@ export class PreviewPrompt extends Component {
       source.setAttribute('src', audio.getAttribute('src'));
 
       audio.removeAttribute('src');
+      audio.setAttribute('id', 'pie-prompt-audio-player');
+
       audio.appendChild(source);
+
+      if (customAudioButton) {
+        audio.style.display = 'none';
+
+        const playButton = document.createElement('div');
+        playButton.id = 'play-audio-button';
+
+        Object.assign(playButton.style, {
+          cursor: 'pointer',
+          display: 'block',
+          width: '128px',
+          height: '128px',
+          backgroundImage: `url(${customAudioButton.pauseImage})`,
+          backgroundSize: 'cover',
+          borderRadius: '50%',
+          border: '1px solid #326295',
+        });
+
+        audio.parentNode.insertBefore(playButton, audio);
+      }
     }
 
     return div.innerHTML;
   };
 
+  addCustomAudioButtonControls() {
+    const { autoplayAudioEnabled, customAudioButton } = this.props;
+    const playButton = document.getElementById('play-audio-button');
+    const audio = document.getElementById('pie-prompt-audio-player');
+
+    if (autoplayAudioEnabled && audio) {
+      audio
+        .play()
+        .then(() => {
+          if (playButton && customAudioButton) {
+            audio.addEventListener('ended', handleAudioEnded);
+          }
+        })
+        .catch((error) => {
+          console.error('Error playing audio', error);
+        });
+    }
+
+    if (!playButton || !audio || !customAudioButton) return;
+
+    const handlePlayClick = () => {
+      // if already playing, don't play again
+      if (!audio.paused) return;
+      if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;
+
+      audio.play();
+    };
+
+    const handleAudioEnded = () => {
+      playButton.style.backgroundImage = `url(${customAudioButton.playImage})`;
+    };
+
+    const handleAudioPlay = () => {
+      Object.assign(playButton.style, {
+        backgroundImage: `url(${customAudioButton.pauseImage})`,
+        border: '1px solid #ccc',
+      });
+    };
+
+    const handleAudioPause = () => {
+      Object.assign(playButton.style, {
+        backgroundImage: `url(${customAudioButton.playImage})`,
+        border: '1px solid #326295',
+      });
+    };
+
+    playButton.addEventListener('click', handlePlayClick);
+    audio.addEventListener('play', handleAudioPlay);
+    audio.addEventListener('pause', handleAudioPause);
+    audio.addEventListener('ended', handleAudioEnded);
+
+    // store event handler references so they can be removed later
+    this._handlePlayClick = handlePlayClick;
+    this._handleAudioPlay = handleAudioPlay;
+    this._handleAudioPause = handleAudioPause;
+    this._handleAudioEnded = handleAudioEnded;
+  }
+
+  removeCustomAudioButtonListeners() {
+    const playButton = document.getElementById('play-audio-button');
+    const audio = document.querySelector('audio');
+
+    if (!playButton || !audio) return;
+
+    // remove event listeners using stored references
+    playButton.removeEventListener('click', this._handlePlayClick);
+    audio.removeEventListener('play', this._handleAudioPlay);
+    audio.removeEventListener('pause', this._handleAudioPause);
+    audio.removeEventListener('ended', this._handleAudioEnded);
+  }
+
+  componentDidMount() {
+    this.alignImages();
+    this.addCustomAudioButtonControls();
+  }
+
   componentDidUpdate() {
-    // set image parent style so it can be horizontally aligned
-    const previewPrompt = document.querySelector('#preview-prompt');
-    const images = previewPrompt && previewPrompt.getElementsByTagName('img');
-
-    if (images && images.length) {
-      for (let image of images) {
-        // check if alignment property was set
-        if (image.attributes && image.attributes.alignment && image.attributes.alignment.value) {
-          const parentNode = image.parentElement;
-
-          // check if div is not already added to dom and replace current image with wrapped image
-          if (
-            !(parentNode.tagName === 'DIV' && parentNode.style.display === 'flex' && parentNode.style.width === '100%')
-          ) {
-            const div = document.createElement('div');
-            div.style.display = 'flex';
-            div.style.width = '100%';
-
-            const copyImage = image.cloneNode(true);
-            div.appendChild(copyImage);
-            parentNode.replaceChild(div, image);
+    this.alignImages();
+  }
+
+  componentWillUnmount() {
+    this.removeCustomAudioButtonListeners();
+  }
+
+  alignImages() {
+    const previewPrompts = document.querySelectorAll('#preview-prompt');
+
+    previewPrompts.forEach((previewPrompt) => {
+      const images = previewPrompt.getElementsByTagName('img');
+
+      if (images && images.length) {
+        for (let image of images) {
+          // check if alignment property was set
+          if (image.attributes && image.attributes.alignment && image.attributes.alignment.value) {
+            const parentNode = image.parentElement;
+
+            // check if div is not already added to dom and replace current image with wrapped image
+            if (
+              !(
+                parentNode.tagName === 'DIV' &&
+                parentNode.style.display === 'flex' &&
+                parentNode.style.width === '100%'
+              )
+            ) {
+              const div = document.createElement('div');
+              div.style.display = 'flex';
+              div.style.width = '100%';
+
+              const copyImage = image.cloneNode(true);
+              div.appendChild(copyImage);
+              parentNode.replaceChild(div, image);
+            }
           }
         }
       }
-    }
+    });
   }
 
   render() {
@@ -105,7 +222,8 @@ const styles = (theme) => ({
   },
   label: {
     color: `${color.text()} !important`, //'var(--choice-input-color, black)',
-    display: 'inline-block',
+    display: 'flex',
+    flexDirection: 'column',
     verticalAlign: 'middle',
     cursor: 'pointer',
     '& > p': {
@@ -119,11 +237,17 @@ const styles = (theme) => ({
     '&:not(.MathJax) > table tr': {
       '&:nth-child(2n)': {
         backgroundColor: '#f6f8fa',
+        color: theme.palette.common.black,
       },
     },
-    '&:not(.MathJax) > table td, &:not(.MathJax) > table th': {
+    // align table content to left as per STAR requirement PD-3687
+    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
       padding: '.6em 1em',
-      textAlign: 'center',
+      textAlign: 'left',
+    },
+    // added this to fix alignment of text in prompt imported from studio (PD-3423)
+    '&:not(.MathJax) > table td > p.kds-indent': {
+      textAlign: 'initial',
     },
   },
 });

package/src/ui-layout.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import AppendCSSRules from './append-css-rules';
+
+class UiLayout extends AppendCSSRules {
+  static propTypes = {
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    children: PropTypes.array,
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
+    }),
+    fontSizeFactor: PropTypes.number,
+  };
+
+  static defaultProps = {
+    extraCSSRules: {},
+    fontSizeFactor: 1,
+  };
+
+  constructor(props) {
+    super(props);
+    this.classesSheet = document.createElement('style');
+  }
+
+  computeStyle(fontSizeFactor) {
+    const getFontSize = (element) => parseFloat(getComputedStyle(element).fontSize);
+
+    const rootFontSize = getFontSize(document.documentElement);
+    const bodyFontSize = getFontSize(document.body);
+    const effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
+
+    return fontSizeFactor !== 1 ? { fontSize: `${effectiveFontSize * fontSizeFactor}px` } : null;
+  }
+
+  render() {
+    const { children, className, classes, fontSizeFactor, ...rest } = this.props;
+
+    const finalClass = classNames(className, classes.extraCSSRules, classes.uiLayoutContainer);
+    const { extraCSSRules, ...restProps } = rest;
+    const style = this.computeStyle(fontSizeFactor);
+
+    return (
+      <div className={finalClass} {...restProps} {...(style && { style })}>
+        {children}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  extraCSSRules: {},
+  // need this because some browsers set their own style on table
+  uiLayoutContainer: {
+    '& table, th, td': {
+      fontSize: 'inherit' /* Ensure table elements inherit font size */,
+    },
+  },
+};
+
+const Styled = withStyles(styles)(UiLayout);
+
+export default Styled;

package/README.md

@@ -1,33 +0,0 @@
-# @pie-lib/render-ui
-
-Some shared ui components for player rendering that are so small that they don't warrant their own package..
-
-## install
-
-```
-npm install
-```
-
-## demo
-
-```
-cd demo
-../node_modules/.bin/webpack-dev-server --hot --inline
-```
-
-go to http://localhost:8080
-
-# colors
-
-This package contains a color module that defines the css custom properties that all pie elements should use. It loosely follows the material design naming scheme with a few additions.
-
-| name                   | description                             | fallback           |
-| ---------------------- | --------------------------------------- | ------------------ |
-| `--pie-text`           | the color of the text                   | defaults.TEXT      |
-| `--pie-primary`        | the primary fill color                  | defaults.PRIMARY   |
-| `--pie-primary-text`   | the color of primary text               | `--pie-text`       |
-| `--pie-secondary`      | the secondary fill color                | defaults.SECONDARY |
-| `--pie-secondary-text` | the color of secondary text             | `--pie-text`       |
-| `--pie-correct`        | the fill color for correct ui widgets   | defaults.CORRECT   |
-| `--pie-incorrect`      | the fill color for incorrect ui widgets | defaults.INCORRECT |
-| `--pie-disabled`       | the disabled color                      | defaults.DISABLED  |

package/lib/collapsible/index.js

@@ -1,134 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Collapsible = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = require("@material-ui/core/styles/index");
-
-var _index2 = _interopRequireDefault(require("@material-ui/core/Collapse/index"));
-
-var _mathRendering = require("@pie-lib/math-rendering");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Collapsible = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Collapsible, _React$Component);
-
-  var _super = _createSuper(Collapsible);
-
-  function Collapsible() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Collapsible);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
-      expanded: false
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleExpanded", function () {
-      _this.setState(function (state) {
-        return {
-          expanded: !state.expanded
-        };
-      });
-    });
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Collapsible, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      (0, _mathRendering.renderMath)(this.root);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      (0, _mathRendering.renderMath)(this.root);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          labels = _this$props.labels,
-          children = _this$props.children,
-          className = _this$props.className;
-      var title = this.state.expanded ? labels.visible || 'Hide' : labels.hidden || 'Show';
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: className,
-        ref: function ref(r) {
-          return _this2.root = r;
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: this.toggleExpanded
-      }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.title
-      }, title)), /*#__PURE__*/_react["default"].createElement(_index2["default"], {
-        "in": this.state.expanded,
-        timeout: "auto",
-        unmountOnExit: true,
-        className: classes.collapsible
-      }, children));
-    }
-  }]);
-  return Collapsible;
-}(_react["default"].Component);
-
-exports.Collapsible = Collapsible;
-(0, _defineProperty2["default"])(Collapsible, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  children: _propTypes["default"].object,
-  labels: _propTypes["default"].shape({
-    visible: _propTypes["default"].string,
-    hidden: _propTypes["default"].string
-  })
-});
-(0, _defineProperty2["default"])(Collapsible, "defaultProps", {
-  labels: {}
-});
-
-var _default = (0, _index.withStyles)(function (theme) {
-  return {
-    title: {
-      color: theme.palette.primary.light,
-      borderBottom: "1px dotted ".concat(theme.palette.primary.light)
-    },
-    collapsible: {
-      paddingTop: theme.spacing.unit * 2
-    }
-  };
-})(Collapsible);
-
-exports["default"] = _default;
-//# sourceMappingURL=index.js.map

package/lib/collapsible/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/collapsible/index.jsx"],"names":["Collapsible","expanded","setState","state","root","props","classes","labels","children","className","title","visible","hidden","r","toggleExpanded","collapsible","React","Component","PropTypes","object","isRequired","string","shape","theme","color","palette","primary","light","borderBottom","paddingTop","spacing","unit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEaA,W;;;;;;;;;;;;;;;8FAeH;AACNC,MAAAA,QAAQ,EAAE;AADJ,K;uGAIS,YAAM;AACrB,YAAKC,QAAL,CAAc,UAACC,KAAD;AAAA,eAAY;AAAEF,UAAAA,QAAQ,EAAE,CAACE,KAAK,CAACF;AAAnB,SAAZ;AAAA,OAAd;AACD,K;;;;;;WAED,6BAAoB;AAClB,qCAAW,KAAKG,IAAhB;AACD;;;WAED,8BAAqB;AACnB,qCAAW,KAAKA,IAAhB;AACD;;;WAED,kBAAS;AAAA;;AACP,wBAAiD,KAAKC,KAAtD;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,MAAjB,eAAiBA,MAAjB;AAAA,UAAyBC,QAAzB,eAAyBA,QAAzB;AAAA,UAAmCC,SAAnC,eAAmCA,SAAnC;AACA,UAAMC,KAAK,GAAG,KAAKP,KAAL,CAAWF,QAAX,GAAsBM,MAAM,CAACI,OAAP,IAAkB,MAAxC,GAAiDJ,MAAM,CAACK,MAAP,IAAiB,MAAhF;AAEA,0BACE;AAAK,QAAA,SAAS,EAAEH,SAAhB;AAA2B,QAAA,GAAG,EAAE,aAACI,CAAD;AAAA,iBAAQ,MAAI,CAACT,IAAL,GAAYS,CAApB;AAAA;AAAhC,sBACE;AAAK,QAAA,OAAO,EAAE,KAAKC;AAAnB,sBACE;AAAM,QAAA,SAAS,EAAER,OAAO,CAACI;AAAzB,SAAiCA,KAAjC,CADF,CADF,eAIE,gCAAC,kBAAD;AAAU,cAAI,KAAKP,KAAL,CAAWF,QAAzB;AAAmC,QAAA,OAAO,EAAC,MAA3C;AAAkD,QAAA,aAAa,MAA/D;AAAgE,QAAA,SAAS,EAAEK,OAAO,CAACS;AAAnF,SACGP,QADH,CAJF,CADF;AAUD;;;EA7C8BQ,kBAAMC,S;;;iCAA1BjB,W,eACQ;AACjBM,EAAAA,OAAO,EAAEY,sBAAUC,MAAV,CAAiBC,UADT;AAEjBX,EAAAA,SAAS,EAAES,sBAAUG,MAFJ;AAGjBb,EAAAA,QAAQ,EAAEU,sBAAUC,MAHH;AAIjBZ,EAAAA,MAAM,EAAEW,sBAAUI,KAAV,CAAgB;AACtBX,IAAAA,OAAO,EAAEO,sBAAUG,MADG;AAEtBT,IAAAA,MAAM,EAAEM,sBAAUG;AAFI,GAAhB;AAJS,C;iCADRrB,W,kBAWW;AACpBO,EAAAA,MAAM,EAAE;AADY,C;;eAqCT,uBAAW,UAACgB,KAAD;AAAA,SAAY;AACpCb,IAAAA,KAAK,EAAE;AACLc,MAAAA,KAAK,EAAED,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsBC,KADxB;AAELC,MAAAA,YAAY,uBAAgBL,KAAK,CAACE,OAAN,CAAcC,OAAd,CAAsBC,KAAtC;AAFP,KAD6B;AAKpCZ,IAAAA,WAAW,EAAE;AACXc,MAAAA,UAAU,EAAEN,KAAK,CAACO,OAAN,CAAcC,IAAd,GAAqB;AADtB;AALuB,GAAZ;AAAA,CAAX,EAQX/B,WARW,C","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport Collapse from '@material-ui/core/Collapse/index';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport PropTypes from 'prop-types';\n\nexport class Collapsible extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    children: PropTypes.object,\n    labels: PropTypes.shape({\n      visible: PropTypes.string,\n      hidden: PropTypes.string,\n    }),\n  };\n\n  static defaultProps = {\n    labels: {},\n  };\n\n  state = {\n    expanded: false,\n  };\n\n  toggleExpanded = () => {\n    this.setState((state) => ({ expanded: !state.expanded }));\n  };\n\n  componentDidMount() {\n    renderMath(this.root);\n  }\n\n  componentDidUpdate() {\n    renderMath(this.root);\n  }\n\n  render() {\n    const { classes, labels, children, className } = this.props;\n    const title = this.state.expanded ? labels.visible || 'Hide' : labels.hidden || 'Show';\n\n    return (\n      <div className={className} ref={(r) => (this.root = r)}>\n        <div onClick={this.toggleExpanded}>\n          <span className={classes.title}>{title}</span>\n        </div>\n        <Collapse in={this.state.expanded} timeout=\"auto\" unmountOnExit className={classes.collapsible}>\n          {children}\n        </Collapse>\n      </div>\n    );\n  }\n}\n\nexport default withStyles((theme) => ({\n  title: {\n    color: theme.palette.primary.light,\n    borderBottom: `1px dotted ${theme.palette.primary.light}`,\n  },\n  collapsible: {\n    paddingTop: theme.spacing.unit * 2,\n  },\n}))(Collapsible);\n"],"file":"index.js"}