diff --git a/packages/scratch-gui/src/components/gui/gui.jsx b/packages/scratch-gui/src/components/gui/gui.jsx
index 1b128a0943..83ae29ebbc 100644
--- a/packages/scratch-gui/src/components/gui/gui.jsx
+++ b/packages/scratch-gui/src/components/gui/gui.jsx
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import omit from 'lodash.omit';
import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useEffect} from 'react';
import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
import {connect} from 'react-redux';
import MediaQuery from 'react-responsive';
@@ -42,6 +42,7 @@ import codeIcon from './icon--code.svg';
import costumesIcon from './icon--costumes.svg';
import soundsIcon from './icon--sounds.svg';
import DebugModal from '../debug-modal/debug-modal.jsx';
+import {setPlatform} from '../../reducers/platform.js';
const messages = defineMessages({
addExtension: {
@@ -138,6 +139,10 @@ const GUIComponent = props => {
return {children};
}
+ useEffect(() => {
+ props.setPlatform(props.platform);
+ }, [props.platform]);
+
const tabClassNames = {
tabs: styles.tabs,
tab: classNames(tabStyles.reactTabsTab, styles.tab),
@@ -446,10 +451,12 @@ GUIComponent.propTypes = {
onTelemetryModalOptIn: PropTypes.func,
onTelemetryModalOptOut: PropTypes.func,
onToggleLoginOpen: PropTypes.func,
+ platform: PropTypes.string,
renderLogin: PropTypes.func,
showComingSoon: PropTypes.bool,
soundsTabVisible: PropTypes.bool,
stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
+ setPlatform: PropTypes.func,
targetIsStage: PropTypes.bool,
telemetryModalVisible: PropTypes.bool,
theme: PropTypes.string,
@@ -490,6 +497,11 @@ const mapStateToProps = state => ({
theme: state.scratchGui.theme.theme
});
+const mapDispatchToProps = dispatch => ({
+ setPlatform: platform => dispatch(setPlatform(platform))
+});
+
export default injectIntl(connect(
- mapStateToProps
+ mapStateToProps,
+ mapDispatchToProps
)(GUIComponent));
diff --git a/packages/scratch-gui/src/containers/gui.jsx b/packages/scratch-gui/src/containers/gui.jsx
index 65349cf9c2..15717757dc 100644
--- a/packages/scratch-gui/src/containers/gui.jsx
+++ b/packages/scratch-gui/src/containers/gui.jsx
@@ -26,6 +26,8 @@ import {
closeDebugModal
} from '../reducers/modals';
+import {setPlatform} from '../reducers/platform';
+
import FontLoaderHOC from '../lib/font-loader-hoc.jsx';
import LocalizationHOC from '../lib/localization-hoc.jsx';
import SBFileUploaderHOC from '../lib/sb-file-uploader-hoc.jsx';
@@ -49,6 +51,7 @@ class GUI extends React.Component {
this.props.onStorageInit(this.props.storage.scratchStorage);
this.props.onVmInit(this.props.vm);
this.props.storage.setProjectMetadata?.(this.props.projectId);
+ this.props.setPlatform(this.props.platform);
}
componentDidUpdate (prevProps) {
if (this.props.projectId !== prevProps.projectId) {
@@ -94,6 +97,7 @@ class GUI extends React.Component {
...componentProps
} = this.props;
+
return (
{}
};
-const mapStateToProps = state => {
+const mapStateToProps = (state, ownProps) => {
const loadingState = state.scratchGui.projectState.loadingState;
return {
storage: state.scratchGui.config.storage,
@@ -164,6 +170,7 @@ const mapStateToProps = state => {
isRtl: state.locales.isRtl,
isShowingProject: getIsShowingProject(loadingState),
loadingStateVisible: state.scratchGui.modals.loadingProject,
+ platform: ownProps.platform,
projectId: state.scratchGui.projectState.projectId,
soundsTabVisible: state.scratchGui.editorTab.activeTabIndex === SOUNDS_TAB_INDEX,
targetIsStage: (
@@ -181,6 +188,7 @@ const mapDispatchToProps = dispatch => ({
onActivateTab: tab => dispatch(activateTab(tab)),
onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
+ setPlatform: platform => dispatch(setPlatform(platform)),
onRequestCloseBackdropLibrary: () => dispatch(closeBackdropLibrary()),
onRequestCloseCostumeLibrary: () => dispatch(closeCostumeLibrary()),
onRequestCloseDebugModal: () => dispatch(closeDebugModal()),
diff --git a/packages/scratch-gui/src/lib/platform.js b/packages/scratch-gui/src/lib/platform.js
new file mode 100644
index 0000000000..d4636747f7
--- /dev/null
+++ b/packages/scratch-gui/src/lib/platform.js
@@ -0,0 +1,5 @@
+export const PLATFORM = {
+ DESKTOP: 'DESKTOP',
+ WEB: 'WEB',
+ ANDROID: 'ANDROID'
+};
diff --git a/packages/scratch-gui/src/reducers/gui.ts b/packages/scratch-gui/src/reducers/gui.ts
index 3273c8746c..d1b2ad5745 100644
--- a/packages/scratch-gui/src/reducers/gui.ts
+++ b/packages/scratch-gui/src/reducers/gui.ts
@@ -14,6 +14,7 @@ import modalReducer, {modalsInitialState} from './modals';
import modeReducer, {modeInitialState} from './mode';
import monitorReducer, {monitorsInitialState} from './monitors';
import monitorLayoutReducer, {monitorLayoutInitialState} from './monitor-layout';
+import platformReducer, {platformInitialState} from './platform';
import projectChangedReducer, {projectChangedInitialState} from './project-changed';
import projectStateReducer, {projectStateInitialState} from './project-state';
import projectTitleReducer, {projectTitleInitialState} from './project-title';
@@ -53,6 +54,7 @@ const buildInitialState = (config: GUIConfig) => ({
modals: modalsInitialState,
monitors: monitorsInitialState,
monitorLayout: monitorLayoutInitialState,
+ platform: platformInitialState,
projectChanged: projectChangedInitialState,
projectState: projectStateInitialState,
projectTitle: projectTitleInitialState,
@@ -161,6 +163,7 @@ const guiReducer = combineReducers({
modals: modalReducer,
monitors: monitorReducer,
monitorLayout: monitorLayoutReducer,
+ platform: platformReducer,
projectChanged: projectChangedReducer,
projectState: projectStateReducer,
projectTitle: projectTitleReducer,
diff --git a/packages/scratch-gui/src/reducers/platform.js b/packages/scratch-gui/src/reducers/platform.js
new file mode 100644
index 0000000000..3d29972b59
--- /dev/null
+++ b/packages/scratch-gui/src/reducers/platform.js
@@ -0,0 +1,32 @@
+import {PLATFORM} from '../lib/platform.js';
+
+const SET_PLATFORM = 'scratch-gui/Platform/SET_PLATFORM';
+
+const initialState = {
+ platform: PLATFORM.WEB
+};
+
+const reducer = function (state, action) {
+ if (typeof state === 'undefined') state = initialState;
+ switch (action.type) {
+ case SET_PLATFORM:
+ return {
+ platform: action.platform
+ };
+ default:
+ return state;
+ }
+};
+
+const setPlatform = function (platform) {
+ return {
+ type: SET_PLATFORM,
+ platform: platform
+ };
+};
+
+export {
+ reducer as default,
+ initialState as platformInitialState,
+ setPlatform
+};