@desynova-digital/player 4.0.0 → 4.0.2

package/control/Timeline.jsx

@@ -1,131 +0,0 @@
-import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-import styled from 'styled-components';
-import { PropTypes } from 'prop-types';
-import { Icon } from '@desynova-digital/components';
-import { secondsToTime } from '../utils';
-
-const propTypes = {
-  player: PropTypes.instanceOf(Object),
-  initialTime: PropTypes.number,
-  frameRate: PropTypes.number
-};
-
-const TimelineBlock = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0;
-  .player-time {
-    width: 100%;
-    position: relative;
-    height: 46px;
-    user-select: none;
-    &:first-child {
-      p {
-        left: 0px;
-      }
-    }
-    &:last-child {
-      width: 10px;
-      ${Icon.Element} {
-        display: none;
-      }
-      p {
-        left: auto;
-        right: 0px;
-      }
-    }
-    ${Icon.Element} {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-    }
-    p {
-      color: #aaa;
-      font-size: 10px;
-      font-family: SFUIText-Regular;
-      left: -28px;
-      top: 10px;
-      letter-spacing: 0.5px;
-      position: absolute;
-      user-select: none;
-    }
-  }
-`;
-
-export default class Timeline extends Component {
-  constructor(props, context) {
-    super(props, context);
-    this.state = {
-      timeArray: []
-    };
-    this.generateTimeline = this.generateTimeline.bind(this);
-  }
-
-  componentDidMount() {
-    this.generateTimeline();
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (prevProps.duration?.seconds !== this.props.duration?.seconds) {
-      this.generateTimeline();
-    }
-  }
-
-  generateTimeline() {
-    const {
-      duration: { seconds }
-    } = this.props;
-    const timelineBlock = findDOMNode(this.timelineBlock);
-    const perTimeWidth = 100;
-    const sliderWidth = timelineBlock.offsetWidth;
-    const timeBlocks = parseInt(sliderWidth / perTimeWidth, 10);
-    const timeDistance = parseInt(seconds / timeBlocks, 10);
-    const timeArray = [0];
-    for (let i = 0; i < timeBlocks; i++) {
-      const lastValue = timeArray[timeArray.length - 1];
-      const currentTime = lastValue + timeDistance;
-      if (currentTime + timeDistance < seconds) {
-        timeArray.push(currentTime);
-      } else {
-        timeArray.push(seconds);
-        break;
-      }
-    }
-    this.setState({ timeArray });
-  }
-
-  render() {
-    const { initialTime, frameRate } = this.props;
-    const { timeArray } = this.state;
-    return (
-      <TimelineBlock
-        ref={(c) => {
-          this.timelineBlock = c;
-        }}>
-        {timeArray.map((time) => {
-          const formattedTime = secondsToTime(time, frameRate, initialTime);
-          return (
-            <div
-              className="player-time"
-              ref={(c) => {
-                this.timelineContainer = c;
-              }}
-              key={time}>
-              <p>{formattedTime}</p>
-              <Icon name="timeline" stroke="#aaa" />
-            </div>
-          );
-        })}
-      </TimelineBlock>
-    );
-  }
-}
-
-Timeline.propTypes = propTypes;
-Timeline.displayName = 'Timeline';

package/control/VolumeBar.jsx

@@ -1,174 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React, { Component } from 'react';
-import styled from 'styled-components';
-// import VolumeLevel from './VolumeLevel';
-import colors from '../utils/colors';
-import Slider from './Slider';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object),
-  vertical: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func
-};
-
-const defaultProps = {
-  actions: {},
-  player: {},
-  vertical: false,
-  onFocus: null,
-  onBlur: null,
-  percentage: '100%',
-  vertical: false
-};
-
-const VolumeControlBar = styled.div`
-  height: 85%;
-  position: absolute;
-  cursor: pointer;
-  z-index: 1;
-  width: 2px;
-  margin: 0 auto;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
-
-const VolumeLevelBar = styled.div`
-  position: absolute;
-  width: ${(props) => (props.vertical ? '100%' : '0px')};
-  height: ${(props) => (props.vertical ? '0' : '100%')};
-  left: 0;
-  top: ${(props) => (props.vertical ? 'initial' : '0px')};
-  bottom: ${(props) => (props.vertical ? '0px' : 'initial')};
-  background: ${(props) => colors.common.video[props.assetType].base};
-  &:after {
-    content: '';
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    background: ${(props) => colors.common.video[props.assetType].base};
-    border-radius: 100%;
-    right: -3px;
-    top: -4px;
-    box-shadow: 0 0 14px 1px ${(props) => colors.common.video[props.assetType].base};
-  }
-`;
-
-class VolumeBar extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      percentage: '0%'
-    };
-
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handlePercentageChange = this.handlePercentageChange.bind(this);
-    this.checkMuted = this.checkMuted.bind(this);
-    this.getPercent = this.getPercent.bind(this);
-    this.stepForward = this.stepForward.bind(this);
-    this.stepBack = this.stepBack.bind(this);
-    // this.handleFocus = this.handleFocus.bind(this);
-    // this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  componentDidMount() {}
-
-  getPercent() {
-    const { muted, volume } = this.props;
-    if (muted) {
-      return 0;
-    }
-    return volume;
-  }
-
-  checkMuted() {
-    const { actionClick, muted } = this.props;
-    if (muted) {
-      actionClick({
-        action: 'mute',
-        value: false
-      });
-    }
-  }
-
-  handleMouseMove(event) {
-    const { actionClick } = this.props;
-    this.checkMuted();
-    const distance = this.slider.calculateDistance(event);
-    actionClick({
-      action: 'volume',
-      value: distance
-    });
-  }
-
-  stepForward() {
-    const { volume } = this.props;
-    this.checkMuted();
-    actions.changeVolume(volume + 0.1);
-  }
-
-  stepBack() {
-    const { volume } = this.props;
-    this.checkMuted();
-    actions.changeVolume(volume - 0.1);
-  }
-
-  handlePercentageChange(percent) {
-    const { percentage } = this.state;
-    if (percent !== percentage) {
-      this.setState({
-        percentage: percent
-      });
-    }
-  }
-
-  handleClick(event) {
-    event.stopPropagation();
-  }
-
-  render() {
-    const { vertical, assetType, playerType, volume } = this.props;
-    const style = {};
-    if (vertical) {
-      style.height = this.getPercent() * 100;
-    } else {
-      style.width = this.getPercent() * 100;
-    }
-
-    const volumeData = (volume * 100).toFixed(2);
-    return (
-      <VolumeControlBar>
-        <Slider
-          ref={(c) => {
-            this.slider = c;
-          }}
-          label="volume level"
-          valuenow={volumeData}
-          valuetext={`${volumeData}%`}
-          onMouseMove={this.handleMouseMove}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-          onClick={this.handleClick}
-          sliderActive={this.handleFocus}
-          sliderInactive={this.handleBlur}
-          getPercent={this.getPercent}
-          onPercentageChange={this.handlePercentageChange}
-          stepForward={this.stepForward}
-          stepBack={this.stepBack}
-          {...this.props}>
-          <VolumeLevelBar style={style} assetType={assetType} playerType={playerType} vertical={vertical} />
-        </Slider>
-      </VolumeControlBar>
-    );
-  }
-}
-
-VolumeBar.propTypes = propTypes;
-VolumeBar.defaultProps = defaultProps;
-VolumeBar.displayName = 'VolumeBar';
-
-export default VolumeBar;

