@desynova-digital/player 4.0.0 → 4.0.2

package/control/AudioTracksMenuButton.jsx

@@ -1,80 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import Menu from '../utils/Menu';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object)
-};
-
-const AudioTrackBlock = styled('div')`
-  text-align: left;
-  background: transparent;
-  cursor: pointer;
-  border-bottom: 1px solid #eeeeee;
-  &:last-child {
-    border: none;
-  }
-  &:hover,
-  &:focus {
-    background: rgba(0, 206, 198, 0.1);
-  }
-  p {
-    padding 15px;
-    font-family: SFUIText-Medium;
-    font-size: 12px;
-    white-space: nowrap;
-  }
-`;
-
-class AudioTracksMenuButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  changeTrack(track) {
-    const { actionClick } = this.props;
-    actionClick({
-      action: 'handle_audio_track_change',
-      value: track
-    });
-  }
-
-  render() {
-    const { audioTracksArr, activeAudio } = this.props;
-
-    return (
-      <React.Fragment>
-        {audioTracksArr && audioTracksArr.length ? (
-          <Menu icon="audio-track" style={{ marginRight: '10px' }} position="left">
-            <div className="menu-container">
-              {audioTracksArr.map((track) => {
-                return (
-                  <AudioTrackBlock
-                    onClick={() => this.changeTrack(track)}
-                    role="presentation"
-                    key={track.id}
-                    style={activeAudio && activeAudio.id === track.id ? { pointerEvents: 'none' } : null}>
-                    <p
-                      style={
-                        activeAudio && activeAudio.id === track.id
-                          ? { color: '#00cec6', pointerEvents: 'none' }
-                          : { color: '#333333' }
-                      }>
-                      {track.name}
-                    </p>
-                  </AudioTrackBlock>
-                );
-              })}
-            </div>
-          </Menu>
-        ) : null}
-      </React.Fragment>
-    );
-  }
-}
-
-AudioTracksMenuButton.propTypes = propTypes;
-AudioTracksMenuButton.displayName = 'AudioTracksMenuButton';
-export default AudioTracksMenuButton;

package/control/ControlBar.js

