@desynova-digital/player 4.0.0 → 4.0.2

package/control/SeekBar.jsx

@@ -1,229 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import { PropTypes } from 'prop-types';
-
-// import AudioWaveform from './AudioWaveform';
-import Slider from './Slider';
-import PlayProgressBar from './PlayProgressBar';
-import { formatTime } from '../utils';
-import Timeline from './Timeline';
-import MarkerBar from './MarkerBar';
-// import TagsBar from '../TagsBar';
-// import MouseTimeDisplay from './MouseTimeDisplay';
-
-const AdvancedControlBlock = styled.div`
-  width: 100%;
-  height: 46px;
-  position: relative;
-  cursor: pointer;
-  z-index: 1;
-`;
-
-const SliderBlock = styled.div`
-  width: 100%;
-  height: 4px;
-  position: relative;
-  cursor: pointer;
-  z-index: 2;
-`;
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object),
-  controlType: PropTypes.string,
-  tagsMarker: PropTypes.instanceOf(Array),
-  mouseTime: PropTypes.instanceOf(Object),
-  assetType: PropTypes.oneOf(['fc', 'rc']),
-  playerType: PropTypes.oneOf([
-    'dubbing_review',
-    'clipping_default',
-    'default',
-    'tagging',
-    'qc',
-    'subtitle',
-    'snp_edit',
-    'archive',
-    'restore',
-    'clipping',
-    'storyboard',
-    'panel'
-  ])
-};
-
-export default class SeekBar extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.getPercent = this.getPercent.bind(this);
-    this.getNewTime = this.getNewTime.bind(this);
-    this.stepForward = this.stepForward.bind(this);
-    this.stepBack = this.stepBack.bind(this);
-
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-
-    this.state = {
-      sliderActive: false
-    };
-  }
-
-  componentDidMount() {}
-
-  componentDidUpdate() {}
-
-  /**
-   * Get percentage of video played
-   *
-   * @return {Number} Percentage played
-   * @method getPercent
-   */
-  getPercent() {
-    const {
-      currentTime: { seconds },
-      seekingTime,
-      duration
-    } = this.props;
-    const time = seekingTime || seconds;
-    const percent = time / duration.seconds;
-    return percent >= 1 ? 1 : percent;
-  }
-
-  getNewTime(event) {
-    const {
-      duration: { seconds }
-    } = this.props;
-    const distance = this.slider.calculateDistance(event);
-    const newTime = distance * seconds;
-
-    // Don't let video end while scrubbing.
-    return newTime === seconds ? newTime - 0.1 : newTime;
-  }
-
-  handleMouseDown() {
-    console.log('handleMouse handleMouseDown');
-    this.setState({ sliderActive: true });
-  }
-
-  handleMouseUp(event) {
-    console.log('handleMouse handleMouseUp');
-    const { actionClick } = this.props;
-    const newTime = this.getNewTime(event);
-    // Set new time (tell video to seek to new time)
-    actionClick({
-      action: 'seek',
-      value: newTime
-    });
-    // actions.handleEndSeeking(newTime);//todo check if needed
-    this.setState({ sliderActive: false });
-  }
-
-  handleMouseMove(event) {
-    const { sliderActive } = this.state;
-    if (sliderActive) {
-      const { actionClick } = this.props;
-      const newTime = this.getNewTime(event);
-      actionClick({
-        action: 'seeking_time',
-        value: newTime
-      });
-    }
-  }
-
-  stepForward() {
-    const { actionClick } = this.props;
-    actionClick({
-      action: 'add_seconds',
-      value: '0.04'
-    });
-  }
-
-  stepBack() {
-    const { actionClick } = this.props;
-    actionClick({
-      action: 'add_seconds',
-      value: '-0.04'
-    });
-  }
-
-  render() {
-    const {
-      currentTime: { seconds },
-      seekingTime,
-      duration,
-      isFullscreen,
-      controlType,
-      playerType,
-      tagsMarker,
-      assetType
-      // mouseTime
-    } = this.props;
-    const time = seekingTime || seconds;
-    return (
-      <React.Fragment>
-        <MarkerBar {...this.props} />
-        {/* {tagsMarker && tagsMarker.length ? <TagsBar {...this.props} /> : null} */}
-        {/* {controlType === 'advanced' ? <MarkerBar {...this.props} /> : null} */}
-        <div onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} onMouseUp={this.handleMouseUp}>
-          <SliderBlock>
-            <Slider
-              ref={(input) => {
-                this.slider = input;
-              }}
-              label="video progress bar"
-              valuenow={(this.getPercent() * 100).toFixed(2)}
-              valuetext={formatTime(time, duration.seconds)}
-              // onMouseDown={this.handleMouseDown}
-              // onMouseMove={this.handleMouseMove}
-              // onMouseUp={this.handleMouseUp}
-              getPercent={this.getPercent}
-              stepForward={this.stepForward}
-              stepBack={this.stepBack}>
-              {/* <LoadProgressBar
-                buffered={buffered}
-                currentTime={time}
-                duration={duration}
-                playerType={this.props.playerType}
-              />
-              <MouseTimeDisplay
-                duration={duration}
-                mouseTime={mouseTime}
-                playerType={playerType}
-              />*/}
-              <PlayProgressBar
-                currentTime={time}
-                duration={duration.seconds}
-                playerType={playerType}
-                assetType={assetType}
-                {...this.props}
-              />
-            </Slider>
-          </SliderBlock>
-          {controlType === 'advanced' && !isFullscreen ? (
-            <React.Fragment>
-              <AdvancedControlBlock>
-                {/* 
-                  <AudioWaveform
-                    {...this.props}
-                    ref={(c) => {
-                      this.audioWaveform = c;
-                    }}
-                  />
-                */}
-                <Timeline
-                  {...this.props}
-                  ref={(c) => {
-                    this.timeline = c;
-                  }}
-                />
-              </AdvancedControlBlock>
-            </React.Fragment>
-          ) : null}
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-
-SeekBar.displayName = 'SeekBar';
-SeekBar.propTypes = propTypes;

package/control/SettingsMenuButton.js

@@ -1,63 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = SettingsMenuButton;
-var _propTypes = require("prop-types");
-var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Menu = _interopRequireDefault(require("../utils/Menu"));
-var _components = require("@desynova-digital/components");
-var _PlayBackRateControl = _interopRequireDefault(require("./PlayBackRateControl"));
-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 propTypes = {
-  player: _propTypes.PropTypes.instanceOf(Object),
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  style: _propTypes.PropTypes.instanceOf(Object)
-};
-var SettingsMenuContainer = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  .settings-menu-tile {\n    background: transparent;\n    div {\n      padding: 15px;\n      cursor: pointer;\n    }\n  }\n"])));
-var SafeAreaBlock = (0, _styledComponents["default"])('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  background: transparent;\n  font-family: SFUIText-Medium;\n  font-size: 12px;\n  text-transform: uppercase;\n  justify-content: flex-start;\n  align-items: center;\n  &:hover {\n    background: rgba(0, 206, 198, 0.1);\n  }\n  p {\n    margin-left: 10px;\n    white-space: nowrap;\n  }\n"])));
-function SettingsMenuButton(_ref) {
-  var style = _ref.style,
-    SDBorderActive = _ref.SDBorderActive,
-    actionClick = _ref.actionClick,
-    playbackRate = _ref.playbackRate;
-  var handleClick = function handleClick() {
-    actionClick({
-      action: 'handle_sd_border_change',
-      value: !SDBorderActive
-    });
-  };
-  return /*#__PURE__*/_react["default"].createElement(_Menu["default"], {
-    icon: "settings",
-    position: "left",
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(SettingsMenuContainer, {
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "settings-menu-tile"
-  }, /*#__PURE__*/_react["default"].createElement(SafeAreaBlock, {
-    onClick: handleClick
-  }, /*#__PURE__*/_react["default"].createElement(_components.Icon, {
-    name: "safe-area",
-    width: 20,
-    height: 20,
-    color: SDBorderActive ? '#00cec6' : '#333333'
-  }), /*#__PURE__*/_react["default"].createElement("p", {
-    style: SDBorderActive ? {
-      color: '#00cec6'
-    } : {
-      color: '#333333'
-    }
-  }, "4:3 Safe Area"))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "settings-menu-tile"
-  }, /*#__PURE__*/_react["default"].createElement(_PlayBackRateControl["default"], {
-    actionClick: actionClick,
-    playbackRate: playbackRate
-  }))));
-}
-SettingsMenuButton.propTypes = propTypes;
-SettingsMenuButton.displayName = 'SettingsMenuButton';

package/control/SettingsMenuButton.jsx

@@ -1,69 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import Menu from '../utils/Menu';
-import { Icon } from '@desynova-digital/components';
-import PlaybackRateControl from './PlayBackRateControl';
-
-const propTypes = {
-  player: PropTypes.instanceOf(Object),
-  actions: PropTypes.instanceOf(Object),
-  style: PropTypes.instanceOf(Object)
-};
-
-const SettingsMenuContainer = styled.div`
-  width: 100%;
-  position: relative;
-  .settings-menu-tile {
-    background: transparent;
-    div {
-      padding: 15px;
-      cursor: pointer;
-    }
-  }
-`;
-
-const SafeAreaBlock = styled('div')`
-  display: flex;
-  background: transparent;
-  font-family: SFUIText-Medium;
-  font-size: 12px;
-  text-transform: uppercase;
-  justify-content: flex-start;
-  align-items: center;
-  &:hover {
-    background: rgba(0, 206, 198, 0.1);
-  }
-  p {
-    margin-left: 10px;
-    white-space: nowrap;
-  }
-`;
-
-export default function SettingsMenuButton({ style, SDBorderActive, actionClick, playbackRate }) {
-  const handleClick = () => {
-    actionClick({
-      action: 'handle_sd_border_change',
-      value: !SDBorderActive
-    });
-  };
-
-  return (
-    <Menu icon="settings" position="left" style={style}>
-      <SettingsMenuContainer style={style}>
-        <div className="settings-menu-tile">
-          <SafeAreaBlock onClick={handleClick}>
-            <Icon name="safe-area" width={20} height={20} color={SDBorderActive ? '#00cec6' : '#333333'} />
-            <p style={SDBorderActive ? { color: '#00cec6' } : { color: '#333333' }}>4:3 Safe Area</p>
-          </SafeAreaBlock>
-        </div>
-        <div className="settings-menu-tile">
-          <PlaybackRateControl actionClick={actionClick} playbackRate={playbackRate} />
-        </div>
-      </SettingsMenuContainer>
-    </Menu>
-  );
-}
-
-SettingsMenuButton.propTypes = propTypes;
-SettingsMenuButton.displayName = 'SettingsMenuButton';

package/control/Slider.jsx

@@ -1,243 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-import styled from 'styled-components';
-import colors from '../utils/colors';
-import * as Dom from '../utils/dom';
-
-const propTypes = {
-  onMouseDown: PropTypes.func,
-  onMouseMove: PropTypes.func,
-  stepForward: PropTypes.func,
-  stepBack: PropTypes.func,
-  sliderActive: PropTypes.func,
-  sliderInactive: PropTypes.func,
-  onMouseUp: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onClick: PropTypes.func,
-  getPercent: PropTypes.func,
-  vertical: PropTypes.bool,
-  children: PropTypes.node,
-  label: PropTypes.string,
-  valuenow: PropTypes.string,
-  valuetext: PropTypes.string
-};
-
-const defaultProps = {
-  onMouseDown: null,
-  onMouseMove: null,
-  stepForward: null,
-  stepBack: null,
-  sliderActive: null,
-  sliderInactive: null,
-  onMouseUp: null,
-  onFocus: null,
-  onBlur: null,
-  onClick: null,
-  getPercent: null,
-  vertical: false,
-  children: null,
-  label: '',
-  valuenow: '',
-  valuetext: ''
-};
-
-const SliderBlock = styled.div`
-  position: relative;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  background: ${colors.dark.base};
-`;
-
-export default class Slider extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseUp = this.handleMouseUp.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyPress = this.handleKeyPress.bind(this);
-    this.stepForward = this.stepForward.bind(this);
-    this.stepBack = this.stepBack.bind(this);
-    this.calculateDistance = this.calculateDistance.bind(this);
-    this.getProgress = this.getProgress.bind(this);
-    this.renderChildren = this.renderChildren.bind(this);
-
-    this.state = {
-      // active: false,
-    };
-  }
-
-  getProgress() {
-    const { getPercent } = this.props;
-    if (!getPercent) {
-      return 0;
-    }
-    let progress = getPercent();
-
-    // Protect against no duration and other division issues
-    if (typeof progress !== 'number' || progress < 0 || progress === Infinity) {
-      progress = 0;
-    }
-    return progress;
-  }
-
-  handleMouseDown(event) {
-    const { onMouseDown, sliderActive } = this.props;
-    /*
-     * event.preventDefault();
-     * event.stopPropagation();
-     */
-
-    document.addEventListener('mousemove', this.handleMouseMove, true);
-    document.addEventListener('mouseup', this.handleMouseUp, true);
-    document.addEventListener('touchmove', this.handleMouseMove, true);
-    document.addEventListener('touchend', this.handleMouseUp, true);
-
-    this.setState({
-      /*
-       *  active: true,
-       *  distance: 0
-       */
-    });
-
-    if (sliderActive) {
-      sliderActive(event);
-    }
-
-    this.handleMouseMove(event);
-
-    if (onMouseDown) {
-      onMouseDown(event);
-    }
-  }
-
-  handleMouseMove(event) {
-    const { onMouseMove } = this.props;
-
-    if (onMouseMove) {
-      onMouseMove(event);
-    }
-  }
-
-  handleMouseUp(event) {
-    const { onMouseUp, sliderInactive } = this.props;
-
-    document.removeEventListener('mousemove', this.handleMouseMove, true);
-    document.removeEventListener('mouseup', this.handleMouseUp, true);
-    document.removeEventListener('touchmove', this.handleMouseMove, true);
-    document.removeEventListener('touchend', this.handleMouseUp, true);
-
-    this.setState({
-      // active: false
-    });
-
-    if (sliderInactive) {
-      sliderInactive(event);
-    }
-
-    if (onMouseUp) {
-      onMouseUp(event);
-    }
-  }
-
-  handleFocus(e) {
-    const { onFocus } = this.props;
-    document.addEventListener('keydown', this.handleKeyPress, true);
-    if (onFocus) {
-      onFocus(e);
-    }
-  }
-
-  handleBlur(e) {
-    const { onBlur } = this.props;
-    document.removeEventListener('keydown', this.handleKeyPress, true);
-    if (onBlur) {
-      onBlur(e);
-    }
-  }
-
-  handleClick(event) {
-    const { onClick } = this.props;
-    event.preventDefault();
-    // event.stopPropagation();
-    if (onClick) {
-      onClick(event);
-    }
-  }
-
-  handleKeyPress(event) {
-    if (event.which === 37 || event.which === 40) {
-      // Left and Down Arrows
-      event.preventDefault();
-      event.stopPropagation();
-      this.stepBack();
-    } else if (event.which === 38 || event.which === 39) {
-      // Up and Right Arrows
-      event.preventDefault();
-      event.stopPropagation();
-      this.stepForward();
-    }
-  }
-
-  stepForward() {
-    const { stepForward } = this.props;
-    if (stepForward) {
-      stepForward();
-    }
-  }
-
-  stepBack() {
-    const { stepBack } = this.props;
-    if (stepBack) {
-      stepBack();
-    }
-  }
-
-  calculateDistance(event) {
-    const node = findDOMNode(this);
-    const position = Dom.getPointerPosition(node, event);
-    const { vertical } = this.props;
-    if (vertical) {
-      return position.y;
-    }
-    return position.x;
-  }
-
-  renderChildren() {
-    const progress = this.getProgress();
-    const percentage = `${(progress * 100).toFixed(2)}%`;
-    const { children } = this.props;
-    return React.Children.map(children, (child) => React.cloneElement(child, { progress, percentage }));
-  }
-
-  render() {
-    const { label, valuenow, valuetext } = this.props;
-
-    return (
-      <SliderBlock
-        tabIndex="0"
-        onMouseDown={this.handleMouseDown}
-        onTouchStart={this.handleMouseDown}
-        onFocus={this.handleFocus}
-        onBlur={this.handleBlur}
-        onClick={this.handleClick}
-        aria-label={label || ''}
-        aria-valuenow={valuenow || ''}
-        aria-valuetext={valuetext || ''}
-        aria-valuemin={0}
-        aria-valuemax={100}>
-        {this.renderChildren()}
-      </SliderBlock>
-    );
-  }
-}
-
-Slider.propTypes = propTypes;
-Slider.defaultProps = defaultProps;
-Slider.displayName = 'Slider';