package/control/VolumeLevel.jsx

@@ -1,66 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import colors from '../../colors';
-
-const propTypes = {
-  playerType: PropTypes.oneOf([
-    'dubbing_review',
-    'clipping_default',
-    'default',
-    'tagging',
-    'qc',
-    'subtitle',
-    'snp_edit',
-    'archive',
-    'restore',
-    'clipping',
-    'storyboard',
-    'panel'
-  ]),
-  assetType: PropTypes.oneOf(['fc', 'rc']),
-  percentage: PropTypes.string,
-  vertical: PropTypes.bool
-};
-
-const defaultProps = {
-  percentage: '100%',
-  vertical: false
-};
-
-const VolumeLevelBar = styled.div`
-  position: absolute;
-  width: ${(props) => (props.vertical ? '100%' : '0px')};
-  height: ${(props) => (props.vertical ? '0' : '100%')};
-  left: 0;
-  top: ${(props) => (props.vertical ? 'initial' : '0px')};
-  bottom: ${(props) => (props.vertical ? '0px' : 'initial')};
-  background: ${(props) => colors.common.video[props.assetType].base};
-  &:after {
-    content: '';
-    width: 8px;
-    height: 8px;
-    position: absolute;
-    background: ${(props) => colors.common.video[props.assetType].base};
-    border-radius: 100%;
-    right: -3px;
-    top: -4px;
-    box-shadow: 0 0 14px 1px ${(props) => colors.common.video[props.assetType].base};
-  }
-`;
-
-function VolumeLevel({ percentage, vertical, assetType, playerType }) {
-  const style = {};
-  if (vertical) {
-    style.height = percentage;
-  } else {
-    style.width = percentage;
-  }
-
-  return <VolumeLevelBar style={style} assetType={assetType} playerType={playerType} vertical={vertical} />;
-}
-
-VolumeLevel.propTypes = propTypes;
-VolumeLevel.defaultProps = defaultProps;
-VolumeLevel.displayName = 'VolumeLevel';
-export default VolumeLevel;