@@ -1,303 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = require("prop-types");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _colors = _interopRequireDefault(require("../utils/colors"));
-var _PlayToggle = _interopRequireDefault(require("./PlayToggle"));
-var _ForwardBackwardControl = _interopRequireDefault(require("./ForwardBackwardControl"));
-var _CurrentTimeDisplay = _interopRequireDefault(require("./CurrentTimeDisplay"));
-var _DurationDisplay = _interopRequireDefault(require("./DurationDisplay"));
-var _VolumneMenuButton = _interopRequireDefault(require("./VolumneMenuButton"));
-var _AudioTracksMenuButton = _interopRequireDefault(require("./AudioTracksMenuButton"));
-var _SettingsMenuButton = _interopRequireDefault(require("./SettingsMenuButton"));
-var _FullscreenToggle = _interopRequireDefault(require("./FullscreenToggle"));
-var _MarkingControl = _interopRequireDefault(require("./MarkingControl"));
-var _templateObject, _templateObject2;
-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 PlayerControlBlock = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: ", ";\n  overflow: ", ";\n  position: ", ";\n  bottom: ", ";\n  background: ", ";\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  transition: all 250ms ease-in-out;\n"])), function (props) {
-  return props.player === 'panel' && props.active || props.player !== 'panel' ? '50px' : '0px';
-}, function (props) {
-  return props.player === 'panel' && props.active || props.player !== 'panel' ? 'visible' : 'hidden';
-}, function (props) {
-  return props.player === 'panel' ? 'absolute' : 'relative';
-}, function (props) {
-  return props.player === 'panel' ? '0px' : 'initial';
-}, _colors["default"].common.base.black);
-var VideoControlBlock = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n"])));
-var ControlBar = function ControlBar(_ref) {
-  var playerType = _ref.playerType,
-    actionClick = _ref.actionClick,
-    controlType = _ref.controlType,
-    paused = _ref.paused,
-    userActivity = _ref.userActivity,
-    currentTime = _ref.currentTime,
-    initialTime = _ref.initialTime,
-    frameRate = _ref.frameRate,
-    duration = _ref.duration,
-    muted = _ref.muted,
-    assetType = _ref.assetType,
-    volume = _ref.volume,
-    isFullscreen = _ref.isFullscreen,
-    audioTracksArr = _ref.audioTracksArr,
-    activeAudio = _ref.activeAudio,
-    SDBorderActive = _ref.SDBorderActive,
-    playbackRate = _ref.playbackRate,
-    onAddMarker = _ref.onAddMarker,
-    onDeleteMarker = _ref.onDeleteMarker,
-    allowMarkerOverlap = _ref.allowMarkerOverlap,
-    playerReadOnlyMode = _ref.playerReadOnlyMode,
-    disablePlayerActions = _ref.disablePlayerActions,
-    playerSelectedMarker = _ref.playerSelectedMarker,
-    markers = _ref.markers;
-  var getDefaultChildren = function getDefaultChildren() {
-    return [/*#__PURE__*/_react["default"].createElement(_PlayToggle["default"], {
-      paused: paused,
-      actionClick: actionClick,
-      key: "play-toggle"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "replay",
-      seconds: 10,
-      actionClick: actionClick,
-      key: "replay-control-10"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "replay",
-      actionClick: actionClick,
-      key: "replay-control"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "forward",
-      actionClick: actionClick,
-      key: "forward-control"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "forward",
-      seconds: 10,
-      actionClick: actionClick,
-      key: "forward-control-10"
-    }), /*#__PURE__*/_react["default"].createElement(_CurrentTimeDisplay["default"], {
-      currentTime: currentTime,
-      initialTime: initialTime,
-      frameRate: frameRate,
-      key: "current-time-display"
-    }), /*#__PURE__*/_react["default"].createElement(_DurationDisplay["default"], {
-      duration: duration,
-      frameRate: frameRate,
-      key: "duration-display"
-    }), /*#__PURE__*/_react["default"].createElement(_VolumneMenuButton["default"], {
-      muted: muted,
-      assetType: assetType,
-      playerType: playerType,
-      actionClick: actionClick,
-      volume: volume,
-      style: {
-        margin: 'auto 10px auto auto'
-      },
-      key: "volume-menu-button"
-    }), /*#__PURE__*/_react["default"].createElement(_AudioTracksMenuButton["default"], {
-      audioTracksArr: audioTracksArr,
-      activeAudio: activeAudio,
-      actionClick: actionClick,
-      key: "audio-tracks-menu-button"
-    }), /*#__PURE__*/_react["default"].createElement(_SettingsMenuButton["default"], {
-      actionClick: actionClick,
-      SDBorderActive: SDBorderActive,
-      playbackRate: playbackRate,
-      key: "settings-menu-button"
-    }), /*#__PURE__*/_react["default"].createElement(_FullscreenToggle["default"], {
-      key: "fullscreen-toggle",
-      actionClick: actionClick,
-      style: {
-        marginRight: '10px'
-      }
-    })
-
-    //   // <CommentsButton {...this.props} key="comments-button" order={6.01} />,
-    //   // <EditorControlMenuButton
-    //   //   style={{ margin: 'auto 10px auto auto' }}
-    //   //   {...this.props}
-    //   //   key="edit-menu-button"
-    //   //   order={6.1}
-    //   // />,
-    //   <VolumeMenuButton
-    //     style={{ margin: 'auto 10px auto auto' }}
-    //     {...this.props}
-    //     key="volume-menu-button"
-    //     order={7}
-    //   />,
-    //   <SubtitleLanguagesMenuButton
-    //     {...this.props}
-    //     key="subtitle-menu-button"
-    //     order={7}
-    //   />,
-    //   <AudioTracksMenuButton
-    //     {...this.props}
-    //     key="audio-tracks-menu-button"
-    //     order={7}
-    //   />,
-    //   <SettingsMenuButton
-    //     {...this.props}
-    //     key="settings-menu-button"
-    //     order={8}
-    //   />,
-    //   <FullscreenToggle {...this.props} key="fullscreen-toggle" order={9} style={{ marginRight: '10px' }} />
-    ];
-  };
-
-  var getAdvancedChildren = function getAdvancedChildren() {
-    return [/*#__PURE__*/_react["default"].createElement(_PlayToggle["default"], {
-      paused: paused,
-      actionClick: actionClick,
-      key: "play-toggle"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "replay",
-      seconds: 10,
-      actionClick: actionClick,
-      key: "replay-control-10"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "replay",
-      actionClick: actionClick,
-      key: "replay-control"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "forward",
-      actionClick: actionClick,
-      key: "forward-control"
-    }), /*#__PURE__*/_react["default"].createElement(_ForwardBackwardControl["default"], {
-      mode: "forward",
-      seconds: 10,
-      actionClick: actionClick,
-      key: "forward-control-10"
-    }), /*#__PURE__*/_react["default"].createElement(_CurrentTimeDisplay["default"], {
-      currentTime: currentTime,
-      initialTime: initialTime,
-      frameRate: frameRate,
-      key: "current-time-display"
-    }), /*#__PURE__*/_react["default"].createElement(_DurationDisplay["default"], {
-      duration: duration,
-      frameRate: frameRate,
-      key: "duration-display"
-    }), /*#__PURE__*/_react["default"].createElement(_MarkingControl["default"], {
-      frameRate: frameRate,
-      actionClick: actionClick,
-      onAddMarker: onAddMarker,
-      onDeleteMarker: onDeleteMarker,
-      markers: markers,
-      controlType: controlType,
-      playerType: playerType,
-      allowMarkerOverlap: allowMarkerOverlap,
-      playerReadOnlyMode: playerReadOnlyMode,
-      disablePlayerActions: disablePlayerActions,
-      playerSelectedMarker: playerSelectedMarker,
-      currentTime: currentTime,
-      key: "marking-controls"
-    }), /*#__PURE__*/_react["default"].createElement(_VolumneMenuButton["default"], {
-      muted: muted,
-      assetType: assetType,
-      playerType: playerType,
-      actionClick: actionClick,
-      volume: volume,
-      style: {
-        margin: 'auto 10px auto auto'
-      },
-      key: "volume-menu-button"
-    }), /*#__PURE__*/_react["default"].createElement(_AudioTracksMenuButton["default"], {
-      audioTracksArr: audioTracksArr,
-      activeAudio: activeAudio,
-      actionClick: actionClick,
-      key: "audio-tracks-menu-button"
-    }), /*#__PURE__*/_react["default"].createElement(_SettingsMenuButton["default"], {
-      actionClick: actionClick,
-      SDBorderActive: SDBorderActive,
-      playbackRate: playbackRate,
-      key: "settings-menu-button"
-    }), /*#__PURE__*/_react["default"].createElement(_FullscreenToggle["default"], {
-      key: "fullscreen-toggle",
-      actionClick: actionClick,
-      style: {
-        marginRight: '10px'
-      }
-    })
-
-    //   <ReplayControl {...this.props} key="replay-control" order={3.1} />,
-    //   <ForwardControl {...this.props} key="forward-control" order={4} />,
-    //   <ForwardControl {...this.props} seconds={10} key="forward-control-10" order={4.1} />,
-    //   <CurrentTimeDisplay
-    //     {...this.props}
-    //     key="current-time-display"
-    //     order={5.1}
-    //   />,
-    //   <TimeDivider {...this.props} key="time-divider" order={5.2} />,
-    //   <DurationDisplay {...this.props} key="duration-display" order={5.3} />,
-    //   <MarkingControl {...this.props} key="marking-controls" order={6} />,
-    //   // {/* <CommentsButton {...this.props} key="comments-button" order={6.01} />, */}
-    //   // {/* <ZoomMenuButton
-    //   //   style={{ marginLeft: '0 10px' }}
-    //   //   {...this.props}
-    //   //   key="zoom-menu-button"
-    //   //   order={7}
-    //   // />, */}
-    //   // <EditorControlMenuButton
-    //   //   style={{ margin: 'auto 10px auto auto' }}
-    //   //   {...this.props}
-    //   //   key="edit-menu-button"
-    //   //   order={7}
-    //   // />,
-    //   <VolumeMenuButton
-    //     style={{ margin: 'auto 10px auto auto' }}
-    //     {...this.props}
-    //     key="volume-menu-button"
-    //     order={8}
-    //   />,
-    //   <SubtitleLanguagesMenuButton
-    //     {...this.props}
-    //     key="subtitle-menu-button"
-    //     order={8}
-    //   />,
-    //   <CameraButton
-    //     order={9}
-    //     playerType={playerType}
-    //   />,
-    //   <SubtitleMovementMenu
-    //     {...this.props}
-    //     key="subtitle-movement-menu"
-    //     order={8}
-    //   />,
-    //   <AudioTracksMenuButton
-    //     {...this.props}
-    //     key="audio-tracks-menu-button"
-    //     order={9}
-    //   />,
-    //   <SettingsMenuButton
-    //     {...this.props}
-    //     key="settings-menu-button"
-    //     order={10}
-    //   />,
-    //   <FullscreenToggle {...this.props} key="fullscreen-toggle" order={11} style={{ marginRight: '10px' }}/>
-    ];
-  };
-
-  var getChildren = function getChildren() {
-    // const { controlType, children, fileType, player } = this.props;
-    // const childrens = React.Children.toArray(children);
-    var defaultChildren = [];
-    // if(fileType === 'image') {
-    //   defaultChildren = this.getImageChildrens();
-    // } else {
-    defaultChildren = controlType === 'advanced' && !isFullscreen ? getAdvancedChildren() : getDefaultChildren();
-    // }
-
-    return defaultChildren; // mergeAndSortChildren(defaultChildren, []);
-  };
-
-  var children = getChildren();
-  return /*#__PURE__*/_react["default"].createElement(PlayerControlBlock, {
-    id: "controls-container",
-    active: userActivity && userActivity || null,
-    player: playerType
-  }, /*#__PURE__*/_react["default"].createElement(VideoControlBlock, null, children));
-};
-var _default = ControlBar;
-exports["default"] = _default;

