@desynova-digital/player 4.0.1 → 4.0.2

package/control/MarkingControl.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = MarkingControl;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _propTypes = require("prop-types");
-var _MarkInControl = _interopRequireDefault(require("./MarkInControl"));
-var _MarkOutControl = _interopRequireDefault(require("./MarkOutControl"));
-var _MarkingPreview = _interopRequireDefault(require("./MarkingPreview"));
-var _MarkingDuration = _interopRequireDefault(require("./MarkingDuration"));
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var propTypes = {
-  frameRate: _propTypes.PropTypes.number,
-  player: _propTypes.PropTypes.instanceOf(Object),
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  markers: _propTypes.PropTypes.instanceOf(Object),
-  controlType: _propTypes.PropTypes.string,
-  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel']),
-  onAddMarker: _propTypes.PropTypes.func,
-  onMarkerSelect: _propTypes.PropTypes.func,
-  onDeleteMarker: _propTypes.PropTypes.func,
-  initialTime: _propTypes.PropTypes.number,
-  allowMarkerOverlap: _propTypes.PropTypes.bool
-};
-var defaultProps = {
-  frameRate: 0,
-  player: {},
-  actions: {}
-};
-var MarkingBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 300px;\n  margin: 0 15px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"])));
-function MarkingControl(_ref) {
-  var player = _ref.player,
-    frameRate = _ref.frameRate,
-    initialTime = _ref.initialTime,
-    actionClick = _ref.actionClick,
-    onAddMarker = _ref.onAddMarker,
-    onMarkerSelect = _ref.onMarkerSelect,
-    onDeleteMarker = _ref.onDeleteMarker,
-    markers = _ref.markers,
-    controlType = _ref.controlType,
-    playerType = _ref.playerType,
-    allowMarkerOverlap = _ref.allowMarkerOverlap,
-    playerReadOnlyMode = _ref.playerReadOnlyMode,
-    _ref$disablePlayerAct = _ref.disablePlayerActions,
-    disablePlayerActions = _ref$disablePlayerAct === void 0 ? [] : _ref$disablePlayerAct,
-    playerSelectedMarker = _ref.playerSelectedMarker,
-    currentTime = _ref.currentTime;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? /*#__PURE__*/_react["default"].createElement(MarkingBlock, null, (!(playerSelectedMarker.leftMarker > -1) || !(playerSelectedMarker.rightMarker > -1)) && playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' && !playerReadOnlyMode && !disablePlayerActions.includes('marking_controls') ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_MarkInControl["default"], {
-    leftMarker: playerSelectedMarker.leftMarker,
-    currentTime: currentTime,
-    actionClick: actionClick,
-    markers: markers,
-    allowMarkerOverlap: allowMarkerOverlap,
-    onAddMarker: onAddMarker
-  }), /*#__PURE__*/_react["default"].createElement(_MarkOutControl["default"], {
-    leftMarker: playerSelectedMarker.leftMarker,
-    currentTime: currentTime,
-    rightMarker: playerSelectedMarker.rightMarker,
-    actionClick: actionClick,
-    markers: markers,
-    controlType: controlType,
-    onMarkerSelect: onMarkerSelect,
-    allowMarkerOverlap: allowMarkerOverlap,
-    onAddMarker: onAddMarker
-  })) : null, playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingDuration["default"], {
-    leftMarker: playerSelectedMarker.leftMarker,
-    rightMarker: playerSelectedMarker.rightMarker,
-    frameRate: frameRate,
-    initialTime: initialTime
-  }) : null, playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 ? /*#__PURE__*/_react["default"].createElement(_MarkingPreview["default"], {
-    actionClick: actionClick,
-    leftMarker: playerSelectedMarker.leftMarker
-  }) : null) : null);
-}
-MarkingControl.propTypes = propTypes;
-MarkingControl.defaultProps = defaultProps;
-MarkingControl.displayName = 'MarkingControl';

package/control/MarkingControl.jsx

