diff --git a/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js b/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js index d6637a2623..8628cfb3c0 100644 --- a/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js +++ b/packages/strapi-admin/admin/src/components/OnboardingVideo/index.js @@ -15,8 +15,8 @@ import '../../../../node_modules/video-react/dist/video-react.css'; import styles from './styles.scss'; class OnboardingVideo extends React.Component { - hiddenPlayer = React.createRef(); player = React.createRef(); + hiddenPlayer = React.createRef(); componentDidMount() { this.hiddenPlayer.current.subscribeToStateChange( @@ -27,26 +27,60 @@ class OnboardingVideo extends React.Component { handleChangeState = (state, prevState) => { const { duration } = state; const { id } = this.props; - + if (duration !== prevState.duration) { this.props.setVideoDuration(id, duration); } }; + handleChangeIsPlayingState = (state, prevState) => { + + const { isActive } = state; + const { id } = this.props; + // Manual play + if (isActive !== prevState.isActive && isActive) { + this.props.didPlayVideo(id, this.props.video.startTime); + } + }; + handleCurrentTimeChange = (curr) => { - this.props.getVideoCurrentTime(this.props.id, curr); + this.props.getVideoCurrentTime(this.props.id, curr, this.props.video.duration); } afterOpenModal = () => { + + this.player.current.subscribeToStateChange( + this.handleChangeIsPlayingState, + ); + this.player.current.play(); + + if (this.props.video.startTime === 0) { + const { player } = this.player.current.getState(); + player.isActive = true; + this.props.didPlayVideo(this.props.id, this.props.video.startTime); + } else { + this.player.current.pause(); + } }; onModalClose = () => { + const { player } = this.player.current.getState(); + const paused = player.paused; + + if (!paused) { + this.videoPause(); + } + }; + + videoPause = () => { + const { player } = this.player.current.getState(); const currTime = player.currentTime; this.handleCurrentTimeChange(currTime); + this.props.didStopVideo(this.props.id, currTime); }; render() { @@ -61,6 +95,7 @@ class OnboardingVideo extends React.Component { >
+
@@ -85,15 +120,20 @@ class OnboardingVideo extends React.Component {
- {!video.duration && ( + + {!this.props.video.duration && (
{}, getVideoCurrentTime: () => {}, + didStopVideo: () => {}, + didPlayVideo: () => {}, }; OnboardingVideo.propTypes = { @@ -121,6 +163,8 @@ OnboardingVideo.propTypes = { videos: PropTypes.object, setVideoDuration: PropTypes.func, getVideoCurrentTime: PropTypes.func, + didStopVideo: PropTypes.func, + didPlayVideo: PropTypes.func, }; export default OnboardingVideo; diff --git a/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss b/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss index de4583f82e..fbb43aba9c 100644 --- a/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss +++ b/packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss @@ -2,20 +2,7 @@ li.listItem { display: block; padding: 10px 15px; cursor: pointer; - &.finished { - .title { - color: #919bae; - } - .thumbWrapper { - .play { - background-color: #5a9e06; - &::before { - content: '\f00c'; - font-size: 11px; - } - } - } - } + &:hover { background-color: #f7f8f8; .title { @@ -34,9 +21,20 @@ li.listItem { border-radius: 2px; overflow: hidden; position: relative; + .overlay { + width: 100%; + height: 100%; + background-color: rgba(#0E7DE7, .8); + position: absolute; + top: 0; + left: 0; + z-index: 1; + } img { width: 100%; height: 100%; + position: relative; + z-index: 0; } .play { width: 20px; @@ -44,22 +42,47 @@ li.listItem { line-height: 20px; border-radius: 50%; background-color: #0e7de7; + border: 1px solid white; position: absolute; top: 50%; margin-top: -10px; left: 50%; margin-left: -10px; text-align: center; + z-index: 2; &::before { content: '\f04b'; font-family: 'FontAwesome'; font-size: 9px; color: white; display: inline-block; - vertical-align: middle; + vertical-align: top; + height: 100%; } } } + &.finished { + .title { + color: #919bae; + } + .thumbWrapper { + .overlay { + background-color: transparent; + } + img { + opacity: 0.6; + } + .play { + background-color: #5a9e06; + border-color: #5a9e06; + &::before { + content: '\f00c'; + font-size: 11px; + } + } + } + } + .txtWrapper { padding: 0 15px; p { @@ -73,9 +96,6 @@ li.listItem { } } } -.modal .modal-dialog { - background: red; -} .hiddenPlayerWrapper { display: none; @@ -97,4 +117,12 @@ li.listItem { margin-right: 0; } } -} \ No newline at end of file + .videoPlayer { + > button { + top: 50%; + margin-top: -0.75em; + left: 50%; + margin-left: -1.5em; + } + } +} diff --git a/packages/strapi-admin/admin/src/components/OnboardingVideos/index.js b/packages/strapi-admin/admin/src/components/OnboardingVideos/index.js deleted file mode 100644 index 59967e5e55..0000000000 --- a/packages/strapi-admin/admin/src/components/OnboardingVideos/index.js +++ /dev/null @@ -1,145 +0,0 @@ -/* - * - * 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 ( -
-
-
-

Get started video

-

25% completed

-
- -
- -
- -
- - - 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" - /> -
- ); - } -} - -OnboardingVideos.contextTypes = {}; - -OnboardingVideos.propTypes = {}; - -export default OnboardingVideos; diff --git a/packages/strapi-admin/admin/src/components/OnboardingVideos/styles.scss b/packages/strapi-admin/admin/src/components/OnboardingVideos/styles.scss deleted file mode 100644 index 069e7baaf5..0000000000 --- a/packages/strapi-admin/admin/src/components/OnboardingVideos/styles.scss +++ /dev/null @@ -1,152 +0,0 @@ -.videosWrapper { - position: fixed; - right: 15px; - bottom: 15px; - button, - button:focus, - a { - cursor: pointer; - outline: 0; - } - p { - margin-bottom: 0; - } - .videosHeader { - padding: 15px 15px 0 15px; - p { - font-family: Lato-Bold; - font-size: 11px; - text-transform: uppercase; - display: inline-block; - width: 50%; - vertical-align: top; - color: #5c5f66; - &:last-of-type { - text-align: right; - color: #5a9e06; - } - } - } - .videosContent { - background-color: white; - margin-bottom: 10px; - margin-right: 15px; - box-shadow: 0 2px 4px 0 #e3e9f3; - border-radius: 3px; - transition: all 0.3s linear; - &.shown { - visibility: visible; - opacity: 1; - } - &.hide { - opacity: 0; - visibility: hidden; - } - ul { - list-style: none; - padding: 10px 0; - li { - &.finished { - .title { - color: #919bae; - } - .thumbWrapper { - .play { - background-color: #5a9e06; - &::before { - content: '\f00c'; - font-size: 11px; - } - } - } - } - a { - display: block; - padding: 10px 15px; - &:hover { - background-color: #f7f8f8; - .title { - color: #0e7de7; - } - } - } - .txtWrapper, - .thumbWrapper { - display: inline-block; - vertical-align: middle; - } - .thumbWrapper { - width: 55px; - height: 38px; - background-color: #d8d8d8; - border-radius: 2px; - overflow: hidden; - position: relative; - img { - width: 100%; - height: 100%; - } - .play { - width: 20px; - height: 20px; - line-height: 20px; - border-radius: 50%; - background-color: #0e7de7; - position: absolute; - top: 50%; - margin-top: -10px; - left: 50%; - margin-left: -10px; - text-align: center; - &::before { - content: '\f04b'; - font-family: 'FontAwesome'; - font-size: 9px; - color: white; - display: inline-block; - vertical-align: middle; - } - } - } - .txtWrapper { - padding: 0 15px; - p { - font-size: 14px; - font-family: Lato-SemiBold; - } - .time { - font-size: 11px; - color: #919bae; - font-family: Lato-Bold; - } - } - } - } - } - .openBtn { - width: 38px; - height: 38px; - float: right; - button { - width: 100%; - height: 100%; - border-radius: 50%; - color: white; - background: #0e7de7; - -webkit-box-shadow: 0px 2px 4px 0px rgba(227, 233, 243, 1); - -moz-box-shadow: 0px 2px 4px 0px rgba(227, 233, 243, 1); - box-shadow: 0px 2px 4px 0px rgba(227, 233, 243, 1); - i:last-of-type { - display: none; - } - &.active { - i:first-of-type { - display: none; - } - i:last-of-type { - display: block; - } - } - } - } -} diff --git a/packages/strapi-admin/admin/src/containers/AdminPage/actions.js b/packages/strapi-admin/admin/src/containers/AdminPage/actions.js index 33cc36539b..5a6746276b 100644 --- a/packages/strapi-admin/admin/src/containers/AdminPage/actions.js +++ b/packages/strapi-admin/admin/src/containers/AdminPage/actions.js @@ -26,6 +26,6 @@ export function emitEvent(event, properties) { return { type: EMIT_EVENT, event, - properties, + properties }; } \ No newline at end of file diff --git a/packages/strapi-admin/admin/src/containers/AdminPage/index.js b/packages/strapi-admin/admin/src/containers/AdminPage/index.js index 0fe90cb91e..bfd5fa760c 100644 --- a/packages/strapi-admin/admin/src/containers/AdminPage/index.js +++ b/packages/strapi-admin/admin/src/containers/AdminPage/index.js @@ -284,7 +284,7 @@ export class AdminPage extends React.Component { isOpen={this.props.blockApp && this.props.showGlobalAppBlocker} {...this.props.overlayBlockerData} /> - + {this.shouldDisplayLogout() && }
); } diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/actions.js b/packages/strapi-admin/admin/src/containers/Onboarding/actions.js index 869700caff..643779f43d 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/actions.js +++ b/packages/strapi-admin/admin/src/containers/Onboarding/actions.js @@ -4,7 +4,7 @@ * */ -import { GET_VIDEOS, GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME } from './constants'; +import { GET_VIDEOS, GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME, SET_VIDEO_END, REMOVE_VIDEOS } from './constants'; export function getVideos() { return { @@ -41,3 +41,17 @@ export function updateVideoStartTime(index, startTime) { startTime: parseFloat(startTime, 10), }; } + +export function setVideoEnd(index, end) { + return { + type: SET_VIDEO_END, + index: parseInt(index, 10), + end, + }; +} + +export function removeVideos() { + return { + type: REMOVE_VIDEOS, + }; +} diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/constants.js b/packages/strapi-admin/admin/src/containers/Onboarding/constants.js index 7e3a0fe6c5..fdab1e69fb 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/constants.js +++ b/packages/strapi-admin/admin/src/containers/Onboarding/constants.js @@ -10,3 +10,5 @@ export const GET_VIDEOS_SUCCEEDED = export const ON_CLICK = 'StrapiAdmin/Onboarding/ON_CLICK'; export const SET_VIDEOS_DURATION = 'StrapiAdmin/Onboarding/SET_VIDEOS_DURATION'; export const UPDATE_VIDEO_START_TIME = 'StrapiAdmin/Onboarding/UPDATE_VIDEO_START_TIME'; + export const SET_VIDEO_END = 'StrapiAdmin/Onboarding/SET_VIDEO_END'; + export const REMOVE_VIDEOS = 'StrapiAdmin/Onboarding/REMOVE_VIDEOS'; diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/index.js b/packages/strapi-admin/admin/src/containers/Onboarding/index.js index 438edffcdb..4897455843 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/index.js +++ b/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, setVideoDuration, updateVideoStartTime } from './actions'; +import { getVideos, onClick, setVideoDuration, updateVideoStartTime, setVideoEnd, removeVideos } from './actions'; import injectSaga from 'utils/injectSaga'; import injectReducer from 'utils/injectReducer'; @@ -24,11 +24,16 @@ import styles from './styles.scss'; export class Onboarding extends React.Component { state = { showVideos: false }; - componentWillMount() { + componentDidMount() { this.setState({ showVideos: true }); this.props.getVideos(); } + componentWillUnmount() { + this.props.removeVideos(); + localStorage.removeItem('videos'); + } + toggleVideos = () => { // Display videos card this.setState(prevState => ({ showVideos: !prevState.showVideos })); @@ -39,14 +44,38 @@ export class Onboarding extends React.Component { this.context.emitEvent(eventName); }; - updateLocalStorage = (index, current) => { + setVideoEnd = () => { + this.setVideoEnd(); + } + + didPlayVideo = (index, currTime) => { + + const eventName = `didPlay${index}GetStartedVideo`; + this.context.emitEvent(eventName, {timestamp: currTime}); + } + + didStopVideo = (index, currTime) => { + + const eventName = `didStop${index}Video`; + this.context.emitEvent(eventName, {timestamp: currTime}); + } + + updateLocalStorage = (index, current, duration) => { // Update store this.props.updateVideoStartTime(index, current); // Update localStorage let videosTime = JSON.parse(localStorage.getItem('videos')); - videosTime.fill(0); - videosTime[index] = current; + videosTime[index].startTime = current; + + let percent = current * 100 / duration; + if (percent >= 80) { + if (videosTime[index].end === false) { + videosTime[index].end = true; + this.props.setVideoEnd(index, true); + } + } + localStorage.setItem('videos', JSON.stringify(videosTime)); }; @@ -77,6 +106,8 @@ export class Onboarding extends React.Component { onClick={onClick} setVideoDuration={setVideoDuration} getVideoCurrentTime={this.updateLocalStorage} + didPlayVideo={this.didPlayVideo} + didStopVideo={this.didStopVideo} /> ); })} @@ -108,7 +139,7 @@ Onboarding.propTypes = { const mapStateToProps = makeSelectOnboarding(); function mapDispatchToProps(dispatch) { - return bindActionCreators({ getVideos, onClick, setVideoDuration, updateVideoStartTime }, dispatch); + return bindActionCreators({ getVideos, onClick, setVideoDuration, updateVideoStartTime, setVideoEnd, removeVideos }, dispatch); } const withConnect = connect( diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/reducer.js b/packages/strapi-admin/admin/src/containers/Onboarding/reducer.js index 92b9509aab..8c8a235fb0 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/reducer.js +++ b/packages/strapi-admin/admin/src/containers/Onboarding/reducer.js @@ -5,7 +5,7 @@ */ import { fromJS } from 'immutable'; -import { GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME } from './constants'; +import { GET_VIDEOS_SUCCEEDED, ON_CLICK, SET_VIDEOS_DURATION, UPDATE_VIDEO_START_TIME, SET_VIDEO_END, REMOVE_VIDEOS } from './constants'; const initialState = fromJS({ videos: fromJS([]), @@ -39,6 +39,10 @@ function onboardingReducer(state = initialState, action) { return acc.updateIn([index, 'startTime'], () => 0); }, list); }); + case SET_VIDEO_END: + return state.updateIn(['videos', action.index, 'end'], () => action.end); + case REMOVE_VIDEOS: + return initialState; default: return state; } diff --git a/packages/strapi-admin/admin/src/containers/Onboarding/saga.js b/packages/strapi-admin/admin/src/containers/Onboarding/saga.js index e1eb49a052..9323addd24 100644 --- a/packages/strapi-admin/admin/src/containers/Onboarding/saga.js +++ b/packages/strapi-admin/admin/src/containers/Onboarding/saga.js @@ -17,8 +17,15 @@ function* getVideos() { { noAuth: true }, ); - let currTimes = Array.apply(null, Array(videos.length)).map(Number.prototype.valueOf,0); - + let currTimes = Array.apply(null, Array(videos.length)).map((e, i) => { + return { + startTime: 0, + end: false, + key: i, + id: videos[i].id, + } + }); + // Retrieve start time if enable in localStorage if (localStorage.getItem('videos')) { currTimes.splice(0, currTimes.length, ...JSON.parse(localStorage.getItem('videos'))); @@ -31,7 +38,8 @@ function* getVideos() { videos.map((video, index) => { video.isOpen = false; video.duration = null; - video.startTime = currTimes[index]; + video.startTime = currTimes[index].startTime; + video.end = currTimes[index].end; return video; }),