@telus-uds/components-web 2.33.2 → 2.34.1

package/src/Toast/Toast.jsx

@@ -90,74 +90,79 @@ const ToastContainer = styled.div`
   animation: ${animation};
 `
 
-const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) => {
-  // viewport hook added to work adjust the padding to different sizes
-  const viewport = useViewport()
+const Toast = React.forwardRef(
+  ({ toast, copy, headline, link, tokens, variant = {}, ...rest }, ref) => {
+    // viewport hook added to work adjust the padding to different sizes
+    const viewport = useViewport()
 
-  const {
-    containerBackgroundColor,
-    containerGap,
-    animationHeightBefore,
-    animationHeightAfter,
-    animationPaddingBottomBefore,
-    animationPaddingBottomAfter,
-    animationPaddingTopBefore,
-    animationPaddingTopAfter,
-    animationBackgroundColorBefore,
-    animationBackgroundColorAfter,
-    animationColorBefore,
-    animationColorAfter,
-    chevronlinkFontWeight,
-    ...extraTokens
-  } = useThemeTokens('Toast', tokens, variant, { viewport })
+    const {
+      containerBackgroundColor,
+      containerGap,
+      animationHeightBefore,
+      animationHeightAfter,
+      animationPaddingBottomBefore,
+      animationPaddingBottomAfter,
+      animationPaddingTopBefore,
+      animationPaddingTopAfter,
+      animationBackgroundColorBefore,
+      animationBackgroundColorAfter,
+      animationColorBefore,
+      animationColorAfter,
+      chevronlinkFontWeight,
+      ...extraTokens
+    } = useThemeTokens('Toast', tokens, variant, { viewport })
 
-  // inherit ChevronLink tokens for animation colors
-  const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
-  const { color: chevronInverseColor } = useThemeTokens('ChevronLink', {}, { inverse: true })
+    // inherit ChevronLink tokens for animation colors
+    const { color: chevronDefaultColor } = useThemeTokens('ChevronLink', {}, {})
+    const { color: chevronInverseColor } = useThemeTokens('ChevronLink', {}, { inverse: true })
 
-  if (!toast) {
-    return null
+    if (!toast) {
+      return null
+    }
+
+    return (
+      <ToastContainer
+        containerBackgroundColor={containerBackgroundColor}
+        containerGap={containerGap}
+        animationHeightBefore={animationHeightBefore}
+        animationHeightAfter={animationHeightAfter}
+        animationPaddingBottomBefore={animationPaddingBottomBefore}
+        animationPaddingBottomAfter={animationPaddingBottomAfter}
+        animationPaddingTopBefore={animationPaddingTopBefore}
+        animationPaddingTopAfter={animationPaddingTopAfter}
+        animationBackgroundColorBefore={animationBackgroundColorBefore}
+        animationBackgroundColorAfter={animationBackgroundColorAfter}
+        animationColorBefore={animationColorBefore}
+        animationColorAfter={animationColorAfter}
+        animationFillColorBefore={chevronInverseColor}
+        animationFillColorAfter={chevronDefaultColor}
+        ref={ref}
+        {...extraTokens}
+        {...selectProps(rest)}
+      >
+        {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}
+        <Spacer space={2} direction="row" />
+        <Typography variant={{ inverse: true }}>{copy}</Typography>
+        <Spacer space={2} direction="row" />
+        {link && (
+          <ChevronLink
+            variant={{
+              inverse: true
+            }}
+            tokens={{ blockFontWeight: chevronlinkFontWeight }}
+            href={link.href}
+            LinkRouter={link.LinkRouter}
+            linkRouterProps={link.linkRouterProps}
+          >
+            {link.text}
+          </ChevronLink>
+        )}
+      </ToastContainer>
+    )
   }
+)
 
-  return (
-    <ToastContainer
-      containerBackgroundColor={containerBackgroundColor}
-      containerGap={containerGap}
-      animationHeightBefore={animationHeightBefore}
-      animationHeightAfter={animationHeightAfter}
-      animationPaddingBottomBefore={animationPaddingBottomBefore}
-      animationPaddingBottomAfter={animationPaddingBottomAfter}
-      animationPaddingTopBefore={animationPaddingTopBefore}
-      animationPaddingTopAfter={animationPaddingTopAfter}
-      animationBackgroundColorBefore={animationBackgroundColorBefore}
-      animationBackgroundColorAfter={animationBackgroundColorAfter}
-      animationColorBefore={animationColorBefore}
-      animationColorAfter={animationColorAfter}
-      animationFillColorBefore={chevronInverseColor}
-      animationFillColorAfter={chevronDefaultColor}
-      {...extraTokens}
-      {...selectProps(rest)}
-    >
-      {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}
-      <Spacer space={2} direction="row" />
-      <Typography variant={{ inverse: true }}>{copy}</Typography>
-      <Spacer space={2} direction="row" />
-      {link && (
-        <ChevronLink
-          variant={{
-            inverse: true
-          }}
-          tokens={{ blockFontWeight: chevronlinkFontWeight }}
-          href={link.href}
-          LinkRouter={link.LinkRouter}
-          linkRouterProps={link.linkRouterProps}
-        >
-          {link.text}
-        </ChevronLink>
-      )}
-    </ToastContainer>
-  )
-}
+Toast.displayName = 'Toast'
 
 Toast.propTypes = {
   ...selectedSystemPropTypes,

package/src/Video/Video.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import fscreen from 'fscreen'
@@ -62,26 +62,29 @@ const VideoOverlayElementContainer = styled.div({
   height: '100%'
 })
 
-const Video = (props) => {
-  const refVideoPlayer = useRef({})
-  const refVideoPlayerContainer = useRef({})
-  const refKeyboardInstructions = useRef({})
+const Video = ({
+  analyticsTracking,
+  videoTitle,
+  videoBorder = false,
+  simpleMode = false,
+  copy,
+  posterSrc,
+  crossOrigin,
+  defaultVolume = 100,
+  beginMuted = false,
+  sources,
+  tracks,
+  defaultDesktopQuality = 1,
+  defaultMobileQuality = 1,
+  tokens,
+  variant = {},
+  ...rest
+}) => {
+  const refVideoPlayer = React.useRef({})
+  const refVideoPlayerContainer = React.useRef({})
+  const refKeyboardInstructions = React.useRef({})
 
   let inactivityTimer = null
-  const {
-    videoBorder,
-    simpleMode,
-    copy,
-    posterSrc,
-    crossOrigin,
-    defaultVolume,
-    sources,
-    tracks,
-    defaultDesktopQuality,
-    tokens,
-    variant = {},
-    ...rest
-  } = props
 
   const { borderColor, pauseIcon, playIcon, replayIcon } = useThemeTokens('Video', tokens, variant)
 
@@ -92,7 +95,7 @@ const Video = (props) => {
     compactModeThreshold: 700 // in px
   }
 
-  const [videoPlayerState, setVideoPlayerState] = useState({
+  const [videoPlayerState, setVideoPlayerState] = React.useState({
     loadedSources: null,
     loadedTracks: null,
     videoLength: 0,
@@ -145,7 +148,6 @@ const Video = (props) => {
   }
 
   const refreshMedia = () => {
-    const { defaultMobileQuality } = props
     const { videoUnplayed } = videoPlayerState
 
     // Handle mobile check
@@ -213,7 +215,6 @@ const Video = (props) => {
   // required for analytics
   const calculatePercentageWatched = () => {
     const { videoCurrentTime, videoLength, percentageWatched } = videoPlayerState
-    const { videoTitle, analyticsTracking } = props
 
     let percentValue = (videoCurrentTime / videoLength) * 100
     percentValue = Math.round(percentValue)
@@ -230,7 +231,6 @@ const Video = (props) => {
 
   const setPlaying = async (isPlaying) => {
     const videoPlayer = refVideoPlayer.current
-    const { analyticsTracking, videoTitle } = props
 
     if (isPlaying) {
       await videoPlayer.play()
@@ -248,7 +248,6 @@ const Video = (props) => {
   }
 
   const updateAnalyticsData = () => {
-    const { videoTitle, analyticsTracking } = props
     const { videoIsPlaying, percentageWatched } = videoPlayerState
 
     const analyticsObject = { name: 'video tracking', details: videoTitle }
@@ -357,8 +356,6 @@ const Video = (props) => {
       videoQualityChanged: false
     }))
 
-    const { analyticsTracking } = props
-
     if (analyticsTracking) {
       updateAnalyticsData()
     }
@@ -370,8 +367,6 @@ const Video = (props) => {
     clearInactivityTimer()
     setVideoPlayerState((prevState) => ({ ...prevState, videoIsPlaying: false }))
 
-    const { analyticsTracking } = props
-
     if (analyticsTracking) {
       updateAnalyticsData()
     }
@@ -655,18 +650,16 @@ const Video = (props) => {
   }
 
   // Prepares video and caption files
-  useEffect(() => {
+  React.useEffect(() => {
     refreshMedia()
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   // Initial Setup after loading sources
-  useEffect(() => {
+  React.useEffect(() => {
     const { loadedSources, loadedTracks } = videoPlayerState
 
     if (loadedSources && loadedTracks) {
-      const { beginMuted, analyticsTracking, videoTitle } = props
-
       const videoPlayer = refVideoPlayer.current
 
       // Initializes Settings
@@ -979,17 +972,4 @@ Video.propTypes = {
   variant: variantProp.propType
 }
 
-Video.defaultProps = {
-  tracks: undefined,
-  defaultVolume: 100,
-  beginMuted: false,
-  defaultMobileQuality: 1,
-  defaultDesktopQuality: 1,
-  crossOrigin: undefined,
-  simpleMode: false,
-  videoBorder: false,
-  analyticsTracking: undefined,
-  videoTitle: undefined
-}
-
 export default Video

package/src/VideoPicker/VideoPicker.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { viewports } from '@telus-uds/system-constants'
 import {
@@ -66,79 +66,100 @@ const VideoListContainer = styled.div`
   ${(props) => props.isFramed && framedVideoListContainerStyle}
 `
 
-const VideoPicker = ({
-  videoList = [],
-  selectedVideo = videoList[0]?.videoId,
-  frame,
-  onStartVideo = () => {},
-  onSelectVideo = () => {},
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const { stackViewDividerColor, ...themeTokens } = useThemeTokens('VideoPicker')
-  const [currentVideoId, setCurrentVideoId] = useState(selectedVideo)
-  const videoPlayerRef = useRef(null)
-
-  const currentVideo = videoList.find((video) => video.videoId === currentVideoId)
-  useEffect(() => {
-    // Update current video if parent changes which video id it passes down
-    setCurrentVideoId(selectedVideo)
-  }, [selectedVideo])
-
-  // `frame` variant should only work on larger screens
-  const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport)
-
-  const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
-
-  const listElements = videoList.map((video, index) => (
-    <VideoPickerThumbnail
-      key={video.videoId}
-      video={video}
-      videoPlayerRef={videoPlayerRef}
-      selectedVideoId={currentVideoId}
-      onSelectVideo={(current) => {
-        setCurrentVideoId(current.videoId)
-        onSelectVideo(current)
-      }}
-      layout={!hasSlider ? 'horizontal' : 'vertical'}
-      index={index}
-      isFramed={isFramed}
-    />
-  ))
-
-  return (
-    <VideoPickerContainer isFramed={isFramed} {...selectProps(rest)} {...themeTokens}>
-      <StackView
-        divider={
-          isFramed
-            ? { tokens: { color: stackViewDividerColor } }
-            : { variant: { decorative: true } }
-        }
-        space={isFramed ? 0 : 4} // everything has internal padding in `frame` variant
-        direction={isFramed ? 'row' : 'column'}
-      >
-        <VideoPlayerContainer {...themeTokens} isFramed={isFramed}>
-          <VideoPickerPlayer
-            video={currentVideo}
-            videoPlayerRef={videoPlayerRef}
-            onStartVideo={onStartVideo}
-          />
-        </VideoPlayerContainer>
-        {hasSlider ? (
-          <VideoSlider>{listElements}</VideoSlider>
-        ) : (
-          <VideoListContainer
-            viewport={viewport}
-            data-testid="video-list-container"
-            isFramed={isFramed}
-          >
-            {listElements}
-          </VideoListContainer>
-        )}
-      </StackView>
-    </VideoPickerContainer>
-  )
-}
+const VideoPicker = React.forwardRef(
+  (
+    {
+      videoList = [],
+      selectedVideo = videoList[0]?.videoId,
+      frame,
+      onStartVideo = () => {},
+      onSelectVideo = () => {},
+      onPlay = () => {},
+      onPause = () => {},
+      onProgress = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const { stackViewDividerColor, ...themeTokens } = useThemeTokens('VideoPicker')
+    const [currentVideoId, setCurrentVideoId] = React.useState(selectedVideo)
+    const videoPlayerRef = React.useRef(null)
+
+    const currentVideo = videoList.find((video) => video.videoId === currentVideoId)
+
+    React.useEffect(() => {
+      // Update current video if parent changes which video id it passes down
+      setCurrentVideoId(selectedVideo)
+    }, [selectedVideo])
+
+    const addVideoEventHandlers = (video) => {
+      if (!video) return {}
+      return {
+        ...video,
+        onPlay: video.onPlay || onPlay,
+        onPause: video.onPause || onPause,
+        onProgress: video.onProgress || onProgress
+      }
+    }
+
+    // `frame` variant should only work on larger screens
+    const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport)
+
+    const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
+
+    const listElements = videoList.map((video, index) => (
+      <VideoPickerThumbnail
+        key={video.videoId}
+        video={video}
+        videoPlayerRef={videoPlayerRef}
+        selectedVideoId={currentVideoId}
+        onSelectVideo={(current) => {
+          setCurrentVideoId(current.videoId)
+          onSelectVideo(current)
+        }}
+        layout={!hasSlider ? 'horizontal' : 'vertical'}
+        index={index}
+        isFramed={isFramed}
+      />
+    ))
+
+    return (
+      <VideoPickerContainer ref={ref} isFramed={isFramed} {...selectProps(rest)} {...themeTokens}>
+        <StackView
+          divider={
+            isFramed
+              ? { tokens: { color: stackViewDividerColor } }
+              : { variant: { decorative: true } }
+          }
+          space={isFramed ? 0 : 4} // everything has internal padding in `frame` variant
+          direction={isFramed ? 'row' : 'column'}
+        >
+          <VideoPlayerContainer {...themeTokens} isFramed={isFramed}>
+            <VideoPickerPlayer
+              video={addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress)}
+              videoPlayerRef={videoPlayerRef}
+              onStartVideo={onStartVideo}
+            />
+          </VideoPlayerContainer>
+          {hasSlider ? (
+            <VideoSlider>{listElements}</VideoSlider>
+          ) : (
+            <VideoListContainer
+              viewport={viewport}
+              data-testid="video-list-container"
+              isFramed={isFramed}
+            >
+              {listElements}
+            </VideoListContainer>
+          )}
+        </StackView>
+      </VideoPickerContainer>
+    )
+  }
+)
+
+VideoPicker.displayName = 'VideoPicker'
 
 VideoPicker.propTypes = {
   ...selectedSystemPropTypes,
@@ -164,7 +185,25 @@ VideoPicker.propTypes = {
    * Callback function trigerred when a video is selected from the thumbnail list.
    * @param {object} video - The video object that is selected.
    */
-  onSelectVideo: PropTypes.func
+  onSelectVideo: PropTypes.func,
+
+  /**
+   * Callback function trigerred during progress milestones 10% 25% 50% 75% 100%.
+   * @param {object} event - The event object.
+   */
+  onProgress: PropTypes.func,
+
+  /**
+   * Callback function trigerred when the video player starts playing video.
+   * @param {object} event - The event object.
+   */
+  onPlay: PropTypes.func,
+
+  /**
+   * Callback function trigerred when the video gets paused.
+   * @param {object} event - The event object.
+   */
+  onPause: PropTypes.func
 }
 
 export default VideoPicker

package/src/VideoPicker/VideoPickerPlayer.jsx

@@ -4,18 +4,22 @@ import PropTypes from 'prop-types'
 import WebVideo from '../WebVideo/WebVideo'
 import { VideoPropType, RefPropType } from './videoPropType'
 
-const VideoPickerPlayer = ({ video = {}, videoPlayerRef, onStartVideo = () => {} }) => (
-  <StackView space={3} tokens={{ flexShrink: 1 }}>
-    <div ref={videoPlayerRef}>
-      {video.videoId && <WebVideo {...video} onStart={() => onStartVideo(video)} />}
-    </div>
-    <StackView space={2}>
-      <Typography variant={{ size: 'h3' }}>{video.title}</Typography>
-      <Typography variant={{ colour: 'default' }}>{video.description}</Typography>
+const VideoPickerPlayer = React.forwardRef(
+  ({ video = {}, videoPlayerRef, onStartVideo = () => {} }, ref) => (
+    <StackView space={3} tokens={{ flexShrink: 1 }} ref={ref}>
+      <div ref={videoPlayerRef}>
+        {video.videoId && <WebVideo {...video} onStart={() => onStartVideo(video)} />}
+      </div>
+      <StackView space={2}>
+        <Typography variant={{ size: 'h3' }}>{video.title}</Typography>
+        <Typography variant={{ colour: 'default' }}>{video.description}</Typography>
+      </StackView>
     </StackView>
-  </StackView>
+  )
 )
 
+VideoPickerPlayer.displayName = 'VideoPickerPlayer'
+
 VideoPickerPlayer.propTypes = {
   video: VideoPropType,
   videoPlayerRef: RefPropType,