@desynova-digital/player 4.0.1 → 4.0.3

package/control/CurrentTimeDisplay.jsx

@@ -1,35 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-
-import { secondsToTime } from '../utils';
-
-const propTypes = {
-  player: PropTypes.instanceOf(Object),
-  initialTime: PropTypes.number,
-  frameRate: PropTypes.number
-};
-
-const defaultProps = {
-  player: {}
-};
-
-const VideoCurrentTime = styled.div`
-  font-family: SFUIText-Regular;
-  font-size: 12px;
-  letter-spacing: -0.6px;
-  color: #ffffff;
-  min-width: 65px;
-  text-align: left;
-`;
-
-const CurrentTimeDisplay = ({ currentTime, initialTime, frameRate }) => {
-  const formattedTime = secondsToTime(currentTime.seconds, frameRate, initialTime);
-  return <VideoCurrentTime>{formattedTime}</VideoCurrentTime>;
-};
-
-CurrentTimeDisplay.propTypes = propTypes;
-CurrentTimeDisplay.defaultProps = defaultProps;
-CurrentTimeDisplay.displayName = 'CurrentTimeDisplay';
-
-export default CurrentTimeDisplay;

package/control/DurationDisplay.jsx

@@ -1,48 +0,0 @@
-import { PropTypes } from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-
-import { secondsToTime } from '../utils';
-
-const propTypes = {
-  player: PropTypes.instanceOf(Object),
-  frameRate: PropTypes.number,
-  separator: PropTypes.string
-};
-
-const defaultProps = {
-  player: {}
-};
-
-const VideoTotalDuration = styled.div`
-  font-family: SFUIText-Regular;
-  font-size: 12px;
-  letter-spacing: -0.6px;
-  margin: 0 2px;
-  color: #888888;
-`;
-
-const TimeSeperator = styled.div`
-  color: #888888;
-  margin: 0 2px;
-  font-family: SFUIText-Regular;
-  font-size: 12px;
-  letter-spacing: -0.6px;
-`;
-
-function DurationDisplay({ duration, frameRate, separator }) {
-  const formattedTime = secondsToTime(duration.seconds, frameRate);
-  const separatorText = separator || '/';
-  return (
-    <>
-      <TimeSeperator dir="ltr">{separatorText}</TimeSeperator>
-      <VideoTotalDuration>{formattedTime}</VideoTotalDuration>
-    </>
-  );
-}
-
-DurationDisplay.propTypes = propTypes;
-DurationDisplay.defaultProps = defaultProps;
-DurationDisplay.displayName = 'DurationDisplay';
-
-export default DurationDisplay;

package/control/ForwardBackwardControl.js

@@ -1,76 +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 _components = require("@desynova-digital/components");
-var _templateObject,
-  _this = void 0;
-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 ForwardReplayButton = (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 propTypes = {
-  actions: _propTypes.PropTypes.instanceOf(Object),
-  seconds: _propTypes.PropTypes.number
-};
-var defaultProps = {
-  actions: {},
-  seconds: 0.04
-};
-var ForwardBackWardComponent = function ForwardBackWardComponent(_ref) {
-  var mode = _ref.mode,
-    seconds = _ref.seconds,
-    actionClick = _ref.actionClick;
-  var getIcon = function getIcon() {
-    var icon = '';
-    if (mode === 'forward') {
-      if (seconds === 10) {
-        icon = 'forward-10';
-      } else {
-        icon = 'triangle-double-right';
-      }
-    } else {
-      if (seconds === 10) {
-        icon = 'rewind-10';
-      } else {
-        icon = 'triangle-double-left';
-      }
-    }
-    return icon;
-  };
-  var handleClick = function handleClick() {
-    // Depends mode to implement different actions
-    if (mode === 'forward') {
-      actionClick({
-        action: 'add_seconds',
-        value: seconds
-      });
-    } else {
-      actionClick({
-        action: 'add_seconds',
-        value: -seconds
-      });
-    }
-  };
-  return /*#__PURE__*/_react["default"].createElement(ForwardReplayButton, {
-    display: "rounded",
-    appearance: "cta",
-    icon: getIcon(),
-    iconWidth: seconds === 10 ? 22 : 14,
-    iconHeight: seconds === 10 ? 22 : 14,
-    width: 20,
-    height: 20,
-    ref: function ref(c) {
-      _this.button = c;
-    },
-    onClick: handleClick
-  });
-};
-ForwardBackWardComponent.propTypes = propTypes;
-ForwardBackWardComponent.defaultProps = defaultProps;
-var _default = ForwardBackWardComponent;
-exports["default"] = _default;

package/control/ForwardBackwardControl.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import { PropTypes } from 'prop-types';
-import styled from 'styled-components';
-import { Button } from '@desynova-digital/components';
-
-const ForwardReplayButton = styled(Button)`
-  background: transparent;
-  border: none;
-  margin: 0 10px;
-  &:hover,
-  &:focus {
-    background: transparent;
-  }
-`;
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  seconds: PropTypes.number
-};
-
-const defaultProps = {
-  actions: {},
-  seconds: 0.04
-};
-
-const ForwardBackWardComponent = ({ mode, seconds, actionClick }) => {
-  const getIcon = () => {
-    let icon = '';
-    if (mode === 'forward') {
-      if (seconds === 10) {
-        icon = 'forward-10';
-      } else {
-        icon = 'triangle-double-right';
-      }
-    } else {
-      if (seconds === 10) {
-        icon = 'rewind-10';
-      } else {
-        icon = 'triangle-double-left';
-      }
-    }
-    return icon;
-  };
-
-  const handleClick = () => {
-    // Depends mode to implement different actions
-    if (mode === 'forward') {
-      actionClick({
-        action: 'add_seconds',
-        value: seconds
-      });
-    } else {
-      actionClick({
-        action: 'add_seconds',
-        value: -seconds
-      });
-    }
-  };
-
-  return (
-    <ForwardReplayButton
-      display="rounded"
-      appearance="cta"
-      icon={getIcon()}
-      iconWidth={seconds === 10 ? 22 : 14}
-      iconHeight={seconds === 10 ? 22 : 14}
-      width={20}
-      height={20}
-      ref={(c) => {
-        this.button = c;
-      }}
-      onClick={handleClick}
-    />
-  );
-};
-
-ForwardBackWardComponent.propTypes = propTypes;
-ForwardBackWardComponent.defaultProps = defaultProps;
-export default ForwardBackWardComponent;

