@telus-uds/components-web 1.8.0 → 1.9.0

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