@telus-uds/components-web 2.33.2 → 2.34.1

package/src/VideoPicker/VideoPickerThumbnail.jsx

@@ -88,105 +88,113 @@ const ThumbnailTitleContainer = styled.div`
   overflow: hidden;
 `
 
-const VideoPickerThumbnail = ({
-  videoPlayerRef,
-  selectedVideoId,
-  video,
-  onSelectVideo,
-  layout = 'vertical',
-  isFramed,
-  itemPositions,
-  index,
-  width = '100%'
-}) => {
-  const viewport = useViewport()
-  const getTokens = useThemeTokensCallback('VideoPickerThumbnail', {}, {})
-
-  const { timestamp } = getTimestamp(video.videoLength, video.copy)
-  const isPlaying = selectedVideoId === video.videoId
-
-  const renderThumbnailImage = (themeTokens) => {
-    return (
-      <VideoThumbnail {...themeTokens} isPlaying={isPlaying} layout={layout}>
-        <VideoSplash
-          simpleMode
-          poster={
-            video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`
-          }
-          videoLength={video.videoLength}
-          copy={video.copy}
-        />
-      </VideoThumbnail>
+const VideoPickerThumbnail = React.forwardRef(
+  (
+    {
+      videoPlayerRef,
+      selectedVideoId,
+      video,
+      onSelectVideo,
+      layout = 'vertical',
+      isFramed,
+      itemPositions,
+      index,
+      width = '100%'
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const getTokens = useThemeTokensCallback('VideoPickerThumbnail', {}, {})
+
+    const { timestamp } = getTimestamp(video.videoLength, video.copy)
+    const isPlaying = selectedVideoId === video.videoId
+
+    const renderThumbnailImage = (themeTokens) => {
+      return (
+        <VideoThumbnail {...themeTokens} isPlaying={isPlaying} layout={layout}>
+          <VideoSplash
+            simpleMode
+            poster={
+              video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`
+            }
+            videoLength={video.videoLength}
+            copy={video.copy}
+          />
+        </VideoThumbnail>
+      )
+    }
+
+    const renderThumbnailInfo = ({ titleColor, subTitleColor }) => (
+      <StackView space={2} tokens={{ flexShrink: 1 }}>
+        <ThumbnailTitleContainer viewport={viewport}>
+          <Typography variant={{ bold: true }} tokens={{ color: titleColor }}>
+            {video.title}
+          </Typography>
+        </ThumbnailTitleContainer>
+        {viewport !== viewports.xs && (
+          <Typography variant={{ size: 'micro' }} tokens={{ color: subTitleColor }}>
+            {timestamp}
+          </Typography>
+        )}
+      </StackView>
     )
-  }
 
-  const renderThumbnailInfo = ({ titleColor, subTitleColor }) => (
-    <StackView space={2} tokens={{ flexShrink: 1 }}>
-      <ThumbnailTitleContainer viewport={viewport}>
-        <Typography variant={{ bold: true }} tokens={{ color: titleColor }}>
-          {video.title}
-        </Typography>
-      </ThumbnailTitleContainer>
-      {viewport !== viewports.xs && (
-        <Typography variant={{ size: 'micro' }} tokens={{ color: subTitleColor }}>
-          {timestamp}
-        </Typography>
-      )}
-    </StackView>
-  )
-
-  const handleLayout =
-    itemPositions !== undefined
-      ? getItemPositionLayoutHandler(itemPositions.positions, index)
-      : undefined
-
-  const onKeyPress = (event) => {
-    if (['Space', 'Enter'].includes(event.key)) {
-      onSelectVideo(video)
-      const splashButton = videoPlayerRef.current?.querySelector('button')
-      if (splashButton) splashButton.focus()
+    const handleLayout =
+      itemPositions !== undefined
+        ? getItemPositionLayoutHandler(itemPositions.positions, index)
+        : undefined
+
+    const onKeyPress = (event) => {
+      if (['Space', 'Enter'].includes(event.key)) {
+        onSelectVideo(video)
+        const splashButton = videoPlayerRef.current?.querySelector('button')
+        if (splashButton) splashButton.focus()
+      }
     }
+
+    return (
+      <Pressable
+        key={video.videoId}
+        onLayout={handleLayout}
+        onPress={() => onSelectVideo(video)}
+        testID={`thumbnail-container-${video.videoId}`}
+        onKeyPress={onKeyPress}
+        accessibilityRole="radio"
+        accessibilityState={{ checked: isPlaying }}
+        style={({ hovered: hover, focused: focus, pressed }) => {
+          const themeTokens = getTokens({ hover, focus, pressed, selected: isPlaying })
+
+          const rnStyles = createReactNativeStyles(themeTokens)
+          return [
+            rnStyles.container,
+            layout === 'horizontal' && rnStyles.horizontal,
+            isFramed && rnStyles.framed,
+            isFramed && index > 0 && rnStyles.framedLine,
+            { width },
+            { outline: 'none' }
+          ]
+        }}
+        ref={ref}
+      >
+        {({ hovered: hover, focused: focus, pressed }) => {
+          const themeTokens = getTokens({ hover, focus, pressed, selected: isPlaying })
+
+          return (
+            <StackView
+              space={layout === 'vertical' ? 2 : 3}
+              direction={layout === 'vertical' ? 'column' : 'row'}
+            >
+              <ImageContainer {...themeTokens}>{renderThumbnailImage(themeTokens)}</ImageContainer>
+              {renderThumbnailInfo(themeTokens)}
+            </StackView>
+          )
+        }}
+      </Pressable>
+    )
   }
+)
 