package/control/FullscreenToggle.jsx

@@ -1,83 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-import styled from 'styled-components';
-import { Button } from '@desynova-digital/components';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object),
-  playerType: PropTypes.oneOf([
-    'dubbing_review',
-    'clipping_default',
-    'default',
-    'tagging',
-    'qc',
-    'subtitle',
-    'snp_edit',
-    'archive',
-    'restore',
-    'clipping',
-    'storyboard',
-    'panel'
-  ])
-};
-
-const defaultProps = {
-  actions: {},
-  player: {}
-};
-
-const FullscreenToggleButton = styled(Button)`
-  background: transparent;
-  border: none;
-  margin: 0 10px;
-  &:hover,
-  &:focus {
-    background: transparent;
-    svg path {
-      fill: #00cec6;
-    }
-  }
-`;
-
-export default class FullscreenToggle extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    const { actionClick } = this.props;
-    actionClick({
-      action: 'toggle_fullscreen'
-    });
-  }
-
-  render() {
-    const { playerType } = this.props;
-    return (
-      <React.Fragment>
-        {playerType !== 'panel' ? (
-          <FullscreenToggleButton
-            display="rounded"
-            appearance="cta"
-            icon="fullscreen"
-            ref={(c) => {
-              this.button = c;
-            }}
-            onClick={this.handleClick}
-            iconWidth={14}
-            iconHeight={14}
-            width={20}
-            height={20}
-          />
-        ) : null}
-      </React.Fragment>
-    );
-  }
-}
-
-FullscreenToggle.propTypes = propTypes;
-FullscreenToggle.defaultProps = defaultProps;
-FullscreenToggle.displayName = 'FullscreenToggle';

package/control/MarkInControl.jsx