package/control/ControlBar.jsx

@@ -1,264 +0,0 @@
-import React from 'react';
-import { PropTypes } from 'prop-types';
-import styled from 'styled-components';
-import colors from '../utils/colors';
-import PlayToggle from './PlayToggle';
-// import { mergeAndSortChildren } from '../utils';
-import ForwardBackWardComponent from './ForwardBackwardControl';
-import CurrentTimeDisplay from './CurrentTimeDisplay';
-import DurationDisplay from './DurationDisplay';
-import VolumeMenuButton from './VolumneMenuButton';
-import AudioTracksMenuButton from './AudioTracksMenuButton';
-import SettingsMenuButton from './SettingsMenuButton';
-import FullscreenToggle from './FullscreenToggle';
-import MarkingControl from './MarkingControl';
-
-const PlayerControlBlock = styled.div`
-  width: 100%;
-  height: ${(props) => ((props.player === 'panel' && props.active) || props.player !== 'panel' ? '50px' : '0px')};
-  overflow: ${(props) =>
-    (props.player === 'panel' && props.active) || props.player !== 'panel' ? 'visible' : 'hidden'};
-  position: ${(props) => (props.player === 'panel' ? 'absolute' : 'relative')};
-  bottom: ${(props) => (props.player === 'panel' ? '0px' : 'initial')};
-  background: ${colors.common.base.black};
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  transition: all 250ms ease-in-out;
-`;
-
-const VideoControlBlock = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const ControlBar = ({
-  playerType,
-  actionClick,
-  controlType,
-  paused,
-  userActivity,
-  currentTime,
-  initialTime,
-  frameRate,
-  duration,
-  muted,
-  assetType,
-  volume,
-  isFullscreen,
-  audioTracksArr, //audio tracks props
-  activeAudio,
-  SDBorderActive, //settings menu props
-  playbackRate,
-  onAddMarker, //markers props
-  onDeleteMarker,
-  allowMarkerOverlap,
-  playerReadOnlyMode,
-  disablePlayerActions,
-  playerSelectedMarker,
-  markers
-}) => {
-  const getDefaultChildren = () => {
-    return [
-      <PlayToggle paused={paused} actionClick={actionClick} key="play-toggle" />,
-      <ForwardBackWardComponent mode="replay" seconds={10} actionClick={actionClick} key="replay-control-10" />,
-      <ForwardBackWardComponent mode="replay" actionClick={actionClick} key="replay-control" />,
-      <ForwardBackWardComponent mode="forward" actionClick={actionClick} key="forward-control" />,
-      <ForwardBackWardComponent mode="forward" seconds={10} actionClick={actionClick} key="forward-control-10" />,
-      <CurrentTimeDisplay
-        currentTime={currentTime}
-        initialTime={initialTime}
-        frameRate={frameRate}
-        key="current-time-display"
-      />,
-      <DurationDisplay duration={duration} frameRate={frameRate} key="duration-display" />,
-      <VolumeMenuButton
-        muted={muted}
-        assetType={assetType}
-        playerType={playerType}
-        actionClick={actionClick}
-        volume={volume}
-        style={{ margin: 'auto 10px auto auto' }}
-        key="volume-menu-button"
-      />,
-      <AudioTracksMenuButton
-        audioTracksArr={audioTracksArr}
-        activeAudio={activeAudio}
-        actionClick={actionClick}
-        key="audio-tracks-menu-button"
-      />,
-      <SettingsMenuButton
-        actionClick={actionClick}
-        SDBorderActive={SDBorderActive}
-        playbackRate={playbackRate}
-        key="settings-menu-button"
-      />,
-      <FullscreenToggle key="fullscreen-toggle" actionClick={actionClick} style={{ marginRight: '10px' }} />
-
-      //   // <CommentsButton {...this.props} key="comments-button" order={6.01} />,
-      //   // <EditorControlMenuButton
-      //   //   style={{ margin: 'auto 10px auto auto' }}
-      //   //   {...this.props}
-      //   //   key="edit-menu-button"
-      //   //   order={6.1}
-      //   // />,
-      //   <VolumeMenuButton
-      //     style={{ margin: 'auto 10px auto auto' }}
-      //     {...this.props}
-      //     key="volume-menu-button"
-      //     order={7}
-      //   />,
-      //   <SubtitleLanguagesMenuButton
-      //     {...this.props}
-      //     key="subtitle-menu-button"
-      //     order={7}
-      //   />,
-      //   <AudioTracksMenuButton
-      //     {...this.props}
-      //     key="audio-tracks-menu-button"
-      //     order={7}
-      //   />,
-      //   <SettingsMenuButton
-      //     {...this.props}
-      //     key="settings-menu-button"
-      //     order={8}
-      //   />,
-      //   <FullscreenToggle {...this.props} key="fullscreen-toggle" order={9} style={{ marginRight: '10px' }} />
-    ];
-  };
-
-  const getAdvancedChildren = () => {
-    return [
-      <PlayToggle paused={paused} actionClick={actionClick} key="play-toggle" />,
-      <ForwardBackWardComponent mode="replay" seconds={10} actionClick={actionClick} key="replay-control-10" />,
-      <ForwardBackWardComponent mode="replay" actionClick={actionClick} key="replay-control" />,
-      <ForwardBackWardComponent mode="forward" actionClick={actionClick} key="forward-control" />,
-      <ForwardBackWardComponent mode="forward" seconds={10} actionClick={actionClick} key="forward-control-10" />,
-      <CurrentTimeDisplay
-        currentTime={currentTime}
-        initialTime={initialTime}
-        frameRate={frameRate}
-        key="current-time-display"
-      />,
-      <DurationDisplay duration={duration} frameRate={frameRate} key="duration-display" />,
-      <MarkingControl
-        frameRate={frameRate}
-        actionClick={actionClick}
-        onAddMarker={onAddMarker}
-        onDeleteMarker={onDeleteMarker}
-        markers={markers}
-        controlType={controlType}
-        playerType={playerType}
-        allowMarkerOverlap={allowMarkerOverlap}
-        playerReadOnlyMode={playerReadOnlyMode}
-        disablePlayerActions={disablePlayerActions}
-        playerSelectedMarker={playerSelectedMarker}
-        currentTime={currentTime}
-        key="marking-controls"
-      />,
-      <VolumeMenuButton
-        muted={muted}
-        assetType={assetType}
-        playerType={playerType}
-        actionClick={actionClick}
-        volume={volume}
-        style={{ margin: 'auto 10px auto auto' }}
-        key="volume-menu-button"
-      />,
-      <AudioTracksMenuButton
-        audioTracksArr={audioTracksArr}
-        activeAudio={activeAudio}
-        actionClick={actionClick}
-        key="audio-tracks-menu-button"
-      />,
-      <SettingsMenuButton
-        actionClick={actionClick}
-        SDBorderActive={SDBorderActive}
-        playbackRate={playbackRate}
-        key="settings-menu-button"
-      />,
-      <FullscreenToggle key="fullscreen-toggle" actionClick={actionClick} style={{ marginRight: '10px' }} />
-
-      //   <ReplayControl {...this.props} key="replay-control" order={3.1} />,
-      //   <ForwardControl {...this.props} key="forward-control" order={4} />,
-      //   <ForwardControl {...this.props} seconds={10} key="forward-control-10" order={4.1} />,
-      //   <CurrentTimeDisplay
-      //     {...this.props}
-      //     key="current-time-display"
-      //     order={5.1}
-      //   />,
-      //   <TimeDivider {...this.props} key="time-divider" order={5.2} />,
-      //   <DurationDisplay {...this.props} key="duration-display" order={5.3} />,
-      //   <MarkingControl {...this.props} key="marking-controls" order={6} />,
-      //   // {/* <CommentsButton {...this.props} key="comments-button" order={6.01} />, */}
-      //   // {/* <ZoomMenuButton
-      //   //   style={{ marginLeft: '0 10px' }}
-      //   //   {...this.props}
-      //   //   key="zoom-menu-button"
-      //   //   order={7}
-      //   // />, */}
-      //   // <EditorControlMenuButton
-      //   //   style={{ margin: 'auto 10px auto auto' }}
-      //   //   {...this.props}
-      //   //   key="edit-menu-button"
-      //   //   order={7}
-      //   // />,
-      //   <VolumeMenuButton
-      //     style={{ margin: 'auto 10px auto auto' }}
-      //     {...this.props}
-      //     key="volume-menu-button"
-      //     order={8}
-      //   />,
-      //   <SubtitleLanguagesMenuButton
-      //     {...this.props}
-      //     key="subtitle-menu-button"
-      //     order={8}
-      //   />,
-      //   <CameraButton
-      //     order={9}
-      //     playerType={playerType}
-      //   />,
-      //   <SubtitleMovementMenu
-      //     {...this.props}
-      //     key="subtitle-movement-menu"
-      //     order={8}
-      //   />,
-      //   <AudioTracksMenuButton
-      //     {...this.props}
-      //     key="audio-tracks-menu-button"
-      //     order={9}
-      //   />,
-      //   <SettingsMenuButton
-      //     {...this.props}
-      //     key="settings-menu-button"
-      //     order={10}
-      //   />,
-      //   <FullscreenToggle {...this.props} key="fullscreen-toggle" order={11} style={{ marginRight: '10px' }}/>
-    ];
-  };
-
-  const getChildren = () => {
-    // const { controlType, children, fileType, player } = this.props;
-    // const childrens = React.Children.toArray(children);
-    let defaultChildren = [];
-    // if(fileType === 'image') {
-    //   defaultChildren = this.getImageChildrens();
-    // } else {
-    defaultChildren = controlType === 'advanced' && !isFullscreen ? getAdvancedChildren() : getDefaultChildren();
-    // }
-
-    return defaultChildren; // mergeAndSortChildren(defaultChildren, []);
-  };
-
-  const children = getChildren();
-
-  return (
-    <PlayerControlBlock id="controls-container" active={(userActivity && userActivity) || null} player={playerType}>
-      <VideoControlBlock>{children}</VideoControlBlock>
-    </PlayerControlBlock>
-  );
-};
-
-export default ControlBar;

package/control/CurrentTimeDisplay.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _propTypes = require("prop-types");
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _utils = require("../utils");
-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 = {
-  player: _propTypes.PropTypes.instanceOf(Object),
-  initialTime: _propTypes.PropTypes.number,
-  frameRate: _propTypes.PropTypes.number
-};
-var defaultProps = {
-  player: {}
-};
-var VideoCurrentTime = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  letter-spacing: -0.6px;\n  color: #ffffff;\n  min-width: 65px;\n  text-align: left;\n"])));
-var CurrentTimeDisplay = function CurrentTimeDisplay(_ref) {
-  var currentTime = _ref.currentTime,
-    initialTime = _ref.initialTime,
-    frameRate = _ref.frameRate;
-  var formattedTime = (0, _utils.secondsToTime)(currentTime.seconds, frameRate, initialTime);
-  return /*#__PURE__*/_react["default"].createElement(VideoCurrentTime, null, formattedTime);
-};
-CurrentTimeDisplay.propTypes = propTypes;
-CurrentTimeDisplay.defaultProps = defaultProps;
-CurrentTimeDisplay.displayName = 'CurrentTimeDisplay';
-var _default = CurrentTimeDisplay;
-exports["default"] = _default;