@telus-uds/components-web 2.21.1 → 2.22.0

package/lib/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _utils = require("../../../../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const StyledButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   displayName: "VideoButton__StyledButton",
   componentId: "components-web__sc-kfw0tr-0"
@@ -40,7 +31,6 @@ const StyledButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
     }
   };
 });
-
 const VideoButton = _ref2 => {
   let {
     icon,
@@ -54,22 +44,19 @@ const VideoButton = _ref2 => {
   const {
     color
   } = (0, _componentsBase.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
+    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 => {
     var _rest$onClick;
-
     event.preventDefault();
     (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, {
     "aria-label": label,
     onKeyDown: handleOnKeyDown,
@@ -80,8 +67,8 @@ const VideoButton = _ref2 => {
     children: [icon, children]
   });
 };
-
-VideoButton.propTypes = { ...selectedSystemPropTypes,
+VideoButton.propTypes = {
+  ...selectedSystemPropTypes,
   icon: _propTypes.default.element.isRequired,
   label: _propTypes.default.string.isRequired,
   disableFocus: _propTypes.default.bool.isRequired,

package/lib/Video/ControlBar/Controls/VideoMenu/VideoMenu.js

@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _videoText = _interopRequireDefault(require("../../../videoText"));
-
 var _utils = require("../../../../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoMenu__MenuContainer",
   componentId: "components-web__sc-nllbhw-0"
@@ -38,7 +28,6 @@ const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     borderRadius: 5
   };
 });
-
 const MenuButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   displayName: "VideoMenu__MenuButton",
   componentId: "components-web__sc-nllbhw-1"
@@ -52,7 +41,6 @@ const MenuButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   justifyContent: 'space-between',
   verticalAlign: 'middle'
 });
-
 const CheckmarkContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoMenu__CheckmarkContainer",
   componentId: "components-web__sc-nllbhw-2"
@@ -82,7 +70,6 @@ const CheckmarkContainer = /*#__PURE__*/_styledComponents.default.div.withConfig
     }
   };
 });
-
 const VideoMenu = _ref3 => {
   let {
     menuLabel,
@@ -105,7 +92,6 @@ const VideoMenu = _ref3 => {
     checkMarkUnselectedColor,
     checkMarkIcon
   } = (0, _componentsBase.useThemeTokens)('VideoMenu', tokens, variant);
-
   const getMenuItems = () => {
     return menuOptions.map(option => {
       if (option.name) {
@@ -140,19 +126,17 @@ const VideoMenu = _ref3 => {
           })]
         }, option.value);
       }
-
       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
+    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 /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
     onKeyDown: handleOnKeyDown,
     padding: padding,
@@ -174,8 +158,8 @@ const VideoMenu = _ref3 => {
     })
   });
 };
-
-VideoMenu.propTypes = { ...selectedSystemPropTypes,
+VideoMenu.propTypes = {
+  ...selectedSystemPropTypes,
   menuLabel: _propTypes.default.string.isRequired,
   menuOptions: _propTypes.default.array.isRequired,
   setSelection: _propTypes.default.func.isRequired,

package/lib/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _videoText = _interopRequireDefault(require("../../../videoText"));
-
 var _utils = require("../../../../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const ProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoProgressBar__ProgressBarContainer",
   componentId: "components-web__sc-d9tm07-0"
@@ -31,7 +21,6 @@ const ProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConf
   width: '100%',
   alignItems: 'center'
 });
-
 const sharedStyles = _ref => {
   let {
     thumbHeight,
@@ -59,7 +48,6 @@ const sharedStyles = _ref => {
       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
-
     })
   };
 };
@@ -93,16 +81,19 @@ const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_re
       outline: 'none'
     },
     'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
-    'input[type=range]&::-moz-range-thumb': { ...sharedStyles(sharedProps).thumb,
+    'input[type=range]&::-moz-range-thumb': {
+      ...sharedStyles(sharedProps).thumb,
       border: 'none'
     },
-    'input[type=range]&::-ms-thumb': { ...sharedStyles(sharedProps).thumb,
+    '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),
+    'input[type=range]&::-ms-track': {
+      ...sharedStyles(sharedProps).track(videoBufferDisplay),
       margin: '6px 0',
       border: 'none'
     },
@@ -114,7 +105,6 @@ const StyledProgressBar = /*#__PURE__*/_styledComponents.default.input.attrs(_re
     }
   };
 });
-
 const StyledTimestamp = /*#__PURE__*/_styledComponents.default.span.withConfig({
   displayName: "VideoProgressBar__StyledTimestamp",
   componentId: "components-web__sc-d9tm07-2"
@@ -125,15 +115,13 @@ const StyledTimestamp = /*#__PURE__*/_styledComponents.default.span.withConfig({
   return {
     margin
   };
-}); // TODO: unify with the helper from `VideoSplash`
-
-
+});
+// 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 = _ref5 => {
   let {
     copy = 'en',
@@ -159,13 +147,10 @@ const VideoProgressBar = _ref5 => {
   } = (0, _componentsBase.useThemeTokens)('VideoProgressBar', tokens, variant, {
     playing
   });
-
   const videoProgressBar = /*#__PURE__*/_react.default.createRef();
-
   const handleVideoSkip = () => {
     setSeek(videoProgressBar.current.value);
   };
-
   const videoBufferDisplay = videoBufferEnd / videoLength * 100;
   const isVideoUnplayed = videoCurrentTime === -1;
   const currentTime = isVideoUnplayed ? 0 : videoCurrentTime;
@@ -180,7 +165,8 @@ const VideoProgressBar = _ref5 => {
     trackGradientEnd,
     rangeBackground
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressBarContainer, { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProgressBarContainer, {
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTimestamp, {
       margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
@@ -211,8 +197,8 @@ const VideoProgressBar = _ref5 => {
     })]
   });
 };
