Merge pull request #266 from scratchfoundation/ipr-799-allow-embedding

feat: allow using editor in embedded mode

Author: KManolov3

packages/scratch-gui/src/exported-reducers.ts

@@ -1,7 +1,7 @@
 import {ScratchPaintReducer} from 'scratch-paint';
 import LocalesReducer, {localesInitialState, initLocale} from './reducers/locales.js';
 import GuiReducer, {buildInitialState, guiMiddleware, initEmbedded, initFullScreen, initPlayer} from './reducers/gui';
-import {setFullScreen, setPlayer} from './reducers/mode.js';
+import {setFullScreen, setPlayer, setEmbedded} from './reducers/mode.js';
 import {activateDeck} from './reducers/cards.js';
 import {
     LoadingStates,
@@ -48,5 +48,6 @@ export {
     localesInitialState,
     setFullScreen,
     setPlayer,
+    setEmbedded,
     activateDeck
 };

packages/scratch-gui/src/lib/app-state-hoc.jsx

@@ -27,7 +27,8 @@ const AppStateHOC = function (WrappedComponent, localesOnly, configFactory) {
                 localesOnly,
                 isFullScreen: props.isFullScreen,
                 isPlayerOnly: props.isPlayerOnly,
-                showTelemetryModal: props.showTelemetryModal
+                showTelemetryModal: props.showTelemetryModal,
+                isEmbedded: props.isEmbedded
             }, configFactory);
         }
 
@@ -45,7 +46,8 @@ const AppStateHOC = function (WrappedComponent, localesOnly, configFactory) {
         isFullScreen: PropTypes.bool,
         isPlayerOnly: PropTypes.bool,
         isTelemetryEnabled: PropTypes.bool,
-        showTelemetryModal: PropTypes.bool
+        showTelemetryModal: PropTypes.bool,
+        isEmbedded: PropTypes.bool
     };
     return AppStateWrapper;
 };

packages/scratch-gui/src/lib/app-state-provider-hoc.jsx

@@ -3,7 +3,7 @@ import {Provider} from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {EditorState} from './editor-state';
-import {setPlayer, setFullScreen} from '../reducers/mode.js';
+import {setPlayer, setFullScreen, setEmbedded} from '../reducers/mode.js';
 import ConnectedIntlProvider from './connected-intl-provider.jsx';
 
 /**
@@ -23,6 +23,9 @@ export const AppStateProviderHOC = function (WrappedComponent) {
             if (prevProps.isFullScreen !== this.props.isFullScreen) {
                 this.props.appState.store.dispatch(setFullScreen(this.props.isFullScreen));
             }
+            if (prevProps.isEmbedded !== this.props.isEmbedded) {
+                this.props.appState.store.dispatch(setEmbedded(this.props.isEmbedded));
+            }
         }
 
         render () {
@@ -31,6 +34,7 @@ export const AppStateProviderHOC = function (WrappedComponent) {
                 isFullScreen, // eslint-disable-line no-unused-vars
                 isPlayerOnly, // eslint-disable-line no-unused-vars
                 showTelemetryModal, // eslint-disable-line no-unused-vars
+                isEmbedded, // eslint-disable-line no-unused-vars
                 ...componentProps
             } = this.props;
             return (
@@ -50,7 +54,8 @@ export const AppStateProviderHOC = function (WrappedComponent) {
         isFullScreen: PropTypes.bool,
         isPlayerOnly: PropTypes.bool,
         isTelemetryEnabled: PropTypes.bool,
-        showTelemetryModal: PropTypes.bool
+        showTelemetryModal: PropTypes.bool,
+        isEmbedded: PropTypes.bool
     };
     return AppStateWrapper;
 };

packages/scratch-gui/src/lib/editor-state.tsx

@@ -20,6 +20,7 @@ export interface EditorStateParams {
     isFullScreen?: boolean;
     isPlayerOnly?: boolean;
     showTelemetryModal?: boolean;
+    isEmbedded?: boolean;
 }
 
 /**
@@ -59,7 +60,8 @@ export class EditorState {
                 guiMiddleware,
                 initFullScreen,
                 initPlayer,
-                initTelemetryModal
+                initTelemetryModal,
+                initEmbedded
             } = guiRedux;
             const {ScratchPaintReducer} = require('scratch-paint');
 
@@ -68,13 +70,16 @@ export class EditorState {
                 require('../legacy-config').legacyConfig;
 
             let initializedGui = buildInitialState(configOrLegacy);
-            if (params.isFullScreen || params.isPlayerOnly) {
+            if (params.isFullScreen || params.isPlayerOnly || params.isEmbedded) {
                 if (params.isFullScreen) {
                     initializedGui = initFullScreen(initializedGui);
                 }
                 if (params.isPlayerOnly) {
                     initializedGui = initPlayer(initializedGui);
                 }
+                if (params.isEmbedded) {
+                    initializedGui = initEmbedded(initializedGui);
+                }
             } else if (params.showTelemetryModal) {
                 initializedGui = initTelemetryModal(initializedGui);
             }

packages/scratch-gui/src/reducers/mode.js

@@ -1,5 +1,6 @@
 const SET_FULL_SCREEN = 'scratch-gui/mode/SET_FULL_SCREEN';
 const SET_PLAYER = 'scratch-gui/mode/SET_PLAYER';
+const SET_EMBEDDED = 'scratch-gui/mode/SET_EMBEDDED';
 
 const initialState = {
     showBranding: false,
@@ -20,6 +21,16 @@ const reducer = function (state, action) {
             isPlayerOnly: action.isPlayerOnly,
             hasEverEnteredEditor: state.hasEverEnteredEditor || !action.isPlayerOnly
         });
+    case SET_EMBEDDED:
+        if (action.isEmbedded) {
+            return Object.assign({}, state, {
+                showBranding: true,
+                isFullScreen: true,
+                isPlayerOnly: true,
+                hasEverEnteredEditor: false
+            });
+        }
+        return state;
     default:
         return state;
     }
@@ -37,10 +48,17 @@ const setPlayer = function (isPlayerOnly) {
         isPlayerOnly: isPlayerOnly
     };
 };
+const setEmbedded = function (isEmbedded) {
+    return {
+        type: SET_EMBEDDED,
+        isEmbedded: isEmbedded
+    };
+};
 
 export {
     reducer as default,
     initialState as modeInitialState,
     setFullScreen,
-    setPlayer
+    setPlayer,
+    setEmbedded
 };