@telus-uds/components-web 3.4.0 → 4.0.0

package/lib/cjs/Video/ControlBar/Controls/VideoMenu/VideoMenu.js

@@ -0,0 +1,169 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _videoText = _interopRequireDefault(require("../../../videoText"));
+var _utils = require("../../../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoMenu__MenuContainer",
+  componentId: "components-web__sc-nllbhw-0"
+})(_ref => {
+  let {
+    padding,
+    background
+  } = _ref;
+  return {
+    width: 114,
+    padding,
+    backgroundColor: background,
+    borderRadius: 5
+  };
+});
+const MenuButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "VideoMenu__MenuButton",
+  componentId: "components-web__sc-nllbhw-1"
+})({
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  width: '100%',
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'space-between',
+  verticalAlign: 'middle'
+});
+const CheckmarkContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoMenu__CheckmarkContainer",
+  componentId: "components-web__sc-nllbhw-2"
+})(_ref2 => {
+  let {
+    isSelectedItem,
+    checkMarkWidth,
+    checkMarkHeight,
+    checkMarkSelectedColor,
+    checkMarkHoverColor,
+    checkMarkFocusColor,
+    checkMarkUnselectedColor
+  } = _ref2;
+  return {
+    width: checkMarkWidth,
+    height: checkMarkHeight,
+    marginTop: 2,
+    outline: 'none',
+    [`${MenuButton} && svg`]: {
+      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkUnselectedColor
+    },
+    [`${MenuButton}:hover && svg`]: {
+      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkHoverColor
+    },
+    [`${MenuButton}:focus && svg`]: {
+      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkFocusColor
+    }
+  };
+});
+const VideoMenu = _ref3 => {
+  let {
+    menuLabel,
+    menuOptions,
+    setSelection,
+    selectedItem,
+    copy,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
+  const {
+    padding,
+    background,
+    checkMarkWidth,
+    checkMarkHeight,
+    checkMarkSelectedColor,
+    checkMarkHoverColor,
+    checkMarkFocusColor,
+    checkMarkUnselectedColor,
+    checkMarkIcon
+  } = (0, _componentsBase.useThemeTokens)('VideoMenu', tokens, variant);
+  const getMenuItems = () => {
+    return menuOptions.map(option => {
+      if (option.name) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuButton, {
+          "aria-haspopup": "true",
+          role: "menuitem",
+          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? _videoText.default[copy].itemSelected : _videoText.default[copy].itemUnselected}`,
+          selectedItem: selectedItem,
+          itemValue: option.value,
+          onClick: () => {
+            if (selectedItem !== option.value) {
+              setSelection(option.value);
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              bold: true,
+              inverse: true
+            },
+            children: option.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
+            isSelectedItem: option.value === selectedItem,
+            checkMarkWidth: checkMarkWidth,
+            checkMarkHeight: checkMarkHeight,
+            checkMarkSelectedColor: checkMarkSelectedColor,
+            checkMarkHoverColor: checkMarkHoverColor,
+            checkMarkFocusColor: checkMarkFocusColor,
+            checkMarkUnselectedColor: checkMarkUnselectedColor,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+              icon: checkMarkIcon
+            })
+          })]
+        }, option.value);
+      }
+      return null;
+    });
+  };
+  const handleOnKeyDown = event => {
+    const key = event.key || event.keyCode;
+
+    // Disables playing by space bar, as that can be used to click a button
+    if (key === ' ' || key === 32) {
+      event.stopPropagation();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+    onKeyDown: handleOnKeyDown,
+    padding: padding,
+    background: background,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 2,
+      divider: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          bold: true,
+          inverse: true
+        },
+        children: menuLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "menu",
+        children: getMenuItems()
+      })]
+    })
+  });
+};
+VideoMenu.propTypes = {
+  ...selectedSystemPropTypes,
+  menuLabel: _propTypes.default.string.isRequired,
+  menuOptions: _propTypes.default.array.isRequired,
+  setSelection: _propTypes.default.func.isRequired,
+  selectedItem: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired
+};
+var _default = exports.default = VideoMenu;

package/lib/cjs/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _videoText = _interopRequireDefault(require("../../../videoText"));
+var _utils = require("../../../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const ProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoProgressBar__ProgressBarContainer",
+  componentId: "components-web__sc-d9tm07-0"
+})({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center'
+});
+const sharedStyles = _ref => {
+  let {
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    trackGradientStart,
+    trackGradientEnd
+  } = _ref;
+  return {
+    thumb: {
+      appearance: 'none',
+      height: thumbHeight,
+      width: thumbWidth,
+      borderRadius: '50%',
+      background: thumbBackground,
+      cursor: 'pointer',
+      marginTop: -3,
+      '&:hover': {
+        transform: 'scale(1.5)'
+      }
+    },
+    track: videoBufferDisplay => ({
+      width: '100%',
+      height: 2,
+      cursor: 'pointer',
+      borderRadius: 1.3,
+      background: `linear-gradient(to right, ${trackGradientStart} 0%,${trackGradientEnd} ${videoBufferDisplay - 0.01}% ,rgba(255,255,255,0.5) ${videoBufferDisplay}%)` // TODO: replace with opaque white from palette
+    })
+  };
+};
+const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_ref2 => {
+  let {
+    videoCurrentTime
+  } = _ref2;
+  return {
+    value: videoCurrentTime
+  };
+}).withConfig({
+  displayName: "VideoProgressBar__StyledProgressBar",
+  componentId: "components-web__sc-d9tm07-1"
+})(_ref3 => {
+  let {
+    videoBufferDisplay,
+    rangeBackground,
+    ...sharedProps
+  } = _ref3;
+  return {
+    width: '100%',
+    cursor: 'pointer',
+    padding: '5px 0',
+    'input[type=range]&': {
+      appearance: 'none',
+      width: '100%',
+      background: rangeBackground
+    },
+    'input[type=range]&:focus': {
+      outline: 'none'
+    },
+    'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
+    'input[type=range]&::-moz-range-thumb': {
+      ...sharedStyles(sharedProps).thumb,
+      border: 'none'
+    },
+    'input[type=range]&::-ms-thumb': {
+      ...sharedStyles(sharedProps).thumb,
+      margin: 0,
+      border: 'none'
+    },
+    'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track(videoBufferDisplay),
+    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoBufferDisplay),
+    'input[type=range]&::-ms-track': {
+      ...sharedStyles(sharedProps).track(videoBufferDisplay),
+      margin: '6px 0',
+      border: 'none'
+    },
+    'input[type=range]&::-ms-fill-lower': {
+      background: rangeBackground
+    },
+    'input[type=range]&::-ms-tooltip': {
+      display: 'none'
+    }
+  };
+});
+const StyledTimestamp = /*#__PURE__*/_styledComponents.default.span.withConfig({
+  displayName: "VideoProgressBar__StyledTimestamp",
+  componentId: "components-web__sc-d9tm07-2"
+})(_ref4 => {
+  let {
+    margin
+  } = _ref4;
+  return {
+    margin
+  };
+});
+// TODO: unify with the helper from `VideoSplash`
+function getTimestamp(duration) {
+  const minutes = Math.floor(duration / 60);
+  const seconds = Math.floor(duration - 60 * minutes);
+  return `${minutes}:${seconds < 10 ? 0 : ''}${seconds}`;
+}
+const VideoProgressBar = _ref5 => {
+  let {
+    copy = 'en',
+    videoLength,
+    videoCurrentTime,
+    videoBufferEnd,
+    playing,
+    setSeek,
+    resetInactivityTimer,
+    tokens,
+    variant,
+    ...rest
+  } = _ref5;
+  const {
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    timestampMarginLeft,
+    timestampMarginRight,
+    remainingTimestampMarginLeft,
+    remainingTimestampMarginRight,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground
+  } = (0, _componentsBase.useThemeTokens)('VideoProgressBar', tokens, variant, {
+    playing
+  });
+  const videoProgressBar = /*#__PURE__*/_react.default.createRef();
+  const handleVideoSkip = () => {
+    setSeek(videoProgressBar.current.value);
+  };
+  const videoBufferDisplay = videoBufferEnd / videoLength * 100;
+  const isVideoUnplayed = videoCurrentTime === -1;
+  const currentTime = isVideoUnplayed ? 0 : videoCurrentTime;
+  const remainingTime = isVideoUnplayed ? videoLength : videoLength - videoCurrentTime;
+  const currentTimestamp = getTimestamp(currentTime);
+  const remainingTimestamp = getTimestamp(remainingTime);
+  const sharedProps = {
+    thumbWidth,
+    thumbHeight,
+    thumbBackground,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressBarContainer, {
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTimestamp, {
+      margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          inverse: true
+        },
+        children: currentTimestamp
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledProgressBar, {
+      "aria-label": _videoText.default[copy].videoProgressBarLabel,
+      type: "range",
+      step: "any",
+      max: videoLength,
+      videoCurrentTime: videoCurrentTime,
+      onChange: handleVideoSkip,
+      onFocus: resetInactivityTimer,
+      videoBufferDisplay: videoBufferDisplay,
+      ref: videoProgressBar,
+      tabIndex: "-1",
+      ...sharedProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTimestamp, {
+      margin: `0 ${remainingTimestampMarginRight}px 0 ${remainingTimestampMarginLeft}px`,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          inverse: true
+        },
+        children: remainingTimestamp
+      })
+    })]
+  });
+};
+VideoProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  videoLength: _propTypes.default.number.isRequired,
+  videoCurrentTime: _propTypes.default.number.isRequired,
+  videoBufferEnd: _propTypes.default.number.isRequired,
+  setSeek: _propTypes.default.func.isRequired,
+  resetInactivityTimer: _propTypes.default.func.isRequired
+};
+var _default = exports.default = VideoProgressBar;

package/lib/cjs/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _VideoButton = _interopRequireDefault(require("../VideoButton/VideoButton"));
+var _videoText = _interopRequireDefault(require("../../../videoText"));
+var _utils = require("../../../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const VolumeSliderContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VolumeSlider__VolumeSliderContainer",
+  componentId: "components-web__sc-apixz4-0"
+})(_ref => {
+  let {
+    videoPlayerWidth,
+    compactModeThreshold,
+    margin
+  } = _ref;
+  return {
+    display: 'flex',
+    width: videoPlayerWidth > compactModeThreshold ? '12%' : '20%',
+    maxWidth: 120,
+    margin,
+    alignItems: 'center'
+  };
+});
+const sharedStyles = _ref2 => {
+  let {
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    trackGradientStart,
+    trackGradientEnd
+  } = _ref2;
+  return {
+    thumb: {
+      appearance: 'none',
+      height: thumbHeight,
+      width: thumbWidth,
+      borderRadius: '50%',
+      background: thumbBackground,
+      cursor: 'pointer',
+      marginTop: -3,
+      '&:hover': {
+        transform: 'scale(1.5)'
+      }
+    },
+    track: videoCurrentVolume => ({
+      width: '100%',
+      height: 2,
+      cursor: 'pointer',
+      borderRadius: 1.3,
+      background: `linear-gradient(to right, ${trackGradientStart} 0%, ${trackGradientEnd} ${videoCurrentVolume * 100 - 0.01}%, rgba(255,255,255,0.5) ${videoCurrentVolume * 100}%)`
+    })
+  };
+};
+const StyledVolumeSlider = /*#__PURE__*/_styledComponents.default.input.attrs(_ref3 => {
+  let {
+    videoCurrentVolume
+  } = _ref3;
+  return {
+    value: videoCurrentVolume
+  };
+}).withConfig({
+  displayName: "VolumeSlider__StyledVolumeSlider",
+  componentId: "components-web__sc-apixz4-1"
+})(_ref4 => {
+  let {
+    videoCurrentVolume,
+    rangeBackground,
+    ...sharedProps
+  } = _ref4;
+  return {
+    width: '100%',
+    cursor: 'pointer',
+    padding: '5px 0',
+    'input[type=range]&': {
+      appearance: 'none',
+      width: '100%',
+      background: rangeBackground
+    },
+    'input[type=range]&:focus': {
+      outline: 'none'
+    },
+    'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
+    'input[type=range]&::-moz-range-thumb': {
+      ...sharedStyles.thumb,
+      border: 'none'
+    },
+    'input[type=range]&::-ms-thumb': {
+      ...sharedStyles.thumb,
+      margin: 0,
+      border: 'none'
+    },
+    'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track(videoCurrentVolume),
+    'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoCurrentVolume),
+    'input[type=range]&::-ms-track': {
+      ...sharedStyles(sharedProps).track(videoCurrentVolume),
+      margin: '6px 0',
+      border: 'none'
+    },
+    'input[type=range]&::-ms-fill-lower': {
+      background: 'transparent'
+    },
+    'input[type=range]&::-ms-tooltip': {
+      display: 'none'
+    }
+  };
+});
+const VolumeSlider = _ref5 => {
+  let {
+    setVolume,
+    compactModeThreshold,
+    disableFocus,
+    videoPlayerWidth,
+    videoIsMuted,
+    videoCurrentVolume,
+    copy,
+    toggleMute,
+    resetInactivityTimer,
+    tokens,
+    variant,
+    ...rest
+  } = _ref5;
+  const refVolumeSlider = _react.default.useRef();
+  const {
+    marginLeft,
+    marginRight,
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground,
+    mutedIcon,
+    unmutedIcon
+  } = (0, _componentsBase.useThemeTokens)('VideoVolumeSlider', tokens, variant);
+  const sharedProps = {
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground
+  };
+  const handleVolumeChange = () => setVolume(refVolumeSlider.current.value);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VolumeSliderContainer, {
+    compactModeThreshold: compactModeThreshold,
+    videoPlayerWidth: videoPlayerWidth,
+    margin: `0 ${marginRight}px 0 ${marginLeft}px`,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+      icon: videoIsMuted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+        icon: mutedIcon
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+        icon: unmutedIcon
+      }),
+      label: videoIsMuted ? _videoText.default[copy].unmute : _videoText.default[copy].mute,
+      disableFocus: disableFocus,
+      onClick: toggleMute,
+      onFocus: resetInactivityTimer
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledVolumeSlider, {
+      type: "range",
+      min: "0",
+      max: "1",
+      step: "any",
+      value: videoCurrentVolume,
+      videoCurrentVolume: videoCurrentVolume,
+      ref: refVolumeSlider,
+      onChange: handleVolumeChange,
+      onFocus: resetInactivityTimer,
+      tabIndex: "-1",
+      "aria-label": _videoText.default[copy].volumeSliderLabel,
+      ...sharedProps
+    })]
+  });
+};
+VolumeSlider.propTypes = {
+  ...selectedSystemPropTypes,
+  videoCurrentVolume: _propTypes.default.number.isRequired,
+  setVolume: _propTypes.default.func.isRequired,
+  videoIsMuted: _propTypes.default.bool.isRequired,
+  toggleMute: _propTypes.default.func.isRequired,
+  resetInactivityTimer: _propTypes.default.func.isRequired,
+  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: _propTypes.default.number.isRequired,
+  videoPlayerWidth: _propTypes.default.number.isRequired,
+  disableFocus: _propTypes.default.bool.isRequired
+};
+var _default = exports.default = VolumeSlider;

package/lib/cjs/Video/MiddleControlButton/MiddleControlButton.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const StyledMiddleControlButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "MiddleControlButton__StyledMiddleControlButton",
+  componentId: "components-web__sc-1um2s37-0"
+})(_ref => {
+  let {
+    isHidden,
+    width,
+    height,
+    background
+  } = _ref;
+  return {
+    width,
+    height,
+    borderRadius: '50%',
+    transition: 'opacity 0.4s',
+    opacity: isHidden ? 0 : 1,
+    background,
+    display: 'flex',
+    justifyContent: 'center',
+    border: 'none',
+    padding: 0,
+    font: 'inherit',
+    cursor: 'pointer',
+    alignItems: 'center'
+  };
+});
+const MiddleControlButton = _ref2 => {
+  let {
+    icon: Icon,
+    isHidden = false,
+    onClick,
+    onFocus,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const {
+    width,
+    height,
+    background,
+    iconColor
+  } = (0, _componentsBase.useThemeTokens)('VideoMiddleControlButton', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMiddleControlButton, {
+    isHidden: isHidden,
+    onClick: onClick,
+    onFocus: onFocus,
+    width: width,
+    height: height,
+    background: background,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
+      color: iconColor,
+      size: 24
+    })
+  });
+};
+MiddleControlButton.propTypes = {
+  ...selectedSystemPropTypes,
+  icon: _propTypes.default.elementType.isRequired,
+  isHidden: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  onFocus: _propTypes.default.func
+};
+var _default = exports.default = MiddleControlButton;