feat: get language for space from space itself

If the language is defined at the space level, then use that language,
otherwise fall back to the settings for the desktop application, or
in the worst case scenario to the default language, which is currently
English.

closes #80

public/electron.js

@@ -37,6 +37,7 @@ const {
   VAR_FOLDER,
   DATABASE_PATH,
   TEMPORARY_EXTRACT_FOLDER,
+  DEFAULT_LANG,
 } = require('./app/config/config');
 const {
   LOAD_SPACE_CHANNEL,
@@ -258,8 +259,7 @@ app.on('ready', async () => {
     try {
       // get handle to spaces collection
       const spaces = db.get(SPACES_COLLECTION);
-      const lang = db.get('user.lang').value();
-      const { id } = space;
+      const { id, language } = space;
       const existingSpace = spaces.find({ id }).value();
 
       if (existingSpace) {
@@ -285,6 +285,11 @@ app.on('ready', async () => {
 
       const spacePath = id;
 
+      // use language defined in space otherwise fall back on
+      // user language, otherwise fall back on the global default
+      const userLang = db.get('user.lang').value();
+      const lang = language || userLang || DEFAULT_LANG;
+
       // todo: follow new format
       // if there is a background/thumbnail image, save it
       if (image) {
@@ -588,7 +593,7 @@ app.on('ready', async () => {
   // called when getting language
   ipcMain.on(GET_LANGUAGE_CHANNEL, () => {
     try {
-      const lang = db.get('user.lang').value();
+      const lang = db.get('user.lang').value() || DEFAULT_LANG;
       mainWindow.webContents.send(GET_LANGUAGE_CHANNEL, lang);
     } catch (e) {
       logger.error(e);

src/components/phase/Phase.js

@@ -37,6 +37,7 @@ class Phase extends Component {
   render() {
     const { phase, space, dispatchSelectPhase, start } = this.props;
     const phases = space.get('phases');
+    const lang = space.get('language');
     const description = space.get('description');
     if (!phase || phase.isEmpty()) {
       return (
@@ -45,6 +46,7 @@ class Phase extends Component {
           description={description}
           selectPhase={dispatchSelectPhase}
           start={start}
+          lang={lang}
         />
       );
     }

src/components/phase/PhaseApp.js

@@ -15,6 +15,11 @@ import {
   postAppInstanceResource,
   getAppInstance,
 } from '../../actions';
+import {
+  DEFAULT_LANGUAGE,
+  SMART_GATEWAY_QUERY_STRING_DIVIDER,
+} from '../../config/constants';
+import { isSmartGatewayUrl } from '../../utils/url';
 
 class PhaseApp extends Component {
   static propTypes = {
@@ -25,12 +30,14 @@ class PhaseApp extends Component {
     id: PropTypes.string.isRequired,
     phaseId: PropTypes.string.isRequired,
     spaceId: PropTypes.string.isRequired,
+    lang: PropTypes.string,
   };
 
   static defaultProps = {
     url: null,
     asset: null,
     name: 'Image',
+    lang: DEFAULT_LANGUAGE,
   };
 
   componentDidMount() {
@@ -74,7 +81,7 @@ class PhaseApp extends Component {
   };
 
   render() {
-    const { url, asset, name, id, folder, spaceId, phaseId } = this.props;
+    const { url, lang, asset, name, id, folder, spaceId, phaseId } = this.props;
     let uri = url;
     if (asset) {
       uri = `file://${folder}/${asset}`;
@@ -83,9 +90,15 @@ class PhaseApp extends Component {
     // todo: get user dynamically, currently we are just using a fake one
     const userId = '5ce422795fe28eeca1001e0a';
 
+    // for some reason, smart gateway urls use `#` instead of `?` as a query string indicator
+    const divider = isSmartGatewayUrl(url)
+      ? SMART_GATEWAY_QUERY_STRING_DIVIDER
+      : '?';
+
     const params = {
       spaceId,
       userId,
+      lang,
       offline: true,
       appInstanceId: id,
       subSpaceId: phaseId,
@@ -98,7 +111,7 @@ class PhaseApp extends Component {
         <iframe
           title={name}
           className="App"
-          src={`${uri}?${queryString}`}
+          src={uri + divider + queryString}
           ref={c => {
             this.iframe = c;
           }}
@@ -108,8 +121,12 @@ class PhaseApp extends Component {
   }
 }
 
-const mapStateToProps = ({ User }) => ({
+const mapStateToProps = ({ User, Space }) => ({
   folder: User.getIn(['current', 'folder']),
+  // get language from space, otherwise fall back on user language
+  lang:
+    Space.getIn(['current', 'content', 'language']) ||
+    User.getIn(['current', 'lang']),
 });
 
 const ConnectedComponent = connect(mapStateToProps)(PhaseApp);

src/components/space/SpaceDescription.js

@@ -2,32 +2,46 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
 import Styles from '../../Styles';
 import './SpaceDescription.css';
+import { DEFAULT_LANGUAGE } from '../../config/constants';
 
-const SpaceDescription = ({ description, classes, start }) => (
-  <div className="SpaceDescription">
-    <div>
-      <h4 style={{ textAlign: 'center' }}>
-        <div dangerouslySetInnerHTML={{ __html: description }} />
-      </h4>
-      <Button
-        variant="contained"
-        className={classes.button}
-        onClick={start}
-        color="primary"
-        style={{ display: 'block', margin: '0 auto' }}
-      >
-        Start
-      </Button>
+const SpaceDescription = ({ description, classes, start, lang }) => {
+  const { i18n } = useTranslation();
+
+  // we use the fixed translation for spaces as they
+  // are meant to be consumed in the predefined language
+  const t = i18n.getFixedT(lang);
+  return (
+    <div className="SpaceDescription">
+      <div>
+        <h4 style={{ textAlign: 'center' }}>
+          <div dangerouslySetInnerHTML={{ __html: description }} />
+        </h4>
+        <Button
+          variant="contained"
+          className={classes.button}
+          onClick={start}
+          color="primary"
+          style={{ display: 'block', margin: '0 auto' }}
+        >
+          {t('Start')}
+        </Button>
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 SpaceDescription.propTypes = {
   description: PropTypes.string.isRequired,
+  lang: PropTypes.string,
   classes: PropTypes.shape({ appBar: PropTypes.string.isRequired }).isRequired,
   start: PropTypes.func.isRequired,
 };
 
+SpaceDescription.defaultProps = {
+  lang: DEFAULT_LANGUAGE,
+};
+
 export default withStyles(Styles, { withTheme: true })(SpaceDescription);

src/config/constants.js

@@ -8,3 +8,5 @@ export const IFRAME = 'application/octet-stream';
 export const DEFAULT_RADIUS = 50;
 export const DEFAULT_LANGUAGE = 'en';
 export const SHORT_ID_LENGTH = 6;
+export const SMART_GATEWAY_HOST = 'gateway.golabz.eu';
+export const SMART_GATEWAY_QUERY_STRING_DIVIDER = '#';

src/langs/en.json

@@ -5,6 +5,7 @@
     "Saved Spaces": "Saved Spaces",
     "Spaces Nearby": "Spaces Nearby",
     "Visit a Space": "Visit a Space",
-    "Load": "Load"
+    "Load": "Load",
+    "Start": "Start"
   }
 }

src/langs/fr.json

@@ -5,6 +5,7 @@
     "Saved Spaces": "Espaces Sauvegardés",
     "Spaces Nearby": "Espaces à Proximité",
     "Visit a Space": "Visiter un Espace",
-    "Load": "Charger un Espace"
+    "Load": "Charger un Espace",
+    "Start": "Démarrer"
   }
 }

src/utils/url.js

@@ -0,0 +1,8 @@
+import { SMART_GATEWAY_HOST } from '../config/constants';
+
+const isSmartGatewayUrl = url => url.includes(SMART_GATEWAY_HOST);
+
+export {
+  // eslint-disable-next-line
+  isSmartGatewayUrl,
+};