polaris-glints/build/cjs/components/VideoThumbnail/VideoThumbnail.js

Glints forked polaris react

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var polarisIcons = require('@shopify/polaris-icons');
var duration = require('../../utilities/duration.js');
var VideoThumbnail$1 = require('./VideoThumbnail.scss.js');
var hooks = require('../../utilities/i18n/hooks.js');
var hooks$1 = require('../../utilities/media-query/hooks.js');
var Stack = require('../Stack/Stack.js');
var Icon = require('../Icon/Icon.js');
var Text = require('../Text/Text.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function VideoThumbnail({
  thumbnailUrl,
  videoLength = 0,
  videoProgress = 0,
  showVideoProgress = false,
  accessibilityLabel,
  onClick,
  onBeforeStartPlaying
}) {
  const i18n = hooks.useI18n();
  const {
    isNavigationCollapsed
  } = hooks$1.useMediaQuery();
  let buttonLabel;

  if (accessibilityLabel) {
    buttonLabel = accessibilityLabel;
  } else if (videoLength) {
    const {
      hours,
      minutes,
      seconds
    } = duration.secondsToTimeComponents(videoLength);
    buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.defaultWithDuration', {
      duration: i18n.translate(duration.secondsToDurationTranslationKey(videoLength), {
        hourCount: hours,
        minuteCount: minutes,
        secondCount: seconds
      })
    });
  } else {
    buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.default');
  }

  const timeStampMarkup = videoLength ? /*#__PURE__*/React__default["default"].createElement("div", {
    className: VideoThumbnail$1["default"].Timestamp
  }, /*#__PURE__*/React__default["default"].createElement(Stack.Stack, {
    alignment: "center",
    spacing: "extraTight"
  }, /*#__PURE__*/React__default["default"].createElement("span", {
    className: VideoThumbnail$1["default"].PlayIcon
  }, /*#__PURE__*/React__default["default"].createElement(Icon.Icon, {
    source: polarisIcons.PlayMinor
  })), /*#__PURE__*/React__default["default"].createElement(Text.Text, {
    variant: isNavigationCollapsed ? 'bodyLg' : 'bodyMd',
    as: "p",
    fontWeight: "semibold"
  }, duration.secondsToTimestamp(videoLength)))) : null;
  let progressMarkup = null;

  if (showVideoProgress) {
    const progressValue = calculateProgress(videoLength, videoProgress);
    const progressValuePercents = Math.round(progressValue * 100);
    /* eslint-disable @shopify/jsx-no-hardcoded-content */

    progressMarkup = /*#__PURE__*/React__default["default"].createElement("div", {
      className: VideoThumbnail$1["default"].Progress
    }, /*#__PURE__*/React__default["default"].createElement("progress", {
      className: VideoThumbnail$1["default"].ProgressBar,
      value: progressValuePercents,
      max: "100"
    }), /*#__PURE__*/React__default["default"].createElement("div", {
      className: VideoThumbnail$1["default"].Indicator,
      style: {
        transform: `scaleX(${progressValue})`
      }
    }, /*#__PURE__*/React__default["default"].createElement("span", {
      className: VideoThumbnail$1["default"].Label
    }, progressValuePercents, "%")));
    /* eslint-enable @shopify/jsx-no-hardcoded-content */
  }

  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: VideoThumbnail$1["default"].ThumbnailContainer
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: VideoThumbnail$1["default"].Thumbnail,
    style: {
      backgroundImage: `url(${thumbnailUrl})`
    }
  }), /*#__PURE__*/React__default["default"].createElement("button", {
    type: "button",
    className: VideoThumbnail$1["default"].PlayButton,
    "aria-label": buttonLabel,
    onClick: onClick,
    onMouseEnter: onBeforeStartPlaying,
    onFocus: onBeforeStartPlaying,
    onTouchStart: onBeforeStartPlaying
  }, timeStampMarkup), progressMarkup);
}

function calculateProgress(videoLength, videoProgress) {
  if (videoProgress > videoLength && process.env.NODE_ENV === 'development') {
    // eslint-disable-next-line no-console
    console.warn('Value passed to the video progress should not exceed video length. Resetting progress to 100%.');
  }

  if (videoProgress > 0 && videoLength > 0) {
    const progress = parseFloat((videoProgress / videoLength).toFixed(2));
    return progress > 1 ? 1 : progress;
  }

  return 0;
}

exports.VideoThumbnail = VideoThumbnail;