@telus-uds/components-web 1.8.0 → 1.10.0

package/src/Toast/Toast.jsx

@@ -67,11 +67,16 @@ const animation = (props) => css`
     animation: ${transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter)}
       1s ease-in-out 3s forwards;
   }
+  & > a div {
+    animation: ${transform('color')(props.animationFillColorBefore, props.animationFillColorAfter)}
+      1s ease-in-out 3s forwards;
+  }
 `
 
 const ToastContainer = styled.div`
   display: flex;
   justify-content: center;
+  align-items: center;
   background: ${({ containerBackgroundColor }) => containerBackgroundColor};
   gap: ${({ containerGap }) => containerGap};
   height: 0;
@@ -92,11 +97,13 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter,
-    animationFillColorBefore,
-    animationFillColorAfter
+    animationColorAfter
   } = useThemeTokens('Toast', tokens, variant)
 
+  // inherit ChevronLink tokens for animation colors
+  const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
+  const { color: chevronInverseColor } = useThemeTokens('ChevronLink', {}, { inverse: true })
+
   if (!toast) {
     return null
   }
@@ -115,8 +122,8 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
       animationBackgroundColorAfter={animationBackgroundColorAfter}
       animationColorBefore={animationColorBefore}
       animationColorAfter={animationColorAfter}
-      animationFillColorBefore={animationFillColorBefore}
-      animationFillColorAfter={animationFillColorAfter}
+      animationFillColorBefore={chevronInverseColor}
+      animationFillColorAfter={chevronDefaultColor}
       {...selectProps(rest)}
     >
       {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}

package/src/Video/ControlBar/ControlBar.jsx

@@ -0,0 +1,261 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+
+import { StackView, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base'
+
+import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar'
+import VolumeSlider from './Controls/VolumeSlider/VolumeSlider'
+import VideoButton from './Controls/VideoButton/VideoButton'
+import VideoMenu from './Controls/VideoMenu/VideoMenu'
+
+import videoText from '../videoText'
+import { htmlAttrs } from '../../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const getIcon = (icon) => <Icon icon={icon} />
+
+const ControlBarContainer = styled.div(({ isHidden, isMobile }) => ({
+  width: '100%',
+  position: 'relative',
+  transition: 'opacity 0.4s',
+  opacity: isHidden ? 0 : 1,
+  display: isMobile ? 'none' : undefined
+}))
+
+const StyledControlBar = styled.div(({ padding }) => ({
+  boxSizing: 'border-box',
+  position: 'absolute',
+  width: '100%',
+  height: 56,
+  padding,
+  bottom: 0,
+  backgroundColor: 'rgba(42, 44, 46, 0.85)', // TODO: replace with opaque greyThunder
+  margin: 'auto',
+  display: 'flex',
+  justifyContent: 'space-between',
+  zIndex: 9
+}))
+
+const VideoProgressBarContainer = styled.div({
+  display: 'flex',
+  flexGrow: 1
+})
+
+const MenuContainer = styled.div(({ isOpen, menuBottom, menuRight, menuMarginLeft }) => ({
+  position: 'absolute',
+  bottom: menuBottom,
+  right: menuRight,
+  display: isOpen ? 'block' : 'none',
+  marginLeft: menuMarginLeft
+}))
+
+const ControlBar = ({
+  videoPlayer,
+  videoPlayerContainer,
+  sources,
+  tracks,
+  videoPlaying,
+  videoUnplayed,
+  videoBufferEnd,
+  isHidden = false,
+  videoLength,
+  videoCurrentTime,
+  videoCurrentVolume,
+  videoIsMuted,
+  setVolume,
+  isMobile,
+  tracksAvailable,
+  togglePlayPause,
+  setSeek,
+  toggleMute,
+  toggleFullscreen,
+  videoIsFullscreen,
+  setTextTracks,
+  selectedTextTrack,
+  resetInactivityTimer,
+  videoQuality,
+  setVideoQuality,
+  captionsMenuOpen,
+  setCaptionsMenuOpen,
+  qualityMenuOpen,
+  setQualityMenuOpen,
+  clearInactivityTimer,
+  copy,
+  compactModeThreshold,
+  videoPlayerWidth,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft: paddingLeftDefault,
+    paddingRight: paddingRightDefault,
+    paddingLeftCompactMode,
+    paddingRightCompactMode,
+    menuBottom,
+    menuRight,
+    menuMarginLeft,
+    captionsIcon,
+    settingsIcon,
+    minimizeIcon,
+    maximizeIcon
+  } = useThemeTokens('VideoControlBar', tokens, variant)
+
+  const parseVideoQuality = () => {
+    return sources.map((source) => {
+      if (!source.isFallback) {
+        return { name: source.qualityName, value: source.qualityRank }
+      }
+      return {}
+    })
+  }
+
+  const parseTracks = () => {
+    const parsed = tracks.map((track, trackNumber) => {
+      return { name: videoText[copy][track.language], value: trackNumber }
+    })
+    parsed.unshift({ name: videoText[copy].captionsNone, value: -1 })
+    return parsed
+  }
+
+  const paddingLeft =
+    videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode
+  const paddingRight =
+    videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode
+  const menuContainerStyleProps = { menuBottom, menuRight, menuMarginLeft }
+
+  return (
+    <ControlBarContainer isHidden={isHidden} isMobile={isMobile} {...selectProps(rest)}>
+      <StyledControlBar
+        padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+      >
+        <VideoProgressBarContainer>
+          <VideoProgressBar
+            copy={copy}
+            videoPlayer={videoPlayer}
+            videoLength={videoLength}
+            videoCurrentTime={videoCurrentTime}
+            videoBufferEnd={videoBufferEnd}
+            setSeek={setSeek}
+            resetInactivityTimer={resetInactivityTimer}
+          />
+        </VideoProgressBarContainer>
+
+        <VolumeSlider
+          videoPlayer={videoPlayer}
+          videoCurrentVolume={videoCurrentVolume}
+          setVolume={setVolume}
+          videoIsMuted={videoIsMuted}
+          toggleMute={toggleMute}
+          resetInactivityTimer={resetInactivityTimer}
+          copy={copy}
+          compactModeThreshold={compactModeThreshold}
+          videoPlayerWidth={videoPlayerWidth}
+          disableFocus={videoUnplayed}
+        />
+
+        <StackView space={3} direction="row">
+          {tracksAvailable && (
+            <VideoButton
+              disableFocus={videoUnplayed}
+              label={videoText[copy].captionsToggle}
+              icon={getIcon(captionsIcon)}
+              onClick={() => {
+                setCaptionsMenuOpen(!captionsMenuOpen)
+                setQualityMenuOpen(false)
+                clearInactivityTimer()
+              }}
+              onFocus={resetInactivityTimer}
+              onBlur={resetInactivityTimer}
+            />
+          )}
+          <VideoButton
+            disableFocus={videoUnplayed}
+            label={videoText[copy].qualityToggle}
+            icon={getIcon(settingsIcon)}
+            onClick={() => {
+              setQualityMenuOpen(!qualityMenuOpen)
+              setCaptionsMenuOpen(false)
+              clearInactivityTimer()
+            }}
+            onFocus={resetInactivityTimer}
+            onBlur={resetInactivityTimer}
+          />
+          <VideoButton
+            disableFocus={videoUnplayed}
+            label={videoText[copy].fullScreenToggle}
+            icon={videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon)}
+            onClick={toggleFullscreen}
+            onFocus={resetInactivityTimer}
+            onBlur={resetInactivityTimer}
+          />
+        </StackView>
+        {captionsMenuOpen && (
+          <MenuContainer isOpen={captionsMenuOpen} {...menuContainerStyleProps}>
+            <VideoMenu
+              menuLabel={videoText[copy].captionsDialogue}
+              menuOptions={parseTracks()}
+              setSelection={setTextTracks}
+              selectedItem={selectedTextTrack}
+              copy={copy}
+            />
+          </MenuContainer>
+        )}
+        {qualityMenuOpen && (
+          <MenuContainer isOpen={qualityMenuOpen} {...menuContainerStyleProps}>
+            <VideoMenu
+              menuLabel={videoText[copy].qualityDialogue}
+              menuOptions={parseVideoQuality()}
+              setSelection={setVideoQuality}
+              selectedItem={videoQuality}
+              copy={copy}
+            />
+          </MenuContainer>
+        )}
+      </StyledControlBar>
+    </ControlBarContainer>
+  )
+}
+
+ControlBar.propTypes = {
+  ...selectedSystemPropTypes,
+  videoPlayer: PropTypes.object.isRequired,
+  videoPlayerContainer: PropTypes.object.isRequired,
+  sources: PropTypes.array.isRequired,
+  tracks: PropTypes.array,
+  videoPlaying: PropTypes.bool.isRequired,
+  videoUnplayed: PropTypes.bool.isRequired,
+  videoBufferEnd: PropTypes.number.isRequired,
+  isHidden: PropTypes.bool,
+  videoLength: PropTypes.number.isRequired,
+  videoCurrentTime: PropTypes.number.isRequired,
+  videoCurrentVolume: PropTypes.number.isRequired,
+  videoIsMuted: PropTypes.bool.isRequired,
+  setVolume: PropTypes.func.isRequired,
+  isMobile: PropTypes.bool.isRequired,
+  tracksAvailable: PropTypes.bool.isRequired,
+  togglePlayPause: PropTypes.func.isRequired,
+  setSeek: PropTypes.func.isRequired,
+  toggleMute: PropTypes.func.isRequired,
+  toggleFullscreen: PropTypes.func.isRequired,
+  videoIsFullscreen: PropTypes.bool.isRequired,
+  setTextTracks: PropTypes.func.isRequired,
+  selectedTextTrack: PropTypes.number.isRequired,
+  resetInactivityTimer: PropTypes.func.isRequired,
+  videoQuality: PropTypes.number.isRequired,
+  setVideoQuality: PropTypes.func.isRequired,
+  captionsMenuOpen: PropTypes.bool.isRequired,
+  setCaptionsMenuOpen: PropTypes.func.isRequired,
+  qualityMenuOpen: PropTypes.bool.isRequired,
+  setQualityMenuOpen: PropTypes.func.isRequired,
+  clearInactivityTimer: PropTypes.func.isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: PropTypes.number.isRequired,
+  videoPlayerWidth: PropTypes.number.isRequired
+}
+
+export default ControlBar

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

@@ -0,0 +1,61 @@
+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 StyledButton = styled.button(({ color }) => ({
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'stretch',
+  'svg path': {
+    fill: color
+  }
+}))
+
+const VideoButton = ({ icon, label, disableFocus, children, tokens, variant, ...rest }) => {
+  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) => {
+    event.preventDefault()
+    rest.onClick?.(event)
+  }
+
+  return (
+    <StyledButton
+      aria-label={label}
+      onKeyDown={handleOnKeyDown}
+      tabIndex={disableFocus ? '-1' : undefined}
+      color={color}
+      {...selectProps(rest)}
+      onClick={handleClick}
+    >
+      {icon}
+      {children}
+    </StyledButton>
+  )
+}
+
+VideoButton.propTypes = {
+  ...selectedSystemPropTypes,
+  icon: PropTypes.element.isRequired,
+  label: PropTypes.string.isRequired,
+  disableFocus: PropTypes.bool.isRequired,
+  children: PropTypes.node
+}
+
+export default VideoButton

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