-
-VideoProgressBar.propTypes = { ...selectedSystemPropTypes,
+VideoProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   copy: _propTypes.default.oneOf(['en', 'fr']),
   videoLength: _propTypes.default.number.isRequired,
   videoCurrentTime: _propTypes.default.number.isRequired,

package/lib/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.js

@@ -4,27 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _VideoButton = _interopRequireDefault(require("../VideoButton/VideoButton"));
-
 var _videoText = _interopRequireDefault(require("../../../videoText"));
-
 var _utils = require("../../../../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const VolumeSliderContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VolumeSlider__VolumeSliderContainer",
   componentId: "components-web__sc-apixz4-0"
@@ -42,7 +31,6 @@ const VolumeSliderContainer = /*#__PURE__*/_styledComponents.default.div.withCon
     alignItems: 'center'
   };
 });
-
 const sharedStyles = _ref2 => {
   let {
     thumbHeight,
@@ -73,7 +61,6 @@ const sharedStyles = _ref2 => {
     })
   };
 };
-
 const StyledVolumeSlider = /*#__PURE__*/_styledComponents.default.input.attrs(_ref3 => {
   let {
     videoCurrentVolume
@@ -103,16 +90,19 @@ const StyledVolumeSlider = /*#__PURE__*/_styledComponents.default.input.attrs(_r
       outline: 'none'
     },
     'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
-    'input[type=range]&::-moz-range-thumb': { ...sharedStyles.thumb,
+    'input[type=range]&::-moz-range-thumb': {
+      ...sharedStyles.thumb,
       border: 'none'
     },
-    'input[type=range]&::-ms-thumb': { ...sharedStyles.thumb,
+    'input[type=range]&::-ms-thumb': {
+      ...sharedStyles.thumb,
       margin: 0,
       border: 'none'
     },
     'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track(videoCurrentVolume),
     'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoCurrentVolume),
-    'input[type=range]&::-ms-track': { ...sharedStyles(sharedProps).track(videoCurrentVolume),
+    'input[type=range]&::-ms-track': {
+      ...sharedStyles(sharedProps).track(videoCurrentVolume),
       margin: '6px 0',
       border: 'none'
     },
@@ -124,7 +114,6 @@ const StyledVolumeSlider = /*#__PURE__*/_styledComponents.default.input.attrs(_r
     }
   };
 });
-
 const VolumeSlider = _ref5 => {
   let {
     setVolume,
@@ -140,9 +129,7 @@ const VolumeSlider = _ref5 => {
     variant,
     ...rest
   } = _ref5;
-
   const refVolumeSlider = _react.default.useRef();
-
   const {
     marginLeft,
     marginRight,
@@ -163,9 +150,7 @@ const VolumeSlider = _ref5 => {
     trackGradientEnd,
     rangeBackground
   };
-
   const handleVolumeChange = () => setVolume(refVolumeSlider.current.value);
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VolumeSliderContainer, {
     compactModeThreshold: compactModeThreshold,
     videoPlayerWidth: videoPlayerWidth,
@@ -197,8 +182,8 @@ const VolumeSlider = _ref5 => {
     })]
   });
 };
-
-VolumeSlider.propTypes = { ...selectedSystemPropTypes,
+VolumeSlider.propTypes = {
+  ...selectedSystemPropTypes,
   videoCurrentVolume: _propTypes.default.number.isRequired,
   setVolume: _propTypes.default.func.isRequired,
   videoIsMuted: _propTypes.default.bool.isRequired,

package/lib/Video/MiddleControlButton/MiddleControlButton.js

@@ -4,23 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _utils = require("../../utils");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
 const StyledMiddleControlButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
   displayName: "MiddleControlButton__StyledMiddleControlButton",
   componentId: "components-web__sc-1um2s37-0"
@@ -47,7 +38,6 @@ const StyledMiddleControlButton = /*#__PURE__*/_styledComponents.default.button.
     alignItems: 'center'
   };
 });
-
 const MiddleControlButton = _ref2 => {
   let {
     icon: Icon,
@@ -78,8 +68,8 @@ const MiddleControlButton = _ref2 => {
     })
   });
 };
-
-MiddleControlButton.propTypes = { ...selectedSystemPropTypes,
+MiddleControlButton.propTypes = {
+  ...selectedSystemPropTypes,
   icon: _propTypes.default.elementType.isRequired,
   isHidden: _propTypes.default.bool,
   onClick: _propTypes.default.func,