@telus-uds/components-web 1.8.0 → 1.10.0

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

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _videoText = _interopRequireDefault(require("../../../videoText"));
+
+var _utils = require("../../../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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,
+    setSeek,
+    resetInactivityTimer,
+    tokens,
+    variant,
+    ...rest
+  } = _ref5;
+  const {
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    timestampMarginLeft,
+    timestampMarginRight,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground
+  } = (0, _componentsBase.useThemeTokens)('VideoProgressBar', tokens, variant);
+
+  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, {
+      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 = VideoProgressBar;
+exports.default = _default;

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

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _VideoButton = _interopRequireDefault(require("../VideoButton/VideoButton"));
+
+var _videoText = _interopRequireDefault(require("../../../videoText"));
+
+var _utils = require("../../../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 = VolumeSlider;
+exports.default = _default;

package/lib/Video/MiddleControlButton/MiddleControlButton.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 = MiddleControlButton;
+exports.default = _default;