yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-08-14 19:56:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

retrieve videos from API and update redux store and UI

Browse Source
This commit is contained in:
Ky 2019-02-14 19:03:17 +01:00
parent 163ca8c317
commit a2bc9ab609
17 changed files with 101 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
packages/strapi-admin/admin/src/components/OnboardingList/index.js → packages/strapi-admin/admin/src/components/OnboardingVideo/index.js
View File

@ -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;

38
packages/strapi-admin/admin/src/components/OnboardingList/styles.scss → packages/strapi-admin/admin/src/components/OnboardingVideo/styles.scss
View File

@ -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;
display: none;
max-width: 74.5rem;
margin: 16rem auto 3rem calc(50% - 24rem);
&.visible {
display: block;
}
}
.hiddenPlayerWrapper {
display: none;
}
.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;
}
}
}

0
packages/strapi-admin/admin/src/components/OnboardingList/tests/index.test.js → packages/strapi-admin/admin/src/components/OnboardingVideo/tests/index.test.js
View File

3
packages/strapi-admin/admin/src/containers/AdminPage/index.js
View File

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

11
packages/strapi-admin/admin/src/containers/Onboarding/actions.js
View File

@ -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),
};
}

3
packages/strapi-admin/admin/src/containers/Onboarding/constants.js
View File

@ -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';

27
packages/strapi-admin/admin/src/containers/Onboarding/index.js
View File

@ -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(

4
packages/strapi-admin/admin/src/containers/Onboarding/reducer.js
View File

@ -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;
}

7
packages/strapi-admin/admin/src/containers/Onboarding/saga.js
View File

@ -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;
}),

2
packages/strapi-admin/package.json
View File

@ -55,4 +55,4 @@
"npm": ">= 6.0.0"
},
"license": "MIT"
}
}

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

@ -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));
}

2
packages/strapi-plugin-content-manager/package.json
View File

@ -52,4 +52,4 @@
"npm": ">= 6.0.0"
},
"license": "MIT"
}
}

2
packages/strapi-plugin-content-type-builder/package.json
View File

@ -51,4 +51,4 @@
"npm": ">= 6.0.0"
},
"license": "MIT"
}
}

2
packages/strapi-plugin-email/package.json
View File

@ -49,4 +49,4 @@
"npm": ">= 6.0.0"
},
"license": "MIT"
}
}

2
packages/strapi-plugin-settings-manager/package.json
View File

@ -48,4 +48,4 @@
"npm": ">= 6.0.0"
},
"license": "MIT"
}
}

2
packages/strapi-plugin-upload/package.json
View File

@ -46,4 +46,4 @@
"npm": ">= 6.0.0"
},
"license": "MIT"
}
}

2
packages/strapi-plugin-users-permissions/package.json
View File

@ -56,4 +56,4 @@
"npm": ">= 6.0.0"
},
"license": "MIT"
}
}