feat: [UEPR-163] Add platform prop

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 <Box {...componentProps}>{children}</Box>;
     }
 
+    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));

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 (
             <GUIComponent
                 loading={fetchingProject || isLoading || loadingStateVisible}
@@ -125,6 +129,8 @@ GUI.propTypes = {
     onStorageInit: PropTypes.func,
     onUpdateProjectId: PropTypes.func,
     onVmInit: PropTypes.func,
+    platform: PropTypes.string,
+    setPlatform: PropTypes.func.isRequired,
     projectHost: PropTypes.string,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     shouldStopProject: PropTypes.bool,
@@ -144,7 +150,7 @@ GUI.defaultProps = {
     onVmInit: (/* vm */) => {}
 };
 
-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()),

packages/scratch-gui/src/lib/platform.js

@@ -0,0 +1,5 @@
+export const PLATFORM = {
+    DESKTOP: 'DESKTOP',
+    WEB: 'WEB',
+    ANDROID: 'ANDROID'
+};

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,

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