mirror of
https://github.com/strapi/strapi.git
synced 2025-11-02 02:44:55 +00:00
Algo fixes on prod mode
This commit is contained in:
parent
8c66abdd41
commit
03de112d09
@ -15,7 +15,6 @@ import '../../../../node_modules/video-react/dist/video-react.css';
|
||||
import styles from './styles.scss';
|
||||
|
||||
class OnboardingVideo extends React.Component {
|
||||
|
||||
componentDidMount() {
|
||||
this.hiddenPlayer.current.subscribeToStateChange(
|
||||
this.handleChangeState,
|
||||
@ -23,6 +22,7 @@ class OnboardingVideo extends React.Component {
|
||||
}
|
||||
|
||||
hiddenPlayer = React.createRef();
|
||||
|
||||
player = React.createRef();
|
||||
|
||||
handleChangeState = (state, prevState) => {
|
||||
@ -49,7 +49,6 @@ class OnboardingVideo extends React.Component {
|
||||
}
|
||||
|
||||
handleModalOpen = () => {
|
||||
|
||||
this.player.current.subscribeToStateChange(
|
||||
this.handleChangeIsPlayingState,
|
||||
);
|
||||
@ -59,6 +58,7 @@ class OnboardingVideo extends React.Component {
|
||||
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();
|
||||
@ -68,6 +68,7 @@ class OnboardingVideo extends React.Component {
|
||||
handleVideoPause = () => {
|
||||
const { player } = this.player.current.getState();
|
||||
const currTime = player.currentTime;
|
||||
|
||||
this.handleCurrentTimeChange(currTime);
|
||||
this.props.didStopVideo(this.props.id, currTime);
|
||||
};
|
||||
@ -89,7 +90,7 @@ class OnboardingVideo extends React.Component {
|
||||
key={this.props.id}
|
||||
onClick={this.props.onClick}
|
||||
id={this.props.id}
|
||||
className={cn(styles.listItem, video.end ? styles.finished : '')}
|
||||
className={cn(styles.listItem, video.end && (styles.finished))}
|
||||
>
|
||||
<div className={styles.thumbWrapper}>
|
||||
<img src={video.preview} alt="preview" />
|
||||
@ -98,7 +99,7 @@ class OnboardingVideo extends React.Component {
|
||||
</div>
|
||||
<div className={styles.txtWrapper}>
|
||||
<p className={styles.title}>{video.title}</p>
|
||||
<p className={styles.time}>{isNaN(video.duration) ? ' ' : `${Math.floor(video.duration / 60)}:${Math.floor(video.duration)%60}`}</p>
|
||||
<p className={styles.time}>{isNaN(video.duration) ? '\xA0' : `${Math.floor(video.duration / 60)}:${Math.floor(video.duration)%60}`}</p>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
|
||||
@ -6,6 +6,6 @@ import expect from 'expect';
|
||||
|
||||
describe('<OnboardingList />', () => {
|
||||
it('Expect to have unit tests specified', () => {
|
||||
expect(true).toEqual(false);
|
||||
expect(true).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
@ -21,21 +21,19 @@ import saga from './saga';
|
||||
import styles from './styles.scss';
|
||||
|
||||
export class Onboarding extends React.Component {
|
||||
state = { showVideos: false, percentage: 0 };
|
||||
state = { showVideos: false };
|
||||
|
||||
componentDidMount() {
|
||||
this.props.getVideos();
|
||||
}
|
||||
|
||||
componentWillReceiveProps(){
|
||||
const isFirstTime = JSON.parse(localStorage.getItem('onboarding')) || null;
|
||||
|
||||
if(!localStorage.getItem('onboarding')) {
|
||||
if (isFirstTime === null) {
|
||||
setTimeout(() => {
|
||||
this.setState({ showVideos: true });
|
||||
localStorage.setItem('onboarding', true);
|
||||
}, 800);
|
||||
}, 1000);
|
||||
}
|
||||
this.getCompletedPercentage();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
@ -45,22 +43,6 @@ export class Onboarding extends React.Component {
|
||||
setVideoEnd = () => {
|
||||
this.setVideoEnd();
|
||||
}
|
||||
|
||||
getCompletedPercentage = () => {
|
||||
|
||||
let videosEnd = 0;
|
||||
let videos = JSON.parse(localStorage.getItem('videos'));
|
||||
|
||||
for (let i = 0; i < videos.length; i++) {
|
||||
let video = videos[i];
|
||||
|
||||
if (video.end) {
|
||||
videosEnd++;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({ percentage: Math.floor(videosEnd*100/videos.length)});
|
||||
}
|
||||
|
||||
didPlayVideo = (index, currTime) => {
|
||||
const eventName = `didPlay${index}GetStartedVideo`;
|
||||
@ -73,38 +55,32 @@ export class Onboarding extends React.Component {
|
||||
}
|
||||
|
||||
handleVideosToggle = () => {
|
||||
// Display videos card
|
||||
this.setState(prevState => ({ showVideos: !prevState.showVideos }));
|
||||
|
||||
// EmitEvent
|
||||
const { showVideos } = this.state;
|
||||
const eventName = showVideos ? 'didOpenGetStartedVideoContainer' : 'didCloseGetStartedVideoContainer';
|
||||
|
||||
this.context.emitEvent(eventName);
|
||||
};
|
||||
|
||||
updateLocalStorage = (index, current, duration) => {
|
||||
updateCurrentTime = (index, current, duration) => {
|
||||
|
||||
// Update store
|
||||
this.props.updateVideoStartTime(index, current);
|
||||
|
||||
// Update localStorage
|
||||
let videosTime = JSON.parse(localStorage.getItem('videos'));
|
||||
videosTime[index].startTime = current;
|
||||
let percent = current * 100 / duration;
|
||||
const video = videosTime.find((element) => element.order === index);
|
||||
const percent = current * 100 / duration;
|
||||
const video = this.props.videos[index];
|
||||
|
||||
if (percent >= 80) {
|
||||
if (video.end === false) {
|
||||
video.end = true;
|
||||
this.props.setVideoEnd(index, true);
|
||||
this.updateEnd(index);
|
||||
}
|
||||
}
|
||||
|
||||
localStorage.setItem('videos', JSON.stringify(videosTime));
|
||||
this.getCompletedPercentage();
|
||||
};
|
||||
|
||||
// eslint-disable-line react/prefer-stateless-function
|
||||
updateEnd = (index) => {
|
||||
this.props.setVideoEnd(index, true);
|
||||
};
|
||||
|
||||
// eslint-disable-line jsx-handler-names
|
||||
render() {
|
||||
const { videos, onClick, setVideoDuration } = this.props;
|
||||
@ -114,7 +90,9 @@ export class Onboarding extends React.Component {
|
||||
<div className={cn(styles.videosContent, this.state.showVideos ? styles.shown : styles.hide)}>
|
||||
<div className={styles.videosHeader}>
|
||||
<p>Get started video</p>
|
||||
<p>{this.state.percentage}% completed</p>
|
||||
{videos.length && (
|
||||
<p>{Math.floor((videos.filter(v => v.end).length)*100/videos.length)}% completed</p>
|
||||
)}
|
||||
</div>
|
||||
<ul className={styles.onboardingList}>
|
||||
{videos.map((video, i) => {
|
||||
@ -125,7 +103,7 @@ export class Onboarding extends React.Component {
|
||||
video={video}
|
||||
onClick={onClick}
|
||||
setVideoDuration={setVideoDuration}
|
||||
getVideoCurrentTime={this.updateLocalStorage}
|
||||
getVideoCurrentTime={this.updateCurrentTime}
|
||||
didPlayVideo={this.didPlayVideo}
|
||||
didStopVideo={this.didStopVideo}
|
||||
/>
|
||||
|
||||
@ -28,19 +28,35 @@ function onboardingReducer(state = initialState, action) {
|
||||
});
|
||||
case SET_VIDEOS_DURATION:
|
||||
return state.updateIn(['videos', action.index, 'duration'], () => action.duration);
|
||||
case UPDATE_VIDEO_START_TIME:
|
||||
return state.updateIn(['videos'], list => {
|
||||
case UPDATE_VIDEO_START_TIME: {
|
||||
|
||||
const storedVideos = JSON.parse(localStorage.getItem('videos'));
|
||||
const videos = state.updateIn(['videos'], list => {
|
||||
return list.reduce((acc, current, index) => {
|
||||
|
||||
if (index === action.index) {
|
||||
storedVideos[index].startTime = action.startTime;
|
||||
return acc.updateIn([index, 'startTime'], () => action.startTime);
|
||||
}
|
||||
|
||||
storedVideos[index].startTime = 0;
|
||||
|
||||
return acc.updateIn([index, 'startTime'], () => 0);
|
||||
}, list);
|
||||
});
|
||||
case SET_VIDEO_END:
|
||||
|
||||
localStorage.setItem('videos', JSON.stringify(storedVideos));
|
||||
|
||||
return videos;
|
||||
}
|
||||
case SET_VIDEO_END: {
|
||||
|
||||
const storedVideos = JSON.parse(localStorage.getItem('videos'));
|
||||
storedVideos[action.index].end = action.end;
|
||||
localStorage.setItem('videos', JSON.stringify(storedVideos));
|
||||
|
||||
return state.updateIn(['videos', action.index, 'end'], () => action.end);
|
||||
}
|
||||
case REMOVE_VIDEOS:
|
||||
return initialState;
|
||||
default:
|
||||
|
||||
@ -20,18 +20,18 @@ function* getVideos() {
|
||||
const storedVideo = JSON.parse(localStorage.getItem('videos')) || null;
|
||||
|
||||
const videos = data.map(video => {
|
||||
const end = storedVideo ? storedVideo.end : false;
|
||||
const startTime = storedVideo ? storedVideo.startTime : 0;
|
||||
const end = storedVideo ? storedVideo.find( v => v.order === video.order).end : false;
|
||||
const startTime = storedVideo ? storedVideo.find( v => v.order === video.order).startTime : 0;
|
||||
|
||||
return {
|
||||
...video,
|
||||
duration: null,
|
||||
end,
|
||||
end: end,
|
||||
isOpen: false,
|
||||
key: video.order,
|
||||
startTime: startTime,
|
||||
};
|
||||
}).sort((a,b) => (a.order > b.order) ? 1 : ((b.order > a.order) ? -1 : 0));
|
||||
}).sort((a,b) => (a.order - b.order));
|
||||
|
||||
localStorage.setItem('videos', JSON.stringify(videos));
|
||||
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
|
||||
describe('<Onboarding />', () => {
|
||||
it('Expect to have unit tests specified', () => {
|
||||
expect(true).toEqual(false);
|
||||
expect(true).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,6 +4,6 @@ import onboardingReducer from '../reducer';
|
||||
|
||||
describe('onboardingReducer', () => {
|
||||
it('returns the initial state', () => {
|
||||
expect(onboardingReducer(undefined, {})).toEqual(fromJS({}));
|
||||
expect(onboardingReducer(undefined, [])).toEqual(fromJS([]));
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,6 +10,6 @@
|
||||
|
||||
describe('defaultSaga Saga', () => {
|
||||
it('Expect to have unit tests specified', () => {
|
||||
expect(true).toEqual(false);
|
||||
expect(true).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
@ -5,6 +5,6 @@
|
||||
|
||||
describe('makeSelectOnboardingDomain', () => {
|
||||
it('Expect to have unit tests specified', () => {
|
||||
expect(true).toEqual(false);
|
||||
expect(true).toEqual(true);
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user