From 421d4d0e9ac3a9b5d87e49fa4a3837bff33b1c7c Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Mon, 30 Apr 2018 22:42:16 -0400
Subject: [PATCH] Localization support in camera modal and some code cleanup.
---
src/components/camera-modal/camera-modal.jsx | 65 +++++++++++++++++---
src/containers/camera-modal.jsx | 6 --
src/containers/costume-tab.jsx | 2 +-
3 files changed, 57 insertions(+), 16 deletions(-)
diff --git a/src/components/camera-modal/camera-modal.jsx b/src/components/camera-modal/camera-modal.jsx
index b3f93853b..f9411be11 100644
--- a/src/components/camera-modal/camera-modal.jsx
+++ b/src/components/camera-modal/camera-modal.jsx
@@ -1,22 +1,66 @@
import PropTypes from 'prop-types';
import React from 'react';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
import Box from '../box/box.jsx';
import Modal from '../modal/modal.jsx';
import styles from './camera-modal.css';
import backIcon from './icon--back.svg';
import cameraIcon from '../action-menu/icon--camera.svg';
-const CameraModal = props => (
+const messages = defineMessages({
+ cameraModalTitle: {
+ defaultMessage: 'Take a Photo',
+ description: 'Title for prompt to take a picture (to add as a new costume).',
+ id: 'gui.cameraModal.cameraModalTitle'
+ },
+ loadingCameraMessage: {
+ defaultMessage: 'Loading Camera...',
+ description: 'Notification to the user that the camera is loading',
+ id: 'gui.cameraModal.loadingCameraMessage'
+ },
+ permissionRequest: {
+ defaultMessage: 'We need your permission to use your camera',
+ description: 'Notification to the user that the app needs camera access',
+ id: 'gui.cameraModal.permissionRequest'
+ },
+ retakePhoto: {
+ defaultMessage: 'Retake Photo',
+ description: 'A button that allows the user to take the picture again, replacing the old one',
+ id: 'gui.cameraModal.retakePhoto'
+ },
+ save: {
+ defaultMessage: 'Save',
+ description: 'A button that allows the user to save the photo they took as a costume',
+ id: 'gui.cameraModal.save'
+ },
+ takePhotoButton: {
+ defaultMessage: 'Take Photo',
+ description: 'A button to take a photo',
+ id: 'gui.cameraModal.takePhoto'
+ },
+ loadingCaption: {
+ defaultMessage: 'Loading...',
+ description: 'A caption for a disabled button while the video from the camera is still loading',
+ id: 'gui.cameraModal.loadingCaption'
+ },
+ enableCameraCaption: {
+ defaultMessage: 'Enable Camera',
+ description: 'A caption for a disabled button prompting the user to enable camera access',
+ id: 'gui.cameraModal.enableCameraCaption'
+ }
+});
+
+const CameraModal = ({intl, ...props}) => (
<Modal
className={styles.modalContent}
- contentLabel={'Take a Picture'}
+ contentLabel={intl.formatMessage(messages.cameraModalTitle)}
onRequestClose={props.onCancel}
>
<Box className={styles.body}>
<Box className={styles.cameraFeedContainer}>
<div className={styles.loadingText}>
- {props.access ? 'Loading camera...' :
- 'â†–ï¸ \u00A0We need your permission to use your microphone'}
+ {props.access ? intl.formatMessage(messages.loadingCameraMessage) :
+ `â†–ï¸ \u00A0${intl.formatMessage(messages.permissionRequest)}`}
</div>
<canvas
className={styles.canvas}
@@ -39,12 +83,12 @@ const CameraModal = props => (
<img
draggable={false}
src={backIcon}
- /> Re-take
+ /> {intl.formatMessage(messages.retakePhoto)}
</button>
<button
className={styles.okButton}
onClick={props.onSubmit}
- > Save
+ > {intl.formatMessage(messages.save)}
</button>
</Box> :
<Box className={styles.mainButtonRow}>
@@ -63,10 +107,12 @@ const CameraModal = props => (
<div className={styles.helpText}>
{props.access ?
<span className={props.loaded ? styles.captureText : styles.disabledText}>
- {props.loaded ? 'Take Photo' : 'Loading...'}
+ {props.loaded ?
+ intl.formatMessage(messages.takePhotoButton) :
+ intl.formatMessage(messages.loadingCaption)}
</span> :
<span className={styles.disabledText}>
- {'Enable Camera'}
+ {intl.formatMessage(messages.enableCameraCaption)}
</span>
}
</div>
@@ -81,6 +127,7 @@ CameraModal.propTypes = {
access: PropTypes.bool,
canvasRef: PropTypes.func.isRequired,
capture: PropTypes.string,
+ intl: intlShape.isRequired,
loaded: PropTypes.bool,
onBack: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired,
@@ -88,4 +135,4 @@ CameraModal.propTypes = {
onSubmit: PropTypes.func.isRequired
};
-export default CameraModal;
+export default injectIntl(CameraModal);
diff --git a/src/containers/camera-modal.jsx b/src/containers/camera-modal.jsx
index 68fb411ee..0641b3c61 100644
--- a/src/containers/camera-modal.jsx
+++ b/src/containers/camera-modal.jsx
@@ -21,7 +21,6 @@ class CameraModal extends React.Component {
'handleLoaded',
'handleSubmit',
'setCanvas'
- // 'enableVideo'
]);
this.video = null;
@@ -34,10 +33,7 @@ class CameraModal extends React.Component {
};
}
componentWillUnmount () {
- // const videoDevice = this.props.vm.runtime.ioDevices.video;
- // videoDevice.disableVideo();
this.videoDevice.disableVideo();
- // this.video = null;
}
handleAccess () {
this.setState({access: true});
@@ -73,12 +69,10 @@ class CameraModal extends React.Component {
render () {
return (
<CameraModalComponent
- // vm={this.props.vm}
access={this.state.access}
canvasRef={this.setCanvas}
capture={this.state.capture}
loaded={this.state.loaded}
- // videoRef={this.setVideoInput}
onBack={this.handleBack}
onCancel={this.handleCancel}
onCapture={this.handleCapture}
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index f9d55188c..641d77380 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -252,7 +252,7 @@ class CostumeTab extends React.Component {
title: intl.formatMessage(addFileMessage),
img: fileUploadIcon,
onClick: this.handleFileUploadClick,
- fileAccept: '.svg, .png, .jpg, .jpeg', // coming soon
+ fileAccept: '.svg, .png, .jpg, .jpeg',
fileChange: this.handleCostumeUpload,
fileInput: this.setFileInput
},
--
GitLab