@@ -1,143 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { PropTypes } from 'prop-types';
-
-import MarkInControl from './MarkInControl';
-import MarkOutControl from './MarkOutControl';
-// import MarkingAddButton from './MarkingAddButton';
-// import MarkingDeleteButton from './MarkingDeleteButton';
-import MarkingPreviewButton from './MarkingPreview';
-import MarkingDuration from './MarkingDuration';
-
-const propTypes = {
-  frameRate: PropTypes.number,
-  player: PropTypes.instanceOf(Object),
-  actions: PropTypes.instanceOf(Object),
-  markers: PropTypes.instanceOf(Object),
-  controlType: PropTypes.string,
-  playerType: PropTypes.oneOf([
-    'dubbing_review',
-    'clipping_default',
-    'default',
-    'tagging',
-    'qc',
-    'subtitle',
-    'snp_edit',
-    'archive',
-    'restore',
-    'clipping',
-    'storyboard',
-    'panel'
-  ]),
-  onAddMarker: PropTypes.func,
-  onMarkerSelect: PropTypes.func,
-  onDeleteMarker: PropTypes.func,
-  initialTime: PropTypes.number,
-  allowMarkerOverlap: PropTypes.bool
-};
-
-const defaultProps = {
-  frameRate: 0,
-  player: {},
-  actions: {}
-};
-
-const MarkingBlock = styled.div`
-  min-width: 300px;
-  margin: 0 15px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-export default function MarkingControl({
-  player,
-  frameRate,
-  initialTime,
-  actionClick,
-  onAddMarker,
-  onMarkerSelect,
-  onDeleteMarker,
-  markers,
-  controlType,
-  playerType,
-  allowMarkerOverlap,
-  playerReadOnlyMode,
-  disablePlayerActions = [],
-  playerSelectedMarker,
-  currentTime
-}) {
-  return (
-    <React.Fragment>
-      {playerType !== 'panel' && playerType !== 'default' && playerType !== 'clipping_default' ? (
-        <MarkingBlock>
-          {(!(playerSelectedMarker.leftMarker > -1) || !(playerSelectedMarker.rightMarker > -1)) &&
-          playerType !== 'panel' &&
-          playerType !== 'default' &&
-          playerType !== 'clipping_default' &&
-          !playerReadOnlyMode &&
-          !disablePlayerActions.includes('marking_controls') ? (
-            <React.Fragment>
-              <MarkInControl
-                leftMarker={playerSelectedMarker.leftMarker}
-                currentTime={currentTime}
-                actionClick={actionClick}
-                markers={markers}
-                allowMarkerOverlap={allowMarkerOverlap}
-                onAddMarker={onAddMarker}
-              />
-              <MarkOutControl
-                leftMarker={playerSelectedMarker.leftMarker}
-                currentTime={currentTime}
-                rightMarker={playerSelectedMarker.rightMarker}
-                actionClick={actionClick}
-                markers={markers}
-                controlType={controlType}
-                onMarkerSelect={onMarkerSelect}
-                allowMarkerOverlap={allowMarkerOverlap}
-                onAddMarker={onAddMarker}
-              />
-            </React.Fragment>
-          ) : null}
-          {playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1 ? (
-            <MarkingDuration
-              leftMarker={playerSelectedMarker.leftMarker}
-              rightMarker={playerSelectedMarker.rightMarker}
-              frameRate={frameRate}
-              initialTime={initialTime}
-            />
-          ) : null}
-          {/* //Commented for CN-632. 
-           {player.leftMarker > -1 && player.rightMarker > -1 ? (
-            <React.Fragment>
-              {player.markerType === 'create' &&
-              controlType === 'advanced' &&
-              player.markerCreate ? (
-                <MarkingAddButton
-                  leftMarker={player.leftMarker}
-                  rightMarker={player.rightMarker}
-                  onAddMarker={onAddMarker}
-                  actions={actions}
-                />
-              ) : null}
-            </React.Fragment>
-          ) : null} */}
-          {playerSelectedMarker.leftMarker > -1 && playerSelectedMarker.rightMarker > -1 ? (
-            <MarkingPreviewButton actionClick={actionClick} leftMarker={playerSelectedMarker.leftMarker} />
-          ) : null}
-          {/* {(playerSelectedMarker.leftMarker > -1 || playerSelectedMarker.rightMarker > -1) &&
-          playerSelectedMarker.markerType === 'create' &&
-          playerSelectedMarker.markerCreate &&
-          !playerReadOnlyMode &&
-          !disablePlayerActions.includes('marking_controls') ? (
-            <MarkingDeleteButton actions={actions} onDeleteMarker={onDeleteMarker} />
-          ) : null} */}
-        </MarkingBlock>
-      ) : null}
-    </React.Fragment>
-  );
-}
-
-MarkingControl.propTypes = propTypes;
-MarkingControl.defaultProps = defaultProps;
-MarkingControl.displayName = 'MarkingControl';

package/control/MarkingPreview.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _propTypes = require("prop-types");
-var _components = require("@desynova-digital/components");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var propTypes = {
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  leftMarker: _propTypes.PropTypes.number
-};
-var PreviewButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  border-color: #afb2ba;\n  border-width: 1px;\n  margin: 0 5px 0 5px;\n  &:hover,\n  &:focus {\n    background: transparent;\n    border-color: #afb2ba;\n  }\n\n  ", " {\n    svg path {\n      fill: #afb2ba;\n    }\n  }\n"])), _components.Icon.Element);
-var MarkingPreview = function MarkingPreview(_ref) {
-  var actionClick = _ref.actionClick,
-    leftMarker = _ref.leftMarker;
-  var handleClick = function handleClick() {
-    actionClick({
-      action: 'seek',
-      value: parseFloat(leftMarker)
-    });
-    actionClick({
-      action: 'play'
-    });
-    actionClick({
-      action: 'handle_video_preview',
-      value: true
-    });
-  };
-  return /*#__PURE__*/_react["default"].createElement(PreviewButton, {
-    display: "rounded",
-    appearance: "cta",
-    icon: "play",
-    iconWidth: 6,
-    iconHeight: 8,
-    width: 20,
-    height: 20,
-    onClick: handleClick
-  });
-};
-var _default = MarkingPreview;
-exports["default"] = _default;
-MarkingPreview.propTypes = propTypes;
-MarkingPreview.displayName = 'MarkingPreview';

package/control/MarkingPreview.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { PropTypes } from 'prop-types';
-import { Button, Icon } from '@desynova-digital/components';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  leftMarker: PropTypes.number
-};
-
-const PreviewButton = styled(Button)`
-  background: transparent;
-  border-color: #afb2ba;
-  border-width: 1px;
-  margin: 0 5px 0 5px;
-  &:hover,
-  &:focus {
-    background: transparent;
-    border-color: #afb2ba;
-  }
-
-  ${Icon.Element} {
-    svg path {
-      fill: #afb2ba;
-    }
-  }
-`;
-
-const MarkingPreview = ({ actionClick, leftMarker }) => {
-  const handleClick = () => {
-    actionClick({
-      action: 'seek',
-      value: parseFloat(leftMarker)
-    });
-    actionClick({
-      action: 'play'
-    });
-    actionClick({
-      action: 'handle_video_preview',
-      value: true
-    });
-  };
-
-  return (
-    <PreviewButton
-      display="rounded"
-      appearance="cta"
-      icon="play"
-      iconWidth={6}
-      iconHeight={8}
-      width={20}
-      height={20}
-      onClick={handleClick}
-    />
-  );
-};
-
-export default MarkingPreview;
-MarkingPreview.propTypes = propTypes;
-MarkingPreview.displayName = 'MarkingPreview';

package/control/PlayBackRateControl.jsx

@@ -1,106 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import { PropTypes } from 'prop-types';
-import { Icon } from '@desynova-digital/components';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object)
-};
-
-const PlaybackRateBlock = styled('div')`
-  display: block;
-  background: transparent;
-  font-family: SFUIText-Medium;
-  font-size: 12px;
-  text-transform: uppercase;
-  align-items: center;
-  padding: 0 !important;
-  .playback-block {
-    display: flex;
-    justify-content: flex-start;
-    border-bottom: 1px solid #eeeeee;
-    p {
-      margin-left: 10px;
-      white-space: nowrap;
-    }
-  }
-  .playback-rate-body {
-    padding: 0 !important;
-    display: flex;
-    justify-content: space-between;
-    .playback-rate {
-      border-right: 1px solid #eeeeee;
-      &:last-child {
-        border: none;
-      }
-      &:hover {
-        background: rgba(0, 206, 198, 0.1);
-      }
-      &.active {
-        pointer-events: none;
-        color: #00cec6;
-      }
-    }
-  }
-`;
-
-export default class PlaybackRateControl extends Component {
-  constructor(props) {
-    super(props);
-    this.changePlaybackRate = this.changePlaybackRate.bind(this);
-  }
-
-  changePlaybackRate(playbackRate) {
-    const { actionClick } = this.props;
-    actionClick({
-      action: 'playback_rate_change',
-      value: playbackRate
-    });
-    // actions.changeRate(playbackRate, {
-    //   action: 'fast-forward',
-    //   source: 'shortcut'
-    // });
-  }
-
-  render() {
-    const { playbackRate } = this.props;
-    return (
-      <PlaybackRateBlock>
-        <div className="playback-block">
-          <Icon name="playback-rate" width={14} height={14} color="#182738" />
-          <p style={{ color: '#182738' }}>Playback Speed</p>
-        </div>
-        <div className="playback-rate-body">
-          <div
-            className={playbackRate === 1 ? 'playback-rate active' : 'playback-rate'}
-            onClick={() => this.changePlaybackRate(1)}
-            role="presentation">
-            1x
-          </div>
-          <div
-            className={playbackRate === 1.5 ? 'playback-rate active' : 'playback-rate'}
-            onClick={() => this.changePlaybackRate(1.5)}
-            role="presentation">
-            1.5x
-          </div>
-          <div
-            className={playbackRate === 2 ? 'playback-rate active' : 'playback-rate'}
-            onClick={() => this.changePlaybackRate(2)}
-            role="presentation">
-            2x
-          </div>
-          <div
-            className={playbackRate === 4 ? 'playback-rate active' : 'playback-rate'}
-            onClick={() => this.changePlaybackRate(4)}
-            role="presentation">
-            4x
-          </div>
-        </div>
-      </PlaybackRateBlock>
-    );
-  }
-}
-
-PlaybackRateControl.propTypes = propTypes;
-PlaybackRateControl.displayName = 'PlaybackRateControl';

package/control/PlayProgressBar.jsx

@@ -1,92 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import { formatTime } from '../utils';
-import colors from '../utils/colors';
-
-const propTypes = {
-  currentTime: PropTypes.number,
-  duration: PropTypes.number,
-  percentage: PropTypes.string,
-  player: PropTypes.instanceOf(Object),
-  playerType: PropTypes.oneOf([
-    'dubbing_review',
-    'clipping_default',
-    'default',
-    'tagging',
-    'qc',
-    'subtitle',
-    'snp_edit',
-    'archive',
-    'restore',
-    'clipping',
-    'storyboard',
-    'panel'
-  ]),
-  assetType: PropTypes.oneOf(['fc', 'rc']),
-  controlType: PropTypes.oneOf(['default', 'advanced'])
-};
-
-const defaultProps = {
-  playerType: 'default',
-  controlType: 'default'
-};
-
-const ProgressBarBlock = styled.div`
-  position: absolute;
-  width: 0px;
-  height: 100%;
-  left: 0;
-  top: 0;
-  background: ${(props) => colors.common.video[props.assetType].base};
-  &:after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    position: absolute;
-    background: ${(props) => colors.common.video[props.assetType].base};
-    border-radius: 100%;
-    right: -6px;
-    top: -5px;
-    box-shadow: 0 0 14px 1px ${(props) => colors.common.video[props.assetType].base};
-  }
-  &:before {
-    content: '';
-    width: 2px;
-    height: 46px;
-    position: absolute;
-    background: ${(props) => colors.common.video[props.assetType].base};
-    right: -1px;
-    top: 4px;
-    display: ${(props) => {
-      return props.controlType === 'advanced' && !props.isFullscreen ? 'block' : 'none';
-    }};
-  }
-`;
-// Shows play progress
-export default function PlayProgressBar({
-  currentTime,
-  duration,
-  percentage,
-  playerType,
-  assetType,
-  controlType,
-  isFullscreen
-}) {
-  return (
-    <ProgressBarBlock
-      data-current-time={formatTime(currentTime, duration)}
-      style={{
-        width: percentage
-      }}
-      playerType={playerType}
-      assetType={assetType}
-      controlType={controlType}
-      isFullscreen={isFullscreen}
-    />
-  );
-}
-
-PlayProgressBar.propTypes = propTypes;
-PlayProgressBar.defaultProps = defaultProps;
-PlayProgressBar.displayName = 'PlayProgressBar';

package/control/PlayToggle.js

@@ -1,56 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _propTypes = require("prop-types");
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _components = require("@desynova-digital/components");
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var propTypes = {
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  player: _propTypes.PropTypes.instanceOf(Object)
-};
-var defaultProps = {
-  actions: {},
-  player: {}
-};
-var PlayPauseButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0 10px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
-var PlayToggle = function PlayToggle(_ref) {
-  var paused = _ref.paused,
-    actionClick = _ref.actionClick;
-  var handleClick = function handleClick() {
-    if (paused) {
-      actionClick({
-        action: 'play'
-      });
-    } else {
-      actionClick({
-        action: 'pause'
-      });
-    }
-  };
-  return /*#__PURE__*/_react["default"].createElement(PlayPauseButton, {
-    display: "rounded",
-    appearance: "cta",
-    icon: paused ? 'play' : 'pause',
-    iconWidth: paused ? 12 : 25,
-    iconHeight: paused ? 15 : 25,
-    width: 20,
-    height: 20,
-    tabIndex: "0",
-    onClick: handleClick
-  });
-};
-var _default = PlayToggle;
-exports["default"] = _default;
-PlayToggle.propTypes = propTypes;
-PlayToggle.defaultProps = defaultProps;
-PlayToggle.displayName = 'PlayToggle';

package/control/PlayToggle.jsx

@@ -1,57 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import { Button } from '@desynova-digital/components';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object)
-};
-
-const defaultProps = {
-  actions: {},
-  player: {}
-};
-
-const PlayPauseButton = styled(Button)`
-  background: transparent;
-  border: none;
-  margin: 0 10px;
-  &:hover,
-  &:focus {
-    background: transparent;
-  }
-`;
-
-const PlayToggle = ({ paused, actionClick }) => {
-  const handleClick = () => {
-    if (paused) {
-      actionClick({
-        action: 'play'
-      });
-    } else {
-      actionClick({
-        action: 'pause'
-      });
-    }
-  };
-
-  return (
-    <PlayPauseButton
-      display="rounded"
-      appearance="cta"
-      icon={paused ? 'play' : 'pause'}
-      iconWidth={paused ? 12 : 25}
-      iconHeight={paused ? 15 : 25}
-      width={20}
-      height={20}
-      tabIndex="0"
-      onClick={handleClick}
-    />
-  );
-};
-
-export default PlayToggle;
-PlayToggle.propTypes = propTypes;
-PlayToggle.defaultProps = defaultProps;
-PlayToggle.displayName = 'PlayToggle';