feat: frontend implement sounds on questions & answer

SocialGouv · Jul 6, 2021 · f7c0155 · f7c0155
1 parent 73fa9a8
commit f7c0155
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 7 deletions.
diff --git a/tumeplay-app/src/screens/QuizzScreen.js b/tumeplay-app/src/screens/QuizzScreen.js
@@ -7,6 +7,7 @@ import {EventRegister} from 'react-native-event-listeners';
 import UserService from '../services/User';
 import Tracking from '../services/Tracking';
 import AnswerScreen from './components/quizz/AnswerScreen';
+import TextWithSound from './components/global/TextWithSound';
 import NextButton from './components/quizz/NextButton';
 import AnswerButton from './components/quizz/AnswerButton';
 import QuizService from '../services/Quiz';
@@ -174,9 +175,7 @@ export default function QuizzScreen(props) {
             alignSelf: 'center',
             height: '20%',
           }}>
-          <Text style={Styles.questionText}>
-            {_currentQuestion.text_question}
-          </Text>
+          <TextWithSound sound={process.env.REACT_APP_API_URL + _currentQuestion.sound_question.url} style={Styles.questionText} useUrl>{_currentQuestion.text_question}</TextWithSound>
         </View>
 
         <View style={{paddingBottom: 50, height: '52%'}}>
@@ -189,6 +188,7 @@ export default function QuizzScreen(props) {
                 question={_currentQuestion}
                 lastTokenAmount={lastTokenAmount}
                 setFeedback={setFeedback}
+                sound={_currentQuestion.sound_answer.url}
               />
             )}
           </View>

diff --git a/tumeplay-app/src/screens/components/global/ExpandableText.js b/tumeplay-app/src/screens/components/global/ExpandableText.js
@@ -42,6 +42,8 @@ export default function ExpandableText(props) {
   const isMounted = useIsMounted();
   const _text = useRef();
 
+  const soundIconStyle = props.soundStyle || {position: 'absolute', right: 15, top: 20}
+
   const [play, setPlay] = useState(false);
 
   const soundPicture = require('../../../assets/pictures/sound.png');
@@ -249,7 +251,7 @@ export default function ExpandableText(props) {
               togglePlay(e);
               return false;
             }}
-            style={{position: 'absolute', right: 15, top: 20}}>
+            style={soundIconStyle}>
             <Image
               style={{
                 marginLeft: 10,

diff --git a/tumeplay-app/src/screens/components/global/TextWithSound.js b/tumeplay-app/src/screens/components/global/TextWithSound.js
@@ -6,14 +6,14 @@ import CustomTouchableOpacity from './CustomTouchableOpacity';
 
 TextWithSound.propTypes = {
   sound: PropTypes.string,
+  useUrl: PropTypes.bool,
   children: PropTypes.object,
   style: PropTypes.object,
 };
 export default function TextWithSound(props) {
   const [play, setPlay] = useState(false);
-  const targetSound = props.sound
-    ? require('../../../assets/sounds/' + props.sound)
-    : false;
+  const targetSound = props.sound ? ( props.useUrl ? props.sound : require('../../../assets/sounds/' + props.sound) ) : false;
+
   const soundPicture = require('../../../assets/pictures/sound.png');
 
   function onPlayStart() {

diff --git a/tumeplay-app/src/screens/components/quizz/AnswerScreen.js b/tumeplay-app/src/screens/components/quizz/AnswerScreen.js
@@ -155,6 +155,12 @@ export default function AnswerScreen(props) {
             onReadMore={() => {
               Tracking.knowMoreTriggered('question', content.id);
             }}
+            sound={props.sound}
+            soundStyle={{
+              position: 'absolute',
+              bottom: '10px',
+              left: '0'
+            }}
           />
           <CommentLikesView
             onPressComment={_toggleCommentModal}

diff --git a/tumeplay-app/src/services/api/questions.js b/tumeplay-app/src/services/api/questions.js
@@ -18,6 +18,12 @@ export const GET_QUESTIONS = gql`
       image {
         url
       }
+      sound_question {
+        url
+      }
+      sound_answer {
+        url
+      }
     }
   }
 `;