@telus-uds/components-web 1.8.0 → 1.10.0

package/lib/Video/ControlBar/ControlBar.js

@@ -0,0 +1,315 @@
+"use strict";
+
+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 _VideoProgressBar = _interopRequireDefault(require("./Controls/VideoProgressBar/VideoProgressBar"));
+
+var _VolumeSlider = _interopRequireDefault(require("./Controls/VolumeSlider/VolumeSlider"));
+
+var _VideoButton = _interopRequireDefault(require("./Controls/VideoButton/VideoButton"));
+
+var _VideoMenu = _interopRequireDefault(require("./Controls/VideoMenu/VideoMenu"));
+
+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 getIcon = icon => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+  icon: icon
+});
+
+const ControlBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__ControlBarContainer",
+  componentId: "components-web__sc-13y61ky-0"
+})(_ref => {
+  let {
+    isHidden,
+    isMobile
+  } = _ref;
+  return {
+    width: '100%',
+    position: 'relative',
+    transition: 'opacity 0.4s',
+    opacity: isHidden ? 0 : 1,
+    display: isMobile ? 'none' : undefined
+  };
+});
+
+const StyledControlBar = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__StyledControlBar",
+  componentId: "components-web__sc-13y61ky-1"
+})(_ref2 => {
+  let {
+    padding
+  } = _ref2;
+  return {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    width: '100%',
+    height: 56,
+    padding,
+    bottom: 0,
+    backgroundColor: 'rgba(42, 44, 46, 0.85)',
+    // TODO: replace with opaque greyThunder
+    margin: 'auto',
+    display: 'flex',
+    justifyContent: 'space-between',
+    zIndex: 9
+  };
+});
+
+const VideoProgressBarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__VideoProgressBarContainer",
+  componentId: "components-web__sc-13y61ky-2"
+})({
+  display: 'flex',
+  flexGrow: 1
+});
+
+const MenuContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "ControlBar__MenuContainer",
+  componentId: "components-web__sc-13y61ky-3"
+})(_ref3 => {
+  let {
+    isOpen,
+    menuBottom,
+    menuRight,
+    menuMarginLeft
+  } = _ref3;
+  return {
+    position: 'absolute',
+    bottom: menuBottom,
+    right: menuRight,
+    display: isOpen ? 'block' : 'none',
+    marginLeft: menuMarginLeft
+  };
+});
+
+const ControlBar = _ref4 => {
+  let {
+    videoPlayer,
+    videoPlayerContainer,
+    sources,
+    tracks,
+    videoPlaying,
+    videoUnplayed,
+    videoBufferEnd,
+    isHidden = false,
+    videoLength,
+    videoCurrentTime,
+    videoCurrentVolume,
+    videoIsMuted,
+    setVolume,
+    isMobile,
+    tracksAvailable,
+    togglePlayPause,
+    setSeek,
+    toggleMute,
+    toggleFullscreen,
+    videoIsFullscreen,
+    setTextTracks,
+    selectedTextTrack,
+    resetInactivityTimer,
+    videoQuality,
+    setVideoQuality,
+    captionsMenuOpen,
+    setCaptionsMenuOpen,
+    qualityMenuOpen,
+    setQualityMenuOpen,
+    clearInactivityTimer,
+    copy,
+    compactModeThreshold,
+    videoPlayerWidth,
+    tokens,
+    variant,
+    ...rest
+  } = _ref4;
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft: paddingLeftDefault,
+    paddingRight: paddingRightDefault,
+    paddingLeftCompactMode,
+    paddingRightCompactMode,
+    menuBottom,
+    menuRight,
+    menuMarginLeft,
+    captionsIcon,
+    settingsIcon,
+    minimizeIcon,
+    maximizeIcon
+  } = (0, _componentsBase.useThemeTokens)('VideoControlBar', tokens, variant);
+
+  const parseVideoQuality = () => {
+    return sources.map(source => {
+      if (!source.isFallback) {
+        return {
+          name: source.qualityName,
+          value: source.qualityRank
+        };
+      }
+
+      return {};
+    });
+  };
+
+  const parseTracks = () => {
+    const parsed = tracks.map((track, trackNumber) => {
+      return {
+        name: _videoText.default[copy][track.language],
+        value: trackNumber
+      };
+    });
+    parsed.unshift({
+      name: _videoText.default[copy].captionsNone,
+      value: -1
+    });
+    return parsed;
+  };
+
+  const paddingLeft = videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode;
+  const paddingRight = videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode;
+  const menuContainerStyleProps = {
+    menuBottom,
+    menuRight,
+    menuMarginLeft
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ControlBarContainer, {
+    isHidden: isHidden,
+    isMobile: isMobile,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledControlBar, {
+      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(VideoProgressBarContainer, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoProgressBar.default, {
+          copy: copy,
+          videoPlayer: videoPlayer,
+          videoLength: videoLength,
+          videoCurrentTime: videoCurrentTime,
+          videoBufferEnd: videoBufferEnd,
+          setSeek: setSeek,
+          resetInactivityTimer: resetInactivityTimer
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VolumeSlider.default, {
+        videoPlayer: videoPlayer,
+        videoCurrentVolume: videoCurrentVolume,
+        setVolume: setVolume,
+        videoIsMuted: videoIsMuted,
+        toggleMute: toggleMute,
+        resetInactivityTimer: resetInactivityTimer,
+        copy: copy,
+        compactModeThreshold: compactModeThreshold,
+        videoPlayerWidth: videoPlayerWidth,
+        disableFocus: videoUnplayed
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+        space: 3,
+        direction: "row",
+        children: [tracksAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+          disableFocus: videoUnplayed,
+          label: _videoText.default[copy].captionsToggle,
+          icon: getIcon(captionsIcon),
+          onClick: () => {
+            setCaptionsMenuOpen(!captionsMenuOpen);
+            setQualityMenuOpen(false);
+            clearInactivityTimer();
+          },
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+          disableFocus: videoUnplayed,
+          label: _videoText.default[copy].qualityToggle,
+          icon: getIcon(settingsIcon),
+          onClick: () => {
+            setQualityMenuOpen(!qualityMenuOpen);
+            setCaptionsMenuOpen(false);
+            clearInactivityTimer();
+          },
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoButton.default, {
+          disableFocus: videoUnplayed,
+          label: _videoText.default[copy].fullScreenToggle,
+          icon: videoIsFullscreen ? getIcon(minimizeIcon) : getIcon(maximizeIcon),
+          onClick: toggleFullscreen,
+          onFocus: resetInactivityTimer,
+          onBlur: resetInactivityTimer
+        })]
+      }), captionsMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+        isOpen: captionsMenuOpen,
+        ...menuContainerStyleProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
+          menuLabel: _videoText.default[copy].captionsDialogue,
+          menuOptions: parseTracks(),
+          setSelection: setTextTracks,
+          selectedItem: selectedTextTrack,
+          copy: copy
+        })
+      }), qualityMenuOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+        isOpen: qualityMenuOpen,
+        ...menuContainerStyleProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoMenu.default, {
+          menuLabel: _videoText.default[copy].qualityDialogue,
+          menuOptions: parseVideoQuality(),
+          setSelection: setVideoQuality,
+          selectedItem: videoQuality,
+          copy: copy
+        })
+      })]
+    })
+  });
+};
+
+ControlBar.propTypes = { ...selectedSystemPropTypes,
+  videoPlayer: _propTypes.default.object.isRequired,
+  videoPlayerContainer: _propTypes.default.object.isRequired,
+  sources: _propTypes.default.array.isRequired,
+  tracks: _propTypes.default.array,
+  videoPlaying: _propTypes.default.bool.isRequired,
+  videoUnplayed: _propTypes.default.bool.isRequired,
+  videoBufferEnd: _propTypes.default.number.isRequired,
+  isHidden: _propTypes.default.bool,
+  videoLength: _propTypes.default.number.isRequired,
+  videoCurrentTime: _propTypes.default.number.isRequired,
+  videoCurrentVolume: _propTypes.default.number.isRequired,
+  videoIsMuted: _propTypes.default.bool.isRequired,
+  setVolume: _propTypes.default.func.isRequired,
+  isMobile: _propTypes.default.bool.isRequired,
+  tracksAvailable: _propTypes.default.bool.isRequired,
+  togglePlayPause: _propTypes.default.func.isRequired,
+  setSeek: _propTypes.default.func.isRequired,
+  toggleMute: _propTypes.default.func.isRequired,
+  toggleFullscreen: _propTypes.default.func.isRequired,
+  videoIsFullscreen: _propTypes.default.bool.isRequired,
+  setTextTracks: _propTypes.default.func.isRequired,
+  selectedTextTrack: _propTypes.default.number.isRequired,
+  resetInactivityTimer: _propTypes.default.func.isRequired,
+  videoQuality: _propTypes.default.number.isRequired,
+  setVideoQuality: _propTypes.default.func.isRequired,
+  captionsMenuOpen: _propTypes.default.bool.isRequired,
+  setCaptionsMenuOpen: _propTypes.default.func.isRequired,
+  qualityMenuOpen: _propTypes.default.bool.isRequired,
+  setQualityMenuOpen: _propTypes.default.func.isRequired,
+  clearInactivityTimer: _propTypes.default.func.isRequired,
+  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired,
+  compactModeThreshold: _propTypes.default.number.isRequired,
+  videoPlayerWidth: _propTypes.default.number.isRequired
+};
+var _default = ControlBar;
+exports.default = _default;

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