package/control/VolumneMenuButton.jsx

@@ -1,111 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import { Button } from '@desynova-digital/components';
-import VolumeBar from './VolumeBar';
-
-const propTypes = {
-  player: PropTypes.instanceOf(Object),
-  actions: PropTypes.instanceOf(Object),
-  style: PropTypes.instanceOf(Object)
-};
-
-const defaultProps = {
-  player: {},
-  actions: {},
-  style: {}
-};
-
-const VolumeMenu = styled.div`
-  width: 20px;
-  position: relative;
-  .volume-control-bar {
-    width: 30px;
-    height: 0px;
-    position: absolute;
-    bottom: 20px;
-    overflow: hidden;
-    transition: all 0.5s ease-in-out;
-    z-index: 10;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0;
-  }
-  &:hover {
-    .volume-control-bar {
-      height: 120px;
-      overflow: visible;
-      padding: 15px;
-    }
-    svg path {
-      fill: #00cec6;
-    }
-  }
-`;
-
-const VolumeButton = styled(Button)`
-  background: transparent;
-  border: none;
-  margin: 0px;
-  &:hover,
-  &:focus {
-    background: transparent;
-  }
-`;
-
-class VolumeMenuButton extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  get volumeLevel() {
-    const { volume, muted } = this.props;
-    let level = 3;
-    if (volume === 0 || muted) {
-      level = 0;
-    } else if (volume < 0.33) {
-      level = 1;
-    } else if (volume < 0.67) {
-      level = 2;
-    }
-    return level;
-  }
-
-  handleClick() {
-    const { actionClick, muted } = this.props;
-    actionClick({
-      action: 'mute',
-      value: !muted
-    });
-  }
-
-  render() {
-    const { style } = this.props;
-    // const level = this.volumeLevel;
-    const vertical = true;
-    return (
-      <VolumeMenu style={style}>
-        <VolumeButton
-          display="rounded"
-          appearance="cta"
-          icon="volume"
-          iconWidth={18}
-          iconHeight={18}
-          width={20}
-          height={20}
-          onClick={this.handleClick}
-        />
-        <div className="volume-control-bar">
-          <VolumeBar onFocus={this.handleFocus} onBlur={this.handleBlur} vertical={vertical} {...this.props} />
-        </div>
-      </VolumeMenu>
-    );
-  }
-}
-
-VolumeMenuButton.propTypes = propTypes;
-VolumeMenuButton.defaultProps = defaultProps;
-VolumeMenuButton.displayName = 'VolumeMenuButton';
-export default VolumeMenuButton;