@desynova-digital/player 4.0.0 → 4.0.2

package/header/Header.jsx

@@ -1,479 +0,0 @@
-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>
-    );
-  }
-}