@telus-uds/components-web 1.7.0 → 1.9.0

package/src/Video/ControlBar/Controls/VideoMenu/VideoMenu.jsx

@@ -0,0 +1,159 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const MenuContainer = styled.div(({ padding, background }) => ({
+  width: 114,
+  padding,
+  backgroundColor: background,
+  borderRadius: 5
+}))
+
+const MenuButton = styled.button({
+  background: 'none',
+  border: 'none',
+  padding: 0,
+
+  width: '100%',
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'space-between',
+  verticalAlign: 'middle'
+})
+
+const CheckmarkContainer = styled.div(
+  ({
+    isSelectedItem,
+    checkMarkWidth,
+    checkMarkHeight,
+    checkMarkSelectedColor,
+    checkMarkHoverColor,
+    checkMarkFocusColor,
+    checkMarkUnselectedColor
+  }) => ({
+    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 = ({
+  menuLabel,
+  menuOptions,
+  setSelection,
+  selectedItem,
+  copy,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const {
+    padding,
+    background,
+    checkMarkWidth,
+    checkMarkHeight,
+    checkMarkSelectedColor,
+    checkMarkHoverColor,
+    checkMarkFocusColor,
+    checkMarkUnselectedColor,
+    checkMarkIcon
+  } = useThemeTokens('VideoMenu', tokens, variant)
+
+  const getMenuItems = () => {
+    return menuOptions.map((option) => {
+      if (option.name) {
+        return (
+          <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)
+              }
+            }}
+            key={option.value}
+          >
+            <Typography variant={{ bold: true, inverse: true }}>{option.name}</Typography>
+            <CheckmarkContainer
+              isSelectedItem={option.value === selectedItem}
+              checkMarkWidth={checkMarkWidth}
+              checkMarkHeight={checkMarkHeight}
+              checkMarkSelectedColor={checkMarkSelectedColor}
+              checkMarkHoverColor={checkMarkHoverColor}
+              checkMarkFocusColor={checkMarkFocusColor}
+              checkMarkUnselectedColor={checkMarkUnselectedColor}
+            >
+              <Icon icon={checkMarkIcon} />
+            </CheckmarkContainer>
+          </MenuButton>
+        )
+      }
+      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 (
+    <MenuContainer
+      onKeyDown={handleOnKeyDown}
+      padding={padding}
+      background={background}
+      {...selectProps(rest)}
+    >
+      <StackView space={2} divider>
+        <Typography variant={{ bold: true, inverse: true }}>{menuLabel}</Typography>
+        <div role="menu">{getMenuItems()}</div>
+      </StackView>
+    </MenuContainer>
+  )
+}
+
+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/src/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.jsx

@@ -0,0 +1,185 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const ProgressBarContainer = styled.div({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center'
+})
+
+const sharedStyles = ({
+  thumbHeight,
+  thumbWidth,
+  thumbBackground,
+  trackGradientStart,
+  trackGradientEnd
+}) => ({
+  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 = styled.input.attrs(({ videoCurrentTime }) => ({
+  value: videoCurrentTime
+}))(({ videoBufferDisplay, rangeBackground, ...sharedProps }) => ({
+  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 = styled.span(({ margin }) => ({
+  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 = ({
+  copy = 'en',
+  videoLength,
+  videoCurrentTime,
+  videoBufferEnd,
+  setSeek,
+  resetInactivityTimer,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const {
+    thumbHeight,
+    thumbWidth,
+    thumbBackground,
+    timestampMarginLeft,
+    timestampMarginRight,
+    trackGradientStart,
+    trackGradientEnd,
+    rangeBackground
+  } = useThemeTokens('VideoProgressBar', tokens, variant)
+
+  const videoProgressBar = 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 (
+    <ProgressBarContainer {...selectProps(rest)}>
+      <StyledTimestamp margin={`0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`}>
+        <Typography variant={{ inverse: true }}>{currentTimestamp}</Typography>
+      </StyledTimestamp>
+      <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}
+      />
+      <StyledTimestamp>
+        <Typography variant={{ inverse: true }}>{remainingTimestamp}</Typography>
+      </StyledTimestamp>
+    </ProgressBarContainer>
+  )
+}
+
+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/src/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.jsx

@@ -0,0 +1,184 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const VolumeSliderContainer = styled.div(({ videoPlayerWidth, compactModeThreshold, margin }) => ({
+  display: 'flex',
+  width: videoPlayerWidth > compactModeThreshold ? '12%' : '20%',
+  maxWidth: 120,
+  margin,
+  alignItems: 'center'
+}))
+
+const sharedStyles = ({
+  thumbHeight,
+  thumbWidth,
+  thumbBackground,
+  trackGradientStart,
+  trackGradientEnd
+}) => ({
+  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 = styled.input.attrs(({ videoCurrentVolume }) => ({
+  value: videoCurrentVolume
+}))(({ videoCurrentVolume, rangeBackground, ...sharedProps }) => {
+  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 = ({
+  setVolume,
+  compactModeThreshold,
+  disableFocus,
+  videoPlayerWidth,
+  videoIsMuted,
+  videoCurrentVolume,
+  copy,
+  toggleMute,
+  resetInactivityTimer,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  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 (
+    <VolumeSliderContainer
+      compactModeThreshold={compactModeThreshold}
+      videoPlayerWidth={videoPlayerWidth}
+      margin={`0 ${marginRight}px 0 ${marginLeft}px`}
+      {...selectProps(rest)}
+    >
+      <VideoButton
+        icon={videoIsMuted ? <Icon icon={mutedIcon} /> : <Icon icon={unmutedIcon} />}
+        label={videoIsMuted ? videoText[copy].unmute : videoText[copy].mute}
+        disableFocus={disableFocus}
+        onClick={toggleMute}
+        onFocus={resetInactivityTimer}
+      />
+      <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}
+      />
+    </VolumeSliderContainer>
+  )
+}
+
+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/src/Video/MiddleControlButton/MiddleControlButton.jsx

@@ -0,0 +1,64 @@
+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'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledMiddleControlButton = styled.button(({ isHidden, width, height, background }) => ({
+  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 = ({
+  icon: Icon,
+  isHidden = false,
+  onClick,
+  onFocus,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const { width, height, background, iconColor } = useThemeTokens(
+    'VideoMiddleControlButton',
+    tokens,
+    variant
+  )
+
+  return (
+    <StyledMiddleControlButton
+      isHidden={isHidden}
+      onClick={onClick}
+      onFocus={onFocus}
+      width={width}
+      height={height}
+      background={background}
+      {...selectProps(rest)}
+    >
+      <Icon color={iconColor} size={24} />
+    </StyledMiddleControlButton>
+  )
+}
+
+MiddleControlButton.propTypes = {
+  ...selectedSystemPropTypes,
+  icon: PropTypes.elementType.isRequired,
+  isHidden: PropTypes.bool,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func
+}
+
+export default MiddleControlButton