-  return (
-    <Pressable
-      key={video.videoId}
-      onLayout={handleLayout}
-      onPress={() => onSelectVideo(video)}
-      testID={`thumbnail-container-${video.videoId}`}
-      onKeyPress={onKeyPress}
-      accessibilityRole="radio"
-      accessibilityState={{ checked: isPlaying }}
-      style={({ hovered: hover, focused: focus, pressed }) => {
-        const themeTokens = getTokens({ hover, focus, pressed, selected: isPlaying })
-
-        const rnStyles = createReactNativeStyles(themeTokens)
-        return [
-          rnStyles.container,
-          layout === 'horizontal' && rnStyles.horizontal,
-          isFramed && rnStyles.framed,
-          isFramed && index > 0 && rnStyles.framedLine,
-          { width },
-          { outline: 'none' }
-        ]
-      }}
-    >
-      {({ hovered: hover, focused: focus, pressed }) => {
-        const themeTokens = getTokens({ hover, focus, pressed, selected: isPlaying })
-
-        return (
-          <StackView
-            space={layout === 'vertical' ? 2 : 3}
-            direction={layout === 'vertical' ? 'column' : 'row'}
-          >
-            <ImageContainer {...themeTokens}>{renderThumbnailImage(themeTokens)}</ImageContainer>
-            {renderThumbnailInfo(themeTokens)}
-          </StackView>
-        )
-      }}
-    </Pressable>
-  )
-}
+VideoPickerThumbnail.displayName = 'VideoPickerThumbnail'
 
 VideoPickerThumbnail.propTypes = {
   selectedVideoId: PropTypes.string,

package/src/VideoPicker/VideoSlider.jsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, useState } from 'react'
+import React from 'react'
 import {
   HorizontalScroll,
   HorizontalScrollButton,
@@ -12,10 +12,10 @@ import PropTypes from 'prop-types'
 
 const { useItemPositions } = horizontalScrollUtils
 
-const VideoSlider = ({ children }) => {
+const VideoSlider = React.forwardRef(({ children }, ref) => {
   const viewport = useViewport()
   const [itemPositions] = useItemPositions()
-  const [containerWidth, setContainerWidth] = useState(null)
+  const [containerWidth, setContainerWidth] = React.useState(null)
   const { previousIcon: PreviousIcon, nextIcon: NextIcon } = useThemeTokens('VideoPickerSlider')
 
   const onLayout = ({
@@ -42,7 +42,7 @@ const VideoSlider = ({ children }) => {
   const content = (
     <StackView space={5} direction="row" accessibilityRole="radiogroup" tokens={{ flexGrow: 1 }}>
       {React.Children.map(children, (child, index) =>
-        cloneElement(child, {
+        React.cloneElement(child, {
           index,
           itemPositions,
           width: itemWidth
@@ -61,7 +61,7 @@ const VideoSlider = ({ children }) => {
     buttonClearance: 0
   }
   return (
-    <View onLayout={onLayout} style={overflow}>
+    <View onLayout={onLayout} style={overflow} ref={ref}>
       {containerWidth === null ? (
         // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
         content
@@ -76,7 +76,9 @@ const VideoSlider = ({ children }) => {
       )}
     </View>
   )
-}
+})
+
+VideoSlider.displayName = 'VideoSlider'
 
 VideoSlider.propTypes = {
   children: PropTypes.node

package/src/WaffleGrid/WaffleGrid.jsx

@@ -64,48 +64,44 @@ const Center = styled('div')({
 /**
  * The WaffleGrid is used to show items in a waffle like manner with borders surrounding the element
  */
-const WaffleGrid = ({
-  items,
-  rowSize = null,
-  LinkRouter,
-  tokens,
-  variant,
-  linkRouterProps,
-  ...rest
-}) => {
-  const viewport = useViewport()
-  const themeTokens = useThemeTokens('WaffleGrid', tokens, variant, { viewport })
-  const currentRowSize = useResponsiveProp(rowSize)
+const WaffleGrid = React.forwardRef(
+  ({ items, rowSize = null, LinkRouter, tokens, variant, linkRouterProps, ...rest }, ref) => {
+    const viewport = useViewport()
+    const themeTokens = useThemeTokens('WaffleGrid', tokens, variant, { viewport })
+    const currentRowSize = useResponsiveProp(rowSize)
 
-  return (
-    <Container {...selectProps(rest)}>
-      {items.map((child) => (
-        <Item
-          {...themeTokens}
-          key={child.href}
-          rowSize={rowSize ? currentRowSize : themeTokens.rowSize}
-        >
-          <Link
-            href={child.href}
-            LinkRouter={child.LinkRouter || LinkRouter}
-            linkRouterProps={{ ...linkRouterProps, ...child.linkRouterProps }}
+    return (
+      <Container ref={ref} {...selectProps(rest)}>
+        {items.map((child) => (
+          <Item
+            {...themeTokens}
+            key={child.href}
+            rowSize={rowSize ? currentRowSize : themeTokens.rowSize}
           >
-            <Center>
-              {typeof child.image === 'string' ? (
-                // Assuming that string passed is the image URL
-                <Image src={child.image} alt={child.imageAltText} width={96} />
-              ) : (
-                // Otherwise it must be an arbitrary content, which we just display by itself
-                child.image
-              )}
-              <Typography variant={{ weight: 'semibold' }}>{child.text}</Typography>
-            </Center>
-          </Link>
-        </Item>
-      ))}
-    </Container>
-  )
-}
+            <Link
+              href={child.href}
+              LinkRouter={child.LinkRouter || LinkRouter}
+              linkRouterProps={{ ...linkRouterProps, ...child.linkRouterProps }}
+            >
+              <Center>
+                {typeof child.image === 'string' ? (
+                  // Assuming that string passed is the image URL
+                  <Image src={child.image} alt={child.imageAltText} width={96} />
+                ) : (
+                  // Otherwise it must be an arbitrary content, which we just display by itself
+                  child.image
+                )}
+                <Typography variant={{ weight: 'semibold' }}>{child.text}</Typography>
+              </Center>
+            </Link>
+          </Item>
+        ))}
+      </Container>
+    )
+  }
+)
+
+WaffleGrid.displayName = 'WaffleGrid'
 
 WaffleGrid.propTypes = {
   ...selectedSystemPropTypes,

package/src/WebVideo/WebVideo.jsx

@@ -1,10 +1,11 @@
 import { selectSystemProps } from '@telus-uds/components-base'
 import PropTypes from 'prop-types'
-import React, { useState } from 'react'
+import React from 'react'
 import YouTube from 'react-youtube'
 import styled from 'styled-components'
 import VideoSplash from '../shared/VideoSplash/VideoSplash'
 import { htmlAttrs } from '../utils'
+import { triggerInProgressVideoIntervals, YoutubePlayerState } from './utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -33,68 +34,111 @@ const AspectLimiter = styled.div((props) => ({
   position: 'relative'
 }))
 
-const WebVideo = ({
-  videoId,
-  aspectRatio = '16:9',
-  posterSrc,
-  defaultVolume = 1,
-  beginMuted = false,
-  videoLength,
-  copy,
-  onPlay,
-  onPause,
-  onEnd,
-  onStart = () => {},
-  ...rest
-}) => {
-  const [started, setStarted] = useState(false)
-
-  const initializeYoutubePlayer = (event) => {
-    onStart()
-
-    if (beginMuted) {
-      event.target.mute()
+const WebVideo = React.forwardRef(
+  (
+    {
+      videoId,
+      aspectRatio = '16:9',
+      posterSrc,
+      defaultVolume = 1,
+      beginMuted = false,
+      videoLength,
+      copy,
+      onPlay = () => {},
+      onPause = () => {},
+      onEnd = () => {},
+      onProgress = () => {},
+      onStart = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [started, setStarted] = React.useState(false)
+    const videoStateData = React.useRef({
+      requestAnimationIds: [],
+      state: YoutubePlayerState.UNSTARTED
+    })
+    const playerRef = React.useRef(null)
+
+    const onPlayCallback = (event) => {
+      onPlay(event, videoStateData.current.state === YoutubePlayerState.PAUSED)
+      videoStateData.current.state = YoutubePlayerState.PLAYING
+      if (onProgress) {
+        videoStateData.current.requestAnimationIds = triggerInProgressVideoIntervals(
+          onProgress,
+          playerRef,
+          event
+        )
+      }
     }
 
-    event.target.setVolume(defaultVolume)
-    event.target.playVideo() // This plays the video after passing the splash screen on mobile.
+    const initializeYoutubePlayer = (event) => {
+      onStart()
+      playerRef.current = event.target
+
+      if (beginMuted) {
+        event.target.mute()
+      }
+
+      event.target.setVolume(defaultVolume)
+      event.target.playVideo() // This plays the video after passing the splash screen on mobile.
+    }
+
+    const onEndVideoCallback = (event) => {
+      onEnd(event)
+      videoStateData.current.requestAnimationIds.forEach((id) => cancelAnimationFrame(id))
+      videoStateData.current.requestAnimationIds = []
+      videoStateData.current.state = YoutubePlayerState.ENDED
+      if (onProgress) {
+        onProgress(event, 100)
+      }
+    }
+
+    const onPauseVideoCallback = (event) => {
+      videoStateData.current.requestAnimationIds.forEach((id) => cancelAnimationFrame(id))
+      onPause(event)
+      videoStateData.current.state = YoutubePlayerState.PAUSED
+      videoStateData.current.requestAnimationIds = []
+    }
+
+    return (
+      <StyledPlayerContainer ref={ref} data-testid="web-video-container" {...selectProps(rest)}>
+        <AspectLimiter aspectRatio={aspectRatio}>
+          {started ? (
+            <StyledYoutubePlayer
+              videoId={videoId}
+              opts={{
+                width: '100%',
+                height: '100%',
+                playerVars: {
+                  autoplay: 1,
+                  modestbranding: 1,
+                  playsinline: 1,
+                  rel: 0
+                }
+              }}
+              onReady={initializeYoutubePlayer}
+              onPlay={onPlayCallback}
+              onPause={onPauseVideoCallback}
+              onEnd={onEndVideoCallback}
+            />
+          ) : (
+            <VideoSplash
+              poster={posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
+              videoLength={videoLength}
+              copy={copy}
+              onClick={() => {
+                setStarted(true)
+              }}
+            />
+          )}
+        </AspectLimiter>
+      </StyledPlayerContainer>
+    )
   }
+)
 
-  return (
-    <StyledPlayerContainer data-testid="web-video-container" {...selectProps(rest)}>
-      <AspectLimiter aspectRatio={aspectRatio}>
-        {started ? (
-          <StyledYoutubePlayer
-            videoId={videoId}
-            opts={{
-              width: '100%',
-              height: '100%',
-              playerVars: {
-                autoplay: 1,
-                modestbranding: 1,
-                playsinline: 1,
-                rel: 0
-              }
-            }}
-            onReady={initializeYoutubePlayer}
-            onPlay={onPlay}
-            onPause={onPause}
-            onEnd={onEnd}
-          />
-        ) : (
-          <VideoSplash
-            poster={posterSrc || `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
-            videoLength={videoLength}
-            copy={copy}
-            onClick={() => {
-              setStarted(true)
-            }}
-          />
-        )}
-      </AspectLimiter>
-    </StyledPlayerContainer>
-  )
-}
+WebVideo.displayName = 'WebVideo'
 
 export const VideoProps = {
   ...selectedSystemPropTypes,
@@ -144,7 +188,17 @@ export const VideoProps = {
   /**
    * A function to be run when the video ends.
    */
-  onEnd: PropTypes.func
+  onEnd: PropTypes.func,
+
+  /**
+   * A function to be run when the video resumes.
+   */
+  onResume: PropTypes.func,
+
+  /**
+   * A function to be run when the video progresses. This function will be run at 10%, 25%, 50%, 75% and 100%.
+   */
+  onProgress: PropTypes.func
 }
 
 WebVideo.propTypes = VideoProps

package/src/WebVideo/utils/index.js

@@ -0,0 +1,56 @@
+/**
+ * Fires analytics events for inProgress analytics
+ * @param {current progress} progress
+ * @param {callback to run on defined milestones} onProgress
+ * @param {YouTube Video Event} event
+ */
+const fireVideoProgressEvents = (progress, onProgress, event) => {
+  const validProgressValues = [10, 25, 50, 75]
+  if (validProgressValues.includes(progress)) {
+    onProgress(event, progress)
+  }
+}
+
+export const YoutubePlayerState = {
+  UNSTARTED: -1,
+  ENDED: 0,
+  PLAYING: 1,
+  PAUSED: 2,
+  BUFFERING: 3,
+  CUED: 5
+}
+
+const PERCENTAGE_MULTIPLIER = 100
+/**
+ * Run an interval to check the progress of the video and fire events at 10%, 25%, 50% and 75%
+ * @param {callback to run on defined milestones} onProgress
+ * @param {player reference} playerRef
+ * @param {YouTube video event} event
+ */
+export const triggerInProgressVideoIntervals = (onProgress, playerRef, event) => {
+  const duration = playerRef.current.getDuration()
+  let lastProgress = null
+  const requestAnimationFrameIds = []
+
+  const frame = () => {
+    const currentTime = playerRef.current.getCurrentTime()
+    const progress = Math.round((currentTime / duration) * PERCENTAGE_MULTIPLIER)
+
+    if (progress !== lastProgress) {
+      fireVideoProgressEvents(progress, onProgress, event)
+      lastProgress = progress
+    }
+
+    if (currentTime < duration) {
+      requestAnimationFrameIds.push(requestAnimationFrame(frame))
+    }
+  }
+
+  // Cancel any previous animation frames
+  requestAnimationFrameIds.forEach((id) => cancelAnimationFrame(id))
+
+  // Start a new animation frame
+  requestAnimationFrameIds.push(requestAnimationFrame(frame))
+
+  return requestAnimationFrameIds
+}

package/src/baseExports.js

@@ -17,6 +17,7 @@ export {
   ButtonDropdown,
   ButtonGroup,
   ButtonLink,
+  CardGroup,
   Carousel,
   CarouselTabs,
   Checkbox,

package/src/utils/theming/with-client-theme.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokens } from '@telus-uds/components-base'
+import { getTokensPropType, useThemeTokens } from '@telus-uds/components-base'
 
 const withClientTheme = (Component) => {
   const UdsStyledComponent = ({ tokens: tokenOverrides, variant, ...props }) => {
@@ -10,7 +10,7 @@ const withClientTheme = (Component) => {
   }
 
   UdsStyledComponent.propTypes = {
-    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tokens: getTokensPropType(Component.displayName),
     variant: PropTypes.string
   }
 

package/src/utils/theming/with-server-theme.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { getThemeTokens } from '@telus-uds/components-base/server'
+import { getThemeTokens, getTokensPropType } from '@telus-uds/components-base/server'
 
 import getTheme from './get-theme-from-server'
 
@@ -11,7 +11,7 @@ const withServerTheme = (Component, componentName) => {
     return <Component theme={themeTokens} {...props} />
   }
   UdsStyledComponent.propTypes = {
-    tokens: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    tokens: getTokensPropType(componentName),
     variant: PropTypes.string
   }
 

package/types/WebVideo.d.ts

@@ -11,9 +11,10 @@ export interface WebVideoProps extends HTMLAttrs {
   videoLength: number
   copy?: 'en' | 'fr'
   onStart?: () => void
-  onPlay?: (event: YouTubeEvent<number>) => void
+  onPlay?: (event: YouTubeEvent<number>, videoResumed: boolean) => void
   onEnd?: (event: YouTubeEvent<number>) => void
   onPause?: (event: YouTubeEvent<number>) => void
+  onProgress?: (event: YouTubeEvent<number>, milestone: number) => void
 }
 
 declare const WebVideo: ComponentType<WebVideoProps>