@telus-uds/components-web 1.10.0 → 1.11.0

package/src/VideoPicker/VideoPickerThumbnail.jsx

@@ -0,0 +1,182 @@
+import React from 'react'
+import { Pressable, StyleSheet } from 'react-native-web'
+import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
+import styled from 'styled-components'
+import {
+  StackView,
+  Typography,
+  useViewport,
+  horizontalScrollUtils,
+  useThemeTokens
+} from '@telus-uds/components-base'
+import { getTimestamp } from '../shared/VideoSplash/helpers'
+import { VideoPropType, RefPropType } from './videoPropType'
+import VideoSplash from '../shared/VideoSplash/VideoSplash'
+
+const { getItemPositionLayoutHandler, itemPositionsPropType } = horizontalScrollUtils
+
+// Use a React Native (web) outer container so it can take an onLayout callback, to
+// access position in VideoSlider's UDS HorizontalScroll and update its itemPositions
+const createReactNativeStyles = ({
+  pressablePaddingBottom,
+  pressablePaddingVertical,
+  pressablePaddingHorizontal,
+  pressableBorderTopWidth,
+  pressableBorderTopColor
+}) =>
+  StyleSheet.create({
+    container: {
+      cursor: 'pointer'
+    },
+    horizontal: {
+      paddingBottom: pressablePaddingBottom
+    },
+    framed: {
+      paddingVertical: pressablePaddingVertical,
+      paddingHorizontal: pressablePaddingHorizontal
+    },
+    framedLine: {
+      borderTopWidth: pressableBorderTopWidth,
+      borderTopColor: pressableBorderTopColor
+    }
+  })
+
+const VideoThumbnail = styled.div`
+  position: relative;
+  width: ${(props) => (props.layout === 'vertical' ? '100%' : '144px')};
+  flex-shrink: 0;
+
+  * button {
+    display: none;
+  }
+
+  // use a pseudo-element to ensure aspect ratio
+  &::before {
+    content: '';
+    display: block;
+    padding-bottom: 56.25%;
+  }
+
+  &::after {
+    content: '';
+    border: ${({ borderWidth }) => borderWidth}px solid;
+    border-color: ${({ isPlaying, borderColor }) => (isPlaying ? borderColor : 'transparent')};
+    border-radius: ${({ borderRadius }) => borderRadius}px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  & > div {
+    border-radius: ${({ borderRadius }) => borderRadius}px;
+  }
+`
+
+const ThumbnailTitleContainer = styled.div`
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`
+
+const VideoPickerThumbnail = ({
+  videoPlayerRef,
+  selectedVideoId,
+  video,
+  onSelectVideo,
+  layout = 'vertical',
+  isFramed,
+  itemPositions,
+  index,
+  width = '100%'
+}) => {
+  const viewport = useViewport()
+  const { titleColor, subTitleColor, ...themeTokens } = useThemeTokens('VideoPickerThumbnail')
+
+  const rnStyles = createReactNativeStyles(themeTokens)
+  const { timestamp } = getTimestamp(video.videoLength, video.copy)
+  const isPlaying = selectedVideoId === video.videoId
+
+  const renderThumbnailImage = () => (
+    <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 = () => (
+    <StackView space={2} tokens={{ flexShrink: 1 }}>
+      <ThumbnailTitleContainer viewport={viewport}>
+        <Typography variant={{ bold: true }} tokens={{ color: isPlaying ? titleColor : 'none' }}>
+          {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()
+    }
+  }
+
+  return (
+    <Pressable
+      key={video.videoId}
+      onLayout={handleLayout}
+      onPress={() => onSelectVideo(video)}
+      testID={`thumbnail-container-${video.videoId}`}
+      onKeyPress={onKeyPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isPlaying }}
+      style={[
+        rnStyles.container,
+        layout === 'horizontal' && rnStyles.horizontal,
+        isFramed && rnStyles.framed,
+        isFramed && index > 0 && rnStyles.framedLine,
+        { width }
+      ]}
+    >
+      <StackView
+        space={layout === 'vertical' ? 2 : 3}
+        direction={layout === 'vertical' ? 'column' : 'row'}
+      >
+        {renderThumbnailImage()}
+        {renderThumbnailInfo()}
+      </StackView>
+    </Pressable>
+  )
+}
+
+VideoPickerThumbnail.propTypes = {
+  selectedVideoId: PropTypes.string,
+  onSelectVideo: PropTypes.func,
+  video: VideoPropType,
+  videoPlayerRef: RefPropType,
+  layout: PropTypes.oneOf(['vertical', 'horizontal']),
+  isFramed: PropTypes.bool,
+  itemPositions: itemPositionsPropType,
+  index: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}
+
+export default VideoPickerThumbnail