@@ -1,109 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-import styled from 'styled-components';
-import { Button, Icon } from '@desynova-digital/components';
-
-const propTypes = {
-  actions: PropTypes.instanceOf(Object),
-  player: PropTypes.instanceOf(Object),
-  markers: PropTypes.instanceOf(Object),
-  leftMarker: PropTypes.number,
-  allowMarkerOverlap: PropTypes.bool
-};
-
-const defaultProps = {
-  actions: {},
-  player: {},
-  leftMarker: -1,
-  allowMarkerOverlap: false
-};
-
-const MarkInButton = styled(Button)`
-  background: transparent;
-  border: none;
-  margin: 0px 10px;
-  pointer-events: ${(props) => (props.leftMarker > -1 ? 'none' : 'all')};
-  ${Icon.Element} {
-    svg path {
-      fill: ${(props) => (props.leftMarker > -1 ? '#00cec6' : '#ffffff')};
-    }
-  }
-  &:hover {
-    background: transparent;
-    ${Icon.Element} {
-      svg path {
-        fill: #00cec6;
-      }
-    }
-  }
-  &:focus {
-    background: transparent;
-  }
-`;
-
-export default class MarkInControl extends Component {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  getStyle() {
-    const { currentTime, markers, leftMarker, allowMarkerOverlap } = this.props;
-    let style = {
-      pointerEvents: 'all',
-      opacity: 1
-    };
-    if (markers && markers.length && markers[0].values && markers[0].values.length && !allowMarkerOverlap) {
-      markers[0].values.filter((marker) => {
-        if (
-          (currentTime >= marker.start_time && currentTime <= marker.end_time) ||
-          (leftMarker > -1 && currentTime > marker.start_time && leftMarker < marker.start_time) ||
-          (leftMarker > -1 && currentTime < marker.start_time && leftMarker > marker.end_time)
-        ) {
-          style = {
-            pointerEvents: 'none',
-            opacity: 0.6
-          };
-        }
-      });
-    }
-
-    return style;
-  }
-
-  handleClick() {
-    const { markerType, onAddMarker, currentTime } = this.props;
-    // actions.handleMarkerPointChange('add', 'left', player.currentTime);
-    if (onAddMarker) {
-      let data = {
-        markerType: markerType !== 'update' ? 'add' : 'update',
-        markerPos: 'left',
-        currentTime: currentTime.seconds
-      };
-      onAddMarker(currentTime.seconds, -1, '', true, data);
-    }
-  }
-
-  render() {
-    const { leftMarker, markers } = this.props;
-    return (
-      <MarkInButton
-        leftMarker={leftMarker}
-        markers={markers}
-        display="rounded"
-        appearance="cta"
-        icon="in-marker"
-        iconWidth={10}
-        iconHeight={18}
-        width={10}
-        height={20}
-        onClick={this.handleClick}
-        style={this.getStyle()}
-      />
-    );
-  }
-}
-
-MarkInControl.propTypes = propTypes;
-MarkInControl.defaultProps = defaultProps;
-MarkInControl.displayName = 'MarkInControl';

package/control/MarkOutControl.jsx

@@ -1,131 +0,0 @@
-import React, { Component } from 'react';
-import styled from 'styled-components';
-import { PropTypes } from 'prop-types';
-import { Button, Icon } from '@desynova-digital/components';
-
-const propTypes = {
-  player: PropTypes.instanceOf(Object),
-  actions: PropTypes.instanceOf(Object),
-  markers: PropTypes.instanceOf(Object),
-  leftMarker: PropTypes.number,
-  rightMarker: PropTypes.number,
-  controlType: PropTypes.string,
-  onMarkerSelect: PropTypes.func,
-  allowMarkerOverlap: PropTypes.bool
-};
-
-const defaultProps = {
-  player: {},
-  actions: {},
-  leftMarker: -1,
-  rightMarker: -1,
-  allowMarkerOverlap: false
-};
-
-const MarkOutButton = styled(Button)`
-  background: transparent;
-  border: none;
-  margin: 0px 10px;
-  pointer-events: ${(props) =>
-    (props.leftMarker > -1 && props.currentTime < props.leftMarker) || props.leftMarker < 0 ? 'none' : 'all'};
-  ${Icon.Element} {
-    svg path {
-      fill: ${(props) =>
-        props.rightMarker > -1
-          ? '#00cec6'
-          : (props.leftMarker > -1 && props.currentTime < props.leftMarker) || props.leftMarker < 0
-          ? '#ffffff88'
-          : '#ffffff'};
-    }
-  }
-  &:hover {
-    background: transparent;
-    ${Icon.Element} {
-      svg path {
-        fill: #00cec6;
-      }
-    }
-  }
-  &:focus {
-    background: transparent;
-  }
-`;
-
-export default class MarkOutControl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  getStyle() {
-    const { currentTime, markers, leftMarker, allowMarkerOverlap } = this.props;
-    let style = {
-      pointerEvents: 'all',
-      opacity: 1
-    };
-    if (markers && markers.length && markers[0].values && markers[0].values.length && !allowMarkerOverlap) {
-      markers[0].values.filter((marker) => {
-        if (
-          (currentTime >= marker.start_time && currentTime <= marker.end_time) ||
-          (leftMarker > -1 && currentTime > marker.start_time && leftMarker < marker.start_time) ||
-          (leftMarker > -1 && currentTime < marker.start_time && leftMarker > marker.end_time)
-        ) {
-          style = {
-            pointerEvents: 'none',
-            opacity: 0.6
-          };
-        }
-      });
-    }
-
-    return style;
-  }
-
-  handleClick() {
-    const { leftMarker, onAddMarker, markerType, currentTime } = this.props;
-    if (leftMarker > -1 && currentTime.seconds > leftMarker) {
-      // actions.handleMarkerPointChange('add', 'right', player.currentTime);
-      //Commented for CN-632.
-      // if (controlType === 'default') {
-      //   onMarkerSelect(leftMarker, player.currentTime);
-      // }
-      // actions.handleMarkerPointChange('create');
-      let data = {
-        markerType: markerType !== 'update' ? 'add' : 'update',
-        markerPos: 'right',
-        currentTime: currentTime.seconds
-      };
-      onAddMarker(leftMarker, currentTime.seconds, 'update', false, data);
-      // onAddMarker(leftMarker, player.currentTime);
-    }
-  }
-
-  render() {
-    const {
-      rightMarker,
-      leftMarker,
-      player: { currentTime }
-    } = this.props;
-    return (
-      <MarkOutButton
-        rightMarker={rightMarker}
-        leftMarker={leftMarker}
-        currentTime={currentTime}
-        display="rounded"
-        appearance="cta"
-        icon="out-marker"
-        iconWidth={10}
-        iconHeight={18}
-        width={10}
-        height={20}
-        onClick={this.handleClick}
-        style={this.getStyle()}
-      />
-    );
-  }
-}
-
-MarkOutControl.propTypes = propTypes;
-MarkOutControl.defaultProps = defaultProps;
-MarkOutControl.displayName = 'MarkOutControl';

