2018-06-16 18:19:31 -04:00
|
|
|
// preview view can show either project page or editor page;
|
|
|
|
// idea is that we shouldn't require a page reload to switch back and forth
|
|
|
|
|
2018-04-24 11:00:47 -04:00
|
|
|
const bindAll = require('lodash.bindall');
|
2018-02-20 17:04:45 -05:00
|
|
|
const React = require('react');
|
2018-03-08 15:57:19 -05:00
|
|
|
const PropTypes = require('prop-types');
|
|
|
|
const connect = require('react-redux').connect;
|
2018-05-02 15:27:49 -04:00
|
|
|
const injectIntl = require('react-intl').injectIntl;
|
2018-06-20 09:55:09 -04:00
|
|
|
const parser = require('scratch-parser');
|
2018-03-08 15:57:19 -05:00
|
|
|
const Page = require('../../components/page/www/page.jsx');
|
2018-02-20 17:04:45 -05:00
|
|
|
const render = require('../../lib/render.jsx');
|
2018-06-20 09:55:09 -04:00
|
|
|
const storage = require('../../lib/storage.js').default;
|
2018-06-26 08:41:06 -04:00
|
|
|
const log = require('../../lib/log');
|
2018-06-20 09:55:09 -04:00
|
|
|
const EXTENSION_INFO = require('../../lib/extensions.js').default;
|
2018-10-19 09:34:16 -04:00
|
|
|
const jar = require('../../lib/jar.js');
|
2018-11-09 22:09:28 -05:00
|
|
|
const thumbnailUrl = require('../../lib/user-thumbnail');
|
2018-02-20 17:04:45 -05:00
|
|
|
|
2018-03-08 15:57:19 -05:00
|
|
|
const PreviewPresentation = require('./presentation.jsx');
|
2018-05-28 15:32:23 -04:00
|
|
|
const projectShape = require('./projectshape.jsx').projectShape;
|
2018-09-24 11:04:30 -04:00
|
|
|
const Registration = require('../../components/registration/registration.jsx');
|
|
|
|
const ConnectedLogin = require('../../components/login/connected-login.jsx');
|
|
|
|
const CanceledDeletionModal = require('../../components/login/canceled-deletion-modal.jsx');
|
2018-03-08 15:57:19 -05:00
|
|
|
|
|
|
|
const sessionActions = require('../../redux/session.js');
|
2018-09-24 11:04:30 -04:00
|
|
|
const navigationActions = require('../../redux/navigation.js');
|
2018-03-14 15:50:27 -04:00
|
|
|
const previewActions = require('../../redux/preview.js');
|
2018-05-24 16:23:07 -04:00
|
|
|
|
2018-09-25 09:52:44 -04:00
|
|
|
const frameless = require('../../lib/frameless');
|
|
|
|
|
2018-05-24 16:23:07 -04:00
|
|
|
const GUI = require('scratch-gui');
|
|
|
|
const IntlGUI = injectIntl(GUI.default);
|
2018-02-20 17:04:45 -05:00
|
|
|
|
|
|
|
class Preview extends React.Component {
|
2018-04-24 11:00:47 -04:00
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
|
|
|
bindAll(this, [
|
2018-05-24 16:23:07 -04:00
|
|
|
'addEventListeners',
|
2018-10-19 16:02:59 -04:00
|
|
|
'fetchCommunityData',
|
2018-10-04 15:02:59 -04:00
|
|
|
'handleAddComment',
|
2018-10-03 13:21:36 -04:00
|
|
|
'handleDeleteComment',
|
2018-07-13 09:50:17 -04:00
|
|
|
'handleToggleStudio',
|
2018-04-24 11:00:47 -04:00
|
|
|
'handleFavoriteToggle',
|
2018-08-06 11:52:18 -04:00
|
|
|
'handleLoadMore',
|
2018-04-24 11:00:47 -04:00
|
|
|
'handleLoveToggle',
|
2018-05-24 16:23:07 -04:00
|
|
|
'handlePopState',
|
2018-05-31 16:49:17 -04:00
|
|
|
'handleReportClick',
|
|
|
|
'handleReportClose',
|
2018-10-09 11:38:24 -04:00
|
|
|
'handleReportComment',
|
2018-05-31 16:49:17 -04:00
|
|
|
'handleReportSubmit',
|
2018-10-16 10:00:38 -04:00
|
|
|
'handleRestoreComment',
|
2018-07-18 18:52:15 -04:00
|
|
|
'handleAddToStudioClick',
|
|
|
|
'handleAddToStudioClose',
|
2018-05-02 15:27:49 -04:00
|
|
|
'handleSeeInside',
|
2018-10-16 11:38:26 -04:00
|
|
|
'handleShare',
|
2018-10-19 16:02:59 -04:00
|
|
|
'handleUpdateProjectId',
|
2018-08-27 17:11:05 -04:00
|
|
|
'handleUpdateProjectTitle',
|
2018-04-24 11:00:47 -04:00
|
|
|
'handleUpdate',
|
2018-10-10 15:14:53 -04:00
|
|
|
'handleToggleComments',
|
2018-05-24 16:23:07 -04:00
|
|
|
'initCounts',
|
2018-05-31 16:49:17 -04:00
|
|
|
'pushHistory',
|
2018-10-01 09:52:50 -04:00
|
|
|
'renderLogin',
|
|
|
|
'setScreenFromOrientation'
|
2018-04-24 11:00:47 -04:00
|
|
|
]);
|
2018-05-31 16:49:17 -04:00
|
|
|
const pathname = window.location.pathname.toLowerCase();
|
|
|
|
const parts = pathname.split('/').filter(Boolean);
|
|
|
|
// parts[0]: 'preview'
|
|
|
|
// parts[1]: either :id or 'editor'
|
|
|
|
// parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
|
2018-10-24 10:23:28 -04:00
|
|
|
|
2018-10-25 15:53:11 -04:00
|
|
|
// Get single-comment id from url hash, using the #comments-{id} scheme from scratch2
|
|
|
|
const commentHashPrefix = '#comments-';
|
2018-10-24 10:23:28 -04:00
|
|
|
const singleCommentId = window.location.hash.indexOf(commentHashPrefix) !== -1 &&
|
|
|
|
parseInt(window.location.hash.replace(commentHashPrefix, ''), 10);
|
|
|
|
|
2018-05-31 16:49:17 -04:00
|
|
|
this.state = {
|
2018-06-20 09:55:09 -04:00
|
|
|
extensions: [],
|
2018-05-31 16:49:17 -04:00
|
|
|
favoriteCount: 0,
|
|
|
|
loveCount: 0,
|
2018-10-19 16:02:59 -04:00
|
|
|
projectId: parts[1] === 'editor' ? '0' : parts[1],
|
2018-10-24 10:23:28 -04:00
|
|
|
singleCommentId: singleCommentId,
|
2018-07-18 18:52:15 -04:00
|
|
|
addToStudioOpen: false,
|
2018-08-02 17:54:43 -04:00
|
|
|
reportOpen: false
|
2018-05-31 16:49:17 -04:00
|
|
|
};
|
2018-05-24 16:23:07 -04:00
|
|
|
this.addEventListeners();
|
2018-09-25 09:52:44 -04:00
|
|
|
/* In the beginning, if user is on mobile and landscape, go to fullscreen */
|
2018-10-01 09:52:50 -04:00
|
|
|
this.setScreenFromOrientation();
|
2018-04-24 11:00:47 -04:00
|
|
|
}
|
2018-10-19 16:02:59 -04:00
|
|
|
componentDidUpdate (prevProps, prevState) {
|
|
|
|
if (this.state.projectId > 0 &&
|
|
|
|
((this.props.sessionStatus !== prevProps.sessionStatus &&
|
|
|
|
this.props.sessionStatus === sessionActions.Status.FETCHED) ||
|
|
|
|
(this.state.projectId !== prevState.projectId))) {
|
|
|
|
this.fetchCommunityData();
|
2018-10-24 15:38:18 -04:00
|
|
|
this.getExtensions(this.state.projectId);
|
2018-10-19 16:02:59 -04:00
|
|
|
}
|
|
|
|
if (this.state.projectId === '0' && this.state.projectId !== prevState.projectId) {
|
|
|
|
this.props.resetProject();
|
2018-04-24 11:00:47 -04:00
|
|
|
}
|
|
|
|
if (this.props.projectInfo.id !== prevProps.projectInfo.id) {
|
2018-10-19 16:02:59 -04:00
|
|
|
if (typeof this.props.projectInfo.id === 'undefined') {
|
|
|
|
this.initCounts(0, 0);
|
|
|
|
} else {
|
|
|
|
this.initCounts(this.props.projectInfo.stats.favorites, this.props.projectInfo.stats.loves);
|
|
|
|
if (this.props.projectInfo.remix.parent !== null) {
|
|
|
|
this.props.getParentInfo(this.props.projectInfo.remix.parent);
|
|
|
|
}
|
|
|
|
if (this.props.projectInfo.remix.root !== null &&
|
|
|
|
this.props.projectInfo.remix.root !== this.props.projectInfo.remix.parent
|
|
|
|
) {
|
|
|
|
this.props.getOriginalInfo(this.props.projectInfo.remix.root);
|
|
|
|
}
|
2018-04-24 11:00:47 -04:00
|
|
|
}
|
|
|
|
}
|
2018-05-24 16:23:07 -04:00
|
|
|
if (this.props.playerMode !== prevProps.playerMode || this.props.fullScreen !== prevProps.fullScreen) {
|
|
|
|
this.pushHistory(history.state === null);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
componentWillUnmount () {
|
|
|
|
this.removeEventListeners();
|
|
|
|
}
|
|
|
|
addEventListeners () {
|
|
|
|
window.addEventListener('popstate', this.handlePopState);
|
2018-10-01 09:52:50 -04:00
|
|
|
window.addEventListener('orientationchange', this.setScreenFromOrientation);
|
2018-05-24 16:23:07 -04:00
|
|
|
}
|
|
|
|
removeEventListeners () {
|
|
|
|
window.removeEventListener('popstate', this.handlePopState);
|
2018-10-01 16:58:05 -04:00
|
|
|
window.removeEventListener('orientationchange', this.setScreenFromOrientation);
|
2018-10-01 09:52:50 -04:00
|
|
|
}
|
2018-10-19 16:02:59 -04:00
|
|
|
fetchCommunityData () {
|
|
|
|
if (this.props.userPresent) {
|
|
|
|
const username = this.props.user.username;
|
|
|
|
const token = this.props.user.token;
|
2018-10-24 10:23:28 -04:00
|
|
|
if (this.state.singleCommentId) {
|
|
|
|
this.props.getCommentById(this.state.projectId, this.state.singleCommentId,
|
|
|
|
this.props.isAdmin, token);
|
|
|
|
} else {
|
|
|
|
this.props.getTopLevelComments(this.state.projectId, this.props.comments.length,
|
|
|
|
this.props.isAdmin, token);
|
|
|
|
}
|
2018-10-19 16:02:59 -04:00
|
|
|
this.props.getProjectInfo(this.state.projectId, token);
|
|
|
|
this.props.getRemixes(this.state.projectId, token);
|
|
|
|
this.props.getProjectStudios(this.state.projectId, token);
|
|
|
|
this.props.getCuratedStudios(username);
|
|
|
|
this.props.getFavedStatus(this.state.projectId, username, token);
|
|
|
|
this.props.getLovedStatus(this.state.projectId, username, token);
|
|
|
|
} else {
|
2018-10-24 10:23:28 -04:00
|
|
|
if (this.state.singleCommentId) {
|
|
|
|
this.props.getCommentById(this.state.projectId, this.state.singleCommentId);
|
|
|
|
} else {
|
|
|
|
this.props.getTopLevelComments(this.state.projectId, this.props.comments.length);
|
|
|
|
}
|
2018-10-19 16:02:59 -04:00
|
|
|
this.props.getProjectInfo(this.state.projectId);
|
|
|
|
this.props.getRemixes(this.state.projectId);
|
|
|
|
this.props.getProjectStudios(this.state.projectId);
|
|
|
|
}
|
|
|
|
}
|
2018-10-01 09:52:50 -04:00
|
|
|
setScreenFromOrientation () {
|
|
|
|
/*
|
|
|
|
* If the user is on a mobile device, switching to
|
|
|
|
* landscape format should make the fullscreen mode active
|
|
|
|
*/
|
|
|
|
const isMobileDevice = screen.height <= frameless.mobile || screen.width <= frameless.mobile;
|
2018-10-05 18:00:52 -04:00
|
|
|
const isAModalOpen = this.state.addToStudioOpen || this.state.reportOpen;
|
|
|
|
if (this.props.playerMode && isMobileDevice && !isAModalOpen) {
|
2018-10-02 15:42:29 -04:00
|
|
|
const isLandscape = screen.height < screen.width;
|
2018-10-01 16:58:05 -04:00
|
|
|
if (isLandscape) {
|
2018-10-01 09:52:50 -04:00
|
|
|
this.props.setFullScreen(true);
|
|
|
|
} else {
|
|
|
|
this.props.setFullScreen(false);
|
|
|
|
}
|
|
|
|
}
|
2018-05-24 16:23:07 -04:00
|
|
|
}
|
2018-06-20 09:55:09 -04:00
|
|
|
getExtensions (projectId) {
|
2018-10-19 16:02:59 -04:00
|
|
|
if (projectId > 0) {
|
|
|
|
storage
|
|
|
|
.load(storage.AssetType.Project, projectId, storage.DataFormat.JSON)
|
|
|
|
.then(projectAsset => { // NOTE: this is turning up null, breaking the line below.
|
|
|
|
let input = projectAsset.data;
|
|
|
|
if (typeof input === 'object' && !(input instanceof ArrayBuffer) &&
|
|
|
|
!ArrayBuffer.isView(input)) { // taken from scratch-vm
|
|
|
|
// If the input is an object and not any ArrayBuffer
|
|
|
|
// or an ArrayBuffer view (this includes all typed arrays and DataViews)
|
|
|
|
// turn the object into a JSON string, because we suspect
|
|
|
|
// this is a project.json as an object
|
|
|
|
// validate expects a string or buffer as input
|
|
|
|
// TODO not sure if we need to check that it also isn't a data view
|
|
|
|
input = JSON.stringify(input);
|
2018-06-20 17:04:16 -04:00
|
|
|
}
|
2018-10-19 16:02:59 -04:00
|
|
|
parser(projectAsset.data, false, (err, projectData) => {
|
|
|
|
if (err) {
|
|
|
|
log.error(`Unhandled project parsing error: ${err}`);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const extensionSet = new Set();
|
|
|
|
if (projectData[0].extensions) {
|
|
|
|
projectData[0].extensions.forEach(extension => {
|
2018-11-14 15:39:40 -05:00
|
|
|
const extensionInfo = EXTENSION_INFO[extension];
|
|
|
|
if (extensionInfo) {
|
|
|
|
extensionSet.add(extensionInfo);
|
|
|
|
}
|
2018-10-19 16:02:59 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
this.setState({
|
|
|
|
extensions: Array.from(extensionSet)
|
2018-06-22 09:02:11 -04:00
|
|
|
});
|
2018-06-20 09:55:09 -04:00
|
|
|
});
|
|
|
|
});
|
2018-10-19 16:02:59 -04:00
|
|
|
} else { // projectId is default or invalid; empty the extensions array
|
|
|
|
this.setState({
|
|
|
|
extensions: []
|
2018-06-20 09:55:09 -04:00
|
|
|
});
|
2018-10-19 16:02:59 -04:00
|
|
|
}
|
2018-06-20 09:55:09 -04:00
|
|
|
}
|
2018-10-10 15:14:53 -04:00
|
|
|
handleToggleComments () {
|
|
|
|
this.props.updateProject(
|
|
|
|
this.props.projectInfo.id,
|
|
|
|
{comments_allowed: !this.props.projectInfo.comments_allowed},
|
|
|
|
this.props.user.username,
|
|
|
|
this.props.user.token
|
|
|
|
);
|
|
|
|
}
|
2018-10-05 13:08:51 -04:00
|
|
|
handleAddComment (comment, topLevelCommentId) {
|
|
|
|
this.props.handleAddComment(comment, topLevelCommentId);
|
2018-10-04 15:02:59 -04:00
|
|
|
}
|
2018-10-05 13:08:51 -04:00
|
|
|
handleDeleteComment (id, topLevelCommentId) {
|
|
|
|
this.props.handleDeleteComment(this.state.projectId, id, topLevelCommentId, this.props.user.token);
|
2018-10-03 13:21:36 -04:00
|
|
|
}
|
2018-10-09 11:38:24 -04:00
|
|
|
handleReportComment (id, topLevelCommentId) {
|
|
|
|
this.props.handleReportComment(this.state.projectId, id, topLevelCommentId, this.props.user.token);
|
|
|
|
}
|
2018-10-16 10:00:38 -04:00
|
|
|
handleRestoreComment (id, topLevelCommentId) {
|
|
|
|
this.props.handleRestoreComment(this.state.projectId, id, topLevelCommentId, this.props.user.token);
|
|
|
|
}
|
2018-05-31 16:49:17 -04:00
|
|
|
handleReportClick () {
|
2018-08-02 17:54:43 -04:00
|
|
|
this.setState({reportOpen: true});
|
2018-05-31 16:49:17 -04:00
|
|
|
}
|
|
|
|
handleReportClose () {
|
2018-08-02 17:54:43 -04:00
|
|
|
this.setState({reportOpen: false});
|
2018-05-31 16:49:17 -04:00
|
|
|
}
|
2018-07-18 18:52:15 -04:00
|
|
|
handleAddToStudioClick () {
|
|
|
|
this.setState({addToStudioOpen: true});
|
|
|
|
}
|
|
|
|
handleAddToStudioClose () {
|
|
|
|
this.setState({addToStudioOpen: false});
|
|
|
|
}
|
2018-05-31 16:49:17 -04:00
|
|
|
handleReportSubmit (formData) {
|
2018-10-15 11:17:40 -04:00
|
|
|
this.props.reportProject(this.state.projectId, formData, this.props.user.token);
|
2018-05-31 16:49:17 -04:00
|
|
|
}
|
2018-05-24 16:23:07 -04:00
|
|
|
handlePopState () {
|
|
|
|
const path = window.location.pathname.toLowerCase();
|
|
|
|
const playerMode = path.indexOf('editor') === -1;
|
|
|
|
const fullScreen = path.indexOf('fullscreen') !== -1;
|
|
|
|
if (this.props.playerMode !== playerMode) {
|
|
|
|
this.props.setPlayer(playerMode);
|
|
|
|
}
|
|
|
|
if (this.props.fullScreen !== fullScreen) {
|
|
|
|
this.props.setFullScreen(fullScreen);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
pushHistory (push) {
|
|
|
|
// update URI to match mode
|
|
|
|
const idPath = this.state.projectId ? `${this.state.projectId}/` : '';
|
|
|
|
let modePath = '';
|
|
|
|
if (!this.props.playerMode) modePath = 'editor/';
|
|
|
|
// fullscreen overrides editor
|
|
|
|
if (this.props.fullScreen) modePath = 'fullscreen/';
|
|
|
|
const newPath = `/preview/${idPath}${modePath}`;
|
|
|
|
if (push) {
|
|
|
|
history.pushState(
|
|
|
|
{},
|
|
|
|
document.title,
|
|
|
|
newPath
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
history.replaceState(
|
|
|
|
{},
|
|
|
|
document.title,
|
|
|
|
newPath
|
|
|
|
);
|
|
|
|
}
|
2018-03-08 15:57:19 -05:00
|
|
|
}
|
2018-10-18 16:45:24 -04:00
|
|
|
handleToggleStudio (studio) {
|
2018-07-31 16:38:49 -04:00
|
|
|
// only send add or leave request to server if we know current status
|
|
|
|
if ((typeof studio !== 'undefined') && ('includesProject' in studio)) {
|
|
|
|
this.props.toggleStudio(
|
|
|
|
(studio.includesProject === false),
|
2018-10-18 16:45:24 -04:00
|
|
|
studio.id,
|
2018-07-31 16:38:49 -04:00
|
|
|
this.props.projectInfo.id,
|
|
|
|
this.props.user.token
|
|
|
|
);
|
2018-07-18 18:52:15 -04:00
|
|
|
}
|
2018-07-11 15:08:01 -04:00
|
|
|
}
|
2018-04-24 11:00:47 -04:00
|
|
|
handleFavoriteToggle () {
|
|
|
|
this.props.setFavedStatus(
|
|
|
|
!this.props.faved,
|
|
|
|
this.props.projectInfo.id,
|
|
|
|
this.props.user.username,
|
|
|
|
this.props.user.token
|
|
|
|
);
|
|
|
|
if (this.props.faved) {
|
|
|
|
this.setState(state => ({
|
|
|
|
favoriteCount: state.favoriteCount - 1
|
|
|
|
}));
|
|
|
|
} else {
|
|
|
|
this.setState(state => ({
|
|
|
|
favoriteCount: state.favoriteCount + 1
|
|
|
|
}));
|
2018-03-14 15:50:27 -04:00
|
|
|
}
|
2018-04-24 11:00:47 -04:00
|
|
|
}
|
2018-08-06 11:52:18 -04:00
|
|
|
handleLoadMore () {
|
2018-10-16 09:13:39 -04:00
|
|
|
this.props.getTopLevelComments(this.state.projectId, this.props.comments.length,
|
|
|
|
this.props.isAdmin, this.props.user && this.props.user.token);
|
2018-08-06 11:52:18 -04:00
|
|
|
}
|
2018-04-24 11:00:47 -04:00
|
|
|
handleLoveToggle () {
|
|
|
|
this.props.setLovedStatus(
|
|
|
|
!this.props.loved,
|
|
|
|
this.props.projectInfo.id,
|
|
|
|
this.props.user.username,
|
|
|
|
this.props.user.token
|
|
|
|
);
|
|
|
|
if (this.props.loved) {
|
|
|
|
this.setState(state => ({
|
|
|
|
loveCount: state.loveCount - 1
|
|
|
|
}));
|
|
|
|
} else {
|
|
|
|
this.setState(state => ({
|
|
|
|
loveCount: state.loveCount + 1
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
}
|
2018-05-02 15:27:49 -04:00
|
|
|
handleSeeInside () {
|
2018-05-24 16:23:07 -04:00
|
|
|
this.props.setPlayer(false);
|
2018-05-02 15:27:49 -04:00
|
|
|
}
|
2018-09-26 21:42:44 -04:00
|
|
|
handleShare () {
|
2018-11-13 08:49:37 -05:00
|
|
|
this.props.shareProject(
|
2018-10-16 11:38:26 -04:00
|
|
|
this.props.projectInfo.id,
|
|
|
|
this.props.user.token
|
|
|
|
);
|
2018-09-26 21:42:44 -04:00
|
|
|
}
|
2018-04-24 11:00:47 -04:00
|
|
|
handleUpdate (jsonData) {
|
|
|
|
this.props.updateProject(
|
|
|
|
this.props.projectInfo.id,
|
|
|
|
jsonData,
|
|
|
|
this.props.user.username,
|
|
|
|
this.props.user.token
|
|
|
|
);
|
|
|
|
}
|
2018-08-27 17:11:05 -04:00
|
|
|
handleUpdateProjectTitle (title) {
|
|
|
|
this.handleUpdate({
|
|
|
|
title: title
|
|
|
|
});
|
|
|
|
}
|
2018-10-19 09:34:16 -04:00
|
|
|
handleSetLanguage (locale) {
|
|
|
|
jar.set('scratchlanguage', locale);
|
|
|
|
}
|
2018-10-19 16:02:59 -04:00
|
|
|
handleUpdateProjectId (projectId, callback) {
|
|
|
|
this.setState({projectId: projectId}, () => {
|
|
|
|
const parts = window.location.pathname.toLowerCase()
|
|
|
|
.split('/')
|
|
|
|
.filter(Boolean);
|
|
|
|
let newUrl;
|
|
|
|
if (projectId === '0') {
|
|
|
|
newUrl = `/${parts[0]}/editor`;
|
|
|
|
} else {
|
|
|
|
newUrl = `/${parts[0]}/${projectId}/editor`;
|
|
|
|
}
|
|
|
|
history.pushState(
|
|
|
|
{projectId: projectId},
|
|
|
|
{projectId: projectId},
|
|
|
|
newUrl
|
|
|
|
);
|
|
|
|
if (callback) callback();
|
|
|
|
});
|
|
|
|
}
|
2018-04-24 11:00:47 -04:00
|
|
|
initCounts (favorites, loves) {
|
|
|
|
this.setState({
|
|
|
|
favoriteCount: favorites,
|
|
|
|
loveCount: loves
|
|
|
|
});
|
2018-02-20 17:04:45 -05:00
|
|
|
}
|
2018-09-24 11:04:30 -04:00
|
|
|
renderLogin ({onClose}) {
|
2018-05-31 16:49:17 -04:00
|
|
|
return (
|
2018-09-24 11:04:30 -04:00
|
|
|
<ConnectedLogin
|
|
|
|
key="login-dropdown-presentation"
|
|
|
|
/* eslint-disable react/jsx-no-bind */
|
|
|
|
onLogIn={(formData, callback) => {
|
|
|
|
this.props.handleLogIn(formData, result => {
|
|
|
|
if (result.success === true) {
|
|
|
|
onClose();
|
|
|
|
}
|
|
|
|
callback(result);
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/* eslint-ensable react/jsx-no-bind */
|
|
|
|
/>
|
2018-05-31 16:49:17 -04:00
|
|
|
);
|
|
|
|
}
|
2018-02-20 17:04:45 -05:00
|
|
|
render () {
|
|
|
|
return (
|
2018-05-24 16:23:07 -04:00
|
|
|
this.props.playerMode ?
|
2018-05-02 15:27:49 -04:00
|
|
|
<Page>
|
|
|
|
<PreviewPresentation
|
2018-07-25 15:08:12 -04:00
|
|
|
addToStudioOpen={this.state.addToStudioOpen}
|
2018-07-12 10:01:27 -04:00
|
|
|
assetHost={this.props.assetHost}
|
2018-11-08 13:19:12 -05:00
|
|
|
backpackHost={this.props.backpackHost}
|
2018-10-16 10:49:35 -04:00
|
|
|
canAddToStudio={this.props.canAddToStudio}
|
2018-10-17 13:16:41 -04:00
|
|
|
canDeleteComments={this.props.isAdmin || this.props.userOwnsProject}
|
2018-10-16 10:49:35 -04:00
|
|
|
canReport={this.props.canReport}
|
2018-10-16 14:02:40 -04:00
|
|
|
canRestoreComments={this.props.isAdmin}
|
2018-11-01 14:19:28 -04:00
|
|
|
canShare={this.props.canShare}
|
2018-11-08 13:19:12 -05:00
|
|
|
canUseBackpack={this.props.canUseBackpack}
|
2018-10-29 01:05:36 -04:00
|
|
|
cloudHost={this.props.cloudHost}
|
2018-05-02 15:27:49 -04:00
|
|
|
comments={this.props.comments}
|
2018-09-24 11:04:30 -04:00
|
|
|
editable={this.props.isEditable}
|
2018-06-20 09:55:09 -04:00
|
|
|
extensions={this.state.extensions}
|
2018-05-02 15:27:49 -04:00
|
|
|
faved={this.props.faved}
|
|
|
|
favoriteCount={this.state.favoriteCount}
|
|
|
|
isFullScreen={this.state.isFullScreen}
|
2018-09-24 11:04:30 -04:00
|
|
|
isLoggedIn={this.props.isLoggedIn}
|
|
|
|
isShared={this.props.isShared}
|
2018-05-02 15:27:49 -04:00
|
|
|
loveCount={this.state.loveCount}
|
|
|
|
loved={this.props.loved}
|
2018-10-24 09:18:45 -04:00
|
|
|
moreCommentsToLoad={this.props.moreCommentsToLoad}
|
2018-05-24 09:57:06 -04:00
|
|
|
originalInfo={this.props.original}
|
|
|
|
parentInfo={this.props.parent}
|
2018-07-12 10:01:27 -04:00
|
|
|
projectHost={this.props.projectHost}
|
2018-05-02 15:27:49 -04:00
|
|
|
projectId={this.state.projectId}
|
|
|
|
projectInfo={this.props.projectInfo}
|
2018-11-07 16:32:12 -05:00
|
|
|
projectNotAvailable={this.props.projectNotAvailable}
|
2018-07-25 15:08:12 -04:00
|
|
|
projectStudios={this.props.projectStudios}
|
2018-05-02 15:27:49 -04:00
|
|
|
remixes={this.props.remixes}
|
2018-08-06 11:52:18 -04:00
|
|
|
replies={this.props.replies}
|
2018-08-02 17:54:43 -04:00
|
|
|
reportOpen={this.state.reportOpen}
|
2018-10-24 10:23:28 -04:00
|
|
|
singleCommentId={this.state.singleCommentId}
|
2018-09-24 11:04:30 -04:00
|
|
|
userOwnsProject={this.props.userOwnsProject}
|
2018-10-04 15:02:59 -04:00
|
|
|
onAddComment={this.handleAddComment}
|
2018-07-25 15:08:12 -04:00
|
|
|
onAddToStudioClicked={this.handleAddToStudioClick}
|
|
|
|
onAddToStudioClosed={this.handleAddToStudioClose}
|
2018-10-03 13:21:36 -04:00
|
|
|
onDeleteComment={this.handleDeleteComment}
|
2018-05-02 15:27:49 -04:00
|
|
|
onFavoriteClicked={this.handleFavoriteToggle}
|
2018-08-06 11:52:18 -04:00
|
|
|
onLoadMore={this.handleLoadMore}
|
2018-05-02 15:27:49 -04:00
|
|
|
onLoveClicked={this.handleLoveToggle}
|
2018-05-31 16:49:17 -04:00
|
|
|
onReportClicked={this.handleReportClick}
|
|
|
|
onReportClose={this.handleReportClose}
|
2018-10-09 11:38:24 -04:00
|
|
|
onReportComment={this.handleReportComment}
|
2018-05-31 16:49:17 -04:00
|
|
|
onReportSubmit={this.handleReportSubmit}
|
2018-10-16 14:02:40 -04:00
|
|
|
onRestoreComment={this.handleRestoreComment}
|
2018-05-02 15:27:49 -04:00
|
|
|
onSeeInside={this.handleSeeInside}
|
2018-10-16 11:38:26 -04:00
|
|
|
onShare={this.handleShare}
|
2018-10-10 15:14:53 -04:00
|
|
|
onToggleComments={this.handleToggleComments}
|
2018-07-25 15:08:12 -04:00
|
|
|
onToggleStudio={this.handleToggleStudio}
|
2018-05-02 15:27:49 -04:00
|
|
|
onUpdate={this.handleUpdate}
|
|
|
|
/>
|
2018-05-24 16:23:07 -04:00
|
|
|
</Page> :
|
2018-09-24 11:04:30 -04:00
|
|
|
<React.Fragment>
|
|
|
|
<IntlGUI
|
|
|
|
hideIntro
|
|
|
|
assetHost={this.props.assetHost}
|
2018-11-07 12:59:16 -05:00
|
|
|
authorId={this.props.authorId}
|
2018-11-09 22:09:28 -05:00
|
|
|
authorThumbnailUrl={this.props.authorThumbnailUrl}
|
2018-11-07 12:59:16 -05:00
|
|
|
authorUsername={this.props.authorUsername}
|
2018-11-08 13:19:12 -05:00
|
|
|
backpackHost={this.props.backpackHost}
|
|
|
|
backpackVisible={this.props.canUseBackpack}
|
2018-09-24 11:04:30 -04:00
|
|
|
basePath="/"
|
2018-10-23 12:30:41 -04:00
|
|
|
canCreateCopy={this.props.canCreateCopy}
|
2018-10-16 10:49:35 -04:00
|
|
|
canCreateNew={this.props.canCreateNew}
|
2018-11-09 22:09:28 -05:00
|
|
|
canEditTitle={this.props.isEditable}
|
2018-10-16 10:49:35 -04:00
|
|
|
canRemix={this.props.canRemix}
|
|
|
|
canSave={this.props.canSave}
|
|
|
|
canShare={this.props.canShare}
|
2018-09-24 11:04:30 -04:00
|
|
|
className="gui"
|
2018-10-29 01:05:36 -04:00
|
|
|
cloudHost={this.props.cloudHost}
|
2018-10-19 16:02:59 -04:00
|
|
|
enableCommunity={this.props.enableCommunity}
|
2018-10-24 18:13:57 -04:00
|
|
|
isShared={this.props.isShared}
|
2018-09-24 11:04:30 -04:00
|
|
|
projectHost={this.props.projectHost}
|
|
|
|
projectId={this.state.projectId}
|
|
|
|
projectTitle={this.props.projectInfo.title}
|
|
|
|
renderLogin={this.renderLogin}
|
|
|
|
onLogOut={this.props.handleLogOut}
|
|
|
|
onOpenRegistration={this.props.handleOpenRegistration}
|
2018-10-19 09:34:16 -04:00
|
|
|
onSetLanguage={this.handleSetLanguage}
|
2018-09-26 21:42:44 -04:00
|
|
|
onShare={this.handleShare}
|
2018-09-24 11:04:30 -04:00
|
|
|
onToggleLoginOpen={this.props.handleToggleLoginOpen}
|
2018-10-19 16:02:59 -04:00
|
|
|
onUpdateProjectId={this.handleUpdateProjectId}
|
2018-09-24 11:04:30 -04:00
|
|
|
onUpdateProjectTitle={this.handleUpdateProjectTitle}
|
|
|
|
/>
|
|
|
|
<Registration />
|
|
|
|
<CanceledDeletionModal />
|
|
|
|
</React.Fragment>
|
|
|
|
|
2018-02-20 17:04:45 -05:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-08 15:57:19 -05:00
|
|
|
Preview.propTypes = {
|
2018-07-12 10:01:27 -04:00
|
|
|
assetHost: PropTypes.string.isRequired,
|
2018-11-14 06:42:57 -05:00
|
|
|
// If there's no author, this will be false`
|
2018-11-07 12:59:16 -05:00
|
|
|
authorId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
2018-11-09 22:09:28 -05:00
|
|
|
authorThumbnailUrl: PropTypes.string,
|
2018-11-14 06:42:57 -05:00
|
|
|
// If there's no author, this will be false`
|
2018-11-07 12:59:16 -05:00
|
|
|
authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
2018-11-08 13:19:12 -05:00
|
|
|
backpackHost: PropTypes.string,
|
2018-10-16 10:49:35 -04:00
|
|
|
canAddToStudio: PropTypes.bool,
|
2018-10-23 12:30:41 -04:00
|
|
|
canCreateCopy: PropTypes.bool,
|
2018-10-16 10:49:35 -04:00
|
|
|
canCreateNew: PropTypes.bool,
|
|
|
|
canRemix: PropTypes.bool,
|
|
|
|
canReport: PropTypes.bool,
|
|
|
|
canSave: PropTypes.bool,
|
|
|
|
canShare: PropTypes.bool,
|
2018-11-08 13:19:12 -05:00
|
|
|
canUseBackpack: PropTypes.bool,
|
2018-10-29 01:05:36 -04:00
|
|
|
cloudHost: PropTypes.string,
|
2018-03-15 17:40:16 -04:00
|
|
|
comments: PropTypes.arrayOf(PropTypes.object),
|
2018-10-19 16:02:59 -04:00
|
|
|
enableCommunity: PropTypes.bool,
|
2018-05-24 09:57:06 -04:00
|
|
|
faved: PropTypes.bool,
|
2018-05-28 13:12:26 -04:00
|
|
|
fullScreen: PropTypes.bool,
|
2018-10-24 10:23:28 -04:00
|
|
|
getCommentById: PropTypes.func.isRequired,
|
2018-07-25 15:08:12 -04:00
|
|
|
getCuratedStudios: PropTypes.func.isRequired,
|
2018-05-24 09:57:06 -04:00
|
|
|
getFavedStatus: PropTypes.func.isRequired,
|
|
|
|
getLovedStatus: PropTypes.func.isRequired,
|
|
|
|
getOriginalInfo: PropTypes.func.isRequired,
|
|
|
|
getParentInfo: PropTypes.func.isRequired,
|
|
|
|
getProjectInfo: PropTypes.func.isRequired,
|
2018-07-04 18:01:11 -04:00
|
|
|
getProjectStudios: PropTypes.func.isRequired,
|
2018-07-25 15:08:12 -04:00
|
|
|
getRemixes: PropTypes.func.isRequired,
|
2018-08-06 11:52:18 -04:00
|
|
|
getTopLevelComments: PropTypes.func.isRequired,
|
2018-10-04 15:02:59 -04:00
|
|
|
handleAddComment: PropTypes.func,
|
2018-10-03 13:21:36 -04:00
|
|
|
handleDeleteComment: PropTypes.func,
|
2018-09-24 11:04:30 -04:00
|
|
|
handleLogIn: PropTypes.func,
|
|
|
|
handleLogOut: PropTypes.func,
|
|
|
|
handleOpenRegistration: PropTypes.func,
|
2018-10-09 11:38:24 -04:00
|
|
|
handleReportComment: PropTypes.func,
|
2018-10-16 10:00:38 -04:00
|
|
|
handleRestoreComment: PropTypes.func,
|
2018-09-24 11:04:30 -04:00
|
|
|
handleToggleLoginOpen: PropTypes.func,
|
2018-10-16 09:13:39 -04:00
|
|
|
isAdmin: PropTypes.bool,
|
2018-09-24 11:04:30 -04:00
|
|
|
isEditable: PropTypes.bool,
|
|
|
|
isLoggedIn: PropTypes.bool,
|
|
|
|
isShared: PropTypes.bool,
|
2018-05-24 09:57:06 -04:00
|
|
|
loved: PropTypes.bool,
|
2018-10-24 09:18:45 -04:00
|
|
|
moreCommentsToLoad: PropTypes.bool,
|
2018-05-28 15:32:23 -04:00
|
|
|
original: projectShape,
|
|
|
|
parent: projectShape,
|
2018-05-24 16:23:07 -04:00
|
|
|
playerMode: PropTypes.bool,
|
2018-07-12 10:01:27 -04:00
|
|
|
projectHost: PropTypes.string.isRequired,
|
2018-08-16 17:32:24 -04:00
|
|
|
projectInfo: projectShape,
|
2018-11-07 16:32:12 -05:00
|
|
|
projectNotAvailable: PropTypes.bool,
|
2018-07-25 15:08:12 -04:00
|
|
|
projectStudios: PropTypes.arrayOf(PropTypes.object),
|
2018-03-15 17:40:16 -04:00
|
|
|
remixes: PropTypes.arrayOf(PropTypes.object),
|
2018-08-06 11:52:18 -04:00
|
|
|
replies: PropTypes.objectOf(PropTypes.array),
|
2018-08-02 17:54:43 -04:00
|
|
|
reportProject: PropTypes.func,
|
2018-10-19 16:02:59 -04:00
|
|
|
resetProject: PropTypes.func,
|
2018-03-08 15:57:19 -05:00
|
|
|
sessionStatus: PropTypes.string,
|
2018-04-24 11:00:47 -04:00
|
|
|
setFavedStatus: PropTypes.func.isRequired,
|
2018-05-24 16:23:07 -04:00
|
|
|
setFullScreen: PropTypes.func.isRequired,
|
2018-04-24 11:00:47 -04:00
|
|
|
setLovedStatus: PropTypes.func.isRequired,
|
2018-05-24 16:23:07 -04:00
|
|
|
setPlayer: PropTypes.func.isRequired,
|
2018-11-13 08:49:37 -05:00
|
|
|
shareProject: PropTypes.func.isRequired,
|
2018-07-25 15:08:12 -04:00
|
|
|
toggleStudio: PropTypes.func.isRequired,
|
2018-04-24 11:00:47 -04:00
|
|
|
updateProject: PropTypes.func.isRequired,
|
2018-03-08 15:57:19 -05:00
|
|
|
user: PropTypes.shape({
|
|
|
|
id: PropTypes.number,
|
|
|
|
banned: PropTypes.bool,
|
|
|
|
username: PropTypes.string,
|
|
|
|
token: PropTypes.string,
|
|
|
|
thumbnailUrl: PropTypes.string,
|
|
|
|
dateJoined: PropTypes.string,
|
|
|
|
email: PropTypes.string,
|
|
|
|
classroomId: PropTypes.string
|
2018-09-24 11:04:30 -04:00
|
|
|
}),
|
2018-10-19 16:02:59 -04:00
|
|
|
userOwnsProject: PropTypes.bool,
|
|
|
|
userPresent: PropTypes.bool
|
2018-03-08 15:57:19 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
Preview.defaultProps = {
|
2018-07-12 10:01:27 -04:00
|
|
|
assetHost: process.env.ASSET_HOST,
|
2018-11-08 13:19:12 -05:00
|
|
|
backpackHost: process.env.BACKPACK_HOST,
|
|
|
|
canUseBackpack: false,
|
2018-10-29 01:05:36 -04:00
|
|
|
cloudHost: process.env.CLOUDDATA_HOST,
|
2018-07-12 10:01:27 -04:00
|
|
|
projectHost: process.env.PROJECT_HOST,
|
2018-03-08 15:57:19 -05:00
|
|
|
sessionStatus: sessionActions.Status.NOT_FETCHED,
|
2018-10-19 16:02:59 -04:00
|
|
|
user: {},
|
|
|
|
userPresent: false
|
2018-03-08 15:57:19 -05:00
|
|
|
};
|
|
|
|
|
2018-09-24 11:04:30 -04:00
|
|
|
const mapStateToProps = state => {
|
2018-10-22 06:59:58 -04:00
|
|
|
const projectInfoPresent = state.preview.projectInfo &&
|
|
|
|
Object.keys(state.preview.projectInfo).length > 0 && state.preview.projectInfo.id > 0;
|
2018-10-19 16:02:59 -04:00
|
|
|
const userPresent = state.session.session.user !== null &&
|
|
|
|
typeof state.session.session.user !== 'undefined' &&
|
2018-09-24 11:04:30 -04:00
|
|
|
Object.keys(state.session.session.user).length > 0;
|
|
|
|
const isLoggedIn = state.session.status === sessionActions.Status.FETCHED &&
|
|
|
|
userPresent;
|
2018-10-16 09:13:39 -04:00
|
|
|
const isAdmin = isLoggedIn && state.session.session.permissions.admin;
|
2018-11-07 12:59:16 -05:00
|
|
|
const author = projectInfoPresent && state.preview.projectInfo.author;
|
|
|
|
const authorPresent = author && Object.keys(state.preview.projectInfo.author).length > 0;
|
|
|
|
const authorId = authorPresent && author.id && author.id.toString();
|
|
|
|
const authorUsername = authorPresent && author.username;
|
2018-10-16 10:49:35 -04:00
|
|
|
const userOwnsProject = isLoggedIn && authorPresent &&
|
2018-11-07 12:59:16 -05:00
|
|
|
state.session.session.user.id.toString() === authorId;
|
2018-09-24 11:04:30 -04:00
|
|
|
|
|
|
|
return {
|
2018-11-07 12:59:16 -05:00
|
|
|
authorId: authorId,
|
2018-11-09 22:09:28 -05:00
|
|
|
authorThumbnailUrl: thumbnailUrl(authorId),
|
2018-11-07 12:59:16 -05:00
|
|
|
authorUsername: authorUsername,
|
2018-10-22 06:59:58 -04:00
|
|
|
canAddToStudio: userOwnsProject,
|
2018-10-23 12:30:41 -04:00
|
|
|
canCreateCopy: userOwnsProject && projectInfoPresent,
|
2018-10-23 00:38:23 -04:00
|
|
|
canCreateNew: isLoggedIn,
|
2018-10-22 06:59:58 -04:00
|
|
|
canRemix: isLoggedIn && projectInfoPresent && !userOwnsProject,
|
2018-10-16 10:49:35 -04:00
|
|
|
canReport: isLoggedIn && !userOwnsProject,
|
2018-10-23 00:38:23 -04:00
|
|
|
canSave: isLoggedIn && userOwnsProject,
|
2018-10-16 10:49:35 -04:00
|
|
|
canShare: userOwnsProject && state.permissions.social,
|
2018-11-08 13:19:12 -05:00
|
|
|
canUseBackpack: isLoggedIn,
|
2018-09-24 11:04:30 -04:00
|
|
|
comments: state.preview.comments,
|
2018-10-22 06:59:58 -04:00
|
|
|
enableCommunity: projectInfoPresent,
|
2018-09-24 11:04:30 -04:00
|
|
|
faved: state.preview.faved,
|
|
|
|
fullScreen: state.scratchGui.mode.isFullScreen,
|
|
|
|
// project is editable iff logged in user is the author of the project, or
|
|
|
|
// logged in user is an admin.
|
|
|
|
isEditable: isLoggedIn &&
|
2018-11-07 12:59:16 -05:00
|
|
|
(authorUsername === state.session.session.user.username ||
|
2018-09-24 11:04:30 -04:00
|
|
|
state.permissions.admin === true),
|
|
|
|
isLoggedIn: isLoggedIn,
|
2018-10-16 09:13:39 -04:00
|
|
|
isAdmin: isAdmin,
|
2018-09-24 11:04:30 -04:00
|
|
|
// if we don't have projectInfo, assume it's shared until we know otherwise
|
2018-10-16 11:38:26 -04:00
|
|
|
isShared: !projectInfoPresent || state.preview.projectInfo.is_published,
|
2018-09-24 11:04:30 -04:00
|
|
|
loved: state.preview.loved,
|
2018-10-24 09:18:45 -04:00
|
|
|
moreCommentsToLoad: state.preview.moreCommentsToLoad,
|
2018-09-24 11:04:30 -04:00
|
|
|
original: state.preview.original,
|
|
|
|
parent: state.preview.parent,
|
|
|
|
playerMode: state.scratchGui.mode.isPlayerOnly,
|
|
|
|
projectInfo: state.preview.projectInfo,
|
2018-11-07 16:32:12 -05:00
|
|
|
projectNotAvailable: state.preview.projectNotAvailable,
|
2018-09-24 11:04:30 -04:00
|
|
|
projectStudios: state.preview.projectStudios,
|
|
|
|
remixes: state.preview.remixes,
|
|
|
|
replies: state.preview.replies,
|
|
|
|
sessionStatus: state.session.status, // check if used
|
|
|
|
user: state.session.session.user,
|
2018-10-19 16:02:59 -04:00
|
|
|
userOwnsProject: userOwnsProject,
|
|
|
|
userPresent: userPresent
|
2018-09-24 11:04:30 -04:00
|
|
|
};
|
|
|
|
};
|
2018-03-08 15:57:19 -05:00
|
|
|
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
2018-10-05 13:08:51 -04:00
|
|
|
handleAddComment: (comment, topLevelCommentId) => {
|
|
|
|
dispatch(previewActions.addNewComment(comment, topLevelCommentId));
|
2018-10-04 15:02:59 -04:00
|
|
|
},
|
2018-10-05 13:08:51 -04:00
|
|
|
handleDeleteComment: (projectId, commentId, topLevelCommentId, token) => {
|
|
|
|
dispatch(previewActions.deleteComment(projectId, commentId, topLevelCommentId, token));
|
2018-10-03 13:21:36 -04:00
|
|
|
},
|
2018-10-09 11:38:24 -04:00
|
|
|
handleReportComment: (projectId, commentId, topLevelCommentId, token) => {
|
|
|
|
dispatch(previewActions.reportComment(projectId, commentId, topLevelCommentId, token));
|
|
|
|
},
|
2018-10-16 10:00:38 -04:00
|
|
|
handleRestoreComment: (projectId, commentId, topLevelCommentId, token) => {
|
|
|
|
dispatch(previewActions.restoreComment(projectId, commentId, topLevelCommentId, token));
|
|
|
|
},
|
2018-09-24 11:04:30 -04:00
|
|
|
handleOpenRegistration: event => {
|
|
|
|
event.preventDefault();
|
|
|
|
dispatch(navigationActions.setRegistrationOpen(true));
|
|
|
|
},
|
|
|
|
handleLogIn: (formData, callback) => {
|
|
|
|
dispatch(navigationActions.handleLogIn(formData, callback));
|
|
|
|
},
|
|
|
|
handleLogOut: event => {
|
|
|
|
event.preventDefault();
|
|
|
|
dispatch(navigationActions.handleLogOut());
|
|
|
|
},
|
|
|
|
handleToggleLoginOpen: event => {
|
|
|
|
event.preventDefault();
|
|
|
|
dispatch(navigationActions.toggleLoginOpen());
|
|
|
|
},
|
2018-05-24 09:57:06 -04:00
|
|
|
getOriginalInfo: id => {
|
|
|
|
dispatch(previewActions.getOriginalInfo(id));
|
|
|
|
},
|
|
|
|
getParentInfo: id => {
|
|
|
|
dispatch(previewActions.getParentInfo(id));
|
2018-03-14 15:50:27 -04:00
|
|
|
},
|
2018-04-24 11:00:47 -04:00
|
|
|
getProjectInfo: (id, token) => {
|
|
|
|
dispatch(previewActions.getProjectInfo(id, token));
|
2018-03-14 15:50:27 -04:00
|
|
|
},
|
2018-03-15 17:40:16 -04:00
|
|
|
getRemixes: id => {
|
2018-03-14 15:50:27 -04:00
|
|
|
dispatch(previewActions.getRemixes(id));
|
|
|
|
},
|
2018-07-04 18:01:11 -04:00
|
|
|
getProjectStudios: id => {
|
|
|
|
dispatch(previewActions.getProjectStudios(id));
|
|
|
|
},
|
|
|
|
getCuratedStudios: (username, token) => {
|
|
|
|
dispatch(previewActions.getCuratedStudios(username, token));
|
2018-04-24 11:00:47 -04:00
|
|
|
},
|
2018-07-13 09:50:17 -04:00
|
|
|
toggleStudio: (isAdd, studioId, id, token) => {
|
|
|
|
if (isAdd === true) {
|
|
|
|
dispatch(previewActions.addToStudio(studioId, id, token));
|
|
|
|
} else {
|
|
|
|
dispatch(previewActions.leaveStudio(studioId, id, token));
|
|
|
|
}
|
2018-07-11 15:08:01 -04:00
|
|
|
},
|
2018-10-16 09:13:39 -04:00
|
|
|
getTopLevelComments: (id, offset, isAdmin, token) => {
|
|
|
|
dispatch(previewActions.getTopLevelComments(id, offset, isAdmin, token));
|
2018-08-06 11:52:18 -04:00
|
|
|
},
|
2018-10-24 10:23:28 -04:00
|
|
|
getCommentById: (projectId, commentId, isAdmin, token) => {
|
|
|
|
dispatch(previewActions.getCommentById(projectId, commentId, isAdmin, token));
|
|
|
|
},
|
2018-04-24 11:00:47 -04:00
|
|
|
getFavedStatus: (id, username, token) => {
|
|
|
|
dispatch(previewActions.getFavedStatus(id, username, token));
|
|
|
|
},
|
|
|
|
setFavedStatus: (faved, id, username, token) => {
|
2018-05-30 14:39:25 -04:00
|
|
|
dispatch(previewActions.setFavedStatus(faved, id, username, token));
|
2018-04-24 11:00:47 -04:00
|
|
|
},
|
|
|
|
getLovedStatus: (id, username, token) => {
|
|
|
|
dispatch(previewActions.getLovedStatus(id, username, token));
|
|
|
|
},
|
|
|
|
setLovedStatus: (loved, id, username, token) => {
|
|
|
|
dispatch(previewActions.setLovedStatus(loved, id, username, token));
|
|
|
|
},
|
2018-11-13 08:49:37 -05:00
|
|
|
shareProject: (id, token) => {
|
|
|
|
dispatch(previewActions.shareProject(id, token));
|
|
|
|
},
|
2018-10-15 11:17:40 -04:00
|
|
|
reportProject: (id, formData, token) => {
|
|
|
|
dispatch(previewActions.reportProject(id, formData, token));
|
2018-08-02 17:54:43 -04:00
|
|
|
},
|
2018-10-19 16:02:59 -04:00
|
|
|
resetProject: () => {
|
|
|
|
dispatch(previewActions.resetProject());
|
|
|
|
},
|
2018-05-24 09:57:06 -04:00
|
|
|
setOriginalInfo: info => {
|
|
|
|
dispatch(previewActions.setOriginalInfo(info));
|
|
|
|
},
|
|
|
|
setParentInfo: info => {
|
|
|
|
dispatch(previewActions.setParentInfo(info));
|
2018-03-14 15:50:27 -04:00
|
|
|
},
|
2018-04-24 11:00:47 -04:00
|
|
|
updateProject: (id, formData, username, token) => {
|
|
|
|
dispatch(previewActions.updateProject(id, formData, username, token));
|
2018-05-24 16:23:07 -04:00
|
|
|
},
|
|
|
|
setPlayer: player => {
|
|
|
|
dispatch(GUI.setPlayer(player));
|
|
|
|
},
|
|
|
|
setFullScreen: fullscreen => {
|
|
|
|
dispatch(GUI.setFullScreen(fullscreen));
|
2018-03-08 15:57:19 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const ConnectedPreview = connect(
|
|
|
|
mapStateToProps,
|
|
|
|
mapDispatchToProps
|
|
|
|
)(Preview);
|
|
|
|
|
2018-05-24 16:23:07 -04:00
|
|
|
GUI.setAppElement(document.getElementById('app'));
|
|
|
|
const initGuiState = guiInitialState => {
|
|
|
|
const pathname = window.location.pathname.toLowerCase();
|
|
|
|
const parts = pathname.split('/').filter(Boolean);
|
|
|
|
// parts[0]: 'preview'
|
|
|
|
// parts[1]: either :id or 'editor'
|
|
|
|
// parts[2]: undefined if no :id, otherwise either 'editor' or 'fullscreen'
|
|
|
|
if (parts.indexOf('editor') === -1) {
|
|
|
|
guiInitialState = GUI.initPlayer(guiInitialState);
|
|
|
|
}
|
|
|
|
if (parts.indexOf('fullscreen') !== -1) {
|
|
|
|
guiInitialState = GUI.initFullScreen(guiInitialState);
|
|
|
|
}
|
|
|
|
return guiInitialState;
|
|
|
|
};
|
|
|
|
|
2018-03-14 15:50:27 -04:00
|
|
|
render(
|
2018-05-02 15:27:49 -04:00
|
|
|
<ConnectedPreview />,
|
2018-03-14 15:50:27 -04:00
|
|
|
document.getElementById('app'),
|
2018-05-24 16:23:07 -04:00
|
|
|
{
|
|
|
|
preview: previewActions.previewReducer,
|
|
|
|
...GUI.guiReducers
|
|
|
|
},
|
2018-10-19 09:34:16 -04:00
|
|
|
{
|
|
|
|
locales: GUI.initLocale(GUI.localesInitialState, window._locale),
|
|
|
|
scratchGui: initGuiState(GUI.guiInitialState)
|
|
|
|
},
|
2018-05-24 16:23:07 -04:00
|
|
|
GUI.guiMiddleware
|
2018-03-14 15:50:27 -04:00
|
|
|
);
|