package/src/VideoPicker/VideoSlider.jsx

@@ -0,0 +1,85 @@
+import React, { cloneElement, useState } from 'react'
+import {
+  HorizontalScroll,
+  HorizontalScrollButton,
+  horizontalScrollUtils,
+  StackView,
+  useThemeTokens,
+  useViewport
+} from '@telus-uds/components-base'
+import { View } from 'react-native-web'
+import PropTypes from 'prop-types'
+
+const { useItemPositions } = horizontalScrollUtils
+
+const VideoSlider = ({ children }) => {
+  const viewport = useViewport()
+  const [itemPositions] = useItemPositions()
+  const [containerWidth, setContainerWidth] = useState(null)
+  const { previousIcon: PreviousIcon, nextIcon: NextIcon } = useThemeTokens('VideoPickerSlider')
+
+  const onLayout = ({
+    nativeEvent: {
+      layout: { width }
+    }
+  }) => {
+    setContainerWidth(width)
+  }
+
+  const itemsGap = 24 // '4' on spacing scale
+  const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3
+  const itemGapPortioned = ((itemsCount - 1) * itemsGap) / itemsCount
+  const itemWidth =
+    containerWidth === null
+      ? // For first render, we don't know container width, so avoid flicker with static % width
+        `calc(${Math.round(100 / itemsCount)}% - ${Math.round(itemGapPortioned)}px)`
+      : // After first render, can't use % widths because parent is > 100% width horizontal scroll area
+        Math.max(
+          containerWidth / itemsCount - itemGapPortioned,
+          0 // Prevent negative width breaking layout on very narrow containers
+        )
+
+  const content = (
+    <StackView space={4} direction="row" accessibilityRole="radiogroup" tokens={{ flexGrow: 1 }}>
+      {React.Children.map(children, (child, index) =>
+        cloneElement(child, {
+          index,
+          itemPositions,
+          width: itemWidth
+        })
+      )}
+    </StackView>
+  )
+
+  const overflow = containerWidth === null && { overflow: 'hidden' }
+  const horizontalScrollTokens = {
+    nextIcon: NextIcon,
+    previousIcon: PreviousIcon,
+    gutter: 0,
+    borderBottomWidth: 0,
+    borderBottomColor: 'transparent',
+    buttonClearance: 0
+  }
+  return (
+    <View onLayout={onLayout} style={overflow}>
+      {containerWidth === null ? (
+        // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
+        content
+      ) : (
+        <HorizontalScroll
+          ScrollButton={HorizontalScrollButton}
+          itemPositions={itemPositions}
+          tokens={horizontalScrollTokens}
+        >
+          {content}
+        </HorizontalScroll>
+      )}
+    </View>
+  )
+}
+
+VideoSlider.propTypes = {
+  children: PropTypes.node
+}
+
+export default VideoSlider

package/src/VideoPicker/index.js

@@ -0,0 +1,3 @@
+import VideoPicker from './VideoPicker'
+
+export default VideoPicker

package/src/VideoPicker/videoPropType.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'
+import { VideoProps } from '../WebVideo/WebVideo'
+
+export const VideoPropType = PropTypes.shape({
+  ...VideoProps,
+  title: PropTypes.string,
+  description: PropTypes.string
+})
+
+export const RefPropType = PropTypes.shape({
+  current: PropTypes.object
+})

package/src/index.js

@@ -27,9 +27,13 @@ export { default as WebVideo } from './WebVideo'
 export { default as WaffleGrid } from './WaffleGrid'
 export { default as Spinner } from './Spinner'
 export { default as Listbox } from './Listbox'
+export { default as VideoPicker } from './VideoPicker'
 export { default as Video } from './Video'
 export { default as StoryCard } from './StoryCard'
+export { default as Disclaimer } from './Disclaimer'
 export { default as Card } from './Card'
 export { default as TermsAndConditions } from './TermsAndConditions'
+export { default as NavigationBar } from './NavigationBar'
+export { default as Progress } from './Progress'
 
 export * from './baseExports'