strapi/packages/strapi-admin/admin/src/components/OnboardingVideos/index.js

/*
 *
 * Row
 *
 */

import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import PopUpVideo from 'components/PopUpVideo';

import styles from './styles.scss';
const videos = [
  {
    title: 'Create your first content-type',
    id: 0,
    url:
      'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4',
    thumb:
      'https://www.santevet.com/upload/admin/images/article/Chat%202/chaton_seul/santevet_chats_en_location.jpg',
    time: '1:32min',
    end: true,
  },
  {
    title: 'Fill your content with data',
    id: 1,
    url:
      'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-eek.mp4',
    thumb:
      'data:image/jpeg;base64,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
    time: '1:32min',
    end: false,
  },
  {
    title: 'Manage the API access',
    id: 2,
    url:
      'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-slow.mp4',
    thumb:
      'https://www.santevet.com/upload/admin/images/article/Chat%202/chaton_seul/santevet_chats_en_location.jpg',
    time: '1:32min',
    end: false,
  },
  {
    title: 'Fetch data through the API',
    id: 3,
    url:
      'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4',
    thumb:
      'https://www.santevet.com/upload/admin/images/article/Chat%202/chaton_seul/santevet_chats_en_location.jpg',
    time: '1:15min',
    end: false,
  },
];

class OnboardingVideos extends React.Component {
  state = { showVideos: false, showModal: false, video: '' };

  // componentWillReceiveProps(nextProps) {
  //   //if (nextProps.pluginActionSucceeded !== this.props.pluginActionSucceeded) {
  //   this.setState({ showModal: false });
  //   //}
  // }
  componentDidMount() {
    this.setState({ showVideos: true });
  }
  toggleVideos = e => {
    this.setState({ showVideos: !this.state.showVideos });
  };

  displayModal = e => {
    e.preventDefault();
    let video = videos[e.currentTarget.parentNode.key];
    console.log(e.currentTarget.parentNode);
    console.log(video);
    this.setState({ showModal: !this.state.showModal });
  };

  render() {
    return (
      <div className={styles.videosWrapper}>
        <div
          className={cn(
            styles.videosContent,
            this.state.showVideos ? styles.shown : styles.hide,
          )}
        >
          <div className={styles.videosHeader}>
            <p>Get started video</p>
            <p>25% completed</p>
          </div>
          <ul>
            {videos.map(video => {
              return (
                <li
                  key={video.id}
                  id={'nonProps.index.isOpen'}
                  className={video.end ? styles.finished : ''}
                >
                  <a onClick={this.displayModal}>
                    <div className={styles.thumbWrapper}>
                      <img src={video.thumb} />
                      <div className={styles.play} />
                    </div>
                    <div className={styles.txtWrapper}>
                      <p className={styles.title}>{video.title}</p>
                      <p className={styles.time}>{video.time}</p>
                    </div>
                  </a>
                </li>
              );
            })}
          </ul>
        </div>

        <div className={styles.openBtn}>
          <button
            onClick={this.toggleVideos}
            className={this.state.showVideos ? styles.active : ''}
          >
            <i className="fa fa-question" />
            <i className="fa fa-times" />
            <span />
          </button>
        </div>

        <PopUpVideo
          isOpen={this.state.showModal}
          toggleModal={() =>
            this.setState({ showModal: !this.state.showModal })
          }
          popUpWarningType="danger"
          onConfirm={this.props.onDeleteConfirm}
          src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"
        />
      </div>
    );
  }
}

OnboardingVideos.contextTypes = {};

OnboardingVideos.propTypes = {};

export default OnboardingVideos;