retrieve videos from API and update redux store and UI

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

@@ -10,25 +10,22 @@ import cn from 'classnames';
 
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { FormattedMessage } from 'react-intl';
-import PopUpVideo from 'components/PopUpVideo';
 import { Player } from 'video-react';
 import '../../../../node_modules/video-react/dist/video-react.css';
 
 import styles from './styles.scss';
-import auth from 'utils/auth';
 
-class OnboardingList extends React.Component {
+class OnboardingVideo extends React.Component {
+  hiddenPlayer = React.createRef();
   player = React.createRef();
 
   componentDidMount() {
-    //console.log(this.player.current);
-    this.player.current.subscribeToStateChange(
+    this.hiddenPlayer.current.subscribeToStateChange(
       this.handleChangeState.bind(this),
     );
   }
 
   handleChangeState = (state, prevState) => {
-    //console.log({ state, prevState });
 
     const { duration } = state;
     const { id } = this.props;
@@ -45,11 +42,18 @@ class OnboardingList extends React.Component {
     this.player.current.play();
   };
 
-  render() {
-    const content = this.props.video.isOpen ? 'yo' : 'ya';
-    const { video } = this.props;
+  /*onModalClose = () => {
+    console.log('CLOSE');
 
-    //getVideoDuration = e => {};
+    const { player } = this.player.current.getState();
+    const currTime = player.currentTime;
+
+    console.log(currTime);
+    
+  };*/
+
+  render() {
+    const { video } = this.props;
 
     return (
       <li
@@ -64,62 +68,61 @@ class OnboardingList extends React.Component {
         </div>
         <div className={styles.txtWrapper}>
           <p className={styles.title}>{video.title}</p>
-          <p className={styles.time}>{this.props.video.duration}</p>
+          <p className={styles.time}>{isNaN(video.duration) ? ' ' :  `${Math.floor(video.duration / 60)}:${Math.floor(video.duration)%60}`}</p>
         </div>
 
-        {/* <PopUpVideo video={video.video} /> */}
-
         <Modal
           isOpen={video.isOpen}
           toggle={this.props.onClick}
-          className={styles.modalPosition}
+          className={styles.videoModal}
           onOpened={this.afterOpenModal}
-          onClosed={this.afterOpenModal}
+          // onClosed={this.onModalClose}
         >
           <ModalHeader
             toggle={this.props.onClick}
-            className={styles.popUpWarningHeader}
+            className={styles.videoModalHeader}
           >
             <FormattedMessage id={video.title} />
           </ModalHeader>
           <ModalBody className={styles.modalBodyHelper}>
             <div>
-              {/* <Player
+              <Player
+                ref={this.player}
                 playsInline
                 poster="/assets/poster.png"
                 src={video.video}
-              /> */}
+                preload="auto"
+              />
             </div>
           </ModalBody>
         </Modal>
-
-        <div
-          className={cn(
-            styles.playerWrapper,
-            video.isOpen ? styles.visible : '',
-          )}
-        >
-          <Player
-            ref={this.player}
-            playsInline
-            poster="/assets/poster.png"
-            src={video.video}
-            preload="auto"
-            subscribeToStateChange={this.subscribeToStateChange}
-          />
-        </div>
+        {!video.duration ? (
+          <div className={cn(styles.hiddenPlayerWrapper)}>
+            <Player
+              ref={this.hiddenPlayer}
+              playsInline
+              poster="/assets/poster.png"
+              src={video.video}
+              preload="auto"
+              subscribeToStateChange={this.subscribeToStateChange}
+            />
+          </div>
+        ) : (
+          <div></div>
+        )}
       </li>
     );
   }
 }
 
-OnboardingList.defaultProps = {
+OnboardingVideo.defaultProps = {
   video: {},
   setVideoDuration: () => {},
 };
 
-OnboardingList.propTypes = {
+OnboardingVideo.propTypes = {
   videos: PropTypes.object,
+  setVideoDuration: PropTypes.func,
 };
 
-export default OnboardingList;
+export default OnboardingVideo;

packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss

@@ -73,21 +73,27 @@ li.listItem {
     }
   }
 }
-
-.playerWrapper {
+.modal .modal-dialog {
   background: red;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1051;
+}
+
+.hiddenPlayerWrapper {
   display: none;
-  max-width: 74.5rem;
-  margin: 16rem auto 3rem calc(50% - 24rem);
-  &.visible {
-    display: block;
+}
+
+.videoModal {
+  margin-right: auto !important;
+  margin-left: auto !important;
+  .videoModalHeader {
+    border-bottom: 0;
+    > h5 {
+      font-family: Lato;
+      font-weight: bold!important;
+      font-size: 1.8rem!important;
+    }
+    > button {
+      margin-top: 0;
+      margin-right: 0;
+    }
   }
 }

packages/strapi-admin/admin/src/containers/AdminPage/index.js

@@ -283,8 +283,7 @@ export class AdminPage extends React.Component {
           isOpen={this.props.blockApp && this.props.showGlobalAppBlocker}
           {...this.props.overlayBlockerData}
         />
-
-        <Onboarding />
+        <Onboarding/>
       </div>
     );
   }

packages/strapi-admin/admin/src/containers/Onboarding/actions.js

@@ -4,7 +4,7 @@
  *
  */
 
-import { GET_VIDEOS, GET_VIDEOS_SUCCEEDED, ON_CLICK } from './constants';
+import { GET_VIDEOS, GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION } from './constants';
 
 export function getVideos() {
   return {
@@ -18,9 +18,18 @@ export function getVideosSucceeded(videos) {
     videos,
   };
 }
+
 export function onClick(e) {
   return {
     type: ON_CLICK,
     index: parseInt(e.currentTarget.id, 10),
   };
 }
+
+export function setVideoDuration(id, duration) {
+  return {
+    type: SET_VIDEOS_DURATION,
+    index: parseInt(id, 10),
+    duration: parseFloat(duration, 10),
+  };
+}

packages/strapi-admin/admin/src/containers/Onboarding/constants.js

@@ -7,4 +7,5 @@
 export const GET_VIDEOS = 'StrapiAdmin/Onboarding/GET_VIDEOS';
 export const GET_VIDEOS_SUCCEEDED =
   'StrapiAdmin/Onboarding/GET_VIDEOS_SUCCEEDED';
-export const ON_CLICK = 'StrapiAdmin/Onboarding/ON_CLICK';
+  export const ON_CLICK = 'StrapiAdmin/Onboarding/ON_CLICK';
+  export const SET_VIDEOS_DURATION = 'StrapiAdmin/Onboarding/SET_VIDEOS_DURATION';

packages/strapi-admin/admin/src/containers/Onboarding/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
-import { getVideos, onClick } from './actions';
+import { getVideos, onClick, setVideoDuration } from './actions';
 
 import injectSaga from 'utils/injectSaga';
 import injectReducer from 'utils/injectReducer';
@@ -17,29 +17,21 @@ import makeSelectOnboarding from './selectors';
 import reducer from './reducer';
 import saga from './saga';
 
-import OnboardingVideo from 'components/OnboardingList';
+import OnboardingVideo from 'components/OnboardingVideo';
 
 import styles from './styles.scss';
-import auth from 'utils/auth';
 
 export class Onboarding extends React.Component {
-  state = { showVideos: false };
+  state = { showVideos: false, videosTime: [] };
 
   componentWillMount() {
     this.setState({ showVideos: true });
-    this.props.getVideos();
 
-    localStorage.setItem('videos', JSON.stringify(['video0', 'video1']));
-    console.log(localStorage.getItem('videos'));
-
-    if (auth.get('videos')) {
-      console.log('localStorageExist');
-      console.log(auth.get('videos'));
-    } else {
-      console.log('localStorageNoooo');
-      auth.set('videos', JSON.stringify(['video0', 'video1']), true);
-      //localStorage.setItem('videos', stringify(['video0', 'video1']));
+    if (!localStorage.getItem('videos')) {
+      localStorage.setItem('videos', JSON.stringify([0,0,0,0]));
     }
+
+    this.props.getVideos();
   }
 
   toggleVideos = e => {
@@ -48,7 +40,7 @@ export class Onboarding extends React.Component {
 
   // eslint-disable-line react/prefer-stateless-function
   render() {
-    const { videos, onClick } = this.props;
+    const { videos, onClick, setVideoDuration } = this.props;
     return (
       <div className={styles.videosWrapper}>
         <div
@@ -70,6 +62,7 @@ export class Onboarding extends React.Component {
                   id={i}
                   video={video}
                   onClick={onClick}
+                  setVideoDuration={setVideoDuration}
                 />
               );
             })}
@@ -98,7 +91,7 @@ Onboarding.propTypes = {
 const mapStateToProps = makeSelectOnboarding();
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({ getVideos, onClick }, dispatch);
+  return bindActionCreators({ getVideos, onClick, setVideoDuration }, dispatch);
 }
 
 const withConnect = connect(

packages/strapi-admin/admin/src/containers/Onboarding/reducer.js

@@ -5,7 +5,7 @@
  */
 
 import { fromJS } from 'immutable';
-import { GET_VIDEOS_SUCCEEDED, ON_CLICK } from './constants';
+import { GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION } from './constants';
 
 const initialState = fromJS({
   videos: fromJS([]),
@@ -25,6 +25,8 @@ function onboardingReducer(state = initialState, action) {
           return acc.updateIn([index, 'isOpen'], () => false);
         }, list);
       });
+    case SET_VIDEOS_DURATION:
+      return state.updateIn(['videos', action.index, 'duration'], () => action.duration);
     default:
       return state;
   }

packages/strapi-admin/admin/src/containers/Onboarding/saga.js

@@ -15,9 +15,14 @@ function* getVideos() {
 
     yield put(
       getVideosSucceeded(
-        videos.map(video => {
+        videos.map((video, index) => {
+
           video.isOpen = false;
+          /*if (index === 0) {
+            video.isOpen = true;
+          }*/
           video.duration = null;
+          video.startTime = localStorage.getItem("videos");
 
           return video;
         }),

packages/strapi-helper-plugin/lib/src/utils/auth.js

@@ -58,15 +58,11 @@ const auth = {
   },
 
   set(value, key, isLocalStorage) {
-    console.log(value);
-    console.log(key);
-    console.log(isLocalStorage);
     if (isEmpty(value)) {
       return null;
     }
 
     if (isLocalStorage && localStorage) {
-      console.log('Hey');
       return localStorage.setItem(key, stringify(value));
     }