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