@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/Video/index.js

@@ -1,2 +0,0 @@
-import Video from './Video';
-export default Video;

package/lib-module/Video/videoText.js

@@ -1,55 +0,0 @@
-const videoText = {
-  en: {
-    videoPlayer: 'Press the space bar or K to toggle play and pause. Use the left and right arrow keys or the comma and period keys to scrub through the video. Use the up and down arrow keys, the dash and equal keys, or the add and subtract number pad keys to increase and decrease volume. Press M to toggle mute. Press F to toggle fullscreen. Press escape to exit instructions and return to video.',
-    videoSelected: 'Video selected. Press Q to listen to controls.',
-    videoSelectedSimple: 'Video selected. Press the space bar or K to toggle play and pause.',
-    mute: 'Mute',
-    unmute: 'Unmute',
-    watch: 'Watch the video',
-    replay: 'Replay the video',
-    itemSelected: 'This is the currently selected option.',
-    itemUnselected: 'Select to switch to this option.',
-    captionsToggle: 'Select captions',
-    captionsDialogue: 'Captions',
-    captionsNone: 'None',
-    qualityToggle: 'Change video quality',
-    qualityDialogue: 'Quality',
-    fullScreenToggle: 'Toggle fullscreen',
-    minute: 'minute',
-    minutes: 'minutes',
-    second: 'second',
-    seconds: 'seconds',
-    ariaLabel: 'Play video. Video length is {minutes} and {seconds}.',
-    volumeSliderLabel: 'Adjust the volume',
-    videoProgressBarLabel: 'Progress bar',
-    en: 'English',
-    fr: 'French'
-  },
-  fr: {
-    videoPlayer: 'Appuyer sur K pour basculer entre lecture et pause. Utiliser les flèches gauche et droite ou les touches virgule et point pour reculer ou faire une avance rapide dans la vidéo. Utiliser les flèches ascendante et descendante, les touches tiret et égal ou les touches plus et moins du clavier numérique pour contrôler le volume. Appuyer sur la touche M pour désactiver le son. Appuyer sur F pour basculer en mode plein écran. Appuyer sur la touche d’échappement pour quitter les instructions et retourner à la vidéo.',
-    videoSelected: 'Vidéo sélectionnée. Appuyer sur Q pour écouter les contrôles',
-    videoSelectedSimple: 'Vidéo sélectionnée. Appuyer sur K pour basculer entre lecture et pause.',
-    mute: 'Désactiver le son',
-    unmute: 'Activer le son',
-    watch: 'Voir la vidéo',
-    replay: 'Relire la vidéo',
-    itemSelected: 'Cette option est déjà sélectionnée.',
-    itemUnselected: 'Sélectionner pour basculer à cette option.',
-    captionsToggle: 'Sélectionner les sous-titres',
-    captionsDialogue: 'Sous-titres',
-    captionsNone: 'Aucun',
-    qualityToggle: 'Modifier la qualité de la vidéo',
-    qualityDialogue: 'Qualité',
-    fullScreenToggle: 'Basculer en mode plein écran',
-    minute: 'minute',
-    minutes: 'minutes',
-    second: 'seconde',
-    seconds: 'secondes',
-    ariaLabel: 'Lire la vidéo. La durée de la vidéo est de {minutes} et {seconds}.',
-    volumeSliderLabel: 'Réglez le volume',
-    videoProgressBarLabel: 'Barre de progression',
-    en: 'Anglais',
-    fr: 'Français'
-  }
-};
-export default videoText;

package/lib-module/VideoPicker/VideoPicker.js

