@desynova-digital/player 3.9.6 → 4.0.0

package/header/Header.jsx

@@ -0,0 +1,479 @@
+import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { Button, Icon } from '@desynova-digital/components';
+import colors from '../utils/colors';
+
+const PlayerHeaderBlock = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  background: #000;
+  transition: all 250ms ease-in-out;
+  height: ${(props) => ((props.player === 'panel' && props.active) || props.player !== 'panel' ? '60px' : '0px')};
+  width: 100%;
+  z-index: 1;
+  position: ${(props) => (props.player === 'panel' ? 'absolute' : 'relative')};
+  top: ${(props) => (props.player === 'panel' ? '0px' : 'initial')};
+  overflow: ${(props) =>
+    (props.player === 'panel' && props.active) || props.player !== 'panel' ? 'visible' : 'hidden'};
+`;
+
+const VideoTitle = styled.button`
+  font-family: SFUIText-Regular;
+  text-align: left;
+  padding: 0;
+  font-size: 13px;
+  color: #ffffff;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: ${({ isShowPageAvailable }) => (isShowPageAvailable ? 'pointer' : 'default')};
+`;
+
+const PlayerDetails = styled.div`
+  margin-left: 20px;
+  text-align: left;
+  .video-bottom-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    margin-top: 8px;
+    .video-sub-title {
+      color: #afb2ba;
+      font-size: 10px;
+      font-family: SFUIText-Medium;
+      margin-right: 5px;
+    }
+    .version-category {
+      font-size: 10px;
+      letter-spacing: 0.4px;
+      color: #fff;
+      font-family: SFUIText-Regular;
+      text-transform: uppercase;
+    }
+    .versions-dropdown-block {
+      position: relative;
+      &:hover {
+        .active-version {
+          cursor: pointer;
+          border-color: #00cec6 !important;
+        }
+        .versions-dropdown-container {
+          visibility: visible;
+          opacity: 1;
+        }
+      }
+      .active-version {
+        transition: all 350ms ease-in-out;
+        border: 1px solid #fff;
+        border-radius: 10px;
+        margin-left: 5px;
+        padding: 3px 10px;
+        color: #fff;
+        font-size: 10px;
+        font-family: SFUIText-Regular;
+        font-weight: bold;
+        pointer-events: none;
+      }
+      .versions-dropdown-container {
+        padding-top: 15px;
+        position: absolute;
+        top: 13px;
+        left: 50%;
+        transform: translateX(-50%);
+        visibility: hidden;
+        opacity: 0;
+        transition: all 450ms ease-in-out;
+        &:after {
+          content: '';
+          border-bottom: 6px solid #00cec6;
+          border-right: 6px solid transparent;
+          border-left: 6px solid transparent;
+          position: absolute;
+          top: 9px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+        .versions-container {
+          overflow-y: auto;
+          overflow-x: hidden;
+          max-height: 204px;
+          box-shadow: 0px 12px 24px rgb(0 0 0 / 20%);
+          min-width: 250px;
+          background: #fff;
+          border-radius: 10px;
+          .ingest-versions-container {
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+            padding: 10px 15px;
+            .ingest-version-block {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              .upload-type {
+                width: 6px;
+                height: 6px;
+                border-radius: 100%;
+                overflow: hidden;
+                left: 5px;
+                position: absolute;
+              }
+              .ingest-version-name {
+                color: #182738;
+                font-size: 11px;
+                font-family: SFUIText-Regular;
+                font-weight: bold;
+                margin-right: 10px;
+              }
+              .video-versions-container {
+                display: inline-flex;
+                align-items: center;
+                .more-dropdown-icon {
+                  padding-top: 8px;
+                  cursor: pointer;
+                }
+                path {
+                  fill: #182738;
+                }
+              }
+            }
+          }
+          &::-webkit-scrollbar {
+            width: 5px;
+            background-color: #6d6a6a;
+          }
+        }
+      }
+    }
+    .video-time-block {
+      margin-left: 5px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .tv-time,
+      .ott-time {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 10px;
+        p {
+          margin-left: 5px;
+          color: rgb(175, 178, 186);
+          font-family: 'SFUIText-Regular';
+          font-size: 10px;
+          align-self: self-end;
+        }
+      }
+    }
+  }
+`;
+
+const VersionBlock = styled.div`
+  font-family: SFUIText-Regular;
+  font-weight: bold;
+  font-size: 10px;
+  line-height: 1.2;
+  border-radius: 100%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: ${(props) => (props.upload_type === 'fc' ? 'rgba(0, 206, 198, 0.1)' : 'rgba(255, 99, 39, 0.1)')};
+  color: ${(props) => (props.upload_type === 'fc' ? '#00CEC6' : '#FF6327')};
+  &.active {
+    background: ${(props) => (props.upload_type === 'fc' ? '#00cec6' : '#FF6327')};
+    color: #ffffff;
+    pointer-events: none;
+  }
+  margin-right: 10px;
+`;
+
+const PlayerType = styled.div`
+  margin-left: auto;
+  margin-right: 15px;
+  display: flex;
+  ${Button.Element} {
+    padding: 7px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border: none;
+  }
+`;
+
+const QCReportButton = styled(Button)`
+  pointer-events: all !important;
+  margin-right: 10px;
+`;
+
+const BackButton = styled(Button)`
+  background: ${(props) => colors.common.video[props.assetType].base};
+  border: none;
+  margin: 10px;
+  margin-right: 0;
+  width: 40px;
+  height: 40px;
+  &:hover,
+  &:focus {
+    background: ${(props) => colors.common.video[props.assetType].base};
+  }
+  ${Icon.Element} {
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    position: absolute;
+  }
+`;
+
+export default class Header extends Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      versionIndex: -1,
+      updatedVersionsList: []
+    };
+    // this.handleClick = this.handleClick.bind(this);
+  }
+
+  //   handleClick() {
+  //     const { onPlayerClose, onPlayerChange, controlType } = this.props;
+  //     if (controlType !== 'default') {
+  //       onPlayerChange();
+  //     } else {
+  //       if (onPlayerClose) {
+  //         onPlayerClose();
+  //       }
+  //     }
+  //   }
+
+  openQCReport() {
+    const { onReportClick, actions } = this.props;
+    if (onReportClick) {
+      actions.pause();
+      onReportClick();
+    }
+  }
+
+  /**
+   * saves the index of version that is expanded.
+   * @param   {Number} index index of the versionList
+   */
+  saveIndexOfVersion(index) {
+    const { versionIndex } = this.state;
+    const currentIndex = versionIndex === index ? -1 : index;
+    this.setState({
+      versionIndex: currentIndex
+    });
+  }
+
+  /**
+   * returns the object with active version at the first element in object
+   * @param   {Object} version object containing complete version list.
+   * @param   {Object} activeVersion object containing currently active version.
+   */
+  updateVersion(version, activeVersion) {
+    let updatedVersionsList = JSON.parse(JSON.stringify(version));
+    updatedVersionsList.map((ele, index) => {
+      ele.versions.map((versionsList, innerIndex) => {
+        if (versionsList.ingest_db_id === activeVersion.ingest_db_id) {
+          let tempData = updatedVersionsList[index]['versions'][innerIndex];
+          updatedVersionsList[index]['versions'].splice(innerIndex, 1);
+          updatedVersionsList[index]['versions'].unshift(tempData);
+        }
+      });
+    });
+    this.setState({
+      updatedVersionsList: updatedVersionsList
+    });
+  }
+
+  componentDidMount() {
+    const { versions, activeVersion } = this.props;
+    if (versions && versions.length) {
+      this.updateVersion(versions, activeVersion);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { versions, activeVersion } = this.props;
+    if (activeVersion.ingest_db_id !== prevProps.activeVersion.ingest_db_id || !prevState.updatedVersionsList.length) {
+      if (versions && versions.length) {
+        this.updateVersion(versions, activeVersion);
+      }
+    }
+  }
+
+  render() {
+    const {
+      videoDetails,
+      versionClick,
+      activeVersion,
+      onTitleClick,
+      isFullscreen,
+      playerType,
+      qcReportAvailable,
+      openSharePopup,
+      isShareAvailable,
+      onBackPressed
+    } = this.props;
+    const { versionIndex, updatedVersionsList } = this.state;
+
+    return (
+      <PlayerHeaderBlock className="player-header-block" player={playerType}>
+        {!isFullscreen && !false && (
+          <BackButton
+            display="rounded"
+            appearance="cta"
+            icon="arrow-left"
+            width={50}
+            height={50}
+            iconWidth={16}
+            iconHeight={16}
+            tabIndex="0"
+            onClick={onBackPressed}
+            {...this.props}
+          />
+        )}
+        <PlayerDetails>
+          <VideoTitle type="button" isShowPageAvailable={!false} onClick={() => !false && onTitleClick()}>
+            {videoDetails.title}
+          </VideoTitle>
+
+          {activeVersion && (
+            <div className="video-bottom-container">
+              <p className="video-sub-title">{videoDetails.subTitle}</p>
+              <p className="version-category">{activeVersion.category}</p>
+              <div className="versions-dropdown-block">
+                <p className="active-version">{`${activeVersion.version_name} ${activeVersion.version}`}</p>
+                {updatedVersionsList && updatedVersionsList.length > 0 && playerType === 'default' && (
+                  <div className="versions-dropdown-container">
+                    <div className="versions-container">
+                      {updatedVersionsList.map((version, index) => {
+                        return (
+                          <div
+                            className="ingest-versions-container"
+                            key={version.version_name_short + version.upload_type}>
+                            <div className="ingest-version-block">
+                              <p className="ingest-version-name">{version.version_name_short}</p>
+                              <div className="video-versions-container">
+                                <VersionBlock
+                                  role="presentation"
+                                  upload_type={version.upload_type}
+                                  className={
+                                    version.versions[0].ingest_db_id === activeVersion.ingest_db_id && 'active'
+                                  }
+                                  key={version.versions[0].ingest_db_id}
+                                  onClick={() => versionClick(version.versions[0].ingest_db_id)}>
+                                  {version.versions[0].version_name}
+                                </VersionBlock>
+                                {version.versions.length > 1 && (
+                                  <span className="more-dropdown-icon" onClick={() => this.saveIndexOfVersion(index)}>
+                                    {versionIndex === index ? (
+                                      <Icon name="dropdown_less_icon" width="14" height="14" />
+                                    ) : (
+                                      <Icon name="dropdown_more_icon" width="14" height="14" />
+                                    )}
+                                  </span>
+                                )}
+                              </div>
+                            </div>
+                            <div className="ingest-version-block">
+                              <div className="video-versions-container">
+                                {versionIndex === index &&
+                                  version.versions.slice(1).map((video_version, idx) => {
+                                    return (
+                                      <VersionBlock
+                                        role="presentation"
+                                        key={video_version.ingest_db_id}
+                                        upload_type={version.upload_type}
+                                        className={
+                                          video_version.ingest_db_id === activeVersion.ingest_db_id && 'active'
+                                        }
+                                        onClick={() => versionClick(video_version.ingest_db_id)}>
+                                        {video_version.version_name}
+                                      </VersionBlock>
+                                    );
+                                  })}
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="video-time-block">
+                {videoDetails.txDate ? (
+                  <div className="tv-time">
+                    <p>{videoDetails.txDate}</p>
+                  </div>
+                ) : null}
+                {videoDetails.tvTime ? (
+                  <div className="tv-time">
+                    <Icon name="tv" width={14} height={12} color="#afb2ba" />
+                    <p>{videoDetails.tvTime}</p>
+                  </div>
+                ) : null}
+                {videoDetails.ottTime ? (
+                  <div className="ott-time">
+                    <Icon name="tablet" width={16} height={12} color="#afb2ba" />
+                    <p>{videoDetails.ottTime}</p>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          )}
+        </PlayerDetails>
+
+        <PlayerType>
+          {!isFullscreen && !false && isShareAvailable && playerType === 'default' && (
+            <Button
+              display="rounded"
+              appearance="cta"
+              icon="share"
+              width={25}
+              height={25}
+              iconWidth={12}
+              iconHeight={12}
+              tabIndex="0"
+              {...this.props}
+              onClick={openSharePopup}
+            />
+          )}
+          {!isFullscreen && !false && (playerType === 'default' || playerType === 'qc') && qcReportAvailable && (
+            <QCReportButton
+              display="rounded"
+              appearance="cta"
+              icon="qc_report"
+              width={25}
+              height={25}
+              iconWidth={12}
+              iconHeight={12}
+              tabIndex="0"
+              onClick={() => this.openQCReport()}
+              {...this.props}
+            />
+          )}
+          {playerType !== 'default' && playerType !== 'clipping_default' ? (
+            <Button
+              display="rounded"
+              appearance="cta"
+              icon={playerType === 'dubbing_review' ? 'access_dubbing_studio' : playerType}
+              width={25}
+              height={25}
+              iconWidth={12}
+              iconHeight={12}
+              tabIndex="0"
+              style={{
+                pointerEvents: 'none'
+              }}
+              {...this.props}
+            />
+          ) : null}
+        </PlayerType>
+      </PlayerHeaderBlock>
+    );
+  }
+}

package/index.js

@@ -1,155 +1,13 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.operationReducer = exports.playerReducer = exports.videoActions = exports.playerActions = exports.SettingsMenuButton = exports.ZoomMenuButton = exports.VolumeMenuButton = exports.TimeDivider = exports.DurationDisplay = exports.CurrentTimeDisplay = exports.MouseTimeDisplay = exports.LoadProgressBar = exports.PlayProgressBar = exports.Slider = exports.SeekBar = exports.ProgressControl = exports.FullscreenToggle = exports.ReplayControl = exports.ForwardControl = exports.PlayToggle = exports.ControlBar = exports.Shortcut = exports.PosterImage = exports.PointersBar = exports.TagsBar = exports.MarkerBar = exports.BigPlayButton = exports.ImageViewer = exports.Video = exports.Player = undefined;
-
-var _Player = require('./components/Player');
-
-var _Player2 = _interopRequireDefault(_Player);
-
-var _Video = require('./components/Video');
-
-var _Video2 = _interopRequireDefault(_Video);
-
-var _ImageViewer = require('./components/ImageViewer');
-
-var _ImageViewer2 = _interopRequireDefault(_ImageViewer);
-
-var _BigPlayButton = require('./components/BigPlayButton');
-
-var _BigPlayButton2 = _interopRequireDefault(_BigPlayButton);
-
-var _MarkerBar = require('./components/MarkerBar');
-
-var _MarkerBar2 = _interopRequireDefault(_MarkerBar);
-
-var _TagsBar = require('./components/TagsBar');
-
-var _TagsBar2 = _interopRequireDefault(_TagsBar);
-
-var _PointersBar = require('./components/PointersBar');
-
-var _PointersBar2 = _interopRequireDefault(_PointersBar);
-
-var _PosterImage = require('./components/PosterImage');
-
-var _PosterImage2 = _interopRequireDefault(_PosterImage);
-
-var _Slider = require('./components/Slider');
-
-var _Slider2 = _interopRequireDefault(_Slider);
-
-var _Shortcut = require('./components/Shortcut');
-
-var _Shortcut2 = _interopRequireDefault(_Shortcut);
-
-var _ControlBar = require('./components/control-bar/ControlBar');
-
-var _ControlBar2 = _interopRequireDefault(_ControlBar);
-
-var _PlayToggle = require('./components/control-bar/PlayToggle');
-
-var _PlayToggle2 = _interopRequireDefault(_PlayToggle);
-
-var _ForwardControl = require('./components/control-bar/ForwardControl');
-
-var _ForwardControl2 = _interopRequireDefault(_ForwardControl);
-
-var _ReplayControl = require('./components/control-bar/ReplayControl');
-
-var _ReplayControl2 = _interopRequireDefault(_ReplayControl);
-
-var _FullscreenToggle = require('./components/control-bar/FullscreenToggle');
-
-var _FullscreenToggle2 = _interopRequireDefault(_FullscreenToggle);
-
-var _ProgressControl = require('./components/progress-bar/ProgressControl');
-
-var _ProgressControl2 = _interopRequireDefault(_ProgressControl);
-
-var _SeekBar = require('./components/progress-bar/SeekBar');
-
-var _SeekBar2 = _interopRequireDefault(_SeekBar);
-
-var _PlayProgressBar = require('./components/progress-bar/PlayProgressBar');
-
-var _PlayProgressBar2 = _interopRequireDefault(_PlayProgressBar);
-
-var _LoadProgressBar = require('./components/progress-bar/LoadProgressBar');
-
-var _LoadProgressBar2 = _interopRequireDefault(_LoadProgressBar);
-
-var _MouseTimeDisplay = require('./components/progress-bar/MouseTimeDisplay');
-
-var _MouseTimeDisplay2 = _interopRequireDefault(_MouseTimeDisplay);
-
-var _SettingsMenuButton = require('./components/control-bar/SettingsMenuButton');
-
-var _SettingsMenuButton2 = _interopRequireDefault(_SettingsMenuButton);
-
-var _VolumeMenuButton = require('./components/control-bar/VolumeMenuButton');
-
-var _VolumeMenuButton2 = _interopRequireDefault(_VolumeMenuButton);
-
-var _ZoomMenuButton = require('./components/control-bar/ZoomMenuButton');
-
-var _ZoomMenuButton2 = _interopRequireDefault(_ZoomMenuButton);
-
-var _CurrentTimeDisplay = require('./components/time-controls/CurrentTimeDisplay');
-
-var _CurrentTimeDisplay2 = _interopRequireDefault(_CurrentTimeDisplay);
-
-var _DurationDisplay = require('./components/time-controls/DurationDisplay');
-
-var _DurationDisplay2 = _interopRequireDefault(_DurationDisplay);
-
-var _TimeDivider = require('./components/time-controls/TimeDivider');
-
-var _TimeDivider2 = _interopRequireDefault(_TimeDivider);
-
-var _player = require('./actions/player');
-
-var playerActions = _interopRequireWildcard(_player);
-
-var _video = require('./actions/video');
-
-var videoActions = _interopRequireWildcard(_video);
-
-var _reducers = require('./reducers');
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.Player = _Player2.default;
-exports.Video = _Video2.default;
-exports.ImageViewer = _ImageViewer2.default;
-exports.BigPlayButton = _BigPlayButton2.default;
-exports.MarkerBar = _MarkerBar2.default;
-exports.TagsBar = _TagsBar2.default;
-exports.PointersBar = _PointersBar2.default;
-exports.PosterImage = _PosterImage2.default;
-exports.Shortcut = _Shortcut2.default;
-exports.ControlBar = _ControlBar2.default;
-exports.PlayToggle = _PlayToggle2.default;
-exports.ForwardControl = _ForwardControl2.default;
-exports.ReplayControl = _ReplayControl2.default;
-exports.FullscreenToggle = _FullscreenToggle2.default;
-exports.ProgressControl = _ProgressControl2.default;
-exports.SeekBar = _SeekBar2.default;
-exports.Slider = _Slider2.default;
-exports.PlayProgressBar = _PlayProgressBar2.default;
-exports.LoadProgressBar = _LoadProgressBar2.default;
-exports.MouseTimeDisplay = _MouseTimeDisplay2.default;
-exports.CurrentTimeDisplay = _CurrentTimeDisplay2.default;
-exports.DurationDisplay = _DurationDisplay2.default;
-exports.TimeDivider = _TimeDivider2.default;
-exports.VolumeMenuButton = _VolumeMenuButton2.default;
-exports.ZoomMenuButton = _ZoomMenuButton2.default;
-exports.SettingsMenuButton = _SettingsMenuButton2.default;
-exports.playerActions = playerActions;
-exports.videoActions = videoActions;
-exports.playerReducer = _reducers.playerReducer;
-exports.operationReducer = _reducers.operationReducer;
+Object.defineProperty(exports, "Player", {
+  enumerable: true,
+  get: function get() {
+    return _Player["default"];
+  }
+});
+var _Player = _interopRequireDefault(require("./Player"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }