@telus-uds/components-web 2.43.0 → 3.0.0

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

@@ -1,203 +0,0 @@
-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,
-    playing,
-    setSeek,
-    resetInactivityTimer,
-    tokens,
-    variant,
-    ...rest
-  } = _ref5;
-  const {
-    thumbHeight,
-    thumbWidth,
-    thumbBackground,
-    timestampMarginLeft,
-    timestampMarginRight,
-    trackGradientStart,
-    trackGradientEnd,
-    rangeBackground
-  } = useThemeTokens('VideoProgressBar', tokens, variant, {
-    playing
-  });
-  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

@@ -1,191 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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;