@@ -1,190 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { viewports } from '@telus-uds/system-constants';
-import { selectSystemProps, StackView, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
-import styled, { css } from 'styled-components';
-import { VideoPropType } from './videoPropType';
-import VideoPickerThumbnail from './VideoPickerThumbnail';
-import VideoPickerPlayer from './VideoPickerPlayer';
-import VideoSlider from './VideoSlider';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const framedContainerStyles = _ref => {
-  let {
-    framedContainerBackgroundColor,
-    framedContainerBorderWidth,
-    framedContainerBorderColor,
-    framedContainerBorderRadius,
-    framedMaxHeight
-  } = _ref;
-  return css(["background-color:", ";border:", "px solid ", ";border-radius:", "px;& > div{max-height:", "px;}"], framedContainerBackgroundColor, framedContainerBorderWidth, framedContainerBorderColor, framedContainerBorderRadius, framedMaxHeight);
-};
-const VideoPickerContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPicker__VideoPickerContainer",
-  componentId: "components-web__sc-x6lxp0-0"
-})(["", ""], _ref2 => {
-  let {
-    isFramed,
-    ...tokens
-  } = _ref2;
-  return isFramed && framedContainerStyles(tokens);
-});
-const framedPlayerContainerStyles = _ref3 => {
-  let {
-    framedMaxHeight,
-    framedContainerPadding
-  } = _ref3;
-  return css(["width:66.67%;padding:", "px;max-height:", "px;flex-shrink:0;box-sizing:border-box;"], framedContainerPadding, framedMaxHeight);
-};
-const VideoPlayerContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPicker__VideoPlayerContainer",
-  componentId: "components-web__sc-x6lxp0-1"
-})(["", " overflow:auto;"], _ref4 => {
-  let {
-    isFramed,
-    ...tokens
-  } = _ref4;
-  return isFramed && framedPlayerContainerStyles(tokens);
-});
-const framedVideoListContainerStyle = /*#__PURE__*/css(["max-height:", "px;overflow:auto;flex-direction:column;"], _ref5 => {
-  let {
-    framedMaxHeight
-  } = _ref5;
-  return framedMaxHeight;
-});
-const VideoListContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPicker__VideoListContainer",
-  componentId: "components-web__sc-x6lxp0-2"
-})(["display:flex;justify-content:flex-start;position:relative;flex-grow:1;flex-direction:column;", ""], props => props.isFramed && framedVideoListContainerStyle);
-const VideoPicker = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  var _videoList$;
-  let {
-    videoList = [],
-    selectedVideo = (_videoList$ = videoList[0]) === null || _videoList$ === void 0 ? void 0 : _videoList$.videoId,
-    frame,
-    onStartVideo = () => {},
-    onSelectVideo = () => {},
-    onPlay = () => {},
-    onPause = () => {},
-    onProgress = () => {},
-    ...rest
-  } = _ref6;
-  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) => /*#__PURE__*/_jsx(VideoPickerThumbnail, {
-    video: video,
-    videoPlayerRef: videoPlayerRef,
-    selectedVideoId: currentVideoId,
-    onSelectVideo: current => {
-      setCurrentVideoId(current.videoId);
-      onSelectVideo(current);
-    },
-    layout: !hasSlider ? 'horizontal' : 'vertical',
-    index: index,
-    isFramed: isFramed
-  }, video.videoId));
-  return /*#__PURE__*/_jsx(VideoPickerContainer, {
-    ref: ref,
-    isFramed: isFramed,
-    ...selectProps(rest),
-    ...themeTokens,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      divider: isFramed ? {
-        tokens: {
-          color: stackViewDividerColor
-        }
-      } : {
-        variant: {
-          decorative: true
-        }
-      },
-      space: isFramed ? 0 : 4 // everything has internal padding in `frame` variant
-      ,
-      direction: isFramed ? 'row' : 'column',
-      children: [/*#__PURE__*/_jsx(VideoPlayerContainer, {
-        ...themeTokens,
-        isFramed: isFramed,
-        children: /*#__PURE__*/_jsx(VideoPickerPlayer, {
-          video: addVideoEventHandlers(currentVideo, onPlay, onPause, onProgress),
-          videoPlayerRef: videoPlayerRef,
-          onStartVideo: onStartVideo
-        })
-      }), hasSlider ? /*#__PURE__*/_jsx(VideoSlider, {
-        children: listElements
-      }) : /*#__PURE__*/_jsx(VideoListContainer, {
-        viewport: viewport,
-        "data-testid": "video-list-container",
-        isFramed: isFramed,
-        children: listElements
-      })]
-    })
-  });
-});
-VideoPicker.displayName = 'VideoPicker';
-VideoPicker.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('VideoPicker'),
-  /**
-   * Id of the currently selected video (defaults to the first video if not set).
-   */
-  selectedVideo: PropTypes.string,
-  /**
-   * An array of Video objects.
-   */
-  videoList: PropTypes.arrayOf(VideoPropType),
-  /**
-   * Use to display the picker in a container and the playlist as a sidebar (only available for breakpoints LG and larger)
-   */
-  frame: PropTypes.bool,
-  /**
-   * Callback function trigerred when the video player starts playing video.
-   * @param {object} video - The video object that is playing.
-   */
-  onStartVideo: PropTypes.func,
-  /**
-   * Callback function trigerred when a video is selected from the thumbnail list.
-   * @param {object} video - The video object that is selected.
-   */
-  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/lib-module/VideoPicker/VideoPickerPlayer.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import { StackView, Typography } from '@telus-uds/components-base';
-import PropTypes from 'prop-types';
-import WebVideo from '../WebVideo/WebVideo';
-import { VideoPropType, RefPropType } from './videoPropType';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const VideoPickerPlayer = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    video = {},
-    videoPlayerRef,
-    onStartVideo = () => {}
-  } = _ref;
-  return /*#__PURE__*/_jsxs(StackView, {
-    space: 3,
-    tokens: {
-      flexShrink: 1
-    },
-    ref: ref,
-    children: [/*#__PURE__*/_jsx("div", {
-      ref: videoPlayerRef,
-      children: video.videoId && /*#__PURE__*/_jsx(WebVideo, {
-        ...video,
-        onStart: () => onStartVideo(video)
-      })
-    }), /*#__PURE__*/_jsxs(StackView, {
-      space: 2,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: 'h3'
-        },
-        children: video.title
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          colour: 'default'
-        },
-        children: video.description
-      })]
-    })]
-  });
-});
-VideoPickerPlayer.displayName = 'VideoPickerPlayer';
-VideoPickerPlayer.propTypes = {
-  video: VideoPropType,
-  videoPlayerRef: RefPropType,
-  onStartVideo: PropTypes.func
-};
-export default VideoPickerPlayer;