@@ -0,0 +1,91 @@
+"use strict";
+
+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"
+})(_ref => {
+  let {
+    color
+  } = _ref;
+  return {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'stretch',
+    'svg path': {
+      fill: color
+    }
+  };
+});
+
+const VideoButton = _ref2 => {
+  let {
+    icon,
+    label,
+    disableFocus,
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _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
+
+    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,
+    tabIndex: disableFocus ? '-1' : undefined,
+    color: color,
+    ...selectProps(rest),
+    onClick: handleClick,
+    children: [icon, children]
+  });
+};
+
+VideoButton.propTypes = { ...selectedSystemPropTypes,
+  icon: _propTypes.default.element.isRequired,
+  label: _propTypes.default.string.isRequired,
+  disableFocus: _propTypes.default.bool.isRequired,
+  children: _propTypes.default.node
+};
+var _default = VideoButton;
+exports.default = _default;

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

@@ -0,0 +1,186 @@
+"use strict";
+
+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"
+})(_ref => {
+  let {
+    padding,
+    background
+  } = _ref;
+  return {
+    width: 114,
+    padding,
+    backgroundColor: background,
+    borderRadius: 5
+  };
+});
+
+const MenuButton = /*#__PURE__*/_styledComponents.default.button.withConfig({
+  displayName: "VideoMenu__MenuButton",
+  componentId: "components-web__sc-nllbhw-1"
+})({
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  width: '100%',
+  cursor: 'pointer',
+  display: 'flex',
+  justifyContent: 'space-between',
+  verticalAlign: 'middle'
+});
+
+const CheckmarkContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoMenu__CheckmarkContainer",
+  componentId: "components-web__sc-nllbhw-2"
+})(_ref2 => {
+  let {
+    isSelectedItem,
+    checkMarkWidth,
+    checkMarkHeight,
+    checkMarkSelectedColor,
+    checkMarkHoverColor,
+    checkMarkFocusColor,
+    checkMarkUnselectedColor
+  } = _ref2;
+  return {
+    width: checkMarkWidth,
+    height: checkMarkHeight,
+    marginTop: 2,
+    outline: 'none',
+    [`${MenuButton} && svg`]: {
+      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkUnselectedColor
+    },
+    [`${MenuButton}:hover && svg`]: {
+      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkHoverColor
+    },
+    [`${MenuButton}:focus && svg`]: {
+      fill: isSelectedItem ? checkMarkSelectedColor : checkMarkFocusColor
+    }
+  };
+});
+
+const VideoMenu = _ref3 => {
+  let {
+    menuLabel,
+    menuOptions,
+    setSelection,
+    selectedItem,
+    copy,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
+  const {
+    padding,
+    background,
+    checkMarkWidth,
+    checkMarkHeight,
+    checkMarkSelectedColor,
+    checkMarkHoverColor,
+    checkMarkFocusColor,
+    checkMarkUnselectedColor,
+    checkMarkIcon
+  } = (0, _componentsBase.useThemeTokens)('VideoMenu', tokens, variant);
+
+  const getMenuItems = () => {
+    return menuOptions.map(option => {
+      if (option.name) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuButton, {
+          "aria-haspopup": "true",
+          role: "menuitem",
+          "aria-label": `${option.name} ${menuLabel}. ${selectedItem === option.value ? _videoText.default[copy].itemSelected : _videoText.default[copy].itemUnselected}`,
+          selectedItem: selectedItem,
+          itemValue: option.value,
+          onClick: () => {
+            if (selectedItem !== option.value) {
+              setSelection(option.value);
+            }
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            variant: {
+              bold: true,
+              inverse: true
+            },
+            children: option.name
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
+            isSelectedItem: option.value === selectedItem,
+            checkMarkWidth: checkMarkWidth,
+            checkMarkHeight: checkMarkHeight,
+            checkMarkSelectedColor: checkMarkSelectedColor,
+            checkMarkHoverColor: checkMarkHoverColor,
+            checkMarkFocusColor: checkMarkFocusColor,
+            checkMarkUnselectedColor: checkMarkUnselectedColor,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+              icon: checkMarkIcon
+            })
+          })]
+        }, 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
+
+    if (key === ' ' || key === 32) {
+      event.stopPropagation();
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuContainer, {
+    onKeyDown: handleOnKeyDown,
+    padding: padding,
+    background: background,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 2,
+      divider: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          bold: true,
+          inverse: true
+        },
+        children: menuLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        role: "menu",
+        children: getMenuItems()
+      })]
+    })
+  });
+};
+
+VideoMenu.propTypes = { ...selectedSystemPropTypes,
+  menuLabel: _propTypes.default.string.isRequired,
+  menuOptions: _propTypes.default.array.isRequired,
+  setSelection: _propTypes.default.func.isRequired,
+  selectedItem: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  copy: _propTypes.default.oneOf(['en', 'fr']).isRequired
+};
+var _default = VideoMenu;
+exports.default = _default;