package/control/MarkerBar.jsx

@@ -1,107 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-import styled from 'styled-components';
-import { Icon } from '@desynova-digital/components';
-/*
- * import { colors } from '@desynova-digital/tokens';
- * import colors from '../colors';
- */
-
-const propTypes = {
-  player: PropTypes.instanceOf(Object),
-  controlType: PropTypes.string
-};
-
-const defaultProps = {
-  player: {}
-};
-
-const MarkerBlock = styled.div`
-  width: 100%;
-  height: 30px;
-  position: ${(props) => (props.controlType === 'advanced' && !props.isFullscreen ? 'relative' : 'absolute')};
-  bottom: ${(props) => (props.controlType === 'advanced' && !props.isFullscreen ? '0px' : '5px')};
-  .marker {
-    position: absolute;
-    width: 2px;
-    height: 20px;
-    p {
-      font-family: SFUIText-Medium;
-      font-size: 10px;
-      color: #ffffff;
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    ${Icon.Element} {
-      position: absolute;
-      display: block;
-      left: 50%;
-      top: 10px;
-      transform: translateX(-50%);
-    }
-  }
-`;
-
-export default class MarkerBar extends Component {
-  constructor(props) {
-    super(props);
-    this.getMarkerPosition = this.getMarkerPosition.bind(this);
-    this.getTimePos = this.getTimePos.bind(this);
-  }
-
-  getMarkerPosition(timePos) {
-    const {
-      duration: { seconds }
-    } = this.props;
-    const percent = timePos / seconds;
-    return percent >= 1 ? 1 : percent;
-  }
-
-  getTimePos(markerPos) {
-    const leftMarker = document.getElementsByClassName('marker-left')[0];
-    const rightMarker = document.getElementsByClassName('marker-right')[0];
-    if (leftMarker && rightMarker) {
-      const leftOffset = leftMarker.offsetLeft;
-      const rightOffset = rightMarker.offsetLeft;
-      const offsetDiff = rightOffset - leftOffset;
-      let position = '50%';
-      if (offsetDiff < 61) {
-        switch (markerPos) {
-          case 'left':
-            position = '-20px';
-            break;
-          case 'right':
-            position = '20px';
-            break;
-        }
-      }
-      return position;
-    }
-  }
-
-  render() {
-    const { isFullscreen, controlType, playerSelectedMarker } = this.props;
-    const leftMarkerPosition = `${(this.getMarkerPosition(playerSelectedMarker.leftMarker) * 100).toFixed(2)}%`;
-    const rightMarkerPosition = `${(this.getMarkerPosition(playerSelectedMarker.rightMarker) * 100).toFixed(2)}%`;
-
-    return (
-      <MarkerBlock controlType={controlType} isFullscreen={isFullscreen}>
-        {playerSelectedMarker.leftMarker > -1 ? (
-          <div className="marker marker-left" style={{ left: leftMarkerPosition }}>
-            <Icon name="marker" width={8} height={7} color="#00cec6" />
-          </div>
-        ) : null}
-        {playerSelectedMarker.rightMarker > -1 ? (
-          <div className="marker marker-right" style={{ left: rightMarkerPosition }}>
-            <Icon name="marker" width={8} height={7} color="#00cec6" />
-          </div>
-        ) : null}
-      </MarkerBlock>
-    );
-  }
-}
-
-MarkerBar.propTypes = propTypes;
-MarkerBar.defaultProps = defaultProps;
-MarkerBar.displayName = 'MarkerBar';