package/lib-module/VideoPicker/VideoPickerThumbnail.js

@@ -1,218 +0,0 @@
-import React from 'react';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { viewports } from '@telus-uds/system-constants';
-import styled from 'styled-components';
-import { StackView, Typography, useViewport, horizontalScrollUtils, useThemeTokensCallback } from '@telus-uds/components-base';
-import { getTimestamp } from '../shared/VideoSplash/helpers';
-import { VideoPropType, RefPropType } from './videoPropType';
-import VideoSplash from '../shared/VideoSplash/VideoSplash';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-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 = _ref => {
-  let {
-    pressablePaddingBottom,
-    pressablePaddingVertical,
-    pressablePaddingHorizontal,
-    pressableBorderTopWidth,
-    pressableBorderTopColor
-  } = _ref;
-  return StyleSheet.create({
-    container: {
-      cursor: 'pointer'
-    },
-    horizontal: {
-      paddingBottom: pressablePaddingBottom
-    },
-    framed: {
-      paddingVertical: pressablePaddingVertical,
-      paddingHorizontal: pressablePaddingHorizontal
-    },
-    framedLine: {
-      borderTopWidth: pressableBorderTopWidth,
-      borderTopColor: pressableBorderTopColor
-    }
-  });
-};
-const ImageContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPickerThumbnail__ImageContainer",
-  componentId: "components-web__sc-1glxurq-0"
-})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
-  let {
-    outerBorderRadius
-  } = _ref2;
-  return outerBorderRadius;
-});
-const VideoThumbnail = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPickerThumbnail__VideoThumbnail",
-  componentId: "components-web__sc-1glxurq-1"
-})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref3 => {
-  let {
-    borderWidth
-  } = _ref3;
-  return borderWidth;
-}, _ref4 => {
-  let {
-    borderColor
-  } = _ref4;
-  return borderColor;
-}, _ref5 => {
-  let {
-    borderRadius
-  } = _ref5;
-  return borderRadius;
-}, _ref6 => {
-  let {
-    borderRadius
-  } = _ref6;
-  return borderRadius;
-});
-const ThumbnailTitleContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
-  componentId: "components-web__sc-1glxurq-2"
-})(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
-const VideoPickerThumbnail = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
-  let {
-    videoPlayerRef,
-    selectedVideoId,
-    video,
-    onSelectVideo,
-    layout = 'vertical',
-    isFramed,
-    itemPositions,
-    index,
-    width = '100%'
-  } = _ref7;
-  const viewport = useViewport();
-  const getTokens = useThemeTokensCallback('VideoPickerThumbnail', {}, {});
-  const {
-    timestamp
-  } = getTimestamp(video.videoLength, video.copy);
-  const isPlaying = selectedVideoId === video.videoId;
-  const renderThumbnailImage = themeTokens => {
-    return /*#__PURE__*/_jsx(VideoThumbnail, {
-      ...themeTokens,
-      isPlaying: isPlaying,
-      layout: layout,
-      children: /*#__PURE__*/_jsx(VideoSplash, {
-        simpleMode: true,
-        poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
-        videoLength: video.videoLength,
-        copy: video.copy
-      })
-    });
-  };
-  const renderThumbnailInfo = _ref8 => {
-    let {
-      titleColor,
-      subTitleColor
-    } = _ref8;
-    return /*#__PURE__*/_jsxs(StackView, {
-      space: 2,
-      tokens: {
-        flexShrink: 1
-      },
-      children: [/*#__PURE__*/_jsx(ThumbnailTitleContainer, {
-        viewport: viewport,
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            bold: true
-          },
-          tokens: {
-            color: titleColor
-          },
-          children: video.title
-        })
-      }), viewport !== viewports.xs && /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: 'micro'
-        },
-        tokens: {
-          color: subTitleColor
-        },
-        children: timestamp
-      })]
-    });
-  };
-  const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
-  const onKeyPress = event => {
-    if (['Space', 'Enter'].includes(event.key)) {
-      var _videoPlayerRef$curre;
-      onSelectVideo(video);
-      const splashButton = (_videoPlayerRef$curre = videoPlayerRef.current) === null || _videoPlayerRef$curre === void 0 ? void 0 : _videoPlayerRef$curre.querySelector('button');
-      if (splashButton) splashButton.focus();
-    }
-  };
-  return /*#__PURE__*/_jsx(Pressable, {
-    onLayout: handleLayout,
-    onPress: () => onSelectVideo(video),
-    testID: `thumbnail-container-${video.videoId}`,
-    onKeyPress: onKeyPress,
-    accessibilityRole: "radio",
-    accessibilityState: {
-      checked: isPlaying
-    },
-    style: _ref9 => {
-      let {
-        hovered: hover,
-        focused: focus,
-        pressed
-      } = _ref9;
-      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,
-    children: _ref10 => {
-      let {
-        hovered: hover,
-        focused: focus,
-        pressed
-      } = _ref10;
-      const themeTokens = getTokens({
-        hover,
-        focus,
-        pressed,
-        selected: isPlaying
-      });
-      return /*#__PURE__*/_jsxs(StackView, {
-        space: layout === 'vertical' ? 2 : 3,
-        direction: layout === 'vertical' ? 'column' : 'row',
-        children: [/*#__PURE__*/_jsx(ImageContainer, {
-          ...themeTokens,
-          children: renderThumbnailImage(themeTokens)
-        }), renderThumbnailInfo(themeTokens)]
-      });
-    }
-  }, video.videoId);
-});
-VideoPickerThumbnail.displayName = 'VideoPickerThumbnail';
-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/lib-module/VideoPicker/VideoSlider.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { HorizontalScroll, HorizontalScrollButton, horizontalScrollUtils, StackView, useThemeTokens, useViewport } from '@telus-uds/components-base';
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  useItemPositions
-} = horizontalScrollUtils;
-const VideoSlider = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children
-  } = _ref;
-  const viewport = useViewport();
-  const [itemPositions] = useItemPositions();
-  const [containerWidth, setContainerWidth] = React.useState(null);
-  const {
-    previousIcon: PreviousIcon,
-    nextIcon: NextIcon
-  } = useThemeTokens('VideoPickerSlider');
-  const onLayout = _ref2 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width
-        }
-      }
-    } = _ref2;
-    setContainerWidth(width);
-  };
-  const itemsGap = 32; // '5' 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 = /*#__PURE__*/_jsx(StackView, {
-    space: 5,
-    direction: "row",
-    accessibilityRole: "radiogroup",
-    tokens: {
-      flexGrow: 1
-    },
-    children: React.Children.map(children, (child, index) => /*#__PURE__*/React.cloneElement(child, {
-      index,
-      itemPositions,
-      width: itemWidth
-    }))
-  });
-  const overflow = containerWidth === null && {
-    overflow: 'hidden'
-  };
-  const horizontalScrollTokens = {
-    nextIcon: NextIcon,
-    previousIcon: PreviousIcon,
-    gutter: 0,
-    borderBottomWidth: 0,
-    borderBottomColor: 'transparent',
-    buttonClearance: 0
-  };
-  return /*#__PURE__*/_jsx(View, {
-    onLayout: onLayout,
-    style: overflow,
-    ref: ref,
-    children: containerWidth === null ?
-    // Use a 100% width non-scrollable parent until containerWidth is known, to avoid flicker
-    content : /*#__PURE__*/_jsx(HorizontalScroll, {
-      ScrollButton: HorizontalScrollButton,
-      itemPositions: itemPositions,
-      tokens: horizontalScrollTokens,
-      children: content
-    })
-  });
-});
-VideoSlider.displayName = 'VideoSlider';
-VideoSlider.propTypes = {
-  children: PropTypes.node
-};
-export default VideoSlider;

package/lib-module/VideoPicker/index.js

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

package/lib-module/VideoPicker/videoPropType.js

@@ -1,10 +0,0 @@
-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
-});