@telus-uds/components-web 1.8.0 → 1.9.0

package/lib-module/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../../../../utils';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "VideoButton__StyledButton",
+  componentId: "components-web__sc-kfw0tr-0"
+})(_ref => {
+  let {
+    color
+  } = _ref;
+  return {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'stretch',
+    'svg path': {
+      fill: color
+    }
+  };
+});
+
+const VideoButton = _ref2 => {
+  let {
+    icon,
+    label,
+    disableFocus,
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const {
+    color
+  } = useThemeTokens('VideoButton', tokens, variant);
+
+  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();
+    }
+  };
+
+  const handleClick = event => {
+    var _rest$onClick;
+
+    event.preventDefault();
+    (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
+  };
+
+  return /*#__PURE__*/_jsxs(StyledButton, {
+    "aria-label": label,
+    onKeyDown: handleOnKeyDown,
+    tabIndex: disableFocus ? '-1' : undefined,
+    color: color,
+    ...selectProps(rest),
+    onClick: handleClick,
+    children: [icon, children]
+  });
+};
+
+VideoButton.propTypes = { ...selectedSystemPropTypes,
+  icon: PropTypes.element.isRequired,
+  label: PropTypes.string.isRequired,
+  disableFocus: PropTypes.bool.isRequired,
+  children: PropTypes.node
+};
+export default VideoButton;

