diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css index e0695fb618c809e619924479214950458549cec7..f5be66ac215365d68284ab2877ed6b7bdc578c2e 100644 --- a/src/components/stage-header/stage-header.css +++ b/src/components/stage-header/stage-header.css @@ -26,6 +26,12 @@ padding-bottom: $space; } +.embed-scratch-logo img { + height: 1.6rem; + vertical-align: middle; + opacity: .6; +} + .stage-size-row { display: flex; } diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx index 43414179b7b4d4f26454b0ef92d8ed16e6af28be..4084f6bfc3d4add5a48d5834d7c2f45f89cc2e25 100644 --- a/src/components/stage-header/stage-header.jsx +++ b/src/components/stage-header/stage-header.jsx @@ -16,6 +16,7 @@ import largeStageIcon from './icon--large-stage.svg'; import smallStageIcon from './icon--small-stage.svg'; import unFullScreenIcon from './icon--unfullscreen.svg'; +import scratchLogo from '../menu-bar/scratch-logo.svg'; import styles from './stage-header.css'; const messages = defineMessages({ @@ -55,6 +56,7 @@ const StageHeaderComponent = function (props) { onSetStageSmall, onSetStageFull, onSetStageUnFull, + showBranding, stageSizeMode, vm } = props; @@ -63,6 +65,34 @@ const StageHeaderComponent = function (props) { if (isFullScreen) { const stageDimensions = getStageDimensions(null, true); + const stageButton = showBranding ? ( + <div className={styles.embedScratchLogo}> + <a + href="https://scratch.mit.edu" + rel="noopener noreferrer" + target="_blank" + > + <img + alt="Scratch" + src={scratchLogo} + /> + </a> + </div> + ) : ( + <Button + className={styles.stageButton} + onClick={onSetStageUnFull} + onKeyPress={onKeyPress} + > + <img + alt={props.intl.formatMessage(messages.unFullStageSizeMessage)} + className={styles.stageButtonIcon} + draggable={false} + src={unFullScreenIcon} + title={props.intl.formatMessage(messages.fullscreenControl)} + /> + </Button> + ); header = ( <Box className={styles.stageHeaderWrapperOverlay}> <Box @@ -70,19 +100,7 @@ const StageHeaderComponent = function (props) { style={{width: stageDimensions.width}} > <Controls vm={vm} /> - <Button - className={styles.stageButton} - onClick={onSetStageUnFull} - onKeyPress={onKeyPress} - > - <img - alt={props.intl.formatMessage(messages.unFullStageSizeMessage)} - className={styles.stageButtonIcon} - draggable={false} - src={unFullScreenIcon} - title={props.intl.formatMessage(messages.fullscreenControl)} - /> - </Button> + {stageButton} </Box> </Box> ); @@ -171,6 +189,7 @@ StageHeaderComponent.propTypes = { onSetStageLarge: PropTypes.func.isRequired, onSetStageSmall: PropTypes.func.isRequired, onSetStageUnFull: PropTypes.func.isRequired, + showBranding: PropTypes.bool.isRequired, stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)), vm: PropTypes.instanceOf(VM).isRequired }; diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx index 11ffab43364bef2e843d7211a7b0bac15cf202f9..46d2a2343c66b078942af82f99317747cbcab500 100644 --- a/src/containers/stage-header.jsx +++ b/src/containers/stage-header.jsx @@ -46,12 +46,14 @@ StageHeader.propTypes = { isFullScreen: PropTypes.bool, isPlayerOnly: PropTypes.bool, onSetStageUnFull: PropTypes.func.isRequired, + showBranding: PropTypes.bool, stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)), vm: PropTypes.instanceOf(VM).isRequired }; const mapStateToProps = state => ({ stageSizeMode: state.scratchGui.stageSize.stageSize, + showBranding: state.scratchGui.mode.showBranding, isFullScreen: state.scratchGui.mode.isFullScreen, isPlayerOnly: state.scratchGui.mode.isPlayerOnly }); diff --git a/src/index.js b/src/index.js index fa2855488338451d238be577b033d1881d050ce3..70dda5a90caac2f93fc6e04bdd89722ddab6880e 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import GUI from './containers/gui.jsx'; import AppStateHOC from './lib/app-state-hoc.jsx'; -import GuiReducer, {guiInitialState, guiMiddleware, initFullScreen, initPlayer} from './reducers/gui'; +import GuiReducer, {guiInitialState, guiMiddleware, initEmbedded, initFullScreen, initPlayer} from './reducers/gui'; import LocalesReducer, {localesInitialState, initLocale} from './reducers/locales'; import {ScratchPaintReducer} from 'scratch-paint'; import {setFullScreen, setPlayer} from './reducers/mode'; @@ -20,6 +20,7 @@ export { guiReducers, guiInitialState, guiMiddleware, + initEmbedded, initPlayer, initFullScreen, initLocale, diff --git a/src/reducers/gui.js b/src/reducers/gui.js index 41b5fbce0719880568a8b31dc304f978896b0993..3aa24e7d864cb497d1db14833ff7c8db8f70096f 100644 --- a/src/reducers/gui.js +++ b/src/reducers/gui.js @@ -83,6 +83,19 @@ const initFullScreen = function (currentState) { ); }; +const initEmbedded = function (currentState) { + return Object.assign( + {}, + currentState, + {mode: { + showBranding: true, + isFullScreen: true, + isPlayerOnly: true, + hasEverEnteredEditor: false + }} + ); +}; + const initTutorialCard = function (currentState, deckId) { return Object.assign( {}, @@ -145,6 +158,7 @@ export { guiReducer as default, guiInitialState, guiMiddleware, + initEmbedded, initFullScreen, initPlayer, initPreviewInfo, diff --git a/src/reducers/mode.js b/src/reducers/mode.js index 739ae163d93f7221c59387b4c2b57da0524e2230..e07b0cda008ccfe70658157e18b6f453df28020b 100644 --- a/src/reducers/mode.js +++ b/src/reducers/mode.js @@ -2,6 +2,7 @@ const SET_FULL_SCREEN = 'scratch-gui/mode/SET_FULL_SCREEN'; const SET_PLAYER = 'scratch-gui/mode/SET_PLAYER'; const initialState = { + showBranding: false, isFullScreen: false, isPlayerOnly: false, hasEverEnteredEditor: true