package/lib-module/Video/ControlBar/Controls/VideoMenu/VideoMenu.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { StackView, Typography, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base';
+import videoText from '../../../videoText';
+import { htmlAttrs } from '../../../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const MenuContainer = /*#__PURE__*/styled.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__*/styled.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__*/styled.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
+  } = useThemeTokens('VideoMenu', tokens, variant);
+
+  const getMenuItems = () => {
+    return menuOptions.map(option => {
+      if (option.name) {
+        return /*#__PURE__*/_jsxs(MenuButton, {
+          "aria-haspopup": "true",
+          role: "menuitem",
+          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? videoText[copy].itemSelected : videoText[copy].itemUnselected}`,
+          selectedItem: selectedItem,
+          itemValue: option.value,
+          onClick: () => {
+            if (selectedItem !== option.value) {
+              setSelection(option.value);
+            }
+          },
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: {
+              bold: true,
+              inverse: true
+            },
+            children: option.name
+          }), /*#__PURE__*/_jsx(CheckmarkContainer, {
+            isSelectedItem: option.value === selectedItem,
+            checkMarkWidth: checkMarkWidth,
+            checkMarkHeight: checkMarkHeight,
+            checkMarkSelectedColor: checkMarkSelectedColor,
+            checkMarkHoverColor: checkMarkHoverColor,
+            checkMarkFocusColor: checkMarkFocusColor,
+            checkMarkUnselectedColor: checkMarkUnselectedColor,
+            children: /*#__PURE__*/_jsx(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__*/_jsx(MenuContainer, {
+    onKeyDown: handleOnKeyDown,
+    padding: padding,
+    background: background,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsxs(StackView, {
+      space: 2,
+      divider: true,
+      children: [/*#__PURE__*/_jsx(Typography, {
+        variant: {
+          bold: true,
+          inverse: true
+        },
+        children: menuLabel
+      }), /*#__PURE__*/_jsx("div", {
+        role: "menu",
+        children: getMenuItems()
+      })]
+    })
+  });
+};
+
+VideoMenu.propTypes = { ...selectedSystemPropTypes,
+  menuLabel: PropTypes.string.isRequired,
+  menuOptions: PropTypes.array.isRequired,
+  setSelection: PropTypes.func.isRequired,
+  selectedItem: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired
+};
+export default VideoMenu;

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Typography, useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import videoText from '../../../videoText';
+import { htmlAttrs } from '../../../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const ProgressBarContainer = /*#__PURE__*/styled.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__*/styled.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__*/styled.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
+  } = useThemeTokens('VideoProgressBar', tokens, variant);
+  const videoProgressBar = /*#__PURE__*/React.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__*/_jsxs(ProgressBarContainer, { ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(StyledTimestamp, {
+      margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          inverse: true
+        },
+        children: currentTimestamp
+      })
+    }), /*#__PURE__*/_jsx(StyledProgressBar, {
+      "aria-label": videoText[copy].videoProgressBarLabel,
+      type: "range",
+      step: "any",
+      max: videoLength,
+      videoCurrentTime: videoCurrentTime,
+      onChange: handleVideoSkip,
+      onFocus: resetInactivityTimer,
+      videoBufferDisplay: videoBufferDisplay,
+      ref: videoProgressBar,
+      tabIndex: "-1",
+      ...sharedProps
+    }), /*#__PURE__*/_jsx(StyledTimestamp, {
+      children: /*#__PURE__*/_jsx(Typography, {
+        variant: {
+          inverse: true
+        },
+        children: remainingTimestamp
+      })
+    })]
+  });
+};
+
+VideoProgressBar.propTypes = { ...selectedSystemPropTypes,
+  copy: PropTypes.oneOf(['en', 'fr']),
+  videoLength: PropTypes.number.isRequired,
+  videoCurrentTime: PropTypes.number.isRequired,
+  videoBufferEnd: PropTypes.number.isRequired,
+  setSeek: PropTypes.func.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired
+};
+export default VideoProgressBar;

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

@@ -0,0 +1,193 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { Icon, useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import VideoButton from '../VideoButton/VideoButton';
+import videoText from '../../../videoText';
+import { htmlAttrs } from '../../../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const VolumeSliderContainer = /*#__PURE__*/styled.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__*/styled.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.useRef();
+  const {
+    marginLeft,
+    marginRight,
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground,
+    mutedIcon,
+    unmutedIcon
+  } = useThemeTokens('VideoVolumeSlider', tokens, variant);
+  const sharedProps = {
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground
+  };
+
+  const handleVolumeChange = () => setVolume(refVolumeSlider.current.value);
+
+  return /*#__PURE__*/_jsxs(VolumeSliderContainer, {
+    compactModeThreshold: compactModeThreshold,
+    videoPlayerWidth: videoPlayerWidth,
+    margin: `0 ${marginRight}px 0 ${marginLeft}px`,
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(VideoButton, {
+      icon: videoIsMuted ? /*#__PURE__*/_jsx(Icon, {
+        icon: mutedIcon
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: unmutedIcon
+      }),
+      label: videoIsMuted ? videoText[copy].unmute : videoText[copy].mute,
+      disableFocus: disableFocus,
+      onClick: toggleMute,
+      onFocus: resetInactivityTimer
+    }), /*#__PURE__*/_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[copy].volumeSliderLabel,
+      ...sharedProps
+    })]
+  });
+};
+
+VolumeSlider.propTypes = { ...selectedSystemPropTypes,
+  videoCurrentVolume: PropTypes.number.isRequired,
+  setVolume: PropTypes.func.isRequired,
+  videoIsMuted: PropTypes.bool.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: PropTypes.number.isRequired,
+  videoPlayerWidth: PropTypes.number.isRequired,
+  disableFocus: PropTypes.bool.isRequired
+};
+export default VolumeSlider;

package/lib-module/Video/MiddleControlButton/MiddleControlButton.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { useThemeTokens, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledMiddleControlButton = /*#__PURE__*/styled.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
+  } = useThemeTokens('VideoMiddleControlButton', tokens, variant);
+  return /*#__PURE__*/_jsx(StyledMiddleControlButton, {
+    isHidden: isHidden,
+    onClick: onClick,
+    onFocus: onFocus,
+    width: width,
+    height: height,
+    background: background,
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(Icon, {
+      color: iconColor,
+      size: 24
+    })
+  });
+};
+
+MiddleControlButton.propTypes = { ...selectedSystemPropTypes,
+  icon: PropTypes.elementType.isRequired,
+  isHidden: PropTypes.bool,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func
+};
+export default MiddleControlButton;